@charset "utf-8";
html{
	background-position: 50% -61px;
}

@keyframes catch {
  0% {
    bottom: 10px;
    opacity: 0;
  }
  100% {
    bottom: 40px;
    opacity: 1;
  }
}

@keyframes catchSP {
  0% {
    bottom: -140px;
    opacity: 0;
  }
  100% {
    bottom: -110px;
    opacity: 1;
  }
}


.mainv_page_photo{
    background-image: url(../img/event/mainv-v3.jpg);
}

.event{}
.event_inner{
    padding: 0 0 107px;
}

.event_main{
    margin:  0 auto;
    max-width: 851px;
    /* background: #000; */
    position: relative;
    z-index: 1;
}
/*
.event_bg{
	position: relative;
	z-index: 1;
}

.event_img1,
.event_img2,
.event_text1{
	position: absolute;
	z-index: 1;
}

.event_img1:before,
.event_img2:before,
.event_text1:before{
	content: "";
	z-index: 1;
	position: absolute;

	background: #fff;

	top:0;
	bottom: 0;
	right:0;
	left: 0;
}

.event_text1{
	text-align: center;
	width: 37%;
	letter-spacing: 0;
}
.event_text1 span{
	display: block;
	margin: 0 0 14px;
}

.event_p11{
	top: 18.1%;
	left: 18.5%;
	width: 14.46%;
}
.event_p12{
	top: 19.1%;
	left: 63.4%;
	width: 18.81%;
}
.event_p13{
	top: 68.1%;
	left: 64.3%;
	width: 18.22%;
}
.event_p14{
	top: 67.4%;
	left: 19.9%;
	width: 17.28%;
}


.event_p21{
	top: 9.5%;
	left: 39.5%;
	width: 22.09%;
}
.event_p22{
	top: 37.1%;
	left: 79.8%;
	width: 4.47%;
}
.event_p23{
	top: 83.48%;
	left: 38.9%;
	width: 22.09%;
}
.event_p24{
	top: 36.4%;
	left: 15.5%;
	width: 4.47%;
}

.event_p31{
	top: 3.5%;
	left: 0;
}
.event_p32{
	top: 3.5%;
	right: 0;
}
.event_p33{
	bottom: 3%;
	left: 0;
}
.event_p34{
	bottom: 3%;
	right: 0;
}

.inview_box{

}

.inview_box_on .event_p11:before{
    animation: mask11 5s ease forwards;
}



@keyframes mask11 {
    0% {
        left: 0%;
    }

    10% {
        left: 0%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}


.inview_box_on .event_p12:before{
    animation: mask12 5s ease forwards;
}

@keyframes mask12 {
    0% {
        top: 0%;
    }

    10% {
        top: 0%;
    }


    20% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}


.inview_box_on .event_p13:before{
    animation: mask13 5s ease forwards;
}

@keyframes mask13 {
    0% {
        right: 0%;
    }

    10% {
        right: 0%;
    }


    20% {
        right: 100%;
    }
    100% {
        right: 100%;
    }
}


.inview_box_on .event_p14:before{
    animation: mask14 5s ease forwards;
}

@keyframes mask14 {
    0% {
        bottom: 0%;
    }

    10% {
        bottom: 0%;
    }


    20% {
        bottom: 100%;
    }
    100% {
        bottom: 100%;
    }
}




















.inview_box_on .event_p21:before{
    animation: mask21 5s ease forwards;
}

@keyframes mask21 {
    0% {
        left: 0%;
    }

    30% {
        left: 0%;
    }
    40% {
        left: 100%;
    }


    100% {
        left: 100%;
    }
}


.inview_box_on .event_p22:before{
    animation: mask22 5s ease forwards;
}

@keyframes mask22 {
    0% {
        top: 0%;
    }

    30% {
        top: 0%;
    }

    40% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}


.inview_box_on .event_p23:before{
    animation: mask23 5s ease forwards;
}

@keyframes mask23 {
    0% {
        right: 0%;
    }

    30% {
        right: 0%;
    }
    40% {
        right: 100%;
    }

    100% {
        right: 100%;
    }
}


.inview_box_on .event_p24:before{
    animation: mask24 5s ease forwards;
}

@keyframes mask24 {
    0% {
        bottom: 0%;
    }

    30% {
        bottom: 0%;
    }
    40% {
        bottom: 100%;
    }

    100% {
        bottom: 100%;
    }
}




















.inview_box_on .event_p31:before{
    animation: mask31 5s ease forwards;
}

@keyframes mask31 {
    0% {
        left: 0%;
    }

    10% {
        left: 0%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}


.inview_box_on .event_p32:before{
    animation: mask32 5s ease forwards;
}

@keyframes mask32 {
    0% {
        top: 0%;
    }

    10% {
        top: 0%;
    }


    20% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}


.inview_box_on .event_p33:before{
    animation: mask33 5s ease forwards;
}

@keyframes mask33 {
    0% {
        bottom: 0%;
    }

    10% {
        bottom: 0%;
    }


    20% {
        bottom: 100%;
    }
    100% {
        bottom: 100%;
    }
}


.inview_box_on .event_p34:before{
    animation: mask34 5s ease forwards;
}

@keyframes mask34 {
    0% {
        right: 0%;
    }

    10% {
        right: 0%;
    }


    20% {
        right: 100%;
    }
    100% {
        right: 100%;
    }
}
*/


.event_list{}
.event_list li{
    float: left;
    width: 19.1%;
    text-align: center;
    font-size: 16px;
    margin: 0 0 0 7.86%;
    padding: 0 0 97px;
    letter-spacing: 0px;
}
.event_list li:nth-child(4n+1){
    margin-left: 0;
}
.event_list_img{
    margin: 0 0 13px;
    position: relative;
    z-index: 1;
}
.event_list_img img{
    position: relative;
    z-index: 5;
}
.event_list_img:before{
    content: "";
    z-index: 1;
    position: absolute;
    background: #dfe8ed;
    width: 43%;
    height: 22px;
    top:0;
    left: 100%;
    bottom: 0;
    margin: auto;
}



.event_list_m{
    position: relative;
    z-index: 5;
}
.event_list_text{
    position: relative;
    z-index: 5;
}

.event_list2 li{
    float: right;
    margin: 0 7.86% 0 0;
}
.event_list li:nth-child(4n+1){
    margin-right: 0;
}


.event_list2 .event_list_img:before{

    right: 100%;
    left: auto;
}


.event_list li:last-child .event_list_img:before{
width: 22px;
height: 200px;
top:100%;
right: 0;
left: 0;
bottom: auto;
}

.end .event_list_img:before{
    display: none;
}





/*----------------------------------------------------------*/


/*---------------------------------------------------------
	スマホ
---------------------------------------------------------*/
/*@media screen and (max-width: 680px) ,screen and (max-width: 737px) and (orientation: landscape) {*/
@media screen and (max-width: 1024px) and (orientation: portrait) ,screen and (max-width: 838px) and (orientation: landscape) {

	.event{}
	.event_inner{
    padding: 20px 10px 71px;
}
/*
	.event_main{}

	.event_bg{}

	.event_img1,
	.event_img2,
	.event_text1{
}

	.event_img1:before,
	.event_img2:before,
	.event_text1:before{
    display: none;
}

	.event_text1{
    position:  relative;
    top: auto;
    left:  auto;
    text-align:  left;
    width:  auto;
}
	.event_text1 span{ margin: 0 0 8px;}
	.event_text1 span img{height: 10px;width:  auto;}

	.event_p11{
    width: 88px;
    top: -14px;
    left: 40px;
}
	.event_p12{
    top: -14px;
    right: 31px;
    left: auto;
    width: 36.81%;
}
	.event_p13{
    top: -2.9%;
    left: 36px;
    width: 33.22%;
}
	.event_p14{
    top: 8px;
    left:  auto;
    right: 24px;
    width: 118px;
}


	.event_p21{}
	.event_p22{}
	.event_p23{}
	.event_p24{}

	.event_p31{}
	.event_p32{}
	.event_p33{}
	.event_p34{}

	.inview_box{
    max-width:  345px;
    margin:  0 auto;
}


	.event_list{}
	.event_list li{
    padding: 0 0 0 169px;
    position:  relative;
    z-index: 1;
    margin: 0 0 29px;
}

	.event_img3{
        width: 76px;
        margin: 20px 0 0 -29px;
        position: relative;
        z-index: 1;
    }
    .event_img3 img{
        position: relative;
        z-index: 1;
    }
    .event_img3:before{
        content: "";
        z-index: 5;
        position: absolute;

        background: #fff;

        top:0;
        bottom: 0;
        right:0;
        left: 0;


        transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
    }
    .inview_box_on.event_img3:before{
        background: #fff;
        top: 100%;
    }

	.event_p41{}

	.event_list li:nth-child(even){
	padding: 0 169px 0 38px;
	}

	.event_list li:nth-child(even) .event_img3{
        margin: 20px 0 0 102px;
	}

*/

    .event_list{}
    .event_list li{
    float: none;
    width: auto;
    position: relative;
    z-index: 1;
    padding: 0;
    text-align: left;
    padding: 12px 0 12px 97px;
    margin: 0 0 7px;
    min-height: 88px;
}
    .event_list li:nth-child(4n+1){}
    .event_list_img{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 80px;
}
    .event_list_img img{}
    .event_list_img:before{
    display: none;
}

    .event_list_m{
    /* display: inline; */
}
    .event_list_text{
    /* display: inline; */
}
    .event_list2 li{}
    .event_list li:nth-child(4n+1){}
    .event_list2 .event_list_img:before{}
    .event_list li:last-child .event_list_img:before{}
    .end .event_list_img:before{}



}