@charset "utf-8";

/* general setting */
body {
	font-family: "Mplus 1p", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	font-size:16px;
	color:#000;
}

html,body,p,h1,h2,h3,h4,h5,ul,ol,li,dd,dl,dt,div {
	padding:0;
	margin:0;
}

img { border:0; }
html { height:100%; }
li { list-style-type:none; }
a {
	color:#ff0d77;
	text-decoration:none;
}

a.underline {

	text-decoration:underline;
}

.tcenter { text-align:center; }
.floatleft { float:left; }
.clearleft { clear:left; }
.clear {
	clear:right;
	clear:left;
}
.clearleft { clear:left; }
.block { display:block; }
.inlineblock { display:inline-block; }
.inline { display:inline; }
.none { display:none; }

.tleft { text-align:left; }
.tright { text-align:right; }

.pad10 { padding:10px; }
.mrgt10 { margin-top:10px; }
.mrgb10 { margin-bottom:10px; }
.none { display:none; }
.sp { display:none; }
.sp_ib { display:none; }
.sp_inline { display:none; }
.pc { display:block; }
.pc_ib { display:inline-block; }
.pc_inline { display:inline; }
.mode { float:left; }

/* for modern brouser */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	font-size:0;
	visibility: hidden;
}


.mCSB_scrollTools {
	width: 10px !important;
}

.mCSB_draggerRail,.mCSB_dragger_bar {
	width: 10px !important;
	margin: 0 !important;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
}

.mCSB_draggerRail { background: #ccc !important; }
.mCSB_dragger_bar { background: #115586 !important; }
.mCSB_inside>.mCSB_container { margin-right: 10px !important; }


.mode{float:left;}

@media all and (max-width: 736px)  {
	body {
		font-size:13px;	
	}
	.mode{float:right;}

	.sp { display:block; }
	.sp_ib { display:inline-block; }
	.sp_inline { display:inline; }
	.pc { display:none; }
	.pc_ib { display:none; }
	.pc_inline { display:none; }
	img { max-width:100%; }
}


/* common setting */


body{
background-color:#fff;
background:url(../images/bg.png) 0 0 repeat-x;

}



h2{
	padding-top:20px;
	padding-bottom:20px;
	text-align:center;
}


h3{
width:90%;
background-color:#8e84ff;
color:#fff;
font-size:1.2em;
padding:5px 10px;
margin:0 auto 10px auto;
}

p{
font-size:1em;
margin-bottom:10px;

}



.wrapper{
position:relative;
background:url(../images/footer_bg.png)  center 100%   no-repeat;
padding-top:30px;
padding-bottom:300px;
width:1200px;
margin:0 auto;
}

.header_wrapper{
background-color:#8e84ff;
}

header{
position:relative;
width:1200px;
margin:0 auto;
}



header h1.pc{
padding-left:15px;
padding-right:22px;
float:left;
}

header h1.pc img{
padding-top:5px;
}

header ul{
height:56px;
line-height:56px;
float:left;
}

header ul li{
	float:left;
	padding:0 10px;
	margin-right: 5px;
}

header ul li a{
height:100%;
display:inline-block;
}

header ul li img{margin-bottom:-7px;}

header ul li.on{background-color:#13e5e2; border-bottom:5px solid #ffde16;}
header ul li.over{background-color:#13e5e2; border-bottom:5px solid #ffde16;}

header ul li .on{display:none;}
header ul li.on .on{display:inline;}
header ul li.on .off{display:none;}

header .open{display:none;}
header .close{display:inline;}
header.close .open{display:inline;}
header.close .close{display:none;}

header.close ul{ display:none;}
.spnav{display:none;}


section{
	margin:0 auto 20px auto;
	position:relative;
}

.main{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+42,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 42%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 42%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 42%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}



.content_list{
width:100%;
}

.content_list li {
	clear:left;
	margin-bottom:10px;
}

.content_list li .title{
vertical-align:middle;

}

.content_list li .title:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	font-size:0;
	visibility: hidden;
}

.content_list li .title .date{
	width:92px;
	float:left;
	color:#fff;
	text-align:center;
	background-color:#23af6f;
	padding: 5px;

}

.content_list li .title .titletext{
	float:left;
	width:calc(100% - 128px);
	padding: 5px 5px 5px 14px;
	background-color:rgba(234,248,242,0.8);
	color:#23af6f;
}

.content_list li a {
	color:#23af6f;
	text-decoration:underline;
}
/*open*/
.content_list li .title.open{

}

.content_list li .title.open .date{
	color:#fff;
}

.content_list li .title.open .titletext{
}


.content_list li .content{
	display:none;
	margin-left:105px;
	padding:14px;

}

.content_list li.withcontent .title{
cursor:pointer;
}

.content_list li.withcontent .title .titletext{
text-decoration:underline;
}

.archive{
position:absolute;
left:0;
bottom:35px;
text-align:center;
width:100%;
}



*[goto]{
cursor:pointer;
}

footer{
text-align:center;
padding:20px 0;
width:1200px;
margin:0 auto;
font-size: 0.75em;
}

@media all and (min-width: 0) and (max-width: 736px)  {
	.wrapper{
		width:auto;
		background-size:250% auto;
		padding-bottom:360px;
	}
	img{
		max-width:90%;
	}
	body{
	}
	.spnav{
		display:block;
		height:50px;
		background-color:#8e84ff;
	}	
	.spnav .left{
		width:64%;
		padding-top:1%;
		padding-left:1%;
		float:left;
	}
	.spnav .right{
		width:35%;
		float:left;
		text-align:right;
	}
	.spnav .right .menu_open{
		margin-bottom:-20px;
		margin-right:5px;
		cursor:pointer;
	}
	header{
		width:auto;
		position:fixed;
		z-index:2;
		width:100%;
		left:0;
		top:0;
		background-color:#8e84ff;
	}
	header ul{
		padding-top:30px;
		padding-bottom:30px;
		width:100%;
		height:auto;
		line-height:normal;
		float:none;
		display:none;
	}

	header ul li{
		float:none;
		text-align:center;
		padding:15px 0;
	}

	header ul li.on{border-bottom:0;}
	header ul li.over{border-bottom:0;}

	.wrapper{
		padding-top:70px;
	}

	.content_list{
		width:auto;
	}

	.content_list li {
		margin-bottom:5px;
	}

	.content_list li .title{

	}

	.content_list li .title .date{
		width:22%;
	}

	.content_list li .title .titletext{

		width:calc(70%);
		padding-left:2%;
		overflow:hidden;
	}

	.content_list li .content{
		margin-left:0;
		padding:14px;
	}
	
	.archive span{
		display:block;
	}

	.archive a{
		display:inline-block;
		width:40%;
		padding:0;
	}


footer{
width:100%;
margin:0 auto;
}



}