@charset "UTF-8";
/* おやかわ眼科 お知らせ（一覧・詳細）固有CSS */

.oyk-blogwrap{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:clamp(24px,3vw,40px); align-items:flex-start; }
.oyk-blog-main{ flex:3 1 320px; }
.oyk-blog-side{ flex:1 1 260px; display:flex; flex-direction:column; gap:20px; }

/* フィルター */
.oyk-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.oyk-filter__item{ font-size:13.5px; font-weight:700; padding:8px 18px; border-radius:22px; cursor:pointer; background:#fff; color:#8B5A2B; border:1px solid #d5e1f0; transition:.2s ease; }
.oyk-filter__item.is-active{ background:#8B5A2B; color:#fff; border-color:#8B5A2B; }

/* 記事一覧 */
.oyk-blog-list{ background:#fff; border-radius:22px; box-shadow:0 8px 24px rgba(139,90,43,.08); overflow:hidden; }
.oyk-blog-list__row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:22px 24px; text-decoration:none; border-bottom:1px solid #eef3f9; transition:.25s ease; }
.oyk-blog-list__row:last-child{ border-bottom:none; }
.oyk-blog-list__row:hover{ background:#FDFBF7; }
.oyk-blog-list__date{ font-family:"Jost",sans-serif; font-size:14px; color:#6f8299; }
.oyk-blog-list__title{ font-size:15.5px; font-weight:500; color:#2b3a4a; flex:1; min-width:180px; line-height:1.6; }

/* ページネーション */
.oyk-pager{ display:flex; justify-content:center; gap:8px; margin-top:34px; }
.oyk-pager__item{ display:inline-flex; min-width:42px; height:42px; align-items:center; justify-content:center; border-radius:12px; font-family:"Jost",sans-serif; font-weight:600; font-size:15px; cursor:pointer; background:#fff; color:#8B5A2B; box-shadow:0 4px 12px rgba(139,90,43,.10); text-decoration:none; transition:.2s ease; }
.oyk-pager__item.is-active{ background:#8B5A2B; color:#fff; }

/* サイドバー */
.oyk-side-box{ background:#fff; border-radius:20px; padding:22px; box-shadow:0 8px 24px rgba(139,90,43,.07); }
.oyk-side-box__title{ margin:0 0 14px; font-size:16px; font-weight:900; color:#8B5A2B; border-left:4px solid #1f4583; padding-left:10px; }
.oyk-side-cat{ display:flex; flex-direction:column; }
.oyk-side-cat__row{ display:flex; justify-content:space-between; align-items:center; padding:11px 4px; text-decoration:none; color:#3a4a5c; font-size:14px; border-bottom:1px solid #eef3f9; }
.oyk-side-cat__count{ font-family:"Jost",sans-serif; font-size:12px; color:#8298b4; }
.oyk-side-recent{ display:flex; flex-direction:column; gap:12px; }
.oyk-side-recent a{ text-decoration:none; color:#3a4a5c; }
.oyk-side-recent__date{ font-family:"Jost",sans-serif; font-size:12px; color:#8298b4; }
.oyk-side-recent__title{ font-size:13.5px; line-height:1.6; margin-top:2px; }
.oyk-side-arch{ display:flex; flex-direction:column; }
.oyk-side-arch a{ padding:10px 4px; text-decoration:none; color:#3a4a5c; font-size:14px; border-bottom:1px solid #eef3f9; }

/* 記事詳細 */
.oyk-article{ flex:3 1 320px; background:#fff; border-radius:22px; box-shadow:0 8px 24px rgba(139,90,43,.08); overflow:hidden; }
.oyk-article__head{ padding:clamp(24px,3vw,38px) clamp(20px,3vw,44px) 0; }
.oyk-article__crumb{ margin:0; font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.06em; color:#8298b4; }
.oyk-article__crumb a{ color:#8298b4; text-decoration:none; }
.oyk-article__meta{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.oyk-article__date{ font-family:"Jost",sans-serif; font-size:14px; color:#6f8299; }
.oyk-article__title{ margin:14px 0 24px; font-size:clamp(22px,3vw,30px); font-weight:900; color:#8B5A2B; line-height:1.6; }
.oyk-article__hero{ aspect-ratio:16/9; background:#ECE1D3; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 clamp(20px,3vw,44px); }
.oyk-article__hero-emoji{ font-size:48px; opacity:.5; }
.oyk-article__hero-note{ margin-top:10px; font-size:12px; color:#93a9c7; border:1px solid #b9cde6; border-radius:16px; padding:3px 12px; }
.oyk-article__body{ padding:clamp(24px,3vw,38px) clamp(20px,3vw,44px); }
.oyk-article__body p{ margin:0 0 18px; font-size:15.5px; line-height:2.1; color:#45566a; }
.oyk-article__back{ margin-top:36px; display:flex; justify-content:center; }