@font-face {
	font-family: 'FuturaExtended';
	src: url('FuturaExtended.woff');
}

body,html{
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	color:#555;
}
body{	
	background:url(back.jpg) fixed;
	}
.notext{	overflow: hidden;text-indent: 100%;white-space: nowrap;}
a:link{color:#202253;}
a:visited{color:#07425b;}
a:hover{color:#f5c2bc;}
/* footer */

footer {
	background:url(addressback.png) repeat-x left bottom;
    width: 100%;
	height:135px;
    margin: 100px auto 0;
    line-height: 1;
	z-index:999;
}
footer .inner {
	position:relative;
    max-width: 930px;
	margin:0 auto;
}
 
footer ul#sns{
	position:absolute;
	top:70px;
	}
footer ul li{float:left;margin-right:15px;font-size:12pt;}
#sns  li{float:left;margin-right:15px;font-size:12pt;list-style-type:none;}
#sns  li a.twitter{display:block;background:url(twitter.gif);width:32px;height:32px;}
#sns  li a.pixiv{display:block;background:url(pixiv.gif);width:32px;height:32px;}
#sns  li a.tumblr{display:block;background:url(tumblr.gif);width:32px;height:32px;}
#sns li a.nico{display:block;background:url(nico.gif);width:32px;height:32px;}

footer address{
	color:#888;
	font-size:80%;
	position:absolute;
	top:82px;
	width:100%;
	text-align:center;
	}
footer .totop{
	position:absolute;
	right:0;
	}
footer .totop a{display:block;background:url(totop.png);width:153px;height:114px;}
 



/* ニュース・ダイアリー */

#newsbox{
	display:table;
	position:relative;
	top:10px;
	max-width:958px;
	margin:0 auto;
	}
.raw{
	margin-top:80px;}
#newsbox .raw{
	margin-top:0px;}


#newsbox .diary{
	background:#f7f7f7;

	display:table-cell;
	position:relative;
	float:left;
	
	max-width:438px;
	box-sizing:border-box;
	min-height:20em;
	margin: 0 0 14px 34px;
	
	padding:25px 20px 20px 60px;
	box-shadow:2px 2px 23px -6px #bfbbc7;
	-moz-box-shadow:2px 2px 23px -6px #bfbbc7;
	-webkit-box-shadow:2px 2px 23px -6px #bfbbc7;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	}
#newsbox time{
	font-family:FuturaExtended, Century Gothic, Helvetica;
	color:F7F7F7;
	background:#202253;
	
	display:block;
	position:absolute;
	
	left:-20px;
	top:20px;
	width:65px;
	height:69px;
	}

#newsbox time span{display:block;float:left;position:absolute;}
#newsbox time .year  {  bottom:7px;left:17px;font-size:80%;}
#newsbox time .month{   top:5px;left:9px;font-size:164%; letter-spacing: -0.2em}
#newsbox time .day{     top:26px;right:8px;width:24px;font-size:100%;text-align:center;}
#newsbox time .thrash{  top:3px;right:28px;width:1px;height:44px;background:#FFF;-webkit-transform:rotate(45deg);transform:rotate(45deg);}

#newsbox .diary h2{
	color:#333;
	font-size:150%;
	
	display:block;
	position:relative;
	
	margin-bottom:10px;
	}

#newsbox .diary p{
	color:#555;
	line-height:155%;
	display:block;
	position:relative;	
	}
#newsbox .diary .figure{
	margin:0 10px 10px 0;float:left;
    position: relative;
    z-index: 2;
}
#newsbox .diary  img{
	border:#c0eae1 solid 3px;
	max-height:150px;
}



/*フォントデコレーション*/

#workbox h2,#workbox h3,
#aboutbox h2,#aboutbox h3{ font-family:FuturaExtended, Century Gothic, Helvetica;}
#workbox h2,
#aboutbox h2{
	color:F7F7F7;
	letter-spacing:2px;
	font-size:150%;
	background:url(menuback_h2.png) no-repeat bottom left;
	
	display:table-cell;
	position:relative;
	vertical-align:middle;
	
	padding-left:77px;
	left:-77px;
	width:200px;
	height:81px;
	}
#workbox h3,#aboutbox h3{
	color:#555;
	font-size:120%;
	margin-bottom:18px;
	
}
#aboutbox h3{
	
	font-weight:bold;
	display:table-cell;
	position:relative;
	vertical-align:middle;
	
	height:76px;
	
	}
	
	

h4{font-weight:bold;margin:0 0 1em 0;}
	
/*box設定*/	
	
#workbox {
	background:#f7f7f7;
	
	max-width:920px;
	margin:0 auto;
	padding:125px 50px 50px;
	box-sizing:border-box;
	
	box-shadow:2px 2px 23px -6px #bfbbc7;
	-moz-box-shadow:2px 2px 23px -6px #bfbbc7;
	-webkit-box-shadow:2px 2px 23px -6px #bfbbc7;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	}
#workbox .wrap{
	padding:12px 0 ;
	}

#workbox .wrap:after{
	content:"";
	display:block;
	clear:both;
	}


#workbox .wrapb:after{
	content:"";
	display:block;
	clear:both;
	}
	


#workbox .gallery img{margin:0 5 0 0;padding:0;max-width:100%;display:block;float:left;}
#workbox #column1 img{border:#f5c2bc solid 4px;margin-bottom:5px;}
#workbox #column2 img{border:#c6ece5 solid 4px;margin-bottom:5px;}
#workbox #column3 img{border:#202253 solid 4px;margin-bottom:5px;}
#workbox #column4 img{border:#ffbbbb solid 4px;margin-bottom:5px;}
#workbox #column5 img{border:#AAAAAA solid 4px;margin-bottom:5px;}
#workbox .leftfloatbox img{display:block;float:left;height:223px;width:160px;}

#workbox #column1 img{float:none;}
#workbox p{margin-bottom:2em;}
#workbox p{line-height:2em;}
#workbox .caution{font-size:80%;font-color:#555;}



#aboutbox{
	max-width:920px;
	margin:0 auto;
	box-sizing:border-box;
	}

#aboutbox .wrap{
    position: relative;
	top: -100px;
	margin-top:30px;
	float:left;
	background:#f7f7f7;
	padding:0 50px 20px 50px;

	width:100%;
	box-sizing:border-box;
	box-shadow:2px 2px 23px -6px #bfbbc7;
	-moz-box-shadow:2px 2px 23px -6px #bfbbc7;
	-webkit-box-shadow:2px 2px 23px -6px #bfbbc7;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	}

#aboutbox .toponly{padding-top:151px;}
#navi.fixed{
	position:fixed;top:0;margin:0;
	padding-top:130px;
	transition:top 0.3s ease-in;
	-webkit-transition:top 0.3s ease-in;
	-moz-transition:top 0.3s ease-in;
	}

#aboutbox ul li{list-style-type:none;margin-bottom:10px;line-height:120%;}

#aboutbox ul#aboutnav li a{
	width:33%;
	background:#1f2152;
	font-size:90%;
	letter-spacing:0.2em;
	width:32%;
	max-height:4em;
	text-align:center;
	margin:1em  0;padding:1.5em 0 ;
	display:block;
	float:left;
	border:1px solid #FFF;
}

#aboutbox ul#aboutnav li a{color:#FFF;text-decoration:none;}
#aboutbox ul#aboutnav li a:hover{background:#777;}

#aboutbox .wrap3 ul li{list-style-type:none;font-size:80%;}

#aboutbox .wrap2{
	float:right;
	margin-left:28px;
	box-sizing:border-box;}
#aboutbox .wrap2 p{
	position:relative;
	}
dl#worklist{
	position:relative;
	}
dl#worklist .table > dt{width:6em;display:table-cell;background:#333;color:#b5acac;padding:15px;font-size:150%;}
dl#worklist .table > dd{width:80%;display:table-cell;padding:15px;}

dl#worklist .table dl > dt{font-size:100%;}
dl#worklist .table dl > dd{font-weight:bold;text-align:right;}

.self dl#worklist{margin-bottom:1em;}

.self dl#worklist .table > dt{font-size:80%;width:20%;}

.self dl#worklist .table > dd{font-size:80%;}



dl#worklist .table dl{margin:0;padding:0;}

dl#worklist .table dd li{margin:0 15px 15px 15px;padding:2em 2em 2em 2em;}
dl#worklist .table dd li.books{background:#FFF;border-left:5px solid #3c71ff;}
dl#worklist .table dd li.goods{background:#FFF;border-left:5px solid #34d91f;}
dl#worklist .table dd li.games{background:#FFF;border-left:5px solid #e731ff;
}
dl#worklist .table dd li.wetc{background:#FFF;border-left:5px solid #cbd51a;}

dl#worklist .table dd li dt{margin:0;}
dl#worklist .table dd li dd{margin:0;}




#aboutbox .wrap3{margin-top:34px;padding:10px 50px 50px;}

#aboutbox:after{
	content:"";
	display:block;
	clear:both;
	}
#aboutbox .table{  display: table;margin-bottom:15px;width:100%;}



ul#ccaution{margin:1em 1em 1em 3em; font-size:80%;color:#555}
ul#ccaution li{list-style-type: square;}
#cform{margin:1em 1em 1em 1em;}
#cform label{display:block;}
#cform input{width:100%;}

#cform textarea{width:100%;}

/* スライド */
#sliderbox{
	position:relative;
	top:50px;
	max-width:930px;
	margin:0 auto;
	padding:0;
	text-align:center;
	}
#sliderbox li{
	border:5px #DDD solid;
	}

.bxslider02 ul li img{
	margin:0 auto;
	width:920px;
	}
	
ul.bxslider02 li a {/*サムネイル*/
    display:block;
    width:60px;
    height:60px;
}
 
ul.bxslider02 li a img{/*サムネイルの画像*/
    display:block;
    width:50px;
	height:50px;
}

 #newold{
	text-align:center;
	margin:0 auto;
	width:930px;
	height:auto;
	}
#newold .new{float:left;background:url(new.png) no-repeat left;display:block;height:48px;width:50%;	z-index:-1;}
#newold .old{float:right;background:url(old.png) no-repeat right;display:block;height:48px;width:50%;z-index:-1;}
#newold:after {
    content: "";
    clear: both;
    display: block;
}
	
@media screen and (max-width: 960px) {
	
#newold{
	width:100%;
	}
#newsbox .diary{max-width:93%;}
#workbox .works{max-width:93%;}
	

#aboutbox {width:100%;float:none;margin:0;padding:0;top:0;left:0;display:block;}	
#aboutbox .wrap{width:100%;float:none;padding:0px 50px 20px;top:0;margin:0;}	
#aboutbox .toponly{padding-top:80px;}
#aboutbox .wrap2,
#aboutbox .wrap3{width:100%;float:none;padding:0px 50px 50px;top:0;}
	
#navi.fixed{position:relative;}

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

#bodybox{
	position:relative;
	width:100%;
	margin:0 auto;
	text-align:center;background:#333;
	}

#sliderbox{
	position:relative;
	top:50px;
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	background:#333;
	}

#imageslider ul li img{
	width:100%;
	height:200px;
	}
	

#newsbox{
	width:100%;
	}


#newsbox .diary  img{	max-width:150px;
}

#newsbox time .month{font-size:23px;top:7px; }
#newsbox time .thrash{right:33px;}
#newsbox time .day{font-size:15px;top:23px;}
#newsbox .diary{

	display:block;
	position:relative;
	float:none;
	
	max-width:100%;
	box-sizing:border-box;
	min-height:0;
	margin: 0 ;
	padding:25px 20px 20px 80px;
	}
#newsbox time{
	font-family:FuturaExtended, Futura;
	color:F7F7F7;
	background:#202253;
	
	display:block;
	position:absolute;
	
	left:0px;
	top:20px;
	width:65px;
	height:69px;
	}
	
	
	

	

#aboutbox {width:100%;float:none;margin:0;padding:0;top:0;left:0;display:block;}	
#aboutbox .wrap{width:100%;float:none;padding:50px 20px 20px;top:0;margin:0;}
#aboutbox .wrap2,
#aboutbox .wrap3{width:100%;float:none;padding:0px 20px 50px;top:0;}
	
#navi.fixed{position:relative;}
#workbox h2,
#aboutbox h2{
	color:#202253;
	background:#F7F7F7;
	border-left:5px solid #202253;
	
	display:block;
	position:relative;
	
	padding:10px 15px;
	left:-20px;
	width:10em;
	height:auto;
	margin:20px 0;
	}
	
	
	
	
	
footer {
    width: 100%;
    margin: 100px auto 0;
    line-height: 1;
	z-index:999;
}
footer .inner {
	position:relative;
    width: 100%;
	margin:0 auto;
}
footer ul{margin:0 0 0 1.5em;}
footer address{text-align:right;right:6em;}
footer .totop a{display:block;background:url(totopmobile.gif);width:32px;height:32px;margin:70px 1.5em 0 0 ;}
 

}