@charset "utf-8";


/* モバイルレイアウト : 480 px およびそれ以下. */

.gridContainer {
	margin: 0px auto;
	width: 100%;
	padding: 0px;
	    display: flow-root;

}


.for-pc, #main .for-pc, .for-tab, #main .for-tab {
	display: none;
}


/* headerデザイン */

#header {
	clear: both;
	margin-left: 0;
	width: clamp(100%, 100%, 1300px);
	display: block;
}

.header-bg {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo info";
  align-items: start;
  min-height: 70px;
  max-width:1300px;

}



h1 {
	display:none;
}

#logo {
		display: grid;
    grid-template-rows: clamp(50px, 25vh, 80px);
grid-template-columns: 80px minmax(max-content, 1fr);
  margin-top: -20px;
	    padding: 2% 0% 1% 2%;
		  grid-area: logo;

}

#logo #logo-img {
 		grid-row: 1 / 2;
	grid-column: 1 / 2;

 
}

#logo #logo-img img {
	    max-height: 90px;
}


#logo #logo-text {
 		grid-row: 1 / 2;
	grid-column: 2 / 3;
	    margin: 20px 0px;
		  white-space: nowrap;
 
}

/* 問い合わせ */

#info {
      width: 90%;
    max-width: none;
	display: grid; /* グリッドレイアウト */
		grid-template-rows: 1.5rem 1.5rem;
	grid-template-columns: 25% 25% 25% 25%;
	margin-top:1.5%;
	z-index:2;
	padding:1px;
	  grid-area: info;
	    justify-self: end;
}

#info i {
	font-size:2rem;
	  	  transition:0.5s;
		  }


 #info-tel {
	 	grid-row: 1 / 3;
	grid-column: 1 / 2;
	text-align:center;
font-size: clamp(8px, 2vw, 12px);
    line-height: 0.9rem;
    font-weight: 700;
 }
 

  #info-mail {
	 	grid-row: 1 / 3;
	grid-column: 2 / 3;
	text-align:center;
font-size: clamp(8px, 2vw, 12px);
    line-height: 0.9rem;
    font-weight: 700;
 }
 
 #info-mail a{
	  color:#e25c83;
	  transition:1s;
 }
 
	 
   #info-line {
	 	grid-row: 1 / 3;
	grid-column: 3 / 4;
	text-align:center;
font-size: clamp(8px, 2vw, 12px);
    line-height: 0.9rem;
    font-weight: 700;
 }
 
  #info-line a{
	  color:#06C755;
 }
 
   #info-menu {
	 	grid-row: 1 / 3;
	grid-column: 4 / 5;
 }
 
 
 #info i:hover{
	 color:#7CDBFF;
	 transform:scale(1.05)
 }
 
 

#kuzu {
	display: none;
}




/*　固定フッター
---------------------------------------------------- */

#footerbar {
	clear: both;
	margin:-1px 0 0 0;
	padding: 3px 0px 5px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
	display: block;
	max-width:100vw;
	overflow:hidden;
	  z-index:998;
	  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 1) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  }
  
  #footerbar.is-visible {
  opacity: 1;
  pointer-events: auto;
}


.footerbar-wave {
		position:relative;
	overflow:hidden;
	margin:0;
	padding:0;
	background-color:rgba(255,255,255,0.0);
	background: url(../images/wave.svg) repeat-x;
	  background-position: 0 0;
	    animation: fb-slide 15s linear infinite; /* アニメーションの適用 */
	height:10px;

}

@keyframes fb-slide {
  0% {
    background-position: 0 0;
  }
  100% {
    /* 波1つ分移動 */
    background-position: 200px 0;
  }
}




#footerbar ul {
	padding: 0px;
	margin: auto;
}

#footerbar li {
	display: block;
	float: left;
	width: 20%;　/* 項目増えたら変更 */
	list-style: none;
	background-image: none;
	margin: 0px;
	padding: 10px 0px;
	text-align: center;
	line-height: 15px;
}
#footerbar li i{
	font-size: 1.7em;}


#footerbar li .about {
	font-size: 8px;
	font-weight:bold;
}

#footerbar a:hover{
	 opacity:0.7;
 }
 




/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.gridContainer {
}
.for-tab, #main .for-tab {
	display: inline;
}
.for-mv-only, #main .for-mv-only {
	display: none;
}

#kuzu {
}

#logo {
}


#logo img {
max-height:80px;
}


#info {
width: clamp(370px, 75%, 700px);
        grid-template-columns: 41% 38% auto;
			column-gap: 5px;
			        margin-top: -0.5%;
}

#info i {
	font-size:clamp(16px, 12vw, 20px);
	        margin-right:3px;
        vertical-align: text-bottom;
}


 #info-tel {
	 	grid-row: 1 / 2;
	grid-column: 1 / 3;
	text-align:center;
	font-size: clamp(12px, 5vw, 14px);
	line-height:1.1rem;
	
 }
 
  #info-tel .for-pc {
	 font-size:clamp(16px, 12vw, 20px);
	 font-weight:900;
  }
  
  #info-mail {
	 	grid-row: 2 / 3;
	grid-column: 1 / 2;
	text-align:center;;
	font-size: clamp(14px, 2vw, 16px);
	line-height:1.1rem;

 }
   #info-mail a{
	  color:#fff;
	  background:#e25c83;
	 padding:5px;
	 width:100%;
	    display: block;
 }
 
 
  #info a:hover{
	 color:#fff;
	 background:#A3E8FF;
 }
 
 
   #info-line {
	 	grid-row: 2 / 3;
	grid-column: 2 / 3;
	text-align:center;
	font-size: clamp(14px, 2vw, 16px);
	line-height:1.1rem;

 }
 
    #info-line a{
	  color:#fff;
	  background:#06C755;
	 padding:5px;
	 width:100%; 
	   display: block;
 }


   #info-menu {
	 	grid-row: 1 / 3;
	grid-column: 3 / 4;
	
 }
 

.topimage-menu-logo {
  margin-top: 5vh;
}

#footerbar {

}	


#footerbar li {
	}


}



/* デスクトップレイアウト : 769 px ～最大 1000 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.gridContainer {
}

#header {
}



#logo {

}


#logo img {
 
}


#info {
	margin-top:-1%;
}

 #info img {


 }
 
h1 {
	height:10px;
}

#kuzu {
	display: block;
	clear: both;
	float: left;
	margin:0;
	width: 100%;
	display: block;
	color: #777;
	font-size: 10px;

}

#footerbar {
	display:none !important;
}

#footerbar a {
}

#footerbar a:hover {
}

#footerbar li i{
	}


.footerbar-wave {
}

#footerbar li {
}


}

/* デスクトップレイアウト : 820 px～ */

@media only screen and (min-width: 930px) {


.gridContainer {
}


#logo {
	width: 48%;
}


#logo img {
 max-height:90px;
 
}


#info {
width: clamp(400px, 46%, 1000px);
        grid-template-columns: 42% 42% 1fr;
		        margin-top: 0%;
		}

 #info img {
	 width:48%;
	 min-width:100px;

 }
 

.for-pc, #main .for-pc {
	display: inline;
}
.for-mv, #main .for-mv {
	display: none;
}



}