@charset "utf-8";
/* CSS Document */

body{
font: 14px/1.6 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
margin:0;
color: #313131;
}

img{
outline:none;
border-style:none;
}

a{
	color:blue;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
a:visited{
	color:blue;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
a:hover {
	color: #F5A862;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

/*****HEADER*****/
header{
	display: block;
	width:60%;
	margin-left: 20%;
	overflow: hidden;
}
header h1{
	font-size:120%;	/*フォントサイズの調整*/
	color:#313131;	/*文字色の変更*/
	padding-top: 10px;	/*文字上部に余白*/
	padding-bottom: 10px;	/*文字下部に余白*/
	padding-left: 20px;	/*文字左側に余白*/
	padding-right: 20px;	/*文字右側に余白*/
	margin-top: 20px;	/*ロゴ上部に余白*/
	margin-bottom: 20px;	/*ロゴ下部に余白*/
	border:1px solid #313131;	/*文字の周りに線を描く*/
	border-radius: 5px;	/*線の角に丸みを付ける*/
	letter-spacing: 3px;	/*文字と文字の間隔をあける*/
	font-weight:400;	/*文字の太さの変更*/
	float: left;	/*左側にfloat*/
}
header p{
	font-size:100%;
	color:#313131;
	float: left;
}


/*****BRANDING*****/
#branding{
	width: 60%;	/*横幅指定*/
	margin-left: 20%; /*左端から20%右側に動かす*/
	background-color: #4169e1; /*背景色の指定*/
	margin-bottom: 20px;
	overflow: hidden; /*おまじない*/
}
#branding p{
	color: #fff; /*文字色の変更*/
	font-size: 180%; /*フォントサイズの調整*/
	letter-spacing: 5px; /*文字と文字の間隔をあける*/
	line-height: 160px; /*行間の指定（ブランディングの高さを決める）*/
	padding-left: 3%; /*文字の左側に余白をあける*/
}

/*****NAV*****/
nav{
	width: 100%;	/*横幅の指定*/
	border-top: 1px solid orange;	/*上部の線の色を指定*/
	border-bottom: 1px solid orange;	/*下部の線の色を指定*/
	margin-bottom: 5px;	/**/
	overflow: hidden;	/*おまじない*/
}
nav ul{
	width: 60%;	/*横幅の指定*/
	margin: auto;	/*中央に配置する*/
	list-style: none; /*リストのスタイルを削除*/
}
nav li{
	width: calc(100% / 4);	/*横幅の指定*/
	border-left: 1px solid orange;	/*線を描く*/
	box-sizing: border-box; /*線の幅をliの横幅に含める*/
	text-align: center;	/*文字を中央に*/
	float: left;	/*左から並べる*/
}
nav li:last-child{
	border-right: 1px solid orange;	/*li要素の最後の物は右側に線を描く*/
}
nav a{
	display: block;	/*1つのli全体にリンクを有効にする*/
	text-decoration: none;	/*ブラウザ標準のリンク装飾をオフに*/
	color:#313131;	/*文字色の変更*/
	font-size: 110%;	/*フォントサイズの指定*/
	letter-spacing: 5px;	/*文字と文字の間隔をあける*/
	font-weight: 400;	/*文字の太さを調整*/
	line-height: 45px;	/*行間の指定（ナビボタンの高さ指定）*/
}
nav a:hover{
	background-color: orange;	/*背景色の指定*/
	color: #fff;	/*文字色の変更*/
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;	/*ホバー時の動きをなめらかにする*/
}
/*****pankuzu*****/
#pankuzu {
	margin-bottom: 3px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #AEB8B8;
	font-size: 14px;
	color: #6B878B;
	line-height: 16px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
}
#pankuzu strong {
	font-weight: normal;
	color: #6B878B;
	font-size: 16px;
	letter-spacing: 1px;
}

/*****MAIN*****/
main{

	width: 45%;	/*横幅の指定*/
	margin: auto; /*上下20px 左右中央*/
	text-align: center;	/*文字を中央に*/
	font-size: 130%;	/*文字サイズの指定*/
	overflow: hidden;
}
/*****PIC*****/

#pic{
    width: 100%;
    margin-bottom: 18px;
    padding:2px;
    text-align: center;
    
}

/*****ARTICLE*****/
section{
	display: block;
	width: 65%;
	margin: 20px auto; /*上下20px 左右中央*/
	overflow: hidden;
}
article{
	width: calc(50% - 15px);	/*横幅の指定*/
	padding: 2.5%;	/*余白の指定*/
	margin-bottom: 30px;
	background-color: #f0f8ff;	/*背景色の指定*/
	overflow: hidden;	/*おまじない*/
	float: left;	/*フロートする*/
}
article:nth-child(2n){
	margin-left: 30px; /*2の倍数の記事は左側に余白を30px*/
}
article .date{
	font-size: 60%;	/*文字サイズの指定*/
	color: orange;	/*文字色の指定*/
	border: 1px solid orange;	/*線を描く*/
	padding-top:3px;	/*文字上部の余白指定*/
	padding-bottom: 3px;	/*文字下部の余白指定*/
	padding-right: 6px;	/*文字右側の余白指定*/
	padding-left: 6px;	/*文字左側の余白指定*/
	letter-spacing: 5px;	/*文字と文字の間隔をあける*/
	float: left;	/*フロートする*/
}
article h1{
	width: 100%;	/*横幅の指定*/
	font-size: 150%;	/*フォントサイズの指定*/
	color: #313131;	/*文字色の変更*/
	letter-spacing: 3px;	/*文字と文字の間隔をあける*/
	padding-bottom:2px;	/*文字下部の余白指定*/
	padding-top: 10px; /*文字上部の余白指定*/
	border-bottom: 3px solid #4169e1;	/*文字の下部に線を描く*/
	margin-bottom: 15px;	/*セクションタイトルの下に余白をつくる*/
	float: left;	/*フロートする*/
}
article p{
	font-size: 100%;	/*フォントサイズの指定*/
	color: #313131;	/*文字色の変更*/
	letter-spacing: 3px;	/*文字と文字の間隔をあける*/
	line-height: 200%;	/*行間をあける*/
	margin-bottom: 10px;	/*文字とボタンの間をあける*/
	float: left;	/*フロートする*/
}
article .btn{
	color: #fff;	/*文字色の変更*/
	border: 1px solid #3cb371;	/*線を描く（ホバー時のずれを防ぐため）*/
	background-color: #3cb371;	/*背景色の指定*/
	padding-top: 10px;	/*文字上部の余白を指定*/
	padding-bottom: 10px;	/*文字下部の余白を指定*/
	padding-right: 30px;	/*文字右側の余白を指定*/
	padding-left: 30px;	/*文字左側の余白を指定*/
	border-radius: 5px;	/*線の角を丸くする*/
	letter-spacing: 5px;	/*文字と文字の間隔をあける*/
	text-decoration: none;	/*ブラウザ標準のリンク装飾をオフに*/
	overflow: hidden;	/*おまじない*/
	float: right;	/*フロートする*/
}
article .btn:hover{
	background-color: #fff;	/*背景色の指定*/
	border: 1px solid #3cb371;	/*線を描く*/
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;	/*ホバー時の変化をなめらかに*/
	color: #3cb371;	/*文字色の指定*/
	overflow: hidden;	/*おまじない*/

/*****FOOTER*****/
}
footer{
	font-size: 80%;	/*フォントサイズの指定*/
	width: 100%;	/*横幅の指定*/
	text-align: center;	/*文字の中央寄せ*/
	padding-top: 10px;	/*文字上部の余白指定*/
	padding-bottom: 10px;	/*文字下部の余白指定*/
	background-color: #4169e1;	/*背景色の指定*/
}
footer address{
	color: #fff;	/*文字色の指定*/
	letter-spacing: 5px;	/*文字と文字の間隔をあける*/
	font-style: normal; /*文字の斜体を取り消す*/
}