@charset "utf-8";

/*item1 文章横1列
---------------------------------------------------------------------------*/
/*item1*/
.item1 {
	overflow: hidden;
	border: 3px solid #779eec;	/*枠線の幅、線種、色*/
	padding: 20px;				/*ボックス内の余白*/
	border-radius: 10px;		/*角丸のサイズ。この１行を削除すれば角のとれた長方形になります。*/
	margin-bottom: 20px;		/*ボックスの下に空けるスペース*/
}
/*item1内のh4タグ*/
.item1 h4 {
	color: #779eec;		/*文字色*/
	font-size: 130%;	/*文字サイズ*/
}
/*item1内のpタグ*/
.item1 p {
	padding: 0 !important;
}
/*item1内のfrとflスタイルのリセット*/
.item1 .fr,.item1 .fl {margin-bottom: 0;}


/*item2 文章横1列
---------------------------------------------------------------------------*/
/*item2*/
.item2 {
	overflow: hidden;
	border: 3px solid #779eec;	/*枠線の幅、線種、色*/
	padding: 20px;				/*ボックス内の余白*/
	border-radius: 10px;		/*角丸のサイズ。この１行を削除すれば角のとれた長方形になります。*/
	margin: 0 1% 20px;		/*ボックスの上・左右・下に空けるスペース*/
    box-sizing: border-box;
    float:left;
    width:48%;
}
/*item2内のh4タグ*/
.item2 h4 {
	color: #779eec;		/*文字色*/
	font-size: 130%;	/*文字サイズ*/
}
/*item2内のpタグ*/
.item2 p {
	padding: 0 !important;
}
/*item2内のfrとflスタイルのリセット*/
.item2 .fr,.item2 .fl {margin-bottom: 0;}


/*item3 文章縦2列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item3 {
	overflow: hidden;
	width: 42%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.item3 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の..item3のpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
	background: url(../images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}
/*マウスオン時の設定*/
.item3 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定*/
.item3 h4 {
	color: #779eec;		/*文字色*/
	font-size: 120%;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	height: 2em;		/*高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*p（段落）タグの設定*/
.item3 p {
	padding: 0 !important;
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90%;		/*文字サイズを少し小さく*/
	color: #333;		/*文字色*/
	height: 6em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}


/*item4 文章縦3列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item4 {
	overflow: hidden;
	width: 26.4%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.item4 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.item4のpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
	background: url(../images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}
/*マウスオン時の設定*/
.item4 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定*/
.item4 h4 {
	color: #779eec;		/*文字色*/
	font-size: 120%;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	height: 2em;		/*高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*p（段落）タグの設定*/
.item4 p {
	padding: 0 !important;
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90%;		/*文字サイズを少し小さく*/
	color: #333;		/*文字色*/
	height: 6em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}


/*item5 写真縦2列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item5 {
	overflow: hidden;
	width: 42%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.item5 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の..item3のpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
}
/*マウスオン時の設定*/
.item5 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
.item5 figure {
    text-align:center;
}

/*item6 写真縦3列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item6 {
	overflow: hidden;
	width: 26.4%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.item6 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.item4のpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
}
/*マウスオン時の設定*/
.item6 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
.item6 figure {
    text-align:center;
}

/*item7 写真縦4列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item7 {
	overflow: hidden;
	width: 18.6%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.item7 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.item4のpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
}
/*マウスオン時の設定*/
.item7 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
.item7 figure {
    text-align:center;
}

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


/*item3 文章縦2列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item3 {
	width: auto;
	float: none;
	margin-left : 0;
}
.item3 figure {
	float: left;
	width: 40%;
	margin-right: 2%;
}
/*h4（見出し）とp(段落)タグの設定*/
.item3 h4, .item3 p {
	height: auto;
}


/*item4 文章縦3列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item4 {
	width: auto;
	float: none;
	margin-left : 0;
}
.item4 figure {
	float: left;
	width: 40%;
	margin-right: 2%;
}
/*h4（見出し）とp(段落)タグの設定*/
.item4 h4, .item4 p {
	height: auto;
}


/*item5 写真縦2列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item5 {
	width: auto;
	float: none;
	margin-left : 0;
}
.item5 figure {
	float: left;
	width: 40%;
	margin-right: 2%;
}


/*item6 写真縦3列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item6 {
	width: auto;
	float: none;
	margin-left : 0;
}
.item6 figure {
	float: left;
	width: 40%;
	margin-right: 2%;
}


/*item7 写真縦4列
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.item7 {
	width: auto;
	float: none;
	margin-left : 0;
}
.item7 figure {
	float: left;
	width: 40%;
	margin-right: 2%;
}


}