@charset "UTF-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* CSS font */
@import "font_style.css";
/* CSS Document */
/*PC*/
@media print, screen and (min-width:1000px){
/*---------- commonの指定 ----------*/
body {
margin:0px !important;
padding:0px !important;
font-size:1.0rem !important;;
line-height:1.5rem;
letter-spacing:0.5px;
color:#666 !important;
background:#f0f0f0 !important;
}
img{
	vertical-align: bottom;
}
a:hover img{filter:alpha(opacity=80); opacity:0.8;}

ul{
	list-style:none;
}
.pc_none{
	display:none;
}
nav{
	width:100%;
	height:auto;
	margin:0px auto;
}
section{
	width:100%;
	height:auto;
	margin:0px auto;
}
article{
	width:100%;
	height:auto;
	margin:0px auto;
}
figure{
	width:100%;
	height:auto;
	margin:0px auto;
}
figcaption{
	width:100%;
	height:auto;
	margin:0px auto;
}
/*---------- リンクの指定 ----------*/
a:link {color:#333;}
a:visited {color:#333;}
a:hover {color:#080;}
a img {border-style:none;}
.hideAnchor {
	display:block;
	height:0px;
	overflow:hidden;
	margin-top:100px;
	padding-bottom:10px;
}
/*---------- ヘッダーの指定 ----------*/
header {
	width:100%;
	height:auto;
	margin:0px auto;
	clear:both;
}
	
	.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
	}
	
/*---------- g_naviの指定 ----------*/
#g_navi_back_sub ul{
margin:0px;padding:0px;
border-bottom:none !important;
list-style-type:none;
}
#g_navi_back_sub li{
margin:0px;
list-style-type:none;
border-bottom:none !important;
}
#g_navi_sub_outline{
	width:100%;
	height:auto;
	background-color:#fff;
}
#sub_box_outline{
	width:1000px;
	height:auto;
	margin:0px auto;
}
#sub_box{
	width:320px;
	height:55px;
	float:left;
}
		#g_navi_sub{width:680px; margin:0px auto !important; height:55px; padding:0px !important;float:left;}
		#g_navi_sub ul{width:680px;margin:0px auto !important;border-bottom:none !important; padding:0px !important;}
		#g_navi_sub li{float:left; height:55px;margin:0px auto !important;border-bottom:none !important;}
		#g_navi_sub li a{background:url(../common_img/g_navi_sub.png) left top no-repeat; height:0; width:auto; padding-top:55px; overflow:hidden; display:block; font-size:9px;}
		#g_navi_sub01 a{width:170px !important;}
		#g_navi_sub02 a{background-position:-170px 0 !important; width:170px !important;}
		#g_navi_sub03 a{background-position:-340px 0 !important; width:170px !important;}
		#g_navi_sub04 a{background-position:-510px 0 !important; width:170px !important;}
		#g_navi_sub05 a{background-position:-680px 0 !important; width:170px !important;}
		#g_navi_sub01 a:hover, #g_navi_sub01 .on{background-position:0 -55px !important; width:170px !important;}
		#g_navi_sub02 a:hover, #g_navi_sub02 .on{background-position:-170px -55px !important; width:170px !important;}
		#g_navi_sub03 a:hover, #g_navi_sub03 .on{background-position:-340px -55px !important; width:170px !important;}
		#g_navi_sub04 a:hover, #g_navi_sub04 .on{background-position:-510px -55px !important; width:170px !important;}
		#g_navi_sub05 a:hover, #g_navi_sub05 .on{background-position:-680px -55px !important; width:170px !important;}	

/*---------- ボディーの指定 ----------*/
#outline {
	width:100%;
	height:100%;
	margin:0px auto;
}
	
#outlines {
	width:100%;
	height:100%;
	margin:0px auto;
}
	#container {
    width: 100%;
	height:550px;
    text-align: center;
	margin-bottom:0px !important;
	position:relative;
	top:0px;
	left:0px;
	}
	#containers {
    width: 100%;
	height:200px;
    text-align: center;
	margin-bottom:0px !important;
	position:relative;
	top:0px;
	left:0px;
	}
	.product{
		background:url(../common_img/hero2.jpg) no-repeat center;
		background-size:100% auto;
	}
	.about{
		background:url(../common_img/about.jpg) no-repeat top center;
		background-size:100% auto;
	}
	.contact{
		background:url(../common_img/contact.jpg) no-repeat center;
		background-size:100% auto;
	}
	#container h2{
		font-size:27px;
		font-family: 'Noto Sans Japanese', serif;
		font-weight: 300;
		line-height:70px;
		margin-top:250px;
	}
#header_logo{
		width:700px;
		height:100px;
		background:rgba(255,255,255,0);
		position: absolute; /* absolute or fixed */
		top:100px;
		left: 50%;
		margin-left:-350px;
		z-index:9999;
	}
#header_logos{
		width:700px;
		height:100px;
		background:rgba(255,255,255,0);
		position: absolute; /* absolute or fixed */
		top:50px;
		left: 50%;
		margin-left:-350px;
		z-index:9999;
	}
	#header_info{
		width:240px;
		height:90px;
		background:rgba(62,58,57,0.8);
		position: absolute; /* absolute or fixed */
		bottom:50px;
		right: 10%;
		z-index:9999;
		padding:20px;
		animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
	}
	#header_info h2{
		text-align:left !important;
		color:#fff;
		font-size:14px;
		margin:0px 0px 20px 0px;
		padding:0px;
		line-height:14px;
	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
	}
	#header_info p{
		text-align:left !important;
		color:#fff;
		font-size:13px;
		line-height:18px;
	animation: fadeIn 5s ease 0s 1 normal;
    -webkit-animation: fadeIn 5s ease 0s 1 normal;
	}
	@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
	}
	
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	
#ancho{
	width:50px;
	height:50px;
	background-color:#f00 !important;
	position: absolute; /* absolute or fixed */
	bottom:0px;
    left: 80%;
	z-index:9999;
}
/*---------- ボディ指定 ----------*/
#main_body{
	width:970px;
	height:auto;
	padding:15px;
	margin:10px auto;
	text-align:center;
}
#main_body h2{
	margin:20px 0px 30px;
	padding:0px 0px 10px;
	border-bottom:1px solid #333;
}
/*---------- flip-container指定 ----------*/	
.intro{
	width:450px;
	height:700px;
	margin:70px auto;
	
	float:left;
	background:url(../imgs/product.png);
	background-color:#fff;
}
.intros{
	width:450px;
	height:700px;
	margin:70px auto;
	background-color:#fff;
	float:left;
}
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 225px;
	height: 350px;
}
.back p.go{
	width:330px;
	font-size:12px;
	text-align:right;
	margin-top:660px;
	margin-right:20px;
	line-height:40px;
}
.back p.go a{
	width:330px;
	font-size:12px;
	text-align:right;
	line-height:40px;
	color:#333;
}
.back p.gos{
	width:330px;
	font-size:12px;
	text-align:right;
	margin-top:310px;
	margin-right:20px;
	line-height:40px;
}
.back p.gos a{
	width:330px;
	font-size:12px;
	text-align:right;
	line-height:40px;
	color:#00f;
}
/* flip speed goes here */
.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;

	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
#cont_body{
	width:900px;
	height:auto;
	margin:20px auto;
	text-align:left;
}
#cont_body_line{
	width:100%;
	height:auto;
	border-bottom:1px solid #ccc;
}
#cont_body_line_left{
	width:26%;
	height:auto;
	padding:2%;
	float:left;
	font-size:14px;
}
#cont_body_line_right{
	width:66%;
	height:auto;
	padding:2%;
	float:left;
	font-size:12px;
	box-sizing:border-box;
	border-left:1px dotted #ccc;
}
#go_contact{
	width:800px;
	height:80px;
	margin:30px auto;
}
#go_contact img a:hover{
	opacity:0.8;
}
/*---------- 2コラム指定 ----------*/			
	#content_side{
		width:300px;
		height:auto;
		float:left;
	}
		#content_side_in{
		width:300px;
		height:auto;
		float:left;
		}
	#content_main{
		width:700px;
		height:auto;
		float:left;
	}
/*---------- フォームの指定 ----------*/
.ex1{
	height:35px !important;
	line-height:35px !important;
	color:#666;
	font-size:14px !important;
}
.ex2{
	line-height:35px;
	color:#666;
	font-size:14px;
}
.ex5{
	line-height:57px !important;
	color:#666 !important;
	font-size:20px !important;
}
/*---------- フッターの指定 ----------*/
footer {
	width:100%;
	height:auto;
	margin:0px auto;
	border-top:solid 2px #333;
	padding-top:15px;
}
#footer_area_in{
	width:970px;
	height:auto;
	margin:0px auto;
	padding:15px;
}
#footer_logo{
	width:350px;
	height:auto;
	float:left;
}
#footer_area_in ul.f_navi {
	width:620px;
	float:left;
	margin:0px;
	padding:0px;
}
#footer_area_in ul.f_navi li a{
	width:110px;
	float:left;
	font-size:12px;
	line-height:25px;
	color:#333;
	padding: 0px 5px;
	border-right:dotted 1px #333;
	text-align:center;
	font-weight:bold;
}
.f_navi li:last-of-type a{
	border-right:none !important;
}
#footer_area_copy{
	width:100%;
	height:50px;
	margin:20px auto 0px;
	background-color:#333;
	text-align:center;
	color:#fff;
	font-size:14px;
	line-height:50px;
}
}