@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: 17px;
}

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

ul,
ol{
}

article ul,
ol{
padding-left: 1.5em;
padding-top: 1em;
padding-bottom: 1em;
}

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

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: #BDD877;
}

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

body{
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
background: #F1F8E1;
color:#333;
-webkit-text-size-adjust: 100%;
letter-spacing: 0.1em;
}

body *{
box-sizing: border-box;
}

#post h2{
border-bottom: solid 2px #000000;
font-size:120%;
margin-top: 1em;
margin-bottom: 1em;
}

h3{
margin-top: 1em;
margin-bottom: 1em;
counter-reset: chapter;
background: transparent;
padding: 0.25em 0.5em;
border-left: solid 3px #000000;
}

h4
{
counter-reset: section;
margin-top: 0.5em;
margin-bottom: 0.5em;}

h5
{
margin-top: 0.5em;
margin-bottom: 0.5em;}


h4:before
{
    content: counter(chapter) ". ";
    counter-increment: chapter;
}

h5:before
{
    content: counter(chapter) "-" counter(section) ". ";
    counter-increment: section;
}

#wrapper_wrapper{
max-width: 980px;
width: auto;
height: auto;
margin: 0 auto;
padding: 20px 0;
}

#header{
width: 100%;
height: 50px;
background: #666;
border-radius: 8px;
overflow: hidden;
}

#header h2{
float: left;
width: 50%;
line-height: 50px;
padding: 0 0 0 20px;
}

#header h2 a{
font-weight: 600;
color: #fff;
}

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

#header_menu{
float: left;
width: 50%;
height: auto;
}

#header_menu li{
float: left;
width: 33.333333333333333333%;
line-height: 50px;
text-align: center;
border-left: 1px solid #fff;
}

#header_menu li a{
display: block;
width: auto;
height: auto;
color: #fff;
font-size: 80%;
}

#header_menu li a:hover{
text-decoration: none;
background: #99C82C;
}

#main_img{
position: relative;
width: 100%;
height: auto;
margin-top: 20px;
overflow: hidden;
border-radius: 8px;
}

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

#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;
}

#wrapper{
width: 100%;
height: auto;
padding: 20px 0;
}

#content{
float: left;
width: 78%;
margin-right: 2%;
border-radius: 8px;
overflow: hidden;
border: 1px solid #ddd;
}

#content_header{
width: 100%;
padding: 20px;
border-bottom: 1px solid #ddd;
}

#content_header h1{
font-size: 1.5rem;
}

#post{
padding: 20px;
background: #fff;
line-height: 1.5em;
}

#post p + p{
margin-top: 1em;
}

#side_content{
float: left;
width: 20%;
}

.menu_box{
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}

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

.menu_box h6{
padding: .7em;
border-bottom: 1px solid #ddd;
text-align: center;
}

.menu li{
background: #fff;
}

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

/*--- filetree ---*/
.filetree ul{
border-top: 1px solid #efefef;
}

.filetree li span,
.filetree li a{
display: block;
padding: .7em;
}

.filetree li span{
position: relative;
padding-left: 1.7em;
cursor: pointer;
}

.filetree li span.cate1{
background: #A0C83C;
}

.filetree li span.cate2{
background: #BDD877;
}

.filetree li span::after{
position: absolute;
content: "";
display: block;
top: 50%;
left: .3em;
width: 10px;
height: 10px;
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: #AACD4F;
}

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

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

#footer{
position: relative;
width: 100%;
min-height: 50px;
background: #666;
border-radius: 8px;
}

#footer p{
position: absolute;
display: block;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
width: 100%;
font-size: 90%;
text-align: center;
color: #fff;
}

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

/* 900px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 900px){
	
	#wrapper_wrapper{
	padding: 10px;
	}
	
	#header{
	height: auto;
	}
	
	#header h2,
	#header_menu{
	float: none;
	width: 100%;
	line-height: 40px;
	}
	
	#header h2{
	border-bottom: 1px solid #fff;
	}
	
	#header_menu li{
	line-height: normal;
	}
	
	#header_menu li:first-child{
	border-left: hidden;
	}
	
	#header_menu li a{
	background: #99C82C;
	padding: 10px;
	}
	
	#main_img,
	#content + #side_content{
	margin-top: 10px;
	}
	
	#wrapper{
	padding: 10px 0;
	}
	
	#content,
	#side_content{
	float: none;
	width: 100%;
	margin-right: 0;
	}
	
	.menu_box{
	float: left;
	width: 50%;
	}
	
	.menu_box:nth-child(odd){
	border-radius: 8px 0 0 8px;
	}
	
	.menu_box:nth-child(even){
	border-left : hidden;
	border-radius: 0 8px 8px 0;
	}
	
	.menu_box + .menu_box{
	margin-top: 0;
	}
}

/* 800px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 800px){
	
	#main_img{
	display: none;
	}
	
	.menu_box{
	float: none;
	width: 100%;
	margin-right: 0 !important;
	margin-left: 0 !important;
	border-radius: 8px !important;
	}
	
	.menu_box:nth-child(even){
	border-left : 1px solid #ddd;
	}
	
	.menu_box + .menu_box{
	margin-top: 10px;
	}
	
	#header_menu{
	line-height: auto;
	}
	
	#header_menu li{
	float: none;
	width: 100%;
	border-left: hidden;
	text-align: left;
	}
	
	#header_menu li + li{
	border-top: 1px solid #fff;
	}
	
	#header_menu li a{
	background: #99C82C;
	}
	
}