/*
//////////////////////////////////////////////////////

FREE HTML5 TEMPLATE 
DESIGNED & DEVELOPED by FREEHTML5.CO

//////////////////////////////////////////////////////
*/
@font-face {
  font-family: 'themify';
  src: url("../fonts/themify/themify.eot?-fvbane");
  src: url("../fonts/themify/themify.eot?#iefix-fvbane") format("embedded-opentype"), url("../fonts/themify/themify.woff?-fvbane") format("woff"), url("../fonts/themify/themify.ttf?-fvbane") format("truetype"), url("../fonts/themify/themify.svg?-fvbane#themify") format("svg");
  font-weight: normal;
  font-style: normal;
}

html{
  scroll-behavior: smooth;
  font-size: 62.5%;
  scroll-padding-top: 40px;
}

html.fh5co-overflow, body.fh5co-overflow {
  overflow-x: auto;
}
html.fh5co-overflow #fh5co-header-section, html.fh5co-overflow #fh5co-main, html.fh5co-overflow #fh5co-hero, html.fh5co-overflow #fh5co-mobile-menu, html.fh5co-overflow #fh5co-footer, body.fh5co-overflow #fh5co-header-section, body.fh5co-overflow #fh5co-main, body.fh5co-overflow #fh5co-hero, body.fh5co-overflow #fh5co-mobile-menu, body.fh5co-overflow #fh5co-footer {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


body{
  width: 100%;
  background-color: white;
  font-family: 'Meiryo UI','Arial','Hiragino Kaku Gothic ProN',sans-serif;
}

img{
  max-width: 100%;
}

a{
  color: rgb(255, 255, 255);
  text-decoration: none;
}
a:hover{
  color:rgb(255, 255, 255);
  text-decoration: none;
}

p{
  margin-block-start: 0em;
  margin-block-end: 0em;
}

section{
  padding: 5rem 0rem;
  background-color: #fff7f5;
  margin: 8px 0px 0px 0px;
  margin-top: 8rem;
}

.whole-wrapper{
  overflow: hidden;
}

.area-wrapper{
  width: 100%;
  /* width: 960px; */
  margin: 0 auto;
}

.area-header{
  max-width: 960px;
  margin: 0 auto;
}

.main_lead{
  background-color: #fff7f5;
  text-align: center;
  padding: 2rem 2rem;
  margin-top: 0rem;
}
.main_lead img{
max-width: 30rem;
}
.lead{
  font-size: 1.6rem;
  text-align: center;
  margin: 3rem 0rem;
  line-height: 2;
}


.mid_ttl{
  position: relative;
  height: 40rem;
  max-width: 96rem;
  margin: 0 auto;
}
.mid_ttl img{
  position: absolute;
}
.mid_ttl .pic{
  max-width: 45rem;
  right: 0rem;
  top: -8rem;
  z-index: 10;
}
.mid_ttl .ttl_background{
  max-width: 35rem;
  left: 25rem;
  bottom: 5rem;
}

.mid_ttl .mid_3_ttl{
  max-width: 40rem;
  bottom: 0rem;
  left: 15rem;
  z-index: 20;
}

.block_lead{
  padding: 3rem 2rem;
  line-height: 2;
  max-width: 96rem;
  margin: 0 auto;
  text-align: center;
  font-size: 1.5rem;
}
.product_mob{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: 3rem 0rem;
  max-width: 96rem;
  margin: 0 auto;
}
.pd{
  text-align: center;
}

  .pd p {
    font-size: 1.6rem;
    margin: 1rem 0rem;
    text-align: center;
}

.curv_btn{
  background-color: #e7787e;
  border-radius: 20px;
  max-width: 30rem;
  padding: 1rem 3rem;
  margin: 0 auto;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.curv_btn a{
  color: white;
}





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

  html{
    scroll-padding-top: 30px;
  }
  body{
    max-width: 100%;
    background-color: white;
    font-family: 'Meiryo UI','Arial','Hiragino Kaku Gothic ProN',sans-serif;
  }

  img{
    max-width: 100%;
  }
  a{
    color: black;
    text-decoration: none;
  }

  p{
    margin-block-start: 0em;
    margin-block-end: 0em;
  }

  .whole-wrapper{
    overflow: hidden;
    background-color: #ffffff;
  }

  .area-header{
    width: 100%;
    margin: 0 auto;
  }
  .area-wrapper{
    width: 100%;
    margin: 0 auto;
  }

  section{
  padding: 2rem 0rem;
  background-color: #fff7f5;
  margin: 5rem 0rem 0rem;
}
.main_lead{
  background-color: #fff7f5;
  text-align: center;
  padding: 2rem 2rem;
  margin-top: 0rem;
}
.main_lead img{
max-width: 18rem;
}
.lead{
  font-size: 1.4rem;
  text-align: left;
  margin: 1rem 0rem;
  line-height: 2;
}


.mid_ttl{
  position: relative;
  height: 30rem;
}
.mid_ttl img{
  position: absolute;
}
.mid_ttl .pic{
  max-width: 30rem;
  right: 0rem;
  top: -4rem;
  z-index: 10;
}
.mid_ttl .ttl_background{
  max-width: 25rem;
  left: 3rem;
  bottom: 0rem;
}

.mid_ttl .mid_3_ttl{
  max-width: 30rem;
  bottom: 0rem;
  left: 2rem;
  z-index: 20;
}

.block_lead{
  font-size: 1.4rem;
  padding: 2rem 2rem;
  line-height: 2;
  text-align: left;
}
.product_mob{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
}
.pd{
  text-align: center;
}
.pd p{
  font-size: 1.4rem;
  margin: 0.5rem 0rem;
}
.curv_btn{
  background-color: #e7787e;
  border-radius: 20px;
  max-width: 25rem;
  padding: 1rem 3rem;
  margin: 0 auto;
  text-align: center;
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.curv_btn a{
  color: white;
}

}