/* ==========================================================================
   記事ページの土台（article-base.css）

   旧テーマ（SANGO）の CSS を読み込まなくても、記事・固定・カテゴリの各ページが
   いまと同じ配置で表示されるようにするための置き換え。
   HTML に残っているクラス名に合わせて、実際に使われている分だけを手で書いている。

   読み込む場所：head 内、旧テーマの最初の <link> があった位置。
   プラグインの CSS・インライン style・/assets/site.css より前に置くことで、
   これらが後から上書きする関係をいまと変えない。色や見た目を変えたいときは、
   ここではなく /assets/site.css に書く。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基本
   -------------------------------------------------------------------------- */
html { font-family: sans-serif; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: #eaedf2;
  color: #252525;
  font-family: sans-serif;
  line-height: 1.83;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.dfont { font-family: var(--wp--preset--font-family--dfont); }

a, :root body a { text-decoration: none; }
a:hover { text-decoration: underline; cursor: pointer; }
a:active, a:hover { outline: 0; }

p { overflow-wrap: break-word; }

h1, h2, .h2, h3, h4 { font-weight: bold; }
h1 { margin: .67em 0; font-size: 1.35em; line-height: 1.6; }
h2, .h2 { margin-bottom: .375em; font-size: 1.3em; line-height: 1.56; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h2 a { text-decoration: none; }

dl, ol, ul { margin: 1em 0; }
ol, ul { padding: 0; list-style-type: none; }
nav ul { list-style: none; }
dd { margin: 0; }

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
iframe { max-width: 100%; }
:where(figure) { margin: 0 0 1em; }
table { border-spacing: 0; border-collapse: collapse; }
hr { box-sizing: content-box; height: 0; }
code { font-family: Menlo, Consolas, monaco, "monospace", "ＭＳ ゴシック", sans-serif; font-size: 1em; }

/* --------------------------------------------------------------------------
   2. 全体の枠
   -------------------------------------------------------------------------- */
.wrap { width: var(--wp--custom--wrap--width); margin: 0 auto; }
.single #inner-content, .page:not(.no-bg) #inner-content { width: 100%; }

#content { margin-top: 2em; padding-bottom: 2em; }
.single #content, .page #content { margin-top: 0; }

#entry { margin-bottom: 1.5em; background-color: #fff; box-shadow: var(--wp--custom--shadow--small); }
#entry header { color: #070f16; }
#entry footer { margin: 2em 0 0; }
#entry footer aside { position: relative; }

/* --------------------------------------------------------------------------
   3. 記事の頭（タイトル・日付・パンくず・アイキャッチ）
   -------------------------------------------------------------------------- */
.article-header { margin-bottom: 10px; }

.single-title, .page-title { position: relative; margin: 20px 0 0; padding: 0 16px; color: #444; }

.entry-meta { margin: 16px 0 0; padding: 0 16px; font-size: 16px; letter-spacing: .3px; color: #a5aaaf; }
.entry-time.pubdate { padding: 0 10px 0 0; }

time.pubdate::before, time.updated::before {
  padding-right: 5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  opacity: .6;
}
time.pubdate::before { content: "\f017"; }
time.updated::before { content: "\f021"; }

.post-thumbnail { margin: 16px 0 0; }
.post-thumbnail img { width: 100%; }

.breadcrumb { margin: 0; padding: 13px 16px; background: #f4f4f4; }
.breadcrumb ul { margin: 0; }
.breadcrumb li { display: inline; list-style: none; color: gray; font-size: .87em; }
.breadcrumb li::after {
  padding: 0 6px;
  color: rgba(0, 0, 0, .2);
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  font-weight: 900;
  content: "\f0da";
}
.breadcrumb li a { text-decoration: none; }
.breadcrumb li a:hover { color: gray; text-decoration: none; }
.breadcrumb li:first-child a::before {
  padding-right: 5px;
  font-family: "Font Awesome 5 Free";
  font-size: 1.1em;
  font-weight: 900;
  content: "\f016";
}
.archive .breadcrumb { padding: 0; background: transparent; }

/* --------------------------------------------------------------------------
   4. 本文
   -------------------------------------------------------------------------- */
.entry-content {
  margin-right: auto;
  margin-left: auto;
  padding: 10px var(--wp--custom--wrap--mobile--padding) 0;
}
body .entry-content > :first-child { margin-top: .1em; }
.entry-content [id*="sgb-css-id"] > :first-child { margin-top: 0; }

.entry-content p { margin: 0 0 1.5em; }
.entry-content > p { line-height: 1.93; }
.entry-content a { transition: var(--wp--custom--transition--default); }
.entry-content p a { text-decoration: underline; }
.entry-content p a:hover { text-decoration: none; }
.textwidget p { margin: .5em 0; }

.entry-content h2 { margin: 2.5em 0 .7em; font-size: 1.4em; line-height: 1.6; }
.entry-content h3 {
  margin: 2.6em 0 .7em;
  padding: 10px 0 10px 10px;
  border-color: var(--wp--preset--color--sango-main);
  border-style: solid;
  border-width: 0 0 0 4px;
  font-size: 1.2em;
  line-height: 1.5;
}
.entry-content h4 { margin: 2.3em 0 .7em; font-size: 1.1em; }

.entry-content ul { list-style-type: disc; }
.entry-content ol { list-style-type: decimal; }
.entry-content li { padding: 5px 0; }
.entry-content :where(ul:not([class])) {
  margin-bottom: 1.5em;
  padding: 1em 1em 1em 2.5em;
  border: 2px solid var(--sgb-list-border-color, #e8e8e8);
  border-radius: 3px;
  background-color: var(--sgb-list-box-color, none);
  box-shadow: var(--sgb-list-box-shadow, none);
  color: var(--sgb-list-color, inherit);
}
.wp-block-list { margin-bottom: 1.5em; margin-left: 0; padding: 1em 1em 1em 2.5em; box-shadow: var(--sgb-list-box-shadow, none); }
.wp-block-list:not([class*="is-style-sango-list"]) {
  border: 2px solid var(--sgb-list-border-color, #e8e8e8);
  background-color: var(--sgb-list-box-color, none);
  box-shadow: var(--sgb-list-box-shadow, none);
  color: var(--sgb-list-color, inherit);
}
.wp-block-list li { padding: 5px 0; line-height: 30px; }

.entry-content img { max-width: 100%; height: auto; }
.entry-content .size-full, .entry-content .size-large { max-width: 100%; height: auto; }
.entry-content .wp-block-gallery { margin: 1.5em 0; padding: 0; border: 0; }
.entry-content .wp-element-caption { color: #78828e; font-size: .9em; }

/* 表 */
.entry-content table { width: 100%; margin: 1em 0; border: var(--sgb-table-border-width, 2px) solid #e0e0e0; }
.entry-content tr:not(:last-child) { border-bottom: var(--sgb-table-border-width, 2px) solid #e0e0e0; }
.entry-content .wp-block-table td, .entry-content .wp-block-table th { border: 0; }
.entry-content td, .entry-content .wp-block-table td {
  padding: 7px;
  border-right: var(--sgb-table-border-width, 2px) solid #e0e0e0;
  word-break: break-all;
}
.entry-content td:last-child, .entry-content th:last-child { border-right: 0; }
.entry-content th, .entry-content .wp-block-table th {
  padding: 7px;
  border-right: var(--sgb-table-border-width, 2px) solid #e0e0e0;
  border-bottom: var(--sgb-table-border-width, 2px) solid #e0e0e0;
  background: #f8f9fa;
}
.entry-content .wp-block-table thead { border-bottom: 0; }
.entry-content .wp-block-table table { margin-bottom: .5em; }
.entry-content .wp-block-table figcaption { width: 100%; margin-bottom: 1em; color: #78828e; font-size: .9em; text-align: center; }

/* 埋め込み */
.entry-content .wp-block-embed { margin: 1.5em 0; overflow: hidden; }
.wp-block-embed-youtube .wp-block-embed__wrapper { position: relative; height: 0; padding-top: 25px; padding-bottom: 56.25%; }
.wp-block-embed-youtube .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 引用・区切り線・コード */
.entry-content blockquote {
  box-sizing: border-box;
  position: relative;
  margin: 1.5em 0;
  padding: 13px 16px 13px 50px;
  border: 2px solid #464646;
  color: #464646;
}
.entry-content blockquote::before {
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 16px;
  color: var(--wp--preset--color--sango-main);
  font-family: "Font Awesome 5 Free";
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  content: "\f10d";
}
.entry-content blockquote p { margin: 10px 0; padding: 0; line-height: 1.7; }
.entry-content hr { margin: 3em 0; border-style: solid; border-color: #dadada; border-width: 2px 0 0; }
.entry-content hr.wp-block-separator { max-width: 100px; margin: 2em auto; border-color: #8f98a1; }
.entry-content code { margin: 0 .2em; padding: .2em .3em; border-radius: 5px; background: #f1f2f3; color: #404040; font-size: .9em; }

/* 本文の中で使っている装飾 */
.sobig, .inner-content .sobig, #inner-content .sobig { font-size: 2.3em; }
.big, .inner-content .big, #inner-content .big { font-size: 1.3em; }
.keiko_blue { background: linear-gradient(transparent 50%, rgba(107, 182, 255, .24) 50%); }
.keiko_yellow { background: linear-gradient(transparent 50%, rgba(255, 252, 107, .69) 50%); }
.has-sango-silver-background-color { background-color: #f5f5f5; }
.fa5 .fab { font-weight: normal; }
.fa5 .fa, .fa5 .fas { font-weight: 900; }

html body :where([class*="sgb-"][style*="border-width"]),
html body :where([class*="sgb-"][style*="border-color"]) { border-style: revert; }

/* 見出しブロック（2ページで使用） */
.sgb-heading {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 1em !important;
  line-height: 1 !important;
  word-break: break-all;
}
.entry-content .sgb-heading { margin: 2.5em 0 .8em; }
.sgb-heading__inner { display: block; font-weight: 700; line-height: 1.4; }
.sgb-heading__inner.with-icon { position: relative; }
.sgb-heading__inner.with-icon:not(.hh) { padding-left: 1.8em; }
.sgb-heading__inner.with-icon i { position: absolute; top: .9em; left: .6em; }
.sgb-heading--type1 { padding: .3em 0; border-bottom: 3px solid transparent; background: transparent !important; }
.sgb-heading--type1.with-icon { padding-left: 1.4em; }
.sgb-heading--type1.with-icon i { top: .5em; left: 0; }

/* 吹き出しブロック（1ページで使用） */
.sgb-block-say { position: relative; width: 100%; min-height: 90px; margin: 1.5em 0; padding-top: 5px; }
.sgb-block-say-avatar { position: absolute; top: 0; left: 0; width: 70px; text-align: center; }
.sgb-block-say-avatar img { width: 80px; height: auto; border: 3px solid #eaedf2; border-radius: 50%; object-fit: cover; }
.sgb-block-say-avatar__name { margin-top: 5px; font-size: 11px; font-weight: 700; line-height: 1.3; }
.sgb-block-say-text { width: 100%; padding-left: 90px; font-size: .95em; }
.sgb-block-say-text__content {
  display: inline-block;
  position: relative;
  padding: 13px;
  border: 2px solid #d5d5d5;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  word-break: break-all;
}
.sgb-block-say-text__content p { margin: 5px 0; padding: 0; }
.sgb-block-say-text__after, .sgb-block-say-text__before { display: inline-block; position: absolute; top: 18px; border: 12px solid transparent; content: ""; }
.sgb-block-say-text__before { left: -24px; border-right: 12px solid #d5d5d5; }
.sgb-block-say-text__after { left: -21px; border-right: 12px solid #fff; }

@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { margin: 1rem 0; padding: 0; }
}

/* --------------------------------------------------------------------------
   5. 記事の下（シェア・フォロー・タグ・著者・前後の記事・関連記事）
   -------------------------------------------------------------------------- */
.article-footer p { margin: 0; }
.page .footer-contents { padding-bottom: 1em; }

/* シェアボタン */
.sns-btn { margin: 0 auto; text-align: center; }
.sns-btn__title {
  display: inline-block;
  position: relative;
  padding: 0 25px;
  color: #cccfd7;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 1px;
}
.sns-btn__title::before, .sns-btn__title::after {
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #d8dae1;
  content: "";
}
.sns-btn__title::before { left: 0; transform: rotate(50deg); }
.sns-btn__title::after { right: 0; transform: rotate(-50deg); }
.sns-btn__item { display: inline-block; position: relative; width: 17%; margin: 0 .5%; }
.sns-btn__item a {
  display: inline-block;
  border-radius: var(--wp--custom--rounded--medium);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  transition: var(--wp--custom--transition--default);
}
.sns-btn__item a:hover { opacity: .6; box-shadow: none; text-decoration: none; }
.sns-btn__item i { display: block; width: auto; height: 32px; font-size: 32px; line-height: 32px; }
.sns-btn__item img { display: block; width: 32px; height: 32px; padding: 1px; }
.sns-btn__item.tw img { padding: 0; }
.tw a { color: #000; }
.fb a { color: #3b8df7; }
.hatebu a { color: #45b5f7; }
.line a { color: #59d869; }
.fa-hatebu::before {
  position: relative;
  top: -.1em;
  font-family: Quicksand, Arial, sans-serif;
  font-size: 1.11em;
  font-weight: bold;
  line-height: 32px;
  white-space: nowrap;
  content: "B!";
}
.share_txt { font-weight: bold; white-space: nowrap; }

/* カテゴリとタグ */
.footer-meta { padding: 10px 5% 20px; font-size: .95em; font-weight: bold; }
.footer-meta_title { display: inline-block; padding-right: 2px; }
.footer-meta ul { display: inline-block; margin: 0; }
.footer-meta ul li { display: inline-block; }
.footer-meta ul li a { color: rgba(0, 0, 0, .4); }
.footer-meta ul li a:hover { color: #000; text-decoration: none; }
.footer-meta ul li:not(:last-child)::after { padding: 0 0 0 4px; content: "/"; }
.meta-tag { margin-top: 5px; }
.meta-tag a::before { padding-left: 3px; content: "#"; }

/* 「気に入ったらフォロー」 */
.like_box { padding: 30px 16px; }
.like_inside {
  overflow: hidden;
  max-width: 350px;
  margin: 0 auto;
  border-radius: var(--wp--custom--rounded--small);
  background: #fff;
  box-shadow: var(--wp--custom--shadow--large);
}
.like_img {
  overflow: hidden;
  position: relative;
  width: 110%;
  margin-left: -5%;
  border-radius: 0 0 50% 50% / 0 0 25% 25%;
  transition: var(--wp--custom--transition--default);
}
.like_img img { width: 100%; }
.like_img::after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .16; content: ""; }
.like_content { padding: 16px 20px; font-weight: bold; }
.like_content p { padding-bottom: 10px; font-weight: bold; }

/* 著者 */
.pastel-bc, body #inner-content .pastel-bc { background-color: var(--wp--preset--color--sango-pastel); }
.author-info { position: relative; padding: 25px var(--wp--custom--wrap--mobile--padding); }
.author-info__inner { position: relative; }
.author-info__inner .tb { border-radius: var(--wp--custom--rounded--medium); background: #fff; box-shadow: rgba(105, 116, 131, .35) 0 5px 20px -5px; }
.author-info__inner .tb-left { padding: 20px 16px 5px; }
.author-info__inner .tb-left .aut { display: inline-block; width: calc(100% - 95px); margin: 0; padding-left: 10px; line-height: 1.3; vertical-align: middle; }
.author-info__inner .tb-left dt { font-size: 19px; font-weight: bold; }
.author-info__inner .tb-left dd { padding-top: 4px; color: #686868; font-size: 16px; font-weight: bold; }
.author-info__inner .tb-right { padding: 16px; font-size: .95em; line-height: 1.7; }
.author_label span {
  display: inline-block;
  position: relative;
  min-width: 120px;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #eaedf2;
  color: #555;
  font-size: 16px;
  font-weight: bold;
}
.author_label span::before {
  position: absolute;
  top: 100%;
  left: 33px;
  border-width: 10px 13px 13px;
  border-style: solid;
  border-color: #eaedf2 transparent transparent;
  content: "";
}
.author_img { display: inline-block; width: 90px; height: 90px; margin: 0; vertical-align: middle; }
.author_img img { width: 100%; height: 100%; border: 3px solid #dfe2e8; border-radius: 50%; object-fit: cover; }

/* フォローボタン */
.follow_btn { margin-top: 16px; }
.follow_btn a { display: inline-block; margin: 16px 10px 0 0; color: #919191; font-size: 11px; text-align: center; }
.follow_btn a:hover { text-decoration: none; transform: translateY(-4px); }
.follow_btn a::before {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: var(--wp--custom--rounded--medium);
  color: #fff;
  font-family: "Font Awesome 5 Brands";
  font-size: 35px;
  line-height: 60px;
  text-align: center;
}
.follow_btn .Instagram::before { background: #ff7b7b; content: "\f16d"; }
.follow_btn .YouTube::before { background: #f0504f; content: "\f167"; }
.follow_btn .Website::before { background: #ffb35d; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0ac"; }
.Threads::before, .X::before { display: inline-block; background-size: cover; background-position: center; content: ""; }
.follow_btn .Threads::before, .follow_btn .X::before { width: 60px; height: 60px; }
.follow_btn .X::before { background-color: #000; }

/* 前後の記事 */
.prnx_box { margin-bottom: 1.5em; justify-content: space-between; }
.prnx_box a { text-decoration: none; }
.prnx { display: block; margin: 0 16px 20px; color: #505050; }
.prnx:hover { text-decoration: none; }
.prnx p { margin: 0; padding: 4px; color: rgba(0, 0, 0, .52); font-size: .9em; font-weight: bold; }
.prnx.nx p { text-align: right; }
.prnx_tb {
  display: table;
  width: 100%;
  border-radius: var(--wp--custom--rounded--medium);
  background: #fff;
  box-shadow: var(--wp--custom--shadow--large);
  transition: var(--wp--custom--transition--default);
}
.prnx:hover .prnx_tb { box-shadow: var(--wp--custom--shadow--large-hover); }
.prnx_tb figure { display: table-cell; width: 95px; padding: 16px 0 16px 16px; vertical-align: middle; }
.prnx_tb figure img { width: 100%; }
.nx .prnx_tb figure { padding: 16px 16px 16px 0; }
.prev-next__text { display: table-cell; width: calc(100% - 95px); padding: 16px; font-size: .9em; line-height: 1.4; vertical-align: middle; }

/* 関連記事 */
.related-posts ul { margin: 0; padding: 16px; }
.related-posts li { display: block; }
.related-posts li:nth-child(2n) { margin-right: 0; }
.related-posts li a { display: block; color: #333; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.related-posts li a:hover { color: #000; }
.related-posts figure { margin: 0; }
.rlmg { position: relative; width: 100%; height: 0; padding-bottom: 57.6923%; }
.rlmg img { position: absolute; width: 100%; height: 100%; box-shadow: rgba(0, 0, 0, .3) 0 2px 4px; object-fit: cover; transition: .3s; }
.related-posts li a:hover img { box-shadow: var(--wp--custom--shadow--large-hover); transform: translateY(-4px); }
.rep { padding: 10px 0 0; line-height: 1.5; }
.rep p { margin: 0; font-size: .95em; font-weight: 700; }

/* コメント（1ページで使用） */
#comments-title { margin: 0; padding: .75em; border-top: 1px solid #f8f9fa; }
.commentlist { margin: 0; font-size: .9em; list-style-type: none; }
.comment { overflow: hidden; position: relative; clear: both; padding: 1em; }
.comment:last-child { margin-bottom: 0; }
.comment[class*="depth-"] { margin-top: 1.1em; }
.comment.depth-1 { margin-top: 0; margin-left: 0; }
.comment.even { background: #f8f9fa; }
.comment .comment-author { padding: 7px 0 2px; border: 0; }
.comment .vcard { margin-left: 50px; }
.comment .vcard cite.fn { font-style: normal; font-weight: bold; }
.comment .vcard time { display: block; font-size: .8em; font-style: italic; }
.comment .vcard time a { color: #9fa6b4; text-decoration: none; }
.comment .vcard time a:hover { text-decoration: underline; }
.comment .vcard .avatar { position: absolute; left: 16px; border-radius: 50%; }
.comment_content p { margin: .7335em 0 1.5em; line-height: 1.5em; }
.comment-reply-link {
  display: inline-block;
  position: relative;
  float: right;
  margin: 10px 0 10px 10px;
  padding: 0 24px;
  border: 0;
  border-radius: 4px;
  background-color: #c1c7cc;
  color: #fff;
  font-size: .85em;
  font-weight: bold;
  line-height: 34px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .14s ease-in-out;
}
.comment-reply-link:hover, .comment-reply-link:focus { color: #fff; text-decoration: none; }
.comment-reply-link:active { top: 1px; }
.comment-reply-link:focus, .comment-reply-link:active { background-color: silver; }

/* --------------------------------------------------------------------------
   6. カテゴリの一覧
   -------------------------------------------------------------------------- */
.archive-header { box-shadow: var(--wp--custom--shadow--medium); }
.archive_header {
  margin: 0 0 2em;
  padding: 20px;
  border-radius: var(--wp--custom--rounded--medium);
  background: #fff;
  box-shadow: var(--wp--custom--shadow--small);
}
.archive_header h1 { margin: .5em 0; }
.archive_header ul { margin: .1em 0; }
.archive_header .cat-item {
  display: inline-block;
  overflow: hidden;
  margin: 0 5px 5px 0;
  padding: 3px 14px;
  border-radius: 20px;
  background: #eaedf2;
  font-size: .9em;
  transition: .2s ease-in-out;
}
.archive_header .cat-item:hover { box-shadow: rgba(0, 0, 0, .2) 0 3px 7px; }
.archive_header .cat-item a { color: #4c4c4c; }
.archive_header .cat-item a:hover { text-decoration: none; }

.catpost-cards { display: grid; gap: var(--wp--custom--entry--gap); margin-bottom: var(--wp--custom--entry--gap); }
.c_linkto_wrap {
  display: flex;
  position: relative;
  max-width: 310px;
  animation: var(--wp--custom--animation--fade-in);
  transition: var(--wp--custom--transition--default);
}
.catpost-cards .c_linkto_wrap { max-width: none; }
.c_linkto_wrap:hover { transform: translateY(-2px); }
.c_linkto {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100% !important;
  margin: 0;
  padding: 0;
  border-radius: var(--wp--custom--rounded--medium);
  background: #fff;
  box-shadow: var(--wp--custom--shadow--solid);
  color: #555;
  font-weight: 700;
  text-decoration: none !important;
  transition: var(--wp--custom--transition--default);
}
.c_linkto:hover, .c_linkto:link, .c_linkto:visited { color: #555; }
.c_linkto:hover { box-shadow: var(--wp--custom--shadow--solid-hover); color: #888; text-decoration: none; }
.c_linkto_img_wrap { display: block; overflow: hidden; position: relative; height: 0; margin: 0; padding-bottom: 57.7%; }
.c_linkto:not(.longc_linkto) img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.c_linkto:not(.longc_linkto) .c_linkto_text img { position: static; }
.c_linkto .c_linkto_text { display: block; padding: 16px 13px; line-height: 1.6; }
.c_linkto_text h2 { margin: 8px 0 0; font-size: 17px; }
.sng-link-time { display: block; margin-bottom: 5px; color: #b5b5b5; font-size: 13.5px; }

.pagination { margin: 1.5em 0; text-align: left; }
.pagination ul { display: block; clear: both; padding: 1.5em 0 0; text-align: center; }
.pagination li { display: inline-block; overflow: hidden; margin: 3.5px; padding: 0; text-align: center; }
.pagination a, .pagination span {
  display: inline-block;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--wp--preset--color--sango-main);
  font-size: 17.5px;
  font-weight: bold;
  line-height: 46px;
  text-decoration: none;
}
.pagination a:hover { background: var(--wp--preset--color--sango-pastel); }
.pagination .current { background-color: var(--wp--preset--color--sango-main); color: #fff; cursor: default; }
.page-numbers { transition: var(--wp--custom--transition--default); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. 幅ごとの調整
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  .related-posts.slide ul {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    padding: 10px 10px 20px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  .related-posts.slide ul::after { min-width: 20px; content: ""; }
  .related-posts.slide ul li { min-width: 240px; max-width: 300px; margin: 8px; scroll-snap-align: center; }
}

@media only screen and (min-width: 481px) {
  .single-title, .page-title, .entry-meta, .entry-content { padding-right: 25px; padding-left: 25px; }
  .sns-btn__item { width: 14%; max-width: 86px; margin: 0; }
  .author-info { position: relative; padding: 25px; }
  .prnx_box { display: flex; }
  .prnx.pr, .prnx.nx { width: 46%; max-width: 300px; }
  .prnx.pr { margin: 0 0 var(--wp--custom--wrap--mobile--padding) 2%; }
  .prnx.nx { margin: 0 2% var(--wp--custom--wrap--mobile--padding) 0; }
  .archive_header { margin: 0 0 1.5em; }
  .catpost-cards { grid-template-columns: repeat(2, 1fr); }
  .catpost-cards .c_linkto { max-width: none; }
  .sgb-block-say { padding-top: 16px; }
  .sgb-block-say-avatar { width: 80px; }
  .sgb-block-say-text { padding-left: 100px; }
}

@media only screen and (min-width: 769px) {
  .wrap, .single #inner-content, .page:not(.no-bg) #inner-content { width: 96%; }
  #inner-content { display: flex; }
  #main { width: calc(100% - var(--wp--custom--wrap--side)); padding-right: var(--wp--custom--wrap--gap); }
  .single #content, .page #content { margin-top: 2em; }
  #entry { overflow: hidden; border-radius: var(--wp--custom--rounded--medium); }
  .article-header { padding: 20px 25px 10px; }
  .single #breadcrumb, .page .breadcrumb { padding: 0; background: transparent; }
  .single-title, .page-title { margin-top: 16px; padding: 0; }
  .entry-meta { padding: 0; }
  .footer-contents { padding: 0 25px; }
  .page .footer-contents { padding-bottom: 2em; }
  .footer-meta { padding: 10px 0; text-align: right; }
  .prnx.pr, .prnx.nx { margin: 16px 0; }
  .related-posts ul { display: grid; gap: 1.5em; grid-template-columns: repeat(2, 1fr); overflow: visible; padding: 16px 0; text-align: center; white-space: normal; }
  .related-posts li { display: block; text-align: left; }
  .related-posts.type_a ul { padding: 16px 0; }
  .sgb-block-say-text__content { padding: 10px 20px; }
}

@media only screen and (min-width: 1030px) {
  .wrap, .single #inner-content, .page:not(.no-bg) #inner-content { width: var(--wp--custom--wrap--width); }
  h1 { font-size: 1.5em; }
  .article-header { padding: 25px 40px 10px; }
  .entry-content { padding-right: 40px; padding-left: 40px; }
  .footer-contents { padding: 0 40px; }
  .page .footer-contents { padding-bottom: 2em; }
  .author-info { padding: 30px 40px; }
  .tb { display: table; width: 100%; }
  .tb-left, .tb-right { display: table-cell; vertical-align: middle; }
  .author-info__inner .tb-left { width: 220px; border-right: 2px dashed #eaedf2; text-align: center; }
  .author-info__inner .tb-right { width: calc(100% - 220px); padding: 20px; }
  .author-info__inner .tb-left .aut { display: block; width: 100%; padding: 16px 0; }
  .author_label span { z-index: 2; margin-bottom: 20px; font-size: 14px; }
  .author_label span::before { z-index: -1; top: calc(100% - 16px); left: 50px; border-width: 30px 16px 16px; transform: rotate(-40deg); }
  .follow_btn { margin: 0 8px 5px 0; }
  .follow_btn a { transition: var(--wp--custom--transition--default); }
  .follow_btn a::before { width: 50px; height: 50px; font-size: 33px; line-height: 50px; }
  .follow_btn .Threads::before, .follow_btn .X::before { width: 50px; height: 50px; }
  .related-posts ul { text-align: left; }
  .related-posts li { width: 100%; }
  .related-posts.type_a ul { grid-template-columns: repeat(3, 1fr); }
  .archive_header { margin: 0 0 1.5em; }
}

@media only screen and (min-width: 1240px) {
  .wrap, .single #inner-content, .page #inner-content { width: 1256px; }
}

/* 見た目の修正（SANGO の置き換えとは別）。公開中のページにもある不具合を直す。 */

/* シェアのアイコンが文字に重なる不具合。枠は 16px なのに文字サイズが 32px のままだった。 */
.sns-btn a i { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }

/* シェアのボタンどうしが重なる不具合。項目の幅が文字幅より狭く固定されていた。 */
.sns-btn__item { flex: none; width: auto; max-width: none; margin: 0; }

/* スマホでは余白を詰めて、幅 360px 以上なら4つを1行に収める（それ未満は折り返す）。 */
@media (max-width: 480px) {
  .sns-btn li a { padding-inline: 6px; }
  div.sns-btn ul { gap: 4px; }
}

/* フォローのアイコン名（11px）のコントラストが 3.15:1 と低いので、4.5:1 以上にする。 */
.follow_btn a { color: #6b6b6b; }

/* 動きを減らす設定の人には、カテゴリ一覧のカードを動かさない。 */
@media (prefers-reduced-motion: reduce) {
  .c_linkto_wrap { animation: none; }
}

/* 2026-11-06 site-owned refinement: no motion in legacy components.
   Keep positioned icons/decorations intact; only moving hover targets reset. */
.c_linkto_wrap, .c_linkto, .entry-content a, .sns-btn__item a,
.like_img, .prnx_tb, .rlmg img, .comment-reply-link,
.archive_header .cat-item, .page-numbers, .follow_btn a {
  animation: none !important;
  transition: none !important;
}
.c_linkto_wrap { opacity: 1 !important; }
.c_linkto_wrap, .c_linkto_wrap:hover,
.follow_btn a:hover, .related-posts li a:hover img { transform: none !important; }
html, .related-posts.slide ul { scroll-behavior: auto !important; }

/* --------------------------------------------------------------------------
   9. デザイン4原則での調整（2026-11-06）
   site.css が後から読まれるので、同じ強さで負けないよう #main を付ける。
   -------------------------------------------------------------------------- */

/* 整列：パンくず・見出し・本文・画像の左端を1本にそろえる。
   1030px 未満は、画像とパンくずの枠が外側、文字だけ 16〜25px 内側で左端が2本あった。 */
#main .breadcrumb, #main #breadcrumb { padding: 0; background: transparent; }
/* 反復：パンくずの区切りが「▸ /」と二重だった。site.css の「/」だけにし、ホームに付いていた書類の絵も外す */
#main .breadcrumb li::after { content: none; }
#main .breadcrumb li:first-child a::before { content: none; }
@media only screen and (max-width: 1029px) {
  #main .article-header { padding-right: 0; padding-left: 0; }
  #main .single-title, #main .page-title, #main .entry-meta, #main .entry-content { padding-right: 0; padding-left: 0; }
}
/* 整列：カテゴリ一覧の見出しの箱を外し、下のカードと左端をそろえる（影も外す） */
#main .archive-header { box-shadow: none; }
#main .archive_header { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* 近接：見出し2の直前の区切り線を消す。見出し2には上の罫線と余白があり、区切りが二重になっていた */
#main .entry-content hr:has(+ h2) { display: none; }

/* 反復：本文の枠を1種類にそろえる（1px の線 #e3e5e8、角丸 12px、影なし） */
#main .entry-content :where(ul:not([class])),
#main .entry-content .wp-block-list:not([class*="is-style-sango-list"]),
#main .entry-content blockquote,
#main .yyi-rinker-contents {
  border: 1px solid #e3e5e8;
  border-radius: 12px;
  box-shadow: none;
}
/* 表は角丸にせず、線の太さと色だけそろえる */
#main .entry-content table,
#main .entry-content tr:not(:last-child),
#main .entry-content td, #main .entry-content th,
#main .entry-content .wp-block-table td, #main .entry-content .wp-block-table th { border-color: #e3e5e8; }
#main .entry-content table { border-width: 1px; }
#main .entry-content tr:not(:last-child) { border-bottom-width: 1px; }
#main .entry-content td, #main .entry-content th { border-right-width: 1px; }
#main .entry-content th { border-bottom-width: 1px; }
#main .entry-content td:last-child, #main .entry-content th:last-child { border-right-width: 0; }
/* 整列：表は横スクロールのため block 表示で、セルが枠の幅まで広がらず右に空きが出ていた。
   スクロールは囲みの figure に任せ、表そのものは枠いっぱいに広げる */
#main .entry-content figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* has-fixed-layout の均等割りは、block 表示の今は効いていない（列は中身の幅）。そのまま広げると長い文字がセルからあふれるので auto に戻す */
#main .entry-content figure.wp-block-table > table { display: table; width: 100%; max-width: none; table-layout: auto; }
/* 反復：差し色は1つ。見出し3の線と引用符を SANGO の水色からサイトの青へ */
#main .entry-content h3 { border-left-color: var(--kh-accent, #1B5FC4); }
#main .entry-content blockquote::before { color: var(--kh-accent, #1B5FC4); }
/* 反復：記事の大きな画像と本文の画像の角丸を 10px にそろえる */
#main .post-thumbnail img { border-radius: 10px; }

/* コントラスト：スマホでは記事タイトル 24px と見出し2 22px の差が小さく、段が読み取りにくかった */
@media (max-width: 959px) {
  #main .entry-content h2 { font-size: 20px; }
  #main .entry-content h3 { font-size: 18px; }
}

/* --- 記事の末尾（シェアの下〜著者紹介） --- */
/* 整列：記事末尾の入れ物だけ内側に 25px（769〜1029）残り、本文の左端より右に始まっていた */
@media only screen and (max-width: 1029px) {
  #main .footer-contents { padding-right: 0; padding-left: 0; }
  #main .prnx { margin-right: 0; margin-left: 0; }
}
/* 整列：前後の記事だけ本文の幅より外に出ていた（1030 以上） */
@media only screen and (min-width: 1030px) {
  #main .prnx_box { padding-right: 40px; padding-left: 40px; }
}
/* 整列：カテゴリとタグだけ右寄せだった。ほかと同じ左寄せにし、スマホの内側の余白も外す */
#main .footer-meta { padding-right: 0; padding-left: 0; text-align: left; }
/* 整列：スマホではフォローの枠が本文より 16px 内側だった */
@media only screen and (max-width: 768px) {
  #main .like_box { padding-right: 0; padding-left: 0; }
}
/* 整列：関連記事の横並びの1枚目を本文の左端から始める */
#main .related-posts ul { padding-right: 0; padding-left: 0; }
#main .related-posts li:first-child { margin-left: 0; }
/* 反復：記事末尾のカードも本文の枠と同じ「1px の線・影なし」に */
#main .like_inside, #main .prnx_tb { border: 1px solid #e3e5e8; border-radius: 12px; box-shadow: none; }
#main .author-info .tb { box-shadow: none; }
/* 反復：関連記事の写真は本文の写真と同じく角丸 10px・影なし。押せることを示すホバー時の影は残す */
#main .related-posts li a img { border-radius: 10px; }
#main .related-posts li a:not(:hover) img { box-shadow: none; }