@charset "UTF-8";

/*==================================================
  記事パーツCSS (parts.css)
  Shamham Theme  ― 2026.10 可読性改善版

  構成:
    0. 本文の基本（文字サイズ・行間・段落・リンク・強調・リスト）  ← 新設
    1. 見出し (h1〜h6)
    2. マーカー
    3. ボタン (Cocoonボタン + CTAボタン)
    4. Cocoon標準ボックス (案内・メモ・注意・疑問)
    5. タブ見出しボックス / ラベルボックス (Cocoon)
    6. タブボックス (独自 .tab-box)
    7. CTAボックス (独自 .cta-box)
    8. ランキングボックス (独自 .rank-box)
    9. メリット・デメリット (独自 .merit-box / .demerit-box)
   10. Q&A (独自 .faq)
   11. テーブル / 比較表
   12. 目次 (Cocoon .toc)
   13. 吹き出し (Cocoon 色調整のみ)
   14. 引用・画像キャプション・コード・区切り線  ← 新設
   15. まとめボックス (独自 .summary-box)  ← 新設
   16. ブログカード（記事内リンク）  ← 新設

  カラーは main.css の :root 変数を使用。
  (parts.css は child-main 依存で読み込むこと)

  ※ 見出しは「.body .article hX」で指定しています。
     Cocoonが出力する見出しの余白設定（インラインCSS）より
     確実に優先させるためです。
==================================================*/


/*==================================================
  0. 本文の基本
==================================================*/

/* 文字サイズ: PC 17px / SP 16px（レスポンシブ欄で切替） */
.body .article{
  font-size:17px;
}

.article .entry-content{
  color:var(--text-body);
  line-height:2;
  letter-spacing:.05em;
}

/* Cocoonの「.entry-content > * { line-height }」設定より優先 */
.article .entry-content > :is(p,ul,ol,dl,blockquote){
  line-height:2;
}

.body .article .entry-content p{
  margin-top:0;
  margin-bottom:1.8em;
}

.article .entry-content :is(div,blockquote,li,dd,td) > p:last-child{
  margin-bottom:0;
}

/* 本文リンク: 青＋下線（参考サイトと同じ「迷わずリンクと分かる」表現） */
.article .entry-content :is(p,li,dd,td,th,figcaption):not(.toc li) a:not(.btn):not(.a-wrap):not(.blogcard-wrap):not([class*="button"]){
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.25em;
}

.article .entry-content :is(p,li,dd,td,th,figcaption):not(.toc li) a:not(.btn):not(.a-wrap):not(.blogcard-wrap):not([class*="button"]):hover{
  color:var(--link-hover);
  text-decoration-thickness:2px;
}

/* 強調: 太字＋落ち着いた紺色（本文グレーとの差でメリハリ） */
.article .entry-content :is(strong,b){
  font-weight:700;
  color:var(--strong);
}

/* リスト */
.article .entry-content :is(ul,ol){
  padding-left:1.6em;
}

.article .entry-content :is(ul,ol) li{
  margin:.4em 0;
  line-height:1.9;
}

.article .entry-content :is(ul,ol) li > :is(ul,ol){
  margin-top:.3em;
}

.article .entry-content ul > li::marker{
  color:var(--sky);
}

.article .entry-content ol > li::marker{
  color:var(--ink);
  font-weight:700;
}

/* 画像: 角丸で柔らかく */
.article .entry-content :is(.wp-block-image,figure) img,
.article .eye-catch img{
  border-radius:6px;
}


/*==================================================
  1. 見出し
  h2 = グレーの面＋左のグラデーションバー
  h3 = 行頭のグラデーションひし形＋丸ドットの下線
  h4 = 左の水色ライン
==================================================*/

.article .entry-content :is(h2,h3,h4,h5,h6){
  font-family:var(--font-heading);
  font-feature-settings:"palt";
}

/* h1: 黒の太字で大きく（装飾なし・情報として一番強く） */
.body .article h1.entry-title{
  color:var(--ink);
  background:none;
  -webkit-text-fill-color:currentColor;
  width:auto;
  max-width:100%;
  margin:.3em 0 .8em;
  padding:0;
  font-family:var(--font-heading);
  font-size:30px;
  font-weight:700;
  line-height:1.55;
  letter-spacing:.05em;
  font-feature-settings:"palt";
}

.body .article h2{
  position:relative;
  margin:3.4em 0 1.5em;
  padding:1em 1.2em 1em 1.5em;
  font-size:1.45em;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--gray-bg);
  border:none;
  border-radius:0;
  text-shadow:none;
}

.body .article h2::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  border-radius:0;
  background:var(--grad-bar);
}

.body .article h2::after{
  content:none;
}

.body .article h3{
  position:relative;
  margin:2.8em 0 1.3em;
  padding:.2em .2em .7em 1.6em;
  font-size:1.22em;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.05em;
  color:var(--ink);
  border:none;
  border-image:none;
  /* 下線: ピンク〜紫の丸ドットライン（シャムハム独自のあしらい） */
  background-image:radial-gradient(circle,#e7a3e3 1.3px,transparent 1.8px);
  background-size:9px 6px;
  background-repeat:repeat-x;
  background-position:left bottom;
  background-color:transparent;
}

/* 行頭: グラデーションのひし形アイコン（1行目の高さに揃える） */
.body .article h3::before{
  content:"";
  position:absolute;
  left:.2em;
  top:.78em;
  width:.62em;
  height:.62em;
  border-radius:2px;
  background:linear-gradient(135deg,#f472b6,#a855f7);
  transform:rotate(45deg);
}

.body .article h3::after{
  content:none;
}

.body .article h4{
  margin:2.2em 0 1em;
  padding:.1em 0 .1em .8em;
  font-size:1.1em;
  font-weight:700;
  line-height:1.65;
  letter-spacing:.05em;
  color:var(--ink);
  background:none;
  border:none;
  border-left:4px solid var(--sky);
}

.body .article h5{
  position:relative;
  margin:1.8em 0 .8em;
  padding:.1em 0 .1em 1.3em;
  font-size:1.02em;
  font-weight:700;
  line-height:1.7;
  color:var(--ink);
  background:none;
  border:none;
}

.body .article h5::before{
  content:"";
  position:absolute;
  left:.1em;
  top:.62em;
  transform:none;
  width:10px;
  height:10px;
  border-radius:2px;
  background:var(--sky);
  border:none;
  box-shadow:3px 3px 0 var(--sky-soft);
}

.body .article h6{
  margin:1.6em 0 .7em;
  padding:0 0 .3em;
  font-size:1em;
  font-weight:700;
  line-height:1.7;
  color:var(--text-sub);
  background:none;
  border:none;
  border-bottom:1px dotted #ccc;
}

.article .entry-content :is(h2,h3,h4,h5,h6) + p{
  margin-top:0;
}


/*==================================================
  2. マーカー
  文字の下1/3だけに引いて文字を邪魔しない
==================================================*/

/* Cocoon標準マーカー（ピンク） */
.article .marker{
  background:linear-gradient(transparent 64%,#f8c6f3 64%);
  padding:0 .1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* 追加バリエーション */
.article .marker-purple{
  background:linear-gradient(transparent 64%,#ddd0fb 64%);
}

.article .marker-blue{
  background:linear-gradient(transparent 64%,#c7e6ff 64%);
}

/* 新: イエロー・ミント（追加CSSクラスに marker-yellow / marker-mint） */
.article .marker-yellow{
  background:linear-gradient(transparent 62%,var(--sun-marker) 62%);
}

.article .marker-mint{
  background:linear-gradient(transparent 62%,#cdeff3 62%);
}

:is(.marker-purple,.marker-blue,.marker-yellow,.marker-mint){
  padding:0 .1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}


/*==================================================
  3. ボタン
==================================================*/

/* Cocoonボタンブロック共通 */
.article .btn,
.article .btn-wrap>a{
  background:var(--grad-strong);
  border:none;
  border-radius:24px;
  color:#fff;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.5;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(168,85,247,.35);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}

.article .btn:hover,
.article .btn-wrap>a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(168,85,247,.45);
  opacity:.95;
  color:#fff;
}

/* 大ボタン */
.article .btn-l,
.article .btn-wrap.btn-wrap-l>a{
  font-size:1.1em;
  padding:14px 32px;
}

/* マイクロコピー(ボタン上の一言) */
.article .micro-copy{
  color:var(--purple-text);
  font-size:.85em;
  font-weight:700;
  letter-spacing:.04em;
}

/* CTAボタン: 光るアニメーション付き
   使い方: ボタンブロックの「追加CSSクラス」に btn-shine */
.article .btn-shine,
.article .btn-wrap.btn-shine>a{
  position:relative;
  overflow:hidden;
}

.article .btn-shine::after,
.article .btn-wrap.btn-shine>a::after{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:50%;
  height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:btn-shine 3s ease-in-out infinite;
}

@keyframes btn-shine{
  0%{left:-80%}
  40%{left:130%}
  100%{left:130%}
}

/* 動きを減らす設定の閲覧者にはアニメーションを止める */
@media (prefers-reduced-motion:reduce){
  .article .btn-shine::after,
  .article .btn-wrap.btn-shine>a::after{
    animation:none;
    display:none;
  }
}


/*==================================================
  4. Cocoon標準ボックス
  (案内: information-box / メモ: memo-box /
   注意: alert-box / 疑問: question-box)
==================================================*/

.article .information-box,
.article .memo-box,
.article .alert-box,
.article .question-box,
.article .common-icon-box{
  border-radius:10px;
  border-width:1px;
  padding:1.1em 1.3em 1.1em 3.4em; /* アイコンと文字の距離を少し確保 */
  line-height:1.85;
}

.article .information-box{
  background:#f5f3ff;
  border-color:#c4b5fd;
  color:#4c1d95;
}

.article .memo-box{
  background:#fdf4ff;
  border-color:#f0abfc;
  color:#701a75;
}

.article .alert-box{
  background:#fff1f2;
  border-color:#fda4af;
  color:#9f1239;
}

.article .question-box{
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1e40af;
}


/*==================================================
  5. タブ見出しボックス / ラベルボックス (Cocoon)
==================================================*/

/* タブ見出しボックス (.tab-caption-box) */
.article .tab-caption-box{
  border:2px solid var(--pink-accent);
  border-radius:0 10px 10px 10px;
  background:#fff;
}

.article .tab-caption-box .tab-caption-box-label,
.article .tab-caption-box>.tab-caption{
  background:var(--grad-strong);
  color:#fff;
  border-radius:8px 8px 0 0;
  font-weight:700;
  letter-spacing:.05em;
  padding:4px 16px;
}

.article .tab-caption-box .tab-caption-box-content{
  padding:1em 1.3em;
  line-height:1.85;
}

/* ラベルボックス (.label-box) */
.article .label-box{
  border:2px solid #c4b5fd;
  border-radius:10px;
  background:#fff;
}

.article .label-box .label-box-label{
  background:var(--grad-strong);
  color:#fff;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.05em;
  padding:2px 18px;
}

.article .label-box .label-box-content{
  line-height:1.85;
}


/*==================================================
  6. タブボックス (独自)
  使い方:
  <div class="tab-box tb-point">
    <div class="tab-box-label">POINT</div>
    <div class="tab-box-content">内容</div>
  </div>
  バリエーション: tb-point / tb-check / tb-warning / tb-memo
==================================================*/

.article .tab-box{
  margin:1.8em 0;
  border-radius:0 10px 10px 10px;
  background:#fff;
}

.article .tab-box .tab-box-label{
  display:inline-block;
  color:#fff;
  font-size:.85em;
  font-weight:700;
  letter-spacing:.08em;
  padding:4px 18px;
  border-radius:8px 8px 0 0;
}

.article .tab-box .tab-box-content{
  border:2px solid;
  border-radius:0 10px 10px 10px;
  padding:1.1em 1.3em;
  line-height:1.85;
}

/* POINT (ピンク〜紫) */
.article .tb-point .tab-box-label{background:var(--grad-strong)}
.article .tb-point .tab-box-content{border-color:var(--pink-accent);background:#fdf4ff}

/* CHECK (紫) */
.article .tb-check .tab-box-label{background:var(--sky-deep)}
.article .tb-check .tab-box-content{border-color:var(--sky);background:#f2fafc}

/* 注意 (赤系) */
.article .tb-warning .tab-box-label{background:linear-gradient(90deg,#e11d48,#be123c)}
.article .tb-warning .tab-box-content{border-color:#fda4af;background:#fff1f2}

/* メモ (グレー紫) */
.article .tb-memo .tab-box-label{background:#76679a}
.article .tb-memo .tab-box-content{border-color:#cbc3dd;background:#faf9fc}


/*==================================================
  7. CTAボックス (独自)
  使い方:
  <div class="cta-box">
    <div class="cta-box-title">今だけ限定キャンペーン中</div>
    <p>説明テキスト</p>
    <div class="btn-wrap btn-wrap-l btn-shine"><a href="#">公式サイトはこちら</a></div>
  </div>
==================================================*/

.article .cta-box{
  margin:2.2em 0;
  padding:1.6em 1.4em;
  text-align:center;
  background:var(--grad-hero);
  border-radius:14px;
  box-shadow:0 4px 14px rgba(168,85,247,.18);
}

.article .cta-box .cta-box-title{
  color:#5b1d8a;
  font-size:1.15em;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.05em;
  margin-bottom:.6em;
}

.article .cta-box p{
  color:#3f2159; /* グラデ背景上でも読める濃さ */
  font-size:.95em;
  line-height:1.85;
}


/*==================================================
  8. ランキングボックス (独自)
  使い方:
  <div class="rank-box rank-1">
    <div class="rank-box-header">サービス名</div>
    <div class="rank-box-content">内容・ボタンなど</div>
  </div>
  バリエーション: rank-1 (金) / rank-2 (銀) / rank-3 (銅)
==================================================*/

.article .rank-box{
  margin:2em 0;
  border-radius:12px;
  overflow:hidden;
  border:2px solid;
  background:#fff;
  box-shadow:0 2px 10px rgba(168,85,247,.1);
}

.article .rank-box .rank-box-header{
  color:#fff;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
  padding:12px 16px 12px 56px;
  position:relative;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* 王冠(順位)アイコン */
.article .rank-box .rank-box-header::before{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8em;
  text-shadow:none;
}

.article .rank-box .rank-box-content{
  padding:1.1em 1.3em;
  line-height:1.85;
}

.article .rank-1{border-color:#f0c33c}
.article .rank-1 .rank-box-header{background:linear-gradient(90deg,#c98a00,#e0a91c)}
.article .rank-1 .rank-box-header::before{content:"1位";color:#a86f00}

.article .rank-2{border-color:#b6bec9}
.article .rank-2 .rank-box-header{background:linear-gradient(90deg,#6e7b89,#8e9aa7)}
.article .rank-2 .rank-box-header::before{content:"2位";color:#5b6773}

.article .rank-3{border-color:#d9a074}
.article .rank-3 .rank-box-header{background:linear-gradient(90deg,#a15f2c,#bd7b48)}
.article .rank-3 .rank-box-header::before{content:"3位";color:#8a4f22}


/*==================================================
  9. メリット・デメリットボックス (独自)
  使い方:
  <div class="merit-box">
    <div class="merit-box-title">メリット</div>
    <ul><li>...</li></ul>
  </div>
  <div class="demerit-box">
    <div class="demerit-box-title">デメリット</div>
    <ul><li>...</li></ul>
  </div>
==================================================*/

.article .merit-box,
.article .demerit-box{
  margin:1.8em 0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid;
  background:#fff;
}

.article .merit-box{border-color:#a5d8c6}
.article .demerit-box{border-color:#f3b6bf}

.article .merit-box .merit-box-title,
.article .demerit-box .demerit-box-title{
  color:#fff;
  font-weight:700;
  letter-spacing:.06em;
  padding:9px 16px;
  font-size:.95em;
}

.article .merit-box .merit-box-title{
  background:linear-gradient(90deg,#047857,#059669);
}

.article .demerit-box .demerit-box-title{
  background:linear-gradient(90deg,#be123c,#e11d48);
}

.article .merit-box ul,
.article .demerit-box ul{
  margin:0;
  padding:1em 1.2em 1em 2.4em;
}

.article .merit-box li,
.article .demerit-box li{
  list-style:none;
  position:relative;
  margin:0 0 .5em;
  line-height:1.8;
}

.article .merit-box li:last-child,
.article .demerit-box li:last-child{
  margin-bottom:0;
}

.article .merit-box li::before{
  content:"\2713"; /* チェックマーク */
  position:absolute;
  left:-1.4em;
  color:#059669;
  font-weight:700;
}

.article .demerit-box li::before{
  content:"\00d7"; /* バツ */
  position:absolute;
  left:-1.4em;
  color:#e11d48;
  font-weight:700;
}


/*==================================================
  10. Q&A (独自)
  使い方:
  <dl class="faq">
    <dt>質問文</dt>
    <dd>回答文</dd>
  </dl>
==================================================*/

.article .faq{
  margin:1.8em 0;
}

.article .faq dt,
.article .faq dd{
  position:relative;
  padding:.85em 1.1em .85em 3.2em;
  border-radius:10px;
  margin:0 0 .8em;
  line-height:1.8;
}

.article .faq dt{
  background:var(--gray-bg);
  border:none;
  color:var(--ink);
  font-weight:700;
}

.article .faq dd{
  background:#fff;
  border:1px solid var(--line-gray);
  margin-bottom:1.4em;
}

.article .faq dt::before,
.article .faq dd::before{
  position:absolute;
  left:.8em;
  top:.8em;
  width:1.7em;
  height:1.7em;
  border-radius:50%;
  color:#fff;
  font-weight:700;
  font-size:.9em;
  display:flex;
  align-items:center;
  justify-content:center;
}

.article .faq dt::before{
  content:"Q";
  background:var(--grad-strong);
}

.article .faq dd::before{
  content:"A";
  background:var(--sky-deep);
}


/*==================================================
  11. テーブル / 比較表
  見出しセル = 淡い水色 / データセル = 淡いグレー / 罫線 = 白
==================================================*/

.article table{
  border-collapse:separate;
  border-spacing:0;
  border:none;
  border-radius:10px;
  overflow:hidden;
  font-size:15px; /* 固定値: Cocoon側の縮小指定と重なって小さくなりすぎるのを防ぐ */
  line-height:1.7;
  letter-spacing:.03em;
}

.article table th,
.article table td{
  padding:1em 1.2em;
  font-size:inherit; /* Cocoonのスマホ用縮小(0.8em)を打ち消す */
  vertical-align:middle;
  border:none;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
}

.article table tr > :last-child{
  border-right:none;
}

.article table tr:last-child > *{
  border-bottom:none;
}

.article table th,
.article table thead td{
  background:var(--sky-head);
  color:var(--ink);
  font-weight:700;
  text-align:center;
}

.article table td{
  background:var(--gray-cell);
  color:var(--text-body);
}

/* 行見出し（1列目）は太字 */
.article table tbody td:first-child{
  font-weight:700;
  color:var(--ink);
}

.article table tbody tr:nth-of-type(even) td{
  background:var(--gray-cell);
}

/* 比較表: 追加CSSクラスに comparison-table */
.article .comparison-table th:first-child,
.article .comparison-table td:first-child{
  font-weight:700;
  white-space:nowrap;
}

.article .cell-best{color:#e2387a;font-weight:700}
.article .cell-good{color:#1f82a2;font-weight:700}
.article .cell-bad{color:#888}

@media (max-width:634px){
  .article .comparison-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
}


/*==================================================
  12. 目次 (Cocoon .toc)
  白いカード＋上辺の黄色ライン。大見出しは太字＋区切り線、小見出しは「1-1」形式
==================================================*/

.article .toc{
  position:relative;
  display:block;
  width:100%;
  border:none;
  border-top:4px solid var(--yellow);
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 18px rgba(0,0,0,.08);
  padding:1.8em 2.6em 1.8em;
  font-size:.92em;
  line-height:1.7;
  max-width:100%;
}

.article .toc::before{
  content:none;
}

.article .toc-title{
  display:block;
  text-align:left;
  padding:0;
  color:var(--ink);
  font-weight:700;
  font-size:1.15em;
  letter-spacing:.1em;
  margin-bottom:.6em;
}

.article .toc .toc-list{
  padding-left:0;
  list-style:none;
  counter-reset:toc1;
}

.article .toc .toc-list > li{
  counter-increment:toc1;
  counter-reset:toc2;
  margin:0;
  padding:.85em 0 .85em 2em;
  position:relative;
  border-bottom:1px solid var(--line-gray);
}

.article .toc .toc-list > li > a{
  color:var(--ink);
  font-weight:700;
}

.article .toc .toc-list > li::before{
  content:counter(toc1) ".";
  position:absolute;
  left:.2em;
  top:.85em;
  font-weight:700;
  color:var(--ink);
}

.article .toc .toc-list :is(ul,ol){
  list-style:none;
  padding:.6em 0 0 .4em;
  margin:0;
}

.article .toc .toc-list :is(ul,ol) li{
  counter-increment:toc2;
  position:relative;
  margin:.15em 0;
  padding-left:2.6em;
  font-size:.92em;
}

.article .toc .toc-list :is(ul,ol) li::before{
  content:counter(toc1) " - " counter(toc2);
  position:absolute;
  left:0;
  color:var(--text-sub);
  font-size:.95em;
}

/* Cocoonの番号表示（tnt-number等）と二重にならないよう無効化 */
.article .toc ol > li::marker,
.article .toc ul > li::marker{
  content:"";
}

.article .toc.tnt-number-detail ol li::before{
  margin-right:0;
}

.article .toc a{
  color:var(--text-body);
  text-decoration:none;
}

.article .toc a:hover{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:.25em;
}


/*==================================================
  13. 吹き出し (Cocoon: 色調整のみ)
==================================================*/

.article .speech-wrap .speech-balloon{
  border-color:#f0d9f7;
  border-radius:12px;
  background:#fff;
  line-height:1.8;
  padding:.9em 1.1em;
}

.article .speech-wrap.sbs-think .speech-balloon{
  background:#fdf4ff;
}

.article .speech-name{
  font-size:12px;
  color:var(--text-sub);
}


/*==================================================
  14. 引用・画像キャプション・コード・区切り線
==================================================*/

/* 引用: 大きな“ ”記号が1行目の文字に重なっていたため、
   記号を小さく淡くし、本文の開始位置を右へずらす */
.article blockquote{
  position:relative;
  padding:1.3em 1.5em 1.3em 3em;
  background:var(--bg-tint);
  border:none;
  border-left:4px solid #e9d5ff;
  border-radius:0 8px 8px 0;
  color:#3f3a4a;
  line-height:1.9;
}

.article blockquote::before,
.article blockquote::after{
  color:#d8b4fe;
  font-size:2.4em;
  opacity:.8;
}

.article blockquote::before{
  left:.35em;
  top:.15em;
  line-height:1;
}

.article blockquote::after{
  right:.4em;
  bottom:.05em;
  line-height:0;
}

.article blockquote cite{
  display:block;
  margin-top:.6em;
  font-size:.8em;
  color:var(--text-muted);
}

/* 画像キャプション */
.article figcaption,
.article .wp-element-caption,
.article .wp-caption-text{
  margin-top:.6em;
  font-size:.82em;
  line-height:1.6;
  color:var(--text-muted);
  text-align:center;
  letter-spacing:.03em;
}

/* インラインコード */
.article :not(pre) > code{
  padding:.15em .45em;
  font-size:.88em;
  background:#f6f0fc;
  border-radius:4px;
  color:#5b1d8a;
}

/* 区切り線 */
.article .entry-content hr{
  border:none;
  border-top:1px dashed var(--line-mid);
  margin:2.6em 0;
}


/*==================================================
  15. まとめボックス (独自 .summary-box)
  記事冒頭の「この記事のまとめ」などに
  使い方（カスタムHTMLブロック）:
  <div class="summary-box">
    <div class="summary-box-title">この記事のまとめ</div>
    <ul><li>...</li><li>...</li></ul>
  </div>
==================================================*/

.article .summary-box{
  position:relative;
  margin:3em 0 2.4em;
  padding:2.6em 1.8em 1.6em;
  background:#fff;
  border:2px solid var(--sky);
  border-radius:10px;
}

/* 左上に飛び出したタブ＋折り返しの影 */
.article .summary-box .summary-box-title{
  position:absolute;
  left:-12px;
  top:-20px;
  padding:.45em 1.4em;
  font-size:1em;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.5;
  color:#fff;
  background:var(--sky-deep);
}

.article .summary-box .summary-box-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  border-top:8px solid #1d6f86;
  border-left:12px solid transparent;
}

.article .summary-box ul{
  margin:0;
  padding:0;
  list-style:none;
}

.article .summary-box li{
  position:relative;
  margin:0 0 .9em;
  padding-left:2.4em;
  line-height:1.85;
  font-size:.95em;
}

.article .summary-box li:last-child{
  margin-bottom:0;
}

/* 重なった2つの四角アイコン */
.article .summary-box li::before,
.article .summary-box li::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
}

.article .summary-box li::after{
  left:4px;
  top:.55em;
  background:var(--sky);
}

.article .summary-box li::before{
  left:10px;
  top:calc(.55em + 6px);
  background:var(--sky-soft);
}


/*==================================================
  16. ブログカード（記事内の内部リンク）
  グレーの面＋「おすすめ記事」ラベル＋青い下線リンク
==================================================*/

.article .blogcard-wrap{
  border:none;
  border-radius:12px;
  background:var(--gray-cell);
  box-shadow:none;
  width:100%;
}

.article .blogcard-wrap:hover{
  background:#f0f0f0;
}

.article .blogcard{
  border:none;
  padding:1em 1.2em;
  background:transparent;
}

.article .blogcard-label{
  display:none;
}

.article .blogcard-thumbnail img{
  border-radius:4px;
}

.article .blogcard-content{
  display:flex;
  flex-direction:column;
}

.article .internal-blogcard-content::before{
  content:"おすすめ記事";
  display:flex;
  align-items:center;
  gap:.8em;
  margin-bottom:.4em;
  font-size:.9em;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.06em;
  background:linear-gradient(#ddd,#ddd) no-repeat right center / calc(100% - 6.5em) 1px;
}

.article .blogcard-title{
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:.25em;
}

.article .blogcard-snippet{
  display:none;
}

.article .blogcard-footer{
  display:none;
}


/*==================================================
  レスポンシブ微調整
==================================================*/

/* タブレット */
@media (max-width:1023px){

  .body .article h1.entry-title{
    font-size:25px;
  }

}

/* スマートフォン */
@media (max-width:600px){

  .body .article{
    font-size:16px;
  }

  .article .entry-content,
  .article .entry-content > :is(p,ul,ol,dl,blockquote){
    line-height:1.9;
    letter-spacing:.03em;
  }

  .body .article .entry-content p{
    margin-bottom:1.6em;
  }

  .body .article h1.entry-title{
    font-size:22px;
    line-height:1.55;
    letter-spacing:.04em;
    margin:.3em 0 .6em;
  }

  .body .article h2{
    font-size:1.25em;
    padding:.85em .9em .85em 1.2em;
    margin:3em 0 1.3em;
  }

  .body .article h2::before{
    width:6px;
  }

  .body .article h3{
    font-size:1.13em;
    margin:2.4em 0 1.1em;
    padding-left:1.5em;
  }

  .article .summary-box{
    padding:2.4em 1.1em 1.3em;
  }

  .article .summary-box .summary-box-title{
    left:-8px;
    font-size:.92em;
  }

  .article .summary-box li{
    padding-left:2.1em;
  }

  .article .blogcard{
    padding:.8em;
  }

  .article .blogcard-title{
    font-size:14px;
  }

  .body .article h4{
    font-size:1.05em;
  }

  .article .entry-content :is(ul,ol){
    padding-left:1.4em;
  }

  .article .information-box,
  .article .memo-box,
  .article .alert-box,
  .article .question-box,
  .article .common-icon-box{
    padding:1em 1em 1em 3.1em;
  }

  .article .toc{
    padding:1.4em 1.2em 1.3em;
    font-size:.9em;
  }

  .article .toc .toc-list > li{
    padding-left:1.7em;
  }

  .article .toc .toc-list :is(ul,ol){
    padding-left:0;
  }

  .article table{
    font-size:14px;
  }

  .article table th,
  .article table td{
    padding:.75em .8em;
  }

  .article blockquote{
    padding:1.1em 1.1em 1.1em 2.6em;
  }

}

@media (max-width:480px){

  .article .cta-box{
    padding:1.3em 1em;
  }

  .article .rank-box .rank-box-header{
    padding-left:52px;
  }

}