body
{width:980px; height:auto; margin:0px auto; 
font-family:'Microsoft Sans Serif',sans-serif; font-size:12px; color:#696969;}

ul{margin:0; padding:0; list-style:none;}
a{text-decoration:none;}
a img{border-style:none;}
a:link,a:active,a:visited{color:midnightblue;}
a:hover{text-decoration:underline; color:orange;}

iframe{vertical-align:bottom;}

#header{width:980px; height:75px;
background: -moz-linear-gradient( left, #2a2a2a, #5f5f5f );
background: -webkit-gradient(linear, left top, right top, from(#2a2a2a), to(#5f5f5f));
background: -o-linear-gradient( left, #2a2a2a, #5f5f5f );
background: -khtml-linear-gradient( left, #2a2a2a, #5f5f5f );
background: -ms-linear-gradient( left, #2a2a2a, #5f5f5f );
background: linear-gradient( left, #2a2a2a, #5f5f5f );
float:left;}
.header_logo{width:145px; height:30px; margin:20px 0px 0px 15px; float:left;}
.header_linkbox{width:289px; height:35px; margin-top:20px; margin-right:5px; float:right;}
.header_linklogo{width:35px; height:35px; margin:0px 2px; float:left;}
.header_linklogo :hover{position:relative; top:1px; left:1px;}
.header_linklohgo_g{width:90px; height:35px; margin:0px 2px; float:left;}
.header_linklogo_g :hover{position:relative; top:1px; left:1px;}

#drawer{display:none;}

#index_box{width:170px; height:100%;
background: -moz-linear-gradient( left, #2a2a2a, #5f5f5f );
background: -webkit-gradient(linear, left top, right top, from(#2a2a2a), to(#353535));
background: -o-linear-gradient( left, #2a2a2a, #5f5f5f );
background: -khtml-linear-gradient( left, #2a2a2a, #5f5f5f );
background: -ms-linear-gradient( left, #2a2a2a, #5f5f5f );
background: linear-gradient( left, #2a2a2a, #5f5f5f );
float:left;}
.index_navibox{width:150px; height:auto; margin-top:30px; margin-left:10px;}
.index_navi{width:150px; height:40px; margin-bottom:10px;}
.index_navi img{width:150px; height:40px;}
.index_navi img:hover {opacity:0.6; filter:alpha(opacity=30); /*Ie用*/ -webkit-transition: 0.3s; transition: 0.3s;}

.index_bannerbox{width:150px; height:auto; margin-top:100px; margin-left:10px;}
.index_banner{width:150px; height:40px; margin-bottom:10px;}
.index_banner img{width:150px; height:40px;}
.index_banner img:hover {opacity:0.6; filter:alpha(opacity=30); /*Ie用*/ -webkit-transition: 0.3s; transition: 0.3s;}


#footer{width:980px; height:200px; margin:0px auto; float:left;} 
.footer_copy{width:980px; height:30px; text-align:center; background-color:blue; float:left;}
.footer_copy img{margin-top:10px;}
.footer_area{width:980px; height:200px; background-color:#3f3f3f; color:white; float:left;}
.footer_area a{text-decoration:none; color:white;}
.footer_text{width:960px; margin:10px;}
.footer_logo{width:145px; height:80px; margin-right:50px; float:left;}
.footer_logo img{width:145px; height:80px;}
.footer_info{font-size:10px; float:left;}
.footer_info ul{width:195px; margin:10px; float:left;}
.footer_info li{width:195px; margin-bottom:5px; float:left;}

.pure-container{display:none;}



/* ウィンドウ幅が0～479pxの場合に適用するCSS */
@media screen and ( max-width:479px )
{

body{width:100%; margin:0px; padding:0px;}

#header{width:100%; height:50px;}
.header_logo{width:30%; height:auto; margin-top:5px; margin-left:5px;}
.header_logo img{width:100%; height:auto;}
.header_linkbox{width:60%; height:auto; margin-top:2px; margin-right:2px;}
.header_linklogo{width:14%; height:auto; margin:0px;}
.header_linklogo img{width:90%; height:auto;}
.header_linklogo :hover{position:static;}
.header_linklogo_g{width:30%; height:auto; margin:0px; float:left;}
.header_linklogo_g img{width:100%; height:auto; margin-top:3%;}
.header_linklogo_g :hover{position:static;}


#index_box{display:none;}

#drawer{display:block;}
.drawer_btn img{width:40px; height:auto}
.menu-btn{display:block; position:fixed; width:30px; height:30px; bottom:30px; right:30px; border:solid 3px blue; z-index:3; background-color:#3f3f3f; opacity:0.85;}
.bar{display:block; position:absolute; width:24px; height:5px; top:4px; left:3px;
background:white;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;}
.bar.middle{top:13px; opacity:1;}
.bar.bottom{top:22px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;}
.menu-btn:hover .bar{background:white; opacity:0.6;}
.check:checked ~ .menu-btn .bar.top{width:34px; top:2px; left:5px; 
    -webkit-transform: rotate(43deg);
    -ms-transform: rotate(43deg);
    transform: rotate(43deg);}
.check:checked ~ .menu-btn .bar.middle{opacity:0;}
.check:checked ~ .menu-btn .bar.bottom{width:34px; top:24px; left:5px;
    -webkit-transform: rotate(-43deg);
    -ms-transform: rotate(-43deg);
    transform: rotate(-43deg);}
.check:checked ~ .close-menu{background:rgba(0,0,0,0.5); visibility:visible; opacity:1; z-index:3;
 -webkit-transition-duration: 1s;
  transition-duration: 1s;
 -webkit-transition-delay: .1s;}
 /*↓扉の位置*/
.drawer-menu{box-sizing:border-box; position:fixed; top:0; left:0; width:170px; height:100%; padding:0; background:#222;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .5s; /*扉開けのスピード*/
    transition-duration: .5s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform-origin: left center; /*扉の開け方*/
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: perspective(500px) rotateY(-90deg);
    transform: perspective(500px) rotateY(-90deg);
    opacity:0;}
.check:checked ~ .drawer-menu{
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity:1;}
.check {display: none;}



#footer{max-width:100%; height:auto;} 
.footer_copy{width:100%; height:auto;}
.footer_copy img{width:auto; height:auto; margin-top:1%;}
.footer_area{width:100%; height:auto;}
.footer_text{width:auto; height:auto;}
.footer_logo{width:35%; height:auto; margin-bottom:20%;}
.footer_logo img{width:100%; height:auto;}
.footer_info{display:none;}


}