@charset "utf-8";
/* ================================================================= 
 License : e-TRUST Inc.
 File name : style.css
 Style : style
================================================================= */


/*================== index.html =================*/
.greetingTxt{
	clear: both;
}
.topName,
.businessTitle,
.sub_midashi h3,
.sub_midashi h4{
	font-size: 16px;
	color: #660e14;
	font-weight: bold;
}
.bg_100per_wrap {
  position: relative;
  padding: 70px 0 !important;
  margin-bottom: 70px !important;
}
.bg_100per_inner {
  width: 1000%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0% 0% 0% -500%;
  background:;
  z-index: -1;
  background-color: #660e14;
}
.home_td {
	margin-left: -1.2% !important;
	display: flex;
	justify-content: center;
}
.home_td .box {
	max-width: 230px;
	width: 23.8%;
	margin: 0 1.2% !important;
}
.contentsImg{
	position: relative;
}
.contentsImg img{
	border: 3px solid #fff;
}
.contents h2{
	width: 100%;
	height: 29px;
	line-height: 29px;
	position: absolute;
	bottom: -40px;
	background-color: #3f0005;
	color: #fff;
}
.contentsText{
	padding-top: 45px !important;
	color: #fff;
}
.w50per{
	width: 50%;
}
.topMap{
	text-align: right;
}

@media screen and (min-width: 469px) and (max-width: 768px){
	.greetingTxt,
	.topName{
		padding-left: 10px;
		padding-right: 10px;
	}
	.home_td {
		margin-left: 0 !important;
	}
/*	.home_td .box {
		float: left;
		width: 29%;
		margin: 0 0 6vh 13.9vw !important;
	}*/
	.home_td .box {
	width: 29%;
	}
	.contents h2{
		width: 100%;
	}
	.pd10{
		padding: 0 auto;
	}
}

@media only screen and (max-width: 468px){
	.greetingTxt,
	.topName{
		padding-left: 10px;
		padding-right: 10px;
	}
	.bg_100per_wrap{
		padding-bottom: 0 !important;
	}
	.home_td {
		margin-left: 0 !important;
		padding: 0 10px;
		flex-wrap: wrap;
	}
	.home_td .box {
		max-width: 468px;
		height: auto !important;
		float: none;
		width: 100%;
		margin:0 0 70px 0 !important;
	}
	.box img{
		width: 100% !important;
	}
	.contents h2{
		width: 100%;
	}
	.w50per.fltL,
	.topMap{
		float: none;
		width: 100%;
	}
	.topMap{
		text-align: center;
		margin-top: 40px;
	}
}


/*================== company.html =================*/
.companyTbl td,
.accessTbl td{
	padding: 10px !important;
}
.cTitle{
	border-bottom: 1px solid #660e14 !important;
}
.cTxt{
	border-bottom: 1px solid #ccc !important;
}
@media screen and (min-width: 469px) and (max-width: 768px){
	.cTitle{
		width: 26% !important;
	}
}
@media only screen and (max-width: 468px){
	.companyTbl .cTitle{
		padding-top: 45px !important;
	}
	.companyTbl table tr:nth-of-type(1) .cTitle{
		padding-top: 15px !important;
	}
}


/*================== greeting.html =================*/
.pdL40{
	padding-left: 40px !important;
}
@media screen and (min-width: 469px) and (max-width: 768px){
	.pdL40{
		padding-left: 5% !important;
	}
}
@media only screen and (max-width: 468px){
	.mgB15{
		margin-bottom: 15px !important;
	}
	.pdL40{
		padding: 15px 0 0 0 !important;
	}
}


/*================== business.html =================*/
.businessTitle{
	padding-bottom: 10px !important;
}
.btn_business{
	display: inline-block;
	width: 49.5%;
	vertical-align: top;
}
.btn_business td a{
	max-width: 215px;
	font-weight: bold;
	color: #660e14 !important;
	text-decoration: none;
	border: 1px solid #660e14;
	border-radius: 4px;
	padding: 3% 1.5%;
	display: block;
	margin: 0 auto;
}
.businessTbl td{
	padding: 5px 0 !important;
}

@media screen and (min-width: 469px) and (max-width: 768px){
	.btn_business{
		display: block;
		width: 100%;
	}
}
@media only screen and (max-width: 468px){
	.btn_business{
		display: block;
		width: 100%;
		margin-top: 0 !important;
	}
	.btn_business td{
		padding: 10px 0 !important;
	}
	.businessTbl > table{
		table-layout: auto !important;
	}
	.w20px{
		width: 20px !important;
	}
}


/*================== case.html =================*/
.caseTxt{
	padding-top: 20px !important;
}
.case img{
	width: 100% !important;
	object-fit: cover;
}

@media screen and (min-width: 469px) and (max-width: 768px){
}
@media only screen and (max-width: 468px){
	.caseTxt{
		padding: 20px 0 !important;
	}
}


/*================== staff.html =================*/
.staffName02,
.profile02{
	display: inline-block;
	vertical-align: top;
}
.staffName h3,
.staffName02 h3{
	font-size: 20px;
	font-weight: bold;
}
.staff img,
.staff02 img{
	width: 100% !important;
	object-fit: cover;
}
.profileTitle h4{
	font-size: 16px;
	font-weight: bold;
	position: relative;
	padding: 0 0 3px 3px;
	border-bottom: 2px solid #ccc;
}
.profileTitle h4::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 2px;
  background-color: #660e14;
}
.profileTxt{
	padding: 10px !important;
	line-height: 2;
}
.profileTitle02 h4{
	font-weight: bold;
	padding-bottom: 5px;
}
.profileTxt02{
	padding-left: 15px !important;
	line-height: 1.5;
}

@media screen and (min-width: 469px) and (max-width: 768px){
	.staffToptxt{
		text-align: left !important;
	}
	.staff,
	.staffName02{
		width: 35% !important;
	}
	.profile{
		width: 61% !important;
	}
	.profile03,
	.profile02{
		width: 64% !important;
	}
}
@media only screen and (max-width: 468px){
	.staffToptxt{
		text-align: left !important;
	}
	.mg0{
		margin: 0 !important;
	}
	.pd0{
		padding: 0 !important;
	}
	.staff .staffTxt,
	.profileTxt{
		padding-bottom: 25px !important;
	}
	.staffName,
	.staffName02{
		margin-top: 30px !important;
	}
	.staffName h3,
	.staffName02 h3{
		font-size: 4.5vw;
	}
	.staff{
		margin-bottom: 25px;
	}
	.staff img,
	.staff02 img{
		width: 100% !important;
		height: auto !important;
	}
	.profile,
	.profile02{
		margin-bottom: 30px !important;
	}
	.profile02 .profileTxt{
		padding-bottom: 0 !important;
	}
}


/*================== access.html =================*/
.lh2{
	line-height: 2;
}
.lh2 > address{
	margin-top: -26px;
}
@media screen and (min-width: 469px) and (max-width: 768px){
	.accessTbl{
		width: 100% !important;
	}
}
@media only screen and (max-width: 468px){
	.accessTbl .cTxt{
		text-align: center !important;
	}
	.accessTbl .cTitle{
		padding-top: 15px !important;
	}
	.accessMap{
		margin-top: 30px !important;
	}
}


/*================== flow.html =================*/
.flow{
	min-width: 300px;
	line-height: 50px;
	color: #660e14;
	font-size: 16px;
	font-weight: bold;
	border: 1px solid #660e14;
	border-radius: 4px;
}
.triangle{
	position: relative;
}
.triangle:after {
	border: 25px solid transparent;
	border-top-color: #660e14;
	content: "";
	position: absolute;
	bottom: -65px;
	left: 50%;
	margin-left: -23px;
}
@media screen and (min-width: 469px) and (max-width: 768px){
}
@media only screen and (max-width: 468px){
	.flow:nth-of-type(2){
		margin-top: 30px !important;
	}
	.flow:nth-of-type(7){
		margin-bottom: 60px !important;
	}
	.businessTbl{
		margin-bottom: 30px !important;
	}
}


/*================== ○○○○.html =================*/
@media screen and (min-width: 469px) and (max-width: 768px){
}
@media only screen and (max-width: 468px){
}


/*================== sitemap =================*/
.map ul li {
	border-left: 3px solid #660e14;
	margin-bottom: 20px;
	list-style: none;
	padding-left: 10px;
}
.map ul li a {text-decoration: none;}


/*================== midashi =================*/
.midashi h2{
	font-size: 25px;
	font-weight: bold;
	overflow: hidden;
	text-align: center;
}
.midashi h2 span{
	display: inline-block;
	padding: 0 50px;
	position: relative;
}
.midashi h2 span:before,
.midashi h2 span:after{
	border-top: 1px solid #cccccc;
	content: "";
	position: absolute;
	top: 50%;
	width: 99em;
}
.midashi h2 span:before{
	right: 100%;
}
.midashi h2 span:after{
	left: 100%;
}
.midashi02 h3{
	text-align: left;
	font-size: 25px;
	font-weight: bold;
	border-left: 7px solid #660e14;
	padding-left: 8px;
}
.greeting{
	font-size: 15px;
	color: #660e14;
	font-weight: bold;
}
.midashiNews h2{
	font-size: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #bbb;
	font-weight: bold;
}
.midashiNews span{
	font-size: 13px;
	color: #373e6a;
	padding-left: 6px;
}
.sub_midashi{
	padding-bottom: 5px;
}
.h2wrap{
	position: relative;
}
.h2wrap h2 {
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	padding: 168px 0;
	z-index: 100;
	position: relative;
	text-align: left;
	padding-left: 10%;
}
.h2wrap #local-keyvisual-bg,.h2wrap .local-keyvisual-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-size: cover;
	background-position: 70% center;
}
.h2wrap h2:empty{
	display: none;
}

@media screen and (min-width: 469px) and (max-width: 768px){
	.h2wrap h2{
		padding: 93px 0;
		padding-left: 10%;
	}
}

@media only screen and (max-width: 468px){
	.h2wrap h2{
		padding: 50px 0;
		text-align: center;
		font-size: 30px;
	}
	.h2wrap h2:empty{
		display: none;
	}
}


/*================== tablecustom =================*/
@media only screen and (max-width: 468px){
	.tblcustom tr:first-child {
	    display: none;
	}
	.tblcustom tr td {
	    border: none !important;
	    display: block;
	    padding: 0 !important;
	    background-color: #efefef;
	}
	.tblcustom tr {
	    border-bottom: 1px solid #f00 !important;
	}
	.tblcustom tr td:before {
	    clear:left;
	    float: left;
	    display: block;
	    content: attr(data-th);
	    padding: 5px 10px !important;
	    width: 30% !important;
	}
	.tblcustom tr td > div {
	    background-color: #fff;
	    overflow: hidden;
	    padding: 5px 10px !important;
	}
}