html {
  overflow:auto;
}

body
{  overflow: hidden;
  min-width: 300px;
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  background: url('images/bg-800-s.jpg') repeat;

}

header, footer, #social_link  {
  background-color: #FFF;
}

.clear {
  clear: both;
  padding: 30px;
}

.layout {
  position: relative;
  max-width: 960px;
  display: block;
  margin: 0 auto;
}

#top_img {
  width: 100%;
	height: 600px;
	background: url(images/img_top_fall-min.jpg) no-repeat center;
	background-size: cover;
}


.top_ttl {
  display:block;
  height: 140px;
  background-image: linear-gradient(#305330, #1d351d);
  width: 100%;
}

.top_ttl img {
  position: relative;
  width: 300px;
  z-index: 2;
  top: 30px;
  left: 220px;
  font-size:50px;
  font-family: 'Norican', cursive;
  color:white;
  text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);
}

.top_ttl p {
  font-family: "Times New Roman", Times, serif;
  position: relative;
  top: -40px;
  left: 480px;
  color: #FFF;
  font-weight: 100;
  font-size: 1.4em;
}

.ripple,.ripple:before,.ripple:after {
  display:block;
  border-radius:2px;
  width:2px;
  height:2px;
  -webkit-animation:rip 10s infinite ease-out;
  -moz-animation:rip 10s infinite ease-out;
}

.ripple {
  position: absolute;
  z-index:1;
  top: 200px;
  left: 220px;
}

.ripple:before,.ripple:after {
  content:'';
  position:absolute;
}

.ripple:before {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:25px;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;top:25px;left:0;}
@-webkit-keyframes rip
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  2%  {
    box-shadow:0 0 0 0 #274527,
               0 0 0 0 rgba(255,255,255,0.4),
               0 0 0 0 #274527,
               0 0 0 0 rgba(0,0,0,0.08);
  }
  40% {
    box-shadow:0 0 7px 37px #274527,
               0 0 1px 39px transparent,
               0 0 5px 40px #274527,
               0 0 1px 35px transparent;
  }
   100%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
}
@-moz-keyframes rip
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  2%  {
    box-shadow:0 0 0 0 #274527,
               0 0 0 0 rgba(255,255,255,0.4),
               0 0 0 0 #274527,
               0 0 0 0 rgba(0,0,0,0.08);
  }
  40% {
    box-shadow:0 0 7px 37px #274527,
               0 0 1px 39px transparent,
               0 0 5px 40px #274527,
               0 0 1px 35px transparent;
  }
   100%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
}

#navi {
  margin: -15px 0 0 0;
}

#navi a {
  background-color: #305330;
  padding: 10px 15px;
  font-size: 1.5em;
  font-weight: bolder;
  color: #FFF;
  margin: 10px 15px;
  float: left;
  border-radius: 30px;
}



.map img {
  width: 48%;
  margin: 1%;
  float: left;
}

.map_text {
  display: block;
  width: 48%;
  margin: 1%;
  float: left;
  text-align: center;
  line-height: 2em;
  font-size: 1.5em;
  font-weight: 200;
}


.ttl {
  position: relative;
  z-index: 3;
  top: 20px;
  left: -100px;
  width: 600px;
}

#hilite_container {
  background: url('images/niigata_bg.jpg') no-repeat bottom;
  display: block;
  margin: 0 auto;
}

.hilite_contents {
  max-width: 960px;
  margin: 0 auto;
}

.hilite {
  float: left;
  width: 49%;
  box-shadow: 5px 5px 5px #888888;
  margin: 0.5%;
  display: block;
  background-color: #000;
}

.hilite img {
  width: 60%;
  margin: 0 15px 0 0;
  padding: 0;
  float: left;
}

.hilite_txt {
  color: #FFF;
  line-height: 1.3em;
  font-weight: 100;
  padding: 5px 10px;
  margin: 5px 10px;
}

.hilite h3 {
  font-size: 1.5em;
  margin: 0 0 10px 0;
}

.hilite p {
  font-size: 1.2em;
  margin: 0 0 10px 0;
}

.hilite a {
  font-size: 1.2em;
}

#more_container h3 {
  color: #ac99c9;
  font-size: 2em;
}

.article {
  display: block;
  width: 31.33%;
  margin: 1%;
  box-shadow: 5px 5px 5px #888888;
  float: left;
  background-color: #000;
  color: #FFF;
  min-height: 470px;
}

.article img {
  width: 100%;
  margin: 0 0 5px 0;
}

.article h4 {
  margin: 5px 0 0 10px;
  font-size: 1.4em;
  font-weight: bold;
}

.article p {
  padding: 10px;
  font-size: 1.2em;
  line-height: 1.4em;
}


.seasons {
  display: block;
  width: 48%;
  margin: 1%;
  box-shadow: 5px 5px 5px #888888;
  float: left;
  background-color: #000;
  color: #FFF;
  min-height: 520px;
}

.seasons img {
  width: 100%;
}

.seasons h4 {
  font-size: 1.3em;
  margin: 0;
  padding: 15px 15px 0 15px;
}

.seasons p {
  font-size: 1.2em;
  line-height: 1.4em;
  padding: 15px;
}


/*---------------TABLET---------------*/
@media screen and (max-width: 768px){

#top_img {
  	height: 400px;
  }

.top_ttl {
    height: 100px;
    width: 100%;
  }

.top_ttl img {
    width: 220px;
    top: 30px;
    left: 80px;
  }

.top_ttl p {
    top: -50px;
    left: 310px;
    font-size: 1.2em;
  }

.ripple {
    top: 130px;
    left: 120px;
  }

  .map img {
    width: 80%;
    margin: 0 10%;
    float: none;
  }

  .map_text {
    width: 80%;
    line-height: 1.6em;
    font-size: 1.3em;
    margin: 0 10%;
    float: none;
  }


  .ttl {
    top: 20px;
    left: -50px;
    width: 80%;
  }

  .hilite {
    width: 94%;
    margin: 3%;
  }

  .hilite img {
    width: 35%;
  }

  .hilite_txt {
    padding: 15px 10px;
    margin: 5px 10px;
    line-height: 1.5em;
  }

  .hilite h3 {
    margin: 0 0 20px 0;
  }

  .article {
    width: 48%;
    margin: 1%;
    min-height: 650px;
  }

.article img {
    margin: 0;
  }

  .seasons {
    width: 94%;
    margin: 3%;
    min-height: 500px;
  }


}

/*---------------MOBILE---------------*/
@media screen and (max-width:640px){

#top_img {
  height: 300px;
}

.top_ttl {
    height: 80px;
    width: 100%;
  }

.top_ttl img {
    width: 40%;
    top: 20px;
    left: 50px;
  }

.top_ttl p {
    left: 260px;
  }

.ripple {
    top: 130px;
    left: 70px;
  }

  .ripple:before {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:25px;}
  .ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;top:25px;left:0;}
  @-webkit-keyframes rip
  {
    0%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }
    2%  {
      box-shadow:0 0 0 0 #274527,
                 0 0 0 0 rgba(255,255,255,0.4),
                 0 0 0 0 #274527,
                 0 0 0 0 rgba(0,0,0,0.08);
    }
    40% {
      box-shadow:0 0 4px 19px #274527,
                 0 0 1px 20px transparent,
                 0 0 3px 20px #274527,
                 0 0 1px 16px transparent;
    }
     100%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }
  }
  @-moz-keyframes rip
  {
    0%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }
    2%  {
      box-shadow:0 0 0 0 #274527,
                 0 0 0 0 rgba(255,255,255,0.4),
                 0 0 0 0 #274527,
                 0 0 0 0 rgba(0,0,0,0.08);
    }
    40% {
      box-shadow:0 0 4px 19px #274527,
                 0 0 1px 20px transparent,
                 0 0 3px 20px #274527,
                 0 0 1px 16px transparent;
    }
     100%  {
      box-shadow:0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent,
                 0 0 0 0 transparent;
    }
  }

.map img {
    width: 94%;
    margin: 3%;
  }

  .map_text {
    width: 94%;
    margin: 3%;

    text-align: center;
    line-height: 1.5em;
    font-size: 1.3em;
    font-weight: 200;
  }

.ttl {
    width: 450px;
  }

  .hilite img {
    width: 100%;
    margin: 0 0 15px 0;
    padding: 0;
    float: left;
  }

.hilite h3 {
    font-size: 1.5em;

  }

.hilite p {
    font-size: 1.2em;
}

.article {
  width: 96%;
  margin: 15px 2%;
  min-height: auto;
}

.seasons {
  width: 96%;
  margin: 15px 2%;
}

.seasons img {
  width: 100%;
}


}