@media screen and (max-width : 768px){

#wrapper {
	width:766px;
}

/* responsive */
.cls_ViewAreaOver768 {
	display:none;
}
.cls_ViewAreaUnder768 {
	display:inline;
}
.cls_ViewAreaOver640 {
	display:inline;
}

.cls_ViewAreaUnder640 {
	display:none;
}

/* article
----------------------------------*/
article {
	width:518px;
}
article.cls_toppage {
	width:748px;
}
nav a {
/*    width: 151px;*/
    width: 151px;
	font-size: 100%;
}
#gNavi4 {
    width: 151px;
    font-size: 100%;
    line-height:110%;
}
/* topic
----------------------------------*/
.topic-item-box {
/*
    margin: 8px;
    width: 38%;
*/
	margin: 4px;
	width: 45%;
	min-height: 95px;

}
/* aside
----------------------------------*/
aside {
	width:208px;
}
.cls_aside_fixed {
	margin-left:548px;
}
/* contents
----------------------------------------*/
.col3 .block-left img, .col3 .block-right img {
	max-width:155px;
/*	max-height:155px;*/
}
.contents img {
/*	width:100%;*/
}

/* donation button */
#id_hdrDntBtnAnc {
	height:85px;
	width:180px;
}


}

@media screen and (max-width : 640px){

body {
	font-size: 120%;
	-webkit-text-size-adjust: none;
}

.cls_ViewAreaOver640 {
	display:none !important;
}
.cls_ViewAreaUnder640 {
	display:inline;
}
#logo1
{
    height: 61px;
    width: 151px;
}

/* donation button */
#id_hdrDntBtnAnc {
	height:65px;
	width:150px;
	font-size:100%;
}

/* header items */
.hdr li {
	margin:0px;
}

#wrapper {
	width:auto;
	margin:0 auto;
	border: none;
/*	font-size:60%;*/
}
#site-top-navi {
	display:none;
}

nav li {
    display: block;
}
nav a,
#gNavi4 {
    display: block;
    width: 100%;
	font-size: 100%;
	line-height: 210%;
/*
    width: 211px;
	font-size: 135%;
*/
}
.topic-item-box {
/*
    margin: 5px;
    width: 22%;
*/
	margin: 3px;
	width: 24%;
	min-height: 88px;
}
.topic-item-box p{
	font-size:100%;
}

.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;
}
article.cls_toppage {
	width:100%;
	padding:0 0 10px 0;
	margin:0 0 10px 0;
    min-height: 100px;
}
/* aside
----------------------------------*/
aside {
	width:96%;
}
.cls_aside_fixed {
	position:unset;
	margin-left:10px;
}

/* top sidebutton 20170819 */
.s_btn {
/*
	margin:10px 0px 10px 0px;
	width:100%;
	height:180px;
*/
	font-size: 110%;
}


/* 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;
}

/* news
----------------------------------*/
.news-date {
    width: 100%;
    float:none;
    font-size:85%;
}
.news-title {
    width: 100%;
    float:none;
    font-size:85%;
}

}
@media screen and (max-width : 480px){
#logo1
{
	margin: 4px 0px 0px 8px;
}
nav a {
/*    width: 238px;*/
}

/* topics
----------------------------------*/
.topic-item {
    width: 95%;
}
.topic-item-box {
    width: 98%;
}

/* contents
----------------------------------------*/
.contents .block-left img, .contents .block-right img,
.col3 .block-left img,
.col3 .block-right img {
	max-width:180px;
/*	max-width:120px;*/
/*	max-height:120px;*/
}
.image-caption {
	max-width:180px;
/*	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%;
}

.sidebar-item {
    text-align: center;
}
.s_btn {
	margin:10px 0px 10px 0px;
	display: inline-block;
	float:none !important;
}

.s_btn_bnr {
    margin: 10px 0px 10px 0px;
	display: inline-block;
	float:none !important;
}

.donation-btn a {
	font-size: 130%;
	padding: 15px 20px !important;
}

}