@charset "utf-8";


/* ==========================================================================
   オダサガの街
========================================================================== */

body {
   background-color: #dce6be;
 }

 .scroll {
   transition: all 0.5s ease-out;
 }

 .scroll.LogoScroll {
   left: -200px !important;
   opacity: 0;
   transition: all 0.75s ease-out;
 }


#hasei_main.odaloop::after {
   content: "";
   display: block;
   position: absolute;
   bottom: -6px;
   width: 100%;
   height: 184px;
   background: url(../image/shop_all.png) bottom center repeat-x;
   animation: back_anime 150s linear infinite;
   z-index: 1000;
 }

#odasaga {
   position: relative;
   margin: 6px auto 0;
   padding: 116px 0 240px;
   background: url(../image/back_wave_yg_2.jpg);
   animation: back_anime 60s linear infinite;
   z-index: 200;
}

#odasaga::before {
   content: "";
   display: block;
   position: absolute;
   top: -124px;
   left: 0;
   right: 0;
   width: 72px;
   height: 112px;
   margin: auto;
   background: url(../image/odasaga_map_tit.png) bottom center no-repeat;
   background-size: cover;
   z-index: 1000;
}

#odasaga::after {
   content: "";
   display: block;
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 121px;
   background: url(../image/odasaga_bottom_bg.png) bottom center repeat-x;
   z-index: 400;
}

#odasaga .odasaga_text {
   position: relative;
   width: 648px;
   height: 248px;
   margin: 32px auto;
   background: url(../image/odasaga_text_back.png) bottom center no-repeat;
   background-size: cover;
}

#odasaga .odasaga_text p {
   position: absolute;
   top: 81px;
   left: 62px;
   color: #333;
   font-size: 17px;
   line-height: 1.5;
}


#odasaga .map_inr {
   width: 93vw;
   max-width: 1000px;
   margin: 32px auto 0;
}



#odasaga .map_inr .map_area {
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 72%;
}

#odasaga .map_inr .map_area iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100% ;
   max-height: 1000px;
   border: solid 8px #fff;
   border-radius: 3px;
   box-sizing: border-box;
   box-shadow: 1px 3px 8px 1.5px rgba(0, 0, 0, 0.07);

}


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

   .scroll.LogoScroll {
      left: -184px !important;
      transition: all 0.55s ease-out;
   }

   .odasaga-page #hasei_main {
      height: 55vw;
   }

   .odasaga-page  #hasei_main::after {
      height: 138px;
      background-size: 1200px;
    }


   #odasaga{
      padding: 80px 0 220px;
   }

   #odasaga::before {
      top: -92px;
      width: 54px;
      height: 84px;
   }

   #odasaga.odasaga_inr {
      padding: 0 0;
   }

   #odasaga .odasaga_text {
      width: 486px;
      height: 186px;
      margin: 24px auto;
   }
   
   #odasaga .odasaga_text p {
      top: 48px;
      left: 58px;
      font-size: 14px;
      width: 328px;
   }

   #odasaga .map_inr .map_area {
      padding-top: 82%;
   }

   #odasaga .map_inr .map_area iframe {
      border: solid 6px #fff;

}

}

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

   .scroll.LogoScroll {
      left: -136px !important;
      transition: all 0.5s ease-out;
   }


   .odasaga-page  #hasei_main {
      height: 52vw;
      min-height: 320px;
   }

   .odasaga-page  #hasei_main::after {
      height: 92px;
      background-size: 800px;
    }

   #odasaga{
      padding: 50px 0 150px;
   }

   #odasaga::before {
      top: -59px;
      width: 36px;
      height: 56px;
   }

   #odasaga .odasaga_text {
      width: 324px;
      height: 124px;
      margin: 21px auto;
   }

   #odasaga .odasaga_text p {
      top: 23px;
      left: 38px;
      font-size: 12px;
      width: 204px;
   }

   #odasaga .map_inr .map_area {
      padding-top: 150%;
   }

}