@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,
div.offer_1 > a:link,
div.offer_1 > a:visited,
div.offer_1 > a:hover{
  position: absolute;
    top: auto;
    right: 10%;
    bottom: 5%;
    left: auto;
    width: 80%;
    margin: 0 auto;
}


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;
}


div.movie{
  position: relative;
}

div.movie > img{
  width: 100%;
  display: flex;
  height: auto;
}

/*----------------------------------------*/
  div.movie_insta {
      margin-top: 0%;
      position: relative;
}
  div.movie_insta_item {
      width: 80%;
      margin: 0 auto;
      position: absolute;
      top: 35%;
      right: 0;
      left: 0;
      box-sizing: border-box;
      cursor: pointer;
      z-index: 999;
  }

  /*----------------------------------------*/

/*----------------------------------------*/
  div.gif_box {
      margin-top: 0%;
      position: relative;
}
  div.gif_item {
      width: 80%;
      margin: 0 auto;
      position: absolute;
      top: 35%;
      right: 0;
      left: 0;
      box-sizing: border-box;
      cursor: pointer;
      z-index: 999;
  }

  /*----------------------------------------*/

  /*----------------------------------------*/
    div.link_box {
        margin-top: 0%;
        position: relative;
  }
    div.blog_item {
        width: 40%;
        position: absolute;
        top: 40%;
        right: auto;
        left: 3%;
        box-sizing: border-box;
        cursor: pointer;
        z-index: 999;
    }

    div.blog_item {
        width: 45%;
        position: absolute;
        top: 43%;
        right: auto;
        left: 4%;
        box-sizing: border-box;
        cursor: pointer;
        z-index: 999;
    }

    div.hp_item {
        width: 45%;
        position: absolute;
        top: 43%;
        right: 4%;
        left: auto;
        box-sizing: border-box;
        cursor: pointer;
        z-index: 999;
    }

    div.insta_item {
        width: 45%;
        position: absolute;
        top: 65%;
        right: auto;
        left: 4%;
        box-sizing: border-box;
        cursor: pointer;
        z-index: 999;
    }

    div.gym_item {
        width: 45%;
        position: absolute;
        top: 65%;
        right: 4%;
        left: auto;
        box-sizing: border-box;
        cursor: pointer;
        z-index: 999;
    }

    /*----------------------------------------*/








footer.l-footer{
  width: 100%;
  background: #ccc;
  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;
  }

  /* ▶︎消す_css */
  summary::-webkit-details-marker {
    display:none;
  }
  /*▶︎消す_css*/

@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;
  }

}