/*////////////////////
user guide
////////////////////*/

.userguide {
	display: block;
	margin:140px 0 0 0;
}
.userguide h2{
	text-align: center;
	color: var(--primary-color);
	font-size: 295%;
	font-family: Tw Cen MT!important;
}
.userguide h2 span{
	text-align: center;
	color: var(--primary-color);
	font-size: 29%;
	width: 188px;
	margin: 0 auto;
	/*font-weight: bold;*/
}

.userguide h2 span:before {
    content: url(../images/three02.png);
    display: inline-block;
    padding: 0 25px 0 0;
}

.userguide h2.u-guides {
	margin:60px 0 110px 0;
}

.userguide .base {
	display: flex;
	align-items:center;
	position: relative;
}
.userguide .base a{
	color: #333;
}

.userguide .base .base_image {
	width:53%;
	position: absolute;
	background-image: url("../images/userguides/basetop.webp");
	background-position: right;
	height:465px;
    top: -45px;
	font-size: 138%;
}


.userguide .base .base_image img{
	width:100%;
}

.userguide .base .base_info_cont {
    /*width: 34%;*/
	width: 37%;
    margin-left: 53%;
    min-width: 657px;
    background: #F6F6F4;
    padding: 40px 50px 55px 50px;
}

.userguide .base .base_info_cont table {
	border: none;
	margin: 0;
	color: #333333;
    font-size: 86%;

}
.userguide .base .base_info_cont table th,
.userguide .base .base_info_cont table td{
	vertical-align: top;
}

.userguide .base .base_info_cont table th{
	padding:9px 26px 9px 9px;
	text-align: right;
	/*min-width: 160px;*/
	width: 9em;
}
.userguide .base .base_info_cont table td{
	padding:9px 9px 9px 9px;
}

.userguide .base .base_info_cont table td.name{
	font-size: 139%;
}

.userguide .base .base_info_cont .base_info h2{
	font-size: 219%;
	letter-spacing: 0px;
	text-align: left;
	margin:0;
}
.userguide .base .base_info_cont .base_info h2 span{
	font-size: 44%;
	display: inline-block;
}


/*////////////////////
our service
////////////////////*/

.ourservice h2{
	text-align: center;
	color: var(--primary-color);
	font-size: 219%;
	/*margin: 119px 0 90px 0;*/
	margin: 150px 0 50px 0;
	font-family: Tw Cen MT!important;
}
.ourservice h2 span{
	text-align: center;
	color: var(--primary-color);
	/*font-size: 43%;*/
	width: 188px;
	margin: 0px auto;
}

.ourservice h2 span:before {
    content: url(../images/three02.png);
    display: inline-block;
    padding: 0 25px 0 0;
}


/*////////////////////
our service details
////////////////////*/

.ourservice .detail {
	position: relative;
}
.ourservice .detail .Bg {
	position: absolute;
	content: "";
	background: var(--primary-color);
	width:93%;
	margin:0 auto 0 0;
	height: 81%;
    top: 25%;
    z-index: -1;
}

.ourservice .detail table{
	width:81%;
	margin:0 0 0 auto;
	background: #F6F6F4;
	font-family: Meiryo UI!important;
	display: block;
	/*padding:70px 90px 158px 90px;*/
	padding: 40px 90px 158px 90px;
	border-color: transparent;
}

.ourservice .detail table tbody {
	max-width: 1166px;
	display: inline-block;
	width:100%;
}
.ourservice .detail table tr{
	border-bottom: 1px dashed #444444;
	position: relative;
	max-width: 1166px;
	display: block;
}
.ourservice .detail table th{
	font-size: 156%;
	color:var(--primary-color);
	font-weight: bold;
	text-align: right;
	padding: 30px 0;
	width: 12%;
	min-width: 228px;
}
.ourservice .detail table td{
	font-size: 125%;
	color:#000;
	padding: 30px 0 30px 70px;
}

.ourservice .detail table td ul li {
	margin:0;
}

.ourservice .detail table td.f_left{
	position: relative;
	padding: 30px 248px 30px 70px;
}

.ourservice .detail table a.accessmap{
	position: absolute;
	right: 0;
	font-size:162%;
	color:#fff;
	background: var(--primary-color);
	font-family: Meiryo UI;
	top: 50%;
    transform: translateY(-50%);
}

.ourservice .detail table a.accessmap span{
	padding:13px 15px;
	    display: block;
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -o-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -o-transition-property: transform;
  -moz-transition-property: transform;
  -webkit-transition-property: transform;
  transition-property: transform;
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -o-transition: translateZ(0);
  -moz-transition: translateZ(0);
  -webkit-transition: translateZ(0);
  transition: translateZ(0);

}
.ourservice .detail table a.accessmap:hover span{
	    -webkit-transform: skew(-10deg);
  transform: skew(-10deg);

}

.ourservice .detail table a.accessmap:hover {
	background:#827B60;
	/*transition-duration: 0.3s;*/
}

.ourservice .detail table a.accessmap:hover span {
	/*transform: skew(-15deg) translateX(5px);
	display: block;
	transition-duration: 0.3s;
    position: relative;
    left: 5px;
	top: 5px;*/
}

.ourservice .detail table a.accessmap span:before {
	content:url("../images/userguides/accesspoint.png");
	display: inline-block;
	vertical-align: middle;
    padding: 0 15px 0 0;
}

.ourservice .detail ul.imagelist {
	width:95%;
	margin:0 0 0 auto;
	position: relative;
	top:-100px;
}
.ourservice .detail ul.imagelist li{
	display: inline-block;
	vertical-align: top;
	width: 31%;
	margin:0px 15px 0 0;
}
.ourservice .detail ul.imagelist li:nth-child(2){
	margin:80px 15px 0 0;
}
.ourservice .detail ul.imagelist li:nth-child(3){
	margin:160px 0 0 0;
}
.ourservice .detail ul.imagelist li p {
	margin:15px 0 0 0;
	font-size: 81%;
	color: #fff;
    text-shadow: 0px 0px 5px black;
}

/*テンプレート*/
.Tmp_categoryLayout,
.Tmp_ImgLeft,
.Tmp_ImgRight,
.Tmp_ImgBlock02,
.Tmp_ImgBlock03{
    max-width: 1200px;
    margin: 0 auto;
}
.Tmp_ImgLeft,
.Tmp_ImgRight{
    position: relative;
    margin-bottom: 30px;
}
.Tmp_ImgLeft .img,
.Tmp_ImgRight .img{
    width: 41.6666666667%;
}
.Tmp_ImgLeft .text,
.Tmp_ImgRight .text{
    width: 61.6666666667%;
    position: absolute;
    top: 30px;
    padding: 15px 30px 15px 30px;
	box-sizing: border-box;
    background-color: #fff;
}

#worksupport .Tmp_ImgLeft .text{
    width: 77.666667%;
}

.Tmp_ImgLeft .img img,
.Tmp_ImgRight .img img{
    max-width: 100%;
}
.Tmp_ImgLeft .img,
.Tmp_ImgRight .text{
    left: 0;
}
.Tmp_ImgLeft .text,
.Tmp_ImgRight .img{
    right: 0;
}

#worksupport .Tmp_ImgLeft .text,#worksupport .Tmp_ImgRight .img {
    right: -81px;
	font-size: 88%;
}

.Tmp_ImgLeft .img {
    float: left;
}

#worksupport .Tmp_ImgLeft .img {
	float:none;
}

.Tmp_ImgRight .img {
    float: right;
}

#worksupport .Tmp_ImgRight .img {
    float: none; 
    margin:0 0 0 auto;
	position: relative;
}
#worksupport .Tmp_ImgRight .text {
	width: 72.666667%;
	font-size: 88%;
}

.Tmp_ImgBlock02 {
    margin-bottom: 30px;
}
.Tmp_ImgBlock02 table,
.Tmp_ImgBlock03 table{
    width: 100%;
}
.Tmp_ImgBlock02 table td,
.Tmp_ImgBlock03 table td{
    padding: 0;
    vertical-align: top;
}
.Tmp_ImgBlock02 table img,
.Tmp_ImgBlock03 table img{
    max-width: 100%;
    vertical-align: top;
}

.Tmp_ImgBlock02 table{
    
}
.Tmp_ImgBlock02 table td{
    width: 48.3333333333%;
}
.Tmp_ImgBlock02 table td.noimgarea{
    width: 3.3333333334%;
}
.Tmp_ImgBlock03 {
    margin-bottom: 30px;
}

#worksupport .Tmp_ImgBlock03 .text {
	font-size: 60%;
}

.Tmp_ImgBlock03 table td{
    width: 32.1666666667%;
}
.Tmp_ImgBlock03 table td.noimgarea{
    width: 1.74999999995%;
}
.Tmp_ImgBlock03 table td .img {
  width: 100%;
  height: 260px;
  position: relative;
  overflow: hidden;
    margin-bottom: 5px;
}
.Tmp_ImgBlock03 table td .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
}

@media screen and (max-width: 1200px) {
	
	/*userguide*/
	.userguide .base {
		display: flex;
		align-items: baseline;
	}
	.userguide .base .base_info_cont .base_info h2 span {
		/*display: inline-block;*/
		display: block;
		text-align: left;
	}
	.userguide h2.u-guides {
		margin: 100px 0 110px 0;
	}
	.userguide .base_info h2 span {
		margin: 0 auto 0 0;
		width: 188px;
	}
	.userguide .base .base_info_cont {
		margin-left: 32%;
		margin-top: 27%;
		z-index: 100;
	}
	
	/*ourservice*/
	.ourservice .detail table {
		width: 90%;
		padding: 70px 40px 158px 40px;
	}
	.ourservice .detail table th {
		font-size: 126%;
		min-width: 147px;
	}
	.ourservice .detail table td {
		font-size: 95%;
	}
}

@media screen and (max-width: 1000px) {
	/*userguide*/
	.userguide .base .base_image {
		width:100%;
	}
	.userguide .base .base_info_cont {
		margin-left: auto;
		margin-top: 44%;
		margin-right: auto;
	}
	
	/*テンプレート*/
	#worksupport .Tmp_ImgLeft .text, #worksupport .Tmp_ImgRight .text,#worksupport .Tmp_ImgRight .img {
		font-size: 72%;
	}
	#worksupport .Tmp_ImgRight .img {
		right: -15px;
	}
	#worksupport .Tmp_ImgBlock03 table td {
		width:100%;
		display: block;
	}
}

@media screen and (max-width: 749px) {
	/*userguide*/
	.userguide .base {
		flex-direction: column;
	}
	.userguide .base .base_image {
		position: relative;
/*		background-position: center;*/
	}
	.userguide .base .base_info_cont {
		margin-top: -45px;
		min-width: 95%;
    	padding: 40px 15px;
/*		margin-right: 0;*/
	}
	.userguide .base .base_info_cont .base_info h2 {
		/*font-size: 215%;*/
		font-size: 452%;
		width: 66%;
		margin: 0 auto;
		display: block;
	}
	.userguide .base .base_info_cont table {
		font-size: 94%;
	}
	
	/*ourservice*/
	.ourservice .detail table {
		padding: 0px 40px 158px 40px;
	}
	.ourservice h2 {
	    /*font-size: 219%;*/
	    font-size: 452%;
	}
	.ourservice .detail table th {
		vertical-align: top;
	}
	
	.ourservice .detail table td.f_left {
		padding: 30px 0px 95px 70px;
	}
	
	.ourservice .detail table a.accessmap {
		position: absolute;
		right: 50%;
		bottom: 10px;
		top:auto;
		font-size: 95%;
		color: #fff;
		background: var(--primary-color);
		font-family: Meiryo UI;
		transform: translateX(50%);
		/*padding: 13px 15px*/;
	}
	.ourservice .detail table a.accessmap span {
		/*position: relative;
		display: block;
		top: 50%;
		transform: translateY(-50%);*/
	}
	.ourservice .detail ul.imagelist li p {
		font-size: 75%;
	}
	
	.ourservice .detail ul.imagelist {
		margin: 0 auto;
	}	
	.ourservice .detail ul.imagelist li {
		width: 80%;
		margin: 10px auto 30px;
		display: block;
	}
	.ourservice .detail ul.imagelist li:nth-child(2){
		width: 80%;
		margin: 10px auto 30px;
	}
	.ourservice .detail ul.imagelist li:nth-child(3){
		width: 80%;
		margin: 10px auto;
	}
	.ourservice .detail .Bg {
		height: 75%;
	}
	
	/*テンプレート*/
	#worksupport .Tmp_ImgLeft .text, #worksupport .Tmp_ImgRight .img {
		right: 0px;
	}
	#worksupport .Tmp_ImgLeft .text, #worksupport .Tmp_ImgRight .text {
		top: 119px;
	}
	
	#worksupport .Tmp_ImgBlock02 table td {
		width:100%;
	}
	
}

@media screen and (max-width: 550px) {
	.userguide h2 {
		font-size: 432%;
	}
	.userguide h2 span {
		font-size: 43%;
	}
	.userguide h2.u-guides {
		margin: 0 0 50px 0;
		font-size: 550%;
	}
	.userguide .base .base_info_cont table {
		font-size: 145%;
	}
	
	.userguide .base .base_info_cont table th {
		font-size: 88%;
		padding: 9px 9px 9px 0px;
	}
	
	.userguide .base .base_info_cont table td {
		font-size: 75%;
		padding: 9px 0px 9px 0px;
	}
	
	.userguide .base .base_info_cont .base_info h2 {
		width: 100%;
		/*font-size: 403%;*/
	}
	.userguide .base .base_info_cont table th {
	    min-width: 108px;
	}
	.ourservice h2 {
		/*font-size: 400%;*/
	}
	.ourservice .detail table {
		width: 95%;
		padding: 0px 20px 158px 20px;
	}
	.ourservice .detail table th {
		font-size: 105%;
	}
	.ourservice .detail table td {
		padding: 30px 0 30px 20px;
		font-size: 75%;
		font-family: sans-serif;
	}
	
	.ourservice .detail table td.f_left {
		padding: 30px 0px 95px 20px;
	}
	.ourservice .detail table a.accessmap {
		min-width: 145px;
	}
	.ourservice .detail table a.accessmap span {
		text-align: center;
	}
	.userguide .base_info h2 span {
		width: 141px;
	}
	/*テンプレート*/
	#worksupport .Tmp_ImgLeft .text, #worksupport .Tmp_ImgRight .text {
		top: 79px;
		padding: 15px 10px 15px 10px;
	}
	.ourservice .detail table th {
		min-width: 97px;
	}
}