@charset "UTF-8";


/* # =================================================================
   # 共通head
   # ================================================================= */
   
.head-title-section{
	margin-top:200px;
}


.head-title-bg {
	position: relative;
	height: 400px;
}
.head-title-bg__attachment {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  height: 100%;
  width: 85%;
}
.head-title-bg__attachment__clip {
  position: relative;
  clip-path: inset(0 0 0 0);
  height: 100%;
}
.head-title-bg__attachment img {
	position: fixed;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

.head-title-bg__image{
	display:block;
	margin-left:auto;
	-o-object-fit:cover;
	object-fit:cover;
}


.head-title-box{
	width:85%;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}

/* wp用*/
.head-title-box-wp{
	width:90%;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}


/* indexの「titleMain_subJp」のmarginを消す*/
.titleMain_subJp{margin-bottom:0;}


@media screen and (max-width:768px){
	.head-title-box{width:90%;}
	.head-title-bg {height: 220px;}
}

@media screen and (max-width:599px){
.head-title-section{margin-top:150px;}
.head-title{font-size:22px;}
}



/* # =================================================================
   # 共通
   # ================================================================= */

.main__title{
	font-size:28px;
	font-weight:700;
	text-align:left;
	position: relative;
	margin-bottom:50px;
	padding-bottom:30px;
	border-bottom:solid 1px var(--color-gray5);
	letter-spacing: 2px;
}

.main__title:after {
  position: absolute;
  content: " ";
  display: block;
  bottom: -2px;
  width: 50px;
  border-bottom:solid 4px var(--color-gray1);
}

.main__title_sub{
	font-size:24px;
	line-height:180%;
	font-weight:700;
	text-align:left;
	letter-spacing: 0.05em;
	padding-bottom:20px;
	margin-bottom:40px;
	position: relative;
}

.main__title_sub:after {
  position: absolute;
  content: " ";
  display: block;
  bottom: 0;
  width: 50px;
}

.subtitle{
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 5px;
	position: relative;
	padding-left:15px;
	text-align:left;
	margin-bottom:50px;
}

.subtitle:before {
	position: absolute;
	background: var(--color-gray1);
	content: "";
	height: 8px;
	width: 8px;
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.main__title_sub_border_wh:after{border-bottom:solid 1px var(--color-white);}
.main__title_sub_border_bk:after{border-bottom:solid 1px var(--color-gray1);}

.main__txt{
	font-size:16px;
	text-align:left;
	line-height:200%;
	letter-spacing: 1px;
}

.main__txt span{
	font-weight:700;
	background: linear-gradient(transparent 70%, #ff6 70%);
}

.txt-red{
	color:var(--color-red);
	font-weight:700;
}
.txt-change{
	text-align:center;
}

.font-bk{color:var(--color-gray1);}
.font-wh{color:var(--color-white);}


/* order */
@media screen and (max-width:768px){
	.order1{order:1;}
	.order2{order:2;}
	.order3{order:3;}
	.order4{order:4;}
	.order5{order:5;}
	.order6{order:6;}
}


@media screen and (max-width:599px){
	.main__title, .main__title_sub{font-size:22px;}
	.txt-change{text-align:left;}
}


/* # =================================================================
   # 法人案内
   # ================================================================= */

.about-bg{background-color: var(--color-gray1);}

#about .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

#about .flex-item{width:46%;padding-bottom:80px;}

#about .flex-img{overflow:hidden;}
#about .flex-img img{
	width:100%;
	height:300px;
	object-fit: cover;
}


.about-ul{
	list-style: none;
}

.about-ul li{
	text-align:left;
	font-weight:normal;
	padding:10px 0;
	border-top:solid 1px var(--color-gray5);
}

.about-ul li:first-child{
	border: none;
}

.about-ul .txt{
	display:block;
	line-height:180%;
	text-align:left;
	margin-left:150px;
	letter-spacing: 2px;
}  
.about-ul .name{float:left;letter-spacing: 2px;}

.about-ul ul{
	list-style-type: disc;
	padding-left:15px;
}

.about-ul ul li{
	text-align:left;
	padding:0;
	border-top:0;
}


@media screen and (max-width:768px){
	#about .flex-item{width:100%;padding-bottom:50px;}
	#about .fex-img{padding-bottom:100px;}
}

@media screen and (max-width:599px){
#about .flex-img img{height:220px;}
}

/* # =================================================================
   # スタッフ紹介
   # ================================================================= */
#people .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#people .flex-item-img{width:35%;padding-bottom:80px;}
#people .flex-item-txt{width:60%;padding-bottom:80px;}


#people .flex-img img{
	width:100%;
}

.katagaki{
	font-size:12px;
	text-align:left;
}

#people .main__title_sub span{
	font-size:12px;
	padding-left:20px;
}


#people .sub-img{text-align:right;margin-top:30px;}
#people .sub-img img{
	width:70%;
}

#people .foot_img img{width:100%;}

#people .komon-name{
font-size:20px;
font-weight:Bold;
text-align:left;
line-height:150%;
}

#people .komon-name span{
	font-size:16px;
	font-weight:normal;
}

.people-foot-bg{background-color:var(--color-gray6);}


@media screen and (max-width:599px){
	#people .flex-item-img{width:100%;padding-bottom:40px;}
	#people .flex-item-txt{width:100%;}
	#people .sub-img img{width:100%;}
}


/* # =================================================================
   # 業務案内
   # ================================================================= */

.gyoumu_bg{background-color: var(--color-gray6);}

#gyoumu__nayami ul {
	 list-style-type: none;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#gyoumu__nayami ul li {
	width:48.5%;
	background-image: url("../img/check_mark.svg");
	background-position: top 15px left 10px;
	background-repeat: no-repeat;
	background-size:  auto 15px;
	list-style-position: inside;
	padding: 10px 5px 10px 40px;
	font-weight:700;
	text-align:left;
	letter-spacing: 1px;
	background-color:var(--color-white);
	margin-bottom:15px;
}

.gyoumu__libox ol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	list-style-type: decimal;
	list-style-position: inside;
}
.gyoumu__libox ol li {
	width:49%;
	padding: 10px 15px;
	font-weight:700;
	line-height:180%;
	text-align:left;
	letter-spacing: 1px;
	background-color:var(--color-gray6);
	margin-bottom:20px;
	text-indent: -1.4em;
	padding-left:2.5em;
}



.gyoumu__libox ol li span{
	font-weight:normal;
}

.gyoumu__libox ol li .small{
	font-size:12px;
}

.gyoumu-indent{
	text-indent: -1em;
	padding-left:1em;
	font-weight:normal;
}

#gyoumu .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#gyoumu .flex-item-img{width:35%;padding-bottom:120px;}
#gyoumu .flex-item-txt{width:60%;padding-bottom:120px;}

#gyoumu .flex-img{overflow:hidden;}
#gyoumu .flex-img img{
	width:100%;
	height:250px;
	object-fit: cover;
}


#gyoumu .ul-maintxt{list-style-type:disc;padding-left:20px;padding-top:20px;padding-bottom:20px;}

#gyoumu-houjin .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#gyoumu-houjin .flex-item{width:46%;padding-bottom:80px;}

#gyoumu-houjin .flex-img{overflow:hidden;}
#gyoumu-houjin .flex-img img{
	width:100%;
	height:300px;
	object-fit: cover;
}

#gyoumu__houjin__nayami ul {
	 list-style-type: none;
}
#gyoumu__houjin__nayami ul li {
	width:100%;
	background-image: url("../img/check_mark.svg");
	background-position: top 15px left 10px;
	background-repeat: no-repeat;
	background-size:  auto 15px;
	list-style-position: inside;
	padding: 10px 5px 10px 40px;
	font-weight:700;
	text-align:left;
	letter-spacing: 1px;
	margin-bottom:15px;
}

.li-bg-c1{background-color:var(--color-gray6);}
.li-bg-c2{background-color:var(--color-white);}




#tax .ctabtn {
	display:block;
	font-size:16px;
	font-weight:700;
	text-decoration:none;
	line-height:150%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
	padding:15px 15px;
	border:solid 1px var(--color-gray1);
	background-color:var(--color-gray1);
	width:100%;
	position: relative;
	overflow: hidden;
	transition: ease .2s;
}

#tax .ctabtn span{
	position: relative;
	display:block;
	color: var(--color-white);
	z-index: 2;
}

#tax .ctabtn:hover span{
	color: var(--color-gray1); !important;
	text-decoration:none;
	cursor: pointer;
}

#tax .ctabtn-bg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color:var(--color-white);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
#tax .ctabtn-bg:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}



#tax table.price-tbl {
  border-collapse: collapse;
  width: 100%;
}
#tax table.price-tbl th,
#tax table.price-tbl td {
  padding: 15px;
  border: 1px solid var(--color-gray4);
  vertical-align: middle;
  line-height:150%;
  letter-spacing: 1px;
}
#tax table.price-tbl th {
  vertical-align:middle;
  font-weight:normal;
  text-align: center;
  width: 50%;
}

#tax table.price-tbl td {
  font-size:16px;
  text-align: left;
}


#tax .tbl-bg1{background-color: var(--color-white);}
#tax .tbl-bg2{background-color: var(--color-gray6);}
#tax .tbl-bg3{background-color: var(--color-gray5);}

#tax .table-title{
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 5px;
	position: relative;
	padding-left:15px;
	text-align:left;
	margin-bottom:10px;
}

#tax .table-title:before {
	position: absolute;
	background: var(--color-gray1);
	content: "";
	height: 8px;
	width: 8px;
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}



@media screen and (max-width:768px){
	#gyoumu__nayami ul li {width:100%;}
	#gyoumu__nayami ol li {width:100%;}
	#gyoumu .flex-item-img{width:100%;padding-bottom:30px;}
	#gyoumu .flex-item-txt{width:100%;padding-bottom:80px;}
	#gyoumu .fex-img{padding-bottom:100px;}
	#gyoumu-houjin .flex-item{width:100%;}
}

@media screen and (max-width:599px){
	#gyoumu .flex-img img{height:220px;}
	#gyoumu-houjin .flex-img img{height:220px;}
}

/* # =================================================================
   # service
   # ================================================================= */
   
.service-bg{background-color: var(--color-gray6);}


#service .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#service .flex-item{width:46%;padding-bottom:80px;}

#service .flex-img{overflow:hidden;}
#service .flex-img img{
	width:100%;
	height:250px;
	object-fit: cover;
}

@media screen and (max-width:768px){
	#service .flex-item{width:100%;}
}



/* # =================================================================
   # access
   # ================================================================= */

.ifram-map{
   transition: all 0.7s ease;
   vertical-align: bottom;
   width:100%;
   height:500px;
}

#access .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#access .flex-item-img{width:25%;padding-top:30px;}
#access .flex-item-txt{width:70%;}

#access .flex-item-img img{width:100%;}

@media screen and (max-width:768px){
#access .flex-item-img{width:100%;padding-top:30px;}
#access .flex-item-txt{width:100%;}
}

/* # =================================================================
   # 採用情報
   # ================================================================= */

#recruit .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#recruit .flex-item{width:46%;padding-bottom:80px;}

#recruit2 .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
#recruit2 .flex-item{width:46%;padding-bottom:80px;}

#recruit2 .flex-img{overflow:hidden;}
#recruit2 .flex-img img{
	width:100%;
	height:250px;
	object-fit: cover;
}

table.recruit-tbl {
  border-collapse: collapse;
  width: 100%;
}
table.recruit-tbl th,
table.recruit-tbl td {
  padding: 15px;
  border: 1px solid var(--color-gray4);
  background-color: var(--color-white);
  vertical-align: middle;
  line-height:150%;
  letter-spacing: 1px;
}
table.recruit-tbl th {
  background-color: var(--color-gray6);
  vertical-align:middle;
  font-weight:normal;
  width: 30%;
   text-align: center;
}

table.recruit-tbl td {
  font-size:16px;
   text-align: left;
}

.entry-box{
	background-color: var(--color-gray6);
	padding:30px 20px;
	margin-top:30px;
	margin-bottom:80px;
}


#entry .ctabtn {
	display:block;
	font-size:16px;
	font-weight:700;
	text-decoration:none;
	line-height:150%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding:15px 15px;
	border:solid 1px var(--color-gray1);
	background-color:var(--color-gray1);
	width:250px;
	position: relative;
	overflow: hidden;
	transition: ease .2s;
}

#entry .ctabtn span{
	position: relative;
	display:block;
	background-image: url("../img/yaji_white.svg");
	background-repeat: no-repeat;
	background-size: 8px;
	background-position: right 20px center;
	color: var(--color-white);
	z-index: 2;
}

#entry .ctabtn:hover span{
	background-image: url("../img/yaji_bk.svg");
	color: var(--color-gray1); !important;
	text-decoration:none;
	cursor: pointer;
}

#entry .ctabtn-bg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color:var(--color-white);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
#entry .ctabtn-bg:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}


.recruit-foot-img img{width:100%;}

.recruit-txt{
	font-size:18px;
	color:var(--color-gray1);
}

@media screen and (max-width:768px){
	#recruit .flex-item{width:100%;}
	#recruit2 .flex-item{width:100%;}
}

@media screen and (max-width:599px){
	table.recruit-tbl {border-top: 1px solid var(--color-gray4);}
	table.recruit-tbl td {
		display: block;
	}
	table.recruit-tbl th {
		display: block;
		border-top: none;
		border-bottom: none;
		width: 100%;
	}
	#entry .ctabtn {width:100%;}
}



/* # =================================================================
   # クライアントインタビュー
   # ================================================================= */

.client-bg{background-color: var(--color-gray1);border-bottom:solid 1px var(--color-gray2);}


/* main */
#client-main .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom:solid 1px var(--color-gray2);
}

#client-main .flex-box{
	width:50%;
}

#client-main .main-txt-box{width:85%;margin-left:auto;margin-right:auto;vertical-align: middle;max-width:1200px;}

#client-main .main-img{overflow:hidden;}
#client-main .main-img img{
	width:100%;
	height:450px;
	object-fit: cover;
	object-position: center center;
	transition: all .5s;
}

#client-main .linkbox:hover .main-img img{
	transform: scale(1.1);
}

#client-main .txt-main{
	position: relative;
	font-size:24px;
	font-weight:700;
	line-height:180%;
	letter-spacing:2px;
	text-align:left;
	padding-bottom:15px;
	color:var(--color-white);
}

#client-main .txt-main:after {
  position: absolute;
  content: " ";
  display: block;
  bottom: 0;
  width: 50px;
  border-bottom:solid 1px var(--color-white);
}




#client-main .txt{
	font-size:16px;
	line-height:180%;
	letter-spacing:1px;
	text-align:left;
	color:var(--color-white);
	margin-top:30px;
}

/* sub */
#client-sub .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#client-sub .flex::after{
	display: block;
	content:"";
	width: 31%;
}

#client-sub .flex-box{
	width:31%;
	margin-bottom:50px;
}

#client-sub .main-img{overflow:hidden;}
#client-sub .main-img img{
	width:100%;
	height:200px;
	object-fit: cover;
	object-position: center center;
	transition: all .5s;
}

#client-sub .linkbox:hover .main-img img{
	transform: scale(1.1);
}

#client-sub .txt-main{
	font-size:18px;
	font-weight:700;
	line-height:180%;
	letter-spacing:2px;
	text-align:left;
	margin-top:20px;
	color:var(--color-white);
}


#client-sub .txt{
	font-size:14px;
	line-height:180%;
	letter-spacing:1px;
	text-align:left;
	color:var(--color-white);
	margin-top:30px;
}



.client-day{
	font-size:12px;
	color:var(--color-gray3);
	text-align:left;
	margin-top:20px;
}

.client-txt{
	font-size:16px;
	color:var(--color-white);
	padding-top:50px;
}


@media screen and (max-width:768px){
	#client-main .flex-box{width:100%;}	
	#client-main .main-txt-box{width:90%;padding:40px 0;}
	#client-main .main-img img{height:350px;}
	#client-main .txt-main{font-size:18px;}
	#client-sub .flex{margin-top:30px;}
	#client-sub .flex::after{display: block;content:"";width:48%;}
	#client-sub .flex-box{width:48%;}
	#client-sub .main-img img{height:160px;}
	#client-sub .txt-main{font-size:16px;}
}

@media screen and (max-width:599px){
	#client-main .main-img img{height:300px;}
	#client-sub .main-img img{height:140px;}
}