@charset "UTF-8";
/* ==========================================================================
   p-school.css
   学校紹介カテゴリ用CSS
   対象: school/index.html, campus_life.html, message.html, campus_exp.html
   ========================================================================== */

/*-----------------------------------
  共通候補：カラー・アニメーション
  ※ base.css / animation.css に移動してもOK
-----------------------------------*/
:root {
	--school-blue: #427BBF;
	--school-blue-dark: #274972;
	--school-blue-light: #71C7D1;
	--school-green: #DFFF4F;
	--school-yellow-light: #F4FFC2;
	--school-bg-warm: #F7F5F0;
	--school-text: #333333;
}

.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadeDown {
	animation-name: fadeDownAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
	opacity: 0;
}

@keyframes fadeInAnime {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeUpAnime {
	from { opacity: 0; transform: translateY(100px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDownAnime {
	from { opacity: 0; transform: translateY(-100px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeftAnime {
	from { opacity: 0; transform: translateX(-100px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRightAnime {
	from { opacity: 0; transform: translateX(100px); }
	to { opacity: 1; transform: translateX(0); }
}


/* ==========================================================================
   01. 学校の特色 / school/index.html
   旧: stylefeature.css
   ========================================================================== */
/*-----------------------------------
	
   共通部分

-----------------------------------*/
/*---color---*/
/*---------------------
box-color  var(--school-yellow-light)

---------------------*/


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

-----------------------------------*/

/*-----------------------------------
	       メインビジュアル
-----------------------------------*/
.feature-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/feature_page_main.png);
}

.feature-set h2{
   	padding: 2rem;
	color: #ffffff;
	text-align: left;
}

/*-----------------------------------
	       1. 5つの特色
-----------------------------------*/
#five-feature{
	padding: 80px 20px;
	display: block;
}

.five-feature .title{
	text-align: center;
	margin-bottom: 80px;
	font-weight: bold;
}

/* リスト全体の基本設定 */
.feature-list{
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.feature-item{
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

/* 数字のデザイン */
.feature-item .number{
	position: absolute;
	top: -45px;
	left: -20px;
	font-size: 8rem;
	font-weight: 900;
	line-height: 1;
	z-index: 2;
}

/* 背景のボックス */
.feature-content{
	background-color: var(--school-yellow-light);
	padding: 30px 20px 30px 50px;
	position: relative;
	z-index: 1;
	text-align: left;
	min-height: 150px;
}

.feature-content h4{
	margin-bottom: 10px;
	font-size: 1.6rem;
}

/* 応用課程 */
.advanced-feature-section{
	margin-top: 100px;
}

.advanced-feature-section h3{
	padding-bottom: 60px;
}

.advanced-list{
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.advanced-list li{
	text-align: center;
}

.feature-img{
	width: 120px;
	margin: 0 auto 15px;
}

/*-----------------------------------
	       2. ４年間の流れ
-----------------------------------*/
.fouryears-section h3{
	text-align: center;
	margin: 200px 0 60px;
}


/*-----------------------------------
	       3. 国際交流
-----------------------------------*/
.global-intro{
	text-align: center;
}
	
/* スライダーのためのCSS */
.slide-set{
	width: 100%;
	margin: 50px auto;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.slide-wrapper{
	display: flex;
	animation: slide-flow 20s infinite linear 1s both;
}

.slide{
	width: 200px;
	object-fit: cover;
}

@keyframes slide-flow{
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* 具体例 */
.global-effort h4{
	text-align: center;
}

.effort-list{
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin-top: 20px;
}

.effort-list li{
	width: 130px;
	height: 130px;
	background: #ffffff;
	border: 10px solid #f9ffd2;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
}

/* 主な活動 */
.global-item{
	display: flex;
	flex-direction: column;
	margin: 60px 0;
	padding: 0 30px;
	
	/* アニメーション */
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.global-item.is-visible{
	opacity: 1;
	transform: translateY(0);
}

@media(min-width: 900px){
	.global-item{
		transform: translateX(-40px);
	}
	
	.global-item.reverse{
		transform: translateX(40px);
	}
	
	.global-item.is-visible{
		transform: translateX(0);
	}
}

/* 画像の設定 */
.global-img{
	position: relative;
	width: 90%;
	margin: 0 auto 30px;
	z-index: 1;
}

.global-img::before{
	content: "";
	position: absolute;
	top: -15px;
	left: -15px;
	width: 100%;
	height: 100%;
	background-color: var(--school-text);
	z-index: -1;
}

.global-img img{
	width: 100%;
	display: block;
}

/* テキストの設定 */
.global-text .num{
	font-weight: bold;
	display: block;
}

.global-text h4{
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
	margin-bottom: 15px;
}

/*-----------------------------------
	   4. データで見るIT大学校
-----------------------------------*/
.data{
	margin-bottom: 50px;
}

.data-title{
	margin-left: 20px;
}

/* カード全体の設定 */
.data-card{
	background-color: #f0f0f0;
	border-radius: 20px;
	padding: 30px 20px;
	text-align: center;
	margin: 20px 10px 30px;
	max-width: 400px;
}

/* 棒グラフの設定 */
.bar-graph{
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	height: 200px;
	border-bottom: 1px solid var(--school-text);
	padding: 0 10px;
	margin: 80px 0 60px 0;
	list-style: none;
}

.bar-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
	height: 100%;
	position: relative;
	justify-content: flex-end;
}

.bar{
	width: 100%;
	background-color: #E0E0E0;
	
	/* にょき */
	transition: height 1.5s ease-out;
}

.price{
	margin-bottom: 5px;
	font-weight: bold;
}

.univ-name{
	position: absolute;
	top: 100%;
	padding-top: 10px;
	width: 100px;
	text-align: center;
	white-space: nowrap;
}

.bar-item.main .bar{
	background-color: #FF6B6B;
}

.bar-item.main .graph-label{
	position: absolute;
	top: 30px;
	background-color: #faffbd;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.9rem;
}

.bar-item.main .graph-label::after{
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top: 5px solid #faffbd;
}

/* パーセンテージの設定 */
.percentage{
	color: #FF6B6B;
	font-weight: bold;
	margin: 10px 0;
}

.percentage .percentage-num{
	font-size: 9rem;
}
.percentage .unit{
	font-size: 2rem;
}

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

-----------------------------------*/

@media (min-width: 900px){
	/*-----------------------------------
	       メインビジュアル
	-----------------------------------*/
	.feature-set img{
		height: 550px;
	}
	
	/*-----------------------------------
	            1. 5つの特色
    -----------------------------------*/
	#five-feature{
		max-width: 1100px;
		margin: 0 auto;
		padding: 100px 20px;
	}
	
	.five-feature .title{
		margin-bottom: 100px;
	}
	/* 横並びのレイアウト */
	.feature-list{
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 100px 40px;
	}
	
	.feature-item{
		width: calc(33.33% - 40px);
		max-width: none;
		margin: 0;
	}
	
	.feature-item .number{
		font-size: 10rem;
		top: -35%;
		left: -5%;
	}
	
	.feature-content{
		padding: 40px 20px 30px 60px;
		min-height: 150px;
	}
	
	/* 応用課程 */
	.advanced-list{
		flex-direction: row;
		justify-content: space-between;
	}
	
	.advanced-list li{
		flex: 1;
	}
	
	/*-----------------------------------
				3. 国際交流
	-----------------------------------*/
	.global-section .global-intro h3{
		margin: 200px 0 30px;
	}
	
	/* スライダーのためのCSS */
	.slide{
		width: 450px;
		object-fit: cover;
	}
	
	/* 具体例 */
	.global-effort{
		margin-top: 170px;
	}
	
	.effort-list{
		gap: 40px;
	}
	
	.effort-list li{
		width: 160px;
		height: 160px;
		border-width: 15px;
		font-size: 1.2rem;
	}
	
	/* 主な活動 */
	.global-set{
		margin-top: 300px;
	}
	
	.global-item{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 120px;
		padding: 0 5%;
	}
	
	.global-item.reverse{
		flex-direction: row-reverse;
	}
	
	.global-img{
		width: 45%;
		margin: 0;
	}
	
	.global-img::before{
		top: -20px;
		left: -20px;
	}
	
	.global-item.reverse .global-img::before{
		left: auto;
		right: -20px;
	}
	
	.global-text{
		width: 45%;
	}

	/*-----------------------------------
		    4. データで見るIT大学校
	-----------------------------------*/
	.data-set{
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 30px;
		padding: 0 2%;
	}
	
	.percentage{
		margin-top: 70px;
	}
	
	.data-card{
		flex: 1;
		max-width: 450px;
		min-width: 400px;
	}
}

/* ==========================================================================
   02. 4年間の流れ / school/index.html
   旧: 4years.css
   ========================================================================== */
/*========= バー表示のためのCSS ===============*/

/*タイムライン全体の設定*/
.timeline{
	max-width: 600px;
	width:100%;
	margin:0 auto;
}

.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
	list-style: none;
	padding-bottom: 70px;/*線の高さ確保*/
}

.timeline dl{
	margin:0 0 20px 12rem;/* テキスト下空間とボーダー分左空間*/
}

.timeline dt{
	color: var(--school-blue);
    font-weight: bold;
}

.timeline dd strong{
	display: block;
	padding:10px 0;
}

/*線    絶対配置で線を設定*/
.border-line {		z-index: -1;/*◯内の文字表示のため*/
    /*線の位置*/
	position: absolute;
	left:3.5rem; /*◯との位置関係*/
	top:1rem;    /*◯上部の開始位置下げる（◯のサイズ内 元は0）*/
	width:3rem;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
}

/*◯    タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{	z-index: -1;/*◯内の文字表示のため*/
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10rem; /*◯大きさ*/
    height: 10rem;
    border-radius: 50%;
}
/*◯　　内テキスト*/
.timeline p{
    position: relative;
    top: 3.5rem;
    left: 3.5rem;
    color: #fff;
    font-size: 1.4rem;
	font-weight: bold;
}

/*--------------専門課程----------------*/

/*線色　１年*/
.grade01 .border-line {
	background:#6795c6;
}
/*◯色　１年*/
.grade01 li::after{
    background-color: #6795c6;
}
/*線色　１年　後期*/
.grade01_B .border-line {
  background:  var(--school-blue);
}



/*線色　２年*/
.grade02 .border-line {	
  background:#346298;
}
/*◯色　２年*/
.grade02 li::after{
    background-color: #346298;
}
/*線色　2年　後期*/
.grade02_B .border-line {
  background:  var(--school-blue-dark);
}



/*--------------卒業or就職----------------*/



/*線色　*/
.workor .border-line {	
	background: var(--school-blue-light);
	background: linear-gradient(0deg, rgba(113, 199, 209, 1) 0%, rgba(39, 73, 114, 1) 50%);/*応用へ繋ぐ*/
	/*線の位置*/
	left: 11rem; /*◯との位置関係*/
}

/*◯色　*/
.workor li::after{
    background-color: #ff6b6b;
    border: 10px solid var(--school-blue-dark);
}
.workor dl{
	margin:0 0 20px 20rem;/*ボーダー分左空間*/
}
.workor dt{
    color: var(--school-blue-dark);
    font-weight: bold;
}
	/*◯　形状*/
.workor li::after{	z-index: -1;/*◯内の文字表示のため*/
    width: 18rem; /*◯大きさ*/
	height: 10rem;
    border-radius: 50px;
}
	/*◯内テキストカスタマイズ*/
.workor p{
	top:3.5rem;
    left: 5rem;
    color: #fff;
    font-size: 1.4rem;
	font-weight: bold;
}



/*--------------応用課程----------------*/

/*タイムライン全体の設定　　応用課程カスタマイズ*/
.grade3-4 .timeline{
	max-width: 600px;/*右寄分縮小*/
}

.grade3-4 li::after
{
    left:8rem; /*線との位置関係*/
}
/*◯　　内テキスト*/
.grade3-4 p{
    left: 11rem;
}
/*線   絶対配置で線を設定*/
.grade3-4 .border-line {
    /*線の位置*/
	left: 11.5rem; /*◯との位置関係.workor .border-lineと同値*/
}
.grade3-4 dl{
	margin:0 0 20px 20rem;/* テキスト下空間とボーダー分左空間*/
}
.grade3-4 dt{
	color: #369aa6;
	font-weight: bold;
}



/*線色　3年*/
.grade03 .border-line {	
  background:var(--school-blue-light);
}
/*◯色　3年*/
.grade03 li::after{
    background-color: var(--school-blue-light);
}
/*線色　3年　後期*/
.grade03_B .border-line {
  background:  #4abbca;
}


/*線色　4年*/
.grade04 .border-line {	
  background:#369aa6;
}
/*◯色　4年*/
.grade04 li::after{
    background-color: #369aa6;
}
/*線色　4年　後期*/
.grade04_B .border-line {
  background:  #29767f;
}


/*線色　卒業*/
.graduation .border-line {	
  background:#369aa6;
}
/*◯色　卒業*/
.graduation li::after{
    background-color: #29767f;
}




/*========= レイアウトのためのCSS ===============*/










/*
ul {
	border: solid 1px red;
}*/

/* ==========================================================================
   03. キャンパスライフ / school/campus_life.html
   旧: stylecampus_life.css
   ========================================================================== */
/*-----------------------------------
	
   スマホ版

-----------------------------------*/
/*-----------------------------------
	メインビジュアル
-----------------------------------*/
.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: var(--school-green);
}

.blue {
	background-color: var(--school-blue);
}

/* 写真の設定 */
.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 var(--school-text);
	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: var(--school-bg-warm)
}

.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: var(--school-bg-warm);
}


/* モニュモニュ */
.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_photo/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: var(--school-blue-light);
}

/* ドット */
.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: var(--school-green);
	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 var(--school-text);
	}

	/*-----------------------------------
		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;
	}

}

/* ==========================================================================
   04. 学校長メッセージ / school/message.html
   旧: stylemessage.css
   ========================================================================== */
/*-----------------------------------
	
   スマホ版

-----------------------------------*/
/* メッセージセクション */
.message-section {
	padding: 60px 20px;
}

.message-section h2 {
	margin-bottom: 30px;
}

.message-img img {
	display: block;
	margin: 0 auto;
	width: 60%;
	max-width: 200px;
	height: auto;
	margin-bottom: 20px;
}

.message-text {
	line-height: 1.8;
	margin-bottom: 15px;
}

.message-name {
	text-align: right;
	margin-top: 30px;
}

/* 教育理念 */
.goal-section {
	padding: 80px 20px;
	text-align: center;
	background: #f8f9fa;
}

.cicle-set {
	position: relative;
	width: 320px;
	height: 320px;
	margin: 40px auto;
}

.cicle {
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1rem;
	mix-blend-mode: multiply;
	transition: transform 0.3s;
}

.cicle-top {
	background: rgba(52, 152, 219, 0.8);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.cicle-left {
	background: rgba(41, 128, 185, 0.8);
	bottom: -5px;
	left: -10px;
}

.cicle-right {
	background: rgba(26, 188, 156, 0.8);
	bottom: -5px;
	right: -10px;
}

.cicle-set p {
	margin: 50px 0 10px;
}

.cicle-number {
	position: absolute;
	top: 30px;
	width: 50px;
	height: 50px;
	font-size: 2.5rem;
}

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

-----------------------------------*/
@media (min-width: 900px) {
	.message-section {
		max-width: 1000px;
		margin: 0 auto;
	}

	.message-body {
		display: flex;
		align-items: flex-start;
		gap: 50px;
	}

	.message-img {
		flex: 1;
	}

	.message-img img {
		/*
		width: 70%;
		max-width: 200px;
 		*/
		height: auto;
		display: block;
	}

	.message-text {
		flex: 1.5;
	}

	.cicle-set {
		width: 500px;
		height: 500px;
	}

	.cicle {
		width: 280px;
		height: 280px;
		font-size: 1.5rem;
	}

	.cicle-number {
		font-size: 4rem;
	}
}

/* ==========================================================================
   05. キャンパス探検 / school/campus_exp.html
   旧: stylecampus_exp.css
   ========================================================================== */
/* campus_exp: 見出しサイズは .vertical-text など個別classで管理 */

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

-----------------------------------*/
.campus-gallery-section{
	display: flex;
	justify-content: flex-end;
	padding: 90px 5%;
	position: relative;
}

/* 左側の設定 */
.side-content{
	position: sticky;
	top: 80px;
	height: fit-content;
	margin-right: auto;
	padding-left: 20px;
}
.vertical-text {
 	writing-mode: vertical-rl;
 	font-size: 2.5rem;
 	letter-spacing: 0.1em;
 	margin-top: 30px;
	font-weight: bold;
}
.scroll-group{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 60px;
}
.scroll-text{
	writing-mode: vertical-rl;
	font-size: 1.5rem;
	margin-bottom: 30px;
}
.scroll-line {
  width: 1px;
  height: 60px;
  background: #ccc;
  animation: lineMove 2s infinite;
}

@keyframes lineMove {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* 右側の写真の設定 */
.gallery-list{
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	margin-left: auto;
	column-count: 1;
	column-gap: 20px;
}
.gallery-item{
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.2s ease, transform 1.2s ease;
	
	break-inside: avoid;
	margin-bottom: 20px;
	display: inline-block;
	width: 100%;
}
.gallery-item.is-show {
    opacity: 1;
    transform: translateY(0);
}
.gallery-item img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 5px;
}

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

-----------------------------------*/
@media (min-width: 900px){
	.gallery-list{
		column-count: 2;
		max-width: 1300px;
	}
	
	.vertical-text {
		font-size: 4rem;
	}
}