@charset "UTF-8";

body{
	color:#000000;
	font-size:14px;
	font-family:"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight:bold;
	line-height:1.75;
}

body,
html{
	height:100%;
}

html{
	padding-right:60px;
}

a{
	text-decoration:none;
}

img{
	vertical-align:top;
	max-width:100%;
}

#open-right{
	width:44px;
	height:44px;
	padding:8px;
	position:fixed;
	top:0;
	right:0;
	
	z-index:9999;
	background:#FF0000;
}

#open-right img{
	transform:rotate(0);
	transition:transform 0.2s linear;
}

.snapjs-right #open-right img{
		transform:rotate(180deg);
	}

#wrapper{
	background:#FFFFFF;
}

header h1{
	color:#FF0000;
	font-size:14px;
	font-weight:bold;
}
	
header h1 span{
	display:block;
	font-size:12px;
	margin-top:20px;
}

.inner{
	width:100%;
	padding:0 20px;
	position:relative;
	box-sizing:border-box;
	oberflow:hidden;
}

nav{
	background:#FF0000;
	position:fixed;
	top:0;
	box-shadow:-2px 0 2px rgba(0,0,0,0.3);
}

nav #gnavi{
	margin-top:60px;
}

nav #gnavi li{
	margin-bottom:20px;
}

section{
	padding:40px 0;
	overflow:hidden;
}

section h2{
	width:80%;
	margin-bottom:30px;
}
	
section h3{
	color:#FF0000;
	font-weight:bold;
	margin-bottom:25px;
}
	
section h3 span{
	font-size:15px;
	margin-bottom:5px;
	display:block;
}

section h3 img{
	width:100%;
}
	
section p{
	margin-bottom:30px;
}

.circle{
	color:#FFFFFF;
	font-size:17px;
	line-height:1.5;
	border-radius:50%;
	background:#FF0000;
	width:170px;
	height:170px;
	padding:40px 20px;
	box-shadow:0 2px 2px rgba(0,0,0,0.4);
	box-sizing:border-box;
}
	
.circle .button{
	font-size:14px;
	text-align:right;
	margin-top:10px;
	padding:5px 10px;
	display:block;
	border:1px solid #FFFFFF;
	background:url(../images/arrow.svg) no-repeat 10px center;
}

.circle a{
	color:#FFFFFF;
}


section#about .circle{
	padding-top:65px;
	text-align:center;
}
section#about .circle span{
	font-size:20px;
}

section#contact #contact_icon{
	margin-bottom:30px;
}

section#contact form{}
	
section#contact form input,
section#contact form textarea{
	width:100% !important;
	padding:10px;
	box-shadow:none;
	border:1px solid #C8C8C8;	
	box-sizing:border-box;	
}

section#contact form textarea{
	height:254px !important;
}

section#contact .asterisk{
	font-size:15px;
	font-weight:normal;
	color:#FF0000;
}

section#contact form .required{
	color:#FF0000;
	margin-left:15px;
}

section#contact form dl dt{
	padding:15px 0 0 0;
}

section#contact form dl dd{
	padding:15px 0;
	border-bottom:1px solid #000000;
}

section#contact form dl dd.last{
	border:none;
}

section#contact form #submit{
	text-align:center;
}

section#contact form #submit input{
	height:120px;
	background:url(../images/submit.svg) no-repeat left top;
	border:none;
	cursor:pointer;
}

section#brand ul li{
	margin-bottom:20px;
}

section#brand ul li img{
	width:100%;
	height:auto;
}

footer{
		font-size:9px;
		line-height:1;
		text-align:center;
		padding:19px 0;
	}

del{
	display:block;
}

.center{
	text-align:center;
}

.grey{
	background:#F0F0F0;
}

.mb0{
		margin-bottom:0;
	}
	
@media screen and (max-width:959px){
	.pc{
		display:none;
	}
	
	.snap-content {
		position: absolute;
		top: 0;
		right: 14px !important;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
		z-index: 2;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	
	.snap-drawer{
		width: 240px;
		padding-right:14px;
		padding-left:20px;
		box-sizing:border-box;
	}	
	
	#logo,
	#header_contents,
	#tee,
	.circle{
		margin-right:auto;
		margin-left:auto;
	}
	
	#logo{
		width:60%;
		margin-top:70px;
		margin-bottom:70px;
	}
	
	#copy{
		width:100%;
		border-bottom:4px solid #FF0000;
		padding-bottom:10px;
		margin-bottom:20px;
	}
	
	#header_contents{
		width:100%;
	}
	
	.hr,
	#address{
		display:none;
	}
	
	#tee{
		width:90%;
		position:absolute;
		top:50%;
		left:0;
		right:0;	
		margin-top:-40%;
		margin-right:auto;
		margin-left:auto;
		z-index:-1;
		text-align:center;
	}
	
	#fb{
		position:absolute;
		top:-60px;
		left:10px;
		width:60px;
	}
	
	header .circle{
		margin-top:80px;
		margin-bottom:50px;	
	}
	
	.technique_container{
		width:280px;
		margin-right:6px;
		margin-left:6px;
		background:#E6E6E6;
	}
	
	.technique_container .technique_summary{
		padding:20px;
	}
	
	.technique_container .technique_summary{
		font-size:13px;
		height:230px;
	}
	
	.slick-dots{
		position:static !important;
		width:100% !important;
		margin-top:20px !important;
		margin-right:auto !important;
		margin-left:auto !important;
		
	}
	
	.slick-dots li{
		width:10px !important;
		height:10px !important;
		background:#C0C0C0;
		margin:0 10px 0 0 !important;
		border-radius:50%;
		text-indent:-9999px;
	}
	
	.slick-dots li.slick-active{
		background:#FF0000;
	}
	
	.slick-dots li button{
		width:10px !important;
		height:10px !important;
	}
	
	.slick-dots li button::before {
		content:'' !Important;
	}
}

@media screen and (min-width:640px) and (max-width:959px){
	#header_contents{
		width:80%;
	}
	
	section#brand #brand_list li{
		width:20% !important;
		margin:10px 2.5%;
		float:left;
	}
}

@media screen and (min-width:960px){
	body{
		font-size:15px;
	}	
		
	nav{
		width:680px;
		height:100%;
		right:-620px;
	}
	
	.snap-drawer{
		width: 540px;
		padding-right:40px;
		padding-left:60px;
	}
	
	nav #gnavi{
		width:540px;	
	}
	
	nav #gnavi ul{
		margin-top:120px;
	}
	
	nav #gnavi li{
		margin-bottom:60px;
	}
	
	
	header{
		height:760px;
	}
	
	.inner{
		width:1040px;
		height:100%;
		margin-right:auto;
		margin-left:auto;

		box-sizing:content-box;
	}
	
	#logo{
		width:240px;
		height:320px;
		position:absolute;
		top:60px;
		left:20px;
		z-index:2;
	}
	
	#header_contents{
		position:absolute;
		top:200px;
		left:600px;
		z-index:2;
	}
	
	#copy{
		width:440px;
		height:110px;
			padding-right:20px;
	}
	
	header .hr{
		width:100px;
		height:4px;
		padding:40px 0;
	}
	
	header h1{
		font-size:29px;
		line-height:1.75;
	}
	
	header h1 span{
		display:block;
		font-size:19px;
		margin-top:30px;
	}
	
	header .circle{
		top:400px;
		left:220px;
		z-index:2;
	}
	
	.circle .button{
		font-size:19px;
		text-align:right;
		margin-top:10px;
		padding:5px 20px;
		display:block;
		border:1px solid #FFFFFF;
	}
	
	#tee{
		position:absolute;
		top:125px;
		left:300px;
		z-index:1;
	}
	
	#fb{
		position:absolute;
		bottom:-60px;
		right:20px;
		width:120px;
	}
	
	#address{
		width:144px;
		height:68px;
		position:absolute;
		bottom:80px;
		left:20px;
		z-index:2;
	}
	
	section#about{}
	
	section#about{}
	
	section#print_technique{}
	
	section#print_technique #technique_list{}
	
	section#print_technique #technique_list .technique_container{
		width:1000px;
		height:300px;
		margin-right:10px;
		margin-bottom:50px;
		margin-left:10px;
		position:relative;
		background:#E6E6E6;
		overflow:hidden;
	}
	
	section#print_technique #technique_list .technique_container .image{
		position:absolute;
		top:0;
		left:0;
	}
	
	section#print_technique #technique_list .technique_container .technique_summary{
		padding:20px 50px 20px 450px;
	}
	
	section#print_technique #technique_list .technique_container .technique_summary p{
		font-size:18px;
		line-height:33px;
	}
	
	.slick-dots{
		position:static !important;
		width:1000px !important;
		margin-right:auto !important;
		margin-left:auto !important;
		text-align:left !important;
	}
	
	.slick-dots li{
		width:90px !important;
		height:10px !important;
		background:#C0C0C0;
		margin:0 10px 0 0 !important;
	}
	
	.slick-dots li.slick-active{
		background:#FF0000;
	}
	
	.slick-dots li button{
		width:90px !important;
		height:10px !important;
	}
	
	section#about .circle{
		padding-top:100px;
		top:224px;
		left:640px;
	}
	
	section#about .circle span{
		font-size:20px;
	}
	
	section#contact{}
	
	section#contact #contact_icon{
		width:700px;
		height:120px;
		margin-bottom:70px;
	}
	
	section#contact form input,
	section#contact form textarea{
		width:480px !important;
	}
	
	section#contact form .required{
		color:#FF0000;
		margin-left:15px;
	}
	
	section#contact form dl dt{
		padding:15px 0;
		float:left;
	}
	
	section#contact form dl dd{
		padding:15px 0 15px 230px;
	}
	
	section#contact form #submit{
		max-width:480px;
		padding-left:230px;
		text-align:left;
	}
	
	section#brand{}
	
	section#brand #brand_list{
		margin-top:67px;
	}
	
	section#brand #brand_list li{
		width:200px;
		margin-right:67px;
		float:left;
	}
	
	section#brand #brand_list li.last{
		margin-right:0;
	}
	
	footer{
		font-size:14px;
		padding:19px 0;
	}
	
	section{
		padding:105px 0;
	}
	
	section h2{
		width:540px;
		height:50px;
		margin-bottom:40px;
	}
	
	section h3{
		color:#FF0000;
		font-weight:bold;
		margin-bottom:25px;
	}
	
	section h3 span{
		font-size:23px;
		margin-bottom:5px;
		display:block;
	}
	
	section h3 img{
		width:350px;
		height:35px;
	}
	
	section p{
		font-size:28px;
		font-weight:bold;
		margin-bottom:60px;
	}
	
	.circle{
		font-size:25px;
		line-height:1.5;
		width:245px;
		height:245px;
		padding:60px 35px;
		position:absolute;
	}
}

::selection{
	color:#FFFFFF;
	background:#FF0000;
}
::-moz-selection{
	color:#FFFFFF;
	background:#FF0000;
}

/*--clearfix--*/
.clearfix:after {
	display : block;
	clear : both;
	height : 0;
	content : "";
	overflow : hidden;
}
.clearfix {
	overflow : hidden;
}
/* for Mac IE \*/
* html .clearfix {
	height : 1%;
	overflow : visible;
}
.clearfix {
	display : block;
}
/* end of for Mac IE */