@charset "utf-8";
body {
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
color: #222;
-webkit-text-size-adjust: 100%;
margin:0 auto;
text-align:center;
}


#lp202210{
padding:0;
margin:0 auto;
text-align:center;
width: 100%;
}
#lp202210 img{
width:100%;
}


#lp202210 div, 
#lp202210 h1, 
#lp202210 h2,
#lp202210 h3, 
#lp202210 h4, 
#lp202210 h5, 
#lp202210 p{
margin:0 auto;
padding:0;
font-style:normal;
font-weight:normal;
line-height: 0;
}



/*PCで閲覧時の幅*/
@media screen and (min-width: 750px) {
#lp202210{
max-width: 640px;
text-align: center;
margin: 0 auto;
}
}

#lp202210 header,#lp202210 header div,
#lp202210 .cta,#lp202210 .cta div,
#lp202210 .voc,#lp202210 .voc div,
#lp202210 .reason,#lp202210 .reason div{
position:relative;
}
#lp202210 header h1,
#lp202210 header h2,
#lp202210 header h3,
#lp202210 .cta h3,
#lp202210 .voc h2,
#lp202210 .reason p{
position:absolute;
}

#lp202210 header h1{
width:92%;
top:2%;
left:0;
}
#lp202210 header h2{
width:72%;
top:11%;
right:0%;
}
#lp202210 header h3{
width:57.6%;
top:29%;
right:7%;
}
#lp202210 .ctabg01{
background: url("../img/cta_bg01.jpg")no-repeat center top;
background-size: 100% auto;
}
#lp202210 .ctabg02{
background: url("../img/cta_bg02.jpg")no-repeat center top;
background-size: 100% auto;
}
#lp202210 .ctabg03{
background: url("../img/cta_bg03.jpg")no-repeat center top;
background-size: 100% auto;
}
#lp202210 .cta h3{
width:87.2%;
bottom:30%;
left:6.4%;
}
#lp202210 .voc h2{
width:92%;
top:4%;
left:4%;
}
#lp202210 .youtube .youtubeArea{
background: url("../img/youtube_bg.png")no-repeat center top;
background-size: 100% auto;
padding: 11% 8.5% 12% 8.5%;
}
#lp202210 .youtube .youtubeArea div{
position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#lp202210 .youtube .youtubeArea div iframe{
position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#lp202210 .reason p{
width:76%;
bottom:21.8%;
left:11.8%;
border: 1px solid #c7b299;
}

#footer p{
font-family: Georgia, "Times New Roman", Times, "serif";
color: #666;
font-size: 0.8em;
line-height: 1.3;
letter-spacing:0.06em;
padding: 3% 0 17%;
}



/* フローティングバナー */
#lp202210 .floatingbtn{
display: block;
position: fixed;
bottom: 0;
width: 100%;
z-index: 990;
padding: 0;
line-height:0;
font-size:0;
}
#lp202210 .floatingbtn a {
display: block;
width: 100%;
}

@media screen and (min-width: 750px) {
#footer p{
font-family: Georgia, "Times New Roman", Times, "serif";
color: #666;
font-size: 0.8em;
line-height: 1.3;
letter-spacing:0.06em;
padding: 15px 0 110px;
}
#lp202210 .floatingbtn{
display: block;
position: fixed;
bottom: 0;
width: 640px;
z-index: 990;
padding: 0;
line-height:0;
font-size:0;
}
#lp202210 .floatingbtn a {
display: block;
width: 100%;
}
}


/* cssフェードインアニメーション */
.fade-in01 {
opacity: 0;
animation-name: fadein01;
animation-duration: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
will-change: transform,opacity,translate;
}
@keyframes fadein01 {
0% {opacity: 0;transform:translateX(-20px);}
100% {opacity: 1;transform:translateX(0);}
}

.fade-in02{ 
opacity:0;
animation-name:fadein02;
animation-duration:1s; 
animation-fill-mode: forwards;
animation-timing-function:ease-out;
will-change: opacity,translate;
}
@keyframes fadein02 {
0% {opacity: 0;transform: translateX(-30px);}
100%{opacity: 1;transform: translateX(0);}
}

.fade-in03{ 
opacity:0;
animation-name:fadein03;
animation-duration:1.8s; 
animation-fill-mode: forwards;
animation-timing-function:ease-out;
will-change:opacity,translate;
}
@keyframes fadein03 {
0% {opacity: 0;}
40% {opacity: 0;transform:scale(1.2,1.2);}
100%{opacity: 1;transform:scale(1,1);}
}

.fade-in{
opacity: 0;
transition: all 0.8s ease-in;
will-change: opacity;
}
.fade-up{
opacity: 0;
transform: translate(0, 30px);
transition: all 0.6s ease-out;
will-change: opacity,transform;
}



/* CTAボタンキラリ */
#lp202210 h3.kirari a{
display: block;
position: relative;
overflow: hidden;
}

#lp202210 h3.kirari a:before{
content: "";
z-index: 100;
display: block;
width: 40px;
height: 300px;
position: absolute;
left: -30%;
top: -110%;
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255, .7) 50%,rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.7)),color-stop(100%,rgba(255,255,255,0)));
background-image: -ms-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.7)),color-stop(100%,rgba(255,255,255,0)));
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
animation: shine 4s infinite linear;
-webkit-animation: shine 4s infinite linear;
-ms-animation: shine 4s infinite linear;
will-change:transform;
}

@media screen and (min-width: 750px) {
#lp202210 h3.kirari a:before{
width: 60px;
height: 500px;}
}
@keyframes shine {
0% { left: -30%; }
16% { left: 130%; }
100% { left: 130%; }
}
@-webkit-keyframes shine{
0% { left: -30%; }
16% { left: 130%; }
100% { left: 130%; }
}