/* O-Saisei front lists layout fix v082
   旧CMSのトップ更新情報4枠を固定2x2に整える。
*/

/* PC: 2x2固定配置 */
#wrapper_contents div#contents div#contents_up,
.wrapper_contents div.contents div.contents_up {
  zoom: 1;
}

#wrapper_contents div#contents div#contents_up div#up_01,
#wrapper_contents div#contents div#contents_up div#up_03,
.wrapper_contents div.contents div.contents_up div.up_01,
.wrapper_contents div.contents div.contents_up div.up_03 {
  float: left;
}

#wrapper_contents div#contents div#contents_up div#up_02,
#wrapper_contents div#contents div#contents_up div#up_04,
.wrapper_contents div.contents div.contents_up div.up_02,
.wrapper_contents div.contents div.contents_up div.up_04 {
  float: right;
}

/* 2段目は必ず左右の下から始める。高さ違いfloat事故を防止 */
#wrapper_contents div#contents div#contents_up div#up_03,
.wrapper_contents div.contents div.contents_up div.up_03 {
  clear: both;
}

/* 4枠の背景画像 */
#wrapper_contents div#contents div#contents_up div#up_01,
.wrapper_contents div.contents div.contents_up div.up_01 {
  background-image: url(/img/bg_upbox01.gif);
  background-repeat: no-repeat;
}

#wrapper_contents div#contents div#contents_up div#up_02,
.wrapper_contents div.contents div.contents_up div.up_02 {
  background-image: url(/img/bg_upbox17.gif);
  background-repeat: no-repeat;
}

#wrapper_contents div#contents div#contents_up div#up_03,
.wrapper_contents div.contents div.contents_up div.up_03 {
  background-image: url(/img/bg_upbox21.gif);
  background-repeat: no-repeat;
  background-position: left top;
  /* bg_upbox21.gif は元画像が大きいため、枠幅に合わせて縮小 */
  background-size: 300px auto;
}

#wrapper_contents div#contents div#contents_up div#up_04,
.wrapper_contents div.contents div.contents_up div.up_04 {
  background-image: url(/img/bg_upbox06.gif);
  background-repeat: no-repeat;
}

/* 空表示文言 */
#wrapper_contents div#contents div#contents_up .junbi,
.wrapper_contents div.contents div.contents_up .junbi {
  display: block;
  font-size: 120%;
  line-height: 1.5em;
  margin: 0 5px 0 25px;
}

/* スマホ */
@media screen and (max-width: 768px) {
  #wrapper_contents div#contents div#contents_up div#up_01,
  #wrapper_contents div#contents div#contents_up div#up_02,
  #wrapper_contents div#contents div#contents_up div#up_03,
  #wrapper_contents div#contents div#contents_up div#up_04,
  .wrapper_contents div.contents div.contents_up div.up_01,
  .wrapper_contents div.contents div.contents_up div.up_02,
  .wrapper_contents div.contents div.contents_up div.up_03,
  .wrapper_contents div.contents div.contents_up div.up_04 {
    float: none;
    clear: both;
    background-size: contain;
    position: relative;
    width: 100%;
    border: none;
    padding-bottom: 1em;
    margin-bottom: 1em;
  }

  #wrapper_contents div#contents div#contents_up div#up_01,
  .wrapper_contents div.contents div.contents_up div.up_01 {
    background-image: url(/img/mb_content_h1_03.png);
  }

  #wrapper_contents div#contents div#contents_up div#up_02,
  .wrapper_contents div.contents div.contents_up div.up_02 {
    background-image: url(/img/mb_content_h1_17.png);
  }

  #wrapper_contents div#contents div#contents_up div#up_03,
  .wrapper_contents div.contents div.contents_up div.up_03 {
    background-image: url(/img/mb_content_h1_21.png);
  }

  #wrapper_contents div#contents div#contents_up div#up_04,
  .wrapper_contents div.contents div.contents_up div.up_04 {
    background-image: url(/img/mb_content_h1_09.png);
  }

  #wrapper_contents div#contents div#contents_up div#up_01:before,
  #wrapper_contents div#contents div#contents_up div#up_02:before,
  #wrapper_contents div#contents div#contents_up div#up_03:before,
  #wrapper_contents div#contents div#contents_up div#up_04:before,
  .wrapper_contents div.contents div.contents_up div.up_01:before,
  .wrapper_contents div.contents div.contents_up div.up_02:before,
  .wrapper_contents div.contents div.contents_up div.up_03:before,
  .wrapper_contents div.contents div.contents_up div.up_04:before {
    content: '';
    position: absolute;
    display: block;
    width: 5px;
    height: 100%;
    left: 10px;
  }

  #wrapper_contents div#contents div#contents_up div#up_01:before,
  .wrapper_contents div.contents div.contents_up div.up_01:before {
    background-color: #e38e32;
  }

  #wrapper_contents div#contents div#contents_up div#up_02:before,
  .wrapper_contents div.contents div.contents_up div.up_02:before {
    background-color: #85a726;
  }

  #wrapper_contents div#contents div#contents_up div#up_03:before,
  .wrapper_contents div.contents div.contents_up div.up_03:before {
    background-color: #f2a51a;
  }

  #wrapper_contents div#contents div#contents_up div#up_04:before,
  .wrapper_contents div.contents div.contents_up div.up_04:before {
    background-color: #d4ac86;
  }

  #wrapper_contents div#contents div#contents_up .junbi,
  .wrapper_contents div.contents div.contents_up .junbi {
    margin-left: 30px;
    font-size: 1rem;
  }
}


/* v083: 4つの更新情報ブロックにも「一覧はこちら」を表示 */
#wrapper_contents div#contents div#contents_up div#up_01 .ichiran,
#wrapper_contents div#contents div#contents_up div#up_02 .ichiran,
#wrapper_contents div#contents div#contents_up div#up_03 .ichiran,
#wrapper_contents div#contents div#contents_up div#up_04 .ichiran,
.wrapper_contents div.contents div.contents_up div.up_01 .ichiran,
.wrapper_contents div.contents div.contents_up div.up_02 .ichiran,
.wrapper_contents div.contents div.contents_up div.up_03 .ichiran,
.wrapper_contents div.contents div.contents_up div.up_04 .ichiran {
  height: 22px;
  text-indent: 0;
  padding: 3px 0 0 0;
  text-align: right;
}

#wrapper_contents div#contents div#contents_up div#up_01 .ichiran img,
#wrapper_contents div#contents div#contents_up div#up_02 .ichiran img,
#wrapper_contents div#contents div#contents_up div#up_03 .ichiran img,
#wrapper_contents div#contents div#contents_up div#up_04 .ichiran img,
.wrapper_contents div.contents div.contents_up div.up_01 .ichiran img,
.wrapper_contents div.contents div.contents_up div.up_02 .ichiran img,
.wrapper_contents div.contents div.contents_up div.up_03 .ichiran img,
.wrapper_contents div.contents div.contents_up div.up_04 .ichiran img {
  margin-right: 5px;
}

@media screen and (max-width: 768px) {
  #wrapper_contents div#contents div#contents_up div#up_01 .ichiran,
  #wrapper_contents div#contents div#contents_up div#up_02 .ichiran,
  #wrapper_contents div#contents div#contents_up div#up_03 .ichiran,
  #wrapper_contents div#contents div#contents_up div#up_04 .ichiran,
  .wrapper_contents div.contents div.contents_up div.up_01 .ichiran,
  .wrapper_contents div.contents div.contents_up div.up_02 .ichiran,
  .wrapper_contents div.contents div.contents_up div.up_03 .ichiran,
  .wrapper_contents div.contents div.contents_up div.up_04 .ichiran {
    position: absolute;
    right: 0;
    top: 10px;
  }
}