@charset "UTF-8";

body {
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic Pro", "Yu Gothic", Meiryo, Osaka, verdana;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
	color: #333;
}

body { 
  -background: url(http://griddle.it/1020-12-30) repeat-y top center;
}

/*
body {
  font-family: 'Gloria Hallelujah', cursive;
  font-weight: 400;
  font-size: 1em;
  color: #8a8683;
  background-color:#ffffff;
}
*/


p {
  font-weight: bold;
}

p,a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
}


h1 {
  margin: 5px 0px 30px 0px;
}

h2 {
  font-size: 150%;
}

h2,h3 {
  text-align: center;
}



img {
  max-width: 100%;
}



a:link {
  color: #f68f67;
  text-decoration: none;
}

a:hover {
  color: #bde2df;
  text-decoration: none;
}

a:visited {
  color: #f68f67;
  text-decoration: none;
}

a {outline:none;}
a:focus {outline:none;}


/***************************************************************
* header
****************************************************************/
.menu {
  font-family: 'Gloria Hallelujah', cursive;
  height: auto;
  background: url(../images/line-top.gif) repeat-x center bottom;
}



/* Navigation */

.menu {
  position: fixed;
  top: 0px;
  width: 100%; 
  height: auto; 
  z-index: 100;
}

#logo {
  text-align: center;
  margin: 0px 0 10px 0;
}

.menu h1,
.menu .h1logo {
  -background-color: red;
}

#nav {
  text-align: right;
  margin: 20px 0 10px 0;
}

.navigation {
  float: right;
  list-style: none;
  margin: 0;
}

.navigation li {
  float: left;
  padding: 0 0 0 50px;
}

.navigation li:hover {
  cursor: pointer;
  color: #a9d3d0;
}

.navigation .active {
  cursor: pointer;
  color: #f68f67;
  font-weight: bold;
}




/***************************************************************
* footer
****************************************************************/

footer {
  background: url(../images/line-bottom.gif) repeat-x center top;
  padding-top: 15px;
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 999;
}

footer #footer_in {
  height: 35px; /*高さ指定するかは要検討*/
  background-color: white;
  z-index: 999;
}

address {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  font-size: 80%;
  margin: 10px 0px 0px 0px;
}

address p {
    font-size: 0.8rem;
    margin: 0px 0px 0px 0px;
    font-weight: normal;
}




/*Buttonのレイアウト*/

/* sub-navi*/
.subnav ul {
  text-align: center;
  -margin: 30px;
  padding-left: 20px;
}

.subnav ul li {

  margin-right: 20px;
  display:inline-block;
  /display: inline;
  /zoom: 1;
}

.subnav ul li:last-child {
  /*スマホ・タブレットサイズで複数行になるときに調整*/
  -margin-right: 0px;

}



/* Button */
.btn {
  font-size:14px;
  font-family: "Helvetica", "Arial";
  font-weight:normal;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  border:1px solid #dcdcdc;
  padding:9px 18px;
  text-decoration:none;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #f6f6f6) );
  background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
  background:-ms-linear-gradient( top, #ffffff 5%, #f6f6f6 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
  background-color:#ffffff;
  color:#666666;
  display:inline-block;
  text-shadow:1px 1px 0px #ffffff;
  -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
  -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
  box-shadow:inset 1px 1px 0px 0px #ffffff;
}.btn:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f6f6f6), color-stop(100%, #ffffff) );
  background:-moz-linear-gradient( center top, #f6f6f6 5%, #ffffff 100% );
  background:-ms-linear-gradient( top, #f6f6f6 5%, #ffffff 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff');
  background-color:#f6f6f6;
}.btn:active {
  position:relative;
  top:1px;
}
.btn {
  margin-bottom: 1rem;
  }




/*-----------------------------------*/
/*-------------/ 1024 /---------------*/
/*-----------------------------------*/


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

/***************************************************************
* header
****************************************************************/


#logo {
  width: 100%;
  text-align: center;
  margin-bottom: 0px;
}


.menu h1,
.menu .h1logo {
  -background-color: orange;
  height: auto;
  margin: 0 auto;
}

.menu h1 a,
.menu .h1logo a {
  display: block;
  height: auto;
  margin-bottom: 0px;
  padding: 0px;
  text-align: center !important;

}

.menu h1 a img,
.menu .h1logo a img {
  padding-top: 10px;
  width: 25%;
}

#nav {
  width: 100%;
  text-align: center;
  margin: 0px 0 10px 0;
}

.navigation {
  width: 100%;
  float: center;
  list-style: none;
  margin: 0px 0 15px 0;
  padding:0;
}

.navigation li {
  float: left;
  width: 20%;
  padding: 0;
}


}


/*-----------------------------------*/
/*-------------/ 768 /---------------*/
/*-----------------------------------*/

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

.menu h1,
.h1logo h1 {
  -background-color: green;
  height: auto;
  margin: 0 auto;
}

.menu h1 a,
.menu .h1logo a {
  display: block;
  height: auto;
  margin-bottom: 0px;
  padding: 0px;
  text-align: center !important;

}

.menu h1 a img,
.menu .h1logo a img {
  padding-top: 5px;
  width: 35%;
}


}


/*-----------------------------------*/
/*-------------/ 480 /---------------*/
/*-----------------------------------*/

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


p, a {
/*メニューの文字の大きさに影響している */
    font-size: 0.9rem;
}


/***************************************************************
* header
****************************************************************/


#logo {
  width: 100%;
  text-align: center;
  margin: 0px;
}


.menu h1,
.menu .h1logo {
  -background-color: yellow;
  height: auto;
  margin: 0 auto;
}

.menu h1 a,
.menu .h1logo a {
  display: block;
  height: auto;
  margin-bottom: 0px;
  padding: 0px;
  text-align: center !important;

}

.menu h1 a img,
.menu .h1logo a img {
  padding-top: 5px;
  width: 50%;
}


#nav {
  width: 100%;
  margin: 0px 0 15px 0;
}

.navigation {
  width: 100%;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation li {
  float: left;
  width: 20%;
  font-size: 0.9rem;
}



/***************************************************************
* footer
****************************************************************/

address p {
    font-size: 0.5rem;
}


}