/* 電報の手帖：サイトの見た目（藍 × 生成り）
   祝電・弔電のどちらの記事にも合うよう、華やかすぎない和の色でまとめる。
   画像は使わず、線と色だけで飾る（他サイトの画像を読み込まない）。 */

:root{
  --dp-ai:#1f3a5f;        /* 藍：見出し・線 */
  --dp-ai-deep:#152a46;
  --dp-ai-soft:#eef2f7;   /* 藍のごく薄い色 */
  --dp-kin:#b08d57;       /* 渋い金：細い線 */
  --dp-kin-soft:#e8dcc4;
  --dp-kinari:#f7f3ea;    /* 生成り：背景 */
  --dp-cream:#fbf8f1;
  --dp-shu:#c0392b;       /* 朱：祝電のボタン */
  --dp-shu-deep:#962d22;
  --dp-ink:#2b2b2b;
  --dp-mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
}

/* ---- 背景：生成りに、ごく薄い格子 ---- */
body,body.custom-background{background-color:var(--dp-kinari)!important;background-image:linear-gradient(rgba(31,58,95,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(31,58,95,.035) 1px,transparent 1px)!important;background-size:24px 24px!important;background-attachment:scroll!important;background-repeat:repeat!important}

/* ---- ヘッダー：藍の帯を細く ---- */
#header-container,#header{background-color:var(--dp-ai)!important}
#header .tagline{display:none}
#header-in{min-height:0!important;padding:0!important}
#header .logo{padding:10px 16px!important;margin:0!important;line-height:1.3}
#header .site-name-text{font-family:var(--dp-mincho);font-size:19px!important;letter-spacing:.12em;color:#fff!important}
#header .logo a{padding:0!important}
@media (max-width:600px){#header .logo{padding:8px 10px!important}#header .site-name-text{font-size:16px!important}}

/* ---- 本文の白い面：上に藍の線 ---- */
#main{border-top:5px solid var(--dp-ai);border-radius:4px;box-shadow:0 0 0 1px var(--dp-kin-soft),0 4px 18px rgba(21,42,70,.08)}
#sidebar .widget,.sidebar .widget{background:#fff;border:1px solid var(--dp-kin-soft);border-radius:8px;padding:14px 16px}

/* ---- H2：明朝の藍の文字＋左右の細い二重線 ---- */
.entry-content h2,
.entry-content h2.has-background,
.entry-content h2[class*="is-style-"]{background:none!important;background-color:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;color:var(--dp-ai)!important;text-align:center;padding:1em 96px .85em!important;font-family:var(--dp-mincho);font-size:1.45em;line-height:1.5;letter-spacing:.08em;position:relative;margin-top:2.6em;text-wrap:balance;word-break:auto-phrase}
.entry-content h2::before,
.entry-content h2::after{content:"";position:absolute;top:50%;width:80px;height:5px;margin:0;transform:translateY(-50%);border:0!important;border-radius:0;box-shadow:none;background:linear-gradient(var(--dp-kin),var(--dp-kin)) top/100% 1px no-repeat,linear-gradient(var(--dp-kin),var(--dp-kin)) bottom/100% 1px no-repeat!important}
.entry-content h2::before{left:0;right:auto}
.entry-content h2::after{right:0;left:auto}
.entry-content h2 + *{margin-top:.4em}
@media (max-width:600px){
  .entry-content h2,
  .entry-content h2.has-background,
  .entry-content h2[class*="is-style-"]{padding:.9em 40px .75em!important;font-size:1.18em}
  .entry-content h2::before,.entry-content h2::after{width:28px}
}

/* ---- H3：藍の縦線＋ごく薄い藍のグラデーション ---- */
.entry-content h3,
.entry-content h3.has-background{background:linear-gradient(90deg,var(--dp-ai-soft),#fff 80%)!important;color:var(--dp-ink)!important;border:0!important;border-left:6px solid var(--dp-ai)!important;border-bottom:1px solid var(--dp-kin-soft)!important;border-radius:0!important;box-shadow:none!important;padding:12px 18px;text-wrap:balance;word-break:auto-phrase}
.entry-content h3::before,.entry-content h3::after{display:none}

/* ---- H4：金の点線の下線 ---- */
.entry-content h4{background:none!important;border:0!important;border-bottom:1px dashed var(--dp-kin)!important;color:var(--dp-ai);padding:0 0 .3em!important}

/* ---- 表：見出しは藍のごく薄い色、1行おきに生成り ---- */
.entry-content th{background:var(--dp-ai-soft)!important;color:var(--dp-ai-deep)!important}
.entry-content td{background-color:#fff}
.entry-content tr:nth-child(even) td{background:var(--dp-cream)!important}
.entry-content .is-style-stripes tbody tr:nth-child(odd) td{background:#fff!important}

/* ---- 箇条書き：小さな藍のひし形 ---- */
.entry-content > ul.wp-block-list:not([class*="is-style-"]),
.entry-content .denpo-textbox > ul.wp-block-list:not([class*="is-style-"]),
.entry-content > .wp-block-group > .wp-block-group__inner-container > ul.wp-block-list:not([class*="is-style-"]){list-style:none;padding-left:.2em}
.entry-content > ul.wp-block-list:not([class*="is-style-"]) > li,
.entry-content .denpo-textbox > ul.wp-block-list:not([class*="is-style-"]) > li,
.entry-content > .wp-block-group > .wp-block-group__inner-container > ul.wp-block-list:not([class*="is-style-"]) > li{position:relative;padding-left:1.4em;list-style:none}
.entry-content > ul.wp-block-list:not([class*="is-style-"]) > li::before,
.entry-content .denpo-textbox > ul.wp-block-list:not([class*="is-style-"]) > li::before,
.entry-content > .wp-block-group > .wp-block-group__inner-container > ul.wp-block-list:not([class*="is-style-"]) > li::before{content:"";position:absolute;left:.15em;top:.68em;width:.48em;height:.48em;background:var(--dp-ai);transform:rotate(45deg)}

/* ---- 水平線：金の線＋ひし形 ---- */
.entry-content hr,
.entry-content hr.wp-block-separator{border:0!important;height:1px!important;background:linear-gradient(90deg,transparent,var(--dp-kin) 18%,var(--dp-kin) 82%,transparent)!important;opacity:1!important;position:relative;overflow:visible;margin:2.6em auto!important;max-width:none;width:100%}
.entry-content hr::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;background:var(--dp-ai);transform:rotate(45deg);box-shadow:0 0 0 3px #fff}

/* ---- 囲み：白い地＋細い金の線 ---- */
.entry-content .has-box-style,
.entry-content [class*="is-style-information-box"],
.entry-content [class*="is-style-border-radius-s-"],
.entry-content .is-style-stitch-box,
.entry-content .blank-box,
.entry-content .information-box,
.entry-content .information,
.entry-content .memo-box,
.entry-content .denpo-textbox{background:#fff!important;border:1px solid var(--dp-kin-soft)!important;border-radius:8px!important;padding:18px 24px!important;box-shadow:0 1px 4px rgba(21,42,70,.05)!important;color:#333;margin-bottom:1.6em}
.entry-content [class*="is-style-information-box"]::before,
.entry-content .information-box::before{color:var(--dp-ai)!important}
.entry-content [class*="is-style-sticky-"],
.entry-content .is-style-border-left-box{background:var(--dp-cream)!important;border:1px solid var(--dp-kin-soft)!important;border-left:5px solid var(--dp-ai)!important;border-radius:6px!important}
.entry-content .denpo-textbox p:last-child,.entry-content .has-box-style > :last-child{margin-bottom:0}
@media (max-width:600px){
  .entry-content .has-box-style,
  .entry-content [class*="is-style-information-box"],
  .entry-content [class*="is-style-border-radius-s-"],
  .entry-content .denpo-textbox{padding:14px 14px!important}
}

/* 情報ボックスなど、左にアイコンがある囲みは左の余白を広く */
.entry-content [class*="is-style-information-box"],
.entry-content [class*="is-style-question-box"],
.entry-content [class*="is-style-alert-box"],
.entry-content .information-box,
.entry-content .question-box,
.entry-content .alert-box{padding-left:3.6em!important;position:relative}

/* ---- 引用（文例の見本にも使える） ---- */
.entry-content blockquote{background:var(--dp-cream)!important;border:1px solid var(--dp-kin-soft)!important;border-left:5px solid var(--dp-kin)!important;border-radius:6px;padding:18px 24px!important;font-family:var(--dp-mincho);line-height:1.9}
.entry-content blockquote::before,.entry-content blockquote::after{color:var(--dp-kin)!important}

/* ---- 目次：細い金の枠、明朝の見出し ---- */
.toc{background:#fff!important;border:1px solid var(--dp-kin-soft)!important;border-radius:10px;box-shadow:0 2px 8px rgba(21,42,70,.06)}
.toc-title{font-family:var(--dp-mincho);font-weight:700;color:var(--dp-ai);letter-spacing:.1em}
.toc a{color:var(--dp-ink)}
.toc a:hover{color:var(--dp-ai)}

/* ---- ボタン：祝電は朱、弔電（.denpo-chouden）は藍 ---- */
.entry-content .btn-wrap > a,
.entry-content .btn-wrap.btn-wrap-block > a{background:linear-gradient(180deg,#d4513f 0%,var(--dp-shu) 55%,var(--dp-shu-deep) 100%)!important;color:#fff!important;border:1px solid #7d241b!important;border-bottom-width:4px!important;border-radius:999px!important;box-shadow:0 3px 6px rgba(90,20,15,.25),inset 0 1px 0 rgba(255,255,255,.35)!important;text-shadow:0 1px 0 rgba(0,0,0,.2);font-weight:700;font-size:17px!important;line-height:1.5;padding:.85em 1.6em .8em!important;text-decoration:none!important;transition:transform .08s,border-bottom-width .08s}
.denpo-chouden .entry-content .btn-wrap > a,
.denpo-chouden .entry-content .btn-wrap.btn-wrap-block > a{background:linear-gradient(180deg,#2e4d75 0%,var(--dp-ai) 55%,var(--dp-ai-deep) 100%)!important;border-color:#0e1d31!important;box-shadow:0 3px 6px rgba(14,29,49,.25),inset 0 1px 0 rgba(255,255,255,.25)!important}
.entry-content .btn-wrap > a::after{content:" \203A"}
.entry-content .btn-wrap > a:hover{filter:brightness(1.07);opacity:1}
.entry-content .btn-wrap > a:active{transform:translateY(3px);border-bottom-width:1px!important}
.entry-content .btn-wrap.has-background{background:none!important}
@media (max-width:600px){.entry-content .btn-wrap > a{font-size:15px!important;padding:.8em 1.1em .75em!important}}

/* ---- アイキャッチ ---- */
.eye-catch img{border-radius:6px}

/* ---- 記事の下：関連記事などの見出し ---- */
.related-entry-heading,
.comment-title,
.sns-share-message{font-family:var(--dp-mincho);color:var(--dp-ai);text-align:center}
.related-entry-heading{position:relative;padding-bottom:.4em}
.related-entry-heading::after{content:"";display:block;width:120px;height:1px;margin:.4em auto 0;background:linear-gradient(90deg,transparent,var(--dp-kin),transparent)}

/* ---- リンクの色 ---- */
.entry-content a:not(.btn):not([class*="denpo-"]):not([class*="dpb-"]){color:#24548c}

/* ---- 文章のまとまり：細い線の箱（表示のときに自動で囲む） ---- */
.entry-content .denpo-textbox{padding:18px 24px 6px!important;margin:0 0 1.6em}
.entry-content .denpo-textbox p,
.entry-content .denpo-textbox li{font-size:16px;line-height:1.9}
.entry-content .denpo-textbox p{margin:0 0 1em}
.entry-content .denpo-textbox ul,
.entry-content .denpo-textbox ol{margin:0 0 1em}
.entry-content .denpo-textbox li{margin:0 0 .35em}
.entry-content h2 + .denpo-textbox{margin-top:.6em}
@media (max-width:600px){
  .entry-content .denpo-textbox{padding:14px 14px 4px!important}
  .entry-content .denpo-textbox p,
  .entry-content .denpo-textbox li{font-size:15px}
}