@charset "utf-8";

html,body,div,p,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,
form,fieldset,input,textarea,table,th,td {
    margin: 0;
    padding: 0;
}
ol,ul {
    list-style: none;
}
html {
    height: auto;
    overflow-x: hidden;
}
img {
    vertical-align: top;
    width: 100%;
}
a:hover {
    opacity: 0.7;
}

.hidden-pc {
    display: none;
}

.fv {
    position: relative;
    width: 100vw;
    height: calc((3911 / 2400) * 100vw);
}
.bg {
  position: relative;
}
.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc((3911 / 2400) * 100vw);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 0;
  pointer-events: none;
}
.bg-img.active {
    opacity: 1;
    z-index: 1;
}
#logo-canvas {
    position: absolute;
    top: calc((92 / 1600) * 100vw);
    left: calc((420 / 1600) * 100vw);
    z-index: 15;
}
.pkg, .main-copy {
    position: absolute;
}
.main-copy {
    top: calc((193.45 / 1600) * 100vw);
    left: calc((275.05 / 1600) * 100vw);
    width: calc((195 / 1600) * 100vw);
    height: calc((514 / 1600) * 100vw);
    opacity: 0;
    z-index: 10;
    transition: opacity 2s ease-in-out;
}
.logo {
    top: 1vw;
    left: 1vw;
    width: 20vw;
    height: 2vw;
    z-index: 1;
    transition: opacity 1s ease-in-out;
}
.pkg {
    position: relative;
    top: calc((149.1 / 1600) * 100vw);
    left: calc((643.6 / 1600) * 100vw);
    width: calc((312.81 / 1600) * 100vw);
    height: calc((598.04 / 1600) * 100vw);
    z-index: 1;
}
.pkg-img {
    position: absolute;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.pkg img:first-child.show {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); 
}
.pkg img:first-child {
    opacity: 0;
    filter: blur(7px);
    transform: scale(0.97);
    transition: opacity 1.2s ease-out, filter 1.2s ease-out, transform 1.2s ease-out;
}
.pkg-img.active {
    opacity: 1 !important;
}

.statement {
    position: absolute;
    top: calc((998.18 / 1600) * 100vw);
    left: calc((443.75 / 1600) * 100vw);
    width: calc((728 / 1600) * 100vw);
    height: calc((904 / 1600) * 100vw);
    z-index: 3;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.statement.visible {
    opacity: 1;
    transform: translateY(0);
}

footer {
    position: relative;
    height: calc((392.63 / 1600) * 100vw);
    background: #fff;
}
.text1, .icon1, .text2, .text3, .copyright {
    position: absolute;
}
.text1 {
    top: calc((150.94 / 1600) * 100vw);
    left: calc((100 / 1600) * 100vw);
    width: calc((109.18 / 1600) * 100vw);
}
.icon1 {
    top: calc((129.88 / 1600) * 100vw);
    left: calc((233.62 / 1600) * 100vw);
    width: calc((61 / 1600) * 100vw);
}
.text2 {
    top: calc((134.02 / 1600) * 100vw);
    left: calc((328.67 / 1600) * 100vw);
    width: calc((344.81 / 1600) * 100vw);
}
.text3 {
    top: calc((100 / 1600) * 100vw);
    left: calc((758.21 / 1600) * 100vw);
    width: calc((740.79 / 1600) * 100vw);
}
.copyright {
    bottom: calc((100 / 1600) * 100vw);
    left: calc((100 / 1600) * 100vw);
    width: calc((352.99 / 1600) * 100vw);
}

@media (max-width: 768px) {
    .hidden-pc {
        display: block;
    }
    .hidden-sp {
        display: none;
    }

    #logo-canvas {
        position: absolute;
        top: calc((81 / 375) * 100vw);
        left: calc((18 / 375) * 100vw);
        z-index: 15;
    }
    .fv {
        height: calc((1311.5 / 375) * 100vw);
    }
    .bg-img {
        height: calc((1311.5 / 375) * 100vw);
    }
    .pkg {
        top: calc((99.26 / 375) * 100vw);
        left: calc((115.08 / 375) * 100vw);
        width: calc((144.85 / 375) * 100vw);
        height: calc((276.94 / 375) * 100vw);
    }
    .main-copy {
        top: calc((432.88 / 375) * 100vw);
        left: calc((148.83 / 375) * 100vw);
        width: calc((75.43 / 375) * 100vw);
        height: calc((197.61 / 375) * 100vw);
    }
    .statement {
        top: calc((697.99 / 375) * 100vw);
        left: calc((42.78 / 375) * 100vw);
        width: calc((292.36 / 375) * 100vw);
        height: calc((380.4 / 375) * 100vw);
    }

    footer {
        height: calc((308.68 / 375) * 100vw);
    }
    .text1 {
        top: calc((32.73 / 375) * 100vw);
        left: calc((157.95 / 375) * 100vw);
        width: calc((59.96 / 375) * 100vw);
    }
    .icon1 {
        top: calc((54.22 / 375) * 100vw);
        left: calc((170.59 / 375) * 100vw);
        width: calc((33.57 / 375) * 100vw);
    }
    .text2 {
        top: calc((97.97 / 375) * 100vw);
        left: calc((77.33 / 375) * 100vw);
        width: calc((220.24 / 375) * 100vw);
    }
    .text3 {
        top: calc((158.55 / 375) * 100vw);
        left: calc((30.18 / 375) * 100vw);
        width: calc((315/ 375) * 100vw);
    }
    .copyright {
        bottom: calc((17.3 / 375) * 100vw);
        left: calc((30 / 375) * 100vw);
        width: calc((201.63 / 375) * 100vw);
    }
    
}