@charset "utf-8";
@font-face {
	font-family: 'Town 10 Display';
	src: url('font/town-10-display-bold.ttf') ;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&family=Noto+Serif+JP:wght@200;400;700&family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,100;1,400;1,700;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
/*
Theme Name: TDHD MID CAREERS
Description: TDHD中途採用サイトのテーマ
Author: STAR STUDIO Co., Ltd.
Author URI: https://starstudio-design.com/
Version: 1.0.2
*/

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* OTHER SETTING */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
a{color: #074c81;}
a:hover{color: #5181a6;}
a.pointer-none{pointer-events: none;}

.frame-white{ border: 0.0625em solid #ffffff;}
.frame-lgray{ border: 0.0625em solid #F4F4F4;}
.frame-gray{ border: 0.0625em solid #7c7c7c;}
.frame-black{ border: 0.0625em solid #1a1a1a;}
.frame-dgray{ border: 0.0625em solid #727171;}
.frame-lblack{ border: 0.0625em solid #6e6e6e;}
.frame-anchor{ border: 0.0625em solid #074c81;}

.bg-white{ background-color: #FFFFFF;}
.bg-lgray{ background-color: #F4F4F4;}
.bg-gray{ background-color: #7c7c7c;}
.bg-black{ background-color: #1a1a1a;}
.bg-dgray{ background-color: #727171;}
.bg-lblack{ background-color: #6e6e6e;}
.bg-anchor{ background-color: #074c81;}

.c-white{ color: #FFFFFF;}
.c-lgray{ color: #F4F4F4;}
.c-gray{ color: #7c7c7c;}
.c-black{ color: #1a1a1a;}
.c-dgray{ color: #727171;}
.c-lblack{ color: #6e6e6e;}
.c-anchor{ color: #074c81;}

.hover-op07:hover,
.hover-op07:hover img{opacity: .7;}

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* COMMON */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* FONT FAMILY */
body {
	font-family: 'Roboto', 'Noto Sans JP', sans-serif, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.ff-roboto{font-family: 'Roboto', sans-serif;}

/* SIZE */
body{font-size: 3.72vw;}
p{font-size: 1em;}
.wrap{width: 86.05%; box-sizing: border-box; margin: 0 auto; }
@media screen and (min-width: 768px){
	body{font-size: 1.55vw;}
	.wrap{width: 97.74%;}
}
@media screen and (min-width: 960px){
}
@media screen and (min-width: 1280px){
	body{font-size: 1.25vw;}
	.wrap{width: 92.1875%;}
}

.scrollTop {
	position: fixed;
	right: 1em;
	bottom: 1em;
	opacity: 0;
	z-index: 10000;
	transition: all 0.4s ease-in-out 0s;
}
.scrollTop a {
	box-sizing: border-box;
	border: .12em solid #707070;
	background-color: #707070;
	color: #FFFFFF;
	width: 2.5em;
	height: 2.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1.5em;
	text-decoration: none;
}
.scrollTop a i{font-size: 1.5em;}
.scrollTop a:hover{
	color: #707070;
	background-color: #E5E5E5;
}

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* HEADER */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
.menu-trigger{
	display: block;
	background: none;
	border: none;
	padding: 0;
	width: 4.5em;
	height: 4.5em;
	color: #1A1A1A;
	letter-spacing: 0.1em;
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 3000;
	text-align: center;
	outline: none;
	transform: translateX(0);
  transition: all .5s;
}
/*   ハンバーガーボタン   */
.menu-trigger::after{
	font-family: "Font Awesome 6 Free","Font Awesome 6 Brands";
	content:'\f0c9';
	transition:  all 2s ease-out;
	font-size: 2em;
	font-weight:900;
	top: 50%;left: 50%;
	position: fixed;
	transform: translate(-50% , -50%);
}
/*  メニューアクティブ時  */
.menu-trigger.active::after {
	content:'\f00d';
	transition: all .5s;
}
.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}
.overlay.open {
  width: 100%;
  height: 100%;
  opacity: 1;
}
nav.drawer-innner{
  width: 76.7vw;
  height: 100%;
	box-sizing: border-box;
	padding: 4.5em 2.5em 2.5em;
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  transform: translate(100%);
  transition: all .5s;
}
nav.drawer-innner.open {
  transform: translateZ(0);
	z-index: 1000;
}
nav.drawer-innner ul.category-menu{
	list-style-type: none;
	text-align: right;
	font-family: 'Roboto', sans-serif;
	font-size: 1.5em;
	line-height: 1;
	padding: 0;
	margin: 0;
	margin-right: -.7em;
}
nav.drawer-innner ul.category-menu a{
	box-sizing: border-box;
	display: block;
	color: #302D2C;
	padding: 0.7em 0.5em;
	text-decoration: none;
}
nav.drawer-innner ul.category-menu a:hover{
	color: #645E5D;
}
nav.drawer-innner ul.category-menu > li{
	margin-bottom: .5em;
}
nav.drawer-innner .sns-list p.tac{
	margin-top: 3em;
	font-size: .78em;
	position: relative;
}
nav.drawer-innner .sns-list p.tac::before{
	position: absolute;
	content: '';
	height: 2em;
	width: .06em;
	background-color: #302d2c;
	top: 50%;
	left: 50%;
	transform: translateX(-4em) translateY(-50%) rotate(-45deg);
}
nav.drawer-innner .sns-list p.tac::after{
	position: absolute;
	content: '';
	height: 2em;
	width: .06em;
	background-color: #302d2c;
	top: 50%;
	right: 50%;
	transform: translateX(4em) translateY(-50%) rotate(45deg);
}

nav.drawer-innner .sns-list ul{
	padding: 0;
	list-style-type: none;
	width: 11em;
	margin: 1em auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
nav.drawer-innner .sns-list ul a img{
	width: 2.5em;
	height: auto;
}
nav.drawer-innner .sns-list ul a:hover img{filter: grayscale(50%);}

.to-corp{
	width: 11em;
	margin: auto;
	padding: 1em auto 2em;
	display: flex;
	justify-content: center;
}
.to-corp a{
	text-align: center;
}
.to-corp a img{
	text-align: center;
	width: 5.5em;
}
.to-corp a:hover img{filter: sepia(90%) contrast(75%);}
#header{ display: none;}
@media screen and (min-width: 768px){
	.menu-trigger{display: none;}
	#header{
		z-index: 10;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		height: 6.25em;
	}
	#header.with-others{
		background-color: #fff;
	}
	#header .wrap{
		height: 100%;
		display: flex;
		align-items: center;
	}
	#header h1{
		font-family: 'Town 10 Display';
		padding: 0;
		margin: 0;
		height: 100%;
		font-size: 2.5em;
		margin-right: .7em;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#header .g-nav ul{
		list-style-type: none;
		padding: 0;
		margin: 0;
		margin-right: 5em;
		height: 6.25em;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	#header .g-nav ul li{
		box-sizing: border-box;
		padding: 1em 0;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#header .g-nav ul li a{
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		text-decoration: none;
		color: #1a1a1a;
		width: 100%;
		height: 100%;
		margin: .5em 0;
		padding: .5em;
		border-top: .24em solid transparent;
		border-bottom: .24em solid transparent;
	}
	#header .g-nav ul li a:hover,
	#header .g-nav ul li.current a{
		border-bottom: .24em solid #000;
	}
	#header .external-link{
		position: absolute;
		right: 1.13em;
		top: 2em;
		width: 4.25em;
	}
	#header .external-link .to-corp{
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
	}
	#header .external-link .to-corp a{
		display: block;
		padding: .5em 0;
	}
	#header .external-link .to-corp a img{
		text-align: center;
		width: 100%;
	}
	#header .external-link .sns-list ul{
		padding: 0;
		list-style-type: none;
		width: 2.25em;
		margin: auto;
		margin-right: .1em;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	#header .external-link .sns-list ul a img{
		width: 2.25em;
		height: auto;
	}
	#header .external-link .sns-list ul li{
		margin-top: .3em;
		margin-bottom: .3em;
	}
	#header .external-link .sns-list ul a:hover img{filter: grayscale(50%);}
}

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* FOOTER */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
#footer{
	background-color: #EAEAEA;
	padding: 0;
	margin: 0;
	margin-top: 1em;
}
#footer .wrap{
	padding-top: 3em;
	padding-bottom: 3em;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#footer .wrap > ul{
	list-style-type: none;
	padding-left: 0;
	font-size: .625em;
}
#footer .wrap > ul li{
	padding-top: .25em;
	padding-bottom: .25em;
}
#footer .wrap > ul a{
	color: #1a1a1a;
}
#footer .logo{
	font-family: 'Town 10 Display';
	font-size: 2em;
	width: 8.75em;
	text-align: center;
}
#footer .sns-list ul{
	padding: 0;
	list-style-type: none;
	width: 8.75em;
	margin: 1em auto 2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#footer .sns-list ul a img{
	width: 2.25em;
	height: auto;
}
#footer .sns-list ul a:hover img{filter: grayscale(50%);}
@media screen and (min-width: 768px){
	#footer .wrap{
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
	#footer .wrap > ul{
		text-align: right;
		font-size: .875em;
	}
	#footer .logo{
		width: 7.32em;
		text-align: left;
	}
	#footer .sns-list ul{
		margin-left: 0;
	}

}

/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* MAIN */
/* - - - - - - - - - - - - - - - - - - - - - - -*/
/* hero */
#hero{
	position: relative;
	z-index: 0;
}
#hero .banner{
	position: absolute;
	width: 21.625em;
	left: 50%;
	transform: translateX(-50%);
	bottom: 2.25em;
}
#hero .banner img{
	width: 100%;
	box-shadow: 0 0.18em 0.375em rgba(0,0,0,0.16);
}
#hero .banner a:hover img{filter: grayscale(50%);}
@media screen and (min-width: 768px){
	#hero .banner{
		left: auto;
		transform: translateX(0);
		right: 2.625%;
		bottom: 3.9375em;
	}
}
@media screen and (min-width: 1280px){
	#hero .banner{
		right: 3.98%;
		bottom: 1.3em;
	}



}

/* SECTION */
main > section{
	margin: 0;
	padding: 0;
	padding-top: 2em;
	padding-bottom: 5em;
	position: relative;
	background-color: #fff;
}
main > section:nth-child(odd){
	background-color: #f4f4f4;
}
h2{
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	text-align: center;
	font-weight: 100;
	font-size: 3.375em;
}
#area-1 h2,#area-2 h2{
	font-size: 2.5em;
}
#area-8 h2,#area-9 h2{
	font-size: 1.5em;
}
.index{text-align: center;margin-bottom: 5em;}
.index h3{font-family:'Noto Sans JP',sans-serif;font-size: 1.5em;}
.index p{font-size: 1em;line-height: 1;}
.inner-wrap{width: 100%;margin: auto;}
.learn-more-link a{
	position: relative;
	display: inline-block;
	margin-left: 1.5em;
	color: #000;
	text-decoration: none;
}
.learn-more-link a:before{
	position: absolute;
	font-family: 'Font Awesome 6 Free';
	font-weight: bold;
	content: '\f054';
	display: inline;
	top: 50%;
	left: -1.5em;
	transform: translateY(-50%);
}
.learn-more-link a:hover{
	color: #5A5A5A;
}
.title-speech-bubble{
	font-weight: bold;
	font-size: 1.5em;
	line-height: 2 !important;
	width: 7.83em;
	text-align: center;
	background: #fff;
	border: .15em solid #000;
	border-right-width: .22em;
	border-bottom-width: .22em;
	position: relative;
	margin-bottom: 3em;
}
.title-speech-bubble::before{
	position: absolute;
	box-sizing: border-box;
	width: 0;
	height: 0;
	content:'';
	border-bottom: .7em solid transparent;
	border-left: .6em solid transparent;
	border-top: .7em solid #000;
	border-right: .6em solid #000;
	right: 1em;
	bottom: -1.56em;
}
.title-speech-bubble::after{
	position: absolute;
	box-sizing: border-box;
	width: 0;
	height: 0;
	content:'';
	border-bottom: .6em solid transparent;
	border-left: .5em solid transparent;
	border-top: .6em solid #fff;
	border-right: .5em solid #fff;
	right: 1.2em;
	bottom: -1em;
}

@media screen and (min-width: 768px){
	main section .wrap{
		margin-top: -6.25em;
		padding-top: 6.25em;
	}
	#area-8 h2,#area-9 h2{
		font-size: 3.375em;
	}

}

/* EACH */
@media screen and (min-width: 768px){
	.inner-wrap{/* 1,2,3,4,6,7 */ width: 91.37%;}
	#area-5 .inner-wrap{ width: 91.17%;}
	#area-8 .inner-wrap,#area-9 .innner-wrap{ width: 88%;}
}
@media screen and (min-width: 1280px){
	.inner-wrap{/* 1,4,6 */ width: 89.83%;}
	#area-2 .inner-wrap,#area-3 .innner-wrap{ width: 78.81%;}
	#area-5 .inner-wrap{ width: 75.25%;}
	#area-7 .inner-wrap{ width: 74.4%;}
	#area-8 .inner-wrap,#area-9 .innner-wrap{ width: 72.7%;}
}

#area-1 p{ line-height: 2.5;margin-bottom: 2em;}
@media screen and (min-width: 768px){
	#area-1 p{ line-height: 3.125;}
}

.business-card{
	width: 100%;
	margin-bottom: 5em;
}
.business-card a{
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 100%;
}
.business-card .business-name{
	display: flex;
	align-items: center;
	margin-bottom: 1em;
}
.business-card .business-name .logo-base{
	width: 3.43em;
	height: 3.43em;
}
.business-card .business-name .logo-base img{
	width: 100%;
}
.business-card .business-name dl{
	padding-left: .5em;
	margin-top: 0;
	margin-bottom: 0;
}
.business-card .business-name dl dt{
	font-weight: bold;
	color: #000;
	font-size: 1.3em;
	line-height: 1.5;
	letter-spacing: .01em;
}
.business-card .business-name dl dd{
	margin-left: 0;
	font-size: .75em;
	color: #7C7C7C;
	line-height: 1.1;
}
.business-card .image{
	width: 100%;
	overflow: hidden;
  position: relative;
}
.business-card .image:after{
  display: block;
  padding-top: 61.97%;
  content: '';
}
.business-card .image img{
	position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  max-width: 101%;
  max-height: 101%;
  transform: translate(-50%, -50%);
}
.business-card .text{
	color: #000;
}
.business-card .text p{
	line-height: 1.75;
}
.business-card a:hover{color: #707070;}
.business-card a:hover img{filter: grayscale(50%);}
@media screen and (min-width: 768px){
	.business-lists{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	}
	.business-card{
		width: 45.9%;
	}
	.business-card .business-name .logo-base{
		width: 2.5em;
		height: 2.5em;
	}
	.business-card .business-name dl{
		padding-left: .7em;
	}
	.business-card .business-name dl dt{
		font-size: 1.45em;
	}
}
@media screen and (min-width: 960px){
	.business-card{
		width: 43.74%;
	}
	.business-card .business-name .logo-base{
		width: 3.43em;
		height: 3.43em;
	}
	.business-card .business-name dl dt{
		font-size: 1.3em;
	}
}

#area-3 p{ line-height: 2.5;margin-bottom: 2em;}
#area-3 .comment{	position: relative;margin-bottom: 5em;}
#area-3 .comment:before{
	position: absolute;
	display: block;
	content:'';
	height: 0.3em;
	width: 100vw;
	top: 1.5em;
	left: 50%;
	transform: translateX(-50%);
	background-color: #707070;
}
#area-3 .comment > div h3{ font-size: 1.25em;font-weight: normal; margin-bottom: 2em;}
#area-3 .comment > div .image{ width: 100%;}
#area-3 .comment > div .image img{width: 100%;}
figure.link-feature{
	padding: 0;
	margin-top: 1em;
	margin-bottom: 1em;
	max-width: 768px;
}
figure.link-feature .image{
	width: 100%;
	overflow: hidden;
  position: relative;
	background-color: #DEDEDE;
}
figure.link-feature .image:after{
  display: block;
  padding-top: 60%;
  content: '';
}
figure.link-feature .image img{
	position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  max-width: 100.5%;
  max-height: 100.5%;
  transform: translate(-50%, -50%);
}
figure.link-feature figcaption{
	text-align: center;
	font-size: 1.75em;
	line-height: 1.75;
	padding-top: .3em;
	padding-bottom: .3em;
}
figure.link-feature a{
	color: #1A1A1A;
	text-decoration: none;
}
figure.link-feature a:hover{color: #707070;}
figure.link-feature a:hover img{filter: grayscale(50%);}
#area-3 figure.link-feature{width: 91.35%;}
#area-3 figure.link-feature figcaption{font-size: 1.375em;}
@media screen and (min-width: 768px){
	#area-3 p{ line-height: 3.75;}
	#area-3 .comment p{ line-height: 3;}
	#area-3 .comment > div{
		padding-top: 5em;
		padding-bottom: 5em;
		display: flex;
		justify-content: space-between;
	}
	#area-3 .comment > div h3{ font-size: 2.5em;margin-top: 0;width: 49.9%;line-height: 1.375;}
	#area-3 .comment > div .image{width: 49.9%;}
	#area-3 figure.link-feature{width: 41.47%;}
	#area-3 figure.link-feature figcaption{font-size: 1.75em;}
}
@media screen and (min-width: 1280px){
	#area-3 .comment > div{
		width: 79.23%;
		margin-left: auto;
		margin-right: auto;
	}
	#area-3 figure.link-feature{width: 34.23%;}
}

#area-4 dl{font-size: 1.125em;line-height: 2.2;margin-bottom: 3em;}
#area-4 dl dt{font-weight: bold;}
#area-4 dl dd{margin-left: 0;text-indent: 1em;}
@media screen and (min-width: 768px){
	#area-4 .index h3{font-size: 2.5em;}
	#area-4 .index p{font-size: 1.5em;}
	#area-4 .image{margin-bottom: 3em;}
	#area-4 dl{line-height: 3.3;}
}

@media screen and (min-width: 768px){
	#area-5 .inner-wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#area-5 figure.link-feature{
		width: 45.49%;
		margin-bottom: 4em;
	}
}

#area-6 p{ line-height: 2.5;margin-bottom: 2em;}
@media screen and (min-width: 768px){
	#area-6 p{ line-height: 3.75;margin-bottom: 3em;}
}

.interview-list-item{
	margin-bottom: 1.5em;
}
.interview-list-item a{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	text-decoration: none;
	color: #1a1a1a;
	line-height: 1.5;
}
.interview-list-item .image{
	width: 47.48%;
	overflow: hidden;
  position: relative;
	background-color: #DEDEDE;
}
.interview-list-item .image:after{
  display: block;
  padding-top: 60%;
  content: '';
}
.interview-list-item .image img{
	position: absolute;
  width: auto;
  height: 100.5%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.interview-list-item .text{
	width: 47.7%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.interview-list-item .text .full-name{font-size: 1.75em;line-height: 1;}
.interview-list-item a:hover{color: #707070;}
.interview-list-item a:hover .image img{filter: grayscale(50%);}
@media screen and (min-width: 768px){
	#area-7 .inner-wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	.interview-list-item{
		width: 46.85%;
		margin-bottom: 4em;
	}
	.interview-list-item .image{width: 50.9%;}
	.interview-list-item .text{width: 43.7%;}
}

#area-8 dl{
	line-height: 2.5;
	margin-bottom: 2em;
}
#area-8 dt,#area-8 dd{
	margin-left: 1.5em;
	padding-left: 1.2em;
	text-indent: -1.2em;
}
#area-8 dt::before,#area-8 dd::before{
	display: inline-block;
	font-weight: normal;
	width: 1.2em;
	content: attr(list-style-type);
}
@media screen and (min-width: 768px){
	#area-8 dl{line-height: 1.375;}
}

.job-list{
  position: relative;
	background-color: #fff;
	overflow: hidden;
	width: 100%;
	box-shadow: 0 0.18em 0.375em rgba(0,0,0,0.16);
	margin-bottom: 3em;
	cursor: pointer;
}
.job-list:after{
  display: block;
  padding-top: 53.33%;
  content: '';
}
.job-list .category,
.job-list .summary{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.job-list .summary.hidden {
  display: none;
}

.job-list .category{
	display: flex;
	align-items: center;
}
.job-list .category h3{
	font-size: 1.5625em;
	line-height: 1;
	padding: 0;
	margin: 0;
}
.job-list .category h3::before{
	display: inline-block;
	content:'';
	width: 1.52em;
	height: 1em;
	background-color: #707070;
	margin-right: .5em;
}
#soft.job-list .category h3::before,
#herd.job-list .category h3::before,
#design.job-list .category h3::before,
#manufacture.job-list .category h3::before{background-color: #DB87FF;}
#sales.job-list .category h3::before,
#marketing.job-list .category h3::before{background-color: #BFAD69;}
#clerical.job-list .category h3::before{background-color: #2141E4;}
#management.job-list .category h3::before{background-color: #000000;}

.job-list .summary{
	background-color: #EDEDED;
}
.job-list .summary ul{
	list-style-type: none;
}
#soft.job-list .summary ul{font-size: .85em;}
#herd.job-list .summary ul{font-size: .7em;}

.link-btn a{
	font-size: 1.75em;
	margin: 2em auto 0;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	letter-spacing: .12em;
	display: inline-block;
	border: .125em solid #1A1A1A;
	background-color: #1A1A1A;
	color: #FFFFFF;
	border-radius: .2em;
	padding: 1em;
	width: 100%;
	box-sizing: border-box;
}
.link-btn a:hover{
	color: #1A1A1A;
	background-color: #FFFFFF;
}

@media (min-width: 768px){
	#area-9 .inner-wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	#area-9 .inner-wrap:last-child{
		display: block;
	}
	.job-list{
		width: 47.2%;
	}
	.link-btn-base{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1.3em;
	}
}