@media screen and (max-width : 768px){

#wrapper {
	width:766px;
}
/* article
----------------------------------*/
article {
	width:518px;
}
nav a {
    width: 151px;
	font-size: 100%;
}
/* topic
----------------------------------*/
.topic-item-box {
    margin: 8px;
    width: 29%;
}
/* aside
----------------------------------*/
aside {
	width:208px;
}
/* contents
----------------------------------------*/
.col3 .block-left img, .col3 .block-right img {
	max-width:155px;
	max-height:155px;
}
.contents img {
	width:100%;
}
}

@media screen and (max-width : 640px){

body {
	font-size: 120%;
	-webkit-text-size-adjust: none;
}
#wrapper {
	width:auto;
	margin:0 auto;
	border: none;
	font-size:60%;
}
#site-top-navi {
	display:none;
}
#logo {
	width:53%;
	display:table-cell;
	vertical-align:middle;
	height:42px;
}
#logo1 img{
	max-width: 355px;
}
#logo2 img{
    max-width: 148px;
}
nav a {
    width: 211px;
	font-size: 135%;
}
.topic-item-box {
    margin: 5px;
    width: 30%;
}
.site-bottom-navi {
	display:block;
}
#breadcrumb {
    margin: 5px 0 5px 10px;
}
/* navi
----------------------------------*/
.button-toggle {
    display: block;
	width: 30px;
	height: 30px;
	margin: 5px;
	font-size: 20px;
	line-height: 30px;
	-webkit-border-radius:  3px;
	-moz-border-radius:  3px;
	border-radius: 3px;
	text-align: center;
	cursor:pointer;
	font-weight:bold;
	float:right;
	z-index:1;
}
.button-toggle:before {
    content: "\f0c9";

}
.button-toggle.act:before {
	content: "\f00d";
}

/* article
----------------------------------*/
article {
	width:100%;
	padding:0 0 10px 0;
	margin:0 0 10px 0;
    min-height: 100px;
}

/* aside
----------------------------------*/
aside {
	width:96%;
}

/* topics
----------------------------------*/
.topic-item {
    width: 48%;
}
.topic-item p {
    font-size: 100%;
}

/* contents
----------------------------------------*/
.contents {
    padding-right: 10px;
}
.image-caption {
  font-size:80%;
}

/* side_menu_btn
----------------------------------------*/
#side_menu_btn a {
    padding: 10px 15px;
}

/* contents style
----------------------------------------*/
/* C
----------------------------------------*/
.col3 .block-center {
	width:100%;
	clear:both;
}
.col3 .block-right {
    margin-left: 0;
}
/* D H
----------------------------------------*/
.col2-3 .block-left,
.col2-3 .block-right,
.col2-7 .block-left,
.col2-7 .block-right
 {
  width:47.5%;
}

/* box 1 2
----------------------------------------*/
.box2 {
    width: 44%;
    margin-right: 5px;
}

/* tab
----------------------------------------*/
#tab li a {
    line-height: 3em;
}

}
@media screen and (max-width : 480px){

#logo {
	width:62%;
}

#logo1 img{
	max-width: 355px;
}
#logo2 img{
    max-width: 148px;
}
nav a {
    width: 238px;
}

/* topics
----------------------------------*/
.topic-item {
    width: 95%;
}
.topic-item-box {
    width: 28%;
}

/* news
----------------------------------*/
.news-date {
    width: 28%;
}
.news-title {
    width: 70%;
}

/* contents
----------------------------------------*/
.contents .block-left img, .contents .block-right img,
.col3 .block-left img,
.col3 .block-right img {
	max-width:120px;
	max-height:120px;
}
.image-caption {
	max-width:120px;
}


/* aside
----------------------------------*/
aside {
	width:94%;
}

/* blockquote
----------------------------------*/
blockquote {
	margin:1em 2em;
}

/* contents style
----------------------------------------*/
/* D H
----------------------------------------*/
.col2-3 .block-left,
.col2-3 .block-right,
.col2-7 .block-left,
.col2-7 .block-right
 {
  width:46.5%;
}

/* btn_list sitemap-list
----------------------------------*/
.style5.odd, .style5.even {
    margin-right: 10px;
    width: auto !important;
	float:none !important;
}

/* box 1 2
----------------------------------------*/
.box1 p, .box2 p {
    margin: 5px;
}
.box2 {
    margin-right: 8px;
    width: 40%;
}

/* imglist
----------------------------------------*/
.imglist_item {
    float: left;
    width: 50%;
}
