@charset "UTF-8";

/* ============================================================================
   このファイルは「WEBサイトの見た目」を決めるものです。
   文章を修正したい場合は index.html を編集してください。
   色や文字の大きさを変えたいときは、すぐ下の「1. 色と文字の設定」だけを
   書き換えると、サイト全体にまとめて反映されます。

   【もくじ】
     1. 色と文字の設定  ← 変更する場合はこの部分のみにしてください。
     2. 土台
     3. 共通の部品（見出し・本文・ボタン・箇条書き・表）
     4. ヘッダーとフッター
     5. トップ（ヒーロー）
     6. 各セクションの部品
     7. 画面幅ごとの調整
     8. 印刷したときの調整
   ========================================================================= */


/* ============================================================================
   1. 色と文字の設定
   ========================================================================= */
:root {
  /* --- 色 ---------------------------------------------------------------
     色は「#1e293b」のような6文字の番号で指定します。
     「カラーコード」で検索すると、番号を調べられます。 */
  --navy:       #1e293b;   /* ディープネイビー（見出し・フッター） */
  --ink:        #0f172a;   /* 本文の文字色（濃いスレート） */
  --accent:     #2563eb;   /* アクセントのインディゴブルー（リンク・強調） */
  --accent-dk:  #1d4ed8;   /* アクセントの濃い版（マウスを乗せたとき） */
  --accent-pl:  #eff6ff;   /* アクセントのごく薄い版（注意書きの背景） */

  --sub:        #475569;   /* 補足の文字色 */
  --white:      #ffffff;
  --soft:       #f8fafc;   /* ごく薄いグレー（1つおきのセクション背景） */
  --soft2:      #f1f5f9;   /* 薄いグレー（表の見出しなど） */

  --line:       #e2e8f0;   /* 繊細な罫線 */
  --line-dk:    #cbd5e1;   /* 少し濃い罫線 */
  --focus:      #f59e0b;   /* キーボード操作中の位置を示す枠 */

  /* --- 影と角丸 --------------------------------------------------------- */
  --shadow:     0 4px 20px -2px rgba(15, 23, 42, .06);
  --shadow-up:  0 12px 28px -8px rgba(15, 23, 42, .16);
  --radius:     12px;
  --radius-sm:  8px;

  /* --- 文字 -------------------------------------------------------------
     端末に最初から入っている書体だけを使います（外部からの読み込みなし） */
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic",
          "Meiryo", "Segoe UI", Arial, sans-serif;
  --size: 16px;            /* 本文の文字の大きさ */
  --lh:   1.85;            /* 行と行の間隔 */

  /* --- 余白と幅 --------------------------------------------------------- */
  --s:  8px;
  --m:  16px;
  --l:  24px;
  --xl: 40px;
  --2xl: 64px;
  --section: 112px;        /* セクションの上下の余白 */
  --width: 940px;          /* 本文の横幅の上限（1行の長さ） */
}


/* ============================================================================
   2. 土台
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 96px;   /* ページ内リンクで見出しが隠れないように */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--size);
  line-height: var(--lh);
  line-break: strict;          /* 句読点が行頭に来ないように */
  overflow-wrap: break-word;
  font-feature-settings: "palt";   /* 日本語の字間を自然に詰めます */
}

img { max-width: 100%; height: auto; vertical-align: middle; }
/* ブラウザが自動で付ける余白を打ち消します（箇条書きの左の字下げなど） */
p, dl, h1, h2, h3, h4, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--accent); text-underline-offset: .2em; transition: color .2s ease; }
a:hover { color: var(--accent-dk); }

/* キーボードで操作する方に現在位置を示します。消さないでください */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* 画面最上部の「本文へ移動」。ふだんは隠れています */
.skip-link {
  position: absolute; top: -100px; left: var(--m); z-index: 100;
  padding: var(--s) var(--l);
  background: var(--accent); color: var(--white);
  text-decoration: none; border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--m); }


/* ============================================================================
   3. 共通の部品
   ========================================================================= */

/* --- 中央に寄せる箱。すべての内容はこの中に入ります --------------------- */
.container { width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: var(--l); }

/* --- セクション（大きな区切り） ----------------------------------------- */
.section        { padding-block: var(--section); }
.section--cream { background: var(--soft); }          /* 薄いグレー背景 */
.section--blue  { background: var(--navy); color: var(--white); }  /* 濃色背景 */
.section--blue a { color: var(--white); }

/* --- 見出し --------------------------------------------------------------
   番号 → 大見出し → 短いアクセント線、という順で情報の階層を示します */
.num {
  margin-bottom: var(--s);
  color: var(--accent); font-size: 20px; font-weight: 700; letter-spacing: .16em;
}
.section--blue .num { color: #93c5fd; }

.h2 {
  margin-bottom: var(--2xl);
  color: var(--navy); font-weight: 700; line-height: 1.35; letter-spacing: -.02em;
  font-size: clamp(28px, 1.4rem + 1.6vw, 40px);
}
.h2::after {   /* 見出しの下に置く短いアクセント線 */
  content: ""; display: block; width: 56px; height: 4px; margin-top: var(--l);
  background: var(--accent); border-radius: 2px;
}
.section--blue .h2 { color: var(--white); }
.section--blue .h2::after { background: #60a5fa; }

.h3 {
  position: relative;
  margin: var(--2xl) 0 var(--l); padding-left: var(--m);
  color: var(--navy); font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em;
}
.h3::before {   /* 見出しの左に置く小さなアクセント線 */
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em;
  width: 4px; background: var(--accent); border-radius: 2px;
}
.h3--tight { margin-top: var(--xl); }   /* 大見出しのすぐ下で使うとき */

/* --- 本文 ---------------------------------------------------------------- */
.lead { margin-bottom: var(--l); font-size: 18px; line-height: 1.9; }
.text { margin-bottom: var(--l); }
.lead:last-child, .text:last-child { margin-bottom: 0; }
.note { margin-top: var(--m); color: var(--sub); font-size: 15px; }

/* 中身を中央そろえにします（ボタンを真ん中に置きたいときなど）
   使い方：<p class="center"> … </p> のように、囲んでいるタグに付けます */
.center { text-align: center; }

/* 見落としては困る注意書き */
.notice {
  margin-top: var(--l); padding: var(--l);
  background: var(--accent-pl); border: 1px solid #bfdbfe;
  border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
  color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.8;
}

/* --- ボタン -------------------------------------------------------------- */
.buttons { display: flex; flex-wrap: wrap; gap: var(--m); margin-top: var(--2xl); }
.button {
  display: inline-block; padding: 14px 32px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 700; text-align: center; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.button--fill { background: var(--white); color: var(--navy); box-shadow: var(--shadow); }
.button--fill:hover { background: var(--white); color: var(--accent-dk); transform: translateY(-2px); box-shadow: var(--shadow-up); }
.button--line { background: rgba(255,255,255,.06); color: var(--white); border-color: rgba(255,255,255,.45); }
.button--line:hover { background: rgba(255,255,255,.16); border-color: var(--white); color: var(--white); transform: translateY(-2px); }

/* --- 横に並べる枠（画面が狭いと自動的に1列になります） ------------------- */
.grid { display: grid; gap: var(--m); grid-template-columns: 1fr; }

/* --- 箇条書き ------------------------------------------------------------
   list        … 行頭に「・」が付く一覧
   list--2col  … 画面が広いとき2列に分かれる
   list--check … 行頭が「✓」になる
   list--plain … 罫線も記号も付かない                                        */
/* 行頭の記号と本文を横に並べ、2行目以降も本文の左端で揃うようにします
   （記号の位置がずれないよう、絶対位置ではなく flex で組んでいます） */
.list { list-style: none; }
.list > li {
  display: flex; align-items: flex-start; gap: .7em;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.75;
}
.list > li::before {   /* 行頭の小さな丸 */
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; margin-top: .67em;   /* 1行目の中心に合わせます */
  border-radius: 50%; background: var(--accent);
}
.list--2col { display: grid; grid-template-columns: 1fr; gap: 0 var(--xl); }

.list--check > li::before {   /* 行頭を「✓」に差し替え */
  content: "✓"; width: auto; height: auto; margin-top: 0;
  background: none; color: var(--accent); font-weight: 700; line-height: inherit;
}
.list--plain > li { padding: 4px 0; border-bottom: none; }

/* --- 用語と説明の組 ------------------------------------------------------ */
.deflist {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.deflist > div {
  display: grid; grid-template-columns: 1fr; gap: var(--s);
  padding: var(--l); border-bottom: 1px solid var(--line);
}
.deflist > div:last-child { border-bottom: none; }
.deflist dt { color: var(--navy); font-weight: 700; }
.deflist dd { color: var(--sub); }

/* --- 表（画面が狭いときは表だけ横スクロールします） --------------------- */
.table-wrap {
  overflow-x: auto; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.table { width: 100%; min-width: 560px; border-collapse: collapse; }
.table th, .table td {
  padding: var(--m) var(--l); border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.table thead th {
  background: var(--soft2); border-bottom: 2px solid var(--accent);
  color: var(--navy); font-size: 14px; letter-spacing: .04em; white-space: nowrap;
}
.table tbody th { width: 13em; color: var(--navy); font-weight: 700; }
.table tbody td { color: var(--sub); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: none; }


/* ============================================================================
   4. ヘッダーとフッター
   ========================================================================= */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s) var(--l); padding-block: var(--m);
}
.header__title { text-decoration: none; color: var(--navy); }
.header__name { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.header__sub  { display: block; color: var(--sub); font-size: 12px; line-height: 1.5; }

.nav ul { display: flex; flex-wrap: wrap; gap: 4px var(--l); list-style: none; }
.nav a {
  position: relative; display: inline-block; padding-block: 6px;
  color: var(--navy); font-size: 15px; text-decoration: none;
}
.nav a::after {   /* マウスを乗せたときに下から伸びる線 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 1px;
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a:hover { color: var(--accent); }
.nav a:hover::after { transform: scaleX(1); }

.footer { background: var(--ink); color: var(--white); }
.footer .container { padding-block: var(--2xl); }
.footer__name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.footer__sub { margin-bottom: var(--xl); color: rgba(255,255,255,.65); font-size: 13px; }
.footer ul { display: flex; flex-wrap: wrap; gap: var(--s) var(--l); list-style: none; }
.footer a { color: rgba(255,255,255,.9); font-size: 15px; text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: .3em; }
.footer__copyright {
  padding-block: var(--l); border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: .02em;
}


/* ============================================================================
   5. トップ（ヒーロー）
   ========================================================================= */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #1e3a8a 100%);
  color: var(--white);
}
.hero::after {   
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,.28) 0%, rgba(96,165,250,0) 70%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 8vw, 96px); /* 従来の約半分のサイズに縮小 */
}
.hero__label {
  display: inline-block; margin-bottom: var(--l); padding: 6px 18px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
}
/* タイトル全体の行高や余白 */
.hero__title {
  margin-bottom: var(--l);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}
/* 上の行 */
.hero__title-sub {
  display: block;
  font-size: clamp(18px, 1.1rem + 1vw, 26px);
  color: rgba(255,255,255,.88);
  margin-bottom: var(--s);
}
/* 下の行 */
.hero__title-main {
  display: block;
  font-size: clamp(32px, 1.4rem + 3.2vw, 52px);
  color: rgba(255,255,255,.88);
}
.hero .buttons {
  margin-top: var(--xl); /* var(--2xl) から var(--m) [16px] や var(--l) [24px] に縮小 */
}
.hero .lead { color: rgba(255,255,255,.88); }


/* ============================================================================
   6. 各セクションの部品
   ========================================================================= */

/* --- カード（枠で囲んだ箱） ----------------------------------------------
   マウスを乗せると、ほんの少し浮き上がります。 */
.card {
  padding: var(--l);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* リンクではない静的なカードなので、動きは付けず、枠と影だけを変化させます */
.grid .card:hover { border-color: var(--line-dk); box-shadow: var(--shadow-up); }
.card__title { margin-bottom: var(--s); color: var(--navy); font-size: 17px; font-weight: 700; line-height: 1.6; }

/* --- 担当教員からのメッセージ（ゆったり読ませる枠） ---------------------- */
.card--message { padding: var(--2xl) var(--xl); }
.card.card--message p { margin-bottom: var(--l); color: var(--ink); font-size: 17px; line-height: 2.05; }
.card.card--message p:last-child { margin-bottom: 0; }
.card--message strong {
  font-weight: 700; color: var(--navy);
  /* 下半分だけ薄い青を敷いて、蛍光ペンのように強調します */
  background: linear-gradient(transparent 62%, #dbeafe 62%);
}
.card__label {
  margin-bottom: var(--m); padding-bottom: var(--s); border-bottom: 1px solid var(--line);
  color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em;
}
.card p { color: var(--sub); font-size: 15px; }

/* --- 報告テーマの一覧（優先して見せたい方） ------------------------------ */
.themes { display: grid; grid-template-columns: 1fr; gap: var(--m); list-style: none; }
.themes li {
  padding: var(--m) var(--l);
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 15px; line-height: 1.75;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.themes li:hover { border-color: var(--line-dk); border-left-color: var(--accent); box-shadow: var(--shadow-up); }

/* --- 参考情報を控えめに置く箱 -------------------------------------------- */
.subbox { padding: var(--l) var(--xl); background: var(--soft2); border-radius: var(--radius); }
.section--cream .subbox { background: var(--white); border: 1px solid var(--line); }
.subbox .list > li { color: var(--sub); }

/* --- 番号つきの流れ（1→5のステップをカードで示します） ------------------
   カードとカードの間には、下向きの矢印が自動で入ります。
   項目を増減しても番号と矢印は自動で付け直されます。 */
.steps { display: grid; gap: 46px; list-style: none; counter-reset: step; }
.steps > li {
  position: relative; padding: var(--l) var(--xl);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.steps > li::before {   /* STEP 1 … の番号バッジ */
  counter-increment: step; content: "STEP " counter(step);
  display: inline-block; margin-bottom: 12px; padding: 5px 16px;
  background: var(--accent); color: var(--white); border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
}
.steps > li:not(:last-child)::after {   /* 次のカードへ向かう矢印 */
  content: ""; position: absolute; left: 50%; bottom: -34px;
  transform: translateX(-50%);
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 15px solid var(--accent);
}
.steps p { color: var(--sub); font-size: 15px; }

/* --- 人数の表示 ---------------------------------------------------------- */
.stat {
  padding: var(--l); text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat b { display: block; color: var(--accent); font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.stat b span { font-size: 16px; }
.stat small { color: var(--sub); font-size: 14px; }

/* --- メンバー紹介（写真を左、文章を右に並べます） ------------------------ */
.members { display: grid; gap: var(--m); list-style: none; }
.member {
  display: flex; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.member:hover { border-color: var(--line-dk); box-shadow: var(--shadow-up); }
/* 写真は幅を固定し、カードの高さいっぱいに切り抜いて表示します。
   紹介文の長さや写真の縦横比が変わっても、並びは崩れません。 */
.member__photo {
  width: 170px; min-height: 170px; flex-shrink: 0;
  align-self: stretch; object-fit: cover;
}
.member__body { flex: 1; min-width: 0; padding: var(--l) var(--xl); }
.member__name { color: var(--navy); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }
.member__sub  { margin-bottom: var(--m); color: var(--sub); font-size: 13px; }
.member__label {
  margin: var(--m) 0 4px; padding-top: var(--m); border-top: 1px solid var(--line);
  color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.member p:not([class]) { color: var(--sub); font-size: 15px; }

/* --- 写真 ----------------------------------------------------------------
   写真ファイルが見つからないときは「写真準備中」と表示され、
   レイアウトは崩れません。写真を置けば自動的に切り替わります。 */
.photo { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.photo, .member__photo { position: relative; background: var(--soft2); }
.photo::before, .member__photo::before { content: ""; position: absolute; inset: 0; background: var(--soft2); }
.photo::after, .member__photo::after {
  content: "写真準備中"; position: absolute; inset: 0;
  display: grid; place-items: center; color: var(--sub); font-size: 13px; letter-spacing: .08em;
}
.figure {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.figure figcaption { padding: var(--m) var(--l); color: var(--sub); font-size: 14px; }

/* --- 担当教員 ------------------------------------------------------------
   写真とテキストが詰まって見えないよう、余白を広めにとっています。
   窮屈に感じるときは、下の gap と margin の数値を大きくしてください。 */
.profile {
  padding: var(--2xl) var(--xl); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.profile__head {
  display: flex; align-items: center;
  gap: var(--2xl);              /* 写真とテキスト群のあいだ */
  margin-bottom: var(--2xl);    /* 経歴文とのあいだ */
}
/* <picture> で写真を囲んでいる箇所の調整（写真の形式を自動で選ぶための入れ物）
   margin-left は写真を少し右に寄せるための余白です。
   位置を微調整したいときは、この数値を変えてください（0 で左端に戻ります）。 */
.profile__head picture { flex-shrink: 0; line-height: 0; margin-left: var(--l); }
.figure picture { display: block; }
/* 写真の縦横比が違っても、常に同じ形に切り抜いて表示します */
.profile__photo {
  width: 130px; aspect-ratio: 2 / 3; flex-shrink: 0; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.profile__name { color: var(--navy); font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.profile__role { display: block; margin-bottom: var(--l); color: var(--sub); font-size: 14px; }
.profile__label {
  margin: var(--l) 0 var(--m);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.profile .text { color: var(--sub); font-size: 15px; }

/* 担当科目レイアウト */
.courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--m);
}

.courses-grid__right {
  display: flex;
  flex-direction: column;
  gap: var(--m);
}

/* 右側の2つのカードを上下均等（50%ずつ）に分割 */
.courses-grid__right .card {
  flex: 1;
}

/* 700px以上の画面（PC・タブレット）で左右2列にする */
@media (min-width: 700px) {
  .courses-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* --- PDFを開くボタン（研究業績など） -------------------------------------
   ふだんは枠線だけ、マウスを乗せるとアクセント色で塗りつぶします。
   氏名・専門分野タグの下に並ぶため、余白は控えめにしています。 */
.btn--pdf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  max-width: 100%;
  margin-top: var(--xl);   /* 専門分野タグとのあいだをはっきり空けます */
  padding: 10px 22px;
  background: var(--white); color: var(--accent-dk);
  border: 2px solid var(--accent); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn--pdf:hover {
  background: var(--accent); color: var(--white);
  transform: translateY(-2px); box-shadow: var(--shadow-up); opacity: .95;
}
.btn--pdf:active { transform: translateY(0); }

/* 研究キーワードの札 */
.tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.tags li {
  padding: 6px 18px; background: var(--accent-pl); color: var(--accent-dk);
  border: 1px solid #bfdbfe; border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* --- 連絡先 -------------------------------------------------------------- */
.contact {
  padding: var(--2xl) var(--xl); background: var(--white); color: var(--ink);
  border-radius: var(--radius); box-shadow: 0 20px 40px -16px rgba(15, 23, 42, .5);
}
.contact__label { margin-bottom: 4px; color: var(--sub); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.contact__name  { margin-bottom: var(--xl); font-size: 18px; font-weight: 700; }
.contact__mail  { margin-bottom: var(--xl); font-size: clamp(20px, 3vw, 26px); font-weight: 700; overflow-wrap: anywhere; letter-spacing: -.01em; }
.contact__mail img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}.contact__mail a { color: var(--accent); }
.contact__note  { padding-top: var(--l); border-top: 1px solid var(--line); color: var(--sub); font-size: 14px; }

/* --- よくある質問（JavaScriptは使っていません） --------------------------
   1問ずつを独立したカードにして、開いている場所をわかりやすくします。 */
.faq { display: grid; gap: var(--s); }
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: box-shadow .2s ease;
}
.faq details:hover, .faq details[open] { box-shadow: var(--shadow); }
.faq details[open] { border-color: var(--line-dk); }
.faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: var(--l) var(--2xl) var(--l) var(--l);
  color: var(--navy); font-weight: 700; line-height: 1.6;
  transition: background-color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }   /* Safari の三角印を消す */
.faq summary:hover { background: var(--soft); }
.faq summary::after {   /* 右端の「＋」。開くと「−」に変わります */
  content: "＋"; position: absolute; right: var(--l); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px;
  background: var(--accent-pl); border-radius: 50%;
  color: var(--accent); font-size: 14px; font-weight: 700;
}
.faq details[open] summary::after { content: "−"; background: var(--accent); color: var(--white); }
.faq__answer {
  padding: var(--l); border-top: 1px solid var(--line);
  background: var(--soft); color: var(--sub); font-size: 15px;
}
/* 答えがふわりと現れるようにします */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq details[open] .faq__answer { animation: fadeIn .25s ease-out; }
.faq__answer .list { margin-top: var(--m); }
.faq__answer .list > li { border-bottom-color: var(--line-dk); }


/* ============================================================================
   7. 画面幅ごとの調整
   ========================================================================= */

/* --- 700px 以上（タブレット・パソコン） --------------------------------- */
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .list--2col, .themes { grid-template-columns: 1fr 1fr; }
  .deflist > div { grid-template-columns: 13em 1fr; gap: var(--l); padding: var(--l) var(--xl); }
}

/* --- 559px 以下（スマートフォン） --------------------------------------- */
@media (max-width: 559px) {
  :root { --section: 64px; --2xl: 40px; --xl: 28px; }
  html { scroll-padding-top: 120px; }
  .header { position: static; }
  .header .container { justify-content: flex-start; }
  .container { padding-inline: var(--m); }

  .buttons { flex-direction: column; }
  .button { display: block; width: 100%; }

  .member__photo { width: 108px; min-height: 108px; }
  .member__body { padding: var(--m); }

  /* 縦に積み重なるので、要素同士がくっつかないよう余白を確保します */
  .profile { padding: var(--xl) var(--l); }
  .profile__head { flex-direction: column; align-items: flex-start; gap: var(--xl); }
  .profile__head > div { width: 100%; }   /* 右側の情報を画面幅いっぱいに */
  /* 縦並びになると写真の下に氏名が来るため、左端をそろえます */
  .profile__head picture { margin-left: 0; }
  .profile__photo { width: 108px; }
  .profile__name { font-size: 22px; }
  /* 画面が狭いときは、押しやすいように横幅いっぱいのボタンにします */
  .btn--pdf { width: 100%; margin-top: var(--l); }

  .subbox { padding: var(--m); }
  .steps { gap: 40px; }
  .steps > li { padding: var(--l) var(--m); }
  .card--message { padding: var(--l); }
  .card.card--message p { font-size: 16px; line-height: 1.95; }
  .contact { padding: var(--xl) var(--l); }
  .faq summary { padding: var(--m) 56px var(--m) var(--m); }
  .faq summary::after { right: var(--m); }
}

/* --- 動きを減らす設定にしている方への配慮 -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}


/* ============================================================================
   8. 印刷したときの調整（募集要項を紙に出すときなど）
   ========================================================================= */
@media print {
  body { color: #000; font-size: 10.5pt; }
  .header, .hero, .footer, .section--blue, .section--cream {
    background: #fff !important; color: #000 !important;
  }
  .hero::after { display: none; }
  .hero .lead, .footer a, .footer__sub, .footer__copyright { color: #000 !important; }
  .skip-link, .buttons, .nav, .footer ul { display: none; }
  .card, .themes li, .member, .table-wrap, .figure, .profile, .contact, .faq details { box-shadow: none !important; }
  .faq__answer { display: block !important; }
  .section { padding-block: 16px; }
  .table thead th { background: #fff !important; border-bottom: 2px solid #000; }
}