@charset "utf-8";



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

/*全体の設定
---------------------------------------------------------------------------*/

ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}






/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
	clear: both;
	max-width: 1370px;	/*最大幅。,#pagetop,#footermenu,#menubar ulと揃える。*/
	margin: 0 auto;
	overflow: hidden;
	padding: 40px 0;	/*上下、左右へのボックス内余白*/
}
/*h2タグ*/
/*h2タグ*/
.contents h2 {
	clear: both;
	font-weight: normal;	/*hタグのデフォルトの太字を標準にする設定*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くとる設定*/
	margin-bottom: 15px;
	padding: 4px 20px;	/*上下、左右への余白*/
	background: #68b7c3;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/
	border-radius: 10px;	/*角丸のサイズ*/
}
/*h3タグ*/
.contents h3 {
	clear: both;
	font-weight: normal;	/*hタグのデフォルトの太字を標準にする設定*/
	margin-bottom: 20px;
	font-size: 18px;	/*上下、左右への余白*/
	padding-top: 3px;
	padding-right: 20px;
	padding-bottom: 3px;
	padding-left: 20px;

}


/*box1（商品用のボックス。contents、main、subで使う場合の共通設定。）
---------------------------------------------------------------------------*/
/*ボックス*/
.contents .list {
	position: relative;
	overflow: hidden;
	transition: 0.5s;
	float: left;	/*左に回り込み*/
	width: 18.5%;	/*ボックス幅*/
	margin: 0 0 20px 2%;	/*上、右、下、左にとるボックスの外側へのスペース*/
	padding: 2%;	/*ボックス内の余白*/
	height: 340px;	/*ボックスの高さ*/
	border-right: 1px solid #ccc;	/*右側の線の幅、線種、色*/
	border-bottom: 1px solid #ccc;	/*下側の線の幅、線種、色*/
	font-size: 13px;	/*背景色*/
}
/*ボックス内のh4見出し*/
.contents .list h4 {
	color: #68b7c3;	/*文字色*/
	margin-top: 10px;
}
/*ボックス内のp段落タグ*/
.contents .list p {
	padding: 0;
	font-size: 15px;	/*文字サイズ*/
	line-height: 1.5em;	/*行間*/
	text-align: justify;
}
/*ボックス内のボタン（Moreボタン）*/
.contents .list .btn {
	padding: 1px 10px;	/*上下、左右へのボックス内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	font-size: 11px;	/*文字サイズ*/
}

/*box1（※mainブロック内で使う場合のボックスの追加設定）
---------------------------------------------------------------------------*/
.contents .main .list {
	height: 305px;	/*mainブロック内（※２カラム時という事）で使う場合のボックスの高さ。*/
	background-color: #F3F3F3;
}


/*メインコンテンツ
---------------------------------------------------------------------------*/
/*メインコンテンツブロック*/
.main {
	float: right;	/*右に回り込み*/
	width: 100%;		/*ボックス幅*/
}


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

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*headerブロック共通*/
header {
	text-align: left;
}
/*ロゴ画像*/
#logo img {
	width: 150px;	/*画像幅*/
	padding-left: 80px;
	padding-top: 25px;
}
#top #logo img {
	padding-left: 0;
}

/*box1（商品用のボックス。contents、main、subで使う場合の共通設定。）
---------------------------------------------------------------------------*/
.contents .list {
	float: none;	/*回り込みの解除*/
	width: auto;	/*ボックス幅*/
	height: auto !important;	/*ボックスの高さ*/
	margin: 0 0 20px 0;	/*上、右、下、左にとるボックスの外側へのスペース*/
}
/*ボックス内のfigure画像*/
.contents .list figure img {
	width: 30%;
	float: left;
	margin-right: 2%;
}
/*ボックス内のh4見出し*/
.contents .list h4 {
	margin-top: 0px;
}