@charset "UTF-8";

/* CSS Document */

@media screen and (max-width:1920px) {
/* CONTACT FORM MQ _ TABLET */
.image-grid-rect { width: 12.5%; }
}

@media screen and (max-width:1580px) {
/* CONTACT FORM MQ _ TABLET */
.image-grid-rect{ width: 16.6666%; bottom: 0px; }
}

@media screen and (max-width:1280px) {
.category-list ul, .friendly-site-list ul{ width: 33.3333%;}
.image-grid-rect { width: 20%; }
}

@media screen and (max-width:1024px) {
.box-search { margin-left: 15px; }
.box-search .input{ width: 160px; }
.share{display:none;}
.category-list ul, .friendly-site-list ul{ width: 33.3333%;}
.image-grid-rect { width: 25%; }
.video_cont { position: relative; display: block; padding-right: 0px; padding-left: 0px; }
.video_adv { display: block; width: 100%; position: relative; height: 256px; overflow: hidden; margin-top: 25px; margin-bottom: 25px; padding-top: 5px; padding-bottom: 5px; text-align: center; top: auto; right: auto; }
.video_adv .banner { display: inline-block; padding: 3px; margin: 2px 10px; }

}

@media screen and (max-width:800px) {
.box-search { margin-left: 15px; }
.box-search .input{ width: 160px; }
.report .s-left, .report .s-right { width: 100%; }
.report .s-left { padding-bottom: 10px; }
.report .sel { width: 100%; }
.image-grid-rect, .category-list ul, .friendly-site-list ul { width: 33.3333%; }
}

@media screen and (max-width:767px) {
/* IMAGE GRID MQ _ MOBILE */
.u-p{height: auto; }
.logo, .box-search{float: none; margin-left:auto;margin-right:auto; }
.box-search{margin-top:0px;}
.box-search .input{ width: auto; position:absolute; right:25px; left:5px;  }
.box-search .button{ float: right;  margin-right: 5px; }
.share { height: 23px; float: none; margin-top: 9px; margin-left:auto;margin-right:auto;display:block;}
.image-grid-rect, .category-list ul, .friendly-site-list ul { width: 50%; }

}

@media screen and (max-width:480px) {
.nav-menu { display: block; }
.nav-list { display: none; }
.nav-open { float: left; display: block; position: absolute; top: 141px; margin-top: 0px; margin-left: 0px; right: 0px; left: 0px; height: auto; background-color: #EEEEEE; padding: 0px 10px 10px 10px }
.nav-open li { float: left; margin-right: 0px; width: 100%; margin-bottom: 2px; }
.nav-open li a { display: block; padding-left: 5px;}
.nav-open li a:hover{background:none; background-color:#CACACA;}
.image-grid-rect, .category-list ul, .friendly-site-list ul{ width: 50%;}

}

@media screen and (max-width:330px) {
/* IMAGE GRID MQ _ MOBILE */
.image-grid-rect, .category-list ul, .friendly-site-list ul { width: 100%; }
.box-search{margin-bottom:10px;}
.share { display:none;}
.nav-open{top: 108px;}
}