@charset "utf-8";

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	CSS Document
	file name  :base.css
	
	□ all
	□ header
	□ container
	□ footer

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



/*section*/
.section{
	margin-bottom:110px;
	position:relative;
}
.section:last-of-type{
	margin-bottom:0 !important;
}
.sec-inr{
	min-width:960px;
	width:1260px;
	margin:0 auto;
	position: relative;
}
.sec-inr-s{
	width:920px;
	margin:0 auto;
	position: relative;
}
.btn__wrap ul{
	margin-top: 70px;
	display: flex;
	justify-content: center;
}
.btn__wrap li{
	width: 446px;
	position: relative;
	background: -moz-linear-gradient(left, #f37daf, #bb99fe);
	background: -webkit-linear-gradient(left, #f37daf, #bb99fe);
	background: linear-gradient(to right, #f37daf, #bb99fe);
	padding: 10px;
	border-radius: 3px;
	transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.btn__wrap li:hover{
	background: -moz-linear-gradient(left, #bb99fe, #67b7c1);
	background: -webkit-linear-gradient(left, #bb99fe, #67b7c1);
	background: linear-gradient(to right, #bb99fe, #67b7c1);
}
.btn__wrap li:last-of-type{
	margin-left: 60px;
}
.btn__wrap li a{
	width: 100%;
	padding: 20px 0;
	text-align: center;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	display: block;
	border: 2px solid #fff;
	transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.btn__wrap li:hover a{
	opacity: 1;
}
.btn__wrap li:after{
	width: 100%;
	position: absolute;
	content: "";
	left: 10px;
	bottom: -10px;
	background: #d38ddc;
	height: 2px;
}
.btn__wrap li:before{
	height: 100%;
	position: absolute;
	content: "";
	right: -10px;
	top: 10px;
	background: #d38ddc;
	width: 2px;
}
@media screen and (max-width: 1320px) {
	.sec-inr{
		width:100%;
		min-width: 100%;
		padding-left: 60px;
		padding-right: 60px;
	}
}
@media screen and (max-width: 1024px) {
	.btn__wrap li a{
		font-size: 1.4rem;
	}
	.btn__wrap {
		padding-left: 30px;
		padding-right: 30px;
	}
	.btn__wrap ul{
		margin-top: 50px;
		justify-content:space-between;
	}
	.btn__wrap li{
		width: 47%;
	}
}
@media screen and (max-width: 960px) {
	.sec-inr{
		min-width: 100%;
	}
	.sec-inr-s{
		width:100%;
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media screen and (max-width: 599px) {
	.sec-inr,
	.sec-inr-s{
		padding-left: 20px;
		padding-right: 20px;
	}
	.section{
		margin-bottom:70px;
	}
	.btn__wrap ul{
		display: block;
	}
	.btn__wrap li{
		padding: 6px;
		width: 100%;
	}
	.btn__wrap li:nth-child(2){
		margin-top: 15px;
	}
	.btn__wrap li a{
		padding: 15px 0;
		font-size: 1.2rem;
	}
	.btn__wrap li:last-of-type{
		margin-left: 0;
	}
}


/*PAGE EFFECT*/
#page-animate::before {
	 content: '';
	 position: fixed;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #fccfde;
	 z-index: 9999;
	 pointer-events: none;
	 right: 100%;
	 -webkit-transition: right 1s cubic-bezier(0.645, 0.045, 0.355, 1);
	 transition: right 1s cubic-bezier(0.645, 0.045, 0.355, 1);
	backface-visibility:hidden;
}
 #page-animate::after {
	 content: '';
	 position: fixed;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #ded9f8;
	 z-index: 9999;
	 pointer-events: none;
	 left: 100%;
	 -webkit-transition: left 1s cubic-bezier(0.645, 0.045, 0.355, 1);
	 transition: left 1s cubic-bezier(0.645, 0.045, 0.355, 1);
	backface-visibility:hidden;
}
 #page-animate.is-slide-in::before {
 	right: 0;
}
 #page-animate.is-slide::after {
	 left: 0;
}


/*SCROLL EFFECT*/
.effect .ac{
	position:relative;
	overflow:hidden;
}
.effect .ac .bg{
	opacity:0;
	-webkit-animation: fadein-bg 5s 1 ease forwards;
  	animation: fadein-bg 5s 1 ease forwards;
	-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.effect .ac:after{
	content:"";
	display:block;
	background:#fce9f2;
	z-index:2;
	width:0%;
	height:120%;
	left: -10%;
	top: 0;
	position: absolute;
	-webkit-transform: skewX(15deg);
		  transform: skewX(15deg);
	-webkit-animation: fadein0 5s 1 ease forwards;
  	animation: fadein0 5s 1 ease forwards;
	-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.effect .ac:before{
	content:"";
	display:block;
	background:#fff;
	z-index:1;
	width:130%;
	height:120%;
	left: -10%;
	top: 0;
	position: absolute;
	-webkit-transform: skewX(15deg);
		  transform: skewX(15deg);
	-webkit-animation: fadein1 4s 1 ease forwards;
  	animation: fadein1 4s 1 ease forwards;
	-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
@-webkit-keyframes fadein-bg {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadein0 {
	0% {
		width:0%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}
@-webkit-keyframes fadein0 {
	0% {
		width:0%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}

@keyframes fadein1 {
	0% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}
@-webkit-keyframes fadein1 {
	0% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}

.ac-t2{
	opacity:0;
	padding-top:30px;
	-webkit-animation: fadein-t2 3s 1 ease forwards;
  	animation: fadein-t2 3s 1 ease forwards;
}
@keyframes fadein-t2 {
	0% {
		opacity:0;
		padding-top:30px;
	}
	30% {
		opacity:0;
		padding-top:30px;
	}
	60% {
		opacity:1;
		padding-top:0;
	}
	100% {
		opacity:1;
		padding-top:0;
	}
}
@-webkit-keyframes fadein-t2 {
	0% {
		opacity:0;
		padding-top:30px;
	}
	30% {
		opacity:0;
		padding-top:30px;
	}
	60% {
		opacity:1;
		padding-top:0;
	}
	100% {
		opacity:1;
		padding-top:0;
	}
}



/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    header
	
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.header{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:1000;
	padding: 25px 100px 25px 30px;
	
	transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.hd__scroll{
    background: #fff;
}
.hd-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
	position:relative;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: logo*/
.header .hd-logo{
	width:274px;
	height: 63px;
	background: url("/opencampus2021/lib/img/hd_logo.png") no-repeat;
	background-size: 100% auto !important;
	position: relative;
	z-index: 100000;
}
@media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	.header .hd-logo{
		background: url("/opencampus2021/lib/img/hd_logo@2x.png") no-repeat;
	}
}
.header .hd-logo a{
	display: block;
	width: 100%;
	height: 100%;
	line-height:1;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: btn*/
.header nav{
	width: calc(100% - 280px);
}
.header .hd-btn {
	display: flex;
	justify-content:flex-end;
	margin-left: 30px;
}
.header .hd-btn li i{
	margin-right: 10px;
}
.header .hd-btn li img{
	vertical-align: bottom;
}
.header .hd-btn li a{
	width: 100%;
	color: #fff;
	display: block;
	height: 100%;
	text-align: center;
	padding: 15px 35px;
	line-height: 1;
	letter-spacing: 0.02em;
	font-size: 1.5rem;
}
.header .hd-btn li:nth-child(1) a{
	background: #8ac7d9;
}
.header .hd-btn li:nth-child(2) a{
	background: #e498cb;
}
.header .hd-btn li:nth-child(3) a{
	background: #93969f;
}
.fat-nav li.nav02__tp{
	display: none;
}
.fat-nav li.nav02{
	display: block;
}
@media screen and (max-width: 1400px) {
	.header {
		padding: 25px 90px 25px 20px;
	}
	.header .hd-btn li a {
		padding: 15px 20px;
		letter-spacing: 0.01em;
	}
}
@media screen and (max-width: 1200px) {
	.header .hd-btn li a {
		font-size: 1.3rem;
	}
}
@media screen and (max-width: 1100px) {
	.header .hd-logo{
		width:200px;
		height: 46px;
	}
	.header nav{
		width: calc(100% - 200px);
	}
}
@media screen and (max-width: 1024px) {
	.header{
		padding: 20px;
	}
	.header nav{
		width: calc(100% - 220px);
	}
	.header .hd-btn {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		margin: 0;
	}
	.header .hd-btn li{
		width: 33.333333%;
	}
	.header .hd-btn li a {
		font-size: 1.2rem;
		padding: 15px 8px;
	}
}
@media screen and (max-width: 599px) {
	.header{
		padding: 20px 15px 20px;
	}
	.header .hd-logo{
		width:170px;
		height: 40px;
	}
	.header .hd-btn li a {
		font-size: 1rem;
		font-weight: bold;
	}
	.hd__scroll{
		padding: 20px 20px 20px;
	}
	.header .hd-btn li i{
		margin-right: 6px;
	}
	.header .hd-btn li img{
		vertical-align: middle;
		height: 14px;
	}
}



/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    ★ CONTENTS
	
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*
	common
*/
#contents {
	position:relative;
	backface-visibility:hidden;
	transition: all .7s ease;
	z-index:999;
}

section h3.md{
	text-align: center;
	background: -moz-linear-gradient(left, #ffa4ca, #bfcbff);
	background: -webkit-linear-gradient(left, #ffa4ca, #bfcbff);
	background: linear-gradient(to right, #ffa4ca, #bfcbff);
	color: #fff;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	line-height: 1;
	padding: 13px;
	width: 300px;
	margin: 0 auto 50px auto;
	border-radius: 2px;
	font-weight: bold;
	font-size: 1.6rem;
}
.movie-ph,
.movie-ph img{
	cursor: pointer;
	max-width: 100%;
}
@media screen and (max-width: 1024px) {
	section h3.md{
		padding: 10px;
		width: 260px;
		margin: 0 auto 30px auto;
		font-size: 1.5rem;
	}
	.movie-ph{
		padding-left: 30px;
		padding-right: 30px;
	}
}
@media screen and (max-width: 599px) {
	section h3.md{
		font-size: 1.3rem;
	}
	.movie-ph{
		padding-left: 20px;
		padding-right: 20px;
	}
}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    ★ FOOTER
	
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.footer{
	width:100%;
	padding: 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
	background: #fff;
}
.ft-left{
	width: 500px;
	display: flex;
	justify-content: space-between;
}
.ft-right{
	width: 50%;
}
/*
	ft-nav
*/
.footer .ft__logo{
	width: 198px;
	height: 44px;
	background: url("/opencampus2021/lib/img/ft_logo.png") no-repeat;
}
.footer .ft__add{
	width: calc(100% - 230px);
	font-size: 1.3rem;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.footer .ft__logo{
		background: url("/opencampus2021/lib/img/ft_logo@2x.png") no-repeat center center;
		background-size: 100% auto;
	}
}
@media screen and (max-width: 599px) {
	.footer .ft__nav{
		width: 100%;
	}
	.footer .ft__nav ul li{
		font-size:1.1rem;
	}
}
/*
	ft-copyright
*/
.footer .ft__copyright{
	font-size:1.1rem;
	text-align:right;
	color: #d7d7d7;
}
@media screen and (max-width: 1024px) {
	.footer{
		display: block;
		text-align: center;
		padding: 40px 40px 70px;
	}
	.footer .ft__logo{
		margin: 0 auto 15px;
	}
	.ft-left{
		width: 100%;
		display: block;
	}
	.ft-right{
		width: 100%;
	}
	.footer .ft__add{
		width: 100%;
		font-size: 1.1rem;
	}
	.footer .ft__copyright{
		width:100%;
		margin-top: 30px;
		text-align: center;
		font-size:0.8rem;
	}
}