@charset "UTF-8";

.videoBtn {
    display: block;
}

.videoBtn .image::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.588);
    opacity: 0.4;
    transition: all 0.5s;
}

.videoBtn:hover .image::before {
    opacity: 1;
    transition: all 0.5s;
}

.videoBtn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.5rem;
    color: #fff;
    transition: all 0.5s;

}

.videoBtn:hover i {
    font-size: 5.5rem;
    transition: all 0.5s;
}


.bannerArea {
    /* background-image: url(../images/banner/bg.jpg); */
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.bannerArea .bannerBox {
    min-height: 100vh;
}

.bannerArea .innerImg {
    padding-top: 50%;
    margin-bottom: 10%;
}

.bannerArea .stage {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
}

.bannerArea .stage .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;

}

.bannerArea .logo::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(../images/logo.png);
    position: absolute;
    top: 0;
    left: 0;
    /* border: 1px solid red; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;


    mask-image: url(../images/img/light.png);
    -webkit-mask-image: url(../images/img/light.png);

    mask-size: auto;
    -webkit-mask-size: auto;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;


    mask-position: 17% 72%;
    -webkit-mask-position: 17% 72%;

    animation-name: lightRun;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0;
}

.page01 .stage {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
}

.page01 .stage .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;


    

}



.Txt p span {
    display: block;
}

.page01 {
    background-image: url(../images/img/page01-bg01.png);
    background-repeat: no-repeat;
    color: #fff;
    background-position: top;
    background-size: 100% auto;
    background-color: #180010;
    padding-top: 20%;
}

.page01-2 {
    background-size: 100% auto;
    background-position: bottom;
    padding-bottom: 30%;
}

.page01 .stage {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
}

.page01 .stage .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;

}

.page01-2 {
    margin-top: 5%;
}

.page01-2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 25%;
    background: linear-gradient(to top, #E40077, rgba(228, 0, 118, 0));
}

.light-ball {
    animation-name: lightBall;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes lightBall {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}


.stage .layer.light {
    mask-image: url(../images/img/light.png);
    -webkit-mask-image: url(../images/img/light.png);

    mask-size: auto;
    -webkit-mask-size: auto;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;


    mask-position: 17% 72%;
    -webkit-mask-position: 17% 72%;

    animation-name: lightRun;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0;
}

@keyframes lightRun {

    0%,
    100% {
        mask-size: 0%;
        opacity: 0;
        -webkit-mask-size: 0%;
    }

    50% {
        mask-size: 500%;
        opacity: 1;
        -webkit-mask-size: 500%;
    }
}

.lightlight {
    animation-name: lightlight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: both;
}



.stage .layer.light2 {
    mask-image: url(../images/img/light.png);
    -webkit-mask-image: url(../images/img/light.png);

    mask-size: 100% auto;
    -webkit-mask-size: 100% auto;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;


    mask-position: 0;
    -webkit-mask-position: 0;

    animation-name: lightRun2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes lightRun2 {

    0%,
    100% {
        mask-size: 0% auto;
        -webkit-mask-size: 0% auto;




    }

    50% {
        mask-size: 500% auto;
        -webkit-mask-size: 500% auto;


    }
}




.stage .layer.light-line {
    mask-image: url(../images/img/light2.png);
    -webkit-mask-image: url(../images/img/light2.png);

    mask-size: 100% 50%;
    -webkit-mask-size: 100% 50%;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;


    mask-position: center 0;
    -webkit-mask-position: center 0;

    animation-name: lightLight;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes lightLight {

    0% {
        mask-position: center 0;
        -webkit-mask-position: center 0;
    }

    100% {
        mask-position: center 300%;
        -webkit-mask-position: center 300%;
    }
}



.titleBox small {
    letter-spacing: 2px;
}

.titleBox small::before {
    content: "｜";
    color: #C9BDAF;
    opacity: 0.3;
}

.titleBox small::after {
    content: "｜";
    color: #C9BDAF;
    opacity: 0.3;
}

.bg-dark::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    padding-top: 50%;
    background: linear-gradient(to bottom, #E40077, rgba(228, 0, 118, 0));

}

.bg-dark {
    padding-bottom: 10%;
    min-height: 100vh;
    background: linear-gradient(45deg, #E40077, #1A274B, #920783, #E40077);
}

.page03 .stage {
    padding-top: 80%;
}

.page03 .stage .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: auto 100%;
    background-repeat: no-repeat;
}


.page03 .stage1 .layer {
    background-position: right;
}

.page03 .stage1 {
    margin-bottom: 20%;
}


.page03 .stage2 .layer {
    background-position: left;
}

.page04 .caseList a {
    background: #fff;
    display: block;
    color: #152547;
}


.page04 .caseList .innerImg {
    padding-top: 120%;
    border-radius: 0 0 145px 145px;
    overflow: hidden;
}


.page04 .caseList .title {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.page05 {
    margin-top: 10%;
}

.activityList .item+.item {
    border-left: 1px solid rgba(255, 255, 255, 0.3);

}

.page06 {
    padding-top: 10%;
}

.page06 .innerImg {
    padding-top: 55%;
}

.page06 .Txt {
    padding: 0 10%;
}

.page06 .Txt .title {
    margin-bottom: 1rem;
}

.page06 .Txt .title small::before {
    content: '';
    display: block;
    width: 100px;
    height: 1px;
    background-color: #C9BDAF;
    margin: 10px 0;
    opacity: 0.6;
}


.page06 .Txt p span {
    display: block
}

.border-top,
.border-bottom {
    border-color: rgba(255, 255, 255, 0.292) !important;
}

.footerBox {
    padding-top: 10%;
}

.footerBox::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #E2BF87;
}

.footerBox::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #E2BF87;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
}

footer {
    margin-top: 10%;
}

footer .title {
    display: inline-block;
    border-bottom: 1px solid #E2BF87;
    margin-bottom: 3rem;
}

footer .text h5 {
    line-height: 2;
}


@media (max-width:991px) {
    .bannerArea {
        background-image: url(../images/banner/bg.jpg);
        background-repeat: no-repeat;
    }
    .bannerArea .title {
        font-size: 1rem;
        letter-spacing: 2px;
    }
    .bannerArea .stage .layer{
        background-image: none !important;
    }

    .bannerArea .stage .light{
        display: none;
    }

    section {
        width: 100%;
        overflow: hidden;
    }

    .page01 .Txt {
        z-index: 1;
    }

    .page01-1 .Txt {
        text-align: center;
    }

    .page01-1 .Txt h5 {
        font-size: 1rem;
    }

    .Txt p span {
        display: inline;
    }

    .Txt p {
        text-align: justify;
    }

    .page01 {
        padding-top: 40%;
    }


    .page01 .Txt {
        text-align: center;
    }

    .page01 .stage .layer {
        background-position: 0% 35%;
    }

    .page01 .Txt h5 {
        font-size: 1rem;
    }

    .page01 .Txt h3 {
        display: block;
        margin-top: 2rem;
    }

    .page01 .stage {
        bottom: auto;
        top: 0;
    }

    .page01 .pageBox {
        min-height: auto;
    }

    .page01-1 {
        padding-top: 30%;
    }

    .page01-3 {
        padding-bottom: 30%;
    }

    .page01-2::before {
        height: 100%;
    }

    .page03 .stage {
        padding-top: 100%;
    }

    .caseList .item {
        text-align: center;
        padding-top: 10%;
    }

    .titleBox {
        padding-top: 20%;
        text-align: center;
    }

    .activityList .item {
        text-align: center;
    }

    .page05 .text h3 {
        text-align: center;
    }

    .page05 .text h3 small {
        display: block;
        line-height: 1.5;
    }

    .page06 .Txt {
        padding: 5% 0%;
    }

    .page06 .Txt {
        padding: 5% 0% 16%;
        text-align: center;
    }

    .page06 .Txt p span {
        display: inline;
    }

    .page06 .Txt .title small::before {
        margin: 10px auto;
    }


    footer {
        padding-bottom: 30%;
    }
}