@charset "UTF-8";
.fv{
	padding: 72px 0;
 background: url(../img/index/bg-01.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	font-family: "Lato", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
}
.fv .title{
 text-align: center;
    line-height: 1.2;
    font-size: 48px;
    font-size: 4.8rem;
				font-weight: bold;
				color: #FFF;
				margin: 0px 0px 40px 0px;
				text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
}
.fv .itemList{
				margin: 0px 0px 40px 0px;
				padding: 0px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap:20px;
}
.fv .itemList .itemBox {
    margin: 0px;
				padding: 10px 0;
				width: 180px;
				max-width : -webkit-calc(33.3% - 20px) ;
    max-width : calc(33.3% - 20px) ;
				text-align: center;
				background: #0c3353;
				color: #FFF;
				font-size: 20px;
    font-size: 2rem;
				font-weight: 600;
}
.fv .pointList{
				margin: 0px auto;
				padding: 20px 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap:20px;
				background:rgba(255,255,255,0.8);
				color: #000;
				width: 90%;
				max-width: 800px;
}
.fv .pointList .pointBox {
    margin: 0px;
				padding: 0;
				text-align: center;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				gap:5px;
				font-size: 16px;
    font-size: 1.6rem;
				font-weight: 600;
}
.fv .pointList .pointBox:before{
    content: "●";
				color: #0c3353;
}

.sec-lineup{
 margin: 0px;
	padding: 0px 0 91px;
	background: #FFF;
}
.sec-lineup .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}
.sec-lineup .itemLineupList{
 display: flex;
	flex-wrap: wrap;
justify-content: space-between;
}
.sec-lineup .itemLineupList .itemLineupBox{
	width : -webkit-calc(33.3% - 30px) ;
 width : calc(33.3% - 30px) ;
	border: solid 1px #cccccc;
	background: #f7f7f7;
	margin: 0px;
	padding: 0px 0px 10px 0;
}
.sec-lineup .itemLineupList .itemLineupBox .index{
 background: #0c3353;
	color: #FFF;
	text-align: center;
	padding: 17px 10px;
	margin:0;
					font-family: "Lato", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-weight: bold;
font-size: 18px;
font-size: 1.8rem;
line-height: 1.25
}
.sec-lineup .itemLineupList .itemLineupBox .img{
 text-align: center;
	margin: 0px 0px 20px 0px;
	padding: 0px 20px;
}
.sec-lineup .itemLineupList .itemLineupBox .addText{
 padding: 0px 10px;
font-size: 16px;
font-size: 1.6rem;
line-height: 2;
font-weight: bold;
}
.sec-lineup .itemLineupList .itemLineupBox .addText .t-list li{
 margin: 0px 0px 5px 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	font-size: 16px;
 font-size: 1.6rem;
	gap:10px;
}
.sec-lineup .itemLineupList .itemLineupBox .addText .t-list li span{
 display: block;
	max-width : -webkit-calc(100% - 40px) ;
 max-width : calc(100% - 40px) ;
}
.sec-lineup .itemLineupList .itemLineupBox .addText .t-list li:before{
    content: "●";
				color: #0c3353;
}
.sec-lineup .itemLineupList .itemLineupBox .addText .t-list li.etc{
 justify-content: flex-end;
}
.sec-lineup .itemLineupList .itemLineupBox .addText .t-list li.etc:before{
 display: none;
}
.sec-applicator{
 margin: 0px;
	padding: 91px 0;
	background: #EDEDEC;
}
.sec-applicator .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}
.sec-applicator .box{
 padding: 20px;
	background: #FFF;
	margin: 0 auto;
	max-width: 880px;
}
.sec-applicator .target {
 margin: 0px 0px 10px 0px;
	padding: 0px;
	line-height: 2;
	font-weight: bold;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:10px;
}
.sec-applicator .target .b{
    border: solid 1px #dedede;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 7px 10px;
				line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 5px;
				background: #FFF;
}
.sec-applicator .photoList {
 margin: 0px;
	padding: 0px;
 display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.sec-applicator .photoList .photoBox{
	margin: 0px;
	padding: 0px;
	width : -webkit-calc(50% - 10px) ;
 width : calc(50% - 10px) ;
}

.sec-specifications{
 padding: 91px 0px;
}
.sec-specifications .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}
.sec-specifications .specificationsList {
 margin: 0px;
	padding: 0px;
 display: flex;
	flex-wrap: wrap;
	justify-content:center;
	gap:30px;
}
.sec-specifications .specificationsList .specificationsBox{
	margin: 0px;
	padding: 20px;
	width: 250px;
	border: 3px solid #DEDEDE;
	border-radius: 10px;
	max-width : -webkit-calc(33.3% - 46px) ;
 max-width : calc(33.3% - 46px) ;
}
.sec-specifications .specificationsList .specificationsBox .img{
 margin: 0px;
	padding: 0px;
	text-align: center;
}
.sec-specifications .specificationsList .specificationsBox .img img{
 width: 80%;
}
.sec-specifications .specificationsList .specificationsBox .text{
 text-align: center;
	margin: 0px;
	padding: 0px;
	font-size:20px;
	font-size: 1.8rem;
	font-weight: bold;
}
.sec-cta {
 margin: 0px;
	padding: 40px 0px;
	background: url(../img/index/bg-03.jpg) no-repeat;
 background-size: cover;
}
.sec-cta .inner{
 background: rgba(255, 255, 255, 0.8);
	padding: 40px 0px;
}
.sec-cta .inner .text{
 text-align: center;
	line-height: 2;
	margin: 0px 0px 20px 0px;
	font-size: 18px;
 font-size: 1.8rem;
	font-weight: bold;
}
.sec-cta .inner .ctaBtn{
 margin: 0px;
	padding: 0px;
	text-align: center;
}
.sec-cta .inner .ctaBtn a{
 margin: 0px 10px;
	padding: 10px 20px;
	    background: #017ECB;
    color: #fff;
				    font-weight: bold;
									font-size: 20px;
 font-size: 2rem;
	display: inline-block;
}

.sec-what {
 padding: 91px 0;
	background: #EDEDEC;
}
.sec-what .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}
.sec-what .outerbox{
 padding: 30px 40px;
	margin: 0px;
	background: #FFF;
}
.sec-what .outerbox .text{
 margin: 0px;
	font-size: 18px;
 font-size: 1.8rem;
}
.sec-what .outerbox .pointList{
 margin: 20px 0px 0px;
	padding: 20px;
 background: #ecf7e2;
}
.sec-what .outerbox .pointList li{
 margin: 0px 0px 10px 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	font-size: 16px;
 font-size: 1.6rem;
	gap:10px;
}
.sec-what .outerbox .pointList li span{
 display: block;
	max-width : -webkit-calc(100% - 40px) ;
 max-width : calc(100% - 40px) ;
}
.sec-what .outerbox .pointList li:before{
    content: "●";
				color: #86bd4a;
}
.sec-what .outerbox .fieldArea{
 margin: 20px 0px;
	padding: 20px;
 background: #e1eef6;
}
.sec-what .outerbox .fieldArea .index{
 margin: 0px 0px 20px;
 color: #0094c4;
	font-size: 20px;
 font-size: 2rem;
	font-weight: bold;
}
.sec-what .outerbox .fieldArea li{
 margin: 0px 0px 10px 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	font-size: 16px;
 font-size: 1.6rem;
	gap:10px;
}
.sec-what .outerbox .fieldArea li span{
 display: block;
	max-width : -webkit-calc(100% - 40px) ;
 max-width : calc(100% - 40px) ;
}
.sec-what .outerbox .fieldArea li:before{
    content: "●";
				color: #0094c4;
}

.sec-reason {
 padding: 91px 0;
	background: rgba(116, 140, 180, 0.2)
}
.sec-reason .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}
.sec-reason .reasonList {
 margin: 0px auto;
	padding: 0px;
	/*max-width: 880px;*/
}
.sec-reason .reasonList .reasonBox{
 margin: 0px 0px 20px 0px;
	padding:20px;
	background: #FFF;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	
}
.sec-reason .reasonList .reasonBox .indexArea{
 width :280px;
}
.sec-reason .reasonList .reasonBox .indexArea .index{
 margin: 0px 0px 5px 0px;
	padding: 0px;
	text-align: center;
	font-size: 20px;
	font-size: 2rem;
	line-height: 1;
	font-weight: bold;
	color: #0c3353;
}
.sec-reason .reasonList .reasonBox .textArea {
 width : -webkit-calc(100% - 320px) ;
 width : calc(100% - 320px) ;
	margin: 0px;
	padding: 0px;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #0c3353;
}
.sec-quality {
 padding: 91px 0;
	background: #EDEDEC;
}
.sec-quality .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}
.sec-quality .text {
 margin: 0px 0px 50px 0px;
 font-size: 18px;
 font-size: 1.8rem;
	text-align: center;
}
.sec-quality .flowList {
 margin: 0px 0px 50px 0px;
}
.sec-quality .flowList .index{
 margin: 0px;
	padding: 17px 10px;
	font-size: 20px;
	font-size: 2rem;
	line-height: 1;
	font-weight: bold;
	color: #FFF;
	background: #0c3353;
	text-align: center;
}
.sec-quality .flowList .flowRow{
 margin: 0px;
	padding: 30px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:80px;
	background: #FFF;
}
.sec-quality .flowList .flowRow .flowBox{
 width: 200px;
	max-width : -webkit-calc(25% - 80px) ;
 max-width : calc(25% - 80px) ;
	position: relative;
}
.sec-quality .flowList .flowRow .flowBox:after {
	content: "";
	background: url(/img/product/wire-harness/shape.png) center center no-repeat;
	background-size: contain;
	width: 60px;
	height: 60px;
	position: absolute;
	top: 50%;
	right: -70px;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
.sec-quality .flowList .flowRow .flowBox:last-of-type:after {
 display: none;
}
.sec-quality .flowList .flowRow .flowBox .img{
 margin: 0px 0px 10px 0px;
	padding: 0px;
}
.sec-quality .flowList .flowRow .flowBox .text{
 margin: 0px;
	padding: 0px;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1;
	font-weight: bold;
	color: #0c3353;
}


.sec-quality .itemList {
 margin: 0px;
}
.sec-quality .itemList .itemRow{
	display: flex;
	flex-wrap: wrap;
	gap:40px;
}
.sec-quality .itemList .itemRow .itemBox{
	background: #FFF;
	width: 360px;
	max-width : -webkit-calc(33.3% - 33.3px) ;
 max-width : calc(33.3% - 33.3px) ;
}
.sec-quality .itemList .itemRow .itemBox .index{
 margin: 0px;
	padding: 15px 10px;
	font-size: 20px;
	font-size: 2rem;
	line-height: 1;
	font-weight: bold;
	color: #FFF;
	background: #0c3353;
	text-align: center;
}
.sec-quality .itemList .itemRow .itemBox .img{
 aspect-ratio:5/3;
	padding: 10px;
}
.sec-quality .itemList .itemRow .itemBox .img img{
 width: 100%;
	height: 100%;
	object-fit: contain;
}

.sec-flow {
 padding: 91px 0;
	background: #FFF;
}
.sec-flow .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}
.sec-flow .flowList {
 margin: 0px;
}
.sec-flow .flowList .flowRow{
 margin: 0px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:40px;
	background: #FFF;
}
.sec-flow .flowList .flowRow .flowBox{
 width: 200px;
	max-width : -webkit-calc(16.66% - 33.334px) ;
 max-width : calc(16.66% - 33.334px) ;
	position: relative;
}
.sec-flow .flowList .flowRow .flowBox:after {
	content: "";
	background: url(/img/product/wire-harness/shape.png) center center no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	right: -35px;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
}
.sec-flow .flowList .flowRow .flowBox:last-of-type:after {
 display: none;
}
.sec-flow .flowList .flowRow .flowBox .img{
 margin: 0px 0px 10px 0px;
	padding: 0px;
}
.sec-flow .flowList .flowRow .flowBox .text{
 margin: 0px;
	padding: 0px;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1;
	font-weight: bold;
	color: #0c3353;
}

.sec-case {
 padding: 91px 0;
	background: #EDEDEC;
}
.sec-case .ttlCom01 {
	font-size: 32px;
	font-size: 3.2rem;
}

.sec-case .caseList {
 margin: 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sec-case .caseList .caseBox{
 width : -webkit-calc(50% - 25px) ;
 width : calc(50% - 25px) ;
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.sec-case .caseList .caseBox .imgArea{
 margin: 0px;
	padding: 0px;
	background: #FFF;
	width : -webkit-calc(60% - 10px) ;
 width : calc(60% - 10px) ;
}
.sec-case .caseList .caseBox .imgArea .index {
    margin: 0px;
    padding: 15px 10px;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1;
    font-weight: bold;
    color: #FFF;
    background: #0c3353;
    text-align: center;
}
.sec-case .caseList .caseBox .textArea {
	width : -webkit-calc(40% - 10px) ;
 width : calc(40% - 10px) ;
	    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: bold;
    color: #0c3353;
}
.sec-case .caseList .caseBox .textArea .t-list li{
 margin: 0px 0px 5px 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	font-size: 16px;
 font-size: 1.6rem;
	gap:10px;
}
.sec-case .caseList .caseBox .textArea .t-list li span{
 display: block;
	max-width : -webkit-calc(100% - 40px) ;
 max-width : calc(100% - 40px) ;
}
.sec-case .caseList .caseBox .textArea .t-list li:before{
    content: "●";
				color: #0c3353;
}

@media screen and (max-width: 767px) {
	.fv{
	 padding: 42px 0;
	}
	.fv .title{
	 font-size: 36px;
  font-size: 3.6rem;
		margin: 0px 0px 30px 0px;
	}
	.fv .itemList{
	 display: block;
	}
	.fv .itemList .itemBox{
	 margin: 0px 0px 15px 0px;
		width: auto;
		max-width: 100%;
	}
	.fv .pointList{
	 margin: 0px;
		width: 100%
	}
	.sec-lineup .itemLineupList{
	 display: block;
	}
	.sec-lineup .itemLineupList .itemLineupBox{
	 width: auto;
		margin: 0px 0px 30px 0px;
	}
	.sec-applicator .target{
	 gap:5px
	}
	.sec-applicator .target .b{
		padding: 4px 7px;
		font-size: 14px;
  font-size: 1.4rem;
	}
	.sec-specifications .specificationsList{
	 gap:15px;
	}
	.sec-specifications .specificationsList .specificationsBox{
	 max-width: -webkit-calc(33.3% - 10px);
  max-width: calc(33.3% - 10px);
		padding: 10px;
	}
.sec-cta .inner{
 margin: 0px 20px;
}
.sec-what .outerbox{
 padding: 20px;
}
.sec-reason .reasonList .reasonBox{
 display: block;
}
.sec-reason .reasonList .reasonBox .indexArea{
 width: auto;
	margin: 0px 0px 10px 0px;
}
.sec-reason .reasonList .reasonBox .textArea{
 width: auto;
}
.sec-quality .text{
 text-align: left;
}
.sec-quality .flowList .flowRow{
 padding: 20px 0px;
	display: block;
}
.sec-quality .flowList .flowRow .flowBox{
 width: auto;
	max-width: 100%;
	margin: 0px 0px 50px 0px;
}
.sec-quality .flowList .flowRow .flowBox:after{
 content: "";
	background: url(/img/product/wire-harness/shape_b.png) center center no-repeat;
	background-size: contain;
	width: 100%;
	height: 20px;
	position: absolute;
	top: inherit;
	right: inherit;
	left: 0px;
	bottom: -40px;
	transform: translate(0%, 0%);
	-webkit-transform: translate(0%, 0%);
	-ms-transform: translate(0%, 0%);
}
.sec-quality .flowList .flowRow .flowBox .img{
 text-align: center;
}
.sec-quality .flowList .flowRow .flowBox .img img{
 max-width: 50%;
}
.sec-quality .itemList .itemRow{
 display: block;
}
.sec-quality .itemList .itemRow .itemBox{
 width: auto;
	max-width: 100%;
}

.sec-flow .flowList .flowRow{
 padding: 20px 0px;
	display: block;
}
.sec-flow .flowList .flowRow .flowBox{
 width: auto;
	max-width: 100%;
	margin: 0px 0px 50px 0px;
}
.sec-flow .flowList .flowRow .flowBox:after{
 content: "";
	background: url(/img/product/wire-harness/shape_b.png) center center no-repeat;
	background-size: contain;
	width: 100%;
	height: 20px;
	position: absolute;
	top: inherit;
	right: inherit;
	left: 0px;
	bottom: -40px;
	transform: translate(0%, 0%);
	-webkit-transform: translate(0%, 0%);
	-ms-transform: translate(0%, 0%);
}
.sec-flow .flowList .flowRow .flowBox .img{
 text-align: center;
}
.sec-flow .flowList .flowRow .flowBox .img img{
 max-width: 50%;
}
.sec-case .caseList{
 display: block;
}
.sec-case .caseList .caseBox{
 width: auto;
	margin: 0px 0px 20px 0px;
}
}