@charset "UTF-8";

/* ============================================================
   読書推せん文ワークショップ

   デザイン基準幅は 1280px。`--u` が「カンプ上の 1px」を表し、
   画面幅に合わせてレイアウト全体を等比縮小する。
   文字だけは `--ut` を使い、可読性のため縮小に下限を設ける。
   写真の 2 列組みなど、構成は画面幅によらず変えない。

   `--uy` は縦の余白（見出しと本文のあき、囲みの内側のあき）専用。
   PC では --u と同値。SP では文字の縮小に下限があるぶん、余白も
   同じ下限で止めないと文字だけ大きく余白だけ詰まった組みになる。
   ============================================================ */

.ws {
  --u: calc(100vw / 1280);
  --ut: max(0.667px, var(--u));
  --uy: var(--u);

  --ws-blue: #ace4f9;
  --ws-border: #0d77c9;
  --ws-box: #f3fcff;
  --ws-yellow: #fdd43e;
  --ws-yellow-pale: #fffcdb;
  --ws-peach: #f9cdac;
  --ws-teal: #41a0af;
  --ws-grid: #99d9f6;
  --ws-ink: #221815;
  --ws-navy: #2f4492;
  --ws-orange: #ff8b00;
  --ws-step-key: #ee8d42; /* Step パネルの見出し文字 */
  --ws-step-line: #efa35a; /* Step パネルの枠線・区切り線 */

  /* カンプ上の共通寸法 */
  --ws-col: calc(654 * var(--u)); /* 本文カラム */
  --ws-inner: calc(813 * var(--u)); /* 囲みボックス */
  --ws-inner-col: calc(648 * var(--u)); /* 囲みボックス内の本文 */

  /* ヘッダーは position:fixed。css/header.css のブレークポイントに合わせて逃がす */
  --ws-header: 96px;

  position: relative;
  overflow: hidden;
  padding-top: calc(var(--ws-header) + 74 * var(--uy));
  background: #fff;
  color: var(--ws-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  /* css/header.css の body { letter-spacing: .07em } は 1.12px の絶対値として
     継承されるため、見出しや小さい文字で効きすぎる。一度切って、
     カンプで字送りが入っている本文だけ個別に指定する */
  letter-spacing: normal;
  line-height: 1.889;
  text-align: center;
}

@media (min-width: 1281px) {
  .ws {
    --ws-header: clamp(96px, calc(96px + (100vw - 1280px) * 0.02), 110px);
  }
}

@media (max-width: 1100px) {
  .ws {
    --ws-header: 90px;
  }
}

@media (max-width: 1000px) {
  .ws {
    --ws-header: 82px;
  }
}

@media (max-width: 800px) {
  .ws {
    --ws-header: 79px;
  }
}

@media (max-width: 750px) {
  .ws {
    --ws-header: 71px;
  }
}

/* スクロールバー分を含まない実幅から --u を出す */
@supports (container-type: inline-size) {
  .ws {
    container-type: inline-size;
    --u: calc(100cqw / 1280);
  }
}

/* 基準幅を超えたらカンプ等倍で止める */
@media (min-width: 1280px) {
  .ws {
    --u: 1px;
  }
}

/* リセットは :where() で詳細度 0 にし、下のクラス指定が必ず勝つようにする */
:where(.ws) :where(p, h1, h2, h3, figure, figcaption, ul, li) {
  margin: 0;
  padding: 0;
}

:where(.ws) :where(ul) {
  list-style: none;
}

:where(.ws) :where(img) {
  display: block;
  width: 100%;
  height: auto;
}

/* 本文ブロック。行頭を揃えたいので左寄せ。
   字送りはカンプ実測（1行あたり約33文字）に合わせて 0.1em */
.ws-body {
  width: var(--ws-col);
  margin-inline: auto;
  font-size: calc(18 * var(--ut));
  letter-spacing: 0.1em;
  text-align: left;
}

.ws-body p + p {
  margin-top: calc(34 * var(--ut));
}

/* 1行なら中央に見え、折り返したときは行頭が揃うよう左寄せにする */
.ws-caption {
  width: fit-content;
  max-width: 100%;
  margin: calc(5 * var(--uy)) auto 0;
  font-size: max(10px, calc(13 * var(--ut)));
  line-height: 1.462;
  text-align: left;
}

/* 見出し */
.ws-h2 {
  font-size: calc(29 * var(--ut));
  font-weight: 700;
  line-height: 1.752;
}

/* ------------------------------------------------------------
   キービジュアル
   ------------------------------------------------------------ */

/* KV は色面が画面いっぱいに広がるので、ヘッダーとのあいだの
   白場は作らずヘッダーに続ける。.ws の padding-top（見出しページ用の
   74px）をそのぶん相殺する。この帯はトップページにしかない */
.ws-kv {
  position: relative;
  margin-top: calc(-74 * var(--uy));
}

.ws-kv__bg,
.ws-kv__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-kv__main {
  position: relative;
  width: calc(934 * var(--u));
  margin: 0 auto;
  padding-top: calc(16 * var(--uy));
  padding-bottom: calc(27 * var(--uy));
}

/* ------------------------------------------------------------
   トップ 導入文
   ------------------------------------------------------------ */

.ws-intro {
  /* 見出しブロックを外したので、KV との空きを半分に詰めている */
  padding: calc(70 * var(--uy)) 0 0;
}

.ws-intro__ttl {
  font-size: calc(29 * var(--ut));
  font-weight: 700;
  line-height: 1.4;
}

.ws-intro__sub {
  margin-top: calc(16 * var(--uy));
  font-size: calc(25 * var(--ut));
  font-weight: 700;
  line-height: 1.4;
}

/* 見出しブロックを外したので、本文を直接受ける */
.ws-intro .ws-body {
  margin-top: 0;
}

/* ------------------------------------------------------------
   理事メッセージ（方眼グリッド背景）
   ------------------------------------------------------------ */

.ws-message {
  position: relative;
  margin-top: calc(90 * var(--uy));
  padding-top: calc(78 * var(--uy));
}

/* グリッドはカンプではベクター。画像を敷かず CSS で描く。
   1マスぶんをタイルにしているので background-position でずらせる。

   3枚目のレイヤーは下端に引く閉じ線。タイルは上端に線を引く作りなので、
   これがないと一番下の横線が描かれず、縦線が切りっぱなしに見える */
.ws-message__grid {
  --ws-grid-pitch: calc(47.3 * var(--u));
  --ws-grid-shift: calc(15 * var(--u)); /* 横方向の位置調整 */
  --ws-grid-height: calc(100% + 83 * var(--u));

  position: absolute;
  inset: 0 0 auto;
  height: var(--ws-grid-height);
  background-image:
    linear-gradient(to right, var(--ws-grid) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--ws-grid) 0 1px, transparent 1px),
    linear-gradient(var(--ws-grid), var(--ws-grid));
  background-size:
    var(--ws-grid-pitch) 100%,
    100% var(--ws-grid-pitch),
    100% 1px;
  background-position:
    var(--ws-grid-shift) 0,
    0 0,
    0 100%;
  background-repeat: repeat, repeat, no-repeat;
}

/* 高さをマス目の整数倍に切り上げ、一番下の行が欠けないようにする。
   1px 引いているのは、ちょうど整数倍のときに浮動小数の誤差（0.1px 程度）で
   1マス余計に切り上がるのを防ぐため */
@supports (height: round(up, 10px, 3px)) {
  .ws-message__grid {
    height: round(up, calc(var(--ws-grid-height) - 1px), var(--ws-grid-pitch));
  }
}

.ws-message__box {
  position: relative;
  box-sizing: border-box;
  width: var(--ws-inner);
  margin-inline: auto;
  padding: calc(27 * var(--uy)) 0 calc(100 * var(--uy));
  border: calc(2 * var(--u)) solid var(--ws-border);
  border-radius: calc(10 * var(--u));
  background: var(--ws-box);
}

.ws-message__ttl {
  font-size: calc(29 * var(--ut));
  font-weight: 700;
  line-height: 1.752;
  color: var(--ws-border);
}

/* カンプでは行ごとに黄色のマーカー罫（線幅7px）が引かれている */
.ws-message__ttl span {
  background: linear-gradient(
    transparent 65%,
    var(--ws-yellow) 65%,
    var(--ws-yellow) 82%,
    transparent 82%
  );
}

.ws-message__name {
  margin-top: calc(30 * var(--uy));
  font-size: calc(25 * var(--ut));
  font-weight: 700;
}

.ws-message__box .ws-body {
  width: var(--ws-inner-col);
  margin-top: calc(47 * var(--uy));
}

.ws-message__figure {
  width: calc(536 * var(--u));
  margin: calc(62 * var(--uy)) auto 0;
}

.ws-message__figure .ws-caption {
  margin-top: calc(6 * var(--uy));
}

/* ------------------------------------------------------------
   2026年度 プログラム紹介
   ------------------------------------------------------------ */

.ws-programs {
  padding: calc(185 * var(--uy)) 0 calc(111 * var(--uy));
}

.ws-programs__box {
  box-sizing: border-box;
  width: calc(815 * var(--u));
  margin-inline: auto;
  padding: calc(46 * var(--uy)) 0 calc(43 * var(--uy));
  border-radius: calc(10 * var(--u));
  background: var(--ws-blue);
}

.ws-programs__icon {
  width: calc(38 * var(--u));
  margin-inline: auto;
}

.ws-programs__ttl {
  margin-top: calc(19 * var(--uy));
  font-size: calc(35 * var(--ut));
  font-weight: 700;
  line-height: 1.543;
}

.ws-programs__lead {
  width: calc(642 * var(--u));
  margin: calc(41 * var(--uy)) auto 0;
  font-size: calc(15 * var(--ut));
  letter-spacing: 0.1em;
  line-height: 2.267;
  text-align: justify;
}

/* プログラムカード 2枚 */
.ws-cards {
  display: flex;
  justify-content: center;
  gap: calc(32 * var(--u));
  margin-top: calc(38 * var(--uy));
}

.ws-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: calc(345 * var(--u));
  overflow: hidden;
  border: calc(2 * var(--u)) solid #000;
  border-radius: calc(10 * var(--u));
  background: #fff;
  /* css/header.css の li { text-align: justify } を打ち消す */
  text-align: center;
}

.ws-card__head {
  padding: calc(14 * var(--uy)) 0 calc(22 * var(--uy));
  border-bottom: calc(2 * var(--u)) solid #000;
  background: var(--ws-box);
}

/* display:table で行ボックスを作らずに中央寄せする */
.ws-card__tag {
  display: table;
  margin: 0 auto calc(11 * var(--uy));
  padding: calc(2.7 * var(--uy)) calc(14 * var(--u));
  border: calc(1 * var(--u)) solid var(--ws-navy);
  border-radius: calc(3 * var(--u));
  font-size: calc(14 * var(--ut));
  font-weight: 700;
  line-height: 1.4;
  color: var(--ws-navy);
}

.ws-card__lead {
  font-size: calc(17.5 * var(--ut));
  font-weight: 700;
  line-height: 1.4;
}

.ws-card__ttl {
  font-size: calc(28 * var(--ut));
  font-weight: 700;
  line-height: 1.4;
}

.ws-card__ttl span {
  display: block;
  font-size: calc(23 * var(--ut));
}

.ws-card__school {
  margin-top: calc(18 * var(--uy));
  font-size: calc(18 * var(--ut));
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--ws-navy);
}

.ws-card__body {
  width: calc(274 * var(--u));
  margin: calc(10 * var(--uy)) auto calc(14 * var(--uy));
  font-size: calc(18 * var(--ut));
  letter-spacing: 0.1em;
  text-align: justify;
}

.ws-card__btn {
  width: calc(274 * var(--u));
  margin: auto auto calc(25 * var(--uy));
  transition: opacity 0.2s;
}

.ws-card__btn:hover {
  opacity: 0.75;
}

/* ------------------------------------------------------------
   下層ページ（2026/01, 2026/02 共通）
   ------------------------------------------------------------ */

.ws-head {
  width: calc(903 * var(--u));
  margin: calc(1 * var(--uy)) auto 0;
}

.ws-jump {
  margin-top: calc(59 * var(--uy));
  font-size: calc(18 * var(--ut));
}

.ws-jump a {
  color: var(--ws-orange);
  text-decoration: none;
}

.ws-jump a:hover {
  text-decoration: underline;
}

.ws-jump__note {
  display: block;
}

/* 資料名の途中（「ペルソナカ／ード」など）で折り返さないよう、
   まとまり単位で改行させる。長いガイド名は
   「『＜本との出会いを発見する＞」＋「読書推せん文ワークショップ　実践ガイド』」の
   2つに分けてあり、SP で折り返すときは必ず「＞」の後ろで折れる */
.ws-jump__doc {
  display: inline-block;
}

/* ガイド名に添えるプログラム名。途中で折り返させない */
.ws-jump__prog {
  display: inline-block;
}

.ws-video {
  width: calc(500 * var(--u));
  margin: calc(69 * var(--uy)) auto 0;
}

/* Vimeo の埋め込み。サムネイルをクリックしたら iframe を差し込む方式で、
   仕組みは js/vimeo-lazy-embed.js（special02 と共通）。
   padding-top の % は親要素の幅を基準にしてしまうので aspect-ratio を使う。
   動画は石巻・下関とも 16:9（426x240） */
.ws-vimeo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #efefef;
  overflow: hidden;
}

.ws-vimeo iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.ws-vimeo-thumb {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.ws-vimeo-thumb .thumb,
.ws-vimeo-thumb .bg {
  position: absolute;
  inset: 0;
  background: #efefef;
}

.ws-vimeo-thumb .thumb {
  z-index: 2;
}

.ws-vimeo-thumb .bg {
  z-index: 1;
}

.ws-vimeo-thumb .thumb picture,
.ws-vimeo-thumb .thumb img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 再生ボタン（丸＋三角）。special02 と同じ見た目 */
.ws-vimeo-thumb .thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: #ff5a67;
  box-shadow: 0 12px 24px rgba(255, 90, 103, 0.18);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

.ws-vimeo-thumb .thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-38%, -50%) scale(1);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
  transition: transform 0.28s ease;
}

/* ホバー時に広がるリング */
.ws-vimeo-thumb .bg::before,
.ws-vimeo-thumb .bg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.ws-vimeo-thumb .bg::before {
  width: 72px;
  height: 72px;
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 90, 103, 0.18);
  transform: translate(-50%, -50%) scale(0.88);
}

.ws-vimeo-thumb .bg::after {
  width: 88px;
  height: 88px;
  border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(255, 90, 103, 0.92);
  transform: translate(-50%, -50%) scale(0.82) rotate(0);
}

.ws-vimeo-thumb:focus-visible {
  outline: 3px solid #21bbb6;
  outline-offset: -1px;
}

@media (hover: hover) {
  .ws-vimeo-thumb:hover .thumb::before,
  .ws-vimeo-thumb:focus-visible .thumb::before {
    transform: translate(-50%, -50%) scale(1.16);
    box-shadow: 0 18px 34px rgba(255, 90, 103, 0.3);
    background: #ff4758;
  }

  .ws-vimeo-thumb:hover .thumb::after,
  .ws-vimeo-thumb:focus-visible .thumb::after {
    transform: translate(-38%, -50%) scale(1.14);
  }

  .ws-vimeo-thumb:hover .bg::before,
  .ws-vimeo-thumb:focus-visible .bg::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .ws-vimeo-thumb:hover .bg::after,
  .ws-vimeo-thumb:focus-visible .bg::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
    transition: opacity 0.28s ease, transform 1.8s linear;
  }
}

/* 読み込み中 */
.ws-vimeo-thumb.is-loading .thumb::before,
.ws-vimeo-thumb.is-loading .thumb::after {
  display: none !important;
}

.ws-vimeo-thumb.is-loading .bg::before,
.ws-vimeo-thumb.is-loading .bg::after {
  opacity: 0 !important;
  animation: none !important;
}

.ws-vimeo-thumb.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  background: rgba(0, 0, 0, 0.4);
}

.ws-vimeo-thumb.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ws-loading-spinner 1s linear infinite;
}

@keyframes ws-loading-spinner {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* はじめに + アイスブレイク（水色の囲み） */
.ws-open {
  box-sizing: border-box;
  width: var(--ws-inner);
  margin: calc(85 * var(--uy)) auto 0;
  padding: calc(46 * var(--uy)) 0 calc(49 * var(--uy));
  border-radius: calc(10 * var(--u));
  background: var(--ws-box);
}

.ws-open__ttl {
  width: calc(282 * var(--u));
  margin-inline: auto;
}

.ws-open .ws-body,
.ws-sec .ws-body {
  width: var(--ws-inner-col);
}

.ws-open__body {
  margin-top: calc(53 * var(--uy));
}

/* 写真のあとに続く本文は詰める */
.ws-figure + .ws-body {
  margin-top: calc(46 * var(--uy));
}

/* アイスブレイクから主プログラムへの区切り */
.ws-arrow {
  width: calc(50 * var(--u));
  margin: calc(35 * var(--uy)) auto 0;
}

/* 主プログラムの各セクション */
.ws-sec {
  margin-top: calc(86 * var(--uy));
}

.ws-open .ws-sec {
  margin-top: calc(63 * var(--uy));
}

.ws-arrow + .ws-sec {
  margin-top: calc(33 * var(--uy));
}

.ws-sec__ttl {
  font-size: calc(29 * var(--ut));
  font-weight: 700;
  line-height: 1.752;
}

.ws-sec__body {
  margin-top: calc(40 * var(--uy));
}

/* 大きい写真 1点 */
.ws-figure {
  width: calc(536 * var(--u));
  margin: calc(56 * var(--uy)) auto 0;
}

.ws-open .ws-figure {
  margin-top: calc(46 * var(--uy));
}

/* 写真 2点並び。画面幅が狭くても 1列に折り返さない */
.ws-pair {
  display: flex;
  justify-content: center;
  gap: calc(21 * var(--u));
  margin-top: calc(35 * var(--uy));
}

.ws-pair figure {
  width: calc(292 * var(--u));
}

/* 本文の左右に写真を回り込ませる段 */
.ws-wrap {
  width: var(--ws-inner-col);
  margin: calc(40 * var(--uy)) auto 0;
  font-size: calc(18 * var(--ut));
  letter-spacing: 0.1em;
  text-align: left;
}

/* 見出し直後は少し広めに空ける */
.ws-sec__ttl + .ws-wrap {
  margin-top: calc(59 * var(--uy));
}

.ws-wrap::after {
  content: "";
  display: block;
  clear: both;
}

.ws-wrap figure {
  width: calc(292 * var(--u));
  /* カンプでは本文より少し下げた位置から写真が始まる */
  margin-top: calc(9 * var(--uy));
}

.ws-wrap figure.is-left {
  float: left;
  margin-right: calc(29 * var(--u));
}

.ws-wrap figure.is-right {
  float: right;
  margin-left: calc(29 * var(--u));
}

.ws-wrap p + p {
  margin-top: calc(34 * var(--ut));
}

/* ============================================================
   指導者向けの補足（ワークショップ前準備／目的・実践すること）

   読み物としての本文とは別に、指導者が実践のポイントだけを
   拾い読みできるようにするブロック。本文と同じ幅で、別色の
   ベタ面に載せて本文と区別する
   ============================================================ */
.ws-guide {
  box-sizing: border-box;
  width: var(--ws-inner-col);
  margin: calc(40 * var(--uy)) auto 0;
  padding: calc(30 * var(--uy)) calc(32 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--ws-yellow-pale);
  font-size: calc(17 * var(--ut));
  letter-spacing: 0.08em;
  line-height: 1.75;
  text-align: left;
}

.ws-guide + .ws-guide {
  margin-top: calc(20 * var(--uy));
}

/* 「はじめに」の帯に合わせたベタの見出し */
.ws-guide__banner {
  display: table;
  margin: 0 auto calc(20 * var(--uy));
  padding: calc(5 * var(--uy)) calc(18 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--ws-peach);
  font-size: calc(22 * var(--ut));
  font-weight: 700;
  line-height: 1.5;
}

/* 「💡目的」「👉実践すること」。絵文字を行頭にぶら下げ、
   折り返しは文字の左端にそろえる */
.ws-guide__ttl {
  padding-left: 1.7em;
  text-indent: -1.7em;
  font-weight: 700;
}

.ws-guide__ttl:not(:first-child) {
  margin-top: calc(18 * var(--uy));
}

.ws-guide__ttl + * {
  margin-top: calc(2 * var(--uy));
}

/* 行頭の「・」「＋」をぶら下げる */
.ws-guide__list > li {
  padding-left: 1em;
  text-indent: -1em;
}

/* 「音楽のお話⇒音楽室」のような例示は一段下げる */
.ws-guide__list > li.is-sub {
  padding-left: 2em;
  text-indent: 0;
}

/* 前準備の「場所」「持ち物（生徒）」を段そろえにする */
.ws-guide__prep {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: calc(16 * var(--uy));
  margin: 0;
}

/* 項目名は右寄せ。「：」の位置が縦にそろい、内容の頭も一列になる */
.ws-guide__prep dt {
  text-align: right;
  font-weight: 700;
}

.ws-guide__prep dt::after {
  content: "：";
}

.ws-guide__prep dd {
  margin: 0;
}

/* 「（生徒全員が集まれて、発表までできる場所）」などの補足 */
.ws-guide__prep dd span {
  display: block;
}

/* 前準備の下に添える注記 */
.ws-guide__note {
  margin: calc(20 * var(--uy)) 0 0;
  text-indent: 0;
}

/* ============================================================
   進め方の手引き（Step01〜）

   指導者が当日の段取りだけを追えるようにするパネル。読み物と
   しての本文と混ざらないよう、白地にオレンジの枠を回して
   「本文の外側にある手引き」であることを見た目で分ける。

   見出し部は左に Step ラベル、右にタイトル。ラベルの幅は
   「Step01」の字幅にまかせ、タイトルは残りの幅で中央に置く。
   幅を --u で固定すると、文字の縮小に下限がある SP で
   ラベルだけ枠からあふれるため
   ============================================================ */
.ws-step {
  box-sizing: border-box;
  width: calc(647 * var(--u)); /* 「指導効果」の囲みと同じ幅 */
  margin: calc(56 * var(--uy)) auto 0;
  border: calc(2 * var(--u)) solid var(--ws-step-line);
  border-radius: calc(16 * var(--u));
  background: #fff;
  text-align: left;
}

.ws-step__head {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: calc(14 * var(--uy)) calc(34 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--ws-step-line);
}

.ws-step__no {
  flex: none;
  margin: 0;
  color: var(--ws-step-key);
  text-align: center;
}

/* 「ワークショップ／実施のための」。2行に折り返しても
   「Step01」の字幅を超えないよう小さめに置く */
.ws-step__no-sub {
  display: block;
  font-size: calc(14 * var(--ut));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
}

.ws-step__no-main {
  display: block;
  font-size: calc(40 * var(--ut));
  font-weight: 700;
  line-height: 1.25;
}

/* 右に少しあきを作る。ラベルの右側で単純に中央ぞろえすると
   カンプよりタイトルが右に寄るため */
.ws-step__ttl {
  flex: 1;
  margin: 0 calc(48 * var(--u)) 0 0;
  font-size: calc(22 * var(--ut));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-align: center;
}

.ws-step__body {
  padding: calc(28 * var(--uy)) calc(34 * var(--u)) calc(32 * var(--uy));
  font-size: calc(18 * var(--ut));
  letter-spacing: 0.08em;
  line-height: 2;
}

/* 「本について知り、自分の感じ方を言葉にしてみます」のような前置き。
   ＜実践すること＞ の前に1文だけ置く */
.ws-step__intro {
  margin: 0 0 calc(20 * var(--uy));
}

.ws-step__lead {
  margin: 0;
}

.ws-step__list {
  margin: calc(20 * var(--uy)) 0 0;
  padding: 0;
  list-style: none;
}

/* 行頭の「●」をぶら下げ、折り返しは文字の左端にそろえる。
   記号は飾りなので CSS 側で付ける */
.ws-step__list > li {
  padding-left: 1.4em;
  text-indent: -1.4em;
}

.ws-step__list > li::before {
  content: "●";
  margin-right: 0.4em;
}

.ws-step__list > li + li {
  margin-top: calc(18 * var(--uy));
}

/* 「音楽のお話⇒音楽室」のような例示。● は付けず一段下げる。
   text-indent は継承するので明示的に戻す */
.ws-step__sub {
  margin: 0;
  padding-left: 1em;
  list-style: none;
  text-indent: 0;
}

/* パネルが続くときは本文からのあきより詰める */
.ws-step + .ws-step {
  margin-top: calc(40 * var(--uy));
}

/* 指導効果 */
.ws-effect {
  box-sizing: border-box;
  width: calc(647 * var(--u));
  margin: calc(85 * var(--uy)) auto 0;
  padding: calc(49 * var(--uy)) 0 calc(72 * var(--uy));
  border-radius: calc(43 * var(--u));
  background: var(--ws-yellow-pale);
}

.ws-effect__ttl {
  font-size: calc(29 * var(--ut));
  font-weight: 700;
  line-height: 1.752;
}

.ws-effect .ws-body {
  width: calc(544 * var(--u));
  margin-top: calc(34 * var(--uy));
  letter-spacing: 0.12em;
}

/* アンケート抜粋。【生徒】【指導者】ごとに ● の項目を並べ、
   項目によっては「個別回答〜」をぶら下げる */
.ws-effect__group + .ws-effect__group {
  margin-top: calc(34 * var(--uy));
}

.ws-effect__label {
  font-weight: 700;
}

.ws-effect__list {
  margin-top: calc(8 * var(--uy));
}

.ws-effect__list > li + li {
  margin-top: calc(18 * var(--uy));
}

/* ● は行頭にぶら下げ、折り返しは本文の左端に揃える */
.ws-effect__item {
  padding-left: 1em;
  text-indent: -1em;
}

.ws-effect__item::before {
  content: "●";
}

/* 「個別回答〜」は全角スペースぶん下げて項目にぶら下げる。
   .ws-body p + p の段落あきは効かせない */
.ws-effect__list .ws-effect__item + .ws-effect__voice {
  margin-top: calc(4 * var(--uy));
}

.ws-effect__voice {
  text-indent: 1em;
}

/* 引用だけの回答は字下げしない */
.ws-effect__voice--flush {
  text-indent: 0;
}

.ws-effect__source {
  margin-top: calc(34 * var(--uy));
  font-size: calc(15 * var(--ut));
}

/* ジャンプ先のマーカー。
   js/anchor.js は「ヘッダー高 - 20px」の位置へスクロールさせるので、
   その 20px と表示上の余白ぶんだけセクションより上に置く。
   絶対配置なのでレイアウトには影響しない */
.ws-anchor {
  position: absolute;
  top: calc(-20px - 30 * var(--uy));
  left: 0;
  width: 0;
  height: 0;
}

/* ダウンロード */
.ws-dl {
  position: relative;
  box-sizing: border-box;
  width: calc(943 * var(--u));
  margin: calc(99 * var(--uy)) auto 0;
  padding: calc(42 * var(--uy)) 0 calc(52 * var(--uy));
  background: var(--ws-yellow);
}

.ws-dl__icon {
  width: calc(47 * var(--u));
  margin-inline: auto;
}

.ws-dl__box {
  box-sizing: border-box;
  width: calc(539 * var(--u));
  margin: calc(33 * var(--uy)) auto 0;
  padding: calc(16 * var(--uy)) 0 calc(34 * var(--uy));
  border: calc(2 * var(--u)) solid var(--ws-ink);
  border-radius: calc(10 * var(--u));
  background: #fff;
}

.ws-dl__ttl {
  font-size: calc(23 * var(--ut));
  font-weight: 700;
  line-height: 1.522;
}

/* 「＜本との出会いを発見する＞」は資料名に添える副題なので一段小さく。
   em 指定なので SP の縮小にもそのまま追随する */
.ws-dl__ttl span {
  font-size: 0.82em;
}

/* 資料名に添えるプログラム名。「実践ガイド」との間に少し空きを取る。
   .ws-dl__ttl span より詳細度を上げて、副題用の 0.82em を打ち消す */
.ws-dl__ttl .ws-dl__prog {
  display: block;
  margin-top: calc(16 * var(--uy));
  color: #0d77c9;
  font-size: 1em;
}

/* 1行目は「＜本との出会いを発見する＞」と同じ大きさ */
.ws-dl__ttl .ws-dl__prog-sub {
  display: block;
  font-size: 0.82em;
}

/* 2行目は「実践ガイド」と同じ大きさ */
.ws-dl__ttl .ws-dl__prog-main {
  display: block;
  font-size: 1em;
}

.ws-dl__btn {
  display: block;
  width: calc(190 * var(--u));
  margin: calc(20 * var(--uy)) auto 0;
  transition: opacity 0.2s;
}

.ws-dl__btn:hover {
  opacity: 0.75;
}

.ws-dl__note {
  width: calc(458 * var(--u));
  margin: calc(22 * var(--uy)) auto 0;
  font-size: calc(18 * var(--ut));
  letter-spacing: 0.06em;
  text-align: left;
}


/* 最初のページに戻る */
.ws-back {
  margin: calc(18 * var(--uy)) 0 calc(101 * var(--uy));
  font-size: calc(18 * var(--ut));
}

.ws-back a {
  color: var(--ws-ink);
  text-decoration: none;
}

.ws-back a:hover {
  text-decoration: underline;
}

/* ============================================================
   スマートフォン（SP ヘッダーに切り替わる 750px 以下）

   PC と同じ構成・同じ縦の組みのまま、左右の余白だけを詰める。
   カンプ基準幅 1280px のまま等比縮小すると本文カラムが画面の
   51% しかなく余白を取りすぎるため。

   幅は cqw（= .ws の幅の1%）。--ws-inner-col のように囲みの
   内側と外側の両方で使う値があるので、入れ子の深さによらず
   画面幅基準で効く単位でないと破綻する。

   文字は用途ごとに縮小率を分ける。--ut は本文（可読性優先で
   下限を高く）、--ut-ttl は見出し、--ut-card は 2列で幅が狭い
   カード用。カンプどおりの位置で折り返すよう下限を下げてある。
   ============================================================ */

@media (max-width: 750px) {
  .ws {
    /* 本文は出張作文教室（lecture）の SP と同じ 15px を下限にする */
    --ut: max(0.833px, var(--u));
    --ut-ttl: max(0.55px, calc(var(--u) * 1.4));
    --ut-card: max(0.75px, calc(var(--u) * 1.5));

    /* 縦の余白は本文と同じ下限で止める。--u のままだと 375px 幅で
       カンプの 0.29 倍まで縮み、0.83 倍で止まる文字に対して
       見出しと本文、枠線と中身が詰まって見える */
    --uy: max(0.833px, var(--u));

    --ws-col: 80cqw; /* 囲みのない本文 */
    --ws-inner: 82cqw; /* 囲みボックス */
    --ws-inner-col: 80cqw; /* 囲みの外にある本文・回り込み */
  }

  /* 囲みの中の本文。箱の左右に padding 相当の余白を残す */
  .ws-open .ws-body,
  .ws-message__box .ws-body {
    width: 87%;
  }

  /* --uy でカンプ比に戻したなかで、この 2 箇所だけは SP で空きすぎる */
  .ws-intro {
    padding-top: calc(55 * var(--uy)); /* PC と同じく空きを半分に */
  }

  .ws-message__box .ws-body {
    margin-top: calc(35.25 * var(--uy)); /* 47 の 3/4 */
  }

  /* カンプの字送りは 1280px 幅向け。15px のまま効かせると
     1行が短くなりすぎるので SP では詰める */
  .ws-body,
  .ws-wrap,
  .ws-open .ws-body,
  .ws-sec .ws-body,
  .ws-effect .ws-body,
  .ws-programs__lead,
  .ws-dl__note {
    letter-spacing: 0.04em;
  }

  .ws-kv__main {
    width: 91cqw;
    padding-top: 1.56cqw;
    padding-bottom: 2.57cqw;
  }

  /* 方眼はカンプと同じマス目の大きさのまま。等比縮小すると細かすぎる */
  .ws-message__grid {
    --ws-grid-pitch: 47.3px;
    --ws-grid-shift: 15px;
  }

  /* 等比縮小だと枠内で小さく見えるので、本文と同じ幅まで広げる */
  .ws-message__figure {
    width: 87%;
  }

  .ws-programs__box {
    width: 82cqw;
  }

  .ws-programs__icon {
    width: 4.4cqw;
  }

  .ws-programs__lead {
    width: 87%;
  }

  /* カードは縦並び。横並びだと1枚あたり 140px 程度しかなく
     見出しが折り返して文字も小さくせざるを得ないため。
     幅を持たせる flex は margin-inline: auto がないと左寄せになる */
  .ws-cards {
    flex-direction: column;
    width: 87%;
    margin-inline: auto;
    gap: calc(60 * var(--uy));
  }

  .ws-card {
    width: 100%;
    flex: 0 0 auto;
  }

  .ws-card__body,
  .ws-card__btn {
    width: 79.4%;
  }

  /* 縦並びで幅が取れるので、本文と学校名は本文と同じ 15px に */
  .ws-card__body,
  .ws-card__school {
    font-size: calc(18 * var(--ut));
  }

  .ws-head {
    width: 90.2cqw;
  }

  .ws-video {
    width: 79.7cqw;
  }

  /* 「はじめに」の見出し画像。カンプ比（枠幅の35%）のままだと
     110px しかなく、15px の本文に対して小さく見える */
  .ws-open__ttl {
    width: 60%; /* 48 の 1.25 倍 */
  }

  .ws-arrow {
    width: 5.4cqw;
  }

  .ws-figure {
    width: 76cqw;
  }

  .ws-pair {
    width: 80cqw;
    margin-inline: auto;
    gap: 3.47%;
  }

  .ws-pair figure {
    width: auto;
    flex: 1 1 0;
  }

  /* 折り返したキャプションが画像の端に張り付いて窮屈に見えるので
     左右を 10px ずつ内側に入れる。fit-content なので1行のときは影響しない */
  .ws-caption {
    box-sizing: border-box;
    padding-inline: 10px;
  }

  .ws-wrap figure {
    width: 45.1%;
  }

  .ws-wrap figure.is-left {
    margin-right: 4.5%;
  }

  .ws-wrap figure.is-right {
    margin-left: 4.5%;
  }

  /* 「持ち物（指導者）」のラベルが幅の半分近くを占めてしまうので、
     SP では段そろえをやめて項目名の下に折り返す */
  .ws-guide__prep {
    display: block;
  }

  /* 縦積みになるので項目名の右寄せは戻す */
  .ws-guide__prep dt {
    margin-top: calc(18 * var(--uy));
    text-align: left;
  }

  .ws-guide__prep dt:first-child {
    margin-top: 0;
  }

  .ws-guide__prep dd {
    padding-left: 1em;
  }

  /* 横並びのままだとタイトルの1行が10文字ほどになるので、
     ラベルの下にタイトルを置いて幅をめいっぱい使う */
  .ws-step {
    width: 85cqw;
  }

  .ws-step__head {
    display: block;
    text-align: center;
  }

  /* 22px のままだと「進め方・ルールを確認しましょう」が
     375px 幅で「う」だけ次行に落ちるので一段下げる */
  .ws-step__ttl {
    margin: calc(6 * var(--uy)) 0 0;
    font-size: calc(20 * var(--ut));
  }

  .ws-effect {
    width: 85cqw;
    padding-top: calc(32.67 * var(--uy)); /* 49 の 2/3 */
  }

  .ws-effect .ws-body {
    width: 87%;
  }

  /* 「〜のダウンロードはこちら」が語の途中で折り返さないよう改行する */
  .ws-jump__dl {
    display: block;
  }

  /* 黄色の背景は左右いっぱいに */
  .ws-dl {
    width: 100%;
  }

  .ws-dl__icon {
    width: 6.98cqw;
  }

  .ws-dl__box {
    width: 88%;
  }

  .ws-dl__btn {
    width: 47.5875%; /* 35.25 の 1.35 倍 */
  }

  .ws-dl__note {
    width: 85%;
  }


  /* ---- 文字サイズ ---- */

  /* 見出しはカンプでは 23〜35px とばらついているが、そのまま等比縮小すると
     SP で 12.65〜21px になり不揃いが目立つ。1サイズに揃える */
  .ws-intro__ttl,
  .ws-message__ttl,
  .ws-sec__ttl,
  .ws-effect__ttl,
  .ws-programs__ttl,
  .ws-card__ttl {
    font-size: calc(35 * var(--ut-ttl));
  }

  /* 見出しに添える一段小さいもの */
  .ws-intro__sub,
  .ws-message__name {
    font-size: calc(30 * var(--ut-ttl));
  }

  .ws-card__ttl span {
    font-size: calc(29 * var(--ut-ttl));
  }

  /* 【小学校用】＜本との出会いを発見する＞読書推せん文ワークショップ　実践ガイド
     が長く、箱に収める都合でここだけ一段小さい（HTML 側でも改行を入れている） */
  .ws-dl__ttl {
    font-size: calc(32 * var(--ut-ttl));
  }

  .ws-card__tag {
    font-size: calc(14 * var(--ut-card));
  }

  .ws-card__lead {
    font-size: calc(17.5 * var(--ut-card));
  }

  .ws-card__school {
    letter-spacing: normal;
  }
}