@charset "UTF-8";

html {
  scroll-behavior: smooth
}

/*----------------------------------------
general
----------------------------------------*/

@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:400&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:500&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:600&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:700&display=swap");

html{
  font-family:  "Noto Sans JP", univia-pro, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 62.5%;
  line-height: 1.6;
  color: #181d20;
  scroll-behavior: smooth;
}

body {
	background: #fff;
}


.goth {
  font-family:  "Noto Sans JP", univia-pro, -apple-system, BlinkMacSystemFont, sans-serif;
}

.wrapper img {
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	display: block;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}
.wrapper a {
	display: block;
}

.wrapper ul,
.wrapper dl,
.wrapper ol{
  list-style: none;
}
.wrapper ul li,
.wrapper dl dt,
.wrapper dl dd,
.wrapper ol li{
	line-height: 0;
	font-size: 0;
}

.wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.wrapper *{
  position: relative;
  box-sizing: border-box;
}

.wrapper a{
  transition: all ease 0.3s;
}
.wrapper a:hover{
  filter: brightness(1.1)
}
.wrapper {
}
.wrapper  .p-box {
  position: relative;
}
.wrapper  .p-box .header-text {
  font-size: min(calc(36/750*100vw),36px);
  position: absolute;
  color: #FFF;
  top:13%;
  left:8%;
  line-height: 1;
  border: 1px solid #FFF;
  padding: 0.2em 0.2em 0.2em 0.5em;
}
.wrapper  .p-box .header-text span {
  font-size: min(calc(28/750*100vw),28px);
}

.wrapper  .p-box .header-price {
  font-size: min(calc(87/750*100vw),87px);
  position: absolute;
  color: #fff0cc;
  top:21%;
  left:12%;
  line-height: 1;
  font-weight: 500;
}
.wrapper  .p-box .header-price .small {
  font-size: min(calc(50/750*100vw),50px);
}
.wrapper  .p-box .header-price .middle {
  font-size: min(calc(80/750*100vw),80px);
}

/*============================
#offer
============================*/

.wrapper #offer .p-box .offer-head-text {
  font-size: min(calc(38.5/750*100vw),38.5px);
  letter-spacing: min(calc(4/750*100vw),4px);
  position: absolute;
  font-weight: 500;
  color: #FFF;
  text-align: center;
  top:13.5%;
  line-height: 1;
  width: 100%;
}


.wrapper #offer .p-box .offer-head-price {
  position: absolute;
  font-size: min(calc(105/750*100vw),105px);
  font-weight: 600;
  line-height: 1;
  color: #9d0000;
  top: 53%;
  left: 13%;
}
.wrapper #offer .p-box .offer-head-yen {
  position: absolute;
  width: calc(46/750*100%);
  top: 58%;
  left: 51%;
}
.wrapper #offer .p-box .coupon-text {
  position: absolute;
  font-size: min(calc(60/750*100vw),60px);
  letter-spacing: min(calc(2/750*100vw),2px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  width: 100%;
  color: #9d0000;
  top:82.5%;
}
.wrapper #offer .p-box .coupon-price {
  position: absolute;
  line-height: 1;
  text-align: center;
  font-size: min(calc(110/750*100vw),110px);
  position: absolute;
  color: #fff0cc;
  top: 17%;
  left: 16%;
  line-height: 1;
  font-weight: 500;

}
.wrapper #offer .p-box .coupon-price span {
  font-size: min(calc(60/750*100vw),60px);
}
.wrapper #offer .p-box .offer-price {
  position: absolute;
  font-size: min(calc(130/750*100vw),130px);
  font-weight: 500;
  line-height: 1;
  color: #9d0000;
  right:14%;
}

.wrapper #offer .p-box .offer-price.price01 {
  top:36%;
}
.wrapper #offer .p-box .offer-yen {
  position: absolute;
  width: calc(52/750*100%);
  right:7%;
}
.wrapper #offer .p-box .offer-yen.price01 {
  top:45%;
}
.wrapper #offer .p-box .offer-month {
  position: absolute;
  width: calc(77/750*100%);
  top:89%;
  left:31%;
}
.wrapper #offer .p-box .offer-price.price02 {
  top:74%;
}
.wrapper #offer .p-box .offer-yen.price02 {
  top:83%;
}
.wrapper #offer .p-box .btn-offer {
  position: absolute;
  width: calc(655/750*100%);
  left:calc(47.5/750*100%);
  top:28%;
  animation:purun 2s infinite;
}

@keyframes purun{
  from,to{
    transform:scale(1, 1)
  }
  5%{
    transform:scale(.85, 1.15)
  }
  10%{
    transform:scale(1.1, .9)
  }15%{
    transform:scale(.9, 1.1)
  }20%{
    transform: scale(1,1)
  }
}

/*============================
#voice
============================*/
.wrapper #voice {
}
.wrapper #voice .p-box {
}

.wrapper #voice .p-box .video {
  position: absolute;
  width: calc(343/750*100%);
}
.wrapper #voice .p-box .video01.video {
  left:calc(30/750*100%);
  top:11%;
}
.wrapper #voice .p-box .video02.video {
  right:calc(30/750*100%);
  top:40%;
}
.wrapper #voice .p-box .video03.video {
  left:calc(30/750*100%);
  top:69%;
}
.wrapper #voice .p-box .voice-icon {
  position: absolute;
  width: calc(200/750*100%);
}
.wrapper #voice .p-box .voice-icon.icon01 {
  left:48.5%;
  top:8.5%;
}
.wrapper #voice .p-box .voice-icon.icon02 {
  left: 25%;
  top: 39%;
}
.wrapper #voice .p-box .voice-icon.icon03 {
  left:48.5%;
  top:68%;
}

.wrapper #voice .p-box .voice-text {
  position: absolute;
}
.wrapper #voice .p-box .voice-text.text01 {
  width: calc(435/750*100%);
  top:25%;
  left:40%;
}
.wrapper #voice .p-box .voice-text.text02 {
  width: calc(257/750*100%);
  top: 54%;
  left: 23%;
}
.wrapper #voice .p-box .voice-text.text03 {
  width: calc(442/750*100%);
  top: 83%;
  left: 38%;
}

/*============================
#expert
============================*/
.wrapper #expert {
}

/*============================
#power
============================*/
.wrapper #power {
}

/*============================
#care
============================*/
.wrapper #care {
}

/*============================
#howto
============================*/
.wrapper #howto {
}

/*============================
#use
============================*/
.wrapper #use {
}

/*============================
#caution
============================*/
.wrapper #caution {
}

/*============================
#guarantee
============================*/
.wrapper #guarantee {
}
.wrapper #guarantee .p-box {
}
.wrapper #guarantee .p-box .btn-detail {
  position: absolute;
  width: calc(220/750*100%);
  top:55%;
  left:5.5%;
}

/*============================
#faq
============================*/
.wrapper #faq.js_floatEnd {
}
.wrapper .bl_floatArea.js_floatArea {
}
.wrapper .bl_floatArea.js_floatArea .bl_floatArea_inner.p-box {
}
.wrapper .bl_floatArea.js_floatArea .bl_floatArea_inner.p-box .bl_floatArea_btn {
}



/* ---------------------------------------------
 追従ボタン
--------------------------------------------- */
.bl_floatArea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;
  box-sizing: border-box;
}
.bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
.bl_floatArea_inner {
  max-width: 750px;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
  padding: 0 ;
}

/* ボタン */
.bl_floatArea_btn {
  display: block;
  width: calc(655/750*100%);
  padding-bottom: 1%;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}