﻿body {
min-width: 980px;
margin: 0 0 0 0px;
padding-right:0px;
font-size: 100%;
text-align: center;
background-color: #aaa;
color: #000;
line-height:150%;
font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3",
 "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS P Gothic","Osaka",
 Verdana,Arial, Helvetica, sans-serif;
}

img {
border: 0px;
}

ins{
font-size:80%;
text-decoration:none;
}

a:link{
color: #000;
}

a:visited{
color: #000;
}

a:hover{
color:#f60;
}


hr {
margin-top:10px;
margin-bottom:10px;
clear:both;
border-color:#888;
border-width:1px 0 0 0;
border-style:solid;
}


#wrappaer {
width: 980px;
min-height:1024px;
margin: 15px auto 15px auto;
position: relative;
background-color: #fff;
border:1px solid #666;
 border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 0 15px #666; 
   -moz-box-shadow: 0 0 15px #666; 
-webkit-box-shadow: 0 0 15px #666; 
overflow:hidden  !important;
}

#contents { 
color: #000;
width: 950px;
margin: 15px;
text-align: left;
overflow:hidden;
}

#header {
  position: relative;
  background: #000;
}

#header img{
float:left;
width:1000px;
}

#header #topcount{
float:left;
width:110px;
margin:20px 0 0 20px;
border:1px solid #430;
background:#181000;
 border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#header p{
color:#f90;
margin:30px 5px 30px 5px;
font-size:13px;
line-height:150%;
text-align:center;
}


#grobval-navi{
width: 950px;
clear:both;
}

#gloval-navi ul{
clear:both;
padding:5px 10px 5px 10px;
margin:0;
background:#444;
border-top:1px solid #888;
height:40px;
}

#gloval-navi li{
display:block;
float:left;
padding:0;
margin:0;
border-left:1px solid #888;
border-right:1px solid #888;
margin-right:-1px;
line-height:40px;
width:180px;
text-align:center;
font-size:14px;
}

#gloval-navi li a{
color:#fff;
text-decoration:none;
border-bottom:1px dotted #888;
}

#gloval-navi li a:hover,#gloval-navi li.here a:hover{
color:#f80;
border-bottom:1px solid #f80;
}

#gloval-navi li.here a{
color:#f80;font-weight:bold;
border-bottom:1px dotted #f80;}


#main{
clear:both;
width:550px;
background:#fff;
overflow:hidden;
float:left;
margin-bottom:30px;
padding-left:10px;
padding-top:18px;
}

#main h1 {
font-size:18px;
line-height:140%;
border-bottom:1px solid #444;
border-left:3px double #444;
padding-left:10px;
}

#main h2 {
font-size:16px;
line-height:140%;
border-bottom:1px solid #444;
border-left:3px double #444;
padding-left:8px;
margin-top:50px;
clear:both;
}

#main h3 {
font-size:14px;
line-height:120%;
clear:both;
}


#main li,#main p,  #main td,  #main th {
font-size:16px;
line-height:140%;
}

#main ul li{
margin-bottom:1em;
}
#main ol li{
margin-bottom:0.25em;
}


#main p.small-announce{
font-size:12px;
}

.yosou-img{
float:left;
margin-right:10px;
margin-bottom:5px;
}

#main table{
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
min-width:235px;
margin-bottom:5px;
}

#main table td,#main table th{
border:1px solid #888;
}

#main td,#main th{
font-size:12px;
padding:3px;
line-height:200%;
text-align:left;
font-weight:400;
color:#000;
}

#main td.timedata{
font-size:16px;
padding:3px;
line-height:200%;
text-align:left;
}

#main thead{
background:#eee;
}
#main tbody{
background:#fff;
}


#map_canvas{
width:285px;
height:295px;
border:1px solid #ccc;
float:left;
margin-right:10px;
margin-bottom:50px;
}



#main table.kansoku{
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
width:100%;
margin-top:20px;
}


#main table.kansoku td{
font-size:12px;
padding:3px 3px 3px 10px;
line-height:150%;
text-align:left;
font-weight:400;
color:#000;
background:#eee;
}

#main table.kansoku th{
font-size:12px;
padding:3px 10px 3px 10px;
line-height:150%;
text-align:left;
font-weight:600;
color:#000;
background:#ddd;
}


p.sankou{
margin-top:-10px !important;
padding-top:0px !important;
font-size:12px !important;
}


h2 span.city_caution{
font-size:10px;
font-weight:400;
}


.citylist{
padding:0 10px 0 10px;
height:40px;
overflow:hidden;
margin-top:10px;
clear:both;
overflow:hidden;
}

.citylist h3{
float:left;
font-size:15px !important;
margin:0 !important;
padding-left:0 !important;
border-bottom:none !important;
border-left:none !important;
line-height:40px !important;
}

.citylist p{
float:left;
margin:0 0 0 10px !important;
font-size:14px !important;
line-height:40px !important;
}

.citylist span a{
font-size:12px;
display:inline-block;
color:#00e;
}

.citylist span a:hover{
font-size:12px;
display:inline-block;
color:#f60;
}

.level3{
border:1px solid #f88;
border-left:15px solid #f88;
background:#fdd;
}
.level2{
border:1px solid #f80;
border-left:15px solid #f80;
background:#fed;
}
.level1{
border:1px solid #fc0;
border-left:15px solid #fc0;
background:#ffd;
}
.level0{
background:#eee;
border:1px solid #ccc;
border-left:15px solid #ccc;
}

.orange{
color:#f60;
font-weight:bold;
}

.red{
color:#f00;
font-weight:bold;
}

.gray{
color:#888;
font-weight:bold;
}


#side{
margin-top:20px;
padding-left:25px;
width:335px;
margin-left:25px;
float:left;
border-left:1px solid #888;
margin-bottom:30px;
overflow:hidden;
padding-bottom:50px;
}


#side h2 {
font-size:14px;
line-height:140%;
border-bottom:1px solid #444;
margin-top:20px;
border-left:3px double #444;
padding-left:7px;
}

#side ul{
margin-left:0;
padding-left:0;
}

#side ul li{
font-size:14px;
margin-left:2em;
}

#side p {
font-size:14px;
margin-top:5px;
line-height:140%;
}


#side .sidecontents{
margin-bottom:40px;
}


#side .sidecontents h3{
font-size:14px !important;
padding-top:20px;
padding-bottom:0px;
margin-bottom:5px;
border-top:1px dotted #999;
}

#side .sidecontents .sideimage{
width:99%;
border:1px solid #ddd;
text-align:center;
}


#footer{
clear:both;
border-top:1px solid #888;
margin-top:30px;
min-height:100px;
}

#footer p{
color:#666;
font-size:14px;
}


#footerinfo{
text-align:center !important;
clear:both !important;
font-size:16px !important;
margin-top:20px;
}

#copyright{
text-align:center;
}


#dataindex {
border:1px solid #ccc;
padding:10px;
}

#dataindex h2{
border:none !important;
margin:0 0 0 10px !important;
padding:0;
font-size:15px !important;
line-height:30px;
}

.area1 h3,.area2 h3{
border:none !important;
margin:5px 0 5px 10px !important;
font-size:14px !important;
}

.area1 p,.area2 p{
margin:0 !important;
padding:0 5px 5px 5px !important;
}

.area1{
background:#eee;
padding:5px !important;
border:1px solid #eee;
margin:0;
}

.area2{
background:#fff;
padding:5px !important;
border:1px solid #eee;
margin:0;
}

span.type0{
padding:3px 4px 3px 4px;
font-size:14px;
}

span.type1{
background:#ffa;
padding:3px 4px 3px 4px;
font-size:14px;
}

span.type2{
background:#fda;
padding:3px 4px 3px 4px;
font-size:14px;
}

span.type3{
background:#fdd;
padding:3px 4px 3px 4px;
font-size:14px;
}

#jumpform{
margin:20px 0 10px 0;
border:1px solid #ccc;
padding-left:10px;
background:#ffe;
}

#jumpform p,#jumpform input,#jumpform select{
font-size:14px;
}

#jumpform h2{
border:none !important;
margin:15px 0 0 0 !important;
padding:0 !important;
font-size:15px !important;
}


.toppage h3{
font-size:16px !important;
margin-top:21px !important;
margin-bottom:0px !important;
padding-bottom:0px !important;
line-height:16px !important;
font-weight:400!important;
}

.toppage .qanda h3{
margin-top:30px !important;
font-weight:bold!important;
}

.toppage .qanda p{
margin-top:10px !important;
}


.toppage ul li {
margin-bottom:0px !important;
margin-top:0px !important;
}


ul#siterireki li{
font-size:14px !important;
}


p.shouhin1{
margin-top:-5px !important;
padding-top:0px !important;
line-height:170% !important;
font-size:13px !important;
}

p.shouhin0{
margin-top:-5px !important;
padding-top:0 !important;
line-height:160% !important;
}


.sidecontents ul li{
font-size:13px !important;
line-height:160% !important;
}

/* --- Responsive Styles --- */
@media screen and (max-width: 980px) {
  body {
    min-width: 100%;
    margin: 0;
    padding: 0;
  }

  #wrappaer {
    width: 100%;
    min-height: auto;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  #contents {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 10px;
  }

  #header img {
    width: 100%;
    height: auto;
  }

  .logo-link {
    display: inline-block;
    width: calc(100% - 60px);
    height: auto;
    overflow: visible;
    position: relative;
    vertical-align: middle;
    text-align: left;
  }

  .logo-link img {
    position: static;
    transform: none;
    width: 180% !important;
    max-width: none !important;
    height: auto !important;
    display: block;
    float: none;
  }

  #gloval-navi {
    width: 100%;
    display: none;
  }

  .menu-toggle-btn {
    display: block;
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 36px;
    cursor: pointer;
    z-index: 100;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .menu-toggle-btn span {
    display: block;
    position: absolute;
    height: 3px;
    width: 26px;
    left: 7px;
    background: #333;
    border-radius: 2px;
    transition: 0.3s;
  }

  .menu-toggle-btn span:nth-child(1) {
    top: 7px;
  }

  .menu-toggle-btn span:nth-child(2) {
    top: 16px;
  }

  .menu-toggle-btn span:nth-child(3) {
    top: 25px;
  }

  .menu-toggle-btn.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 16px;
  }

  .menu-toggle-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle-btn.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 16px;
  }

  #gloval-navi {
    width: 60%;
    position: absolute;
    top: 55px;
    right: 0;
    z-index: 99;
    display: none;
  }

  #gloval-navi ul {
    height: auto;
    padding: 0;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: -2px 5px 10px rgba(0,0,0,0.2);
  }

  #gloval-navi li {
    float: none;
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ddd;
    line-height: 44px;
    font-size: 15px;
    background: #fff;
    text-align: left;
    padding-left: 12px;
    box-sizing: border-box;
  }
  #gloval-navi li a {
    color: #000 !important;
    display: block;
    width: 100%;
  }

  #gloval-navi li.here a {
    color: #f80 !important;
    font-weight: bold;
  }

  #main {
    width: 100% !important;
    float: none !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box;
  }

  #main img, #main iframe, #main table {
    max-width: 100% !important;
    height: auto !important;
  }

  #side {
    width: 100% !important;
    float: none !important;
    padding: 10px !important;
    margin-top: 0 !important;
    box-sizing: border-box;
    border-left: none !important;
    margin-left: 0 !important;
  }
}


