@charset "UTF-8";
/* CSS Document */

/*-----------------------------------
	
   スマホ版

-----------------------------------*/
/*-----------------------------------
	メインビジュアル
-----------------------------------*/
.campus-set{
	width: 100%;
	height: 300px;
	    background-size: cover;
	    background-position: center center;
		background-image: linear-gradient(rgba(0,0,0,0.50),rgba(0,0,0,0.0)),url(../images/campus_life_main.jpg);
}

.campus-set h2{
   padding: 2rem;
	color: #ffffff;
}
@media (min-width: 900px){
	/*-----------------------------------
	       メインビジュアル
	-----------------------------------*/
	.campus-set{
		height: 500px;
	}
}

/*-----------------------------------
	1. 学生の声
-----------------------------------*/
.student-title{
	text-align: center;
	margin: 10px 0;
}

.student-advaice-section{
	margin: 60px 10px;
}

.student-set{
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 80px;
}
.student-visual{
	position: relative;
	width: 200px;
	height: 250px;
}

/* 背景のボックス */
.bg-box{
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 110px;
	height: 130px;
	z-index: 1;
}
.yellow{
	background-color: #DFFF4F;
}
.blue{
	background-color: #427BBF;
}

/* 写真の設定 */
.student-img{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 120px;
	height: auto;
	z-index: 2;
}
/* 縦書き */
.vertical-label{
	position: absolute;
	top: 0;
	left: 0;
	writing-mode: vertical-rl;
	height: 100%;
	display: flex;
	justify-content: center;
	font-weight: bold;
	font-family: 'Arial Black', sans-serif;
	letter-spacing: 2px;
	z-index: 3;
	margin-left: 2px;
	white-space: nowrap;
}
.student-info{
	max-width: 90%;
	border-bottom: 2px solid #333333;
	padding-bottom: 10px;
	width: 250px;
}
.student-text{
	font-size: 1.8rem;
	margin: 5px 0;
	font-weight: bold;
}

/*-----------------------------------
	2. １日のスケジュール
-----------------------------------*/
/* セクションのつなぎめの波線 */
.schedule-section{
	position: relative;
	padding-top: 100px;
	background-color: #F7F5F0
}
.schedule-section::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
	background-size: cover;
	background-repeat: no-repeat;
}

.schedule-section h3{
	text-align: center;
	margin: 80px 0;
	font-size: 2rem;
	font-weight: bold;
}

.schedule-set{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 0;
	background-color: #F7F5F0;
}


/* モニュモニュ */
.schedule-item{
	position: relative;
	width: 100%;
	max-width: 400px;
	height: 200px;
	margin: 40px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.blob-shape{
	width: 240px;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	
	border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
	background-color: #999999;
		
	/* アニメーション */
	animation: floating 4s ease-in-out infinite;
	z-index: 1;
}
.time-cicle{
	width: 100px;
    height: 100px;
	position: absolute;
	top: -20%;
	left: 10%;
	background: #FFFFFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; /* 縦並び */
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.6;
	z-index: 2;
}
.time-cicle .time{
	font-size: 1.8rem;
}

/* ぷかぷか浮くアニメーション */
@keyframes floating {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

.item1 .blob-shape {
    background: url("../school/campus_phooto/school12.jpg");
	background-size: 130%;
	background-position: 30% 35%;
}
/* 動きをバラバラに */
.item2 .blob-shape {
	background: url("../school/global_photo/global2.jpg");
	background-size: 130%;
	background-position: 30% 35%;
    border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
    animation-delay: -1s; /* アニメーションのタイミングをずらす */
}
.item3 .blob-shape {
	background: url("../images/schedule2.jpg");
	background-size: 130%;
	background-position: 30% 35%;
    border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
}
.item4 .blob-shape {
	background: url("../images/schedule_lu.jpg");
	background-size: 130%;
	background-position: 30% 35%;
    border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
    animation-delay: -1s; /* アニメーションのタイミングをずらす */
}
.item5 .blob-shape {
	background: url("../images/schedule3.png");
	background-size: 130%;
	background-position: 30% 35%;
    border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
}
.item6 .blob-shape {
	background: url("../images/schedule5.jpg");
	background-size: 130%;
	background-position: 30% 35%;
    border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
    animation-delay: -1s; /* アニメーションのタイミングをずらす */
}
.item7 .blob-shape {
	background: url("../images/schedule_fi.jpg");
	background-size: 130%;
	background-position: 30% 35%;
    border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
}
/* 色をバラバラに */
.item-lunch .blob-shape{
	background-color: #f08a8a;
}
.item-other .blob-shape{
	background-color: #71C7D1;
}

/* ドット */
.set-dots{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.set-dots span{
	width: 8px;
	height: 8px;
	background-color: #76c0c1;
	border-radius: 50%;
	opacity: 0.6;
	/* アニメーション */
	animation: dotWave 3s ease-in-out infinite;
}
/* ぷかぷかアニメーション */
.set-dots span:nth-child(2){
	animation-delay: 0.2s;
}
.set-dots span:nth-child(3){
	animation-delay: 0.4s;
}
@keyframes dotWave {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); } /* 左右にふわふわ揺れる */
}

/*-----------------------------------
	3. Movie
-----------------------------------*/
.movie-section{
	padding: 100px 20px;
}

.movie-title{
	text-align: center;
	margin-bottom: 60px;
}

.movie-set{
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 1000px;
	margin: 0 auto;
}

.video-wrapper{
	position: relative;
	padding-top: 56.25%;
	width: 100%;
}
.video-wrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

/* ボタン */
.view-more-set{
	display: flex;
	justify-content: flex-end;
	max-width: 1000px;
	margin: 50px auto 0;
}
.view-more-btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 30px;
	background-color: #DFFF4F;
	text-decoration: none;
	border-radius: 50px;
	width: 160px;
}


/*-----------------------------------
	
   PC版

-----------------------------------*/
@media (min-width: 900px){
	
	/*-----------------------------------
		1. 学生の声
	-----------------------------------*/
	.student-advaice-section{
		max-width: 1200px;
		margin: 50px auto;
		padding: 100px 20px;
	}
	.student-area{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;		gap: 50px;
		margin: 100px 0;
	}

	.student-set{
		flex-direction: column;

		width: calc(33.333% -40px);
		min-width: 300px;
		margin-bottom: 0;
		gap: 20px;
		padding: 0;
	}
	
	/* 写真 */
	.student-visual{
		width: 180px;
		height: 220px;
	}
	/* 写真の設定 */
	.student-img{
		bottom: 0;
		left: 35%;
		width: 220px;
	}
	.student-img.student2{
		width: 175px;
		height: 270px;
	}
	.student-img.student3{
		width: 210px;
		height: 270px;
	}

	/* 背景のボックス */
	.bg-box{
		width: 200px;
		height: 220px;
	}
	
	/* 縦書き */
	.vertical-label{
		font-size: 1.7rem;
		
	}
	.student-info{
		max-width: 100%;
		text-align: left;
		border-bottom: 2px solid #333333;	
	}
	
	/*-----------------------------------
		2. １日のスケジュール
	-----------------------------------*/
	.schedule-item{
		height: 400px;
		max-width: 600px;
	}
	.blob-shape{
		width: 400px;
		height: 350px;
	}
	.time-cicle{
		width: 120px;
		height: 120px;
		top: 5%;
	}
	
	/*-----------------------------------
		3. Movie
	-----------------------------------*/
	.movie-set{
		flex-direction: row;
	}
	.movie-item{
		flex: 1;
	}
	
	/*-----View moreボタン-----*/
	.view-more-btn{
		transition: opacity 0.3s;
	}
	.view-more-btn:hover{
		opacity: 0.8;
	}
	
}