@charset "utf-8";
/*=====================================
	株式会社キョーシン 2020.
	INDEX用CSS
=====================================*/


/*==============================
	INDEX - HEADER
==============================*/
#index {
	position: relative;
	height: 100vh;
}

.catch-copy {
	position: absolute;
	top: 50%;
	left: 20%;
	width: 226px;
	height: 514px;
	margin-top: -257px;
	z-index: 10;
}

.top-logo {
	position: absolute;
	top: 0;
	left: 5%;
	width: 180px;
	margin: 0 auto;
	text-align: center;
	z-index: 10;
}

.top-logo img {
	width: 100%;
	/*600*/
	height: auto;
	/*167*/
}

.top-text {
	position: absolute;
	top: 40%;
	/*　↑　社名変更案内中は　30％に戻す*/
	width: 50%;
	left: 0;
	margin: 0 auto;
	text-align: center;
	z-index: 10;
	color: #ffffff;
	line-height: 1.2;
}

.top-text p {
	font-size: 4rem;
}

.top_message {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10%;
	width: 90%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 20px 30px;
}

.top_message h2 {
	text-align: center;
	margin: 0 auto 20px;
	font-size: 2rem;
	line-height: 1.7;
}

.top_message div {
	font-size: 1rem;
	text-align: left;
	display: inline-block;
}

.top_message p {
	text-align: right;
	margin-top: 30px;
	font-size: 1.2rem;
}

.top_message div span {
	font-weight: bold;
}

/*タブレット･スマホ用*/
@media screen and (max-width: 768px) {
	.catch-copy {
		top: 40%;
	}
}

@media screen and (max-width: 640px) {
	.catch-copy {
		position: absolute;
		top: 50%;
		right: 13%;
		width: 145px;
		height: 315px;
		margin-top: -180px;
	}

	.catch-copy .sp {
		display: block !important;
	}

	.top-logo {
		/* top: 40%; */
		width: 40%;
		top: -35px;
	}

	.top-logo img {
		width: 80%;
		height: auto;
	}

	.top-text {
		top: 30%;
		/*　↑　社名変更案内中　20％に戻す*/
		text-align: center;
		width: 100%;
		left: inherit;
		right: inherit;
	}

	.top-text p {
		/* writing-mode: vertical-rl; */
		/*　↑　社名変更案内表示が終わったら戻す*/
		display: inline-block;
		font-size: 56px;
	}

	.top_message {
		width: 70%;
		/* padding: 15px 20px; */
		bottom: 3%;
	}

	.top_message h2 {
		font-size: 1.8rem;
	}

	.top_message p {
		font-size: 1.1rem;
		margin-top: 20px;
	}
}

/**Navigation(index用調節)*/
.header-nav-pc {
	top: 50px;
}

/*==============================
	FIRST VIEW
==============================*/
/* header .pc::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;

	left: 0;
	width: 100%;
	height: 117px;
	background-color: rgba(5, 5, 5, 0.5);
	
} */

#first_view {
	width: 100%;
	height: 100vh;
	font-size: 100px;
}

#first_view {
	position: relative;
}

#first_view::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	/* right: 0; */
	left: 0;
	width: 100%;
	/*60%*/
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	/* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); */
}

#first_view video {
	position: fixed;
	object-fit: cover;
	z-index: -100;
	height: 100vh;
}

@media (aspect-ratio: 16 / 9),
(min-aspect-ratio: 16 / 9) {
	#first_view video {
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
	}
}

@media (max-aspect-ratio: 16 / 9) {
	#first_view video {
		left: 50%;
		height: 100%;
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 428px) {
	#first_view {
		display: flex;
	}
}

@media screen and (max-width: 640px) {
	#first_view::after {
		background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
		width: 100%;
	}
}

.logo {
	position: relative;
	margin-left: 3%;
	z-index: 10;
}

.logo img {
	width: auto;
	height: 52px;
}

/*スマホ版*/
@media screen and (max-width: 428px) {
	.logo {
		margin-top: -5%;
	}
}

/**スクロールボタン*/
.pos.bottom_right {
	position: absolute;
	display: block;
	left: 0;
	bottom: 0;
	z-index: 10;
}

p.scroll {
	position: relative;
	top: -120px;
	left: 15px;
	padding: 0;
	color: #fff;
	font-size: 1.4rem;
	letter-spacing: 0.2rem;
	line-height: 1.0;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.c-scrolldown {
	position: absolute;
	overflow: hidden;
	left: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 180px;
	margin: 0 30px;
}

.c-scrolldown .c-line {
	display: block;
	width: 100%;
	height: 100%;
	background-size: 100% 200%;
	background-position: 0 -180px;
	background: linear-gradient(to bottom, #222 50%, rgba(255, 255, 255, 0.5) 50%);
	animation: scrolldown 3.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}

@keyframes scrolldown {
	0% {
		background-position: 0 -180px;
	}

	75% {
		background-position: 0 0;
	}

	100% {
		background-position: 0 180px;
	}
}

@media screen and (max-width: 768px) {
	p.scroll {
		/*top: -29px;*/
		left: 15px;
		font-size: 1.0rem
	}

	.c-scrolldown {
		position: absolute;
		overflow: hidden;
		left: 0;
		right: 0;
		bottom: 0;
		width: 1px;
		/*height: 80px;*/
		margin: 0 30px;
	}

	.c-scrolldown .c-line {
		display: block;
		width: 100%;
		height: 100%;
		background-size: 100% 200%;
		background-position: 0 -80px;
		background: linear-gradient(to bottom, #222 50%, rgba(255, 255, 255, 0.5) 50%);
		animation: scrolldown 3.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
	}

	@keyframes scrolldown {
		0% {
			background-position: 0 -80px;
		}

		75% {
			background-position: 0 0;
		}

		100% {
			background-position: 0 80px;
		}
	}
}

@media screen and (max-width: 428px) {
	p.scroll {
		top: -50px;
	}

	.c-scrolldown {
		height: 100px;
	}

	.pos.bottom_right {
		bottom: 10px;
	}
}

/*video*/
/*.video-wrap {
	position: relative;
}
.video-wrap::before{
	position: absolute;
	display: block;
	content: '';
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.8);
}
video {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.s_50 {
	left: 50%;
}
*/
/*スライダー*/
/*.bg-slider_pc, .bg-slider_sp {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-slider__title{
	color: #fff;
	font-size: 48px;
	line-height: 1.5;
	text-align:center;
	text-shadow: 1px 1px 1px #000;
}*/
/*お知らせ*/
/*.top_info {
	position: relative;
	width: 500px;
	margin: 2em auto;
	padding: 15px 35px 15px 25px;
	color: #666;
	background-color: #eaf3f3;
	box-shadow: 4px 4px 1px #5BAD92;
}
.top_info::before {
	position: absolute;
	content: '';
	top: -15px;
	right: 10px;
	height: 55px;
	width: 15px;
	border: 3px solid #C0C0C0;
	background-color: none;
	border-radius: 12px;
	box-shadow: 1px 1px 2px #ccc;
	transform: rotate(10deg);
	z-index: 1;
}
.top_info::after {
	position: absolute;
	content: '';
	top: 0px;
	width: 10px; 
	right: 20px;
	border: solid 5px #eaf3f3;
	z-index: 2;
}
.top_info p {
	margin-bottom: 0.7em;
	font-size: 1.2rem;
	line-height: 1.8;
}
.title_box {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 640px) {
	.video-wrap::before {	
		background-color: rgba(0,0,0,0.5);
	}
}
@media screen and (max-width: 428px) {
	.top_info {
		width: 75%;
	}
	.top_info p {
		font-size: 1.0rem;
	}
}*/

/*お知らせバナー*/
/*.info_banner {
	position: absolute;
	top: 50%;
	left: 23%;
	width: 1000px;
	margin: 0 auto;
	z-index: 10;
}
@media screen and (max-width: 1024px) {
	.info_banner {
		left: 1.5% !important;
	}
}
@media screen and (max-width: 999px) {
	.info_banner {
		width: 96% !important;
	}
}
@media screen and (max-width: 428px) {
	.info_banner {
		top: 35% !important;
		left: 2% !important;
	}
}*/

/*==============================
	お知らせ
==============================*/
.top_info_area {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.top_info {
	position: fixed;
	display: block;
	top: 45%;
	left: 35%;
	width: 600px;
	text-align: center;
	z-index: 9999;
}

.top_info span {
	display: block;
	padding: 0;
	margin: 0;
	font-size: 1.0rem;
}

.top_info i {
	margin: 10px 5px 0px 0;
	padding: 0;
	color: #fff;
	font-size: 1.0rem;
	font-weight: 100;
}

.top_info button.i_close {
	position: absolute;
	top: -15px;
	left: -15px;
	width: 30px !important;
	height: 30px !important;
	opacity: 1;
	text-align: center;
	line-height: 30px;
	background: #0c6c6d;
	border-radius: 50%;
}

.top_info button.i_close a {
	display: block;
	width: 30px;
	height: 30px;
	margin-top: -45px;
	padding-top: 2px;
	color: #fff;
}

.top_info button.i_close i {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 900;
}

.top_infobox {
	position: relative;
	padding: 10px;
	background: #fff;
	border: 1px solid #666;
}

.top_infobox h2 {
	padding-top: 20px;
	font-size: 1.5rem;
	font-weight: 600;
}

.top_infobox p {
	padding: 20px;
	font-size: 1.2rem;
	text-align: left;
}

.top_info.i_close_auto,
.top_infobox.i_close_auto {
	visibility: hidden;
}

@media screen and (max-width: 428px) {
	.top_info {
		top: 40%;
		left: 4%;
		width: 380px;
	}

	.top_infobox p {
		font-size: 1.0rem;
	}
}

@media screen and (max-width: 375px) {
	.top_info {
		width: 340px;
	}
}



/*========================
	INDEX - CONTENTS
========================*/
.contents {
	width: 100%;
	background-color: #fff;
}

/**会社情報*/
.about-box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 1px;
}

.about_img {
	width: 50%;
	padding: 0;
}

.about_text {
	box-sizing: border-box;
	width: 50%;
	padding: 0 7% 0 10%;
}

.about_text h2 {
	margin-bottom: 8%;
	font-size: 2.2vw;
	line-height: 1.7;
}

.about_text p {
	font-size: 1.2vw;
	line-height: 2.0;
}

/*タブレット･スマホ用*/
@media screen and (max-width: 640px) {
	.about-box {
		display: block;
	}

	.about_img,
	.about_text {
		width: 100%;
	}

	.about_text {
		padding: 50px 30px 40px;
	}

	.about_text h2 {
		margin-top: 20px;
		margin-bottom: 25px;
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.about_text p {
		font-size: 0.8rem;
		line-height: 2.4;
	}
}

/**メインコンテンツ*/
.product-box {}

.product-box ul {
	display: flex;
	margin-bottom: 140px;
}

.product-box li {
	margin: 0;
}

.product-box .box01 {
	/*width: 33.3%;*/
	width: 25%;
	margin-right: 1px;
	background-color: #5BAD92;
	/*#16bcac*/
}

.product-box .box02 {
	/*width: 33.3%;*/
	width: 25%;
	margin-right: 1px;
	background-color: #5BAD92;
	/*#16bcac*/
}

.product-box .box03 {
	/*width: 33.3%;*/
	width: 25%;
	margin-right: 1px;
	background-color: #5BAD92;
	/*#16bcac*/
}

.product-box .box04 {
	/*width: 33.4%;*/
	width: 25%;
	margin-bottom: 0;
	background-color: #5BAD92;
	/*#16bcac*/
}

.product-img {}

.product-text_area {
	position: relative;
	padding: 0 30px;
	z-index: 100;
}

.product-ttl {
	margin: -0.6em 0 40px;
	font-size: 30px;
	color: #fff;
	line-height: 1.0;
	text-align: center;
}

.product-ttl span {
	position: relative;
}

.product-box .box01 .product-ttl span::before {
	content: '01';
	position: absolute;
	top: -18px;
	left: -15px;
	color: #fff;
	font-size: 16px;
}

.product-box .box02 .product-ttl span::before {
	content: '02';
	position: absolute;
	top: -18px;
	left: -15px;
	color: #fff;
	font-size: 16px;
}

.product-box .box03 .product-ttl span::before {
	content: '03';
	position: absolute;
	top: -18px;
	left: -15px;
	color: #fff;
	font-size: 16px;
}

.product-box .box04 .product-ttl span::before {
	content: '04';
	position: absolute;
	top: -18px;
	left: -15px;
	color: #fff;
	font-size: 16px;
}

.product-text {
	font-size: 1.0rem;
	color: #fff;
	line-height: 2.0;
}

.product-btn {
	font-family: 'Overpass', sans-serif;
	font-weight: 600;
	display: block;
	position: relative;
	margin-top: 35px;
	padding: 26px 5px;
	border-top: 1px solid;
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 17px;
}

.product-btn::after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border: 0px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.product-box a .product-btn::after {
	transition: all .3s;
}

.product-box a:hover .product-btn::after {
	position: absolute;
	top: 50%;
	right: 0;
}

.product-box .box01,
.product-box .box02,
.product-box .box03,
.product-box .box04 {
	display: block;
	transition: all .3s;
}

.product-box .box01:hover {
	background-color: #0c6c6d;
}

.product-box .box02:hover {
	background-color: #0c6c6d;
}

.product-box .box03:hover {
	background-color: #0c6c6d;
}

.product-box .box04:hover {
	background-color: #0c6c6d;
}

/*タブレット･スマホ用*/
@media screen and (max-width: 640px) {
	.product-box ul {
		display: block;
	}

	.product-box .box01,
	.product-box .box02,
	.product-box .box03,
	.product-box .box04 {
		width: 100%;
	}
}

/*==============================
	INDEX - SECTION
==============================*/
/**タイトル*/
.cont-ttl-vertical {
	position: relative;
}

.cont-ttl-vertical .ttl-let-green {
	color: #16bcac;
}

.btn_wrap {
	display: flex;
	height: 100%;
	margin-top: 50px;
	align-items: center;
	justify-content: center;
}

.line_btn {
	width: 140px;
	height: 45px;
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;
	color: #000;
	background-color: #fff;
	border: none;
	border-radius: 45px;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
}

.line_btn:hover {
	background-color: #16bcac;
	box-shadow: 0px 15px 20px rgba(0, 86, 87, 0.4);
	color: #fff;
	transform: translateY(-7px);
}

/*パソコン用*/
@media only screen and (min-width: 999px) {
	.jpn {
		display: inline-block;
		line-height: 1.0;
		font-size: 2.25rem;
		letter-spacing: 0.1em;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.eng {
		position: absolute;
		display: block;
		top: 95px;
		left: 140px;
		margin-bottom: 12px;
		font-family: 'Overpass', sans-serif;
		font-weight: 400;
		font-size: 1.0rem;
		line-height: 1.0;
		letter-spacing: 0.06em;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.cont-ttl-vertical {
		display: inline-block;
		padding: 95px 0 0 80px;
	}
}

/*タブレット用*/
@media only screen and (min-width: 600px) {
	.btn_wrap {
		height: 100px;
	}

	.jpn {
		display: block;
		font-size: 1.65rem;
		line-height: 1.0;
	}

	.eng {
		display: block;
		margin-bottom: 12px;
		font-size: 0.85rem;
		font-weight: 400;
		line-height: 1.0;
		letter-spacing: 0.01em;
		font-family: 'Overpass', sans-serif;
	}

	.cont-ttl-vertical {
		position: relative;
		padding: 60px 0 0 60px;
	}

	.cont-ttl-vertical::before {
		position: absolute;
		display: block;
		content: '';
		top: 0;
		left: 35px;
		width: 1px;
		height: 90px;
		background-color: #005657;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
}

/**スマホ用*/
@media only screen and (max-width: 599px) {
	.jpn {
		display: block;
		font-size: 1.65rem;
		line-height: 1.0;
	}

	.eng {
		display: block;
		margin-bottom: 12px;
		font-size: 0.8rem;
		font-weight: 400;
		line-height: 1.0;
		letter-spacing: 0.01em;
		font-family: 'Overpass', sans-serif;
	}

	.cont-ttl-vertical {
		padding: 60px 0 0 60px;
	}

	.cont-ttl-vertical::before {
		position: absolute;
		display: block;
		content: '';
		top: 0;
		left: 35px;
		width: 1px;
		height: 90px;
		background-color: #005657;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
}


/*==============================
	INDEX - 特集(ピックアップ)
==============================*/
.pu-box {
	margin-bottom: 60px;
}

.pu-box-inner-wrapper {
	padding: 0 10% 0px;
	background-color: #eaf3f3;
	background-size: cover;
}

.pu-box-inner {
	position: relative;
	padding: 0 0 120px;
}

.pu-ttl-wapper {
	position: relative;
	margin: 0 10% -100px;
	z-index: 100;
}

/**Edge*/
_:-ms-lang(x)::backdrop,
.pu-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

/**IE11*/
_:-ms-lang(x)::-ms-backdrop,
.pu-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

.pu-box .cont-ttl-vertical {
	margin: 0 0 35px 30px;
}

.pu_area {
	position: relative;
	width: 52%;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 998;
}

.pu_link {
	width: 100%;
	margin: 0 auto;
	padding-top: 100px;
	text-align: center;
}

.pad01,
.pad02 {
	padding-top: 100px;
}

.pu_link img {
	width: 100%;
}

.link_box {
	margin: 0 auto;
	margin-top: 20px;
	text-align: center;
}

.link_box .link_box_l,
.link_box .link_box_r {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
}

.link_box .btn_wrap {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
}

.link_box p {
	font-size: 0.9rem;
	font-weight: bold;
}

/**タブレットの場合*/
@media only screen and (max-width: 1024px) {
	.pad02 {
		padding-top: 50px;
	}
}

/*スマホの場合*/
@media only screen and (max-width: 428px) {
	.pu-box-inner-wrapper {
		/*height: 480px600px;*/
		height: 750px;
	}

	.pad02 {
		padding-top: 30px;
	}

	.pu_area {
		width: 90%;
	}

	.link_box .link_box_l,
	.link_box .link_box_r {
		display: block;
	}

	.link_box p {
		font-size: 0.8rem;
	}
}

/*==============================
	INDEX - 採用情報
==============================*/
.recruit-box {
	/*position: relative;*/
	margin-bottom: 60px;
	/*overflow: hidden;*/
}

.recruit-box::before {
	position: absolute;
	display: block;
	/*content: 'Recruit';*/
	content: '';
	top: 55px;
	right: -26px;
	color: #eaf3f3;
	font-size: 5.6rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.0;
	font-family: 'Overpass', sans-serif;
}

.recruit-box-ttl-area {
	padding: 0 30px;
}

.recruit-box .cont-ttl-vertical {
	margin-bottom: 40px;
}

.recruit-box-text {
	margin-bottom: 30px;
	font-size: 12px;
	line-height: 2.0;
}

.recuit-box-person-area {
	position: relative;
	margin-bottom: 50px;
	padding: 0 30px;
}

.recuit-box-person-area::before {
	display: block;
	content: '';
	position: absolute;
	top: 7%;
	left: 0;
	width: 84%;
	height: 83%;
	background-color: #eaf3f3;
}

.recuit-box-person-area li {
	margin: 0 0 30px 0;
}

.recuit-box-person-area li:last-child {
	margin-bottom: 0;
}

.person-area-inner {
	position: relative;
	margin: 0 0 0 32%;
}

.second .person-area-inner {
	margin: 0 32% 0 0;
}

.person-img {
	margin-left: 30px;
}

.person-copy {
	display: inline-block;
	position: absolute;
	top: 30px;
	left: 0;
	z-index: 100;
}

.person-copy span {
	padding: 18px 8px 16px;
	background-color: #005657;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 3.2vw;
	color: #fff;
}

.person-copy span.short {
	height: auto;
}

.person-copy span.long {
	height: auto;
}


/* tablet 600px - 799px */
@media only screen and (min-width: 600px) {
	.recruit-box {
		position: relative;
		margin-bottom: 60px;
		overflow: hidden;
	}

	.recruit-box::before {
		font-family: 'Overpass', sans-serif;
		font-weight: 400;
		display: block;
		content: 'Recruit';
		position: absolute;
		top: 20px;
		right: -26px;
		color: #eaf3f3;
		font-size: 110px;
		letter-spacing: 0;
		line-height: 1.0;
	}

	.recruit-box-ttl-area {
		padding: 0 30px;
	}

	.recruit-box .cont-ttl-vertical {
		margin-bottom: 40px;
	}

	.recruit-box-text {
		margin-bottom: 50px;
		font-size: 13px;
		line-height: 2.0;
	}

	.recuit-box-person-area {
		display: flex;
		position: relative;
		margin-bottom: 50px;
		padding: 0 0 0 20px;
	}

	.recuit-box-person-area::before {
		display: block;
		content: '';
		position: absolute;
		top: 100px;
		left: 0;
		width: 84%;
		/*height: 92%;*/
		height: 80%;
		background-color: #eaf3f3;
	}

	.recuit-box-person-area li {
		margin: 0 0 0 20px;
	}

	.recuit-box-person-area li:last-child {
		margin-bottom: 0;
	}

	.person-area-inner {
		position: relative;
		margin: 0;
	}

	.second .person-area-inner {
		margin: 0;
	}

	.person-img {
		margin-left: 30px;
	}

	.person-copy {
		position: absolute;
		display: inline-block;
		top: 30px;
		left: 0;
		z-index: 100;
	}

	.person-copy span {
		padding: 18px 8px 16px;
		color: #fff;
		font-size: 1.6vw;
		background-color: #005657;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.person-copy span.short {
		height: auto;
	}

	.person-copy span.long {
		height: auto;
	}
}


/* PC 800px - */
@media only screen and (min-width: 800px) {
	.recruit-box {
		/*position: relative;
		margin-bottom: 60px;
		overflow: hidden;*/
		position: relative;
		margin-bottom: 120px;
		overflow: visible;
	}

	.recruit-box::before {
		position: absolute;
		display: block;
		content: 'Recruit';
		/*top: 20px;
		right: -26px;*/
		top: 4%;
		right: 7%;
		left: auto;
		bottom: auto;
		color: #eaf3f3;
		font-size: 6.9rem;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.0;
		font-family: 'Overpass', sans-serif;
	}

	.recruit-box-ttl-area {
		/*padding: 0 30px;*/
		position: relative;
		width: 100%;
		margin: 0 10% 100px;
		z-index: 100;
	}

	/**Edge*/
	_:-ms-lang(x)::backdrop,
	.recruit-box-ttl-area {
		position: relative;
		width: 100%;
		margin: 0 10% -700px;
		z-index: 100;
	}

	/**IE11*/
	_:-ms-lang(x)::-ms-backdrop,
	.recruit-box-ttl-area {
		position: relative;
		width: 100%;
		margin: 0 10% -700px;
		z-index: 100;
	}

	.recruit-box .cont-ttl-vertical {
		/*margin-bottom: 40px;*/
		margin-bottom: 0;
	}

	.recruit-box-text {
		/*margin-bottom: 50px;
		font-size: 0.8rem;
		line-height: 2.0;*/
		position: absolute;
		right: 0;
		bottom: 10px;
		width: 50%;
		margin: 0 auto;
		padding-right: 15%;
		font-size: 0.9rem;
		line-height: 2.2;
	}

	/**Edge*/
	_:-ms-lang(x)::backdrop,
	.recruit-box-text {
		position: absolute;
		right: 0;
		bottom: 800px;
		width: 50%;
		margin: 0 auto;
		padding-right: 15%;
		font-size: 0.9rem;
		line-height: 2.2;
	}

	/**IE11*/
	_:-ms-lang(x)::-ms-backdrop,
	.recruit-box-text {
		position: absolute;
		right: 0;
		bottom: 800px;
		width: 50%;
		margin: 0 auto;
		padding-right: 15%;
		font-size: 0.9rem;
		line-height: 2.2;
	}

	.recuit-box-person-area {
		display: flex;
		position: relative;
		margin-bottom: 90px;
		padding: 0 0 0 4%;
	}

	.recuit-box-person-area::before {
		position: absolute;
		display: block;
		content: '';
		top: 180px;
		left: 0;
		width: 100%;
		height: 90%;
		background-color: #eaf3f3;
		z-index: -100;
	}

	.recuit-box-person-area li {
		margin: 0 0 0 6%;
	}

	.recuit-box-person-area li:last-child {
		margin-bottom: 0;
	}

	.person-area-inner {
		position: relative;
		margin: 0;
	}

	.second .person-area-inner {
		margin: 0;
	}

	.person-img {
		margin-left: 48px;
	}

	.person-copy {
		display: inline-block;
		position: absolute;
		top: -50px;
		left: 0;
		width: 70px;
		height: 300px;
		z-index: 100;
	}

	.person-copy span {
		width: 70px;
		padding: 22px 10px;
		color: #fff;
		font-size: 1.2rem;
		background-color: #005657;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.person-copy span.short {
		height: 250px;
	}

	.person-copy span.long {
		height: 300px;
	}

	.person-text {
		margin: 22px 0 0 53px;
		font-size: 1.0rem;
		font-weight: bold;
	}
}

/*==============================
	INDEX - サービス内容
==============================*/
.service_info {
	margin-bottom: 50px;
}

.service-box {
	margin-bottom: 60px;
}

.service-box-inner-wrapper {
	padding: 0 10% 175px;
	background: url("../images/top/serv-bg_pc.jpg") center center no-repeat;
	background-size: cover;
}

.service-box-inner {
	position: relative;
	padding: 0 0 120px;
	background-color: #fff;
}

.service-ttl-wapper {
	position: relative;
	margin: 0 10% -100px;
	z-index: 100;
}

/**Edge*/
_:-ms-lang(x)::backdrop,
.service-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

/**IE11*/
_:-ms-lang(x)::-ms-backdrop,
.service-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

.service-box .cont-ttl-vertical {
	margin: 0 0 35px 30px;
}

.service-list {
	position: relative;
	width: 52%;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 998;
}

.service-list .list_li {
	/*position: relative;*/
	margin-bottom: 25px;
	padding-bottom: 25px;
	/*border-bottom: 1px solid #e5e5e5;*/
}

.service-list .list_li span.ttl {
	font-size: 1.2rem;
	font-weight: bold;
}

/*.service-list li:last-child {
	margin-bottom: 0;
}*/
.service-date {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	padding-left: 20px;
	color: #004b4c;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 2.2;
	font-family: 'Overpass', sans-serif;
}

.service-list p {
	font-size: 1.0rem;
	line-height: 1.8;
}

.service-list a {
	display: inline-block;
	font-size: 1.0rem;
	;
	transition: all .3s;
}

.service-list a:hover {
	color: #999;
}

/**1000px以下の場合*/
@media only screen and (max-width: 999px) {
	.service-ttl-wapper {
		margin: 0 10% 0px;
	}
}

/**タブレット･スマホの場合*/
@media only screen and (max-width: 640px) {
	.service-box-inner-wrapper {
		padding: 0 30px 85px;
		background: url("../images/top/serv-bg_sp.jpg") center center no-repeat;
		background-size: cover;
	}

	.service-box-inner {
		padding: 15px 40px 70px;
	}

	.service-list {
		width: 80%;
	}

	.service-list .list_li {
		margin-bottom: 14px;
		padding-bottom: 14px;
	}

	.service-date {
		padding-left: 10px;
		font-size: 0.9rem;
	}

	.service-list a {
		margin-left: 10em;
		font-size: 0.9rem;
	}
}

/**スマホの場合*/
@media only screen and (max-width: 428px) {
	.service-box {
		margin-bottom: 50px;
	}

	.service_info {
		margin: 0;
		padding: 0;
		margin-left: -65%;
		margin-bottom: 30px;
	}

	.service_info img {
		width: 250px;
	}

	.service-box-inner-wrapper {
		padding: 0 30px 85px;
		background: url("../images/top/serv-bg_sp.jpg") center center no-repeat;
		background-size: cover;
	}

	.service-box-inner {
		position: relative;
		margin-top: 50px;
		padding: 15px 40px 70px;
		background-color: #fff;
	}

	.service-box .cont-ttl-vertical {
		margin: 0 0 35px 30px;
	}

	.service-list {
		width: 100%;
		padding: 0;
	}

	.service-list .list_li {
		margin-bottom: 14px;
		padding-bottom: 14px;
		/*border-bottom: 1px solid #e5e5e5;*/
	}

	/*.info-list li:last-child {
		margin-bottom: 0;
	}*/
	.service-date {
		font-size: 1.0rem;
		line-height: 1.8;
	}

	.service-list p {
		display: inline-block;
		font-size: 1.0rem;
	}
}


/*==============================
	INDEX - イプロスについて
==============================*/
.ipros_info {
	margin-bottom: 50px;
}

.info-box {
	margin-bottom: 60px;
}

.info-box-inner-wrapper {
	padding: 0 10% 175px;
	background: url("../images/top/info-bg_pc.jpg") center center no-repeat;
	background-size: cover;
}

.info-box-inner {
	position: relative;
	padding: 0 0 120px;
	background-color: #fff;
}

.info-ttl-wapper {
	position: relative;
	margin: 0 10% -100px;
	z-index: 100;
}

/**Edge*/
_:-ms-lang(x)::backdrop,
.info-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

/**IE11*/
_:-ms-lang(x)::-ms-backdrop,
.info-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

.info-box .cont-ttl-vertical {
	margin: 0 0 35px 30px;
}

.info-list {
	position: relative;
	width: 52%;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 998;
}

.info-list .list_li {
	/*position: relative;*/
	margin-bottom: 25px;
	padding-bottom: 25px;
	/*border-bottom: 1px solid #e5e5e5;*/
}

.info-list .list_li span.ttl {
	font-size: 1.2rem;
	font-weight: bold;
}

/*.info-list li:last-child {
	margin-bottom: 0;
}*/
.info-date {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	padding-left: 20px;
	color: #004b4c;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 2.2;
	font-family: 'Overpass', sans-serif;
}

.info-list p {
	font-size: 1.0rem;
	line-height: 1.8;
}

.info-list a {
	display: inline-block;
	font-size: 1.0rem;
	;
	transition: all .3s;
}

.info-list a:hover {
	color: #999;
}

/**1000px以下の場合*/
@media only screen and (max-width: 999px) {
	.info-ttl-wapper {
		margin: 0 10% 0px;
	}
}

/**タブレット･スマホの場合*/
@media only screen and (max-width: 640px) {
	.info-box-inner-wrapper {
		padding: 0 30px 85px;
		background: url(../images/top/info-bg_sp.jpg) center center no-repeat;
		background-size: cover;
	}

	.info-box-inner {
		padding: 15px 40px 70px;
	}

	.info-list {
		width: 80%;
	}

	.info-list .list_li {
		margin-bottom: 14px;
		padding-bottom: 14px;
	}

	.info-date {
		padding-left: 10px;
		font-size: 0.9rem;
	}

	.info-list a {
		margin-left: 10em;
		font-size: 0.9rem;
	}
}

/**スマホの場合*/
@media only screen and (max-width: 428px) {
	.info-box {
		margin-bottom: 50px;
	}

	.ipros_info {
		margin: 0;
		padding: 0;
		margin-left: -65%;
		margin-bottom: 30px;
	}

	.ipros_info img {
		width: 250px;
	}

	.info-box-inner-wrapper {
		padding: 0 30px 85px;
		background: url(../images/top/info-bg_sp.jpg) center center no-repeat;
		background-size: cover;
	}

	.info-box-inner {
		position: relative;
		margin-top: 50px;
		padding: 15px 40px 70px;
		background-color: #fff;
	}

	.info-box .cont-ttl-vertical {
		margin: 0 0 35px 30px;
	}

	.info-list {
		width: 100%;
		padding: 0;
	}

	.info-list list_li {
		margin-bottom: 14px;
		padding-bottom: 14px;
		/*border-bottom: 1px solid #e5e5e5;*/
	}

	/*.info-list li:last-child {
		margin-bottom: 0;
	}*/
	.info-date {
		font-size: 1.0rem;
		line-height: 1.8;
	}

	.info-list p {
		display: inline-block;
		font-size: 1.0rem;
	}
}

/*==============================
	INDEX - 問い合わせ
==============================*/
.contact-box {
	margin-bottom: 60px;
}

.contact-box-inner-wrapper {
	padding: 0 10% 0px;
	background: url("../images/top/contact-bg_pc.jpg") center center no-repeat;
	background-size: cover;
}

.contact-box-inner {
	position: relative;
	padding: 0 0 120px;
}

.contact-ttl-wapper {
	position: relative;
	margin: 0 10% -100px;
	z-index: 100;
}

/**Edge*/
_:-ms-lang(x)::backdrop,
.contact-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

/**IE11*/
_:-ms-lang(x)::-ms-backdrop,
.contact-ttl-wapper {
	position: relative;
	margin: 0 10% -900px;
	z-index: 100;
}

.contact-box .cont-ttl-vertical {
	margin: 0 0 35px 30px;
}

.contact_area {
	position: relative;
	width: 52%;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 998;
}

.contact_form {
	width: 500px;
	margin: 0 auto;
	padding-top: 100px;
	text-align: center;
}

.contact_form p.f-txt {
	margin-bottom: 15px;
	line-height: 1.5;
	font-size: 1.1rem;
	font-weight: 600;
}

.contact_form img {
	width: 498px;
}

.tel_sm {
	width: 500px;
	margin: 0 auto;
	padding-top: 10px;
	text-align: center;
}

.contact_inner {
	display: flex;
	margin-top: 13px;
}

.contact_text {
	color: #222;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 0.16rem;
}

.contact_number {
	margin-top: -4px;
	margin-left: 6px;
}

.contact_number img {
	width: 267px;
}

.contact_caution {
	margin-top: 5px;
	color: #222;
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.7;
	letter-spacing: 0.14rem;
}

/**タブレット･スマホの場合*/
@media only screen and (max-width: 780px) {

	.contact_form,
	.tel_sm {
		margin-left: -50px;
	}

	.contact_form {
		padding-top: 150px;
	}
}

@media only screen and (max-width: 640px) {
	.contact-box-inner-wrapper {
		padding: 0 30px 85px;
		background: url("../images/top/contact-bg_sp.jpg") center center no-repeat;
		background-size: cover;
	}

	.contact-box {
		margin-bottom: 50px;
	}

	.contact-box-inner {
		margin-top: 150px;
	}

	.contact_area,
	.contact_form,
	.tel_sm,
	.contact_text,
	.contact_number {
		width: 100%;
	}

	.contact_area {
		padding: 0;
	}

	.contact_form,
	.tel_sm {
		margin-left: auto;
	}

	.contact_form {
		padding-top: 30px;
	}

	.contact_form img {
		width: 100%;
	}

	.contact_inner {
		position: relative;
		display: block;
	}

	.contact_number {
		margin: 10px 0;
	}

	.contact_caution {
		font-size: 0.8rem;
	}

	.contact_form p.f-txt {
		font-size: 1.0rem;
	}
}

@media only screen and (max-width: 428px) {
	.contact_area {
		padding-top: 100px;
	}
}

/*==============================
	INDEX - 更新情報
==============================*/
.new-date {
	display: block;
	color: #004b4c;
	font-weight: 400;
	font-family: 'Overpass', sans-serif;
}

.new-box {
	/*margin-bottom: 60px;*/
}

/*パソコン用*/
@media only screen and (min-width: 999px) {
	.new-box-inner-wrapper {
		padding: 0 10% 175px;
		background: url("../images/top/new-bg_pc.jpg") center center no-repeat;
		background-size: cover;
	}

	.new-box-inner {
		position: relative;
		padding: 0 0 120px;
		background-color: #fff;
	}

	.new-ttl-wapper {
		position: relative;
		margin: 0 10% -100px;
		z-index: 100;
	}

	/**Edge*/
	_:-ms-lang(x)::backdrop,
	.new-ttl-wapper {
		position: relative;
		margin: 0 10% -900px;
		z-index: 100;
	}

	/**IE11*/
	_:-ms-lang(x)::-ms-backdrop,
	.new-ttl-wapper {
		position: relative;
		margin: 0 10% -900px;
		z-index: 100;
	}

	.new-box .cont-ttl-vertical {
		margin: 0 0 35px 30px;
	}

	.new-list {
		position: relative;
		width: 52%;
		margin: 0 auto;
		padding: 0 20px;
		z-index: 998;
	}

	.new-list li {
		position: relative;
		margin-bottom: 25px;
		padding-bottom: 25px;
		border-bottom: 1px solid #e5e5e5;
	}

	.new-list li:last-child {
		margin-bottom: 0;
	}

	.new-date {
		position: absolute;
		top: 0;
		left: 0;
		padding-left: 20px;
		line-height: 2.2;
		font-size: 0.9rem;
	}

	.new-list p {
		display: inline-block;
		margin-left: 28%;
		font-size: 16px;
		transition: all .3s;
	}
}

/**999px以下タブレット用*/
@media only screen and (min-width: 600px) {
	.new-box-inner-wrapper {
		padding: 0 30px 85px;
		background: url(../images/top/new-bg_sp.jpg) center center no-repeat;
		background-size: cover;
	}

	.new-box-inner {
		position: relative;
		padding: 15px 40px 70px;
		background-color: #fff;
	}

	.new-box .cont-ttl-vertical {
		margin: 0 0 35px 30px;
	}

	.new-list li {
		position: relative;
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid #e5e5e5;
	}

	.new-list li:last-child {
		margin-bottom: 0;
	}

	.new-list p {
		display: inline-block;
		margin-left: 28%;
		font-size: 0.9rem;
	}

	.new-date {
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 10%;
		padding-left: 10px;
		font-size: 0.9rem;
		line-height: 2.2;
	}
}

/**スマホの場合*/
@media only screen and (max-width: 428px) {
	.new-box-inner-wrapper {
		padding: 0 30px 85px;
		background: url(../images/top/new-bg_sp.jpg) center center no-repeat;
		background-size: cover;
	}

	.new-box-inner {
		position: relative;
		padding: 15px 40px 70px;
		background-color: #fff;
	}

	.new-box .cont-ttl-vertical {
		margin: 0 0 35px 30px;
	}

	.new-list li {
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid #e5e5e5;
	}

	.new-list li:last-child {
		margin-bottom: 0;
	}

	.new-list p {
		display: inline-block;
		font-size: 0.75rem;
	}

	.new-date {
		font-size: 0.75rem;
		line-height: 1.8;
	}
}

/*更新履歴のリンク部分を点下線にする*/
.new-list a.d_line {
	font-weight: 600;
	border-bottom: dotted;
	border-color: #FF0000;
	border-width: 2px;
}


/*==============================
	INDEX - footer追加設定
==============================*/
#footer {
	margin-top: 0;
	background: #fff;
}

/*========================
	INDEX - 社名変更のお知らせ（臨時）
========================*/
.news-box {}

.news-box_text {
	margin: auto;
	width: 47%;
	max-width: 775px;
	font-size: 1.1vw;
	line-height: 1.5;
	padding-top: 6%;
	padding-bottom: 4%;
}

.news-box_text h2 {
	text-align: center;
	margin: 0 auto 6%;
	font-size: 2.2vw;
	line-height: 1.7;

}

.news-box_text span {
	font-weight: bold;
	4
}

.news-box_text>p {
	text-align: right;
	margin-top: 40px;
	font-size: 1.3vw;
}

.news-box_data {
	max-width: 600px;
	margin: 50px auto;
	padding: 20px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	font-size: 1vw;
}

.news-box_data p {
	margin: 20px;
}

.news-box_data table {
	width: 100%;
	border-collapse: collapse;
}

.news-box_data th,
.news-box_data td {
	text-align: left;
	padding: 10px 15px;
	border-bottom: 1px solid #ddd;
}

.news-box_data th {
	background-color: #f2f2f2;
	font-weight: bold;
	color: #555555;
}

.news-box_data td {
	color: #333333;
}

.news-box_data table tr:last-child th,
.news-box_data table tr:last-child td {
	border-bottom: none;
}

/**タブレット以下の場合*/
@media only screen and (max-width: 768px) {
	.news-box {
		padding: 50px 30px;
	}

	.news-box_text {
		width: 100%;
		font-size: small;

	}

	.news-box_text h2 {
		font-size: x-large;
	}

	.news-box_text>p {
		font-size: medium;
	}
}