body{
    background-color: var(--lightgray);
}




#animearea{
    /* display: none; */
}

.animeinner{
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
    height: 100vh;
}

.hiddenarea{
    overflow: hidden;
}

#stage_1{
    z-index: 300;
}

#stage_2{
	/* overflow-x: hidden; */
    z-index: 200;
}

#stage_3{
    z-index: 100;
}

#stage_4{
    z-index: 90;
}


.animeinner h1{
    width: 100%;
    position: absolute;
    display: block;
    font-size: 90px;
    font-weight: 900;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 1;
    text-align: center;
    padding-bottom: 5vh;
    z-index: 200;
    color: #FFF;
}

.animeinner h1 strong{
    display: block;
}

#end{
    position: relative;
	display: flex;
    width: 100vw;
    height: 50vh;
    left: 0;
    top: 0;
    z-index: 50;
	justify-content: center;
}


#end h2{
    position: absolute;
    display: block;
    font-size: 40px;
    line-height: 1.4;
    text-align: center;
    bottom: 0%;
    font-weight: 700;
    white-space: nowrap;
	opacity: 0;
	transform: scale(1.1);
}




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

	.animeinner h1{
		font-size: 9vw;
	}

	#end h2{
		font-size: 4vw;
	}
}


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

	.animeinner h1{
		font-size: 12.5vw;
	}

	#end h2{
		font-size: 30px;
	}
}


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

	#end h2{
		font-size: 5vw;
	}


}





.anime_s_ameba{
    position: absolute;
}

.anime_s_ameba img{
    max-width: none;
    width: 100%;
    height: 100%;
}


#anime_ameba_1{
    z-index: 120;
    left: 70vw;
    bottom: -17vh;
    width: 42.2vw;
    height: 97.2vh;
}

#anime_ameba_2{
    z-index: 119;
    right: 70vw;
    bottom: 75vh;
    width: 44.5vw;
    height: 52vh;
}

#anime_ameba_3{
    z-index: 100;
    right: 68.75vw;
    top: 59.5vh;
    width: 43.2vw;
    height: 70.2vh;
}

#anime_ameba_4{
    z-index: 90;
    left: 67vw;
    bottom: 65vh;
    width: 48vw;
    height: 66vh;
}

#anime_ameba_5{
    z-index: 80;
    right: 77vw;
    bottom: 17.2vh;
    width: 43.2vw;
    height: 91.6vh;
}

#anime_ameba_6{
    z-index: 70;
    right: 23.75vw;
    bottom: 65.4vh;
    width: 60.4vw;
    height: 67vh;
}

#anime_ameba_7{
    z-index: 60;
    left: 22vw;
    top: 72vh;
    width: 57.3vw;
    height: 42vh;
}

#anime_ameba_8{
    z-index: 50;
    left: 53vw;
    top: -12.5vh;
    width: 62.5vw;
    height: 133vh;
}

#anime_ameba_9{
    z-index: 40;
    right: 49vw;
    top: 42.5vh;
    width: 70vw;
    height: 109vh;
}

#anime_ameba_10{
    z-index: 30;
    right: 49.5vw;
    bottom: 39vh;
    width: 58vw;
    height: 90vh;
}

#anime_ameba_11{
    z-index: 20;
    left: 12vw;
    top: 51.5vh;
    width: 75.5vw;
    height: 83.3vh;
}

#anime_ameba_12{
    z-index: 19;
    left: 24vw;
    top: 3.5vw;
    width: 55vw;
    height: 87vh;
}

#anime_ameba_13{
    z-index: 9;
    width: 300px;
    right: 65%;
    top: 20vh;
}

#anime_ameba_14{
    z-index: 8;
	width: 300px;
	left: calc(55% + 200px);
	bottom: -30vh;
}

#anime_ameba_15{
    z-index: 7;
    width: 380px;
    left: calc(50% + 300px) ;
    top: 25vh;
}

#anime_ameba_16{
    z-index: 6;
    width: 500px;
    right: calc(50% + 400px) ;
    bottom: 0px;
}

#anime_ameba_17{
    z-index: 11;
	width: 120px;
	left: calc(50% - 500px);
	bottom: 20vh;
}


/* min-aspect-ratio */
/* midRatio  */
@media screen and (min-aspect-ratio: 3/4) and ( max-aspect-ratio: 4/3 ){
	
	#anime_ameba_1{
		left: 65vw;
		bottom: -12vh;
		width: 48vw;
		height: 60.5vh;
	}

	#anime_ameba_2{
		right: 68vw;
		bottom: 75vh;
		width: 50vw;
		height: 33vh;
	}

	#anime_ameba_3{
		right: 61.5vw;
		top: 62.5vh;
		width: 59vw;
		height: 54vw;
	}

	#anime_ameba_4{
		left: 63vw;
		bottom: 67.7vh;
		width: 54vw;
		height: 42.5vh;
	}

	#anime_ameba_5{
		right: 76.7vw;
		bottom: 27.7vh;
		width: 49vw;
		height: 58.5vh;
	}

	#anime_ameba_6{
		right: 16.8vw;
		bottom: 73vh;
		width: 68vw;
		height: 42.5vh;
	}

	#anime_ameba_7{
		left: 0vw;
		top: auto;
		bottom: -5vh;
		width: 100vw;
		height: 36vh;
	}


	#anime_ameba_8{
		left: 60.8vw;
		top: 12.4vh;
		width: 71vw;
		height: 85.2vh;
	}

	#anime_ameba_9{
		right: 46.7vw;
		top: 40.7vh;
		width: 80vw;
		height: 70vh;
	}

	#anime_ameba_10{
		right: 45vw;
		bottom: 46vh;
		width: 67vw;
		height: 58.5vh;
	}
	
	#anime_ameba_11{
		left: 0vw;
		top: 51.8vh;
		width: 86vw;
		height: 53.5vh;
	}
	
	#anime_ameba_12{
		z-index: 10;
		left: 21vw;
		top: -3.5vw;
		width: 85vw;
		height: 76vh;
	}


}




/* tallRatio */
@media screen and (max-aspect-ratio: 3/4 ){

	#anime_ameba_1{
		left: 41vw;
		bottom: -8.5vh;
		width: 91vw;
		height: 57.2vh;
	}

	#anime_ameba_2{
		right: 52vw;
		bottom: 79vh;
		width: 72.8vw;
		height: 24vh;
	}

	#anime_ameba_3{
		right: 46vw;
		top: 80vh;
		width: 77vw;
		height: 35.3vh;
	}

	#anime_ameba_4{
		left: 38.3vw;
		bottom: 83.5vh;
		width: 77.8vw;
		height: 30.8vh;
	}

	#anime_ameba_5{
		right: 70.4vw;
		bottom: 29vh;
		width: 100vw;
		height: 60vh;
	}

	#anime_ameba_6{
		right: -10.4vw;
		bottom: 68.6vh;
		width: 128vw;
		height: 38.4vh;
	}

	#anime_ameba_7{
		left: -34.1vw;
		top: 66.7vh;
		width: 134vw;
		height: 27.7vh;
	}

	#anime_ameba_8{
		left: 47,4vw;
		top: 9vh;
		width: 107vw;
		height: 64.2vh;
	}

	#anime_ameba_9{
		right: 43.2vw;
		top: 52.5vh;
		width: 97vw;
		height: 42.5vh;
	}

	#anime_ameba_10{
		right: 44vw;
		bottom: 47.5vh;
		width: 90vw;
		height: 35vh;
	}
	
	#anime_ameba_11{
		left: -35vw;
		top: 40vh;
		width: 150vw;
		height: 40.8vh;
	}
	
	#anime_ameba_12{
		z-index: 10;
		left: -17.6vw;
		top: 20vw;
		width: 140vw;
		height: 62.5vh;
	}

}



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

	#anime_ameba_13{
		z-index: 9;
		width: 25vw;
		right: 55%;
		top: 15vh;
	}
	
	#anime_ameba_15{
		z-index: 7;
		width: 30vw;
		left: 80vw;
		top: 25vh;
	}
	
	#anime_ameba_16{
		z-index: 6;
		width: 45vw;
		right: 85vw;
		bottom: -20vh;
	}
	
	#anime_ameba_17{
		z-index: 11;
		width: 10vw;
		left: 3vw;
		bottom: -10vh;
	}


}


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


	#anime_ameba_13{
		z-index: 9;
		width: 18vw;
		right: 60%;
		top: 25vh;
	}
	
	#anime_ameba_14{
		z-index: 8;
		width: 25vw;
		left: 70vw;
		bottom: -45vh;
	}
	
	#anime_ameba_15{
		z-index: 7;
		width: 50vw;
		left: 70vw;
		top: auto;
		bottom: 70vh;
	}
	
	#anime_ameba_16{
		z-index: 6;
		width: 50vw;
		right: 90vw;
		bottom: -100px;
	}
	
	#anime_ameba_17{
		z-index: 11;
		width: 70px;
		left: 3vw;
		bottom: 0px;
	}

}



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

	#anime_ameba_16{
		z-index: 6;
		width: 150px;
		right: 95vw;
		bottom: 100px;
	}

	#anime_ameba_17{
		display: none;
	}


}


@media screen and (max-width: 480px) {
	#anime_ameba_16{
		display: none;
	}
}



@media screen and (min-aspect-ratio: 3/4) and ( max-aspect-ratio: 4/3 ){
	#anime_ameba_17{
		display: none;
	}
}












#maincopy{
    position: relative;
    padding: 0px 0px 300px;
    z-index: 15;
    margin-bottom: 100px;
	top: 50vh;
}

#maincopy p{
    position: relative;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    z-index: 100;
}

#maincopy p .mainbr{
    display: none;
}


#maincopy #endbanner{
    position: relative;
    text-align: center;
    z-index: 110;
}


#maincopy #endbanner span{
    display: inline-block;
    background-color: #ee1616;
    padding: 20px 25px;
    border-radius: 15px;
    margin: 80px auto 0px;
   
    
    text-align: center;
    color: #FFF;
}

#maincopy #endbanner span i{
    display: inline-block;
    line-height: 1.2;
    /* padding-bottom: 10px; */
    font-size: 18px;
    font-weight: 700;
}

#endbanner_fixd{
    display: none;
    position: fixed;
    top: 90px;
    right: 0;
    z-index: 5500;
}

#endbanner_fixd span{
    display: inline-block;
    background-color: #ee1616;
    padding: 15px 20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin: 0px auto 0px;
    line-height: 1.4;
    width: 230px;
    text-align: left;
    color: #FFF;
}

#endbanner_fixd span i{
    display: inline-block;
    line-height: 1.4;
    padding-bottom: 0px;
    font-size: 16px;
    font-weight: 700;
}


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

    #maincopy p{
        position: relative;
        font-size: 18px;
        text-align: center;
        font-weight: 700;
        z-index: 100;
    }
}

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

    #maincopy p{
        font-size: 17px;
        padding-bottom: 50px;
    }


    #maincopy p .mainbr{
        display: inline-block;
    }

    #maincopy #endbanner span{
        padding: 15px 20px 5px;
        border-radius: 15px;
        margin: 3vw auto 10vw;
    }

    #endbanner_fixd span{
        padding: 10px 15px;
        width: 200px;
    }

    #endbanner_fixd span i{
        font-size: 14px;
    }

}


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

    #maincopy p{
        font-size: 16px;
        padding-bottom: 50px;
    }

}

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

    #maincopy p{
        font-size: 3.3vw;
    }

}

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

    #maincopy #endbanner span{
        padding: 10px 15px 0px;
        border-radius: 12px;
    }

    #maincopy #endbanner span i{
        font-size: 3.75vw;
    }

    #endbanner_fixd span{
        padding: 8px 10px;
        width: 170px;
    }

    #endbanner_fixd span i{
        font-size: 12px;
    }

}




.main_s_ameba{
    position: absolute;
}

#main_ameba_1{
    z-index: 21;
	width: 90%;
    max-width: 1000px;
    left: 50%;
    bottom: 100px;
	transform: translateX(-50%);
}


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

	#maincopy{
		padding: 0px 0px 200px;
	}

	#main_ameba_1{
		z-index: 21;
		width: 90%;
		max-width: 1000px;
		left: 50%;
		bottom: 100px;
	}
	
   

}


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

	#maincopy{
		padding: 0px 0px 150px;
	}

    #main_ameba_1{
        z-index: 21;
        width: 900px;
    }
    
    
}


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

	#maincopy{
		padding: 0px 0px 100px;
	}

    #main_ameba_1{
        z-index: 21;
		width: 210vw;
		bottom: 40px;
    }

}



























/* title */ 




.contarea h1{
    position: relative;
    font-size: 58px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    padding-bottom: 40px;
    margin-bottom: 40px;
    color: var(--drakblue);
    
}

.contarea h1::before{
    content: "";
    position: absolute;
    display: block;
    width: 80px;
    height: 5px;
    background-image: url(../img/bar_mini.svg);
    background-size: cover;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.contarea .stxt{
    text-align: center;
}



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

    .contarea .stxt{
        text-align:justify;
        text-justify:distribute;
    }
}


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

    .contarea h1{
        font-size: 10vw;
        padding-bottom: 7vw;
        margin-bottom: 7vw;
    }

    .contarea h1::before{
        width: 60px;
        height: 4px;
        background-size: contain;
    }
   
}


span.note{
    position: relative;
    display: inline-block;
    padding-left: 1.1em;
    font-size: 87.5%;
    padding-top: 5px;
    letter-spacing: 1;
}

span.note::before{
    content: "※";
    position: absolute;
    display: block;
    left: 0;
}

/* title */ 



/* intern & live */

:root{
    --3days: #0c419a;
    --1day: #0773d7;
    --live: #1cbde5;
    --live_color1: #0c419a;
    --live_color2: #1e7dbd;
    --live_color3: #41cdf4;
    --live_color4: #67a9e2;
    --live_color5: #0d256b;
}

.bg_3days{
    background-color: var(--3days);   
}

.bg_1day{
    background-color: var(--1day);   
}

.bg_live{
    background-color: var(--live);   
}

.live_1_color{
    color: var(--live_color1);   
}

.live_2_color{
    color: var(--live_color2); 
}

.live_3_color{
    color: var(--live_color3); 
}

.live_4_color{
    color: var(--live_color4); 
}

.live_5_color{
    color: var(--live_color5); 
}

.live_1_bg{
    background-color: var(--live_color1); 
}

.live_2_bg{
    background-color: var(--live_color2); 
}

.live_3_bg{
    background-color: var(--live_color3); 
}

.live_4_bg{
    background-color: var(--live_color4); 
}

.live_5_bg{
    background-color: var(--live_color5); 
}

/* intern & live */






#flowarea article{
    position: relative;
    width: 92%;
    background-color: var(--white);
    border-radius: 50px;
    margin: 0 auto;
    padding: 110px 0px 135px;
    z-index: 8;
}

#flowarea article .wrap{
	width: 88%;
}

#programarea p.miniend{
    text-align: center;
    padding: 15px 0px 35px;
}

p.miniend span{
    display: inline-block;
    background-color: #ee1616;
    color: #FFF;
    line-height: 1.4;
    font-weight: 600;
    padding: 3px 10px 5px;
}

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

    #flowarea article .wrap{
		width: 86%;
	}

}

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

	#flowarea article .wrapp{
		width: 82%;
	}

}


#flow_ameba{
    position: absolute;
    z-index: 1;
    height: 170px;
    width: 250px;
    right: -70px;
    bottom: -70px;
}

#flow_ameba img{
    position: absolute;
    display: block;
    max-width: none;
    width: 250px;
    height: auto;
    right: 0;
    
    z-index: 1;
}


#flow_ameba_2{
	position: absolute;
	z-index: 2;
	height: 170px;
	width: 250px;
	right: 80%;
	top: -100px;
}

#flow_ameba_2 img{
    position: absolute;
    display: block;
    max-width: none;
    width: 250px;
    height: auto;
    right: 0;
    
    z-index: 1;
}


#flow_ameba_3{
	position: absolute;
	z-index: 3;
	height: 260px;
	width: 300px;
	left: 65%;
	top: -200px;
}

#flow_ameba_3 img{
    position: absolute;
    display: block;
    max-width: none;
    width: 300px;
    height: auto;
    right: 0;
    
    z-index: 1;
}



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

    #flow_ameba{
        position: absolute;
        z-index: 1;
        height: 150px;
        width: 220px;
        right: -10vw;
        bottom: -80px;
    }

    #flow_ameba img{
        position: absolute;
        display: block;
        max-width: none;
        width: 220px;
        height: auto;
        right: 0;
        
        z-index: 1;
    }

	#flow_ameba_2{
		position: absolute;
		z-index: 2;
		height: auto;
		width: 20vw;
		right: 80%;
		top: -140px;
	}
	
	#flow_ameba_2 img{
		position: absolute;
		display: block;
		max-width: none;
		width: 100%;
		height: auto;
		right: 0;
		
		z-index: 1;
	}


	#flow_ameba_3{
		position: absolute;
		z-index: 3;
		height: auto;
		width: 25vw;
		left: 65%;
		top: -200px;
	}

	#flow_ameba_3 img{
		position: absolute;
		display: block;
		max-width: none;
		width: 100%;
		height: auto;
		right: 0;
		
		z-index: 1;
	}
	

}


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

    #flow_ameba{
        position: absolute;
        z-index: 1;
        height: 120px;
        width: 180px;
        right: -80px;
        bottom: -60px;
    }

    #flow_ameba img{
        position: absolute;
        display: block;
        max-width: none;
        width: 180px;
        height: auto;
        right: 0;
        
        z-index: 1;
    }


	#flow_ameba_2{
		position: absolute;
		z-index: 2;
		height: auto;
		width: 20vw;
		right: 80%;
		top: -100px;
	}
	
	#flow_ameba_3{
		position: absolute;
		z-index: 3;
		height: auto;
		width: 25vw;
		left: 65%;
		top: -150px;
	}

}


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

    #flow_ameba{
        display: none;
    }

    #flow_ameba img{
        position: absolute;
        display: block;
        max-width: none;
        width: 100%;
        height: auto;
        right: 0;
        
        z-index: 1;
    }

	#flow_ameba_2{
		position: absolute;
		z-index: 2;
		height: auto;
		width: 20vw;
		right: 80%;
		top: -15vw;
	}

	#flow_ameba_3{
		position: absolute;
		z-index: 3;
		height: auto;
		width: 35vw;
		left: 65%;
		top: -35vw;
	}

}



#flowarea article .flow_t{
    text-align: center;
}

#flowarea article .flow_t h1{
    position: relative;
    display: inline-block;
}

#flowarea article .flow_t h1 strong{
    display: inline-block;
    padding: 20px 0px 10px; 
    line-height: 1;
    font-size: 60px;
    font-weight: 900;
}

#flowarea article .flow_t h1 small{
	display: block;
	padding: 0px 0px 20px; 
	text-align: center;
	line-height: 1;
	font-size: 30px;
	font-weight: 900;
}

#flowarea article .flow_t h1 i{
    display: block;
    width: 100%;
    height: 3px;
    background-size: cover;
    background-position: center center;
}

#flowarea article .flow_t h1 i:nth-of-type(1){
    background-image: url(../img/bar_ch.svg);
}

#flowarea article .flow_t h1 i:nth-of-type(2){
    background-image: url(../img/bar_cf.svg);
}

#flowarea article p{
    text-align: center;
    padding: 45px 0px 55px;
}

#flowarea article figure.flowimages{
    position: relative;
    overflow: hidden;
    background-color: var(--lightgray);
    border-radius: 15px;
    box-shadow: inset 5px 5px 5px rgba(0,0,0,.3);
    /* margin-top: 100px; */
}

#flowarea article figure div{
    position: absolute;
    height: 30px;
}

#flowarea article figure div#btf_live{
    width: 11%;
    z-index: 20;
    left: 4%;
    top: 65%
}

#flowarea article figure div#btf_1day{
    width: 18%;
    z-index: 21;
    left: 24.2%;
    top: 30%
}

#flowarea article figure div#btf_3days{
    width: 18%;
    z-index: 22;
    left: 24.2%;
    top: 77%;
}

#flowarea article figure div a{
    transition: all 500ms 0s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-color: var(--black);
    color: var(--white);
    font-weight: 600;
    width: 100%;
    height: 100%;
    line-height: 1;

    border-radius: 15px;
}

.pc #flowarea article figure div a:hover{
	background-color: var(--white);
    color: var(--black);
}

@media screen and (max-width: 1500px) {
    #flowarea article{
        border-radius: 40px;
        padding: 7.5vw 0px 9vw;
    }

/* 
    #flowarea article figure div{
        height: 1.86666666666666vw;
    }

    #flowarea article figure div a{
        font-size: 1.2vw;
        border-radius: 0.93333333333333vw;
    } */
}


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

    #flowarea article{
        border-radius: 40px;
    }

    #flowarea article .flow_t h1 strong{
        font-size: 8.5vw;
        padding: 2.5vw 0;
    }

    #flowarea article figure.flowimages span{
        position: relative;
        display: block;
        overflow-x: scroll;
        padding-bottom: 20px;
    }

    #flowarea article figure.flowimages span img{
        display: block;
        width: 900px;
        max-width: 900px;
    }


    #flowarea article figure div{
        height: 24px;
    }


    #flowarea article figure div#btf_live{
        width: 96px;
        z-index: 20;
        left: 38px;
        top: 225px
    }

    #flowarea article figure div#btf_1day{
        width: 160px;
        z-index: 21;
        left: 218px;
        top: 105px;
    }

    #flowarea article figure div#btf_3days{
        width: 160px;
        z-index: 22;
        left: 218px;
        top: 263px;
    }

    #flowarea article figure div a{
        font-size: 16px;
        border-radius: 12px;
    }

}


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

    #flowarea article p{
        /* text-align:justify;
        text-justify:distribute; */
        padding: 6vw 0px 7vw;
        line-height: 1.4;
    }

	#flowarea article .flow_t h1 small{
		font-size: 4vw;
		padding: 0px 0px 2.6vw; 
	}

}


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

	#flowarea article .flow_t h1{
		width: 100%;
	}

	#flowarea article .flow_t h1 strong{
        font-size: 10vw;
        padding: 4vw 0;
    }

	#flowarea article .flow_t h1 small{
		font-size: 5vw;
		padding: 0px 0px 4vw; 
	}

}






































/* introarea */

#introarea{
    position: relative;
    padding: 200px 0px 250px;
	padding: 200px 0px 150px;
}


#introarea_ameba{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: calc(50% + 800px) ;
    right: calc(50% - 800px) ;
    top: 50px;
}

#introarea_ameba img{
    position: absolute;
    display: block;
    max-width: none;
    width: 2600px;
    height: auto;
    margin: 0 0 0 auto ;
    right: 0;
    
    z-index: 1;
}





#introarea #bt_whoareyou{
	padding: 70px 0px 100px;
}

#introarea #bt_whoareyou a{
    position: relative;
	aspect-ratio:13/4;
    width: 100%;
    /* height: 400px; */
    border-radius: 30px;
}

@supports not (aspect-ratio: 13/4) {
	#introarea #bt_whoareyou a{
		height: 370px;
	}
}

#introarea #bt_whoareyou a div#bt_whoareyou_inner{
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	box-shadow: 0 0 10px 2px #777;
}

#introarea #bt_whoareyou a div#bt_whoareyou_inner div{
	position: relative;
	z-index: 10;
	padding-top: 40px;

}

#introarea #bt_whoareyou a div#bt_whoareyou_inner article{
	transition: all 500ms 0s ease;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/feature/main_1.jpg);
    background-size: cover;
    background-position: center top;
	z-index: 1;
}

.pc #introarea #bt_whoareyou a:hover div#bt_whoareyou_inner article{
	transform: scale(1.1);
}

#introarea #bt_whoareyou a div aside{
    width: 200px;
    margin: 0 auto;
}

#introarea #bt_whoareyou a div h2{
    color: var(--white);
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
	text-align: center;
    padding: 20px 0px;
}

#introarea .bt_more{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
	z-index: 20;
	bottom: 30px;
}

#introarea .bt_more span{
    display: block;
}

#introarea .bt_more span strong{
    display: block;
    text-align: center;
    font-size: 20px;
}

#introarea .bt_more span i{
    position: relative;
    display: block;
    width: 10px;
    height: 16px;
    margin: 0 auto;
}

#introarea .bt_more span i::before,
#introarea .bt_more span i::after{
    content: "";
    position: absolute;
    display: block;
    width: 12px;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background-color: var(--drakblue);
    transform-origin: center right;
}

#introarea .bt_more span i::before{
    transform: translateY(0px) rotate(45deg);
}

#introarea .bt_more span i::after{
    transform: translateY(-1px) rotate(-45deg) ;
}

#introarea #bt_whoareyou a .bt_more{
    color: var(--black);
    background-color: var(--white);
    margin: 0 auto;
}

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

	#introarea #bt_whoareyou{
		padding: 5.5vw 0px 8vw;
		padding: 5.5vw 0px 8vw;
	}

	@supports not (aspect-ratio: 13/4) {
		#introarea #bt_whoareyou a{
			height: 28.461538vw;
		}
	}
	

	#introarea #bt_whoareyou a div#bt_whoareyou_inner{
		border-radius: 2.307692vw;
	}

	#introarea #bt_whoareyou a div#bt_whoareyou_inner div{
		padding-top: 3vw;
	}
	

	#introarea #bt_whoareyou a div aside{
		width: 15.4vw;
	}

	#introarea #bt_whoareyou a div h2{
		font-size: 7.692308vw;
		padding: 1.54vw 0px;
	}
	
	#introarea .bt_more{
		width: 7.5vw;
		height: 7.5vw;
		bottom: 2.3vw;
	}

	#introarea .bt_more span strong{
		font-size: 1.5vw;
	}

	#introarea .bt_more span i::before,
	#introarea .bt_more span i::after{
		content: "";
		position: absolute;
		display: block;
		width: 0.923077vw;
	}


}

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

    /* #introarea #bt_whoareyou a div aside{
        width: 150px;
    }

    #introarea #bt_whoareyou a div h2{
        font-size: 9.5vw;
        padding: 20px 0px 30px;
    } */

}

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

    #introarea{
        padding: 25vw 0px 30vw;
		padding: 25vw 0px 25vw;
    }

	#introarea #bt_whoareyou a{
		aspect-ratio: auto;
		height: 250px;
	}

	#introarea #bt_whoareyou a div#bt_whoareyou_inner{
		box-shadow: 0 0 5px 1px #777;
	}
	

	#introarea #bt_whoareyou a div#bt_whoareyou_inner div{
		padding-top: 40px;
	}

    #introarea #bt_whoareyou a div aside{
        width: 160px;
    }

	#introarea #bt_whoareyou a div h2{
		font-size: 48px;
		padding: 10px 0px 15px;
	}


    #introarea .bt_more{
        width: 60px;
        height: 60px;
		line-height: 1;
		bottom: 40px;
    }

    #introarea .bt_more span i::before,
    #introarea .bt_more span i::after{
        
        width: 8px;
        height: 1px;
        
    }

	#introarea #bt_whoareyou a div div.bt_more{
		position: absolute;
		bottom: -30px;
		left: calc(50% - 30px);
	}

	#introarea .bt_more span strong{
		font-size: 13px;
		padding: 5px 0px;
	}


}


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

	#introarea #bt_whoareyou a div aside{
        width: 120px;
    }

	#introarea #bt_whoareyou a div h2{
		font-size: 10vw;
		padding: 10px 0px;
	}

	
}



/* solutionare */

#solutionarea h3{
    font-size: 40px;
    height: 35px;
    font-weight: 600;
    margin-bottom: 30px;
}

#solutionarea h3 span{
    width:300px;
    text-align: center;
    line-height: 1;
    margin-top: -15px;
}

#solutionarea h3 i{
    width: calc(50% - 150px);
}

#solutionarea h3 i:nth-of-type(1){
    border-top: var(--blue) solid 5px;
    border-left: var(--blue) solid 5px;
    border-top-left-radius: 20px;
}

#solutionarea h3 i:nth-of-type(2){
    border-top: var(--blue) solid 5px;
    border-right: var(--blue) solid 5px;
    border-top-right-radius: 20px;
}

#solutionarea_footer{
    height: 35px;
    border: var(--blue) solid 5px;
    border-top: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}






#solutionarea #solution_slider{
    transition: all 500ms 0s ease;
    position: relative;
    width: 100%;
    height: 500px;
    opacity: 0;
}

#solutionarea.load #solution_slider{
    opacity: 1;
}

#solution_slider button{
    display: none!important;
}

.solution_mini{
    position: absolute;
    width: 170px;
    height: 170px;
}

.solution_mini .slide{
    width: 170px;
    height: 170px;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    margin: 0 ;
}

#slider_left .slick-slide,
#slider_right .slick-slide{
    width: 170px;
    margin: 0 30px;
}

.solution_mini div.mini_1{
    background-image: url(../img/solution_m1.jpg);
}

.solution_mini div.mini_2{
    background-image: url(../img/solution_m2.jpg);
}

.solution_mini div.mini_3{
    background-image: url(../img/solution_m3.jpg);
}

.solution_mini div.mini_4{
    background-image: url(../img/solution_m4.jpg);
}

.solution_mini div:nth-of-type(1){
    z-index: 10;
}

.solution_mini div:nth-of-type(2){
    z-index: 8;
}

.solution_mini div:nth-of-type(3){
    z-index: 6;
}

.solution_mini div:nth-of-type(4){
    z-index: 4;
}

.solution_slide_left{
    top: 100px;
    left: 35px;
}

.solution_slide_right{
    top: 100px;
    right: 35px;
}

.solution_slide_center{
    position: absolute;
    width: calc(100% - 490px);
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}



.solution_slide_center div.slide{
    width: 100%;
}

.solution_slide_center .solution_slide_center_inner .slick-slide{
    padding: 30px 0px;
    margin: 0 30px;
}

.solution_slide_center article{
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 10px 2px #777;
    cursor: pointer;
}

.solution_slide_center div:nth-of-type(1){
    z-index: 10;
}

.solution_slide_center div:nth-of-type(2){
    z-index: 8;
}

.solution_slide_center div:nth-of-type(3){
    z-index: 6;
}

.solution_slide_center div:nth-of-type(4){
    z-index: 4;
}

.solution_slide_center div article figure{
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center center;
}

.solution_slide_center div.main_1 article figure{
    background-image: url(../img/solution_m1.jpg);
}

.solution_slide_center div.main_2 article figure{
    background-image: url(../img/solution_m2.jpg);
}

.solution_slide_center div.main_3 article figure{
    background-image: url(../img/solution_m3.jpg);
}

.solution_slide_center div.main_4 article figure{
    background-image: url(../img/solution_m4.jpg);
}


.solution_slide_center div article figcaption{
    padding: 25px 50px 25px 25px;
    line-height: 1.4;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--white);
}






#solutionarea .slide:nth-of-type(n+2){
    display: none;
}


#solutionarea .slick-initialized .slide:nth-of-type(n+2){
    display: block;
}


#solution_slider .bt_more span i::before,
#solution_slider .bt_more span i::after{
    background-color: var(--white);
}

#solution_slider .bt_more{
    position: absolute;
    z-index: 20;
    color: var(--white);
    background-color: var(--blue);
    bottom: -20px;
    right: -20px;
    cursor: pointer;
}



.slide_arrow{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: var(--blue) solid 1px;
    background-color: var(--white);
}


.arrow_left{
    left: 220px;
    top: 160px;
}

.arrow_right{
    right: 220px;
    top: 160px;
}

.slide_arrow::before,
.slide_arrow::after{
    content: "";
    position: absolute;
    display: block;
    width: 10px;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--blue);
    cursor: pointer;
}

.arrow_left.slide_arrow::before{
    transform-origin: center  left;
    left: 40%;
    transform: translateY(0px) rotate(-45deg);
}

.arrow_left.slide_arrow::after{
    transform-origin: center  left;
    left: 40%;
    transform: translateY(-1px) rotate(45deg) ;
}


.arrow_right.slide_arrow::before{
    transform-origin: center right;
    right: 40%;
    transform: translateY(0px) rotate(45deg);
}

.arrow_right.slide_arrow::after{
    transform-origin: center right;
    right: 40%;
    transform: translateY(-1px) rotate(-45deg) ;
}


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

	#solution_slider .bt_more{
		bottom: -1.538462vw;
		right: -1.538462vw;
	}

}


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

    #solutionarea h3{
        font-size: 36px;
        height: 30px;
        font-weight: 600;
        margin-bottom: 0px;
    }

    #solutionarea h3 span{
        width:260px;
        text-align: center;
        line-height: 1;
    }
    
    #solutionarea h3 i{
        width: calc(50% - 130px);
    }
    

    .solution_mini{
        position: absolute;
        width: 120px;
        height: 120px;
    }

    .solution_mini .slide{
        width: 120px;
        height: 120px;
        border-radius: 20px;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        margin: 0 ;
    }
    
    #slider_left .slick-slide,
    #slider_right .slick-slide{
        width: 120px;
        margin: 0 30px;
    }

    .solution_slide_left{
        top: 120px;
        left: 0px;
    }
    
    .solution_slide_right{
        top: 120px;
        right: 0px;
    }

    .solution_slide_center{
        position: absolute;
        width: calc(100% - 260px);
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .arrow_left{
        left: 140px;
        top: 160px;
    }
    
    .arrow_right{
        right: 140px;
        top: 160px;
    }

	#solution_slider .bt_more{
		bottom: -5px;
		right: -5px;
	}

}

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

    #solutionarea h3{
        font-size: 30px;
        height: 30px;
    }

    #solutionarea h3 i{
        display: none;
    }

    #solutionarea h3 span{
        width:100%;
        text-align: center;
        line-height: 1;
        margin-top: -10px;
    }

    #solutionarea_footer{
        display: none;
    }

    .solution_slide_left,
    .solution_slide_right{
        display: none;
    }

    .arrow_left{
        left: -20px;
        top: 160px;
    }
    
    .arrow_right{
        right: -20px;
        top: 160px;
    }

    .solution_slide_center{
        position: absolute;
        width: calc(100% + 60px);
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
    }

    #solutionarea h3 i:nth-of-type(1){
        border-top: var(--blue) solid 3px;
        border-left: var(--blue) solid 3px;
        border-top-left-radius: 10px;
    }
    
    #solutionarea h3 i:nth-of-type(2){
        border-top: var(--blue) solid 3px;
        border-right: var(--blue) solid 3px;
        border-top-right-radius: 10px;
    }

    .solution_slide_center div article figcaption {
        padding: 25px 25px 50px 25px;
    }

    

    #solution_slider .bt_more{
        position: absolute;
        z-index: 20;
        color: var(--white);
        background-color: var(--blue);
        bottom: 10px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
    }
}

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

    #solutionarea h3{
        font-size: 8vw;
        height: 20px;
    }

}


/* solutionarea */

















/* programarea */

#programarea{
    position: relative;
}


#program_ameba{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 350px;
    right: calc(50% + 550px) ;
    top: 720px;
}

#program_ameba img{
    position: absolute;
    display: block;
    max-width: none;
    width: 350px;
    height: auto;
    right: 0;
    
    z-index: 1;
}


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


    #program_ameba{
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 20%;
        right: 80%;
        top: 680px;
    }

    #program_ameba img{
        width: 300px;
    }

}


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

    #program_ameba{
        top: 600px;
    }

}

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

    
    #program_ameba{
        top: 0vw;
    }


}

@media screen and (max-width: 480px) {
	#program_ameba{
        display: none;
    }
}




#programarea ul li{
    color: var(--white);
}

.program_intern li{
    transition: all 500ms 0s ease;
    position: relative;
    width: 48%;
    margin-bottom: 4%;
    cursor: pointer;
}

.program_intern li .bg_inner{
    border-radius: 20px;
    display: block;
    position: relative;
    overflow: clip;
    width: 100%;
    height: 100%;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

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

	.pc .program_intern li:hover{
		transform: scale(1.04);
	}
	
}

/* .program_intern li::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center top;
    opacity: .1;
    z-index: 1;
} */

/* .program_intern li.bg_3days::before{
    background-image: url(../img/program_bg_3.svg);
}

.program_intern li.bg_1day::before{
    background-image: url(../img/program_bg_1.svg);
} */

.program_intern li .program_intern_bg{
    position: absolute;
    z-index: 1;
}

.program_intern li #ameba_anime_1day{
    top: -20px;
}

.program_intern li #ameba_anime_1day svg{
    width: 250%;
    opacity: .2;
}

.program_intern li #ameba_anime_3days{
    top: 20px;
    left: 0%;
}

.program_intern li #ameba_anime_3days svg{
    transform: rotate(190deg) translateX(40%);;
    width: 320%;
    opacity: .5;
}


.program_intern li article{
    position: relative;
    z-index: 10;
	height: 100%;
    padding: 40px 40px 60px;
}

#programarea ul li article small{
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

#programarea ul li article h2{
    position: relative;
	/* padding-top: 15px; */
	padding-bottom: 10px;
    font-weight: 600;
}

#programarea ul.program_live li article h2{
    padding-top: 15px;
}

#programarea ul li article h2 strong{
	display: block;
    font-size: 60px;
    line-height: 1;
	padding-bottom: 10px;
}

#programarea ul li article h2 small{
    font-size: 24px;
}

#programarea ul li article h2 aside{
    width: 100%;
    min-height: 50px;
    font-size: 16px;
    line-height: 1;
}

.program_intern li article h2 aside span{
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    height: 100%;
    text-align: center;
    margin-bottom: 5px;
    margin-right: 5px;
}

#programarea ul li article .program_intern_pointbox{
    padding: 20px 0px;
}

#programarea ul li article .program_intern_pointbox div{
    margin-bottom: 10px;
    line-height: 1.2;
}

#programarea ul li article .program_intern_pointbox figure{
    width: 30px;
}


#programarea ul li article .program_intern_pointbox span{
    display: flex;
    width: calc(100% - 40px) ;
    font-weight: 700;
    font-size: 20px;
    align-items: center;
    padding-bottom: 5px;
}

#programarea ul li article .program_intern_pointbox figure svg{
    fill: var(--white);
    width: 100%;
}


.program_intern li article p{
    padding: 30px 0px 20px;
    line-height: 1.8;
    font-size: 14px;
}

.internship_cont .overviewbox p{
    text-align: center;
}

.program_intern li article p strong{
    display: inline-block;
    font-size: 120%;
    font-weight: 700;
    color: var(--black);
    background-color: var(--white);
    padding: 5px 15px;
    line-height: 1;

}

.program_intern li article p span{
    display: block;
    line-height: 1.8;
	letter-spacing: .5px;
    padding-top: 10px;
}


.program_3days figure.heading_bomb{
    position: absolute;
    width: 220px;
    height: 130px;
    z-index: 20;
    right: -30px;
    top: -30px;
}


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

    .program_3days figure.heading_bomb{
        position: absolute;
        width: 22vw;
        height: 13vw;
        z-index: 20;
        right: -5vw;;
        top: -5vw;;
    }
    

}


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

    .program_intern li article p strong{
        display: block;
        font-size: 120%;
        font-weight: 700;
        color: var(--1day);
        border: var(--1day) solid 1px;
        padding: 5px 15px;
        line-height: 1;
        text-align: center;
    }

    .program_3days figure.heading_bomb{
        position: absolute;
        width: 220px;
        height: 130px;
        z-index: 20;
        right: -30px;
        top: -15px;
    }
    
    
}


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

    .program_3days figure.heading_bomb{
        position: absolute;
        width: 40vw;
        height: auto;
        z-index: 20;
        right: -5.4vw;
        top: -2.7vw;
    }
}

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

    .program_3days figure.heading_bomb{
        width: 45vw;
        right: -2.7vw;
    }

}


.program_intern li article dl{
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 35px;
    font-weight: 600;
    border-top: #FFF solid 1px;
    border-bottom: #FFF solid 1px;
}

.program_intern li article dl dt{
    width: 90px;
    color: var(--white);
    line-height: 1.5;
}

.program_intern li article dl dt span{
    width: 100%;
    padding: 5px 12px;
    background-color: var(--black);
}

.program_intern li article dl dt span i{
    display: inline-block;
    width: 1em;
}

.program_intern li article dl dd{
    width: calc(100% - 105px);
    line-height: 1.5;
    padding: 5px 0px;
}

.program_intern li article dl dt:nth-of-type(n+2),
.program_intern li article dl dd:nth-of-type(n+2){
    margin-top: 15px;
}

#programarea div.bt_more{
    position: absolute;
    width: 120px;
    height: 40px;
    background-color: var(--white);
    margin: 0 auto;
    border-radius: 20px;
    text-align: center;
    color: var(--black);
    font-size: 17px;
    padding-top: 10px;
    padding-left: 10px;
    line-height: 1;
	bottom: 30px;
	left: calc(50% - 60px)
}

#programarea div.bt_more i{
    position: absolute;
    display: block;
    width: 12px;
    height: 18px;

    top: 48%;
    left: 17px;
    transform: translateY(-50%);
}

#programarea div.bt_more i::before,
#programarea div.bt_more i::after{
    content: "";
    position: absolute;
    display: block;
    width: 10px;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background-color: var(--drakblue);
    transform-origin: center right;
}

#programarea div.bt_more i::before{
    transform: translateY(0px) rotate(45deg);
}

#programarea div.bt_more i::after{
    transform: translateY(-1px) rotate(-45deg) ;
}


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



    .program_intern li{
        width: 48%;
        margin-bottom: 4vw;
    }

    .program_intern li article{
        padding: 7% 7% calc(7% + 40px);
    }
    

    #programarea ul li article h2 strong{
        font-size: 50px;
        line-height: 1;
    }

    #programarea ul.program_live li article h2 strong{
        font-size: 60px;
    }

    #programarea ul li article h2 small{
        font-size: 20px;
    }

    #programarea ul li article .program_intern_pointbox{
        padding: 15px 0px;
    }

    #programarea ul li article .program_intern_pointbox figure{
        width: 25px;
    }
    
    #programarea ul li article .program_intern_pointbox span{
        width: calc(100% - 35px) ;
        font-size: 18px;
    }
    

    .program_intern li article p{
        padding: 20px 0px 25px;
    }

	.program_intern li article div{
		bottom: 5%;
	}
    
}



@media screen and (max-width: 1000px) {
    #programarea ul li article h2 aside{
        width: 170px;
        height: 30px;
        font-size: 16px;
    }

    .program_intern li article h2 aside span{
        width: 80px;
        border-radius: 5px;
        height: 100%;
        text-align: center;
    }
}

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

    .program_intern li article dl dt{
        width: 82px;
        font-size: 14px;
    }

    .program_intern li article dl dd{
        width: calc(100% - 100px);
        line-height: 1.5;
        padding: 5px 0px;
    }


    #programarea ul.program_live li article h2 strong{
        font-size: 5.5vw;
    }

    #programarea ul.program_live li article h2 strong{
		display: inline-block;
		font-size: 7.2vw;
		line-height: 1;
		padding-bottom: 5px;
	}

    #programarea ul li article h2 small{
        font-size: 2.2vw;
    }
	

    #programarea ul li article h2 aside{
        /* width: 80px; */
        width: 170px;
        height: auto;
        bottom: 0;
        font-size: 15px;
    }

    #programarea ul li article h2 aside.flex{
        /* display: block; */
    }

    .program_intern li article h2 aside span{
        width: 80px;
        border-radius: 5px;
        height: 20px;
        text-align: center;
        margin-top: 5px;
    }

    #programarea ul li article .program_intern_pointbox{
        padding: 1.5vw 0px;
    }

    #programarea ul li article .program_intern_pointbox figure{
        width: 2.8vw;
    }

    #programarea ul li article .program_intern_pointbox span{
        width: calc(100% - 3.5vw) ;
        font-size: 2vw;
    }

}



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

    .program_intern li{
        width: 100%;
        margin-bottom: 4vw;
		filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
    }
	

    #programarea ul li article small{
        font-size: 16px;
    }




    #programarea ul li article h2 strong,
    #programarea ul.program_live li article h2 strong{
        display: block;
        font-size: 60px;
        line-height: 1;
        padding-bottom: 10px;
    }

    #programarea ul li article h2 small{
        font-size: 24px;
    }

    #programarea ul li article .program_intern_pointbox{
        padding: 20px 0px;
    }

    #programarea ul li article .program_intern_pointbox div{
        margin-bottom: 10px;
        line-height: 1.2;
    }

    #programarea ul li article .program_intern_pointbox figure{
        width: 30px;
    }


    #programarea ul li article .program_intern_pointbox span{
        display: flex;
        width: calc(100% - 40px) ;
        font-weight: 700;
        font-size: 20px;
        align-items: center;
        padding-bottom: 5px;
    }

}


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


	#programarea .wrap{
		width: 100%;
	}


    #programarea ul li{
		border-radius: 0;
		margin-bottom: 0;
    }

    .program_intern li .bg_inner{
        border-radius: 0px;
    }
    
	.program_intern li article{
		height: auto;
        padding: 9% 9% calc(7% + 40px);
    }

    

    #programarea ul li article h2 strong,
    #programarea ul.program_live li article h2 strong{
        display: block;
        font-size: 12vw;
        line-height: 1;
        padding-bottom: 2vw;
    }

    #programarea ul li article h2 small{
        font-size: 5vw;
    }

    #programarea ul li article .program_intern_pointbox{
        padding: 4vw 0px;
    }

    #programarea ul li article .program_intern_pointbox div{
        margin-bottom: 2vw;
        line-height: 1.2;
    }

    #programarea ul li article .program_intern_pointbox figure{
        width: 6vw;
    }


    #programarea ul li article .program_intern_pointbox span{
        width: calc(100% - 8vw) ;
        font-size: 4vw;
        padding-bottom: 1vw;
    }











    #programarea ul li article h2 aside{
        /* width: 75px; */
        width: 170px;
        border-radius: 5px;
        font-size: 14px;
        padding-bottom: 2px;
    }

	.program_intern li article h2 aside span {
		/* width: 100%; */
        width: 80px;
	}

        
    .program_intern li article dl dt{
        width: 77px;
        font-size: 13px;
    }

    .program_intern li article dl dd{
        width: calc(100% - 90px);
        line-height: 1.5;
        padding: 5px 0px;
    }


	
    
    #programarea div.bt_more i{
        width: 8px;
        height: 14px;
    }
    
    #programarea div.bt_more i::before,
    #programarea div.bt_more i::after{
        width: 10px;
    }
	

}


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

    #programarea ul li article small{
        font-size: 4.5vw;
    }

    /* #programarea ul li article h2 aside{
        width: 70px;
        border-radius: 5px;
        font-size: 12px;
        padding-bottom: 2px;
    }

    .program_intern li article h2 aside span{
        height: auto;
        padding: 3px;
    } */

}




.program_live{
    text-align: center;
}

.program_live article{
    padding: 7%;
    padding-bottom: calc(8% + 200px) ;
}

.program_live li{
    padding-bottom: 0px;
}

.program_live li .bg_inner{
    border-radius:20px;
    display: block;
    position: relative;
    overflow:clip;
    width: 100%;
    height: 100%;
}

.program_live .livetxt{
    max-width: 1000px;
    margin: 0 auto;

    padding: 20px 0px 30px;
    line-height: 1.8;
    font-size: 16px;
	font-weight: 500;
    text-align: center;
}

.program_live .livetxt_2{

    display: inline-block;
    margin: 0 auto;

    padding: 20px 30px 30px;
    line-height: 1.8;
    font-size: 16px;
	font-weight: 500;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 15px;
    margin-bottom: 30px;
}

.program_live .livetxt_2 a{
    transition: all 500ms 0s ease;
    display: flex;
    width: 300px;
    height: 80px;
    margin: 0 auto;
    background-color: #000;
    border-radius: 40px;
    color: var(--white);
    margin-top: 15px;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

.pc .program_live .livetxt_2 a:hover{
    background-color: var(--lightblue);
}

@media screen and (max-width: 540px) {
    .program_live .livetxt_2 a{
        transition: all 500ms 0s ease;
        display: flex;
        width: 80%;
        max-width: 250px;
        height: 60px;
        margin: 0 auto;
        background-color: #000;
        border-radius: 30px;
        color: var(--white);
        margin-top: 15px;
        font-size: 26px;
        font-weight: 400;
        line-height: 1;
    }
}

.program_live #liveinner{
    position: relative;
    height: 1800px;
}

.program_live .livebox{
    position: absolute;
    width: 550px;
    height: 500px;
    /* background-size: contain;
    background-position: center top;
    background-repeat: no-repeat; */
    text-align: left;
    padding-top: 4%;
}

.program_live .livebox#live_1{
    top: 0;
	left: -4%;
    /* background-image: url(../img/program_bg_l1.svg); */
}

.program_live .livebox#live_2{
    top: 14%;
    left: 50.5%;
    /* background-image: url(../img/program_bg_l2.svg); */
}

.program_live .livebox#live_3{
    top: 35%;
	left: -5%;
    /* background-image: url(../img/program_bg_l3.svg); */
}

.program_live .livebox#live_3 .bg{
    transform: rotate(180deg);
}

.program_live .livebox#live_4{
    top: 50%;
    right: -4%;
    /* background-image: url(../img/program_bg_l4.svg); */
}

.program_live .livebox#live_5{
    top: 67%;
    right: 50%;
    /* background-image: url(../img/program_bg_l5.svg); */
}

.program_live .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.program_live .bg svg{
    width: 100%;
    height: 100%;
}

.program_live .livebox_inner{
    position: relative;
    width: 86%;
    max-width: 400px;
    margin: 0 auto;
    color: var(--black);
    z-index: 10;
}

.program_live .livebox_inner .live_title{
    position: relative;
}

.program_live .livebox_inner .live_title strong{
    font-size: 60px;
    font-weight: 700;
    width: 100px;
    line-height: 1;
}

.program_live .livebox_inner .live_title span{
    position: absolute;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    height: 32px;
    border-radius: 16px;
    padding: 8px 20px 0px;
    line-height: 1;
    color: var(--white);
    bottom: 5px;
    right: 0;
}

.program_live .livebox_inner h3{
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    padding: 15px 0px;
    letter-spacing: 0px;
}


.program_live .livebox_inner p{
    font-size: 14px;
    padding-top: 15px;
    line-height: 1.6;
	font-weight: 500;
}



.program_live .livebox_inner .imagearea{
    position: relative;
}

.program_live .livebox_inner .imagearea figure{
    position: relative;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}

.program_live .livebox_inner .bt_movie{
	cursor: pointer;
}

.program_live .livebox_inner .bt_movie figure img{
    transition: all 500ms 0s ease;
    cursor: pointer;
}

.pc .program_live .livebox_inner .bt_movie:hover figure img{
    transform: scale(1.1);
}

.program_live .livebox_inner .imagearea div{
    position: absolute;

    width: 50px;
    z-index: 10;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
}

.program_live .livebox_inner .imagearea span{
    position: absolute;
    width: 100%;
    z-index: 10;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    text-align: center;

    color: var(--white);
}

.program_live article .livebox_inner .imagearea span strong{
    font-size: 22px;
    font-weight: 600;
    display: block;
    text-align: center;
    line-height: 1.6;
}

#programarea .program_live article .livebox_inner .imagearea span small{
    display: inline-block;
    background-color: #ed7c00;
    line-height: 1;
    padding: 5px 15px 7px;
    font-size: 14px;
}

.program_live .livebox_inner .imagearea::before{
	transition: all 500ms 0s ease;

	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .3);
	z-index: 5;
}

.pc .program_live .livebox_inner .bt_movie:not(.comingsoon):hover::before{
    background-color: rgba(0, 0, 0, .1);
}

.program_live .livebox_inner .imagearea.comingsoon::before{
	background-color: rgba(0, 0, 0, .6);
}


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

    .program_live .livebox{
        position: absolute;
        width: 52.380952%;
    }
    
    .program_live #liveinner{
        position: relative;
        height: 1600px;
    }
}



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

    .program_live .livebox_inner h3{
        font-size: 2.25vw;
    }


}


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

    .program_live #liveinner{
        position: relative;
        height: auto;
    }

    .program_live .livebox{
        position: relative;
        width: 550px;
        height: auto;
        min-height: 500px;
        text-align: left;
        padding-top: 6%;
        background-size: contain;
    }

   .program_live .livetxt{
	letter-spacing: .5px;
   }

    .program_live .livebox#live_1,
    .program_live .livebox#live_3,
    .program_live .livebox#live_5{
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        margin: 0 auto 0 0;
    }

    .program_live .livebox#live_2,
    .program_live .livebox#live_4{
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        margin: 0 0 0 auto;
    }

    .program_live .livebox#live_2 .livebox_inner{
        padding-top: 20px;
    }

    .program_live .livebox#live_3 .livebox_inner{
        padding-top: 20px;
    }

	.program_live .livebox#live_1,
	.program_live .livebox#live_2,
    .program_live .livebox#live_3{
        margin-bottom: 30px;
    }

    .program_live .livebox#live_4{
        margin-bottom: 40px;
    }

    .program_live .livebox#live_4 .livebox_inner{
        padding-top: 20px;
        
    }


    .program_live .livebox_inner h3{
        font-size: 26px;
    }
    
}


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

    .program_live{
        text-align:left;
    }
    
    .program_live li{
        padding-bottom: 0px;
    }
    
    .program_live .livetxt{
        max-width: 600px;
        margin: 0 auto;
        
        padding: 20px 0px 30px;
        line-height: 1.8;
        font-size: 14px;
        text-align:justify;
        text-justify:distribute;
		
    }

    .program_live .livetxt_2{
        display: block;
        width: 100%;
        margin: 0 auto;
    
        padding: 20px 10px 30px;
        line-height: 1.8;
        font-size: 14px;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 12px;
        margin-bottom: 30px;
    }


    .program_live .livebox{
        position: relative;
        width: 100%;
        height: auto;
        min-height: auto;
        text-align: left;
        padding-top: 6%;
        padding-bottom: 50px;
    }

    .program_live .livebox_inner{
        width: 90%;
        max-width: 360px;
    }

    .program_live .livebox_inner .live_title strong{
        font-size: 50px;
    }

    .program_live .livebox_inner h3{
        font-size: 24px;
        padding: 15px 0px;
    }

    .program_live .livebox#live_3 .livebox_inner{
        padding-top: 10px;
    }

	.program_live .livebox#live_1,
	.program_live .livebox#live_2,
    .program_live .livebox#live_3,
    .program_live .livebox#live_4{
        margin-bottom: 20px;
    }

}

@media screen and (max-width: 540px) {
    .program_live .livebox_inner h3{
        font-size: 4.4vw;
    }
}

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

    .program_live li .bg_inner{
        border-radius:0px;
    }
  

    #programarea ul.program_live li article{
        padding: 9% 0px calc(9% + 250px) ;
    }

    #programarea ul.program_live li article #liveheader{
        padding: 0 9%;
    }

    #programarea ul.program_live li article #liveinner{
        padding: 0 4.5%;
    }


    .program_live .livebox_inner h3{
        font-size: 5.5vw;
    }
    
    

    .program_live .livebox_inner .live_title span{
        position: absolute;
        font-size: 14px;
        font-weight: 500;
        display: inline-block;
        height: 28px;
        border-radius: 14px;
        padding: 6px 15px 0px;
        bottom: 5px;
        right: 0;
    }
    

	.program_live .bg img{
		height: 75%;
	}

}


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

    .program_live .livebox_inner .live_title strong{
        font-size: 45px;
    }

    .program_live .livebox_inner .live_title span{
        position: absolute;
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
        height: 24px;
        border-radius: 12px;
        padding: 6px 12px 0px;
        bottom: 5px;
        right: 0;
    }
}


#bt_exprore{
    transition: all 500ms 0s ease;
    position: relative;
    z-index: 50;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--drakblue);
    color: var(--white);
    padding: 50px 50px 100px;
    border-radius: 20px;
    margin-top: -150px;
    cursor: pointer;
}

#bt_exprore h4{
    font-size: 58px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

#bt_exprore p{
    text-align: center;
    padding: 20px 0px 0px;
}

.pc #bt_exprore:hover{
    transform: scale(1.05);
}

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

    #bt_exprore{
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
        background-color: var(--drakblue);
        color: var(--white);
        padding: 30px 30px 100px;
        border-radius: 20px;
        margin-top: -200px;
        cursor: pointer;
    }

    #bt_exprore h4{
        font-size: 8vw;
    }
    
}

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

    #bt_exprore{
        padding: 20px 20px 100px;
        margin-top: -150px;
    }

    #bt_exprore h4{
        font-size: 36px;
    }

    #bt_exprore p{
        text-align:justify;
        text-justify:distribute;
    }
    
}

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

    #bt_exprore h4{
        font-size: 10vw;
    }

}


/* programarea */



/* howtoarea */

#howtoarea{
    position: relative;
    padding: 200px 0px 0px;
}


#howto_ameba{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: calc(50% - 260px) ;
    left: calc(50% + 260px) ;
    top: -630px;
}

#howto_ameba img{
    position: absolute;
    display: block;
    max-width: none;
    width: 1270px;
    height: auto;
    left: 0;
    
    z-index: 1;
}



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


    #howto_ameba{
        position: absolute;
        z-index: 1;
        height: 100%;
        width: calc(50% - 15%) ;
        left: calc(50% + 15%) ;
        top: -32vw;
    }

    #howto_ameba img{
        width: 66vw;
    }

}

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

    #howto_ameba{
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 50%;
        left: 50%;
        top: -32vw;
    }

    #howto_ameba img{
        width: 100vw;
    }


}



#howtoarea .howto_intern{
	/* width: 66%; */
	width: 100%;
}

#howtoarea .howto_live{
	width: 31%;
}

#howtoarea .howto_intern div,
#howtoarea .howto_live div{
	text-align: center;
}

#howtoarea .howto_intern ul li{
    width: 48%;
    padding: 20px 15px;
    color: var(--white);
    border-radius: 10px;
    font-size: 14px;
}


#howtoarea .howto_live{
	width: 31%;
}

#howtoarea .howto_live ul li{
    width: 100%;
    padding: 20px 15px;
    color: var(--white);
    border-radius: 10px;
    font-size: 14px;
}


#howtoarea .howtoflowbox{
    background-color: var(--white);
    border-radius: 20px;
    padding: 5.5% 4.5% 4.5%;
}


#howtoarea .howtoflowbox h2{
    color: var(--white);
    background-color: var(--drakblue);   
    font-size: 22px;
    font-weight: 500;
    height: 50px;
    border-radius: 30px;
    text-align: center;
	padding-top: 2px;
}

#howtoarea .howtoflowbox article{
    padding: 15px 0px 0px;
    text-align: center;
    font-weight: 500;
}

#howtoarea .howtoflowbox article:nth-of-type(1){
    padding-bottom: 75px;
}

#howtoarea .howtoflowbox article p{
    text-align: center;
}


#howtoarea .howtoflowbox .howto_category {
	line-height: 1.4;
}

#howtoarea .howtoflowbox h3{
    font-size: 26px;
	padding-bottom: 8px;
}

#howtoarea .howtoflowbox aside{
    display: inline-block;
    background-color: #bf0707;
    color: var(--white);
    padding: 4px 20px 7px;
    line-height: 1.2;
    border-radius: 5px;
    font-size: 17px;
    margin-bottom: 10px;
}


.howtoflowbox ul{
    /* max-width: 1080px; */
    /* margin: 0 auto; */
    padding: 25px 0px 0px;
	height: 100%;
}



.howtoflowbox ul .bg_live{
    margin: 0 auto;
	height: 100%;
}

#howtoarea .howtoflowbox ul li h3{
    font-size: 30px;
    line-height: 1;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: #FFF solid 2px;
}

.howtoflowbox ul li p{
    padding: 15px 0px;
    line-height: 1.6;
}

.howtoflowbox ul li div.arrow {
    position: relative;
    width: 100%;
    height: 25px;
}

.howtoflowbox ul li div.arrow span{
    position: absolute;
    display: block;
    width: 30px;
    height: 18px;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    background-color: #FFF;

    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.howtoflowbox ul li div.arrow::before,
.howtoflowbox ul li div.arrow::after{
    content: "";
    position: absolute;
    display: block;
    height: 1px;
    width: calc(50% - 40px) ;
    border-bottom: #FFF dotted 1px;
    top: 50%;
    transform: translateY(-50%);
   
}

.howtoflowbox ul li div.arrow::before{
    left: 0;
}

.howtoflowbox ul li div.arrow::after{
    right: 0;
}

.howbr{
    display: none;
}

#bt_howto_entry{
	padding: 50px 0px;
	text-align: center;
	width: 100%;
}

#bt_howto_entry p{
	padding-bottom: 10px;
}

#bt_howto_entry a{
	transition: all 500ms 0s ease;
	margin: 0 auto;
	background-color: var(--black);
	width: 100%;
	max-width: 500px;
	height: 80px;
	color: var(--white);
	border-radius: 40px;
	font-size: 34px;
	line-height: 1;
	font-weight: 700;
}

.pc #bt_howto_entry a:hover{
    background-color: var(--lightblue);
}


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

    .howtoflowbox ul li{
        width: 48%;
    }

    .howbr{
        display: inline-block;
    }

	#bt_howto_entry a{
		display: block;
		margin: 0 auto;
		background-color: var(--black);
		width: 100%;
		max-width: 400px;
		height: 60px;
		color: var(--white);
		border-radius: 30px;
		font-size: 28px;
	}
    
}


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

	#howto_category_pc{
		display: none;
	}

	#howto_process ul.flex{
		display: block;
	}

	
	#howtoarea .howto_intern,
	#howtoarea .howto_live{
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		/* padding-bottom: 40px; */
	}
	
	#howtoarea .howto_intern div,
	#howtoarea .howto_live div{
		text-align: center;
	}
	
	#howtoarea .howto_intern ul li{
		width: 100%;
		padding: 20px 15px;
		color: var(--white);
		border-radius: 10px;
		font-size: 14px;
		margin-bottom: 20px;
	}
	

    #howtoarea .howtoflowbox h2{  
        font-size: 22px;
        height: 50px;
        border-radius: 25px;
    }

    #howtoarea .howtoflowbox article:nth-of-type(1){
        padding-bottom: 50px;
    }

    #howtoarea .howtoflowbox article h3{
        font-size: 22px;
    }
    
    #howtoarea .howtoflowbox article aside{
        font-size: 15px;
    }

	.howtoflowbox ul{
		padding: 15px 0px 0px;
	}

    .howtoflowbox ul li{
        font-size: 16px;
    }

    #howtoarea .howtoflowbox ul li h3{
        font-size: 26px;
    }

    .howtoflowbox ul li p{
        padding: 12px 0px 15px;
        line-height: 1.6;
    }

    .howtoflowbox ul li div.arrow span{
        width: 30px;
        height: 18px;
    }

    .howtoflowbox ul li div.arrow::before,
    .howtoflowbox ul li div.arrow::after{
        width: calc(50% - 40px) ;
    
    }

	

}


@media screen and (max-width: 767px) {
    
    #howtoarea{
        padding: 25vw  0px 0px;
    }


    #howtoarea .howtoflowbox article{
        padding: 15px 0px 0px;
    }

    .howtoflowbox ul{
        max-width: 1080px;
        margin: 0 auto;
        padding: 15px 0px 0px;
    }


    .howtoflowbox ul li{
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .howtoflowbox ul li.bg_3days{
        margin-bottom: 50px;
    }

    .howbr{
        display: none;
    }

	#bt_howto_entry{
		padding: 30px 0px 40px;
	}

}

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

    .howbr{
        display: inline-block;
    }


    #howtoarea .howtoflowbox h2{  
        font-size: 18px;
        height: 40px;
        border-radius: 20px;
    }

    #howtoarea .howtoflowbox article:nth-of-type(1){
        padding-bottom: 50px;
    }

    #howtoarea .howtoflowbox article h3{
		font-size: 5vw;
    }
    
    #howtoarea .howtoflowbox article aside{
        font-size: 13px;
        padding: 4px 15px 7px;
    }

    .howtoflowbox ul li{
        font-size: 15px;
    }

    #howtoarea .howtoflowbox ul li h3{
        font-size: 22px;
    }

    .howtoflowbox ul li p{
        padding: 10px 0px 12px;
        line-height: 1.6;
    }

    #bt_howto_entry{
		padding: 20px 0px 30px;
	}

}

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

    .howtoflowbox ul li{
        font-size: 4.1vw;
    }
}


/* howtoarea */

/* voicearea */

#voicearea{
    padding: 200px 0px;
}

#voicearea div.grid{
    display: flex;
    padding-top: 110px;
    opacity: 0;
}

#voicearea.load div.grid{
    opacity: 1;
}

#voicearea div.grid-item{
    position: relative;
    width: 23%;
    border: var(--black) solid 5px;
    border-radius: 20px;
    padding: 50px 2.2% 30px;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: calc(2.6% + 40px)
}

#voicearea div.grid-item figure{
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

#voicearea div.grid-item p{
	word-break:break-all;
}


#voicearea div.grid:after{
    content: '';
    display: block;
    clear: both;
}

#voicearea div.grid-sizer,
#voicearea div.gutter-sizer{
    display: none;
}

#voicearea.load div.grid-sizer {
    display: block;
    width: 23%;
}

#voicearea.load div.gutter-sizer{
    display: block;
    width: 2.6%;
}


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

    #voicearea div.grid-item,
    #voicearea.load div.grid-sizer{
        width: 31%;
    }

    #voicearea.load div.gutter-sizer{
        width: 3.5%;
    }
   
}


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

    #voicearea{
        padding: 26vw 0px;
    }

    #voicearea div.grid{
        display: flex;
        padding-top: 15vw;
    }

    #voicearea div.grid-item,
    #voicearea.load div.grid-sizer{
        width: 48%;
    }

    #voicearea div.grid-item{
        font-size: 14.5px;
        border-width: 4px;
    }

    #voicearea.load div.gutter-sizer{
        width: 4%;
    }

}


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

    #voicearea div.grid-item{
        font-size: 13px;
        letter-spacing: 0;
        padding: 40px 4% 20px;
    }

    #voicearea div.grid-item figure{
        width: 60px;
        height: 60px;
        top: -30px;
    }

   

}





/* voicearea */

/* explore */

#explorearea{
    position: relative;
    background-color: var(--blue);
    padding: 130px 0px;
}

#explore_ameba{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: calc(50% - 720px) ;
    right: calc(50% + 720px) ;
    top: -300px;
}

#explore_ameba img{
    position: absolute;
    display: block;
    max-width: none;
    width: 550px;
    height: auto;
    margin: 0 0 0 auto ;
    right: 0;
    
    z-index: 1;
}



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

    #explore_ameba{
        position: absolute;
        z-index: 1;
        height: 100%;
        width: calc(50% - 37.5%) ;
        right: calc(50% + 37.5%) ;
        top: -15.625vw;
    }

    #explore_ameba img{
        width: 30vw;
    }

}

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

    #explore_ameba{
        position: absolute;
        z-index: 1;
        height: 100%;
        width: calc(50% - 30%) ;
        right: calc(50% + 30%) ;
        top: -35vw
    }

    #explore_ameba img{
        width: 35vw;
    }


}
















#explorearea.contarea h1{
    color: var(--white);
}


#explorearea ul{
    padding-top: 30px;
}

#explorearea li{
    width: 31%;
    padding-bottom: 100px;
}

#explorearea li a{
    position: relative;
    height: 100%;
    display: block;
    color: var(--white);
    border-bottom: #FFF solid 1px;
    /* padding-bottom: 55px; */
    padding-top: 38%;
}

#explorearea li a figure{
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 1;
}

#explorearea li a figure img{
    transition: all 500ms 0s ease;
}

.pc #explorearea li a:hover figure img{
    transform: scale(1.1);
}


#explorearea li a figcaption{
    position: relative;
    padding: 15px 0px;
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    z-index: 30;
   
}
#explorearea li a .explore_inner{
    position: relative;
    height: calc(100% - 20px) ;
    position: 10;
    padding-bottom: 55px;
   
}

#explorearea li a .explore_inner p{
    position: relative;
    font-size: 14px;
    padding-bottom: 30px;
    letter-spacing: 1.8;
    z-index: 40;
}

#explorearea li a div.bt_more{
    position: absolute;
    width: 100px;
    height: 30px;
    border-radius: 15px;
    margin: 0 auto;
    background-color: var(--white);
    text-align: center;
    color: var(--black);
    font-size: 13px;
    line-height: 1;
    padding-top: 8px;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

#explorearea li a div.bt_more i{
    display: inline-block;
    width: 12px;
    height: 12px;
    fill: var(--black);
    transform: translateY(1px);
}

#explorearea li a div.bt_more span{
    padding-left: 5px;
}

#explorearea li a .explore_ameba_mini{
    position: absolute;
    max-width: 100%;
    height: 100%;
    background-color: #bf0707;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    z-index: 1;
}

#explorearea li a .explore_ameba_mini svg{
    position: absolute;
    fill: var(--white);
    width: auto;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: .1;
    z-index: 1;
}

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

    #explorearea li a figcaption{
        font-size: 1.8vw;
    }
	

}


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

    #explorearea{
        background-color: var(--blue);
        padding: 17vw 0px;
    }

	#explorearea li{
        width: 48%;
        padding-bottom: 13vw;
    }

    #explorearea li a figcaption{
        padding: 12px 0px;
        font-size: 2.7vw;
    }

    #explorearea li a .explore_inner p{
        font-size: 13px;
    }
}


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

    #explorearea li{
        width: 96%;
        max-width: 360px;
        margin: 0 auto;
    }

    #explorearea li a figcaption{
        font-size: 20px;
    }

    /*
    #explorearea li a .explore_ameba_mini{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #bf0707;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        z-index: 1;
    }


    #explorearea li a .explore_ameba_mini svg{
        position: absolute;
        fill: var(--white);
        width: 100%;
        height: auto;
        left: 50%;
        transform: translateX(-50%);
        opacity: .1;
        z-index: 1;
    }
    */

}


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

    #explorearea li a figcaption{
        font-size: 5.5vw;
    }

}



/* explore */



/* entryarea */

#entryarea{
    padding: 100px 0px 150px;
}

#entryarea a{
    position: relative;
    display: block;
    width: 90%;
    max-width: 440px;
    margin: 0 auto;
}

#entryarea a #roopanime_entry{
    position: relative;
    width: 100%;
}

#entryarea a #entry_bg{
    transition: all 500ms 0s ease;
    position: relative;
    max-width: 100%;
    height: auto;
    z-index: 1;
}

.pc #entryarea a:hover #entry_bg{
    fill: var(--lightblue);
}

#entryarea a strong{
    position: absolute;
    font-size: 60px;
    font-weight: 900;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--white);

    z-index: 10;
}


@media screen and (max-width: 767px) {
    #entryarea a strong{
        font-size: 50px;
    }

}

@media screen and (max-width: 480px) {
    #entryarea a strong{
        font-size: 40px;
    }
}

/* entryarea */















/******************************************************************/


/* oldinfo ****************************************************************/

#oldinfo{
    display: none;
    position: absolute;
}


#oldinfo.fixed{

}


/* oldinfo ****************************************************************/

#oldinfo{
	display: none;
    position: absolute;
    width: 500px;
    height: auto;
    display: none;
    left: 50%;
	cursor: pointer;
    transform: translateX(-50%);
    line-height: 1.6;
    background-color: var(--black);
    color: var(--white);
    font-weight: 700;
    z-index: 5000;
    text-align: center;
   
    border-top-left-radius: 10px; /* 左上　*/
    border-top-right-radius: 10px;
    /* border: var(--lightgray) solid 2px; */
    border-bottom: none;
}

#oldinfo span{
    display: inline-block;
    white-space: nowrap;
    padding: 15px 20px 20px;
}

#oldinfo.fixed{
    position: fixed;
    left: 50%;
}


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

    #oldinfo{
        width: 440px;
    }
}


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

    #oldinfo{
        width: auto;
        line-height: 1.3;
    }

    #oldinfo span{
        padding: 10px 10px 15px;
    }
}

@media screen and (max-width: 767px) {
    #oldinfo{
        font-size: 13px;
    }
}


@media screen and (max-width: 440px) {
    
    #oldinfo{
        left: 0%;
        transform: translateX(0%);
        border-top-left-radius: 0px; /* 左上　*/
        font-size: 12px;
    }

    #oldinfo.fixed{
        left: 0%;
    }

    #oldinfo span{
        text-align: left;
    }

}

/* bt_top ****************************************************************/


#bt_top{
	display: none;
    position: absolute;
    width: 80px;
    height: 80px;
    display: none;
    z-index: 1000;
    right: 20px;
	cursor: pointer;
}

#bt_top.fixed{
    position: fixed;
    right: 20px;
}

#shape{
    max-width: 100%;
    max-height: 100%;
    fill: #5c5c5c;
}

#bt_top div{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

body.pc .pageup aside:hover{
	background: #000;
}

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

    #bt_top{
        width: 50px;
        height: 50px;
        right: 10px;
    }

    #bt_top.fixed{
        right: 10px;
    }
    

    #bt_top div{
        width: 30px;
        height: 30px;
    }
}



/* bt_top ****************************************************************/




/* overray ****************************************************************/

#overrayarea{
    position: fixed;
    /* background-color: var(--white); */
    z-index: 2000;
    width: 100vw;
    height: 20vh;
    top: -20vh;
    left: 0;
    border-bottom-left-radius: 50% 20vh;
    border-bottom-right-radius: 50% 20vh;
    overflow: clip;
}


#overrayarea div{
    width: 100%;
    height: 100%;
    display: none;
}

#overrayarea.o_3days div#overray_3days{
    display: block;
    background-color: var(--3days);
}

#overrayarea.o_1day div#overray_1day{
    display: block;
    background-color: var(--1day);
}

#overrayarea.o_other div#overray_other{
    display: block;
    background-image: url(../img/popbg.png);
    background-size: cover;
    background-position: center center;
}

#overrayarea.o_other div#overray_other::before,
#overrayarea.o_other div#overray_other::after{
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 1;
}

#overrayarea.o_other div#overray_other::before{
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    opacity: 1;
    z-index: 10;
}

#overrayarea.o_other div#overray_other::after{
    z-index: 1;
    background-color: var(--white);
    opacity: .85;
}


#overrayarea article{
    position: relative;
    z-index: 1;
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
    transform: translateY(-150px);
}

#overrayarea.o_3days  article{
    opacity: .5;
}

#overrayarea.o_1day  article{
    opacity: .2;
}





@media screen and (min-aspect-ratio: 3/4) and ( max-aspect-ratio: 4/3 ){
    #overrayarea article{
        transform: translateY(-15vw);
    }
}

@media screen and (max-width: 767px) {
    #overrayarea article{
        width: 100vw;
        max-width: 1200px;
        margin: 0 auto;
        transform: translateY(5vw);
    }
    

}


@media screen and (max-width: 480px) {
    #overrayarea article{
        width: 90vw;
        max-width: 1200px;
        margin: 0 auto;
        transform: translateY(12vw);
    }
    

}



.mode_debug #overrayarea{
    height: 20vh;
    top: -20vh;
    border-bottom-left-radius: 50% 0vh;
    border-bottom-right-radius: 50% 0vh;
}



#overrayarea div figure{
    position: absolute;
}

#overrayarea div figure img{
    max-width: none;
    width: 100%;
    height: 100%;
}


/*左上*/
#overrayarea.o_3days div#overray_3days figure:nth-of-type(1){
    width: 54vw;
    height: 76.5625vh;
    right: 65.78vw;
    bottom: 67.8vh;
    z-index: 10;
}

/*右上*/
#overrayarea.o_3days div#overray_3days figure:nth-of-type(2){
    width: 55vw;
    height: 61vh;
    left: 57.5vw;
    bottom: 68.75vh;
    z-index: 11;
}

#overrayarea.o_3days div#overray_3days figure:nth-of-type(3){
    width: 50vw;
    height: 60.15vh;
    right: 60.5vw;
    top: 44.5vh;
    z-index: 12;
}

#overrayarea.o_3days div#overray_3days figure:nth-of-type(4){
    width: 41vw;
    height: 61vh;
    left: 65.78vw;
    top: 44.7vh;
    z-index: 13;
}



@media screen and (min-aspect-ratio: 3/4) and ( max-aspect-ratio: 4/3 ){

    /*左上*/
    #overrayarea.o_3days div#overray_3days figure:nth-of-type(1){
        width: 60vw;
        height: 60vw;
        right: 65.78vw;
        bottom: 67.8vh;
        z-index: 10;
    }

    /*右上*/
    #overrayarea.o_3days div#overray_3days figure:nth-of-type(2){
        width: 60vw;
        height: 60vw;
        left: 57.5vw;
        bottom: 68.75vh;
        z-index: 11;
    }

    #overrayarea.o_3days div#overray_3days figure:nth-of-type(3){
        width: 80vw;
        height: 60.15vh;
        right: 60.5vw;
        top: 44.5vh;
        z-index: 12;
    }

    #overrayarea.o_3days div#overray_3days figure:nth-of-type(4){
        width: 80vw;
        height: 61vh;
        left: 65.78vw;
        top: 44.7vh;
        z-index: 13;
    }


}


@media screen and (max-aspect-ratio: 3/4 ){


    #overrayarea.o_3days div#overray_3days figure:nth-of-type(1){
        width: 70vw;
        height: 60vw;
        right: 60vw;
        bottom: auto;
        top: -20vw;
        z-index: 10;
    }

    /*右上*/
    #overrayarea.o_3days div#overray_3days figure:nth-of-type(2){
        width: 70vw;
        height: 60vw;
        left: 52vw;
        bottom: auto;
        top: -20vw;
        z-index: 11;
    }

    #overrayarea.o_3days div#overray_3days figure:nth-of-type(3){
        width: 110vw;
        height: 110vw;
        right: 60.5vw;
        top: 44.5vh;
        z-index: 12;
    }

    #overrayarea.o_3days div#overray_3days figure:nth-of-type(4){
        width: 110vw;
        height: 110vw;
        left: 65.78vw;
        top: 44.7vh;
        z-index: 13;
    }

}



/*左上*/
#overrayarea.o_1day div#overray_1day figure:nth-of-type(1){
    width: 31.57vw;
    height: 49.2vh;
    right: 72vw;
    bottom: 60vh;
    z-index: 14;
}

/*右上*/
#overrayarea.o_1day div#overray_1day figure:nth-of-type(2){
    width: 70vw;
    height: 69vw;
    left: 60vw;
    bottom: 60vh;
    z-index: 11;
}

#overrayarea.o_1day div#overray_1day figure:nth-of-type(3){
    width: 44vw;
    height: 81.7vh;
    right: 73.15vw;
    top: 22vh;
    z-index: 9;
}

#overrayarea.o_1day div#overray_1day figure:nth-of-type(4){
    width: 40vw;
    height: 61vh;
    left: 65.78vw;
    top: 40vh;
    z-index: 10;
}


@media screen and (min-aspect-ratio: 3/4) and ( max-aspect-ratio: 4/3 ){

        
    /*左上*/
    #overrayarea.o_1day div#overray_1day figure:nth-of-type(1){
        width: 42vw;
        height: 42vw;
        right: 70vw;
        bottom: auto;
        top: -5vw;
        
    }

    /*右上*/
    #overrayarea.o_1day div#overray_1day figure:nth-of-type(2){
        width: 60vw;
        height: 50vw;
        left: 68vw;
        bottom: auto;
        top: -20vw;
       
    }

    #overrayarea.o_1day div#overray_1day figure:nth-of-type(3){
        width: 44vw;
        height: 50vh;
        right: 73.15vw;
        top: 32vh;
        
    }

    #overrayarea.o_1day div#overray_1day figure:nth-of-type(4){
        width: 40vw;
        height: 50vh;
        left: 65.78vw;
        top: 40vh;
       
    }


}


@media screen and (max-aspect-ratio: 3/4 ){

        
    /*左上*/
    #overrayarea.o_1day div#overray_1day figure:nth-of-type(1){
        width: 60vw;
        height: 60vw;
        right: 60vw;
        bottom: auto;
        top: -0vw;
        
    }

    /*右上*/
    #overrayarea.o_1day div#overray_1day figure:nth-of-type(2){
        width: 90vw;
        height: 70vw;
        left: 58vw;
        bottom: auto;
        top: -20vw;
        
    }

    #overrayarea.o_1day div#overray_1day figure:nth-of-type(3){
        width: 50vw;
        height: 30vh;
        right: auto;
        top: auto;
        bottom: 10vh;
        left: -12vw;
        
    }

    #overrayarea.o_1day div#overray_1day figure:nth-of-type(4){
        width: 70vw;
        height: 50vh;
        left: 50.78vw;
        top: auto;
        bottom: 0.5vh;
 
    }



}


/* 

#overrayarea::before,
#overrayarea::after{
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 1;

    display: none;
}

#overrayarea::before{
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    opacity: 1;
    z-index: 10;
}

#overrayarea::after{
    z-index: 1;
    background-color: var(--white);
    opacity: .85;
} */



 #overrayarea.active{
    animation: overray_on .5s forwards cubic-bezier(.14,.67,.44,1) .2s;
}


#overrayarea.active_off{
    height: 100vh;
    top: 0vh;
    border-bottom-left-radius: 50% 0vh;
    border-bottom-right-radius: 50% 0vh;
    animation: overray_off .5s forwards cubic-bezier(.14,.67,.44,1) .2s;
} 


#overray_cont{
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    padding: 270px 0px 150px;
    overflow: hidden;
    top: 0px;
    left: 0px;
    z-index: 3000;
    overflow: scroll;

    opacity: 0;
    /* display: block;
	opacity: 1; */
}

.mode_debug #overray_cont{
    display: block;
    opacity: 1;
}

#overray_cont.active{
    display: block;
    opacity: 0;
    animation: alpha_100 .7s forwards cubic-bezier(.07,.68,.41,1) .7s;
}

@media screen and (max-width: 1000px) {
    #overray_cont{
        padding: 200px 0px 120px;
    }
}


@media screen and (max-width: 640px) {
    #overray_cont{
        padding: 40vw 0px 18.75vw;
    }
    

}


/* overray ****************************************************************/




/* popup ****************************************************************/

.popup{
    display: none;
}

.popwrap{
    position: relative;
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
}

.bt_close{
    position: fixed;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--darkgray);
    color: var(--white);
    right: calc(50% - 730px) ;
    top: 120px;
    text-align: center;
    padding-top: 5px;
    z-index: 1400;
}

.bt_close i{
    position: relative;
    display: block;
    width: 100%;
	height: 30px;
}

.bt_close i::before,
.bt_close i::after{
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    top: 50%;
    height: 2px;
    transform-origin: center;
    background-color: var(--white);
}

.bt_close i::before{
    left: 50%;
    top: 20px;
    transform: translateX(-50%) rotate(45deg);
}

.bt_close i::after{
    left: 50%;
    top: 20px;
    transform: translateX(-50%) rotate(-45deg);
}

.bt_close span{
    display: block;
    font-size: 13px;
    line-height: 1;
    padding-top: 5px;
}

@media screen and (max-width: 1500px) {
    .bt_close{
        right: calc(50% - 48vw) ;
    }
}


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

    .bt_close{
        width: 50px;
        height: 50px;
        padding-top: 0px;
        top: 120px;
    }

    .bt_close i{
        height: 20px;
    }

    .bt_close i::before,
    .bt_close i::after{
        width: 20px;
    }

    .bt_close span{
        padding-top: 10px;
        font-size: 10px;
        line-height: 1;
		letter-spacing: 0;
    }

}






/* popup ****************************************************************/


/* popup internship ****************************************************************/

/* .popup_internship section{
    filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.3));
} */


.internship_header{
    /* border-top-left-radius: 40px; 
    border-top-right-radius: 40px;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    height: 170px;
    
    text-align: center;
    padding: 35px 5% 0px;
   */

   color: var(--white);
   line-height: 1.2; 
   text-align: center;

   padding-bottom: 150px;

}

#popup_3days .internship_header{
   
}

#popup_1day .internship_header{
    
}


.internship_header small{
    display: block;
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    padding-bottom: 5px;
}

.internship_header h2{
    font-size: 80px;
    font-weight: 600;
    padding-bottom: 10px;
}




#popup_3days .color_c{
    color: var(--3days);
}

#popup_1day .color_c{
    color: var(--1day);
}

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

    .internship_header h2 i{
        display: block;
        height: 1px;
    }

    .internship_header small{
        font-size: 36px;
    }

}


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

    .internship_header{
        padding-bottom: 23.4375vw;
    }

    .internship_header small{
        font-size: 5.3vw;
        padding-bottom: 0.78125vw;
    }
    
    .internship_header h2{
        font-size: 12.5vw;
        font-weight: 600;
        padding-bottom: 1.5625vw;
    }
    
    

    
}






/* internship_cont */



.internship_cont{
    background-color: var(--white);
    border-radius: 40px;
    padding: 7% 0% 8%;
}

.internship_cont_inner{
    padding: 0% 7% 0%;
}

.internship_cont h2{
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    color: var(--black);
}

.internship_cont h2 span{
    position: relative;
    display: inline-block;
    padding: 0px 5px 20px;
}

.internship_cont h2 span::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.internship_cont .color_w{
    color: var(--white);
}

#popup_3days .internship_cont h2 span::before,
#popup_3days .internship_cont .bg_type{
    background-color: var(--3days);
}

#popup_1day .internship_cont h2 span::before,
#popup_1day .internship_cont .bg_type{
    background-color: var(--1day);
}

#popup_3days .internship_cont h2.color_w span::before,
#popup_1day .internship_cont h2.color_w span::before{
    background-color: var(--white);
}

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

    .internship_cont_inner{
        padding: 0% 6.5% 0%;
    }
}


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

    .internship_cont_inner{
        padding: 0% 5% 0%;
    }

    .internship_cont h2{
        font-size: 34px;
    }
}


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

    .internship_cont{
        border-radius: 5.215123859191656vw;
    }
   
}


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

    
    .internship_cont h2{
        font-size: 7vw;
    }

    .internship_cont h2 span{
        padding: 2vw 0% 4vw;
    }

}


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

    .internship_cont_inner{
        padding: 0% 7% 0%;
    }
}


/* internship_cont */



/* point */

.internship_cont .pointarea ul{
    padding: 30px 0px 150px;
}

.internship_cont .pointarea ul li{
    /* width: 31%; */
    width: 310px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 15px;
    padding: 15px 0px 15px 10px;
}

#popup_3days .internship_cont .pointarea ul li{
    background-color: var(--3days);
}

#popup_1day .internship_cont .pointarea ul li{
    background-color: var(--1day);
}


.internship_cont .pointarea ul li div{
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    line-height: 1.2;
}

.internship_cont .pointarea ul li figure{
    display: flex;
    flex-wrap: wrap;
	align-content: center;
    width: 42px;
}

.internship_cont .pointarea ul li span{
    display: block;
    width: calc(100% - 55px) ;
    font-weight: 700;
    font-size: 24px;
    color: var(--white);
    line-height: 1.6;
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.internship_cont .pointarea ul li span i{
    letter-spacing: -1px;
}

.internship_cont .pointarea ul li figure svg{
    fill: var(--white);
    width: 100%;
}



@media screen and (max-width: 1250px) {
    
    .internship_cont .pointarea ul li{
        width: 32%;
        border-radius: 1.2vw;
        padding: 1.2vw 0.96vw;
    }

    .internship_cont .pointarea ul li figure{
        width: 3.2vw;
    }

    .internship_cont .pointarea ul li span{
        width: calc(100% - 4vw) ;
        font-size: 1.8vw;
    }

}


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

    .internship_cont .pointarea ul{
        padding: 30px 0px 15vw;
    }
    

    .internship_cont .pointarea ul li span{
        text-decoration-thickness: 0.2vw;
        text-underline-offset: 0.5vw;
    }
}


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

    .internship_cont .pointarea{
        padding-top: 2vw;
    }

    .internship_cont .pointarea ul{
        padding: 30px 0px 100px;
    }

    .internship_cont .pointarea ul li{
        width: 100%;
        display:block;
        padding: 15px;
        margin: 0 auto 20px;
        border-radius: 10px;
    }

    .internship_cont .pointarea ul li:last-child{
        margin-bottom: 0;
    }

    .internship_cont .pointarea ul li figure{
        width: 40px;
    }
    
    .internship_cont .pointarea ul li span{
        width: calc(100% - 55px) ;
        font-size: 22px;
        color: var(--white);
        text-decoration-thickness: 3px;
        text-underline-offset: 5px;
    }

    .internship_cont .pointarea ul li span .br_point{
        display: none;
    }
    

    /* .internship_cont .pointarea ul li strong span{
        font-size: 4vw;
        padding: 5px 12px 6px;
        border-radius: 5px;
        margin-bottom: 3px;
    } */
}


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

    .internship_cont .pointarea ul{
        padding: 30px 0px 18.75vw;
    }

}


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

    .internship_cont .pointarea ul li{
        padding: 1.5vw 2.5vw;
    }

    .internship_cont .pointarea ul li figure{
        width: 7.4vw;
    }

    .internship_cont .pointarea ul li span{
        width: calc(100% - 9vw) ;
        font-size: 4vw;
    }

    .internship_cont .pointarea ul li span{
        text-decoration-thickness: 0.3vw;
        text-underline-offset: 0.9vw;
    }

}


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

    .internship_cont .pointarea ul li span .br_point{
        display: inline-block;
    }

    .internship_cont .pointarea ul li{
        padding: 1.5vw 2.5vw;
    }

    .internship_cont .pointarea ul li figure{
        width: 9vw;
    }

    .internship_cont .pointarea ul li span{
        width: calc(100% - 11vw) ;
        font-size: 5.5vw;
    }

    .internship_cont .pointarea ul li span{
        text-decoration-thickness: 0.3vw;
        text-underline-offset: 0.9vw;
    }

}



/* point */



/* overview */





.internship_cont .overviewarea{
    padding: 50px 60px;
    border-radius: 20px;
}

.internship_cont .overviewarea p{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
}

.internship_cont .overviewarea div{
    padding: 50px 0px;
}


#popup_1day .internship_cont .overviewarea div figure{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}


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

    .internship_cont .overviewarea{
        padding: 6.51890482398957vw;
        border-radius: 15px;
    }
    
    .internship_cont .overviewarea p{
        font-size: 16px;
    }

    .internship_cont .overviewarea div{
        padding: 6.51890482398957vw 0px;
    }
}

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

    .internship_cont .overviewarea p{
        text-align:justify;
        text-justify:distribute;
    }
}


/* overview */



/* contentsbox */

.internship_cont .contentsbox{
    padding: 0px 0px 0px;
    font-weight: 500;
}

.internship_cont .contentsbox .contentbox_read{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
    padding: 0px 0px 50px;
}

.internship_cont .contentsbox h2{
    padding: 30px 0px 20px;
}

.internship_cont .contentsbox ul{
    padding-bottom: 120px;
}

.internship_cont .contentsbox ul li strong{
    position: relative;
    display: inline-block;
    font-size: 50px;
    font-weight: 200;
    padding: 10px;
    line-height: 1;
}

.internship_cont .contentsbox ul li h3{
    font-size: 40px;
    font-weight: 900;
    padding: 25px 0px;
    line-height: 1.2;
}

#popup_3days .internship_cont .contentsbox ul li strong span{
    position: relative;
    display: block;
    z-index: 5;
}

#popup_3days .internship_cont .contentsbox ul li strong::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 24px;
    background-color: #a0ecff;
    bottom: 0;
    left: 0;
}

#popup_1day .internship_cont .contentsbox ul li strong{
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/m_program/1day_tbg.svg);
    background-repeat: no-repeat;
    background-size: cover;
}



#popup_3days .internship_cont .contentsbox ul:nth-of-type(2){
    flex-direction: row-reverse;
}

.internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(1){
    padding-top: 30px;
}

#popup_3days .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(1){
    width: 42%;
}

#popup_3days .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(2){
    width: 53%;
}

#popup_3days .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(1){
    width: 42%;
}

#popup_3days .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(2){
    width: 53%;
}

#popup_3days .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(1){
    width: 42%;
}

#popup_3days .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(2){
    width: 53%;
}




#popup_1day .internship_cont .contentsbox ul:nth-of-type(1),
#popup_1day .internship_cont .contentsbox ul:nth-of-type(3){
    flex-direction: row-reverse;
}

#popup_1day .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(1){
    width: 53%;
}

#popup_1day .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(2){
    width: 42%;
}

#popup_1day .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(1){
    width: 42%;
}

#popup_1day .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(2){
    width: 53%;
}

#popup_1day .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(1){
    width: 50%;
}

#popup_1day .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(2){
    width: 45%;
}

@media screen and (max-width: 1150px) {
    #popup_1day .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(1){
        width: 50%;
    }
    
    #popup_1day .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(2){
        width: 45%;
    }
}


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

    .internship_cont .contentsbox ul li strong{
        font-size: 45px;
        padding: 10px;
        line-height: 1;
    }

    .internship_cont .contentsbox ul li h3{
        font-size: 3.80952380952381vw;
        font-weight: 900;
        padding: 2.380952380952381vw 0px;
        line-height: 1.2;
    }

    #popup_1day .internship_cont .contentsbox ul li strong{
        font-size: 40px;
        width: 80px;
        height: 80px;
    }
    
    
}


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

    .internship_cont .contentsbox .contentbox_read{
        font-size: 16px;
        text-align:justify;
        text-justify:distribute;
        padding: 0px 0px 50px;
    }
    

    
    #popup_3days .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(1),
    #popup_3days .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(2),
    #popup_3days .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(1),
    #popup_3days .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(2),
    #popup_3days .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(1),
    #popup_3days .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(2){
        width: 100%;
    }


    #popup_1day .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(1),
    #popup_1day .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(2),
    #popup_1day .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(1),
    #popup_1day .internship_cont .contentsbox ul:nth-of-type(2) li:nth-child(2),
    #popup_1day .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(1),
    #popup_1day .internship_cont .contentsbox ul:nth-of-type(3) li:nth-child(2){
        width: 100%;
    }

    
    .internship_cont .contentsbox ul:nth-of-type(1) li:nth-child(1){
        padding-top: 0px;
    }


    .internship_cont .contentsbox ul li strong{
        font-size: 40px;
        padding: 10px;
        line-height: 1;
    }

    .internship_cont .contentsbox ul li h3{
        font-size: 36px;
        font-weight: 900;
        padding: 15px 0px 20px;
        line-height: 1.2;
    }



}



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

    .internship_cont .contentsbox{
        padding: 0vw 0px 0px;
    }
    
    .internship_cont .contentsbox ul{
        padding-bottom: 18.75vw;
    }

    #popup_1day .internship_cont .contentsbox ul li strong{
        font-size: 34px;
        width: 70px;
        height: 70px;
    }
    
}


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

    .internship_cont .contentsbox ul li h3{
        font-size: 7vw;
        font-weight: 900;
        padding: 3vw 0px 4vw;
        line-height: 1.2;
    }

}

/* contentsbox */


/* photobox */

.internship_cont .photobox{
    overflow: clip;
    width: 100%;
    padding-bottom: 120px;
}

.internship_cont .photobox article{
	max-width: none;
	width: calc(2730px*2);
	height: 100%;
	overflow: hidden;
}

.internship_cont .photobox article ul{
	animation :infinity-scroll-left 100s infinite linear 0s both;
	width: 2730px;
}

.internship_cont .photobox article ul li{
    width: 430px;
    margin-left: 25px;
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}


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


    .internship_cont .photobox{
        overflow: clip;
        width: 100%;
        padding-bottom: 18.75vw;
    }

    .internship_cont .photobox article{
        max-width: none;
        width: calc(1920px*2);
        height: 100%;
        overflow: hidden;
    }
    
    .internship_cont .photobox article ul{
        animation :infinity-scroll-left 70s infinite linear 0s both;
        width: 1920px;
    }
    
    .internship_cont .photobox article ul li{
        width: 300px;
        margin-left: 20px;
    }
    
}
/* photobox */






/* guidelinebox */

.internship_cont .guidelinebox{
    padding-bottom: calc(120px - 30px) ;
    font-weight: 500;
}

.internship_cont .guidelinebox h2{
    padding: 30px 0px 20px;
}

.internship_cont .guidelinebox ul{
    border-top: var(--gray) dotted 1px;
    padding-top: 30px;
}

.internship_cont .guidelinebox li:nth-child(2n-1){
    width: 220px;
    border-bottom: var(--gray) dotted 1px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    line-height: 1.6;
} 

.internship_cont .guidelinebox li:nth-child(2n){
    width: calc(100% - 220px) ;
    border-bottom: var(--gray) dotted 1px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    line-height: 1.6;
}   

.internship_cont .guidelinebox li dl.date_time dt{
    width: 95px;
    text-align: center;
    line-height: 1;
}

.internship_cont .guidelinebox li dl.date_time dt span{
    display: block;
    border: var(--darkgray) solid 1px;
    padding: 4px 4px 6px;
}

.internship_cont .guidelinebox li dl.date_time dd{
    width: calc(100% - 120px) ;
    line-height: 1.4;
    padding-top: 3px;
}

.internship_cont .guidelinebox li dl.date_time dt:not(:first-of-type),
.internship_cont .guidelinebox li dl.date_time dd:not(:first-of-type){
    padding-top: 30px;
}

.internship_cont .guidelinebox li dl.place{
    line-height: 1.4;
}

.internship_cont .guidelinebox li dl:not(:first-of-type){
    padding-top: 15px;
}

.internship_cont .guidelinebox li dl.place dt{
    width: 80px;
    white-space: nowrap;
    vertical-align: top;
}

.internship_cont .guidelinebox li dl.place dd{
    width: calc(100% - 100px) ;
}

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

    .internship_cont .guidelinebox li:nth-child(2n-1){
        width: 150px;
        border-bottom: var(--gray) dotted 1px;
        padding-bottom: 30px;
        margin-bottom: 30px;
    } 
    
    .internship_cont .guidelinebox li:nth-child(2n){
        width: calc(100% - 150px) ;
        border-bottom: var(--gray) dotted 1px;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }  

}


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

    .internship_cont .guidelinebox li dl.date_time dd{
        width: 100%;
        padding-top: 5px;
    }

    .internship_cont .guidelinebox li dl.date_time dd:not(:first-of-type){
        padding-top: 5px;
    }

    .internship_cont .guidelinebox li dl.place dt{
        padding-bottom: 5px;
    }

    .internship_cont .guidelinebox li dl.place dd{
        width: 100%;
    }

}

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

    .internship_cont .guidelinebox{
        padding-bottom: calc(18.75vw - 20px) ;
    }
    
}


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

    .internship_cont .guidelinebox li:nth-child(2n-1){
        width: 90px;
        border-bottom: var(--gray) dotted 1px;
        padding-bottom: 30px;
        margin-bottom: 30px;
    } 
    
    .internship_cont .guidelinebox li:nth-child(2n){
        width: calc(100% - 90px) ;
        border-bottom: var(--gray) dotted 1px;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }  

}



/* guidelinebox */

/* processbox */

.internship_cont .processbox{
    padding-bottom: 120px;
}


.internship_cont .processbox ul{
    margin-top: 30px;
    padding: 30px 60px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
}

.internship_cont .processbox li{
    width: 100%;
	border-radius: 20px;
	padding: 10px;
    text-align: center;
}


.internship_cont .processbox li p{
    line-height: 1.8;
    text-align: center;
}

.internship_cont .processbox li p strong{
    font-size: 110%;
}

.internship_cont .processbox li div{
    display: inline-block;
    background-color: rgba(0, 0, 0, .2);
    padding: 10px 20px;
    margin-top: 10px;
    line-height: 1.8;
}

.internship_cont .processbox ul li.arrow {
    position: relative;
    width: 100%;
    height: 40px;
}

.internship_cont .processbox ul li.arrow span{
    position: absolute;
    display: block;
    width: 60px;
    height: 32px;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    background-color: #FFF;

    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.internship_cont .processbox ul li.arrow::before,
.internship_cont .processbox ul li.arrow::after{
    content: "";
    position: absolute;
    display: block;
    height: 1px;
    width: calc(50% - 70px) ;
    border-bottom: #FFF dotted 1px;
    top: 50%;
    transform: translateY(-50%);
   
}

.internship_cont .processbox ul li.arrow::before{
    left: 0;
}

.internship_cont .processbox ul li.arrow::after{
    right: 0;
}


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

    .internship_cont .processbox ul{
        margin-top: 15px;
        padding: 20px 20px;
        border-radius: 15px;
        font-size: 16px;
        font-weight: 700;
    }

	.internship_cont .processbox li{
		margin: 0 auto 4vw;
	}


    .internship_cont .processbox ul li.arrow {
        height: 4vw;
    }

    .internship_cont .processbox ul li.arrow span{
        width: 40px;
        height: 24px;
        
    }

    .internship_cont .processbox ul li.arrow::before,
    .internship_cont .processbox ul li.arrow::after{
        
        width: calc(50% - 55px) ;
    
    }


}

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

    .internship_cont .processbox{
        padding-bottom: 18.75vw;
    }

    .internship_cont .processbox li div{
        padding: 1.5625vw 3.125vw;
    }

}

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

    .deadline{
        background-color: #FFF;
        padding: 0px 10px;
    }

    #popup_1day .deadline{
        color: var(--1day);
    }

    #popup_3days .deadline{
        color: var(--3days);
    }

    .deadline_sp{
        display: block;
        height: 10px;
    }
}


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

    .internship_cont .processbox ul{
        font-size: 3.5vw;
        margin-top: 5vw;
    }
}

/* processbox */




.internship_cont .bt_entry a{
    transition: all 500ms 0s ease;
    margin: 0 auto;
	background-color: var(--black);
	width: 100%;
	height: 120px;
	color: var(--white);
	border-radius: 60px;
	font-size: 50px;
	line-height: 1;
	font-weight: 700;
}


.pc .internship_cont .bt_entry a:hover{
    background-color: var(--lightblue);
}


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

	.internship_cont .bt_entry a{
		margin: 0 auto;
		background-color: var(--black);
		width: 100%;
		max-width: 400px;
		height: 60px;
		color: var(--white);
		border-radius: 30px;
		font-size: 28px;
	}

}

/* guidelinebox */



/* eventbox */


.eventbox.flex div.half{
    width: 48%;
    max-width: 550px;
}

.eventbox .event_cont{
    background-color: var(--white);
    border-radius: 40px;
    padding: auto;
    padding: 40px 8% 60px;
}

.eventbox.flex div.half.event_cont{
    padding: 40px 4% 60px;
}

.event_cont div{
    position: relative;
    height: 100%;
}


.internship_bigarrow{
    padding: 40px 0px;
    margin: 0 auto;
}

.internship_bigarrow span{
    display: block;
    width: 150px;
    height: 60px;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    margin: 0 auto;
    background-color: var(--white);
}




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

    .eventbox.flex div.half{
        width: 49%;
    }


    .internship_bigarrow{
        padding: 30px 0px;
    }


    .internship_bigarrow span{
        display: block;
        width: 100px;
        height: 40px;
        clip-path: polygon(100% 0, 0 0, 50% 100%);
        margin: 0 auto;
        background-color: var(--white);
    }


}



.eventbox article{
    position: relative;
    padding: 40px 0px 35px;
}


.eventbox article::before,
.event_cont div::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    background-size: cover;
    background-position: center;
    left: 0;
}

.eventbox article::before{
    background-image: url(../img/bar_ch.svg);
    top: 0;
}

.event_cont div::after{
    background-image: url(../img/bar_ch.svg);
    bottom: 0;
}

.eventbox h3{
    display: block;
    text-align: center;
    font-weight: 700;
    padding-bottom: 30px;
    line-height: 1.4;
}

.eventbox h3 small{
    display: inline-block;
    font-size: 26px;
    line-height: 1.2;
}

.eventbox h3 strong{
    display: block;
    font-size: 42px;
    line-height: 1.2;
    color: var(--drakblue);
}

.eventbox h3 .en{
    font-size: 115%
}

.eventbox figure{
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding-bottom: 30px;
}

.eventbox .flexbox figure{
    width: 300px;
    margin: 0;
}

.eventbox figure span{
    position: relative;
    display: block;
    padding-top: 58.333333333333333%;
    background-color: #ccc;
}

.eventbox figure span em{
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    text-align: center;
    color: var(--white);

    font-size: 22px;
    font-weight: 600;
    display: block;
    text-align: center;
    line-height: 1.6;
}

.eventbox p{
    line-height: 1.8;
}

.eventbox .flexbox p{
    width : calc(100% - 350px) ;
}

.eventbox aside{
    display: block;
    background-color: var(--lightgray);
    padding: 4px 10px;
    margin-top: 20px;
}

.eventbox aside span.note{
    line-height: 1.4;
}


@media screen and (max-width: 1200px) {
    .eventbox h3 small{
        padding-bottom: 5px;
    }

    .eventbox h3 .en{
        font-size: 105%;
        line-height: 1.1;
    }
}

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

    .eventbox article{
        position: relative;
        padding: 5vw 0px;
    }
    

    .eventbox .event_cont{
        border-radius: 3.259452411994785vw;
        padding: auto;
        padding: 5.25% 5vw 8vw;
    }

    .eventbox.flex div.half.event_cont{
        padding: 5.25% 5vw 8vw;
    }

    .eventbox h3{
        padding-bottom: 4vw;
    }

    .eventbox h3 small{
        font-size: 3.389830508474576vw;
    }
    
    .eventbox h3 strong{
        font-size: 5.475880052151239vw;
    }

    .eventbox figure{
        padding-bottom: 4vw;
    }


    .eventbox figure span em{
        font-size: 2.868318122555411vw;
    }

    .eventbox .flexbox.flex{
        display: block;
        width: 100%;
    }
    
    .eventbox .flexbox figure{
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .eventbox .flexbox p{
        width: 100%;
    }
    
}

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

    .eventbox div.half.event_cont p{
        text-align: left;
    }
}

/* eventbox */




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

    .internship_bigarrow{
        padding: 30px;
    }
    
    .internship_bigarrow span{
        width: 120px;
        height: 60px;
    }

}


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

    .internship_bigarrow{
        padding: 20px;
    }
    
    .internship_bigarrow span{
        width: 100px;
        height: 50px;
    }

}

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

    .internship_bigarrow span{
        width: 80px;
        height: 40px;
    }

}















/* popup internship ****************************************************************/



/* popup_liveold　****************************************************************/


.movielinkarea {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0px;
  }


.movielinkarea div.video_tag {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }

.movielinkarea div.video_tag iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}




#popup_liveold h1{
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    padding: 20px 0px;
    text-align: center;
}

#popup_liveold #liveold_txt{
    text-align: center;
    padding-bottom: 50px;
}

#popup_liveold ul>li.liveold_area{
    width: 48.5%;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 50px;

    display:flex;/*子要素に追加*/
    flex-direction:column;/*子要素に追加*/

    border-width: 5px;
    border-style: solid;

    background-color: var(--white);
}

#popup_liveold ul>li.liveold_area:nth-child(1){
    border-color: var(--live_color2);
}

#popup_liveold ul>li.liveold_area:nth-child(2){
    border-color: var(--live_color3);
}

#popup_liveold ul>li.liveold_area:nth-child(3){
    border-color: var(--live_color4);
}

#popup_liveold ul>li.liveold_area:nth-child(4){
    border-color: var(--live_color5);
}


#popup_liveold ul>li.liveold_area strong{
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#popup_liveold ul>li.liveold_area:nth-child(1) strong{
    color: var(--live_color2);
}

#popup_liveold ul>li.liveold_area:nth-child(2) strong{
    color: var(--live_color3);
}

#popup_liveold ul>li.liveold_area:nth-child(3) strong{
    color: var(--live_color4);
}

#popup_liveold ul>li.liveold_area:nth-child(4) strong{
    color: var(--live_color5);
}


#popup_liveold ul>li.liveold_area h2{
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    padding: 10px 0px 15px;
    letter-spacing: .5px;
    text-align:justify;
    text-justify:distribute;
}


#popup_liveold ul>li.liveold_area .keywordbox{
    padding-bottom: 10px;
    height: 82px;
}

#popup_liveold ul>li.liveold_area .keywordbox span{
    display: inline-block;
    line-height: 1;
    margin-right: 5px;
    padding: 5px 15px;
    border-radius: 5px;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 7px;
}

#popup_liveold ul>li.liveold_area:nth-child(1) .keywordbox span,
#popup_liveold ul>li.liveold_area:nth-child(1) .live_cbox{
    background-color: var(--live_color2);
}

#popup_liveold ul>li.liveold_area:nth-child(2) .keywordbox span,
#popup_liveold ul>li.liveold_area:nth-child(2) .live_cbox{
    background-color: var(--live_color3);
}

#popup_liveold ul>li.liveold_area:nth-child(3) .keywordbox span,
#popup_liveold ul>li.liveold_area:nth-child(3) .live_cbox{
    background-color: var(--live_color4);
}

#popup_liveold ul>li.liveold_area:nth-child(4) .keywordbox span,
#popup_liveold ul>li.liveold_area:nth-child(4) .live_cbox{
    background-color: var(--live_color5);
}

#popup_liveold ul>li.liveold_area p{
    padding: 20px 0px;
    flex-grow:1;/*空きスペースの伸びる倍率を指定*/
}

#popup_liveold ul>li.liveold_area .live_cbox{
    border-radius: 8px;
    padding: 5px 15px 15px;
    font-size: 14px;
    color: var(--white);
    line-height: 1.4;
}

#popup_liveold ul>li.liveold_area .live_cbox h5{
    font-size: 20px;
    line-height: 1;
    padding: 8px 0px 12px;
}

#popup_liveold ul>li.liveold_area .live_cbox ol{
    counter-reset: number 0;
}

#popup_liveold ul>li.liveold_area .live_cbox ol>li{
    position: relative;
    padding-left: 18px;
    line-height: 1.2;
    padding-bottom: 10px;
    font-weight: 600;
}

#popup_liveold ul>li.liveold_area .live_cbox ol>li::before{
    content: "";
    /* counter-increment: number 1;      number カウンタの増加数をセット
    content: counter(number) ;      表示形式を指定 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    line-height: 1;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    /* border: var(--white) solid 1px; */
    border-radius: 50%;
    background-color: var(--white);
    font-size: 10px;
    padding-bottom: 2px;
    text-align: center;
}


#popup_liveold ul>li.liveold_area .live_cbox em{
    font-weight: 700;
}

#popup_liveold ul>li.liveold_area .live_cbox ol>li ul{
    margin-left: 10px;
    padding-top: 10px;
    line-height: 1.2;
}

#popup_liveold ul>li.liveold_area .live_cbox ol>li ul li{
    display: list-item;
    list-style: circle;
    list-style-position: outside;
    padding-bottom: 5px;
}



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

    #popup_liveold ul>li.liveold_area{
        width: 49%;
        border-radius: 12px;
        padding: 2vw;
        margin-bottom: 4vw;
        border-width: 4px;
    }

    #popup_liveold ul>li.liveold_area strong{
        font-size: 16px;
    }

    #popup_liveold ul>li.liveold_area h2{
        font-size: 2.2vw;
        padding: 10px 0px 15px;
    }
    

}



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

    #popup_liveold ul>li.liveold_area{
        width: 100%;
        margin: 0 auto;
        max-width: 600px;

        border-radius: 15px;
        padding: 25px;
        margin-bottom: 50px;
        border-width: 5px;
    }

    #popup_liveold ul>li.liveold_area .keywordbox{
        height: auto;
    }

    #popup_liveold ul>li.liveold_area strong{
        font-size: 18px;
    }

    #popup_liveold ul>li.liveold_area h2{
        font-size: 30px;
        padding: 10px 0px 15px;
    }


}


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

    #popup_liveold h1{
        font-size: 11.428571428571429vw;
        font-weight: 700;
        line-height: 1;
        padding: 20px 0px;
        text-align: center;
    }


    #popup_liveold ul>li.liveold_area{
        width: 100%;
        margin: 0 auto;
        max-width: 600px;

        border-radius: 12px;
        padding: 3.5vw;
        margin-bottom: 3.5vw;
        border-width: 4px;
    }

    #popup_liveold ul>li.liveold_area strong{
        font-size: 18px;
    }
    

    #popup_liveold ul>li.liveold_area h2{
        font-size: 26px;
        padding: 10px 0px 15px;
    }
    

}



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

    #popup_liveold ul>li.liveold_area strong{
        font-size: 16px;
    }
    

    #popup_liveold ul>li.liveold_area h2{
        font-size: 22px;
        padding: 10px 0px 15px;
    }
    

}


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

    #popup_liveold ul>li.liveold_area strong{
        font-size: 14px;
    }

    #popup_liveold ul>li.liveold_area h2{
        font-size: 18px;
        padding: 10px 0px 15px;
    }

}



/* popup_liveold ****************************************************************/