@charset "UTF-8";

/* ▼▼▼ 事業所紹介
=====================================*/
.title_box{background: url(../img/office/title_bg_pc.jpg)no-repeat top center/cover;}
/* ▼ 共通
--------------------------------------- */
#main section:not(:last-child){
	padding-bottom: 0;
}
/* タイトル背景文字 */
section .boder_title::before{
	color: #F8F8F8;
	font-size: 180px;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	line-height: 1;
	position: absolute;
	top: 20px;
	z-index: -2;
	}
	section:nth-last-of-type(odd) .boder_title::before{
		left: -200px;
	}
	section:nth-last-of-type(even) .boder_title::before{
		right: -200px;
	}
	section .container{
		position: relative;
		z-index: 2;
	}

/* ▼ ナビ
--------------------------------------- */
ul.sub_nav{
	display: flex;
	flex-wrap:wrap;
	}
	ul.sub_nav li{
		width: 32%;
		margin:0 2% 2% 0;
	}
	ul.sub_nav li:nth-child(3n){
		margin-right: 0;
	}
	ul.sub_nav li a{
		display:flex;
		align-items: center;
		justify-content: center;
		height: 60px;
		background: #fff;
		border: 1px solid #000;
		font-size: 18px;
		font-weight: bold;
		position: relative;
	}
	ul.sub_nav li a::after{
		content: "";
		width: 8px;
		height: 8px;
		border-top: 2px solid #7AB5DC;
		border-right: 2px solid #7AB5DC;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		top: 39%;
		right: 15px;
	}

/* ▼ ご挨拶
--------------------------------------- */
#message .boder_title::before{
	content: "MESSAGE";
	}
	/* ライトボックス */
	#cboxContent{
		overflow: visible;
	}
	#cboxOverlay{
		background: rgba(180,180,180,.7);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		opacity: 1!important;
	}
	#cboxLoadedContent{
		margin: 0;
	}
	#cboxTopCenter{
		height: 60px;
	}
	#cboxClose{
		width: 110px;
		height: 50px;
		top: -60px;
		background: url(../img/recruit/icon_close.png)no-repeat center center/contain!important;
	}
	#message h3{
		margin-bottom: 10px;
		font-size: 26px;
		text-align: center;
	}
	#message p{
		margin-bottom: 40px;
		font-size: 18px;
		text-align: center;
	}
/* ▼ 理念
--------------------------------------- */
#philosophy .boder_title::before{
	content: "PHILOSOPHY";
	}
	#philosophy h3{
		margin-bottom: 50px;
		font-size: 30px;
		text-align: center;
	}
	#philosophy .inner{
		margin-bottom: 100px;
	}
	#philosophy .inner:last-child{
		margin-bottom: 0;
	}
	#philosophy .inner .inner_detail {
		max-width: 1040px;
		padding: 0 20px;
		margin: auto;
	}
	#philosophy .inner .flex_box{
		align-items: center;
		margin-bottom: 45px;
	}
	#philosophy .inner .flex_box .photo{
		flex: 2.3;
		margin-right: -16%;
	}
	#philosophy .inner .flex_box .txt{
		flex: 1;
		background: -moz-linear-gradient(-45deg, #255190 0%, #7ab5dc 100%);
		background: -webkit-linear-gradient(-45deg, #255190 0%,#7ab5dc 100%);
		background: linear-gradient(135deg, #255190 0%,#7ab5dc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#255190', endColorstr='#7ab5dc',GradientType=1 );
		padding: 4%;
		color: #fff;
		font-size: 30px;
		position: relative;
	}
	#philosophy .inner .txt::before{
		content: "";
		width: 5px;
		height: 100%;
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
	}

	#philosophy .inner_list .inner:nth-child(odd) .flex_box .photo{
		order: 2;
		margin:0 0 0 -16%;
	}
	#philosophy .inner_list .inner:nth-child(odd) .flex_box .txt{
		display: flex;
		justify-content: flex-end;
	}
	#philosophy .inner_list .inner:nth-child(odd) .flex_box .txt::before{
		left: inherit;
		right: 0;
	}
/* ▼ 事業所概要
--------------------------------------- */
#outline .boder_title::before{
	content: "OUTLINE";
	}
	#outline ul.location li:not(:last-child){
		margin-bottom: 10px;
	}
	#outline ul.location li h3{
		margin-bottom: 5px;
		color: #7AB5DC;
	}
	#outline ul.location li span.map{
		display: inline-block;
		width: 90px;
		height: 24px;
		background: #fff;
		border: 1px solid #000;
		margin-left: 10px;
		border-radius: 50px;
		font-size: 12px;
		font-weight: 500;
		text-align: center;
		line-height: 24px;
	}
/* ▼ 沿革
--------------------------------------- */
#history .boder_title::before{
	content: "HISTORY";
	}
	#history .dl_bg_list dt{
		width: 180px;
	}
	#history .dl_bg_list dl dd {
		width: calc(100% - 180px);
	}
/* ▼ アクセス
--------------------------------------- */
#access .boder_title::before{
	content: "ACCESS";
	}
	#access .inner{
		margin-bottom: 60px;
	}
	#access .inner:last-child{
		margin-bottom: 0;
	}
	#access .g_map iframe{
		width: 100%;
		height: 400px;
		margin-bottom: 20px;
	}
	#access .access_list{
		margin-bottom: 10px;
	}
	#access .access_list li{
		padding-left: 20px;
		position: relative;
	}
	#access .access_list li::before{
		content: "";
		width: 10px;
		height: 10px;
		background: #7AB5DC;
		position: absolute;
		top: 9px;
		left: 0;
	}
	#access span.map{
		display: block;
		width: 130px;
		height: 24px;
		background: #fff;
		border: 1px solid #000;
		border-radius: 50px;
		font-size: 12px;
		font-weight: 500;
		text-align: center;
		line-height: 24px;
	}

/* ▼▼▼ 多言語
===================================== */
#access .boder_title:lang(en)::before{
	display: none;
}

/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px){
	.title_box{background: url(../img/office/title_bg_sp.jpg)no-repeat top center/cover;}
	/* ▼ 共通
	--------------------------------------- */
	/* タイトル背景文字 */
	section .boder_title::before{
		font-size: 60px;
		top: 27px;
		}
		section:nth-last-of-type(odd) .boder_title::before{
			left: -10px;
		}
		section:nth-last-of-type(even) .boder_title::before{
			right: -10px;
		}


	/* ▼ ナビ
	--------------------------------------- */
		ul.sub_nav li,
		ul.sub_nav li:nth-child(3n){
			width: 48%;
			margin: 0 3% 3% 0;
		}
		ul.sub_nav li:nth-child(2n){
			margin-right: 0;
		}
		ul.sub_nav li a{
			height: 50px;
			font-size: 14px;
		}
		ul.sub_nav li a::after{
			width: 6px;
			height: 6px;
		}

	/* ▼ ご挨拶
	--------------------------------------- */
		#message .movie{
			margin-bottom: 25px;
		}
		#message h3{
			margin-bottom: 10px;
			font-size: 18px;
		}
		#message p{
			margin-bottom: 20px;
			font-size: 14px;
		}
	/* ▼ 理念
	--------------------------------------- */
		#philosophy h3{
			margin-bottom: 30px;
			font-size: 20px;
		}
		#philosophy .inner{
			margin-bottom: 40px;
		}
		#philosophy .inner .flex_box{
			margin-bottom: 20px;
		}
		#philosophy .inner .flex_box .txt{
			width: 93%;
			margin: -15px 0 0 auto;
			font-size: 18px;
		}
		#philosophy .inner .txt::before{
			width: 3px;
		}
		#philosophy .inner_list .inner:nth-child(odd) .flex_box .photo{
			width: 95%;
			margin: 0 0 0 auto;
		}
		#philosophy .inner_list .inner:nth-child(odd) .flex_box .txt{
			justify-content: flex-start;
			margin-left: 0;
		}

	/* ▼ 事業所概要
	--------------------------------------- */
	#outline .dl_bg_list dl dt{
		font-weight: bold;
	}
	#outline ul.location li span.map{
		display: block;
		margin: 5px 0;
	}
	/* ▼ 沿革
	--------------------------------------- */

	/* ▼ アクセス
	--------------------------------------- */
		#access .inner{
			margin-bottom: 40px;
		}
		#access .g_map iframe{
			height: 220px;
		}

	/* ▼▼▼ 多言語
	===================================== */
	#philosophy .inner_list .inner:nth-child(1) .flex_box .txt:lang(en){
		max-width: 250px;
	}

}