/* ========================================
 * single-pc.css
 * PC記事ページ
 * ======================================== */

/* ========================================
 * 記事大枠
 * ======================================== */

/* 記事大枠 */
.sngl-wrap { width: 100%; background-color: var(--colr-2); border-radius: var(--radi-1); }

/* 本文〜管理人コメント点線囲い大枠 */
.sngl-body-admn-wrap { border: 3px dashed var(--colr-1); border-radius: var(--radi-2); padding: var(--padd-2); margin: var(--marg-2); }

/* ========================================
 * 記事ヘッダー
 * ======================================== */

/* 記事ヘッダー大枠 */
.sngl-head { display: flex; flex-direction: column; padding: var(--padd-2) var(--padd-2) 0; }

/* 上段 */
.sngl-head-top { display: flex; align-items: center; gap: var(--padd-2); flex-wrap: wrap; margin-bottom: var(--padd-2); }

/* カテゴリ */
.sngl-cate { background-color: var(--colr-1); color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-3); font-size: var(--font-1); font-weight: var(--fwgt-1); }

/* カテゴリホバー */
.sngl-cate:hover { background-color: var(--colr-3); }

/* タグ */
.sngl-tag { border: 1px solid var(--colr-1); color: var(--colr-1); border-radius: var(--radi-1); padding: var(--padd-3); font-size: var(--font-1); font-weight: var(--fwgt-1); }

/* タグホバー */
.sngl-tag:hover { border-color: var(--colr-3); color: var(--colr-3); }

/* コメント数 */
.sngl-cmnt { display: flex; align-items: center; gap: 3px; background-color: var(--colr-1); color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-3); font-size: var(--font-1); font-weight: var(--fwgt-1); margin-left: auto; }

/* コメントアイコン */
.sngl-cmnt-icon { width: 12px; height: 12px; }

/* 投稿日 */
.sngl-date { display: block; font-size: var(--font-1); color: #000000; margin-bottom: var(--padd-4); border-top: 1px solid var(--colr-1); padding-top: var(--padd-4); }

/* タイトル */
.sngl-titl { background-color: var(--colr-1); color: var(--colr-2); font-weight: var(--fwgt-1); line-height: 1.4; margin-bottom: var(--padd-2); border-radius: var(--radi-1); padding: var(--padd-2); }

/* タイトルホバー */
.sngl-titl:hover { background-color: var(--colr-3); }

/* アイキャッチ */
.sngl-head > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radi-1); margin-bottom: var(--padd-2); border: 1px solid var(--colr-1); }

/* SNSシェア */
.sngl-share { display: flex; gap: var(--padd-2); margin-top: auto; }

/* SNSシェアボタン共通 */
.sngl-share-tw, .sngl-share-fb { display: flex; align-items: center; justify-content: center; flex: 1; padding: var(--padd-3); border-radius: var(--radi-1); font-weight: var(--fwgt-1); color: var(--colr-2); }

/* Xシェア */
.sngl-share-tw { background-color: #000000; }

/* Xシェアホバー */
.sngl-share-tw:hover { background-color: #333333; }

/* Facebookシェア */
.sngl-share-fb { background-color: #1877f2; }

/* Facebookシェアホバー */
.sngl-share-fb:hover { background-color: #0e5fc0; }

/* ========================================
 * 記事本文
 * ======================================== */

/* 記事本文大枠 */
.sngl-body { padding: var(--padd-2); }

/* 記事本文画像 */
.sngl-body img { border: 1px solid var(--colr-1); border-radius: var(--radi-1); margin: 10px auto; display: block; }

/* 画像連続時マージン打ち消し */
.sngl-body img + img { margin-top: 0; }

/* ========================================
 * box
 * ======================================== */

/* 本文点線囲い内、段落間の余白 */
.sngl-box-wrap p + p { margin-top: var(--marg-1); }

/* 本文点線囲い大枠 */
.sngl-box-wrap { border: 1px dashed var(--colr-1); padding: var(--padd-2); margin: var(--marg-2) 0; border-radius: var(--radi-2); }



/* ========================================
 * X埋め込み
 * ======================================== */

 /* X埋め込み */
.sngl-body .wp-block-embed__wrapper { background-color: var(--colr-2); border-radius: var(--radi-1); width: 100%; padding: var(--padd-2) !important; margin: var(--marg-1) !important; box-sizing: border-box; overflow: hidden; }

/* X埋め込み内マージン打ち消し */
.sngl-body .twitter-tweet { margin: var(--marg-1) !important; }


/* ========================================
 * 引用元
 * ======================================== */

/* 大枠（区切り線＋右寄せ） */
.sngl-quot-wrap { border-top: 1px solid var(--colr-1); padding-top: var(--padd-4); margin: var(--padd-6) 0; text-align: right; }

/* 引用元テキスト */
.sngl-quot-src { font-size: var(--font-2); color: var(--colr-1); margin: 0; }

/* 引用元リンク */
.sngl-quot-src a { color: var(--colr-1); font-weight: var(--fwgt-1); text-decoration: none; }

/* 引用元リンクホバー */
.sngl-quot-src a:hover { color: var(--colr-3); }

/* ========================================
 * 3つのポイント
 * ======================================== */

/* 大枠（タブを上に乗せるため position: relative が必要） */
.sngl-point-wrap { position: relative; border: 2px solid var(--colr-1); border-radius: 0 var(--radi-2) var(--radi-2) var(--radi-2); padding: var(--padd-2); margin: 60px 0 20px; }

/* タイトル（タブ状に上へ突き出す） */
.sngl-point-titl { position: absolute; top: -40px; left: -2px; background-color: var(--colr-1); color: var(--colr-2); font-weight: var(--fwgt-1); font-size: var(--font-4); padding: var(--padd-4) var(--padd-2); border-radius: var(--radi-2) var(--radi-2) 0 0; margin: 0; }

/* 項目（初期状態：非表示、左からスライドイン準備） */
.sngl-point-item { display: flex; align-items: center; gap: var(--padd-4); margin-bottom: var(--padd-4); opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }

/* 表示エリアに入ったら順番にスライドイン */
.sngl-point-wrap.is-visible .sngl-point-item { opacity: 1; transform: translateX(0); }

/* 項目ごとの時間差（1→2→3の順に出す） */
.sngl-point-item:nth-of-type(1) { transition-delay: 0s; }
.sngl-point-item:nth-of-type(2) { transition-delay: 0.15s; }
.sngl-point-item:nth-of-type(3) { transition-delay: 0.3s; }

/* 3つのポイント内、項目間の区切り線（点線・メインカラー・アニメーション対応） */
.sngl-point-item + .sngl-point-item { position: relative; margin-top: var(--padd-2); padding-top: var(--padd-2); }

/* 区切り線本体（幅0スタートでアニメーション用意） */
.sngl-point-item + .sngl-point-item::before { content: ""; position: absolute; top: 0; left: 0; width: 0; border-top: 1px dashed var(--colr-1); transition: width 0.8s ease; }

/* 表示エリアに入ったら左から右へ伸びる */
.sngl-point-wrap.is-visible .sngl-point-item + .sngl-point-item::before { width: 100%; }

/* 区切り線も項目に合わせて時間差 */
.sngl-point-item:nth-of-type(2)::before { transition-delay: 0.25s; }
.sngl-point-item:nth-of-type(3)::before { transition-delay: 0.4s; }

/* 項目最終行マージン打ち消し */
.sngl-point-item:last-child { margin-bottom: 0; }

/* 番号 */
.sngl-point-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: var(--colr-2); font-weight: var(--fwgt-1); display: flex; align-items: center; justify-content: center; }

/* 番号色1 */
.sngl-point-num-1 { background-color: var(--colr-1); }

/* 番号色2 */
.sngl-point-num-2 { background-color: var(--colr-3); }

/* 番号色3 */
.sngl-point-num-3 { background-color: var(--colr-7); }

/* テキスト */
.sngl-point-text { margin: 0; }

/* ========================================
 * SNSの反応
 * ======================================== */

/* 大枠（枠線を削除） */
.sngl-reac-wrap { border-radius: var(--radi-2); padding: var(--padd-2); margin: var(--padd-6) 0; }

/* タイトル */
.sngl-reac-titl { font-weight: var(--fwgt-1); font-size: var(--font-4); color: var(--colr-1); margin-bottom: 20px; }

/* アイコンSVG(インライン埋め込み) */
.sngl-reac-icon svg { width: 100% !important; height: 100% !important; display: block; }

/* 項目（隙間20・縦中央） */
.sngl-reac-item { display: flex; align-items: center; gap: 20px; margin-bottom: var(--padd-2); }

/* アイコン枠（80pxに拡大） */
.sngl-reac-icon { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; border-width: 2px; border-style: solid; padding: var(--padd-4); box-sizing: border-box; overflow: hidden; position: relative; }

/* 吹き出し左三角（白抜き用の外側・色付き三角） */
.sngl-reac-blln::before { content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); border-width: 9px 9px 9px 0; border-style: solid; border-color: transparent; }

/* 吹き出し左三角（内側・白い三角を少しずらして重ね、輪郭だけ見せる） */
.sngl-reac-blln::after { content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border-width: 8px 8px 8px 0; border-style: solid; border-color: transparent; border-right-color: var(--colr-2); }

/* 吹き出し */
.sngl-reac-blln { position: relative; background-color: var(--colr-2); border-width: 2px; border-style: solid; border-radius: var(--radi-2); padding: var(--padd-2); flex: 1; }

/* ========================================
 * アイコン枠・吹き出しカラーパレット(24色)
 * ======================================== */

/* 01 */
.icn-colr-01, .blln-colr-01 { border-color: #2e8ac0; }
.blln-colr-01::before { border-right-color: #2e8ac0; }

/* 02 */
.icn-colr-02, .blln-colr-02 { border-color: #2e66c0; }
.blln-colr-02::before { border-right-color: #2e66c0; }

/* 03 */
.icn-colr-03, .blln-colr-03 { border-color: #2e41c0; }
.blln-colr-03::before { border-right-color: #2e41c0; }

/* 04 */
.icn-colr-04, .blln-colr-04 { border-color: #3e2ec0; }
.blln-colr-04::before { border-right-color: #3e2ec0; }

/* 05 */
.icn-colr-05, .blln-colr-05 { border-color: #622ec0; }
.blln-colr-05::before { border-right-color: #622ec0; }

/* 06 */
.icn-colr-06, .blln-colr-06 { border-color: #872ec0; }
.blln-colr-06::before { border-right-color: #872ec0; }

/* 07 */
.icn-colr-07, .blln-colr-07 { border-color: #ac2ec0; }
.blln-colr-07::before { border-right-color: #ac2ec0; }

/* 08 */
.icn-colr-08, .blln-colr-08 { border-color: #c02eaf; }
.blln-colr-08::before { border-right-color: #c02eaf; }

/* 09 */
.icn-colr-09, .blln-colr-09 { border-color: #c02e8a; }
.blln-colr-09::before { border-right-color: #c02e8a; }

/* 10 */
.icn-colr-10, .blln-colr-10 { border-color: #c02e66; }
.blln-colr-10::before { border-right-color: #c02e66; }

/* 11 */
.icn-colr-11, .blln-colr-11 { border-color: #c02e41; }
.blln-colr-11::before { border-right-color: #c02e41; }

/* 12 */
.icn-colr-12, .blln-colr-12 { border-color: #c03e2e; }
.blln-colr-12::before { border-right-color: #c03e2e; }

/* 13 */
.icn-colr-13, .blln-colr-13 { border-color: #c0632e; }
.blln-colr-13::before { border-right-color: #c0632e; }

/* 14 */
.icn-colr-14, .blln-colr-14 { border-color: #c0872e; }
.blln-colr-14::before { border-right-color: #c0872e; }

/* 15 */
.icn-colr-15, .blln-colr-15 { border-color: #c0ac2e; }
.blln-colr-15::before { border-right-color: #c0ac2e; }

/* 16 */
.icn-colr-16, .blln-colr-16 { border-color: #afc02e; }
.blln-colr-16::before { border-right-color: #afc02e; }

/* 17 */
.icn-colr-17, .blln-colr-17 { border-color: #8bc02e; }
.blln-colr-17::before { border-right-color: #8bc02e; }

/* 18 */
.icn-colr-18, .blln-colr-18 { border-color: #66c02e; }
.blln-colr-18::before { border-right-color: #66c02e; }

/* 19 */
.icn-colr-19, .blln-colr-19 { border-color: #41c02e; }
.blln-colr-19::before { border-right-color: #41c02e; }

/* 20 */
.icn-colr-20, .blln-colr-20 { border-color: #2ec03e; }
.blln-colr-20::before { border-right-color: #2ec03e; }

/* 21 */
.icn-colr-21, .blln-colr-21 { border-color: #2ec063; }
.blln-colr-21::before { border-right-color: #2ec063; }

/* 22 */
.icn-colr-22, .blln-colr-22 { border-color: #2ec087; }
.blln-colr-22::before { border-right-color: #2ec087; }

/* 23 */
.icn-colr-23, .blln-colr-23 { border-color: #2ec0ac; }
.blln-colr-23::before { border-right-color: #2ec0ac; }

/* 24 */
.icn-colr-24, .blln-colr-24 { border-color: #2eafc0; }
.blln-colr-24::before { border-right-color: #2eafc0; }

/* ========================================
 * 前後記事
 * ======================================== */

/* 前後記事大枠 */
.page-sngl { display: flex; gap: var(--padd-2); padding: var(--padd-2); padding-top: 0; }

/* 前の記事 */
.page-sngl-prev { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: var(--padd-2); }

/* 次の記事 */
.page-sngl-next { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: var(--padd-2); text-align: right; }

/* ホバー */
.page-sngl-prev:hover, .page-sngl-next:hover { border-color: var(--colr-3); }

/* ラベル */
.page-sngl-lbl { font-size: var(--font-1); color: var(--colr-1); font-weight: var(--fwgt-1); }

/* ラベルホバー */
.page-sngl-prev:hover .page-sngl-lbl, .page-sngl-next:hover .page-sngl-lbl { color: var(--colr-3); }

/* タイトル */
.page-sngl-titl { color: var(--colr-1); font-weight: var(--fwgt-1); line-height: 1.4; margin-top: var(--padd-4); }

/* タイトルホバー */
.page-sngl-prev:hover .page-sngl-titl, .page-sngl-next:hover .page-sngl-titl { color: var(--colr-3); }

/* 非活性 */
.page-sngl-disab { flex: 1; border: 1px solid var(--colr-1); border-radius: var(--radi-1); padding: var(--padd-2); opacity: 0.4; }