@charset "utf-8";
/* CSS Document */

body{position: relative;}
header{position: fixed; top: 0; left: 0; z-index: 1;}
a{cursor: pointer;}
.section_0{opacity: 0;}


/* head */
@media screen and (min-width: 641px) {

#head_sp{display: none;}

header{width: 100%; background-color: #fff; padding: 40px 0;}
#head_pc{max-width: 1300px; min-width: 900px; height: 40px; margin: 0 auto;}
.head_logo{float: left;}
.head_logo a:hover{opacity: 0.6;}

.head_nav{float: right; width: 632px; height: 27px; margin-top: 13px;}
.head_nav li{float: left; height: 27px;}
.head_nav li a{display: block; height: 27px; text-indent: -9999px;}
.head_nav01, .head_nav02, .head_nav03, .head_nav04, .head_nav05{margin-right: 31px;}

.head_nav01, .head_nav01 a{width: 106px;}
.head_nav01 a{background: url("../images/head_nav_2.gif") 0 0 no-repeat;}
.head_nav01 a:hover, .head_nav01 .active{background: url("../images/head_nav_2.gif") 0 -27px no-repeat;}
.head_nav02, .head_nav02 a{width: 66px;}
.head_nav02 a{background: url("../images/head_nav_2.gif") -137px 0 no-repeat;}
.head_nav02 a:hover, .head_nav02 .active{background: url("../images/head_nav_2.gif") -137px -27px no-repeat;}
.head_nav03, .head_nav03 a{width: 65px;}
.head_nav03 a{background: url("../images/head_nav_2.gif") -234px 0 no-repeat;}
.head_nav03 a:hover, .head_nav03 .active{background: url("../images/head_nav_2.gif") -234px -27px no-repeat;}
.head_nav04, .head_nav04 a{width: 66px;}
.head_nav04 a{background: url("../images/head_nav_2.gif") -330px 0 no-repeat;}
.head_nav04 a:hover, .head_nav04 .active{background: url("../images/head_nav_2.gif") -330px -27px no-repeat;}
.head_nav05, .head_nav05 a{width: 79px;}
.head_nav05 a{background: url("../images/head_nav_2.gif") -427px 0 no-repeat;}
.head_nav05 a:hover, .head_nav05 .active{background: url("../images/head_nav_2.gif") -427px -27px no-repeat;}
.head_nav06, .head_nav06 a{width: 95px;}
.head_nav06 a{background: url("../images/head_nav_2.gif") -537px 0 no-repeat;}
.head_nav06 a:hover, .head_nav05 .active{background: url("../images/head_nav_2.gif") -537px -27px no-repeat;}

/*
.head_nav{float: right; width: 522px; height: 27px; margin-top: 13px;}
.head_nav li{float: left; height: 27px;}
.head_nav li a{display: block; height: 27px; text-indent: -9999px;}
.head_nav01, .head_nav02, .head_nav03, .head_nav04{margin-right: 31px;}

.head_nav01, .head_nav01 a{width: 106px;}
.head_nav01 a{background: url("../images/head_nav.gif") 0 0 no-repeat;}
.head_nav01 a:hover, .head_nav01 .active{background: url("../images/head_nav.gif") 0 -27px no-repeat;}
.head_nav02, .head_nav02 a{width: 66px;}
.head_nav02 a{background: url("../images/head_nav.gif") -137px 0 no-repeat;}
.head_nav02 a:hover, .head_nav02 .active{background: url("../images/head_nav.gif") -137px -27px no-repeat;}
.head_nav03, .head_nav03 a{width: 65px;}
.head_nav03 a{background: url("../images/head_nav.gif") -234px 0 no-repeat;}
.head_nav03 a:hover, .head_nav03 .active{background: url("../images/head_nav.gif") -234px -27px no-repeat;}
.head_nav04, .head_nav04 a{width: 66px;}
.head_nav04 a{background: url("../images/head_nav.gif") -330px 0 no-repeat;}
.head_nav04 a:hover, .head_nav04 .active{background: url("../images/head_nav.gif") -330px -27px no-repeat;}
.head_nav05, .head_nav05 a{width: 95px;}
.head_nav05 a{background: url("../images/head_nav.gif") -427px 0 no-repeat;}
.head_nav05 a:hover, .head_nav05 .active{background: url("../images/head_nav.gif") -427px -27px no-repeat;}
*/
}

@media screen and (max-width: 640px) {

#head_pc{display: none;}

header{width: 100%; background-color: #fff; height: 30px; padding: 30px 0;}
#head_sp{width: 100%; height: 30px;}

.head_logo{float: left; padding-left: 2%; height: 30px; width: 86%;}
.head_nav_wrap{float: right; padding-right: 2%; height: 30px; width: 10%;}
.head_logo img, .head_nav_wrap img{height: 30px;}

.head_nav{background-color: #fff; display: none; border-top: 1px solid #ddd; margin-top: 20px; width: 100%; height: auto;}
.head_nav li{border-bottom: 1px solid #ddd; width: 100%;}
.head_nav li a{color: #333; font-size: 16px; display: block; padding: 15px 0; text-align: center; text-decoration: none; width: 100%;}

}



/* footer */
@media screen and (min-width: 641px) {

#foot_sp{display: none;}

footer{width: 100%; background-color: #1a1a1a; padding: 100px 0;}
#foot_pc{max-width: 1300px; min-width: 1000px; margin: 0 auto;}
#foot_pc a{cursor: pointer;}
.foot_left{float: left; width: 313px;}
.foot_left p{margin: 60px 0 35px 0;}
.foot_left a:hover{opacity: 0.6;}
.foot_right{float: right; width: 641px;}
.foot_right p{text-align: right; margin-top: 232px;}

.foot_nav{width: 641px; height: 27px;}
.foot_nav li{float: left; height: 27px;}
.foot_nav li a{display: block; height: 27px; text-indent: -9999px;}
.foot_nav01, .foot_nav02, .foot_nav03, .foot_nav04, .foot_nav05{margin-right: 20px;}

.foot_nav01, .foot_nav01 a{width: 96px;}
.foot_nav01 a{background: url("../images/foot_nav.gif") 0 0 no-repeat;}
.foot_nav01 a:hover, .foot_nav01 .active{background: url("../images/foot_nav.gif") 0 -27px no-repeat;}
.foot_nav02, .foot_nav02 a{width: 66px;}
.foot_nav02 a{background: url("../images/foot_nav.gif") -116px 0 no-repeat;}
.foot_nav02 a:hover, .foot_nav02 .active{background: url("../images/foot_nav.gif") -116px -27px no-repeat;}
.foot_nav03, .foot_nav03 a{width: 65px;}
.foot_nav03 a{background: url("../images/foot_nav.gif") -202px 0 no-repeat;}
.foot_nav03 a:hover, .foot_nav03 .active{background: url("../images/foot_nav.gif") -202px -27px no-repeat;}
.foot_nav04, .foot_nav04 a{width: 66px;}
.foot_nav04 a{background: url("../images/foot_nav.gif") -287px 0 no-repeat;}
.foot_nav04 a:hover, .foot_nav04 .active{background: url("../images/foot_nav.gif") -287px -27px no-repeat;}
.foot_nav05, .foot_nav05 a{width: 95px;}
.foot_nav05 a{background: url("../images/foot_nav.gif") -373px 0 no-repeat;}
.foot_nav05 a:hover, .foot_nav05 .active{background: url("../images/foot_nav.gif") -373px -27px no-repeat;}
.foot_nav06, .foot_nav05 a{width: 153px;}
.foot_nav06 a{background: url("../images/foot_nav.gif") -488px 0 no-repeat;}
.foot_nav06 a:hover, .foot_nav06 .active{background: url("../images/foot_nav.gif") -488px -27px no-repeat;}

}


@media screen and (max-width: 640px) {

#foot_pc{display: none;}

footer{width: 100%; background-color: #1a1a1a; padding: 30px 0;}
#foot_sp{padding: 0 2%;}
#foot_sp a img{height: 44px;}
#foot_sp p{padding: 30px 0;}
#foot_sp p img{height: 50px;}
#foot_sp > img{height: 11px;}

}