/* ============================================================
   精度検証実験（experiment1〜3 英語版・新デザイン）。base.css のトークンを使用
   ============================================================ */
.exp { width: min(960px, 100% - 40px); margin: 0 auto; padding: 44px 0 64px; color: var(--ink); font-size: 15.5px; line-height: 1.95; }
.exp h1 { margin: 0 0 28px; text-align: center; font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 5.6vw, 36px); line-height: 1.45; letter-spacing: .03em; }
.exp .h1_u { display: block; margin-top: 6px; font-family: var(--sans); font-weight: 500; font-size: clamp(15px, 3.6vw, 20px); color: var(--steel); }
.exp p { margin: 0 0 12px; max-width: 46em; }
.exp a { color: var(--blueprint); }
.exp var { font-style: italic; }

.description_title { margin: 28px 0 4px !important; font-weight: 700; font-size: 17px; color: var(--blueprint); }
.description_ul { padding-left: 1.3em; margin: 6px 0 18px; max-width: 46em; }
.description_ul li { margin-bottom: 6px; }
.description_ul li::marker { color: var(--steel); }

/* 図 */
#Fig1234_wrapper { display: grid; grid-template-columns: 1fr; gap: 6px 24px; margin: 8px 0 12px; }
.Fig1234 figure { margin: 18px 0 0; }
.Fig1234 img { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--paper-line); }
figcaption { margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--steel); }

/* クリックで切り替わる図（ボタンは図の右上） */
.button_wrap { position: relative; cursor: pointer; }
.exp .button.button_P {
  position: absolute; right: 10px; top: 10px; margin: 0; padding: 2px 12px;
  background: var(--blueprint-deep); color: #fff; border: 0; border-radius: 3px;
  font-size: 13px; font-weight: 700; line-height: 1.7; box-shadow: none;
}
.button_wrap:hover .button_P { background: var(--blueprint); }

/* 表 */
#table1 { margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#table1 table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: 13.5px; line-height: 1.6; text-align: center; background: #fff; }
#table1 td { padding: 8px 6px; }
#table1 caption { text-align: left; font-size: 13.5px; margin-bottom: 6px; color: var(--steel); }
#table1 td:nth-child(1) { width: 24%; text-align: left; padding-left: 10px; }
#table1 td:nth-child(3), #table1 td:nth-child(5), #table1 td:nth-child(7) { width: 8px; padding: 0; }
#table1 tr:nth-child(1) td:not(:nth-child(1)):not(:empty) { border-bottom: 1px solid var(--paper-line); }
#table1 tr:nth-child(2) { border-bottom: 1px solid var(--ink); }

#conclusion { margin: 18px 0 1.5em; }
#next { margin: 32px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
#next a { color: var(--correction); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.br { display: inline-block; width: 100%; }
.bold { font-weight: 700; }
.red { color: var(--correction); }
.blue { color: var(--blueprint); }
.block { display: block; }
small { font-size: .95em; }

@media screen and (min-width: 1024px) {
  .exp { padding: 56px 0 80px; }
  #Fig1234_wrapper { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 460px) {
  .exp { padding: 32px 0 48px; font-size: 15px; }
}
