/*==================================================================*/
/* トップイメージエリア */
#top_image_area {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: min( 60%, 500px );
	background-image: url( "/img/top_image4.jpg" );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
/* PC用社名エリア */
.pc_company_name_area {
	display: inline-block;
	position: absolute;
	top: 0;
	left: calc( 50% - calc( var( --content-max-width ) / 2 ) );
	width: calc( var( --content-max-width ) - 10px );
	height: 100%;
	z-index: +2;
}
.pc_catch_copy {
	position: absolute;
	top: 85px;
	left: 10px;
	height: 60px;
	width: 800px;
	background: url( "/img/pc_catch_copy.png" );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.mynavi_link_area {
	display: none;
	padding-top: 20px;
}
.mynavi_link_area img {
	width: 220px;
}
/*
.pc_company_catch_copy_area {
	position: absolute;
	top: 85px;
	left: 10px;
	font-size: 44px;
	font-weight: bold;
	text-align: left;
	color: #cc0000;
	text-shadow:
		3px 3px 2px #ffffff,
		-3px 3px 2px #ffffff,
		-3px -3px 2px #ffffff,
		3px -3px 2px #ffffff;
}
*/
.pc_company_name {
	position: absolute;
	top: 30px;
	left: 10px;
	width: 500px;
}
/*==================================================================*/
/* キャッチコピーエリア */
.catch_copy_area {
	position: relative;
	display: none;
	width: 100%;
	max-width: var( --content-max-width );
	z-index: +2;
	padding: 10px 10px 10px 10px;
	text-align: center;
	vertical-align: top;
}
.catch_copy_image {
	display: inline-block;
	vertical-align: top;
}
.catch_copy_image > img {
	width: 300px;
}
.catch_copy_notice {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	max-width: 500px;
	padding: 10px;
	font-size: 16px;
}
/*==================================================================*/
.x_insta_link_area {
	display: inline-block;
	position: absolute;
	top: 10px;
	right: calc( 50% - calc( var( --content-max-width ) / 2 ) );
	height: 60px;
	z-index: +3;
	text-align: right;
	padding-right: 20px;
}
.x_insta_link_area > a {
	margin-right: 10px;
}
.x_insta_link_area > a > img {
	height: 35px;
}
/* ニュースエリア */
.news_area {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: var( --content-max-width );
	z-index: +2;
	padding: 10px 10px 40px 10px;
}
/* ニュース文字列エリア */
.news_area > div:nth-child(1) {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px 5px 5px 20px;
	text-align: left;
	font-weight: bold;
	border-style: solid;
	border-width: 0 15px 1px 15px;
	border-color: transparent transparent #008800 #008800;
}
/* ニュースコンテンツエリア */
.news_area > div:nth-child(2) {
	display: grid;
	gap: 5px 8px;
	grid-template-columns: repeat( auto-fit, minmax( calc( var( --content-min-width ) - 20px ), 1fr ) );
	padding: 0 10px;
}
/* ニュースコンテンツ */
.news_area > div:nth-child(2) > div {
	padding: 10px;
	margin-top: 5px;
	border: 1px solid #dddddd;
	text-align: left;
	font-size: 14px;
	box-shadow: 7px 5px 5px #888888;
}
.news_area > div:nth-child(2) > div > div:nth-child(1) {
	border-bottom: 1px solid #cccccc;
}
.news_area > div:nth-child(2) > div > div:nth-child(1) > span {
	margin-left: 10px;
}
.news_area > div:nth-child(2) > div > div:nth-child(2) {
	margin-top: 10px;
	margin-left: 20px;
	overflow-wrap : break-word;
}
/* オープンカンパニー告知 */
.open_company_area {
	margin-top: 20px;
}
.open_company_area img {
	transition-duration: 1s;
	margin: 0 10% 20px 10%;
	max-width: 80%;
	transition-property: margin, max-width;
	border: 3px solid #0000ff;
}
/*==================================================================*/
/* 会社概要エリア */
.company_area {
	position: relative;
	display: inline-block;
	height: 500px;
	width: 100%;
	max-width: var( --content-max-width );
	z-index: +2;
	padding: 10px;
	text-align: left;
}
#company_image_area {
	position: absolute;
	top: 70px;
	right: 40px;
	width: 500px;
	height: 350px;
	padding: 10px;
	border: 1px solid #888888;
	background-color: #ffffff;
	box-shadow: 4px 4px 4px #555555;
}
#company_image_area > div {
	height: 100%;
	background: url( "/img/company_image.jpg" );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.company_area .content_box {
	top: 40px;
	left: 0;
}
.company_title {
	font-weight: bold;
	font-size: 40px;
}
.catch_copy {
	margin-top: 30px;
	margin-left: 30px;
	font-size: 30px;
	font-weight: bold;
	text-shadow: 4px 4px 4px #ffaaaa;
}
.catch_copy > div {
	font-size: 20px;
	margin-top: 10px;
	margin-left: 10px;
}
.company_notice {
	margin-top: 10px;
	margin-left: 40px;
	font-size: 18px;
	white-space: pre-line;
}
#goto_company_button {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 60px;
	font-weight: bold;
	font-size: 24px;
	line-height: 54px;
	text-align: center;
	border-radius: 30px;
	border: 4px solid #cccccc; 
	background: #008888;
	color: #ffffff;
	cursor: pointer;
	transition: margin-top 0.5s, width 0.5s, height 0.5s, border-radius 0.5s, line-height 0.5s;
}
#goto_company_button:hover {
	margin-top: 10px;
	color: #ffff00;
	width: 240px;
	height: 80px;
	border-radius: 40px;
	line-height: 72px;
}
/*==================================================================*/
.business_area {
	position: relative;
	display: inline-block;
	height: 500px;
	width: 100%;
	max-width: var( --content-max-width );
	z-index: +2;
	padding: 10px;
	text-align: left;
}
.business_area .content_box {
	top: 40px;
	right: 0;
}
#business_image_area {
	position: absolute;
	top: 75px;
	left: 40px;
	width: 500px;
	height: 350px;
	padding: 10px;
	border: 1px solid #888888;
	background-color: #ffffff;
	box-shadow: 4px 4px 4px #555555;
}
#business_image_area > div {
	height: 100%;
	background: url( "/img/business_image.jpg?20260417" );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.business_title {
	font-weight: bold;
	font-size: 40px;
}
.business_notice {
	margin-top: 10px;
	margin-left: 40px;
	font-size: 18px;
	white-space: pre-line;
}
#goto_business_button {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 60px;
	font-weight: bold;
	font-size: 24px;
	line-height: 54px;
	text-align: center;
	border-radius: 30px;
	border: 4px solid #cccccc; 
	background: #008888;
	color: #ffffff;
	cursor: pointer;
	transition: margin-top 0.5s, width 0.5s, height 0.5s, border-radius 0.5s, line-height 0.5s;
}
#goto_business_button:hover {
	margin-top: 10px;
	color: #ffff00;
	width: 240px;
	height: 80px;
	border-radius: 40px;
	line-height: 72px;
}
/*==================================================================*/
.recruit_area {
	position: relative;
	display: inline-block;
	height: 500px;
	width: 100%;
	max-width: var( --content-max-width );
	z-index: +2;
	padding: 10px;
	text-align: left;
}
#recruit_image_area {
	position: absolute;
	top: 70px;
	right: 40px;
	width: 500px;
	height: 350px;
	padding: 10px;
	border: 1px solid #888888;
	background-color: #ffffff;
	box-shadow: 4px 4px 4px #555555;
}
#recruit_image_area > div {
	height: 100%;
	background: url( "/img/recruit_image.jpg?20260417" );
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.recruit_area .content_box {
	top: 40px;
	left: 0;
}
.recruit_title {
	font-weight: bold;
	font-size: 40px;
}
.recruit_notice {
	margin-top: 10px;
	margin-left: 30px;
	font-size: 18px;
	white-space: pre-line;
}
#goto_recruit_button {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 60px;
	font-weight: bold;
	font-size: 24px;
	line-height: 54px;
	text-align: center;
	border-radius: 30px;
	border: 4px solid #cccccc; 
	background: #008888;
	color: #ffffff;
	cursor: pointer;
	transition: margin-top 0.5s, width 0.5s, height 0.5s, border-radius 0.5s, line-height 0.5s;
}
#goto_recruit_button:hover {
	margin-top: 10px;
	color: #ffff00;
	width: 240px;
	height: 80px;
	border-radius: 40px;
	line-height: 72px;
}
/*==================================================================*/
/* タブレット用設定													*/
/*==================================================================*/
@media screen and (max-width: 961px ) {
	.pc_company_name_area {
		display: none;
	}
	.catch_copy_area {
		display: inline-block;
	}
	.mynavi_link_area {
		display: block;
	}
	.x_insta_link_area {
		bottom: 0;
		right: 0;
		left: auto;
	}
	.open_company_area img {
		transition-duration: 1s;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		transition-property: margin-left, margin-right, max-width;
	}
	.company_area {
		position: relative;
		display: inline-block;
		height: 620px;
	}
	.company_area .content_box {
		right: 50%;
		left: auto;
		transform: translateX( 50% );
	}
	#company_image_area {
		top: auto;
		bottom: 20px;
		right: 50%;
		width: 375px;
		height: 250px;
		transform: rotate(0deg) translateX( 50% );
	}
	.business_area {
		height: 620px;
	}
	.business_area .content_box {
		right: 50%;
		left: auto;
		transform: translateX( 50% );
	}
	#business_image_area {
		top: auto;
		bottom: 20px;
		left: auto;
		right: 50%;
		width: 375px;
		height: 250px;
		transform: translateX( 50% );
	}
	.recruit_area {
		height: 620px;
	}
	.recruit_area .content_box {
		right: 50%;
		left: auto;
		transform: translateX( 50% );
	}
	#recruit_image_area {
		top: auto;
		bottom: 20px;
		right: 50%;
		width: 375px;
		height: 250px;
		transform: translateX( 50% );
	}
}