@charset "utf-8";

body{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-content: center;
  align-items:  center;
  flex-wrap: nowrap;
  background-color: #FFFFFF;
}

#mainmarea{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

#mainmarea img{
  width: 100%;
  display: flex;
  height: auto;
}

div.offer_1,
div.offer_2{
  position: relative;
}

div.offer_1 > img,
div.offer_2 > img{
  width: 100%;
  display: flex;
  height: auto;
}

div.offer_1 > a.btn_move {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  margin: 0 auto;
  animation: animScale 1.5s infinite ease-out;
  z-index: 10;

}


div.offer_1 > a,
div.offer_1 > a:link,
div.offer_1 > a:visited,
div.offer_1 > a:hover{
  position: absolute;
    top: auto;
    right: 10%;
    left: auto;
    width: 80%;
    margin: 0 auto;
    bottom: 0% !important;
}


div.offer_2 > a,
div.offer_2 > a:link,
div.offer_2 > a:visited,
div.offer_2 > a:hover{
  position: absolute;
    top: auto;
    right: 10%;
    bottom: 20%;
    left: auto;
    width: 80%;
    margin: 0 auto;
}


footer.l-footer{
  width: 100%;
  background: #f1f9ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

footer.l-footer > div,
footer.l-footer > div > div{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
}

footer.l-footer > div > div > a,
footer.l-footer > div > div > a:link,
footer.l-footer > div > div > a:visited,
footer.l-footer > div > div > a:hover{
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  color: #333;
  text-align: center;
  line-height: 48px;
}

/*フローティングボタンフワッと表示、非表示*/


a.fade,
a.fade:link,
a.fade:visited,
a.fade:hover{
    opacity: 0;
    position: fixed;
    top: auto;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 999;
    display: none;
  }
  a.fadeIn,
  a.fadeIn:link,
  a.fadeIn:visited,
  a.fadeIn:hover{
  opacity: 1;
      transition: 1s;
      position: fixed;
      top: auto;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;
      flex-wrap: nowrap;
      width: 100%;
      margin: 0 auto;
      background: rgba(255,255,255,0.8);
  }

/*フローティングボタンフワッと表示、非表示*/
  summary {
   display: block;
   list-style: none;
  }



@media only screen and (max-width:750px){
  main{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }

  div#txtScroll{
    width: 100%;
    display: flex;
    background: url('./img/3_230306_kenkou_lp_03.png') top left no-repeat;
    background-size: contain;
    position: relative;
  }

  a.fadeIn > img{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

}

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

  main{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    box-shadow: 0px 0px 30px #ffff;
  }

  a.fadeIn > img{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

}