@charset "UTF-8";
.pc {
  display: block!important
}

.sp {
  display: none!important
}

html {
  scroll-behavior: smooth;
  /* iPhoneでのスクロール最適化 */
  -webkit-overflow-scrolling: touch;
}

/*----------------------------------------
general
----------------------------------------*/
html {
	scroll-behavior: smooth;
}
body {
	background: #fff;
}

.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;
}
.wrapper *{
  position: relative;
  box-sizing: border-box;
  overflow: visible;
}
.wrapper section {
  z-index:10;
}

/*----------------------------------------
intro
----------------------------------------*/
.wrapper #intro {
  position: relative;

}




.wrapper #intro .sticky-wrap {
}

.wrapper #intro .sticky-item {

}
.wrapper #intro .sticky-inner  {
  top:0;
  pointer-events: none;
}

.wrapper #intro .intro-front {
  position: absolute;
  top: 2%;  /* 固定 */
  left: 0;
  width: 100%;
}


.wrapper #intro .video-wrap {
  position: relative;

 
}
.wrapper #intro .video-wrap video {
  position: absolute;
  transform: translateX(-50%);
  top:20%;
  width: calc(540/750*100%);
  height: auto;
}
.wrapper .intro-contents {
  position: relative;
  z-index: 100;               /* 既存 */
  transform: translate3d(0, 0, 0);  /* GPUレイヤー化 */
  will-change: transform;           /* 最適化ヒント */
}

/*----------------------------------------
offer
----------------------------------------*/

/*============================
#tab-area
============================*/

.wrapper .offer {
  margin-top: -15%;
}
.wrapper .offer .tab-select {
  display: flex;
  justify-content: space-between;
  width:100%;
  margin: 0 auto;
}
.wrapper .offer .tab-offer {
  background-color: #FFF;
}
.wrapper .offer .tab-select li{
  background-size: cover;
  padding-top: calc(230/750*100%);
  width: calc(250/750*100%);
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;

}
.wrapper .offer .tab-select li.active {
  padding-top: calc(226/690*100%); 
}
.wrapper .offer .tab-select li.tab01 {
  background-image: url(../img/tab01-off.png);
}
.wrapper .offer .tab-select li.tab02 {
  background-image: url(../img/tab02-off.png);
}
.wrapper .offer .tab-select li.tab03 {
  background-image: url(../img/tab03-off.png);
}
.wrapper .offer .tab-select li.tab01.active {
  background-image: url(../img/tab01-on.png);
}
.wrapper .offer .tab-select li.tab02.active {
  background-image: url(../img/tab02-on.png);
}
.wrapper .offer .tab-select li.tab03.active {
  background-image: url(../img/tab03-on.png);
}

.wrapper .offer .btn {
  position: absolute;
  width: calc(660/750*100%);
  bottom: 2.2%;
  left: calc(45/750*100%);
  z-index:2;
  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)
  }
}
.wrapper .offer .btn.btn-4set {
  bottom:18%;
}
.wrapper .offer .btn.btn-3set {
  bottom:7%;
}
.wrapper .offer .btn.btn-1set {
  bottom:15%;
}

/* ---------------------------------------------
 accordion
--------------------------------------------- */
.wrapper #faq {
  background-color: #FFF;
  padding-bottom: 2%;
}
.wrapper #faq .accordion {
  width: calc(690/750*100%);
  margin: 0 auto 5%; 
}
.wrapper #faq .accordion dt {
  cursor: pointer;
  position: relative;
}
.wrapper #faq .accordion dt:before ,
.wrapper #faq .accordion dt:after {
  content:"";
  display: block;
  position: absolute;
  background-image: url(../img/faq-icon.png);
  background-size: cover;
  background-repeat: no-repeat;
  width:calc(46/690*100%);
  padding-top: calc(4/690*100%); 
  top:49%;
  right:5%;
  transition: all ease 0.2s;
  z-index:2;
}
.wrapper #faq .accordion dt:before {
  transform: rotate(90deg);
}
.wrapper #faq .accordion dt.selected:before {
  transform: rotate(0deg);
}
.wrapper #faq .accordion dd {
  display: none;
}
/* ---------------------------------------------
 追従ボタン
--------------------------------------------- */
.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;
}

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

/* 背景色付き ver */
.bl_floatArea.bl_floatArea__bg {
  background-color: rgba(255, 255, 255, .5);
}
/* パディングなし ver */
.bl_floatArea.bl_floatArea__p0 .bl_floatArea_inner {
  padding: 0;
}


#lp-form {
  background-color: #FFF;
  position: relative;
  z-index:10;
}