@charset "UTF-8";

/*ロゴ*/
.logo{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;	
}
.logo img{
	width: 20%;
	height: auto;
	margin-top: 20vh;
	
}


/*メインエリア*/
#header{
	min-height: 100vh;
	/*background-image: url("images/back1.jpg");*/
	background: linear-gradient(to bottom,#a5eeff 20%,#FFffff,#ffdea8,#be84b1,#0c5681);
	color: #fff;
	text-align: center;
}
.back1{
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.box{
	color: rgba(255,255,255,0.87);
	padding: 40px 10%;
	justify-content: center;
	align-items: center;
	text-align: center;
}
/*--視覚デザイン学科の1日を覗こう--*/
#box1{
    background: linear-gradient(to bottom,#0c5681 50%,#be84b1);
	display: flex;
}
h1{
    font-size: 5vw;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.30);
	text-align: center;
}

/*--choice--*/
#box2{
    background: linear-gradient(to bottom,#be84b1, #a5eeff);
	
}
h2{
	font-size: 70px;
	text-shadow: 3px 3px 5px rgba(0,0,0,0.30);
}
.container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 30px;
}
.photo{
    background: rgba(56,255,231,1.00);
    border-radius: 50%;
    width: 14vw;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.30);
}
.item{
	margin: 10px;
	color: rgba(26,26,26,1.00);
	text-align: left;
}
#box3{
    background: linear-gradient(to bottom,#a5eeff,#fedea8,#be84b1,#0c5681);
}
#box4{
    background: linear-gradient(to bottom,#fedea8,#be84b1,#0c5681);
}

#footer{
  background:#A5EDFE;
  color:#fff;
  padding:40px;
  text-align:center;
}
#footer2{
  background:#0c5681;
  color:#fff;
  padding:35px;
  text-align:center;
}

#footer a{
  color: #fff;
}

/*======== student分岐用============*/

/*写真*/
.photo{
    background: rgba(56,255,231,1.00);
    border-radius: 50%;
    width: 150px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.30);
}
.item{
	margin: 10px;
	color: rgba(26,26,26,1.00);
	text-align: left;
}

h3{
	color: rgba(255,255,255,1.00);
	text-shadow:  3px 3px 5px rgba(0,0,0,0.30);
	text-align: center;
	font-size: 30px;
}
.item p{
	color: rgba(255,255,255,1.00);
	text-align: left;
}

h4{
	font-size: 30px;
}
#box2 p{
	color: rgba(44,44,44,1.00);
}
.catch {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
	padding: 19px 0px;
}
.catch:after{
  border-top: 1px solid;
  content: "";
  width: 10em; /* 線の長さ */
}ink{
	color: rgba(255,255,255,1.00);
}

a {
	color: rgba(255,255,255,1.00);
}
/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

/*========= ページネーションCSS ===============*/
.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}

/*==============================スマホ========================*/
@media(max-width:700px){
	.logo img{
	width: 50%;
	height: auto;
	margin-top: 20vh;
	}
	h1{
    font-size: 8vw;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.30);
	text-align: center;
	}
	.container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 30px;
}
.photo{
    background: rgba(56,255,231,1.00);
    border-radius: 50%;
    width: 100px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.30);
}
.item{
	margin: 5px;
	color: rgba(26,26,26,1.00);
	text-align: left;
}
	
}