/* サイト全般 */
:root{ /* 配色の定義 */
  color-scheme: light dark/*スマホがダークモードであればダークモードに、非ダークモードであれば非ダークモードで表示、以下はcss中で指示する配色*/;
  --bg:#ffffff;
  --fg:#1a1a1a;
  --muted:#4f4444;/*注記用の若干薄い文字色 */
  --brand:#0a5aaa;
  --brand-weak:#e7f0fb;
  --border:#e5e7eb;
  --code-bg:#f7f7f8;
  --note-bg:#fffbe6; /*注釈部に適用する背景色 */
  --note-fg:#1a1a1a;  /* 同じく文字色 */
  --note-border:#d9d3a4;  /* 同じく枠線色 */
  --note-link:#0a58ca;  /* 同じく未読リンク色 */
  --note-link-visited:#6f42c1;  /* 同じく既読リンク色 */
  --note-link-hover:#084298;  /* 同じくリンクをホバー時 */
  --maxw:72rem;
  --radius:14px /*要素境界の角丸めサイズ*/;
  --shadow:0 8px 20px rgba(49, 48, 48, 0.06) /*ボックスに影を付ける場合の指示*/; --leading:1.9 /*行高を文字の1.9倍に*/;
  --space:clamp(16px,2.5vw,28px) /*paddingやmarginの大きさを自動計算（最小値,画面幅比例係数,最大値）*/;
  --header-height: 64px; /* ヘッダーの高さ(px) */
}
@media(prefers-color-scheme:dark){ /* ダークモードの場合の配色の読み替え */
  :root{
  --bg:#0f1115;
  --fg:#e6e6e6;
  --muted:#b7b7b7;
  --brand:#74b7ff;
  --brand-weak:#d6e2ef;
  --border:#4a5a75;
  --code-bg:#161a20;
  --note-bg:#1f2218; /*注釈部に適用する背景色 */
  --note-fg:#ece8d2; /* 同じく文字色 */
  --note-border:#3a604d; /* 同じく枠線色 */
  --note-link:#9ecbff ;/* 同じく未読リンク色 */
  --note-link-visited:#caa6ff; /* 同じく既読リンク色 */
  --note-link-hover:#cde1ff; /* 同じくリンクをホバー時 */
  --shadow:0 8px 24px rgba(0,0,0,.35);}
}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui /* システムフォントを使用（使えない場合は以下のフォント */,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif /*iphone用のフォント指示*/;line-height:var(--leading) }/* 行高は文字の1.9倍 */
a{color:var(--brand)}/* リンク部の配色 */
.container{max-width:var(--maxw) /*ヘッダー・main・nav・フッター部はいずれも最大幅72remまでの可変にする*/;margin-inline:auto /*左右の真ん中に配置*/;padding:0 var(--space)}
:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 70%, transparent);outline-offset:2px;border-radius:6px}/*閲覧時にTabキーを使って選択した要素を線で囲って明示*/

/* ---- Fix 1: 固定ヘッダー下に見出しが隠れる問題対策 ---- */
html { scroll-padding-top: var(--header-height); }/* アンカー/サイト内リンクのジャンプ位置をヘッダー分だけ下げる */
html {scroll-behavior:smooth}
[id] { scroll-margin-top: var(--header-height); }/* 直接IDへ飛ぶ場合の保険 */
body { padding-top: var(--header-height); }/* 初期表示やスクロール時にも本文がヘッダーに潜らないようにする */

/*サイトヘッダー部*/
.brand{display:flex /*直下の要素を並列する*/;align-items:center /*フレックス要素の高さを中央に*/;gap:10px /*フレックス要素の間隔を10pxに*/;text-decoration:none;color:inherit/*フォント色は親要素の色*/;font-weight:700 /*文字の太さが10段階の7*/} /*冒頭ロゴ部のフレックスボックスの設定*/
.brand__logo{width:28px;height:28px;border-radius:50%;background:radial-gradient(60% 60% at 30% 30%, var(--brand) 0 60%, transparent 61%), var(--brand-weak);box-shadow:inset 0 0 0 1px var(--border)} /* ロゴマークとして2つのレイヤーを持つ放射状グラデーションを描画 */
.nav{margin-left:auto}/*ヘッダーのボタン列を右詰にする*/
.nav__list{display:flex;gap:10px;list-style:none;margin:0;padding:0}/*ヘッダーのボタンを前ポツ無しのリストにし、横並び順方向のフレックスコンテナとして扱う*/
.nav__link{display:inline-block;padding:8px 12px;border-radius:999px;text-decoration:none;color:inherit}/*リストの要素をインラインブロックにすることで改行されることを防ぎ、パディングを上下8px・左右12px*にする*/
.nav__link[aria-current="page"]/*現在のページのリスト要素を選択*/{background:var(--brand-weak);color:var(--brand);font-weight:600 /*文字の太さが10段階の6*/}
.site-header{position:sticky/*ヘッダー部をサイト上部にフローティング配置*/;top:0;z-index:50/*z-indexを大きくして他の部分より上に重なるようにする*/;backdrop-filter:saturate(120%) blur(6px)/*背後のコンテンツの彩度を120%に高めて半径6pxのぼかしをかける*/;background:color-mix(in oklab, var(--bg) 85%, transparent)/*背景色は--bg色を85％、透明色を15％混合して半透明にする*/;border-bottom:1px solid var(--border)}
.site-header__inner{display:flex;align-items:center;gap:16px;height:64px}/*サイトヘッダーの要素(ロゴマーク・ボタンリスト)を横並びのフレックス化し、縦のセンタリング*/

/*main(ヘッダー・フッター以外)部*/
.card{border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,2.4vw,24px)/*画面幅に応じた余白の設定*/;background:var(--bg);box-shadow:var(--shadow)}/*全体をボックスにして、角丸・影付きの枠線を表示*/
.prose{font-size:1.3rem}/*proseクラスは導入部・日記部・注釈部のフォント等指示用*/
.prose h1,.prose h2,.prose h3{line-height:1.35}
.prose h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin:1.6rem 0 .6rem}
.prose p{margin:.9rem 0}

/*導入部(class=hero)*/
.hero{padding:calc(var(--space)*1.2) 0}/*四周に大きさ比例の余白設定*/
.hero__panel{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(180deg,color-mix(in oklab,var(--brand-weak) 70%,transparent) 0%,transparent 60%);padding:clamp(18px,3vw,34px)}/*角丸境界線・背景が水平にグラデーション装飾のパネルを設置*/
.hero__kicker{font-size:.9rem;color:var(--muted);letter-spacing:.08em;}/* 注記なので文字色を若干薄くする */
.hero__title{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:.4rem 0 1rem;line-height:1.35}/* ページ全体のタイトルの文字プロパティ設定 */
.hero__desc{color:var(--muted)}/* 注記なので文字色を若干薄くする */

/*日記・注釈部(class=article)*/
.note{background:color-mix(in oklab,var(--brand-weak) 60%,transparent);border:1px dashed var(--border);border-radius:8px;padding:0rem .1rem;font-size:smaller} /*【 】書き部分を半透明の青色で装飾*/
.cmd{padding: 15px 20px 15px 20px;border: 1px solid var(--fg);}/*臨参命などの部分の囲み線*/
.remarks {padding: 10px 20px;border:1px solid #f6bb9e;background-color:beige;color:navy;margin-top:20px;}/*注釈枠*/

/*注釈部*/
.notes{
  background: var(--note-bg);
  color: var(--note-fg);
  border: 1px solid var(--note-border);
  padding: 1rem;
  border-radius: 8px;
}
.notes hr{ border-color: var(--note-border); opacity: .7; }/* 注釈部の水平線 */
.notes a:link{
  color: var(--note-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notes a:visited{ color: var(--note-link-visited); }
.notes a:hover,
.notes a:focus{
  color: var(--note-link-hover);
  outline: 2px solid currentColor;   /* キーボード操作でも見えるように */
  outline-offset: 2px;
}
/*注釈部の次の移動誘導部*/
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--border);text-decoration:none}/*ボタンの装飾*/

/*画像関係*/
img {max-width: 100%;height: auto;}/* 画像幅の上限は親要素のwidth幅の100%の値、縦横比を保つ */
.pic{margin-top:20px;text-align:center;line-height:13.0pt; border: 1px solid var(--fg); } /*画像関係部の囲み線を入れる*/
.imgR{float: right;margin-left: 20px;margin-bottom: 5px;}/*画像を右寄せ*/
.clear{clear: both;}/*画像の周囲にテキストを回り込ませるのを解除*/
 

/*サイトフッター部*/
.site-footer{margin-top:calc(var(--space)*2);border-top:1px solid var(--border)}
.site-footer__inner{padding:var(--space) 0;font-size:.95rem;color:var(--muted);text-align:right}

/*表組み関係*/
table{border-collapse: collapse;}/*表の罫線を全て一重線にする*/
table.box tr th,tr td {border: 1px solid dimgray;padding-left:5px;padding-right:5px;}/*一般の表*/
.c{text-align:center}/*センタリングするセル*/
.r{text-align:right}/*右寄せするセル*/
.p{color:#ff00ff}
.y{background-color:rgb(248, 89, 77)}

#tyouhei,#tyouhei1,#tyouhei2,#edu {font-size: clamp(10px, 3vw, 14px);} /* スマホで小さく、デスクトップで大きく */

/* tyouhei2の表は数字ばかりで横幅が縮小しにくいので、二段構えで対応
(1)画面が狭い時は横スクロールで逃がす（ラッパーのoverflow-x:autoが効いて横スクロール）
(2)広い画面では他ブロックと同じくらいの横幅（width:100%で他ブロックと同じ幅まで伸び、min-width:max-contentにより数字が潰れない。） */
.table-container{
  overflow-x: auto;
  width: 100%;
}/* ラッパー：狭い時だけ横スクロールがラッパー側に発生 */
#tyouhei2{
  width: 100%;/*画面が広い時は100%まで拡がる*/ 
  min-width:300px; /* 必要に応じて幅を調整 */
  table-layout: auto;
  border-collapse: collapse; /* 体裁 */
}

#tyouhei2 th,#tyouhei2 td{white-space: nowrap; padding: 4px 6px;}/* セルの各数字は折り返さず、詰めすぎない */
@media (min-width: 1200px){#tyouhei2{ font-size: 15px; }}/* デスクトップで十分広い時の上限 */

/*pdf.htmlページ関係*/
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}/*.cards要素をグリッド コンテナーとして設定し、その直接の子要素に対して CSS グリッド レイアウトを使用、各カード間は14pxとし、各カードの幅は少なくとも220ピクセル以上でスペースに合わせて調整*/
.pdf-card{display:grid;grid-template-rows:auto 1fr auto;gap:10px}/*各カード内に10px間隔で3つのコンテナを並べ、各コンテナの高さは、順に「自動」「調整」「自動」とする*/
.pdf-thumb{aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#f6f6f6}/*コンテンツのアスペクト比を16:9に維持したまま、コンテナーの大きさに合わせて拡大縮小する*/
.pdf-thumb{
  background: var(--note-bg);
  color: var(--note-fg);
  border: 1px solid var(--note-border);
  padding: 0.5rem;
  border-radius: 8px;
  font-size:.92rem;
}

.pdf-thumb{display:flex;gap:8px;flex-wrap:wrap}/*カードをFlexboxコンテナにし、中のフレックスアイテムの隙間を8pxとし、フレックスアイテムが1行に収まらない場合は折り返す*/

/* 狭い画面では回り込みをやめ、上下レイアウトへ */
@media (max-width: 800px){
  .imgR {
    float: none;
    display: block;
    margin: 0 auto 8px;               /* 画像→本文の順に安定配置 */
    width: min(100%, 420px);          /* ここはお好みで */
    height: auto;
  }
}