@charset "UTF-8";
/*
Theme Name: 押上ファースト歯科ブログ 2026
Theme URI: https://www.oshiage1st.com/blog/
Description: 押上ファースト歯科（新サイト、2026-10-24 公開）と同じ見た目のブログのテーマ。ヘッダー・フッター・共通の CSS は、本体サイトの書き出しが作る /blog-shell/ の部品をファイルとして読む。ブログ固有の見た目だけをこの CSS に書く。
Author: 押上ファースト歯科
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oshiage1st-2026
Tags: two-columns, right-sidebar
*/

/* 色・文字・余白は本体サイトの CSS 変数（design/tokens.json → tokens.css。/blog-shell/head.html が読む CSS に入っている）だけを使う。
   本体の CSS が読めないとき（body.is-noshell）は、いちばん下の「最低限の見た目」で同じ値を補う。 */

.o1st-blog svg.ar{width:20px;height:20px;flex:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* スマホの下の固定バーの土台（本体では記事・ピラーなど各ページの CSS にあり、共通の CSS には入っていないため、ここで足す。本体の article.css と同じ値） */
.bar{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:8px;background:rgba(255,255,255,.96);box-shadow:0 -4px 16px rgba(36,39,31,.08)}
.bar .btn{min-height:52px}
@media (min-width:1024px){.bar{display:none}}

/* ログイン中の管理バーの下にヘッダーを出す */
.admin-bar .hd{top:32px}
@media (max-width:782px){.admin-bar .hd{top:46px}}
@media (max-width:600px){.admin-bar .hd{top:0}}

/* ---------- 冒頭の帯（パンくず・小見出し・題）。若葉色の地に、動かない森と歩く動物 ---------- */
.bl-hero{position:relative;background:var(--mist);overflow:hidden}
.bl-hero-in{position:relative;z-index:2;padding-block:var(--space-m) calc(clamp(56px,8vw,120px) + var(--space-s))}
@media (min-width:1024px){.bl-hero-in{padding-top:var(--space-l)}}
.bl-crumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .5em;margin:0 0 var(--space-m);font-size:var(--fs-caption);line-height:1.6;color:var(--ink-muted)}
.bl-crumb a{color:inherit}
.bl-crumb .sep{color:var(--sage-500)}
.bl-crumb [aria-current]{min-width:0;overflow-wrap:anywhere}
.bl-eyebrow{margin:0 0 var(--space-xs);font-family:"Plus Jakarta Sans",var(--font-sans);font-size:var(--fs-caption);font-weight:600;letter-spacing:.24em;color:var(--forest-700)}
.bl-h1{max-width:26em;font-size:clamp(1.65rem,1.2rem + 2vw,2.6rem);line-height:1.4;color:var(--forest-900);overflow-wrap:anywhere}
.bl-lead{max-width:36em;margin:var(--space-s) 0 0;font-size:var(--fs-note);line-height:1.85;color:var(--ink-muted)}
@media (min-width:1024px){.bl-lead{font-size:var(--fs-body)}}
.bl-forest{position:absolute;left:0;right:0;bottom:0;z-index:1;height:clamp(56px,8vw,120px);pointer-events:none}
.bl-forest i{position:absolute;inset:0;background:var(--c);-webkit-mask:var(--m) var(--x,0) bottom/auto 100% repeat-x;mask:var(--m) var(--x,0) bottom/auto 100% repeat-x}
.bl-forest .a{--m:url(/img/forest-fa.webp);--c:var(--ff-a);--x:-12%;bottom:38%}
.bl-forest .b{--m:url(/img/forest-fb.webp);--c:var(--ff-b);--x:-40%;bottom:26%}
.bl-forest .c{--m:url(/img/forest-fc.webp);--c:var(--ff-c);--x:-5%;bottom:15%}
.bl-forest .d{--m:url(/img/forest-fd.webp);--c:var(--ff-d);--x:-62%;bottom:6%}
.bl-forest .e{--m:url(/img/forest-fe.webp);--c:var(--paper);--x:-30%;bottom:-1px}
.bl-walker{position:absolute;z-index:2;right:9%;bottom:clamp(8px,1.6vw,22px);width:clamp(60px,6.5vw,104px);height:auto;pointer-events:none}
/* 歩く動物：サイトの冒頭と同じく、帯の上を行ったり来たり（48秒）。動きを減らす設定では止める（2026-10-25） */
@keyframes bl-amble{0%,14%{translate:0 0;scale:-1 1}36%,50%{translate:var(--amb,-120px) 0;scale:-1 1}52%{translate:var(--amb,-120px) 0;scale:1 1}74%,88%{translate:0 0;scale:1 1}90%,100%{translate:0 0;scale:-1 1}}
.bl-walker{animation:bl-amble 48s ease-in-out infinite}
@media (max-width:767px){.bl-walker{--amb:-56px}}
@media (prefers-reduced-motion:reduce){.bl-walker{animation:none}}
/* ブログのトップの背景：伊蘭栴檀の情景（枯れた草原が、一本の栴檀から緑に変わる。Codex で作成）を右に敷き、文字の側は若葉色で覆って読みやすく（写真は assets/hero-bg.webp を差し替え） */
.bl-hero.has-photo{background:linear-gradient(90deg,var(--mist) 0%,rgb(241 247 236 / .85) 28%,rgb(241 247 236 / .4) 44%,rgb(241 247 236 / 0) 58%),var(--hero-bg) right bottom/cover no-repeat,var(--mist)}
@media (min-width:768px){.bl-hero.is-top .bl-hero-in{min-height:clamp(440px,44vw,680px);display:flex;flex-direction:column;justify-content:center}}
/* 記事・カテゴリー・検索などは、同じ写真に全体へもやをかけ、題の側をより白く。高さは低め（2026-10-25 Hicoさん） */
.bl-hero.has-photo.is-sub{background:linear-gradient(90deg,var(--mist) 0%,rgb(241 247 236 / .9) 42%,rgb(241 247 236 / .55) 70%,rgb(241 247 236 / .4) 100%),linear-gradient(rgb(255 255 255 / .25),rgb(255 255 255 / .25)),var(--hero-bg) right bottom/cover no-repeat,var(--mist)}
@media (min-width:768px){.bl-hero.is-sub .bl-hero-in{min-height:clamp(320px,28vw,440px);display:flex;flex-direction:column;justify-content:center}}
@media (max-width:767px){.bl-hero.has-photo.is-sub{background:linear-gradient(180deg,rgb(241 247 236 / .92) 0%,rgb(241 247 236 / .85) 100%),var(--hero-bg) center/cover no-repeat,var(--mist)}}
@media (max-width:767px){.bl-hero.has-photo{background:linear-gradient(180deg,rgb(241 247 236 / .9) 0%,rgb(241 247 236 / .78) 100%),var(--hero-bg) center/cover no-repeat,var(--mist)}}

/* ---------- 骨組み：PC は本文＋右のサイドバー（300px）、スマホは本文の下にサイドバー ---------- */
.bl-layout{padding-block:var(--space-l) var(--space-xl)}
@media (min-width:1024px){.bl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(3rem,5vw,5.5rem);align-items:start;padding-top:var(--space-xl)}}
.bl-body{min-width:0}

/* ---------- 記事の一覧（カード） ---------- */
.bl-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-l) var(--space-m)}
@media (min-width:640px){.bl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bl-card a{display:flex;flex-direction:column;gap:.45em;height:100%;color:var(--ink);text-decoration:none}
.bl-thumb{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-card);background:var(--mist)}
.bl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.bl-card a:hover .bl-thumb img{transform:scale(1.04)}
.bl-thumb.is-none{display:grid;place-items:center;color:var(--sage-300)}
.bl-thumb.is-none svg{width:56px;height:56px}
.bl-card-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .9em;margin-top:.35em;font-size:var(--fs-caption);color:var(--ink-muted)}
.bl-card-meta time,.bl-recent time,.bl-postmeta time{font-variant-numeric:tabular-nums;letter-spacing:.03em}
.bl-card-cat{color:var(--forest-700);letter-spacing:.06em}
.bl-card-t{word-break:auto-phrase;font-size:var(--fs-title);line-height:1.55;font-weight:500;letter-spacing:.04em;color:var(--forest-900);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-decoration-color .3s}
@media (min-width:1024px){.bl-card-t{word-break:auto-phrase;font-size:var(--fs-title-lg)}}
.bl-card a:hover .bl-card-t,.bl-card a:focus-visible .bl-card-t{text-decoration-color:currentColor}
.bl-card-ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-note);line-height:1.7;color:var(--ink-muted)}
.bl-empty{padding:var(--space-l);border-radius:var(--radius-card);background:var(--mist)}

/* ページ送り */
.bl-pager{margin-top:var(--space-xl)}
.bl-pager .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.bl-pager .page-numbers{display:inline-grid;place-items:center;min-width:48px;min-height:48px;padding:0 1em;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-variant-numeric:tabular-nums;text-decoration:none;transition:background-color .3s,box-shadow .3s}
.bl-pager a.page-numbers:hover{background:var(--mist);box-shadow:inset 0 0 0 1.5px var(--forest-700)}
.bl-pager .current{background:var(--forest-700);box-shadow:none;color:#fff}
.bl-pager .dots{box-shadow:none;min-width:24px;padding:0}

/* ---------- サイドバー ---------- */
.bl-side{margin-top:var(--space-xl);padding-top:var(--space-l);border-top:1px solid var(--line)}
@media (min-width:1024px){.bl-side{margin-top:0;padding-top:0;border-top:0}}
.bl-owl{width:84px;height:auto;margin:0 0 8px 6px}
.bl-box+.bl-box{margin-top:var(--space-l)}
.bl-box-h{margin:0;padding:0 4px .6em;border-bottom:1.5px solid var(--ink);font-size:var(--fs-title);line-height:1.4;color:var(--forest-900)}
.bl-recent,.bl-catlist{list-style:none;margin:0;padding:0}
.bl-recent a,.bl-catlist a{position:relative;isolation:isolate;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.bl-recent a::before,.bl-catlist a::before,.bl-guide a::before,.bl-adj a::before,.bl-back::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mist);clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease)}
.bl-recent a:hover::before,.bl-catlist a:hover::before,.bl-guide a:hover::before,.bl-adj a:hover::before,.bl-back:hover::before,
.bl-recent a:focus-visible::before,.bl-catlist a:focus-visible::before,.bl-guide a:focus-visible::before,.bl-adj a:focus-visible::before,.bl-back:focus-visible::before{clip-path:inset(0)}
.bl-recent a{display:grid;gap:2px;padding:12px 6px}
.bl-recent time{font-size:var(--fs-caption);color:var(--ink-muted)}
.bl-recent .t{font-size:var(--fs-note);line-height:1.65}
.bl-catlist a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);min-height:48px;padding:0 6px;font-size:var(--fs-note)}
.bl-catlist .n{font-size:var(--fs-caption);color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-catlist .n small{font-size:.85em;margin-left:1px}
.bl-catlist a[aria-current]{color:var(--forest-700);font-weight:600}
.bl-catlist a[aria-current]::before{clip-path:inset(0)}
.bl-side-all{margin:var(--space-m) 0 0}
.bl-side-all a{display:inline-flex;align-items:center;gap:.35em;padding-bottom:2px;border-bottom:1.5px solid var(--sage-300);color:var(--forest-700);font-weight:500;font-size:var(--fs-note);text-decoration:none}
.bl-side-all svg.ar{width:16px;height:16px;transition:transform .45s var(--ease)}
.bl-side-all a:hover svg.ar{transform:translateX(4px)}

/* ---------- 記事 ---------- */
.bl-postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1em;margin:var(--space-s) 0 0;font-size:var(--fs-note);color:var(--ink-muted)}
.bl-chips{display:flex;flex-wrap:wrap;gap:6px}
.bl-chips a{display:inline-block;padding:2px .9em;border-radius:var(--radius-pill);background:var(--paper);box-shadow:inset 0 0 0 1px var(--sage-500);color:var(--forest-700);font-size:var(--fs-caption);font-weight:500;letter-spacing:.06em;text-decoration:none;transition:background-color .3s}
.bl-chips a:hover{background:var(--sage-100)}
.bl-article{max-width:47rem}
.bl-eyecatch{margin:0 0 var(--space-l)}
.bl-eyecatch img{width:100%;height:auto;border-radius:var(--radius-card)}

/* 本文の文字組み（本体サイトの記事 .art .sec と同じ考え方：行間 2、見出しの下線、小見出しの左の線、強調の下の帯） */
.bl-content{font-size:var(--fs-body);line-height:2;overflow-wrap:anywhere}
@media (min-width:1024px){.bl-content{font-size:var(--fs-body-lg)}}
.bl-content>*{margin-top:0;margin-bottom:1.1em}
.bl-content p{max-width:36em}
.bl-content h2{position:relative;margin:var(--space-xl) 0 var(--space-m);padding-bottom:.6em;border-bottom:1.5px solid var(--forest-700);font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem);line-height:1.45;color:var(--forest-900)}
.bl-content>h2:first-child{margin-top:0}
.bl-content h3{margin:var(--space-l) 0 var(--space-s);padding-left:.7em;border-left:3px solid var(--sage-500);font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.5;color:var(--forest-900)}
.bl-content h4{margin:var(--space-m) 0 .4em;font-size:var(--fs-title);line-height:1.5;font-weight:600;color:var(--forest-900)}
.bl-content strong,.bl-content b{color:var(--forest-900);background:linear-gradient(transparent 64%,rgba(141,181,120,.28) 64%)}
.bl-content a{color:var(--forest-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.bl-content a:hover{text-decoration-thickness:2px}
.bl-content ul,.bl-content ol{max-width:36em;padding-left:1.4em}
.bl-content li{line-height:1.85}
.bl-content li+li{margin-top:.45em}
.bl-content ul li::marker{color:var(--sage-500)}
.bl-content ol li::marker{color:var(--forest-700);font-variant-numeric:tabular-nums}
.bl-content figure{margin:var(--space-l) 0}
.bl-content figure img,.bl-content .wp-block-image img{height:auto;border-radius:var(--radius-card)}
.bl-content figcaption,.bl-content .wp-element-caption{margin-top:.7em;font-size:var(--fs-caption);line-height:1.7;color:var(--ink-muted);text-align:left}
.bl-content blockquote{margin:var(--space-m) 0;padding:var(--space-s) var(--space-m);border-left:5px solid var(--sage-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--mist)}
.bl-content blockquote p:last-child{margin-bottom:0}
.bl-content table{width:100%;border-collapse:collapse;font-size:var(--fs-note);line-height:1.7}
.bl-content th,.bl-content td{padding:.6em .8em;border:1px solid var(--line);text-align:left;vertical-align:top}
.bl-content th{background:var(--mist);font-weight:500}
.bl-content .wp-block-table{overflow-x:auto}
.bl-content hr{border:0;border-top:1px solid var(--line);margin:var(--space-l) 0}
.bl-content pre{overflow-x:auto;padding:var(--space-s);border-radius:var(--radius-sm);background:var(--mist);font-size:var(--fs-note)}
.bl-content iframe,.bl-content video,.bl-content embed{max-width:100%}
.bl-content .aligncenter{margin-inline:auto}
@media (min-width:768px){
  .bl-content .alignleft{float:left;margin:.4em var(--space-m) var(--space-s) 0;max-width:50%}
  .bl-content .alignright{float:right;margin:.4em 0 var(--space-s) var(--space-m);max-width:50%}
}
.bl-content::after{content:"";display:table;clear:both}
.bl-pages{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-l);font-variant-numeric:tabular-nums}

/* 記事下の案内（SCF の footerbannercheck） */
.bl-guide{max-width:47rem;margin-top:var(--space-xl)}
.bl-guide-h{margin:0 0 var(--space-s);font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);color:var(--forest-900)}
.bl-guide ul{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.bl-guide a{position:relative;isolation:isolate;display:grid;grid-template-columns:96px minmax(0,1fr) 24px;align-items:center;gap:var(--space-s);padding:var(--space-s) 8px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
@media (min-width:768px){.bl-guide a{grid-template-columns:136px minmax(0,1fr) 28px}}
.bl-guide img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-sm)}
.bl-guide .t{display:flex;flex-direction:column;gap:2px;transition:transform .45s var(--ease)}
.bl-guide a:hover .t{transform:translateX(6px)}
.bl-guide small{font-size:var(--fs-caption);line-height:1.6;color:var(--ink-muted)}
.bl-guide strong{word-break:auto-phrase;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.45;font-weight:500;color:var(--forest-900)}
.bl-guide svg.ar{color:var(--forest-700);transition:transform .45s var(--ease),color .3s}
.bl-guide a:hover svg.ar{transform:translateX(4px);color:var(--mandarin-ink)}

/* 前後の記事・一覧へ戻る */
.bl-adj{display:grid;gap:8px;max-width:47rem;margin-top:var(--space-xl)}
@media (min-width:768px){.bl-adj{grid-template-columns:1fr 1fr}.bl-adj-prev:only-child{grid-column:2}}
.bl-adj a{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:2px;padding:var(--space-s);border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;overflow:hidden}
.bl-adj small{font-size:var(--fs-caption);color:var(--forest-700);letter-spacing:.06em}
.bl-adj span{font-size:var(--fs-note);line-height:1.6}
@media (min-width:768px){.bl-adj-prev{text-align:right}}
.bl-back{position:relative;isolation:isolate;display:grid;grid-template-columns:32px 1fr;align-items:center;gap:var(--space-s);max-width:47rem;margin-top:var(--space-l);padding:var(--space-m) 8px;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);color:var(--forest-900);font-size:var(--fs-title);text-decoration:none}
.bl-back svg.ar{transform:scaleX(-1);color:var(--forest-700);transition:transform .45s var(--ease)}
.bl-back:hover svg.ar{transform:scaleX(-1) translateX(4px)}

/* 404 */
.bl-nf{margin-bottom:var(--space-l)}
.bl-nf-go{display:flex;flex-wrap:wrap;gap:8px}
.bl-sec-h{margin:0 0 var(--space-m);font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);color:var(--forest-900)}

@media (prefers-reduced-motion:reduce){
  .bl-thumb img,.bl-guide .t,.bl-guide svg.ar,.bl-back svg.ar,.bl-side-all svg.ar{transition:none}
  .bl-recent a::before,.bl-catlist a::before,.bl-guide a::before,.bl-adj a::before,.bl-back::before{transition:none}
}

/* ---------- 最低限の見た目（本体の共通部品 /blog-shell/ が読めないとき。body.is-noshell） ---------- */
.is-noshell{--paper:#FFFFFF;--mist:#F1F7EC;--line:#D5DACD;--ink:#24271F;--ink-muted:#5B5E51;--sage-100:#C4DDB0;--sage-300:#A6CF8A;--sage-500:#5E9E4E;--forest-700:#2D6A39;--forest-900:#1C3F26;--mandarin:#FF9A3D;--mandarin-ink:#A3501A;
  --font-sans:"Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;--space-xs:.5rem;--space-s:1rem;--space-m:1.5rem;--space-l:3rem;--space-xl:5rem;--radius-sm:6px;--radius-card:14px;--radius-pill:999px;
  --fs-body:1.0625rem;--fs-body-lg:1.125rem;--fs-title:1.125rem;--fs-title-lg:1.25rem;--fs-note:.9375rem;--fs-caption:.875rem;--ease:cubic-bezier(.16,1,.3,1);
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.8}
.is-noshell *,.is-noshell *::before,.is-noshell *::after{box-sizing:border-box}
.is-noshell img{display:block;max-width:100%;height:auto}
.is-noshell a{color:var(--forest-700)}
.is-noshell h1,.is-noshell h2,.is-noshell h3{font-weight:400;letter-spacing:.06em}
.is-noshell .container{max-width:1240px;margin:0 auto;padding-inline:16px}
.is-noshell .bl-forest,.is-noshell .bl-walker,.is-noshell .bl-owl,.is-noshell .bl-thumb.is-none svg,.is-noshell svg.ar{display:none}
.nb-hd{border-bottom:1px solid var(--line);background:var(--paper)}
.nb-hd .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:64px}
.nb-logo{font-size:1.25rem;color:var(--forest-900);text-decoration:none;letter-spacing:.06em}
.nb-hd nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.nb-ftr{margin-top:var(--space-l);padding-block:var(--space-l);background:var(--forest-900);color:#fff;font-size:var(--fs-note)}
.nb-ftr a{color:#fff}