@charset "utf-8";


/*PC・タブレット・スマホ共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
* {
	margin: 0px;
	padding: 0px;
}
body {
	color: #767164;	/*全体の文字色*/
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	line-height: 2;		/*行間*/
		-webkit-text-size-adjust: none;
	}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size:95%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #767164;	/*リンクテキストの色*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
a:hover {
	color: #d27779;	/*マウスオン時の文字色*/
}

/*コンテナー（ホームページを囲む一番外側のブロック）
---------------------------------------------------------------------------*/
#container {
	width: 85%;			/*ブロックの幅を画面の85%にする設定。*/
	max-width: 1000px;	/*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/
	margin: 0 auto;	/*HP画面の左右中央に表示させる設定*/
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	text-align: center;	/*headerの中身をセンタリングさせる設定*/
}
/*ロゴ画像設定*/
#logo  img {
	width: 100%;			/*画像幅を上で設定している「container」の80%にする設定。*/
}

/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	padding: 2% 4%;			/*ブロック内の余白*/
	overflow: hidden;
}

#contents h1 {
	text-align:center;
	clear: both;
	margin-bottom: 10px;
	padding: 3px 20px;	/*上下、左右への余白*/
}

#contents h2 {
	clear: both;
	margin-bottom: 16px;
	padding:3px 5px ;	/*上下、左右への余白*/
	border-radius: 5px;	/*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/
	border: 2px solid #c3ceeb;	/*枠線の幅、線種、色*/
}

#contents h3 {
    color: #986bad;
    text-align:center;
	clear: both;
	margin-bottom: 16px;
	padding:3px 50px ;	/*上下、左右への余白*/
}

#contents h4 {
    font-size:115%;
	clear: both;
	margin-bottom: 15px;
	color: #fff;		/*文字色*/
	padding: 5px 20px;	/*上下、左右への余白*/
	background:#986bad;	/*背景色*/
	border-radius: 4px;	/*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/
}

#contents h5{
	clear: both;
	color:#FFF;
	margin-bottom: 15px;
	padding: 20px 50px;	/*上下、左右への余白*/
	background:#C1CEC1;	/*背景色*/
	border-radius: 4px;	/*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/
}

#contents h6{
	clear: both;
	color:#fff;
	text-align:center;
	margin-bottom: 15px;
	padding: 20px 50px;	/*上下、左右への余白*/
	background:#59754D;	/*背景色*/
	border-radius: 4px;	/*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/
}


/*コンテンツの段落タグ設定*/
#contents p {
	padding: 7px 20px 14px;	/*上、左右、下への余白*/
}
#contents p + p {
	padding-top: 0px;
}
#contents h2 + p,
#contents h3 + p,
#contents h4 + p {
	padding-top: 0px;
	margin-top: -5px;
}

.box {
    margin: 5px ;
    padding:10px;
	border:thin ;
	border-color:#333;
    float:center;
	color: #171C61;

}


/*フッター
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;	/*文字をセンタリング*/
	padding: 10px 0px;	/*左から、上下、左右への余白*/
	color: #767164;		/*文字色*/
}

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

/*コンテナー（ホームページを囲む一番外側のブロック）
---------------------------------------------------------------------------*/
#container {
	width: 95%;		/*ブロックの幅を画面の90%にする設定。*/
}

/*コンテンツのh3タグの設定*/
#contents h3 {
	clear: both;
	margin-bottom: 16px;
	padding:3px 10px ;	/*上下、左右への余白*/
	border-radius: 5px;	/*角丸のサイズ。大きくすれば角の丸みが大きくなる。角丸が不要ならこの１行削除。*/
	border: 2px solid #88B04B;	/*枠線の幅、線種、色*/
}