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

/*———————————–———————————–
　　ヘッダー
———————————–———————————–*/
.header_container{
    height: 90px;
    z-index: 101;
}

.header{
width: 100%;
height: 90px;
position: fixed;
z-index: 101;
background:#ffffff;
}


/*———————————–———————————–
　　ナビスタイル
———————————–———————————–*/

.navi_box{
margin: auto;
display: table;
height: 100%;
width:100%;
position: relative;
}

.navi_bar {
    width: 30%;
    max-width: 300px;
    display: table-cell;
	vertical-align: middle;
	padding-left: 20px;
}

.navi_bar img{ width:100%; max-width:150px;}

.nav {max-width: 960px;	text-align: right;	display: table;background:#ffffff; position:absolute; right:0;}
.nav ul {display:block;     height: 90px; font-size:0; padding:0 20px;}
.nav li {display:inline-block; position:relative; height:100%;width: 100px;text-align: center;}
.nav li a{color: #111;height: 100%;display: block;padding:25px 0 0 0; font-weight:100;}

/*———————————–———————————–
　　JSで以下のクラス切り替え
———————————–———————————–*/
.open {	opacity: 1;	display: inherit;	height: 100%;}
.fixed {	position: inherit;	width: 100%;	height: 100%;}

/*———————————–———————————–
　　Hover　（ホバー時色変更、日本語付与etc）
———————————–———————————–*/
.navigation li a:hover{	background:#ffd200;  color:#fff;}
.navigation li a:after{
	font-family: Noto Sans Japanese ,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	display:block;
	position:absolute;
	bottom:15px;
	left:0;
	width:100%;
	font-size:14px;
	font-weight:300;
	text-align:center;
	color:#CFCFCF
}
.navigation li:nth-child(1) a:after{content:"トップ";}
.navigation li:nth-child(2) a:after{content:"サービス";}
.navigation li:nth-child(3) a:after{content:"制作の流れ";}
.navigation li:nth-child(4) a:after{content:"料金プラン";}
.navigation li:nth-child(5) a:after{content:"実績";}
.navigation li:nth-child(6) a:after{content:'お問い合わせ';}

.navigation li a:hover:after{
	color:#fff;
}

.navigation li:nth-child(1){
	display:none;
}



@media screen and (max-width: 768px) {
	
}
  </style>