/* ===============================
   わかりやすい病気のはなし / 共通スタイル（総合版＋h3アイコン競合解消＋SP横スワイプ＋Footerロゴ拡大）
   =============================== */

:root{
  --brand:#0a7c6d;
  --brand-weak:#e6f3f1;
  --ink:#111;
  --muted:#596068;
  --bg:#fff;
  --line:#e7ebef;
  --line-strong:#dfe5ea;
  --warn:#b00020;
  --warn-bg:#fff2f2;
  --focus:#1a73e8;

  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:56px; --s7:80px; --s8:96px;

  --wrap-article:1100px;
  --wrap-hero:1100px;

  --ff:"Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  --fs-body: clamp(15px, 1.9vw, 18px);
  --lh-body: 1.9;
  --fs-h1: clamp(28px, 5.2vw, 40px);
  --fs-h2: clamp(22px, 3.8vw, 28px);
  --fs-h3: clamp(18px, 3.2vw, 22px);

  /* h3アイコン（1か所定義） */
  --icon-size: clamp(32px, 2.8vw, 40px);
  --icon-gap : clamp(6px, 0.8vw, 12px);
  --icon-left: clamp(8px, 1vw, 18px);
}

*{box-sizing:border-box}
html{font-family:var(--ff); color:var(--ink); background:#fff; overflow-x:hidden}
body{margin:0; font-size:var(--fs-body); line-height:var(--lh-body); overflow-x:hidden}
img{max-width:100%; height:auto; display:block}

a{color:#0c8f7a; text-decoration:none}
a:hover{opacity:.9}
a:focus-visible, button:focus-visible, input:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:10px}

.sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

/* ラッパー（ウルトラワイド中央寄せ） */
.wrap{width:100%; max-width:none; margin:0 auto; padding:0 clamp(12px,3vw,32px)}
@media (min-width:2400px){ .wrap{ max-width:2400px; margin-left:auto; margin-right:auto } }

.muted{color:var(--muted)}
.fine{font-size:.92em}

/* ヘッダー：下スクロールで上に隠れ、上スクロールで上からぬるっと再表示 */
header.site{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  background:var(--bg); border-bottom:1px solid var(--line); backdrop-filter:saturate(120%) blur(6px);
  transform:translateY(0);
  transition:transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 下スクロール時：画面上方へ押し出されて隠れる */
header.site.hidden{
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
body{padding-top:72px}
.site-bar{
  display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:clamp(12px,2vw,24px);
  position:relative;
}
.brand{display:flex; align-items:center; gap:clamp(8px,1.4vw,16px); color:var(--brand)}
.brand .logo{
  width:34px; 
  height:34px; 
  border-radius:10px; 
  background:linear-gradient(135deg, var(--brand) 0%, #0c9a88 50%, #0eb8a3 100%);
  position:relative; 
  flex:0 0 34px;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(10,124,109,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}
.brand .logo::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.3) 0%, transparent 65%);
  border-radius:10px;
  animation:logoShine 4s ease-in-out infinite;
  z-index:1;
}
.brand .logo::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='heartGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e6f3f1;stop-opacity:0.95' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23heartGrad)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='%230a7c6d' stroke='%230a7c6d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M12 9v6M9 12h6'/%3E%3C/svg%3E") no-repeat center;
  background-size:contain;
  opacity:1;
  transform:scale(1) rotate(0deg);
  transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.brand:hover .logo::after{
  transform:scale(1.2) rotate(12deg);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.brand:hover .logo{
  box-shadow:0 4px 16px rgba(10,124,109,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  transform:translateY(-2px) scale(1.02);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
@keyframes logoShine{
  0%, 100%{opacity:0.25; transform:translate(-40%, -40%) scale(0.85);}
  50%{opacity:0.45; transform:translate(0, 0) scale(1);}
}
.brand h1{font-size:1.2rem; margin:0; font-weight:700}

nav.main{display:flex; align-items:center; gap:clamp(8px,1.6vw,24px)}

/* ドロップダウンメニュー */
.nav-item{position:relative}
.nav-item > .nav-label{display:inline-flex; align-items:center; gap:6px; padding:12px 14px; border-radius:12px; min-height:44px; color:#2b2f33; cursor:pointer; transition:background .18s ease; border:none; background:transparent; font-size:inherit; font-family:inherit}
.nav-item > .nav-label::after{content:"▾"; font-size:.9em; opacity:.6; transition:transform .2s ease}
.nav-item:hover > .nav-label, .nav-item:focus-within > .nav-label{background:var(--brand-weak)}
.nav-item:hover > .nav-label::after, .nav-item:focus-within > .nav-label::after{transform:rotate(180deg)}

/* ドロップダウン展開時のオーバーレイ */
.nav-overlay{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:99; pointer-events:none; overflow:hidden}
.nav-overlay.active{opacity:1; visibility:visible; pointer-events:auto}

.nav-dropdown{position:absolute; top:100%; left:0; min-width:320px; white-space:nowrap; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:200; padding:8px 0}
.nav-item:nth-last-child(-n+2) .nav-dropdown{left:auto; right:0}
.nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.nav-dropdown a{display:block; padding:10px 18px; color:#2b2f33; font-size:.95em; transition:background .15s ease}
.nav-dropdown a:hover{background:var(--brand-weak); opacity:1}

/* ハンバーガーボタン：エフェクト・作り込み */
.menu-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  color:#2b2f33;
  border-radius:12px;
  padding:10px 10px;
  min-height:44px;
  min-width:44px;
  cursor:pointer;
  position:relative;
  overflow:visible;
  transition:transform .25s cubic-bezier(0.34,1.2,0.64,1), box-shadow .25s ease, border-color .2s ease, background .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.menu-toggle:active{transform:scale(0.97)}
.menu-toggle span[aria-hidden="true"]{
  display:block;
  width:20px;
  height:2px;
  background:#2b2f33;
  border-radius:2px;
  position:relative;
  box-shadow:0 -5px 0 0 #2b2f33, 0 5px 0 0 #2b2f33;
  transition:transform .3s cubic-bezier(0.34,1.2,0.64,1), box-shadow .3s cubic-bezier(0.34,1.2,0.64,1), background .25s ease, opacity .2s ease;
  font-size:0;
  line-height:0;
  color:transparent;
}
.menu-toggle::before,
.menu-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:2px;
  background:#2b2f33;
  border-radius:2px;
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:0;
  transition:transform .35s cubic-bezier(0.34,1.2,0.64,1), opacity .2s ease, background .25s ease;
}
.menu-toggle[aria-expanded="true"]{
  box-shadow:0 4px 14px rgba(10,124,109,.2), 0 0 0 1px rgba(10,124,109,.15);
  border-color:var(--brand);
  background:var(--brand-weak);
}
.menu-toggle[aria-expanded="true"] span[aria-hidden="true"]{
  box-shadow:none;
  opacity:0;
  transform:scaleX(0);
  transition-duration:.2s;
}
.menu-toggle[aria-expanded="true"]::before{
  opacity:1;
  transform:translate(-50%,-50%) rotate(45deg);
}
.menu-toggle[aria-expanded="true"]::after{
  opacity:1;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.menu-toggle:hover{
  background:var(--brand-weak);
  border-color:var(--brand);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(10,124,109,.15);
}
.menu-toggle:hover span[aria-hidden="true"]{
  background:var(--brand);
  box-shadow:0 -5px 0 0 var(--brand), 0 5px 0 0 var(--brand);
}
.menu-toggle:hover::before,
.menu-toggle:hover::after{
  background:var(--brand);
}

@media (max-width:960px){
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center}
  nav.main{
    position:absolute; left:0; right:0; top:72px; display:none; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(0,0,0,.08); max-height:80vh; overflow-y:auto;
    z-index:199;
    animation:menuSlideIn .35s cubic-bezier(0.34,1.2,0.64,1) forwards;
  }
  nav.main::before{
    content:"";
    position:fixed; inset:0; top:72px;
    background:rgba(0,0,0,.4);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; pointer-events:none;
    z-index:-1;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .menu-toggle[aria-expanded="true"] + nav.main{display:flex}
  .menu-toggle[aria-expanded="true"] + nav.main::before{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  @keyframes menuSlideIn{
    from{opacity:0; transform:translateY(-8px)}
    to{opacity:1; transform:translateY(0)}
  }
  .nav-item{display:contents}
  .nav-item > .nav-label{
    display:flex; align-items:center; justify-content:space-between; padding:14px 18px 14px 44px; border-bottom:1px solid var(--line-strong); border-radius:0; font-weight:600; color:var(--brand); background:var(--brand-weak);
    position:relative;
    animation:navItemFade .4s cubic-bezier(0.34,1.2,0.64,1) backwards;
  }
  .nav-item:nth-child(1) > .nav-label{animation-delay:40ms}
  .nav-item:nth-child(2) > .nav-label{animation-delay:80ms}
  .nav-item:nth-child(3) > .nav-label{animation-delay:120ms}
  .nav-item > .nav-label::before{
    content:"";
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    width:6px; height:6px; border-radius:50%;
    background:var(--brand); opacity:.9;
  }
  .nav-item > .nav-label::after{display:none}
  @keyframes navItemFade{
    from{opacity:0; transform:translateX(-6px)}
    to{opacity:1; transform:translateX(0)}
  }
  .nav-dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; border-radius:0; padding:0; min-width:auto}
  .nav-dropdown a{
    padding:14px 18px 14px 44px; border-bottom:1px solid var(--line-strong);
    position:relative;
    transition:background .2s ease, padding-left .2s ease;
    animation:navLinkFade .35s cubic-bezier(0.34,1.2,0.64,1) backwards;
  }
  .nav-dropdown a:nth-child(1){animation-delay:100ms}
  .nav-dropdown a:nth-child(2){animation-delay:130ms}
  .nav-dropdown a:nth-child(3){animation-delay:160ms}
  .nav-dropdown a:nth-child(4){animation-delay:190ms}
  .nav-dropdown a:nth-child(5){animation-delay:220ms}
  .nav-dropdown a:nth-child(6){animation-delay:250ms}
  .nav-dropdown a:nth-child(7){animation-delay:280ms}
  .nav-dropdown a:nth-child(8){animation-delay:310ms}
  .nav-dropdown a::before{
    content:"›";
    position:absolute; left:20px; top:50%; transform:translateY(-50%);
    font-size:1.1em; font-weight:700; color:var(--brand); opacity:.6;
    transition:opacity .2s ease, left .2s ease;
  }
  .nav-dropdown a:hover::before{opacity:1; left:22px}
  @keyframes navLinkFade{
    from{opacity:0; transform:translateX(-4px)}
    to{opacity:1; transform:translateX(0)}
  }
  .nav-dropdown a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  @media (max-width:960px){
    nav.main{animation:none}
    .nav-item > .nav-label, .nav-dropdown a{animation:none}
  }
}

/* ヒーロー */
.hero{background:linear-gradient(180deg,#ffffff,#f4fbfa); border-bottom:1px solid var(--line)}
.hero-inner{padding:var(--s7) 0 var(--s7)}
.hero-inner > h2, .hero-inner > p, .hero-inner > form, .hero-inner > .hint{max-width:var(--wrap-hero); margin-left:auto; margin-right:auto; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}

@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
.hero-title{font-size:var(--fs-h1); margin:1.2em auto 1.4em; text-align:center}
.hero-title .tw-line{display:block; line-height:1.25; min-height:1.2em; white-space:pre-wrap; margin:0; opacity:0; transform:translateY(12px); will-change:opacity,transform}
.hero-title .line1{margin-bottom:.3em}
.hero-title.reveal .line1{animation:fadeUp 900ms ease-out forwards}
.hero-title.reveal .line2{animation:fadeUp 1000ms ease-out forwards; animation-delay:450ms}
@media (prefers-reduced-motion:reduce){ .hero-title .tw-line{opacity:1 !important; transform:none !important; animation:none !important} }

/* 検索窓 */
.hero-inner > form.searchbox{width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3)}
.searchbox input{-webkit-appearance:none; appearance:none; flex:1 1 320px; min-width:0; padding:0 16px; height:52px; line-height:52px; border:1px solid var(--line); border-radius:14px; background:#fff; font-size:1rem}
.searchbox button{-webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; height:52px; border:0; border-radius:14px; background:var(--brand); color:#fff; font-weight:700; cursor:pointer; white-space:nowrap}

/* 検索結果件数表示 */
.result-count{max-width:var(--wrap-hero); margin:var(--s2) auto 0; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px); font-size:.95em; color:var(--muted); min-height:24px; opacity:0; transition:opacity .2s ease}
.result-count.visible{opacity:1}
.result-count-number{color:var(--brand); font-size:1.3em; font-weight:700; margin:0 2px}

/* フィルタ時：main内の検索結果エリアに件数表示（ヒーローのは非表示） */
.result-count-main-wrap{padding:var(--s6) clamp(16px,4vw,40px) var(--s4); background:#fff; scroll-margin-top:88px}
.result-count--main{margin:0; padding:0; min-height:auto; opacity:1}
.result-count-main-wrap:not([hidden]) .result-count--main.visible{opacity:1}
.search-results-section{padding:var(--s7) 0 var(--s7); border-bottom:1px solid var(--line); background:#fff}
.search-results-section .wrap .grid{margin-bottom:0}
#search-results-h{margin:0 0 var(--s6); padding-left:calc(var(--icon-left) + var(--icon-size) + var(--icon-gap)); padding-right:clamp(16px,4vw,40px); font-size:var(--fs-h2); position:relative}

/* 検索条件（検索結果下）：キーワード表示・解除 */
.search-criteria-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:8px var(--s3); margin-top:var(--s6); padding-top:var(--s5); padding-bottom:var(--s5); border-top:1px solid var(--line); margin-bottom:var(--s5)}
.search-criteria-label{font-size:.95em; color:var(--muted); margin:0; flex-shrink:0}
.search-criteria-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.search-criteria-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--brand-weak); color:var(--brand); border-radius:999px; font-size:.9em}
.search-criteria-chip .chip-remove{-webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.08); color:inherit; cursor:pointer; font-size:1.1em; line-height:1; transition:background .15s}
.search-criteria-chip .chip-remove:hover{background:rgba(0,0,0,.15)}
.search-criteria-wrap .btn-clear-inline{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; min-height:32px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:.85em; cursor:pointer; transition:all .15s}
.search-criteria-wrap .btn-clear-inline:hover{background:var(--brand-weak); border-color:var(--brand); color:var(--brand)}
.search-criteria-wrap .btn-clear-inline .btn-clear-icon{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:1.2em; font-weight:700; line-height:1}

.pill{display:inline-block; background:var(--brand-weak); color:var(--brand); border-radius:999px; padding:4px 10px; font-size:.85em; margin-right:6px}
.hint{font-size:.95em; color:var(--muted); margin-top: var(--s2)}

/* タグクラウド */
.tag-cloud-wrapper{max-width:var(--wrap-hero); margin:var(--s4) auto 0; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
.tag-cloud-label{font-size:.95em; color:var(--muted); margin:0 0 var(--s2)}
.tag-cloud{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s2)}
.tag-cloud-wrapper .btn-clear{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 14px; min-height:32px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:.85em; cursor:pointer; transition:all .15s ease; white-space:nowrap; margin-top:var(--s2)}
.tag-cloud-wrapper .btn-clear:hover:not(:disabled){background:var(--brand-weak); border-color:var(--brand); color:var(--brand)}
.tag-cloud-wrapper .btn-clear:disabled,
.tag-cloud-wrapper .btn-clear.disabled{opacity:.4; cursor:not-allowed; pointer-events:none}
.tag-cloud-wrapper .btn-clear-icon{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:1.2em; font-weight:700; line-height:1}
.tag-btn{-webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; min-height:36px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:.9em; cursor:pointer; transition:all .15s ease; white-space:nowrap}
.tag-btn:hover{background:var(--brand-weak); border-color:var(--brand); color:var(--brand); transform:translateY(-1px)}
.tag-btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.tag-btn.active{background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600}
.tag-btn.active:hover{background:#0c8f7a; border-color:#0c8f7a}

/* メイン（白背景は main 内のみ） */
main > section{padding:var(--s7) 0 var(--s7); border-bottom:1px solid var(--line); background:#fff}
main > section h3{font-size:var(--fs-h2); margin:0 0 var(--s6); padding-left: calc(var(--icon-left) + var(--icon-size) + var(--icon-gap)); padding-right:clamp(16px,4vw,40px); position:relative}

/* h3アイコン */
#symp-h::before, #cond-h::before, #life-h::before, #about-h::before{
  content:""; position:absolute; left: var(--icon-left); top:50%;
  width: var(--icon-size); height: var(--icon-size); transform: translateY(-50%);
  background-repeat:no-repeat; background-position:center; background-size: var(--icon-size) var(--icon-size); pointer-events:none
}
#symp-h::before  { background-image:url("assets/icons/symptoms-line.png") }
#cond-h::before  { background-image:url("assets/icons/conditions-medbook.png") }
#life-h::before  { background-image:url("assets/icons/lifestyle-prevent.png") }
#about-h::before { background-image:url("assets/icons/info-i.png") }

/* カード（PC:グリッド／SP:横スワイプ） */
.grid{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media(min-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1400px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:var(--s4); transition:transform .08s ease, box-shadow .16s ease; line-height:1.8; text-decoration:none; color:inherit}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.08)}
.card b{font-weight:700; font-size:1.08em; color:var(--ink)}
.card small{display:block; color:var(--muted); margin-top:6px}

/* サムネイル付きカード */
.card-thumb{padding:0; overflow:hidden; display:flex; flex-direction:column}
.card-thumb .card-image{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:2/1; background:linear-gradient(145deg, #f0f4f8 0%, #e2e8ee 50%, #d8e0e8 100%); position:relative; padding:12px; overflow:hidden}
.card-thumb .card-image img{height:auto; width:auto; max-height:200%; object-fit:contain; object-position:center center; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.1); transition:transform .15s ease-out, box-shadow .3s ease; will-change:transform}
.card-thumb:hover .card-image img{box-shadow:0 8px 24px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.12)}
.card-thumb .card-content{padding:var(--s3); flex:1; display:flex; flex-direction:column; justify-content:center}

@media (max-width:720px){
  .searchbox input{flex:1 1 100%; width:100%}
  .searchbox button{width:100%; flex:1 1 100%}
  .grid{display:flex; gap:var(--s3); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-left: clamp(16px,4vw,40px); padding-left: clamp(16px,4vw,40px); padding-right: clamp(16px,4vw,40px); touch-action: pan-x; overscroll-behavior-x: contain}
  .grid .card{flex: 0 0 80%; scroll-snap-align: start}
  .grid::-webkit-scrollbar{height:6px}
  .grid::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15); border-radius:6px}
  .grid::-webkit-scrollbar-track{background:transparent}
}
main > section > .wrap > :last-child{margin-bottom:0}

/* フッター（左:ロゴのみ／右:3カラム） */
.site-footer{background:#0c8f7a; color:#fff}
.footer-inner{padding:var(--s7) clamp(16px,4vw,40px) var(--s6)}
@media(max-width:879px){ .footer-inner{padding:var(--s4) clamp(16px,4vw,40px) var(--s3)} }
.footer-grid{display:grid; gap:var(--s5); grid-template-columns:1fr; padding-top:0; padding-bottom:var(--s7); border-bottom:1px solid rgba(255,255,255,.3)}
@media(max-width:879px){ 
  .footer-grid{
    gap:0; 
    padding-bottom:var(--s3);
    border-bottom:none;
  }
  /* スマートフォンではメニューセクションを非表示（ロゴのみ表示） */
  .footer-col:not(.footer-org){
    display:none;
  }
}
@media(min-width:880px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr} }

/* 左カラム：ロゴのみ（大きめ） */
.footer-col.footer-org{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.footer-col.footer-org .footer-logo{max-width:180px; height:auto}
@media(max-width:879px){ .footer-col.footer-org .footer-logo{max-width:120px; margin-bottom:var(--s3)} }
/* 旧h4は不要になったので念のため非表示 */
.footer-col.footer-org h4{display:none}

/* フッターセクションのタイトル（PC: h4） */
.footer-col h4{margin:0 0 var(--s3); font-size:1.2rem; font-weight:700; color:#fff; display:block}

/* スマートフォン用アコーディオンボタン（スマートフォンではメニュー自体を非表示にするため使用しない） */
.footer-toggle{
  display:none;
}

.footer-links{list-style:none; margin:0; padding:0}
.footer-links li+li{margin-top:10px}
@media(max-width:879px){ .footer-links li+li{margin-top:6px} }
.footer-links a{color:#fff; font-size:.9rem; display:block; padding:6px 0; transition:opacity .15s ease}
@media(max-width:879px){ .footer-links a{font-size:.85rem; padding:4px 0} }
.footer-links a:hover{opacity:.85; text-decoration:underline}

.footer-bottom{display:flex; flex-direction:column; gap:8px; align-items:flex-start; justify-content:space-between; padding-top:var(--s4)}
@media(max-width:879px){ .footer-bottom{padding-top:var(--s3); gap:6px} }
@media(min-width:860px){ .footer-bottom{flex-direction:row; align-items:center} }
.footer-bottom .muted{color:#f0f0f0; font-size:.85rem}
@media(max-width:879px){ .footer-bottom .muted{font-size:.8rem} }

/* footer配下は親色継承 */
.site-footer *{background:transparent; color:inherit}

/* 記事ページ */
header.top{background:#fff; border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:var(--s3); min-height:72px}
.logo{
  width:34px; 
  height:34px; 
  border-radius:10px; 
  background:linear-gradient(135deg, #0a7c6d 0%, #0c9a88 50%, #0eb8a3 100%);
  position:relative; 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  overflow:visible;
  box-shadow:0 2px 8px rgba(10,124,109,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.logo::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.3) 0%, transparent 65%);
  border-radius:10px;
  animation:logoShine 4s ease-in-out infinite;
  z-index:1;
}
.logo::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='heartGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e6f3f1;stop-opacity:0.95' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23heartGrad)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='%230a7c6d' stroke='%230a7c6d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M12 9v6M9 12h6'/%3E%3C/svg%3E") no-repeat center;
  background-size:contain;
  opacity:1;
  transform:scale(1) rotate(0deg);
  transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.logo:hover::after{
  transform:scale(1.2) rotate(12deg);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.logo:hover{
  box-shadow:0 4px 16px rgba(10,124,109,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  transform:translateY(-2px) scale(1.02);
}
.brand{font-weight:700; color:var(--brand)}
main{background:#fff}

.wrap:has(.head){max-width:var(--wrap-article)}
.wrap:has(.head) .head, .wrap:has(.head) .lead, .wrap:has(.head) .toc, .wrap:has(.head) .callout{padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}

.head{padding:var(--s7) 0 0}
h1{font-size:var(--fs-h1); margin:var(--s7) 0 var(--s7)}
h2{font-size:var(--fs-h2); margin:var(--s6) 0 var(--s6); line-height:1.4; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}

.lead{color:var(--muted); margin:var(--s6) 0 var(--s7); font-size:1.1em; line-height:1.9}
.callout{background:var(--warn-bg); border:1px solid #ffd8d8; color:#5a1a1a; border-radius:16px; padding:var(--s3); margin:var(--s6) 0}
.callout b{color:#b00020}
.toc{border:1px solid var(--line); border-radius:14px; padding:var(--s2); margin:var(--s6) 0; display:flex; flex-wrap:wrap; gap:var(--s2)}
.toc a{background:#f8fafb; padding:10px 14px; border-radius:10px; min-height:40px}

main > section p, main > section ul, main > section ol, main > section figure{padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
ul{padding-left:calc(1.4em + clamp(16px,4vw,40px))}
p, li{line-height:1.9}
figure{margin:var(--s6) 0}
figcaption{font-size:.92em; color:#888; margin-top:8px}

.keys{background:#f6fbfa; border:1px solid var(--brand-weak); border-left:4px solid var(--brand); padding:var(--s3); border-radius:14px; margin-left:clamp(16px,4vw,40px); margin-right:clamp(16px,4vw,40px)}

.meta{color:var(--muted); font-size:.95em; margin:var(--s6) 0; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
.rel{display:grid; gap:var(--s4); margin:var(--s6) 0 var(--s7); grid-template-columns:1fr; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
@media(min-width:760px){ .rel{grid-template-columns:repeat(2,1fr)} }
.actions{display:flex; justify-content:center; gap:var(--s3); flex-wrap:wrap; margin:var(--s6) 0 var(--s7); padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
.btn{border:1px solid var(--line); background:#fff; border-radius:999px; padding:12px 20px; min-height:44px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:var(--ink); transition:background .15s ease}
.btn:hover{background:var(--brand-weak); color:var(--brand)}
.btn.primary{background:#0a7c6d; color:#fff; border-color:#0a7c6d}
.btn.primary:hover{background:#0c8f7a; color:#fff}

/* 専門班紹介（監修体制）リンク */
.link-arrow{display:inline-flex; align-items:center; gap:6px; margin:var(--s3) 0 var(--s4); padding:10px 20px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:600; color:var(--brand); text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.04); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease}
.link-arrow-icon{font-size:1.1em; transition:transform .15s ease}
.link-arrow:hover{background:var(--brand-weak); border-color:var(--brand); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08)}
.link-arrow:hover .link-arrow-icon{transform:translateX(3px)}
.link-arrow:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* PDFダウンロード */
.pdf-download{margin:var(--s4) 0; padding:var(--s4); text-align:center}
.btn-pdf{background:var(--brand); color:#fff; border-color:var(--brand); gap:10px; font-weight:600}
.btn-pdf:hover{background:#0c8f7a; color:#fff; opacity:1}
.pdf-icon{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 20px}
.pdf-icon img{width:100%; height:auto; display:block}
.pdf-note{margin:var(--s2) 0 0; font-size:.9em; color:var(--muted)}

/* 専門班リスト */
.team-list{display:grid; gap:var(--s3); grid-template-columns:1fr; margin:var(--s6) 0; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
@media(min-width:600px){.team-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.team-list{grid-template-columns:repeat(3,1fr)}}
.team-card{-webkit-appearance:none; appearance:none; display:flex; align-items:center; justify-content:space-between; padding:var(--s3); border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; transition:all .15s ease; text-align:left; gap:var(--s2); text-decoration:none; color:inherit}
.team-card:hover{background:var(--brand-weak); border-color:var(--brand); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08)}
.team-card:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.team-name{font-size:1.1em; font-weight:600; color:var(--ink)}
.team-arrow{color:var(--muted); font-size:1.2em; transition:transform .15s ease}
.team-card:hover .team-arrow{color:var(--brand); transform:translateX(4px)}

/* モーダル */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--s3); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; backdrop-filter:blur(2px)}
.modal-overlay[aria-hidden="false"]{opacity:1; visibility:visible}
.modal-content{background:#fff; border-radius:16px; max-width:700px; width:100%; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.3); transform:scale(.95); transition:transform .2s ease}
.modal-overlay[aria-hidden="false"] .modal-content{transform:scale(1)}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:var(--s4); border-bottom:1px solid var(--line); gap:var(--s2)}
.modal-title{font-size:var(--fs-h2); margin:0; color:var(--ink)}
.modal-close{-webkit-appearance:none; appearance:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:transparent; color:var(--muted); font-size:28px; line-height:1; cursor:pointer; border-radius:8px; transition:all .15s ease; padding:0}
.modal-close:hover{background:var(--line); color:var(--ink)}
.modal-close:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.modal-body{overflow-y:auto; padding:var(--s4); flex:1}
.modal-body .team-members{margin:0; padding:0}
.modal-body .member-item{padding-left:0; padding-right:0}

/* 専門班メンバーリスト */
.team-members{margin:var(--s4) 0 var(--s6); padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
.member-item{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); line-height:1.8}
.member-item:last-child{border-bottom:none}
.member-name{font-weight:600; color:var(--ink); min-width:120px}
.member-location{color:var(--muted); font-size:.95em}
.leader-badge{display:inline-block; margin-left:6px; padding:2px 8px; font-size:11px; font-weight:600; color:var(--brand); background:var(--brand-weak); border-radius:999px; vertical-align:middle; line-height:1.4}
@media(min-width:600px){
  .member-item{flex-wrap:nowrap}
  .member-name{min-width:180px}
}

/* 専門班詳細ページ */
.breadcrumb{color:var(--muted); font-size:.9em; margin:0 0 var(--s2)}
.breadcrumb a{color:var(--brand)}
.team-section{margin:var(--s6) 0; padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px)}
.team-section-heading-with-date{overflow:hidden}
.team-section-heading-with-date .team-list-date{float:right; font-size:.85em; color:var(--muted); white-space:nowrap; margin:0; line-height:inherit}
.team-section h2{font-size:var(--fs-h3); margin:0 0 var(--s4); padding-bottom:var(--s2); border-bottom:2px solid var(--brand)}
.team-members-list{margin:0}
.team-members-list .member-item{padding-left:0; padding-right:0}

/* 監修記事一覧 */
.supervised-articles{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:600px){.supervised-articles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.supervised-articles{grid-template-columns:repeat(3,1fr)}}
.supervised-articles .card{padding:var(--s3)}

/* 記事ページ */
.article-wrap{max-width:var(--wrap-article); padding-top:var(--s4); padding-bottom:var(--s7)}
.article-wrap .breadcrumb{padding-left:clamp(12px,4vw,40px); padding-right:clamp(12px,4vw,40px)}

/* 表紙画像＋目次（PC：横並び／SP：縦積み） */
.article-hero-and-toc{margin:var(--s4) 0 var(--s6); padding-left:clamp(12px,4vw,40px); padding-right:clamp(12px,4vw,40px); display:flex; flex-direction:column; gap:var(--s4); align-items:stretch}
@media (min-width:900px){
  .article-hero-and-toc{flex-direction:row; align-items:flex-start; gap:var(--s5); max-width:860px; margin-left:auto; margin-right:auto; justify-content:center}
  .article-toc{max-width:480px; flex:1 1 auto}
}

/* article-hero単体（h3なし記事）：画像は本来のサイズで余白・切れなし表示 */
.article-hero{margin:var(--s4) 0 var(--s6); padding-left:clamp(12px,4vw,40px); padding-right:clamp(12px,4vw,40px); display:flex; justify-content:center}
.article-hero img{max-width:600px; width:auto; height:auto; max-height:min(560px, 70vh); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08)}
/* article-hero-and-toc内ではヒーローをコンパクトに */
.article-hero-and-toc .article-hero{margin:0; padding:0; flex-shrink:0}
.article-hero-and-toc .article-hero img{max-width:600px; width:100%; max-height:300px; object-fit:cover; border-radius:16px; background:var(--line); box-shadow:0 12px 40px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08)}
@media (min-width:900px){
  .article-hero-and-toc .article-hero{flex:0 0 auto; max-width:340px}
  .article-hero-and-toc .article-hero img{max-width:340px; max-height:480px; object-fit:contain; object-position:top center}
}
@media (max-width:899px){
  .article-hero-and-toc .article-hero img{max-width:100%; max-height:none; object-fit:contain; height:auto}
}
@media (max-width:720px){
  .article-hero img{max-width:100%; width:auto; height:auto; max-height:none}
}

/* 記事目次（h3から自動生成） */
.article-toc{flex:1; min-width:0; border:1px solid var(--line); border-radius:14px; padding:var(--s3); background:var(--bg)}
.article-toc-heading{margin:0 0 var(--s2); font-size:1rem; font-weight:700; color:var(--ink)}
.article-toc-list{margin:0; padding:0; list-style:none}
.article-toc-list li{margin:0 0 8px}
.article-toc-list li:last-child{margin-bottom:0}
.article-toc-list a{display:block; padding:10px 14px; border-radius:10px; background:#f8fafb; color:var(--ink); text-decoration:none; font-size:.95em; transition:background .15s ease, color .15s ease}
.article-toc-list a:hover{background:var(--brand-weak); color:var(--brand)}
.article-toc-list a:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* 記事ヘッダー（シェアはH1の行だけ。リード・本文は常にフル幅） */
.article-header{padding-left:clamp(12px,4vw,40px); padding-right:clamp(12px,4vw,40px); margin-top:var(--s6); margin-bottom:var(--s8)}
.article-title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); flex-wrap:nowrap}
.article-title-row h1{font-size:var(--fs-h1); margin:0; padding:var(--s4) 0; line-height:1.3; flex:1 1 auto; min-width:0}
.article-lead{font-size:1.15em; color:var(--muted); margin:0 0 var(--s3)}

/* シェアボタン（H1と同じ行の右端のみ。リード・本文には影響しない） */
.share-buttons{display:flex; align-items:center; gap:10px; flex-shrink:0}
.share-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); transition:transform .12s ease, background .15s ease, color .15s ease}
.share-btn:hover{transform:translateY(-2px); color:#fff}
.share-btn .share-icon{display:flex; align-items:center; justify-content:center}
.share-btn .share-icon svg{width:20px; height:20px}
.share-btn.share-line:hover{background:#06c755; border-color:#06c755}
.share-btn.share-x:hover{background:#0f0f0f; border-color:#0f0f0f}
.share-btn.share-facebook:hover{background:#1877f2; border-color:#1877f2}
@media (max-width:640px){
  .article-title-row{flex-wrap:wrap}
  .article-title-row h1{flex:1 1 100%; padding-bottom:var(--s2)}
  .share-buttons{justify-content:center; width:100%; padding-top:var(--s3); padding-bottom:var(--s4); margin-bottom:var(--s2)}
  .share-buttons::before{content:"シェア"; font-size:.9rem; color:var(--muted); margin-right:12px; align-self:center}
}

/* 記事本文 */
.article-body{padding-left:clamp(12px,4vw,40px); padding-right:clamp(12px,4vw,40px)}
.article-body section{margin-bottom:var(--s7)}
.article-body h2{font-size:var(--fs-h2); margin:0 0 var(--s3); padding-bottom:var(--s2); border-bottom:2px solid var(--brand); line-height:1.4}
.article-body h3{font-size:var(--fs-h3); margin:var(--s4) 0 var(--s2); color:var(--ink); scroll-margin-top:88px}
.article-body p{margin:0 0 var(--s3); line-height:var(--lh-body)}
.article-body ul, .article-body ol{margin:0 0 var(--s3); padding-left:1.5em}
.article-body li{margin-bottom:8px; line-height:var(--lh-body)}

/* カテゴリページ */
.category-lead{padding:0 clamp(16px,4vw,40px); margin-bottom:var(--s5); color:var(--muted); font-size:1.05em; line-height:1.8}
.category-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4); padding:0 clamp(16px,4vw,40px); margin-bottom:var(--s6)}
@media (max-width:960px){.category-grid{grid-template-columns:repeat(2, 1fr); gap:var(--s3)}}
@media (max-width:600px){.category-grid{grid-template-columns:1fr; gap:var(--s3)}}
.category-empty{padding:var(--s6) clamp(16px,4vw,40px); text-align:center; color:var(--muted); font-size:1.05em}

/* 冊子ページ */
.booklet-notice{margin-bottom:var(--s6); padding:var(--s5) clamp(16px,4vw,40px); background:var(--brand-weak); border-radius:12px}
.booklet-list-section{margin-top:var(--s6)}
.booklet-list-title{font-size:var(--fs-h2); margin-bottom:var(--s4); padding:0 clamp(16px,4vw,40px); color:var(--ink)}

.booklet-form-section,
.contact-form-section{margin-top:var(--s4); padding:var(--s3) clamp(16px,4vw,32px); border:1px solid var(--line); border-radius:16px; background:#f8fbfa}
.booklet-form-section > h2,
.contact-form-section > h3{font-size:var(--fs-h2); margin:0 0 8px; padding:0}
.booklet-form-note,
.contact-form-note{margin:0 0 8px; color:var(--muted)}
.booklet-toggle-container,
.contact-toggle-container{text-align:center; margin-bottom:8px}
.booklet-toggle-btn,
.contact-toggle-btn{margin-bottom:0; display:inline-flex; align-items:center; gap:8px}
.booklet-toggle-icon,
.contact-toggle-icon{transition:transform .15s ease}
.booklet-toggle-btn[aria-expanded="true"] .booklet-toggle-icon,
.contact-toggle-btn[aria-expanded="true"] .contact-toggle-icon{transform:rotate(180deg)}
.booklet-form-wrapper,
.contact-form-wrapper{margin-top:8px; padding-top:8px}
.booklet-form-caption,
.contact-form-caption{margin-top:0; margin-bottom:8px}
.booklet-form-block,
.contact-form-block{margin-bottom:10px}
.booklet-form-block-title,
.contact-form-block-title{font-size:var(--fs-h3); margin:0 0 var(--s3)}
.booklet-form-grid,
.contact-form-grid{display:grid; gap:8px; grid-template-columns:1fr}
@media(min-width:720px){
  .booklet-form-grid,
  .contact-form-grid{grid-template-columns:repeat(2,1fr)}
}

/* フォーム内の縦方向スペース微調整（全体的にやや詰める） */
.booklet-form-block,
.contact-form-block{margin-bottom:10px}
@media(max-width:720px){
  .booklet-form-block,
  .contact-form-block{margin-bottom:8px}
  .booklet-form-grid,
  .contact-form-grid{gap:var(--s2)}
}
.form-field{display:flex; flex-direction:column; gap:4px}
.form-field label{font-weight:600}
.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea{border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:1rem; min-height:44px; font-family:var(--ff); width:100%}
.form-field textarea{min-height:160px; resize:vertical; line-height:var(--lh-body)}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.required{display:inline-block; margin-left:6px; font-size:.8em; color:#b00020; background:#fff2f2; padding:2px 6px; border-radius:999px}
.error-message{margin:2px 0 0; font-size:.85em; color:#b00020; min-height:1.4em}

.booklet-title-table{border:1px solid var(--line); border-radius:12px; background:#fff; max-height:360px; overflow-y:auto}
.booklet-title-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:10px 14px; border-bottom:1px solid var(--line)}
.booklet-title-row:last-child{border-bottom:none}
.booklet-title-label{flex:1; font-size:.95em}
.booklet-title-control{display:flex; align-items:center; gap:6px}
.booklet-qty-input{width:84px; text-align:right}
.booklet-qty-suffix{font-size:.9em; color:var(--muted)}

.captcha-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.captcha-question{font-weight:600}

.booklet-form-actions,
.contact-form-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; justify-content:center}
.booklet-form-message,
.contact-form-message{margin-top:var(--s3); font-size:.95em}
.booklet-form-message.is-success,
.contact-form-message.is-success{color:var(--brand)}
.booklet-form-message.is-error,
.contact-form-message.is-error{color:#b00020}

.contact-privacy-field label{display:flex; align-items:flex-start; gap:8px}
.contact-privacy-field input[type="checkbox"]{margin-top:4px}
.contact-legacy-section{margin-top:var(--s6)}

/* contactフォーム専用の細かい間隔調整 */
@media(max-width:720px){
  .contact-form-grid + .contact-form-grid{margin-top:var(--s2)}
}
.contact-form-actions{margin-top:var(--s2)}

/* フォーム内の段落の余白を少し詰める */
.booklet-form-block p,
.contact-form-block p{margin:0 0 8px}

.confirm-section{margin-bottom:var(--s4)}
.confirm-section h3{font-size:1.05em; margin:0 0 var(--s2)}
.confirm-list{margin:0; padding:0; display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:6px 12px}
.confirm-list dt{font-weight:600; font-size:.92em; color:var(--muted)}
.confirm-list dd{margin:0; font-size:.95em}
.modal-footer{display:flex; justify-content:flex-end; gap:var(--s3); padding:var(--s3) var(--s4) var(--s4)}

/* 監修情報 */
.article-footer{margin-top:var(--s7); padding:var(--s5) clamp(16px,4vw,40px); background:var(--brand-weak); border-radius:16px; margin-left:clamp(16px,4vw,40px); margin-right:clamp(16px,4vw,40px)}
.supervision{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.article-footer .supervision:first-child{margin-top:0; padding-top:0; border-top:none}
.article-footer .supervision:not(:first-child){margin-top:2px; padding-top:2px}
.supervision h2{font-size:1em; font-weight:700; color:var(--brand); margin:0; background:#fff; padding:6px 16px; border-radius:6px; border:1px solid var(--brand); white-space:nowrap}
.supervision p{margin:0; font-size:1.05em; flex:1}
.supervision a{color:var(--brand); font-weight:600}
.supervision b{color:var(--ink); font-weight:600}
.article-disclaimer{margin:var(--s3) 0 0; padding-top:var(--s3); border-top:1px solid rgba(0,0,0,.1); font-size:.85em; line-height:1.6; color:var(--muted)}
.article-meta{margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid rgba(0,0,0,.1)}
.article-meta p{margin:0; font-size:.9em; color:var(--muted)}
/* 記事ページ：最終更新はフッター外（線なし・右寄せ・小さく） */
.article-wrap > .article-meta{margin-top:var(--s3); padding-top:0; border-top:none; text-align:right}
.article-wrap > .article-meta p{font-size:.85em; color:var(--muted)}

/* 記事ページのアクション */
.article-wrap .actions{margin-top:var(--s6); padding-left:clamp(12px,4vw,40px); padding-right:clamp(12px,4vw,40px)}

/* 印刷用レイアウト（記事ページ：表紙画像＋pagebody のみ表示） */
@media print{
  /* 非表示：ヘッダー・サイトフッター・パンくず・目次・シェア・PDF案内・ナビ等（記事内 footer.article-footer は表示） */
  header.site, header.top, footer.site-footer, .breadcrumb, .article-toc, .toc, .share-buttons, .pdf-download, .actions, .rel{display:none !important}
  body{padding-top:0 !important; background:#fff}
  html{background:#fff}
  /* リンクは紙媒体として通常のテキストと同じ見た目に（下線・色変化なし） */
  a, a:visited, a:hover, a:focus{color:#000 !important; text-decoration:none !important}

  /* 用紙余白 */
  @page{margin:15mm; size:A4}

  /* 記事ラッパー：印刷用余白 */
  .article-wrap.wrap{max-width:100%; padding:0; margin:0}
  .article-wrap .article-hero,
  .article-wrap .article-header,
  .article-wrap .article-body.pagebody{padding-left:0; padding-right:0; margin-left:0; margin-right:0}

  /* 表紙画像：右に浮かせ、タイトル・本文が左と下に回り込む */
  .article-hero-and-toc{display:block}
  .article-hero{display:block; margin:0 0 0; page-break-after:avoid}
  .article-hero img,
  .article-hero-and-toc .article-hero img{float:right; margin:0 0 1em 1em; max-width:75mm !important; max-height:68mm !important; width:auto !important; height:auto !important; object-fit:contain; box-shadow:none; border-radius:0}

  /* 記事タイトル・リード：画像の左に回り込む */
  .article-header{margin-top:0; margin-bottom:1.5em; padding-top:0}

  /* 本文（pagebody）：画像の下から表示（回り込みは記事タイトル・リードまで） */
  .article-body.pagebody{clear:both; orphans:3; widows:3}
  .article-body.pagebody h2{page-break-after:avoid}
  .article-body.pagebody h3{page-break-after:avoid}
  .article-body.pagebody img{max-width:100% !important}

  /* 監修・免責：余白をとって読みやすい印刷用デザイン（線なし・監修は囲いなし） */
  .article-wrap .article-footer{margin-top:2em; padding:1.25em 0 1em; background:transparent; border-radius:0; border-top:none}
  .article-footer .supervision{border:none; padding:0}
  .article-footer .supervision:first-child{margin-top:0}
  .article-footer .supervision h2{font-size:.8em; font-weight:700; color:#000; margin:0; padding:0; background:transparent; border:none; border-radius:0; display:inline}
  .article-footer .supervision h2::after{content:" "}
  .article-footer .supervision p{font-size:.8em; margin:0; display:inline; line-height:1.5}
  .article-footer .supervision:not(:first-child){margin-top:1em}
  .article-footer .supervision:not(:first-child) h2{display:inline}
  .article-footer .article-disclaimer{font-size:.75em; line-height:1.6; margin-top:1em; padding-top:0; border-top:none; color:#333}

  /* 印刷時のみ：記事末尾に発行元を表示（小さめ・中央寄せ） */
  .print-publisher{display:block !important; margin-top:2em; padding-top:1em; font-size:.65em; color:#555; text-align:center}
  /* 最終更新：発行元の後、同じく小さく中央寄せ */
  .article-wrap .article-meta{margin-top:.5em; padding-top:0; border-top:none; text-align:center}
  .article-wrap .article-meta p{font-size:.65em; margin:0; color:#555}
}
/* 画面では非表示 */
.print-publisher{display:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}