@charset "utf-8";
/* トップ以外のページの共通設定 ここから↓ */

#container{
	display: flex;
	min-height: 600px
}
	
#contact #wrapper #container,#about #wrapper #container{
	height:100vh;
	margin: 0px auto -80px auto ;
}
	
#left_box{
	width: 270px;
	height: 100%
}

#right_box {
	width: 100%;
	height: 100%;
	padding: 0 10px
}

#right_box h2 {
	font-size: 87%;
	color: #576099;
	width: auto;
	height: 20px;
}

.textbox{
	width: 100%
}

.limit_600{
	max-width: 600px
}

#s_navi {
width: 250px;
margin-left: 20px;
margin-top: 40px;
}

#s_navi table{
	height: 230px;
	width: 250px;
	margin-top: -10px;
	border-collapse: collapse;
	background-image: url(../img/snavi_bg.jpg);
	background-repeat: no-repeat;
	margin-bottom: 20px;
	background-size: 230px
}

#s_navi a {
	display: block;
	height: 60px;
	width: 60px;
	text-indent: -9999px;
	background-size: 60px;
}

#s_navi #navi_top a:hover {
	background-image: url(../img/snavi_top.jpg);
}

#s_navi #navi_about a:hover {
	background-image: url(../img/snavi_about.jpg);
}

#s_navi #navi_cont a:hover {
	background-image: url(../img/snavi_cont.jpg);
}

#s_navi #navi_work a:hover {
	background-image: url(../img/snavi_work.jpg);
}
/* トップ以外のページの共通設定  ここまで↑ */

/* アバウトページの設定 ここから↓ */
#about #s_navi #navi_about a {
	background-image: url(../img/snavi_about.jpg);
}
#about #f_navi_2 a {
	background-position: -52px -54px;
}
/* アバウトページの設定 ここまで↑ */

/* コンタクトページの設定 ここから↓ */
#contact #s_navi #navi_cont a {
	background-image: url(../img/snavi_cont.jpg);
}
#contact #f_navi_3 a {
	background-position: -104px -54px;
}
/* コンタクトページの設定 ここまで↑ */

/* Sp */

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

#container{
	display: block
}

#left_box {
	display: none
	}	
	
#right_box {
	width: 340px;
	height: 90%;
	padding: 20px 10px 0 10px;
	margin-left: 0
}
	
.textbox{
		width: 320px
	}	
}