@charset "UTF-8";

.pc {
	display: block;
}

.sp {
	display: none;
}

.sp_br {
	display: none;
}

.dl_bottom {
	border-radius: 50px;
	padding: 5px 0;
	font-weight: bold;
	color: #FFF;
	display: block;
	max-width: 200px;
	margin: 8px auto 0;
}

.dl_bottom:hover {
	color: #000;
}

a.dl_bottom2 {
	display: block;
	padding: 16px;
	color: #000;
	border-radius: 50px;
	font-size: 19px;
	font-size: clamp(12px, 2vw, 19px);
	font-weight: bold;
	display: block;
	max-width: 409px;
	text-align: center;
	transition: none;
}

a.dl_bottom2:hover {
	color: #FFF;
	transition: none;
}

.b_01 {
	background-color: #3d77b7;
	border: 1px solid #3d77b7;
	font-size: 0.9em;
	font-size: clamp(6px, 1vw, 13px);
}

.b_01:hover {
	background-color: rgba(61, 119, 183, 0.15);
	border: 1px solid #3d77b7;
	/*transition: 0.5s;*/
}

.dl_bottom::before {
	background: url(../img/icon_dl_wh.svg) no-repeat 60% bottom;
	content: "";
	display: inline-block;
	width: 20%;
	height: 11px;
}

.dl_bottom::after {
	background: url(../img/icon_arrow_wh.svg) no-repeat 40% bottom;
	content: "";
	display: inline-block;
	width: 20%;
	height: 11px;
}

.dl_bottom2::before {
	background: url(../img/icon_dl_bk.svg) no-repeat 60% bottom;
	content: "";
	display: inline-block;
	width: 45px;
	height: 11px;
}

.dl_bottom2::after {
	background: url(../img/icon_arrow_bk.svg) no-repeat 40% bottom;
	content: "";
	display: inline-block;
	width: 35px;
	height: 11px;
}

.dl_bottom:hover:before {
	background: url(../img/icon_dl_bk.svg) no-repeat 60% bottom;
}

.dl_bottom:hover:after {
	background: url(../img/icon_arrow_bk.svg) no-repeat 40% bottom;
}

.dl_bottom2:hover:before {
	background: url(../img/icon_dl_wh.svg) no-repeat 60% bottom;
}

.dl_bottom2:hover:after {
	background: url(../img/icon_arrow_wh.svg) no-repeat 40% bottom;
}


/*駆動機器カラー*/
.b-line_drv {
	background-color: #ffa91c;
	border: 1px solid #ffa91c;
}

.b_drv {
	background-color: #ffa91c;
}

.b_drv:hover {
	background-color: rgba(255, 169, 28, 0.15);
	border: 1px solid #ffa91c;
}

.b_drv2 {
	background-color: rgba(255, 169, 28, 0.15);
	border: 1px solid #ffa91c;
}

.b_drv2:hover {
	background-color: #ffa91c;
}


/*受配電機器カラー*/
.b-line_taca {
	background-color: #84cd59;
	border: 1px solid #84cd59;
}

.b_taca {
	background-color: #84cd59;
	border: 1px solid #84cd59;
}

.b_taca:hover {
	background-color: rgba(132, 205, 89, 0.15);
	border: 1px solid #84cd59;
}

.b_taca2 {
	background-color: rgba(132, 205, 89, 0.15);
	border: 1px solid #84cd59;
}

.b_taca2:hover {
	background-color: #84cd59;
	border: 1px solid #84cd59;
}

/*制御機器*/
.b-line_plc {
	background-color: #ff90b5;
	border: 1px solid #ff90b5;
}

.b_plc {
	background-color: #ff90b5;
}

.b_plc:hover {
	background-color: rgba(255, 144, 181, 0.15);
	border: 1px solid #ff90b5;
}

.b_plc2 {
	background-color: rgba(255, 144, 181, 0.15);
	border: 1px solid #ff90b5;
}

.b_plc2:hover {
	background-color: #ff90b5;
}

/*ロボット*/
.b-line_robot {
	background-color: #4b539e;
	border: 1px solid #4b539e;
}

.b_robot {
	background-color: #4b539e;
}

.b_robot:hover {
	background-color: rgba(255, 144, 181, 0.15);
	border: 1px solid #4b539e;
}

.b_robot2 {
	background-color: rgba(237, 238, 245);
	border: 1px solid #4b539e;
}

.b_robot2:hover {
	background-color: #4b539e;
}

.maintilte {
	max-width: 1170px;
	margin: 50px auto;
}

.maintilte #wrap {
	display: flex;
	align-items: stretch;
	margin-top: -50px;
}

.maintilte #wrap .left {
	width: 54.19%;
	background: url(../img/main_titlebg_pc.png) no-repeat bottom left;
	background-size: contain;
	display: flex;
	justify-content: center;
	align-items: center;
}

.maintilte #wrap .left img {
	max-width: 588px;
	width: 100%;
	margin-left: auto;
}

.maintilte #wrap .right {
	margin: 0 auto;
	width: 45.81%;
	padding-top: 50px;
}

.maintilte #wrap .right ul {
	list-style: none;
	width: 82.65%;
	padding: 0;
	margin: 0 auto;
	min-width: 442px;
}

.maintilte #wrap .right ul li {
	border-bottom: 3px #0078bb dotted;
	height: 160px;
	display: flex;
	align-items: center;
	text-align: center;

}

.maintilte #wrap .right .pro_name {
	width: 45%;
}

.maintilte #wrap .right .pro_name p {
	margin-bottom: 5px;
	font-weight: 600;
	display: block;
}

.maintilte #wrap .right .pro_photo {
	width: 55%;
	margin: 0 auto;
	text-align: center;
}

.maintilte #wrap .right .pro_photo img {
	width: 100%;
	max-width: 220px;
}

.maintilte #wrap #soon div {
	width: 100%;
}

.maintilte #wrap #soon div img {
	margin: 0 auto;
	text-align: center;
	max-width: 300px;
}

.maintilte #wrap #clp h3 {
	color: #ff90b5;
}

.maintilte #wrap #drv h3 {
	color: #ffa91c;
}

.maintilte #wrap #taca h3 {
	color: #84cd59;
}

.maintilte #wrap #robot h3 {
	color: #4b539e;
}

.maintilte #wrap .right h3 {
	font-weight: bold;
	font-size: 30px;
	line-height: 1.3;
	text-align: center;
	display: block;
}

.models {
	max-width: 1000px;
	margin: 50px auto;
}

.models #models_button p {
	background-color: #3d77b7;
	position: relative;
	color: #FFF;
	text-align: center;
	font-weight: 600;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 27px;
	font-size: clamp(25px, 2vw, 27px);
	padding: 10px 0;

}

.models #models_button P::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -43px;
	left: calc(50% - (60px / 2));
	background: url(../img/trouble_titlebg_icon_arrow.svg) no-repeat;
	width: 60px;
	height: 43px;
	text-align: center;
}

.models #models_list {
	background: #e4eaf3;
	padding: 15px;
	display: none;
}

.models #models_list.active {
	display: block !important;
}

.models #models_list .list1 {
	width: 50%;
}

.models #models_list .list2 {
	width: 100%;
}

.models #models_list .wrap {
	background: #FFF;
	position: relative;
}

.models #models_list .wrap.bo_plc {
	border: 1px solid #ff90b5;
	margin: 60px 0 0 0;
	width: 49%;
}

.models #models_list .wrap.bo_dvr {
	border: 1px solid #ffa91c;
	margin: 50px 0 0;
	width:100%;
}

.models #models_list .wrap.bo_taca {
	border: 1px solid #84cd59;
	margin: 50px 0 0;
}

.models #models_list .wrap.bo_robot {
	border: 1px solid #4b539e;
	margin: 60px 0 0 0;
	width: 49%;
}

.models #models_list .wrap.p_dvr {
	border: 1px solid #ffa91c;
	margin-bottom: 15px;
}

.models #models_list .wrap.p_taca {
	border: 1px solid #84cd59;
}

.models #models_list .wrap.p_robot {
	border: 1px solid #4b539e;
}

.models #models_list .wrap ul {
	display: flex;
	flex-wrap: wrap;
	padding-right: 10px;
}

.models #models_list .wrap li {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.models #models_list .wrap li.item2 {
	width: calc(100% / 3 - 10px);
}

.models #models_list .wrap li.item {
	width: calc(100% / 6 - 10px);
}

.models #models_list .wrap li.item2 img,
.models #models_list .wrap li.item img {
	width: 100%;
}

.models #models_list .wrap li .caption {
	font-size: 11px;
	width: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
	font-weight: 600;
}

.m_lists {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.models #models_list .wrap .title {
	position: absolute;
	color: #FFF;
	font-size: 18px;
	padding: 1px 50px 3px 4px;
	height: 30px;
	top: -31px;
	left: -1px;
	pointer-events: none;
	z-index: 60;
}

.models #models_list .wrap .title::after {
	content: "";
	display: inline-block;
	position: absolute;
	border: 0;
	bottom: 0;
	left: 0px;
	border-right: solid 41px #e4eaf3;
	border-bottom: solid 33px transparent;
	margin-left: calc(100% - 39px);
	z-index: 50;
}


.models #models_list .wrap .title i {
	width: 3px;
	height: calc(100% - 6px);
	background-color: #FFF;
	margin: 3px 6px;
	display: inline-block;
	vertical-align: bottom
}


/*trouble*/
.trouble {
	max-width: 1000px;
	margin: 50px auto;
}

.trouble .wrap {
	background: #c8c8c8;
	position: relative;
	margin-bottom: 200px;
}

.trouble .wrap::after {
	content: "";
	display: inline-block;
	background: #fff url(../img/trouble_bg_bottom.svg) no-repeat top;
	background-size: 100%;
	width: 100%;
	height: 200px;
	position: absolute;
	bottom: -200px;
}

.trouble .wrap h3 {
	font-size: 39px;
	font-weight: 800;
	text-align: center;
	margin: 100px 0;
	font-family: 'M PLUS 1p', sans-serif;
}

.trouble .wrap h3 span {
	position: relative;
}

.trouble .wrap h3 span::before {
	content: "";
	background: url(../img/icon_trouble.svg) no-repeat top;
	width: 67px;
	height: 71px;
	display: inline-block;
	position: absolute;
	left: calc(-67px - 20px);
	top: -80px;
}

.trouble .title {
	background: #3d77b7 url(../img/trouble_titlebg_hito.svg) no-repeat bottom;
	background-size: contain;
	padding: 65px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 39px;
	font-weight: 800;
	color: #fff;
	text-align: center;
}

.trouble .title::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -43px;
	left: calc(50% - (94px / 2));
	background: url(../img/trouble_titlebg_icon_arrow.svg) no-repeat;
	width: 94px;
	height: 43px;
	text-align: center;
}

.trouble .wrap .title span {
	color: #ffff00;
}

.trouble .wrap .troublelist {
	display: flex;
	width: 62%;
	margin: 0 auto 56px;
}

.trouble .wrap .troublelist .tor_hukidasi {
	width: calc(100% - 22.28%);
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 19px;
	margin-left: 20px;
}

.trouble .wrap .troublelist.list01 .tor_hukidasi,
.trouble .wrap .troublelist.list03 .tor_hukidasi {
	width: calc(100% - 22.28%);
	background: url(../img/trouble_speech_pc.svg) no-repeat 0 15px;
}

.trouble .wrap .troublelist.list03 .tor_hukidasi {
	margin-bottom: 0;
}

.trouble .wrap .troublelist.list02 .tor_hukidasi {
	width: 100%;
	background: url(../img/trouble_speech_left_pc.svg) no-repeat 0 15px;
}

.trouble .wrap .troublelist .tor_hukidasi span {
	width: 84.03%;
	display: block;
	margin: 15px 0px 30px 75px;
	padding: 30px;
}

.trouble .wrap .troublelist.list02 .tor_hukidasi span {
	width: 84.03%;
	display: block;
	margin: 15px 75px 30px 0px
}

.trouble .wrap .troublelist.list03 .tor_hukidasi span {
	width: 84.03%;
	display: block;
	margin: 15px 0px 30px 120px;
	padding: 30px;
}
.trouble .wrap .troublelist .tor_hukidasi i {
	color: #0078bb;
	font-size: 23px;
	font-size: clamp(18px, 4vw, 23px);
	font-style: normal;
	font-weight: 700;
}

.trouble .wrap .troublelist .tor_icon {
	width: 22.28%;
	margin: 0 auto;
	text-align: center;
}

.trouble .wrap .troublelist .tor_icon img {
	width: 137px;
}

.trouble .wrap2 {
	text-align: center;
	background: url(../img/trouble_icon_arrow.svg) no-repeat bottom;
	background-size: 34px;
	padding-bottom: 80px;
}

.trouble .wrap2 p:first-child {
	color: #0078bb;
	font-size: 52px;
	font-weight: 900;
	margin-bottom: 15px;

}

.trouble .wrap2 p:last-child {
	font-size: 21px;
	font-weight: 600;
}


.solution {
	max-width: 1000px;
	margin: 50px auto;
}

.solution .wrap {
	padding-left: 45px;
	margin-bottom: 160px;
}

.solution .wrap:last-child {
	margin-bottom: 0;
}

.solution .wrap .title {
	position: relative;
}

.solution .wrap.mainte .title h3 {
	display: block;
}

.solution .wrap .title h3 i {
	font-style: normal;
	font-size: 41px;
	font-weight: 900;
	padding-left: 35px;
}

.solution .wrap .title h3 i::after {
	content: '';
	display: inline-block;
	border-style: solid;
	border-width: 16px 0 16px 24px;
	display: inline-block;
	width: 0;
	height: 0;
	/* 矢印アイコンの位置を設定 */
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
	/* translateYのみ */
}

.solution .wrap .title p {
	font-size: 20px;
	font-weight: 600;
	margin: 15px 0 0 0;
}

.solution .wrap .inner {
	display: flex;
	font-size: 20px;
	position: relative;
}

.solution .wrap .inner .detail {
	width: 50%;
}

.solution .wrap .inner .detail .detail_in {
	width: 100%
}

.solution .wrap .inner .detail .tag {
	color: #FFF;
	margin: 20px 0 5px;
	padding: 5px 21px 6px 6px;
	position: relative;
	height: 37px;
	font-size: 20px;
	display: inline-flex;
	justify-content: left;
	align-items: center;
	pointer-events: none;
	width:130px;
	clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
}
/*
.solution .wrap .inner .detail .tag::after {
	content: "";
	position: absolute;
	transform: translate(-50%, -50%);
	bottom: 50%;
	top: 50%;
	right: -11px;
	border-top: 19px solid #FFF;
	border-bottom: 19px solid #FFF;
}
*/
.solution .wrap .inner .detail p {
	margin: 0 10px 15px 10px;
	font-weight: 600;
}

.solution .wrap .inner .bottom {
	display: inline-block;
}

.solution .wrap .inner .detail .tag.b_drv::after {
	border-left: 18px solid #ffa91c;
}

.solution .wrap .inner .detail .tag.b_taca::after {
	border-left: 18px solid #84cd59;
}

.solution .wrap .inner .detail .tag.b_plc::after {
	border-left: 18px solid #ff90b5;
}

.solution .wrap .inner .detail .tag.b_robot::after {
	border-left: 18px solid #4b539e;
}

.solution .wrap .inner .photo {
	width: 50%;
}

.solution .wrap .inner .photo img {
	max-width: 450px;
}

.solution .wrap .inner .photo .in_photo {
	position: absolute;
	bottom: 0;
	z-index: 20;
	display: inline-block;
}

.solution .wrap .inner .photo .in_photo img {
	width: 100%;
}

.solution .wrap .inner .photo .photobg {
	width: 65.96%;
	padding-top: 65.96%;
	position: absolute;
	top: -60px;
	right: 0px;
	z-index: 10;
	overflow: hidden;
}

/* Maintenance */
.solution .wrap.mainte {
	border-left: 13px solid #3d77b3;
}

.solution .wrap.mainte .title p span {
	color: #3d77b3;
}

.solution .wrap.mainte .title #ma_icon {
	position: absolute;
	width: 149px;
	left: 50%;
	top: 220px;
}

.solution .wrap.mainte .title h3 img {
	max-width: 572px;
	display: block;
}

.solution .wrap.mainte .title h3 i {
	color: #3d77b3;
	position: relative;
}

.solution .wrap.mainte .title h3 i::after {
	border-color: transparent transparent transparent #3d77b3;
}

/*Overhaul*/
.solution .wrap.over {
	border-left: 13px solid #449042;
}

.solution .wrap.over .title p span {
	color: #449042;
}

.solution .wrap.over .title #ma_icon {
	position: absolute;
	width: 173px;
	left: 50%;
	top: 100px;
}

.solution .wrap.over .title h3 img {
	max-width: 410px;
	display: block;
}

.solution .wrap.over .title h3 i {
	color: #449042;
	position: relative;
}

.solution .wrap.over .title h3 i::after {
	border-color: transparent transparent transparent #449042;
}


/*Renewal*/
.solution .wrap.renew {
	border-left: 13px solid #6e348a;
}

.solution .wrap.renew .title p span {
	color: #6e348a;
}

.solution .wrap.renew .title #ma_icon {
	position: absolute;
	width: 209px;
	left: 50%;
	top: 43px;
}

.solution .wrap.renew .title h3 img {
	max-width: 380px;
	display: block;
}

.solution .wrap.renew .title h3 i {
	color: #6e348a;
	position: relative;
}

.solution .wrap.renew .title h3 i::after {
	border-color: transparent transparent transparent #6e348a;
}


/*レスポンシブ*/
@media screen and (max-width: 980px) {
	.maintilte {
		width: 100%;
		margin: 0 auto;
	}

	.sp {
		display: block;
	}

	.pc {
		display: none;
	}

	.sp_br {
		display: none;
	}

	.dl_bottom2 {
		font-size: 18px;
	}


	.maintilte #wrap {
		display: block;
		width: 95%;
		margin: 0 auto;
	}

	.maintilte #wrap .right,
	.maintilte #wrap .left {
		width: 100%;
	}

	.maintilte #wrap .right h3 {
		font-size: 27px;
		font-size: clamp(22px, 2vw, 27px);
	}

	/*maintilte*/
	.maintilte #wrap {
		margin-top: -10px;
	}

	.maintilte #wrap .left {
		background: url(../img/main_titlebg_sp.png) no-repeat;
		background-size: contain;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 70px 50px;
	}

	.maintilte #wrap .right {
		min-width: auto;
		padding-top: 0;
		margin: 0 auto;

	}

	.maintilte #wrap .right ul li:first-child {
		border-bottom: 3px #0078bb dotted;
		border-top: 3px #0078bb dotted;
	}

	.maintilte #wrap .right ul {
		min-width: auto;
		width: 90%;
	}


	.models {
		width: 85%;
	}

	/*trouble*/
	.models #models_list .wrap.bo_plc {
		width: 100%;
		order:1;
	}

	.models #models_list .wrap.bo_robot {
		width: 100%;
		margin: 50px 0 0 0;
		order:3;
	}
	.models #models_list .wrap.bo_dvr {
		order:2;
	}
	.models #models_list .wrap.bo_taca {
		order:4;
	}

	.models #models_list .wrap li.item2 {
		width: calc(100% / 3 - 10px);
	}

	.models #models_list .wrap li.item {
		width: calc(100% / 3 - 10px);
	}

	.models #models_list .wrap li .caption {
		font-size: 13px;
	}

	.trouble {
		width: 85%;
		/*69.23%*/
	}

	.trouble .title {
		padding:5px;
		font-family: 'M PLUS 1p', sans-serif;
		font-size: 28px;
		font-size: clamp(25px, 2vw, 28px);
	}

	.trouble .wrap h3 {
		font-size: 30px;
	}

	.trouble .wrap h3 span::before {
		content: "";
		background: url(../img/icon_trouble.svg) no-repeat top;
		width: calc(112px / 2);
		height: calc(118px / 2);
		display: inline-block;
		position: absolute;
		left: calc((-112px / 2) - 20px);
		top: -10px;
	}

	.trouble .wrap .troublelist {
		width: 100%;
		margin: 0 auto 56px;
	}

	.list01,
	.list03 {
		flex-direction: column-reverse
	}

	.list02 {
		flex-direction: column
	}

	.trouble .wrap .troublelist .tor_hukidasi {
		margin: 0;
		padding: 0;
		width: 100%;
		position: relative;
	}

	.trouble .wrap .troublelist.list01 .tor_hukidasi,
	.trouble .wrap .troublelist.list03 .tor_hukidasi,
	.trouble .wrap .troublelist.list02 .tor_hukidasi {
		width: 100%;
		background: url(../img/trouble_speech_sp.svg) no-repeat center;
		background-size: 90%;
		padding-top: 46%;
	}

	.trouble .wrap .troublelist .tor_hukidasi span,
	.trouble .wrap .troublelist.list03 .tor_hukidasi span {
		padding: 0 0 70px 0;
		margin: 15px 0px 30px 0px;
		font-size: 17px;
		font-size: clamp(13px, 3vw, 17px);
		position: absolute;
		text-align: center;
		top: 45%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}

	.trouble .wrap .troublelist.list02 .tor_hukidasi span {
		margin: 15px 0px 30px 0px;
	}

	.trouble .wrap .troublelist .tor_icon {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.trouble .wrap .troublelist .tor_icon img {
		width: 78px;
	}

	.trouble .wrap2 p:first-child {
		font-size: 37px;
		margin-bottom: 15px;
	}

	.trouble .wrap2 p:last-child {
		font-size: 21px;
		font-weight: 600;
	}

	.solution {
		width: 85%;
	}

	.solution .wrap {
		padding-left: 27px;
		margin-bottom: 120px;
	}

	.solution .wrap .title h3 i {
		font-style: normal;
		font-size: 2em;
		font-weight: 900;
		padding-left: 30px;
	}

	.solution .wrap .title h3 i::after {
		content: '';
		display: inline-block;
		border-style: solid;
		border-width: 11px 0 11px 17px;
		display: inline-block;
		width: 0;
		height: 0;
		position: absolute;
		top: 50%;
		left: 0px;
		transform: translateY(-50%);
	}

	.solution .wrap .inner {
		flex-flow: column-reverse;
	}

	.solution .wrap .inner .detail {
		width: 100%;
	}

	.solution .wrap .inner .photo {
		width: 100%;
		margin-top: 10px;
		position: static;
	}

	.solution .wrap .inner .photo .in_photo {
		width: 100%;
		margin-top: 10px;
		position: static;

	}


	.solution .wrap.mainte .title h3 img {
		max-width: 90.89%;
		display: block;
	}

	.solution .wrap.over .title h3 img {
		max-width: 65%;
		display: block;
	}

	.solution .wrap.renew .title h3 img {
		max-width: 60%;
		display: block;
	}

	.solution .wrap .title #ma_icon {
		max-width: 185px;
		width: 41.15%;
	}

	.solution .wrap.mainte .title #ma_icon {
		position: absolute;
		right: 0;
		left: auto;
		top: -35px;
	}

	.solution .wrap.over .title #ma_icon,
	.solution .wrap.renew .title #ma_icon {
		position: absolute;
		left: auto;
		right: 0;
		top: -50px;
	}
	a.dl_bottom2 {
		padding: 5px;
	}
	.dl_bottom2::before{
		width:20px;
	}
	.dl_bottom2::after{
		width:20px;
	}
}
@media screen and (max-width: 430px) {
	.trouble .wrap .troublelist .tor_hukidasi span,
	.trouble .wrap .troublelist.list03 .tor_hukidasi span {
		top: 55%;
	}
	.trouble .wrap h3 span::before {
		left: -30px;
		top: -60px;
	}
	.dl_bottom::before {
		width:10%;
	}
	.dl_bottom::after {
		width:0%;
	}

}