@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: #313131; /*背景色の指定*/
	margin-bottom: 20px;
	overflow: hidden; /*おまじない*/
}
#branding p{
	color: #fff; /*文字色の変更*/
	font-size: 120%; /*フォントサイズの調整*/
	letter-spacing: 10px; /*文字と文字の間隔をあける*/
	line-height: 300px; /*行間の指定（ブランディングの高さを決める）*/
	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-left: 20%;	/*左端から20%右側に動かす*/
}
nav li{
	width: calc(25% - 2px);	/*横幅の指定（線の分をマイナスする）*/
	border-left: 1px solid orange;	/*線を描く*/
	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;	/*ホバー時の動きをなめらかにする*/
}

/*****ARTICLE*****/

section{
	width: 41%;	/*横幅の指定*/
	padding: 2.5%;	/*余白の指定*/
	margin: 1.5%;
	background-color: #f9f9f9;	/*背景色の指定*/
	overflow: hidden;	/*おまじない*/
	float: left;	/*フロートする*/
}
section .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;	/*フロートする*/
}
section h1{
	width: 100%;	/*横幅の指定*/
	font-size: 150%;	/*フォントサイズの指定*/
	color: #313131;	/*文字色の変更*/
	letter-spacing: 3px;	/*文字と文字の間隔をあける*/
	padding-bottom:2px;	/*文字下部の余白指定*/
	padding-top: 10px; /*文字上部の余白指定*/
	border-bottom: 1px solid #bababa;	/*文字の下部に線を描く*/
	margin-bottom: 15px;	/*セクションタイトルの下に余白をつくる*/
	float: left;	/*フロートする*/
}
section p{
	font-size: 100%;	/*フォントサイズの指定*/
	color: #313131;	/*文字色の変更*/
	letter-spacing: 3px;	/*文字と文字の間隔をあける*/
	line-height: 200%;	/*行間をあける*/
	margin-bottom: 10px;	/*文字とボタンの間をあける*/
	float: left;	/*フロートする*/
}
section .btn{
	color: #fff;	/*文字色の変更*/
	border: 1px solid orange;	/*線を描く（ホバー時のずれを防ぐため）*/
	background-color: orange;	/*背景色の指定*/
	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;	/*フロートする*/
}
section .btn:hover{
	background-color: #fff;	/*背景色の指定*/
	border: 1px solid orange;	/*線を描く*/
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;	/*ホバー時の変化をなめらかに*/
	color: orange;	/*文字色の指定*/
	overflow: hidden;	/*おまじない*/
}

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



.anchor{
padding-top:30px;
margin-top:-30px;
}


/* Clearing floats */
.clearfix:after,
.wrapper:after,
.format-status .entry-header:after {
clear: both;
}
.clearfix:before,
.clearfix:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
display: table;
content: "";
}



.flexbox{
	width:100%;
	max-width:1200px;
	margin: auto;
	padding-left:0;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

.flexbox > *{
	box-sizing: border-box;
	width:24%;
	margin:0.45%;
	vertical-align:top;
	position:relative;
}

.flexbox > .flex15{
	width:15%;
	margin:0;
}

.flexbox > .flex20{
	width:20%;
	margin:0;
}

.flexbox > .flex25{
	width:25%;
	margin:0;
}

.flexbox > .flex30{
	width:30%;
	margin:0;
}

.flexbox > .flex35{
	width:35%;
	margin:0;
}

.flexbox > .flex40{
	width:40%;
	margin:0;
}
.flexbox > .flex45{
	width:45%;
	margin:0;
}
.flexbox > .flex50{
	width:50%;
	margin:0;
}
.flexbox > .flex55{
	width:55%;
	margin:0;
}
.flexbox > .flex60{
	width:60%;
	margin:0;
}
.flexbox > .flex65{
	width:65%;
	margin:0;
}
.flexbox > .flex70{
	width:70%;
	margin:0;
}
.flexbox > .flex75{
	width:75%;
	margin:0;
}
.flexbox > .flex80{
	width:80%;
	margin:0;
}

.wrapper{
	width: 100%;
	margin: auto;
	max-width: 1000px;
}
.w100{
display:block;
float:none;
padding:0;
}
.w100 > img{
width:100%;
height:auto;
display: block;
}

.w100.round{
	display: block;
	border-radius: 50%;
}
.w100.round img{
	display: block;
}

.w50{
width:48%;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
padding:0;
margin-left: 1%;
margin-right: 1%;
}
.l-box.w50{
	margin-left: 0;
	
}
.r-box.w50{
	margin-right: 0;
}

.w33{
width:32.33%;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
margin:0 0.5%;
}
.w66{
width:65%;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
margin:0 0.5%;
}
.w75{
width:74%;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
margin:0 0.5%;
}

.w25{
width:24%;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
margin:0 0.5%;
}
.w20{
width:19%;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
margin:0 0.5%;
}

table{
	margin-bottom: 2em;
	width: 100%;
}
table td,
table th{
	border: 1px solid #ccc;;
	padding: 0.5em 1em;
}
table th{
	background: rgba(222,244,255,1.00);
	
}

table .at:before{
	content: '＠';
}

h1{
	font-size: 1.3em;
	margin-bottom: 1em;
	margin-top: 2em;
	border-bottom: 3px solid  rgba(12,34,115,1.00);
}
h2{
	font-size: 1.2em;
	margin-bottom: 1em;
	margin-top: 2em;
}
h2:before{
	content: '■';
	margin-right: 0.8em;
	color: rgba(12,34,115,1.00);
		
}

h3{
	font-size: 1.1em;
	margin-bottom: 1em;
}

#outline{}
#archive{}

#archive > .clearfix{
	margin-bottom: 2em;
}

#footer p{
	margin-top: 5em;
	color: #fff;
}