@charset "UTF-8";*{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";margin:0;padding:0;}

html body{width:100%;height:100%;margin:0;padding:0;}

body{
	margin:0;
	padding:0;
	font-size:14px;
	background-color:#87ddf9;
	color:#f2b923;
}

cl{
	clear:both;
}

a{
	text-decoration:none;
	color:#f2b923;
}

.img{
	max-width: 100%; 
    height:auto;
}

/* header */

header{
	box-sizing:border-box;
	width:100%;
	text-align:center;
	padding:20px 0 10px;
	height:350px;
}

#header_wrap{
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
	text-align:center;
	padding:20px 0 10px;
}

#logo{
	width:100%;
	height:180px;
}

#menu{
	width:100%;
	height:180px;
}

#nav_wrap{
	width:100%;
	height:60px;
	text-align:center;
}

#form_wrap{
	width:100%;
	height:90px;
	text-align:center;
}

#nav{
	box-sizing:border-box;
	margin:10px auto;
	padding:5px 0 0;
	width:100%;
	height:30px;
	text-align:center;
	background-color:#fff;
}

#nav span{
	margin:0 10px;
}

#form{
	box-sizing:border-box;
	margin:10px auto;
	padding:12px 0 0;
	width:100%;
	height:50px;
	text-align:center;
	background-color:#fff;
}

button{
	background-color:#f2b923;
	width:80px;
	border-style:none;
	height:26px;
	color:#fff;
}

#text{
	background-color:#f2b923;
	width:200px;
	height:26px;
	border-style:none;
}

/* banner area */
.banner{
	box-sizing:border-box;
	width:100%;
	height:80px;
	margin:30px auto 10px;
	padding:10px 0;
	text-align:center;
	background:#fff;
}

/* new post */
.post_wrap{
	width:100%;
	margin:10px auto;
}

.post{
	width:90%;
	margin:5px auto;
	padding:10px;
	background-color:#fff;
	text-align:center;
	box-sizing:border-box;
}

.post_text{
	text-align:left;
	overflow:hidden;
}

/* wrap */
#wrap{
	box-sizing:border-box;
	width:100%;
	overflow: hidden;  
	margin:20px auto;
	padding:10px;
	height: auto;
}

#left {
	box-sizing:border-box;
	width:100%;
	margin:10px auto;
}

#right {
	box-sizing:border-box;
	width:100%;
	margin:10px auto;
}

.left_main{
	box-sizing:border-box;
	width:100%;
	height: auto !important;
    height: 100%;
    min-height: 100%;
	background-color:#fff;
	margin:0 auto 10px;
	padding:10px;
}

.left_main p{
	margin:5px 0;
}

.title{
	width:100%;
	border-bottom:1px dotted #f2b923;
	overflow:hidden;
	margin:5px 0;
	padding:3px 0;
}

.right_main{
	box-sizing:border-box;
	width:90%;
    /*height: 298px;*/
	background-color:#fff;
	margin:0 auto 10px;
	padding:10px;
}

.right_banner{
	box-sizing:border-box;
	width:100%;
    height: 8;
	background-color:#fff;
	margin:0 auto;
	padding:10px;
	margin:0 0 10px;
}

.post_img{
	width:65%;
	overflow:hidden;
	margin:10px auto 0;
}

.date{
	text-align:right;
}

.date span{
	margin:0 5px;
}

/*pagination*/
.pagination {
    padding: 20px;
	width:100%;
	text-align:center;
	margin:10px auto 20px;
}

.page {
    display: inline-block;
    padding: 3px 9px;
    margin-right: 4px;
    border:solid 1px #f2b923;
    background:#fff;
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

.page:hover, .page.gradient:hover {
    background: #f2b923;
}

.page.active {
    border: none;
    background: #f2b923;
    color: #fff;
}

/* detail */
.detail{
	box-sizing:border-box;
	width:100%;
	background-color:#fff;
	margin:0 auto 10px;
	padding:10px;
}


/* footer */

footer{
	box-sizing:border-box;
	width:100%;
	height:55px;
	border-top:1px solid #f2b923;
	background-color:#fff;
}

#footer_wrap{
	box-sizing:border-box;
	width:80%;
	margin:0 auto;
	padding:10px 0 0;
	text-align:center;
}