@charset "utf-8";
/* ========================================================================
    backgraundからbody内に移した        21/02/04 w4403
    HTML  
      <div class="zoom">
        <img src="assets/images/top-ido.jpg" alt="">
      </div>
      <h1 class="header-title"><a href="http://himawari.co/">ふれ愛サロン ひまわり</a></h1>
      <div class="description">お年寄りやお体の不自由な方々の為の移動美容室、全社あげて徹底した衛生管理に努めています。</div>
   ======================================================================== */

.zoom {
  z-index: 10;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-bottom: -20px; /*mainMenu との間調整*/
}

.zoom img {
  width: 100%;
  height: auto;
  animation: animationZoom 25s ease-in-out forwards;
}

@keyframes animationZoom {
  100% { transform:scale(1.1)} 
}

#header {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

h1.header-title {
  z-index: 11;
  position: absolute;
  top: 10px;
  left: 300px;
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 55px;
  text-shadow: 2px 2px 2px #fff;
}

h1.header-title a {
  color: #f90013;
}

.description {
  color: #fff;
  font-size: 8px;
  opacity: 0.0;    
}

#header h1 a {
  color: #f90013;
}

#header h1 a:hover {
   color:#98CAFD;
}



/* スマホ用640px以下に対応 ===========================================*/
@media screen and (max-width:640px) { 

.zoom {
  z-index: 10;
  width: 200%;
  height: 400px;
  overflow: hidden;
}

.zoom img {
  width: 100%;
  height: auto;
  animation: animationZoom 25s ease-in-out forwards;
}

@keyframes animationZoom {
  100% { transform:scale(1.1)} 
}


h1.header-title {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 30px;
}

h1.header-title a {
  color: #f90013;
}

.description {
  color: #fff;
  font-size: 8px;
  opacity: 0.0;
}

#header h1 a {
  color: #f90013;
}

#header h1 a:hover {
  color:#98CAFD;
}


}