/* =========================================================
   共用レイアウトCSS v9
   方針：
   - 特定ページ専用の拡大・縮小補正はしない
   - 02check03_03 等の文字自体は動かさない
   - フッターを少し下へ逃がして、最下行が隠れないようにする
   ========================================================= */

/* =========================================================
   右メニュー付き通常ページ
   ========================================================= */

body.site-side-layout {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* v7より高さを16px増やし、下部バーを下へ逃がす */
body.site-side-layout #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;
}

/* 本文の横幅はそのまま、縦だけ16px増やす */
body.site-side-layout .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;
}

/* 黄色本文エリアも16px増やす。本文内の文字・画像位置は変更しない */
body.site-side-layout .main_yel,
body.site-side-layout .main_yel0,
body.site-side-layout .main_yel1,
body.site-side-layout .main_yel2,
body.site-side-layout .main_yel3,
body.site-side-layout .main_yel4 {
  position: relative !important;
  width: 930px !important;
  height: 597px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background-color: #FFFFBF !important;
}

/* 下部バーは下げるだけ。中のボタン位置は変更しない */
body.site-side-layout .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;
  overflow: hidden !important;
  z-index: 5 !important;
}

body.site-side-layout .main_foo_mae {
  position: absolute !important;
  left: 12px !important;
  top: 5px !important;
  margin: 0 !important;
  float: none !important;
}

body.site-side-layout .main_foo_tsugi {
  position: absolute !important;
  right: 12px !important;
  top: 5px !important;
  margin: 0 !important;
  float: none !important;
}

/* =========================================================
   右メニュー
   ========================================================= */

body.site-side-layout .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;
}

body.site-side-layout .sub .bottom,
body.site-side-layout 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.site-side-layout .sub .bottom li,
body.site-side-layout 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.site-side-layout .sub .bottom li a,
body.site-side-layout ul.bottom li a,
body.site-side-layout .sub .bottom li img,
body.site-side-layout ul.bottom li img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: bottom !important;
}

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

/* Q&A・目次は横並び */
body.site-side-layout .sub .bottom li.sb,
body.site-side-layout ul.bottom li.sb {
  grid-column: auto !important;
  width: 98px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.site-side-layout .sub .bottom li.sb a,
body.site-side-layout .sub .bottom li.sb img,
body.site-side-layout ul.bottom li.sb a,
body.site-side-layout ul.bottom li.sb img {
  width: 98px !important;
  height: 35px !important;
  max-width: 98px !important;
  max-height: 35px !important;
}

/* Q&A・目次との間に余白 */
body.site-side-layout .record_shortcut {
  position: absolute !important;
  left: 0 !important;
  bottom: 9px !important;
  display: block !important;
  width: 245px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  z-index: 30 !important;
}

body.site-side-layout .record_shortcut img {
  display: block !important;
  width: 245px !important;
  height: 40px !important;
  max-width: 245px !important;
  max-height: 40px !important;
  border: 0 !important;
}

/* =========================================================
   全幅ページ
   ========================================================= */

body.site-wide-layout {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  overflow: auto !important;
  background: #ffffff !important;
}

body.site-wide-layout #wrapper {
  position: relative !important;
  width: 1186px !important;
  min-height: 672px !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: visible !important;
  background: #ffffff !important;
  text-align: left !important;
}

body.site-wide-layout .main_yel_zen,
body.site-wide-layout .main_yel_zen2,
body.site-wide-layout .main_index {
  margin: 0 !important;
  overflow: visible !important;
}

/* =========================================================
   その他の単独ページ
   ========================================================= */

body.site-simple-margin {
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

body.site-simple-margin #wrapper {
  position: relative !important;
  margin: 0 !important;
  padding: 8px !important;
  background: #ffffff !important;
}


/* =========================================================
   v14：main_yel_footXX など未対象だった黄色本文エリアの余白修正
   11foot01_01 / 11foot03_01 / 11foot03_02 で
   下部オレンジ帯の上に白い余白が出る問題への共通対応。
   ========================================================= */

body.site-side-layout .main > div[class^="main_yel"] {
  position: relative !important;
  width: 930px !important;
  height: 597px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background-color: #FFFFBF !important;
}


/* =========================================================
   v15：おめでとうページの黄色背景を下まで延長
   main_yel_finish のページには下部ナビゲーション帯が無いため、
   通常ページ用の 597px では下に白い余白が出る。
   右メニューと同じ高さまで黄色背景を伸ばす。
   ========================================================= */

body.site-side-layout .main > .main_yel_finish {
  height: 656px !important;
  min-height: 656px !important;
  background-color: #FFFFBF !important;
  overflow: visible !important;
}


/* =========================================================
   v20：扉ページの黄色背景を下まで延長
   下部ナビゲーション帯が無い扉ページだけに body.site-door-layout を付けて適用。
   他ページには影響しない。
   ========================================================= */

body.site-side-layout.site-door-layout .main > div[class^="main_yel"] {
  height: 656px !important;
  min-height: 656px !important;
  background-color: #FFFFBF !important;
  overflow: visible !important;
}


/* =========================================================
   v23：扉ページのコルク枠を上端に合わせる
   v15/v20で扉ページの黄色背景を下まで伸ばしたため、
   背景画像が right bottom のままだと上に黄色余白が出る。
   扉ページだけ background-position を right top にする。
   ========================================================= */

body.site-side-layout.site-door-layout .main > div[class^="main_yel"] {
  background-position: right top !important;
}