@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
:root{--color-bg:#faf8f5;--color-bg-warm:#f5f0e8;--color-surface:#ffffff;--color-border:#e8e0d4;--color-text:#3d3530;--color-text-sub:#7a6f65;--color-text-mute:#a89e94;--color-accent:#8b7355;--color-accent2:#c4956a;--color-tag-bg:#ede8df;--font-serif:'Noto Serif JP',serif;--font-sans:'Zen Kaku Gothic New',sans-serif;--radius:8px;--radius-lg:16px;--shadow:0 2px 12px rgba(61,53,48,0.08);--shadow-hover:0 6px 24px rgba(61,53,48,0.14);--max-width:1100px;--content-width:720px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;overflow-x:clip}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-weight:500 !important;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}
.site-header{background:rgba(255,255,255,0.92);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;backdrop-filter:blur(8px);transition:transform 0.3s ease}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-logo{font-family:var(--font-serif);font-size:1rem;font-weight:500;color:var(--color-text);letter-spacing:0.04em;white-space:nowrap;line-height:1.4;display:flex;align-items:center;gap:8px}
.site-logo span{color:var(--color-accent2)}
.header-nav{display:flex;gap:0;list-style:none;flex-wrap:wrap}
.header-nav a{font-size:0.78rem;color:var(--color-text-sub);padding:5px 10px;border-radius:20px;transition:all 0.2s;white-space:nowrap}
.header-nav a:hover{color:var(--color-accent);background:var(--color-tag-bg)}
.hero{background:linear-gradient(135deg,#f5f0e8 0%,#ede4d3 50%,#e8ddc8 100%);padding:56px 24px 48px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-60px;right:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(196,149,106,0.12) 0%,transparent 70%);border-radius:50%}
.hero-inner{position:relative;z-index:1}
.hero-icon{width:100px;height:100px;border-radius:50%;border:4px solid rgba(255,255,255,0.8);margin:0 auto 20px;overflow:hidden;box-shadow:0 4px 20px rgba(61,53,48,0.15)}
.hero-icon img{width:100%;height:100%;object-fit:cover}
.hero-label{display:inline-block;font-size:0.72rem;letter-spacing:0.2em;color:var(--color-accent);background:rgba(139,115,85,0.1);padding:4px 14px;border-radius:20px;margin-bottom:16px}
.hero h1{font-family:var(--font-serif);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:500;line-height:1.3;margin-bottom:14px}
.hero p{color:var(--color-text-sub);font-size:0.9rem;max-width:500px;margin:0 auto;line-height:1.8}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}
.layout-with-sidebar{display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:start;padding:48px 0 80px}
.main-content{min-width:0}
.section-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:500;color:var(--color-text);margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--color-border);display:flex;align-items:center;gap:8px}
.section-title::before{content:'';width:4px;height:1.1em;background:var(--color-accent2);border-radius:2px;flex-shrink:0}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:40px}
.article-card{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);transition:transform 0.25s ease,box-shadow 0.25s ease;display:flex;flex-direction:column}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.article-card > a{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;outline:none}
.card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--color-bg-warm)}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.article-card:hover .card-thumb img{transform:scale(1.04)}
.card-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;background:linear-gradient(135deg,var(--color-bg-warm),var(--color-tag-bg))}
.card-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.card-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.card-cat{font-size:0.68rem;color:var(--color-accent);background:var(--color-tag-bg);padding:2px 10px;border-radius:20px}
.card-title{font-family:var(--font-serif);font-size:0.92rem;font-weight:500;line-height:1.65;color:var(--color-text);margin-bottom:8px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-date{font-size:0.72rem;color:var(--color-text-mute);margin-top:auto}
.sidebar-widget{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;margin-bottom:20px}
.widget-title{font-family:var(--font-serif);font-size:0.9rem;font-weight:500;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--color-border)}
.cat-list{list-style:none}.cat-list li{border-bottom:1px solid var(--color-bg-warm)}
.cat-list a{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;font-size:0.82rem;color:var(--color-text-sub);transition:color 0.2s}
.cat-list a:hover{color:var(--color-accent)}
.cat-list .count{font-size:0.72rem;color:var(--color-text-mute);background:var(--color-tag-bg);padding:2px 7px;border-radius:20px}
.recent-list{list-style:none}.recent-list li{padding:7px 0;border-bottom:1px solid var(--color-bg-warm)}
.recent-list li:last-child{border-bottom:none}
.recent-list a{font-size:0.8rem;color:var(--color-text-sub);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.2s}
.recent-list a:hover{color:var(--color-accent)}
.profile-card{text-align:center}
.profile-icon{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;overflow:hidden;border:3px solid var(--color-border)}
.profile-name{font-family:var(--font-serif);font-size:0.95rem;font-weight:500;margin-bottom:8px}
.profile-bio{font-size:0.78rem;color:var(--color-text-sub);line-height:1.7;text-align:left;margin-bottom:12px}
.profile-links{list-style:none;margin:0 0 14px;padding:0;text-align:left;border-top:1px solid var(--color-border);padding-top:12px}
.profile-links li{border-bottom:1px solid var(--color-border)}
.profile-links li a{display:block;padding:8px 4px;font-size:0.8rem;color:var(--color-text-sub);transition:color 0.2s,padding-left 0.2s}
.profile-links li a:hover{color:var(--color-accent);padding-left:6px}
.profile-x-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:#000;color:#fff !important;font-size:0.8rem;font-weight:600;padding:9px 16px;border-radius:20px;transition:background 0.2s;text-decoration:none}
.profile-x-btn:hover{background:#333}
.profile-x-btn svg{flex-shrink:0}
/* ===== 折りたたみ目次ウィジェット ===== */
#toc-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: visible; /* スクロール干渉を防ぐ */
}
#toc-widget.is-fixed {
  position: fixed;
  top: 76px;
  z-index: 50;
  box-shadow: var(--shadow-hover);
  overflow: visible;
}
.toc-toggle-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.toc-toggle-btn:hover { background: var(--color-bg-warm); }
.toc-toggle-icon {
  font-size: 0.75rem;
  color: var(--color-text-mute);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.toc-toggle-btn.open .toc-toggle-icon { transform: rotate(180deg); }
#toc-body {
  overflow-y: auto; /* ★ 目次内スクロールを有効化 */
  max-height: 0;
  transition: max-height 0.35s ease;
  border-top: 0px solid var(--color-border);
}
#toc-body.open {
  max-height: 55vh; /* ★ 画面の半分を上限に */
  border-top-width: 1px;
}
/* ★ スクロールバーをおしゃれに */
#toc-body::-webkit-scrollbar { width: 4px; }
#toc-body::-webkit-scrollbar-track { background: var(--color-bg-warm); }
#toc-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.toc-list { list-style: none; padding: 8px 0; margin: 0; }
.toc-item { }
.toc-item a {
  display: block;
  padding: 6px 18px;
  font-size: 0.84rem;
  color: var(--color-text); /* ★ 濃い色に変更（可読性UP） */
  transition: color 0.2s, background 0.2s;
  line-height: 1.6;
}
.toc-item a:hover, .toc-item a.toc-active {
  color: var(--color-accent);
  background: var(--color-bg-warm);
}
/* h2: トップレベル見出し（太字・左ボーダー） */
.toc-h2 a { font-weight: 600; padding-left: 14px; border-left: 2px solid var(--color-accent2); }
/* h3: 第2階層（通常インデント） */
.toc-h3 a { padding-left: 22px; }
/* ★ h4はインデント＋少し薄く（でも読めるレベル） */
.toc-h4 a { padding-left: 32px; font-size: 0.8rem; color: var(--color-text-sub); }
/* 記事スタイル */
.article-page{padding:0 0 80px}
.article-header{margin-bottom:28px}
.article-header .cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.article-header .cat-tag{font-size:0.75rem;color:var(--color-accent);background:var(--color-tag-bg);padding:4px 14px;border-radius:20px}
.article-header h1{font-family:var(--font-serif);font-size:clamp(1.25rem,3vw,1.75rem);font-weight:500;line-height:1.6;margin-bottom:14px}
.article-meta{font-size:0.78rem;color:var(--color-text-mute);display:flex;gap:14px;align-items:center}
.article-eyecatch{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:28px;aspect-ratio:16/9;background:var(--color-bg-warm)}
.article-eyecatch img{width:100%;height:100%;object-fit:cover}
.article-body{font-size:1rem;line-height:1.75;color:var(--color-text);max-width:var(--content-width)}
.article-body p{margin-bottom:0.75em}
.article-body h2{font-family:var(--font-serif);font-size:1.22rem;font-weight:500;margin:2.5em 0 1em;padding:14px 20px;background:linear-gradient(135deg,var(--color-bg-warm),#ede8df);border-left:4px solid var(--color-accent2);border-radius:0 var(--radius) var(--radius) 0}
.article-body h2.comment-title{font-size:1.1rem;font-weight:500;margin-bottom:20px;padding:0;background:none;border-left:none;border-radius:0}
.article-body h3{font-family:var(--font-serif);font-size:1.05rem;font-weight:500;margin:2em 0 0.8em;padding-bottom:6px;border-bottom:2px dotted var(--color-border);color:var(--color-accent)}
.article-body h4{font-family:var(--font-serif);font-size:1rem;font-weight:500;margin:1.8em 0 0.6em;color:var(--color-text-sub)}
.article-body ul,.article-body ol{margin:1em 0 1.5em 1.5em}
.article-body li{margin-bottom:0.4em}
.article-body blockquote{margin:1.5em 0;padding:14px 18px;background:var(--color-bg-warm);border-left:3px solid var(--color-accent2);border-radius:0 var(--radius) var(--radius) 0;color:var(--color-text-sub)}
.article-body strong{font-weight:500}
.article-body a{color:var(--color-accent);text-decoration:underline;text-decoration-color:rgba(139,115,85,0.4)}
.article-body a:hover{text-decoration-color:var(--color-accent)}
.article-body img{border-radius:var(--radius);margin:1.5em auto}
.article-body table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:0.9rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.article-body table[class]{display:table;overflow-x:visible;width:100%}
.article-body th,.article-body td{border:1px solid var(--color-border);padding:10px 14px;text-align:left;vertical-align:middle}
.article-body th{background:var(--color-bg-warm);font-weight:500}
/* はてなブログ由来のinline color:#000残滓フェイルセーフ */
.article-body [style*="color: #000000"],.article-body [style*="color:#000000"],.article-body [style*="color: #000;"],.article-body [style*="color: #000}"]{color:inherit!important}
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px;padding-top:28px;border-top:1px solid var(--color-border)}
.article-nav a{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:14px 16px;transition:all 0.2s}
.article-nav a:hover{border-color:var(--color-accent);box-shadow:var(--shadow)}
.nav-label{font-size:0.7rem;color:var(--color-text-mute);margin-bottom:5px}
.nav-title{font-size:0.82rem;color:var(--color-text-sub);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-nav .next{text-align:right}
.category-header{padding:36px 0 28px;border-bottom:1px solid var(--color-border);margin-bottom:36px}
.category-header h1{font-family:var(--font-serif);font-size:1.5rem;font-weight:500;display:flex;align-items:center;gap:10px}
.category-header h1 .label{font-size:0.72rem;color:var(--color-accent);background:var(--color-tag-bg);padding:4px 12px;border-radius:20px;font-family:var(--font-sans);font-weight:400}
.category-header .count{font-size:0.83rem;color:var(--color-text-mute);margin-top:7px}
.breadcrumb{padding:12px 0;margin-bottom:4px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:0.76rem;color:var(--color-text-mute)}
.breadcrumb li::after{content:'›';margin-left:4px}
.breadcrumb li:last-child::after{display:none}
.breadcrumb a{color:var(--color-text-mute)}.breadcrumb a:hover{color:var(--color-accent)}
#scroll-top{position:fixed;bottom:90px;right:24px;width:44px;height:44px;background:var(--color-accent);color:white;border:none;border-radius:50%;font-size:1.1rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.2s;z-index:200;box-shadow:0 4px 12px rgba(61,53,48,0.2)}
#scroll-top:hover{transform:translateY(-2px)}
#ai-chat-toggle{position:fixed;bottom:24px;right:24px;background:linear-gradient(135deg,#8b7355,#c4956a);color:white;border:none;border-radius:50px;padding:10px 18px;font-size:0.88rem;font-weight:500;cursor:pointer;box-shadow:0 4px 16px rgba(139,115,85,0.35);z-index:9999;transition:all 0.3s ease;font-family:var(--font-sans);display:flex;align-items:center;gap:8px}
#ai-chat-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,115,85,0.45)}
#ai-chat-window{position:fixed;bottom:80px;right:24px;width:340px;max-width:90vw;height:480px;max-height:70vh;background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(61,53,48,0.18);display:flex;flex-direction:column;z-index:9999;overflow:hidden;font-family:var(--font-sans);border:1px solid var(--color-border)}
.ai-chat-header{background:linear-gradient(135deg,#8b7355,#c4956a);color:white;padding:12px 16px;font-weight:500;display:flex;justify-content:space-between;align-items:center;font-size:0.88rem;gap:10px}
.ai-chat-header-left{display:flex;align-items:center;gap:10px}
#ai-chat-close{background:none;border:none;color:white;font-size:20px;cursor:pointer;opacity:0.8}
#ai-chat-close:hover{opacity:1}
#ai-chat-messages{flex-grow:1;padding:14px;overflow-y:auto;background:var(--color-bg);display:flex;flex-direction:column;gap:10px}
.ai-chat-msg{padding:10px 14px;border-radius:16px;max-width:85%;line-height:1.55;font-size:0.85rem;word-wrap:break-word}
.ai-chat-msg.bot{background:white;color:var(--color-text);align-self:flex-start;border:1px solid var(--color-border);border-bottom-left-radius:4px}
.ai-chat-msg.user{background:var(--color-accent);color:white;align-self:flex-end;border-bottom-right-radius:4px}
.ai-chat-input-area{display:flex;padding:10px;background:white;border-top:1px solid var(--color-border);gap:8px}
#ai-chat-input{flex-grow:1;padding:9px 14px;border:1px solid var(--color-border);border-radius:20px;outline:none;font-size:0.85rem;font-family:var(--font-sans)}
#ai-chat-input:focus{border-color:var(--color-accent)}
#ai-chat-send{background:var(--color-accent);color:white;border:none;border-radius:20px;padding:0 14px;cursor:pointer;font-weight:500;font-family:var(--font-sans);font-size:0.82rem;transition:opacity 0.2s}
#ai-chat-send:disabled{opacity:0.5;cursor:default}
.typing-indicator{display:flex;gap:4px;padding:10px 14px;background:white;border:1px solid var(--color-border);border-radius:16px;align-self:flex-start}
.typing-indicator span{width:6px;height:6px;background:var(--color-text-mute);border-radius:50%;animation:typing 1.4s infinite ease-in-out both}
.typing-indicator span:nth-child(1){animation-delay:-0.32s}.typing-indicator span:nth-child(2){animation-delay:-0.16s}
@keyframes typing{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
.suggest-btns{display:flex;flex-direction:column;gap:7px}
.suggest-btn{background:var(--color-bg-warm);color:var(--color-text);border:1px solid var(--color-border);border-radius:20px;padding:8px 14px;font-size:0.82rem;cursor:pointer;text-align:left;transition:all 0.2s;font-family:var(--font-sans)}
.suggest-btn:hover{background:var(--color-tag-bg);border-color:var(--color-accent)}
.site-footer{background:#2d2a26;color:rgba(255,255,255,0.7);padding:48px 24px 28px;margin-top:80px}
.footer-inner{max-width:var(--max-width);margin:0 auto}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-brand .logo{font-family:var(--font-serif);font-size:1rem;color:rgba(255,255,255,0.9);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.footer-brand p{font-size:0.78rem;line-height:1.7;color:rgba(255,255,255,0.45)}
.footer-col h4{font-size:0.76rem;color:rgba(255,255,255,0.45);letter-spacing:0.1em;margin-bottom:12px;font-weight:400}
.footer-col ul{list-style:none}.footer-col li{margin-bottom:7px}
.footer-col a{font-size:0.8rem;color:rgba(255,255,255,0.6);transition:color 0.2s}
.footer-col a:hover{color:var(--color-accent2)}
.footer-tagline{text-align:center;font-size:0.85rem;color:rgba(255,255,255,0.5);font-style:italic;margin-bottom:16px;font-family:var(--font-serif)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;text-align:center;font-size:0.73rem;color:rgba(255,255,255,0.3)}
.footer-nav-links{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-bottom:12px}
.footer-nav-links a{font-size:0.78rem;color:rgba(255,255,255,0.5);transition:color 0.2s}
.footer-nav-links a:hover{color:var(--color-accent2)}
@media(max-width:900px){
  .layout-with-sidebar{
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 0 60px;
  }
  .main-content {
    order: 1;
  }
  .sidebar {
    order: 2;
    width: 100%;
  }
  #toc-widget{display:none !important}
  .footer-top{grid-template-columns:1fr 1fr;gap:24px}
  .article-nav{grid-template-columns:1fr}
}@media(max-width:600px){.header-inner{height:auto;flex-direction:column;padding:10px 16px 8px;gap:4px;align-items:center}.site-logo{font-size:0.9rem}.header-nav{display:none}.hero{padding:40px 20px 36px}.article-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}.text-center{text-align:center}
/* ===== ページネーション ===== */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:40px 0 16px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border-radius:var(--radius);font-size:0.88rem;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-sub);transition:all 0.2s}
.pagination a:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-bg-warm)}
.pagination .current{background:var(--color-accent);border-color:var(--color-accent);color:white;font-weight:500}
.pagination .prev-next{font-size:0.82rem;padding:0 18px}
/* コメント欄 */
.comment-section{margin-top:48px;padding-top:32px;border-top:1px solid var(--color-border)}
.comment-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.comment-title::before{content:'';width:4px;height:1.1em;background:var(--color-accent2);border-radius:2px;flex-shrink:0}
.comment-form{background:var(--color-bg-warm);border-radius:var(--radius-lg);padding:24px}
.comment-form p{font-size:0.85rem;color:var(--color-text-sub);margin-bottom:16px}
.comment-form .form-group{margin-bottom:14px}
.comment-form label{display:block;font-size:0.82rem;color:var(--color-text-sub);margin-bottom:6px}
.comment-form input,.comment-form textarea{width:100%;padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius);font-family:var(--font-sans);font-size:0.9rem;background:var(--color-surface);color:var(--color-text);transition:border-color 0.2s}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--color-accent)}
.comment-form textarea{height:120px;resize:vertical}
.comment-submit{display:inline-flex;align-items:center;gap:8px;background:var(--color-accent);color:white;border:none;padding:11px 28px;border-radius:24px;font-size:0.9rem;font-family:var(--font-sans);cursor:pointer;transition:opacity 0.2s,transform 0.2s;font-weight:500}
.comment-submit:hover{opacity:0.9;transform:translateY(-1px)}
.comment-note{font-size:0.78rem;color:var(--color-text-mute);margin-top:12px}
/* ===== トップ画面の横並びレイアウト（PC・タブレット限定） ===== */
@media (min-width: 768px) {
    .hero { padding: 80px 24px; }
    .hero-inner { display: grid; grid-template-columns: auto 1fr; column-gap: 48px; max-width: 850px; margin: 0 auto; }
    .hero-avatar { grid-column: 1; grid-row: 1; width: 110px; height: 110px; margin: 0 auto 16px; align-self: end; }
    .hero-label { grid-column: 1; grid-row: 2; margin: 0 auto; align-self: start; white-space: nowrap; }
    .hero h1 { grid-column: 2; grid-row: 1; text-align: left; margin: 0 0 16px 0; align-self: end; }
    .hero p { grid-column: 2; grid-row: 2; text-align: left; margin: 0; align-self: start; }
}
/* ===== 引用ボックス内の不要な下余白を消す ===== */
.article-body blockquote > :last-child { margin-bottom: 0; }
/* ===== 見出しの巨大なリンクアイコンを非表示にする ===== */
.heading-anchor-link {
    display: none;
}
/* ================================================================
   カスタムブロック内の見出し・文字色修正（全記事共通）
   ================================================================ */
/* 1. カスタムブロック内のh2〜h5はstyle.cssの装飾をリセット
      ただしゲーム系UI（monday-mission, game-screen等）は除外 */
.article-body div[class]:not([class*="monday"]):not([class*="mission"]):not([class*="game"]):not([class*="mm-"]) h2,
.article-body div[class]:not([class*="monday"]):not([class*="mission"]):not([class*="game"]):not([class*="mm-"]) h3,
.article-body div[class]:not([class*="monday"]):not([class*="mission"]):not([class*="game"]):not([class*="mm-"]) h4,
.article-body div[class]:not([class*="monday"]):not([class*="mission"]):not([class*="game"]):not([class*="mm-"]) h5,
.article-body section[class] h2,
.article-body section[class] h3,
.article-body section[class] h4,
.article-body section[class] h5 {
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.5em 0;
  font-size: inherit;
}
/* 2. 暗い背景コンテナ内の見出しは白文字を維持 */
.article-body .tfa-title,
.article-body h3.tfa-title,
.article-body h4.tfa-title,
.article-body .tfa-header h2,
.article-body .tfa-header h3,
.article-body .tfa-header h4 { color: #ffffff !important; }
.article-body .tfa-sub { color: #ffffff !important; }
.article-body .hub-sub { color: rgba(255,255,255,0.9) !important; }
/* 3. 薄背景テーブルヘッダーの白文字を読みやすい色に */
.article-body th.th-heal, .article-body th.th-short,
.article-body th.th-long, .article-body th.th-before,
.article-body th.th-after, .article-body th.th-healthy,
.article-body th.th-ill { color: var(--color-text) !important; }
/* 3b. テーブルヘッダー内のinline color指定をth本来の文字色に統一
        （クラスで背景色が設定されたthでspan colorが上書きされる問題を解消）*/
.article-body table th * { color: inherit !important; }
/* 3c. thにインラインで濃い背景色が直接指定されている場合は白文字に
        対象: #0〜#4で始まる6桁16進カラー（≒輝度27%以下）*/
.article-body table th[style*="background: #0"],
.article-body table th[style*="background: #1"],
.article-body table th[style*="background: #2"],
.article-body table th[style*="background: #3"],
.article-body table th[style*="background: #4"],
.article-body table th[style*="background-color: #0"],
.article-body table th[style*="background-color: #1"],
.article-body table th[style*="background-color: #2"],
.article-body table th[style*="background-color: #3"],
.article-body table th[style*="background-color: #4"] {
  color: #fff !important;
}
/* 4. fs-law-tag: 記事内のinline styleに色定義があるため上書き不要 */
/* 5. dc-seo-box: 本体と全子孫要素の色を修正 */
.article-body .dc-seo-box { color: var(--color-text) !important; }
.article-body .dc-seo-box * { color: var(--color-text) !important; }
.article-body .dc-seo-box .seo-title { color: var(--color-accent) !important; }
.article-body .dc-seo-box .seo-cite { color: var(--color-text-sub) !important; }
/* 6. fsn/fsa系の色継承 */
.article-body [class*="fsn-"] { color: inherit !important; }
.article-body [class*="fsa-"] { color: inherit !important; }
/* ================================================================
   Custom blog card (内部記事リンク) - 画像とテキストを横並びカード化
   ================================================================ */
.article-body .custom-blogcard{display:flex;align-items:stretch;gap:14px;margin:1.5em 0;padding:14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);text-decoration:none;color:inherit;transition:transform 0.2s ease,box-shadow 0.2s ease;overflow:hidden}
.article-body .custom-blogcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);text-decoration:none}
.article-body .custom-blogcard-thumb{flex-shrink:0;width:140px;aspect-ratio:16/9;border-radius:calc(var(--radius) - 4px);overflow:hidden;background:var(--color-bg-warm)}
.article-body .custom-blogcard-thumb img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}
.article-body .custom-blogcard-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.article-body .custom-blogcard-title{font-family:var(--font-serif);font-size:0.95rem;font-weight:500;line-height:1.5;color:var(--color-text);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-body .custom-blogcard-site{font-size:0.72rem;color:var(--color-text-mute)}
@media(max-width:600px){
  .article-body .custom-blogcard{flex-direction:column;padding:0;gap:0}
  .article-body .custom-blogcard-thumb{width:100%;aspect-ratio:16/9;border-radius:0}
  .article-body .custom-blogcard-body{padding:12px 14px 14px}
  .article-body .custom-blogcard-title{font-size:0.92rem;-webkit-line-clamp:3}
}
/* ================================================================
   Tailwind ユーティリティクラス フォールバック
   （CDNを排除した記事のレイアウト維持用）
   ================================================================ */
.article-body .grid{display:grid;gap:8px}
.article-body .grid-cols-1{grid-template-columns:1fr}
.article-body .grid-cols-2{grid-template-columns:repeat(2,1fr)}
.article-body .grid-cols-3{grid-template-columns:repeat(3,1fr)}
.article-body .grid-cols-4{grid-template-columns:repeat(4,1fr)}
.article-body .text-center{text-align:center}
.article-body .text-right{text-align:right}
.article-body .text-left{text-align:left}
.article-body .font-bold{font-weight:700}
.article-body .font-black{font-weight:900}
.article-body .italic{font-style:italic}
.article-body .mx-auto{margin-left:auto;margin-right:auto}
.article-body .max-w-3xl{max-width:48rem;margin-left:auto;margin-right:auto}
.article-body .max-w-2xl{max-width:42rem;margin-left:auto;margin-right:auto}
.article-body .max-w-4xl{max-width:56rem;margin-left:auto;margin-right:auto}
.article-body .w-full{width:100%}
.article-body .p-4{padding:1rem}
.article-body .p-6{padding:1.5rem}
.article-body .p-8{padding:2rem}
.article-body .py-4{padding-top:1rem;padding-bottom:1rem}
.article-body .px-4{padding-left:1rem;padding-right:1rem}
.article-body .mb-4{margin-bottom:1rem}
.article-body .mb-6{margin-bottom:1.5rem}
.article-body .mb-8{margin-bottom:2rem}
.article-body .mt-4{margin-top:1rem}
.article-body .mt-6{margin-top:1.5rem}
.article-body .mt-8{margin-top:2rem}
.article-body .rounded-lg{border-radius:0.5rem}
.article-body .rounded-xl{border-radius:0.75rem}
.article-body .rounded-2xl{border-radius:1rem}
.article-body .rounded-3xl{border-radius:1.5rem}
.article-body .rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}
.article-body .bg-white{background-color:#fff}
.article-body .text-gray-500{color:#6b7280}
.article-body .text-gray-600{color:#4b5563}
.article-body .text-gray-700{color:#374151}
.article-body .text-gray-800{color:#1f2937}
.article-body .text-red-500{color:#ef4444}
.article-body .text-indigo-500{color:#6366f1}
.article-body .font-semibold{font-weight:600}
.article-body .text-3xl{font-size:1.875rem}
.article-body .text-4xl{font-size:2.25rem}
.article-body .text-sm{font-size:0.875rem}
@media(min-width:640px){
  .article-body .sm\:text-4xl{font-size:2.25rem}
  .article-body .sm\:p-8{padding:2rem}
}
@media(max-width:600px){
  .article-body .grid-cols-2,
  .article-body .grid-cols-3,
  .article-body .grid-cols-4{grid-template-columns:1fr}
}
/* ===== インライン目次（.inline-toc） ===== */
.inline-toc{background:var(--color-bg-warm);border:1px solid var(--color-border);border-radius:8px;padding:14px 18px 16px;margin:1.8em 0;max-width:560px}
.inline-toc-title{font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-sub);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--color-border)}
.inline-toc-list{list-style:none;padding:0;margin:0;counter-reset:toc-h2}
.inline-toc-h2{counter-increment:toc-h2;counter-reset:toc-h3}
.inline-toc-h3{counter-increment:toc-h3}
.inline-toc-h2>a,.inline-toc-h3>a,.inline-toc-h4>a{display:block;text-decoration:none;line-height:1.4;transition:color 0.15s}
.inline-toc-h2>a{font-size:0.875rem;font-weight:600;color:var(--color-text);padding:5px 0 5px 14px;border-left:2px solid var(--color-accent2);margin:3px 0}
.inline-toc-h2>a::before{content:counter(toc-h2) ". ";color:var(--color-accent2)}
.inline-toc-h3>a{font-size:0.83rem;color:var(--color-text);padding:4px 0 4px 28px;margin:2px 0}
.inline-toc-h3>a::before{content:counter(toc-h2) "-" counter(toc-h3) ". ";color:var(--color-text-sub);font-size:0.78rem}
.inline-toc-h4>a{font-size:0.78rem;color:var(--color-text-sub);padding:3px 0 3px 42px;margin:2px 0}
.inline-toc-h2>a:hover,.inline-toc-h3>a:hover,.inline-toc-h4>a:hover{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px}

/* --- スマホ表示のはみ出し・文字切れを完全に防ぐ（完全版） --- */
@media (max-width: 900px) {
  /* メインエリアが画面を押し広げるのを防ぐストッパー */
  .main-content {
    min-width: 0 !important;
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* 1. 記事の「囲い（ボックス）」をスマホ画面に完全フィットさせる */
  div[id$="-box"], 
  div[class$="-box"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2. 囲いの中の余白を減らし、表の表示スペースを最大化する */
  div[class$="-area"], 
  div[class$="-wrapper"] {
    padding: 10px 5px !important;
    box-sizing: border-box !important;
  }

  /* 3. 表の構造を維持したまま、画面幅に合わせて強制縮小させる（最大の修正ポイント） */
  .article-body table {
    display: table !important; 
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important; /* 横幅を絶対にはみ出させない魔法 */
  }

  /* 4. セル内の文字サイズと余白を最適化し、長文は折り返す */
  .article-body table th, 
  .article-body table td {
    padding: 8px 4px !important;
    font-size: 0.8em !important;
    line-height: 1.4 !important;
    word-break: break-all !important; /* 長い文章も枠内で強制的に折り返す */
    white-space: normal !important;
  }
}

/* --- スマホ用ヘッダー：タイトル上・ボタン下の縦並びレイアウト --- */
@media (max-width: 600px) {
  /* ナビをタイトル下に横並び・中央揃えで表示 */
  .header-nav {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  /* 一旦すべてのリンクを隠す */
  .header-nav a {
    display: none;
  }
  /* 後ろから1番目（お問い合わせ）と2番目（ストレス診断）だけを表示 */
  .header-nav a:nth-last-child(1),
  .header-nav a:nth-last-child(2) {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.72rem;
    background: var(--color-tag-bg);
    border-radius: 20px;
    white-space: nowrap;
  }
  /* ハブ記事（ストレス診断）のボタンを目立たせる特別装飾 */
  .header-nav a:nth-last-child(2) {
    background: var(--color-accent);
    color: white !important;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(139,115,85,0.3);
  }
}

/* --- スマートヘッダー（スクロールで隠れる）用のクラス --- */
.site-header {
  transition: transform 0.3s ease; /* スムーズに動くアニメーション */
}
.site-header.is-hidden {
  transform: translateY(-100%); /* 画面の上に隠す指示 */
}

/* =========================================
   カスタム装飾（ボックス・吹き出し） 
   ========================================= */
.box {
  position: relative;
  margin: 2.5em 0;
  padding: 2em 1.5em 1.5em;
  border-radius: 8px;
  background: #f9f9f9;
  line-height: 1.8;
}
.box-title {
  position: absolute;
  top: -14px;
  left: 16px;
  padding: 0 16px;
  font-weight: bold;
  font-size: 0.95em;
  color: #fff;
  border-radius: 20px;
  line-height: 28px;
  letter-spacing: 0.05em;
}
.box p:last-child {
  margin-bottom: 0;
}

/* ポイント枠 (青系) */
.box-point {
  border: 2px solid #63b3ed;
  background: #ebf8ff;
}
.box-point .box-title {
  background: #63b3ed;
}

/* 注意枠 (赤/オレンジ系) */
.box-warning {
  border: 2px solid #f6ad55;
  background: #fffaf0;
}
.box-warning .box-title {
  background: #f6ad55;
}

/* メモ枠 (グレー系) */
.box-note {
  border: 2px solid #cbd5e0;
  background: #f7fafc;
}
.box-note .box-title {
  background: #cbd5e0;
  color: #2d3748;
}

/* 吹き出し */
.fukidashi {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 2.5em 0;
}
.fukidashi-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  border: 2px solid #e2e8f0;
}
.fukidashi-text {
  position: relative;
  background: #e2e8f0;
  padding: 16px 20px;
  border-radius: 12px;
  max-width: calc(100% - 66px);
  line-height: 1.8;
  color: #2d3748;
}
.fukidashi-text::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -8px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #e2e8f0;
}
.fukidashi-text p:last-child {
  margin-bottom: 0;
}

/* custom-blogcard の説明文（オプション） */
.article-body .custom-blogcard-desc{font-size:0.78rem;color:var(--color-text-sub);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px}
/* ===== 文字サイズユーティリティ（管理画面から挿入） ===== */
.article-body .text-large  { font-size: 1.25em; }
.article-body .text-medium { font-size: 1.1em; }
.article-body .text-normal { font-size: 1em; }
.article-body .text-small  { font-size: 0.85em; }

/* ===== Video & Media Embed Styling ===== */
.article-body .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 8px;
  margin: 1.5em auto;
  box-shadow: 0 4px 12px rgba(61, 53, 48, 0.12);
}
.article-body .video-container iframe,
.article-body .video-container object,
.article-body .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.article-body video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(61, 53, 48, 0.12);
}