/* ブログ用統合CSS：共通CSS＋ブログ固有CSS＋SWELL非表示（ブログ系ページのみ読込） */
@import url("https://ayami-english.com/mockups/assets/common.css");
@import url("https://ayami-english.com/wp-content/themes/swell_child/blog.css");

#header, #fix_header, #sp_menu, .l-header, .l-fixHeader, #footer, .l-footer, .c-pageTitle, .l-breadcrumb, .p-breadcrumb, .l-sidebar, #sidebar, .c-fixBtns, .p-fixBtns { display: none !important; }
#body_wrap, #content, .l-content, #main, .l-mainArea, .l-container, .l-content__main, .l-articleBody { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; }
#content { overflow-x: hidden !important; }
body.blog, body.archive, body.search, body.single { background: var(--color-base, #FAF8F6); }

/* ログイン中の管理バー分、固定ヘッダーを下げる */
body:has(#wpadminbar) .site-header { top: 32px !important; }
@media screen and (max-width: 782px){ body:has(#wpadminbar) .site-header { top: 46px !important; } }

/* サイドバー プロフィール写真（素の写真・光沢加工なし） */
.profile-mini .avatar { background-image: url("https://ayami-english.com/wp-content/uploads/2026/06/irie-ayami-profile.webp") !important; background-size: cover !important; background-position: center !important; }
.profile-mini .avatar::after, .profile-mini .avatar::before { content: none !important; display: none !important; background: none !important; }

/* ページネーション（モック準拠：現在=水色塗り＋白／他=テキストのみ。四角は小さめ） */
.pagination a.page-numbers, .pagination span.page-numbers { padding: 6px 10px !important; min-width: 32px !important; font-size: 13px !important; border-radius: 4px !important; }
.pagination a.page-numbers, .pagination span.page-numbers:not(.current) { background: transparent !important; border: none !important; box-shadow: none !important; }
.pagination a.page-numbers::before, .pagination a.page-numbers::after { display: none !important; content: none !important; }
.pagination a.page-numbers:hover { background: var(--color-blue-soft, #C5DCE8) !important; color: var(--color-blue-dark, #4990A6) !important; }
.pagination .page-numbers.current { background: var(--color-blue, #79B3C7) !important; color: #fff !important; }
.pagination .page-numbers.prev, .pagination .page-numbers.next { font-style: italic; }

/* ===== 単一記事ページ（本文＋右サイドバーの2カラム） ===== */
.single-layout .layout-inner { padding-top: 130px !important; }
.single-main { min-width: 0; }
.single-article .breadcrumb { font-size: 12px; color: var(--color-text-sub,#8A8A8A); letter-spacing:.04em; margin-bottom: 20px; }
.single-article .breadcrumb a { color: var(--color-text-soft,#5C5C5C); text-decoration:none; }
.single-article .breadcrumb a:hover { color: var(--color-pink-dark,#C05E6A); }
.single-cat { display:inline-block; font-family:var(--font-jp-body); font-size:12px; color:var(--color-pink-dark,#C05E6A); background:var(--color-pink-bg,#FEF1F2); border-radius:999px; padding:4px 16px; margin-bottom:14px; }
.single-title { font-family:var(--font-jp-body); font-weight:700; font-size:28px; line-height:1.55; color:var(--color-text,#2A2A2A); margin:0 0 12px; }
.single-date { font-family:var(--font-en-display); font-size:13px; color:var(--color-text-sub,#8A8A8A); letter-spacing:.08em; margin:0 0 28px; }
.single-thumb { margin:0 0 36px; text-align:center; }
.single-thumb img { max-width:100%; max-height:560px; width:auto; height:auto; border-radius:14px; display:inline-block; }
.single-content { font-family:var(--font-jp-body); font-size:16px; line-height:2; color:var(--color-text,#2A2A2A); }
.single-content p { margin:0 0 1.6em; }
.single-content h2 { font-size:22px; font-weight:700; margin:2em 0 .7em; color:var(--color-text,#2A2A2A); border-left:4px solid var(--color-pink,#D98B91); padding-left:14px; }
.single-content h3 { font-size:18px; font-weight:700; margin:1.8em 0 .6em; color:var(--color-text,#2A2A2A); }
.single-content img { max-width:100%; height:auto; border-radius:10px; }
.single-content a { color:var(--color-pink-dark,#C05E6A); }
.single-content ul, .single-content ol { padding-left:1.4em; margin:0 0 1.6em; }
.single-content li { margin:.4em 0; }



/* ===== 関連記事 ===== */
.related-section { margin-top:64px; padding-top:40px; border-top:1px solid rgba(42,42,42,.08); }
.related-h { font-family:var(--font-jp-body); font-weight:700; font-size:18px; color:var(--color-text,#2A2A2A); margin:0 0 24px; display:flex; align-items:baseline; gap:10px; }
.related-h .ja { font-family:var(--font-en-display); font-size:12px; color:var(--color-pink-dark,#C05E6A); letter-spacing:.08em; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card { display:block; text-decoration:none; }
.related-card .thumb { aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:10px; background:linear-gradient(135deg,var(--color-pink-light,#F5D2D6),var(--color-blue-soft,#C5DCE8)); background-size:cover; background-position:center; }
.related-card .date { font-family:var(--font-en-display); font-size:11px; color:var(--color-text-sub,#8A8A8A); letter-spacing:.06em; margin:0; }
.related-card .title { font-family:var(--font-jp-body); font-size:13px; line-height:1.55; color:var(--color-text,#2A2A2A); margin:4px 0 0; }
.related-card:hover .title { color:var(--color-pink-dark,#C05E6A); }
@media (max-width:860px){ .related-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .related-grid{ grid-template-columns:1fr; } .post-nav{ flex-direction:column; } .post-nav a{ max-width:none; } .post-nav .pn-next{ margin-left:0; text-align:left; } }


/* ===== 記事下ナビ（前へ・一覧へ戻る・次へ／マイクロアニメ付き） ===== */
.post-end-mark { font-family:var(--font-en-hand,'Caveat',cursive); font-size:22px; color:var(--color-pink,#D98B91); text-align:center; margin:56px 0 4px; }
.post-bottom-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:16px; margin-top:8px; padding-top:28px; border-top:1px solid rgba(42,42,42,.08); }
.post-bottom-nav .pbn-prev { justify-self:start; }
.post-bottom-nav .pbn-next { justify-self:end; }
.post-bottom-nav .pbn-prev a, .post-bottom-nav .pbn-next a { display:inline-flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; }
.post-bottom-nav .pn-ico { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; font-size:18px; color:var(--color-text-soft,#5C5C5C); border:1px solid rgba(42,42,42,.16); border-radius:50%; transition:all .25s ease; }
.post-bottom-nav .pn-lbl { font-family:var(--font-en-display,'Quicksand',sans-serif); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-sub,#8A8A8A); transition:color .25s; }
.post-bottom-nav a:hover .pn-ico { color:#fff; background:var(--color-pink,#D98B91); border-color:var(--color-pink,#D98B91); box-shadow:0 6px 16px -6px rgba(217,139,145,.7); }
.post-bottom-nav .pbn-prev a:hover .pn-ico { transform:translateX(-4px); }
.post-bottom-nav .pbn-next a:hover .pn-ico { transform:translateX(4px); }
.post-bottom-nav a:hover .pn-lbl { color:var(--color-pink-dark,#C05E6A); }
.pbn-back { justify-self:center; align-self:center; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-jp-body); font-size:14px; letter-spacing:.02em; color:var(--color-text-soft,#5C5C5C); text-decoration:none; padding:13px 34px; border:1.5px solid rgba(42,42,42,.25); border-radius:999px; transition:all .25s ease; white-space:nowrap; }
.pbn-back:hover { color:#fff; background:var(--color-pink,#D98B91); border-color:var(--color-pink,#D98B91); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(217,139,145,.7); }
@media (max-width:560px){ .post-bottom-nav { gap:10px; } .pbn-back { padding:11px 20px; font-size:13px; } .post-bottom-nav .pn-lbl{ display:none; } }

/* === カテゴリバー：スマホは横スクロール1行（2026-07-06） === */
@media (max-width: 600px){
  .category-bar .inner{
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 20px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .category-bar .inner::-webkit-scrollbar{ display: none; }
  .cat-pill{
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}