:root{
    --white: #FFF;
    --black: #000;
	--gray: #ccc;
    --blue: #0c419a;
    --lightblue: #41cdf4;
	--drakblue: #0d256b;
    --darkgray: #666;
	--lightgray: #f5f5f5;
	--whietblue: #f2f8fc;

}



html{ background: var(--white);
	width: 100vw;
	overflow-x: hidden;
}

body{
	color: var(--black);
	background: var(--white);
    font-family: 'YakuHanJP','Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size:16px;
	line-height: 2;
	margin: 0px;
	padding: 0px;
	position:relative;
	width: 100vw;
	/* overflow-x: hidden; */
	letter-spacing: 1px;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align:bottom;
	backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

a:focus, *:focus { outline:none; }

a,a:visited{
    text-decoration: none;
	color: #000;
}
a:hover{
    text-decoration:none;
	color: inherit;
}

::selection {
    background: var(--blue);
    color: var(--white);
}

::-moz-selection {
    background: var(--blue);
    color: var(--white);
}


.en{
	font-family: 'Manrope', sans-serif;
}

.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex_center{
    display: flex;
    flex-wrap: wrap;
	align-content: center;
    justify-content: center;
}

@media screen and (max-width: 1000px) {
	body{
        font-size: 14px;
        line-height: 2.2
	}
}

@media screen and (max-width: 480px) {
    body{
		font-size: 13px;
        line-height: 2
	}
}



a.text_hover{
    transition: all 500ms 0s ease;
    color: var(--blue);
    text-decoration: underline;
}

a.text_hover:hover{
    color: var(--lightblue);
    text-decoration: underline;
}

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


.wrap{
	position: relative;
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 100;
}

#symbol{
	display: none;
}

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

	.wrap{
		max-width: 1100px;
		width: 86%;
	}

}


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

    .wrap{
		width: 84%;
	}

}

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

	.wrap{
		width: 82%;
	}

}


#allcont{
    position: relative;
    width: 100vw;
    overflow-x: hidden;
    z-index: 1;
}




/* ******************** loading ******************** */

#loading{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	z-index: 1000;
}

#loading div{
	position: absolute;
	width: 120px;
	height: 120px;
	top: 48%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
}

.load #loading div{
	animation: alpha_0 .5s forwards cubic-bezier(.07,.68,.41,1) .2s;
}


#loading article{
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: var(--blue);
}


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


#loading div span{
	margin-top: 35px;
	display: block;
	animation: loading_animetion 1.5s infinite cubic-bezier(.07,.68,.41,1) 0s;
}

#loading div span i{
	display: block;
	width: 18px;
	height: 50px;
	background-color: var(--white);
	transform:skewX(-10deg);
	margin: 0 auto;
}



#loading div aside{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation: loading_animetion_2 20s infinite linear 0s;
}

#loading div aside i{
	display: inline-block;
}


@keyframes loading_animetion {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

@keyframes loading_animetion_2 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}




/* ******************** loading　******************** */


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


/* header */


header{
    position: fixed;
	width: 100%;
    height: 70px;
    top: 0;
    z-index: 100000;
	
}

header::before{
	transition: all 350ms 0s ease;
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: -100%;
	left: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, .7);
	z-index: 50;;
}

body#INTERNSHIP header::before{
    top: 0%;
}

body#FEATURE header.active::before{
	top: 0%;
}

header #logo_area{
    position: absolute;
    width: 240px;
	left: 15px;
	top: 15px;
	z-index: 100;
}

header #logo_area div{
	width: 80px;
}




body#internshi header #logo_area div .logo_w,
body#FEATURE header #logo_area div .logo_w,
body#FEATURE header.active #logo_area div .logo_c{
    display: block;
}

body#FEATURE header.active #logo_area div .logo_w,
body#FEATURE header #logo_area div .logo_c{
    display: none;
}


header #logo_area p{
	width: calc(100% - 95px);
	font-size: 16px;
	padding-top: 2px;
	font-weight: 500;
    text-align: right;
}

body#FEATURE header #logo_area p{
    color: var(--white);
}

body#FEATURE header.active #logo_area p{
    color: var(--blue);
}





header #btarea{
    position: absolute;
    width: 400px;
	right: 10px;
	top: 16px;
	z-index: 150;
}

header #btarea.flex{
    flex-direction: row-reverse;
}

header #btarea div{
    width: 130px;
	height: 36px;
}

header #btarea div a{
    transition: all 500ms 0s ease;
    height: 100%;
    border-radius: 18px;
    color: var(--white);
    text-align: center;
    line-height: 1;
}



header #btarea div.bt_entry a,
header #btarea div.bt_mypage a{
    background-color: var(--black);
}

header #btarea div.bt_program a{
    background-color: var(--blue);
	pointer-events:none;
	opacity: 0;
}

.load header #btarea div.bt_program a{
	pointer-events:all;
	animation: alpha_100 .7s forwards cubic-bezier(.07,.68,.41,1) 1s;
}

.pc header #btarea .bt_entry a:hover,
.pc header #btarea .bt_mypage a:hover{
    /* border-radius: 0px; */
    background-color: var(--lightblue);
}

.pc header #btarea .bt_program a:hover{
    /* border-radius: 0px; */
    filter: brightness(200%);
}

header #btarea_sp {
	display: none;
	position: fixed;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 50px;

	padding: 8px 6%;
    backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
    width: 100%;
    height: 50px;
    z-index: 300000000000;
}

header #btarea_sp::before{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--white);
	opacity: .8;
	z-index: 1;
	
}

header #btarea_sp div{
	position: relative;
	width: 70%;
	max-width: 280px;
	height: 34px;
	border-radius: 17px;
	overflow: hidden;
	margin: 0 auto;
	z-index: 10;
}

header #btarea_sp div a{
	height: 100%;
	color: var(--white);
	background-color: var(--blue);
	text-align: center;
	
}




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

	header #logo_area{
		display: block;
		width: 200px;
		left: 15px;
		top: 8px;
	}

	header #logo_area div{
		width: 70px;
	}

	header #logo_area p{
		width: 170px;
		font-size: 13px;
		padding-top: 6px;
		text-align: left;
		line-height: 1;
	}

	header #btarea{
		position: absolute;
		width: 355px;
		right: 10px;
		top: 16px;
		z-index: 150;
	}

	header #btarea div{
		width: 115px;
	}

	header #btarea div a{
		border-radius: 18px;
		font-size: 15px;
	}

}

@media screen and (max-width: 540px) {
	header #btarea{
		position: absolute;
		width: 310px;
		right: 5px;
		top: 16px;
		z-index: 150;
	}

	header #btarea div{
		width: 100px;
	}

}




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

	header #logo_area p{
		width: 150px;
		font-size: 10px;
	}

	header #btarea{
		position: absolute;
		width: 205px;
		right: 5px;
		top: 16px;
		z-index: 150;
	}

	header #btarea .bt_program{
		display: none;
	}


	
	

}

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

	header #btarea div a{
		border-radius: 18px;
		font-size: 14px;
	}

	header #btarea{
		position: absolute;
		width: 185px;
		right: 5px;
		top: 16px;
		z-index: 150;
	}

	header #btarea div{
		width: 90px;
	}
}


/* header */




/* footer */


footer{
    padding: 4.5% 4.5% 6%;
	width: 100%;
	background-color: var(--white);
}

footer section{
	width: 380px;
}

footer figure{
	width: 135px;
}

footer h2{
	padding: 40px 0px 20px;
	line-height: 1;
	font-size: 20px;
}

footer p{
	font-size: 14px;
	line-height: 1.6;
}

footer address{
	display: flex;
	width: calc(100% - 400px) ;
	justify-content: flex-end;
	align-items: end;
	font-size: 13px;
	line-height: 1.2;
	text-align: right;
}


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

	footer{
		padding: 45px 3.5% 60px;
	}
	
	footer figure{
		width: 100px;
	}

	footer h2{
		padding: 30px 0px 15px;
		line-height: 1;
		font-size: 16px;
	}

}


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

	footer.flex{
		/* display: block; */
	}

	footer address{
		display: block;
		width: 100% ;
		font-size: 12px;
		line-height: 1.2;
		text-align: left;
		padding-top: 40px;
	}

}


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

	footer figure{
		width: 80px;
	}

	footer{
		padding-bottom: 80px;
	}

}


/* footer */











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


.only_1350,
.only_1200,
.only_1000,
.only_900,
.only_800,
.only_767,
.only_640,
.only_540,
.only_480,
.only_360{
	display: none;
}

.no_1350,
.no_1200,
.no_1000,
.no_900,
.no_800,
.no_767,
.no_640,
.no_540,
.no_480,
.no_360{
	display: inline-block;
}


@media screen and (max-width: 1350px) {
	.only_1350{display: inline-block;}
	.no_1350{display: none;}
}


@media screen and (max-width: 1200px) {
	.only_1200{display: inline-block;}
	.no_1200{display: none;}
}


@media screen and (max-width: 1000px) {
	.only_1000{display: inline-block;}
	.no_1000{display: none;}
}

@media screen and (max-width: 900px) {
	.only_900{display: inline-block;}
	.no_900{display: none;}
}

@media screen and (max-width: 800px) {
	.only_800{display: inline-block;}
	.no_800{display: none;}
}

@media screen and (max-width: 767px) {
	.only_767{display: inline-block;}
	.no_767{display: none;}
}

@media screen and (max-width: 640px) {
	.only_640{display: inline-block;}
	.no_640{display: none;}
}

@media screen and (max-width: 540px) {
	.only_540{display: inline-block;}
	.no_540{display: none;}
}

@media screen and (max-width: 480px) {
	.only_480{display: inline-block;}
	.no_480{display: none;}
}

@media screen and (max-width: 360px) {
	.only_360{display: inline-block;}
	.no_360{display: none;}
}



.inview_anime,
.inview_anime_fast{
	opacity: 0;
	transform: translateY(40px);
}

.astart .inview_anime_on{
	opacity: 0;
	transform: translateY(40px);
	animation: inview_animetion .7s forwards cubic-bezier(.07,.68,.41,1) .7s;
}

.astart .inview_anime_fast_on{
	opacity: 0;
	transform: translateY(40px);
	animation: inview_animetion .5s forwards cubic-bezier(.07,.68,.41,1) .1s;
}

.inview_anime_slow{
	opacity: 0;
	transform: translateY(20px);
}

.astart .inview_anime_slow_on{
	opacity: 0;
	transform: translateY(20px);
	animation: inview_animetion_slow .5s forwards cubic-bezier(.07,.68,.41,1) 1.5s;
}

.inview_anime_slide_l{
    opacity: 0;
	transform: translateX(-40px);
}

.astart .inview_anime_slide_l_on{
	opacity: 0;
	transform: translateX(-40px);
	animation: inview_side_animetion_l .7s forwards cubic-bezier(.63,.28,.36,.82) .4s;
}

.inview_anime_slide_in{
    opacity: 0;
    clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
}

.astart .inview_anime_slide_in_on{
    opacity: 1;
	clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
	animation: inview_side_animetion_in .7s forwards cubic-bezier(.63,.28,.36,.82) .4s
}

.inview_anime_alpha_100{
    opacity: 0;
}

.astart .inview_anime_alpha_100_on{
	opacity: 0;
	animation: alpha_100 .7s forwards cubic-bezier(.63,.28,.36,.82) .7s;
}


@keyframes inview_animetion {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);	
	}
}

@keyframes inview_animetion_slow {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);	
	}
}

@keyframes inview_side_animetion_in {
	0% {
		clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
	}
}

@keyframes inview_side_animetion_l {
	0% {
		opacity: 0;
		transform: translateX(-40px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);	
	}
}

@keyframes inview_side_animetion_r {
	0% {
		transform: translateX(20px);
	}
	100% {
		transform: translateX(0px);	
	}
}



@keyframes y_idou_0{
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
	}
}



@keyframes scale_small {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes scale_big{
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}


@keyframes width_100 {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

@keyframes width_0 {
	0% {
		width: 100%;
	}
	100% {
		width: 0%;
	}
}

@keyframes height_100 {
	0% {
		height: 0%;
	}
	100% {
		height: 100%;
	}
}

@keyframes height_0 {
	0% {
		height: 100%;
	}
	100% {
		height: 0%;
	}
}

@keyframes alpha_100 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes alpha_0 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


@keyframes overray_on{
	0% {
        height: 20vh;
        top: -20vh;
        border-bottom-left-radius: 50% 20vh;
        border-bottom-right-radius: 50% 20vh;
	}
    60%{
        height: 100vh;
        top: 0vh;
        border-bottom-left-radius: 50% 10vh;
        border-bottom-right-radius: 50% 10vh;
    }
	100% {
		height: 100vh;
        top: 0vh;
        border-bottom-left-radius: 50% 0vh;
        border-bottom-right-radius: 50% 0vh;
	}
}


@keyframes overray_off {
	0% {
        height: 100vh;
        top: 0vh;
        border-bottom-left-radius: 50% 0vh;
        border-bottom-right-radius: 50% 0vh;
	}
    30%{
        height: 100vh;
        top: 0vh;
        border-bottom-left-radius: 50% 10vh;
        border-bottom-right-radius: 50% 10vh;
    }
	100% {
		height: 20vh;
        top: -20vh;
        border-bottom-left-radius: 50% 20vh;
        border-bottom-right-radius: 50% 20vh;
	}
}