@charset "utf-8";

@media(max-width:899px){
  
  * {
    box-sizing: border-box;
  }
  
  #main,
  #gloss,
  #footer .padder {
    width: 100%;
  }
  
  #main {
    margin-bottom: 1em;
  }
  
  #header {
    background-image: none;
    border-bottom: 0;
    margin-bottom: 0;
  }
  
  #title,
  #header_logos .logos,
  #header_logos .login_info,
  #content,
  #sidebar,
  #catch,
  #top .media .text,
  #detail .lead .text,
  #result .pickup_row .text {
    width: auto;
    float: none;
  }
  #title {
    margin-bottom: 16px;
  }
  #header_logos .login_info p,
  #header_logos .login_info div {
    display: inline-block;
    vertical-align: bottom;
  }
  
  #header_mn {
    background: #eee;
    float: none;
    width: auto;
    margin: 10px;
    padding: 0;
  }
  #header_mn h3 {
    background-image: url('../images/mn_bg.gif');
    background-repeat: no-repeat;
    background-color: #E62020;
    background-position: top center;
    height: 24px;
    display: block;
    text-indent: -3000px;
  }
  #header_mn ul {
    margin: 1ex;
    text-align: center;
  }
  #header_mn ul li {
    display: inline-block;
    margin: 0 1em;
  }
  #header_mn div {
    padding: 0 1ex 1ex;
    margin: 0;
    height: auto;
    text-align: center;
  }
  #header_mn div a {
    display: block;
    line-height: 1em;
  }
  
  #header_menu {
    width: auto;
    position: inherit;
    border-bottom: 5px solid #9D0B0E;
  }
  #header_menu_main,
  #header_menu_sub {
    display: inline-block;
    width: auto;
    margin-bottom: -5px;
  }
  #header_menu_sub {
    margin-right: 10px;
  }
  
  #gloss table {
    width: 100%;
  }
  #checkpoint,
  #howtouse {
    display: block;
    width: auto;
    margin: 0 10px 10px;
  }
  
  #footer {
    text-align: left;
  }
  #footer #footer_sitename {
    text-align: left;
    padding: 0;
  }
  #footer p {
    text-align: left;
    margin: 0 0 1ex;
  }
  #footer ul {
    border: 0;
    margin-bottom: 1ex;
  }
  #footer li {
    border: 0;
    padding: 0;
    margin-right: 1em;
  }
  
  #top,
  #detail,
  #result {
    margin: 0 10px;
  }
  #top .media .cover,
  #detail .cover_l {
    margin: 0 10px 10px 0;
  }
  
  .banners img {
    width: 100%;
  }
  
  #sidebar>* {
    width: 220px;
    margin: 0 10px 10px 0;
    display: inline-block;
    vertical-align: top;
  }
  
  #detail .media_case dl {
    border-top: 1px solid #ddd;
    margin-top: -1px;
  }
  #detail .media_case h4,
  #detail .media_data h4 {
    background-size: 100%;
  }
  
  .search_media h4 {
    background-size: 100%;
  }

}

@media(max-width:768px){
  
  #header_menu_sub {
    float: none;
  }
  
  .search_media table tr,
  .search_media table td {
    display: inline-block;
    width: auto;
    padding: 0;
  }
  .search_media table td {
    margin: 0 1em 1ex 0;
  }
  .search_media table td input,
  .search_media table td label {
    vertical-align: baseline;
  }

  #result .pickup_row td {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    border: 0;
  }

  #result .pickup_row td {
    display: block;
    width: 100%;
    margin: 0 0 10px;
  }

}