/*
 * Educational Material Stylesheet - Final Version
 * 教材用謨呎攝スタイルシート 最終版
 *
 * 設計方針:
 * - WCAG 2.1 AA準拠
 * - 色覚多様性対応
 * - 見出し階層の明確な視覚的区別化
 * - シンタックスハイライト対応
 * - 印刷対応
 * - 高コントラストモード対応
 */

/*
 * CSS Reset (Eric Meyer's Reset CSS 2.0 based)
 * Modified: Removed deprecated HTML elements
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: none;
}

/*
 * CSS Custom Properties (Variables)
 */
:root {
  /* Colors - Primary (based on #0056b3) */
  --color-primary: #0056b3;
  --color-primary-dark: #003d80;
  --color-primary-light: #0066cc;
  --color-primary-hover: #003366;
  --color-primary-visited: #6b4c9a;

  /* Colors - Accent */
  --color-accent: #0056b3;
  --color-accent-light: #3385cc;

  /* Colors - Text (WCAG AA compliant) */
  --color-text: #333333;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #595959;
  --color-text-heading: #003366;
  --color-text-h2: #1a1a1a;
  --color-text-h4: #2a2a2a;
  --color-text-h5: #404040;

  /* Colors - Background */
  --color-bg: #ffffff;
  --color-bg-white: #ffffff;
  --color-bg-header: #eceeef;
  --color-bg-heading: #f5f5f5;
  --color-bg-h2: #e8f4fc;
  --color-bg-code: #f8f9fa;
  --color-bg-note: #e8f5e9;
  --color-bg-warning: #fff8e1;
  --color-bg-info: #e3f2fd;
  --color-bg-table-header: #e8eef4;

  /* Colors - Border */
  --color-border: #cccccc;
  --color-border-light: #dddddd;
  --color-border-table: #b0b0b0;
  --color-border-note: #81c784;
  --color-border-warning: #ffb74d;
  --color-border-info: #64b5f6;
  --color-border-code: #d0d7de;

  /* Colors - Heading Borders (hierarchical) */
  --color-border-h1: #003366;
  --color-border-h2: #0056b3;
  --color-border-h3: #2e7d99;
  --color-border-h4: #6699cc;
  --color-border-h5: #7799bb;

  /* Colors - UI */
  --color-button: #0056b3;
  --color-button-hover-bg: #003d80;
  --color-button-hover-text: #ffffff;
  --color-keyword: #0056b3;
  --color-highlight-bg: #ffecb3;

  /* Colors - Link States */
  --color-link-focus-bg: #e3f2fd;

  /* Colors - Box Labels */
  --color-label-note: #2e7d32;
  --color-label-warning: #e65100;
  --color-label-info: #0056b3;

  /*
   * Syntax Highlighting Colors
   * 背景色 #f8f9fa とのコントラスト比を確保
   * WCAG AA基準（4.5:1以上）準拠
   */
  --color-code-text: #24292f;           /* 基本テキスト: コントラスト比 12.4:1 */
  --color-code-keyword: #cf222e;        /* キーワード（if, for, while等）: 赤系 */
  --color-code-string: #0a3069;         /* 文字列: 紺系 */
  --color-code-comment: #57606a;        /* コメント: グレー（コントラスト比 4.6:1） */
  --color-code-function: #8250df;       /* 関数名: 紫 */
  --color-code-number: #0550ae;         /* 数値: 青 */
  --color-code-operator: #24292f;       /* 演算子: 黒 */
  --color-code-class: #953800;          /* クラス名: オレンジ */
  --color-code-variable: #24292f;       /* 変数: 黒 */
  --color-code-property: #0550ae;       /* プロパティ: 青 */
  --color-code-tag: #116329;            /* HTMLタグ: 緑 */
  --color-code-attribute: #0550ae;      /* HTML属性: 青 */
  --color-code-value: #0a3069;          /* 属性値: 紺系 */

  /*
   * Typography - Font Stack
   * 教材用謨呎攝として、可読性の高いフォントを優先
   */
  --font-sans: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  --font-mono:
    /* Windows - 視認性が高く広く利用可能 */
    Consolas,
    /* macOS - システム標準の等幅フォント */
    "SF Mono",
    /* Linux/クロスプラットフォーム - 視認性が高い */
    "Source Code Pro",
    "DejaVu Sans Mono",
    /* macOS フォールバック */
    Menlo,
    Monaco,
    /* Windows フォールバック */
    "Cascadia Code",
    /* 汎用フォールバック - Courier Newより視認性が高い */
    "Liberation Mono",
    /* 最終フォールバック */
    monospace;

  --font-size-base: 16px;
  --font-size-code: 0.9em;
  --line-height-base: 1.7;
  --line-height-heading: 1.4;
  --line-height-code: 1.6;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 40px;

  /* Layout */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);

  /* Focus */
  --focus-outline: 2px solid var(--color-primary);
  --focus-offset: 2px;

  /* Heading border widths */
  --border-h1: 3px;
  --border-h2: 8px;
  --border-h3: 5px;
  --border-h4: 2px;
  --border-h5: none;
}

/*
 * Global Box Sizing
 */
*, *::before, *::after {
  box-sizing: border-box;
}

/*
 * Base Styles
 */
html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  line-height: var(--line-height-base);
  color: var(--color-text);
  margin: 0 auto;
  padding: var(--spacing-lg);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

a img {
  border: none;
}

strong {
  font-weight: bold;
  color: var(--color-text);
}

/*
 * Code Blocks - Pre element
 */
pre {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--font-size-code);
  color: var(--color-code-text);
  line-height: var(--line-height-code);
  background-color: var(--color-bg-code);
  border: 1px solid var(--color-border-code);
  border-left: 4px solid var(--color-primary);
  padding: 20px;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: var(--border-radius-md);
  /* フォントのアンチエイリアス設定（視認性向上） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* タブ幅設定 */
  tab-size: 4;
  -moz-tab-size: 4;
}

/*
 * pre内のcode要素 - スタイルリセット
 * パディング・ボーダー・背景をリセットし、二重行の子継ぎを解消
 */
pre code {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-wrap: inherit;
  word-break: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

/*
 * Inline code（pre外）のスタイル
 */
code {
  font-family: var(--font-mono);
  font-size: var(--font-size-code);
  background-color: var(--color-bg-code);
  padding: 0.2em 0.4em;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-code);
  color: var(--color-code-text);
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Syntax Highlighting Classes
 * シンタックスハイライト用クラス
 * 各クラスは等幅フォントを継承し、色のみ変更
 */

/* キーワード: if, for, while, return, function, class, const, let, var 等 */
pre code .keyword,
pre code .kw,
pre code .k {
  color: var(--color-code-keyword);
  font-weight: bold;
}

/* 文字列リテラル */
pre code .string,
pre code .str,
pre code .s,
pre code .s1,
pre code .s2 {
  color: var(--color-code-string);
}

/* コメント */
pre code .comment,
pre code .cm,
pre code .c,
pre code .c1 {
  color: var(--color-code-comment);
  font-style: italic;
}

/* 関数名・メソッド名 */
pre code .function,
pre code .fn,
pre code .f,
pre code .nf {
  color: var(--color-code-function);
}

/* 数値リテラル */
pre code .number,
pre code .num,
pre code .n,
pre code .mi,
pre code .mf {
  color: var(--color-code-number);
}

/* 演算子 */
pre code .operator,
pre code .op,
pre code .o {
  color: var(--color-code-operator);
}

/* クラス名・型名 */
pre code .class,
pre code .class-name,
pre code .nc,
pre code .type {
  color: var(--color-code-class);
  font-weight: bold;
}

/* 変数名 */
pre code .variable,
pre code .var,
pre code .v {
  color: var(--color-code-variable);
}

/* プロパティ・属性 */
pre code .property,
pre code .prop,
pre code .p,
pre code .na {
  color: var(--color-code-property);
}

/* HTMLタグ */
pre code .tag,
pre code .nt {
  color: var(--color-code-tag);
}

/* HTML属性名 */
pre code .attr,
pre code .attribute {
  color: var(--color-code-attribute);
}

/* 属性値 */
pre code .value,
pre code .val {
  color: var(--color-code-value);
}

/* 組み込み関数・定数 */
pre code .builtin,
pre code .built-in,
pre code .nb {
  color: var(--color-code-function);
}

/* 正規表現 */
pre code .regex,
pre code .regexp {
  color: var(--color-code-string);
}

/* キーボード入力 */
kbd {
  font-family: var(--font-mono);
  font-size: var(--font-size-code);
  background-color: var(--color-bg-code);
  padding: 0.2em 0.4em;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-code);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-lg) 0;
}

/*
 * Links
 */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: break-word;
  transition: color 0.2s ease, background-color 0.2s ease;
}

a:visited {
  color: var(--color-primary-visited);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration-thickness: 2px;
}

a:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  background-color: var(--color-link-focus-bg);
  border-radius: var(--border-radius-sm);
}

a:active {
  color: var(--color-primary-dark);
}

span.info {
  color: var(--color-text);
}

.license-info {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm);
  border-left: 3px solid var(--color-border);
  background-color: var(--color-bg-code);
}

/*
 * Images
 */
img {
  border: 1px solid var(--color-border-light);
  max-width: 90%;
  text-align: center;
  object-fit: contain;
  backface-visibility: hidden;
}

img.shape {
  backface-visibility: hidden;
}

/*
 * Lists - Special
 */
ol.bracket,
ol.closing_bracket {
  list-style-type: none;
  counter-reset: cnt;
}

ol.bracket > li,
ol.closing_bracket > li {
  counter-increment: cnt;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border-light);
}

ol.bracket > li:last-child,
ol.closing_bracket > li:last-child {
  border-bottom: none;
}

ol.bracket > li:before {
  content: "(" counter(cnt) ") ";
  font-weight: bold;
  color: var(--color-primary);
}

ol.closing_bracket > li:before {
  content: counter(cnt) ") ";
  font-weight: bold;
  color: var(--color-primary);
}

/*
 * Utility Classes
 */
.italic {
  font-style: italic;
  margin-top: 0;
  margin-bottom: 0;
}

.highlight {
  font-weight: bold;
  background-color: var(--color-highlight-bg);
  padding: 0.1em 0.3em;
  border-radius: var(--border-radius-sm);
  border-bottom: 2px solid #ffc107;
}

.keyword {
  color: var(--color-keyword);
  font-weight: bold;
}

.left-aligned {
  text-align: left;
  display: flex;
}

.center-aligned {
  text-align: center;
}

.right-aligned {
  text-align: right;
}

/*
 * Header
 */
header {
  padding: 0;
  margin: 0;
  border: none;
}

.header {
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: var(--spacing-sm);
  border: 0;
  background-color: var(--color-bg-header);
}

.brandbar {
  border: 1px solid var(--color-border-light);
}

.kanekoface {
  width: 115px;
}

.kanekomailpng {
  width: 200px;
}

.lablogo {
  border: 0;
  height: 40px;
  width: auto;
  margin: 0;
  padding: 0 var(--spacing-md) 0 0;
  vertical-align: middle;
}

/*
 * Site Navigation Links
 */
.site-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
}

/*
 * Buttons
 */
.button {
  color: var(--color-button);
  text-align: right;
  border-width: thin;
}

.button a {
  text-decoration: none;
}

.button a:hover {
  color: var(--color-button-hover-text);
  background-color: var(--color-button-hover-bg);
}

.tableborder1 {
  border: 1px solid var(--color-text-secondary);
}

.subtopbtn {
  border-radius: 0;
}

.subtopbtnen {
  border-radius: 0;
  background-color: var(--color-bg-header);
}

.whitenote {
  border: 1px solid var(--color-primary-light);
  background-color: var(--color-bg);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
}

/*
 * Headings - Hierarchical Design with Pattern Differentiation
 */

/* h1: 下線スタイル（最上位階層） */
h1 {
  font-weight: bold;
  font-size: 2rem;
  line-height: var(--line-height-heading);
  color: var(--color-text-heading);
  border-bottom: var(--border-h1) solid var(--color-border-h1);
  padding-bottom: var(--spacing-md);
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  background: none;
}

/* h2: 左線＋薄明色（セクション開始） */
h2 {
  font-weight: bold;
  font-size: 1.6rem;
  line-height: var(--line-height-heading);
  color: var(--color-text-h2);
  background: var(--color-bg-h2);
  padding: var(--spacing-md);
  border-left: var(--border-h2) solid var(--color-border-h2);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

/* h3: 左線のみ（中間階） */
h3 {
  font-weight: bold;
  font-size: 1.35rem;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  background: transparent;
  padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
  border-left: var(--border-h3) solid var(--color-border-h3);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

/* h4: 下線スタイル（下位階層） */
h4 {
  font-weight: bold;
  font-size: 1.2rem;
  line-height: var(--line-height-heading);
  color: var(--color-text-h4);
  background: transparent;
  padding: var(--spacing-xs) 0 var(--spacing-sm) 0;
  border-left: none;
  border-bottom: var(--border-h4) solid var(--color-border-h4);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

/* h5: インデント（最下位） */
h5 {
  font-weight: bold;
  font-size: 1.05rem;
  line-height: var(--line-height-heading);
  color: var(--color-text-h5);
  background: transparent;
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-lg);
  border-left: none;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

h2 a:link, h2 a:visited {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: bold;
}

h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited,
h5 a:link, h5 a:visited {
  background-color: transparent;
  color: var(--color-primary);
}

/*
 * Lists
 */
ol {
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 2em;
}

ul {
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 2em;
}

li {
  line-height: var(--line-height-base);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

p {
  line-height: var(--line-height-base);
  margin-top: 1em;
  margin-bottom: 1em;
}

/*
 * Tables
 */
table {
  border-collapse: collapse;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  border: 1px solid var(--color-border-table);
}

th, td {
  border: 1px solid var(--color-border-table);
  padding: var(--spacing-md);
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

th {
  background-color: var(--color-bg-table-header);
  font-weight: bold;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
}

tr td {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-border-table);
}

/*
 * Note, Warning, and Info Boxes with Labels
 * 色覚多様性対応：ラベルテキストとボーダーパターンで区別
 */

/* 補足情報（薄緑・実線） */
.note {
  position: relative;
  background: var(--color-bg-note);
  border: 1px solid var(--color-border-note);
  border-left: 4px solid #4caf50;
  padding: var(--spacing-lg);
  padding-top: calc(var(--spacing-lg));
  margin-top: var(--spacing-lg);
  border-radius: var(--border-radius-md);
}

.note::before {
  content: "";
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-md);
  font-size: 0.85em;
  font-weight: bold;
  color: var(--color-label-note);
  background: var(--color-bg-note);
  padding: 0 var(--spacing-xs);
}

/* 警告情報（薄黄色・破線） */
.warning {
  position: relative;
  background: var(--color-bg-warning);
  border: 2px dashed var(--color-border-warning);
  border-left: 4px solid #ff9800;
  padding: var(--spacing-lg);
  padding-top: calc(var(--spacing-lg) + 1.5em);
  margin-top: var(--spacing-lg);
  border-radius: var(--border-radius-md);
}

.warning::before {
  content: "注意";
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-md);
  font-size: 0.85em;
  font-weight: bold;
  color: var(--color-label-warning);
  background: var(--color-bg-warning);
  padding: 0 var(--spacing-xs);
}

/* 情報ボックス（実線の二重線） */
.info {
  position: relative;
  background: var(--color-bg-info);
  border: 3px double var(--color-border-info);
  border-left: 4px solid var(--color-primary);
  padding: var(--spacing-lg);
  padding-top: calc(var(--spacing-lg) + 1.5em);
  margin-top: var(--spacing-lg);
  border-radius: var(--border-radius-sm);
}

.info::before {
  content: "";
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-md);
  font-size: 0.85em;
  font-weight: bold;
  color: var(--color-label-info);
  background: var(--color-bg-info);
  padding: 0 var(--spacing-xs);
}

.code, .kbd {
  display: block;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--font-size-code);
  border: 1px solid var(--color-border-code);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-bg-code);
  color: var(--color-code-text);
  margin: 1em 0;
  padding: 1em;
  border-radius: var(--border-radius-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Footer
 */
.footer {
  border: 0;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background-color: var(--color-bg-header);
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  font-size: 0.9em;
}

.footer p {
  margin: var(--spacing-sm) 0;
}

.footer address {
  font-style: normal;
  margin: var(--spacing-sm) 0;
}

.footer .license-info {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-bg-white);
  font-size: 0.95em;
}

.footer .license-info p {
  margin: 0;
}

.footer .last-modified {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.9em;
  margin-top: var(--spacing-md);
}

/*
 * Touch device support
 */
@media (hover: none) {
  a, button, .button, .subtopbtn {
    min-height: 44px;
    min-width: 44px;
  }
}

button:focus, .button:focus, input:focus, select:focus, textarea:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/*
 * Desktop styles (1025px and above)
 */
@media screen and (min-width: 1025px) {
  main {
    background-color: var(--color-bg-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
  }

  .h15 {
    font-weight: bold;
    font-size: x-large;
    text-align: center;
    border-top: 3px solid var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
    border-radius: 0;
    padding: 1em;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    text-decoration: none;
    color: var(--color-text-heading);
    background-color: var(--color-bg-heading);
  }

  .sitelink {
    margin: 0;
    margin-top: 1em;
    padding: 0;
  }

  iframe {
    max-width: 100%;
    height: auto;
    width: 65%;
    text-align: center;
    border: 1px solid var(--color-border);
    object-fit: contain;
  }

  #google_translate_element {
    text-align: right;
  }

  #google_translate_element img {
    height: 1.4em;
    display: inline;
  }

  .smallimage {
    width: 25%;
  }

  .tinyimage {
    width: 15%;
  }

  .iconimage {
    width: 80px;
  }

  .menu {
    text-align: center;
    margin-top: -1em;
    margin-bottom: 2em;
  }

  .sitemenuformobile {
    display: none;
  }

  .button1 {
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    padding: 0 0.5em;
    color: var(--color-text);
    font-size: 18px;
    background-color: var(--color-bg-header);
    transition: background-color 0.3s;
  }

  .button1:hover {
    background-color: var(--color-border);
  }
}

/*
 * Tablet styles (768px to 1024px)
 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    max-width: 100%;
    padding: var(--spacing-lg);
  }

  main {
    background-color: var(--color-bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.15rem;
  }

  h5 {
    font-size: 1rem;
  }

  iframe {
    width: 80%;
  }

  .smallimage {
    width: 40%;
  }

  .tinyimage {
    width: 20%;
  }

  .sitelink {
    margin: 0;
    margin-top: 1em;
    padding: 0;
  }

  .footer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
  }
}

/*
 * Mobile styles (767px and below)
 */
@media screen and (max-width: 767px) {
  body {
    max-width: 100%;
    padding: var(--spacing-md);
    -webkit-overflow-scrolling: touch;
  }

  main {
    background-color: var(--color-bg-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
  }

  /* モバイル時も見出し階層のパターン区別化を継承 */
  h1 {
    font-size: 1.6rem;
    padding-bottom: var(--spacing-sm);
    border-bottom-width: 3px;
  }

  h2 {
    font-size: 1.35rem;
    padding: var(--spacing-sm);
    border-left-width: 6px;
    margin-top: var(--spacing-lg);
  }

  h3 {
    font-size: 1.2rem;
    padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-sm);
    border-left-width: 4px;
  }

  h4 {
    font-size: 1.1rem;
    padding: var(--spacing-xs) 0 var(--spacing-sm) 0;
    border-bottom-width: 2px;
  }

  h5 {
    font-size: 1rem;
    padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
  }

  .h15 {
    font-weight: bold;
    font-size: large;
    text-align: center;
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding: 0.5em;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    text-decoration: none;
    color: var(--color-text-heading);
    background-color: var(--color-bg-heading);
  }

  ol {
    padding-left: 1.5em;
  }

  ul {
    padding-left: 1.5em;
  }

  pre {
    padding: var(--spacing-sm);
    font-size: 0.85em;
  }

  .note {
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md));
    margin-top: var(--spacing-md);
  }

  .warning {
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md) + 1.5em);
    margin-top: var(--spacing-md);
  }

  .info {
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md) + 1.5em);
    margin-top: var(--spacing-md);
  }

  .code, .kbd {
    margin: 0.5em 0;
    padding: var(--spacing-sm);
    font-size: 0.85em;
  }

  .sitelink {
    display: none;
  }

  iframe {
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
    width: 100%;
    text-align: center;
    border: 1px solid var(--color-border);
    object-fit: contain;
  }

  img {
    max-width: 100%;
    height: auto;
    width: auto;
    text-align: center;
    border: 1px solid var(--color-border-light);
    object-fit: contain;
  }

  #google_translate_element {
    display: none;
  }

  #google_translate_element img {
    display: none;
  }

  .iconimage {
    width: 25%;
  }

  .smallimage {
    width: 60%;
  }

  .tinyimage {
    width: 30%;
  }

  .lablogo {
    display: none;
  }

  .footer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm);
    line-height: 1.4;
  }

  .footer .license-info {
    padding: var(--spacing-sm);
  }

  .menu {
    display: none;
  }

  table {
    display: block;
    overflow-x: hidden;
  }

  th, td {
    padding: var(--spacing-sm);
    font-size: 0.9em;
    word-break: break-all;
  }

  thead tr {
    display: table-row;
  }

  tr {
    display: table-row;
  }

  .header {
    line-height: 1;
    padding: var(--spacing-sm);
  }

  a, button, .button, .subtopbtn {
    padding: var(--spacing-md);
    margin: 5px 0;
  }

  input, select, textarea {
    width: 100%;
    padding: var(--spacing-md);
    margin: 5px 0;
  }
}

/*
 * Breadcrumb Navigation
 */
nav[aria-label="breadcrumb"] {
  flex-grow: 1;
}

ol[role="breadcrumb"] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

ol[role="breadcrumb"] li {
  display: inline;
  font-size: 14px;
  margin-right: 5px;
}

ol[role="breadcrumb"] li + li:before {
  content: ">";
  padding: 0 var(--spacing-sm);
  color: var(--color-text-secondary);
}

ol[role="breadcrumb"] li a {
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

ol[role="breadcrumb"] li a:hover {
  text-decoration: underline;
}

ol[role="breadcrumb"] li:last-child {
  color: var(--color-text-secondary);
}

/*
 * Site Menu
 */
.site-menu {
  background-color: var(--color-bg-header);
  padding: var(--spacing-xs) 0;
  border-top: none;
  text-align: center;
}

.menu-container {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.menu-title {
  font-weight: bold;
  margin-right: var(--spacing-lg);
  white-space: nowrap;
}

.menu-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
}

.menu-items li {
  margin: 0;
  border-right: 1px solid var(--color-border);
}

.menu-items li:last-child {
  border-right: none;
}

.menu-items a {
  text-decoration: none;
  color: var(--color-text);
  padding: 5px var(--spacing-md);
  display: block;
  transition: background-color 0.3s;
}

.menu-items a:hover {
  background-color: var(--color-primary);
  color: var(--color-bg-white);
}

/* Mobile menu responsive */
@media (max-width: 768px) {
  .menu-items {
    line-height: 1;
  }
}

/*
 * Print Styles
 */
@media print {
  * {
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body, p, li, td, th {
    color: #000 !important;
  }

  body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    font-size: 11pt;
    line-height: 1.5;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
    word-wrap: break-word;
    word-break: break-all;
    max-width: 200px;
    display: inline-block;
    vertical-align: bottom;
  }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  a[href*="?"]:after {
    content: " (Link)";
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  h1, h2, h3, h4, h5 {
    page-break-after: avoid;
    page-break-inside: avoid;
    color: #000 !important;
  }

  img, pre, blockquote, table {
    page-break-inside: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  .header, .footer, .menu, nav, .site-menu, button, .button {
    display: none !important;
  }

  h1 {
    font-size: 18pt;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 16pt;
    border-left: 6px solid #333 !important;
    background: #f0f0f0 !important;
    padding: 8px 12px !important;
    margin-top: 24px;
    margin-bottom: 12px;
  }

  h3 {
    font-size: 14pt;
    border-left: 4px solid #666 !important;
    padding-left: 12px !important;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  h4 {
    font-size: 12pt;
    border-bottom: 1px solid #999 !important;
    border-left: none !important;
    padding-bottom: 4px;
    margin-top: 12px;
    margin-bottom: 6px;
  }

  h5 {
    font-size: 11pt;
    padding-left: 24px !important;
    border: none !important;
    margin-top: 8px;
    margin-bottom: 4px;
  }

  table {
    border: 1px solid #000;
    width: 100%;
  }

  th, td {
    border: 1px solid #000;
    padding: 6px;
  }

  th {
    background: #e0e0e0 !important;
    font-weight: bold;
  }

  .note, .warning, .info {
    border: 1px solid #000 !important;
    padding: 12px !important;
    padding-top: 24px !important;
    margin: 12px 0 !important;
    page-break-inside: avoid;
  }

  .note {
    border-left: 4px solid #333 !important;
  }

  .note::before {
    font-weight: bold;
    color: #000 !important;
    background: transparent !important;
  }

  .warning {
    border-left: 4px solid #000 !important;
    border-style: dashed !important;
  }

  .warning::before {
    content: "[注意]" !important;
    font-weight: bold;
    color: #000 !important;
    background: transparent !important;
  }

  .info {
    border-left: 4px solid #666 !important;
  }

  .info::before {
    content: "[情報]" !important;
    font-weight: bold;
    color: #000 !important;
    background: transparent !important;
  }

  pre, code, .code, .kbd {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    font-family: Consolas, "Source Code Pro", "DejaVu Sans Mono", monospace;
    font-size: 9pt;
  }

  pre {
    border-left: 3px solid #666 !important;
    padding: 8px !important;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  pre code {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* 印刷時のシンタックスハイライト（グレースケール） */
  pre code .keyword,
  pre code .kw,
  pre code .k {
    font-weight: bold !important;
    color: #000 !important;
  }

  pre code .comment,
  pre code .cm,
  pre code .c,
  pre code .c1 {
    color: #666 !important;
    font-style: italic !important;
  }

  pre code .string,
  pre code .str,
  pre code .s,
  pre code .s1,
  pre code .s2 {
    color: #333 !important;
  }

  pre code .function,
  pre code .fn,
  pre code .f,
  pre code .nf {
    color: #000 !important;
    font-weight: bold !important;
  }
}

/*
 * High Contrast Mode Support
 */
@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-text-secondary: #000000;
    --color-text-muted: #333333;
    --color-bg: #ffffff;
    --color-bg-white: #ffffff;
    --color-bg-h2: #e0e0e0;
    --color-bg-code: #f0f0f0;
    --color-bg-note: #e8f5e9;
    --color-bg-warning: #fff3cd;
    --color-bg-info: #e3f2fd;
    --color-border: #000000;
    --color-border-light: #333333;
    --color-border-table: #000000;
    --color-border-code: #000000;
    --color-primary: #0000cc;
    --color-primary-visited: #660099;
    --color-code-text: #000000;
    --color-code-keyword: #990000;
    --color-code-string: #000066;
    --color-code-comment: #333333;
    --color-code-function: #660099;
    --color-code-number: #000099;
  }

  h1 {
    border-bottom: 4px solid #000000 !important;
  }

  h2 {
    border-left: 10px solid #000000 !important;
    background: #e0e0e0 !important;
  }

  h3 {
    border-left: 6px solid #333333 !important;
  }

  h4 {
    border-bottom: 3px solid #666666 !important;
  }

  h5 {
    color: #000000 !important;
    font-weight: bold;
  }

  .note {
    border: 2px solid #006600 !important;
    border-left: 6px solid #006600 !important;
  }

  .warning {
    border: 3px dashed #cc6600 !important;
    border-left: 6px solid #cc6600 !important;
  }

  .info {
    border: 2px solid #0000cc !important;
    border-left: 6px solid #0000cc !important;
  }

  a {
    color: #0000cc !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
  }

  a:visited {
    color: #660099 !important;
  }

  a:hover, a:focus {
    background-color: #ffff00 !important;
    color: #000000 !important;
    outline: 3px solid #000000 !important;
  }

  table, th, td {
    border: 2px solid #000000 !important;
  }

  th {
    background: #cccccc !important;
  }

  pre, code, .code, .kbd {
    border: 2px solid #333333 !important;
    background: #f0f0f0 !important;
  }

  pre code {
    border: none !important;
  }

  *:focus {
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
  }

  /* 高コントラスト時のシンタックスハイライト強化 */
  pre code .keyword,
  pre code .kw,
  pre code .k {
    color: #990000 !important;
    font-weight: bold !important;
  }

  pre code .comment,
  pre code .cm,
  pre code .c,
  pre code .c1 {
    color: #333333 !important;
  }
}

/*
 * Reduced Motion Support
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Dark Mode Support
 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e0e0e0;
    --color-text-secondary: #b0b0b0;
    --color-text-muted: #909090;
    --color-text-heading: #ffffff;
    --color-text-h2: #f0f0f0;
    --color-text-h4: #e8e8e8;
    --color-text-h5: #d0d0d0;
    --color-bg: #1a1a1a;
    --color-bg-white: #2a2a2a;
    --color-bg-header: #333333;
    --color-bg-heading: #2a2a2a;
    --color-bg-h2: #1e3a5f;
    --color-bg-code: #2d2d2d;
    --color-bg-note: #1b3d1b;
    --color-bg-warning: #3d3520;
    --color-bg-info: #1a3050;
    --color-bg-table-header: #3a3a3a;
    --color-border: #555555;
    --color-border-light: #444444;
    --color-border-table: #666666;
    --color-border-code: #555555;
    --color-primary: #6db3f2;
    --color-primary-hover: #90caf9;
    --color-primary-visited: #b39ddb;
    --color-link-focus-bg: #1a3050;
    --color-label-note: #81c784;
    --color-label-warning: #ffb74d;
    --color-label-info: #64b5f6;
    --color-highlight-bg: #5d4e37;

    /* ダークモード用シンタックスハイライト */
    --color-code-text: #e0e0e0;
    --color-code-keyword: #ff7b72;
    --color-code-string: #a5d6ff;
    --color-code-comment: #8b949e;
    --color-code-function: #d2a8ff;
    --color-code-number: #79c0ff;
    --color-code-operator: #e0e0e0;
    --color-code-class: #ffa657;
    --color-code-variable: #e0e0e0;
    --color-code-property: #79c0ff;
    --color-code-tag: #7ee787;
    --color-code-attribute: #79c0ff;
    --color-code-value: #a5d6ff;
  }

  img {
    opacity: 0.9;
  }

  /* Prism.js ダークモード対応 */
  pre[class*="language-"],
  code[class*="language-"] {
    color: var(--color-code-text);
    background: var(--color-bg-code);
  }

  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: var(--color-code-comment);
  }

  .token.punctuation {
    color: var(--color-code-text);
  }

  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: var(--color-code-number);
  }

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: var(--color-code-string);
  }

  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string {
    color: var(--color-code-operator);
    background: transparent;
  }

  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: var(--color-code-keyword);
  }

  .token.function,
  .token.class-name {
    color: var(--color-code-function);
  }

  .token.regex,
  .token.important,
  .token.variable {
    color: var(--color-code-class);
  }

  .note::before {
    color: var(--color-label-note);
  }

  .warning::before {
    color: var(--color-label-warning);
  }

  .info::before {
    color: var(--color-label-info);
  }
}

/*
 * Prism.js Theme Override (Light Mode)
 * Prism.jsデフォルトテーマの背景色を統一
 * 注意：HTMLでprism.min.cssをblue.cssより先に読み込むこと
 */
pre[class*="language-"],
code[class*="language-"] {
  color: var(--color-code-text);
  background: var(--color-bg-code);
}

pre[class*="language-"] {
  padding: 20px;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 1px solid var(--color-border-code);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius-md);
}

/* トークンの背景色をリセット */
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  background: transparent;
}

/*
 * Lazy Loading Hint for Images
 */
img[loading="lazy"] {
  content-visibility: auto;
}