@charset "utf-8";
.img-title_box {
	background-image: url(../images/opencampus/photo1.jpg);
    height:75vw;
    position: relative;
}
.img-title_box h2{font-size:7.5vw;box-shadow: 5px 5px 0px #ffff00;}
.img-title_box p{font-size:6vw;color: #000;text-shadow: 2px 2px 1px #fff;margin-bottom:.2em;font-weight: bold;z-index: 1;}
.layer{position: absolute;width: 100%!important;height: 100%;background: #fff;opacity: .5;top:0;left:0;}
.oc01 {
	padding-bottom: 15px;
	padding-top: 40px;
    text-align: center;
    color: #000;
    width: 100%;
}
.bigttl{
    font-weight: bold;
    font-size: 2.1rem;
    padding: .85em 0;
    text-align: center;
}
.bigttl > span,.oc04 span{
    background:linear-gradient(transparent 70%, #ffff00 70%);
}
.oc02{
    padding:0px 20px 45px 20px;
}
.wrap02{
    display:flex;
    flex-wrap:wrap;
    width: 100%!important;
}
.wrap02 h3{font-size:1.6rem;margin-bottom: 1.5em;}
.wrap02 > div{width:100%;margin-top:30px;color: #fff;}
.wrap02 > div .cnt{background: #01020e;}
.wrap02 .cnt{padding: 30px 30px;}
.oc04{
    padding-bottom: 15px;
}
.oc04>div{
    width: 90%;
	text-align: center;
	margin:20px auto;
	padding: 15px 15px 0;
}
.oc04 h3{
    font-size: 2.1rem;
    margin-bottom: 1em;
    line-height: 1.3em;
    font-weight: bold;
}
.oc04 p{color: #555;letter-spacing: -.01em;font-weight: bold;}
.content.link div{padding: 60px 20px;}
.content.link:nth-of-type(odd){background:#01020e;color: #fff;}
.content.link{display: flex;flex-wrap: wrap;}
.content.link h3{font-size: 2.4rem;margin-bottom: .85em;}
.content.link .btn_area{margin-top:20px;padding: 0;}
.btn_area,.content.link a{
    text-align: center;
}
.content.link a{min-width: 95%;}
.content.link a:hover,.slidecover a:hover{
    opacity: .5;
    transition-property: opacity;
    transition-duration: .4s;
}
.content.link:last-of-type{position:relative;text-align: center;background: url('../images/opencampus/foreign.jpg');background-position: right 65%;background-size: cover;}
.content.link:last-of-type > div:first-child{width: 100%;color:#01020e;z-index:1;}
.btn_area a,.link>div>a,.slidecover a{margin: 10px;border-radius: 5px;display: inline-block;padding: 16px 30px;font-size: 14px;}
.link>div>a{margin: 30px 10px 0 10px;}
.content.link:nth-of-type(even) a,.slidecover a,
#container .content.link:last-of-type a{background: #01020e;color: #fff;}
.content.link:nth-of-type(odd) a{background: #0051C2;color: #fff;}
.splide__slide{min-height: 555px!important;}
.splide__slide img{position: relative;opacity: .2;object-fit: cover;height: 100%;}
.slidecover{position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 90%;
    border: 4px solid #444;
    padding: 40px 20px;
    text-align:center;
    margin: 40px 20px 23%;
    letter-spacing: normal;
}
.slidecover h3{font-size: 2.1rem;margin:20px 0;font-weight: bold;}
.slidecover p{margin-bottom: 20px;}
.splide__pagination{bottom:5%;}
.splide{padding: 0;}
.splide__pagination__page.is-active{background: #333;}
.splide__arrow svg{fill:#333}
.splide__pagination__page{width: 50px;height: 7px;background: #999;border-radius: 0;}
.splide__arrow--prev{left:2em;}
.splide__arrow--next{right:2em;}
.object-fit{
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

@media screen and (min-width:769px){
    .img-title_box{height: 500px;}
    .img-title_box h2{font-size: 40px;}
    .img-title_box p{font-size: 28px;}
    .bigttl{font-size: 2.25rem;padding: 20px 0;}
    .oc01{padding-top:60px;}
    .oc02{
        padding:35px 20px 65px 20px;
    }
    .wrap02{max-width: 1280px;}
    .wrap02 > div{width:47%;margin: 0 15px 30px;}
    .wrap02 h3{font-size: 18px;font-weight: bold;}
    .content.link > *{width: 50%;min-height: 120px;}
    .content.link div{padding: 60px;}
    .content.link a{min-width: auto;}
    .content.link:nth-of-type(even){flex-direction: row-reverse;justify-content: left;}
    .target > .content.link{padding: 60px;}
    .content.link .btn_area{display: flex;}
    .target > .content.link img{flex-wrap: wrap;object-fit: cover;}
    .target > .content.link img{max-width:792px;align-self:flex-start}
    .content.link h3{font-size:2.25rem;font-weight: bold;}
    .splide__slide{max-height: 600px!important;}
    .slidecover{margin:100px auto;width:55%;}
    .splide__arrows{display:block;}
    .splide__arrow--prev{left:3em;}
    .splide__arrow--next{right:3em;}
    .announce br,.cnt br,.content.link:last-of-type h3 br{display:none;}
    .slidecover small:before{content: "※";}
}


/*-------
2023/05 追加コンテンツ
---------*/
.koutou {
	background-color: #000;
	padding: 60px 20px;
	color: #fff;
}
.koutou div.koutou_block {
	margin-top: 0;
	width: 350px;
	margin-left: auto;
	margin-right: auto;
}
.koutou div.koutou_block + div.koutou_block {
	margin-top: 40px;
}
.koutou .koutou_block h3 {
	font-size: 2.4rem;
	margin-bottom: 0.6em;
	font-weight: bold;
	text-align: left;
}
.koutou .koutou_block h3 .s-txt {
	font-size: 0.8em;
}
.koutou .koutou_block .btn {
	text-align: center;
}
.koutou .koutou_block .btn a {
    border-radius: 5px;
    display: inline-block;
	width: 100%;
    padding: 16px 30px;
    font-size: 14px;
	background: #0051C2;
    color: #fff;
}
.koutou .koutou_block .btn a:hover {
    opacity: .5;
    transition-property: opacity;
    transition-duration: .4s;
}

#container .target .content.link a {
	padding: 22px 22px;
	width: auto;
	font-size: 14px;
}

@media screen and (min-width:769px){
	.koutou {
		padding: 60px;
	}
	.koutou .wrap02 {
		max-width: 980px;
		justify-content: space-between;
	}
	.koutou div.koutou_block {
		margin: 0;
		width: 46%;
	}
	.koutou div.koutou_block + div.koutou_block {
		margin-top: 0px;
	}
	.koutou .koutou_block h3 {
		font-size: 2.0rem;
		margin-bottom: 0.5em;
		text-align: left;
	}
	.koutou .koutou_block h3 .s-txt {
		font-size: 0.8em;
	}
	.koutou .koutou_block .btn {
	}
	.koutou .koutou_block .btn a {
		display: block;
		padding: 22px 50px;
		font-size: 18px;
		text-align: center;
	}
	#container .target .content.link a {
		font-size: 18px;
		padding: 22px 50px;
		width: 450px;
	}
}














