﻿@charset "utf-8";


/*全体の設定
---------------------------------------------------------------------------*/
body {
	color: #333;	/*全体の文字色*/
	background-color: #eee;	/*全体の背景色*/
	background-image: url(../images/bg100.png);	/*背景壁紙*/
	margin: 0px;
	padding: 0px;
	font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";	/*文字サイズ/行間、フォントファミリー*/
}
/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
	width: 688px;	/*コンテナー幅*/
	margin: 0px auto;
}

/*コンテンツ（main,subを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	clear: left;
	width: 100%;
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	float: center;	/*中央に回り込み*/
	width: auto;	/*メインコンテンツ幅*/
	background-color: #FFF;	/*背景色*/
	padding: 10px;	/*ボックス内の余白*/
	-webkit-box-shadow: 0px 0px 8px #CCC;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 0px 8px #CCC;			/*同上*/
}
/*mainコンテンツのh2タグの設定*/
#main h2 {
	font-size: 100%;
	color: #FFF;		/*文字色*/
	padding: 7px 15px;	/*上下、左右への余白*/
	clear: both;
	background-color: #40720a;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: url(../images/arrow2.png), -webkit-gradient(linear, left top, left bottom, from(#508f0c), to(#40720a));	/*背景画像の読み込み,グラデーション*/
	background-image: url(../images/arrow2.png), -webkit-linear-gradient(#508f0c, #40720a);	/*同上*/
	background-image: url(../images/arrow2.png), linear-gradient(#508f0c, #40720a);			/*同上*/
	background-repeat: no-repeat;			/*背景画像をリピートしない*/
	background-position: right center;		/*背景画像を右側・上下中央に配置*/
	-webkit-box-shadow: 1px 2px 5px #ccc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 2px 5px #ccc;			/*同上*/
}
/*mainコンテンツのh3タグの設定*/
#main h3 {
	background-color: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: url(../images/arrow1.png), -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#f4f4f4));	/*背景画像の読み込み,グラデーション*/
	background-image: url(../images/arrow1.png), -webkit-linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%);	/*同上*/
	background-image: url(../images/arrow1.png), linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%);			/*同上*/
	background-repeat: no-repeat;		/*背景画像をリピートしない*/
	background-position: left center;	/*背景画像を左側・上下中央に配置*/
	-webkit-box-shadow: 1px 2px 5px #e2e2e2;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 2px 5px #e2e2e2;			/*同上*/
	font-size: 100%;
	padding: 4px 10px 4px 20px;	/*左から、上、右、下、左のボックス内の余白*/
	clear: both;
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
}
/*mainコンテンツの段落タグ設定*/
#main p {
	padding: 0.5em 15px 1em;	/*左から、上、左右、下への余白*/
}

/*service.html内の各ブロック（※タイプ１）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.list1 section {
	height: 290px;	/*ボックスの高さ*/
	width: 47%;	/*ボックスの幅*/
	float: left;
	line-height: 1.6;
	margin-left: 14px;
	overflow: hidden;
	position: relative;
	margin-bottom: 25px;
}
/*ボックス内の段落タグ設定*/
#main section.list1 section p {
	padding: 0px;
}
/*ボックス内のh4タグ設定*/
#main section.list1 section h4 {
	font-size: 100%;
	color: #8d14cc;	/*文字色*/
}
/*写真の設定*/
#main section.list1 section figure {
	padding: 5px;	/*写真と枠線との余白設定*/
	margin-bottom: 5px;	/*画像の下に少し余白を空ける設定*/
	border: 1px solid #CCC;	/*画像の枠線の幅、線種、色*/
}
#main section.list1 section figure img {
	width: 100%;
	height: auto;
}
/*「もっと詳しく」ボタン設定*/
#main section.list1 section p.more {
	position: absolute;
	right: 0px;		/*ボックスに対して右から0pxの場所に配置*/
	bottom: 0px;	/*ボックスに対して下から0pxの場所に配置*/
	color: #FFF;	/*文字色*/
	text-decoration: none;
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
	background-color: #900000;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#b10000), to(#900000));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#b10000, #900000);	/*同上*/
	background-image: linear-gradient(#b10000, #900000);			/*同上*/
	padding: 2px 15px;	/*上下、左右への余白*/
	font-size: 11px;	/*文字サイズ*/
	border-radius: 4px;	/*各丸のサイズ*/
}
#main section.list1 section a {
	text-decoration: none;
}
#main section.list1 section a:hover {
	background: #d30000;	/*マウスオン時の背景色*/
}







