@charset "utf-8";

.lp-ewe023 {
    padding: 0;
    margin: 0;
    padding-bottom: 50px;
    position: relative;
}

.lp-ewe023 img {
    vertical-align: top;
}

.lp-ewe023 section{
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lp-ewe023 .inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.lp-ewe023 .cv-anchor{
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.lp-ewe023 .gif-container{
    position: relative;
}

.lp-ewe023 .gif-img{
    position: absolute;
    width: calc(301*100vw/750);
}

.lp-ewe023 .gif-img1{
    top:calc(745*100vw/750);
    left: calc(38*100vw/750);
}

.lp-ewe023 .gif-img2{
    top:calc(745*100vw/750);
    right: calc(38*100vw/750);
}

.lp-ewe023 .sec-cv{
    padding-bottom: calc(50*100vw/750);
}

.lp-ewe023 .sec-cv > img{
    width: calc(653*100vw/750);
}

.lp-ewe023 .cv-area{
    position: relative;
    width: calc(653*100vw/750);
    margin: 0 auto;
}

.lp-ewe023 .cv-btn{
    position: absolute;
    display: block;
    width: calc(602*100vw/750);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    bottom:calc(463*100vw/750);
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}
.lp-ewe023 .cv-btn:hover{
    opacity: .7;
}

.lp-ewe023 .cv-cation{
    width: calc(653*100vw/750);
    margin: 2% auto 0;
}

.lp-ewe023 .sec-reason{
    background: url(/resource/lp/ewe023p05/sp/img/reason-bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.lp-ewe023 .sec-reason .reason-close {
    padding-top: calc(70*100vw/750);
    padding-bottom: calc(70*100vw/750);
}

.lp-ewe023 .gif-img3{
    width: calc(289*100vw/750);
    top:calc(928*100vw/750);
    left: calc(74*100vw/750);
}

.lp-ewe023 .gif-img4{
    width: calc(289*100vw/750);
    top:calc(928*100vw/750);
    right: calc(67*100vw/750);
}

.lp-ewe023 .sec-cv2{
    background: url(/resource/lp/ewe023p05/sp/img/cv2-bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.lp-ewe023 .sec-cv2 .cv-lead{
    width: calc(640*100vw/750);
    margin: 0 auto;
    margin-top: calc(70*100vw/750);
    margin-bottom: calc(30*100vw/750);
}

.lp-ewe023 .sec-lineup{
    background: url(/resource/lp/ewe023p05/sp/img/lineup-bg.png);
    background-repeat: repeat-y;
    background-size: cover;
    background-position: top center;
    padding-bottom: calc(25*100vw/750);
}

.lp-ewe023 .sec-qa{
    padding : calc(90*100vw/750) 0 calc(80*100vw/750);
    background: url(/resource/lp/ewe023p05/sp/img/qa-bg.png);
    background-repeat: no-repeat;
    background-size: 120% auto;
    background-position: top left 20%;
}

.lp-ewe023 .qa-list{
    margin: 0 auto;
    margin-top:calc(80*100vw/750);
    width: calc(660*100vw/750);
}

.lp-ewe023 .qa-list:first-of-type{
    margin-top: 0;
}

.lp-ewe023 .qa-ttl{
    margin-bottom: calc(40*100vw/750);
    width: calc(260*100vw/750);
    margin: 0 auto;
}

.checkwrap {
	background: url(../img/sp_checkframe.png) center top no-repeat;
	background-size: contain;
    width: 95%;
    height: 100%;
    margin: 20px auto 50px;
    position: relative;
    padding: 80% 0 17%;
}
.checkList {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #faf6eb;
    width: 90%;
    height: 100%;
    padding: 0 3%;
}

.checkttl {
	text-align: center;
    margin: 0px auto;
    position: relative;
    padding: 35px 0 30px;
    width: 70%;
}
.checkboxlist {
	padding: 0px 0 8% 8%;
}
.checknote {
	text-align: center;
    width: 89%;
    margin: 0 auto;
    padding-bottom: 30px;
}

/* チェックボックス01 */
input[type=checkbox] {
    display: none;
}
.checkBoxcol {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkBoxcol::before {
	background: #fff;
    border: 1px solid #231815;
    content: '';
    display: block;
    height: 25px;
    left: -3%;
    margin-top: -8px;
    position: absolute;
    top: 42%;
    width: 25px;
}
.checkBoxcol::after {
	border-right: 3px solid #e78418;
    border-bottom: 3px solid #e78418;
    content: '';
    display: block;
    height: 27px;
    left: 2px;
    margin-top: -5%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 10px;
}
input[type=checkbox]:checked + .checkBoxcol::after {
    opacity: 1;
}

.fixed_scroll {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  cursor: pointer;
  transition: .3s;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
}
.active {
	opacity: 1;
	visibility: visible;
	width: 70%;
}
.conthide {
	opacity: 0;
}