@charset "utf-8";

/*全端末（PC・タブレット・スマホ）共通設定

/*コンテナー（ホームページを囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1500px;	/*slide.cssの「#mainimg, #subimg」と設定と合わせる*/
	margin: 0 auto;
	border-top: 4px solid #6c5f48;	/*一番上に入っているアクセントライン。幅、線種、色。*/
}

#contents {
	clear: both;overflow: hidden;position: relative;
	background: #fff;	/*背景色*/
	padding: 1% 3%;		/*上下、左右へのボックス内の余白*/
	margin: 0 3% 50px;	/*上、左右、下へのボックスの外側への余白*/
}

/*list2（service.htmlで利用している各ボックス）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2 {
	position: relative;
	display: inline-block;
	width: 45%;		/*ボックス幅*/
	margin: 0 0% 0px;	/*上、左右、下へ、ボックスの外側に空けるスペース*/
	text-align: center;		/*内容を中央よせ*/
}
/*ボックス内の画像*/
.list2 figure {
	margin-bottom: 0px;	/*画像の下に空けるスペース*/
}
.list2 figure a:hover{
	opacity: 0.8;	/*マウスオン時。透明度80%にする。*/
}
/*ボックス内のh4（見出し）タグ*/
.list2 h4 {
	position: absolute;
	bottom: 0px;	/*list2ボックスの下から20pxの場所に配置*/
	width: 100%;	/*幅*/
	color: #D9E5FF;	/*文字色*/
}

.list2 h4.yuso {
	background: #33a5d5;	/*背景色（古いブラウザ用）*/
	background: rgba(51,165,213,0.3);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
}

.list2 h4.taxi {
	background: #53BF49;	/*背景色（古いブラウザ用）*/
	background: rgba(83,191,73,0.3);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
}
/*ボックス内のp（段落）タグ*/
.list2 p {
	padding: 0px !important;
}

/*ボックス内のボタン*/
a.btn-border-bottom {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0;
	text-decoration: none;
	color: #fff;  
}
  
a.btn-border-bottom:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 4px;
	top:80%;
	left: 0;
	border-radius: 3px;
	background:#fff; 
	transition: .2s; 
}
  
a.btn-border-bottom:hover:before {
	top: -webkit-calc(100% - 3px);
	top: calc(100% - 3px);
	color: #fff;  
}

/*その他
---------------------------------------------------------------------------*/
.ofh {overflow: hidden;text-align: center;}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

#contents {
margin-top: 0%;	/*上に空けるスペース。この部分にイメージ画像が表示されます。*/
}

#contents h2 span.change_str {
    font-size: 0%;
}
#contents h2 span.change_str:before {
    font-size: 8px;
	content: "タッチしてください";
}

body.home #contents {
margin-top: 0%;	/*上に空けるスペース。この部分にスライドショーが表示されます。*/
}
}

/*画面幅485px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:485px){


/*list2
---------------------------------------------------------------------------*/
.list2 {
position: relative;
display: block;
width: 100%;		/*ボックス幅*/
margin: 0 auto 0px;	/*上、左右、下へ、ボックスの外側に空けるスペース*/
text-align: center;		/*内容を中央よせ*/
}
	
/*ボックス内のh4（見出し）タグ*/
.list2 h4 {
display: none;	/*スペースが狭くなって見出しの下に画像が隠れてしまうので、見出しを非表示にする。*/
}
}