* {
	font-family: 'Roboto', sans-serif;color:#656565;font-size:14px;line-height:1.8em;
}
html,body{overflow-x:hidden;}
caption{position:absolute;left:-9999px;}
fieldset{border:none;}
legend{display:none;}
/*************************** common class *********************************/
.layout-grid {max-width: 1100px;margin: 0 auto;clear: both;position: relative;}
.grid{padding:50px;}
.grid.grid-gray{background:#fafafa;}
.clr{clear:both}
.gap{clear:both;height:3em;}
.gap_double{clear:both;height:5em;}
.gap_line{height:40px;border-bottom:1px dashed #dfdfdf;margin-bottom:40px}
.gap_line.gap_line2{border-bottom:1px solid #cccccc;}
.gap_line.gap_line3{border-bottom:1px dashed #666;}

.page-header{position:relative}
.underline{text-decoration:underline;}
.f_left{float:left !important;}
.f_right{float:right !important;}
.badge-blue{background:#287BD3 !important;}
.badge-orange{background:#F78A1E !important;}
.sound_only{position:absolute;left:-9999px;}
img.img-bordred{border:1px solid #cccccc}
.bg-white-gray{background:#fafafa url(/img/playstation-pattern.png);}
.img-padd-bottom{padding-bottom:10px;}
.author, .regdate {text-align: right;padding: 8px 0 15px;color:#999;}
.block {padding: 50px;margin: 20px 0;}
.comment{opacity:.6;}
.bo_name{opacity:.6;}
.img-desc{text-align:center;padding:10px 0;color:#3e2424}
.img-desc:before{content:"▲";color:#e3883f;padding-right:5px;font-size:80%;}
.quote{padding-left:20px;position:relative;margin:20px 0;}
.quote:before{content:"“";font-size:60px;position:absolute;margin-left:-20px;margin-top:-20px;color:#999;font-family:arial;}
.quote:after{content:"”";font-size:60px;color:#999;font-family:arial;float:right;}
.text-lg{font-size:120%;line-height:2em;}

.grid h1{font-size:44px;color:#223460;font-family: 'Domine', serif;text-align:center;margin-bottom:30px;line-height:1.4em;letter-spacing:-1px;}
.grid h2{font-size:15px;color:#223460;font-family: 'Montserrat', sans-serif;text-align:center;margin-bottom:20px;line-height:1.4em;border-top:2px solid #444;border-bottom:1px solid #666;padding:20px 0;}
/*************************** left-panel *********************************/
#left-panel{background:transparent url(../images/common/bg/escheresque_ste/escheresque_ste.png) 50% 0 ;color: #4a250a;width:100%;height:100%;margin-left:-100%;position:fixed;z-index:1100;transition: all 250ms ease-out;-webkit-transition: all 250ms ease-out;overflow:auto;text-align:center;overflow-x:hidden;}
#left-panel ul{padding:0;margin:0;list-style:none;}
#left-panel .navi{line-height:2em;padding:30px 0;}
#left-panel .navi>ul{width:300px;margin:0 auto;text-align:left;}
#left-panel .navi>ul>li{position:relative;padding-left:20px;}
#left-panel .navi>ul>li>a{display:block;font-size:15px;padding-top:.5em;text-decoration:none;color:#7bd2f6}
#left-panel .navi ul:before{content:"";display:block;height:5px;}
#left-panel .navi ul:after{content:"";display:block;height:10px;}
#left-panel .navi ul ul a{font-size:1em;color:#fff;opacity:.6;transition:.3s;}
#left-panel .navi ul ul a:hover{opacity:1;}
#left-panel .social{background:#4a494e;padding:15px 0;}
#left-panel .social a{padding-left:60px;display:inline-block;height:60px;color:#ffffff;background:url(../images/share/icon1.png) 0 50% no-repeat;font-size:13px;padding-top:6px;}
#left-panel .social a.facebook{background-image:url(../images/share/icon2.png) !important;}
#left-panel .total-sch{padding:25px 20px 50px;background:#28272c;}
.navtoggleon #left-panel{margin-left:0;}
/*************************** wrap *********************************/
.response-wrap{position:relative;overflow-x:hidden;}
#wrap{position:relative;z-index:0;transition: all 250ms ease-out;-webkit-transition: all 250ms ease-out;margin:30px auto;}
.navtoggleon #wrap{opacity:.1}
.nav_left_button{position:absolute;top:-50px;right:10px;z-index:3300;width:40px;height:40px;text-align:left;transition:.3s;}
.nav_left_button a{display:block;float:left;margin:0;width:100%;height:50px;}
.nav-toggle { position:relative;cursor: pointer; padding:15px 0 0 0;transition:.3s;}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {cursor: pointer;height: 2px;width: 34px;background: #333333;position: absolute;display: block;content: '';}
.nav-toggle span:before {top: -9px; }
.nav-toggle span:after {bottom: -9px;}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {transition: all 250ms ease-out;-webkit-transition: all 250ms ease-out;}
.navtoggleon .nav-toggle span {background-color: transparent;}
.navtoggleon .nav-toggle span:before, .nav-toggle.navtoggleon span:after {top: 0;}
.navtoggleon .nav-toggle span:before {transform: rotate(45deg);background-color:white}
.navtoggleon .nav-toggle span:after {transform: translateY(-7px) rotate(-45deg);top: 7px;background-color:white}
/*************************** header *********************************/
#header{}
#header .layout-grid{border:1px solid #dfdfdf;border-bottom:none;padding:1.5em 1em;}
#logo{font-size:30px;margin:0px 0 0 10px;display:block;}	
#date{font-size:20px;color:#212121;font-family: 'Montserrat', sans-serif;}
#date strong{font-size:30px;color:#c33f3f;}
/*************************** spot *********************************/
#spot{background:url(../images/common/bg-page.png);border:1px solid #ddd;text-align:right;padding-right:20px;line-height:3em;font-size:13px;color:#ccc;}
#spot a{color:#00a6da;padding:5px;}
/*************************** container *********************************/
#container{}
#colgroup{max-width:1100px;min-height:600px;margin:0 auto;border-right:1px solid #dfdfdf;position:relative;background:url(../images/share/bg_sider.gif) 0 0 repeat-y;}
#content{max-width:100%;margin-left:232px;text-align:justify;background:url(../images/share/bg.png) 98% 0 no-repeat;}
#content .auther{text-align:right;padding:0;font-weight:bold;}
/*************************** aside *********************************/
#aside{width:232px;position:absolute;top:0;left:0;}
#snb ul{width:232px;padding:0;margin:0;list-style:none;position:fixed}
#snb a{display:block;padding-left:20px;color:#444;text-decoration:none;}
#snb>ul{}
#snb>ul:after{content:"";clear:both;display:block;}
#snb>ul>li{position:relative;}
#snb>ul>li>a{font-size:110%;text-decoration:none;color:#444;display:block;line-height:3em;height:3em;font-weight:bold;}
#snb>ul>li.on>a{background:url("../images/share/bg2.png") 100% 50% no-repeat;color:#ffffff;line-height:4em;height:4em;font-size:120%;}

/*************************** footer *********************************/
#footer{}
#footer .layout-grid{padding:10px 0;background:#303030;font-size:90%;}
#footer a{color:#ddd;}
#footer .copy{background:url(../images/share/copy_logo.png) 60px 50% no-repeat;padding:10px 20px 10px 260px;color:#aaa;line-height:1.3em;}
/*************************** quick *********************************/
#quick {display:block;position: fixed;transition: 0.3s;text-indent:-9999px;right:70px;top:50%;z-index:999;}
#quick a{position:absolute;display:block;left:0px;width:60px;height:60px;background: url(../images/common/arrow.png) 50% 50% no-repeat;transition:.3s;cursor: pointer;border-radius:30px;opacity:.5;}
#backtotop{top:0px;text-indent:-9998px;}
#backtobottom{top:60px; text-indent:-9999px;transform: rotate(180deg);}
#quick a:hover{background-color:#ffffff;opacity:1;}
/*************************** etc *********************************/
.prettyPhoto {position: relative;display: inline-block;}
.prettyPhoto img {position: relative;z-index: 0;}
.prettyPhoto span.view {position: absolute;z-index: 1;top: 0;left: 0;display: block;background: #222;width: 28px; height: 28px;font-family: arial;line-height: 28px;color: #fff;text-align: center;font-size: 18px;opacity: 0;filter: alpha(opacity=0);transition: .3s;}
.prettyPhoto:hover span.view {opacity: .8;filter: alpha(opacity=80);}

/*************************** responsive *********************************/
@media all{
	.view-992{display:none;}
	.view-768{display:none;}
	.view-425{display:none;}
	.view-320{display:none;}
}
@media only screen and (max-width: 1400px){	
	
}
@media only screen and (max-width: 1200px){	
	#quick{display:none;}
}
@media only screen and (max-width: 992px ){
	.hide-992{display:none;}
	.view-992{display:block;}	
	.nav_left_button{top:32px;}
	#wrap{margin:0;}
	#header .layout-grid{border:none;}
	#spot{border-left:none;border-right:none;}
	#logo{margin-left:0px;}
	#date{padding-right:50px;}
	#colgroup{margin:0;border:none;background:none;}
	#content{margin:0px;}
}
@media only screen and (max-width: 768px){
	#date{display:none;}
	body{}
	.grid h1{font-size:24px;}
	#footer .copy{background:none;padding-left:20px;}
	h2{font-size:18px;}
	.grid{padding:30px 20px;}
	.gap{height:1em;}
	.block{padding:1em;}	
	.hide-768{display:none;}	
	.view-768{display:block;}
}
@media only screen and (max-width: 425px){	
	.hide-425{display:none;}	
	.view-425{display:block;}
}
@media only screen and (max-width: 320px){
	.hide-320{display:none;}	
	.view-320{display:block;}

}