.experiment-frame,
.construction-frame,
.element-frame,
.reaction-catalog-frame,
.social-frame,
.human-body-frame,
.cell-frame,
.dna-frame,
.magnetism-frame,
.genetics-frame,
.trigonometry-frame,
.english-frame,
.trig-playground-frame,
.trig-formulas-frame,
.visual-lab-frame {
  width: 100%;
  margin: 1rem 0 2rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 18%, transparent);
  border-radius: 1rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1);
}

.experiment-frame iframe,
.construction-frame iframe,
.element-frame iframe,
.reaction-catalog-frame iframe,
.social-frame iframe,
.human-body-frame iframe,
.cell-frame iframe,
.dna-frame iframe,
.magnetism-frame iframe,
.genetics-frame iframe,
.trigonometry-frame iframe,
.english-frame iframe,
.trig-playground-frame iframe,
.trig-formulas-frame iframe,
.visual-lab-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

.experiment-frame iframe { height: 700px; }
.construction-frame iframe { height: 900px; }
.element-frame iframe { height: 940px; }
.element-frame--reaction iframe { height: 540px; }
.element-frame--encyclopedia iframe { height: 1020px; }
.reaction-catalog-frame iframe { height: 930px; }
.social-frame iframe { height: 900px; }
.human-body-frame iframe { height: 900px; }
.cell-frame iframe { height: 880px; }
.dna-frame iframe { height: 820px; }
.magnetism-frame iframe { height: 900px; }
.genetics-frame iframe { height: 900px; }
.trigonometry-frame iframe { height: 920px; }
.english-frame iframe { height: 760px; }
.trig-playground-frame iframe { height: 860px; }
.trig-formulas-frame iframe { height: 880px; }
.visual-lab-frame--tall iframe { height: 820px; }
.visual-lab-frame--medium iframe { height: 560px; }
.visual-lab-frame--short iframe { height: 430px; }

/* 教材ページに埋め込む2Dラボの枠。実際の高さは simulator-frame.js が中身に合わせて更新する。 */
.lab-frame {
  width: 100%;
  margin: 1rem 0 2rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 18%, transparent);
  border-radius: 1rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
}
.lab-frame iframe { display: block; width: 100%; height: 760px; border: 0; }
@media print { .lab-frame { display: none; } }

/* ドリルの起動ボタン：スマホでは全画面で解くのが基本なので大きく見せる */
.drill-launch { margin: 1.2rem 0 .6rem; }
.drill-launch .md-button { display: block; padding: .8em 1.2em; font-size: 1.05rem; text-align: center; }
.social-frame--geography iframe { height: 690px; }
.source-figure { margin: 1.5rem 0; }
.source-figure img { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: .75rem; }
.source-figure figcaption { margin-top: .5rem; color: var(--md-default-fg-color--light); font-size: .72rem; text-align: center; }

@media (max-width: 720px) {
  .experiment-frame,
  .construction-frame,
  .element-frame,
  .reaction-catalog-frame,
  .social-frame,
  .trigonometry-frame,
  .english-frame,
  .trig-playground-frame,
  .trig-formulas-frame,
  .visual-lab-frame {
    width: calc(100% + 1.6rem);
    margin-left: -0.8rem;
    border-radius: 0.75rem;
  }
  .experiment-frame iframe { height: 1040px; }
  .construction-frame iframe { height: 1020px; }
  .element-frame iframe { height: 1230px; }
  .element-frame--reaction iframe { height: 760px; }
  .element-frame--encyclopedia iframe { height: 1450px; }
  .reaction-catalog-frame iframe { height: 1480px; }
  .social-frame iframe { height: 1300px; }
  .social-frame--geography iframe { height: 960px; }
  .trigonometry-frame iframe { height: 1120px; }
  .english-frame iframe { height: 720px; }
  .trig-playground-frame iframe { height: 900px; }
  .trig-formulas-frame iframe { height: 940px; }
  .visual-lab-frame--tall iframe { height: 1540px; }
  .visual-lab-frame--medium iframe { height: 620px; }
  .visual-lab-frame--short iframe { height: 500px; }
}

@media print {
  .experiment-frame,
  .construction-frame,
  .element-frame,
  .reaction-catalog-frame,
  .social-frame,
  .trigonometry-frame,
  .english-frame,
  .trig-playground-frame,
  .trig-formulas-frame,
  .visual-lab-frame { display: none; }
}

/* 教材内の図（アスキーアートの代わりに使うSVG）。
   文字サイズに追従し、スマホでも崩れないようにする。 */
.geo-figure { margin: 1.2rem auto; text-align: center; }
.geo-figure svg { display: block; width: min(100%, 22rem); height: auto; margin: 0 auto; }
.geo-figure figcaption { margin-top: .5rem; color: var(--md-default-fg-color--light); font-size: .74rem; line-height: 1.6; }
.geo-figure .pt { fill: var(--md-default-fg-color); font-size: 13px; font-weight: 700; }
.geo-figure .lbl { font-size: 12px; font-weight: 700; }
.geo-figure .dim { fill: #8697ad; font-size: 12px; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .geo-figure .dim { fill: #9fb0c6; }
}