@charset "UTF-8";


/* Website Title */

.sitetitle h1 a{color: #FFFFFF;
	font-size: 36px;
	text-decoration: none
}
.sitetitle h1 {margin: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	background-color: #336666;
	text-decoration: none;
	font-family: "M PLUS 1", sans-serif;
}


/* SideMenu */

.sidemenu {
	background-color: #FFFFFF;
	}
.sidemenu ul {
	margin: 0;
	padding: 0;
	list-style: none
}
.sidemenu li a {display: block;
    padding: 15px;
    color: #336666;
	border-top: 1px dotted #336666;
	border-right: 5px solid #336666;
	border-bottom: 1px dotted #336666;
	border-left: 1px dotted #336666;
    font-size: 18px;
    text-decoration: none
}
.sidemenu li a:hover {
	background-color: #CCCCCC
}


/* Kiji */

.kiji h1 {
	margin-top: 0;
    margin-bottom: 10px;
	padding: 10px;
	background-color: #CCCCCC;
	border-top: 2px solid #336666;
	border-right: 2px solid #336666;
	border-bottom: 2px solid #336666;
	border-left: 20px solid #336666;
	color: #003333;
	font-size: 24px
}
.kiji p {
    margin-top: 0;
    margin-bottom: 20px;
	background-color: #FFFFFF;
	padding: 10px
}
	
/* Copyright */

.copyright p {margin: 0px;
	padding: 5px;
	font-size: smaller;
	font-style: italic;
	border-top: 4px double #336666;
}


/*　ボックスの上下の間隔 */
.box1 {padding-top: 10px;
	padding-bottom: 10px
}

.box2 {padding-top: 10px;
	padding-bottom: 10px
}

.box3 {padding-top: 10px;
	padding-bottom: 10px
}
	
.box4 {padding-top: 10px;
	padding-bottom: 10px
}
	

/* レスポンシブWebデザイン設定 */

/* ########## 599px以下 ########## */

@media (max-width: 599px){

/* サイト名と記事のタイトル */

.sitetitle h1{
	font-size: 24px
}
.kiji h1{
	font-size: 20px
}

/*　ボックスの上下の間隔 */
.box1 {padding-top: 4px;
	padding-bottom: 4px
}

.box2 {padding-top: 4px;
	padding-bottom: 4px
	}

}

/* ########## 600px〜767px以下 ########## */

@media (min-width: 600px){

}

/* ########## 768px以上 ########## */

@media (min-width: 768px) {
	
	
/* Box2とBox3を横に並べる */

.boxA:after {content: "";
	display: block;
	clear: both}
	
.box2 {float: left;
	width: 70%}
	
.box3 {float: left;
	width: 30%}

/* Box2とBox3の左右の間隔 */

.box2 {padding-right: 50px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: boarder-box
}
	
}

/* ########## 1040px以上 ########## */

@media (min-width: 768px) {

/* 全体の横幅を固定 */
.box1, .boxA, .box4{
	width: 1000px;
	margin-left: auto;
	margin-right: auto
}
}