/* ==========================================================================
   記事詳細ページ

   JIN の記事詳細構造:
     .cps-post-box
       article.cps-post
         .cps-post-header          タイトル・カテゴリー・メタ情報
           .cps-post-cat           カテゴリーバッジ
           h1.cps-post-title       記事タイトル
           .cps-post-meta          著者・日付
         .cps-post-thumb           アイキャッチ画像
         .cps-post-main-box
           .cps-post-main          本文コンテンツ（h2/h3/h4/p/table...）

   見出しスタイルについて:
     JIN は管理画面で h2/h3/h4 のスタイルを選択できる（.h2-style01〜.h2-style10 等）。
     親 CSS を全カットしているため JIN の独自スタイルは無効になっており、
     シンプルに h2/h3/h4 セレクタで上書きすれば全バリアントに統一適用できる。
   ========================================================================== */

/* --- 記事ヘッダー全体 --- */

.cps-post-header {
    margin-bottom: 32px;
}

/* --- カテゴリーバッジ（カードと同じデザインで統一） --- */

.cps-post-cat {
    display:          inline-block;
    background-color: var(--color-primary);
    color:            #0d1117;
    font-size:        0.75em;
    font-weight:      700;
    padding:          4px 12px;
    border-radius:    var(--radius-tag);
    margin-bottom:    12px;
    text-decoration:  none;
    transition:       opacity var(--transition-base);
}

.cps-post-cat:hover {
    opacity: 0.85;
}

/* カテゴリーが複数並ぶ場合 */
.cps-post-header .cps-post-cat + .cps-post-cat {
    margin-left: 6px;
}

/* --- 記事タイトル --- */

.cps-post-title,
h1.post-title {
    font-size:   clamp(22px, 4vw, 32px);
    font-weight: 700;
    color:       var(--color-text);
    line-height: 1.4;
    margin:      0 0 16px;
}

/* --- メタ情報（著者・日付） --- */

.cps-post-meta {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
    color:       var(--color-text-muted);
    font-size:   0.85em;
}

.cps-post-meta .writer,
.cps-post-meta .author-name,
.cps-post-meta time,
.cps-post-meta .cps-post-date-box,
.cps-post-meta .date {
    color:     var(--color-text-muted);
    font-size: 0.85em;
}

/* --- アイキャッチ画像 --- */

.cps-post-thumb {
    margin-bottom: 40px;
    border-radius: var(--radius-card);
    overflow:      hidden;
}

.cps-post-thumb img {
    width:         100%;
    height:        auto;
    border-radius: var(--radius-card);
}

/* ========================================
   見出しスタイル
   ======================================== */

/* --- h2: 左ボーダー + 背景グラデーション --- */

/* JIN カスタマイザーが `.h2-style03 h2 { background-color: #3b4675 !important; }` を注入する。
   詳細度 (0,1,1) で !important のため、ID セレクタで (1,1,1) にして上回る。 */
#main-contents .cps-post-main h2 {
    background:    linear-gradient(to right, var(--color-surface), transparent) !important;
    border-left:   4px solid var(--color-primary) !important;
    border-top:    none !important;
    border-right:  none !important;
    border-bottom: none !important;
    color:         var(--color-text) !important;
}

.cps-post-main h2 {
    font-size:     clamp(18px, 3vw, 24px);
    font-weight:   700;
    color:         var(--color-text);
    border-left:   4px solid var(--color-primary);
    background:    linear-gradient(to right, var(--color-surface), transparent);
    padding:       12px 16px;
    margin:        40px 0 16px;
    line-height:   1.4;
    border-radius: 0 var(--radius-tag) var(--radius-tag) 0;

    /* JIN の .h2-style* が付加する独自スタイルを確実にリセット */
    border-top:    none;
    border-right:  none;
    border-bottom: none;
}

/* --- h3: 下ボーダーでシンプルに --- */

.cps-post-main h3 {
    font-size:     clamp(16px, 2.5vw, 20px);
    font-weight:   700;
    color:         var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    margin:        32px 0 12px;
    line-height:   1.4;

    /* JIN の .h3-style* をリセット */
    background:    none;
    border-left:   none;
    border-top:    none;
    border-right:  none;
}

/* --- h4: 色変化のみ、シンプル --- */

.cps-post-main h4 {
    font-size:   clamp(15px, 2vw, 18px);
    font-weight: 700;
    color:       var(--color-text);
    margin:      24px 0 8px;
    line-height: 1.4;

    /* JIN の .h4-style* をリセット */
    background: none;
    border:     none;
    padding:    0;
}

/* ========================================
   本文スタイル
   ======================================== */

.cps-post-main {
    line-height: var(--line-height-base);
}

/* 段落 */
.cps-post-main p {
    margin-bottom: 20px;
    color:         var(--color-text);
}

/* 本文内リンク */
.cps-post-main a {
    color:                var(--color-primary);
    text-decoration:      underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(88, 166, 255, 0.5);
    transition:            opacity var(--transition-base), text-decoration-color var(--transition-base);
}

.cps-post-main a:hover {
    opacity:               0.8;
    text-decoration-color: var(--color-primary);
}

/* --- 引用ブロック --- */

.cps-post-main blockquote {
    border-left:   3px solid var(--color-primary);
    background-color: var(--color-surface);
    padding:       16px 20px;
    margin:        24px 0;
    border-radius: 0 var(--radius-tag) var(--radius-tag) 0;
    color:         var(--color-text-muted);
    font-style:    italic;
}

.cps-post-main blockquote p {
    margin-bottom: 0;
    color:         var(--color-text-muted);
}

/* --- インラインコード --- */

.cps-post-main code {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    color:            var(--color-primary);
    font-family:      'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size:        0.85em;
    padding:          2px 6px;
    border-radius:    3px;
}

/* --- コードブロック --- */

.cps-post-main pre {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-tag);
    padding:          20px;
    overflow-x:       auto;
    margin:           24px 0;
}

/* pre 内の code はコードブロック全体のスタイルを引き継ぐ */
.cps-post-main pre code {
    background:  none;
    border:      none;
    padding:     0;
    font-size:   0.9em;
    color:       var(--color-text);
}

/* --- 表 --- */

.cps-post-main table {
    width:       100%;
    margin:      24px 0;
    font-size:   0.9em;
    word-break:  break-all;
}

.cps-post-main th {
    background-color: var(--color-surface);
    color:            var(--color-primary);
    border:           1px solid var(--color-border);
    padding:          10px 14px;
    text-align:       left;
    font-weight:      700;
}

.cps-post-main td {
    border:   1px solid var(--color-border);
    padding:  10px 14px;
    color:    var(--color-text);
}

/* ゼブラストライプ: 行を交互に微妙に暗くして読みやすさを向上 */
.cps-post-main tr:nth-child(even) td {
    background-color: rgba(22, 27, 34, 0.5);
}

/* --- リスト --- */

.cps-post-main ul,
.cps-post-main ol {
    margin:     16px 0 20px 24px;
    padding:    0;
}

.cps-post-main ul {
    list-style: disc;
}

.cps-post-main ol {
    list-style: decimal;
}

.cps-post-main li {
    margin-bottom: 6px;
    color:         var(--color-text);
    line-height:   1.7;
}

/* --- 区切り線 --- */

.cps-post-main hr {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     32px 0;
}

/* --- タグエリア --- */

.tag-box {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin-top: 32px;
}

.tag-box a {
    border:           1px solid var(--color-border);
    color:            var(--color-text-muted);
    padding:          4px 12px;
    border-radius:    var(--radius-tag);
    font-size:        0.8em;
    text-decoration:  none;
    transition:
        border-color var(--transition-base),
        color        var(--transition-base);
}

.tag-box a:hover {
    border-color: var(--color-primary);
    color:        var(--color-primary);
    opacity:      1;
}

/* --- 前後の記事ナビゲーション ---

   JIN の実際の HTML 構造:
     #prev-next.clearfix
       a.prev > .metabox > img + p（前の記事）
       a.next > .metabox > p + img（次の記事）

   .prevnext-box / #prevnext は JIN が別文脈で生成する可能性があるため残す。
   --- */

.prevnext-box,
#prevnext,
#prev-next {
    display: flex;
    gap:     16px;
    margin:  48px 0;
}

/* flex アイテム: .prev / .next は <a> タグ */
.prevnext-box a,
#prevnext a,
#prev-next a.prev,
#prev-next a.next {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    gap:              12px;
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          16px;
    color:            var(--color-text);
    font-size:        0.9em;
    line-height:      1.5;
    text-decoration:  none;
    transition:
        border-color var(--transition-base),
        box-shadow   var(--transition-base);
}

.prevnext-box a:hover,
#prevnext a:hover,
#prev-next a.prev:hover,
#prev-next a.next:hover {
    border-color: var(--color-primary);
    box-shadow:   var(--shadow-glow);
    opacity:      1;
}

/* metabox: カード内レイアウト */
#prev-next .metabox {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    height:         100%;
}

/* サムネイル画像 */
#prev-next .metabox img {
    width:         100%;
    height:        120px;
    object-fit:    cover;
    border-radius: var(--radius-tag);
    display:       block;
}

/* 記事タイトル */
#prev-next .metabox p {
    margin:    0;
    font-size: 0.85em;
    color:     var(--color-text);
}

/* --- 著者プロフィールカード --- */

.author-box,
.profile-card {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          24px;
    margin:           40px 0;
    display:          flex;
    gap:              20px;
    align-items:      flex-start;
}

.author-box img,
.profile-card img {
    border-radius: 50%;
    width:         80px;
    height:        80px;
    object-fit:    cover;
    flex-shrink:   0;
}

.author-box .author-name,
.profile-card .author-name {
    color:       var(--color-primary);
    font-weight: 700;
    font-size:   1em;
    margin-bottom: 8px;
}

.author-box .author-desc,
.profile-card p {
    color:     var(--color-text-muted);
    font-size: 0.85em;
    margin:    0;
}

/* --- 関連記事 --- */

.related-entry-section {
    margin-top: 48px;
}

.related-entry-section .related-entry-title,
.related-entry-section h3 {
    color:       var(--color-text);
    font-size:   1.1em;
    font-weight: 700;
    border-left: 4px solid var(--color-primary);
    padding:     8px 12px;
    margin-bottom: 16px;
    background:  linear-gradient(to right, rgba(22, 27, 34, 0.9), transparent);
    border-radius: 0 var(--radius-tag) var(--radius-tag) 0;
}

/* --- SNS シェアボタン ---

   JIN の SNS ボタンは .sns-design-type01 / type02 クラスを持つ div 内の
   <ol> として出力される。親 CSS なしではただの番号付きリストになるため再定義する。

   はてなブックマーク（.hatebu）だけは jin-icons フォントではなく
   .font-hatena:before { content: "B!"; } というテキスト表現を使っている。 */

/* はてなアイコン（"B!" テキスト） */
.font-hatena:before {
    content:     "B!";
    font-family: Verdana, sans-serif;
    font-weight: 700;
}

/* リストをフレックス横並びに変換 */
.sns-design-type01 .sns-top ol,
.sns-design-type01 .sns ol {
    display:         flex;
    list-style:      none;
    padding:         0 !important;
    margin:          0;
    gap:             1%;
}

/* li の疑似要素（番号・点）を非表示 */
.sns-design-type01 .sns-top ol li::before,
.sns-design-type01 .sns-top ol li::after,
.sns-design-type01 .sns ol li::before,
.sns-design-type01 .sns ol li::after {
    display: none;
}

/* 各ボタン: 均等幅・余白なし */
.sns-design-type01 .sns-top li,
.sns-design-type01 .sns li {
    flex:    1;
    padding: 0 !important;
    margin:  0;
    border:  none;
}

/* ボタン共通スタイル */
.sns-design-type01 .sns-top li a,
.sns-design-type01 .sns li a {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          40px;
    border-radius:   var(--radius-tag);
    border:          2px solid transparent;
    color:           #fff !important;
    font-size:       1.1em;
    text-decoration: none;
    transition:      filter var(--transition-base), transform var(--transition-base);
    opacity:         1;
}

.sns-design-type01 .sns-top li a:hover,
.sns-design-type01 .sns li a:hover {
    filter:    brightness(90%);
    transform: translateY(2px);
    opacity:   1;
}

/* ブランドカラー */
/* Twitter/X のブランドカラー (#0F1419) はページ背景 (#0d1117) とほぼ同色になるため
   border で輪郭を付けて視認性を確保する */
.sns-design-type01 .sns-top .twitter  a,
.sns-design-type01 .sns .twitter  a { background: #0F1419; border-color: var(--color-border); }

.sns-design-type01 .sns-top .facebook a,
.sns-design-type01 .sns .facebook a { background: #3b5998; border-color: #3b5998; }

.sns-design-type01 .sns-top .hatebu  a,
.sns-design-type01 .sns .hatebu  a { background: #5d8ac1; border-color: #5d8ac1; }

.sns-design-type01 .sns-top .pocket  a,
.sns-design-type01 .sns .pocket  a { background: #f03e51; border-color: #f03e51; }

.sns-design-type01 .sns-top .line    a,
.sns-design-type01 .sns .line    a { background: #6cc655; border-color: #6cc655; }

/* シェアボタンエリア全体の余白 */
.share-top {
    margin-bottom: 24px;
}

.sns-top {
    padding-bottom: 8px;
}

/* --- 目次（Table of Contents Plus 対応） --- */

#toc_container {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          20px 24px;
    margin:           32px 0;
    display:          inline-block;
    min-width:        240px;
    max-width:        100%;
}

#toc_container .toc_title {
    color:       var(--color-text);
    font-size:   1em;
    font-weight: 700;
    margin-bottom: 12px;
}

#toc_container .toc_list {
    list-style: none;
    margin:     0;
    padding:    0;
}

#toc_container .toc_list a {
    color:      var(--color-text-muted);
    font-size:  0.9em;
    transition: color var(--transition-base);
}

#toc_container .toc_list a:hover {
    color:   var(--color-primary);
    opacity: 1;
}

#toc_container .toc_list li {
    padding:       4px 0;
    border-bottom: none;
}

/* ネストしたリスト */
#toc_container .toc_list li > ul {
    margin-left: 16px;
    margin-top:  4px;
}

/* --- JIN カスタマイザー上書き対策 ---

   JIN のカスタマイザーは以下をインライン <style> で注入する:
     .related-entry-headline-text span:before { background-color: #3b4675; border-color: #3b4675 !important; }
     #breadcrumb:after                         { background-color: #3b4675; }
   ここで詳細度を上げて !important で強制上書きする。 */

/* 関連記事ヘッダーの装飾バー（左ボーダーの疑似要素） */
.related-entry-headline-text span:before {
    background-color: var(--color-primary) !important;
    border-color:     var(--color-primary) !important;
}

/* パンくずリストのセパレーター疑似要素 */
#breadcrumb:after {
    background-color: var(--color-border) !important;
}

/* ============================================================
   JIN カスタマイザー追加上書き対策
   （ここに JIN インライン <style> の残余を一括で上書きする）
   ============================================================ */

/* TOC（目次）のタイトル・リンク色
   JIN: `#toc_container .toc_list>li, #toc_container .toc_title { color: #3b4675 !important; }` */
#toc_container .toc_title,
#toc_container .toc_list > li,
#toc_container .toc_list li a {
    color: var(--color-text-muted) !important;
}

#toc_container .toc_list li a:hover {
    color:   var(--color-primary) !important;
    opacity: 1;
}

/* タグボックス
   JIN: `.tag-box a, #toc_container:before { border-color: #3b4675 !important; }` */
.tag-box a {
    border-color: var(--color-border) !important;
    color:        var(--color-text-muted) !important;
}

/* 箇条書き bullet 色
   JIN: `.cps-post-main ul>li:before, .cps-post-main ol>li:before { background-color: #ffcd44 !important; }` */
.cps-post-main ul > li:before,
.cps-post-main ol > li:before {
    background-color: var(--color-primary) !important;
}

/* プロフィールカード
   JIN: `.profile-card .profile-title { background-color: #3b4675 !important; }` */
.profile-card .profile-title {
    background-color: var(--color-surface) !important;
}

/* コメント・返信タイトル装飾
   JIN: `#comment-title span:before, #reply-title span:before { background-color: #3b4675; border-color: #3b4675 !important; }` */
#comment-title span:before,
#reply-title span:before {
    background-color: var(--color-primary) !important;
    border-color:     var(--color-primary) !important;
}

/* ============================================================
   プラグインスタイル対応

   親 CSS を切っているため、プラグインが依存するベーススタイルが
   ブラウザデフォルト（白背景など）になることがある。
   記事内で使われているプラグインを対象に、ダークテーマへ上書きする。
   ============================================================ */

/* --- Contact Form 7（CF7）---
   記事本文内に [contact-form-7] ショートコードで埋め込まれるフォーム。
   CF7 自身の CSS はボーダーのみ設定するため、input/textarea 背景はブラウザデフォルト（白）になる。
   .wpcf7-form セレクタで記事内外問わず統一してダークテーマを適用する。 */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
    width:            100%;
    background-color: var(--color-bg);
    border:           1px solid var(--color-border);
    color:            var(--color-text);
    padding:          10px 14px;
    border-radius:    var(--radius-tag);
    font-family:      var(--font-base);
    font-size:        1em;
    transition:       border-color var(--transition-base);
    box-sizing:       border-box;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline:      none;
    border-color: var(--color-primary);
}

.wpcf7-form input[type="submit"] {
    background-color: var(--color-primary);
    color:            #0d1117;
    border:           none;
    padding:          10px 28px;
    border-radius:    var(--radius-tag);
    font-weight:      700;
    font-size:        1em;
    cursor:           pointer;
    transition:       opacity var(--transition-base);
}

.wpcf7-form input[type="submit"]:hover {
    opacity: 0.85;
}

.wpcf7-form label {
    color:         var(--color-text);
    font-size:     0.95em;
    display:       block;
    margin-bottom: 6px;
}

/* CF7 のバリデーションメッセージ */
.wpcf7-not-valid-tip {
    color:     #f85149; /* エラー色: GitHub Dark の赤系 */
    font-size: 0.85em;
    margin-top: 4px;
}

.wpcf7 .wpcf7-response-output {
    border-radius: var(--radius-tag);
    padding:       12px 16px;
    margin-top:    16px;
    font-size:     0.9em;
}

.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: rgba(63, 185, 80, 0.1);
    border-color:     #3fb950;
    color:            #3fb950;
}

.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
    background-color: rgba(248, 81, 73, 0.1);
    border-color:     #f85149;
    color:            #f85149;
}

/* --- 記事内リンク色
   JIN: `.cps-post-main a { color: #008db7; }` (詳細度同等、後から来るため上書き) */
.cps-post-main a {
    color: var(--color-primary) !important;
}

/* ============================================================
   JIN 吹き出し（balloon）ブロック

   親 CSS を dequeue しているため、レイアウト・色すべてが失われる。
   ここで親 CSS の構造をそのまま移植し、色のみダークテーマに変換する。

   HTML 構造:
     .balloon-box.balloon-{left|right}.balloon-{color}.balloon-bg-{color}.clearfix
       .balloon-icon[.maru]  > img          （アイコン: position absolute）
       .icon-name                            （名前ラベル）
       .balloon-serif                        （吹き出し本体: float）
         .balloon-content                    （テキスト）
   ============================================================ */

/* --- ベースレイアウト --- */

/* float 子要素を包むために overflow: hidden で擬似 clearfix */
.balloon-box {
    position:       relative;
    overflow:       hidden;
    padding-bottom: 3px;
}

/* .clearfix クラスが付与されている場合も対応 */
.clearfix::after {
    content: "";
    display: table;
    clear:   both;
}

/* アイコン: 親要素左(右)端に絶対配置 */
.balloon-icon {
    position:      absolute;
    top:           0;
    overflow:      hidden;
    width:         80px;
    height:        80px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .balloon-icon {
        width:  60px;
        height: 60px;
    }
}

/* 丸型アイコン: ダークテーマのボーダー色に変換（親: #eee） */
.balloon-icon.maru {
    border:        2px solid var(--color-border);
    border-radius: 40px;
}

.balloon-icon img {
    width:         80px;
    height:        auto;
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .balloon-icon img {
        width: 60px;
    }
}

/* アイコン下の名前ラベル */
.icon-name {
    position:    absolute;
    text-align:  center;
    letter-spacing: 0;
    line-height: 0.7rem !important;
    color:       var(--color-text-muted); /* 親: #777 */
}

@media (max-width: 767px) {
    .icon-name {
        width:     60px;
        top:       62px;
        font-size: 9px;
    }
}

@media (min-width: 768px) {
    .icon-name {
        width:     80px;
        top:       85px;
        font-size: 10px;
    }
}

/* --- 左向き吹き出し --- */

.balloon-left .balloon-icon { left: 0; }
.balloon-left .icon-name    { left: 0; }

.balloon-left .balloon-serif {
    position: relative;
    float:    left;
    margin:   0 105px 40px 105px;
    padding:  0;
}

@media (max-width: 767px) {
    .balloon-left .balloon-serif {
        margin: 0 0 30px 78px;
    }
}

/*
 * 吹き出し三角形は 2 層の CSS 三角で実現する。
 *   :after  → 外側（ボーダー色）: border-width 8px で一回り大きい
 *   :before → 内側（背景色）: border-width 7px で背景を塗りつぶす
 * z-index: :before(3) > :after(2) で内側が上に来る。
 */
.balloon-left .balloon-serif::before {
    content:      "";
    position:     absolute;
    left:         -7px;
    display:      block;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 7px 10px 7px 0;
    z-index:      3;
}

@media (max-width: 767px) { .balloon-left .balloon-serif::before { top: 13px; } }
@media (min-width: 768px) { .balloon-left .balloon-serif::before { top: 16px; } }

.balloon-left .balloon-serif::after {
    content:      "";
    position:     absolute;
    left:         -10px;
    display:      block;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 8px 10px 8px 0;
    z-index:      2;
}

@media (max-width: 767px) { .balloon-left .balloon-serif::after { top: 12px; } }
@media (min-width: 768px) { .balloon-left .balloon-serif::after { top: 15px; } }

/* 吹き出し本体（デフォルト色: ダークテーマのサーフェス + ボーダー） */
.balloon-left .balloon-serif .balloon-content {
    position:      relative;
    line-height:   1.5rem;
    border:        2px solid var(--color-border); /* 親: #ccc */
    background:    var(--color-surface);           /* 親: #fff */
    border-radius: 6px;
    font-size:     0.95em;
    z-index:       2;
    color:         var(--color-text);
}

@media (max-width: 767px) { .balloon-left .balloon-serif .balloon-content { padding: 0.8rem;   } }
@media (min-width: 768px) { .balloon-left .balloon-serif .balloon-content { padding: 1.15rem;  } }

/* デフォルト三角: 背景色に合わせる */
.balloon-left .balloon-serif::before {
    border-color: transparent var(--color-surface) transparent transparent;
}

.balloon-left .balloon-serif::after {
    border-color: transparent var(--color-border) transparent transparent;
}

/* --- 右向き吹き出し --- */

.balloon-right .balloon-icon { right: 0; }
.balloon-right .icon-name    { right: 0; }

.balloon-right .balloon-serif {
    position: relative;
    float:    right;
    margin:   0 105px 40px 105px;
    padding:  0;
}

@media (max-width: 767px) {
    .balloon-right .balloon-serif {
        margin: 0 78px 30px 0;
    }
}

.balloon-right .balloon-serif::before {
    content:      "";
    position:     absolute;
    right:        -7px;
    display:      block;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 7px 0 7px 10px;
    z-index:      3;
    border-color: transparent transparent transparent var(--color-surface);
}

@media (max-width: 767px) { .balloon-right .balloon-serif::before { top: 13px; } }
@media (min-width: 768px) { .balloon-right .balloon-serif::before { top: 16px; } }

.balloon-right .balloon-serif::after {
    content:      "";
    position:     absolute;
    right:        -10px;
    display:      block;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 8px 0 8px 10px;
    z-index:      2;
    border-color: transparent transparent transparent var(--color-border);
}

@media (max-width: 767px) { .balloon-right .balloon-serif::after { top: 12px; } }
@media (min-width: 768px) { .balloon-right .balloon-serif::after { top: 15px; } }

.balloon-right .balloon-serif .balloon-content {
    position:      relative;
    line-height:   1.5rem;
    border:        2px solid var(--color-border);
    background:    var(--color-surface);
    border-radius: 6px;
    font-size:     0.95em;
    z-index:       2;
    color:         var(--color-text);
}

@media (max-width: 767px) { .balloon-right .balloon-serif .balloon-content { padding: 0.8rem;  } }
@media (min-width: 768px) { .balloon-right .balloon-serif .balloon-content { padding: 1.15rem; } }

/* ============================================================
   吹き出しカラーバリアント

   ボーダー色（.balloon-{color}）と背景色（.balloon-bg-{color}）は独立している。
   三角形は 2 色あるため、ボーダー側と背景側をそれぞれ ::after / ::before に対応させる。
   背景色はダークテーマ用に元の明るいパステルを半透明の暗い色に変換する。
   ============================================================ */

/* --- green --- */
.balloon-left.balloon-green  .balloon-serif::after,
.balloon-right.balloon-green .balloon-serif::after  { border-color: transparent #9DDD93 transparent transparent; }
.balloon-right.balloon-green .balloon-serif::after  { border-color: transparent transparent transparent #9DDD93; }

.balloon-left.balloon-green  .balloon-content,
.balloon-right.balloon-green .balloon-content       { border-color: #9DDD93; }

/* 背景あり: 明るい #D1F8C2 → ダーク対応の薄い緑 */
.balloon-left.balloon-bg-green  .balloon-serif::before { border-color: transparent rgba(157,221,147,0.15) transparent transparent; }
.balloon-right.balloon-bg-green .balloon-serif::before { border-color: transparent transparent transparent rgba(157,221,147,0.15); }
.balloon-left.balloon-bg-green  .balloon-content,
.balloon-right.balloon-bg-green .balloon-content       { background: rgba(157,221,147,0.12); }

/* 背景なし: 元は #fff → ダーク対応のサーフェス色 */
.balloon-left.balloon-bg-none  .balloon-serif::before { border-color: transparent var(--color-surface) transparent transparent; }
.balloon-right.balloon-bg-none .balloon-serif::before { border-color: transparent transparent transparent var(--color-surface); }
.balloon-left.balloon-bg-none  .balloon-content,
.balloon-right.balloon-bg-none .balloon-content       { background: var(--color-surface); }

/* --- blue --- */
.balloon-left.balloon-blue  .balloon-serif::after,
.balloon-right.balloon-blue .balloon-serif::after  { border-color: transparent #93D2F0 transparent transparent; }
.balloon-right.balloon-blue .balloon-serif::after  { border-color: transparent transparent transparent #93D2F0; }
.balloon-left.balloon-blue  .balloon-content,
.balloon-right.balloon-blue .balloon-content       { border-color: #93D2F0; }

.balloon-left.balloon-bg-blue  .balloon-serif::before { border-color: transparent rgba(147,210,240,0.15) transparent transparent; }
.balloon-right.balloon-bg-blue .balloon-serif::before { border-color: transparent transparent transparent rgba(147,210,240,0.15); }
.balloon-left.balloon-bg-blue  .balloon-content,
.balloon-right.balloon-bg-blue .balloon-content       { background: rgba(147,210,240,0.12); }

/* --- red --- */
.balloon-left.balloon-red  .balloon-serif::after,
.balloon-right.balloon-red .balloon-serif::after  { border-color: transparent #F48789 transparent transparent; }
.balloon-right.balloon-red .balloon-serif::after  { border-color: transparent transparent transparent #F48789; }
.balloon-left.balloon-red  .balloon-content,
.balloon-right.balloon-red .balloon-content       { border-color: #F48789; }

.balloon-left.balloon-bg-red  .balloon-serif::before { border-color: transparent rgba(244,135,137,0.15) transparent transparent; }
.balloon-right.balloon-bg-red .balloon-serif::before { border-color: transparent transparent transparent rgba(244,135,137,0.15); }
.balloon-left.balloon-bg-red  .balloon-content,
.balloon-right.balloon-bg-red .balloon-content       { background: rgba(244,135,137,0.12); }

/* --- yellow --- */
.balloon-left.balloon-yellow  .balloon-serif::after,
.balloon-right.balloon-yellow .balloon-serif::after  { border-color: transparent #FFD75E transparent transparent; }
.balloon-right.balloon-yellow .balloon-serif::after  { border-color: transparent transparent transparent #FFD75E; }
.balloon-left.balloon-yellow  .balloon-content,
.balloon-right.balloon-yellow .balloon-content       { border-color: #FFD75E; }

.balloon-left.balloon-bg-yellow  .balloon-serif::before { border-color: transparent rgba(255,215,94,0.15) transparent transparent; }
.balloon-right.balloon-bg-yellow .balloon-serif::before { border-color: transparent transparent transparent rgba(255,215,94,0.15); }
.balloon-left.balloon-bg-yellow  .balloon-content,
.balloon-right.balloon-bg-yellow .balloon-content       { background: rgba(255,215,94,0.12); }

/* --- gray --- */
.balloon-left.balloon-gray  .balloon-serif::after,
.balloon-right.balloon-gray .balloon-serif::after  { border-color: transparent var(--color-border) transparent transparent; }
.balloon-right.balloon-gray .balloon-serif::after  { border-color: transparent transparent transparent var(--color-border); }
.balloon-left.balloon-gray  .balloon-content,
.balloon-right.balloon-gray .balloon-content       { border-color: var(--color-border); }

.balloon-left.balloon-bg-gray  .balloon-serif::before { border-color: transparent rgba(255,255,255,0.08) transparent transparent; }
.balloon-right.balloon-bg-gray .balloon-serif::before { border-color: transparent transparent transparent rgba(255,255,255,0.08); }
.balloon-left.balloon-bg-gray  .balloon-content,
.balloon-right.balloon-bg-gray .balloon-content       { background: rgba(255,255,255,0.06); }

/* ============================================================
   JIN ボックスブロック（simple-box / innerlink-box）

   吹き出しと同様、親 CSS dequeue により構造・色が失われる。
   simple-box3 と innerlink-box1 が parallel-777/ で使用されているため優先対応。
   ============================================================ */

/* --- simple-box3: 二重ボーダーのボックス ---
   親 CSS: border: 3px double #eee; (二重線は border-style: double で実現) */
.simple-box3 {
    position:   relative;
    border:     3px double var(--color-border);
    border-radius: var(--radius-tag);
    padding:    20px 25px 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .simple-box3 { margin-bottom: 30px; }
}

@media (min-width: 768px) {
    .simple-box3 {
        margin-bottom: 40px;
        width:         90%;
        margin-left:   auto;
        margin-right:  auto;
    }
}

/* --- innerlink-box1: 内部リンク・アプリ紹介ボックス ---
   このページでは AppReach を包む外枠として使われる。
   親 CSS にある .innerlink-box1-title（絶対配置のラベル）は
   このページでは出力されていないため padding-top は通常値にする。 */
.innerlink-box1 {
    position:      relative;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding:       20px 25px 0;
    box-sizing:    border-box;
    background:    transparent;
}

@media (max-width: 767px) {
    .innerlink-box1 {
        margin-top:    10px !important;
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .innerlink-box1 {
        margin-top:    20px !important;
        margin-bottom: 40px;
        width:         90%;
        margin-left:   auto;
        margin-right:  auto;
    }
}

/* ============================================================
   AppReach（アプリ紹介ブロック）

   JIN の innerlink-box1 内に出力される独自 ID 構造。
   親 CSS はないため（専用プラグインが別途 CSS を持つ設計）、
   ここでフルスクラッチで実装する。

   HTML 構造:
     #appreach-box
       #appreach-image          アプリアイコン（img）
       .appreach-info
         #appreach-appname      アプリ名
         #appreach-developer    開発元
         #appreach-price        価格
         .appreach-powered      powered by 表示
         .appreach-links
           #appreach-itunes-link  App Store バッジ（img）
           #appreach-gplay-link   Google Play バッジ（img）
       .appreach-footer
   ============================================================ */

#appreach-box {
    display:     flex;
    gap:         20px;
    align-items: flex-start;
    padding:     20px 0;
    overflow:    hidden; /* float clearfix 代わり */
}

/* アプリアイコン: 固定サイズで左に配置 */
#appreach-image {
    width:         100px !important;
    height:        100px !important;
    border-radius: 22%;      /* iOS アイコン風の角丸 */
    object-fit:    cover;
    flex-shrink:   0;
    margin-bottom: 0 !important;
}

/* 情報エリア: 残りの幅を占有 */
.appreach-info {
    flex:      1;
    min-width: 0; /* overflow 防止 */
}

/* アプリ名 */
#appreach-appname {
    font-size:     1em;
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 6px;
    line-height:   1.4;
}

/* 開発元・価格 */
#appreach-developer,
#appreach-price {
    font-size:     0.8em;
    color:         var(--color-text-muted);
    margin-bottom: 2px;
}

/* powered by 表示 */
.appreach-powered {
    font-size:     0.7em;
    color:         var(--color-text-muted);
    margin-bottom: 10px;
}

.appreach-powered a {
    color:      var(--color-text-muted);
    font-size:  1em; /* 継承させる */
    opacity:    0.7;
}

/* ストアバッジ: 横並び */
.appreach-links {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    align-items: center;
    margin-top:  4px;
}

/* App Store / Google Play バッジ画像サイズ統一 */
#appreach-itunes-link img,
#appreach-gplay-link img {
    height:        40px !important;
    width:         auto !important;
    margin-bottom: 0 !important;
}

/* フッター（空の div）は非表示 */
.appreach-footer {
    display: none;
}

@media (max-width: 767px) {
    #appreach-box {
        gap: 14px;
    }

    #appreach-image {
        width:  80px !important;
        height: 80px !important;
    }

    .appreach-links {
        flex-direction: column;
        align-items:    flex-start;
    }
}

/* ============================================================
   Swiper スライダー UI（関連記事スライダー）

   JIN は関連記事を Swiper.js カルーセルで表示する。
   JIN カスタマイザーが以下を注入するため !important で上書きが必要:
     .swiper-pagination-bullet { background-color: #ffcd44 !important; }
   ============================================================ */

/* ページネーション（下部のドット）
   JIN カスタマイザーが以下を注入:
     .swiper-pagination-bullet-active { background-color: #ffcd44 !important; }  詳細度 (0,1,0)
   #wrapper を追加して詳細度 (1,1,0) にすることで !important 同士の競合に勝つ。 */
#wrapper .swiper-pagination-bullet {
    background: var(--color-border) !important;
    opacity:    1 !important;
    width:      8px !important;
    height:     8px !important;
    transition: background var(--transition-base), transform var(--transition-base);
}

#wrapper .swiper-pagination-bullet-active {
    background: var(--color-primary) !important;
    transform:  scale(1.3);
}

/* 矢印ボタン: Swiper デフォルトは白い SVG 矢印のみで背景なし。
   画像の上に乗るため、半透明の暗い丸背景を追加して視認性を確保する。 */
.swiper-button-next,
.swiper-button-prev {
    width:            40px !important;
    height:           40px !important;
    background-color: rgba(13, 17, 23, 0.65);   /* --color-bg の半透明版 */
    border-radius:    50%;
    border:           1px solid var(--color-border);
    transition:       background-color var(--transition-base), border-color var(--transition-base);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(13, 17, 23, 0.85);
    border-color:     var(--color-primary);
}

/* Swiper の矢印アイコンサイズ調整（after 擬似要素で描画される） */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size:  14px !important;
    color:      var(--color-text);
    font-weight: 700;
}

/* ============================================================
   JIN ボックスブロック全種（simple-box / concept-box）

   simple-box3 と innerlink-box1 は上記で対応済み。
   ここでは他の記事でも使われうる残りのバリアントを追加する。

   共通のパディング・マージンは simple-box3 と同じ構造のため省略し、
   各バリアント固有の見た目（border / background）のみ定義する。
   ============================================================ */

/* 共通: padding / margin / box-sizing */
.simple-box1, .simple-box2,
.simple-box4, .simple-box5, .simple-box6,
.simple-box7, .simple-box8, .simple-box9 {
    padding:    20px 25px 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .simple-box1, .simple-box2,
    .simple-box4, .simple-box5, .simple-box6,
    .simple-box7, .simple-box8, .simple-box9 {
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .simple-box1, .simple-box2,
    .simple-box4, .simple-box5, .simple-box6,
    .simple-box7, .simple-box8, .simple-box9 {
        margin-bottom: 40px;
        width:         90%;
        margin-left:   auto;
        margin-right:  auto;
    }
}

/* --- simple-box1: 実線ボーダー --- */
.simple-box1 {
    border:        3px solid var(--color-border);
    border-radius: var(--radius-tag);
}

/* --- simple-box2: 破線ボーダー --- */
.simple-box2 {
    border:        3px dashed var(--color-border);
    border-radius: var(--radius-tag);
}

/* --- simple-box4: 細い実線 + 微妙な背景ハイライト --- */
.simple-box4 {
    position:      relative;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-tag);
}

.simple-box4::before {
    position:   absolute;
    content:    "";
    inset:      0;
    background: var(--color-primary);
    opacity:    0.04;
    z-index:    -1;
    border-radius: var(--radius-tag);
}

/* --- simple-box5: 細い破線 --- */
.simple-box5 {
    position:      relative;
    border:        1px dashed var(--color-border);
    border-radius: var(--radius-tag);
}

/* --- simple-box6: 背景塗り --- */
.simple-box6 {
    background:    var(--color-surface);
    border-radius: var(--radius-tag);
}

/* --- simple-box7: 太い実線（フレーム風） --- */
.simple-box7 {
    position:      relative;
    border:        6px solid var(--color-border);
    border-radius: var(--radius-tag);
}

/* --- simple-box8: 左ボーダーアクセント（引用風） ---
   親 CSS は border-left: 5px solid #aaa だが、ここではアクセントカラーに変換 */
.simple-box8 {
    position:    relative;
    border-left: 5px solid var(--color-primary);
    padding-left: 24px;
}

/* --- simple-box9: フォルダ風（角が折れた効果） ---
   ::before / ::after で右上に折れ紙を描く。複雑なため親 CSS の構造を踏襲。 */
.simple-box9 {
    position: relative;
    border:   1px solid var(--color-border);
    border-radius: var(--radius-tag);
}

/* ============================================================
   コメントセクション

   現時点ではこのサイトの記事にコメントがないため確認できていない。
   コメントが付いた際に見た目を確認して追記予定。
   ============================================================ */

/* --- comment-area: 外枠 --- */
#comment-area,
.comment-area {
    margin-top: 48px;
}

/* --- コメントリスト --- */
.comment-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.comment-list .comment {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          20px;
    margin-bottom:    16px;
}

/* コメント本文 */
.comment-list .comment-body {
    color:     var(--color-text);
    font-size: 0.9em;
}

/* コメント者情報 */
.comment-list .comment-author .fn,
.comment-list .comment-meta {
    color:     var(--color-text-muted);
    font-size: 0.8em;
}

/* 返信リンク */
.comment-list .reply a {
    font-size:  0.8em;
    color:      var(--color-text-muted) !important;
    border:     1px solid var(--color-border);
    padding:    3px 10px;
    border-radius: var(--radius-tag);
    transition: color var(--transition-base), border-color var(--transition-base);
}

.comment-list .reply a:hover {
    color:        var(--color-primary) !important;
    border-color: var(--color-primary);
    opacity:      1;
}

/* --- コメント投稿フォーム --- */
#comment-title,
#reply-title {
    font-size:   1.1em;
    font-weight: 700;
    color:       var(--color-text);
    margin-bottom: 20px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width:            100%;
    background-color: var(--color-bg);
    border:           1px solid var(--color-border);
    color:            var(--color-text);
    padding:          10px 14px;
    border-radius:    var(--radius-tag);
    font-family:      var(--font-base);
    font-size:        0.95em;
    box-sizing:       border-box;
    transition:       border-color var(--transition-base);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline:      none;
    border-color: var(--color-primary);
}

.comment-form input[type="submit"] {
    background-color: var(--color-primary);
    color:            #0d1117;
    border:           none;
    padding:          10px 28px;
    border-radius:    var(--radius-tag);
    font-weight:      700;
    cursor:           pointer;
    transition:       opacity var(--transition-base);
}

.comment-form input[type="submit"]:hover {
    opacity: 0.85;
}

/* ============================================================
   動画・iframe 埋め込みのレスポンシブ対応

   なぜ必要か:
     YouTube 等を記事内に埋め込む際、<iframe> に width="560" height="315"
     のような固定幅属性が付く。SP（390px 幅）では iframe がはみ出して
     html/body より広くなり、横スクロールが発生する。

   対応方法:
     1. すべての iframe を max-width: 100% でクリップ
     2. YouTube / Vimeo の Gutenberg ブロック（.wp-block-embed）は
        aspect-ratio を使って 16:9 比率を保ちながらリサイズ
   ============================================================ */

/* --- すべての iframe を画面幅に収める --- */
.cps-post-main iframe {
    max-width: 100%;
}

/* --- Gutenberg の埋め込みブロック（YouTube / Vimeo 等）--- */

/* ラッパーをアスペクト比コンテナに */
.cps-post-main .wp-block-embed__wrapper {
    position:       relative;
    padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
    height:         0;
    overflow:       hidden;
}

/* iframe を絶対配置して親コンテナを満たす */
.cps-post-main .wp-block-embed__wrapper iframe {
    position: absolute;
    top:      0;
    left:     0;
    width:    100% !important;
    height:   100% !important;
}

/* --- JIN の動画埋め込みショートコード（.jin-youtube 等）--- */
.jin-youtube,
.jin-movie-box {
    position:       relative;
    padding-bottom: 56.25%;
    height:         0;
    overflow:       hidden;
}

.jin-youtube iframe,
.jin-movie-box iframe {
    position: absolute;
    top:      0;
    left:     0;
    width:    100% !important;
    height:   100% !important;
}