@charset "UTF-8";
/* CSS Document */

/* Reset
**********************************************/
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration : none;
    color: #008bda;
}
ul,
ol {
    list-style : none
}
img {
    vertical-align : middle;
    max-width: 100%;
    height: auto;
}
.ie8 img {
    width: auto
}

iframe{
	border: solid 0px;
}


/* 基本設定
**********************************************/
html {
    height: 100%
}
body {
/*    font-family: "osaka", "HGS ゴシック M", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-family: "Noto Serif JP", serif;
    font-size: 13px;
    width: 100%;
}
.f-left {
    float: left
}
.f-right {
    float: right
}


/* リンク設定
**********************************************/
a {
    text-decoration: none
}
a img,
a {
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -ms-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}
a:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.png_img,
.pointer {
    cursor: pointer
}





.topPage h2 {
    width: 940px;
    margin: 1.5em auto .8em auto;
}

.whatsnew {
/*	background-color: #f7f7f7;*/
}

#news-wrap {
    width: 940px;
    margin: 0 auto;
    padding: .5em 0;
    overflow: hidden;
    zoom: 1;
}
#news-wrap div {width: 100%}
#news-wrap h3 {
    font-family: "Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HGS明朝E",serif;
    font-weight: normal;
    font-size: 154%;
    color: #00a0e8;
    width: 16%;
    margin-top: 5px;
}
dl.topics {margin: 3px 0}

dl.topics dt {
    width: 80px;
    float: left;
    clear: both;
    font-size: 140%;
/*    background-color: #00a0e8;*/
    color: #333;
    padding: 1px 5px;
    text-align: center;
    margin: 4px 0;
	letter-spacing: 0.05em;
}

dl.topics dd {
    padding: 5px 0 5px 110px;
    font-size: 140%;
	margin-left: 7%;
	color: #333;
	letter-spacing: 0.05em;
}

.news_img{
	width:auto;
	height:130px;
	}

.news_b{margin-bottom:30px;}




@media \0screen\,screen\9 { 
    #news {
        width: 100%;
        min-width: 960px;
        width: expression(document.body.clientWidth < 962? "960px" : "auto");
    }
}


@media screen and (max-width: 959px) { 

	#news-wrap {
/*		width: 95%;*/
		width: 100%;
	}

}

@media screen and (max-width: 767px) { 
    .topPage h2 {margin: 1em auto .3em auto}
	
	#news-wrap {width: 90%}
    #news-wrap h3 {width: 100%}
    #news-wrap div {width: 100%}
   
}

@media screen and (max-width: 720px) { 
	dl.topics dd {
		padding: unset;
		margin-left: unset;
		text-align: center;
		margin-bottom: 5%;
		
	}
	
	dl.topics dt {
		width: unset;
		float: unset;
		clear: unset;
		padding: unset;
		margin: unset;
	}
}

@media screen and (max-width: 480px) { 

.news_img{
	width:auto;
	height:90px;
	}
.news_b{margin-bottom:10px;}	

/*iframe{height:200px;}*/
}