:root {
  color-scheme: light;
  --ink: #322923;
  --muted: #736a63;
  --line: #e7ddd3;
  --panel: #fffefa;
  --surface: #fbf7f2;
  --accent: #f28a5b;
  --accent-dark: #c85b35;
  --indigo: #5a61d6;
  /* ガイド(インターンへの案内)専用の色。深い青緑。世界の暖色から一歩離した色にして、
     見た瞬間に「これは案内だ」と分かるようにしている。見出しやリンクの赤とは役割が別 */
  --guide: #2f6f6b;
  --canvas-scale: 1;
  /* ロゴの文字と同じブランド茶。区切り線や英字の見出しに使う */
  --brand-brown: #4d382d;
  /* 先端も角も丸い「＞」。色はマスクを敷く側の background-color で決まる */
  --chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 2 10 10 2 18' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* サイト側は丸ゴシック。修正対象のUIは中立的なゴシックのまま残して区別する */
  --font-rounded: "Kosugi Maru", ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-ui: Inter, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
  /* 英字の見出し。ロゴと同じ書体で、使うのは英数字だけ */
  --font-display: "Krona One", var(--font-rounded);
  /* サイトの幅と、その左右の余白。本文(.top-main、見出しの帯)とヘッダーの中身が同じ値を使うので、
     ロゴの左端と本文の左端がそろう。本文が広いページ(課題ページ)は --site-width を上書きする */
  --site-width: 1080px;
  --site-pad-x: clamp(16px, 4vw, 56px);
  font-family: var(--font-rounded);
  /* 太字を作らせない。Kosugi Maru と Krona One はウェイトが400しかなく、太字を指定すると
     ブラウザが偽の太字を合成する。これがスマホ(とくにSafari)でひどく滲むので、
     太さの合成だけ止める(斜体の合成は残す)。2026-09-24ユーザー指示でサイト全体を細字に */
  font-synthesis: style;
  background: var(--surface);
  color: var(--ink);
}

* { box-sizing: border-box; }

/* hidden を付けたものは必ず消す。部品に display: grid などを書くと、ブラウザ既定の非表示に勝ってしまい、
   「隠したはずなのに見えている」不具合になる(2026-09-25、総務部のフォームが送ったあとも残っていた) */
[hidden] { display: none !important; }

/* ブラウザが既定で太字にする要素も、サイト側では400にそろえる */
:where(h1, h2, h3, h4, h5, h6, b, strong, th) { font-weight: 400; }

body {
  margin: 0;
  min-width: 320px;
  /* 中身が短いページでも、フッターが画面の最下部に来るようにする
     (中身が長いページでは、いままでどおり文末のあとに続く)。
     dvh はスマホのアドレスバーの出入りで高さが変わるのに合わせるため */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fffaf5 0, var(--surface) 360px);
  font-size: 16px;
  line-height: 1.6;
  /* 日本語の文を、単語や文節の途中で折り返さない(対応ブラウザのみ。非対応は従来どおり) */
  word-break: auto-phrase;
  text-wrap: pretty;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }

.site-header {
  min-height: 60px;
  display: grid;
  /* ロゴ・バッジ・ナビを左に集める。見出しもカードも左揃えなので、ヘッダーの重心も左にそろう。
     ただし窓口の「総務部に連絡」だけは右端に置く(.portal-nav-end) */
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
  /* 地と線は画面幅いっぱいに敷き、中身(ロゴからナビまで)はサイトの幅の中に収める。
     広い画面では、左右の余白を「画面とサイトの幅の差の半分 + 本文と同じ余白」にして、ロゴの左端を本文の左端にそろえる */
  padding: 10px max(var(--site-pad-x), calc((100% - var(--site-width)) / 2 + var(--site-pad-x)));
  background: rgba(255, 250, 245, 0.94);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}

/* ヘッダーの左端。ロゴと、いまどの区画にいるかを示すバッジをひとまとめにする。
   ヘッダーのグリッドは2列のままなので、狭い画面の指定を足さなくて済む */
.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* 会社のロゴがトップへのリンクを兼ねる */
.brand-logo {
  display: block;
  line-height: 0;
  text-decoration: none;
}

/* 区画の名前を出すピル。白地に渋い赤の枠と文字(地とのコントラスト6.8)。
   ベタ塗りだと、やわらかい配色の中でここだけ強くなりすぎた。
   ヘッダーの地は半透明のクリーム色なので、白は指定しないと透ける */
.brand-badge {
  flex: 0 0 auto;
  /* 上下のパディングは同じではない。Kosugi Maru は字がライン内で上寄りに座るので、
     均等にすると文字が1px上にずれる。上を1px厚くして光学的に中央へ合わせている
     (実測: 均等だと枠の内側で上5px・下7px。この指定で6px・6px) */
  padding: 4px 11px 3px;
  border: 1px solid #9d3a33;
  border-radius: 999px;
  background: #ffffff;
  color: #9d3a33;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
}
/* 下層ページではバッジが社内ポータルのトップへの入口を兼ねる(ロゴは会社のトップへ行くので、
   区画のトップに戻る道がここしかない)。ポータルのトップ自身では <span> のまま */
a.brand-badge {
  text-decoration: none;
}
a.brand-badge:hover {
  background: #fff1ef;
}
/* 区画バッジの横に添える、いまの状態(試験運用中)。場所の札(赤い枠)と役割を分けるため、
   枠も地も付けず、小さな文字だけにする。正式版になったら各ページの1行ごと消す。
   大きさはデザインシステムの tag の型(12px)。色は signal の赤(2026-09-25ユーザー指示で灰色から変えた)。
   accent-dark は14px未満に使わない決まりなので使わない */
.brand-status {
  flex: 0 0 auto;
  color: #9d3a33;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* ヘッダーは全ページ、短縮版のマーク(198×98、約2:1)で揃える。
   幅48pxで高さ24px。ヘッダーに置ける上限は40px(min-height 60 - 上下padding 20)
   だが、上限いっぱいは使わず、隣のバッジと釣り合う大きさにしている。
   横組みのロゴとは比率が違うので、幅の数値を流用しない。 */
.brand-logo img {
  display: block;
  width: 48px;
  height: auto;
}
.brand-logo:hover img { opacity: 0.78; }

/* ロゴのかたまりとナビの境目。細い縦線1本だけで区切る */
.nav-rule {
  width: 1px;
  height: 20px;
  background: var(--line);
}

/* 社内ポータルの共通ナビ。行き先が増えても折り返すだけで済むよう wrap にしてある。
   いま開いているページは aria-current="page" で示し、線を引く */
.portal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  justify-content: flex-start;
  font-size: 0.875rem;
}

.portal-nav a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
}

.portal-nav a:hover {
  color: #9d3a33;
  border-bottom-color: #9d3a33;
}

.portal-nav a[aria-current="page"] {
  color: #9d3a33;
  border-bottom-color: #9d3a33;
}

/* 「総務部に連絡」だけ右端に寄せる(2026-09-26ユーザー指示)。仕事のページ(バックログ・日誌)と、窓口を分けて見せる。
   ナビはヘッダーの残りの幅いっぱいに広がっているので、左の余白を自動にすれば右端(管理人のときは歯車の左)に寄る。
   スマホはハンバーガーの中で縦に並ぶので寄せない */
/* 頭にメールのアイコン(Lucide mail)。色は文字と同じなので、指を乗せたときや今いるページでは一緒に赤くなる */
.portal-nav-end { display: inline-flex; align-items: center; gap: 6px; }
.portal-nav-end::before { content: ""; flex: none; width: 1.1em; height: 1.1em; background-color: currentColor; -webkit-mask: url("/assets/icons/mail.svg") no-repeat center / contain; mask: url("/assets/icons/mail.svg") no-repeat center / contain; }
@media (min-width: 681px) {
  .portal-nav-end { margin-left: auto; }
}


/* ボタンの角は全部 10px(デザインシステムの radius-sm)。札やラベルはピル型、ボタンは角丸、と分けている(2026-09-25) */
/* リンクとして置く控えめなボタン(「サイトを見る」「社内ポータルに戻る」)。下線を消し、カーソルが乗ったら帯と同じ地にする */
a.quiet-button { text-decoration: none; }
a.quiet-button:hover { background: #f3ede6; }

.quiet-button,
.editor-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 0.82rem;
  font-weight: 400;
  white-space: nowrap;
}

.button-icon { width: 16px; height: 16px; flex-shrink: 0; }

.editor-toolbar button[data-add] {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}
.editor-toolbar button[data-add] .button-icon {
  color: var(--accent-dark);
}

main {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 28px var(--site-pad-x) 80px;
}
/* 課題ページはエディタを広くとるので、サイトの幅を 1440px にする(ヘッダーのロゴもこの幅にそろう) */
.wide-page { --site-width: 1440px; }

.brief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: start;
  column-gap: 30px;
  row-gap: 22px;
  margin-bottom: 64px;
}

/* リスは吹き出しの下端に足をそろえて立たせる。吹き出しの下は .brief-content の余白56px、
   絵の足の先は画像の下端から約5%(240pxで12px)上にあるので、その差の44pxだけ持ち上げる */
.brief > img { position: relative; z-index: 1; grid-column: 2; grid-row: 1; width: 240px; height: 240px; margin: 0 0 44px; object-fit: contain; align-self: end; transform: translateX(-18px) rotate(2deg); filter: drop-shadow(0 12px 16px rgba(93, 65, 47, 0.14)); }
/* 下のノートは行末から29px食い込む(row-gap 22px − margin-top 51px)。吹き出しが長くても
   ノートにかからないよう、その分+余白を吹き出し側の下に確保する。りすの絵だけが重なる */
.brief-content { position: relative; z-index: 3; grid-column: 1; grid-row: 1; min-width: 0; align-self: start; padding-bottom: 56px; }
.brief-message { position: relative; padding: 30px 32px; border: 1px solid #d8b59b; border-radius: 28px; background: #fffaf4; box-shadow: 0 10px 28px rgba(110, 73, 47, 0.07); }
/* しっぽは右のりすに向ける */
.brief-message::before { content: ""; position: absolute; top: 50%; right: -11px; width: 20px; height: 20px; border-right: 1px solid #d8b59b; border-top: 1px solid #d8b59b; background: #fffaf4; transform: translateY(-50%) rotate(45deg); }
/* 課題ページの吹き出しの下に、薄い線で区切って置く。バックログのカードと同じ番号と種別の札 */
.brief-ticket { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.challenge-card-eyebrow:empty { display: none; }
.eyebrow { margin: 0 0 4px; color: #a84325; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.brief h1 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.35; letter-spacing: -0.03em; }
.brief p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); }
.brief-details { grid-column: 1 / -1; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; margin: -51px 0 0; padding: 28px 32px; border: 1px solid #e1e4e7; border-radius: 22px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(116, 128, 141, 0.24) 28px), #fff; box-shadow: 0 8px 20px rgba(55, 63, 72, 0.08); }
.brief-details h2 { margin: 0 0 12px; color: #a84325; font-size: 24px; font-weight: 400; line-height: 1.35; }
.section-title-note { margin-left: 4px; color: #6f737a; font-size: 13px; font-weight: 400; }
.service-summary { grid-column: 1 / -1; padding-bottom: 20px; border-bottom: 1px solid #d2d6db; }
.service-summary p { margin: 0; color: #3f4450; font-size: 14px; font-weight: 400; line-height: 1.7; }
.request-list dl { display: grid; gap: 14px; margin: 0; }
.request-list dl > .stakeholder-request { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; }
.request-copy { display: grid; gap: 3px; min-width: 0; }
.stakeholder-avatar { position: relative; width: 54px; height: 54px; overflow: hidden; border: 1px solid #d7e6eb; border-radius: 50%; background: #eef7fa; box-shadow: 0 3px 8px rgba(87, 63, 48, 0.1); }
.stakeholder-avatar img { position: absolute; max-width: none; }
.stakeholder-avatar-user img { top: -3px; left: -1px; width: 56px; height: auto; }
.stakeholder-avatar-tanuki img { top: 2px; left: -8px; width: 70px; height: auto; }
.stakeholder-avatar-fukurou img { top: 1px; left: -6px; width: 66px; height: auto; }
.stakeholder-avatar-shika img { top: -2px; left: -2px; width: 58px; height: auto; }
/* クマとリスは、会議の課題(2026-09-26〜)で要望や発言の顔に使う。元の絵が顔まわりの正方形なので、枠いっぱいに敷く */
.stakeholder-avatar-kuma img, .stakeholder-avatar-risu img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.request-list dt { color: #a84325; font-size: 14px; font-weight: 400; }
.request-list dd { position: relative; margin: 0; padding-left: 1em; color: #3f4450; font-size: 14px; font-weight: 400; line-height: 1.55; }
.request-list dd::before { content: "・"; position: absolute; left: 0; color: #a84325; }
.requirement-list { padding-left: 28px; border-left: 1px solid #d2d6db; }
.requirement-list ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.requirement-list li { position: relative; padding-left: 1em; color: #3f4450; font-size: 14px; font-weight: 400; line-height: 1.5; }
.requirement-list li::before { content: "・"; position: absolute; left: 0; color: #a84325; }
.brief .edit-instruction { font-size: 0.875rem; font-weight: 400; }
/* STEP の題名は、ページの題名(.brief h1)より必ず小さくする。スマホでは題名が1.35remに縮むので、固定の1.65remだと逆転していた */
/* 作業の見出し。題名は ink の文字のまま、頭の「STEP1.」だけを依頼書の「要望」「要件」と同じ
   heading の赤茶にする(2026-09-27ユーザー指示)。黄色い蛍光ペンは同じ日にやめた */
.workspace-step-title { margin: 0 0 18px; color: var(--ink); font-size: clamp(1.2rem, 1.9vw, 1.4rem); font-weight: 400; line-height: 1.35; }
/* STEP は札にせず、見出しの一部(2026-09-27ユーザー決定)。塗りの札は課題の状態(提案募集中など)だけにして、役割で分ける */
.step-badge { color: #a84325; letter-spacing: 0.02em; }

/* 会議の課題(2026-09-26〜)。社員のセリフを順に出し、あなたの発言を選んで進む。
   顔は要望と同じ .stakeholder-avatar、吹き出しの色は課題の依頼(.brief-message)と同じ。
   方針が決まるまで(body.meeting-pending)、課題の前提・編集・提出は出さない */
body.meeting-pending .brief-details,
body.meeting-pending #editStepTitle,
body.meeting-pending .workspace,
body.meeting-pending .submission { display: none; }
/* 会議の課題は、前提(.brief-details)を依頼の下から会議の下へ移すので、依頼の下の食い込み用の余白はいらない。
   依頼の主の絵は、足の先(画像の下端から約12px上)を吹き出しの下端にそろえる */
body.is-meeting .brief-content { padding-bottom: 0; }
body.is-meeting .brief > img { margin-bottom: -12px; }
.brief-details.is-standalone { margin: 32px 0 56px; }
.meeting { margin: 0 0 16px; }
.meeting-log { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; max-width: 880px; }
.meeting-line { display: flex; align-items: flex-start; gap: 14px; animation: meeting-in 0.3s ease both; }
/* 顔はセリフに負けない大きさに(要望の顔 54px を 1.35 倍) */
.meeting-line .stakeholder-avatar { flex: 0 0 auto; zoom: 1.35; }
.meeting-line-body { min-width: 0; }
.meeting-line-name { margin: 0 0 4px; color: var(--muted); font-size: 0.875rem; }
.meeting-bubble { margin: 0; padding: 12px 16px; border: 1px solid #d8b59b; border-radius: 4px 18px 18px 18px; background: #fffaf4; color: var(--ink); font-size: 0.9375rem; line-height: 1.8; }
/* あなたの発言は右に寄せ、地の色を変えて社員のセリフと分ける */
.meeting-line.is-own { justify-content: flex-end; }
.meeting-line.is-own .meeting-line-name { text-align: right; }
.meeting-line.is-own .meeting-bubble { border-color: var(--line); border-radius: 18px 4px 18px 18px; background: var(--panel); }
/* 選択肢は「1つ選ぶもの」に見せる。セリフの吹き出しと形を変え、赤茶の枠と左の丸(ラジオボタンの形)で示す。
   右向きの「＞」はページが移るように見えるので使わない(2026-09-26 ユーザー指摘)。
   左はセリフの吹き出しの左端(顔 73px + 間 14px)にそろえる */
.meeting-choices { display: grid; gap: 10px; max-width: 880px; margin-top: 24px; padding-left: 87px; }
.meeting-choices:empty { display: none; }
.meeting-choices-label { margin: 0 0 2px; color: var(--accent-dark); font-size: 0.9375rem; }
.meeting-choice { position: relative; padding: 14px 18px 14px 50px; border: 1px solid var(--accent-dark); border-radius: 12px; background: #ffffff; color: var(--ink); font: inherit; font-size: 0.9375rem; line-height: 1.7; text-align: left; cursor: pointer; transition: background 0.15s ease; }
.meeting-choice::before { content: ""; position: absolute; top: 50%; left: 18px; width: 20px; height: 20px; border: 2px solid var(--accent-dark); border-radius: 50%; background: #ffffff; transform: translateY(-50%); }
/* 指を乗せると、丸の中に点が入る(選ぶとこうなる、の予告)。点は丸と別の部品にすると半端な線幅でずれるので、
   丸の地に中心から塗る(2026-09-26、別の部品で重ねたら中心がずれた) */
.meeting-choice:hover::before, .meeting-choice:focus-visible::before { background: radial-gradient(circle, var(--accent-dark) 0 4px, #ffffff 4.5px); }
.meeting-choice:hover { background: #fff0ea; }
.meeting-choice:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
/* 決まった方針は、会議の結論として目立たせる。セリフから間を空け、幅はサイトいっぱい(下の前提の枠と同じ)。
   地と枠は「デザイン」の札と同じ淡い赤茶、名前を大きくして主役にする(太字は使えないので大きさで) */
.meeting-decision { margin-top: 48px; padding: 28px 32px; border: 1px solid #f3d9cd; border-radius: 22px; background: #fff0ea; }
.meeting-decision-label { margin: 0; color: var(--accent-dark); font-size: 0.9375rem; }
.meeting-decision-name { margin: 6px 0 10px; color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.35; }
.meeting-decision-summary { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.8; }
.meeting-decision-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.meeting-decision-actions .submit-button { min-width: 0; }
@media (max-width: 560px) {
  .meeting-line .stakeholder-avatar { zoom: 1; }
  .meeting-choices { padding-left: 0; }
}
@keyframes meeting-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .meeting-line { animation: none; } }

/* 会議の課題の確認用ページ(/admin/meeting-preview/)。りささんが全部の分岐と結末を一度に見るためのもの */
.meeting-preview { max-width: var(--site-width); margin: 0 auto; padding: 48px var(--site-pad-x) 96px; }
.meeting-preview-title { margin: 0 0 8px; font-size: 1.75rem; font-weight: 400; }
.meeting-preview-note { margin: 0 0 32px; color: var(--muted); font-size: 0.875rem; }
.meeting-preview-heading { margin: 0 0 12px; font-size: 1.5rem; font-weight: 400; }
.meeting-preview-sub { margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--accent-dark); font-size: 1.125rem; font-weight: 400; }
.meeting-preview-block { margin: 0 0 40px; }
.meeting-preview-tag { display: inline-block; margin: 0 0 16px; padding: 2px 12px; border-radius: 999px; background: #eaf2f5; color: var(--guide); font-size: 0.875rem; }
.meeting-preview-next { margin: -4px 0 4px; color: var(--muted); font-size: 0.875rem; }
.meeting-preview .meeting-choice:disabled { cursor: default; }
.meeting-preview .aftermath { margin-top: 24px; }

/* 選択の有無でキャンバス幅が変わらないよう、編集パネルの場所は常に確保する */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.editor-column,
.inspector {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
}

.editor-column { overflow: hidden; }
/* 狭い画面で道具が入りきらないときは、折り返さずに横へスクロールして全部押せるようにする(2026-09-26ユーザー指示) */
.editor-toolbar { min-height: 60px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.editor-toolbar > * { flex-shrink: 0; }
.tool-group { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
/* 追加の道具の見出し(2026-09-27)。ボタンではないので枠をつけず、灰色の小さな文字で左に置く */
.tool-group-label { margin-right: 4px; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.tool-divider { width: 1px; height: 28px; margin: 0 4px; background: var(--line); }
.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; white-space: nowrap !important; border: 0 !important; }

.canvas-stage {
  --stage-pad: 40px;
  position: relative;
  overflow: hidden;
  /* 下には、キャンバスの高さのつまみのぶん(36px)をあける */
  min-height: calc(var(--canvas-height, 500px) * var(--canvas-scale) + var(--stage-pad) * 2 + 36px);
  padding: var(--stage-pad) 24px;
  background: #ede9e5;
}
.change-count { position: absolute; right: 16px; bottom: 12px; z-index: 8; color: #766f69; font-size: 0.8rem; font-weight: 400; }

.canvas {
  /* 修正対象のUIはサイトの丸ゴシックを継承させない */
  font-family: var(--font-ui);
  /* 直す画面の太字は課題のデータ(参加者が付ける太さ)なので、こちらは太字の合成を許す */
  font-synthesis: weight style;
  width: 760px;
  /* 高さは参加者が変えられる(2026-09-27)。app.js が --canvas-height を書き換える */
  height: var(--canvas-height, 500px);
  position: absolute;
  top: var(--stage-pad);
  left: 50%;
  transform: translateX(-50%) scale(var(--canvas-scale));
  transform-origin: top center;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(26, 31, 47, 0.12);
  user-select: none;
}

.design-element { position: absolute; margin: 0; touch-action: none; white-space: pre-wrap; display: grid; align-content: center; }
.element-body { display: block; min-width: 0; }
.design-element.editing { outline: 2px solid var(--accent); outline-offset: 3px; cursor: text; touch-action: auto; }
.design-element:focus-visible { outline: 3px solid rgba(255,107,53,0.3); outline-offset: 4px; }
.design-element.selected { outline: 2px solid var(--accent); outline-offset: 3px; z-index: 5; }

.selection-label { position: absolute; left: -5px; bottom: calc(100% + 8px); padding: 2px 7px; border-radius: 5px; background: var(--accent); color: white; font-size: 11px; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.resize-handle { position: absolute; width: 12px; height: 12px; background: white; border: 2px solid var(--accent); border-radius: 3px; }
.resize-handle.nw { left: -8px; top: -8px; cursor: nwse-resize; }
.resize-handle.ne { right: -8px; top: -8px; cursor: nesw-resize; }
.resize-handle.sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.resize-handle.se { right: -8px; bottom: -8px; cursor: nwse-resize; }

.inspector { padding: 22px; }
/* 横並びのときは、編集パネルを左(ツールバー + 直す画面)と同じ高さにそろえ、あふれた分はパネルの中でスクロールする
   (2026-09-26ユーザー指示。パネルのほうが長いと、ページをスクロールしたときに直す画面が見えなくなっていた)。
   contain: size でパネルの中身が行の高さを決めないようにし、行の高さは左の編集エリアで決まる */
@media (min-width: 1041px) {
  .workspace { align-items: stretch; }
  .inspector { contain: size; overflow-y: auto; overscroll-behavior: contain; }
}
.inspector-empty { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.inspector-empty p { margin: 0 0 12px; color: var(--ink); font-weight: 400; }
.inspector-hints { display: grid; gap: 8px; margin: 0; padding-left: 1.1em; }
.field { display: grid; gap: 6px; color: #4b505c; font-size: 0.875rem; font-weight: 400; }
.field input, .field textarea { width: 100%; border: 1px solid #cdd1d9; border-radius: 9px; background: white; color: var(--ink); padding: 9px 10px; font-size: 1rem; font-weight: 400; line-height: 1.45; }
/* 入力済みの文字(濃い・やや太い)と見分けられるよう、プレースホルダーは薄く細く */
/* プレースホルダーは「まだ空」と一目で分かる薄さにする。サイト全体で太字をやめたので、入力済みの文字との差は
   色と大きさで作るしかない。白地で約2:1の暖かい灰色(入力済みの文字は約14:1)、入力の16pxより小さい14px。
   例文は欄を埋めないよう1行に収まる短さにする。2026-09-25に #8b9098・16px から変えた */
.field input::placeholder, .field textarea::placeholder { color: #bdb7b0; font-size: 0.875rem; font-weight: 400; opacity: 1; }
.field input[type="color"] { min-height: 44px; padding: 4px; }
.field textarea { resize: vertical; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.align-field { margin-top: 14px; }
.align-field small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
/* 要素全体の設定と紛れないよう、部分指定はひとまとまりに囲う */
.run-group { margin-top: 20px; padding: 14px; border: 1px solid #dfe2e8; border-radius: 12px; background: #f6f7f9; }
.run-group-title { margin: 0; color: #4b505c; font-size: 0.875rem; font-weight: 400; }
.run-group-note { margin: 2px 0 0; color: var(--muted); font-size: 0.8125rem; font-weight: 400; line-height: 1.5; }
.run-group .field-grid { margin-top: 10px; }
.run-group .run-deco { margin-top: 10px; }
.align-group { display: flex; gap: 6px; }
.run-grid { margin-top: 8px; }
.run-hint { margin: 8px 0 0; color: #9e2f1e; font-size: 0.78rem; line-height: 1.5; font-weight: 400; }
.field select { width: 100%; border: 1px solid #cdd1d9; border-radius: 9px; background: #fff; color: var(--ink); padding: 9px 10px; font-size: 0.95rem; font-weight: 400; }
.field textarea:disabled { background: #f3f4f6; color: #9aa0ab; }
.align-button { flex: 1; padding: 9px 0; border: 1px solid #cdd1d9; border-radius: 10px; background: #fff; color: var(--ink); font-size: 0.85rem; font-weight: 400; }
.align-button[aria-pressed="true"] { border-color: #a84325; background: #fff2ec; color: #a84325; }
.delete-button { width: 100%; margin-top: 20px; border: 1px solid #efc5bd; background: #fff8f6; color: #9e2f1e; border-radius: 10px; padding: 10px; font-weight: 400; }

.submission { margin-top: 64px; display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); }
.ask-block { display: grid; gap: 10px; align-content: start; }
.ask-message { position: relative; padding: 24px 26px; border: 1px solid #d8b59b; border-radius: 26px; background: #fffaf4; box-shadow: 0 8px 20px rgba(110, 73, 47, 0.07); text-align: center; }
.ask-message::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 20px; height: 20px; border-right: 1px solid #d8b59b; border-bottom: 1px solid #d8b59b; background: #fffaf4; transform: translateX(-50%) rotate(45deg); }
.ask-question { margin: 0; font-size: 1.6rem; font-weight: 400; line-height: 1.45; }
.ask-note { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.ask-characters { display: flex; align-items: flex-end; justify-content: center; max-width: 560px; margin: 0 auto; }
.ask-characters img { height: auto; }
.ask-tanuki { width: 56%; }
.ask-kuma { width: 53%; }
.ask-characters img + img { margin-left: -13%; }
.submission form { display: grid; gap: 16px; padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
/* 同意の前に読めるよう、注意事項はフォームの中に置く */
.submission-terms { position: relative; padding: 16px 18px; border-radius: 12px; background: var(--surface); color: var(--muted); }
.submission-terms h3 { margin: 0 0 8px; color: #4b505c; font-size: 0.85rem; font-weight: 400; }
/* 長いので箱は低くし、中をスクロールで読む。下端のぼかしで「続きがある」と分かるようにする */
.submission-terms-body { display: grid; gap: 2px; max-height: 108px; margin: 0; padding: 0 8px 14px 0; overflow-y: auto; overscroll-behavior: contain; }
.submission-terms-body:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: 6px; }
.submission-terms::after { content: ""; position: absolute; left: 18px; right: 26px; bottom: 16px; height: 22px; background: linear-gradient(to bottom, rgba(251, 247, 242, 0), var(--surface)); pointer-events: none; }
/* 注意事項は「知りたい順」の小見出し3つ + 資料に使うことの一文。muted は13px以上の決まりなので本文は13px */
.submission-terms-body h4 { margin: 8px 0 0; color: #a84325; font-size: 0.8125rem; font-weight: 400; line-height: 1.6; }
.submission-terms-body h4:first-child { margin-top: 0; }
.submission-terms-body p { margin: 0; font-size: 0.8125rem; line-height: 1.65; }
.submission-terms-body .submission-terms-use { margin-top: 10px; color: #4b505c; }
.submit-button { justify-self: center; min-width: 300px; border: 0; border-radius: 10px; background: var(--ink); color: white; padding: 18px 32px; font-size: 1.125rem; font-weight: 400; }
/* 同意にチェックするまでは押せない形で薄く出す。送信中(aria-busy)は待ちの形 */
.submit-button:disabled { cursor: not-allowed; opacity: 0.4; }
.submission-ai-note { margin: 0; color: var(--muted); font-size: 0.875rem; text-align: center; }
.submission-ai-note a { margin-left: 0.5em; color: var(--accent-dark); }
/* 判定の注記は13pxなので、accent-dark(14px以上だけ)は使わず、地の文の色のまま下線で示す */
.submit-button[aria-busy] { cursor: wait; opacity: 0.65; }
.consent-field { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.consent-field input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); }
/* エラーの赤は明るめの #d0341f(サイト全体で共通)。淡い赤の地で約4.6:1、白地で約4.9:1 */
/* 欄に結びつかない、まとめのエラー(課題ページの提出、総務部の送信失敗)。入力欄のすぐ下のエラー(.field-error)には「!」を付けない */
.form-error, .soumu-status.is-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; border-radius: 10px; background: #fff3f0; color: #d0341f; padding: 10px 12px; }
/* 文の頭に赤い三角の「!」(Lucide triangle-alert)。文字は setError が textContent で入れ替えるので、絵は疑似要素で出す */
.form-error::before, .soumu-status.is-error::before { content: ""; flex: none; width: 1.15em; height: 1.15em; margin-top: 0.2em; background-color: currentColor; -webkit-mask: url("/assets/icons/triangle-alert.svg") no-repeat center / contain; mask: url("/assets/icons/triangle-alert.svg") no-repeat center / contain; }

.result-panel,
.gallery {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* フォーム → 結果 → ギャラリーのあいだは、広めの余白と1本の線で区切る */
.result-panel, .gallery { position: relative; margin-top: 120px; }
.result-panel::before, .gallery::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 1px; background: var(--line); }
.result-panel { display: grid; grid-template-columns: 120px 160px minmax(0, 1fr); align-items: center; gap: 22px 28px; padding: clamp(24px, 4vw, 42px); }
.result-panel[hidden], .gallery[hidden] { display: none; }
.result-panel > img { width: 120px; height: 120px; object-fit: contain; }
.score-block { padding-right: 28px; border-right: 1px solid var(--line); }
.score-line { display: flex; align-items: baseline; gap: 4px; }
.score-line strong { font-size: 3.8rem; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.score-line span { color: var(--muted); font-weight: 400; }
.result-copy h2, .gallery h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -0.03em; }
.result-copy > p { color: var(--muted); }
.score-meta { margin: 8px 0 0; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.score-help { display: inline-block; margin-top: 10px; color: var(--accent-dark); font-size: 0.875rem; }
.check-result { grid-column: 1 / -1; }
/* 本題の判定の札。種別「会議」と同じ青緑で、共通の判定(寸法・色)と分ける */
.check-topic-tag { display: inline-block; margin-right: 8px; padding: 0 8px; border: 1px solid #d5e4ea; border-radius: 999px; background: #eaf2f5; color: var(--guide); font-size: 0.8125rem; font-weight: 400; vertical-align: 1px; }
/* 会議の課題の後日談。自動判定の下に、選んだ方針で翌月どうなったかを社員のセリフで見せる */
.aftermath { grid-column: 1 / -1; margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.aftermath-label { margin: 0; color: var(--accent-dark); font-size: 0.9375rem; }
.aftermath-title { margin: 4px 0 20px; color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 400; }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.check-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 12px; border-radius: 10px; background: var(--surface); }
.check-item strong { display: block; font-size: 0.9rem; }
.check-item span { color: var(--muted); font-size: 0.8125rem; line-height: 1.55; }
.check-mark { font-size: 1rem; font-weight: 400; line-height: 1.4; text-align: center; }
.check-bar { display: block; height: 5px; margin: 7px 0; border-radius: 999px; background: #e6e0d8; overflow: hidden; }
.check-bar i { display: block; height: 100%; border-radius: 999px; background: #9aa0ad; }
.check-item.is-pass .check-mark { color: #2f7a4f; }
.check-item.is-pass .check-bar i { background: #3f9366; }
.check-item.is-partial .check-mark { color: #b07a1e; }
.check-item.is-partial .check-bar i { background: #e0a83c; }
.check-item.is-fail, .check-item.is-partial { background: #fff5ef; }
.check-item.is-fail .check-mark { color: var(--accent-dark); }
.check-item.is-fail .check-bar i { background: var(--accent-dark); }
.check-item.is-skip { opacity: 0.7; }
.check-item.is-skip .check-mark { color: var(--muted); }
.check-item.is-skip .check-bar { display: none; }
/* 自動判定への納得。控えめなボタンを2つ並べ、選んだほうはエディタの揃えボタンと同じ「押されている」形にする */
.check-feedback { display: grid; gap: 10px; margin: 16px 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.check-feedback-question { margin: 0; color: var(--ink); font-size: 0.9375rem; }
.check-feedback-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.check-feedback-buttons .quiet-button { cursor: pointer; font: inherit; font-size: 0.875rem; }
.check-feedback-buttons .quiet-button[aria-pressed="true"] { border-color: #a84325; background: #fff2ec; color: #a84325; }
.check-feedback-note { display: grid; gap: 6px; }
.check-feedback-note label { color: var(--ink); font-size: 0.875rem; }
.check-feedback-note textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 0.9375rem; resize: vertical; }
.check-feedback-note .quiet-button { justify-self: start; cursor: pointer; font: inherit; font-size: 0.875rem; }
.check-feedback-thanks { margin: 0; color: var(--guide); font-size: 0.875rem; }
.gallery-button { border: 0; border-radius: 10px; background: var(--indigo); color: white; padding: 11px 16px; font-weight: 400; }

.gallery { padding: clamp(24px, 4vw, 42px); }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.gallery-heading > p { max-width: 440px; margin: 0; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.design-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; }
.design-preview { position: relative; width: 100%; aspect-ratio: 760 / 500; overflow: hidden; background: #eceef2; border-bottom: 1px solid var(--line); }
.mini-canvas { position: absolute; left: 0; top: 0; width: 760px; height: 500px; transform-origin: top left; background: white; font-family: var(--font-ui); font-synthesis: weight style; }
.mini-element { position: absolute; overflow: hidden; white-space: pre-wrap; display: grid; align-items: center; }
.card-copy { padding: 18px; }
.card-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-topline strong { font-size: 1rem; }
.card-topline span { color: var(--muted); font-size: 0.8125rem; }
.card-answers { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 12px 0 0; }
.card-answers dt { color: var(--muted); font-size: 0.8125rem; font-weight: 400; line-height: 1.6; white-space: nowrap; }
.card-answers dd { margin: 0; color: #454a55; font-size: 0.9rem; line-height: 1.6; }
.card-changes { margin: 12px 0 0; font-size: 0.8rem; }
.card-changes summary { color: var(--muted); font-weight: 400; cursor: pointer; }
.card-changes ul { margin: 6px 0 0; padding-left: 1.1em; color: #454a55; line-height: 1.6; }
.card-changes strong { font-weight: 400; }
.field-optional { margin-left: 6px; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
/* 必須の印。見出しのすぐ右に置く、薄い赤地の小さなピル型の札。文字はデザインシステムの tag の型(12px) */
.field-required { display: inline-block; margin-left: 6px; padding: 1px 8px 0; border-radius: 999px; background: #fbe9e5; color: #9d3a33; font-size: 0.75rem; letter-spacing: 0.04em; line-height: 1.5; vertical-align: 0.1em; white-space: nowrap; }
/* 札は12px(デザインシステムの tag)。accent-dark は14px以上の決まりなので、12pxでは濃い赤 #a84325 を使う */
.own-badge { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; background: #fff0ea; color: #a84325; font-size: 0.75rem; line-height: 1.6; }
.like-button { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #4b505c; font-size: 0.85rem; font-weight: 400; }
.like-button.is-liked { border-color: #e8a49a; background: #fff2ee; color: #b3402c; }
.like-button:disabled { opacity: 0.55; cursor: default; }
.like-heart { font-size: 1rem; line-height: 1; }
/* いいねの右に並ぶので、左をあける(以前はくっついていた、2026-09-27ユーザー指摘) */
.delete-own { margin-top: 12px; margin-left: 20px; border: 0; background: transparent; color: #8c3a2a; padding: 0; text-decoration: underline; font-size: 0.8rem; }
/* 受付の一時停止のあいだ(管理画面のスイッチ)に押せなくするボタン。提出ボタンと同じく薄くして、押せないことを形で伝える */
.delete-own:disabled, .check-feedback-buttons .quiet-button:disabled, .check-feedback-note .quiet-button:disabled, .align-group .align-button:disabled { cursor: not-allowed; opacity: 0.4; }
.gallery-empty { color: var(--muted); }

@media (max-width: 1040px) {
  .workspace { grid-template-columns: 1fr; }
  .brief { grid-template-columns: 1fr 165px; }
  .brief > img { width: 165px; height: 165px; margin-bottom: -8px; transform: translateX(-12px) rotate(2deg); }
  .brief-details { margin-top: 0; }
  .brief-content { padding-bottom: 0; }
  .brief-message { padding: 20px 22px; }
  .brief-ticket { margin-top: 14px; padding-top: 12px; }
}

@media (max-width: 680px) {
  /* 狭いときはロゴの下にナビを落とす。縦線は横並びのための印なので消す */
  .site-header { grid-template-columns: minmax(0, 1fr); }
  .nav-rule { display: none; }
  .portal-nav { gap: 4px 16px; }
  .brand-logo img { width: 42px; }
  main { padding-top: 20px; }
  /* スマホだけ、くま・たぬきと同じ「吹き出しが上・イラストが下」に積む */
  .brief { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .brief-content { grid-column: 1; grid-row: 1; width: 100%; }
  /* りすは吹き出しの脇役なので、画面幅の半分ほどに抑える */
  .brief > img { grid-column: 1; grid-row: 2; width: min(190px, 56vw); height: auto; margin: 0; transform: none; }
  .brief-message { padding: 18px 16px; border-radius: 22px; }
  /* スマホは吹き出しが上・りすが下なので、しっぽは下向き */
  .brief-message::before { top: auto; right: auto; left: 50%; bottom: -11px; border-top: 0; border-right: 1px solid #d8b59b; border-bottom: 1px solid #d8b59b; transform: translateX(-50%) rotate(45deg); }
  /* 見出しの大きさは 依頼の文(19px) > STEPの題名(18px) > 「どうしてこのデザインにしたの?」(17px) の順を崩さない */
  .brief h1 { font-size: 1.1875rem; }
  /* STEP は見出しの一部なので、スマホでもそのまま続けて、長い見出しは折り返す(2026-09-27)。
     大きさは依頼の文(19px)より小さい18pxのまま(上の大きさの順を崩さない) */
  .workspace-step-title { font-size: 1.125rem; }
  /* 「どうしてこのデザインにしたの?」。STEPの題名(スマホで約19px)より大きくならないようにする */
  .ask-question { font-size: 1.0625rem; }
  /* PCと同じく、ノートをりすの下半身に重ねて上半身だけのぞかせる。重ねる量はりすの大きさ(190px)の4割 */
  .brief-details { width: 100%; grid-template-columns: 1fr; gap: 16px; margin-top: -76px; padding: 24px 18px 18px; }
  .requirement-list { padding-top: 16px; padding-left: 0; border-top: 1px solid #d2d6db; border-left: 0; }
  .canvas-stage { --stage-pad: 12px; padding: var(--stage-pad) 12px; }
  .submission { grid-template-columns: 1fr; }
  .submit-button { width: 100%; }
  .result-panel { grid-template-columns: 82px 1fr; gap: 18px; }
  .result-panel > img { width: 82px; height: 82px; }
  .score-block { border: 0; padding: 0; }
  .result-copy { grid-column: 1 / -1; }
  .check-list { grid-template-columns: 1fr; }
  .gallery-heading { align-items: start; flex-direction: column; }
  .gallery-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* --- サイト全体のナビゲーション(TOP / プロダクトバックログ) --- */

/* 普通の内容ページの器(課題一覧など)。中身は1080pxまで。
   トップだけは帯を画面幅いっぱいに敷くので、下の .landing-main を使う */
.top-main {
  width: min(var(--site-width), 100%);
  margin: 0 auto;
  padding: 40px var(--site-pad-x) 80px;
}

/* トップ専用。帯を画面幅いっぱいに敷くため、幅も横パディングも持たせない。
   共通の main が width と横パディングを持っているので、どちらも打ち消す。
   打ち消し忘れると帯の左右にだけ地の色が残る */
.landing-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ページの締め。細い茶色の帯で、ページの下辺を閉じる。
   余った高さは本文が受け取る(body が縦のflex) */
body > main { flex: 1 0 auto; }

.site-footer {
  flex-shrink: 0;
  padding: 10px clamp(16px, 4vw, 56px);
  background: var(--brand-brown);
  text-align: center;
}

.site-footer-copy {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #fff;
}

/* 作り手の名乗りは、権利表記より一段下げる。狭いときは改行させる */
.site-footer-sep {
  margin: 0 0.75em;
  opacity: 0.5;
}
.site-footer-by {
  display: inline-block;
  opacity: 0.72;
}
@media (max-width: 480px) {
  .site-footer-sep { display: none; }
  .site-footer-by { display: block; }
}

.top-band-inner {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
}

/* ページのつかみ。課題一覧とトップで共有している */
.top-hero {
  padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 7vw, 72px);
  text-align: center;
}

/* トップのつかみだけ、下を詰める。
   次のPEOPLEが自前で上余白を持っているので、足すと空きすぎる */
.landing-hero {
  padding-top: clamp(40px, 7vw, 88px);
  padding-bottom: clamp(8px, 2vw, 24px);
}

/* メンバーを横一列に。切り抜きがまちまちなので、高さだけ揃えて足元を合わせる */
.top-crew {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2px, 1.2vw, 16px);
  margin: 0 auto clamp(8px, 1.6vw, 20px);
}

.top-crew img {
  flex: 0 0 auto;
  height: clamp(56px, 10vw, 108px);
  width: auto;
}

.top-logo {
  width: min(680px, 100%);
  /* ロゴと手紙の間。タグラインの下端から文の1行目までなので、
     見た目の余白はこの数値より少し広く感じる */
  margin: 0 auto clamp(34px, 5vw, 48px);
}

.top-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ロゴの下の文。誘いも説明もひと続きの説明文として、大きさを揃えて1段落に置く。
   文字を大きくしないのは、つかみの主役をロゴに譲るため。
   改行位置は <br> で全部決めているので、幅では折らない */
/* つかみの中でここだけ左寄せ。ノートに書いた文に見せるため、
   幅はいちばん長い行に合わせて絞り、箱ごと中央に置く */
/* 手紙として読ませるので左寄せ。罫線は左右に32pxずつはみ出させ、
   左だけさらに1文字ぶん(1em)空けて書き出しを下げる。
   箱の幅は変えていないので、線の位置は動かない */
.top-lead {
  width: min(744px, 100%);
  padding: 0 32px 0 calc(32px + 1em);
  margin: 0 auto;
  text-align: left;
  font-size: clamp(0.9375rem, 1.9vw, 1.0625rem);
  /* 行の高さと罫線の間隔を同じ 2em で揃える。こうすると文字が必ず線の上に乗り、
     文字サイズが画面幅で変わっても、ずれない */
  line-height: 2.4em;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2.4em - 1px),
    var(--line) calc(2.4em - 1px),
    var(--line) 2.4em
  );
}

/* 社名の読み。小さくするだけで、色は本文と同じにする(薄くすると読みが浮いて見える) */
.lead-reading {
  font-size: 0.8em;
}

/* つかみの改行は幅で切り替える。境目は760px。
   - lead-break-wide … 広いときだけ改行する(社名のあとで切る)
   - lead-break-narrow … 狭いときだけ改行する(1行に入らなくなってから切る) */
.top-lead .lead-break-wide { display: none; }
@media (min-width: 760px) {
  .top-lead .lead-break-wide { display: inline; }
  .top-lead .lead-break-narrow { display: none; }
}


/* 節の区切りは線ではなく、地の色と白い帯を交互に敷いて作る。
   カードが並ぶ節(PEOPLE・ROLE)は地の色のままにする。白い帯に白いカードを置くと沈むため */
.top-section {
  padding: clamp(44px, 7vw, 72px) 0;
}

/* 白い帯。地(--surface)との差はわざと小さい。広い面なので、これでも境目は分かる。
   もっとはっきり分けたいなら、ここをベージュ寄り(#f6eee4 など)にする */
.top-section.is-tinted {
  background: #ffffff;
}

/* つかみの直後の節(PEOPLE)だけ、上を詰める。
   つかみは帯を持たないので、節どうしと同じ間隔(72px)だと離れて見える。
   ただし詰めすぎると手紙の最終行と縦線がくっつくので、この中間をとっている。
   手紙との実際の間隔は、.landing-hero の padding-bottom との合計 */
.landing-hero + .top-section {
  padding-top: clamp(32px, 5vw, 56px);
}

/* 節の見出しは3段。短い茶色の縦線 → 英単語(ロゴと同じ書体) → 日本語のサブタイトル */
.top-section-heading {
  margin: 0 0 clamp(20px, 3vw, 32px);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-weight: 400;
}

.top-section-rule {
  width: 1px;
  height: 44px;
  background: var(--brand-brown);
  margin-bottom: 6px;
}

.top-section-en {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  /* Krona One はもともと字間が広いので、大きくするぶん詰める */
  letter-spacing: 0.02em;
  color: var(--brand-brown);
  line-height: 1.25;
}

.top-section-ja {
  font-size: 0.875rem;
  color: var(--muted);
}

/* メンバー。切り抜きの高さがまちまちなので、枠の高さを決めて足元を合わせる */
.top-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}

.top-member {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 20px 18px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  text-align: center;
}

.top-member img {
  height: 104px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 6px;
}

.top-member-name {
  font-size: 1.125rem;
  font-weight: 400;
}

.top-member-role {
  font-size: 0.875rem;
  color: var(--accent-dark);
}

/* 名前と肩書は中央のまま、説明文だけ左寄せ。
   justify-self: stretch でカード幅いっぱいに広げないと、箱ごと中央に残ってしまう */
.top-member-note {
  justify-self: stretch;
  margin-top: 6px;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* サービス紹介。文章と、直す前の画面を横に並べる */
.top-service {
  display: grid;
  /* 写真(右)を少し大きく見せる(2026-09-26) */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
@media (max-width: 720px) {
  .top-service { grid-template-columns: 1fr; }
  /* 縦に積むときは、先に画面を見せてから話を読ませる(横並びのときは文が左) */
  .top-service-screen { order: -1; }
  /* スマホではロゴ(と読み)を中央に置く。本文は左揃えのまま */
}

.top-service-text p {
  margin: 12px 0 0;
  color: var(--ink);
}
/* 課題用の架空のプロダクトだという注意(2026-09-26ユーザー指示)。
   形はまとめのエラー(.form-error)と同じ地と三角の「!」に赤い枠。文字は赤で、本文より一段小さい14px(ピンクの地との対比は4.6:1) */
.top-service-text .top-service-note { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px solid #d0341f; border-radius: 10px; background: #fff3f0; color: #d0341f; font-size: 0.875rem; line-height: 1.7; }
.top-service-note::before { content: ""; flex: none; width: 1.15em; height: 1.15em; margin-top: 0.25em; background-color: #d0341f; -webkit-mask: url("/assets/icons/triangle-alert.svg") no-repeat center / contain; mask: url("/assets/icons/triangle-alert.svg") no-repeat center / contain; }

/* サービス名はロゴで見せる(2026-09-25にロゴができた)。透明な余白は切ってある。
   原本は Obsidian の AIデザイナーリス/crunchmunch/crunch-munch.png */
.top-service-name {
  margin: 0;
  line-height: 0;
}
.top-service-logo {
  display: block;
  width: min(280px, 80%);
  height: auto;
}

/* 英字の名前は日本語話者が一度止まるので、初出にだけ読みを添える */
.top-service-reading {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* この節からは社内ポータルの中のページへ直接つながない(2026-09-26ユーザー判断。入口は下の扉 → ポータル)。
   スマホ(縦に積むとき)はロゴと読みを中央に置く。本文は左揃えのまま */
@media (max-width: 720px) {
  .top-service-logo { margin: 0 auto; }
  .top-service-reading { text-align: center; }
}

.top-service-screen {
  margin: 0;
}

.top-service-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(77, 56, 45, 0.12);
}

/* やることの4手順。広いときは横に4つ並べ、狭くなったら2列→1列に落とす */
.top-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 矢印を置くぶん、間をあけてある */
  gap: 32px;
}
@media (max-width: 860px) { .top-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .top-steps { grid-template-columns: 1fr; } }
/* この4枚だけ、他の節の960pxから左右にはみ出して広く組む。
   はみ出すぶんの余白が画面に残る幅になってから、段階的に広げる */
@media (min-width: 1140px) {
  .top-steps { margin-inline: -60px; }
}
@media (min-width: 1400px) {
  /* 画面の左右に96pxは残る。カード1枚は約278px */
  .top-steps { margin-inline: -180px; }
  .top-step-title { font-size: 1.0625rem; }
  .top-step-note { font-size: 0.9375rem; }
}

.top-step {
  counter-increment: step;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

/* カードとカードの間の矢印。gap(32px)にぴったり収める。
   縦位置は上の画像の中ほど。横1列のときだけ出し、2列・1列では順路が折れるので消す */
.top-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  /* 隙間(32px)の真ん中に置く。箱の右端を22px外に出すと、12pxの箱の中心が16pxに来る */
  right: -22px;
  width: 12px;
  height: 20px;
  transform: translateY(-50%);
  /* 枠線2本で作ると先端が斜めに切れるので、線の形をSVGで描いてマスクにする。
     stroke-linecap と linejoin を round にすると、先端も角も丸くなる。
     色はマスクなので、下の background-color がそのまま出る */
  background-color: var(--accent-dark);
  -webkit-mask: var(--chevron-right) no-repeat center / contain;
  mask: var(--chevron-right) no-repeat center / contain;
}
@media (max-width: 860px) {
  .top-step:not(:last-child)::after { content: none; }
}

/* カードの上半分は画面のキャプチャの席 */
.top-step-art {
  position: relative;
  /* 絵は4枚とも 2:1 に切りそろえてある(上はモニターが全部入り、下はリスの足が入らない位置。
     scripts/crop-image.swift で切った)。枠も同じ 2:1 なので、ここでは切れない */
  aspect-ratio: 2 / 1;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* カード側で overflow を切ると隙間の矢印まで消えるので、切るのはここだけ。
     角はカードの角丸(18px)から枠線1px分を引いた値で合わせる */
  border-radius: 17px 17px 0 0;
  overflow: hidden;
}

/* 手順の絵(リスが作業している場面。2026-09-25に画面のキャプチャから差し替えた)。
   枠いっぱいに敷き、形の違う分は中央で切る */
.top-step-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-step-body {
  display: grid;
  gap: 6px;
  padding: 16px 16px 20px;
}

.top-step-title::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  /* カードのあいだの矢印と同じ色。白抜きの数字とのコントラストは4.9
     (もとのオレンジ #f28a5b は2.3しかなく、小さい数字が読みにくかった) */
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.875rem;
  vertical-align: 2px;
}

.top-step-title {
  font-size: 1rem;
  font-weight: 400;
}

.top-step-note {
  color: var(--muted);
  font-size: 0.875rem;
}

/* やりたいこと。紙の見立てはやめて、項目のあいだの線だけ残す */
.next-note {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.next-note li {
  position: relative;
  padding: 9px 0 9px 1.2em;
  line-height: 1.7;
}

/* 各項目の下に線を引くと、あいだと最後の下に1本ずつ入る。上端だけ線がない形。
   li+li の border-top と併用すると、あいだが2本ぶんの太さになるので使わない */
.next-note li {
  border-bottom: 1px solid var(--line);
}

.next-note li::before {
  content: "・";
  position: absolute;
  left: 0;
  /* 上の余白と同じ値。ずらすと点が文字とそろわない */
  top: 9px;
  color: var(--accent-dark);
}

/* 「etc」は項目ではなく「まだ続く」の印。点も線も出さず、薄く右端に置く */
.next-note .is-etc {
  padding-left: 0;
  border-bottom: none;
  text-align: right;
  color: var(--muted);
  font-size: 0.875rem;
}
.next-note .is-etc::before { content: none; }

/* 入口。ここが本番なので、節の中でいちばん目立たせる */
.top-door {
  padding: clamp(36px, 6vw, 56px) clamp(20px, 4vw, 40px);
  border: 1px solid var(--line);
  /* ここは角を丸めない。ノートや手紙と同じ、紙の縁として扱う */
  border-radius: 0;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(77, 56, 45, 0.08);
  text-align: center;
}

/* ボタンの上の絵。四辺をぼかして、地に溶かす。
   横と縦に1枚ずつグラデーションのマスクを掛け、その重なりだけを残す(intersect)。
   楕円ひとつでぼかすと角が丸く落ちるが、この組み方だと四辺が均等に薄くなる */
.top-door-art {
  width: min(680px, 100%);
  margin: 0 auto 8px;
}

.top-door-art img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ページで唯一の本番ボタン。狭いときは横幅いっぱいまで伸ばす */
.top-door-button {
  display: inline-block;
  width: min(420px, 100%);
  /* 狭い画面で「インターンをはじめる →」が2行に折れないよう、
     文字と左右の余白を幅なりに縮める。455px以上では今までと同じ20px・40px */
  padding: 20px clamp(16px, 5vw, 40px);
  border-radius: 10px;
  background: var(--accent-dark);
  color: #fff;
  text-decoration: none;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(200, 91, 53, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.top-door-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(200, 91, 53, 0.34);
}

/* ※の断り書き。扉の中でいちばん小さい声。
   幅は制限しない。制限するとボタンと同じくらいの幅で折り返して、
   ボタンに揃えたように見えてしまう */
.top-door-notice {
  margin: 14px auto 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.challenge-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) { .challenge-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .challenge-list { grid-template-columns: 1fr; } }
/* プロダクトの絞り込み(クマのガイドの下)。デザインシステムの控えめなボタンを横に並べ、
   選んだものはエディタの揃えボタンと同じ「押されている」形(赤茶の枠と薄い地)にする */
.product-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(24px, 3vw, 32px); }
.product-filter-button { cursor: pointer; font: inherit; font-size: 0.875rem; }
.product-filter-button[aria-pressed="true"] { border-color: #a84325; background: #fff2ec; color: #a84325; }
.product-filter-count { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.product-filter-button[aria-pressed="true"] .product-filter-count { color: inherit; }
/* 状態ごとの区画。区画どうしは、ポータルの節と同じ余白で区切る */
.backlog-group + .backlog-group { margin-top: clamp(40px, 5vw, 60px); }
.portal-heading-count { color: var(--muted); font-size: 0.875rem; letter-spacing: 0.02em; }
/* シンプルなカード: 上に直す前の画面、下に題名と説明 */
.challenge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(77, 56, 45, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.challenge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(77, 56, 45, 0.1);
}
/* 準備中のカードは開けない。指を乗せても浮かせない。状態は「準備中」のバッジで伝わるので、半透明にはしない(2026-09-26ユーザー判断) */
.challenge-card.is-upcoming { cursor: not-allowed; user-select: none; }
.challenge-card.is-upcoming:hover { transform: none; box-shadow: 0 6px 18px rgba(77, 56, 45, 0.06); }
/* 薄い地に余白をとって、その上に「画面」を乗せる */
.challenge-card-screen { padding: 18px; background: #eeeae4; border-bottom: 1px solid var(--line); }
.challenge-card-preview { border: 1px solid #ddd6cd; border-radius: 0; background: #fff; box-shadow: 0 6px 16px rgba(77, 56, 45, 0.12); }
.challenge-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 20px;
  min-width: 0;
}
/* チケットの見出し帯。カードのいちばん上に細い行を1本通し、左に課題番号、右に種別の札。
   カードが「チケット」だと分かる形(2026-09-24に比較ページの4案から選んだ) */
.challenge-card-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px 8px 16px;
  border-bottom: 1px solid var(--line);
}
/* 課題の状態のバッジ(2026-09-26)。種別の札より優先度が高いので、同じピル型のまま、濃い地に白い文字にする
   (デザインシステムの「未読の件数の札」の仲間)。色は状態ごとに色相を分ける:
   提案募集中 = 赤茶(いま手を動かしてほしい)、準備中 = ガイドの青緑(予告。課題ページの注意の帯と同じ)、クローズ = 灰(終わったもの)。
   白い文字との対比は 6.0 / 5.8 / 8.1 */
.status-badge { display: inline-block; padding: 2px 10px; border: 1px solid transparent; border-radius: 999px; color: #ffffff; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1.6; white-space: nowrap; }
.status-badge[data-status="提案募集中"] { background: #a84325; }
.status-badge[data-status="準備中"] { background: var(--guide); }
.status-badge[data-status="クローズ"] { background: #4b505c; }
.status-badge:empty { display: none; }
.challenge-card-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* 種別の札(「デザイン」など)。ピル型で、色は種別ごとに固定。
   書体のウェイトは400しかないので太らせない(太らせるとブラウザの偽の太字になる) */
.challenge-card-eyebrow {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #f3d9cd;
  border-radius: 999px;
  background: #fff0ea;
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.6;
  white-space: nowrap;
}
.challenge-card-title-row { display: flex; align-items: center; gap: 10px; }
/* りすは題名の横に、肩から上だけ丸く切り抜いて添える */
.challenge-card-avatar {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
}
.challenge-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.challenge-card-title {
  font-size: 1.0625rem;
  line-height: 1.4;
}
/* 課題番号(Crunch-Munch-001)。見出し帯の左端に置く、灰色の小さな文字 */
.challenge-card-code {
  /* デザインシステムの「バッジの文字」(tag の型 12px、tag-ink)。薄い灰色(#9b948d)は地に対して約3:1で、
     文字は4.5:1の決まりを満たさなかったため、2026-09-25にこちらへ合わせた */
  color: #4b505c;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
/* 種別チップ。色は種別ごとに固定 */
.challenge-category { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #ece9e4; color: #4b505c; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.6; white-space: nowrap; }
/* UIデザインは青。画面を直す課題 */
.challenge-category[data-category="UIデザイン"], .challenge-card-eyebrow[data-category="UIデザイン"] { background: #e8f0ff; color: #2f5bb7; border-color: #cfdcf7; }
/* 要件定義は紫。青緑(ガイドの色)にしていたが、UIデザインの青と並ぶと見分けられなかった(2026-09-26ユーザー指摘)。
   これから足す札は、残りの色を使う: リサーチ 緑(#e6f5ec/#2f7a4f)、ライティング 黄(#fff7d6/#8a6400)、LP オレンジ(#fff0ea/#a84325) */
.challenge-category[data-category="要件定義"], .challenge-card-eyebrow[data-category="要件定義"] { background: #efe9fb; color: #5a3fa8; border-color: #d9cdf3; }
.challenge-category:empty { display: none; }
.challenge-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.challenge-card-reporters { display: flex; }
.challenge-card-reporter { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: #eef7fa; object-fit: cover; object-position: 50% 12%; margin-left: -8px; }
.challenge-card-reporter:first-child { margin-left: 0; }
.challenge-card-count { color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.challenge-card-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ギャラリーだけを見るモード(?view=gallery)。編集・投稿・結果は出さない */
.gallery-only .brief, .gallery-only .workspace-step-title, .gallery-only .workspace,
.gallery-only .submission, .gallery-only .result-panel { display: none; }
.gallery-only .gallery { margin-top: 0; }
.gallery-only .gallery::before { display: none; }

/* --- リスの業務日誌(4コマ) --- */

/* 下層ページの見出し。形をここで1つに決める(2026-09-24に案くらべで決定)。
   ヘッダーの直下に淡いベージュの細い帯を通し、そこに小見出しと題名だけを置く。
   下だけ、ヘッダーと同じ線(1px var(--line))で閉じる。上は引かない。
   説明文は帯に入れず、本文側の .page-lead に置く。 */
.page-band {
  background: #f3ede6;
  border-bottom: 1px solid var(--line);
}

/* 中の器は本文(.top-main)と同じ幅・同じ横パディング。題名と本文の左端がそろう。
   題名と小見出しは1行に並べ、文字の下端(ベースライン)をそろえる */
.page-band-inner {
  width: min(var(--site-width), 100%);
  margin: 0 auto;
  padding: 22px var(--site-pad-x);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* 小見出しは題名の右。狭い画面では折り返して下に落ちる */
.page-band-sub {
  margin: 0;
  color: #a84325;
  font-size: 13px;
  line-height: 1.5;
}

.page-band-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  /* 太字にしない。書体のウェイトは400しかないので、h1の既定(太字)は
     ブラウザが太らせた偽物になる。帯と大きさで十分に主役だと分かる */
  font-weight: 400;
  line-height: 1.3;
}

/* 帯のすぐ下に本文が続くので、本文の上の余白は詰める(既定の40pxよりは狭く) */
.page-band + .top-main {
  padding-top: 36px;
}

/* 線のアイコン。Lucide(ISC)から使うぶんだけ assets/icons/ に置いて自前配信している。
   使い方と足し方は assets/icons/README.md。絵そのものではなくCSSのマスクとして敷くので、
   色は下の background-color(= 文字の色)がそのまま出る。大きさは文字なり */
.icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  vertical-align: -0.2em;
}

.icon-lightbulb { --icon: url("/assets/icons/lightbulb.svg"); }
/* エディタの追加の道具(2026-09-27) */
.icon-type { --icon: url("/assets/icons/type.svg"); }
.icon-rectangle-ellipsis { --icon: url("/assets/icons/rectangle-ellipsis.svg"); }
.icon-text-cursor-input { --icon: url("/assets/icons/text-cursor-input.svg"); }
.icon-shapes { --icon: url("/assets/icons/shapes.svg"); }
.icon-square { --icon: url("/assets/icons/square.svg"); }
.icon-minus { --icon: url("/assets/icons/minus.svg"); }
.icon-circle { --icon: url("/assets/icons/circle.svg"); }
.icon-triangle { --icon: url("/assets/icons/triangle.svg"); }
.icon-circle-dot { --icon: url("/assets/icons/circle-dot.svg"); }
.icon-square-check { --icon: url("/assets/icons/square-check.svg"); }
.icon-letter-text { --icon: url("/assets/icons/letter-text.svg"); }
.icon-chevrons-up-down { --icon: url("/assets/icons/chevrons-up-down.svg"); }
.icon-clock { --icon: url("/assets/icons/clock.svg"); }
.icon-lock { --icon: url("/assets/icons/lock.svg"); }
.icon-triangle-alert { --icon: url("/assets/icons/triangle-alert.svg"); }
.icon-user { --icon: url("/assets/icons/user.svg"); }
.icon-menu { --icon: url("/assets/icons/menu.svg"); }
.icon-x { --icon: url("/assets/icons/x.svg"); }
.icon-refresh-cw { --icon: url("/assets/icons/refresh-cw.svg"); }
.icon-trash-2 { --icon: url("/assets/icons/trash-2.svg"); }
.icon-eye { --icon: url("/assets/icons/eye.svg"); }
.icon-layout-dashboard { --icon: url("/assets/icons/layout-dashboard.svg"); }
.icon-chart-column { --icon: url("/assets/icons/chart-column.svg"); }
.icon-inbox { --icon: url("/assets/icons/inbox.svg"); }
.icon-clipboard-list { --icon: url("/assets/icons/clipboard-list.svg"); }
.icon-palette { --icon: url("/assets/icons/palette.svg"); }
.icon-external-link { --icon: url("/assets/icons/external-link.svg"); }
.icon-settings { --icon: url("/assets/icons/settings.svg"); }
.icon-chevron-down { --icon: url("/assets/icons/chevron-down.svg"); }
.icon-gauge { --icon: url("/assets/icons/gauge.svg"); }
.icon-circle-check { --icon: url("/assets/icons/circle-check.svg"); }
.icon-smartphone { --icon: url("/assets/icons/smartphone.svg"); }
.icon-heart { --icon: url("/assets/icons/heart.svg"); }
.icon-thumbs-up { --icon: url("/assets/icons/thumbs-up.svg"); }
.icon-mail { --icon: url("/assets/icons/mail.svg"); }
.icon-images { --icon: url("/assets/icons/images.svg"); }
.icon-download { --icon: url("/assets/icons/download.svg"); }

/* ガイド。インターンへの案内をところどころに置くための部品(2026-09-24に案くらべで決定)。
   白地に、左だけガイド色の線。先頭には、案内する社員の顔(肩まで、丸く切る)を置き、
   本文はその社員が話しかける言葉で書く(バックログはクマ)。線のアイコンでもよい。
   見出しが要る場所では .guide-title を本文の上に足せる(いまは使っていない) */
.guide {
  display: flex;
  /* 顔は本文の1行目にそろえる。本文が何行になっても、縦の真ん中には寄せない(2026-09-26ユーザー指示) */
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 clamp(28px, 4vw, 40px);
  /* 左は線のすぐ内側なので、他の辺より詰める */
  padding: 10px 16px 10px 12px;
  /* 四辺は薄い線で閉じ、左だけガイド色の太い線にする(この順で書かないと左が上書きされる) */
  border: 1px solid #d5e4ea;
  border-left: 3px solid var(--guide);
  /* ガイド色(深い青緑)をごく薄くのばした地。暖色ばかりのページの中で、
     ここだけ寒色になる。薄いグレーの本文とのコントラストは4.7 */
  background: #eaf2f5;
  /* 影もガイド色を薄くのばしたもの。他のカードの影は茶色なので、
     青い地に重ねると濁る */
  box-shadow: 0 4px 12px rgba(47, 111, 107, 0.12);
}

/* 線のアイコンを置く場合。本文の1行目の高さに合わせ、色はガイド色 */
.guide > .icon {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 0.3em;
  color: var(--guide);
  font-size: 1rem;
}

/* 案内する社員の顔。肩まで入れて丸く切り、白い丸の上に乗せる。
   青い地の上で顔がはっきり浮き、社員証のように見える */
.guide-face {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /* 連絡の差出人アイコン(40px)とそろえる */
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  overflow: hidden;
  /* 連絡の差出人アイコンと同じ、ふちのある白い丸 */
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
}

.guide-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-title {
  margin: 0 0 4px;
  color: var(--guide);
  font-size: 0.8125rem;
}

.guide-body {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.85;
}

/* 帯から追い出した説明文。見出しに主役を譲るので小さめ。
   薄いグレーとの組み合わせでも、14pxで地とのコントラストは5.1あるので読める */
.page-lead {
  margin: 0 0 clamp(28px, 4vw, 40px);
  max-width: 46em;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.85;
}

/* 一覧は3列。カードの絵は各話の1コマ目だが、全部見せる必要はなく、
   16:9の窓で中央を切ったチラ見せにする。形が揃っていないと並びが落ち着かない */
.diary-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .diary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .diary-cards { grid-template-columns: minmax(0, 1fr); }
}

/* 絵とタイトルをひとつの箱に入れる。4コマは絵が密なので、囲わないと
   どこまでが1話ぶんなのか分からなくなる */
.diary-card a {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  /* 絵を箱の縁にくっつけず、少し浮かせる。4コマは絵が密なので、
     余白がないと箱ごと絵に見えてしまう */
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(93, 65, 47, 0.08);
  color: inherit;
  text-decoration: none;
}

.diary-card-art {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* 角の丸みは、外側の14pxからパディング10pxを引いた大きさに合わせる */
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

/* コマは縦長のものも横長のものもあるので、窓に合わせて中央を切る */
.diary-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diary-card a:hover {
  border-color: #9d3a33;
  box-shadow: 0 10px 24px rgba(93, 65, 47, 0.16);
}

.diary-card-body {
  display: grid;
  gap: 4px;
  align-content: start;
  /* 左右は箱のパディングに任せ、ここは上下だけ足す */
  padding: 12px 4px 4px;
}

.diary-card-body h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.diary-card a:hover h2 { color: #9d3a33; }

.diary-no {
  color: #9d3a33;
  font-size: 0.8rem;
}

/* 詳細。4コマは縦に長いので、読む幅を絞る */
.diary-detail {
  display: grid;
  gap: 16px;
  width: min(560px, 100%);
  margin: 0 auto;
}

/* 詳細の見出しは話数だけ。題名は漫画の中に描かれているので出さない */
.diary-detail-head {
  margin: 0;
  text-align: center;
  font-weight: 400;
}

.diary-detail-no {
  color: #9d3a33;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

.diary-strip {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(93, 65, 47, 0.08);
}

/* 前後の日誌・前後の課題(2026-09-27〜課題ページでも使う)。最初の1つでは「次へ」だけになるので、そのときは右端に寄せる */
.page-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: min(560px, 100%);
  margin: 40px auto 0;
}

.page-pager.is-next-only { justify-content: flex-end; }

.page-pager-link {
  display: grid;
  gap: 2px;
  max-width: 48%;
  color: inherit;
  text-decoration: none;
}

.page-pager-link.is-next { text-align: right; }

.page-pager-label {
  color: #9d3a33;
  font-size: 0.75rem;
}

.page-pager-title {
  font-size: 0.875rem;
  line-height: 1.45;
}

.page-pager-link:hover .page-pager-title { color: #9d3a33; }

.page-back {
  margin: 48px 0 0;
  text-align: center;
  font-size: 0.875rem;
}

.page-back a { color: var(--muted); }

/* 課題ページでは、上の提出や みんなのデザイン(下に大きな余白を持たない)から離す */
.challenge-pager { margin-top: 96px; }

/* 読み込めなかったときの一文(日誌・バックログ・課題ページで共用) */
.page-error {
  margin: 40px 0 0;
  text-align: center;
  color: var(--muted);
}

/* --- 総務部への連絡 --- */

.soumu-form {
  display: grid;
  gap: 20px;
  /* 横幅は上のガイドと同じ(本文の幅いっぱい) */
  width: 100%;
  padding: 26px clamp(18px, 3vw, 30px) 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(93, 65, 47, 0.08);
}

.soumu-form textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  line-height: 1.8;
  resize: vertical;
}

/* 入力済みの文字と見分けられる薄さにする(値は .field のプレースホルダーと同じ) */
.soumu-form textarea::placeholder {
  color: #bdb7b0;
  font-size: 0.875rem;
  font-weight: 400;
}

/* 送る前の注意書き。フォームの幅いっぱいに、グレーの地に入れて本文と分ける。
   角は丸めない。地は色みのない本当のグレー */
.soumu-note {
  margin: 0;
  padding: 12px 16px;
  background: #f0f0f0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.8;
}

/* 送るボタン。フォームが本文の幅いっぱいに広がったので、右端ではなく真ん中に置く(スマホでは幅いっぱい) */

/* フォームの見出し(連絡種別・連絡内容)。入力の中の文字(14px)より一段大きくし、入力との間も広めにとる */
.soumu-form .field { gap: 14px; }
.soumu-form .field > span:first-child { font-size: 1rem; }

/* 広い画面では、見出し(連絡種別・連絡内容)を入力の左に置く。見出しの列は4文字と「必須」の札まで収まる幅。見出しは短く、縦に積むと右が大きく空くため。
   狭い画面では今までどおり縦に積む */
@media (min-width: 681px) {
  .soumu-form .field { grid-template-columns: 120px minmax(0, 1fr); column-gap: 40px; }
  /* 種別はボタンの行の中央に、内容は入力欄の1行目にそろえる */
  .soumu-form .field > span:first-child { align-self: center; }
  .soumu-form label.field > span:first-child { align-self: start; padding-top: 12px; }
  /* まちがいの知らせは、見出しの列ではなく入力の列(右)に出す */
  .soumu-form .field > .field-error { grid-column: 2; }
}

/* 入力のまちがいの知らせ。その入力のすぐ下に、赤い小さな文字で出す */
/* 入力と見出しのあいだの gap(14px)ぶんを引き戻して、入力に寄せる(入力との間は6px) */
.field-error { display: block; margin-top: -8px; color: #d0341f; font-size: 0.8125rem; line-height: 1.6; }
.field textarea[aria-invalid="true"], .field input[aria-invalid="true"] { border-color: #d0341f; }
/* 課題ページの .field は gap が6pxなので、引き戻さずにそのまま入力の下へ置く */
.submission .field-error { margin-top: 0; }

/* ※の行は1行ずつ。折り返したときは※の後ろにそろえる(ぶら下げ) */
.soumu-note > span { display: block; padding-left: 1em; text-indent: -1em; }

/* 送れたあとの知らせ。フォームと同じ枠に入れ、真ん中に置く */
.soumu-done {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px var(--form-pad-x, 24px) 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(93, 65, 47, 0.08);
  text-align: center;
}
.soumu-done-title { margin: 0; font-size: 1.25rem; outline: none; }
.soumu-done-body { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.85; }
/* 戻るボタン。用事はもう済んでいるので、デザインシステムの控えめなボタン(.quiet-button)をそのまま使う。
   ここで足すのは上の余白とリンクの下線を消すことだけ */
.soumu-back { margin-top: 16px; }

.soumu-status {
  width: 100%;
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.soumu-status.is-error { margin-top: 16px; font-size: 1rem; }

/* 管理画面の連絡一覧。本文は長いので、改行を残してそのまま読ませる */
.inquiry-body {
  margin: 0;
  max-width: 44em;
  white-space: pre-wrap;
  line-height: 1.8;
}

/* ハンバーガーメニューのボタン(portal-nav.js が足す)。PCでは出さない */
.nav-toggle { display: none; }

@media (max-width: 680px) {
  /* ロゴとボタンを1行目の左右に置き、開いたナビは2行目に幅いっぱいで出す */
  .site-header.has-nav-toggle { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .has-nav-toggle .brand-block { grid-column: 1; grid-row: 1; }
  .has-nav-toggle .nav-toggle {
    grid-column: 2;
    grid-row: 1;
    display: inline-grid;
    place-items: center;
    /* 押せる大きさは44px。見た目の余白が右に寄りすぎないよう、ボタンの内側の余白ぶん外へ出す */
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-size: 20px;
  }
  .has-nav-toggle .nav-toggle:hover { background: #f3ede6; }
  /* たたんだナビ。高さ0で隠し、開くときは portal-nav.js が高さを動かしてスライドさせる。
     閉じ終わるまでは見えたままにし、閉じ終わってから visibility で隠す(隠れたリンクにフォーカスが入らないように) */
  .has-nav-toggle .portal-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    height: 0;
    margin-top: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
      margin-top 0.26s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.26s;
  }
  .has-nav-toggle.is-nav-open .portal-nav {
    height: auto;
    margin-top: 10px;
    visibility: visible;
    /* 開くときは少しゆっくり、最後をやわらかく止める */
    transition:
      height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
      margin-top 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s;
  }
  /* 縦に並べたときは、下線ではなく行の区切り線にする。いまいるページは文字の色だけで示す。
     線は各行の上に引く(ナビ自体に線を引くと、高さ0でも1本残ってしまう) */
  .has-nav-toggle .portal-nav a,
  .has-nav-toggle .portal-nav a:hover,
  .has-nav-toggle .portal-nav a[aria-current="page"] {
    padding: 13px 2px;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
  }
}

/* 管理人のブラウザにだけ出るリンク(portal-nav.js が足す)。ヘッダーの右端に歯車のアイコンだけで置く。
   押せる大きさは44px。見た目の右端がそろうよう、内側の余白ぶん外へ出す */
.site-header.has-admin { grid-template-columns: auto auto 1fr auto; }
.portal-nav-admin {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 10px;
  /* ナビのいまいるページ・区画バッジと同じ暗い赤 */
  color: #9d3a33;
  font-size: 20px;
}
.portal-nav-admin:hover { background: #f3ede6; }
@media (max-width: 680px) {
  /* スマホでは、ハンバーガーの左隣に置く */
  .site-header.has-admin { grid-template-columns: minmax(0, 1fr); }
  .site-header.has-nav-toggle.has-admin { grid-template-columns: minmax(0, 1fr) auto auto; }
  .has-admin .portal-nav-admin { grid-column: 2; grid-row: 1; margin-right: 0; }
  .has-nav-toggle.has-admin .nav-toggle { grid-column: 3; }
}

/* --- 社内ポータルのトップ --- */

/* 説明のページ(自動判定のしくみ /auto-check/)。本文と表だけの読み物 */
.doc-page p, .doc-page li { color: var(--ink); font-size: 0.9375rem; line-height: 1.9; }
/* .doc-page p の下12pxに負けないよう、リードの下は節どうしの間と同じだけ空ける */
.doc-page .page-lead { margin-bottom: clamp(40px, 5vw, 60px); color: var(--muted); font-size: 0.9375rem; }
.doc-page p { margin: 0 0 12px; }
.doc-page ol, .doc-page ul { margin: 0 0 12px; padding-left: 1.4em; }
/* 表は狭い画面で横にはみ出すので、枠の中だけ横に動かせるようにする */
.doc-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.doc-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 0.875rem; line-height: 1.7; }
.doc-table th, .doc-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; vertical-align: top; font-weight: 400; }
.doc-table thead th { color: var(--muted); background: var(--surface); }
.doc-table tbody th { width: 26%; }
.doc-table tr:last-child th, .doc-table tr:last-child td { border-bottom: 0; }
/* 判定結果の印の見本。課題ページの .check-item をそのまま使い、本文の箇条書きの字下げと行間だけ外す */
.doc-page .doc-check-legend { margin: 0 0 12px; padding-left: 0; }
.doc-page .doc-check-legend .check-item { line-height: 1.55; }
/* よくある質問。質問と答えが同じ書体で見分けにくいので、頭に Q / A の印を付け、1問ずつ線で区切る */
/* 自動判定のしくみ: 課題ごとの配分(100%の横棒)。色は dataviz の検証を通した2色(押しやすさ・読みやすさ #c07a4f / 本題 #008a7e)。
   色覚によっては近く見えるので、左右の順を固定し、2pxのすき間と棒の下の文字でも区別する */
.doc-page .alloc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 18px; padding: 0; list-style: none; }
.doc-page .alloc-legend li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.875rem; }
.alloc-swatch { width: 12px; height: 12px; border-radius: 3px; }
.alloc-swatch.is-basic, .alloc-segment.is-basic { background: #c07a4f; }
.alloc-swatch.is-topic, .alloc-segment.is-topic { background: #008a7e; }
.doc-page .alloc-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.alloc-row { padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.doc-page .alloc-title { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.alloc-code { color: var(--muted); font-size: 0.875rem; }
.alloc-bar-wrap + .alloc-bar-wrap { margin-top: 14px; }
.doc-page .alloc-policy { margin: 0 0 6px; font-size: 0.875rem; }
.alloc-bar { display: flex; gap: 2px; height: 20px; }
.alloc-segment { position: relative; min-width: 8px; outline-offset: 2px; }
.alloc-segment:first-child { border-radius: 4px 0 0 4px; }
.alloc-segment:last-child { border-radius: 0 4px 4px 0; }
.alloc-segment:only-child { border-radius: 4px; }
.alloc-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 2; transform: translateX(-50%); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 0.875rem; line-height: 1.5; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.alloc-segment:hover .alloc-tip, .alloc-segment:focus-visible .alloc-tip { opacity: 1; }
.alloc-values { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin-top: 8px; color: var(--ink); font-size: 0.875rem; line-height: 1.6; }
.alloc-value.is-topic { margin-left: auto; text-align: right; }
.alloc-value-name { color: var(--muted); }
.doc-page .alloc-note, .doc-page .alloc-status { margin: 10px 0 0; color: var(--muted); font-size: 0.875rem; }

.doc-faq { margin: 0; }
.doc-faq-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.doc-faq-item:first-child { padding-top: 4px; }
.doc-faq dt, .doc-faq dd { display: grid; grid-template-columns: 28px minmax(0, 1fr); margin: 0; }
.doc-faq dt { color: var(--ink); font-size: 1rem; line-height: 1.7; }
.doc-faq dd { margin-top: 8px; color: var(--ink); font-size: 0.9375rem; line-height: 1.9; }
.doc-faq-mark { font-size: 1rem; }
.doc-faq dt .doc-faq-mark { color: var(--accent-dark); }
.doc-faq dd .doc-faq-mark { color: var(--muted); }

/* 細かい数字は、知りたい人だけが開く */
.doc-details { margin-top: clamp(40px, 5vw, 60px); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.doc-details summary { padding: 16px 20px; color: var(--ink); font-size: 0.9375rem; cursor: pointer; }
.doc-details-body { padding: 0 20px 20px; }
.doc-page h3, .doc-details h3 { margin: 20px 0 10px; color: var(--ink); font-size: 1rem; font-weight: 400; }

/* 節と節のあいだ。トップのような帯は敷かず、余白だけで区切る */
.portal-section + .portal-section { margin-top: clamp(40px, 5vw, 60px); }

/* 節の見出し。トップの3段見出し(.top-section-heading)はここでは使わない。
   社内の掲示板なので、短い日本語と細い線だけにしている。
   頭に赤い横線を1本引いて、下の薄い線(節の底)と役割を分けている */
.portal-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.portal-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  background: #9d3a33;
}

/* お知らせ。左から日付・差出人(顔と名前)・本文。行の区切りは薄い線1本だけ */
.portal-notices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-notice {
  display: grid;
  /* 差出人の列は、顔の丸(40px)と、いちばん長い名前(総務部)が収まる幅 */
  grid-template-columns: 6.5em 48px minmax(0, 1fr);
  /* 顔の丸(40px)の左右は広めに空ける。日付と本文が丸に寄ると、行が詰まって見える */
  gap: 4px 18px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}

/* 日付は本文より一段下げた声。行の頭と本文の1行目の中心をそろえるため、
   小さくしたぶん行送りを本文に合わせてある */
.portal-notice-date {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.85;
}

.portal-notice-main {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
}

.portal-notice-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
}

/* 文の途中のリンク(課題の題名など)。文字と混ざるので、色だけでなく下線も引く */
.portal-notice-body a {
  color: #9d3a33;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* 指した先が読みにくくならないよう、マウスを乗せたら下線を外す */
.portal-notice-body a:hover { text-decoration: none; }

/* 名前は顔の下に。丸より小さい声にして、絵のほうを先に見せる */
.portal-notice-from {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* 本文のあとの但し書き。本文よりさらに小さい声にする */
.portal-notice-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* 行き先。本文の下に、矢印つきの短いリンクとして置く */
.portal-notice-link {
  color: #9d3a33;
  font-size: 0.8125rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.portal-notice-link::after { content: " →"; }
.portal-notice-link:hover { border-bottom-color: #9d3a33; }

/* 差出人。顔の丸と、その下に名前。誰からの連絡かを、本文を読む前に分かるようにする。
   丸が縦に並ぶので、同じ人の連絡が続いているかどうかも目で追える */
.portal-notice-sender {
  display: grid;
  justify-items: center;
  gap: 3px;
  align-content: start;
}

.portal-notice-face {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  /* 絵の縦横比に関わらず正円にする(中身は丸で切る) */
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  /* 本文の1行目の中心に合わせる(0.9375rem × 1.85 の行の中で) */
  margin-top: 1px;
}

.portal-notice-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 560px) {
  /* 日付は顔と本文の上に出す。6.5emの列を残すと本文が細くなりすぎる */
  .portal-notice { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; }
  .portal-notice-date { grid-column: 1 / -1; font-size: 0.75rem; line-height: 1.6; }
}

.portal-error {
  margin: 12px 0 0;
  color: #9d3a33;
  font-size: 0.875rem;
}

/* --- 課題の状態の注意(課題ページのヘッダーの下) ---
   画面幅いっぱいの帯に、本文の幅にそろえてアイコンと1文を置く。色は既存の値から:
   準備中はガイドの青緑(案内の色)、クローズは札の灰色(終わったもの) */
.status-banner { border-bottom: 1px solid var(--line); }
/* アイコンは文の1行目にそろえる。縦の真ん中には寄せない(2026-09-26ユーザー指示)。20pxのアイコンを24pxの行の中央に置くため、上に2px */
.status-banner-inner { display: flex; align-items: flex-start; gap: 10px; max-width: var(--site-width); margin: 0 auto; padding: 12px var(--site-pad-x); }
.status-banner p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.status-banner .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.status-banner.is-upcoming { background: #eaf2f5; border-color: #d5e4ea; color: var(--guide); }
.status-banner.is-closed { background: #ece9e4; border-color: #ddd6cd; color: #4b505c; }
/* 受付の一時停止(管理画面のスイッチ)。課題のクローズ(いつもの流れ)と違って異常な状態なので、まとめのエラーの箱と同じ赤にする(2026-09-26ユーザー指示)。
   送ったときに下に出るエラーと色がつながり、「この帯が理由だ」と分かる */
.status-banner.is-paused { background: #fff3f0; border-color: #f5d3cb; color: #d0341f; }
/* 一時停止の帯はヘッダーと一緒に上に固定する。portal-nav.js が、ヘッダーと帯を .sticky-top にまとめる */
.sticky-top { position: sticky; top: 0; z-index: 20; }
.sticky-top .site-header { position: relative; }

/* --- プロダクト資料(/products/crunch-munch/) --- 文書のページ(.doc-page)の部品をそのまま使い、ロゴと最後の注記だけ足す */
/* 文書のページの本文の決まり(.doc-page p)にガイドが負けないよう、バックログと同じ見た目に戻す */
.doc-page .guide-body { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.85; }
.product-doc-logo { display: block; width: min(240px, 60%); height: auto; margin: 4px 0 16px; }
.doc-page .product-doc-note { margin-top: clamp(40px, 5vw, 60px); padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
/* 課題ページの「サービス」の下から、プロダクト資料へ */
.service-doc-link { margin: 8px 0 0; font-size: 0.875rem; }
.service-doc-link a { color: var(--accent-dark); }


/* ---- 図形と入力の部品(2026-09-26) ----
   編集画面(.design-element)と小さな画面(.mini-element)で同じ見た目にする。入力の部品は見た目だけで、押しても動かない。
   印(ラジオの丸・チェック・セレクトの矢印)の色は、文字色(currentColor)に合わせる */
:is(.design-element, .mini-element).kind-circle { border-radius: 50% !important; }
/* 三角は、部品そのものを切り抜くと選択の枠やつまみまで切れるので、四角の部品の中に三角の塗りを描く。
   塗りの色は背景色の欄で決め、app.js が --fill に写す(部品の地は透明のまま) */
:is(.design-element, .mini-element).kind-triangle { background-color: transparent !important; border: 0 !important; }
:is(.design-element, .mini-element).kind-triangle::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill, #d8dbe2); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:is(.design-element, .mini-element):is(.kind-radio, .kind-checkbox) { display: flex; align-items: center; gap: 0.5em; }
:is(.design-element, .mini-element):is(.kind-radio, .kind-checkbox)::before { content: ""; flex: none; box-sizing: border-box; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-radius: 50%; }
:is(.design-element, .mini-element).kind-checkbox::before { border-radius: 0.2em; }
:is(.design-element, .mini-element).kind-radio.is-checked::before { background: radial-gradient(circle, currentColor 0 34%, transparent 38%); }
/* チェックが入ったら、四角を文字色で塗り、チェックの形(Lucide の check)をくり抜く(2026-09-27)。
   文字の「✓」は書体によって位置がずれた(ユーザー指摘)。四角そのものを描き分けるので、余白や大きさが変わってもずれない */
:is(.design-element, .mini-element).kind-checkbox.is-checked::before {
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/check.svg") no-repeat center / 78%, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("/assets/icons/check.svg") no-repeat center / 78%, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
:is(.design-element, .mini-element).kind-textbox { padding: 0 0.75em; }
:is(.design-element, .mini-element).kind-textarea { align-content: start; align-items: start; padding: 0.6em 0.75em; }
/* テキストエリアの右下の、大きさを変えるつまみの印 */
:is(.design-element, .mini-element).kind-textarea::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; opacity: 0.45; background: linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 70%, currentColor 70% 80%, transparent 80%); pointer-events: none; }
:is(.design-element, .mini-element).kind-select { display: flex; align-items: center; gap: 0.5em; padding: 0 0.75em; }
:is(.design-element, .mini-element).kind-select > .element-body { flex: 1; }
:is(.design-element, .mini-element).kind-select::after { content: ""; flex: none; width: 1em; height: 1em; margin-left: auto; background-color: currentColor; -webkit-mask: url("/assets/icons/chevron-down.svg") no-repeat center / contain; mask: url("/assets/icons/chevron-down.svg") no-repeat center / contain; }

/* 範囲選択の囲み */
.marquee { position: absolute; z-index: 200; border: 1px solid var(--accent); background: rgba(242, 138, 91, 0.1); pointer-events: none; }

/* 図形・入力を足す一覧。道具の並びが横スクロールするので、画面に固定して押したボタンの下に出す */
.add-menu { position: fixed; z-index: 60; display: grid; min-width: 180px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 18px rgba(77, 56, 45, 0.12); }
.add-menu[hidden] { display: none; }
.editor-toolbar .add-menu button { justify-content: flex-start; width: 100%; border: 0; border-radius: 8px; background: transparent; padding: 9px 12px; font-size: 0.875rem; cursor: pointer; }
.editor-toolbar .add-menu button:hover, .editor-toolbar .add-menu button:focus-visible { background: #f3ede6; }
.menu-chevron { width: 14px; height: 14px; color: var(--muted); }

/* 選んだ部品をそろえる道具(そろえるは3つずつ2段、等間隔は2つで1段) */
.arrange-field { margin-top: 0; margin-bottom: 14px; }
.arrange-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.arrange-grid .align-button { grid-column: span 2; }
.arrange-grid .arrange-wide { grid-column: span 3; }
.arrange-grid .align-button:disabled { cursor: not-allowed; opacity: 0.4; }
.arrange-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.8125rem; }

/* キャンバスの高さのつまみ(2026-09-27)。キャンバスの下の辺のすぐ下、中央に置く */
.canvas-height-handle { position: absolute; left: 50%; top: calc(var(--stage-pad) + var(--canvas-height, 500px) * var(--canvas-scale) + 6px); z-index: 7; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font: inherit; font-size: 0.8125rem; line-height: 1.5; cursor: ns-resize; touch-action: none; white-space: nowrap; }
.canvas-height-handle:hover, .canvas-height-handle.is-dragging { border-color: var(--accent); color: var(--ink); }
.canvas-height-handle .button-icon { width: 14px; height: 14px; }
.arrange-base { margin-bottom: 6px; }
.arrange-base[hidden] { display: none; }

/* 背景色・枠線の色の「透明」(2026-09-27)。色の欄の右に小さく置き、透明のあいだは色の欄を薄くする */
.color-row { display: flex; align-items: stretch; gap: 6px; }
.color-row input[type="color"] { flex: 1; min-width: 0; }
.color-row .transparent-button { flex: none; padding: 0 10px; font-size: 0.8125rem; }
.color-row input.is-transparent { opacity: 0.35; }

.group-field { margin-top: 0; margin-bottom: 14px; }
.group-field .align-button:disabled { cursor: not-allowed; opacity: 0.4; }

/* 元に戻す・やり直す・最初に戻す(2026-09-27) */
.tool-actions { display: flex; align-items: center; gap: 8px; }
.tool-actions .quiet-button:disabled { cursor: not-allowed; opacity: 0.4; }

/* 基準線(2026-09-27)。キャンバスと同じ位置・同じ縮尺の層を重ね、上下左右に線を置く。
   線は端からの距離で置くので、キャンバスの高さを変えても下の線は下の端についてくる。
   線の当たり判定は9px、見える線は1px。色はデザインシステムの indigo(編集の状態を示す青)。保存には入らない */
.guide-layer { position: absolute; top: var(--stage-pad); left: 50%; z-index: 6; width: 760px; height: var(--canvas-height, 500px); transform: translateX(-50%) scale(var(--canvas-scale)); transform-origin: top center; pointer-events: none; }
.guide-layer[hidden] { display: none; }
.canvas-guide { position: absolute; pointer-events: auto; touch-action: none; }
.canvas-guide::before { content: ""; position: absolute; background: rgba(90, 97, 214, 0.55); }
.canvas-guide.is-vertical { top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.canvas-guide.is-vertical[data-guide="left"] { margin-left: -4px; }
.canvas-guide.is-vertical[data-guide="right"] { margin-right: -4px; }
.canvas-guide.is-vertical::before { top: 0; bottom: 0; left: 4px; width: 1px; }
.canvas-guide.is-horizontal { left: 0; right: 0; height: 9px; cursor: ns-resize; }
.canvas-guide.is-horizontal[data-guide="top"] { margin-top: -4px; }
.canvas-guide.is-horizontal[data-guide="bottom"] { margin-bottom: -4px; }
.canvas-guide.is-horizontal::before { left: 0; right: 0; top: 4px; height: 1px; }
.canvas-guide:hover::before, .canvas-guide.is-dragging::before { background: #5a61d6; }
/* 動かしているあいだだけ、端からの距離を出す */
.canvas-guide-value { position: absolute; display: none; padding: 1px 6px; border-radius: 4px; background: #5a61d6; color: #fff; font-family: var(--font-ui); font-size: 11px; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.canvas-guide.is-dragging .canvas-guide-value { display: block; }
.canvas-guide.is-vertical .canvas-guide-value { top: 8px; left: 10px; }
.canvas-guide.is-vertical[data-guide="right"] .canvas-guide-value { left: auto; right: 10px; }
.canvas-guide.is-horizontal .canvas-guide-value { left: 8px; top: 10px; }
.canvas-guide.is-horizontal[data-guide="bottom"] .canvas-guide-value { top: auto; bottom: 10px; }
#guideToggle[aria-pressed="true"] { border-color: #a84325; background: #fff2ec; color: #a84325; }

/* マークだけのボタン(元に戻す・やり直す・最初から・基準線)。押しやすさのため、縦横をそろえる */
.editor-toolbar .quiet-button.icon-only { justify-content: center; min-width: 38px; padding: 8px 10px; }
.editor-toolbar .quiet-button.icon-only .button-icon { width: 18px; height: 18px; }

/* 追加の道具もマークだけ(2026-09-27)。マークは少し大きく、一覧の中はマークと名前を横に並べる */
.editor-toolbar .tool-group button.icon-only { justify-content: center; min-width: 40px; padding: 8px 10px; }
.editor-toolbar .tool-group .icon { width: 18px; height: 18px; vertical-align: 0; }
.editor-toolbar .tool-group button[data-menu] { gap: 2px; padding-right: 6px; }
.editor-toolbar .add-menu button { gap: 10px; }
.editor-toolbar .add-menu .icon { width: 18px; height: 18px; color: var(--muted); vertical-align: 0; }