/* 【サイトCSSの取扱説明書 / 2026-10】
   現役: トップページindex.htmlの配色・フォント・余白・配置・レスポンシブを司る。
   構成: :rootのDesign Tokens → 基本要素 → 各UI component → 画面幅に応じたメディアクエリ。
   削除すると: HTMLの文字は残るが、ブランド配色・余白・レイアウト・レスポンシブ表示が壊れる。
     LINE MINI Appのworkforce/index.htmlは独自styleを持つため、その画面デザインには原則影響しない。
   一般化: Separation of Concerns（文書構造と視覚表現の分離）、CSS Custom Properties、Responsive Design。
   魔改造: 全体配色は:rootの--color-*、フォントは--font-*、余白は--space-*。
     特定カードを変える場合は対象selectorを検索し、responsive側の指定も確認する。
   依存: トップindex.htmlからlink rel=stylesheetで読まれる。assets/brandのSVG自体は別管理。
   テスト: PC/スマホ両幅とGitHub Pages公開を確認。詳細はREADME。
*/
/* =========================================================
   TEA LABORATORY HOKKAIDO
   このファイルは視覚表現とレイアウトを担当します。情報と構造はindex.html、詳しい診断方法はREADMEへ分担します。
   コメントはA:ファイル全体、B:Componentの設計理由、C:直感に反する指定の注意、の3階層です。
   初心者向け編集メモ:
   - 配色は :root の color 変数を変更します。
   - フォントは --font-serif / --font-sans を変更します。
   - 余白は --space-* と --container を変更します。
   - remはルート要素の文字サイズ基準、pxはCSSピクセル(端末の物理画素とは別)、1vwはviewport幅の1%です。
   - Cascadeは適用候補の優先順位を決める仕組み。SpecificityはSelectorの詳細度、Source Orderは記述順です。
     後の指定が勝つのは重要度・詳細度などが同じ場合。Inheritanceは未指定の文字色や書体などを親から引き継ぐ別の仕組みです。
   - BEMの考え方を部分的に借りています。brandがBlock、brand__logoがElement、section--ruledがModifierです。
   ========================================================= */

/*
  【:root / CSS Custom Properties / Design Token / Semantic Token】
  :rootは文書のルート要素(このHTMLではhtml)を選びます。ここで定義した --color-bg などはCSS Custom Properties、つまりCSS変数です。
  var(--color-brand) のように呼び出すことで、色・余白・フォントを各所へ直書きせず中央管理できます。
  ここではDesign Tokenとして使っています。Design Tokenとは「サイト全体で使うデザイン上の約束」を名前付きで管理する考え方です。

  色名は --color-teal のような具体色ではなく、--color-brand のようにUI上の役割で付けています。
  これはSemantic Token的な考え方です。将来ブランド色を変更しても、CSS構造を変えず値だけ変更できます。
  触るとどこへ効くか: :rootの値はサイト全体へ波及します。ブランドカラー変更、ダークモード作成、余白調整の起点です。
  ただし自動で変わるのはvar()の参照先だけです。外部SVG、headのtheme-color、一部の半透明背景は別指定なので個別確認が必要です。
*/
:root {
  /*
    ブランドカラー:
    --color-bg は基底面、--color-text は本文、--color-brand は主要アクセント、--color-point は小さな識別色です。
    --color-lineや--color-brand-softは、同じ正式色を境界線や淡い面として使いやすいよう透明度込みで定義しています。
    bgとsurfaceは現在同じ値でも「ページ」と「部品の面」を分け、将来別々に変更できるようにしています。
    --color-steel-lightは現在var()の参照がないパレット記録です。変更してもlineのRGB値は自動連動しません。
  */
  --color-bg: #F3EFE7;
  --color-surface: #F3EFE7;
  --color-text: #252829;
  --color-muted: #495C63;
  --color-line: rgb(124 144 142 / 0.42);
  --color-brand: #2F5452;
  --color-point: #8E3F35;
  --color-steel: #495C63;
  --color-steel-light: #7C908E;
  --color-brand-soft: rgb(47 84 82 / 0.12);

  /* フォント: 外部読み込みを避け、端末標準フォントだけを使用します。 */
  --font-serif: "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  --font-sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;

  /* 余白とサイズ: サイト全体の密度をここから調整できます。 */
  --container: 1120px;
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;

  --radius-sm: 6px;
  --shadow-soft: 0 24px 70px rgb(37 40 41 / 0.08);
}

/*
  【CSS Reset / Universal Selector / Pseudo-element / box-sizing】
  * はUniversal Selectorで、すべての要素を対象にします。
  *::before と *::after はPseudo-elementです。将来CSSだけで装飾を足した場合にも同じ計算ルールを適用します。
  box-sizing: border-box は、widthにpaddingやborderを含めて計算する指定です。レイアウト崩れを減らすための定番Resetです。
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  【html / 基本文書設定】
  color-scheme: light は、このページが明るいテーマ前提であることをブラウザへ伝えます。
  scroll-behavior: smooth はページ内リンク移動をなめらかにします。動きが苦手な人向けには末尾のprefers-reduced-motionで上書きします。
*/
html {
  color-scheme: light;
  scroll-behavior: smooth;
}

/*
  【body / 背景と継承】
  bodyはページ全体の土台です。font-familyやline-heightは多くの子要素へInheritance(継承)されます。
  linear-gradientの1pxの色線と透明部分を90度/180度で重ね、44px四方のタイルとして繰り返す方眼です。外部画像は使いません。
  魔改造例: background-sizeを小さくすると方眼が細かくなります。無地にするなら色の層を残して2枚のgradientと不要なカンマを除きます。
  注意: backgroundは一括指定(Shorthand)です。後で書くとbackground-size等もリセットするため、紙の画像を足すときは順序を確認します。
*/
body {
  min-width: 320px;
  margin: 0;
  background:
    linear-gradient(90deg, rgb(47 84 82 / 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgb(47 84 82 / 0.055) 1px, transparent 1px),
    var(--color-bg);
  background-size: 44px 44px;
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.85;
  text-rendering: optimizeLegibility;
}

/* 【画像の基本】現在のロゴにも適用します。max-widthは上限だけで、縦横比はロゴ側のblock-size:autoと合わせて保ちます。 */
img,
svg {
  max-width: 100%;
}

/*
  【リンク / Pseudo-class】
  aは通常のリンク、a:hoverはマウスが乗った状態、a:focus-visibleはキーボード操作などでフォーカスが見える状態です。
  focus-visibleはアクセシビリティ上重要です。キーボード利用者が今どこを操作しているか分かるようにします。
*/
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--color-brand);
}

a:focus-visible {
  outline: 3px solid var(--color-brand-soft);
  outline-offset: 4px;
}

/*
  【container / max-width的な制限】
  .containerは本文幅の共通部品です。min()は候補の小さい方を採用し、親幅から40px引いた幅と1120pxのうち狭い方になります。
  margin-inline:autoは横書きでは左右の余白を等分し中央配置します。本文幅変更は全sectionに効き、820px以下では余白量も上書きされます。
  本文を画面いっぱいに広げない理由: 長い行は読みにくく、視線移動が大きくなるためです。
  CSS Logical Propertiesは文章の流れに沿った指定です。横書きではinline-size≒width、block-size≒height、margin-inline≒左右margin。
  縦書き・RTL対応の起点になりますが、現在残るwidth/left等の物理指定まで自動で対応するわけではありません。
*/
.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/*
  【skip-link】
  通常は画面外に隠し、focus時だけ表示します。transformで上へ逃がし、:focusで戻しています。
  見た目上は小さな部品ですが、キーボード操作に効くアクセシビリティ機能です。
*/
.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  transform: translateY(-140%);
  border: 1px solid var(--color-text);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
}

.skip-link:focus {
  transform: translateY(0);
}

/* 【header】ページ上部の帯。border-bottomで本文との境界を作り、背景に少し透明度を持たせています。 */
.site-header {
  border-bottom: 1px solid var(--color-line);
  background: rgb(243 239 231 / 0.94);
}

/*
  【Flexbox / site-header__inner】
  Flexboxは一次元方向の配置に向きます。ここではロゴとナビを横方向に並べ、justify-contentで左右に分けています。
  gapは両者の間隔を確保します。ロゴの上限とnavの折返しも合わせて幅を分担するため、ロゴ幅だけ広げるとリンクが押し出され得ます。
  魔改造例: ロゴとナビを縦並びにしたい場合は、こことMedia Query内のflex-directionを見ます。
*/
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 84px;
}

/*
  【Brand / SVG / Intrinsic Size / Asset Variant】
  Headerの.brandは、横長ロゴをクリック可能なホームリンクにする小さなComponentです。
  logo-horizontal.svgは正式Asset Variantの1つで、Headerの横長スペースに合わせて使います。
  inline-sizeで横幅を制御し、block-size:autoでSVGのviewBox由来のIntrinsic Aspect Ratioを保ちます。
  注意: Headerではlogo-mark.svgを重ねず、横ロゴ1つだけを表示します。サイズ変更は.brand__logoに効きます。
*/
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  /* Automatic Minimum Size: 内容由来の最小幅を解除し、このFlex itemがロゴより小さく縮むことを許可します。 */
  min-inline-size: 0;
  text-decoration: none;
}

.brand__logo {
  display: block;
  /* min()は48vw(viewport幅の48%)と18remの小さい方。巨大化を防ぎnavの場所を残します。狭幅では末尾の同じSelectorが上書きします。 */
  inline-size: min(48vw, 18rem);
  max-inline-size: 100%;
  block-size: auto;
}

/*
  【共通タイポグラフィ】
  複数の小さな英字ラベルに同じ書体・太さ・大文字化をまとめて適用しています。
  CSSでは同じ見た目をカンマ区切りで共有できます。変更は一括で効くため便利ですが、影響範囲も広くなります。
*/
.site-nav,
.eyebrow,
.section-kicker,
.activity-card__code,
.field-label__code,
.field-label dt,
.contact-list dt,
.site-footer {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* 【navの並び】ナビリンクは横一列の一次元配置なのでFlexboxを使っています。flex-wrapで狭い画面では折り返せます。 */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.15rem;
  color: var(--color-steel);
}

.site-nav a {
  text-decoration: none;
}

/*
  【Hero / clamp() / Fluid Spacing】
  Heroは最初に見える大きな導入領域です。
  clamp(最小値, 理想値, 最大値)はFluid Designの関数。上余白は4.5rem以上8.5rem以下の範囲で11vwに追従します。
  例: 1rem=16px、viewport=1000pxならclamp(72px, 110px, 136px)から110px。rem換算は利用者の文字設定でも変わります。
  ここではvwを使って余白だけをなめらかに変え、文字サイズはMedia Queryで段階的に調整しています。
*/
.hero {
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(4rem, 9vw, 7rem);
}

/*
  【Grid Layout / hero__layout】
  Grid Layoutは行と列の二次元レイアウトに向きます。Hero本文と右側のfield-labelを2列で扱うためGridを使っています。
  minmax(最小, 最大)はGridの列幅の範囲。右は250〜330px、左はminmax(0, 1fr)でgapと右列を除いた残りを受け持ちます。
  fr=fractionは余剰空間の分配比率。左の最小0は内容に押されて列が縮まなくなるのを防ぐためで、内容の折返しまで保証はしません。
  魔改造例: 左右反転や写真追加はここが起点。CSSだけで表示順を変えるとHTMLの読み上げ順・Tab順は変わらない点に注意します。
  このサイトでは正式縦ロゴを左側に大きく置き、右側のfield-labelを圧迫しない幅に抑えています。
*/
.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: clamp(2rem, 6vw, 4.75rem);
  align-items: end;
}

.eyebrow,
.section-kicker {
  margin: 0 0 1.1rem;
  color: var(--color-brand);
}

.eyebrow span,
.section-kicker {
  display: inline-block;
}

.eyebrow span {
  margin-right: 0.8rem;
  color: var(--color-point);
}

/* 【見出し・段落の余白初期化】ブラウザ標準の余白を整え、サイト側で一貫した余白を指定しやすくしています。 */
h1,
h2,
h3,
p {
  margin-top: 0;
}

/*
  【h1 / タイポグラフィ】
  h1の汎用の書体設定です。現在のh1はvisually-hiddenなので、この書体を変えても正式ロゴの文字には効きません。
  注意: 見た目を小さくしたいだけでh1をh2へ変えるのは避けます。見出しタグは情報階層を表します。
*/
h1 {
  margin-bottom: var(--space-lg);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.18;
}

/*
  【Visually Hidden / Accessibility】
  現在はHeroのh1#hero-titleで使用中。1pxの箱を切り抜き、通常のレイアウトから外して、視覚上だけ隠します。
  display:noneやvisibility:hiddenへの置換は支援技術からも見出しを隠してしまいます。画像のaltが空なので、意味を担当するh1は残します。
  この汎用クラス自体にはfocusで再表示する機能がありません。操作可能なリンクには、そのまま流用せずskip-link側の設計を確認します。
*/
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.hero__lead {
  max-width: 620px;
  margin-bottom: 0;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1.75;
}

/*
  【Responsive SVG / Intrinsic Aspect Ratio】
  Heroの正式ロゴはlogo-vertical.svgです。inline-size:min(100%, 600px)で親幅を超えず、最大600px程度に抑えます。
  %は親カラム基準(vwとは別)。viewBoxは内部座標、CSSは表示用viewportの大きさを決め、block-size:autoが固有比率を保ちます。
  600pxだけを変えても820px/460px以下の上限は別指定です。高さを同時に固定すると画像の表示枠の比率がずれ、意図しない余白等が生じ得ます。
*/
.hero-brand__logo {
  display: block;
  inline-size: min(100%, 600px);
  block-size: auto;
  margin-bottom: var(--space-lg);
}

/*
  【asideの見た目 / field-label】
  field-labelはHTML上ではaside、CSS上では標本ラベル風の視覚部品です。
  border-leftとbox-shadowで「重要だが本文ではない補足情報」として見えるようにしています。
  触るとどこへ効くか: Hero右側の識別情報だけに効きます。項目自体を増やす場合はHTML側のdlを編集します。
*/
.field-label {
  border: 1px solid var(--color-line);
  border-left: 5px solid var(--color-brand);
  background: rgb(243 239 231 / 0.78);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

.field-label__code {
  margin-bottom: var(--space-md);
  color: var(--color-brand);
}

.field-label dl {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.field-label div {
  border-top: 1px solid var(--color-line);
  padding-top: 0.85rem;
}

.field-label dt {
  color: var(--color-steel);
}

.field-label dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

/*
  【section共通スタイル】
  各章の余白、区切り線、背景をまとめています。HTMLのsection構造に対して、CSSで「章らしい見た目」を付けています。
  Cascadeにより、.section--ruled や .section--contact がこの基本スタイルを一部だけ上書きします。
*/
.section {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-line);
  background: rgb(243 239 231 / 0.84);
}

/* 【Modifier的なクラス】section--ruledは通常sectionの派生です。背景だけを少し変え、Activities領域を区別しています。 */
.section--ruled {
  background:
    linear-gradient(180deg, transparent, rgb(124 144 142 / 0.18)),
    rgb(243 239 231 / 0.84);
}

.section--contact {
  padding-bottom: var(--space-xl);
}

/*
  【Grid Layout / section__grid】
  各sectionを「左の識別情報」と「右の本文」に分ける2列Gridです。
  同じ構造をAbout/Activities/Information/Contactで使うことで、サイト全体の編集デザイン感を保っています。
  左列は180〜280px、右列は残りの1fr。Activitiesはこの右列の中なので、カード全体が1120px使えるわけではありません。
*/
.section__grid {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.section__meta h2 {
  margin-bottom: 0;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.35;
}

.section__body {
  max-width: 780px;
  font-size: 1.08rem;
}

/* 【Pseudo-class / :last-child】各親の「最後の子であるp」に適用。section末尾だけでなくカード内の説明文にも効き、下余白の重複を防ぎます。 */
.section__body p:last-child {
  margin-bottom: 0;
}

/*
  【Activities / CSS Grid】
  activity-listは複数カードを並べる親です。repeat(2, minmax(0, 1fr))で同じ幅の2列を作っています。
  repeat(回数, 列の定義)は同じ定義の繰返し。gapを除いた残りを1frずつ等分し、6枚を2列 x 3段へ自動配置します。
  v1.1ではsection__grid右列の限られた幅を使うため、2列で説明文の可読性を優先しています。8枚なら列数を変えず2列 x 4段になります。
  3列にしたい場合は repeat(3, minmax(0, 1fr)) が候補ですが、文章量が多い場合は文字の圧迫に注意します。
*/
.activity-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/*
  【Component / activity-card】
  activity-cardは1つの活動項目をカードとして見せる部品です。
  内容を増やすときはHTMLのarticleをコピーし、見た目を変えるときはこのCSSを編集します。
*/
.activity-card {
  min-height: 230px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: clamp(1.15rem, 3vw, 1.5rem);
}

.activity-card__code {
  margin-bottom: var(--space-md);
  color: var(--color-point);
}

.activity-card h3 {
  margin-bottom: var(--space-sm);
  font-size: 1.1rem;
  letter-spacing: 0;
  line-height: 1.4;
}

.activity-card p {
  color: var(--color-muted);
}

/*
  【Informationの強調 / notice】
  The TEAとの関係は誤認防止に関わる重要情報なので、noticeとして他の本文より少し強く見せています。
  文言自体はHTML、強調の度合いはCSS、という役割分担です。
*/
.notice {
  border-left: 5px solid var(--color-brand);
  background: var(--color-brand-soft);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.notice time {
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--color-brand);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
}

/*
  【Updates / Static Content / Component】
  updates-listは自サイトで管理する時系列ログの親、update-entryは単独でも意味が成立する1件の活動記録です。
  外部Widgetと違い、本文は同じHTMLにあるため、Xが利用できなくても記録自体は表示されます。
  区切り線だけで静かなログを作り、個別カードの面や新色は増やしません。
*/
.updates-list {
  border-bottom: 1px solid var(--color-line);
}

.updates-placeholder {
  margin: 0;
  border-top: 1px solid var(--color-line);
  padding: var(--space-lg) 0;
  color: var(--color-muted);
}

/*
  【Grid / 日付列と本文列】
  日付と本文という2つの役割を列として揃えるため、二次元配置を扱うGridを使います。
  左列は7rem以上、右列は残りの1frです。右列の最小値0は、長い見出しやURLでGrid全体が横へ広がるのを抑えます。
  活動記録の並びはHTMLのarticle順で決まり、460px以下では1列へ上書きします。
*/
.update-entry {
  display: grid;
  grid-template-columns: minmax(7rem, 0.28fr) minmax(0, 1fr);
  gap: var(--space-lg);
  border-top: 1px solid var(--color-line);
  padding: var(--space-lg) 0;
}

.update-entry__date {
  color: var(--color-point);
  font-size: 0.86rem;
  font-weight: 700;
}

.update-entry__content {
  min-inline-size: 0;
}

.update-entry__content h3 {
  margin-bottom: var(--space-sm);
  font-size: 1.1rem;
  line-height: 1.4;
}

.update-entry__content p {
  color: var(--color-muted);
}

.update-entry__link {
  color: var(--color-brand);
  font-weight: 700;
}

/*
  【Contact / Description List】
  contact-listはEMAIL/Xという項目名と値を、標本ラベルに近い2列で揃えるComponentです。
  各ddをminmax(0, 1fr)にして長いメールアドレスへ縮める場所を渡し、overflow-wrapで最後の保険を掛けます。
  Contactをカード化せず、既存の線・文字・余白Tokenだけで情報の階層を作ります。
*/
.contact-list {
  max-inline-size: 620px;
  margin: 0;
}

.contact-list > div {
  display: grid;
  grid-template-columns: minmax(5rem, 0.28fr) minmax(0, 1fr);
  gap: var(--space-md);
  border-top: 1px solid var(--color-line);
  padding: 1rem 0;
}

.contact-list dt {
  color: var(--color-steel);
}

.contact-list dd {
  min-inline-size: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.contact-link {
  color: var(--color-brand);
  font-weight: 700;
}

/* 【footer】ページ末尾の共通情報です。背景色と文字色を反転させ、本文の終わりを明確にしています。 */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 1.4rem 0;
  background: var(--color-text);
  color: var(--color-bg);
}

/* 【Flexbox / footer】サイト名とコピーライトを横方向に配置します。折り返し可能なので狭い画面でも破綻しにくいです。 */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-footer p,
.site-footer small {
  margin: 0;
}

.site-footer small {
  color: rgb(243 239 231 / 0.72);
  font-size: 0.78rem;
}

/*
  【Media Query / Breakpoint / Responsive Design】
  @media (max-width: 820px) はviewportが820 CSS px以下のときだけ適用候補になる条件です。端末の機種判定ではありません。
  PC版CSSを別ファイルで作るのではなく、共通の基本スタイルに対してBreakpointごとの差分だけを書いています。
  ここでは2列Gridを1列にし、ヘッダーを縦並びにし、スマホ・タブレットで読みやすい文字サイズへ調整しています。
  .brand__logoは基本指定と同じSelector/Specificityなので、後のSource Orderでinline-sizeを上書きします。他のプロパティは基本指定が残ります。
*/
@media (max-width: 820px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .site-header__inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 112px;
    padding: 1rem 0;
  }

  .site-nav {
    justify-content: flex-start;
  }

  .brand__logo {
    inline-size: min(70vw, 16rem);
  }

  .hero-brand__logo {
    inline-size: min(100%, 520px);
  }

  .hero__lead {
    font-size: 1.35rem;
  }

  .section__meta h2 {
    font-size: 1.65rem;
  }

  .section__body {
    font-size: 1rem;
  }

  .hero__layout,
  .section__grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 3.5rem;
  }

  .field-label {
    max-width: 100%;
  }

  .activity-list {
    grid-template-columns: 1fr;
  }

  .activity-card {
    min-height: auto;
  }
}

/*
  【小さいスマホ向けBreakpoint】
  @media (max-width: 460px) はさらに狭い画面用の微調整です。この幅では820pxの条件も同時に成立します。
  魔改造例: ロゴ幅・Hero文字サイズ・nav間隔はここ、1カラム化は上の820pxのブロックで変更します。
  両方にある.brand__logoのinline-sizeは後の460px側が優先。順序を逆にすると狭幅向け指定が820px側に上書きされます。
*/
@media (max-width: 460px) {
  .site-nav {
    gap: 0.45rem 0.85rem;
    font-size: 0.7rem;
  }

  .brand__logo {
    inline-size: min(78vw, 14rem);
  }

  .hero-brand__logo {
    inline-size: min(100%, 420px);
  }

  .hero__lead {
    font-size: 1.2rem;
  }

  .section__meta h2 {
    font-size: 1.48rem;
  }

  .hero__lead br {
    display: none;
  }

  .section {
    padding: 4.5rem 0;
  }

  /* 狭い画面では項目名と値を縦積みにし、メールアドレスが横幅を奪うのを避けます。 */
  .contact-list > div {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  /* 日付と本文を縦積みにし、長いタイトルや任意の外部リンクが横にはみ出す余地を減らします。 */
  .update-entry {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/*
  【prefers-reduced-motion / アクセシビリティ】
  OSやブラウザで「動きを減らす」設定の人向けに、現在のsmoothスクロールを止め、CSSのtransition/animationの時間を短縮します。
  動きによる負担を減らすため、将来CSS Animationを追加しても残します。ただしJavaScriptや動画の動作は、このCSSだけでは停止しません。
  注意: !importantは後から書いた通常の宣言より優先するために使用。別の!importantに必ず勝つ保証や、アニメーション自体を削除する意味はありません。
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}