@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css');


body {
  font-family: YakuHanJP, "Helvetica Neue", "Helvetica", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, メイリオ, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  color: #333631;
}

main { padding-bottom: 2.5em }

main p, main ol, main ul {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.7;
}

@media screen and (min-width: 600px) {
  /* medium　smartphone↑ */
  header, main {
    margin: 0 auto;
  }
  header {
    max-width: 540px;
    border-top: 0 solid #3fb5e9;
    border-left: 0 solid #3fb5e9;
    border-right: 0 solid #3fb5e9;
  }
  main {
    max-width: 520px;
    padding-bottom: 1.875em;
    border-top: 0 solid #3fb5e9;
    border-bottom: 10px solid #3fb5e9;
    border-left: 10px solid #3fb5e9;
    border-right: 10px solid #3fb5e9;
  }
  main { margin-bottom: 3.75em!important }
}



/* Button */
.btn {
  margin-top: 10px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  width: 60%;
}

.att {
  color: #ba3533;
  font-size: 16px;
}

/* Slider */
.slide {
  overflow: hidden;
  height: fit-content;
  padding: 1.875em 4.375em 3.125em;
}

.slide-arrow {
  bottom: 0;
  cursor: pointer;
  margin: auto;
  position: absolute;
  width: 25px;
}

.slick-next { right: 20px!important; }
.slick-prev { left: 20px!important; }


/* purchase_btn  */
.purchase_nav {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: +1;
  width: 120px;
  height: 120px;
}


/* ============== */


main ol { list-style: disc inside; }


main h3 {
  background-color: #333333;
  padding: 0.5em;
  color: #ffffff;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
}

main h4 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 700;
}



.buy {
  padding: 0.625em 2.5em 1.875em;
  background-color: #addaf5;
}

.purchase {
  background-color: #addaf5;
  text-align: center;
  padding-left: 2.5em;
  padding-right: 2.5em;
  padding-bottom: 2.5em;;
}
.purchase img { margin-bottom: 10px; }


#review {
  padding-top: 2.5em;
  padding-left: 1.875em;
  padding-right: 1.875em;
}
#review h2 { margin-bottom: 15px; }
#review h3 { margin-top: 30px; }
#review h4 { margin-top: 20px; margin-bottom: 5px; }
#review ol { margin-top: 15px; }
#review p { padding-bottom: 10px; }
#review p.att { padding: 1em 0 0; }

.fukidashi {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;

  position: relative;
  width: 100%;
  height: auto;
  background: #fff9f5;
  margin-bottom: 15px;
  padding: 1em;
  text-align: center;
  color: #3fb5e9;
  border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
}
.fukidashi:after{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  border-color: rgba(162, 87, 104, 0);
  border-top-width: 20px;
  border-bottom-width: 20px;
  border-left-width:16px;
  border-right-width:16px;
  margin-left: -16px;
  border-top-color:#fff9f5;
  top:100%;
  left:50%;
}





@media screen and (min-width:1024px) {
  .purchase_nav {
    top: 78px;
    left: 20px;
    width: 150px;
    height: 150px;
  }
}
@media screen and (min-width: 600px) {
  /* medium　smartphone↑ */
  #review {
    padding-left: 2.5em;
    padding-right: 2.5em;
  }
}
@media screen and (max-width: 599px) {
  /* medium　smartphone↓ */
}

@media screen and (max-width: 375px) {
  /* small　smartphone↓ */
  #header {
    padding: 2.5em 2.5em 1.875em;
  }
  #header p {
    font-size: 18px;
    font-size: 1.8rem;
  }
}