@charset "UTF-8";
/* CSS Document */

body {
	width: 900px;
	margin: 0 auto;
	min-height: 100vh;
	background: #f5f5f5;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	color: #222;
}

#wrapper {
	width: 900px;
	background: #fff;
	min-height: 100vh;
}


header {
	height: 435px;
	padding: 0;
	position: relative;
}

.site_name {
	height: 60px;
	width: 900px;
	background-color: #0a717c;
	display: grid;
	grid-template-columns: 50% 50%;
	position: relative;
}

.top_logo {
	height: 60px;
    line-height: 60px;
}

.faq {
	width: 140px;
	position: absolute;
	top: 0px;
	right: 10px;
	z-index: 999;
	
	display: inline-block;
	filter: drop-shadow(0px 0px 6px #000);
	transition: .3s;
}

.faq:hover {
	filter: drop-shadow(0px 0px 6px #fff);
}

.header_images .header_images_works .header_images_faq .header_images_privacy .header_images_recruit .header_images_recruit {
	width: 100%;
	height: 375px;
}

/*index.html ヘッダーのスライドショー　ここから----------------*/
.slider {
	width: 100vw;
	height: 375px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

.slider div:first-of-type{
	background-image: url("images/hd_img_1.jpg");
}
.slider div:nth-of-type(2){
	background-image: url("images/hd_img_2.jpg");
	animation-delay: 10s; /* 秒数を変更 */
}
.slider div:last-of-type{
	background-image: url("images/hd_img_3.jpg");
	animation-delay: 20s; /* 秒数を変更 */
}
/*index.html ヘッダーのスライドショー　ここまで----------------*/

/*業務内容関連ページ ヘッダーのスライドショー　ここから-----------*/
.header_images_works .slider {
	width: 100vw;
	height: 375px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.header_images_works .slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

.header_images_works .slider div:first-of-type{
	background-image: url("images/hd_img_4.jpg");
}
.header_images_works .slider div:nth-of-type(2){
	background-image: url("images/hd_img_5.jpg");
	animation-delay: 10s; /* 秒数を変更 */
}
.header_images_works .slider div:last-of-type{
	background-image: url("images/hd_img_6.jpg");
	animation-delay: 20s; /* 秒数を変更 */
}
/*業務内容関連ページ ヘッダーのスライドショー　ここまで-----------*/

/*問い合わせページ ヘッダーのスライドショー　ここから-----------*/
.header_images_faq .slider {
	width: 100vw;
	height: 375px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.header_images_faq .slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

.header_images_faq .slider div:first-of-type{
	background-image: url("images/hd_img_７.jpg");
}
.header_images_faq .slider div:nth-of-type(2){
	background-image: url("images/hd_img_8.jpg");
	animation-delay: 10s; /* 秒数を変更 */
}
/*業務内容関連ページ ヘッダーのスライドショー　ここまで-----------*/

/*プライバシーポリシー ヘッダーのスライドショー　ここから-----------*/
.header_images_privacy .slider {
	width: 100vw;
	height: 375px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.header_images_privacy .slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

.header_images_privacy .slider div:first-of-type{
	background-image: url("images/hd_img_9.jpg");
}
.header_images_privacy .slider div:nth-of-type(2){
	background-image: url("images/hd_img_10.jpg");
	animation-delay: 10s; /* 秒数を変更 */
}
/*プライバシーポリシーページ ヘッダーのスライドショー　ここまで-----------*/

/*求人情報 ヘッダーのスライドショー　ここから-----------*/
.header_images_recruit .slider {
	width: 100vw;
	height: 375px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.header_images_recruit .slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

.header_images_recruit .slider div:first-of-type{
	background-image: url("images/hd_img_13.jpg");
}
.header_images_recruit .slider div:nth-of-type(2){
	background-image: url("images/hd_img_14.jpg");
	animation-delay: 10s; /* 秒数を変更 */
}
/*求人情報ページ ヘッダーのスライドショー　ここまで-----------*/

/*所在地 ヘッダーのスライドショー　ここから-----------*/
.header_images_location .slider {
	width: 100vw;
	height: 375px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.header_images_location .slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

.header_images_location .slider div:first-of-type{
	background-image: url("images/hd_img_11.jpg");
}
.header_images_location .slider div:nth-of-type(2){
	background-image: url("images/hd_img_12.jpg");
	animation-delay: 10s; /* 秒数を変更 */
}
/*所在地ページ ヘッダーのスライドショー　ここまで-----------*/

/*ヘッダーに重なるキャッチコピー　ここから----------------------*/
.header_body {
	position: relative;
}

.header_box {
	width: 600px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	background-color: rgba(255, 255, 255, 0.5);
	display: flex;
	mix-blend-mode: normal;
	z-index: 11;
}

.header_text {
	width: 100%;
	text-align: center;
	color: #000000;
	font-size: 3.0em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: normal;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	mix-blend-mode: normal;
	margin: auto;
	z-index: 12;
}

.header_text {
  animation: slideIn 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/*ヘッダーに重なるキャッチコピー　ここまで----------------------*/

.font_title_small {
	font-size: 0.7em;
	display: block;
	margin-top: -10px;
}

/*PC用ナビゲーションバー　ここから----------------------------*/
.pc_nav {
	grid-area: nav;
	height: 55px;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
	padding: 6px;
	background: #fff;
}
.pc_nav ol{
	display: table;
	margin: 0 auto;
	padding: 0;
	width: 80%;
	text-align: center;
}
.pc_nav ol li{
	display: table-cell;
	min-width: 50px;
	border-right: 1px solid #ccc;
}
.pc_nav ol li:first-child{
	border-left: 1px solid #ccc;
}
.pc_nav ol li a{
	display: block;
	width: 100%;
	padding: 10px 0;
	text-decoration: none;
	color: #000;
}
.pc_nav ol li a:hover{
	background-color:#f2fded;
	border-bottom: 5px solid #87edd3;
}
.pc_nav ol li.current{
	font-weight: bold;
}
.pc_nav ol li.current a{
	border-bottom: 5px solid #87edd3;
	color: #0a717c;
}
/*PC用ナビゲーションバー　ここまで----------------------------*/

/*パンくずリスト　ここから-----------------------------------*/
.breadcrumb-001 {
    display: flex;
    gap: 0 22px;
    list-style: none;
    padding: 0;
    font-size: .8em;
	height: 40px;
	padding-left: 25px;
	background: #fff;
}

.breadcrumb-001 li {
    display: flex;
    align-items: center;
}

.breadcrumb-001 li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb-001 li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
    content: '';
}

.breadcrumb-001 a {
    color: #999999;
    text-decoration: none;
}
/*パンくずリスト　ここまで-----------------------------------*/

li {
	list-style: none;
}

.main_1column {
	grid-area: main;
	margin-top: 80px;
	min-height: 100vh;
}

.main_2column {
	grid-area: main;
	margin-top: 20px;
	min-height: 100vh;
}

.index_1 {
	width: 80%;
	margin: 0 auto;
	margin-bottom: 80px;
}

.index_1 h3 {
	text-align: center;
	height: 2.2em;
	background: linear-gradient(180deg, #fff, #e5e5e5);
	line-height: 2.2em;
	margin-bottom: 15px;
	border: 1px #ccc solid;
	border-bottom: 5px #0a717c solid;
}

.index_main_img {
	width: 80%;
	margin: 0 auto;
	height: 360px;
	background: url("images/index_main_img.jpg");
	background-attachment: fixed;
	background-size: cover;
	margin-bottom: 35px;
}

.index_2 {
	width: 80%;
	margin: 0 auto;
}

.index_2 h3 {
	text-align: center;
	height: 2.2em;
	background: linear-gradient(180deg, #fff, #e5e5e5);
	line-height: 2.2em;
	margin-bottom: 15px;
	border: 1px #ccc solid;
	border-bottom: 5px #9dc6cb solid;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*業務内容　　メインの2カラム　ここから------------------------*/
.works_main {
	display: grid;
	grid-template-columns: 250px 1fr;
	min-height: 100vh;
}

aside {
	margin-left: 20px;
	padding-top: 20px;
	background: #f2fded;
	max-height: 60vh;
	min-height: 400px;
}

aside a:hover {
	color: #0a717c;
}

aside ol {
	text-decoration: none;
	padding-left: 20px;
}

aside ol p {
	height: 30px;
	background: #0a717c;
	color: #fff;
	font-weight: bolder;
	text-align: center;
	margin: 0 20px 10px 0;
	line-height:30px;
}

aside li {
	line-height: 2.5em;
	background: url(https://visionplanning.work/test/trinity/images/list_icon.png) left 0px top 12px no-repeat;
	background-size: 15px auto;
	padding-left: 20px;
	
}

.works_title {
	text-align: center;
	height: 2.2em;
	background: linear-gradient(180deg, #fff, #e5e5e5);
	line-height: 2.2em;
	margin-bottom: 15px;
	border: 1px #ccc solid;
}

.works_button img {
	max-width: 250px;
}

/*業務内容　　メインの2カラム　ここまで------------------------*/

article {
	padding: 0 20px;
	background: #fff;
}

article h2 {
	text-align: center;
	height: 2.2em;
	background: linear-gradient(180deg, #fff, #e5e5e5);
	line-height: 2.2em;
	margin-bottom: 15px;
	border: 1px #ccc solid;
	border-bottom: 5px #0a717c solid;
}

article p {
	margin: 0 30px;
	
}

article ol {
	margin-top: 60px;
	padding: 0 50px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 10px;
	row-gap: 20px;
}
.works_icons img {
	transition: 0.3s ease;
}

.works_icons img:hover {
	filter: brightness(115%);	
}

.works_button {
	text-align: center;
	margin-bottom: 30px;
}

.works_button img {
	margin: 0 auto;
	transition: 0.3s ease;
}

.works_button img:hover {
	filter: brightness(115%);	
}

footer {
	grid-area: footer;
	height: 140px;
	margin-top: 100px;
	
}

.footer_upper {
	height: 100px;
	background: #f2fded;
	padding: 45px;
	font-size: 0.9em;
}

.footer_upper ol{
	padding: 0;
	text-align: center;
	font-size: 0.8em;
}
.footer_upper li{
	list-style: none;
	display: inline-block;
	min-width: 60px;
	text-align: center;
}
.footer_upper li:not(:last-child){
	border-right:1px solid #666;
}
.footer_upper a{
	text-decoration: none;
	color: #666;
}
.footer_upper a.current_2{
	color: #0a717c;
	border-bottom:2px solid #0a717c;
}
.footer_upper a:hover{
	color:#0a717c;
	border-bottom:1px solid #0a717c;
}

.footer_bottom {
	height: 40px;
	background: #0a717c;
	color: #fff;
	font-size: 0.9em;
	line-height:40px;
	text-align: center;
}

.privacy_bnr {
	width: 250px;
	height: 50px;
	background: #0a717c;
	margin: 0 auto;
	color: #ffffff;
	font-weight: 600;
	border-radius: 14px;
	text-align: center;
	line-height: 50px;
	margin-top: 60px;
}

.privacy_bnr:hover {
	background: #92C6CC;
	margin: 0 auto;
	color: #0a717c;
	border-radius: 14px;
	text-align: center;
	line-height: 50px;
	margin-top: 60px;
}

.privacy_bnr a {
	text-decoration: none;
}

/*求人の詳細のページの表について　ここから-----------------*/
.job-details {
	max-width: 800px;
	margin: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	overflow: hidden;
}

.job-details_title {
	line-height: 1em;
	background: #666666;
	color: #ffffff;
	font-weight: bold;
	width: 100%;
	text-align: center;
	border: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: 16px;
	border-bottom: 1px solid #ddd;
	text-align: left;
	font-size: 16px;
}

th {
	background: #f0f0f0;
	font-weight: bold;
	width: 30%;
}

td {
	background: #ffffff;
}
/*求人の詳細のページの表について　ここまで-----------------*/
.recruit_main {
	text-align: center;
}

.entry_btn {
	display: inline-block;
	width: 70%;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
	text-decoration: none;
	line-height: 60px;
	color: #FFFFFF;
	background: #4ba6ee;
	border-radius: 16px;
	font-weight: bold;
}

.entry_btn:hover {
	background: #0a717c;
}


/*///////////////////////////////////////////////////////*/
/*レスポンシブ対応　ここから---------------------------------*/
/*///////////////////////////////////////////////////////*/
@media (min-width: 768px) {
	
	/*ハンバーガーメニューを非表示*/
	.sp_nav {
		display: none;
	}
}

@media (max-width: 768px) {
	
	/*問い合わせ画像を非表示*/
	.faq {
		display: none;
	}
	
	/*PC用ナビゲーションを非表示*/
	.pc_nav {
		display: none;
	}
	
	/*.site_nameを画面上辺に固定する*/
	.site_name {
		position: fixed;
		z-index: 13;
	}	
	
	/*ハンバーガーメニュー　ここから----------------------------------*/
	/*============
	nav
	=============*/
	.sp_nav {
		display: block;
		position: fixed;
		top: 0;
		left: -300px;
		bottom: 0;
		width: 300px;
		background: #0a717c;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: all .5s;
		z-index: 14;
		opacity: 0;
	}
	
	.open .sp_nav {
		left: 0;
		opacity: 1;
	}
	
	.sp_nav .inner {
		padding: 25px;
	}
	
	.sp_nav .inner ol {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.sp_nav .inner > ol li {
		position: relative;
		margin: 0;
		border-bottom: 1px solid #fff;
	}
	
	.sp_nav .inner ol li a {
		display: block;
		color: #fff;
		font-size: 14px;
		padding: 1em;
		text-decoration: none;
		transition-duration: 0.2s;
	}
	
	.sp_nav .inner ol li a:hover {
		background: #87edd3;
		color: #0a717c;
	}
	
	@media screen and (max-width: 768px) {
		
		.sp_nav {
			left: -220px;
			width: 220px;
		}
	}
	
	/*============
	.toggle_btn
	=============*/
	.toggle_btn {
		display: block;
		position: fixed;
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		transition: all .5s;
		cursor: pointer;
		z-index: 15;
		background: #00737E;
	}
	
	.toggle_btn span {
		display: block;
		position: absolute;
		left: 0;
		width: 30px;
		height: 2px;
		background-color: #fff;
		border-radius: 4px;
		transition: all .5s;
	}
	
	.toggle_btn span:nth-child(1) {
		top: 9px;
		left: 5px;
	}
	
	.toggle_btn span:nth-child(2) {
		top: 19px;
		left: 5px;
	}
	
	.toggle_btn span:nth-child(3) {
		bottom: 9px;
		left: 5px;
	}
	
	.open .toggle_btn span {
		background-color: #fff;
	}
	
	.open .toggle_btn span:nth-child(1) {
		-webkit-transform: translateY(10px) rotate(-315deg);
		transform: translateY(10px) rotate(-315deg);
	}
	
	.open .toggle_btn span:nth-child(2) {
		opacity: 0;
	}
	
	.open .toggle_btn span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(315deg);
		transform: translateY(-10px) rotate(315deg);
	}
	
	/*============
	#mask
	=============*/
	#mask {
	display: none;
		transition: all .5s;
	}
	
	.open #mask {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: .8;
		z-index: 13;
		cursor: pointer;
	}
	
	.sp_nav .inner > ol li:nth-child(3) {
		border-top: 1px solid #fff;
	}
	
	
	/*サブメニューに関する記述　ここから----------------------------------*/	
	
	.tap_toggle {
		display: none;
	}
	.Label {		/*タイトル*/
		display: block;
		color: #fff;
		font-size: 14px;
		padding: 1em;
		border-bottom: 0px;
	}
	.Label::before{		/*タイトル横の矢印*/
		content:"";
		width: 6px;
		height: 6px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		position: absolute;
		top:calc( 50% - 3px );
		right: 20px;
		transform: rotate(135deg);
	}
	.Label,
	.content {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform: translateZ(0);
		transition: all 0.3s;
	}
	.content {		/*本文*/
		height: 0;
		padding:0;
		overflow: hidden;
		background: #006b75;
	}
	.tap_toggle:checked + .Label + .content {	/*開閉時*/
		height: auto;
		padding: 0;
		transition: all .3s;
	}
	.tap_toggle:checked + .Label::before {
		transform: rotate(-45deg) !important;
	}

	.sp_nav .inner .sub_menu {
		position: relative;
		margin: 0;
		border-bottom: 2px dotted #003c41;
	}
	
	.sp_nav .inner .sub_menu:first-child {
		border-top: 2px dotted #003c41;
	}
	
	.sp_nav .inner .sub_menu:nth-child(2) {
		border-bottom: 2px dotted #003c41;
	}
	
	.sp_nav .inner .sub_menu:nth-child(3) {
		border-top: 0px;
	}
	.sp_nav .inner .sub_menu:last-child {
		border-bottom: 0px;
	}

	/*サブメニューに関する記述　ここまで----------------------------------*/	
	/*ハンバーガーメニュー　ここまで----------------------------------*/	

	body {
		max-width: 768px;
		width: 100%;
		margin: 0 auto;
	}
	
	#wrapper {
		max-width: 768px;
		width: 100%;
		background: #fff;
		min-height: 100vh;
	}
	
	header {
		width: 100%;
		position: relative;
	}
	
	.breadcrumb {
		position: absolute;
		top: 445px;
	}
	
	.site_name {
		margin-top: -60px; /*画面上部に固定するため高さ分だけ上に上げる*/
	}
	
	.header_body{
		margin-top: 60px; /*.site_nameの高さ分だけ下に下げる*/
	}
	
	.header_box {
		width: 450px;
		height: 220px;
	}

	.header_text {
		font-size: 2.5em;
	}
	
	.index_1 {
		width: 95%;
		margin: 0 auto;
		margin-top: -80px;
		margin-bottom: 80px;
	}

	.index_1 h3 {
		height: 2.2em;
		font-size: 1.0em;
		
	}

	.index_main_img {
		width: 95%;
		margin: 0 auto;
		height: 360px;
		background: url("images/index_main_img.jpg");
		background-attachment: inherit;
		background-size: cover;
		margin-bottom: 35px;
	}

	.index_2 {
		width: 95%;
		margin: 0 auto;
	}

	.index_2 h3 {
		height: 2.2em;
		font-size: 1.0em;
	}
	
	.works_title {
		height: 2.2em;
		font-size: 1.0em;
	}
	
	.works_main {
		display: block;
		grid-template-columns: 100%;
		min-height: 100vh;
	}
	
	aside {
		display: none;
	}
	
	
	article {
		width: 95%;
		padding: 0;
		margin: 0 auto;
	}

	article p {
		margin: 0;
	}

	article ol {
		padding: 0 30px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	footer {
		height: 80px;
		margin-top: 100px;

	}

	.footer_upper {
		height: 50px;
		background: #f2fded;
		font-size: 0.9em;
	}
	


	.footer_bottom {
		height: 30px;
		background: #0a717c;
		color: #fff;
		font-size: 0.8em;
		line-height:30px;
		text-align: center;
	}
	
	th, td {
		padding: 12px;
		font-size: 15px;
	}
}

@media (max-width: 428px) {
	
	.site_name img {
		height: 50px;
		margin-top: 5px;
		margin-left: -5px;
	}
		
	header {
		height: 335px;
	}
	
	.header_images .slider {
		height: 275px;
	}
	
	.header_images_works .slider {
		height: 275px;
	}
	
	.header_images_faq .slider {
		height: 275px;
	}
	
	.header_images_privacy .slider {
		height: 275px;
	}
	
	.header_images_recruit .slider {
		height: 275px;
	}
	
	.header_images_location .slider {
		height: 275px;
	}
	
	.header_box {
		width: 360px;
		height: 200px;
	}

	.header_text {
		font-size: 2.0em;
	}
	
	.breadcrumb {
		top: 345px;
	}
	
	.main_1column {
		margin-top: -30px;
	}
	
	.main_1column p {
		width: 95%;
		margin: 0 auto;
	}

	.index_1 {
		width: 95%;
		margin: 0 auto;
		margin-bottom: 60px;
	}

	.index_1 h3 {
		font-size: 0.9em;
		height: 2.2em;
		line-height: 2.2em;
	}

	.index_2 {
		width: 95%;
		margin: 0 auto;
	}

	.index_2 h3 {
		font-size: 0.9em;
		height: 2.2em;
		line-height: 2.2em
	}
	
	.works_title {
		font-size: 0.9em;
	}
	
	article ol {
		padding: 0 30px;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	
	article h2 {
		margin-bottom: 20px;
	}
	
	article p {
		width: 95%;
		margin: 0 auto;
	}

	.footer_upper {
		padding: 0px;
	}

	.footer_upper li {
		margin: 15px 0;		
	}
	.footer_upper li:last-child{
		
	}
	
	.job-details {
		overflow: visible;
	}
	
	  table, tbody, tr, th, td {
		display: block;
		width: 100%;
	}

	tr {
		margin-bottom: 12px;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
	}

	th {
		background: #f8f8f8;
		font-size: 14px;
		padding: 12px;
		border-bottom: 1px solid #eee;
	}

	td {
		font-size: 14px;
		padding: 12px;
		background: #fff;
	}
}