/* =========================================================================
   九大化学フェスタ 2026 ─ 共通デザイン
   ・全画面がこの1枚を共有する
   ・ライト／ダーク両対応（端末の設定に自動追従）
   ・スマホ主体の利用を前提に、タップ領域を大きく取る
   ========================================================================= */

:root {
  /* 配色は九州大学のウェブサイトに合わせている。
     実際のページを描画して測ったところ、
       ・地は白と薄いグレー #f4f4f4
       ・文字は黒 #000〜#606060
       ・九大ワインレッド #85023e は「罫線」「小さな札」「見出しの下線」だけ
       ・濃いワイン #61002c は目立たせたい札に一箇所
     という使い方だった。公式マニュアルにも
     「UIカラーを前面に出すのではなく、ポイント色として用いる」とある。
     以前は帯や見せ場を一面ワインで塗っていたが、赤が勝ちすぎ、
     半透明の重ね置きで文字が読みにくくなっていたため、この形に改めた。 */
  --wine: #85023e;                      /* 九大ワインレッド（公式・DIC230） */
  --wine-deep: #61002c;                 /* 濃いほう。押したとき・強い札に */
  --wine-tint: rgba(133, 2, 62, .10);   /* ごく薄い敷き色 */
  --wine-tint-2: rgba(133, 2, 62, .05);

  /* 広報バナー由来の3色。題字と、種類の区別に使う。
     白地に載せるので、バナーより濃いめに取っている。 */
  --sky-1: #1a5490;
  --sky-2: #2f7cc4;
  --sky-3: #dbebf8;
  /* 白地に載せても読める濃さにしてある（比 4.9／5.2）。
     もとのバナーの色そのままだと 4.07 で基準に届かなかった。 */
  --orange: #b85400;
  --orange-2: #9c4600;
  --green: #1f7a45;
  --sun: #8f6608;

  --ink-1: #1a1a1a;
  --ink-2: #3d3d3d;
  --flame: var(--wine);
  --flame-2: var(--sky-1);

  /* 地は白と薄いグレー。明るく、読みやすさを最優先にする。 */
  --bg: #f4f4f4;
  --bg-tint: #ebebeb;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #dcdcdc;
  --border-strong: #b9b9b9;
  --text: #1a1a1a;
  --text-muted: #606060;

  --primary: var(--wine);
  --primary-hover: var(--wine-deep);
  --primary-contrast: #ffffff;
  --accent: var(--wine);

  --good: #14713f;
  --good-bg: #e7f4ec;
  --warn: #8a5a00;
  --warn-bg: #fdf4e3;
  --danger: #b3261e;
  --danger-bg: #fceceb;

  --radius: 12px;
  --radius-lg: 18px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);
  --ring: 0 0 0 3px rgba(133, 2, 62, .25);

  /* 背景にうっすら敷くベンゼン環の格子の濃さ */
  --hex-ink: rgba(0, 0, 0, .035);

  /* 日本語のフォント。macOS・iOS（ヒラギノ）、Windows（游ゴシック・メイリオ）、
     Android（Noto）の順に、その環境で読みやすいものを選ぶ。
     Windows は Noto Sans JP が入っていないことが多いため、游ゴシックを先に挙げる。 */
  --jp: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Courier New", monospace;
}

/* 暗い配色には追従しない。
   会場は明るく、紙の資料と並べて見ることも多い。
   半透明の重ね置きが暗い面で読みにくくなる問題も避けられる。
   （プロジェクターに映す /screen だけは、暗い会場に合わせて別に暗くしてある） */


html { -webkit-text-size-adjust: 100%; }

/* 幅の計算に余白と枠線を含める。
   これが無いと、幅100%の入力欄が左右の余白のぶんだけ枠からはみ出す。
   実際、受付の「受付担当」欄が 768px の画面で 2px はみ出していた。 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--jp);
  line-height: 1.75;
  font-size: 16px;
}

/* ---- 背景のベンゼン環 -----------------------------------------------------
   六角形を線画で敷き詰める。気づく人は気づく程度の濃さにとどめ、
   画像を使わずCSSだけで描くので読み込みは増えない。 */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'>\<g fill='none' stroke='%231f6fc4' stroke-width='1.6'>\<path d='M30 4 L60 21 L60 55 L30 72 L0 55 L0 21 Z'/>\<path d='M90 4 L120 21 L120 55 L90 72 L60 55 L60 21 Z'/>\<path d='M60 55 L60 72'/><path d='M30 72 L30 89'/><path d='M90 72 L90 89'/>\</g></svg>");
  background-size: 132px 114px;
  opacity: .34;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 55%);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.15rem 4rem;
}
.wrap.wide { max-width: 1080px; }

/* ---- ヘッダー ------------------------------------------------------------ */

.site-head {
  position: relative;
  overflow: hidden;
  /* 九大サイトと同じく、白地に細いワインの罫線。
     以前は一面ワインで塗っていたが、赤が勝ちすぎていた。 */
  background: var(--surface);
  border-bottom: 3px solid var(--wine);
  color: var(--text);
  padding: 1.05rem 1.15rem;
}

/* ヘッダーに浮かぶ分子。バナーの背景にある線画の雰囲気を借りている。 */
.site-head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='260' height='120' viewBox='0 0 260 120'>\<g fill='none' stroke='%2385023e' stroke-width='2' opacity='.5'>\<circle cx='30' cy='30' r='7'/><circle cx='78' cy='14' r='5'/><circle cx='74' cy='62' r='6'/>\<circle cx='124' cy='40' r='5'/><path d='M36 27 L73 15 M35 36 L69 59 M79 60 L120 43'/>\<circle cx='196' cy='84' r='6'/><circle cx='240' cy='66' r='5'/><circle cx='198' cy='34' r='5'/>\<path d='M201 80 L236 68 M196 78 L197 40'/>\</g></svg>");
  background-repeat: repeat-x;
  background-position: right center;
  opacity: .12;          /* 白地では控えめに。文字の邪魔をしない濃さ。 */
}

.site-head .inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: nowrap;      /* 折り返すと切替ボタンがはみ出すため */
  min-width: 0;
}
.site-head .title {
  /* 題字は縮んでよい。切替ボタンの下に潜り込ませないため。 */
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;        /* 英語の題字は2行になってもよい */
  column-gap: .28em;
  line-height: 1.25;
}
/* 題字。以前は語ごとに青・橙・緑で塗り分けていたが、賑やかすぎた。
   九大サイトのロゴまわりと同じく、黒に近い1色でまとめ、
   年号だけをワインレッドにして締める。 */
.site-head .title .w-name {
  color: var(--ink-1);
  letter-spacing: .02em;
}
.site-head .title .w-year {
  color: var(--wine);
  font-family: var(--mono);
  font-size: .95em;
  font-weight: 800;
}

.site-head .sub {
  font-size: .78rem;
  color: var(--text-muted);
  font-family: var(--mono);
}

/* ---- 見出し -------------------------------------------------------------- */

h1 {
  font-size: clamp(1.45rem, 4.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 .6rem;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
/* 手順の番号はベンゼン環をかたどった六角形にする */
h2 .step {
  display: inline-grid;
  place-items: center;
  /* 数字が入るのが基本だが、「提出」のように語が入ることもある。
     幅を content に合わせて伸ばし、六角形を横長にして収める。 */
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .55rem;
  flex: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  background: var(--wine);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; }

/* カードの見出しの下に、結合線を思わせる短い線を引く */
.card > h2:first-child, .card > h3:first-child { position: relative; }
.card > h2:first-child::after, .card > h3:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.42rem;
  width: 2.2rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), var(--sun));
}
.card > h2:first-child { margin-bottom: 1.25rem; }
.card > h3:first-child { margin-bottom: .95rem; }
p  { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

.lede { color: var(--text-muted); }

/* ---- カード -------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.35rem;
  margin-bottom: 1.15rem;
  box-shadow: var(--shadow);
}
.card.tint { background: var(--surface-2); }

/* 名前や開催情報を出す見せ場。
   九大サイトの「重要なお知らせ」と同じく、ごく薄いワインの敷き色に
   濃いワインの縦線を添える。一面を塗ると赤が勝ちすぎるため。 */
.card.hero {
  position: relative;
  overflow: hidden;
  background: var(--wine-tint);
  border: 1px solid var(--border);
  border-left: 6px solid var(--wine);
  color: var(--text);
  box-shadow: var(--shadow);
}
.card.hero::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 190px;
  height: 190px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'><g fill='none' stroke='%2385023e' stroke-width='2.4' opacity='.30'><path d='M95 22 L140 48 L140 100 L95 126 L50 100 L50 48 Z'/><path d='M95 40 L124 57 L124 91 L95 108 L66 91 L66 57 Z'/><circle cx='95' cy='22' r='6' fill='%2385023e' opacity='.35'/><circle cx='140' cy='100' r='5' fill='%2385023e' opacity='.28'/><circle cx='50' cy='48' r='5' fill='%2385023e' opacity='.28'/></g></svg>");
}
.card.hero > * { position: relative; z-index: 1; }
.card.hero h1, .card.hero h2 { color: var(--text); }
.card.hero .lede { color: var(--ink-2); }

/* ---- フォーム ------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }
.field > label { font-weight: 700; font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--text-muted); }

.row { display: flex; gap: .8rem; flex-wrap: wrap; }
.row > .field { flex: 1 1 200px; margin-bottom: 0; }
.row + .row { margin-top: 1.1rem; }

input[type=text], input[type=email], select, textarea {
  font: inherit;
  width: 100%;
  padding: .7rem .75rem;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
/* キーボードで操作している人に、いまどこにいるかをはっきり示す。
   枠線を消すと、背景と同系色の場所で見失うため、輪郭線を残す。 */
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::placeholder { color: var(--text-muted); opacity: .65; }

.required::after {
  content: "必須";
  font-size: .7rem;
  font-weight: 700;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--pill);
  padding: .1rem .5rem;
  margin-left: .45rem;
  vertical-align: middle;
}

/* 選択肢カード（参加区分） */
.choices { display: grid; gap: .6rem; }
.choice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem .9rem;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .12s, background .12s;
}
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: var(--ring);
}
.choice input { width: 22px; height: 22px; margin-top: .18rem; accent-color: var(--accent); flex: none; }
.choice .c-body { display: flex; flex-direction: column; gap: .12rem; }
.choice .c-title { font-weight: 700; }
.choice .c-note { font-size: .84rem; color: var(--text-muted); }

.check {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}
.check input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--accent); flex: none; }

/* ---- ボタン -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 800;
  min-height: 50px;
  padding: .75rem 1.6rem;
  border: none;
  border-radius: var(--pill);
  background: var(--primary);
  color: var(--primary-contrast);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: background .12s, transform .08s;
}
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }

/* 進むためのボタンはオレンジ。1画面に1つだけ置き、次にすることを迷わせない。 */
.btn.accent {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.btn.accent:hover { background: linear-gradient(165deg, var(--orange), var(--orange-2)); }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { min-height: 40px; padding: .45rem 1.1rem; font-size: .9rem; }

.actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.3rem; }

/* ---- 通知 ---------------------------------------------------------------- */

.note {
  border-radius: var(--radius);
  padding: .85rem 1rem .85rem 1.1rem;
  margin-bottom: 1.1rem;
  border: 1px solid;
  border-left-width: 5px;
  font-size: .95rem;
}
.note.info   { background: var(--surface-2); border-color: var(--border); }
.note.good   { background: var(--good-bg);   border-color: var(--good);   color: var(--good); }
.note.warn   { background: var(--warn-bg);   border-color: var(--warn);   color: var(--warn); }
.note.error  { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.note ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.note strong { color: inherit; }

/* ---- バッジ -------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  padding: .2rem .7rem;
  border-radius: var(--pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;   /* 表の中で縦に潰れるのを防ぐ */
}
.badge.solid { color: #fff; border: none; }

/* ---- QR ------------------------------------------------------------------ */

.qr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
}
.qr-panel img {
  width: 216px; height: 216px; max-width: 100%;
  background: #fff;            /* QRは常に白地でないと読めない */
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.url-box {
  font-family: var(--mono);
  font-size: .82rem;
  word-break: break-all;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .7rem;
  width: 100%;
  text-align: left;
}

/* ---- 情報リスト ---------------------------------------------------------- */

.info-list { display: grid; gap: .1rem; }
.info-list .item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.info-list .item:last-child { border-bottom: none; }
.info-list dt { color: var(--text-muted); font-size: .88rem; }
.info-list dd { margin: 0; font-weight: 600; }

/* ---- 次の手順 ------------------------------------------------------------ */

.steps { display: grid; gap: .7rem; }
.step-item {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
/* 手順の印。フォームの番号と同じ六角形にそろえる。 */
.step-item .n {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  margin-top: .1rem;
  font-family: var(--mono);
  font-weight: 800;
  font-size: .78rem;
  line-height: 1;
  color: #fff;
  background: var(--wine);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
/* これから行う手順。全体を薄くすると、締切の日付やボタンまで読みにくくなる。
   済んだものとの差は緑の枠と印で十分つくので、番号だけ控えめにする。 */
.step-item.pending .n { background: var(--text-muted); }

/* 済んだ手順。「ここまで終わった」という感じを出すため、緑で囲んで印を付ける。 */
.step-item.done {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 8%, var(--surface-2));
}
.step-item.done .n { background: linear-gradient(160deg, #33b877, var(--good)); }
.step-item.done .s-title::after {
  content: " ✓";
  color: var(--good);
  font-weight: 700;
}
.step-item .s-body { display: flex; flex-direction: column; gap: .12rem; }
.step-item .s-title { font-weight: 700; }
.step-item .s-note { font-size: .86rem; color: var(--text-muted); }
/* 手順の説明を読んだその場から進めるためのボタン。 */
.step-item .s-act { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* ---- テーブル ------------------------------------------------------------ */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--surface); }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; }
thead th {
  background: var(--surface-2);
  font-size: .78rem;
  color: var(--text-muted);
  font-family: var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; }

/* ---- 統計 ---------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: .9rem 1rem; }
.stat .v { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.2; }
.stat .k { font-size: .82rem; color: var(--text-muted); }

/* ---- フッター ------------------------------------------------------------ */

.site-foot {
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
  padding: 1.4rem 1.15rem 2rem;
  color: var(--text-muted);
  font-size: .85rem;
  text-align: center;
}
a { color: var(--accent); text-underline-offset: 2px; }

.hidden { display: none !important; }

@media (max-width: 480px) {
  .wrap { padding: 1.1rem .85rem 3rem; }
  .btn { width: 100%; }
  .btn.small, .actions .btn.ghost.small { width: auto; }
  .info-list .item { grid-template-columns: 1fr; gap: .1rem; }
}


/* ---- 言語の切り替え ------------------------------------------------------- */

/* 「日本語 / ENG」を丸みのあるセグメントで並べる。国旗は使わない
   （English はどの国の旗とも結び付かないため）。 */
.site-head .lang {
  display: flex;
  flex: none;             /* 切替ボタンは縮めない。押せなくなるため。 */
  margin-left: auto;
  align-self: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.site-head .lang a {
  min-width: 2.4rem;
  height: 1.7rem;
  padding: 0 .5rem;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.site-head .lang a + a { border-left: 1px solid var(--border); }
.site-head .lang a:hover { color: var(--text); background: var(--bg-tint); }

/* 幅の狭い端末では日付を省き、題字と切替ボタンを1行に収める */
@media (max-width: 430px) {
  .site-head .sub { display: none; }
  .site-head .title { font-size: 1rem; }
}
@media (max-width: 360px) {
  .site-head { padding: .9rem .8rem; }
  .site-head .title { font-size: .92rem; }
  .site-head .lang a { min-width: 2.1rem; padding: 0 .35rem; font-size: .68rem; }
}
.site-head .lang a.on {
  color: #fff;
  background: var(--wine);
}


/* ---- 押しやすさの底上げ --------------------------------------------------
   指で押す部分は 40px 以上にする。小さいと押し損ねが増えるため。 */

.terms-box > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* メールアドレスやURLなど、区切りの無い長い文字列は狭い画面で枠を突き破る。
   語の途中でも折り返してよいことにする。 */
.hint, .lede, .info-list dd, .note, td, .s-note, .c-note {
  overflow-wrap: anywhere;
}


/* ---- 端末ごとの取りこぼしへの対応 ------------------------------------------
   実機での確認が難しいぶん、既知の落とし穴はあらかじめ塞いでおく。 */

/* iOSは入力欄の文字が16pxより小さいと、触れた瞬間に画面を勝手に拡大する。
   拡大されると元の倍率に戻らず、以降ずっと操作しづらくなるため防ぐ。 */
input, select, textarea, button { font-size: max(16px, 1rem); }

/* iOSのSafariは入力欄の角丸と影を独自に付ける。他の環境と見た目を揃える。 */
input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius);
}
select {
  /* 独自の見た目を消すと矢印も消えるので、自前で描く */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%235a7590' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.3rem;
}
input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; }

/* ファイルを選ぶ欄。既定のままだと小さく、指では押しにくい。
   ボタンの部分だけを大きくし、他の入力欄と同じ見た目に揃える。 */
input[type=file] {
  width: 100%;
  padding: .55rem .6rem;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}
input[type=file]::file-selector-button {
  font: inherit;
  font-weight: 700;
  margin-right: .8rem;
  padding: .55rem 1rem;
  min-height: 40px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: background .12s ease;
}
input[type=file]::file-selector-button:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* 横に長い表や時間割は、指で払ってなめらかに動くようにする */
.table-wrap, .tt-scroll, .badge-scroll { -webkit-overflow-scrolling: touch; }

/* 指で押したときに、うっすら青い枠が出るのを抑える（誤操作に見えるため） */
a, button, label, summary { -webkit-tap-highlight-color: rgba(31, 111, 196, .12); }

/* 画面の狭い端末では、余白を詰めて内容を優先する */
@media (max-width: 380px) {
  .wrap { padding-left: .75rem; padding-right: .75rem; }
  .card { padding: 1.1rem .9rem; border-radius: 14px; }
  .actions { gap: .55rem; }
}

/* 折りたたみ式の端末など、極端に横長で低い画面でも読めるようにする */
@media (max-height: 460px) and (orientation: landscape) {
  .site-head { padding: .6rem 1.15rem; }
  .wrap { padding-top: 1rem; }
}


/* 手続きのうち、当てはまる方だけが行うものを示す小さな見出し。
   発表しない参加者に「やり残しがある」と思わせないため。 */
.s-title .s-when {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .05rem .5rem;
  margin-right: .45rem;
  vertical-align: middle;
}

/* 動きに酔いやすい方のために、演出を止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}