@charset "UTF-8";/*コードの文字化け防止*/

/*--------------------共通--------------------*/
html{
	font-size: 100%; /*ユーザーが指定した文字のサイズを正しく反映*/
}
body{
	font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
/*	line-height: 1.5;*/
}
/*pcで見た場合のsp要素非表示*/
.sp{
	display: none !important;
}
.wrapper{
	max-width: 1080px;
	width: 98%;
	margin: 0 auto;
}
.all{
		overflow: hidden;
}
.flex{
	display: flex;
	justify-content: center;
}
h1{
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 0;
	font-size: 40px;
	color: #1b1464;
}
h1 span{
	font-size: 32px;
}
h2{
	font-size: 32px;
	color: #1B1464;
}
h3{
	font-size: 32px;
	color: #2C5EAA;
	margin: auto 37px;
}
h4{
	font-size: 24px;
	color: #2C5EAA;
}
h5{
	font-size: 24px;
	color: #2C5EAA;
	text-align: center;
}
.contents-title{
	margin-bottom: 45px;
	text-align: center;
}
.contents{
	padding-top: 45px;
	padding-bottom: 100px;
}
.center-line-a{
	max-height: 60px;
	text-align: center;
	margin-bottom: -30px;
}
.center-line-b{
	max-height: 60px;
	text-align: center;
	margin-top: -30px;
}
.center-line-a img, .center-line-b img{
	height: 60px;
}
a{
	text-decoration: none;
}
li{
	list-style:none;
}


/*--------------------ヘッダー--------------------*/
header{
	position: fixed;
	top: 0;
	width: 100%;
	height: 70px;
	background-color: #fff;
	z-index: 1000;
}
.header{
	display: flex;
	justify-content: space-between;
}
.header-logo{
	max-width: 204px;
	width: 100%;
	margin-top: 10px;
	margin-right: 20px;
}
.header-button{
	background: #00B0BF url(../img/ico_mail.png) no-repeat 30px center / 30px auto;
	width: 300px;
	height: 60px;
	text-align: center;
	border-radius: 0 0 10px 10px;
}
.header-button p{
	font-size: 20px;
	color: #fff;
	margin-top: 13px;
	margin-left: 30px;
}


/*--------------------全体--------------------*/
.contents_back{
	background-color: #fdf2e1;
	padding-top: 45px;
	padding-bottom: 100px;
}
/*
h1{
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 0;
	font-size: 40px;
	color: #1b1464;
}
*/

/*--------------------メインイメージ--------------------*/

.main-img-pc{
/*	position: relative;*/
	background-image: url("../img/bousai_mainte_img_pc.png");
	background-repeat: no-repeat;
	background-size: 1280px;
	background-position: center top;
	margin-top:70px;
	margin-left: auto;
	margin-right: auto;
/*	width: 1280px;*/
	max-height: 400px;
	height: 100%;
}
.title-left-pc{
	display: flex;
	flex-direction: row-reverse;
	max-width: 1080px;
	width: 98%;
	height: 400px;
	margin: auto;
}
/*
.main-img .pc{
	max-width: 1280px;
	width: calc(100%+200px);
	margin: 0 -100px;
}
*/


/*--------------------ご利用の非常放送設備をチェック！　こんなこと、ありませんか？--------------------*/
.problem-box{
	justify-content: center;
}
.problem-block{
	position: relative;
	margin: 15px;
	max-width: 320px;
	width: 100%;
}
.problem-block img{
	max-width: 320px;
	width: 100%;
}
.problem-block p{
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%,-70%);
	width: 300px;
	line-height: 25px;
	text-align: center;
	font-size: clamp(14px, 1.5vw, 20px);
}
.bousai-mainte-problem-column{
	border: 2px solid #f5a738;
	padding: 30px;
}
.bousai-mainte-problem-column-title{
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 20px;
}
.bousai-mainte-problem-column-text{
	text-align: left;
}


/*--------------------該当する項目がある場合、機器の老朽化が考えられます--------------------*/
.arrow-back{
	position: relative;
	margin: -30px 10px 0;
	text-align: center;
}
.arrow-back img{
	max-width: 800px;
	width: 100%;
}
.arrow-back-text{
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translate(-50%,-18%);
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	line-height: 35px;
	letter-spacing: 2px;
	text-shadow: #000 0 2px 5px;
}
.arrow-back-text span{
	font-size: 20px;
}
.arrow-back-text .text-color{
	color: #fcc800;
	font-size: 30px;
}
.bousai-case1-4{
	display: flex;
	justify-content: space-around;
}
.bousai-case-box{
	background-color: #dfe7f2;
	max-width: 255px;
	width: 100%;
	text-align: center;
	padding: 28px 0;
	border-radius: 18px;
}
.case1-4icon{
	max-width: 185px;
	widows: 100%;
}
.bousai-case-box p{
	margin-top: 15px;
}

/*更新期間について*/
.bousai-koushin-line{
	border: #fcc888 solid 4px;
	margin: 40px 0;
	padding: 40px;
}
.bousai-koushin-line h3{
	text-align: center;
	margin-bottom: 20px;
}
.bousai-koushin{
	display: flex;
	justify-content: center;
}
.bousai-koushin-box{
	text-align: center;
	margin: 0 50px;
	background-color: #fdf2e1;
	border-radius:50%
}
.bousai-koushin-title{
	font-size: 18px;
	font-weight: 700;
	margin-top: 10px;
}
.bousai-koushin-text{
	font-size: 30px;
	font-weight: 700;
	color: #e60012;
}
.bousai-koushin-text span{
	font-size: 40px;
}
.bousai-koushin-img{
	max-width: 305px;
	width: 100%;
}
.bousai-koushin-down{
	text-align: center;
}
.bousai-koushin-down img{
	max-width: 150px;
	width: 100%;
	margin: 40px;
}
.bousai-koushin-line h4{
	text-align: center;
	margin-bottom: 20px;
/*	color: #000000;*/
}
.bousai-koushin-line h3 span{
	 border-bottom: 5px solid #fcc800;
}
.bousai-koushin-end-text{
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	margin-bottom: -70px;
}

/*--------------------エルーア・システムにお任せください！--------------------*/
.box-back{
	position: relative;
	text-align: center;
	z-index: 50;
	margin-bottom: -50px;
}
.box-back img{
	max-width: 800px;
	width: 100%;
}
.box-back-text{
	position: absolute;
	top: 32%;
	left: 50%;
	transform: translate(-50%,-30%);
	width: 100%;
	font-size: 36px;
	font-weight: bold;
	color: #fff;
	text-shadow: #000 0 2px 5px;
}
.aileun-3point{
	display: flex;
	justify-content: space-around;
	text-align: center;
	padding-top: 40px;
}
.aileun-3point div{
	background-color: #FFFFFF;
	max-width: 310px;
	width: 100%;
	padding: 0 25px;
}
.bousai-no{
	max-width: 58px;
	width: 100%;
	margin: 24px;
}
.aileun-3point h4{
	color: #1b1464;
	margin-bottom: 20px;
}
.aileun-3point p{
	text-align: left;
}
.aileun-3point-img{
	width: 100%;
	margin: 24px 0;
}

/*点検も更新も、非常放送設備の不安を丸ごとサポート！*/
.aileun-flowcycle{
	text-align: center;
}
.aileun-flowcycle h3{
	margin-top: 60px;
}
.aileun-flowcycle img{
	max-width: 1080px;
	width: 100%;
	margin-top: 40px;
}

/*--------------------よくあるご質問--------------------*/
.qa {
    margin-bottom: 5px;
    border-bottom: 1px solid #b9c8d0;
}

.qa summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 15px 0 15px 50px;
    color: #333333;
	font-size: 22px;
    font-weight: 500;
    cursor: pointer;
}

.qa summary::before,
.qa p::before {
    position: absolute;
    left: 0;
    font-weight: 500;
    font-size: 22px;
}

.qa summary::before {
    color: #fff;
    content: "Q";
	padding: 5px 10px;
	background-color: #B9C8D0;
}

.qa summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
	margin-right: 20px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa[open] summary::after {
    transform: rotate(225deg);
}

.qa p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa[open] p {
    transform: none;
    opacity: 1;
}

.qa p::before {
    color: #fff;
    line-height: 1.1;
    content: "A";
	font-weight: 500;
	margin-top: -5px;
	padding: 5px 10px;
	background-color: #80D7DF;
}
.question-button{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: 30px 0;
}
.question-button p{
	padding-left: 1.2em;
	background: url(../img/arrow_button.png) left 20px top 0px no-repeat;
	background-repeat: no-repeat;
	background-size: 20px auto;
	background-position: 0 5px;
	font-size: 20px;
	color: #00B0BF;
}
.demo-request{
	background: url("../img/ico_product.png") left 20px top 30px no-repeat;
	background-color: #DA801E;
	background-size: 60px auto;
	max-width: 340px;
	width: 100%;
	height: 97px;
	border-radius: 30px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
}
.demo-request p{
	color: #fff;
	font-size: 25px;
	line-height: 35px;
	padding-left: 95px;
	padding-top: 13px;
}


/*--------------------contact--------------------*/
.contact-back{
	background: url(../img/contact_back_img.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding: 30px 0 70px 0;
}
.contact-back p{
	margin: auto;
	color: #fff;
}
.contact-img img{
	max-width: 540px;
	width: 100%;
}
.nonstop{
	text-align: center;
	padding-bottom: 50px;
}
.nonstop p{
	font-size: 27px;
	color: #FFFF98;
}
.contact-button{
	margin-top: 30px;
	background: #00B0BF url(../img/ico_mail.png) no-repeat 30px center / 30px auto;
	width: 300px;
	height: 60px;
	border-radius: 50px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	padding-bottom: 40px;
}
.contact-button p{
	font-size: 20px;
	margin-top: 15px;
	margin-left: 50px;
	color: #fff;
}
/*
	font-size: 20px;
	color: #fff;
	margin-top: 13px;
	pa-left: 30px;
*/

/*--------------------フッター--------------------*/
.footer-1{
	background-color: #416EB2;
	width: 100%;
}
.footer-tel-box{
	justify-content: space-between;
	padding: 30px 0 30px 0;
}
.footer-tel-list{
	text-align: center;
	font-size: 16px;
	letter-spacing: -1px;
	color: #fff;
}
.footer-tel{
	padding-left: 30px;
	font-size: 24px;
	letter-spacing: normal;
	background: url(../img/ico_tel.png) no-repeat left center;
	background-size: 24px;
}
.footer-2{
	background-color: #2C5EAA;
	width: 100%;
}
.footer-nav-box{
	padding-top: 25px;
}
.footer-nav-list:not(:last-child){
	border-right: 1px solid #fff;
	padding: 0 20px 0 0;
	margin: 0 20px 4.8px 0;
}
.footer-nav-list p{
	font-size: 16px;
	color: #fff;
}
.copyright{
	text-align: center;
	padding: 25px 0 20px 0;
	font-size: 10px;
	color: #fff;
}

#scroll_to_top{
	position: fixed;
	margin-bottom: 0;
	bottom: 10px;
	right: 10px;
	line-height: 1;
	z-index: 2000;
}

#scroll_to_top img:hover{
	opacity: 0.9;
}

@media screen and (max-width: 599px) {
	/*--------------------共通--------------------*/
	.all{
		overflow: hidden;
	}
	.pc{
		display: none !important;
	}
	.sp{
		display: block !important;
	}
	.wrapper{
	overflow: hidden;
	}
	h1 span{
		font-size: 18px;
	}
	h1{
		font-size:23px;
		padding: 0 11.25px 0 11.25px;
	}
	h2{
		text-align: center;
		font-size: 28px;
		color: #1B1464;
	}
	h3{
		width: fit-content;
		font-size: 24px;
		color: #2C5EAA;
		margin-top: 27.5px;
		padding: 0 11.25px 0 11.25px;
		margin-left: auto;
		margin-right: auto;
	}
	h4{
		font-size: 21px;
		width: 98%;
	}
	.contents-h4{
		font-size: 18px;
		width: 95%;
	}
	.contents{
		padding-top: 21.5px;
		padding-bottom: 30px;
	}
	.contents_back{
		padding-top: 21.5px;
		padding-bottom: 30px;
	}
	.contents-title{
	margin-bottom: 20px;
	}
	.center-line-a{
		max-height: 60px;
		text-align: center;
		margin-bottom: -20px;
	}
	.center-line-b{
		max-height: 60px;
		text-align: center;
		margin-top: -20px;
	}
	.center-line-a img, .center-line-b img{
		height: 50px;
	}
	
	/*--------------------ヘッダー--------------------*/
	.header{
		padding: 0 10px 0 10px;
	}
	.header-logo{
		max-width: 140px;
		width: 100%;
		margin-top: 15px;
	}
	.header-button{
		background-image: none;
		max-width: 150px;
		width: 100%;
		padding-left: 0;
	}
	.header-button p{
		margin-top: 17px;
		font-size: 14px;
		margin-left: 0;
	}
	/*--------------------メインイメージ--------------------*/
	.main-img-sp{
		background-image: url("../img/bousai_mainte_img_sp.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center top;
		margin-top:70px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		height: 300px;
	}
	.title-left-sp{
		display: flex;
		flex-direction: row-reverse;
		width: 98%;
		height: 300px;
		margin: auto;
	}
	
	
	
	/*--------------------ご利用の非常放送設備をチェック！こんなこと、ありませんか？--------------------*/
	.problem-box{
		display: block;
		align-items: center;
		margin-top: 13px;
		padding: 0 11.25px 0 11.25px;
		width: 100%;
	}
	.problem-box p{
		font-size: clamp(17px, 2.3vw, 30px);
	}
	.problem-block{
		margin: auto;
	}
	.bousai-mainte-problem-column{
		width: 90%;
		margin: 0 auto;
		padding: 10px;
	}
	
	
	
	/*--------------------該当する項目がある場合、機器の老朽化が考えられます--------------------*/
	.arrow-back-text{
		top: 20%;
		left: 50%;
		transform: translate(-50%,-20%);
		font-size: 22.5px;
		width: 100%;
		line-height: 25px;
		margin-top: 2px;
	}
	.arrow-back-text span{
		font-size: 15px;
	}
	.arrow-back-text .text-color{
		font-size:  22.5px;
	}
	.bousai-case1-4{
		display: block;
		margin-top: -20px;
	}
	.bousai-case-box{
		margin: 20px auto;
	}
	
	.bousai-koushin-line{
		width: 90%;
		margin: 0 auto;
		padding: 10px;
	}
	.bousai-koushin{
		display: block;
		margin-top: 20px;
	}
	.bousai-koushin-box{
		margin: 20px;;
	}
	.bousai-koushin-text{
		font-size: 25px;
	}
	.bousai-koushin-end-text{
		font-size: 20px;
		margin-top: 30px;
		margin-bottom: 5px;
	}
	
	/*--------------------カンタン！ベンリ！--------------------*/
/*
	.round-title{
		margin: auto;
		position: relative;
		max-width: 135px;
		width: 100%;
	}
	.round-title img{
		max-width: 135px;
		width: 100%;
	}
	.round-title p{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		max-width: 135px;
		width: 100%;
		text-align: center;
		font-size: 13.5px;
		color: #fff;
	}
	h3 .font-small{
		font-size: 19.5px;
		font-weight: lighter;
	}
	h3 .line{
		font-size: 24px;
		font-weight: none;
		border-bottom: solid;
		border-width: 5px;
		border-color: #FCC800;
	}
	.number{
	font-size: 30px;
	}
	.features-1-sp{
		padding: 0 11.25px 0 11.25px;
	}
	.features-1-sp-title{
		background: linear-gradient(to bottom right, transparent 50% , #FFF8C8 50%) no-repeat top left / 50% 100%,linear-gradient(to bottom left,transparent 50%,#FFF8C8 50%) no-repeat bottom right/50% 100%;
		width: 100%;
		margin-top: 60px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.features-1-sp p span{
		font-size: 40px;
		font-weight: bold;
		color: #2C5EAA;
		border-bottom: solid;
		border-width: 5px;
		border-color: #FCC800;
	}
	.features-1-sp-box{
		margin: 0;
		background-color: #FFF8C8;
		padding: 11.25px;
	}
	.features-sp-1-1{
		background-color: #fff;
		padding: 25px 25px;
	}
	.features-sp-1-1:not(:last-child){
		margin-bottom: 11.25px;
	}
	.features-sp-1-1 img{
		margin: 10px 50%;
		transform: translateX(-50%);
		max-width: 110px;
		width: 100%;
	}
	.features-sp-2-1 img{
		margin: 10px 50%;
		transform: translateX(-50%);
		max-width: 178px;
		width: 100%;
	}
*/
	
	
	/*--------------------エルーア・システムにお任せください！--------------------*/
	.box-back img{
		width: 98%;
	}
	.box-back-text{
		position: absolute;
		top: 35%;
		left: 50%;
		transform: translate(-50%,-35%);
		font-size: 22px;
	}
	.aileun-3point{	
		display: block;
	}
	.aileun-3point div{
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}
	.aileun-flowcycle h3{
		margin-top: 10px;
	}
	
	/*--------------------小規模工場、中規模工場--------------------*/
	.factory{
		margin-bottom: 37px;
	}
	/*小規模工場*/
	.factory-s-in{
		margin: 35px 15px 15px 15px;
		padding: 24px 10px;
	}
	.factory-s-in img{
		width: 80%;
	}
	.factory-s-in p{
		font-size: 24px;
	}
	.factory-s-in ul{
		font-size: 20px;
	}
	
	/*中規模工場*/
	.factory-m-in{
		margin: 35px 15px 15px 15px;
		padding: 24px 10px;
	}
	.factory-m-in img{
		width: 80%;
	}
	.factory-m-in p{
		font-size: 24px;
	}
	.factory-m-in ul{
		font-size: 20px;
	}
	
	
	/*--------------------エルーアシステムからご提案--------------------*/
	.system-1{
		width: 95%;
	}
	.system-1-features{
		display: block;
		margin-top: 15px;
	}
	.system-1-features h5{
		margin: auto 0;
	}
	
	
	/*--------------------運用例--------------------*/
	
	
	/*--------------------構成機器/周辺機器/専用オプション--------------------*/
	/*1段目*/
	.product-sp-1{
		padding:  20px 11.25px 60px 11.25px;
		border-width: 0 0 1px 0;
		border-style: solid;
		border-color: #B9C8D0;
		text-align: left;
	}
	.product-sp-1 p{
		margin-top: 10px;
	}
	.product-box-1-img{
		margin-top: 20px;
	}
	.product-box-1-img p{
		text-align: center;
	}
	.product-button{
		float: right;
		padding-top: 10px;
	}
	.product-button p{
		font-size: 18px;
	}
	/*2段目*/
	.product-box-2-img img{
		width: 90%;
	}
	.product-box-2-img p{
		text-align: center;
	}
	/*3段目*/
	.product-box-3-img{
		margin-top: 20px;
	}
	.product-box-3-img img{
		width: 95%;
	}
	
	/*--------------------よくあるご質問--------------------*/
	.qa{
		width: 90%;
	}
	.qa summary{
		font-size: 15px;
	}
	.qa p{
		font-size:14px;
	}
	.question-button p{
		font-size: 18px;
	}
	.demo-request{
		margin-top: 120px;
		width: 70%
	}
	.demo-request p{
		font-size: 18px;
		padding-left: 87px;
	}
	
	
	/*--------------------contact--------------------*/
	.contact{
		display: block;
	}
	.contact-back{
		margin-top: 90px;
	}
	.contact-back p{
		padding: 0 11.25px;
	}
	.nonstop p{
		margin-top: 20px;
		font-size: 22px;
	}
	.contact-button p{
		margin-top: 15px;
	}
	
	/*--------------------フッター--------------------*/
	.footer-1 div{
		padding: 0 11.25px 0 11.25px;
	}
	.footer-tel-box{
		display: block;
	}
	.footer-tel-list:not(:last-child){
		margin-bottom: 19.2px;
	}
	.footer-2 div{
		padding: 0 11.25px 0 11.25px;
	}
	.footer-nav-box{
		flex-wrap: wrap;	
	}
	.copyright{
		padding: 25px 0 20px 0;
	}
}