@charset "UTF-8";
/* =========================================================
   USTOOL.jp  -  quiz4（/teacher/quiz4/ 4択クイズの作り方）
   base.css → page.css のあとに読む。
   配布前の注意 / 手順 / ダウンロードボタン。
   ========================================================= */

.howto{ max-width:760px; margin:clamp(28px,4vw,44px) auto 0; }

/* 配布前に読んでほしい注意。手順の前に置くので、番号付きの流れとは見た目を変える */
.caution{
  padding:clamp(14px,2vw,18px) clamp(15px,2vw,20px);
  border:2px solid #e0c489; border-left-width:6px; border-radius:12px;
  background:var(--orange-soft);
}
.caution__title{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(15px,1.8vw,17px); line-height:1.6;
  color:var(--orange);
}
.caution__text{
  margin-top:6px; font-size:14px; color:var(--ink); line-height:1.95;
}

/* 手順 */
.steps{ counter-reset:s; margin-top:clamp(16px,2.2vw,24px); }
.steps li{
  counter-increment:s; position:relative;
  padding:clamp(14px,2vw,18px) 0 clamp(14px,2vw,18px) clamp(44px,5vw,56px);
  border-bottom:1.5px dotted var(--line-soft);
}
.steps li::before{
  content:counter(s);
  position:absolute; left:0; top:clamp(14px,2vw,18px);
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-round); font-weight:700; font-size:14px;
  color:var(--red); border:2px solid var(--red); background:var(--white);
}
.steps h2{
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(15px,1.8vw,17px); line-height:1.6;
}
.steps p{ margin-top:6px; font-size:14px; color:var(--ink-soft); line-height:1.95; }
.steps a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.steps code{
  font-family:ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size:12.5px; background:var(--paper-2); border:1px solid var(--line-soft);
  border-radius:5px; padding:1px 5px; color:var(--ink);
}

/* ダウンロード・作成例へのリンク */
.dl{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-family:var(--font-round); font-weight:700; font-size:13.5px;
  color:var(--teal) !important; text-decoration:none !important;
  border:1.5px solid var(--teal); border-radius:9px; padding:6px 14px;
  transition:background-color .18s, color .18s;
}
.dl::before{ content:"↓"; font-weight:700; }
.dl:hover{ background:var(--teal); color:var(--white) !important; }
/* 別タブで開くリンクは下向き矢印ではなく右向きにする */
.dl[target]::before{ content:"→"; }