/* common */

/* ------------------------------------------------ Center */

html { height: 100%; }

body {
	clear: both;
	width: 100%;
	height: 100%;
}

div#ctn {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	top: 130px;
}

#index div#ctn {
	top: 0;
}


/* ------------------------------------------------ Header */

header {
	width: 94%;
	height: 50px;
	display: block;
	margin: 0;
	padding: 50px 3% 30px 3%;
	overflow: auto;
	clear: both;
	position: fixed;
	z-index: 2;
	background-color: white;
}
@media (max-width: 1000px) {
	header { width: 920px; padding: 50px 30px 30px; }
}

#index header {
	position: relative !important;
}

header figure.logo {
	float: left;
	width: 220px;
	margin: 0;
	padding: 0;
}

header ul.nav {
	float: right;
	width: 655px;
	overflow: auto;
}
header ul.nav li {
	float: left;
	margin-left: 3em;
}
header ul.nav li a {
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 0.06em;
	color: black;
	display: inline-block;
	cursor: pointer;
	position:relative;
	overflow:hidden;
	padding-bottom: 0.5em;
}

header ul.hover li a:before {
	content: "";
	position: absolute;
	width: 0;
	background : black;
	left: 45%;
	height: 2px;
	bottom: 0;
	transition: all .3s;
}

header ul.hover li a:hover:before {
	width: 100%;
	left:0;
}


/* ------------------------------------------------ Footer */

footer {
	width: 100%;
	margin: 110px 0 1em;
	position: absolute;
	bottom: 0;
}
footer div {
	position: fixed;
	right: 0;
	bottom: 0;
	background-color: white;
	padding: 1em 1.5em;
	font-size: 14px;
	font-weight: bold;
}
small {
	text-align: center;
	font-size: 12px;
	color: #BFBFBF;
	width: 100%;
	display: inline-block;
	text-align: center;
}


/* ------------------------------------------------ Main */

body article,.title_back {
	animation: fadeIn 3s ease 0s 1 normal;
	-webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

div.title_back {
	display: block;
	background-attachment: fixed;
	width: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #EBEBEB
}

@media (max-width: 1200px) {
	div.title_back { background-size: 1200px; }
}

@media (min-width: 1600px) {
	div.title_back { background-size: 80%; background-position: top right;}
}

body#philosophy div.title_back {
	background-image: url(../img/philosophy_bg.jpg);
	}
body#aboutus div.title_back {
	background-image: url(../img/aboutus_bg.jpg);
	}
body#product div.title_back {
	background-image: url(../img/product_bg.jpg);
	}
body#contact div.title_back {
	background-image: url(../img/contact_bg.jpg);
}

div.title_back h1 {
	font-size: 20px;
	letter-spacing: 0.1em;
	display: block;
	width: 316px;
	height: 160px;
	padding: 125px 0 0 100px;
	/* #f5f5f5+0,f5f5f5+100&1+0,0+100 */
	background: -moz-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#00f5f5f5',GradientType=0 ); /* IE6-9 */
}
div.title_back h1 span {
	display: block;
}

article.main,
article.main_p {
	margin: 100px auto 0;
	width: 920px;
	padding: 0 20px 100px;
	overflow: hidden;
}

article.main_p section {
	overflow: hidden;
}

article.main p,
article.main_p p {
	font-size: 14px;
	line-height: 37px;
}
article.main_p p,
article.main_p div {
	float: left;
	width: 60%;
}
article.main_p div h1 {
	font-size: 16px;
}
article.main_p div h1 span {
	font-weight: normal;
	font-size: 14px;
}
article.main_p div p {
	float: none;
	margin-bottom: 2em;
	line-height: 1.5em;
}
article.main_p div p span {
	font-size: 12px;
}
article.main_p div table tr th {
	padding-right: 1em;
	font-weight: normal;
}
article.main_p figure {
	float: right;
	width: 40%;
}
#aboutus article.main_p figure {
	width: 15%;
	float: left;
	margin-right: 80px;
}
#aboutus article.main_p figure.sign {
	width: 140px;
	margin-right: 80px;
	float: right;
}
article.main_p figure img {
	width: 100%;
}

article.main_p section.machine {
	display: block;
	overflow: hidden;
	background-color: #F5F5F5;
	padding: 0 0 0 6%;
	width: 94%;
	clear: both;
	margin: 75px 0 50px;
}
article.main_p section.machine div {
	float: left;
	width: 400px;
}
article.main_p section.machine div h1 {
	font-size: 14px;
	font-weight: bold;
	margin: 65px 0 40px;
}
article.main_p section.machine div p {
	font-size: 12px;
	line-height: 37px;
	width: auto;
}
article.main_p section.mobile div p {
	font-size: 10px;
	line-height: 1.5em;
}
article.main_p section.machine figure {
	width: 420px;
	float: right;
	margin: 0;
	padding: 0;
	line-height: 0;
}
article.main_p section.machine figure img {
	width: 100%;
}

/* ------------------------------------------------ Index */

body#index article section {
	min-width: 1000px;
	margin: 0 auto;
}

body#index article section figure {
	width: 50%;
	max-width: 800px;
	margin: 15% auto 0;
	display: block;
}
body#index article section figure img {
	width: 100%;
}

/* ------------------------------------------------ Contact */

body#contact article {
	overflow: hidden;
}

section.form {
	width: 600px;
	font-size: 14px;
	float: left;
}

section.form table {
	width: 100%;
}
section.form table tr th,
section.form table tr td {
	padding-bottom: 27px;
	vertical-align: top;
}
section.form input:first-child { margin-top: 3px; }
section.form table tr th {
	padding: 0.6em 1em 27px 0;
	font-weight: normal;
}
section.form table.entry tr td {
	text-align: center;
}

section.form table.confirm tr td {
	width: 60%;
	padding-top:0.6em;
}

section.form input[type="text"],
section.form textarea {
	width: 94%;
	background-color: #F4F4F4;
	padding: 1.5% 3%;
	border: 3px solid #F4F4F4;
	color: black;
	font-size: 14px;
	line-height: 1.5em;
	border-radius: 5px;
	resize: vertical;
	font-weight: normal;
}
section.form input:focus,
section.form textarea:focus {
	background-color: #FFFFFF;
	border: 3px solid #F4F4F4;
	box-shadow: 0 0 7px #F1F1F1;
}
/* フォーム初期値フォントスタイル設定（赤） */
section.form input::placeholder { color: red; opacity: 0.4; }
section.form input::-webkit-input-placeholder { color: red; opacity: 0.4; }
section.form input:-ms-input-placeholder { color: red; opacity: 0.4; }
section.form input::-moz-placeholder { color: red; opacity: 0.4; }
section.form input::-placeholder { color: red; opacity: 0.4; }
/* フォーム初期値フォントフォーカス時のスタイル設定（0に透過） */
section.form input:focus::placeholder { opacity: 0; }
section.form input:focus::-webkit-input-placeholder { opacity: 0; }
section.form input:focus:-ms-input-placeholder { opacity: 0; }
section.form input:focus::-moz-placeholder { opacity: 0; }
section.form input:focus::-placeholder { opacity: 0; }


section.form input[type="submit"],
a#formd_btn {
	width: 12em;
	font-size: 14px;
	font-weight: bold;
	background-color: white;
	letter-spacing: 1em;
	text-align: center;
	padding: 0.5em 3em 0.5em 4em;
	border: 3px solid #EAEAEA;
	margin: 20px auto 0;
	display: block;
	text-decoration: none;
	color:black;
}
section.form input[type="submit"]:hover,
a#formd_btn:hover {
	cursor: pointer;
	border-color: #AAA;
	background-color: #AAA;
	color: white;
}

section.form a.pp_btn {
	color: black;
}

#privacypolicy h1 {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	margin-bottom:1em;
}

#privacypolicy h2 {
	font-size: 12px;
	font-weight: bold;
}

#privacypolicy p,#privacypolicy ul {
	font-size: 12px;
	font-weight: normal;
	padding-left: 1em;
}

section.address {
	float: right;
	width: 240px;
	font-size: 12px;
	line-height: 20px;
}
section.address h1 {
	font-size: 14px;
	font-weight: bold;
}
section.address h1 span {
	font-size: 12px;
	font-weight: normal;
}
section.address h1,
section.address p {
	margin-bottom: 30px;
}
section.address p {
	font-size: 12px;
	line-height: 2em;
}
section.address a.pdf {
	display: block;
	border: 3px solid;
	padding: 1em 0 1em 10%;
	color: black;
	text-decoration: none;
	width: 90%;
	line-height: 0;
}
section.address a.pdf:link,
section.address a.pdf:visited {
	border-color: #EAEAEA;
	background-color: white;
}
section.address a.pdf:hover,
section.address a.pdf:active {
	border-color: #AAA;
	background-color: #AAA;
	color: white;
}
section.address a.pdf i {
	font-size: 20px;
	padding-right: 0.8em;
	color: #AAA;
	vertical-align: -0.15em;
}
section.address a.pdf:hover i,
section.address a.pdf:active i {
	color: white;
}