@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#philosophy {
	width: 100%;
	border-top: solid 1px #DEDEDE;
}
	.philosophy--topimage {
		width: 100%;
		height: 500px;
		background-image: url(../image/company/philosophy-topimage.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.philosophy--contents {
		width: 90%;
		max-width: 1000px;
		padding: 60px 0px 180px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
		.contents--main_container {
			width: 65%;
		}
			.section-heading {
				width: 100%;
				margin: auto auto 80px 0px;
				font-size: 14px;
				font-weight: 500;
				line-height: 1.0;
				letter-spacing: 0.0em;
				position: relative;
			}
				.section-heading .section-heading_en {
					display: block;
					margin-top: 15px;
					font-family: din-condensed, sans-serif;
					font-size: 3.125rem;
				    font-weight: 600;
				    color: #DF610F;
				    letter-spacing: 0.1em;
				}
				.section-heading:after {
					content: '';
					display: block;
					width: 50px;
					height: 2px;
					background-color: #DF610F;
					position: absolute;
					bottom: -25px;
					left: 0;
				}

			.philosophy-heading {
				width: 100%;
				margin-bottom: 58px;
				font-size: 50px;
				font-weight: 700;
				line-height: 1.3;
				letter-spacing: 0.05em;
				color: #333333;
			}
			.philosophy-txt {
				width: 100%;
				margin-bottom: 50px;
				font-size: 16px;
				line-height: 2.1;
				letter-spacing: 0.35em;
				text-align: justify;
				color: #333333;
			}
		

		.contents--sidebar {
			width: 27%;
		}
			.sidebar-heading {
				width: 100%;
				padding-bottom: 18px;
				margin-bottom: 15px;
				border-bottom: solid 1px #DEDEDE;
				font-size: 26px;
				font-weight: 700;
				line-height: 1.0;
				letter-spacing: 0.06em;
				position: relative;
			}
			.sidebar-heading:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -1px;
				left: 0;
			}
			.sidebar-cp_cat-list {
				width: 100%;
				margin-bottom: 80px !important;
				position: relative;	
			}
			.sidebar-cp_cat-list:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -40px;
				left: 0;
			}
				.cp_cat-item {
					width: 100%;
					margin-bottom: 5px;
					font-size: 18px;
					font-weight: 400;
					position: relative;
				}
				.cp_cat-item:last-of-type {
					margin-bottom: 0px;
				}
				.cp_cat-item.cp_cat-item_active {
					padding-left: 20px;
					font-weight: 700;
				}
				.cp_cat-item.cp_cat-item_active:before {
					content: '';
					display: block;
					width: 3px;
					height: 23px;
					background-color: #DF610F;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0%, -50%);
					-webkit-transform: translate(0%, -50%);
				}
					.cp_cat-item a {
						display: block;
						padding: 8px 0px;
						color: #000000;
						transition: .2s;
						-webkit-transition: .2s;
						position: relative;
					}
					.cp_cat-item a:hover {
						color: #DF610F;
					}
					.cp_cat-item span {
						display: block;
						padding: 8px 0px;
						position: relative;
					}
					.cp_cat-arrow {
						width: 20px;
						height: auto;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0%, -50%);
						-webkit-transform: translate(0%, -50%);
						pointer-events: none;
						transition: .1s;
						-webkit-transition: .1s;
					}
					.arrow_noactive {
						opacity: 1.0;
					}
					.cp_cat-item a:hover .arrow_noactive {
						opacity: 0.0;
					}
					.arrow_active {
						opacity: 0.0;
					}
					.cp_cat-item a:hover .arrow_active {
						opacity: 1.0;
					}

			.sidebar-video_message {
				width: 100%;
				margin-bottom: 90px;
				position: relative;
			}
			.sidebar-video_message:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -50px;
				left: 0;
			}
				.video_message-btn {
					display: block;
					width: 100%;
					color: #000000;
					transition: .1s;
					-webkit-transition: .1s;
				}
				.video_message-btn:hover {
					color: #DF610F;
				}
					.video_message-image {
						width: 100%;
						height: auto;
						margin-bottom: 5px;
					}
						.video_message-image img {
							width: 100%;
							height: auto;
						}

					.video_message-title {
						width: 100%;
						height: 45px;
						margin-bottom: 10px;
						border-bottom: solid 1px #DEDEDE;
						font-size: 18px;
						font-weight: 700;
						line-height: 45px;
					}
					.video_message-txt {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						height: 24px;
						font-size: 12px;
						line-height: 24px;
					}
						.video_message-txt img {
							width: 24px;
							height: auto;
							margin-left: 12px;
						}

			.sidebar-recruitment {
				width: 100%;
			}
				.recruitment-heading {
					width: 100%;
					margin-bottom: 15px;
					font-family: din-condensed, sans-serif;
					font-size: 32px;
					text-align: left;
					color: #DF610F;
					line-height: 1.0;
					letter-spacing: 0.06em;
					text-indent: 0.06em;
				}
				.recruitment-container {
					width: 100%;
				}
					.recruitment-btn {
						display: block;
						width: 100%;
						height: 60px;
						padding-left: 10px;
						font-size: 16px;
						font-weight: 700;
						text-align: left;
						line-height: 60px;
						letter-spacing: 0.06em;
						color: #ffffff;
						position: relative;
					}
					.recruitment-btn-contact {
						margin-bottom: 3px;
						background-color: #DF610F;
					}
					.recruitment-btn-essential_point {
						background-color: #000000;
					}
						.recruitment-btn-arrow {
							width: 20px;
							height: auto;
							position: absolute;
							top: 50%;
							right: 13px;
							transform: translate(0%, -50%);
							-webkit-transform: translate(0%, -50%);
							transition: .1s;
							-webkit-transition: .1s;
						}
						.recruitment-btn:hover > .recruitment-btn-arrow {
							right: 10px;
						}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
#philosophy {
	width: 100%;
	border-top: solid 1px #DEDEDE;
}
	.philosophy--topimage {
		width: 100%;
		height: 500px;
		background-image: url(../image/company/philosophy-topimage.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.philosophy--contents {
		width: 90%;
		padding: 50px 0px 0px;
		margin: auto auto;
		position: relative;
	}
		.contents--main_container {
			width: 100%;
			padding: 0px 0px 80px;
		}
			.section-heading {
				width: 100%;
				margin: auto auto 55px;
				font-size: 14px;
				font-weight: 500;
				line-height: 1.0;
				letter-spacing: 0.0em;
				text-align: left;
				position: relative;
			}
				.section-heading .section-heading_en {
					display: block;
					margin-top: 15px;
					font-family: din-condensed, sans-serif;
					font-size: 2.1rem;
				    font-weight: bold;
				    color: #DF610F;
				    letter-spacing: 0.1em;
				}
				.section-heading:after {
					content: '';
					display: block;
					width: 50px;
					height: 2px;
					background-color: #DF610F;
					position: absolute;
					bottom: -20px;
					left: 0;
				}

			.philosophy-heading {
				width: 100%;
				margin-bottom: 10px;
				font-size: 38px;
				font-weight: 700;
				letter-spacing: 0.05em;
				color: #333333;
			}
			.philosophy-txt {
				width: 100%;
				font-size: 14px;
				line-height: 1.8;
				text-align: justify;
				color: #333333;
			}

		.contents--sidebar {
			display: none;
			width: 100%;
		}
			.sidebar-heading {
				width: 100%;
				padding-bottom: 18px;
				margin-bottom: 15px;
				border-bottom: solid 1px #DEDEDE;
				font-size: 26px;
				font-weight: 700;
				line-height: 1.0;
				letter-spacing: 0.06em;
				position: relative;
			}
			.sidebar-heading:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -1px;
				left: 0;
			}
			.sidebar-cp_cat-list {
				width: 100%;
				margin-bottom: 80px !important;
				position: relative;	
			}
			.sidebar-cp_cat-list:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -40px;
				left: 0;
			}
				.cp_cat-item {
					width: 100%;
					margin-bottom: 5px;
					font-size: 18px;
					font-weight: 400;
					position: relative;
				}
				.cp_cat-item:last-of-type {
					margin-bottom: 0px;
				}
				.cp_cat-item.cp_cat-item_active {
					padding-left: 20px;
					font-weight: 700;
				}
				.cp_cat-item.cp_cat-item_active:before {
					content: '';
					display: block;
					width: 3px;
					height: 23px;
					background-color: #DF610F;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0%, -50%);
					-webkit-transform: translate(0%, -50%);
				}
					.cp_cat-item a {
						display: block;
						padding: 8px 0px;
						color: #000000;
						transition: .2s;
						-webkit-transition: .2s;
						position: relative;
					}
					.cp_cat-item span {
						display: block;
						padding: 8px 0px;
						position: relative;
					}
					.cp_cat-arrow {
						width: 20px;
						height: auto;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0%, -50%);
						-webkit-transform: translate(0%, -50%);
						pointer-events: none;
						transition: .1s;
						-webkit-transition: .1s;
					}
					.arrow_noactive {
						opacity: 0.0;
					}
					.arrow_active {
						opacity: 1.0;
					}

			.sidebar-video_message {
				width: 100%;
				margin-bottom: 90px;
				position: relative;
			}
			.sidebar-video_message:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -50px;
				left: 0;
			}
				.video_message-btn {
					display: block;
					width: 100%;
					color: #000000;
					transition: .1s;
					-webkit-transition: .1s;
				}
					.video_message-image {
						width: 100%;
						height: auto;
						margin-bottom: 5px;
					}
						.video_message-image img {
							width: 100%;
							height: auto;
						}

					.video_message-title {
						width: 100%;
						height: 45px;
						margin-bottom: 10px;
						border-bottom: solid 1px #DEDEDE;
						font-size: 18px;
						font-weight: 700;
						line-height: 45px;
					}
					.video_message-txt {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						height: 24px;
						font-size: 12px;
						line-height: 24px;
					}
						.video_message-txt img {
							width: 24px;
							height: auto;
							margin-left: 12px;
						}

			.sidebar-recruitment {
				width: 100%;
			}
				.recruitment-heading {
					width: 100%;
					margin-bottom: 15px;
					font-family: din-condensed, sans-serif;
					font-size: 32px;
					text-align: left;
					color: #DF610F;
					line-height: 1.0;
					letter-spacing: 0.06em;
					text-indent: 0.06em;
				}
				.recruitment-container {
					width: 100%;
				}
					.recruitment-btn {
						display: block;
						width: 100%;
						height: 60px;
						padding-left: 10px;
						font-size: 16px;
						font-weight: 700;
						text-align: left;
						line-height: 60px;
						letter-spacing: 0.06em;
						color: #ffffff;
						position: relative;
					}
					.recruitment-btn-contact {
						margin-bottom: 5px;
						background-color: #DF610F;
					}
					.recruitment-btn-essential_point {
						background-color: #000000;
					}
						.recruitment-btn-arrow {
							width: 20px;
							height: auto;
							position: absolute;
							top: 50%;
							right: 13px;
							transform: translate(0%, -50%);
							-webkit-transform: translate(0%, -50%);
							transition: .1s;
							-webkit-transition: .1s;
						}
						.recruitment-btn:hover > .recruitment-btn-arrow {
							right: 10px;
						}
}

/* SP ================================================== */
@media all and (max-width:559px){
#philosophy {
	width: 100%;
	border-top: solid 1px #DEDEDE;
}
	.philosophy--topimage {
		width: 100%;
		height: 400px;
		background-image: url(../image/company/philosophy-topimage@sp.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.philosophy--contents {
		width: 90%;
		padding: 50px 0 0;
		margin: auto auto;
		position: relative;
	}
		.contents--main_container {
			width: 100%;
			padding: 0px 0px 50px;
		}
			.section-heading {
				width: 100%;
				margin: auto auto 60px;
				font-size: 14px;
				font-weight: 500;
				line-height: 1.0;
				letter-spacing: 0.0em;
				text-align: left;
				position: relative;
			}
				.section-heading .section-heading_en {
					display: block;
					margin-top: 15px;
					font-size: 2.1rem;
				    font-weight: bold;
				    color: #DF610F;
				    letter-spacing: 0.1em;
				}
				.section-heading:after {
					content: '';
					display: block;
					width: 50px;
					height: 2px;
					background-color: #DF610F;
					position: absolute;
					bottom: -20px;
					left: 0;
				}

			.philosophy-heading {
				width: 100%;
				margin-bottom: 20px;
				font-size: 38px;
				font-weight: 700;
				line-height: 1.3;
				letter-spacing: 0.05em;
				color: #333333;
			}
			.philosophy-txt {
				width: 100%;
				font-size: 14px;
				line-height: 1.8;
				letter-spacing: 0.05em;
				text-align: justify;
				color: #333333;
			}

		.contents--sidebar {
			display: none;
			width: 100%;
		}
			.sidebar-heading {
				width: 100%;
				padding-bottom: 18px;
				margin-bottom: 15px;
				border-bottom: solid 1px #DEDEDE;
				font-size: 26px;
				font-weight: 700;
				line-height: 1.0;
				letter-spacing: 0.06em;
				position: relative;
			}
			.sidebar-heading:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -1px;
				left: 0;
			}
			.sidebar-cp_cat-list {
				width: 100%;
				margin-bottom: 80px !important;
				position: relative;	
			}
			.sidebar-cp_cat-list:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -40px;
				left: 0;
			}
				.cp_cat-item {
					width: 100%;
					margin-bottom: 5px;
					font-size: 18px;
					font-weight: 400;
					position: relative;
				}
				.cp_cat-item:last-of-type {
					margin-bottom: 0px;
				}
				.cp_cat-item.cp_cat-item_active {
					padding-left: 20px;
					font-weight: 700;
				}
				.cp_cat-item.cp_cat-item_active:before {
					content: '';
					display: block;
					width: 3px;
					height: 23px;
					background-color: #DF610F;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0%, -50%);
					-webkit-transform: translate(0%, -50%);
				}
					.cp_cat-item a {
						display: block;
						padding: 8px 0px;
						color: #000000;
						transition: .2s;
						-webkit-transition: .2s;
						position: relative;
					}
					.cp_cat-item span {
						display: block;
						padding: 8px 0px;
						position: relative;
					}
					.cp_cat-arrow {
						width: 20px;
						height: auto;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0%, -50%);
						-webkit-transform: translate(0%, -50%);
						pointer-events: none;
						transition: .1s;
						-webkit-transition: .1s;
					}
					.arrow_noactive {
						opacity: 0.0;
					}
					.arrow_active {
						opacity: 1.0;
					}

			.sidebar-video_message {
				width: 100%;
				margin-bottom: 90px;
				position: relative;
			}
			.sidebar-video_message:after {
				content: '';
				display: block;
				width: 60px;
				height: 1px;
				background-color: #DF610F;
				position: absolute;
				bottom: -50px;
				left: 0;
			}
				.video_message-btn {
					display: block;
					width: 100%;
					color: #000000;
					transition: .1s;
					-webkit-transition: .1s;
				}
					.video_message-image {
						width: 100%;
						height: auto;
						margin-bottom: 5px;
					}
						.video_message-image img {
							width: 100%;
							height: auto;
						}

					.video_message-title {
						width: 100%;
						height: 45px;
						margin-bottom: 10px;
						border-bottom: solid 1px #DEDEDE;
						font-size: 18px;
						font-weight: 700;
						line-height: 45px;
					}
					.video_message-txt {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						height: 24px;
						font-size: 12px;
						line-height: 24px;
					}
						.video_message-txt img {
							width: 24px;
							height: auto;
							margin-left: 12px;
						}

			.sidebar-recruitment {
				width: 100%;
			}
				.recruitment-heading {
					width: 100%;
					margin-bottom: 15px;
					font-family: din-condensed, sans-serif;
					font-size: 32px;
					text-align: left;
					color: #DF610F;
					line-height: 1.0;
					letter-spacing: 0.06em;
					text-indent: 0.06em;
				}
				.recruitment-container {
					width: 100%;
				}
					.recruitment-btn {
						display: block;
						width: 100%;
						height: 60px;
						padding-left: 10px;
						font-size: 16px;
						font-weight: 700;
						text-align: left;
						line-height: 60px;
						letter-spacing: 0.06em;
						color: #ffffff;
						position: relative;
					}
					.recruitment-btn-contact {
						margin-bottom: 3px;
						background-color: #DF610F;
					}
					.recruitment-btn-essential_point {
						background-color: #000000;
					}
						.recruitment-btn-arrow {
							width: 20px;
							height: auto;
							position: absolute;
							top: 50%;
							right: 13px;
							transform: translate(0%, -50%);
							-webkit-transform: translate(0%, -50%);
							transition: .1s;
							-webkit-transition: .1s;
						}
						.recruitment-btn:hover > .recruitment-btn-arrow {
							right: 10px;
						}
}