@charset "utf-8";

/* ================ Icon Font ================= */
@font-face {
	font-family: 'icomoon';
	src: url('../font/icomoon.eot');
	src: url('../font/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../font/icomoon.woff') format('woff'),
		url('../font/icomoon.ttf') format('truetype'),
		url('../font/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ================ Reset ================= */
body {
	margin:0;
	padding: 0;
	-webkit-text-size-adjust: none;
	font-family: 'icomoon', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Helvetica, Verdana, sans-serif;
	/*font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";*/
	letter-spacing: 0.1em;
	position: static;
	color: #333;
	line-height: 1.5;
}
img{
	vertical-align: bottom;
	border: 0;
}
h1, h2, h3, h4, h5, h6, p{
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
article,aside,details,figcaption,figure,dl,dt,dd,
footer,header,hgroup,menu,nav,section {
	display:block;
	margin: 0;
	padding: 0;

	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
ol,ul,li {
	list-style:none;
	padding:0;
	margin: 0;
}
input, select {
	vertical-align:middle;
}

a {
	-webkit-tap-highlight-color:transparent;
	-webkit-tap-highlight-color:rgba( 100, 100, 100, 0.5 );
	text-decoration: none;
	color: #333;
}

/* ================ Style ================= */
html,body{
	width: 100%;
	height: 100%;
	min-width: 960px;
	min-height: 700px;
	position: relative;
	top: 0;
	left: 0;
}
header{
	width: 100%;
	padding: 20px;
	background-color: #fff;
	box-sizing: border-box;
}
header h1 {
	width: 960px;
	margin: 0 auto;
	background-color: #fff;
}

footer{
	width: 100%;
	padding: 20px 0;
	background-color: #F6F6F6;
}
footer #f_box{
	width: 960px;
	margin: 0 auto;
}
footer #f_box p {
	font-size: 12px;
	text-align: center;
}




#wrapper {
	padding: 50px 0 0;
	margin: 0 0 80px;
	text-align: center;
}
#wrapper .primary {
	width: 960px;
	max-width: 1600px;
	margin: 0 auto;
	position: relative;
	top: 0;
	left: 0;
}

#wrapper nav{
	width: 100%;
	height: 35px;
	padding: 15px 0 0;
	position: fixed;
	top: 58px;
	left: 0;
	z-index: 90;
}
#wrapper nav ul {
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
}
#wrapper nav ul li {
	color: #fff;
	font-weight: bold;
	font-size: 0.7rem;
	float: left;
}
#wrapper nav ul li a {
	color: #fff;
}
#wrapper nav ul li a:hover {
	color: #99cc00;
	background-color: #fff;
}
#wrapper nav ul li.backtop {
	float: right;
	background: url(../images/bg_back-to.png) top left no-repeat;
	padding: 0 0 0 20px;
}


/* archive */
#wrapper .archive {
	width: 200px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	box-sizing: border-box;
	z-index: 10;
}
#wrapper .archive dt a {
	display: block;
	overflow: hidden;

	font-size: 12px;
	font-weight: bold;
	line-height: 3em;
	text-align: left;

	background-color: #fff;
	border: 1px solid #ccc;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	transition: all .3s;
}
#wrapper .archive dt a:before {
	display: block;
	float: left;
	content: '\f0a3';
	font-size: 14px;
	font-size: 1.4rem;
	padding: 0 10px;
	margin: 0 10px 0 0;
	border-right: 1px solid #ccc;
}
#wrapper .archive dt a:hover {
	color: #fff;
	background-color: #86be11;
	border: 1px solid #ccc;
}
#wrapper .archive dt a:hover:before {
	content: '\f0a3';
	color: #fff;
	border-right: 1px solid #ccc;
}


#wrapper .archive dt a.active {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
#wrapper .archive dt a.active:before {
	content: '\e605';
	padding: 0px 6px;
}
#wrapper .archive dt a.active:hover:before {
	content: '\e605';
}

#wrapper .archive dd {
	margin: 0;
	padding: 0;
	display: none;
}
#wrapper .archive dd a {
	display: block;
	margin: 0;
	padding: 8px 20px 8px 15px;
	text-align: left;

	font-size: 12px;
	font-weight: bold;
	line-height: 1.2;

	background-color: #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

	transition: all .3s;
}
#wrapper .archive dd a.last-child {
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
}
#wrapper .archive dd a:hover {
	background-color: #86be11;
	color: #fff;
}
#wrapper .archive dd a.current {
	background-color: #86be11;
	color: #fff;
}


#wrapper .archive-link h5 {
	margin: 0 auto 40px;
	text-align: center;
	display: table;
	white-space: nowrap;
}
#wrapper .archive-link h5:before {
	width: 50%;
	display: table-cell;
	content: '';
	border-left: 1em solid transparent;
	background: -webkit-linear-gradient(transparent 50%, #86be11 50%, #86be11 -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px));
	background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, #86be11), color-stop(#86be11 calc(50% + 1px)), to(transparent calc(50% + 1px)));
	background: linear-gradient(transparent 50%, #86be11 50%, #86be11 calc(50% + 1px), transparent calc(50% + 1px));
}
#wrapper .archive-link h5:after {
	display: table-cell;
	width: 50%;
	content: '';
	border-right: 1px solid transparent;
	background: -webkit-linear-gradient(transparent 50%, #86be11 50%, #86be11 -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px));
	background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, #86be11), color-stop(#86be11 calc(50% + 1px)), to(transparent calc(50% + 1px)));
	background: linear-gradient(transparent 50%, #86be11 50%, #86be11 calc(50% + 1px), transparent calc(50% + 1px));
}

#wrapper .archive-link h5 img {
	width: 308px;
	padding: 0 15px;
}
#wrapper .archive-link ul {
	overflow: hidden;
}
#wrapper .archive-link ul li.link-box {
	float: left;
	margin: 0 23px 23px 0;
	background-color: #fff;
	border: 2px dotted #86be11;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px!important;
	transition: all .2s;
	width: 300px;
}
#wrapper .archive-link ul li.link-box:nth-child(3n) {
	margin-right: 0;
}
#wrapper .archive-link ul li.link-box a {
	display: block;
	padding: 15px;
	text-align: left;
	font-size: 0.9rem;
	position: relative;
	top: 0;
	left: 0;
}
#wrapper .archive-link ul li.link-box .image {
	margin: 0 0 13px;
	width: 270px;
}
#wrapper .archive-link ul li.link-box dl dt {
	font-weight: bold;
	line-height: 2;
	font-size: 12px;
	height: auto;
	text-indent: -1em;
	margin-left: 1em;
}
#wrapper .archive-link ul li.link-box dl dt:before {
	content: '\f078';
	margin: 0 5px 0 0;
	color: #86be11;
}



#wrapper .archive-link li.link-box:hover {
	border-style: solid;
	/*background-color: #ccc;*/
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px!important;
}



#footer {
	width: 100%;
	height: 50px;
	background: url(../images/bg_footer.png) top left repeat-x;
	background-size: contain;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
}
#footer .inner {
	min-width: 960px;
	max-width: 1600px;
	margin: 0 auto;
	overflow: hidden;
	padding: 23px 0 0 0;
}
#footer .notice {
	float: left;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	padding-left: 20px;
}

#footer .copy {
	text-align: right;
	color: #fff;
	font-size: 0.7rem;
	margin: 0 20px 0 0;
}
#footer .pagetop {
	display: block;
	width: 68px;
	height: 68px;
	box-sizing: border-box;
	border: 0px solid;
	border-color: rgba( 134, 190, 17, 1);
	overflow: hidden;

	-moz-border-radius: 68px;
	-webkit-border-radius: 68px;
	border-radius: 68px;
	text-align: center;

	position: absolute;
	left: 50%;
	bottom: 20%;
	margin-left: -34px;
	transition: all .2s;

	opacity: 0;
}

#footer .pagetop:before {
	content: "";
	display: block;

	width: 68px;
	height: 68px;
	box-sizing: border-box;

	overflow: hidden;
	background-color: #fff;
	border: 4px solid;
	border-color: rgba( 134, 190, 17, 1);

	-moz-border-radius: 68px;
	-webkit-border-radius: 68px;
	border-radius: 68px;

	transition: all .2s;
}


#footer .pagetop img {
	width: 26px;
	position: absolute;
	top: 12px;
	left: 50%;

	margin-left: -13px;
	transition: all .2s;
}


#footer .pagetop span {
	display: block;
	width: 25px;
	height: 48px;
	position: absolute;
	top: 4px;
	left: 50%;

	overflow: hidden;
	margin-left: -13px;
}


#footer .pagetop:hover {
	width: 68px;
	height: 68px;

	border-width: 4px;
	background-color: #fff;
	border-color: rgba( 134, 190, 17, 1);
	-moz-border-radius: 68px;
	-webkit-border-radius: 68px;
	border-radius: 68px;

	margin-left: -34px;
}
#footer .pagetop:hover:before {
	width: 60px;
	height: 60px;
	box-sizing: border-box;

	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;

	background-color: #86be11;
	border-color: rgba( 255, 255, 255, 1);
}
#footer .pagetop:hover img {
	top: -56px;
}