@charset "utf-8";
/* CSS Document */
/*-----------------------------
 reset
-------------------------------*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, 
img, small, strong, sub, sup,b, i,dl, dt, dd, ol, ul, li,
 form, label,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;	padding:0;border:0;outline:0;font-size:100%;
background:transparent;line-height:1.7;
}
th{font-style:normal;font-weight:normal;}
ul li{list-style:none; }
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}

body {line-height:1;font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Helvetica,Sans-Serif;}
nav ul {list-style:none;}
table {	border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, footer, header,hgroup, nav, section { display:block; }
article img{vertical-align:bottom;width:100%;height: auto;display: block;}
a{display: block}
a:hover{opacity: 0.8}
/*-----------------------------
 common
-------------------------------*/
.wrap{
	max-width: 750px;
	margin: 0 auto;
    background:#fff;
}
.overlaid{
    position: relative;
}
.abs{
    position: absolute;
}
.space01{
    margin-top: -8.3%;
}
.space02{
    margin-top: -4.5%;
}

/*-----------------------------
 FV
-------------------------------*/
.btn01{
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}

/*-----------------------------
 uriba
-------------------------------*/
.btn02{
    width: 46.1%;
    bottom: 13.7%;
    right: 7%;
	animation: animScale 2s infinite ease-out;/*ボタン動き*/
}
.btn03{
    width: 100%;
    bottom: 1.5%;
    left: 0;
    right: 0;
    margin: 0 auto;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.btn04{
    width: 30%;
    bottom: 1%;
	margin-left:110%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.btn05{
    width: 80%;
	left: 10%;
    bottom: 6%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.offer_btn_fv{
    width: 58.5%;
    top: 86.5%;
    left: 40%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
#banner{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 640px;
    margin: 0 auto;
    z-index: 10;
}

.scroll{
position: absolute;
bottom: 9.7%;
right: 0%;
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 95%;
padding: 0 0 0 7%;
}

/*-----------------------------
 animation
-------------------------------*/
@keyframes fluffyY {
  0% { transform:translateY(7px); }
  50% { transform:translateY(-7px); }
  100% { transform:translateY(7px); }
}
@keyframes animScale {
0% { transform: scale(0.9, 0.9); }/*(Xよこ,Yたて)サイズは%で表示*/
25% { transform: scale(1, 1); }
50% { transform: scale(0.9, 0.9); }
75% { transform: scale(1, 1); }
100% { transform: scale(0.9, 0.9); }
}

/*-----------------------------
 gif
-------------------------------*/
.graph01{
    width: 91%;
    top: 1.3%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.graph02{
    width: 90.5%;
    top: 1%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/*-----------------------------
 accordion
-------------------------------*/
.qa{
    background-image:  url(../img/lp05_09_bg.png),url(../img/lp05_09.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center,top center;
    padding: 6.9% 0 14.3%;
}
.qa_set{
    width: 93.5%;
    margin: 0 auto 7%;
    overflow: hidden;
}
.qa_set_last{
    margin: 0 auto;
}
.qa_q{
    position: relative;
    cursor: pointer;
}
.qa_a{
    display: none;
}
.iconlp{
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    max-width: 52px;
    width: 6.93vw;
    height: 6.93vw;
    max-height: 52px;
    top: 0;
    bottom: 0;
	right: 4.8%;
    margin: auto 0;
}
.iconlp::before{
    content: "";
    position: absolute;
    width: 47%;
    height: 4px;
    background-color: #89bfd0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.iconlp::after{
    content: "";
    position: absolute;
    width: 47%;
    height: 4px;
    background-color: #89bfd0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(90deg);
    transition: all 0.4s;
}
@media screen and (max-width:750px) {
    .icon::before{
        height: 0.53vw;}
    .icon::after{
        height: 0.53vw;}
}
.active::after{
    transform: rotate(0deg);
}