@charset "utf-8";

a {
-webkit-tap-highlight-color: rgba(200,200,555,.6);
display: block;
}
img {
max-width: 100%;
margin-top:-0.5em;
}
img:not([width]) {
width: 100%;
max-width: 750px;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem; /* =14px*/
-webkit-text-size-adjust:100%;
}
.wrap {
width: 100%;
max-width: 750px;
background: #fff;
color: #333;
line-height: 1.5em;
margin: 0 auto;
}
.brand {
width:100%;
margin:0 0 6%;
}
.brand video {
width:100%;
margin:0 auto;
opacity:0;
animation: fadeIn 1s ease 0.3s 1 forwards;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

/*========================================
popup
========================================*/
.pop_up .lp-popup{
  display: block !important;
}
.pop_up .normal-popup{
  display: none;
}
/*========================================
animation
========================================*/
.delay1 {animation-delay:.2s;}
.delay2 {animation-delay:.4s;}
.delay3 {animation-delay:.6s;}
.delay4 {animation-delay:.8s;}
.delay5 {animation-delay:1s;}
.delay6 {animation-delay:1.2s;}
.delay7 {animation-delay:1.4s;}
.delay8 {animation-delay:1.6s;}
.delay9 {animation-delay:1.8s;}
.delay10 {animation-delay:2s;}
.fadeInUp.delighter {
animation-duration: .5s;
animation-fill-mode: both;
opacity:0;
}
.fadeInUp.delighter.started {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
float:1;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 10%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

@keyframes horizontal {
    0% { transform:translateX( -30px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-60px); }
  100% { transform:translateY(  0px); }
}

.bounceIn.delighter {
animation-duration: 0.75s;
animation-fill-mode: both;
opacity:0;
}
.bounceIn.delighter.started {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

/*co01*/
.co01 {
width:100%;
max-width:750px;
margin:0 auto;
position:relative;
margin-bottom:6%;
overflow:hidden;
}
.co01 figure {
width:80%;
position:absolute;
left:10%;
z-index:100;
}
.co01 .scrollArea01 {
width:100%;
position:absolute;
top:-10%;
right:20%;
opacity:0.8;
z-index:1;
pointer-events: none;
animation: vertical 5s ease-in-out infinite alternate;
mix-blend-mode: multiply;
}
.co01 .flare {
width:100%;
}
.co01 .scrollArea03 {
width:120%;
position:absolute;
top:-5%;
right:15%;
z-index:2;
pointer-events: none;
mix-blend-mode: hard-light;
}

/*co02*/
.co02 {
width:100%;
position:relative;
}
.co02 dl {
width:60%;
position:absolute;
top:12%;
left:0;
}
.co02 .btn {
width:64%;
position:absolute;
top:0;
left:18%;
}

/*co03*/
.co03 {
width:100%;
background:url(../images/co03_bg01.jpg) top no-repeat;
background-size: contain;
}
.co03 dl {
width:60%;
}

/*co04*/
.co04 {
width:100%;
position:relative;
}
.co04 h3 {
width:100%;
position:absolute;
top:0;
}
.co04 .txt02 {
width:100%;
position:absolute;
bottom:0;
}
.co04 .txt03 {
width:30%;
position:absolute;
top:27%;
left:38%;
}

/*co05*/

.co05 li:first-child {
width:100%;
position:relative;
overflow:hidden;
}
.co05 li:first-child figure {
width:56%;
position:absolute;
left:2%;
top:0;
}

/*co06*/
.co06 dd {
width:100%;
position:relative;
}
.co06 dd figure {
width:100%;
position:absolute;
top:0;
left:0;
}
.co06 .btn {
width:100%;
position:relative;
}
.co06 .btn a {
width:64%;
position:absolute;
left:18%;
}

/*co08*/
.co08 {
width:100%;
position: relative;
overflow: hidden;
}
.co08 p {
width:100%;
position:absolute;
}

/*ofr*/
.ofr .txt {
width:100%;
position:relative;
}
.ofr .txt figure {
width:68%;
position:absolute;
left:16%;
top:39%;
}
.ofr .btn {
width:100%;
position:relative;
}
.ofr .btn a {
width:64%;
position:absolute;
left:18%;
}
.ofr.top {
margin:4% 0 2%;
}

/*videoBtn*/
.videoBtn {
width:80%;
margin:0 auto 8%;
}
.videoBtn dd {
animation:blink 2s ease-in-out infinite alternate;
}
@keyframes blink{
    0% {opacity:0.7;}
    100% {opacity:1;}
}