/* CSS Document */
@media screen and (max-width: 1260px) {
	body_1260 {}
	
	.header .menu {
		float:right;
		margin-right:10px;
	}	
}

@media screen and (max-width: 960px) {
	body_960 {}

	.header .logo {
		left:10px;
	}	
	
	.header .menu {
		margin-right:5px;
	}
	
	.header .menu ul li {
		margin-left:5px;
		margin-right:5px;
	}
	
	.header .menu ul li a {
		padding-left:0;
		padding-right:0;
	}
}

@media screen and (max-width: 880px) {
	body_880 {}
	
	.header .logo {
		position:relative;
		left:auto;
		top:auto;
		margin:auto;
		display:inline-block;
		padding-top:5px;
	}
	
	.header .mobile_menu {
		display:block;
	}
	
	.header .mobile_menu.open {
		background-image:url('../img/mobile_menu_close.png')
	}
	
	.header .menu {
		position:absolute;
		background:#f7f7f4;
		right:0;
		top:72px;
		border-left:1px solid #d9dad6;	
		z-index:25;
		margin-right:0;
		width:100%;		
		height:calc(100vh - 71px);
		overflow:hidden;
		max-width:0;
		
		transition:max-width 0.3s;
	}
	
	.header .menu.open {
		max-width:300px;
	}
	
	.header .menu ul {
		padding-top:30px;
	}
	
	.header .menu ul li {
		float:none;
		height:40px;
		line-height:40px;
		text-align:left;
		padding-left:40px;
	}
	
	.header .menu ul li a {
		font-size:16px;
	}
	
	.header .menu ul li a:hover:before {
		width:0;
	}
}

@media screen and (max-width: 520px) {
	body_520 {}
	
	.header {
		height:50px;
	}
	
	.header .logo {
		height:40px;
	}
	
	.header .logo img {
		width:42px;
	}
	
	.header .logo h1 {
		line-height:40px;
		font-size:36px;
	}
	
	.header .mobile_menu {
		width:40px;
		height:40px;
		background-size:30px auto;
	}
	
	.header .menu {
		top:52px;
	}
	
	.for_pen_container {
		padding-top:50px;
		height: calc(100vh - 50px);
	}
	
	.for_pen_container .pen_container {
		width:100%;
	}
	
	.for_content .fixed_content {
		height: calc(100vh - 90px);
		padding-top:90px;
	}
	
	.for_content .fixed_content .sheet {
		width: calc(100% - 20px);
		height: calc(100vh - 110px);
	}
	
	.for_content .fixed_content .sheet .content {
		padding: 20px;
		padding-right:40px;
	}
	
	.for_content.home .fixed_content .sheet .content {
		padding-right:70px;
		padding-left:10px;
	}
	
	.for_content .fixed_content .sheet .content p {
		line-height:16px;
	}
	
	.for_content.home .fixed_content .sheet .content .arrow_next {
		bottom:40px;
	}
	
	.for_content.home .fixed_content .sheet .content .arrow_next:hover {
		bottom:40px;
		padding-top:0;
	}
}

@media screen and (max-width: 440px) {
	body_440 {}

	.header .logo {
		float:left;
		margin-left:15px;
	}
	
	.header .logo h1 {
		font-size:34px;
	}	
}