@charset "utf-8";

/*===== reset css =====
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
=======================*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

/*=== 追加リセット ===*/
html{
font-size: 16px;
}

table {
border-collapse: separate;
width: 100%;
}

ul,
ol{
list-style: none;
}

/* リンク設定
------------------------------------------------------------*/
a{
margin: 0;
padding: 0;
text-decoration: none;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 100%;
font-weight: 600;
color: #65AA11;
}

a:link{
color: #65AA11;
}

a,
a::before,
a::after,
.filetree li span,
.filetree li span::after{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

a:hover,
a:active{
text-decoration: underline;
}

/*
a:visited{
color: #7313C1;
}*/

/*--- Clearfix ---*/
.clearfix::after {
content: '';
display: block;
clear: both;
}

/* 全体設定
------------------------------------------------------------*/
body{
font: 100%/1.7 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
background: #ECFBD9;
background-image: radial-gradient(#E0F9C2 20%, transparent 0), radial-gradient(#E0F9C2 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color:#333;
-webkit-text-size-adjust: 100%;
letter-spacing: 0.1em;
}

body *,
body *::before,
body *::after{
box-sizing: border-box;
}

#wrapper_wrapper{
max-width: 1040px;
width: auto;
height: auto;
margin: 0 auto;
padding: 30px;
}

.flex{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
}

/*=== header ===*/
#header{
width: 100%;
height: auto;
}

#header h2{
position: relative;
line-height: 1.3;
padding: 0 .7em .5em 0;
border-bottom: 2px dotted #5DAF00;
}

#header h2 a{
display: inline-block;
font-size: .9rem;
font-weight: 600;
color: #333;
}

#header h2 a:hover{
text-decoration: none;
}

#header h2 a span{
font-size: 1.5rem;
color: #5DAF00;
}

/*=== mainContent ===*/
#wrapper{
width: 100%;
height: auto;
padding: 30px 0;
}

#content,
.menu_box{
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .25) inset;
}

#content{
width: 72.5%;
margin-right: 2.5%;
}

#content_header{
width: 100%;
padding: 20px 30px 0;
}

#content_header h1{
font-size: 2rem;
line-height: 1.3;
margin-bottom: 15px;
}

/*--- main_img ---*/
.wrap{
width: auto;
height: auto;
background: rgba(0, 0, 0, .25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, .25);
border-radius: 10px;
}

#main_img{
position: relative;
width: 100%;
height: auto;
overflow: hidden;
border-radius: 10px;
}

.ratio::before{
content: "";
display: block;
padding-top: 50%;
}

#main_img::after{
position: absolute;
content: "";
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#main_img .thumbnailinner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#main_img img{
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
max-width: 100%;
height: auto;
vertical-align: bottom;
}

.post{
padding: 30px;
}

.post > * + *{
margin-top: 30px;
}

/*--- 見出し ---*/
.post h2,
.post h3,
.post h4{
position: relative;
padding: .5em .7em;
}

.post h2{
font-size: 1.5rem;
color: #fff;
background: rgba(129, 218, 21, .5);
border-top: 6px double #81DA15;
border-bottom: 6px double #81DA15;
text-shadow: 1px 1px 3px rgba(51, 51, 51, .4);
z-index: 1;
}

.post h2::before,
.post h2::after,
.post h3::after,
.post h4::before,
.post h4::after{
position: absolute;
display: block;
content: "";
}

.post h2::before,
.post h2::after{
bottom: -6px;
width: 30px;
height: calc(100% + 12px);
background: rgba(129, 218, 21, .5);
border-top: 6px double #81DA15;
border-bottom: 6px double #81DA15;
z-index: -1;
}

.post h2::before{
left: -30px;
}

.post h2::after{
right: -30px;
}

.post h3{
font-size: 1.25rem;
background: rgba(129, 218, 21, .1);
border-left: 8px solid #81DA15;
}

.post h3::after{
top: 0;
left: -8px;
width: 8px;
height: 50%;
background: #B1EF65;
}

.post h4{
border-bottom: 3px dashed #B1EF65;
padding-left: 2em;
}

.post h4::before{
bottom: -3px;
left: -3px;
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: #B1EF65;
border-bottom-color: #B1EF65;
transform: rotate(-90deg);
}

.post h4::after{
bottom: -3px;
left: 0;
width: 30%;
height: 3px;
background: #B1EF65;
}

/*--- リスト ---*/
.post li{
position: relative;
padding: 0 20px 0 50px;
}

.post li + li{
margin-top: .7em;
}

.post li::before,
.post li::after{
position: absolute;
content: "";
display: block;
top: .1em;
left: 20px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}

.post li::before{
background: #B1EF65;
}

.post ul li::before{
background: rgba(129, 218, 21, .35);
border: 5px solid #B1EF65;
border-radius: 100%;
}

.post ol{
counter-reset: olN;
}

.post ol li::after{
counter-increment: olN;
content: counter(olN);
font-size: .8rem;
color: #fff;
}

/*=== sideContent ===*/
#side_content{
width: 25%;
}

.menu_box{
padding: .5em .7em;
}

.menu_box + .menu_box{
margin-top: 20px;
}

.menu_box h6{
padding: .5em .7em;
font-size: .8rem;
text-align: center;
}

.menu li{
background: #fff;
}

.menu li + li{
border-top: 1px solid #efefef;
}

/*--- filetree ---*/
.filetree{
background: #fff;
border-radius: 10px;
overflow: hidden;
}

.filetree ul,
.filetree li + li{
border-top: 1px solid #fff;
}

.filetree li span,
.filetree li a{
display: block;
font-size: .9rem;
padding: .5em .7em;
}

.filetree li span{
position: relative;
padding-left: 2em;
color: #fff;
cursor: pointer;
}

.filetree li span.cate1{
background: #65AA11;
}

.filetree li span.cate2{
background: #8EE820;
}

.filetree li span::after{
position: absolute;
content: "";
display: block;
top: 50%;
left: .3em;
width: 8px;
height: 8px;
border: 2px solid transparent;
border-top-color: #fff;
border-right-color: #fff;
transform: rotate(45deg) translate(0, -50%);
box-sizing: border-box;
}

.filetree li span.cate1:hover{
background: #73C213;
}

.filetree li span.cate2:hover{
background: #A6ED4E;
}

.filetree li span:hover::after{
left: .5em;
}

.filetree li a{
background: #ECFBD9;
}

/*=== footer ===*/
#footer{
width: 100%;
height: auto;
text-align: center;
padding: .7em .7em 0 .7em;
border-top: 2px dotted #5DAF00;
}

#footer p{
display: block;
width: auto;
height: auto;
font-size: .9rem;
}

#footer p a{
color: #65AA11;
}

/* 980px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 980px){
	#wrapper_wrapper{
	max-width: none;
	padding: 20px;
	}
}

/* 901px以上
------------------------------------------------------------*/
@media only screen and (min-width: 901px){

	#header > a,
	#side_content > span{
	display: none;
	}

}

/* 900px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 900px){
	
	#wrapper_wrapper{
	padding: 10px;
	}
	
	#header{
	position: relative;
	height: auto;
	}
	
	#header h2{
	border-bottom: hidden;
	padding: 10px .7em;
	text-align: center;
	}
	
	#header > a{
	position: fixed;
	display: block;
	top: 0;
	right: 20px;
	width: auto;
	padding: 0 .7em;
	font-size: .9rem;
	color: #fff;
	background: rgba(101, 170, 17, .9);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .25);
	border-radius: 0 0 20px 20px;
	text-decoration: none;
	z-index: 8;
	}
	
	#wrapper{
	padding: 10px 0;
	}
	
	#content,
	#side_content{
	float: none;
	width: 100%;
	margin-right: 0;
	}
	
	#content_header{
	padding: 20px 20px 0;
	}
	
	.post{
	padding: 20px;
	}
	
	#content + #side_content{
	margin-top: 40px;
	background: #F7FDF1;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
	}
	
	#side_content > span{
	position: relative;
	display: block;
	text-align: center;
	font-weight: 600;
	margin-bottom: 20px;
	z-index: 1;
	}
	
	#side_content > span::after{
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	border-bottom: 3px dashed #65AA11;
	z-index: -1;
	}
	
	#side_content > span span{
	display: inline-block;
	padding: 0 .7em;
	background: #F7FDF1;
	}
	
	#footer{
	padding: 0 .7em;
	border-top: hidden;
	}
	
}

/* 800px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 800px){
	
	html{
	font-size: 15px;
	}
	
}