@charset "utf-8";

body { margin:0; padding:0; width:100%; color:#444; font:normal 16px/30px メイリオ; background:#fff;}
html, .wrapper { padding:0; margin:0; background: #def1ff;}
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
.logo { padding:0; margin:0 auto; text-align: center;}
h1 { margin:0; padding:20px 0px 0; color:#000; font:bold 32px/1.2em メイリオ; letter-spacing:-2px;}
h2, h2 a, h2 a:hover { font:normal 28px/1.3 メイリオ; padding:10px 0; margin: 10px 0 0; color:#000;}
h3 { font-size: 20px; line-height:1.3; padding: 0; margin: 10px 0 15px; color:#335eb8}
p { margin:3px 0; padding:0 0 8px 0; font:normal 16px/30px メイリオ; color:#444}
a { color:#444; text-decoration:none;}
a:hover { color:#335eb8;}
a.rm { padding:0; text-decoration:none; color:#fff;}

.header, .mainbox, .menu_nav, .fbg, .footer, form, ol, ol li, ul { margin:0; padding:0;}


.header { padding:0; background: url(images/header_bg.jpg) no-repeat;}
.header_resize { margin:0 auto; width:970px;}

.text_infor { margin: 30px 0 0px; padding: 20px; border: double 3px #b3baff; background: #fff;}

.hbg { width:970px; padding:10px 0;}

.menu_nav { margin:20px 0 0 0; padding:0; width:770px; float:right;}
.menu_nav ul { list-style:none; margin:0; padding:0; float:right;}
.menu_nav ul li { margin:0; padding:0; float:left;}
.menu_nav ul li a { display:block; margin:0; padding:17px 5px; color:#d4d4d4; text-decoration:none; font-size:10px; line-height:16px;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#FFF; padding-bottom: 8px; border-bottom: solid 2px #fff;}


.mainbox { padding:15px 10px; margin:0 auto; width:970px; background: #fff;}

.bar { margin:0; padding: 10px 0 20px; float:left; width:650px;}

.bar .categories { position: absolute; z-index: 99; float: left; margin: 10px 0 0; padding: 20px; width: 360px; height: 200px; background-color: rgba(255,255,255,0.70);}
.bar .categories p {color: #000;}
.bar img { }
.bar img.fi { margin: 10px 0px 15px 0; padding: 0px; float:left; }
.bar img.fl { margin:4px 16px 4px 0; padding: 2px; float:left; border:1px solid #57b2f6; }
.bar img.sub { margin:10px 0 20px 0; float:left; }

.bar .box { margin:0 0 45px 0px; padding:0px 0 0px;}

.bar .box1 { float: left; width: 305px; margin: 0 0px;}
.bar .box1:nth-child(2n+0) {float: right;}

.bar .post-data a { color:#595959;}
.bar .post-data a.com { float:right; color:#e58a42;}
.bar .spec a { background:#bde4ff; padding:3px 10px; float: right; color:#444; font-weight: bold;}
.bar .spec a:hover {border-radius: 10px; background: #78c8ff; transition: .3s;}

.sidebar { padding:0; float:right; width:270px;}
.sidebar .gadget { margin: 10px 0 20px; padding:10px 0px 5px;}
.gadget h2 {position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;}
.gadget h2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.gadget h2 a {font-size: 23px;}

ul.sb_menu { margin: 10px 0; padding:00; color:#939393; list-style:none;}
ul.sb_menu li { margin:3px 0;}
ul.sb_menu li { padding:4px 0 4px 10px; border: solid 1px #bde4ff; border-left:solid 2px #bde4ff;}
ul.sb_menu li:hover { padding:4px 0 4px 10px; background: #bde4ff; transition: .4s;}
ul.sb_menu li a { color:#3f3f3f; text-decoration:none; margin-left:0px; }
ul.sb_menu li a:hover, ul.sb_menu li.active a { color:#000; }


.fbg { background:#bde4ff; padding:2px 0;}
.fbg_resize { margin:0 auto; padding:0 20px; width:930px;}


.footer { }
.footer_resize { margin:0 auto; padding:20px 0; width:930px;}
.footer .lf { float:left;}
.footer .rf { text-align:center}
.footer p { margin:0; padding:4px 0; width:auto; line-height:1.5em; color:#444;}
.footer p a { color:#335eb8; text-decoration:none;}
.footer p a:hover { text-decoration: underline; color:#335eb8}

p .spec a{ color:#000}
.search span {display:block; background:#FFF; height:29px; margin:0; padding:0; border:1px solid #e7e7e7;}
.search input#s { float:left; width:220px; padding:7px 0 7px 10px; margin:0; border:0; background:none; color:#afaeae; font:normal 12px/15px メイリオ; }
.search .btn { float:right; padding:0; margin:0; border:0; width:auto; }

.view {
   width: 285px;
   height: 185px;
   margin: -10px 0px 30px;
   float: left;
   border: 10px solid #ffdbea;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 285px;
   height: 185px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: メイリオ;
   font-size: 16px;
   position: relative;
   color: #fff;
   padding: 0px 20px 0px;
   text-align: left;
}
.view a {
   color: #fff;
}
.view a.info {
   font-size: 14px;
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-second img {
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-second .mask {
   background-color: rgba(115,146,184, 0.7);
   width: 300px;
   padding: 60px;
   height: 300px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(265px, 145px) rotate(45deg);
   -moz-transform: translate(265px, 145px) rotate(45deg);
   -o-transform: translate(265px, 145px) rotate(45deg);
   -ms-transform: translate(265px, 145px) rotate(45deg);
   transform: translate(265px, 145px) rotate(45deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-second h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: translate(200px, -200px);
   -moz-transform: translate(200px, -200px);
   -o-transform: translate(200px, -200px);
   -ms-transform: translate(200px, -200px);
   transform: translate(200px, -200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-second p {
   -webkit-transform: translate(-200px, 200px);
   -moz-transform: translate(-200px, 200px);
   -o-transform: translate(-200px, 200px);
   -ms-transform: translate(-200px, 200px);
   transform: translate(-200px, 200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-second a.info {
   -webkit-transform: translate(0px, 100px);
   -moz-transform: translate(0px, 100px);
   -o-transform: translate(0px, 100px);
   -ms-transform: translate(0px, 100px);
   transform: translate(0px, 100px);
   -webkit-transition: all 0.2s 0.1s ease-in-out;
   -moz-transition: all 0.2s 0.1s ease-in-out;
   -o-transition: all 0.2s 0.1s ease-in-out;
   -ms-transition: all 0.2s 0.1s ease-in-out;
   transition: all 0.2s 0.1s ease-in-out;
}
.view-second:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translate(-80px, -125px) rotate(45deg);
   -moz-transform: translate(-80px, -125px) rotate(45deg);
   -o-transform: translate(-80px, -125px) rotate(45deg);
   -ms-transform: translate(-80px, -125px) rotate(45deg);
   transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
   -webkit-transform: translate(0px,0px);
   -moz-transform: translate(0px,0px);
   -o-transform: translate(0px,0px);
   -ms-transform: translate(0px,0px);
   transform: translate(0px,0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
.view-second:hover p {
   -webkit-transform: translate(0px,0px);
   -moz-transform: translate(0px,0px);
   -o-transform: translate(0px,0px);
   -ms-transform: translate(0px,0px);
   transform: translate(0px,0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-second:hover a.info {
   -webkit-transform: translate(0px,0px);
   -moz-transform: translate(0px,0px);
   -o-transform: translate(0px,0px);
   -ms-transform: translate(0px,0px);
   transform: translate(0px,0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}