@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css?family=Montserrat:500');
@import url('https://fonts.googleapis.com/css?family=Lora');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Catamaran:100');





/* ---------- reset ---------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display:block;
}

body {
	line-height:1;
}

ol, ul {
	list-style:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

img {
	vertical-align:top;
}





/* ---------- base ---------- */

body {
	background:#000;
	color:#fff;
	font-family: "Noto Sans Japanese";
	min-width:1260px;
}

p {
	font-size:0.875em;
	line-height:1.8;
	padding:0 0 25px;
}

a {
	color:#fff;
}

img {
	height:auto;
	max-width:100%;
	image-rendering:pixelated;
}

@media screen and (max-width:768px) {

	body {
		min-width:100%;
	}

	p {
		font-size:0.8em;
		line-height:1.8;
		padding:0 0 20px;
	}

}





/* ---------- contents ---------- */

.contents {
	margin:60px auto 0;
	width:1200px;
	padding:0 30px 20px;
	overflow:hidden;
}

.section {
	overflow:hidden;
	padding:0 0 30px;
}

.section_inner {
	overflow:hidden;
	padding:30px 0 0;
}

@media screen and (max-width:768px) {

	.contents {
		box-sizing:border-box;
		margin:35px auto 0;
		max-width:100%;
		padding:0 20px 20px;
	}

	.section {
		overflow:hidden;
		padding:0 0 15px;
	}

	.section_inner {
		overflow:hidden;
		padding:15px 0 0;
	}

}





/* ---------- header ---------- */

#header {
	margin:0 auto;
	overflow:hidden;
	padding:0 30px;
	width:1200px;
}

#header h1 {
	float:left;
	padding:35px 0;
	width:260px;
}

#header nav {
	float:right;
	padding:50px 0 0;
}

#header nav ul {
	font-family: 'Montserrat', sans-serif;
	font-size:0.95em;
	letter-spacing:0.1em;
	overflow:hidden;
}

#header nav ul li {
	float:left;
	margin:0 0 0 35px;
}

#header nav ul li a {
	display:block;
	text-decoration:none;
	transition: all 0.3s ease;
}

#header nav ul li a:hover {
	opacity:0.6;
}

#header nav ul li span {
	display:none;
}

#header nav ul li:nth-child(1) a:before {
	content:"PRODUCTS"
}

#header nav ul li:nth-child(2) a:before {
	content:"COMPANY"
}

#header nav ul li:nth-child(3) a:before {
	content:"INQUIRY"
}

@media screen and (max-width:768px) {
	
	#header {
		padding:0;
		width:100%;
	}

	#header h1 {
		float:none;
		margin:0 auto;
		padding:27px 0 25px;
		width:240px;
	}

	#header nav {
		background:#292929;
		padding:0;
		width:100%;
	}
	
	#header nav ul {
		font-size:0.85em;
	}

	#header nav ul li {
		border-top:#000 solid 1px;
		border-right:#000 solid 1px;
		box-sizing:border-box;
		margin:0;
		text-align:center;
		width:33.3%;
	}

	#header nav ul li:nth-child(3n) {
		border-right:none;
		width:33.4%
	}

	#header nav ul li a {
		padding:13px 0 12px;
	}

}





/* ---------- footer ---------- */

#footer {
	background:#292929;
}

#footer div {
	margin:0 auto;
	overflow:hidden;
	padding:0 30px;
	width:1200px;
}

#footer div p {
	background:#222;
	border-left:#000 1px solid;
	border-right:#000 1px solid;
	float:right;
	padding:30px 35px;
	transition: all 0.3s ease;
}

#footer div p:hover {
	background:#333;
	cursor:pointer;
}

#footer div p img {
	opacity:0.5;
}

#footer div p a {
	display:block;
}

#footer h1 {
	float:left;
	padding:35px 0 0 0;
	width:200px;
}

#footer ul {
	float:left;
	padding:45px 0 0 15px;
}

#footer ul li {
	color:#ccc;
	font-size:0.75em;
	float:left;
	letter-spacing:0.2em;
	line-height:1.5;
	padding:0 0 0 15px;
}

#footer > p {
	background:#000;
	color:#666;
	font-size:0.65em;
	padding:20px 0;
	text-align:center;
}

@media screen and (max-width:768px) {
	
	#footer div {
		box-sizing:border-box;
		padding:0;
		text-align:center;
		width:100%;
	}
		
	#footer div p {
		border:none;
		border-bottom:#000 1px solid;
		float:none;
		padding:8px 0 6px;
		width:100%;
	}

	#footer div > p img {
		opacity:0.8;
		height:auto;
		width:30px;
	}

	#footer div h1 {
		float:none;
		margin:0 auto;
		padding:30px 0 0 0;
	}
	
	#footer div ul {
		float:none;
		padding:10px 0 25px;
	}
	
	#footer div ul li {
		float:none;
		padding:10px 0 0;
	}

	#footer > p {
		background:none;
		border-top:#000 1px solid;
		color:#999;
		padding:15px 0 17px;
	}

}





/* ---------- title ---------- */

.title {
	background:#292929;
	border:#000 1px solid;
	font-size:1.25em;
	letter-spacing:0.2em;
	padding:30px 0;
	line-height:1.2;
	text-align:center;
}

#index .title {
	background:none;
	padding:50px 0 40px;
}

.title:after {
	color:#999;
	display:block;
	font-family: 'Open Sans', sans-serif;
	font-size:x-small;
	font-weight:bold;
	letter-spacing:0.1em;
	padding:10px 0 0;
}

#products .title:after {
	content:"PRODUCTS INFORMATION"
}

#business .title:after {
	content:"BUSINESS INFORMATION"
}

#company .title:after {
	content:"COMPANY"
}

#inquiry .title:after {
	content:"INQUIRY"
}

#privacy .title:after {
	content:"PRIVACY POLICY"
}

.title_l {
	font-size:1.625em;
	line-height:1.5;
	padding:0 0 25px;
}

.title_m {
	background:#292929;
	font-size:0.95em;
	letter-spacing:0.1em;
	line-height:1.8;
	margin:0 0 30px;
	padding:10px 15px;
}

.title_s {
	font-size:0.875em;
	font-weight:500;
	line-height:1.8;
	padding:0 0 5px;
}

@media screen and (max-width:768px) {

	.title {
		background:#393939;
		padding:20px 0;
	}

	#index .title {
		background:none;
		padding:25px 0;
	}

	.title_l {
		font-size:1.250em;
	}
	
	.title_m {
		font-size:0.813em;
	}

	.title_s {
		font-size:0.8em;
	}

}





/* ---------- index ---------- */

#index #main {
	align-items:center;
	background:url(../../images/top/bg_main.jpg) no-repeat center center;
	background-size:cover;
	display:flex;
	flex-direction:column;
	height:100vh;
	justify-content:center;
	margin:-116px 0 0;
}

#index #main p {
	text-align:center;
	border:rgba(255,255,255,0.5) solid 1px;
	font-size:2.8em;
	font-family: 'Catamaran', sans-serif;
	letter-spacing:0.1em;
	line-height:1;
	padding:15px 35px 10px;
	text-shadow:0px 0px 20px rgba(0,0,0,0.1);
}

#index #products {
	width:1200px;
	margin:0 auto;
	padding:0 30px 60px;
}

#index #products a {
	background-color:#fff;
	background-image:url(../../images/top/bg_information.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% auto;
	color:#666;
	display:block;
	padding:45px 0 20px;
	text-align:center;
	text-decoration:none;
	transition: all 0.3s ease;
}

#index #products a:hover {
	opacity:0.8;
}

#index #products h3 {
	letter-spacing:0.1em;
	padding:0 0 10px;
	text-align:center;
}

#index #products h3 em {
	font-size:3.125em;
	font-family:'Lora', serif;
	letter-spacing:0.15em;
	line-height:1.6;
}

#index #business {
	border-top:#292929 solid 1px;
}

#index #business ul {
	overflow:hidden;
	padding:0 0 60px;
}

#index #business ul li {
	background-image:url(../../images/top/bg_electromechanical.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	float:left;
	text-align:center;
	width:33.3%;
}

#index #business ul li:nth-child(2) {
	background-image:url(../../images/top/bg_electroniccircuit.jpg);
}

#index #business ul li:nth-child(3) {
	background-image:url(../../images/top/bg_software.jpg);
	width:33.4%;
}

#index #business ul li a {
	display:block;
	text-decoration:none;
	padding:80px 0 50px;
}

#index #business ul li h3 {
	color:rgba(255,255,255,0.8);
	font-family: 'Noto Sans', sans-serif;
	font-size:1.875em;
	line-height:1.5;
	letter-spacing:0.1em;
}

#index #business ul li p {
	color:rgba(255,255,255,0.7);
	letter-spacing:0.2em;
	font-weight:500;
}

#index #business ul li p:last-child {
	border:solid 1px;
	color:rgba(255,255,255,0.8);
	display:inline-block;
	font-size:0.7em;
	letter-spacing:0.1em;
	margin:30px 0 0;
	padding:5px 15px;
}

@media screen and (max-width:768px) {
	
	#index #main {
		height:250px;
		margin:1px 0 0;
	}
	
	#index #main p {
		font-size:1.3em;
		font-weight:600;
		padding:10px 10px 7px;
	}
	
	#index #products {
		box-sizing:border-box;
		padding:0 20px 30px;
		width:100%;
	}
	
	#index #products a {
		box-sizing:border-box;
		background-image:none;
		padding:30px 20px 0;
	}

	#index #products h3 {
		letter-spacing:0;
	}

	#index #products h3 em {
		font-size:2.8em;
		font-family:'Lora', serif;
		letter-spacing:0.05em;
		line-height:1.6;
	}

	#index #products p {
		background:url(../../images/top/bg_information_sp.png) no-repeat center top;
		background-size:contain;
		padding:38% 0 30px;
		text-align:left;
	}
	
	#index #business ul {
		padding:0 0 1px;
	}
		
	#index #business ul li {
		width:100%!important;
	}

	#index #business ul li a {
		padding:40px 0 35px;
	}

	#index #business ul li h3 {
		font-size:1.5em;
		letter-spacing:0.05em;
	}

	#index #business ul li p {
		letter-spacing:0.1em;
	}

	#index #business ul li p:last-child {
		margin:15px 0 0;
		padding:3px 10px;
	}

}





/* ---------- products > header ---------- */

#products header {
	border-bottom:#292929 solid 1px;
	margin:0 0 50px;
	padding:0 0 30px;
	text-align:center;
}

#products_index header {
	background:url(../../images/product/bg_castioI.png) no-repeat center top;
	background-size:100% auto;
	padding:0 0 35px;
}

#products header h3 {
	letter-spacing:0.1em;
	padding:0 0 10px;
	text-align:center;
}

#products header h3 em {
	font-size:3.125em;
	font-family:'Lora', serif;
	letter-spacing:0.15em;
	line-height:1.6;
}

#products header h4 {
	font-size:1.625em;
	line-height:1.5;
	padding:0 0 25px;
}

#products header p {
	padding:0 0 25px;
}

@media screen and (max-width:768px) {

	#products header {
		background:none;
		margin:0 0 30px;
		padding:0 0 10px;
	}

	#products header h3 em {
		font-size:2.8em;
		letter-spacing:0.1em;
	}
	
	#products header p {
		text-align:left;
		padding:0 0 20px;
	}
	
	#products header p br {
		display:none;
	}

	#products header h4 {
		background:url(../../images/top/bg_information_sp.png) no-repeat center top;
		background-size:contain;
		font-size:1.3em;
		padding:42% 0 15px;
		text-align:left;
	}

}





/* ---------- products common ---------- */

#products .list {
	padding:0 0 25px;
}

#products .list li {
	background:url(../../images/product/bg_dot.svg) no-repeat top 12px left 0;
	font-size:0.875em;
	line-height:2.0em;
	padding:0 0 0 10px;
}

#products .box_01 {
	float:left;
	width:65.6%;
}

#products .box_02 {
	float:left;
	padding:0 0 30px 3.2%;
	width:31.2%;
}

#products .box_03 {
	clear:both;
	float:left;
	padding:0 0 30px;
	width:580px;
}

#products .box_04 {
	float:right;
	padding:0 0 30px;
	width:580px;
}

#products .box_05 {
	float:right;
	width:580px;
}

#products .box_05 figure {
	float:left;
	padding:0 0 30px;
	width:275px;
}

#products .box_05 figure:nth-child(2) {
	float:right;
}

#products .box_07 {
	clear:both;
	padding:0 3.2% 30px 19.2%;
	float:left;
	width:29.2%;
}

#products figure {
	padding:5px 0 0;
}

#products figcaption {
	font-size:0.8em;
	line-height:1.6;
	padding:5px 0 0;
}

#products .table {
	box-sizing:border-box;
	font-size:0.875em;
	line-height:2.0em;
	letter-spacing:0.1em;
	margin:0 0 10px;
	text-align:left;
	width:100%;
}

#products .table caption {
	font-weight:bold;
	text-align:left;
	padding:0 0 10px;
}

#products .table tbody {
	border:#292929 solid 1px;
	border-top:none;
}

#products .table tbody tr {
	border-top:#292929 solid 1px;
}

#products .table tbody th {
	color:#ccc;
	padding:8px 0 5px 20px;
	width:115px;
}

#products .table tbody td {
	font-weight:bold;
	padding:8px 0 5px;
}

#products #button {
	font-size:0.75em;
	letter-spacing:0.1em;
	padding:0 0 50px;
	text-align:center;
}

#products #button a {
	border:#292929 solid 1px;
	display:inline-block;
	padding:17px 40px 15px;
	text-decoration:none;
	transition: all 0.3s ease;
}

#products #button a:hover {
	background:#1E1E1E;
}

#products #button span {
	font-size:2.4em;
	font-family: 'Lora', serif;
	letter-spacing:0.15em;
	line-height:1.3;
	padding:10px 0 0;
}

@media screen and (max-width:768px) {

	#products .list {
		padding:0 0 20px;
	}

	#products .list li {
		font-size:0.8em;
		line-height:1.8;
	}

	#products .box_01,
	#products .box_02,
	#products .box_03,
	#products .box_04,
	#products .box_05,
	#products .box_06,
	#products .box_06 figure,
	#products .box_07 {
		padding:0 0 20px;
		width:100%;
	}

	#products .box_06 figure:nth-child(2) {
		padding:0;
	}

	#products .table {
		margin:0 0 25px;
		font-size:0.8em;
	}

	#products .table caption {
		font-size:1em;
	}

	#products #button {
		padding:10px 0 30px;
	}

}





/* ---------- products gas ---------- */

#products #gas h5 {
	margin:0;
}

#products #gas dl {
	font-size:0.875em;
	line-height:2.0;
	text-align:left;
	padding:0 0 40px;
}

#products #gas dt {
	box-sizing:border-box;
	float:left;
	padding:10px 15px 7px;
}

#products #gas dd {
	border-bottom:#292929 solid 1px;
	padding:10px 0 7px 265px;
}

@media screen and (max-width:768px) {

	#products #gas dl {
		font-size:0.8em;
		padding:0 0 30px;
	}

	#products #gas dt {
		box-sizing:border-box;
		float:none;
		padding:10px 15px 0;
	}

	#products #gas dd {
		padding:0 15px 10px;
	}

}





/* ---------- products nav ---------- */

#products nav ul {
	overflow:hidden;
	padding:0 0 60px;
}

#products nav li {
	float:left;
	margin:0 5% 0 0;
	text-align:center;
	width:30%;
}

#products nav li:last-child {
	margin:0;
}

#products nav li a {
	border:#292929 solid 1px;
	display:block;
	padding:30px 0 25px;
	text-decoration:none;
	transition: all 0.3s ease;
}

#products nav li a:hover {
	background:#191919;
}

#products nav h4 {
	line-height:1.5;
	letter-spacing:0.1em;
}

#products nav p {
	color:#aaa;
	font-size:0.75em;
	line-height:1.8;
	padding:15px 0 20px;
}

#products nav p:last-child {
	background:rgba(255,255,255,0.2);
	color:#fff;
	display:inline-block;
	padding:3px 12px;
}

@media screen and (max-width:768px) {

	#products nav ul {
		padding:0 0 30px;
	}

	#products nav li {
		margin:0 0 15px;
		width:100%;
	}

	#products nav li a {
		padding:20px 15px 15px;
	}

	#products nav h4 {
		font-size:0.9em;
	}

	#products nav p {
		padding:5px 0 10px;
	}

}





/* ---------- company ---------- */

#company header {
	border-bottom:#292929 solid 1px;
	margin:0 0 50px;
	text-align:center;
}

#company header h3 {
	font-size:1.6em;
	letter-spacing:0.1em;
	line-height:1.4;
	padding:0 0 30px;
}

#company header p {
	padding:0 0 50px;
}

#company_outline {
	float:left;
	width:48%;
	padding:0 0 30px;
}

#company_outline table {
	border-top:#292929 solid 1px;
	font-size:0.875em;
	line-height:2.0em;
	margin:0 0 30px;
	text-align:left;
	width:100%;
}

#company_outline table tr {
	border-bottom:#292929 solid 1px;
}

#company_outline table th {
	font-weight:bold;
	padding:28px 0 28px 10px;
	width:30%;
}

#company_outline table td {
	padding:28px 0 28px;
}

#company_map {
	float:right;
	width:48%;
	padding:0 0 30px;
}

#company_map #gmap {
	height:600px;
	padding:0;
	width:100%;
}

@media screen and (max-width:768px) {

	#company header {
		margin:0 0 30px;
		text-align:left;
	}

	#company header h3 {
		font-size:1.4em;
		padding:0 0 15px;
	}

	#company header p {
		text-align:left;
		padding:0 0 40px;
	}
	
	#company header p br {
		display:none;
	}
	
	#company section {
		padding:0 0 20px!important;
		width:100%;
	}

	#company section #gmap {
		height:400px;
		margin:0 0 20px;
	}
	
	#company_outline table th {
		padding:15px 0 15px 10px;
	}
	
	#company_outline table td {
		padding:15px 0 15px;
	}

}





/* ---------- inquiry ---------- */

#inquiry table {
	border-top:#292929 solid 1px;
	margin:30px 0 50px;
	width:100%;
}

#inquiry table {
	border-top:#292929 solid 1px;
	margin:30px 0 50px;
	width:100%;
}

#inquiry table tr {
	border-bottom:#292929 solid 1px;
}

#inquiry table th {
	font-size:0.875em;
	line-height:2.0;
	padding:0 35px 0;
	text-align:left;
	vertical-align:middle;
	width:225px;
}

#inquiry table th span {
	background:#CC0000;
	font-size:0.9em;
	float:right;
	line-height:1.5;
	padding:0 8px 2px;
	margin:5px 0 0;
}

#inquiry table td p {
	padding:30px 10px 30px 0;
}

#inquiry table td p span {
    display: inline-block;
    padding: 0 0 0 20px;
}

#inquiry input,
#inquiry textarea {
	background:#292929;
	border:none;
	color:#ccc;
	box-sizing:border-box;
	padding:10px 0 10px 15px;
	line-height:1.5em;
	font-size:1.500em;
	width:54.3%;
}

#inquiry #add ,
#inquiry textarea {
	width:100%;
}

#inquiry tr.error {
	background: rgba(204,0,0,0.3);
}

#inquiry tr.error td span {
	color: rgba(255,38,38,1);
    font-weight: 700;
}

#inquiry tr.error td span::after {
    content: "でご入力ください。"
}

#inquiry .button {
	font-size:0.875em;
	line-height:1.8;
	text-align:center;
	margin:30px 0 0;
	padding:0 0 25px;
}

#inquiry .button li {
	display:inline;
	margin:0 15px;
}

#inquiry .button button {
	background:#4D4D4D;
	border:none;
	cursor:pointer;
	color:#fff;
	padding:13px 55px;
	font-size:1.25em;
	letter-spacing:0.1em;
}

#inquiry .button button.back {
	background:#222;
}

@media screen and (max-width:768px) {
		
    #inquiry .contents,
    #inquiry .section {
        overflow: visible;
    }

	#inquiry table {
		margin:15px -20px 30px;
        width: calc(100% + 40px);
	}

	#inquiry table th,
	#inquiry table td {
		box-sizing:border-box;
		display:block;
		width:100%;
	}

	#inquiry table th {
		padding:15px 20px 10px;
	}
		
	#inquiry table td p {
		padding:0 20px 20px;
	}

    #inquiry table td p span {
        padding: 10px 0 0 0;
    }

	#inquiry table td input,
	#inquiry table td textarea {
		width:100%;
	}
	
	#inquiry form .button {
		margin:25px 0 0;
	}

	#inquiry .button button {
		font-size:1.0em;
		padding:10px 25px;
	}

}
	




/* ---------- privacy ---------- */

#privacy ol {
	margin:0 0 15px 20px;
}

#privacy ol li {
	font-size:0.875em;
	line-height:2.0;
	list-style:decimal;
	padding:0 0 10px;
}