@charset "utf-8";
/* =========================================================
   ishiDe Laboratory  共通スタイル
   置き場所： サーバーのルート直下  →  /style.css
   各ページから  <link rel="stylesheet" href="/style.css">  で読み込む
   ========================================================= */

/* ---------- 色とサイズの設定（ここだけ変えれば全ページ変わる） ---------- */
:root{
  --ink:        #16191d;   /* 本文の文字色 */
  --ink-soft:   #5a6472;   /* 補足の文字色 */
  --indigo:     #1F3A5F;   /* アクセント（藍） */
  --indigo-dark:#152941;
  --indigo-pale:#eaeef4;
  --line:       #e2e6ec;   /* 細い罫線 */
  --bg:         #ffffff;
  --bg-soft:    #f7f8fa;
  --green:      #2F6B4F;   /* 動画教材のラベル色 */
  --warm:       #B4462C;   /* サイト名の差し色（テラコッタ）。ここを変えれば全ページ変わる */
  --gray:       #5a6472;   /* 論文・記録のラベル色 */
  --radius:     6px;
  --maxw:       1040px;
}

/* 学校のPCはほぼライトモード。勝手に色が反転しないよう固定する */
:root{ color-scheme: light; }

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

html{
  /* 100% にすることで、ブラウザの文字サイズ設定を大きくしている先生の環境に追従する */
  font-size:100%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",
              "Meiryo",system-ui,sans-serif;
  font-size:1.0625rem;      /* 17px 相当 */
  line-height:1.8;
  /* 長い教材名やURLがはみ出して横スクロールになるのを防ぐ */
  overflow-wrap:anywhere;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--indigo); }
a:hover{ color:var(--indigo-dark); }

/* キーボードで操作する人に、今どこにいるかがはっきり見えるように */
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--indigo);
  outline-offset:2px;
  border-radius:3px;
}

.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:20px;
}

/* 読み上げソフト向けの、画面には出さない見出し */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ---------- ヘッダー ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;               /* 幅が狭いと自然に2段になる。JSは使わない */
  align-items:baseline;
  gap:4px 28px;
  padding-block:18px;
}
.site-title{
  margin:0;
  font-size:1.375rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.4;
}
.site-title a{ color:var(--ink); text-decoration:none; }

/* サイト名のうち「De」と「Lab」だけ暖色にして、de-lab.net を浮かび上がらせる */
.brand-accent{ color:var(--warm); }
.site-title small{
  display:block;
  font-size:.8125rem;
  font-weight:400;
  color:var(--ink-soft);
  letter-spacing:0;
}

.nav{ margin-left:auto; }
.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:2px 20px;
}
.nav a{
  display:inline-block;
  padding:8px 2px;              /* 指で押せる高さを確保する */
  color:var(--ink);
  text-decoration:none;
  font-size:.9375rem;
  border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--indigo); }
.nav a[aria-current="page"]{
  color:var(--indigo);
  font-weight:700;
  border-bottom-color:var(--indigo);
}

/* ---------- ページ冒頭 ---------- */
.hero{
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  padding-block:56px;
}
.hero h1{
  margin:0 0 14px;
  font-size:1.875rem;
  line-height:1.5;
  letter-spacing:.01em;
}
.hero p{
  margin:0;
  max-width:46em;
  color:var(--ink-soft);
}

/* 下層ページ用の、ひかえめな見出し帯 */
.page-head{
  border-bottom:1px solid var(--line);
  padding-block:40px 32px;
}
.page-head h1{
  margin:0 0 10px;
  font-size:1.625rem;
  line-height:1.5;
}
.page-head p{ margin:0; color:var(--ink-soft); max-width:46em; }

.breadcrumb{
  font-size:.875rem; color:var(--ink-soft);
  margin:0 0 12px;
}
.breadcrumb a{ color:var(--ink-soft); }

/* ---------- セクション ---------- */
.section{ padding-block:52px; }
.section + .section{ border-top:1px solid var(--line); }

.section-head{ margin-bottom:28px; }
.section-head h2{
  margin:0 0 8px;
  font-size:1.3125rem;
  line-height:1.5;
  padding-left:12px;
  border-left:4px solid var(--indigo);
}
.section-head p{ margin:0; color:var(--ink-soft); font-size:.9375rem; }

/* ---------- 種類のラベル ---------- */
.label{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  line-height:1.5;
  padding:2px 9px;
  border-radius:3px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.label--app  { background:var(--indigo-pale); color:var(--indigo); }
.label--movie{ background:#e7f0eb;            color:var(--green);  }
.label--paper{ background:#eceef1;            color:var(--gray);   }
.label--out  { background:#fff; color:var(--ink-soft); border:1px solid var(--line); }

/* ---------- 主力を大きく見せるカード ---------- */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:24px;
}
.feature{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.feature:hover{
  border-color:var(--indigo);
  box-shadow:0 2px 10px rgba(31,58,95,.10);
}
.feature__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.feature__title{ margin:0; font-size:1.0625rem; font-weight:700; line-height:1.6; }
.feature__lead{ margin:0; font-size:.9375rem; color:var(--ink-soft); line-height:1.75; }
.feature__go{
  margin-top:auto; padding-top:6px;
  font-size:.9375rem; font-weight:700; color:var(--indigo);
}

/* 画面写真の枠。写真をまだ置いていなくても形が崩れないようにしてある */
.shot{
  aspect-ratio:16 / 10;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:#aab2bd; font-size:.8125rem; letter-spacing:.08em;
}
.shot img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 入口カード（5つの分類） ---------- */
.gates{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:16px;
}
.gate{
  display:block;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none; color:inherit;
  background:var(--bg);
  transition:border-color .15s, background .15s;
}
.gate:hover{ border-color:var(--indigo); background:var(--bg-soft); }
.gate__title{ font-weight:700; font-size:1rem; margin:0 0 4px; }
.gate__note{ margin:0; font-size:.875rem; color:var(--ink-soft); line-height:1.7; }

/* ---------- 一覧カード（1件 = 1カード） ---------- */
/* 項目は タイトル / 一行説明 / 対象 / 種類 / 更新日 の5つで固定。
   増えても並べるだけで済むよう、この5つ以外は足さないこと。 */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:18px;
}
.card{
  display:flex; flex-direction:column; gap:10px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.card:hover{ border-color:var(--indigo); box-shadow:0 2px 10px rgba(31,58,95,.08); }
.card__top{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.card__title{ margin:0; font-size:1.0625rem; font-weight:700; line-height:1.6; }
.card__lead{ margin:0; font-size:.9375rem; color:var(--ink-soft); line-height:1.75; flex:1; }
.card__meta{
  display:flex; flex-wrap:wrap; gap:4px 16px;
  font-size:.8125rem; color:var(--ink-soft);
  border-top:1px dotted var(--line);
  padding-top:10px;
}

/* ---------- これから追加する場所の目印 ---------- */
.empty{
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
  padding:28px 20px;
  text-align:center;
  color:var(--ink-soft);
  font-size:.9375rem;
}

/* ---------- 新着 ---------- */
.news{ list-style:none; margin:0; padding:0; }
.news li{ border-bottom:1px solid var(--line); }
.news li:first-child{ border-top:1px solid var(--line); }
.news a{
  display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center;
  padding:14px 2px;
  text-decoration:none; color:inherit;
}
.news a:hover .news__title{ color:var(--indigo); text-decoration:underline; }
.news__date{ font-size:.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.news__title{ font-size:.9375rem; font-weight:700; }

/* ---------- フッター ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  padding-block:36px 44px;
  font-size:.875rem;
  color:var(--ink-soft);
}
.site-footer h2{
  font-size:.8125rem; letter-spacing:.08em; color:var(--ink);
  margin:0 0 8px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:28px;
  margin-bottom:28px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:4px; }
.site-footer .copyright{
  border-top:1px solid var(--line);
  padding-top:16px;
  margin:0;
  font-size:.8125rem;
}

/* ---------- 印刷（職員会議で紙に出す場合） ---------- */
@media print{
  .hero{ background:#fff; }
  .nav{ display:none; }
  a{ color:#000; text-decoration:none; }
  .feature, .card, .gate{ break-inside:avoid; border-color:#999; }
  .site-footer{ background:#fff; }
}

/* ---------- 画面が狭いとき ---------- */
@media (max-width:600px){
  body{ font-size:1rem; }
  .hero{ padding-block:40px; }
  .hero h1{ font-size:1.5rem; }
  .section{ padding-block:40px; }
  .site-header .wrap{ padding-block:14px; }
  .nav{ margin-left:0; width:100%; }
  .nav ul{ gap:2px 16px; }
}

/* 動きを減らす設定にしている人には、余計な変化を出さない */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}


/* =========================================================
   ここから下は、アプリの紹介ページ（/apps/アプリ名/）で使う部品。
   一覧ページには出てこないので、触らなくても他のページは壊れない。
   ========================================================= */

/* ---------- 紹介ページの冒頭 ---------- */
.app-head{
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  padding-block:36px 44px;
}
.app-head h1{ margin:10px 0 14px; font-size:1.75rem; line-height:1.45; }
.app-head__lead{ margin:0 0 26px; max-width:44em; }

/* ---------- 大きなボタン ---------- */
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px;                 /* 指でも押しやすい大きさ */
  padding:10px 26px;
  border-radius:var(--radius);
  font-size:1rem; font-weight:700; text-decoration:none;
  border:1px solid var(--indigo);
  transition:background .15s, color .15s;
}
.btn--primary{ background:var(--indigo); color:#fff; }
.btn--primary:hover{ background:var(--indigo-dark); color:#fff; }
.btn--ghost{ background:#fff; color:var(--indigo); }
.btn--ghost:hover{ background:var(--indigo-pale); }
.btn-row + .btn-row{ margin-top:12px; }
.btn-note{ margin:12px 0 0; font-size:.875rem; color:var(--ink-soft); }

/* ---------- 画面写真をならべる ---------- */
.shots{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:20px;
}
.shots figure{ margin:0; }
.shots .shot{ border:1px solid var(--line); border-radius:var(--radius); }
.shots figcaption{ font-size:.875rem; color:var(--ink-soft); padding-top:8px; line-height:1.7; }

/* ---------- できること・使う場面 ---------- */
.points{ list-style:none; margin:0; padding:0; display:grid; gap:14px; max-width:44em; }
.points li{ position:relative; padding-left:26px; }
.points li::before{
  content:""; position:absolute; left:4px; top:.72em;
  width:9px; height:9px; border-radius:50%; background:var(--indigo);
}

/* ---------- 手順（番号は自動でつく） ---------- */
.steps{ counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:20px; max-width:44em; }
.steps li{ position:relative; padding-left:52px; }
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:3px;
  width:34px; height:34px; border-radius:50%;
  background:var(--indigo); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:700; line-height:1;
}
.steps b{ display:block; }

/* ---------- 更新履歴 ---------- */
.history{ margin:0; max-width:44em; }
.history > div{
  display:flex; flex-wrap:wrap; gap:2px 20px;
  padding:12px 2px;
  border-bottom:1px solid var(--line);
}
.history > div:first-child{ border-top:1px solid var(--line); }
.history dt{ min-width:6em; font-size:.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.history dd{ margin:0; font-size:.9375rem; }

/* ---------- 補足の囲み ---------- */
.note{
  border-left:4px solid var(--indigo);
  background:var(--bg-soft);
  padding:16px 20px;
  max-width:44em;
}
.note p{ margin:0; font-size:.9375rem; }
.note p + p{ margin-top:8px; }

/* ---------- 「くわしく」つきのカード ---------- */
/* カードのどこを押しても本体リンクへ、「くわしく」だけ紹介ページへ飛ぶ */
.card--linked{ position:relative; }
.card--linked .card__title a{ color:inherit; text-decoration:none; }
.card--linked .card__title a::after{ content:""; position:absolute; inset:0; }
.card--linked:hover .card__title a{ color:var(--indigo); }
.card__more{ position:relative; z-index:1; font-size:.8125rem; font-weight:700; margin-left:auto; }


/* =========================================================
   配布フォーム（「コピーして使う」アプリの紹介ページだけで使う）
   ========================================================= */

.form{ max-width:36em; display:grid; gap:22px; }

.field{ display:grid; gap:6px; }
.field label{ font-weight:700; font-size:.9375rem; }
.field .req{
  display:inline-block; margin-left:8px;
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:#8c2d18; background:#fbeeea;
  border-radius:3px; padding:1px 7px;
}
.field .any{
  display:inline-block; margin-left:8px;
  font-size:.75rem; font-weight:400;
  color:var(--ink-soft);
}
.field .hint{ margin:0; font-size:.8125rem; color:var(--ink-soft); line-height:1.7; }

.field input,
.field select,
.field textarea{
  font:inherit; font-size:1rem; line-height:1.6;
  width:100%; padding:12px 14px; min-height:50px;
  color:var(--ink); background:#fff;
  border:1px solid #b9c0cb; border-radius:var(--radius);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:3px solid var(--indigo); outline-offset:1px;
  border-color:var(--indigo);
}
.field input[readonly],
.field textarea[readonly]{ background:var(--bg-soft); color:var(--ink-soft); }

.field--error input,
.field--error select,
.field--error textarea{ border-color:#8c2d18; background:#fdf7f5; }
.field__error{ margin:0; font-size:.875rem; font-weight:700; color:#8c2d18; }

/* 自動送信よけの欄。人には見せない */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 送信中・完了・エラーの表示 ---------- */
.state{
  max-width:36em;
  padding:22px 24px;
  border-radius:var(--radius);
  margin-top:24px;
}
.state h3{ margin:0 0 10px; font-size:1.0625rem; line-height:1.5; }
.state p{ margin:0 0 12px; font-size:.9375rem; }
.state p:last-child{ margin-bottom:0; }

.state--loading{
  background:var(--bg-soft); border:1px solid var(--line);
  display:flex; align-items:center; gap:14px;
  font-size:.9375rem;
}
.state--done { background:#f2f7f4; border:1px solid #cfe0d6; }
.state--error{ background:#fdf7f5; border:1px solid #e6cdc5; }

.spinner{
  flex:none; width:22px; height:22px;
  border:3px solid var(--line); border-top-color:var(--indigo);
  border-radius:50%;
  animation:de-spin .9s linear infinite;
}
@keyframes de-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .spinner{ animation-duration:2.4s; }
}

.copybox{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 10px; }
.copybox input{
  flex:1 1 18em; min-width:0;
  font:inherit; font-size:.875rem;
  padding:11px 13px;
  border:1px solid #b9c0cb; border-radius:var(--radius);
  background:#fff; color:var(--ink);
}
.copybox .btn{ min-height:46px; padding:8px 20px; font-size:.9375rem; }


/* =========================================================
   これまでの作品（/apps/ の一番下）と、受賞のラベル
   ========================================================= */

/* 受賞名は長くなるので、他のラベルと違って折り返しを許す
   （折り返さないと、文字を大きくしている環境で画面からはみ出す） */
.label--award{
  background:#f5efe0; color:#6f5410;
  white-space:normal;
  line-height:1.6;
}

.legacy{ list-style:none; margin:0; padding:0; max-width:52em; }
.legacy li{
  display:grid; gap:4px;
  padding:16px 2px;
  border-bottom:1px solid var(--line);
}
.legacy li:first-child{ border-top:1px solid var(--line); }
.legacy__name{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-weight:700; font-size:1rem;
}
.legacy__note{ margin:0; font-size:.9375rem; color:var(--ink-soft); line-height:1.75; }
.legacy__year{ font-size:.8125rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

/* 選択欄。矢印はブラウザ標準のままにして、余計な作り込みをしない */
.field select{ appearance:auto; cursor:pointer; }
.field select:disabled{ background:var(--bg-soft); color:var(--ink-soft); cursor:default; }


/* =========================================================
   研究業績の一覧（/works/）
   ========================================================= */

/* 区分の切り替えボタン */
.wtabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:22px;
}
.wtab{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;                     /* 指で押せる大きさ */
  padding:8px 16px;
  font:inherit; font-size:.9375rem; font-weight:700;
  color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:999px;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.wtab:hover{ border-color:var(--indigo); }
.wtab[aria-pressed="true"]{
  background:var(--indigo); border-color:var(--indigo); color:#fff;
}
.wtab__n{
  font-size:.8125rem; font-weight:400;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.wtab[aria-pressed="true"] .wtab__n{ color:#cfd8e4; }

/* 絞り込み欄と件数 */
.wfilter{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-bottom:26px;
}
.wfilter input{
  flex:1 1 18em; min-width:0;
  font:inherit; font-size:1rem;
  min-height:48px; padding:10px 14px;
  border:1px solid #b9c0cb; border-radius:var(--radius);
  background:#fff; color:var(--ink);
}
.wfilter input:focus{ outline:3px solid var(--indigo); outline-offset:1px; border-color:var(--indigo); }
.wcount{ font-size:.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* 年の見出し */
.wyear{
  margin:34px 0 12px;
  padding-bottom:6px;
  font-size:1.125rem; font-weight:700;
  font-variant-numeric:tabular-nums;
  border-bottom:2px solid var(--line);
}
.wyear:first-child{ margin-top:0; }

/* 業績1件 */
.witem{
  padding:14px 2px;
  border-bottom:1px solid var(--line);
}
.witem__head{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 0 6px;
}
.witem__date{ font-size:.8125rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.witem__title{ margin:0 0 4px; font-size:1rem; font-weight:700; line-height:1.7; }
.witem__meta{ margin:0; font-size:.875rem; color:var(--ink-soft); line-height:1.75; }


/* =========================================================
   記事ページ（実践記録・研修資料）で使う部品
   ========================================================= */

/* 記事の冒頭 */
.art-head{
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  padding-block:36px 40px;
}
.art-head h1{
  margin:10px 0 16px;
  font-size:1.75rem; line-height:1.5;
  max-width:30em;
}

/* いつ・どこで・対象 などの一覧 */
.factlist{
  display:grid; grid-template-columns:auto 1fr; gap:8px 20px;
  margin:0; max-width:44em;
  font-size:.9375rem;
}
.factlist dt{ color:var(--ink-soft); white-space:nowrap; }
.factlist dd{ margin:0; }

/* 本文。ここだけ読み物として組む */
.article{ max-width:38em; }        /* 1行が長すぎると読みにくいので狭める */
.article h2{
  margin:44px 0 14px;
  padding-left:12px;
  font-size:1.25rem; line-height:1.5;
  border-left:4px solid var(--indigo);
}
.article h2:first-child{ margin-top:0; }
.article h3{ margin:32px 0 10px; font-size:1.0625rem; line-height:1.6; }
.article p{ margin:0 0 18px; }
.article ul,
.article ol{ margin:0 0 20px; padding-left:1.4em; }
.article li{ margin-bottom:8px; }
.article strong{ font-weight:700; }

.article blockquote{
  margin:24px 0;
  padding:14px 20px;
  border-left:4px solid var(--line);
  background:var(--bg-soft);
  color:var(--ink-soft);
  font-size:.9375rem;
}
.article blockquote p:last-child{ margin-bottom:0; }
.article blockquote cite{ display:block; margin-top:8px; font-size:.8125rem; font-style:normal; }

.article figure{ margin:26px 0; }
.article figure img{ border:1px solid var(--line); border-radius:var(--radius); }
.article figcaption{ padding-top:8px; font-size:.875rem; color:var(--ink-soft); line-height:1.7; }

/* 資料（PDFなど）へのリンク */
.filelist{ list-style:none; margin:0; padding:0; max-width:44em; }
.filelist li{ border-bottom:1px solid var(--line); }
.filelist li:first-child{ border-top:1px solid var(--line); }
.filelist a{
  display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
  padding:16px 2px;
  text-decoration:none; color:inherit;
  min-height:44px;
}
.filelist a:hover .filelist__name{ color:var(--indigo); text-decoration:underline; }
.filelist__name{ font-weight:700; font-size:1rem; }
.filelist__note{ font-size:.8125rem; color:var(--ink-soft); }

/* 一覧に並べる、記事ページを持たない1行 */
.rowlist{ list-style:none; margin:0; padding:0; }
.rowlist li{ border-bottom:1px solid var(--line); }
.rowlist li:first-child{ border-top:1px solid var(--line); }
.rowlist a{
  display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
  padding:16px 2px; min-height:44px;
  text-decoration:none; color:inherit;
}
.rowlist a:hover .rowlist__title{ color:var(--indigo); text-decoration:underline; }
.rowlist__date{ font-size:.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.rowlist__title{ font-weight:700; font-size:1rem; }
.rowlist__note{ font-size:.8125rem; color:var(--ink-soft); width:100%; }

/* 本文中で「この記号を打つ」と示すとき */
.article code{
  font-family:Consolas,"Courier New",monospace;
  font-size:.9375em;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:3px;
  padding:1px 6px;
}