@charset "UTF-8";
/* =======================================

	IndexElements

======================================= */
@media only screen and (max-width: 767px) {
	.cont_outer {
		padding-right: 0;
		padding-left: 0;
	}
	.course_field .cont_outer h2.sec_head {
		margin: auto 4% 40px;
	}
	.oc_field .cont_outer {
		padding-right: 4%;
		padding-left: 4%;
	}
}
/*-----------------------------------------
	index_header
-----------------------------------------*/
header {
	/*background: rgba(0,0,0,0);*/
background: rgba(0,0,0,0.7);
}
header .inner {
	margin: 0 4%;
	padding: 0;
	border-bottom: 0px solid #fff;
}
header #mddNav > ul > li > a {
	color: #fff;
}
header #mddNav > ul > li.type_btn {
	display: none;
}

@media only screen and (max-width: 767px) {
	header h1 img,
	header .logo img {
		/*max-width: 110px;*/
max-width: 250px;
	}
	header .inner {
		margin: 0 2%;
		padding: 0;
		border-bottom: none;
	}
}
@media only screen and (max-width: 374px) {
	header h1 img,
	header .logo img {
		/*max-width: 90px;*/
max-width: 250px;
	}
}

/*-----------------------------------------
	scroll_header INDEX
-----------------------------------------*/

.scroll_header header h1 {
	/*margin: 20px auto 0 0;*/
	margin: 10px auto 0 0;
}
.scroll_header header #mddNav > ul > li {
	height: 60px;
	line-height: 60px;
}
.scroll_header header #mddNav > ul > li > a {
	height: 60px;
	color: #222;
}
.scroll_header header #mddNav .mddWrap {
	top: 60px;
}

header.active {
	background: rgba(0,0,0,.7);
}
.scroll_header header.active {
	background: rgba(255,255,255,.9);
}

@media only screen and (max-width: 767px) {
	#container {
		padding-top: 56px;
	}
	.scroll_header #container {
		padding-top: 0;
	}
	.scroll_header header {
		position: relative;
		background: transparent;
	}
	.scroll_header header h1 img,
	.scroll_header header .logo img {
		max-width: 110px;
	}
	.scroll_header header .sp_menu_wrap .sp_menu_btn {
		position: fixed;
		top: 5px;
		right: 5px;
		animation: 600ms fadeIn forwards;
	}
	.scroll_header header .sp_menu_wrap .sp_menu_btn span {
		box-shadow: #222 0 -1px 1px;
	}
	header .sp_menu_wrap {
		border: 2px solid #fff;
	}
	.sp_menu_wrap .sp_btn {
		display: block;
		width: 90px;
		height: 50px;
		border-right: 2px solid #fff;
		text-align: center;
	}
	.sp_menu_wrap .sp_btn a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: #fff;
		text-align: center;
		font-weight: bold;
		line-height: 1.2;
	}
	 .sp_menu_wrap .sp_btn_open_campus{
background: linear-gradient(-45deg, #33e5e5,#30a2f0);
}
}

@media only screen and (max-width: 374px) {
	.sp_menu_wrap .sp_btn {
		width: 72px;
		letter-spacing: 0;
	}
}

/*-----------------------------------------
	opening
-----------------------------------------*/
#container.loading {
	height: 100vh;
}
#container.loading .loader_wrap {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1);
	transition: all 600ms linear;
	transition-delay: 500ms;
	pointer-events: none;
}
#container.loading .loader_wrap .spinner {
	opacity: 1;
	transition: all 1000ms linear;
}
#container.loading.start .loader_wrap {
	background: rgba(255,255,255, 0);
}
#container.loading.start .loader_wrap .spinner {
	opacity: 0;
}

#container.loading #global_header,
#container.loading #fv_copy_img,
#container.loading div.important_anc,
#container.loading div.cta_btn {
	opacity: 0;
}

#container.loading.start #global_header {
	animation: 1000ms fadeIn forwards;
	animation-delay: 100ms;
}

#container.loading.start #fv_copy_img {
	animation: 1000ms fadeUpCopy forwards;
	animation-delay: 100ms;
}

#container.loading.start div.important_anc {
	animation: 1000ms fadeUp forwards;
	animation-delay: 100ms;
}

#container.loading.start div.cta_btn {
	animation: 1000ms fadeRight forwards;
	animation-delay: 100ms;
}

/*#container.loading .loader_wrap .spinner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: flex-start;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin: auto;
	padding: 38px 0 0 0;
	width: 600px;
	height: 300px;
	background: url(/files/logo_animation.svg) no-repeat top center;
background: url(/files/logo_animation-0927.svg) no-repeat top center;
	background-size: 100% auto;
}*/
#container.loading .loader_wrap .spinner {
position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
background: url(/files/main2024-pcbg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
	background-size: 100% auto;
}
/*#container.loading .loader_wrap .spinner span {
	display: block;
	width: 25px;
	height: 4px;
background: url(/files/main-text.svg);
}*/
#container.loading .loader_wrap .spinner span {
width: 100%;
	min-height: 100vh;
	display: block;
background: url(/files/main-text.svg);
background-repeat: no-repeat;
background-size: 800px auto;
background-position: right bottom;
}
/*#container.loading .loader_wrap .loader{
  margin: 0 auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
animation: load5 400ms 3 linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
    margin-top: 250px;
}
 
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000, 1.8em -1.8em 0 0em rgba(0, 0, 0,0.2), 2.5em 0em 0 0em rgba(0, 0, 0,0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0,0.2), -2.6em 0em 0 0em rgba(0, 0, 0,0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0,0.7), 1.8em -1.8em 0 0em #000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0,0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0,0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0,0.7), 2.5em 0em 0 0em #000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0,0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0,0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0,0.7), 1.75em 1.75em 0 0em #000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0,0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0,0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000, -1.8em 1.8em 0 0em rgba(0, 0, 0,0.2), -2.6em 0em 0 0em rgba(0, 0, 0,0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0,0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0,0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0,0.2), 2.5em 0em 0 0em rgba(0, 0, 0,0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0,0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0,0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0,0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0,0.2), 0em 2.5em 0 0em rgba(0, 0, 0,0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0,0.7), -2.6em 0em 0 0em #000, -1.8em -1.8em 0 0em rgba(0, 0, 0,0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0,0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0,0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0,0.7), -1.8em -1.8em 0 0em #000;
  }
}*/
/*#container.loading .loader_wrap .spinner span:nth-child(1) {
	background: #f18d02;
	animation: 1500ms -500ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(2) {
	background: #38a1db;
	animation: 1500ms -400ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(3) {
	background: #005d97;
	animation: 1500ms -300ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(4) {
	background: #c11920;
	animation: 1500ms -200ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(5) {
	background: #e8380d;
	animation: 1500ms -100ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(6) {
	background: #ebca00;
	animation: 1500ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(7) {
	background: #00aa71;
	animation: 1500ms 100ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(8) {
	background: #6cbb5a;
	animation: 1500ms 200ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(9) {
	background: #674498;
	animation: 1500ms 300ms infinite extendBar;
}
#container.loading .loader_wrap .spinner span:nth-child(10) {
	background: #ef858c;
	animation: 1500ms 400ms infinite extendBar;
}*/

@-webkit-keyframes extendBar {
	0% {
		height: 4px;
	}
	50% {
		height: 4px;
	}
	75% {
		height: 14px;
	}
	100% {
		height: 4px;
	}
}
@keyframes extendBar {
	0% {
		height: 4px;
	}
	50% {
		height: 4px;
	}
	75% {
		height: 14px;
	}
	100% {
		height: 4px;
	}
}
@media only screen and (max-width: 1200px) {
/*#container.loading .loader_wrap {
	display: none;
}
#container.loading .loader_wrap .spinner {
	width: 300px;
	height: 150px;
}*/
#container.loading .loader_wrap .loader{
    margin-top: 150px;
}
#container.loading .loader_wrap .spinner {
position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
background: url(/files/main2024-sp-bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
	background-size: 100% auto;
}
#container.loading .loader_wrap .spinner span {
	display: none;
}
}

/*-----------------------------------------
	key_field
-----------------------------------------*/
#video_wrap {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	height: 100vh;
	background: url(/files/top/bg_movie.jpg) no-repeat center center;
	background-size: cover;
	opacity: 1;
}

#video_wrap::before {
	position: absolute;
	top: 0;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(45deg, rgba(0,0,0,.2) 50%, rgba(0,0,0,.4) 50%);
	background-size: 4px 4px;
	content: "";
}

#video_wrap::after {
	position: absolute;
	top: 0;
	z-index: 2;
	display: block;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 63, 121, .1) 0%, rgba(45, 117, 255, .1) 100%);
	content: "";
	content: "";
}

#video {
	position: absolute;
	z-index: 1;
	display: block;
}

#video_wrap .sp_slide {
	display: none;
}

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
	#video {
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
	}
}
@media (max-aspect-ratio: 16/9) {
	#video {
		left: 50%;
		height: 100%;
		transform: translateX(-50%);
	}
}

#container .loader_wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	pointer-events: none;
}
.loader_wrap::after {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: url(/files/common/copy_w.svg) no-repeat 24px center;
	background-attachment: fixed;
	background-size: 16px 367px;
	content: "";
}

.key_field {
	position: relative;
	min-height: 600px;
	height: 100vh;
	background-size: auto 100%;
}
@media only screen and (max-width: 767px) {
	.key_field {
		height: calc(100vh - 56px);
	}
	#video_wrap {
		background: none;
	}
	#video {
		display: none;
	}
	#video_wrap .sp_slide {
		display: block;
	}
	#video_wrap .sp_slide li {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		opacity: 0;
		overflow: hidden;
		margin: 0 auto;
		width: 100%;
		height: 60vh;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-animation: anime 27s 0s infinite;
		animation: anime 27s 0s infinite;
	}
	#video_wrap .sp_slide li:nth-of-type(1) {
		background-image: url(/files/top/sp_slide1.jpg);
	}
	#video_wrap .sp_slide li:nth-of-type(2) {
		background-image: url(/files/top/sp_slide2.jpg);
		-webkit-animation-delay: 3s;
		animation-delay: 3s;
	}
	#video_wrap .sp_slide li:nth-of-type(3) {
		background-image: url(/files/top/sp_slide3.jpg);
		-webkit-animation-delay: 6s;
		animation-delay: 6s;
	}
	#video_wrap .sp_slide li:nth-of-type(4) {
		background-image: url(/files/top/sp_slide4.jpg);
		-webkit-animation-delay: 9s;
		animation-delay: 9s;
	}
	#video_wrap .sp_slide li:nth-of-type(5) {
		background-image: url(/files/top/sp_slide5.jpg);
		-webkit-animation-delay: 12s;
		animation-delay: 12s;
	}
	#video_wrap .sp_slide li:nth-of-type(6) {
		background-image: url(/files/top/sp_slide6.jpg);
		-webkit-animation-delay: 15s;
		animation-delay: 15s;
	}
	#video_wrap .sp_slide li:nth-of-type(7) {
		background-image: url(/files/top/sp_slide7.jpg);
		-webkit-animation-delay: 18s;
		animation-delay: 18s;
	}
	#video_wrap .sp_slide li:nth-of-type(8) {
		background-image: url(/files/top/sp_slide8.jpg);
		-webkit-animation-delay: 21s;
		animation-delay: 21s;
	}
	#video_wrap .sp_slide li:nth-of-type(9) {
		background-image: url(/files/top/sp_slide9.jpg);
		-webkit-animation-delay: 24s;
		animation-delay: 24s;
	}
}

@keyframes anime {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	11% {
		opacity: 1;
	}
	16% {
		opacity: 0;
		transform: scale(1.2) ;
		z-index: 2;
	}
	100% { opacity: 0 }
}

.fv_copy {
	width: 100%;
	height: 100%;
}
.fv_copy img {
	position: relative;
	top: 50%;
	display: block;
	margin: 0 auto;
	min-width: 460px;
	width: 30%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	        transform: translateY(-50%);
}

div.cta_btn {
	position: absolute;
	top: 50%;
	right: 16px;
	vertical-align: middle;
	-webkit-transform: translateY(-50%); /* Safari用 */
	        transform: translateY(-50%);
}
div.cta_btn a {
	position: relative;
	display: block;
	padding: 16px 8px;
	height: 220px;
	border: 2px solid #fff;
	color: #fff;
	-ms-writing-mode: tb-rl;
	text-align: center;
	letter-spacing: -3px;
	font-family: "Lato", sans-serif;
	-webkit-transition: all .3s ease-out;
	        transition: all .3s ease-out;

	text-orientation: upright;
	    writing-mode: vertical-rl;
}
div.cta_btn a::after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	opacity: 0;
	-webkit-transition: all .3s ease-out;
	        transition: all .3s ease-out;
	pointer-events: none;
}
div.cta_btn a.fv_opencampus::after {
	background: linear-gradient(-45deg, #30a2f0,#33e5e5);
}
div.cta_btn a.fv_document::after {
	background: linear-gradient(-45deg, #ff3b3b,#e83d99);
}
div.cta_btn a:last-child {
	margin-top: -2px;
	letter-spacing: 10px;
}

div.important_anc {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	margin: 0 auto;
	padding: 60px 80px;
	width: 100%;
}
div.important_anc h2 {
	position: relative;
	padding-right: 32px;
	color: #fff;
	white-space: nowrap;
	font-weight: 400;
	font-family: "Lato", sans-serif;
}
div.important_anc h2::before {
	position: relative;
	bottom: -5px;
	padding-top: 12px;
	padding-right: 5px;
	color: #fff;
	content: "\e942";
	font-size: 3rem;
	font-family: "tsb";
	line-height: 0;
}
div.important_anc h2 span {
	display: block;
	padding-left: 34px;
	font-weight: 300;
	font-size: 1.4rem;
}
div.important_anc ul {
	width: 100%;
}
div.important_anc ul li + li {
	margin-top: .5rem;
}
div.important_anc ul li a {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 16px 36px 16px 16px;
	width: 100%;
	background: rgba(255,255,255,.8);
	color: #222;
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-transition: all .3s ease-out;
	        transition: all .3s ease-out;
}
div.important_anc ul li a::before {
	position: absolute;
	top: 0;
	right: 6px;
	bottom: 0;
	display: block;
	margin: auto;
	height: 16px;
	color: #afafaf;
	content: "\e93c";
	font-size: 12px;
	font-family: "tsb";
	-webkit-transform: scale(.6);
	        transform: scale(.6);
}
/* PC HOVER */
@media only screen and (min-width: 767px) {
	div.cta_btn a:hover::after {
		opacity: 1;
	}
	div.important_anc ul li a:hover {
		opacity: .8;
	}
}

@media only screen and (max-width: 767px) {
	.loader_wrap::after {
		display: none;
	}
	div.important_anc {
		display: block;
		margin: 0 auto;
		padding: 8px 0 8px 8px;
	}
	div.important_anc ul {
		margin-top: 16px;
	}
	.fv_copy img {
		min-width: 1;
		max-width: 400px;
	}
	.fv_copy img {
		top: 45%;
		min-width: 100px;
		width: 78%;
	}
}


/*-----------------------------------------
	banner_field
-----------------------------------------*/

.banner_field {
	position: relative;
	margin: 0 auto 60px;
	max-width: 1386px;
	width: 92%;
}
.banner_field .banner li a {
	display: block;
	margin: 0 10px;
	height: 100%;
}

.banner_field .banner li a img {
	display: block;
	width: 100%;
}

.banner_field .banner .slick-dots {
	bottom: -36px;
}
.banner_field .banner .slick-dots li {
	width: 10px;
	text-align: center;
}
.banner_field .banner .slick-dots > li:first-child:last-child {
	display: none;
}
.banner_field .banner .slick-dots li button::before {
	width: 7px;
	height: 7px;
	border-radius: 5px;
	background: #222;
	content: "";
}

.banner_field .banner .slick-prev,
.banner_field .banner .slick-next {
	z-index: 1;
	padding: 0 0 3px;
	width: 30px;
	height: 30px;
	background: #4b4b4b;
}

.banner_field .banner .slick-prev::before,
.banner_field .banner .slick-next::before {
	display: block;
	content: "\e93c";
	font-size: 12px;
	font-family: "tsb";
	-webkit-transform: scale(.6);
	        transform: scale(.6);
}

.banner_field .banner .slick-prev::before {
	-webkit-transform: scale(.6) scale(-1, 1);
	        transform: scale(.6) scale(-1, 1);
}
.banner_field .banner .slick-prev {
	left: 0;
}
.banner_field .banner .slick-next {
	right: 0;
}

@media only screen and (max-width: 767px) {
	.banner_field {
		width: 100%;
	}
	.banner_field .banner .slick-prev {
		left: 4%;
	}
	.banner_field .banner .slick-next {
		right: 4%;
	}
}

/*-----------------------------------------
	course
-----------------------------------------*/
.course_field {
	position: relative;
}
.course_field ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between ;
}
.course_field ul li {
	position: relative;
	overflow: hidden;
	flex-basis: auto;
	margin-bottom: 16px;
	width: 19%;
}
.course_field ul li img {
	width: 100%;
	transition: all .5s ease;
}
.course_field ul li figure {
	position: relative;
}
.course_field ul li figcaption {
	position: absolute;
	bottom: 16px;
padding: 8px;
	background-color: #222;
	color: #fff;
	font-size: 1.6rem;
line-height: 2rem;
}
li figcaption span {
	display: block;
	/*padding-top: 2px;*/
	font-size: 1rem;
}
.btn.title_right {
	position: absolute;
	top: 40px;
	right: 0;
	width: 186px;
}
.btn.title_right:after {
	top: 15px;
}
@media only screen and (min-width: 767px) {
	.course_field ul li a:hover img {
		box-shadow: rgba(0, 0, 0, .1) 0 4px 12px;
		opacity: .8;
		-webkit-transform: scale(1.1);
		        transform: scale(1.1);
	}
}

/*-----------------------------------------
	TARGET
-----------------------------------------*/

.target_field {
	position: relative;
}
.target_field::before {
	position: absolute;
	display: block;
	width: 85%;
	height: 100%;
	background-color: #f2f1ed;
	content: "";
}
.target_field .cont_outer {
	padding: 48px 4%;
}
.target_field dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between ;
	width: 100%;
}
.target_field dt {
	padding-left: 16px;
	width: calc(20% - 12px);
	font-weight: bold;
	font-size: 2.6rem;
	line-height: 1.2;
}
.target_field dt span.blue {
	color: #2189d6;
}
.target_field dt span.heading_caption {
	display: block;
	padding-top: 8px;
	font-size: 1.3rem;
}
.target_field dl dd {
	margin-bottom: 16px;
	width: calc(20% - 12px);
}

.target_field dl dd a {
	position: relative;
	display: block;
	padding: 24px 8px;
	color: #222;
	text-align: center;
}

@media only screen and (max-width: 1420px) {
	.cont_outer {
		padding-right: 40px;
		padding-left: 40px;
	}

	.target_field .cont_outer {
		padding: 48px 40px;
	}
.target_field dt span.heading_caption {
	display: inline-block;
	padding-left: 8px;
	font-weight: normal;
}
}
/*-----------------------------------------
	Pickup
-----------------------------------------*/

.pickup_l_outer {
	position: relative;
	display: flex;
}
.pickup_l_outer::before {
	position: absolute;
	top: 20%;
	right: 0;
	left: 0;
	display: block;
	margin: auto;
	width: 400px;
	height: 200px;
	background-image: url(/files/top/img_topics_copy.png);
	background-size: cover;
	content: "";
}
.pickup_l_outer > div {
	overflow: hidden;
	width: 50%;
}
.pickup_l_outer figure {
	display: block;
	width: 100%;
	height: 500px;
}
.pickup_l_outer .pickup_right figure {
	background: url(/files/top/img_tsb_world.jpg) no-repeat top center;
	background-size: cover;
}
.pickup_l_outer .pickup_left figure {
	background: url(/files/top/img_interview.jpg) no-repeat top center;
	background-size: cover;
}
.pickup_l_outer figure img {
	display: none;
}
.pickup_l_inner {
	padding-bottom: 60px;
	max-width: 680px;
}
.pickup_right {
	padding-top: 100px;
}
.pickup_left .pickup_l_inner {
	float: right;
	padding-right: 80px;
}
.pickup_right .pickup_l_inner {
	float: left;
	padding-left: 80px;
}
.pickup_field .pickup_l_outer h2 {
	position: relative;
	top: -24px;
}
.pickup_field h2 span.pickup_title {
	position: relative;
	left: -16px;
	display: inline-block;
	padding: 8px 16px 0;
	background-color: #fff;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 2.8rem;
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	line-height: 1.5;
}
.pickup_field h2 span.pickup_sub {
	display: block;
	padding-top: 8px;
	color: #7a7a7a;
	font-size: 1.2rem;
}
.pickup_field .pickup_left h2::before {
	position: absolute;
	top: -100%;
	left: -16px;
	display: block;
	color: #fff;
	content: "INTERVIEW";
	font-weight: 900;
	font-size: 7rem;
	font-family: "Lato", sans-serif;
}
.pickup_field .pickup_right h2::before {
	position: absolute;
	top: -100%;
	left: -16px;
	display: block;
	color: #fff;
	content: "WORLD";
	font-weight: 900;
	font-size: 7rem;
	font-family: "Lato", sans-serif;
}
.pickup_l_inner p {
	padding: 24px 0;
	line-height: 2;
}
.pickup_s_outer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.pickup_s_outer ul li {
	position: relative;
	margin-bottom: 40px;
	width: calc(33% - 16px);
}

.pickup_s_outer ul li figure {
	position: relative;
	display: block;
	margin-bottom: 8px;
	width: 100%;
}
.pickup_s_outer ul li figure::after {
	position: absolute;
	top: 4px;/*元々6px*/
	left: 6px;/*元々8px*/
	display: block;
	width: 100%;
	height: calc(100% + 3px);
	border: 2px solid;
	border-width: 2px;
	border-image-source: linear-gradient(to left, #528eff, #ff3176);
	border-image-slice: 1;
	content: "";
}
.pickup_s_outer ul li img {
	max-width: 100%;
	width: auto;
}

.pickup_s_outer div.inner {
	padding: 16px 8px 60px; /*元々16px 16px 85px*/
}
.pickup_s_outer div.inner h2 span {
	display: block;
	padding: 5px 0 16px;
	color: #a7a7a7;
	font-weight: 300;
	font-size: 1.2rem;
}
.pickup_s_outer div.inner p {
	padding: 16px 0;
	line-height: 1.68;
}
.pickup_s_outer div.inner .btn {
	position: absolute;
	bottom: 16px;
	display: block;
	width: 180px;
	height: 55px;
}

.pickup_s_outer div.inner .btn:after {
	top: auto;
	bottom: 25px;
}

@media only screen and (max-width: 1420px) {
	.pickup_left .pickup_l_inner {
		float: right;
		padding-right: 40px;
		padding-left: 40px;
	}
	.pickup_right .pickup_l_inner {
		float: left;
		padding-right: 40px;
		padding-left: 40px;
	}
}

@media only screen and (max-width: 767px) {
	.pickup_left .pickup_l_inner {
		float: right;
		padding-right: 0;
		padding-left: 4%;
	}
	.pickup_right .pickup_l_inner {
		float: left;
		padding-right: 4%;
		padding-left: 0;
	}
	.pickup_s_outer div.inner .btn {
		left: 0;
	}
}


/*-----------------------------------------
	News
-----------------------------------------*/
ul.tab_list {
	justify-content: flex-end;
}
.news_field {
	position: relative;
margin-top: 0px;
}
.news_field::before {
	position: absolute;
	display: block;
	width: 85%;
	height: 100%;
	background-color: #f2f1ed;
	content: "";
}
.news_field::after {
	position: absolute;
	right: 10%;
	bottom: -200px;
	display: block;
	color: #f2f1ed;
	content: "SNS"; 
	font-weight: 700;
	font-size: 19rem;
}
.news_field .cont_outer {
	padding: 80px 4% 0 ;
}
.news_field .cont_inner {
	margin-top: 40px;
}
.news_field .cont_head {
	display: flex;
}
.news_field .cont_head h2 {
	flex-basis: 50%;
}
.news_field .article_list {
	padding-bottom: 60px;
}
.news_field .article_list li {
	position: relative;
}
.news_field .article_list figure a {
	display: block;
}
.news_field .article_list li {
	background-color: #fff;
}
.news_field .article_list li a {
	transition: all .5s ease;
}
.news_field .article_list li a:hover {
	box-shadow: rgba(0, 0, 0, .1) 0 4px 12px;
}
.news_field .article_list figure img {
	position: relative;
	margin-top: -24px;
	padding-right: 24px;
	width: 100%;
}
.news_field .article_list .txt_area {
	padding: 8px 8px 16px 16px;
}
.news_field .article_list span.date {
	position: absolute;
	top: 0;
	right: -10px;
	-ms-writing-mode: tb-rl;
	white-space: nowrap;
	    writing-mode: vertical-rl;
}
.news_field .article_list span.category {
	position: relative;
	top: -8px;
	left: -16px;
	padding: 8px 16px;
	background-color: #222;
	color: #fff;
	font-size: 1.2rem;
}
.news_field .article_list ul::after {
	position: absolute;
	right: -16px;
	bottom: 16px;
	display: block;
	color: #a7a7a7;
	content: "\e93c";
	font-size: 1rem;
	font-family: "tsb";
}
.news_field .article_list .tag li {
	display: inline-block;
	margin: 0 8px 0 0;
	color: #999;
	letter-spacing: .06em;
	font-size: 1.2rem;
}
.news_field .article_list p {
	padding-bottom: 8px;
	font-size: 1.5rem;
}
.news_field .article_list span {
	font-size: 1.2rem;
    color:#888787;
}
.news_field .article_list .post_info .date {
	font-size: 1.5rem;
    color:#222;
}

@media only screen and (max-width: 1420px) {
	.news_field .cont_outer {
		padding: 80px 4% 0 4% ;
	}
	.sns_field .cont_outer {
		padding-left: 4%;
		padding-right: 4%;
	}
	.target_field .cont_outer {
		padding: 48px 4%;
	}
	.btn.title_right {
		right: 4%;
	}
}

@media only screen and (max-width: 980px) {
	.pickup_s_outer ul li {
		width: calc(50% - 16px);
	}
}

@media only screen and (max-width: 767px) {
	.cont_outer {
		padding-right: 0;
		padding-left: 0;
	}
	.pickup_s_outer.cont_outer {
		padding-right: 4%;
		padding-left: 4%;
	}
	.course_field ul li {
		margin-bottom: 0;
		width: 50%;
	}
	.course_field ul li figcaption {
		bottom: 8px;
		font-size: 1.4rem;
	}
	.btn.title_right {
		position: relative;
		right: 0;
		top: 0;
		margin: 24px 4% 0;
		display: block;
	}

	.target_field::before {
		width: 90%;
	}
	.target_field dt {
		margin-bottom: 24px;
		width: 100%;
		font-size: 2.4rem;
	}
	.target_field dl dd {
		margin-bottom: 0;
		width: 50%;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}
	.target_field dl dd:nth-child(odd) {
		border-right: 1px solid #ccc;
	}
	.target_field dl dd:nth-child(9),
	.target_field dl dd:last-child {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	.pickup_l_outer > div {
		overflow: hidden;
		width: 95%;
	}
	.pickup_l_outer > div.pickup_left {
		margin: 0 auto 0 0;
	}
	.pickup_l_outer > div.pickup_right {
		margin: 0 0 0 auto;
	}
	.pickup_l_outer {
		display: block;
	}
	.pickup_l_outer figure {
		height: 240px;
	}
	.pickup_field .pickup_left h2::before {
		top: -215px;
		right: -15px;
		left: auto;
		font-style: italic;
		font-size: 4rem;

		writing-mode: vertical-rl;
	}
	.pickup_field .pickup_right h2::before {
		top: -215px;
		right: auto;
		left: -15px;
		font-style: italic;
		font-size: 3.4rem;

		writing-mode: vertical-rl;
	}
	.pickup_field h2 span.pickup_title {
		font-size: 2.4rem;
	}
	.pickup_l_outer::before {
		display: none;
	}
	.pickup_left .pickup_l_inner {
		float: none;
	}
	.pickup_l_inner p {
		padding: 0 0 32px 0;
		line-height: 2;
	}
	.pickup_right {
		padding-top: 0;
	}
	.news_field .cont_head {
		display: block;
	}
	.news_field::before {
		width: 100%;
	}
	.news_field .article_list > li {
		margin-top: 40px;
		margin-left: 8px;
		width: 98%;
	}
	.news_field .article_list a {
		display: flex;
		margin-left: -8px;
	}
	.news_field .article_list figure {
		flex-basis: 55%;
		padding-bottom: 10px;
	}
	.news_field .article_list figure img {
		margin-top: -8px;
		padding-right: 8px;
	}
	.news_field .article_list span.category {
		top: -18px;
		left: auto;
		padding: 4px 8px;
	}
	.news_field .article_list .txt_area {
		padding: 4px 16px 16px 8px;
width: 60%;
	}
	.news_field .article_list span.date {
		top: 50%;
		right: -10px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.news_field .article_list ul::after {
		display: none;
	}
	.news_field::after {
		right: 0;
		bottom: -103px;
		font-size: 10rem;
	}
	ul.tag li {
		display: inline-block;
	}
	ul.tab_list {
		justify-content: flex-start;
	}
}
@media only screen and (max-width: 600px) {
	.course_field ul li figcaption {
		font-size: 1.2rem;
    line-height: 1.8rem;
	}
	.pickup_s_outer ul {
		display: flex;
	}
	.pickup_s_outer ul li {
		margin-bottom: 24px;
		 width: 47%;
	}
	.pickup_s_outer ul li:nth-child(n+3) {
		margin-bottom: 24px;
	}
.tokutyo{
font-size: 1.3em;
    font-weight: 500;
}
}
@media only screen and (max-width: 374px) {
	.target_field dl dd a {
		padding: 24px 4px;
		letter-spacing: 0;
	}
	.news_field .article_list figure {
		flex-basis: 100%;
	}
}
/*-----------------------------------------
	News追加
-----------------------------------------*/
.news_field .article_list figure{
width: 400px;
height: 300px;
}
.news_field .article_list figure img{
 width: 100%;
height: 100%;
object-fit: contain;
}
@media only screen and (max-width: 767px) {
.news_field .article_list figure img {
height: auto;
 }
.news_field .article_list figure {
 width: 100%;
height: auto;
 }
}
/*-----------------------------------------
	追加CSS
-----------------------------------------*/
/*資料請求ポップアップ*/
.shiryo_top{
z-index: 30;
position: fixed;
top: 10%; 
left: 4%;
width: 11%; 
height: auto;
}
.shiryo_top img{
display: block;
width: 100%; 
height: auto;
}
.shiryo_top label{
position: relative;
display: block;
}
.shiryo_top label::after {
position: absolute;
right: -8%;
top: 0.5%;
width: 1.6em;
height: 1.6em;
display: flex;
align-items: center;
justify-content: center;
background-color: #F88;
border-radius: 50%;
color: white;
content: "×";
z-index: 1;
cursor: pointer;
}
#close{ display: none; }
#close:checked ~div{ display: none; }

@media screen and (max-width:767px) {
.shiryo_top{
top: 60px;
width: 30%; 
}
.shiryo_top img{
width: 80%;
}
.shiryo_top label::after {
right: 10%;
}
}
/*スライダーの背景*/
.banner_bg{
 background-image: linear-gradient(-45deg,#e3f9f8 40%,#fff 40%,#fff 50%,#e3f9f8 50%,#e3f9f8 90%,#fff 90%,#fff);
    background-size: 10px 10px;
    background-position: 0 0,5px 5px;
    width: 70%;
    height: 140%;
    position: absolute;
    top: -40px;
    margin: 0 15%;
}
@media screen and (max-width: 767px) {
.banner_bg{
width: 90%;
margin: 0 5%;
}
}

/*-----------------------------------------
	Animation
-----------------------------------------*/

@-webkit-keyframes fadeIn {
	from {
		top: -60px;
		opacity: 0;
	} to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		top: -60px;
		opacity: 0;
	} to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeUpCopy {
	from {
		margin-top: 60px;
		opacity: 0;
	} to {
		margin-top: 0;
		opacity: 1;
	}
}
@keyframes fadeUpCopy {
	from {
		margin-top: 60px;
		opacity: 0;
	} to {
		margin-top: 0;
		opacity: 1;
	}
}

@-webkit-keyframes fadeUp {
	from {
		bottom: -60px;
		opacity: 0;
	} to {
		bottom: 0;
		opacity: 1;
	}
}
@keyframes fadeUp {
	from {
		bottom: -60px;
		opacity: 0;
	} to {
		bottom: 0;
		opacity: 1;
	}
}

@-webkit-keyframes fadeRight {
	from {
		right: -60px;
		opacity: 0;
	} to {
		right: 16px;
		opacity: 1;
	}
}
@keyframes fadeRight {
	from {
		right: -60px;
		opacity: 0;
	} to {
		right: 16px;
		opacity: 1;
	}
}

@-webkit-keyframes fadeRight {
	from {
		right: -60px;
		opacity: 0;
	} to {
		right: 16px;
		opacity: 1;
	}
}
@keyframes fadeRight {
	from {
		right: -60px;
		opacity: 0;
	} to {
		right: 16px;
		opacity: 1;
	}
}
/*-----------------------------------------
	ハンバーガー設定
-----------------------------------------*/
@media only screen and (max-width: 1200px) {
header .inner {
    margin: 0 4%;
    padding: 0;
    border-bottom: 1px solid rgba(128,0,0,0);
}
header .sp_menu_wrap {
    border: 2px solid #fff;
}
}
/*-----------------------------------------
	TOPサイドボタンの設定
-----------------------------------------*/
div.cta_btn a.fv_opencampus {
    background: linear-gradient(-45deg, #30a2f0,#33e5e5);
}
div.cta_btn a.fv_document {
   background: linear-gradient(-45deg, #727172,#3e3a39);
}
/*対象者別メニュー以下の設定*/
.pickup_l_outer {
    position: relative;
    display: flex;
    max-width: calc(1366px + 8%);
    min-width: 1000px;
    margin: 0 auto;
    padding-right: 40px;
    padding-left: 40px;
}
.pickup_right {
    padding: 0px 20px 0px;
}
.pickup_l_outer figure {
    display: block;
    width: 100%;
    height: 300px;
}
.pickup_right .pickup_l_inner {
    float: left;
    padding-left: 40px;
}
.pickup_l_inner p {
    padding: 0px 0px;
    line-height: 2;
    margin-top: -15px;
}
.pickup_left{
padding: 0px 20px 0px;
}
.pickup_left .pickup_l_inner {
    float: right;
    padding-left: 40px;
}
.pickup_s_outer div.inner {
    padding: 16px 8px 16px;
}
.tokutyo{
font-weight: bold;
}
@media screen and (max-width: 767px) {
.pickup_l_outer {
padding-right: 4%;
    padding-left: 4%;
    display: block;
    min-width: 320px;
}
.pickup_right{
padding: 0px;
}
.pickup_l_outer > div {
    width: 100%;
}
.pickup_l_outer figure{
height: 200px;
}
.pickup_right .pickup_l_inner {
padding-left: 0px;
    padding-right: 0px;
}
.pickup_left{
padding: 0px;
}
.pickup_l_outer figure {
height: 200px;
}
.pickup_left .pickup_l_inner {
padding-left: 0px;
}
}
/*-----------------------------------------
	ファーストビューの変更
-----------------------------------------*/
/*-----------------------------------------
	key_field
-----------------------------------------*/
#video_wrap{
display: none;
}
.key_field {
	height: calc(100vh - 120px);
	position: relative;
	overflow: hidden;
	background: url(/files/top/mainvisual.webp) repeat-x 0 0;
	background-size: auto 100%;
  -webkit-animation: mv_slide 50s linear infinite;
	        animation: mv_slide 50s linear infinite;
}
@-webkit-keyframes mv_slide {
	from { background-position: 0 0;}
	to { background-position: -2278px 0;}
}
@keyframes mv_slide {
	from { background-position: 0 0;}
	to { background-position: -2278px 0;}
}
/* IE */
_:-ms-lang(x)::-ms-backdrop, .key_field .important_anc a:before {
	top: 10px;
	-webkit-transform: translateX(-100%) rotate(90deg);
	transform: translateX(-100%) rotate(90deg);
}
.wrapper {
    padding: 20px 0;
}
@media only screen and (max-width: 767px) {
	.key_field:before {
		width: 285px;
	}
	.first_view:before {
		display: none;
		}
}
@media screen and (max-width: 767px){
.key_field {
    height: calc(100vh - 180px);
    min-height: 200px;
    top: -60px;
	background: url(/files/top/mainvisual-sp.webp) repeat-x 0 0;
}
.wrapper {
    padding: 20px 0;
    margin-top: -60px;
}
}
@media only screen and (max-width: 767px){
.fv_copy img {
    top: 50%;
}
}