@charset "UTF-8";
/* =========================================================
   USTOOL.jp  -  page（下層ページ共通）
   base.css のあとに読む。トップ（/）と 404 は読まない。
   パンくず / 導入文 / カードの並び方 / 状態タグ /
   文章セクションの見出し。
   ========================================================= */

/* ヘッダーのパンくず（下層ページはグローバルナビの代わりにこれを出す） */
.subnav{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-round); font-size:14px; color:var(--ink-soft);
}
.subnav a{ color:var(--teal); text-underline-offset:4px; }
.subnav a:hover{ text-decoration:underline; }
.subnav span[aria-hidden]{ color:var(--line); }

.page-lead{
  margin-top:clamp(14px,2vw,20px);
  font-size:clamp(14px,1.6vw,16px); color:var(--ink-soft); line-height:2;
}
.page-lead [lang="en"]{ color:var(--teal); font-size:.92em; }

.page-note{
  margin-top:clamp(18px,2.4vw,26px);
  text-align:center; font-size:13px; color:var(--ink-soft); line-height:1.9;
}
.page-note [lang="en"]{ color:var(--teal); font-size:.92em; }

/* =========================================================
   カードの並び（カード本体は base.css）
   ========================================================= */
/* 1枚だけのカード（前後に説明を挟むときに使う） */
.cards--1{
  grid-template-columns:minmax(0,1fr);
  max-width:560px; margin-inline:auto;
}
/* 2枚並び */
.cards--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:760px; margin-inline:auto;
}
/* 3枚並び */
.cards--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:1000px; margin-inline:auto;
}
@media (max-width:900px){
  .cards--3{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
}

.btn--center{ display:flex; width:max-content; margin:clamp(24px,3vw,36px) auto 0; }

/* =========================================================
   公開状態のタグ
   ========================================================= */
.tag-state{
  flex-shrink:0; margin-top:2px;
  font-family:var(--font-round); font-weight:700; font-size:11px; letter-spacing:.04em;
  color:var(--ink-soft); border:1.5px solid var(--line); border-radius:6px;
  padding:2px 9px; white-space:nowrap;
}
.tag-state--open{ color:var(--teal); border-color:var(--teal); }
/* 公開期間が決まっているもの */
.tag-state--limited{ color:var(--orange); border-color:var(--orange); }

/* =========================================================
   文章セクション（about / contact / teacher / tools で共通）
   ========================================================= */
.about__inner{ max-width:820px; }

.about__sec{ margin-top:clamp(34px,4.6vw,56px); }
.about__h2{
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(19px,2.4vw,24px);
  padding-left:16px; position:relative; line-height:1.5;
}
.about__h2::before{
  content:""; position:absolute; left:0; top:.28em; bottom:.28em;
  width:5px; border-radius:3px; background:var(--orange);
}
.about__h2en{
  display:block; font-family:var(--font-body); font-weight:400;
  font-size:12px; letter-spacing:.12em; color:var(--teal); margin-top:2px;
}
.about__note{
  margin-top:16px; font-size:13px; color:var(--ink-soft);
  padding-left:14px; position:relative;
}
.about__note::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--orange);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:600px){
  .cards--2,
  .cards--3{ grid-template-columns:1fr; }
  .subnav{ font-size:12px; gap:6px; }
}