/* たけ丸メモ — WordPress（AFFINGER5）時代の見た目に合わせた CSS
   色・大きさは 2026-11-09 に公開中のページから測った値 */

:root {
  --text: #333;
  --link: #4682b4;
  --page-bg: #bac4c2;
  --green: #97c4b8;
  --teal: #4293a3;
  --blue: #275ee8;
  --blue-light: #688ce8;
  --bubble-left: #ddf5ff;
  --bubble-right: #f4e3f1;
  --check: #51a3c6;
  --user: #6493c9;
  --marker: #e1f5fe;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;
  --font-head: "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page-bg); color: #000; font-family: var(--font); }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: var(--link); }

/* ヘッダー */
#site-header {
  background: url("/wp-content/uploads/2020/08/3david-travis-5bYxXawHOQg-unsplash-1.jpg") center bottom / cover,
              linear-gradient(var(--teal), var(--green));
  text-align: center;
  padding: 10px 10px 15px;
}
#site-header .descr { margin: 0 0 5px; padding-top: 5px; font-size: 13px; line-height: 1.5; color: #0012e2; }
#site-header .sitename { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.5; }
#site-header .sitename a { color: #0012e2; text-decoration: none; }

#global-nav { background: linear-gradient(var(--green), var(--teal)); border: 1px solid var(--teal); }
#global-nav ul { display: flex; max-width: 1060px; margin: 0 auto; padding: 0; list-style: none; }
#global-nav li { flex: 1; }
#global-nav a { display: block; color: #fff; font-size: 13px; font-weight: 700; line-height: 40px; text-align: center; text-decoration: none; }

/* 本文と横の欄 */
#content { display: flex; gap: 20px; align-items: flex-start; max-width: 1060px; margin: 20px auto; }
main { flex: 1; min-width: 0; background: #fff; border-radius: 4px; padding: 30px 50px; }
#side { width: 300px; flex-shrink: 0; }

.breadcrumb { font-size: 12px; color: #333; margin-bottom: 10px; }
.breadcrumb a { color: var(--link); text-decoration: none; }
.catname { display: inline-block; margin: 0 0 5px; padding: 3px 10px; border-radius: 20px; background: #0076d6; color: #fff; font-size: 12px; }
.post .entry-title, .archive .entry-title { margin: 0 0 10px; padding-top: 10px; font-family: var(--font-head); font-size: 19px; line-height: 36px; color: var(--text); }
.kdate { margin: 0 0 15px; font-size: 13px; color: #666; }
.kdate .fa { margin-right: 4px; color: var(--link); }
.eyecatch { margin-bottom: 20px; }

.entry-content { color: var(--text); font-size: 17px; line-height: 31px; overflow-wrap: anywhere; }
.entry-content p { margin: 0 0 20px; }
.entry-content ul, .entry-content ol { margin: 0 0 20px; }

/* 見出し */
.entry-content h2 {
  position: relative; margin: 20px 0; padding: 15px 19px 15px 25px;
  border: 1px solid var(--blue); border-radius: 5px;
  background: linear-gradient(#fff, #f7f7f7);
  font-family: var(--font-head); font-size: 19px; line-height: 31px; color: var(--text);
}
.entry-content h2::after {
  content: ""; position: absolute; left: 9.5px; top: 9.5px; bottom: 9.5px; width: 5px; background: var(--blue);
}
.entry-content h3 {
  position: relative; margin: 20px 0; padding: 10px 20px 10px 30px;
  border-radius: 5px; background: linear-gradient(#fff, #f9f9f9);
  font-family: var(--font-head); font-size: 18px; line-height: 31px; color: var(--text);
}
.entry-content h3::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: var(--blue-light);
}
.entry-content h4 { margin: 20px 0; padding-bottom: 5px; border-bottom: 1px dotted #ccc; font-size: 17px; color: var(--text); }

/* 目次 */
#toc_container { display: table; margin: 0 auto 20px; padding: 10px 20px; border: 5px solid var(--blue-light); border-radius: 5px; background: #f9f9f9; font-size: 95%; }
#toc_container .toc_toggle { margin-left: 4px; font-size: 14px; font-weight: 400; }
#toc_container .toc_title { margin: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--blue-light); }
#toc_container ul { margin: 0; padding: 0; list-style: none; }
#toc_container ul ul { margin-left: 1.5em; }
#toc_container a { color: var(--blue-light); text-decoration: none; }
#toc_container .toc_number { margin-right: 4px; }

/* 会話の吹き出し（左＝たけ丸、右＝読者） */
.st-kaiwa-box { display: table; width: 100%; margin: 0 0 20px; }
.st-kaiwa-face, .st-kaiwa-face2 { display: table-cell; width: 80px; vertical-align: top; text-align: center; }
.st-kaiwa-face img, .st-kaiwa-face2 img { width: 80px; height: 80px; border: 1px solid #ccc; border-radius: 60px; object-fit: cover; }
.st-kaiwa-face-name, .st-kaiwa-face-name2 { max-width: 80px; font-size: 11.2px; line-height: 1.5; color: #616161; }
.st-kaiwa-area { display: table-cell; padding-top: 10px; vertical-align: top; text-align: left; }
.st-kaiwa-area2 { display: table-cell; padding-top: 10px; vertical-align: top; text-align: right; }
.st-kaiwa-hukidashi, .st-kaiwa-hukidashi2 {
  position: relative; display: inline-block; padding: 15px 20px; border-radius: 7px; text-align: left; font-size: 17px; line-height: 31px;
}
.st-kaiwa-hukidashi { margin-left: 20px; background: var(--bubble-left); }
.st-kaiwa-hukidashi2 { margin-right: 20px; background: var(--bubble-right); }
.st-kaiwa-hukidashi::after, .st-kaiwa-hukidashi2::after {
  content: ""; position: absolute; top: 30px; margin-top: -10px; border: 10px solid transparent;
}
.st-kaiwa-hukidashi::after { left: -10px; border-left-width: 0; border-right-color: var(--bubble-left); }
.st-kaiwa-hukidashi2::after { right: -10px; border-right-width: 0; border-left-color: var(--bubble-right); }
.st-kaiwa-hukidashi p, .st-kaiwa-hukidashi2 p { margin: 0; }

/* 囲みボックス（色・枠は本文の style 属性で個別に指定されている） */
.st-mybox { position: relative; margin: 25px 0; padding: 0 20px; border: 2px solid var(--green); border-radius: 2px; }
.st-mybox-title { position: absolute; left: 10px; top: -12px; margin: 0 0 10px; padding: 0 10px; background: inherit; font-size: 15px; font-weight: 700; line-height: 22.5px; color: #757575; }
.st-mybox-title .fa { margin-right: 4px; }
.st-in-mybox { padding: 20px 0; }
/* 見出しを枠の中に置く型（st-title-under）と、番号つきリスト（st-list-no） */
.st-mybox.st-title-under .st-mybox-title { position: relative; top: 0; left: 0; display: inline-block; margin: 20px 0; padding: 0 10px 10px; background: none; }
.st-mybox.st-title-border .st-mybox-title { border-bottom: 2px solid #757575; }
.st-mybox.st-title-under .st-in-mybox { padding: 0 0 20px; }
.st-list-no ul, .st-list-no ol { margin: 0; padding: 0; list-style: none; counter-reset: st-list-count; }
.st-list-no li { position: relative; padding: 0 0 5px 30px; font-size: 17px; line-height: 31px; counter-increment: st-list-count; }
.st-list-no li::before { content: counter(st-list-count); position: absolute; left: 0; top: 4.8px; width: 20px; height: 20px; background: #548bc9; color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.st-in-mybox p { margin: 0 0 10px; }
.st-in-mybox p:last-child, .yellowbox p:last-child, .st-card-excerpt p:last-child { margin-bottom: 0; }
.yellowbox { margin: 0 0 20px; padding: 20px; border: 1px solid #fffacd; background: #ffffe0; }
.yellowbox p { margin: 0 0 20px; }

/* チェック印・人の印・注意の印 */
.checkmark2::before, .usermark2::before, .attentionmark2::before {
  font-family: FontAwesome; margin-right: 7px;
}
.checkmark2::before { content: "\f058"; color: var(--check); }
.usermark2::before { content: "\f2bd"; color: var(--user); }
.attentionmark2::before { content: "\f06a"; color: #f44336; }

/* 下線マーカー・太字 */
.bmarker-s, .rmarker-s { font-weight: 700; background: linear-gradient(transparent 70%, var(--marker) 0%); }

/* 小さな見出しの吹き出し（ココがポイント など） */
.st-minihukidashi-box { margin: 0; }
.st-minihukidashi { position: relative; display: inline-block; margin: 0; padding: 5px 20px; line-height: 30px; }
.st-minihukidashi-arrow { position: absolute; left: 30px; bottom: -10px; border: 10px solid transparent; border-bottom-width: 0; }
.st-minihukidashi-flexbox .fa { margin-right: 6px; }

/* 関連記事カード */
.st-cardlink { display: block; color: inherit; text-decoration: none; }
.st-cardbox { margin: 30px 0; padding: 15px; border: 3px solid var(--green); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.st-cardbox dl { display: flex; gap: 15px; margin: 0; }
.st-cardbox dt { flex-shrink: 0; width: 100px; margin: 0; }
.st-card-img img { width: 100px; height: 100px; object-fit: cover; }
.st-cardbox dd { margin: 0; }
.st-cardbox-t { margin: 0 0 10px; font-size: 16px; line-height: 26px; color: var(--text); }
.st-card-excerpt p { margin: 0 0 10px; font-size: 13px; line-height: 18px; color: #616161; }
.st-card-excerpt p.cardbox-more { display: inline-block; padding: 5px 10px; border: 1px solid #ccc; font-size: 12.8px; line-height: 21.76px; color: #616161; }

/* 画像・表・埋め込み */
.wp-block-image { margin: 0 0 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.has-text-align-center { text-align: center; }
.has-soft-red-color { color: #e53935; }
.wp-block-table { margin: 0; overflow-x: auto; }
.entry-content table { width: 100%; margin: 0 0 20px; border-collapse: collapse; }
.entry-content td, .entry-content th { padding: 10px; font-size: 15px; line-height: 27px; vertical-align: top; border: 1px solid #e0e0e0; }
.entry-content td p { margin: 0 0 10px; font-size: 17px; line-height: 31px; }
.wp-block-embed { margin: 0 0 20px; }
.clearfix::after { content: ""; display: block; clear: both; }

/* 横の欄 */
.profile { padding: 20px; border-radius: 4px; background: #fff; text-align: center; }
.profile img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.profile .nickname { margin: 10px 0 5px; font-weight: 700; }
.profile .text { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: #666; text-align: left; }
.profile .sns a { display: inline-block; width: 36px; height: 36px; margin: 0 4px; border-radius: 50%; background: #4fc3f7; color: #fff; line-height: 36px; }

/* フッター */
#site-footer { padding: 20px 10px; background: #fff; text-align: center; font-size: 13px; color: #333; }
#site-footer ul { display: flex; justify-content: center; gap: 20px; margin: 0 0 10px; padding: 0; list-style: none; }
#site-footer a { color: #333; text-decoration: none; }
#site-footer .sitename { margin: 0; font-size: 18px; font-weight: 700; }
#site-footer .descr, #site-footer .copy { margin: 4px 0 0; }

/* スマホでだけ出す空白（WordPress の pcnone/tabnone） */
.pcnone, .tabnone { display: none; }

@media (max-width: 959px) {
  #content { display: block; margin: 0 auto; }
  main { padding: 20px 15px; border-radius: 0; }
  #side { width: auto; padding: 15px; }
  #global-nav a { font-size: 12px; }
}
@media (max-width: 599px) {
  .pcnone { display: block; }
  .entry-content { font-size: 16px; line-height: 1.8; }
  .st-kaiwa-face, .st-kaiwa-face2 { width: 60px; }
  .st-kaiwa-face img, .st-kaiwa-face2 img { width: 60px; height: 60px; }
  .st-kaiwa-hukidashi, .st-kaiwa-hukidashi2 { font-size: 15px; line-height: 1.7; padding: 10px 15px; }
  .st-kaiwa-hukidashi { margin-left: 15px; }
  .st-kaiwa-hukidashi2 { margin-right: 15px; }
  .st-card-excerpt { display: none; }
}

/* ===== 全ページ用に足した部品（2026-11-09） ===== */

/* 横の欄のウィジェット */
.widget { margin-top: 20px; padding: 0 0 10px; border-radius: 4px; background: #fff; }
.widget-title { margin: 0 0 10px; padding: 8px 12px; border-left: 5px solid var(--blue); background: linear-gradient(var(--teal), var(--green)); color: #fff; font-size: 15px; font-weight: 700; }
.widget ul { margin: 0; padding: 0 15px; list-style: none; }
.widget li { padding: 6px 0; border-bottom: 1px dotted #ccc; font-size: 14px; }
.widget a { color: var(--text); text-decoration: none; }

/* 記事の一覧（カテゴリ・タグ・月別・関連記事） */
.list-item { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px dashed #ccc; }
.list-thumb { flex-shrink: 0; }
.list-thumb img { width: 100px; height: 100px; border-radius: 4px; object-fit: cover; }
.list-text h3 { margin: 4px 0; font-family: var(--font-head); font-size: 16px; line-height: 1.6; }
.list-text h3 a { color: var(--text); text-decoration: none; }
.list-text .catname { margin: 0; }
.list-meta { margin: 0; font-size: 12px; color: #666; }
.list-meta .fa { margin: 0 3px 0 8px; }
.list-meta .fa:first-child { margin-left: 0; }

/* 記事の下の欄 */
.author-box { margin: 40px 0 20px; }
.author-tab { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 4px 4px 0 0; background: #4db6ac; color: #fff; font-size: 13px; font-weight: 700; }
.author-tab .fa { margin-right: 4px; }
.author-in { display: flex; gap: 15px; padding: 15px; border: 1px solid #4db6ac; border-radius: 0 4px 4px 4px; }
.author-in img { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.author-in .nickname { margin: 0 0 5px; font-weight: 700; }
.author-in .text { margin: 0 0 5px; font-size: 13px; line-height: 1.7; color: #333; }
.author-sns a { color: #1da1f2; font-size: 20px; text-decoration: none; }
.post-cats, .post-tags { margin: 5px 0; font-size: 13px; }
.post-cats .fa, .post-tags .fa { margin-right: 6px; color: #666; }
.related { margin-top: 30px; }
.related-title { display: inline-block; margin: 0 0 5px; padding: 4px 12px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; }
.prevnext { margin-top: 30px; font-size: 14px; }
.prevnext p { margin: 0 0 10px; }
.prevnext span { display: inline-block; margin-right: 8px; padding: 0 6px; background: #ccc; color: #fff; font-size: 11px; }

/* トップの新着記事 */
.slider { display: flex; gap: 12px; margin-bottom: 30px; overflow-x: auto; scroll-snap-type: x mandatory; }
.slide { flex: 0 0 31%; min-width: 180px; scroll-snap-align: start; color: var(--text); text-decoration: none; }
.slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.slide-date { display: block; margin-top: 4px; font-size: 12px; color: #666; }
.slide-date .fa { margin-right: 3px; }
.slide-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; }

/* トップのカテゴリの見出し（画像に文字を重ねた帯）と2列の並び */
.responbox50 { display: flex; gap: 20px; }
.responbox50 > .lbox, .responbox50 > .rbox { flex: 1; min-width: 0; }
.st-flexbox-link { display: block; text-decoration: none; }
.st-header-flexwrap { display: flex; align-items: center; justify-content: center; background-size: cover !important; background-position: center !important; }
.st-header-flexbox p { margin: 0; }
.st-header-flextitle { font-weight: 700; text-align: center; }
.front .st-cardbox { margin: 10px 0; }

@media (max-width: 599px) {
  .responbox50 { display: block; }
  .slide { flex-basis: 70%; }
  .author-in { flex-direction: column; align-items: center; }
}

/* 広告枠（ADS_ENABLED の時だけ出る） */
.ad-post-bottom { margin: 30px 0; }
.ad-side { padding: 10px 0; text-align: center; }


/* 埋め込み（Google フォーム・動画など）を画面の幅に収める */
.entry-content iframe, .entry-content video, .entry-content embed { max-width: 100%; }
.entry-content iframe[src*="docs.google.com/forms"] { display: block; width: 100%; }

/* ===== スマホで押しやすく・メニューを1行に（2026-11-09） ===== */
.widget li { padding: 0; }
.widget li a { display: block; padding: 10px 0; }
#site-footer ul { flex-wrap: wrap; gap: 0 4px; }
#site-footer ul a { display: inline-block; padding: 10px 8px; }
.post-cats a, .post-tags a { display: inline-block; padding: 8px 2px; }
.breadcrumb a { display: inline-block; padding: 6px 0; }
.prevnext a { display: inline-block; padding: 4px 0; }
@media (max-width: 599px) {
  #global-nav li { flex: 1 1 auto; }
  #global-nav a { padding: 0 6px; font-size: 12px; white-space: nowrap; }
}