@charset "utf-8";
/*
Theme Name: 豊橋防災設備
Author: Kotaro Saito
Description:  豊橋防災設備のテーマ
version: 1.0.0
*/

/*common
-----------------------------------------------------------------------------------------*/
html,body{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	color: rgba(69, 69, 69, 1);
	text-align: left;
	background-color: rgba(229, 229, 229, 1);
}

.font-serif{
	font-family: "Noto Serif JP", serif;
}

.font-oswald{
	font-family: "Oswald", sans-serif;
}


@media screen and (min-width:768px) {
.sp{
	display: none;
}
}

@media screen and (max-width:767px) {
.pc{
	display: none;
}

html,body{
	font-size: 14px;
}
}


/*header
-----------------------------------------------------------------------------------------*/
.header-flex{
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background-color: rgba(215, 215, 215, 1);
}

.header-logo {
	width: 200px;
}

.header-contact-white{
	color: rgba(255, 255, 255, 1);
	font-size: 1.2rem;
	background-color: rgba(249, 101, 11, 1);
	padding: 20px;
	margin-right: 120px;
	gap: 20px;
}

.header-contact-white:hover {
  transform: scale(1.1,1.1);
}

.header-contact-img{
	width: 40px;
	margin: 0;
}

button.drawer-hamburger{
	background-color: rgba(170, 170, 170, 1)!important;
	top: 20px;
	width: 35px;
}

span.drawer-hamburger-icon, span.drawer-hamburger-icon:after, span.drawer-hamburger-icon:before {
	background-color: rgba(255, 255, 255, 1);
	height: 3px;
	width: 35px;
}

.drawer--right .drawer-hamburger{
	right: 30px !important;
	z-index: 1000000;
}

ul.drawer-menu {
	padding: 80px 100px 80px 80px;
}

button.drawer-hamburger:hover{
	background-color: transparent !important;
	z-index: 999;
}

.drawer--right.drawer-open button.drawer-hamburger{
	right: 0;
}

nav.drawer-nav{
	background-color: rgba(132, 132, 132, 1);
	width: 500px;
	height: auto;
}

.drawer--right nav.drawer-nav{
	right: 0;
	transform: translateX(100%);
	transition: 0.5s;
	
}

.drawer--right.drawer-open nav.drawer-nav{
	transform: translateX(0%);
}
.menu-item-link{
	color: rgba(255, 255, 255, 1);
	text-align: left;
	font-size: 1.2rem;
	font-weight: 700;
	padding: 10px 0;
	display: block;
}

a.hamburger-link{
	border-bottom: 1px solid rgba(255, 255, 255, 1);
}

.hamburger-link-up{
	margin-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 1);

}

.drawer-menu-link{
	color: rgba(255, 255, 255, 1);
	text-align: left;
	padding-bottom: 10px;
}

.header-contact-orange:hover {
  transform: scale(1.1,1.1);
}

.drawer-menu a:hover{
	color: rgba(249, 101, 11, 1);
}

.drawer-menu-link{
	vertical-align: middle;
}

div.hamburger-we{
	font-size: 1.2rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 1);
	text-align: left;
	padding: 10px 0 0;
}

.hamburger-mini{
	font-size: 1.5rem;
	margin-right: 10px;
}

nav.drawer-nav{
	z-index: 900;
}

.header-contact-orange{
	background-color: rgba(255, 255, 255, 1);
	color: rgba(249, 101, 11, 1);
	padding: 20px;
	border-radius: 50px;
	font-weight: 700;
	margin: 50px auto 0;
	gap: 15px;
	text-align: center;
	width: 250px;
	justify-content: center;
}



@media screen and (max-width:767px) {
	.header-flex{
		padding: 10px 15px;
	}
	nav.drawer-nav {
		width: 100%;
	}

	.header-contact-white{
		display: none;
	}

	button.drawer-hamburger {
		top: 20px;
		height: 9px;
	}

	.drawer--right .drawer-hamburger {
		right: 15px !important;
	}

	.drawer--right.drawer-open button.drawer-hamburger {
		top: 10px;
	}

}

/*footer
-----------------------------------------------------------------------------------------*/
.footer-flex{
	width: 60%;
	margin: auto;
	gap: 40px;
	align-items: center;
}

.footer-logo{
	width: 50%;
}


.footer-add{
	text-align: left;
}

.footer-link{
	gap: 20px;
	justify-content: center;
	margin: 50px 0;
}

.footer-link a{
	color: rgba(69, 69, 69, 1);
	padding-left: 20px;
	border-left: 1px dashed rgba(69, 69, 69, 1);
}

.footer-link a:hover{
	color: rgba(249, 101, 11, 1);
}

.footer-link a:first-child{
	border: none;
}

.copy-right{
	padding: 60px 0 40px;
	text-align: center;
}

@media screen and (max-width:1023px) {
	.footer-flex{
		width: 100%;
	}
	.footer-link{
		display: none;
	}

	.copy-right{
		padding: 50px 0 20px;
	}

	.footer-add{
		margin-bottom: 20px;
}
}

@media screen and (max-width:767px) {
	.footer-flex{
		gap: 30px;
	}

	.footer-logo{
		width: 100%;
	}
}

/*実績
-----------------------------------------------------------------------------------------*/
.home-category-flex{
	gap: 50px;
}

.category{
	color: rgba(255, 255, 255, 1);
	font-size: 0.9rem;
	width: 135px;
	padding: 6px;
	text-align: center;
	display: block;
}

.home-category-all{
	background-color: rgba(69, 69, 69, 1);
}

.cat-maintenance{
	background-color: rgba(57, 169, 179, 1);
}

.cat-low-voltage{
	background-color: rgba(179, 177, 57, 1);
}

.cat-fire-equipment{
	background-color: rgba(96, 180, 57, 1);
}

.home-flex{
	gap: 100px 50px;
	margin-top: 100px;
}

.home-list{
	width: calc((100% - 50px*2)/3);
}

.home-img img{
	object-fit: cover;
	height: 250px;
}

.home-ymd{
	font-size: 0.8rem;
	color: rgba(69, 69, 69, 1);
}

.home-title{
	font-weight: 700;
	color: rgba(69, 69, 69, 1);
	margin: 10px 0 20px;

}

.home-pagenavi{
	margin: 100px auto 0;
	width: fit-content;
}

.wp-pagenavi span.current {
	background-color: rgba(69, 69, 69, 1);
	color: rgba(255, 255, 255, 1);
	padding: 3px 10px;
	border: none;
}

.wp-pagenavi a{
	border: none;
	color: rgba(69, 69, 69, 1);
	margin: 0 10px;
}
@media screen and (max-width:1023px) {
	.home-flex {
		gap: 70px 30px;
	}

	.home-list {
		width: calc((100% - 30px * 2) / 3);
	}

	.home-category-flex {
		gap: 30px;
	}
}

@media screen and (max-width:767px) {
	.home-flex {
		gap: 30px;
		margin-top: 30px;
	}

	.home-list {
		width: 100%;
	}

	.home-category-flex {
		gap: 20px 30px;
	}

	.home-pagenavi {
		margin: 40px auto 0;
	}

	.home-ymd{
		margin-top: 5px;
	}

	.home-img img{
		height: 200px;
	}


}


/*single実績
-----------------------------------------------------------------------------------------*/
.single-title{
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 30px;
}

.single-tagu{
	margin: 30px 0 50px;
}

.single-img img{
	height: 600px;
	object-fit: cover;
}

.single-works-flex{
	border-bottom: 1px solid rgba(69, 69, 69, 1);
	padding: 30px;
	font-weight: 700;
}

.acf-works-flex{
	margin-top: 100px;
	align-items: flex-start;
}

.acf-blog-title{
	font-size: 2rem;
	font-weight: 700;
	margin: 50px 0 20px;
	padding-left: 10px;
	border-left: 10px solid rgba(249, 101, 11, 1);
}

.acf-works-title{
	margin-top: 0;
	width: 300px;
}

.single-works-right{
	width: calc(100% - 300px);
	border-top: 1px solid rgba(69, 69, 69, 1);
}

.single-works-title{
	width: 200px;
}

.single-works-thing{
	width: calc(100% - 200px);
}

.works-story-top{
	margin-top: 100px;
}

.works-story-title{
	margin: 0 0 30px;
}

.works-befoer-flex{
	margin-top: 100px;
	gap: 60px;
}

.works-befoer-box{
	width: 45%;
}

.works-befoer-img{
	height: 350px;
}

.works-befoer-text{
	margin-top: 20px;
}

.works-point-top{
	margin-top: 100px;
}

.works-point-flex{
	line-height: 2;
}

.works-point-title{
	font-weight: 700;
}

.single-link-flex{
	margin: 100px auto 0;
	width: fit-content;
	align-items: center;
}

.single-arrow{
	width: 30px;
}

.single-link{
	background-color: rgba(249, 101, 11, 1);
	color: rgba(255, 255, 255, 1);
	width: 200px;
	font-size: 1.2rem;
	padding: 10px;
	text-align: center;
	border-radius: 30px;
	margin: 0 30px;
}

@media screen and (max-width:1200px) {
	.single-works-title{
		width: 130px;
	}

	.single-works-thing{
		width: calc(100% - 130px);
	}

	.acf-works-title {
		width: 150px;
	}

	.single-works-right {
		width: calc(100% - 150px);
	}

	.works-befoer-img {
		height: 300px;
	}
}

@media screen and (max-width:1023px) {
		.single-works-title{
		width: 110px;
	}

	.single-works-thing{
		width: calc(100% - 110px);
	}

	.acf-works-title {
		width: 120px;
	}

	.single-works-right {
		width: calc(100% - 120px);
	}

	.works-befoer-img {
		height: 250px;
	}

	.single-works-flex{
		padding: 30px 0;
	}


}


@media screen and (max-width:767px) {
	.single-title {
		margin-bottom: 10px;
	}
	.single-tagu {
		margin: 10px 0 20px;
	}
	
	.single-img img {
		height: 300px;
	}

	.acf-works-flex{
		margin-top: 0px;
	}

	.single-works-right{
		width: 100%;
	}

	.single-works-flex{
		padding: 20px 0;
	}

	.single-works-title {
		width: 85px;
	}

	.single-works-thing {
		width: calc(100% - 85px);
	}

	.works-story-top{
		margin-top: 0;
	}

	.works-story-title{
	margin: 0 0 20px;
	}

	.works-befoer-flex{
		margin: 0;
		gap: 0;
	}

	.works-befoer-box{
		width: 100%;
	}

	.works-point-top{
		margin: 0;
	}
}



/*ブログ
-----------------------------------------------------------------------------------------*/
.blog-category-list{
	font-size: 0.9rem;
	width: 120px;
	padding: 6px;
	text-align: center;
	display: block;
	color: rgba(255, 255, 255, 1);
}

.blog-category-all{
	width: 120px;
}

.category-column{
	background-color: rgba(57, 169, 179, 1);
}

.category-lunch{
	background-color: rgba(179, 177, 57, 1);
}

.category-news{
	background-color: rgba(96, 180, 57, 1);
}

.blog-category-flex{
	gap: 30px;
	margin-bottom: 100px;
}

.blog-link{
	gap: 100px;
	color: rgba(69, 69, 69, 1);
	margin-bottom: 100px;
}

.blog-img{
	width: 30%;
}

.blog-img img{
	object-fit: cover;
	height: 250px;
}

.blog-text{
	width: 60%;
}

.blog-flex{
	align-items: center;
	gap: 30px;
	margin-bottom: 20px;
}

.blog-title{
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 20px;
}

.blog-pagenavi{
	margin: 150px auto 0;
	width: fit-content;
}

@media screen and (max-width:1200px) {
	.blog-link {
		gap: 30px;
	}

	.blog-text {
		width: 65%;
	}
}

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

@media screen and (max-width:767px) {
	.blog-category-flex {
		gap: 20px 30px;
		margin-bottom: 40px;
	}

	.blog-img{
		width: 100%;
	}

	.blog-link {
		gap: 20px;
		margin-bottom: 40px;
	}

	.blog-text{
		width: 100%;
	}

	.blog-pagenavi{
		margin-top: 40px;
	}
}



/*singleブログ
-----------------------------------------------------------------------------------------*/
.blog-single-ymd{
	color: rgba(249, 101, 11, 1);
}

.blog-single-content{
	margin-top: 50px;
}

.acf-blog-img{
	width: 50%;
	object-fit: cover;
	margin: 20px 0 50px;
}

.blog-column-flex{
	align-items: flex-start;
}

.blog-column-text{
	line-height: 2;
	width: calc(100% - 32px);
}

.blog-column-img{
	width: 22px;
	margin: 5px 10px 0 0;
	object-fit: contain;
}

.blog-line{
	line-height: 2;
}

.lunch-map{
	margin-top: 30px;
}

.blog-article{
	font-size: 16px;
	border-left: 5px solid rgba(249, 101, 11, 1);

}

.blog-single-flex{
	gap: 50px;
}

.blog-single-list{
	width: calc((100% - 50px*2)/3);
}

.blog-single-img img{
	object-fit: cover;
	height: 250px;
}

.blog-category-lunch{
	font-weight: 700;
}

@media screen and (max-width:767px) {
	.blog-single-content {
		margin-top: 20px;
	}
	
	.acf-blog-img {
		width: 100%;
		margin: 20px 0 40px;
		height: 200px;
	}
	
	.acf-blog-title {
		font-size: 1.9rem;
		margin-top: 40px;
	}
	
	.blog-single-list{
		width: 100%;
	}

	.single-link {
		margin: 0 25px;
	}

	.single-link-flex{
		margin-top: 40px;
	}

	.blog-single-img img{
		height: 200px;
	}

	.blog-single-flex{
		gap: 20px;
	}

}


/*404
-----------------------------------------------------------------------------------------*/
div.error-message{
	font-size: 150%;
}

@media screen and (max-width:767px) {
	div.error-message{
		font-size: 120%;
	}


}