@charset "UTF-8";
/* =====================================================================
   work専用css（音声ページ）
   ※ eigo5-6--2024.css（共通）は変更せず、このファイルで上書きする
   ===================================================================== */

/* メンテナンスのお知らせ */
.maintenance-notice {
  margin: .8rem 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid #e6a23c;
  border-radius: 6px;
  background: #fff4dd;
  color: #5c3b00;
  font-weight: 700;
  line-height: 1.6;
}

/* 代替音声カード */
.contents li.replacement-audio {
  flex: 0 1 712px;
  width: 100%;
  max-width: 712px;
  box-sizing: border-box;
}
.contents li.replacement-audio a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 2rem;
  text-align: left;
}
.replacement-audio-copy { display: block; }
.replacement-audio-note {
  display: block;
  margin: .6rem 0 0;
  font-size: .8em;
  font-weight: 500;
}
.contents li.replacement-audio a img {
  height: clamp(100px, 13vw, 150px);
  max-width: 36%;
  margin: 0;
}
@media screen and (max-width: 560px) {
  .contents li.replacement-audio a {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }
  .contents li.replacement-audio a img {
    max-width: 60%;
    height: clamp(100px, 26vw, 140px);
    margin: 0 auto;
  }
}

/* メンテナンス中のリンク停止カード */
.contents li.maintenance-disabled {
  border-color: #b8b8b8;
  background: #f1f1f1;
  color: #777;
}
.maintenance-disabled-content {
  display: block;
  padding: 2rem 0;
  text-align: center;
  font-size: 1.25rem;
}
.maintenance-disabled-label {
  display: inline-block;
  margin-top: .5rem;
  padding: .2rem .65rem;
  border-radius: 4px;
  background: #d5d5d5;
  color: #555;
  font-size: .75em;
  font-weight: 700;
}
.maintenance-disabled-content img {
  display: block;
  height: clamp(140px, 22vw, 220px);
  width: auto;
  max-width: 92%;
  margin: 1rem auto .4rem;
  border: 1px solid #ccc;
  filter: grayscale(1);
  opacity: .55;
}

/* ページジャンプ・絵じてんリンク共通 */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: .5rem 0 1rem;
}
.chips a {
  padding: .35rem .55rem;
  border-radius: 8px;
  background: var(--bg, #e1e1d5);
  color: #363535;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
.shortcut a:nth-child(n+8) { --bg: #d6d6cb; }  /* p.10〜（2つ目の単元） */
.chips a:hover { background: #8f92c8; color: #fff; }

/* オンライン絵じてん：1まとまりの囲み（コンパクト版） */
.dict-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .6rem;
  margin: .5rem 0 .8rem;
  padding: .45rem .7rem;
  border-radius: 8px;
  background: #f3f1e7;
}
.dict-box p { margin: 0; font-size: .8rem; font-weight: 700; }
.dict-box .dict-note { display: block; color: #666; font-size: .85em; font-weight: 400; }
.dict-box .chips { flex: 1 1 auto; justify-content: flex-start; gap: .3rem; margin: 0; }
.dict-box .chips a { --bg: #fff; padding: .15rem .5rem; font-size: .8rem; }

/* ページ見出し（共通CSSの main h5 オレンジ帯を打ち消す） */
h5.page-heading {
  margin: 3rem 0 .25rem;
  padding: 1rem 0 0;
  border-top: 1px solid #bdb9b9;
  background: none;
  color: inherit;
  font-size: 1.2rem;
}
h5.page-heading small { font-size: .7em; }
h5.page-heading.sub {            /* 見出しなし（p.4 / p.10）：番号のみ */
  margin-top: 2rem;
  padding-top: 0;
  border-top: 0;
  font-size: .85rem;
}
h5.page-heading.page-separator {
  padding-top: 1rem;
  border-top: 1px solid #eeede8;
}

/* 音声リスト */
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li { max-width: 400px; margin: 2rem auto; }
.tracks li.grp {                 /* 番号(①②③)ごとの区切り */
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px dashed #d4d2c6;
}
.tracks li.grp:first-child { margin-top: 2rem; padding-top: 0; border-top: 0; }
.tracks { --ind: 1.9rem; }                 /* 1文字バッジの幅(1.5rem)+右余白(.4rem) */
.tracks li.ind { text-indent: var(--ind); }  /* 番号なしの小問を字下げ */
.tracks li.q3 {                  /* パワーアップ(3)：画像を見て答える1まとまり */
  max-width: none;
  padding: 0 1rem 2rem 1rem;
  margin: 0 2rem;
  border-radius: 8px;
  border: 1px solid #9e9e9e;
}
@media screen and (max-width: 560px) {
.tracks li.q3 {
  margin: 0;
}
}
.q3 div { max-width: 400px; margin: 1rem auto 0; }
.q3 .q-img { margin-top: 1rem; }
.tracks audio { display: block; width: 100%; margin-top: .3rem; }
.audio-check-link {
  display: inline-block;
  margin-top: .5rem;
  padding: .55rem .9rem;
  border-radius: 8px;
  background: #8f92c8;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.tracks li.audio-check-track { margin-bottom: .35rem; }
.tracks li.audio-check-item { margin-top: 0; }
.audio-check-link:visited { color: #fff; }
.audio-check-link:hover { background: #6f72ad; }
.audio-check-link:focus-visible { outline: 3px solid #363535; outline-offset: 2px; }
.q-img { display: block; max-width: 70%; height: auto; margin: 0 auto; border-radius: 4px; }
/* ラベル */
.badge,
.num { vertical-align: middle; }
.badge {
  padding: .1rem 1rem;
  border-radius: 12px;
  background: #8a8888;
  color: #fff;
  font-size: .8em;
}
.badge.conversation-label {
  padding: .05rem .5rem;
  border-radius: 4px;
  background: #f3f1e7;
  color: #666;
  font-size: .75em;
}
.badge.dk { background: #555; }
.num {                           /* 1文字なら最小幅で統一、2文字以上は文字数に応じて広がる */
  display: inline-block;
  box-sizing: border-box;
  min-width: 1.5rem;
  margin-right: .4rem;
  padding: .16rem .1rem;
  border: 1px solid #777;
  border-radius: 50px;
  font-size: .7em;
  text-align: center;
  white-space: nowrap;
  color: #333;
}
.num.fill { border-color: #333; background: #666; color: #fff; }

/* ページ上部へ戻る */
.to_top { margin: 1rem; padding: 0 2rem; font-size: .8rem; text-align: right; }