@charset "UTF-8";

/* ==========================================================================
   style.css — 全ページ共通のスタイル（トップ index.html・下層ページ・お知らせ news/*.html）
   - 配色：ブラウン（淡いベージュの背景）× コーラルピンク（線・矢印・フォーカスの枠）。文字色は #333333
   - rem の基準：1rem = 10px（html にブラウザ既定16px × 62.5%。利用者の文字サイズ設定を尊重するため%指定）
     → px 値を 10 で割った値で rem を指定できる（例：14px = 1.4rem、22px = 2.2rem）
   - 基本の文字サイズ・地の文：18px（body に 1.8rem）
   - デスクトップ（1440px）でデザイン画像と一致させ、狭い画面では1カラムに組み替える
   - ブレークポイント：PC 1025px〜／タブレット 769〜1024px／スマートフォン 320〜768px
     スマートフォンでは基本・地の文を 16px にし、ほかの文字サイズも 16/18 の比率で縮小する
   - コントラスト比（WCAG 2.2 AA）：文字 4.5:1 以上、矢印・ハンバーガーの棒 4:1 以上、フォーカス枠 3:1 以上
   ========================================================================== */

/* --------------------------------------------------------------------------
   カラーパレット・共通値
   -------------------------------------------------------------------------- */
:root {
  /* 文字色 */
  --c-text: #333333;
  /* 本文・見出し 白地で 12.6:1 */
  --c-sub: #666666;
  /* 署名（所属）・日付・補足 白地で 5.7:1、フッターの地で 5.3:1 */

  /* アクセント色：コーラルピンク */
  --c-coral: #e0606a;
  /* 見出し上の短い罫線・小見出しの左の線 */
  --c-coral-soft: #f0a0a5;
  /* 罫線の下半分 */
  --c-coral-deep: #b23e4c;
  /* 矢印・タイムラインの丸・ハンバーガーの棒・フォーカスの枠・リンクのホバー・白い文字の地
                                 白地で 5.7:1、カード地で 5.1:1、ホバーの地で 4.1:1 以上 */
  --c-nav-hover: #f8d3d1;
  /* PCメニューのホバー背景（ピンク。文字 #333333 で 9.2:1、矢印で 4.1:1） */

  /* タイトル帯（淡いベージュの単色の地に、ベージュの波とコーラルの線） */
  --c-hero-bg: #fbf6f0;
  /* 以前のグラデーション #fffcf8 → #f5ece2 の中間（#faf4ed）より少し明るい色 */
  --c-hero-glow: #fbf6f0;
  --c-hero-wave-left: #f8f0e7;
  --c-hero-wave-right: #f2e5d8;
  --c-hero-line: #ea8a8f;

  /* カード（淡いベージュ） */
  --c-card-bg: #fbf6f0;
  /* トップページの研究カード・入口ボタンの地（タイトル帯と同じ色） */
  --c-card-to: #f8f1e8;
  --c-card-border: #eaddcf;
  --c-card-border-hover: #c8a88b;
  --c-banner-border: #d4bfa9;
  /* 関連リンクのバナー（仮置き）の点線 */
  --c-line: #e6d8c9;
  /* お知らせの区切り線 */
  --c-tint: #f3e8dc;
  /* ハンバーガーボタンのホバー背景 */

  /* ファイル形式のラベル（ファイル形式の慣習どおり赤・青） */
  --c-pdf: #b3261e;
  /* 白文字で 6.5:1 */
  --c-word: #1d5bbf;
  /* 白文字で 6.4:1 */

  /* レイアウト */
  --gutter: 24px;
  /* 画面端の余白 */
  --content-width: 1200px;
  /* 本文・カード一覧・お知らせの組幅 */
}

/* --------------------------------------------------------------------------
   基本
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  /* = 10px（1rem = 10px） */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  /* 18px：基本フォントサイズ・地の文 */
  line-height: 1.8;
  color: var(--c-text);
  background-color: #ffffff;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* スクリーンリーダー専用（視覚的に非表示） */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 語のまとまりを分割しない（例：「2020年1月」「StudyⅡ:」「CORESⅡ」） */
.u-nowrap {
  white-space: nowrap;
}

/* キーボードフォーカスの可視化（WCAG 2.4.7。白地で 5.7:1、ベージュの地で 4.7:1 以上） */
:focus-visible {
  outline: 3px solid var(--c-coral-deep);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   スキップリンク（キーボードでフォーカスしたときだけ画面に出す。2.4.1）
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 8px 16px;
  background-color: var(--c-coral-deep);
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   サイトヘッダー（全ページ共通）
   - PC・タブレット：サイト名の帯（下層ページのみ）→ グローバルナビ。
     「研究」はホバー・キーボードのフォーカスで4つの研究が下に開く（開閉は CSS、Esc で閉じるのは js/menu.js）
   - スマートフォン（〜768px）：サイト名＋ハンバーガーメニュー（<details>。JavaScript不使用）
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 5;
  /* プルダウンやメニューをページの内容より前面に */
  background-color: #fdf6f0;
  /* 下層ページのサイト名の帯（淡いベージュ。サイト名 #333333 で 11.8:1、ホバーの濃いコーラルで 5.3:1） */
}

/* トップページ：タイトル帯（.hero）がヘッダーの中にあり、PC・タブレットではその下にグローバルナビ */
.site-header--top {
  background-color: var(--c-hero-glow);
}

/* サイト名の帯（サイト名は左寄せ。スマートフォンでは右にハンバーガーボタン） */
.site-bar {
  position: relative;
  /* ハンバーガーのパネルの基準 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter);
}

/* トップページはサイト名がタイトル帯に大きく出ているので、サイト名の帯は出さない
   （スマートフォンではハンバーガーの帯として使う） */
.site-bar--top {
  display: none;
}

.site-name {
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
  word-break: keep-all;
}

.site-name:hover {
  color: var(--c-coral-deep);
}

/* グローバルナビ（PC・タブレット） */
.gnav {
  border-bottom: 1px solid var(--c-card-border);
  background-color: #ffffff;
}

/* 下層ページ：白いサイト名の帯との境目に、ナビの下と同じ色の細い線 */
.site-header:not(.site-header--top)>.gnav {
  border-top: 1px solid var(--c-card-border);
}

.gnav__list {
  display: flex;
  justify-content: center;
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.gnav__item {
  position: relative;
  /* プルダウンの基準 */
  flex: 0 1 280px;
}

.gnav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  padding: 8px 16px;
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* ホバー中・キーボードのフォーカス中：背景をピンクに（「研究」はプルダウンを開いている間もピンクのまま）。
   表示中のページには付けない（現在地は aria-current で伝える） */
.gnav__item:hover>.gnav__link,
.gnav__item:focus-within>.gnav__link {
  background-color: var(--c-nav-hover);
}

/* 「研究」の右の下向き矢印（プルダウンがあることを示す） */
.gnav__chevron {
  flex: none;
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

.gnav__item--has-sub:hover .gnav__chevron,
.gnav__item--has-sub:focus-within .gnav__chevron {
  transform: rotate(180deg);
}

/* 「研究」のプルダウン。閉じているときは透明でクリックできないが、読み上げ・Tab 移動の対象には残す
   （Tab でフォーカスが入ると :focus-within で開くので、見えないものにフォーカスが当たることはない） */
.gnav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 400px;
  max-width: calc(100vw - 2 * var(--gutter));
  border: 1px solid var(--c-card-border);
  border-top: 0;
  background-color: #ffffff;
  box-shadow: 0 12px 24px rgba(51, 51, 51, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gnav__item--has-sub:hover>.gnav__sub,
.gnav__item--has-sub:focus-within>.gnav__sub {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Esc で閉じたとき（js/menu.js が付け外しする。ポインターが離れる・フォーカスが外へ出ると外れる） */
.gnav__item--has-sub.is-dismissed>.gnav__sub {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.gnav__item--has-sub.is-dismissed .gnav__chevron {
  transform: none;
}

.gnav__sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-decoration: none;
  word-break: keep-all;
  /* 研究名は <wbr> の位置で改行 */
  transition: background-color 0.2s ease;
}

.gnav__sub li+li .gnav__sub-link {
  border-top: 1px solid var(--c-card-border);
}

/* ホバー：ナビと同じピンク。表示中の研究にも見た目の印は付けない（現在地は aria-current で伝える） */
.gnav__sub-link:hover {
  background-color: var(--c-nav-hover);
}

.gnav__arrow {
  flex: none;
  width: 16px;
  height: 12px;
  fill: none;
  stroke: var(--c-coral-deep);
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

.gnav__sub-link:hover .gnav__arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   ハンバーガーメニュー（スマートフォンのみ。<details> で開閉するため JavaScript は使わない）
   ボタンは三本の棒だけ。名前「メニュー」は visually-hidden で読み上げに渡す。開くと棒が×になる。
   開いている間は後ろの画面を白で覆い、白い部分（<summary> の疑似要素）を押すと閉じる
   -------------------------------------------------------------------------- */
.menu-nav {
  display: none;
}

.menu__button {
  position: relative;
  z-index: 3;
  /* 重なり順（.site-header の中）：白い幕 → ボタン（×） → パネル */
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  /* 棒の右端を本文エリアの右端にそろえる */
  list-style: none;
  /* 三角の開閉マーカーを消す */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu__button::-webkit-details-marker {
  display: none;
}

.menu__button:hover {
  background-color: var(--c-tint);
}

.menu[open]>.menu__button::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  cursor: pointer;
}

.menu[open]>.menu__button:hover {
  background-color: transparent;
}

/* 棒（ヘッダーの地で 5.3:1、ホバーの地で 4.7:1） */
.menu__icon,
.menu__icon::before,
.menu__icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--c-coral-deep);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu__icon {
  position: relative;
}

.menu__icon::before,
.menu__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu__icon::before {
  top: -8px;
}

.menu__icon::after {
  top: 8px;
}

/* 開いたときは真ん中の棒を消し、上下の棒を×にする */
.menu[open] .menu__icon {
  background-color: transparent;
}

.menu[open] .menu__icon::before {
  transform: translateY(8px) rotate(45deg);
}

.menu[open] .menu__icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* 開いたときのパネル：ヘッダーの下に画面の幅いっぱいで表示（下は白い幕に続くので下の線はなし） */
.menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 4;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  /* 画面の高さが足りないときはパネルの中をスクロール */
  padding: 24px var(--gutter) 40px;
  border-top: 1px solid var(--c-card-border);
  background-color: #ffffff;
}

.menu__list {
  display: grid;
}

/* カテゴリ名（研究／成果・資料）。リンクと同じ 16px で、灰色の文字で区別する（白地で 5.7:1） */
.menu__label {
  margin: 28px 0 4px;
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--c-sub);
}

/* リンクは囲まず、下の区切り線だけ。表示中のページもほかと同じ見た目（現在地は aria-current で伝える） */
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
  word-break: keep-all;
  /* 研究名は <wbr> の位置で改行 */
}

/* 右向きの矢印：濃いコーラルの丸（白地で 5.7:1）の中に白い矢印（5.7:1）。ページ内ジャンプのアイコンと同じ形 */
.menu__arrow {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 9px;
  border-radius: 50%;
  background-color: var(--c-coral-deep);
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.1;
  /* 縮小して描くため、線の太さをほかの丸いアイコン（約 1.5px）にそろえる */
  transition: transform 0.2s ease;
}

/* ホバー：色は変えず、丸い矢印を少し右へ */
.menu__link:hover .menu__arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   タイトル帯（トップ .hero・下層ページ .page-intro。淡いベージュの単色に波の装飾）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px var(--gutter);
  background-color: var(--c-hero-bg);
}

/* 波の装飾（タイトル帯の全面に敷く。フォーカス可能な要素は含まない） */
.hero__waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.hero__wave--glow {
  fill: var(--c-hero-glow);
}

.hero__wave--left {
  fill: var(--c-hero-wave-left);
}

.hero__wave--right {
  fill: var(--c-hero-wave-right);
}

.hero__line {
  fill: none;
  stroke: var(--c-hero-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  /* 伸縮しても1pxの細線を保つ */
}

.hero__line--left {
  stroke-opacity: 0.55;
}

.hero__inner {
  position: relative;
  /* 波より前面に */
  width: 100%;
  max-width: var(--content-width);
}

.hero__title {
  font-size: 4.8rem;
  /* 48px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  word-break: keep-all;
  /* <wbr> の位置（語句の切れ目）でのみ改行 */
}

/* 下層ページのタイトル帯（ページタイトルのみ。文字は地で 11.8:1、波のいちばん濃いところ #f2e5d8 でも 10.2:1） */
.page-intro {
  position: relative;
  padding: 40px var(--gutter);
  background-color: var(--c-hero-bg);
}

/* 波の線は右側だけ（トップのタイトル帯は両方とも表示） */
.page-intro .hero__line--left {
  display: none;
}

/* 本文と左端をそろえる */
.page-intro__inner {
  position: relative;
  /* 波より前面に */
  max-width: var(--content-width);
  margin: 0 auto;
}

.page-title {
  font-size: 3.6rem;
  /* 36px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  word-break: keep-all;
  /* <wbr> の位置（語句の切れ目）で改行 */
}

/* --------------------------------------------------------------------------
   研究代表者のメッセージ
   -------------------------------------------------------------------------- */
.message {
  padding: 96px var(--gutter) 0;
}

.message__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* 見出し（中央揃え。「お知らせ」も同じ） */
.message__title,
.news__title {
  font-size: 2.8rem;
  /* 28px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
}

/* 見出し上の短い罫線（装飾） */
.message__title::before,
.news__title::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto 33px;
  background: linear-gradient(to bottom, var(--c-coral) 50%, var(--c-coral-soft) 50%);
}

.message__body {
  margin-top: 41px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.message__body p+p {
  margin-top: 1em;
}

/* 署名：組幅の右端に寄せ、行頭はそろえる */
.signature {
  width: fit-content;
  max-width: 100%;
  margin: 31px 0 0 auto;
  letter-spacing: 0.04em;
}

.signature__affiliation {
  line-height: 1.7;
  /* 30.6px */
  color: var(--c-sub);
  word-break: keep-all;
  /* 狭い画面では <wbr> の位置で改行 */
}

.signature__name {
  font-size: 2.4rem;
  /* 24px */
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.08em;
  text-align: right;
}

/* --------------------------------------------------------------------------
   研究一覧（カード）
   -------------------------------------------------------------------------- */
/* 下の余白はなし：続く入口ボタン（.entries）との間隔はカード同士の間隔と同じにする */
.research {
  padding: 70px var(--gutter) 0;
}

/* 余白・寸法の px 値はデザイン画像（1440px）の実測値 */
.research__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  /* 4枚とも同じ高さ（いちばん高いカードに合わせる）。1列表示でも同じ */
  gap: 23px 24px;
  max-width: var(--content-width);
  margin: 0 auto;
}

.research__item {
  display: flex;
  /* カードを行の高さいっぱいに伸ばす */
}

/* タイトルはカードの上下中央に置く（4枚とも同じ高さなので、行数が少ないカードでも上に寄らない）。
   矢印はタイトルの右側の余白（padding-right）に置き、下に矢印用の余白を取らずに高さを抑える */
.research-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 32px 64px 32px 40px;
  /* 左右の合計を 104px 以内にし、デザイン画像と同じ位置で改行させる */
  border: 1px solid var(--c-card-border-hover);
  /* 茶色の枠で輪郭をはっきりさせる（白地で 2.2:1） */
  background-color: var(--c-card-bg);
  /* 淡いベージュの単色（文字 #333333 で 11.8:1、矢印で 5.3:1） */
  text-decoration: none;
  transition: border-color 0.2s ease;
}

/* 右下のやわらかな波（装飾。色 #fbe1df は背景SVG内に記述。矢印との比 4.6:1） */
.research-card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 228px;
  max-width: 100%;
  height: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 228 96' preserveAspectRatio='none'%3E%3Cpath d='M0 96C64.8 82.1 97.8 86.2 228 0V96Z' fill='%23fbe1df'/%3E%3C/svg%3E") no-repeat right bottom / 100% 100%;
  pointer-events: none;
}

.research-card__title {
  position: relative;
  /* 波より前面に */
  display: block;
  font-size: 2.2rem;
  /* 22px */
  font-weight: 700;
  line-height: 1.7273;
  /* 38px */
  letter-spacing: 0.04em;
  word-break: keep-all;
  /* <wbr> の位置（語句の切れ目）で改行。収まらない場合は body の overflow-wrap で折り返す */
}

/* 縦位置：タイトルと同じくカードの上下中央 */
.research-card__arrow {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 24px;
  height: 16px;
  fill: none;
  stroke: var(--c-coral-deep);
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

/* ホバー・フォーカス時：枠線をコーラルにする（フォーカス時は :focus-visible の枠線も表示） */
.research-card:hover,
.research-card:focus-visible {
  border-color: var(--c-coral);
}

.research-card:hover .research-card__arrow {
  transform: translate(4px, -50%);
}

/* --------------------------------------------------------------------------
   論文・学会発表／関連資料への入口ボタン（内容は各下層ページに掲載）
   -------------------------------------------------------------------------- */
/* 上の余白＝研究カードの行の間隔（23px）。ボタン同士の間隔もカードの列の間隔（24px）と同じ */
.entries {
  padding: 23px var(--gutter) 112px;
}

.entries__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--content-width);
  margin: 0 auto;
}

.entries__item {
  display: flex;
  /* ボタンの高さを行内でそろえる */
}

.entry {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 112px;
  padding: 24px 28px 24px 40px;
  /* 文字と矢印の位置を研究カードにそろえる */
  border: 1px solid var(--c-card-border-hover);
  /* 枠と地は研究カードと同じ */
  background-color: var(--c-card-bg);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

/* 研究カードと同じ右下のやわらかな波（装飾） */
.entry::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 180px;
  max-width: 100%;
  height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 228 96' preserveAspectRatio='none'%3E%3Cpath d='M0 96C64.8 82.1 97.8 86.2 228 0V96Z' fill='%23fbe1df'/%3E%3C/svg%3E") no-repeat right bottom / 100% 100%;
  pointer-events: none;
}

.entry__label {
  position: relative;
  /* 波より前面に */
  font-size: 2.2rem;
  /* 22px（研究カードのタイトルと同じ） */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.entry__arrow {
  position: relative;
  /* 波より前面に */
  flex: none;
  width: 24px;
  height: 16px;
  fill: none;
  stroke: var(--c-coral-deep);
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

/* ホバー・フォーカス時：研究カードと同じく枠線をコーラルにし、矢印を右へ */
.entry:hover,
.entry:focus-visible {
  border-color: var(--c-coral);
}

.entry:hover .entry__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   お知らせ（トップは新しい順に5件＋一覧へのボタン。一覧は news/index.html、記事は news/投稿日-連番.html）
   -------------------------------------------------------------------------- */
.news {
  padding: 0 var(--gutter) 112px;
}

.news__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

.news__title+.news-list {
  margin-top: 48px;
}

.news-list {
  border-top: 1px solid var(--c-line);
}

/* 1件ずつ行全体がリンク：日付／タイトル／矢印 */
.news-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 4px 32px;
  padding: 24px 28px 24px 24px;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
}

.news-item__date {
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-sub);
}

.news-item__title {
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}

.news-item__arrow {
  width: 20px;
  height: 14px;
  fill: none;
  stroke: var(--c-coral-deep);
  stroke-width: 1.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ホバー：タイトルと矢印を半透明にし（文字 5.7:1、矢印 3.6:1 を保つ）、矢印を大きく右へ動かす（右の余白 28px の中で）。
   日付は半透明にすると 3.4:1 になり AA を満たさないため、そのまま */
.news-item:hover .news-item__title,
.news-item:hover .news-item__arrow {
  opacity: 0.75;
}

.news-item:hover .news-item__arrow {
  transform: translateX(10px);
}

/* --------------------------------------------------------------------------
   一覧へのリンク（お知らせ一覧へ）
   -------------------------------------------------------------------------- */
/* お知らせの一覧の下、右端にそろえて置く */
.more {
  margin-top: 40px;
  text-align: right;
}

/* 背景・枠線なしの文字（太字にしない）＋濃いコーラルの丸い矢印 */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  font-size: 1.8rem;
  /* 18px */
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* 丸（白地で 5.7:1）の中に白い矢印（5.7:1） */
.more-link__circle {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--c-coral-deep);
  transition: transform 0.2s ease;
}

.more-link__arrow {
  width: 18px;
  height: 12px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
}

/* ホバー：全体を半透明にし（文字 5.7:1、丸と白い矢印 3.6:1 を保つ）、丸い矢印ごと大きく右へ動かす */
.more-link:hover {
  opacity: 0.75;
}

.more-link:hover .more-link__circle {
  transform: translateX(8px);
}

/* --------------------------------------------------------------------------
   関連リンク（バナーは仮置き：点線の枠に関連サイト名）
   -------------------------------------------------------------------------- */
.related {
  padding: 0 var(--gutter) 112px;
}

/* 見出し：「研究代表者のメッセージ」と同じく中央揃え・上に短い罫線 */
.related__title {
  font-size: 2.2rem;
  /* 22px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
}

.related__title::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto 24px;
  background: linear-gradient(to bottom, var(--c-coral) 50%, var(--c-coral-soft) 50%);
}

/* 1列 → 2列（600px〜）→ 4列（PC：1025px〜） */
.related-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: var(--content-width);
  margin: 32px auto 0;
}

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  height: 100%;
  padding: 8px 12px;
  border: 1px dashed var(--c-banner-border);
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.banner__name {
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ホバー：研究カードと同じく枠線を濃くする */
.banner:hover {
  border-color: var(--c-card-border-hover);
}

/* --------------------------------------------------------------------------
   下層ページ：本文エリア
   -------------------------------------------------------------------------- */
.page-body {
  padding: 72px var(--gutter) 112px;
}

.page-body__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* 地の文 */
.prose p {
  line-height: 2;
  letter-spacing: 0.04em;
}

.prose p+p {
  margin-top: 1em;
}

/* 補足（PDF 閲覧の案内など） */
.note {
  margin-top: 16px;
  font-size: 1.6rem;
  /* 16px */
  line-height: 1.8;
  color: var(--c-sub);
}

/* --------------------------------------------------------------------------
   下層ページ：このページの目次
   -------------------------------------------------------------------------- */
.toc {
  margin-bottom: 96px;
}

/* PC・タブレット：横に並べ、項目の間は 64px（入りきらないときは折り返す） */
.toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 64px;
}

/* 背景・枠線なし。丸い矢印は文字のすぐ右に置く（文字 #333333 は白地で 12.6:1） */
.toc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 52px;
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* 下向きの矢印（ページ内の移動を示す）：濃いコーラルの丸（白地との比 5.7:1）の中に白い矢印（5.7:1） */
.toc__icon {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--c-coral-deep);
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.25;
  /* 縮小して描くため、線の太さをダウンロードのアイコン（1.5px）に近づける */
  transition: transform 0.2s ease;
}

/* ホバー：ボタン自体は変えず、丸いアイコンを少し下へ（ダウンロードボタンと同じ） */
.toc__link:hover .toc__icon {
  transform: translateY(3px);
}

/* --------------------------------------------------------------------------
   下層ページ：セクション見出し（h2：左寄せ・上に短い罫線）・小見出し（h3）・項目見出し（h4）
   -------------------------------------------------------------------------- */
.sub-section+.sub-section {
  margin-top: 112px;
}

.sub-title {
  font-size: 2.8rem;
  /* 28px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.sub-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-bottom: 24px;
  background: linear-gradient(to bottom, var(--c-coral) 50%, var(--c-coral-soft) 50%);
}

.sub-title+* {
  margin-top: 32px;
}

.block-title {
  margin-top: 64px;
  padding-left: 16px;
  border-left: 4px solid var(--c-coral);
  font-size: 2.4rem;
  /* 24px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* セクション見出しの直後の小見出し（例：研究概要・スケジュール → 研究概要） */
.sub-title+.block-title {
  margin-top: 32px;
}

.block-title+* {
  margin-top: 24px;
}

/* 項目見出し（h4。例：八尾市新型コロナウイルス感染症研究とは） */
.report__heading {
  display: flex;
  align-items: flex-start;
  /* 2行になっても四角は1行目に */
  gap: 12px;
  margin-top: 48px;
  font-size: 2rem;
  /* 20px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 項目見出しの頭の四角（装飾） */
.report__heading::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: calc(0.75em - 5px);
  /* 1行目の中央（行の高さ 1.5em の半分 − 四角の半分） */
  background-color: var(--c-coral-deep);
}

.report__heading+* {
  margin-top: 16px;
}

/* 小見出し（h3）の直後の h4（例：研究概要 → 八尾市新型コロナウイルス感染症研究とは） */
.block-title+.report__heading {
  margin-top: 24px;
}

/* 項目名と内容（例：対象者） */
.term-list dt {
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.term-list dd {
  margin-top: 4px;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   下層ページ：スケジュール（縦のタイムライン）
   -------------------------------------------------------------------------- */
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  /* 期間（例：2024年10月23日〜2025年1月31日）は「〜」の後で2行に */
  gap: 0 48px;
  padding-bottom: 40px;
}

/* 縦線と丸印（装飾） */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: -14px;
  left: 223px;
  /* 200 + 48 / 2 - 1 */
  width: 2px;
  background-color: var(--c-card-border);
}

.timeline__item:last-child::before {
  display: none;
}

.timeline__item::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 217px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--c-coral-deep);
  border-radius: 50%;
  background-color: #ffffff;
}

.timeline__date {
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.timeline__title {
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   下層ページ：ダウンロードボタン
   -------------------------------------------------------------------------- */
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.download {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  min-height: 88px;
  padding: 16px 20px;
  border: 1px solid var(--c-card-border-hover);
  background-color: #fdf6f0;
  /* 淡いベージュ（資料名 #333333 で 11.8:1、形式・サイズ #666666 で 5.4:1） */
  text-decoration: none;
}

/* ファイル形式のラベル（同じ情報を .download__meta の文字でも示す） */
.download__type {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 1.4rem;
  /* 14px */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.download__type--pdf {
  background-color: var(--c-pdf);
}

.download__type--word {
  background-color: var(--c-word);
}

.download__body {
  flex: 1;
  min-width: 0;
}

.download__name {
  display: block;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.download__meta {
  display: block;
  margin-top: 2px;
  font-size: 1.4rem;
  /* 14px */
  line-height: 1.5;
  color: var(--c-sub);
}

/* ダウンロードのアイコン：濃いコーラルの丸（地との比 5.3:1）の中に白い矢印（5.7:1） */
.download__icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background-color: var(--c-coral-deep);
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

/* ホバー：ボタン自体は動かさず、丸いアイコンを少し下へ */
.download:hover .download__icon {
  transform: translateY(3px);
}

/* --------------------------------------------------------------------------
   下層ページ：お知らせの記事（news/20261020-001.html など。タイトル帯は「お知らせ」、記事の題は h2）
   -------------------------------------------------------------------------- */
/* 日付と記事の題。下に区切り線 */
.article__header {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--c-line);
}

.article__date {
  font-size: 1.6rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-sub);
}

.article__title {
  margin-top: 8px;
  font-size: 2.8rem;
  /* 28px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.article__body {
  margin-top: 40px;
}

/* 本文の下：区切り線の下、右端に「お知らせ一覧へ」 */
.article__footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}

.article__footer .more {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   フッター（全ページ共通。淡いベージュの地で、ページの終わりを示す）
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 28px var(--gutter);
  border-top: 1px solid var(--c-card-border);
  background-color: var(--c-hero-bg);
  /* タイトル帯と同じ淡いベージュ（著作権表示の #666666 で 5.3:1） */
}

.site-footer__copyright {
  max-width: var(--content-width);
  margin: 0 auto;
  font-size: 1.4rem;
  /* 14px */
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-sub);
  text-align: center;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   - PC：1025px〜（デザイン画像は 1440px）
   - タブレット：769〜1024px（文字サイズは PC と同じ）
   - スマートフォン：320〜768px（基本・地の文 16px）
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1025px) {
  .related-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* 1行に収まる広い画面：デザイン上の視覚的な中心（わずかに右寄り）に合わせる微調整 */
@media (min-width: 1060px) {
  .hero__title {
    padding-left: 0.25em;
  }
}

/* PC でカード一覧がデザイン幅（1200px）未満：2カラムのままカードの余白を詰める */
@media (max-width: 1247px) {
  .research-card {
    padding: 32px 64px 32px 36px;
  }

  .entry {
    padding-left: 36px;
  }
}

/* タブレット：カードを1カラムに（2カラムでは 769px 付近でタイトルが5〜6行に細切れになるため） */
@media (max-width: 1024px) {
  .news-item {
    grid-template-columns: 160px minmax(0, 1fr) 20px;
  }

  .research__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .research-card {
    padding: 28px 64px 28px 32px;
  }

  /* カード同士の間隔（16px）に合わせる */
  .entries {
    padding-top: 16px;
  }

  .entries__list {
    gap: 16px;
  }

  .entry {
    padding: 24px 28px 24px 32px;
  }

  .timeline__item {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 0 40px;
  }

  .timeline__item::before {
    left: 195px;
    /* 176 + 40 / 2 - 1 */
  }

  .timeline__item::after {
    left: 189px;
  }
}

/* スマートフォン：基本・地の文は 16px。ほかの文字サイズも PC の 16/18（約0.89倍）に縮小 */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
  }

  body {
    font-size: 1.6rem;
    /* 16px：基本フォントサイズ・地の文 */
  }

  /* 開いている間は後ろのページをスクロールさせない（白い幕の上でメニューが流れて消えないように） */
  html:has(.menu[open]) {
    overflow: hidden;
  }

  /* ヘッダー：グローバルナビの代わりにハンバーガーメニュー */
  .site-bar {
    padding-block: 6px;
  }

  /* 下層ページ：白いヘッダーの下に細い線を引いてタイトル帯と区切る */
  .site-header:not(.site-header--top) {
    border-bottom: 1px solid var(--c-card-border);
  }

  /* トップページ：ハンバーガーの帯 → タイトル帯 */
  .site-bar--top {
    display: flex;
    justify-content: flex-end;
  }

  /* 下層ページのサイト名を、メニューを開いたときの白い幕より前面に（トップページはサイト名なし） */
  .site-name {
    position: relative;
    z-index: 4;
  }

  .gnav {
    display: none;
  }

  .menu-nav {
    display: block;
  }

  .hero {
    min-height: 160px;
  }

  /* 768px で 42px（PC 48px の約0.89倍）→ 320px で 28px。1行の文字数が少ないため画面幅に合わせて縮小する。
     最小 28px は h2（24px）・氏名（21px）より大きい。最大/最小の比を 1.5 に抑え、
     ページのズームで十分拡大されるようにする（1.4.4） */
  .hero__title {
    font-size: clamp(2.8rem, calc(1.8rem + 3.125vw), 4.2rem);
    letter-spacing: 0.02em;
  }

  .page-intro {
    padding-block: 28px;
  }

  /* 768px で 32px（PC 36px の約0.89倍）→ 320px で 25px。長い研究名の行数を抑える */
  .page-title {
    font-size: clamp(2.5rem, calc(2rem + 1.5625vw), 3.2rem);
  }

  .message {
    padding-top: 64px;
  }

  .message__title,
  .news__title {
    font-size: 2.4rem;
    /* 24px（PC 28px） */
    letter-spacing: 0.04em;
  }

  .message__title::before,
  .news__title::before {
    margin-bottom: 24px;
  }

  .message__body {
    margin-top: 32px;
  }

  .signature__name {
    font-size: 2.1rem;
    /* 21px（PC 24px） */
  }

  .research {
    padding-top: 56px;
  }

  /* スマートフォンでは組幅を確保するため、矢印はタイトルの下（右下）に置く。
     タイトルは矢印の分を除いた領域の上下中央 */
  .research-card {
    padding: 24px 20px 60px;
  }

  .research-card__title {
    font-size: 2rem;
    /* 20px（PC 22px） */
    line-height: 1.7;
  }

  .research-card__arrow {
    top: auto;
    right: 20px;
    bottom: 24px;
    transform: none;
  }

  .research-card:hover .research-card__arrow {
    transform: translateX(4px);
  }

  .research-card::before {
    width: 160px;
    height: 60px;
  }

  /* 入口ボタンは1列に（間隔はカード同士と同じ 16px） */
  .entries {
    padding-bottom: 80px;
  }

  .entries__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry {
    min-height: 80px;
    padding: 20px;
  }

  .entry__label {
    font-size: 2rem;
    /* 20px（PC 22px） */
  }

  .entry::before {
    width: 140px;
    height: 52px;
  }

  /* お知らせ：日付をタイトルの上に置き、矢印は右端に */
  .news {
    padding-bottom: 80px;
  }

  .news__title+.news-list {
    margin-top: 32px;
  }

  .news-item {
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-areas:
      "date  arrow"
      "title arrow";
    gap: 2px 16px;
    padding: 16px 8px;
  }

  .news-item__date {
    grid-area: date;
    font-size: 1.4rem;
    /* 14px（PC 16px） */
  }

  .news-item__title {
    grid-area: title;
  }

  .news-item__arrow {
    grid-area: arrow;
  }

  /* 右の余白が 8px なので、動く幅もその中に収める */
  .news-item:hover .news-item__arrow {
    transform: translateX(8px);
  }

  .more {
    margin-top: 32px;
  }

  .more-link {
    gap: 12px;
    min-height: 44px;
    font-size: 1.6rem;
    /* 16px（PC 18px） */
  }

  .more-link__circle {
    width: 32px;
    height: 32px;
  }

  .related {
    padding-bottom: 80px;
  }

  .related__title {
    font-size: 2rem;
    /* 20px（PC 22px） */
  }

  .banner__name {
    font-size: 1.4rem;
    /* 14px（PC 16px） */
  }

  /* 下層ページ */
  .page-body {
    padding: 48px var(--gutter) 80px;
  }

  .note {
    font-size: 1.4rem;
    /* 14px（PC 16px） */
  }

  .toc {
    margin-bottom: 64px;
  }

  .toc__list {
    flex-direction: column;
    gap: 8px;
  }

  .toc__link {
    min-height: 48px;
    font-size: 1.4rem;
    /* 14px（PC 16px） */
  }

  .sub-section+.sub-section {
    margin-top: 80px;
  }

  .sub-title {
    font-size: 2.4rem;
    /* 24px（PC 28px） */
    letter-spacing: 0.04em;
  }

  .sub-title::before {
    margin-bottom: 16px;
  }

  .sub-title+* {
    margin-top: 24px;
  }

  .block-title {
    margin-top: 48px;
    font-size: 2.1rem;
    /* 21px（PC 24px） */
  }

  .block-title+* {
    margin-top: 16px;
  }

  .report__heading {
    margin-top: 40px;
    font-size: 1.8rem;
    /* 18px（PC 20px） */
  }

  /* タイムライン：日付を見出しの上に置き、線を左端に */
  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 32px 32px;
  }

  .timeline__item::before {
    left: 6px;
  }

  .timeline__item::after {
    left: 0;
  }

  .download {
    min-height: 76px;
    padding: 14px 16px;
  }

  .download__type {
    width: 44px;
    height: 44px;
  }

  .download__type,
  .download__meta {
    font-size: 1.2rem;
    /* 12px（PC 14px） */
  }

  .article__header {
    padding-bottom: 24px;
  }

  .article__date {
    font-size: 1.4rem;
    /* 14px（PC 16px） */
  }

  .article__title {
    font-size: 2.4rem;
    /* 24px（PC 28px） */
  }

  .article__body {
    margin-top: 32px;
  }

  .article__footer {
    margin-top: 48px;
  }

  .site-footer {
    padding-block: 24px;
  }

  .site-footer__copyright {
    font-size: 1.2rem;
    /* 12px（PC 14px） */
  }
}

@media (max-width: 374px) {
  :root {
    --gutter: 16px;
  }
}

/* --------------------------------------------------------------------------
   強制カラーモード（Windows ハイコントラスト）
   装飾の淡い色面が黒背景の上で目立たないよう非表示にし、線はシステム色にする
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {

  .hero__waves,
  .research-card::before,
  .entry::before {
    display: none;
  }

  .research-card__arrow,
  .entry__arrow,
  .news-item__arrow,
  .gnav__chevron,
  .gnav__arrow,
  .menu__arrow,
  .toc__icon,
  .download__icon,
  .more-link__arrow {
    stroke: currentColor;
    /* リンクの文字色（LinkText）に合わせる（丸いアイコンの地は画面の地の色になるため、白い矢印も描き直す） */
  }

  .message__title::before,
  .news__title::before,
  .related__title::before,
  .sub-title::before,
  .report__heading::before,
  .timeline__item::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .download__type {
    border: 1px solid CanvasText;
  }

  /* ハンバーガーの棒（背景色で描いているため、システム色で描き直す） */
  .menu__icon,
  .menu__icon::before,
  .menu__icon::after {
    forced-color-adjust: none;
    background: ButtonText;
  }

  .menu[open] .menu__icon {
    background: transparent;
  }

  .menu[open]>.menu__button::before {
    background-color: Canvas;
    /* 開いたメニューの後ろは画面の地の色で覆う（押すと閉じる動きはそのまま） */
  }
}

/* --------------------------------------------------------------------------
   動きを減らす設定の尊重
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}