@charset "UTF-8";

/*
レスポンシブ・デザイン設定
タブレット：min 600px  max 959px
スマホ：max 599px
*/

/*★・・・・・・★・・・・・・★・・・・・・★・・・・・・★
　　タブレット
★・・・・・・★・・・・・・★・・・・・・★・・・・・・★*/ 
@media screen and (min-width: 600px) and (max-width: 959px) {
#wrapper {
	width: 959px;
/*	min-width: 721px; */
	margin: 0 auto;
	max-width: 100%;
}
/*--------- header ----------*/
header {
	width: 100%;
	height: 4rem;
/*	z-index: auto; */
}
header img{
	width: 100%;
	margin: 0 auto;	
}
/*--------- メイン画像 ----------*/
#mainImageHome {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 20.2rem;
}
/*----------- 小さい画像 ------------*/
#image-home img{
	display: block;
	width: 90%;
	float: none;	
	margin: 3rem auto;
}	
/*---------グローバルナビボタン----------*/
	nav.Gnav-button {
 	display: block;
 	width: 100%;
 	height: auto;
 	float: none;
 	margin-top: 2rem;
 	margin-left: 2rem; 
} 
 nav.Gnav-button ul li {
 	display: inline-block;
 	margin-bottom: .4rem;
} 
ul li a img { /*アイコン*/
    display: inline;
 	width: 2.6rem;
 	height: 2.6rem;
 	margin: 0 1rem 0 1rem;
 } 
nav.Gnav-button ul li a{
 	display: block;
	width: 22rem;
	height: 3.6rem;
}
/*-------------------left-column----------------*/
.left-column {
	float: none;
	width: 100%;
}
.left-column-text { 
	width: 90%;	
}
h2 img { /*アイコン*/
	margin-left: 4rem;
}
.line {
	width: 90%;
	margin: auto;
	margin-bottom: 1.4rem;
}
/*------------------ infobox ------------------*/
dl.infobox {
	width: 90%;
	margin: auto;
	margin-bottom: 4rem;
}
/*------------------- footer ----------------*/
footer {
 	clear: both;
 	display: block;
 	width: 100%;
 	height: 19.3rem;
 	background-image: url( ../img/grass.jpg);
 }
.Gnav-footer-left {
	width: 14%;
	margin: 7rem 0 1rem 1rem; 
}
.Gnav-footer-center{
	width: 24%;
	margin: 7rem 0 1rem 1rem; 
} 
.Gnav-footer-right {
	width: 26%;
	margin: 7rem 0 1rem 1rem; 
} 
p#address {
	width: 26%;
	display: inline-block;
	font-size: 1.4rem;
	margin-left: 1rem;
}
}
/*・・・・・・ タブレットここまで ・・・・・・*/

/*★・・・・・・★・・・・・・★・・・・・・★・・・・・・★
　　スマホ
★・・・・・・★・・・・・・★・・・・・・★・・・・・・★*/ 
@media screen and (max-width: 599px) {

/*------ wrapper ------*/
#wrapper {
	margin: 0 auto;
	width: 100%;
}
/*--------- メイン画像 ----------*/
#mainImageHome {
	display: block;
	margin: 24% auto 0 auto;
	width: 100%;
	height: auto;
	
}
/*----------- header ------------*/
header#header-l {
	display: none;
}
header#header-s {
	display: block;
	width: 100%;
	height: auto;
	z-index: 100;
	position: fixed;
	top:0	
}
header img{
	width: 100%;
	margin: 0 auto;	
}

/*----------- 小さい画像 ------------*/
#image-home img{
	display: block;
	width: 100%;
	float: none;	
	margin: 1rem auto 2rem auto;
}	
/*-------------------- .left-column -------------------------*/
.left-column {
	float: none;
	width: 100%;
}
.left-column-text { 
	width: 90%;
}
h2#info-title img { /*アイコン*/
	width: 2.2rem;
	height: auto;
	margin-left: 2rem;
	margin-bottom: 0.8rem;
}
.line {
	width: 100%;
	margin: auto;
	margin-bottom: 1.4rem;
}
dl.infobox {
	width: 100%;
	height: auto;
	overflow: auto;
	color: #888888;
	margin-bottom: 4rem;
}
/*---------グローバルナビボタン----------*/
nav.Gnav-button {  /*PC・タブレット用ボタンを隠す*/
	display: none;
}
nav.Gnav-button-s {
 	display: block;
 	width: 100%;
 	height: auto;
 	float: none;
 	margin-top: 0;
	z-index: 100;
	position: fixed;
	top: 2.2rem; 
} 
 nav.Gnav-button-s ul li {
 	display: block;
 	margin-bottom: 0;
} 
 ul li a img { /*アイコン*/
    display: inline;
 	width: 2rem;
 	height: 2rem;
 	margin: 0 2rem 0.4rem 20%;
 } 
nav.Gnav-button-s ul li a{
 	display: block;
	width: 100%;
	height: auto;
	text-align: left;
	background-color: rgba(175,238,109,0.9);
    border-bottom: 2px solid #8ee730;
    border-radius: 0;
    color: #FFF;
    text-shadow: 2px 2px 3px #8ee730;  
    font-size: 2rem;
    padding: 0;
    padding-top: 0.6rem;
}
nav.Gnav-button-s ul li a:hover {
	background-color: #e7fcd1;
	border-color: #afee6d;
	color: #fff;
}
label {
	text-align: center;
    background: #afee6d;
    color: #fff;
    padding: 0.6rem;
 	padding-bottom: 1rem;
    display: block;
    margin: 0rem auto 0;
	font-size: 2rem;
    text-shadow: 2px 2px 3px #8ee730;  
}
input[type="checkbox"].on-off{
    display: none;
}
.Gnav-button-s ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}
input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}
input[type="checkbox"].on-off:checked + ul{
    height: 30rem;
}
/*-------------------- footer --------------------------*/
  footer {
 	clear: both;
 	display: block;
/* 	width: 96rem; */
	width: 100%;
 	height: 19.3rem;
 	background-image: url( ../img/grass.jpg);
 	overflow: hidden;
 }
.Gnav-footer-left,.Gnav-footer-center,.Gnav-footer-right {
	display: none;
	font-size: 1.4rem;
	margin: 7rem 0 1rem 4rem;
} 
p#address {
	width: 100%;
	display: block;
	font-size: 1.4rem;
/*	margin-left: 4rem; */
	margin: 7rem auto 1rem 20%;
}	
p#copyright {
	font-size: 1rem;
	text-align: center;
	margin: 0.4rem auto -0.4rem;
	width: 100%;	
}
}
/*・・・・・・ スマホ小ここまで ・・・・・・*/
/*★・・・・・・★・・・・・・★・・・・・・★・・・・・・★
　　スマホ大
★・・・・・・★・・・・・・★・・・・・・★・・・・・・★*/ 
@media screen and (min-width: 360px) and (max-width: 599px) {
/*--------- メイン画像 ----------*/
#mainImageHome { /*メニューと画像の間の余白を詰める*/
	display: block;
	margin: 19% auto 0 auto;
	width: 100%;
	height: auto;
	
}
}