/* =========================================================
   EASE 音声/Canvasページ専用レイアウト v20
   対象：12ease00.html、12ease*_m.html など body.ease-audio-page

   重要：Canvas/Animate本文が消えないように、
   #animation_container / canvas / dom_overlay_container には一切指定しない。
   元の表示フローを保ったまま、外枠と右メニューだけを整える。
   ========================================================= */

body.ease-audio-page {
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.ease-audio-page #wrapper {
  width: 1200px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #ffffff !important;
  text-align: left !important;
}

/* Canvas側の .main は元の float レイアウトを維持 */
body.ease-audio-page .main {
  width: 930px !important;
  height: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: left !important;
  clear: none !important;
  overflow: visible !important;
  background: #FFFFBF !important;
}

/* 下部バーは元の 50px のまま。Canvasの描画位置には干渉しない */
body.ease-audio-page .main > div[class^="main_foo_"]:not(.main_foo_mae):not(.main_foo_tsugi) {
  width: 930px !important;
  height: 50px !important;
  margin: 7px 0 0 0 !important;
  padding: 0 !important;
  float: left !important;
  clear: both !important;
  overflow: hidden !important;
}

body.ease-audio-page .main_foo_mae {
  margin: 0 !important;
  float: left !important;
}

body.ease-audio-page .main_foo_tsugi {
  margin: 0 !important;
  float: right !important;
}

/* 右メニューだけを現行サイズへ調整 */
body.ease-audio-page .sub {
  float: right !important;
  clear: none !important;
  width: 245px !important;
  height: 656px !important;
  margin: 0 !important;
  padding: 5px 0 0 0 !important;
  background: #FFFFBF !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.ease-audio-page .sub .bottom,
body.ease-audio-page ul.bottom {
  display: grid !important;
  grid-template-columns: 98px 98px !important;
  column-gap: 4px !important;
  row-gap: 3px !important;
  width: 200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

body.ease-audio-page .sub .bottom li,
body.ease-audio-page ul.bottom li {
  grid-column: 1 / 3 !important;
  float: none !important;
  clear: none !important;
  width: 200px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

body.ease-audio-page .sub .bottom li a,
body.ease-audio-page ul.bottom li a,
body.ease-audio-page .sub .bottom li img,
body.ease-audio-page ul.bottom li img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: bottom !important;
}

body.ease-audio-page .sub .bottom li:not(.sb) a,
body.ease-audio-page .sub .bottom li:not(.sb) img,
body.ease-audio-page ul.bottom li:not(.sb) a,
body.ease-audio-page ul.bottom li:not(.sb) img {
  width: 200px !important;
  height: 40px !important;
  max-width: 200px !important;
  max-height: 40px !important;
}

body.ease-audio-page .sub .bottom li.sb,
body.ease-audio-page ul.bottom li.sb {
  grid-column: auto !important;
  width: 98px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.ease-audio-page .sub .bottom li.sb a,
body.ease-audio-page .sub .bottom li.sb img,
body.ease-audio-page ul.bottom li.sb a,
body.ease-audio-page ul.bottom li.sb img {
  width: 98px !important;
  height: 35px !important;
  max-width: 98px !important;
  max-height: 35px !important;
}

body.ease-audio-page .record_shortcut {
  clear: both !important;
  display: block !important;
  float: none !important;
  width: 245px !important;
  height: 40px !important;
  margin: 8px auto 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body.ease-audio-page .record_shortcut img {
  display: block !important;
  width: 245px !important;
  height: 40px !important;
  max-width: 245px !important;
  max-height: 40px !important;
  border: 0 !important;
}


/* =========================================================
   v21：EASE音声ページの下部オレンジ帯位置調整
   通常ページの下部帯、および右メニュー最下部の
   「血液透析わたしの体調記録」ボタン位置に近づける。
   ========================================================= */

body.ease-audio-page .main {
  background: #FFFFBF !important;
}

body.ease-audio-page .main > div[class^="main_foo_"]:not(.main_foo_mae):not(.main_foo_tsugi) {
  margin: 7px 0 0 0 !important;
}


/* =========================================================
   v22：EASE音声ページの上端位置調整
   コルク枠が背景の上部いっぱいまで来るように、
   EASE音声ページ専用wrapperの上余白をなくす。
   ========================================================= */

body.ease-audio-page #wrapper {
  margin: 0 0 0 8px !important;
}


/* =========================================================
   v24：EASE音声ページを一般ページの余白・下部帯位置に合わせる
   12ease04_01_m.html 等の音声ページと 12ease04_01.html 等の一般ページで
   上余白・下部オレンジ帯の高さ/位置が違っていたため、
   EASE音声ページ専用CSSの外枠・main・footer・右メニューだけを
   site-side-layout と同じ基準に揃える。
   Canvas/Animate本体には指定しない。
   ========================================================= */

body.ease-audio-page #wrapper {
  position: relative !important;
  width: 1206px !important;
  height: 672px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #ffffff !important;
  text-align: left !important;
}

body.ease-audio-page .main {
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  width: 930px !important;
  height: 656px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* 下部オレンジ帯を一般ページと同じ 930×59、下端固定にする */
body.ease-audio-page .main > div[class^="main_foo_"]:not(.main_foo_mae):not(.main_foo_tsugi) {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 930px !important;
  height: 59px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  overflow: hidden !important;
  z-index: 5 !important;
}

body.ease-audio-page .main_foo_mae {
  position: absolute !important;
  left: 12px !important;
  top: 5px !important;
  margin: 0 !important;
  float: none !important;
}

body.ease-audio-page .main_foo_tsugi {
  position: absolute !important;
  right: 12px !important;
  top: 5px !important;
  margin: 0 !important;
  float: none !important;
}

/* 右メニューも一般ページと同じ位置にする */
body.ease-audio-page .sub {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  left: auto !important;
  width: 245px !important;
  height: 656px !important;
  margin: 0 !important;
  padding: 5px 0 0 0 !important;
  float: none !important;
  clear: none !important;
  background: #FFFFBF !important;
  overflow: visible !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   v25：EASE音声ページのオレンジ帯上の余白を消す
   一般ページでは黄色本文エリアが下部帯の直前まであるため、
   音声ページでも Canvas 表示高さを下部帯の開始位置 597px に合わせる。
   ========================================================= */

body.ease-audio-page #animation_container,
body.ease-audio-page #dom_overlay_container,
body.ease-audio-page #canvas {
  width: 930px !important;
  height: 597px !important;
}

/* =========================================================
   v28：Q&A・目次・血液透析ボタンの表示だけ一般ページに合わせる
   全体サイズ・位置・Canvas・下部帯・右メニュー配置は変更しない。
   対象はボタン画像の表示指定のみ。
   ========================================================= */

body.ease-audio-page .sub .bottom li.sb,
body.ease-audio-page ul.bottom li.sb {
  width: 98px !important;
  height: 35px !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

body.ease-audio-page .sub .bottom li.sb a,
body.ease-audio-page .sub .bottom li.sb img,
body.ease-audio-page ul.bottom li.sb a,
body.ease-audio-page ul.bottom li.sb img {
  display: block !important;
  width: 98px !important;
  height: 35px !important;
  max-width: 98px !important;
  max-height: 35px !important;
  min-width: 98px !important;
  min-height: 35px !important;
  object-fit: fill !important;
  image-rendering: auto !important;
  vertical-align: top !important;
  transform: none !important;
}

body.ease-audio-page .record_shortcut {
  width: 245px !important;
  height: 40px !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

body.ease-audio-page .record_shortcut img {
  display: block !important;
  width: 245px !important;
  height: 40px !important;
  max-width: 245px !important;
  max-height: 40px !important;
  min-width: 245px !important;
  min-height: 40px !important;
  object-fit: fill !important;
  image-rendering: auto !important;
  vertical-align: top !important;
  transform: none !important;
}