@charset "utf-8";
/*!
 * live3d.css — 研究内容ページ「ライブ3D」用スタイル v1.1 (2026-08-10)
 * HYODO WORKS / ホームページデザイン事業部
 * 方針: すべて #main_content 配下のクラスにスコープを切り、既存 style.css の指定を上書きしない。
 *       色は既存サイトの navy(#00205b) を基調に、ステージ用の暗色1色だけを追加。
 */

#main_content .l3d-scope {
  /* --- トークン（このブロック内だけで有効） --- */
  --navy: #00205b;
  --navy-tint: #eef2f8;
  --ink: #1c2330;
  --muted: #5a6472;
  --line: #dfe4ec;
  --stage: #05070d;
  --gap: 8px;
}

/* ============ 導入（ヒーロー動画） ============ */
#main_content .l3d-hero {
  margin: 0 0 32px;
}
/* 動画のテキスト代替（WCAG 1.2.1: 音声なし映像の代替） */
#main_content .l3d__alt--hero { padding: 12px 0 0; }
#main_content .l3d-hero__media {
  position: relative;
  width: 100%;
  background: var(--stage);
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}
#main_content .l3d-hero__media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--stage);
}
#main_content .l3d-hero__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(0, 32, 91, .92);
  border-top-right-radius: 3px;
}
#main_content .l3d-hero__lead {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.9;
  color: var(--ink);
  font-feature-settings: "palt" 1;
}
#main_content .l3d-hero__sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}
/* 解説動画から下の3Dアニメへ話をつなぐ一文。動画ブロックの締めとして、
   本文(14px/muted)より少しだけ強く、リード(18px)より控えめに置く。 */
/* 解説動画のあとに置く、Dissolution DNP-MRI の説明（見出し＋複数段落） */
/* テーマ見出し(h2の青帯)の下に置く小見出し。青帯の直下なので上罫線は付けない */
#main_content .l3d-subttl {
  margin: 18px 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink, #1c2330);
}
#main_content .l3d-subttl + .l3d-lead { margin-top: 0; }
#main_content .l3d-hero__bridgettl {
  margin: 16px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #d8dee8);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink, #1c2330);
}
/* 見出しの直後と段落どうしは、上の罫線を重ねない */
#main_content .l3d-hero__bridgettl + .l3d-hero__bridge,
#main_content .l3d-hero__bridge + .l3d-hero__bridge {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}
#main_content .l3d-hero__bridge {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line, #d8dee8);
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
}

/* ============ ユーティリティバー（動きを止める） ============ */
#main_content .l3d-utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--navy-tint);
  border-radius: 3px;
}
#main_content .l3d-utility p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
#main_content .l3d-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  padding: 7px 14px;
  font-size: 13px;
  line-height: 1.6;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--navy);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#main_content .l3d-btn:hover {
  background: var(--navy);
  color: #fff;
}
/* ボタンは常にゴースト。ベタ塗りにすると navy の h2 帯と視覚重量が競合し
   「見出し」に見えてしまうため。状態は左のドットと文言、および
   aria-live の .l3d__state で示す。 */
#main_content .l3d-scope :focus-visible {
  outline: 3px solid #b58900;
  outline-offset: 2px;
}
#main_content .l3d-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.8;
  color: #4a3a00;
  background: #fdf6e3;
  border-left: 4px solid #b58900;
  border-radius: 3px;
}

/* ============ 3Dステージ ============ */
#main_content .l3d {
  margin: 24px 0 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}
#main_content .l3d__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--stage);
  overflow: hidden;
}
/* aspect-ratio 非対応ブラウザ用の保険 */
@supports not (aspect-ratio: 16 / 9) {
  #main_content .l3d__frame { height: 0; padding-bottom: 56.25%; }
}
#main_content .l3d__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#main_content .l3d__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  display: block;
  cursor: pointer;
  background: var(--stage);
  font-family: inherit;
  z-index: 2;
  transition: opacity .35s, visibility .35s;
}
#main_content .l3d__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .82;
}
#main_content .l3d__cue {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  background: rgba(0, 32, 91, .88);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  white-space: nowrap;
}
#main_content .l3d__poster:hover .l3d__cue { background: var(--navy); }
/* 読み込み後はポスターを消す。visibility も落として「見えないのにTabで止まる」を防ぐ。 */
#main_content .l3d.is-loaded .l3d__poster {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* WebGL 非対応端末: 静止画のまま。押せないことを見た目でも示す。 */
#main_content .l3d.is-nogl .l3d__poster { cursor: default; }
#main_content .l3d.is-nogl .l3d__cue { background: rgba(28, 35, 48, .9); border-color: rgba(255, 255, 255, .35); }
#main_content .l3d-btn:disabled {
  color: #8a929e;
  border-color: #c9cfd9;
  background: #f4f6f9;
  cursor: not-allowed;
}
#main_content .l3d-btn:disabled:hover { background: #f4f6f9; color: #8a929e; }

/* キャプション */
#main_content .l3d__cap {
  margin: 0;
  padding: 14px 16px 12px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink);
  background: #fff;
  border-top: 1px solid var(--line);
}
#main_content .l3d__cap b {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy);
}
/* 操作バー */
#main_content .l3d__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  padding: 10px 16px 14px;
  background: #fff;
}
#main_content .l3d__state {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
#main_content .l3d__state::before {
  content: "●";
  margin-right: 5px;
  color: #6f7885;
}
#main_content .l3d.is-playing .l3d__state::before { color: #1f9d55; }
#main_content .l3d__full {
  margin-left: auto;
  font-size: 13px;
  color: var(--navy);
  text-decoration: underline;
}
#main_content .l3d__full:hover { text-decoration: none; }

/* テキスト代替（開閉） */
#main_content .l3d__alt {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
}
#main_content .l3d__alt summary {
  cursor: pointer;
  color: var(--navy);
  font-size: 13px;
}
#main_content .l3d__alt p { margin: 8px 0 0; }

/* テーマのキッカー（長い h2 の前に置く短いラベル） */
#main_content .l3d-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 56px 0 8px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--navy);
}
#main_content .l3d-kicker span {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  letter-spacing: .1em;
  color: #fff;
  background: var(--navy);
  border-radius: 2px;
}
/* キッカーが付くので h2 直上の余白は詰める */
#main_content .l3d-kicker + h2 { margin-top: 0 !important; }

/* 見出し直下の導入文 */
#main_content .l3d-lead { margin: 0 0 4px; }

/* コンセプト図 */
#main_content .l3d-concept { margin: 24px 0 16px; }
#main_content .l3d-concept img { border-radius: 3px; }

/* ============ レスポンシブ ============ */
@media (max-width: 1023px) {
  #main_content .l3d-hero__lead { font-size: 17px; }
}
@media (max-width: 639px) {
  #main_content .l3d-hero { margin-bottom: 24px; }
  #main_content .l3d-hero__lead { font-size: 16px; line-height: 1.85; }
  /* 狭幅では動画の上に文字を重ねない（映像が隠れるため下に出す） */
  #main_content .l3d-hero__tag {
    position: static;
    display: block;
    padding: 8px 10px;
    border-radius: 0 0 3px 3px;
  }
  #main_content .l3d-hero__media { border-radius: 3px; }
  #main_content .l3d__cap { padding: 12px 12px 10px; font-size: 13.5px; }
  #main_content .l3d__bar { padding: 10px 12px 14px; }
  #main_content .l3d__alt { padding: 0 12px 14px; }
  #main_content .l3d__cue { font-size: 13px; padding: 12px 18px; }
  #main_content .l3d-utility { padding: 10px; }
  /* タッチの当たり判定を確保（最小44px） */
  #main_content .l3d-btn { padding: 12px 16px; min-height: 44px; }
  #main_content .l3d__full {
    margin-left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  #main_content .l3d__alt summary { padding: 12px 0; }
}

/* 動きを避けたい利用者への配慮（CSS側でも保険） */
@media (prefers-reduced-motion: reduce) {
  #main_content .l3d__poster { transition: none; }
  #main_content .l3d-btn { transition: none; }
}


/* =================================================================
   コンセプトイラスト 案A「静かな一枚」 v1.1 (2026-08-10)
   題字はページ側の活字・図は原画の高解像度書き出し(HPconcept2)。
   ================================================================= */
/* ---- 題字（全案共通・ページ側の活字が正式な題字） ---- */
#main_content .l3d-scope .l3d-hero2__titles{margin:0}
#main_content .l3d-scope .l3d-hero2__copy{
  margin:0;font-size:22px;font-weight:700;line-height:1.6;
  letter-spacing:.01em;color:var(--navy,#00205b);font-feature-settings:"palt" 1}
#main_content .l3d-scope .l3d-hero2__en{
  margin:6px 0 0;font-size:13px;line-height:1.7;letter-spacing:.03em;color:#3f5480}
#main_content .l3d-scope .l3d-hero2__credit{
  margin:6px 0 0;font-size:11px;line-height:1.7;color:#5a6472;text-align:right}
@media (max-width:767px){
  #main_content .l3d-scope .l3d-hero2__copy{font-size:18px}
  #main_content .l3d-scope .l3d-hero2__en{font-size:11px}
}

/* ===== 案A 静かな一枚（余白と測り） ===== */
#main_content .l3d-scope .l3d-fig{
  --fig-labelw:150px; --fig-gap:36px; --fig-measure:640px;
  margin:14px 0 44px}
#main_content .l3d-scope .l3d-fig picture{display:block;margin:10px 0 0}
#main_content .l3d-scope .l3d-fig img{
  display:block;width:100%;height:auto;aspect-ratio:1786/1315;max-width:100%;
  max-height:none; /* en側ページ内styleの .full-img{max-height:100vh} を打ち消す(低背画面のレターボックス防止) */
  margin:0;border:0;border-radius:0;box-shadow:none;background:none}
#main_content .l3d-scope .l3d-fig__cap{
  display:grid;grid-template-columns:var(--fig-labelw) minmax(0,var(--fig-measure));
  column-gap:var(--fig-gap);margin-top:26px;padding-top:20px;
  border-top:1px solid var(--line,#dfe4ec)}
#main_content .l3d-scope .l3d-fig__label{
  margin:0;font-size:13px;line-height:1.7;letter-spacing:.08em;color:var(--navy,#00205b)}
#main_content .l3d-scope .l3d-fig__zoom{
  display:inline-block;margin-top:12px;font-size:13px;color:var(--navy,#00205b);text-decoration:underline}
#main_content .l3d-scope .l3d-fig__zoom:hover{text-decoration:none}
#main_content .l3d-scope .l3d-fig__zoom i{margin-right:6px}
#main_content .l3d-scope .l3d-fig__note p{
  margin:0;font-size:16px;line-height:2.0;color:var(--ink,#1c2330)}
#main_content .l3d-scope .l3d-fig__note p+p{margin-top:14px} /* en版は複数段落 */
@media (max-width:767px){
  #main_content .l3d-scope .l3d-fig{margin:10px 0 30px}
  #main_content .l3d-scope .l3d-fig__cap{
    grid-template-columns:minmax(0,1fr);row-gap:10px;margin-top:18px;padding-top:16px}
  #main_content .l3d-scope .l3d-fig__meta{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:20px}
  #main_content .l3d-scope .l3d-fig__zoom{margin-top:0;display:inline-flex;align-items:center;min-height:44px}
  #main_content .l3d-scope .l3d-fig__note p{line-height:1.95}
}
@media print{
  #main_content .l3d-scope .l3d-fig__cap{display:block}
  #main_content .l3d-scope .l3d-fig__zoom{display:none}
}

/* ===== MRI解説動画のナレーション切替ボタン(2026-08-11) ===== */
#main_content .l3d-hero__narrbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;color:var(--muted,#5a6472)}
#main_content .l3d-btn--narr{padding:5px 14px;font-size:13px}
#main_content .l3d-hero + .l3d-hero{margin-top:34px}

/* ===== 目次の現在地ハイライト(2026-08-11) ===== */
#sidebar ul li.is-current a{color:#36b9ed;font-weight:700}

/* ===== クロージング誘導帯(2026-08-11) ===== */
#main_content .l3d-cta{margin:44px 0 8px;padding:30px 20px;text-align:center;
  background:var(--navy,#00205b);border-radius:3px;color:#fff}
#main_content .l3d-cta__lead{margin:0;font-size:20px;font-weight:700;line-height:1.6;color:#fff}
#main_content .l3d-cta__sub{margin:8px 0 0;font-size:13.5px;line-height:1.9;color:#c9d4e8}
#main_content .l3d-cta__btns{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
#main_content .l3d-cta__btns a.btn{font-size:14px;padding:9px 22px}

/* 紺帯内のボタンは白反転(cta反転2026-08-11) */
#main_content .l3d-cta__btns a.btn.btn-info{background:#fff;border-color:#fff;color:#00205b}
#main_content .l3d-cta__btns a.btn.btn-info:hover,#main_content .l3d-cta__btns a.btn.btn-info:focus{background:#c9d4e8;border-color:#c9d4e8;color:#00205b}