/*  index
-------------------------------------------------
    - Import
    - text
    - button
    - pc-layout
    - mobile-layout
    - css3-class
    - keyframes
-------------------------------------------------*/



/*-----------------------------------------------
     Import
-----------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');
@import url('default.css');
@import url('menu.css');
/* @import url('btn.css'); */
/* @import url('jquery.scrollbar.css'); */


/*-----------------------------------------------
     text
-----------------------------------------------*/

h1,
h2 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
}

h2 span {
    display: block;
    width: 100%;

    margin: 0 0 25px;
}

h4 {
    color: #f1355f;
    font-weight: 500;
    margin: 15px 0 -10px;
    font-size: 1.2rem;
}

p {
    font-weight: 400;
    color: #fff;
    margin: 10px 0 10px;
}

/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width {
    height: 100%;
    max-width: 1200px;
    /*! overflow: hidden; */
}

/*-----------------------------------------------
    button
-----------------------------------------------*/
button {
    top: 50%;
    left: 50%;
    margin: 20px auto;
    min-width: 80px;
    min-height: 30px;
    border: 1px solid #000;
    border-radius: 30px;
    transform: translate(-50%, -50%);
}


/*-----------------------------------------------
    new-layout
-----------------------------------------------*/

@keyframes blur_body {
    0% {
        opacity: 0;
        transform: scale(1);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

/*.blur_body{
   animation: blur_body 1.4s ease-out 0s 1 both;
}*/

.wrapper,
#wrapper {
    animation: blur_body .4s ease-out 0s 1 both;
    /*! background:url(../images/index.jpg) no-repeat center top; */
    z-index: 1;
    position: relative;
    /*! background: #000000fa; */
}



/*  pc-layout
-------------------------------------------------
    - html,body
    - header
    - section
    - footer
-------------------------------------------------*/

html,
body {
    /*background:
    url(../images/index.jpg) no-repeat center top;*/
    /*background:#000;*/
}

/*prelodd*/
body::before {
    /*    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    content: '';
    background-image:
    url(../images/book/001.jpg),
    url(../images/book/002.jpg),
    url(../images/book/003.jpg);*/
}
body::after {
  content:"";
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1;
  top: 0;
}


header {
    z-index: 0;
    height: 0;
    overflow: hidden;
    /*background: #ff000085;*/
    background: url(../images/index_01.jpg) no-repeat center 100%;

    padding: 0 0 53% 0;
}

section {
    width: 100%;
    text-align: justify;

}

.video {
    background:
    url(../images/index_02.png) no-repeat center top;

    height: 1700px;
}

.girl01 {
    background: url(../images/index_03.png) no-repeat center top;
    height: 1300px;

}


.girl02 {
    background: url(../images/index_04.png) no-repeat center top;
    height: 1140px;

}

.girl03 {
    background:
    url(../images/index_05.png) no-repeat center 0%, url(../images/index_06.jpg) no-repeat center 100%;
    height: 1180px;

}

footer {
    margin: 0 auto 0;
    width: 100%;
    height: 150px;
    text-align: center;
    background: #fff url(../images/cp.png) center center /500px no-repeat;
}

@media screen and (min-width:1921px) {

    html,
    body {
        background: #0f0000;
    }

}


@media screen and (max-width:1800px) {


    header {
        height: 0px;
        padding: 0 0 53% 0;
        background: url(../images/index_01.jpg) no-repeat center top /100%;
    }

    .video {
        background:url(../images/index_02.png) no-repeat center top /100%;
        height: 0px;
        padding: 0 0 88% 0;
    }

    .girl01 {
         background: url(../images/index_03.png) no-repeat center top /100%;
        height: 0px;
        padding: 0 0 67% 0;

    }


    .girl02 {
       background: url(../images/index_04.png) no-repeat center top /100%;
        height: 0px;
        padding: 0 0 58% 0;

    }

    .girl03 {
        background:
         url(../images/index_05.png) no-repeat center 0%  /100%,
         url(../images/index_06.jpg) no-repeat center 100%  /100%;
        height: 0px;
        padding: 0 0 60% 0;

    }
}


/* mobile-layout
-----------------------------------------------
    mobile
-----------------------------------------------*/

@media screen and (max-width:768px) {

    .wrapper,
    #wrapper {}

    header {
        padding: 0 0 174% 0;
        height: 0;
        background: url(../images/mobile_01.jpg) no-repeat center top / 100%;
    }


    .video {
        height: 0;
        padding: 0 0 117% 0;
        background: url(../images/mobile_02.jpg) no-repeat center top / 100%;
    }

    .girl01 {
        height: auto;
        padding: 12.5% 2%;
        background:
            url(../images/mobile_03.jpg) no-repeat center top / 100%,
            url(../images/mobile_04.jpg) repeat center top / 100%;

    }


    .girl02 {
        height: auto;
        padding: 12.5% 2%;
        background:
            url(../images/mobile_03.jpg) no-repeat center top / 100%,
            url(../images/mobile_04.jpg) repeat center top / 100%;

    }

    .girl03 {
        height: auto;
        padding: 12.5% 2%;
        background:
            url(../images/mobile_03.jpg) no-repeat center top / 100%,
            url(../images/mobile_05.jpg) no-repeat center bottom / 100%,
            url(../images/mobile_04.jpg) repeat center top / 100%;

    }

    footer {
        height: 100px;
        background: #fff url(../images/cp.png) center center /300px no-repeat;
    }
}


/*-----------------------------------------------
    css3-class
-----------------------------------------------*/

.bounceInUp {
    animation: bounceInUp .5s ease-out 0s 1 both;
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/*-----------------------------------------------
    hero-group
-----------------------------------------------*/

.hero-box {
    margin: 5%;
}

/*-----------------------------------------------
    video-group
-----------------------------------------------*/

.video-box {
    width: 62%;
    margin: auto;
    padding: 15% 0 0 0;
    z-index: 10;
    position: relative;
}

.video-margin{
    margin: 3% auto 0;
}

@media screen and (max-width:768px)
{


.video-box {
    width: 82%;
    margin: auto;
    padding: 20% 0 0 0;
}
}
/*-----------------------------------------------
    box-wow
-----------------------------------------------*/

.box-wow01{
    position: absolute;
    width: 61%;
    height: 50%;
    /*background:#ff00009e;*/
    top: 22%;
    left: 50%;

    margin: auto;
    transform: translate(-50%,0);
}

.box-wow02{
    position: absolute;
    width: 61%;
    height: 58%;
    top: 11%;
    left: 50%;

    margin: auto;
    transform: translate(-50%,0);
}


.box-wow03{
    position: absolute;
    width: 61%;
    height: 56%;
    top: 7%;
    left: 50%;

    margin: auto;
    transform: translate(-50%,0);
}
.girl01-wow{
        background: url(../images/girl01.jpg) center top no-repeat ;
         animation: boxwow 2.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 both;
}
.girl02-wow{
        background: url(../images/girl02.jpg) center top no-repeat ;
         animation: boxwow 2.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 both;
}
.girl03-wow{
        background: url(../images/girl03.jpg) center top no-repeat ;
         animation: boxwow 2.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 both;
}

@keyframes boxwow
{
0%{background-size:140%;}
100%{background-size:100%;}
}


/*-----------------------------------------------
    df-video
-----------------------------------------------*/
.play{
    cursor: pointer;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: red;

background: url(../images/video02.jpg) center top / 100% no-repeat ;
}

.play:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/play.png) center /180px no-repeat;
}
.play_wow{
    animation: boxwow 2.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 both;

}

.bg-video-item
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    /*! height: 100%; */
    border: 0;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}



.bg-video{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 0;
    top: 50%;
    left: 0;
    max-width: 1971px;
    margin: auto;
    right: 0;
    overflow: hidden;
    transform: scale(-1);
    opacity: 0.6;
    overflow: hidden;
}
.bg-video2{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 0;
    top: -50%;
    left: 0;
    max-width: 1971px;
    margin: auto;
    right: 0;
    overflow: hidden;
    transform: rotateY(180deg);
    opacity: 0.6;
    overflow: hidden;
}


@media screen and (min-width:1921px) {
/*.bg-video{
    width: 108%;
    height: 108vh;
    position: fixed;
    z-index: 0;
    top: 340px;
    left: 0;
    max-width: 1971px;
    margin: auto;
    right: 0;
    overflow: hidden;
    transform: scale(-1);
}
.bg-video2{
    width: 108%;
    height: 108vh;
    position: fixed;
    z-index: 0;
    top: -726px;
    left: 0;
    max-width: 1871px;
    margin: auto;
    right: 0;
    overflow: hidden;
    transform: rotateY(180deg);

}*/
.bg-video{
    width: 101%;
    height: 100vh;
    position: fixed;
    z-index: 0;
    top: 38%;
    left: 0;
    max-width: 1920px;
    margin: auto;
    right: 0;
    overflow: hidden;
    transform: scale(-1);
    opacity: 0.7;
}
.bg-video2{
    width: 120%;
    height: 120vh;
    position: fixed;
    z-index: 0;
    top: -54%;
    left: 0;
    max-width: 1920px;
    margin: auto;
    right: 0;
    overflow: hidden;
    transform: rotateY(180deg);
    opacity: 0.7;
}
}