@charset "utf-8";

/*
共通
================================================== */
#contentsWrap { width: 80%; margin: 50px auto; }
.productTitle {
	font-size: 30px;
	text-align: center;
	margin: 0 0 80px;
}
.productTitle span {
    padding: 0 30px 10px;
    border-bottom: 6px solid #00a;
}
section { margin: 50px 0; }
h2 { text-align: center; padding-bottom: 10px; }
.title {
	font-size: 24px;
	margin: 1em 0;
	padding: 20px 0;
	background: #eef;
}
.title::before {
	content: "";
	border-left: 20px solid #00a;
	margin-right: 12px;
	padding: 20px 0;
}
/*
ヘッダー画像
---------------------------------------- */
.contentsImg {
	width: 100%;
	height: 600px;
	background: url(../img/contentsImg.jpg) no-repeat center center / cover;
}
.ledImg {
	position: relative;
	width: 100%;
	height: 600px;
	background: url(../img/led_img.jpg) no-repeat bottom center / cover;
}
.ledImg:after {
	content: "※弊社施工例";
	position: absolute;
	right: 2em;
	bottom: 1em;
}
/*
電子ブレーカー
================================================== */
/* 電気の料金体系
---------------------------------------- */
.business_01 dl dt {
	font-size: 30px;
	padding-bottom: 12px;
}
.business_01 dl dd {
	line-height: 1.6;
}
.business_01 table {
	font-size: 21px;
	margin: 20px 0;
}
.business_01 table th {
	font-weight: normal;
}
.business_01 dd > div p:last-child {
	font-size: 21px;
	font-weight: bold;
	padding: 16px 0;
	color: #f00;
}
.business_01 dd > div p:last-child span {
	padding: 0 10px;
}
.business_01 dl dd img {
	width: 60%;
	margin: 0 auto;
}
/* 低圧電力（200V）の基本料金
---------------------------------------- */
.business_02 .businessCatch {
    color: #00a;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    padding-bottom: 30px;
}
.business_02 img {
	width: 60%;
	margin: 0 auto;
}
.business_02 .pointImg img {
	width: 100%;
	margin: 0 auto;
}
.business_02 .subTitle {
	color: #00a;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin: 60px 0 30px;
}
.business_02 table.point {
	border-collapse: separate;
	border-spacing: 0 10px;
	width: 850px;
	margin: 50px auto;
}
.business_02 table.point th {
	color: #fff;
	font-size: 30px;
	padding: 10px;
	width: 200px;
}
.business_02 table.point th.point1_bg { background: #008200; }
.business_02 table.point th.point2_bg { background: #f00; }
.business_02 table.point td {
	font-size: 30px;
	width: 650px;
	padding-left: 10px;
}
.business_02 .pointFlow {
	display: flex;
	justify-content: space-between;
}
.business_02 dl {
	width: 380px;
	border-radius: 10px;
}
.business_02 dl dt {
	color: #fff;
	padding: 12px 6px;
}
.business_02 dl.flow_1 {
	border: 3px solid #00a;
}
.business_02 dl.flow_2 {
	border: 3px solid #008200;
}
.business_02 dl.flow_3 {
	border: 3px solid #f00;
}
.business_02 dl.flow_1 dt {
	background: #00a;
}
.business_02 dl.flow_2 dt {
	background: #008200;
}
.business_02 dl.flow_3 dt {
	background: #f00;
}
.business_02 dl dt p .dt_1 {
	color: #ff0;
	font-weight: bold;
	font-size: 21px;
}
.business_02 dl dt p:nth-child(1) {
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 2px solid #fff;;
}
.business_02 dl dt p:nth-child(2) {
	font-size: 14px;
	line-height: 1.3;
	padding-top: 10px;
}
.business_02 dl dt p:nth-child(3) {
	font-size: 14px;
	line-height: 1.3;
}
.business_02 dl dd {
	font-size: 14px;
	padding: 12px 6px;
}
.business_02 dl dd ul {
	display: flex;
	justify-content: space-around;
	padding: 12px 0;
}
.business_02 dl dd ul li:nth-child(odd) {
	color: #fff;
	font-size: 13px;
	text-align: center;
	line-height: 1.3;
	padding: 3px;
	background: #333;
}
.business_02 .arrow {
	width: 60px;
	height: 100px;
	margin-top: 185px;
}
/* 「＋」上下中央揃え */
.business_02 dl dd ul li:nth-child(even) {
	padding-top: 12.9px;
}
.business_02 dl dd img {
	width: 80%;
	margin-top: 12px;
}
/* 電子ブレーカー導入後の事例
---------------------------------------- */
ul.before_after {
	display: flex;
	justify-content: center;
	text-align: center;
	width: 800px;
	margin: 3em auto;
}
ul.before_after li span {
	display: block;
	font-size: 21px;
	padding: 10px;
}
.business_02 table.example {
	border-collapse: separate;
	border-spacing: 0 10px;
	width: 480px;
	margin: 0 auto;
}
.business_02 table.example caption {
	color: #f00;
	font-size: 36px;
	font-style: italic;
	font-weight: bold;
	padding-bottom: 16px;
	transform: rotate(-3deg);
}
.business_02 table.example tr {
	line-height: 60px;
	height: 60px;
}
.business_02 table.example th {
	color: #fff;
	font-size: 24px;
	text-align: center;
	width: 240px;
	background: #f00;
}
.business_02 table.example td {
	color: #F00;
	font-size: 28px;
	font-weight: bold;
	text-align: right;
	width: 240px;
	padding-right: 10px;
	border: 2px solid #f00;
}
.business_02 .att {
	font-size: 12px;
	text-align: center;
	margin-top: 10px;
}
/*
LED照明
================================================== */
/* LED照明
---------------------------------------- */
.led_01 .explanation {
	font-size: 16px;
	line-height: 1.6;
	margin-left: 50px;
}
/* LEDの特徴
---------------------------------------- */
.led_01 .ledMerit {
	border-collapse: separate;
	border-spacing: 0 20px;
	font-size: 21px;
	margin-left: 50px;
}
.led_01 .ledMerit th {
	color: #fff;
	vertical-align: middle;
	width: 106.48px;
	padding: 0 10px;
	border-radius: 6px 0 0 6px;
	background: #6af;
}
.led_01 .ledMerit th .meritNo {
	font-size: 40px;
}
.led_01 .ledMerit td {
	padding: 10px 0 10px 1em;
	border: 2px solid #6af;
	border-radius: 0 6px 6px 0;
}
.led_01 .ledMerit td span {
	display: block;
	color: #00a;
	font-weight: bold;
	padding-bottom: 6px;
}
/* LED製品一覧
---------------------------------------- */
.led_01 .product .productBox {
	width: 1200px;
	margin: 0 auto;
}
.led_01 .product .productBox > div {
	font-size: 21px;;
	padding-bottom: 10px;
}
.led_01 .product .productBox:not(:first-child) > div {
	margin-top: 3em;;
}
.led_01 .product .productBox > div::before {
	content: "【 ";
}
.led_01 .product .productBox > div::after {
	content: " 】";
}
.led_01 .product ul {
	display: flex;
	flex-wrap: wrap;
}
.led_01 .product ul li {
	width: 300px;
	text-align: center;
	padding-bottom: 20px;
	border: 1px solid #fff;
}
.led_01 .product ul li div:before {
	content: "【品番】";
	display: block;
	padding-top: 6px;
}
.led_01 .product ul li div:after {
	content: "【メーカー】\AYRS TRADE";
	display: block;
	white-space: pre;
	padding-top: 6px;
}
/*
会社情報
================================================== */
#about table { font-size: 0.96em; width: 60%; margin: 0 auto; border-collapse: collapse; border: 1px solid #aaa; }
#about table th, #about table td { line-height: 1.3; padding: 10px 1em; border: 1px solid #aaa; }
#about table th { text-align: left; }
#about a { color: #00F;}
.access {  color: #fff; font-size: 1.2em; font-weight: bold; text-align: left; padding: 4px 1em 2px; margin-bottom: 20px; border-radius: 3px; background: #00aaff;  }

/* ============================================================
レスポンシブ
============================================================ */
@media screen and (max-width: 1280px) {
	#contentsWrap { width: 90%; }
/*
LED照明
================================================== */
/* LED製品一覧
---------------------------------------- */

}
@media screen and (max-width: 812px) {
/*
共通
================================================== */
	#contentsWrap { width: 96%; }
/*
ヘッダー画像
================================================== */
	.contentsImg, .ledImg {
		height: 300px;
	}
/*
電子ブレーカー
================================================== */
/* 電気の料金体系
---------------------------------------- */
	.business_01 table {
		border-collapse: separate;
		border-spacing: 0 10px;
		font-size: 20px;
		text-align: center;
		width: 100%;
		margin: 30px 0;
	}
	.business_01 table th {
		display: block;
		padding: 10px 0;
		background: #6af;
	}
	.business_01 table th span {
		display: none;
	}
	.business_01 table td {
		display: block;
		padding: 6px 0 20px;
	}
	.business_01 dd > div p:last-child {
		font-size: 19px;
		text-align: center;
		font-weight: bold;
		padding: 16px 0;
	}
	.business_01 dd > div p:last-child span {
		display: block;
		text-align: center;
		padding: 0;
		transform: rotate(90deg);
	}
	.business_01 dl dd img {
		width: 100%;
	}
/* 低圧電力（200V）の基本料金
---------------------------------------- */
	.business_02 img {
		width: 100%;
	}
	.business_02 .subTitle {
		font-size: 27px;
	}
	.business_02 table.point {
		width: 100%;
		margin: 30px auto;
	}
	.business_02 table.point th {
		display: block;
		font-size: 24px;
		width: 100%;
		padding: 6px;
	}
	.business_02 table.point td {
		display: block;
		font-size: 22px;
		text-align: center;
		width: 100%;
		padding: 6px 0;
	}
	.business_02 .pointFlow {
		justify-content: flex-start;
		flex-direction: column;
		width: 60%;
		margin: 0 auto;
	}
	.business_02 dl {
		width: 100%;
		margin: 0 auto;
	}
	.business_02 .arrow {
		margin-top: 0;
		transform: rotate(90deg);
	}
/* 電子ブレーカー導入後の事例
---------------------------------------- */
	ul.before_after {
		width: 600px;
	}
	.business_02 table.example th {
		display: block;
		width: 480px;
	}
	.business_02 table.example td {
		display: block;
		text-align: center;
		width: 480px;
	}
	.business_02 .att {
		text-align: left;
		width: 470px;
		margin: 10px auto;
	}
/*
LED照明
================================================== */
/* LED照明
---------------------------------------- */
	.led_01 .explanation {
		line-height: 1.3;
		margin-left: 0;
	}
/* LEDの特徴
---------------------------------------- */
	.led_01 .ledMerit {
		font-size: 18px;
		margin-left:0;
	}
	.led_01 .ledMerit th .meritNo {
		font-size: 30px;
	}
	.led_01 .ledMerit td {
		font-size: 17px;
	}
/* LED製品一覧
---------------------------------------- */
.led_01 .product .productBox {
	width: 600px;
}
/*
会社情報
================================================== */
	#about { width: 100%; }
	#about table { width: 100%; }
}
@media screen and (max-width: 667px) {
/*
ヘッダー画像
---------------------------------------- */
	.contentsImg, .ledImg {
		height: 180px;
	}
	.ledImg:after {
		font-size: 12px;
		right: 1em;
	}
/*
電子ブレーカー
================================================== */
/* 低圧電力（200V）の基本料金
---------------------------------------- */
	.business_02 .pointFlow {
		width: 100%;
	}
	.business_02 .att {
		width: 100%;
	}
	.business_02 table.point td {
		font-size: 17px;
		padding-top: 10px;
	}
/* 電子ブレーカー導入後の事例
---------------------------------------- */
	ul.before_after {
		width: 100%;
	}
	.business_02 table.example caption {
		font-size: 30px;
	}
	.business_02 table.example, .business_02 table.example th,.business_02 table.example td {
		width: 100%;
	}
/*
LED照明
================================================== */
/* LEDの特徴
---------------------------------------- */
	.led_01 .ledMerit th, .led_01 .ledMerit td {
		display: block;
		border-radius: 0;
	}
	.led_01 .ledMerit td {
		font-size: 16px;
		padding: 10px;
	}
/* LED製品一覧
---------------------------------------- */
	.led_01 .product .productBox {
		width: 100%;
	}
	.led_01 .product .productBox > div {
		font-size: 17px;
		text-align: center;
	}
	.led_01 .product ul li {
		width: 50%;
	}
	.ledImg {
		background: url(../img/led_img.jpg) no-repeat 60% center / cover;
	}
/*会社情報
================================================== */
#about table { font-size: 0.9em; }
}