@charset "UTF-8";

/* ------------------------------
共通
------------------------------ */

/* ---------------
枠
--------------- */
.inner {
	width: 90%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 80px 0;
}

/*ページ区切り前・最後*/
.company .inner,
.inner:has(.list_flow),
.recruit .inner,
.faq .inner:last-of-type,
.contact .inner {
	padding-bottom: 160px;
}

@media screen and (max-width:767px){
	.inner {
		width: 100%;
		padding: 40px 15px;
	}
	
	/*ページ区切り前・最後*/
	.company .inner,
	.inner:has(.list_flow),
	.recruit .inner,
	.faq .inner:last-of-type,
	.contact .inner {
		padding-bottom: 80px;
	}
}

/* ---------------
背景色
--------------- */
.bg_gray {
	background: #F4F4F3;
}

.bg_green {
	background: #118a33;
	color: #fff;
}

.bg_lightgreen {
	background: #f2f6ea;
}

/* ---------------
下線付きタイトル
--------------- */
.title_underline {
	font-size: 1.8em;
	text-align: center;
	line-height: 1.4;
}

.title_underline::after {
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	margin: 1em auto 2em;
	background: #118a33;
}

@media screen and (max-width:767px){
	.title_underline {
		font-size: 1.6em;
	}

	.title_underline::after {
		height: 3px;
	}
}

/* ---------------
ページ区切り
--------------- */
.title_page {
	padding: 1em 0;
	font-size: 2em;
	background: url("../images/bg_title_page.jpg") center / cover no-repeat;
	text-align: center;
	color: #fff;
}

@media screen and (max-width:767px){
	.title_page {
		font-size: 1.6em;
	}
}

/* ---------------
画像テキスト横並び
--------------- */
.imgtext {
	text-align: justify;
	text-justify: inter-ideograph;
}

.imgtext img {
	display: block;
}

.imgtext > div > p + p {
	margin-top: 1em;
}

@media (min-width:768px){
	.imgtext {
		display: flex;
		gap: 30px;
	}
	
	.imgtext > p {
		max-width: 44%;
	}

	.imgtext img {
		width: 450px;
	}

	.imgtext > div {
		flex: 1;
	}
}

@media screen and (max-width:767px){
	.imgtext > div {
		margin-top: 30px;
	}
}

/* ---------------
ボタン
--------------- */
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500px;
	max-width: 100%;
	margin: 0 auto;
	padding: 8px 15px;	
	background: #000;
	border-radius: 10px;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
}

.btn::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin-left: 10px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

@media screen and (max-width:767px){
	.btn {
		width: 100%;
	}
}

/* ---------------
アコーディオン
--------------- */
.acc_header {
	position: relative;
	padding: 10px 45px 10px 20px;
	background: #f6f6f6;
	cursor: pointer;
}

.acc_header::before,
.acc_header::after {
	content: "";
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	width: 12px;
	height: 2px;
	margin: auto;
	background: #151E2F;
}
.acc_header::after {
	transform: rotate(-90deg);
	transition: transform 0.3s;
}

.acc_header.active::after {
	transform: rotate(0deg);
}

/*必須*/
.acc_content {
	display: none;
}

/* ---------------
テーブル
--------------- */
.table {
	text-align: justify;
	text-justify: inter-ideograph;
}

.table dt {
	font-weight: bold;
	text-align: center;
}

@media (min-width:768px){
	.table {
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #eee;
	}
	
	.table dt,
	.table dd {
		padding: 20px;
		border-bottom: 1px solid #eee;
	}
	
	.table dt {
		width: 25%;
	}
	
	.table dd {
		width: 75%;
	}
}

@media screen and (max-width:767px){
	.table {
		border-top: 1px solid #ddd;
		text-align: center;
	}
	
	.table dt,
	.table dd {
		padding: 10px;
	}
	
	.table dt {
		background: #f7f7f7;
	}
	
	.table dd {
		border-bottom: 1px solid #ddd;
	}
}

/* ---------------
電話番号
--------------- */
.tel {
	font-weight: bold;
	color: #118a33;
	text-decoration: underline;
}

@media (min-width:768px){
	.tel:hover {
		text-decoration: none;
	}
}

/* ------------------------------
ヘッダー
------------------------------ */
.header {
	border-top: 3px solid #118a33;
}

.header .inner {
	padding: 0;
}

.header_top {
	display: flex;	
}

.header img {
	display: block;
}

.header .logo img{
	height: 36px;
}

.header .tel img{
	height: 56px;
}

@media (min-width:768px){
	.header_top {
		justify-content: space-between;
		margin-top: 24px;
	}
}

@media screen and (max-width:767px){
	.header_top {
		align-items: center;
		height: 53px;
		padding-left: 15px;
	}
	
	.header .logo img {
		height: 20px;
	}
}

/* ------------------------------
トップ（メイン画像）
------------------------------ */
.top img {
	display: block;
	width: 100%;
}

/* ------------------------------
イープロ警備について
------------------------------ */
@media (min-width:768px){
	.about .imgtext {
		flex-direction: row-reverse;
	}
}

/* ------------------------------
採用担当者より
------------------------------ */
.recruiter img {
	width: auto;
}

/*飾り付きタイトル*/
.title_deco {
	position: relative;
	display: flex;
	margin-bottom: 1em;
	padding-left: 1.2em;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.4;
}

.title_deco::before {	
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	display: block;
	width: 0.33em;
	height: 0.33em;
	background: #82d6a0;
	box-shadow: 0 0.5em 0 #68c12e, 0.5em 0 0 #abdb57, 0.5em 0.5em 0 #96ced0;
}

/*色付きタイトル*/
.title_color {
	margin-bottom: 1em;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.5;
	color: #118a33;
}

/*マーカー*/
.marker {
	font-weight: bold;	
	background: linear-gradient(transparent 70%, #fff11c 0) repeat scroll 0 0 rgba(255, 255, 255, 0);
}

@media (min-width:768px){
	.recruiter .imgtext {
		flex-direction: row-reverse;
		gap: 50px;
	}
}

@media screen and (max-width:767px){
	.recruiter img {
		margin: 0 auto;
	}

	.title_deco,
	.title_color {
		font-size: 1.2em;
	}
}

/* ------------------------------
メリット
------------------------------ */
.merit > .inner {
	padding-bottom: 0;
}

.merit .imgtext img {
	width: auto;
}

.title_frame {
	width: -moz-fit-content;
	width: fit-content;
	margin-bottom: 1em;
	padding: 0 1em;
	background: #fff;
	border: 3px solid #333;
	border-radius: 2em;
	font-size: 1.5em;
	font-weight: bold;
}

@media (min-width:768px){
	.merit .bg_gray .imgtext {
		flex-direction: row-reverse;
	}
}

@media screen and (max-width:767px){
	.merit .imgtext {
		display: flex;
		flex-direction: column;
	}
	
	.merit .imgtext > * {
		display: contents;
	}
	
	.title_frame {
		order: -1;
		width: 100%;
		padding: 0.2em 0.7em;
		font-size: 1.3em;
		text-align: center;
		line-height: 1.4;
	}
	
	.title_frame + p {
		margin-top: 1em;
	}
	
	.merit .imgtext img {
		margin: 0 auto;
	}
}

/* ------------------------------
サイト案内
------------------------------ */
.guide_list {
	display: flex;
}

.guide_list li {
	width: 100%;
}

.guide_list a {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
}

.guide_list img {
	display: block;
	margin: 0 auto;
}

@media screen and (max-width:767px){
	.guide_list {
		flex-direction: column;
		gap: 20px;
	}
	
	.guide_list img {
		width: 200px;
	}
}

/* ------------------------------
会社概要
------------------------------ */
.company {
	border-top: 1px solid #ccc;
}

/*警備業者*/
.security_company {
	margin-top: 80px;
}

.security_company img {
	display: block;
	margin: 0 auto;
}

/*ボタン*/
.company .btn {
	margin-top: 80px;
}

@media screen and (max-width:767px){
	.security_company {
		margin-top: 40px;
	}

	.company .btn {
		margin-top: 40px;
	}
}

/* ------------------------------
業務紹介
------------------------------ */
@media (min-width:768px){
	.service .bg_lightgreen .imgtext {
		flex-direction: row-reverse;
	}
}

/* ---------------
一日の流れ
--------------- */
.list_flow {
	margin-top: 50px;
	margin-left: 6px;
	border-left: 2px dotted #ccc;
	text-align: justify;
	text-justify: inter-ideograph;
}

.list_flow dt,
.list_flow dd {
	padding-left: 30px;
}

.list_flow dt {
	position: relative;
	display: flex;
	gap: 1em;
	margin-bottom: 0.5em;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.4;
}

.list_flow dt::before {
	content: "";
	position: absolute;
	left: -6px;
	top: calc((1.4em / 2) - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #8bc12e;
}

.list_flow dt::after {
	content: "";
	position: absolute;
	top: calc((1.4em / 2) - 0.5px);
	left: 4px;
	width: 18px;
	height: 1px;
	background: #666;
}

.list_flow dt span:first-of-type {
	color: #118a33;
}

.list_flow dt span:last-of-type {
	flex: 1;
	color: #e6700b;
}

.list_flow dd:not(:last-of-type) {
	margin-bottom: 2em;
}

/* ------------------------------
募集要項
------------------------------ */

/* ---------------
タイトル
--------------- */
.title_recruit {
	margin-bottom: 30px;
	padding: 4px 8px;
	font-size: 1.1em;
	font-weight: bold;
	background: #e2ead3;
}

.title_recruit::before {
	content: "▲";
	display: inline-block;
	margin-right: 8px;
	transform: rotate(90deg) scale(0.75);
	font-weight: bold;
	color: #118a33;
}

.acc_content .title_recruit {
	margin-top: 60px;
}

@media screen and (max-width:767px){
	.title_recruit {
		margin-bottom: 20px;
		padding: 0.3em;
		font-size: 1.2em;
	}

	.acc_content .title_recruit {
		margin-top: 40px;
	}
}

/* ---------------
テーブル
--------------- */
@media (min-width:768px){
	.table_recruit {
		border-top: 1px solid #ccc;
	}

	.table_recruit dt,
	.table_recruit dd {
		border-bottom: 1px dotted #ccc;
	}

	.table_recruit dt:last-of-type,
	.table_recruit dd:last-of-type {
		border-bottom: 1px solid #ccc;
	}

	.table_recruit dt {
		background: #f7f7f7;
	}
}

/* ---------------
箇条書きリスト
--------------- */
.list_recruit li {
	position: relative;
	padding-left: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
}

.list_recruit li::before {
	content: "";
	position: absolute;
	top: calc((1.8em / 2) - 4px);
	left: 3px;
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background-color: #e2ead3;
}

/* ---------------
詳細を見るボタン
--------------- */
.recruit .acc_header {
	width: 500px;
	max-width: 100%;
	margin: 30px auto 0;
	padding: 10px 45px;
	background: #000;
	border-radius: 10px;
	font-size: 1.1em;
    font-weight: bold;
	color: #fff;
	text-align: center;
}

.recruit .acc_header::before,
.recruit .acc_header::after {
	background: #fff;
}

.recruit .acc_header span::after {
	content: "を開く";
}

.recruit .acc_header.active span::after {
	content: "を閉じる";
}

@media (min-width:768px){
	.recruit .acc_header:hover {
		opacity: 0.8;
		transition: all .3s;		
	}
}

@media screen and (max-width:767px){
	.recruit .acc_header {
		width: 100%;
	}
}

/*------------------------------
よくあるご質問
------------------------------*/
.faq dl {
	text-align: justify;
	text-justify: inter-ideograph;
}

.faq .acc_header {
    padding: 15px 60px;
	background: url(../images/question.svg) 15px 15px / auto 30px no-repeat #f6f6f6;
}

.faq .acc_content + .acc_header {
	margin-top: 20px;
}

.faq .acc_content {
    padding: 15px 15px 15px 60px;
	background: url(../images/answer.svg) 15px 15px / auto 30px no-repeat;
}

/*------------------------------
お問い合わせ
------------------------------*/
.contact {
	text-align: center;
}

.contact_text {
	margin-top: 60px;
}

.contact_box {
	margin-top: 20px;
	padding: 20px;
	border: 1px solid #999;
}

@media screen and (max-width:767px){
	.contact_text {
		text-align: justify;
		text-justify: inter-ideograph;
	}
}

/* ------------------------------
フッター
------------------------------ */
.footer {
	background: #0f7b2e;
	color: #fff;
}

.footer .inner {
	padding: 30px 0;
}

.footer_link li + li {
	margin-top: 5px;
}

.footer_link a {
	display: flex;
	align-items: center;
	width: 300px;
	max-width: 100%;
	padding: 6px 10px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}

.footer_link a::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

@media (min-width:768px){
	.footer_link a:hover {
		background: #6a8a32;
	}
}

@media screen and (max-width:767px){
	.footer .inner {
		padding: 30px 15px;
	}
}

/* ---------------
コピーライト
--------------- */
.copy {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80px;
	padding: 0 15px;
	font-size: 16px;
	background: #118a33;
	color: #fff;
}

@media screen and (max-width:767px){
	.copy {
		margin-bottom: 52px;
		padding-right: 80px;
		font-size: 13px;
	}
}

/* ---------------
ページトップへ戻るボタン
--------------- */
.totop{
	position: fixed;
	right: 15px;
	bottom: 15px;
	display: none;
}

.totop a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,.8);
	border-radius: 25px;
}

.totop a:before {
	position: absolute;
	display: block;
	content: '';
	top: 50%;
	left: 50%;
	margin: -4px 0 0 -6px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);
}

@media screen and (max-width:767px){
	.totop{
		bottom: 67px;
	}
}

/* ---------------
お問い合わせボタン（SPのみ）
--------------- */
.btn_fixed_contact a {
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 52px;
	padding: 10px;	
	background: #f18e01;
	color: #fff;
	font-weight: bold;
}