/*      body{
       background:#f0f;
    }*/

#fv_wrap {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
}

.fv_arrow {
    z-index: 12;
}

.fv_triangle_bg {
    z-index: 0;
    opacity: 0;
    display: block !important;
    transition-duration: 2s;
    transition-property: opacity;
}

body .intro02 .fv_triangle_box {
    mask-image: url(/assets/img/top/bg_mask.png), url(/assets/img/top/triangle.svg);
    mask-repeat: none;
    mask-size: 100%, 27%;
    mask-composite: intersect;
    transition-property: opacity;
    transition-duration: 0.3s;

}

@media only screen and (max-width: 764px) {
    body .intro02 .fv_triangle_box {
        mask-image: url(/assets/img/top/bg_mask_sp.png), url(/assets/img/top/triangle.svg);
    }
}

.fv_triangle_bg span {

    animation-name: hamon1;
    animation-duration: 5.66s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0;
    height: 80vh;
    width: 80vh;
    background: rgba(96, 200, 238, 1);

}

.fv_triangle_bg span:nth-child(1) {
    animation-delay: 0s;
}

.fv_triangle_bg span:nth-child(2) {
    animation-delay: calc(5.66s / 5);
}

.fv_triangle_bg span:nth-child(3) {
    animation-delay: calc(5.66s / 5 * 2);
}

.fv_triangle_bg span:nth-child(4) {
    animation-delay: calc(5.66s / 5 * 3);
}

.fv_triangle_bg span:nth-child(5) {
    animation-delay: calc(5.66s / 5 * 4)
}

@keyframes hamon1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1)
    }

    10% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

.fv_triangle_box div {
    background-color: #D71618;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
    background-size: cover;
    background-position: center center;
}

.fv_triangle_box div.bg1 {
    background-image: url(/assets/img/top/intro_train_01_pc.webp)
}

.fv_triangle_box div.bg2 {
    background-image: url(/assets/img/top/intro_car_01_pc.webp)
}

.fv_triangle_box div.bg3 {
    background-image: url(/assets/img/top/intro_bedroom_01_pc.webp)
}

.intro02 .fv_triangle_box {
    opacity: 1;

    /*animation-name:triangleanim1;*/
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-fill-mode: both;

}

body .fv_triangle_box {
    background-size: cover !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    mask-image: url(/assets/img/top/triangle.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;



}

/*body .intro08  .fv_triangle_box{
                animation-name:triangleanim2;
                animation-duration:4s;
                animation-timing-function:linear;
                animation-fill-mode:both;
                
            }*/

@keyframes triangleanim1 {
    0% {
        opacity: 0;
        mask-size: 20%;
    }

    10% {
        opacity: 1;
    }

    100% {
        mask-size: 500%;
        opacity: 1;
    }
}

@keyframes triangleanim2 {
    0% {
        opacity: 1;
        mask-size: 500%;
    }

    90% {
        opacity: 1;
    }

    100% {
        mask-size: 20%;
        opacity: 0;
    }
}

/*op logo*/
#l_txt02 {

    mask-image: linear-gradient(to bottom,black,black),linear-gradient(to bottom,black,black), conic-gradient(rgba(255, 0, 0) 0deg, rgba(0, 255, 0, 0) 0deg);
    mask-position: 0% 0%,0% 0%, 90% 25%;
    mask-size: 43.3% 48.5%,100% 40%, 200% 200%;
    mask-repeat: no-repeat;
    animation-duration: 0.9s;
    animation-delay: 1s;
    animation-fill-mode: both;

}

#l_txt01 {

    mask-image: linear-gradient(to bottom, black 50%, transparent 50.01%);
    mask-position: 50% 50%;
    mask-size: 100% 200%;
    animation-delay: 1s;
    mask-repeat: no-repeat;
    animation-duration: 0.9s;
    animation-fill-mode: both;
    opacity: 0;


}

.on #l_txt01 {
    animation-name: linear1;

}

.on #l_txt02 {
    animation-name: radial;

}

@keyframes linear1 {
    0% {
        mask-position: 0% 100%;
        opacity: 1;
    }

    100% {
        mask-position: 0% 0%;
        opacity: 1;
    }
}

#l_txt05 {
    mask-image: linear-gradient(to right, black 50%, transparent 50.01%);
    mask-position: 50% 50%;
    mask-size: 200% 100%;
    mask-repeat: no-repeat;
    animation-delay: 1.2s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    opacity: 0;


}

/* .on #l_txt05{
            animation-name:l2r;
        }*/
.mode1 #l_txt05 {
    opacity: 0 !important;
}

@keyframes l2r {
    0% {
        mask-position: 100% 0%;
    }

    100% {
        mask-position: 0% 0%;
    }
}



#l_txt03 {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.6s;
    transition-delay: 1.2s;
}

.on #l_txt03 {
    opacity: 1;
}

#loading {
    position:fixed;
    z-index: 10000;
    pointer-events: none;
	-webkit-perspective: 500px;
    perspective: 500px;
	transform: translateZ(0.00001); 
	-webkit-transform: translateZ(0.000001); 

}

#loading_txt {
    position: absolute;
    animation-delay: 1.9s !important;

}

#loading_txt img {
    transition-duration: 0.6s !important;

}

.on #loading_txt {
    /*display:none!important;*/
    opacity: 0 !important;
}


#loading .fv_container::before {
    background: transparent !important;
}

#loading .fv_container {
    background: transparent !important;
    position: absolute;
    display: block;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;

}

#loading {
    mask-image: url(/assets/img/top/bg_mask.png);
    margin: 24px !important;
    padding: 0;
    width: calc(100vw - 48px);
    height: calc(100% - 36px);
    /*background: rgba(0, 175, 236,1);*/
    mask-repeat: none;
    mask-size: 100% 100%;
    mask-composite: intersect;
    transition-property: opacity, background;
    transition-duration: 0.3s;
    transition-delay: 1s;
}

#loading .fv_container {
    transition-property: transform left top;
    transition-duration: 0.8s;
}

/* body  #loading.loaded .fv_container #loading_logo02{
            transform:scale(0.77);
            transform-origin:left top;
            left:5px;
            top:0px;
            filter:brightness(-100)!important;
        }*/

/*sp*/
/*#loading .fv_container{
            transform:scale(0.4);
            transform-origin:left top;
            left:5%;
            top:5%;
        }*/

.fv_container {
    /*height:calc(100vh - 48px)!important;
            width:calc(100vw - 48px)!important;*/
    bottom: 0;
    left: 0;
    /*margin:24px;*/

}

.fv_logo_box {
    z-index: 0 !important;
}

.fv_triangle_box02 {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(/assets/img/top/charactor_main.webp) no-repeat center bottom / auto 100%;
    background-position-x: center;
    background-position-y: bottom;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}

@media only screen and (max-width: 540px) {
    .fv_triangle_box02 {
/*        top: 15dvh; */
        top: 15svh;
        left: 0;
        background: url("/assets/img/top/charactor_main_sp.webp") no-repeat left top /100% auto;
    }
}

@media only screen and (max-width: 540px) and (min-height: 836px) {
    .fv_triangle_box02 {
/*        top: 20.6dvh; */
        top: 20.6svh;
    }
}

.fv_container.intro01.intro02.intro05::before {
    background-image: none;
    background-color: #00afec;
}

.fv_catch_wrap.intro03 {
    display: flex !important;
    z-index: 12;
}

.fv_sound {
    transition-duration: 0.6s;
    transition-property: opacity;

}

.fv_sound span {
    transition-duration: 0.05s;
    transition-property: height;
}

.fv_catch {
    width: 100%;
    transition-duration: 0.6s;
    transition-property: opacity;
}

.fv_catch p {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
}

body .fv_wrap02 .fv_catch_wrap .fv_catch p {
    opacity: 0;
    transform: translateY(calc(2em - 50%));
    transition-duration: 0.8s;
    transition-property: opacity, transform;
    margin-top: 0;
}

body .fv_wrap02 .fv_catch_wrap .fv_catch p.pre2 {
    opacity: 0;
    transform: translateY(calc(-50% - 10cap));
}

body .fv_wrap02 .fv_catch_wrap .fv_catch p.pre1 {
    opacity: 0.5;
    transform: translateY(calc(-50% - 5cap));
}

body .fv_wrap02 .fv_catch_wrap .fv_catch p.on {
    opacity: 1;
    transform: translateY(-50%);
}

body .fv_wrap02 .fv_catch_wrap .fv_catch p.post1 {
    opacity: 0.5;
    transform: translateY(calc(-50% + 5cap));
}

body .fv_wrap02 .fv_catch_wrap .fv_catch p.post2 {
    opacity: 0;
    transform: translateY(calc(-50% + 10cap));
}

/*#fv_wrap .fv_container > *{
        opacity:0;
    }
    #fv_wrap.on .fv_container > *{
        opacity:1;
    }*/
#fv_wrap .fv_container {
    height: calc(100svh - 48px);
    width: calc(100% - 48px);
    left: 24px;
    margin-bottom: 24px;
    position: fixed;
    /*transition-duration: 1s;
    transition-property: height;*/
}


/*op*/


#loading_logo {
    opacity: 0;
    transition-duration: 0.6s;
    transition-delay: 1s;
}

#loading_logo02 {
    transform: translate(-53%, -38%) scale(.56);
    transition-property: margin-top, transform, left, top, opacity, transform-origin;
    transition-duration: 1.5s;
    /*transition-timing-function: linear;*/
    transition-delay: 0.6s;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
}

.on #loading_logo02 {
    transform: translate(-50%, -50%);
    transition-duration: 1.5s;
}

.start #loading_logo02,
.start #loading_logo {
    opacity: 1;
}



#loading.loadend {
    background: rgba(21, 160, 212, 0);

}

#loading.mode1 #loading_logo02 {
    left: -37px;
    top: 10px;
    transition-delay: 0s;
    transform: scale(0.75);
}

@media only screen and (min-width: 765px) and (max-height: 1360px) {
    #loading.mode1 #loading_logo02 {}
}

@media only screen and (min-width: 765px) and (max-height: 550px) {
    #loading.mode1 #loading_logo02 {
        left: -100px;
        top: -20px;
        transform: scale(0.535);
    }
}

@media only screen and (max-width: 764px) {
    #loading.mode1 #loading_logo02 {
/*        transform: scale(0.9); */
        transform: scale(1.04);
    }
}

#loading.loaded.small #loading_logo02 {
    left: 22px;
    top: 30px;
    transform: translate(-36%, -36%) scale(0.213);
}

@media only screen and (max-width: 1199px) {
    #loading.loadend.mode1.small #loading_logo02 {
        left: 0px;
        top: 0px;
        transform: scale(0.4) translate(-60%, -40%);
    }
}

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

    #loading.loaded #loading_logo02 {
        transform-origin: 0px 0px !important;
        top: 25px !important;
        left: -18px !important;
    }

    #loading.loaded #loading_logo02 #loading_logo02_01_a #l_txt02 {
        transform: translateY(0px) scale(1);
    }

    #loading.loaded #loading_logo02 #loading_logo02_01_a #l_txt03 {
        transform: translate(-8px, 0);
    }

    #loading.loadend.mode1.small #loading_logo02 {
        transform-origin: 0px 0px !important;
        top: 26px !important;
        left: 3px !important;
        transform: scale(0.4) !important;
    }
}

body #loading div.fv_horizontal {
    z-index: 1000000;
    position: absolute;
    right: 50%;
    opacity: 1;
    bottom: 50%;
    transform-origin: 50% 50%;
    transition-property: top, bottom, left, right, transform, opacity, width, height, max-width,-webkit-transform;
	-webkit-transition-property: top, bottom, left, right, transform, opacity, width, height, max-width,-webkit-transform;
    transition-duration: 1.5s;
    transition-timing-function: ease-in-out;
    max-width: 95%;
    width: 40%;
    transform: translate(calc(50% + 117px), calc(50% + 100px)) scale(calc(344px / 40vw));
    mask-image: linear-gradient(to right, black 50%, transparent 50.01%);
    mask-position: 200% 0%;
    mask-size: 200% 100%;
    mask-repeat: no-repeat;
    animation-delay: 5.3s;
    animation-duration: 0.5s;
    animation-fill-mode: both;

}

body #loading.start div.fv_horizontal {
    animation-name: l2r;
    background: url('../img/common/logo_ horizontal.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    aspect-ratio: 1260 / 120;
}







body #loading div.fv_horizontal img {
    width: 100%;
    visibility: hidden;
    transition-duration: 0.6s;
    display: block;
}

body #loading.mode1 div.fv_horizontal {
    width: 40%;
    opacity: 1;
    transform: translate(50%, 150%);
    transform-origin: 50% 50%;
    /*animation-duration:.7s;
	animation-name:zoominhorizont;
	animation-fill-mode:both;*/
}

/*
@keyframes zoominhorizont{
	0%{
	opacity:0;
}5%{opacity:1;}
100%{opacity:1;}


}
*/
#loading.loadend.mode1 .fv_horizontal {
    bottom: 36px;
    top: auto;
    transform: translate(50%, 0);
    right: 50%;
/*    width: 95%; */
    opacity: 1;
}

@media only screen and (min-width: 765px) {
/*    #loading.loadend.mode1.small .fv_horizontal { */
    #loading.loadend.mode1 .fv_horizontal {
        /*width: 40%;
        max-width: 514px;*/
        left: auto;
        /*transform: translateX(calc(50vw - 40px)) scale(calc(max(0.1,0.4210526)));*/
    }
}

@media only screen and (max-width: 764px) {
    #loading.loadend.mode1 .fv_horizontal {
/*
        width: 92%;
*/
        width: 91%;
    }
}

#loading.loadend.mode1+.fv_wrap02 .fv_scroll_box {
    z-index: 11;
}

@media only screen and (max-width: 1024px) {
    #loading.loadend .fv_horizontal {
        bottom: 0px;

    }
}


@media only screen and (max-width: 764px) {
    #fv_wrap .fv_container {
/*
        height: calc(100svh - 24px);
        width: calc(100% - 24px);
*/
        height: calc(100svh - 32px);
        width: calc(100% - 32px);
/*        left: 12px; */
        left: 16px;
/*        margin-bottom: 12px; */
        margin-bottom: 16px;
    }


    #loading_logo02 {
        /*transform:translate(-56%,-50%);
         width:232px;*/
        transform: translate(-62%, -38%) scale(.95);
    }

    .on #loading_logo02 {
        /*transform:translate(-56%,-50%);*/
        transform: translate(-58%, -50%);
    }

    body #loading div.fv_horizontal {
        /*width: 118px;*/
        /*transform:translate(-12%,40%);*/
        transform: translate(calc(50% + 40px), calc(50% + 27px)) scale(calc(140px / 100vw));
    }
}

body #loading {
    margin: 12px !important;
    width: calc(100% - 24px) !important;

}
@media only screen and (max-width: 764px) {
	body #loading {
	    margin: 16px !important;
	    width: calc(100% - 32px) !important;

	}
}

body #loading .fv_container {
    width: calc(100%) !important;
}

/*
    #loading.loaded.small #loading_logo02{
      transform: scale(.4);
      transform-origin: top left;
      top:26px;
      left:23px;
    }
*/
#loading.loadend.mode1 .fv_horizontal,
#loading.loadend .fv_horizontal {
    bottom: 24px;
}

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

    #loading.loadend.mode1 .fv_horizontal,
    #loading.loadend .fv_horizontal {
        bottom: 10px;
    }
}

/*fv last anim*/

/*.fv_logo_box,.fv_triangle_box02.intro07*/

.fv_triangle_box02.intro07 {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1.5s;


}

.fv_logo_box {
    opacity: 0;
    margin-top: 50%;
    margin-bottom: -50%;
    transition-property: opacity, margin;
    transition-duration: 0.9s;
    transition-delay: 2.5s;
}

.fvfin .fv_logo_box,
.fvfin .fv_triangle_box02.intro07 {
    margin-top: 0;
    margin-bottom: 0;
    opacity: 1;
    transition-delay: 1.5s;
}

.fv_triangle_txt02 {
    opacity: 1;
    transition-duration: 0.6s;
    transition-delay: 2.5s;
    display: none !important;
}

.fvfin .fv_triangle_txt02 {
    opacity: 0;
    transition-duration: 0.6s;
    transition-delay: 2s;
}

body .fdot .fv_triangle_box {
    animation-name: fadeout;
    animation-delay: 2s;
    animation-duration: 0.7s;
    animation-fill-mode: both;
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/*swiper*/

#top_news_list .swiper-slide {
    width: 346px;
    padding: 0px 20px 0 0px;
}

/*
#top_news_list .swiper-slide.odd a{
	transform:translateY(-42px)!important;
}
*/
@media only screen and (min-width: 765px) {
    #top_news_list .swiper-slide {
        width: 346px;
        padding: 0px 40px 0 0px;
    }

    #main .main_wrap .news_wrap .top_news_list_swiper {
        padding: 10px 30px 0 !important;
    }
}

@media only screen and (max-width: 1120px) {
    #top_news_list .swiper-slide {
        width: calc((100vw - 48px - 30px) / 3);
    }
}

@media only screen and (max-width: 764px) {
    #top_news_list .swiper-slide {
        width: calc(100svw - 104px);
        padding: 0 16px;
    }

    /*
	#top_news_list .swiper-slide.odd a{
		transform:translateY(-10px)!important;
	}
*/
    #main .main_wrap .news_wrap .top_news_list_swiper {
        margin: 0 auto;
        padding: 20px 40px 0;
        max-width: 1058px;
    }

    #top_news_list {
        overflow-y: visible !important;
    }

}

.swiper-wrapper {
    width: fit-content;
    display: flex;
}

.wave img {
    width: 100%;
    height: auto;
}

.wave {
    pointer-events: none;
}

.gnav,
.menu_button {
    transition-property: margin-top, opacity;
    transition-duration: 1.5s;
}