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


/*要素のフォントサイズやマージン・パディングをリセットしています*/
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;
}

/*行の高さをフォントサイズと同じにしています*/

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ul {
    list-style:none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:0.9em;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none;
	color:#666;
}
a:hover{
	color:#999;
}


/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}


/*▲リセットCSS▲*/


body{
	width:960px;
	background:#f7f7f7;
	margin:0 auto;
}

#header{
	padding-top:10px;
	
}
#main_box{
	float:left;
	width:900px;
	margin-left:0 auto;
	margin-right:0 auto;
	margin-top:20px;
	margin-bottom:20px;
}


nav{
	background:#eaeaea;
	border:#FFF 2px solid;
	margin:20px 0;
	height:40px;
	font-weight:bold;
	outline:1px solid #dcdcdc;
	}
	
ul{
	vertical-align:central;
}
li{
	float:left;
	display:block;
	width:120px;
	font-size:1em;
	text-align:center;
	line-height:40px;
}
#nav_advice{
	width:180px;
}
#top_word{
	padding:25px;
	line-height:1.7em;
	font-size:1em;
	background:#eaeaea;
	border:#FFF 2px solid;
	margin:20px 0;
	outline:1px solid #dcdcdc;
}

#topics{
}

#topics #center a img{
	margin:0 2px;
}

#footer{
	float:left;
	width:900px;
	background:#434343;/*グレー*/
	color:#FFF;
	margin-top:20px;
}

#footer .right_box{
	width:45%;
	float:left;
	padding:2.5%;
}
#footer .right_box h2{
	font-size:1em;
	line-height:1.5em
}
#footer .right_box p{
	font-size:0.8em;
	line-height:1.5em
}

#footer .left_box
{
	width:45%;
	float:left;
	text-align:right;
	margin-top:	60px;
	padding:2.5%;
}
#top_image{
	height:40px;
	background-image:url(../images/top_image.png);;
	padding:30px;
	font-size:1.2em;
	font-weight:bold;
	font:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	line-height:40px;
	color:#666;
	
	
}
#main_box h2{
	clear:both;
	font-size:1.2em;
	margin:50px 30px 20px 30px;
	color:#666;
}
#main_box h3{
	clear:both;
	font-size:1em;
	margin:20px 30px;
	color:#666;
}
#main_box h4{
	clear:both;
	font-size:0.9em;
	margin:10px 30px;
	color:#060;
}
#main_box p{
	clear:both;
	font-size:0.8em;
	line-height:1.7em;
	margin:20px 30px;
}
table{
	font-size:0.8em;
	line-height:1.7em;
	margin:30px;
	padding:5px;
}
th,td{
	font-weight:normal;
	text-align:left;
	padding:3px 20px 3px 0;
}
#map img{
	margin:0 50px;
}
#map_link a{
	float:left;
	clear:both;
	margin-left:30px;
	font-size:0.8em;
}

#main_box .right_box img {
	float: right;
	margin-right:50px;
	width:250px;
}
#info table{
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}

#info table p{
	clear:both;
	float:left;
	margin:5px 0px 0px 10px;
	font-size:0.9em;
}
#info table img{
	clear: both;
	float: left;
	margin: 10px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	width: 180px;
}
#kwsk a img{
	width:100px;
	height:25px;
	margin:5px 10px;
	box-shadow: none; 
}
#info .info_left table{
	float:left;
	clear:both;
}
#info .info_left th{
	border-bottom: 1px #c0baac solid;
	padding-left:10px;
	background:#f0ebe1;
	width:100px;
}
#info .info_left td{
	border-bottom: 1px #c0baac solid;
	padding-left:10px;
	background:#fff;
}
iframe{
	width:90%;
	clear:both;
	float:left;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4); 
}
#info .info_left{
	width: 65%;
	clear:both;
	float:left;s
	padding-left:30px;
	
}
#info .info_right {
	width: 30%;
	float:left;
}
#main_box #info .info_right img{
	width:90%;
	margin:5%;
	float:right;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4); 
}
.info_left table{
	width:90%;
	
}
.info_left #midashi tr{
	line-height:2.2em;
}

.info_left #midashi td{
	font-size:1.3em;
	font-weight:bold:
}
#midashi tr td span{
	font-size:1.4em;
	font-weight:900:
}
#advice{
	background:#FFF;
	border-radius:10px;
	border:#666 1px solid;
	padding:10px;
	margin:30px;
}
#advice p{
	clear:both;
	font-size:0.9em;
	line-height:1.5em;
	margin:15px 30px;
}
#advice h3{
	background:#c0baac;
	padding:5px 20px;
	color:#FFF;
}

/*▼jsフェード▼*/
#fade-viewer {
width: 900px;
height: 300px;
overflow: hidden;
position: relative;
}
#fade-viewer img {
top: 0;
left: 0;
position: absolute;
}
/*▲jsフェード▲*/

.osusume{
	background-color: #F4F4F4;
}
.osusume2{
	background-color: #F4F4F4;	
}
.osusume_title{
	margin-left:10px;
	margin-right:10px;
	width: 900px;
}