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




.section-heading{
	text-align: center;
}
.section-desc{
	text-align: center;
}







/*-----------------------------------
	4. 学校の特色
-----------------------------------*/
.visitor-section{
	width: 100%;
	margin: 80px 0;
}

.visitor-inner{
	width: 90%;
	margin: 0 auto;
	background-color: #333333;
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.visitor-img img{
	height: 100%;
	object-fit: cover;
	display: block;
}

.visitor-set{
	padding: 30px 20px;
	color: #ffffff;
	position: relative;
	display: flex;
	flex-direction: column
}

.view-more-btn{
	color: #333333;
}

.visitor-title{
	margin-bottom: 10px;
}

.visitor-text{
	line-height: 1.6;
	margin-bottom: 30px;
}

/*-----------------------------------
	5. 学科紹介
-----------------------------------*/
.department-section{
	width: 100%;
	margin: 80px 0;
}

.department-set{
	width: 100%;
	margin: 0 auto;
}

.department-intro{
	margin-bottom: 30px;
}

.department-title{
	text-align: center;
	margin-bottom: 20px;
}

.department-intro h3{
	margin: 10px 0;
	text-align: center;
}

.department-intro p{
	text-align: center;
}

.course-list{
	display: flex;
	flex-direction: column;
	gap: 0;
}

.course-card{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	padding: 80px 20px;
	color: #ffffff;
	box-sizing: border-box;
}

.course-header{
	margin-bottom: 20px;
	font-weight: bold;
}

/* 丸い画像 */
.course-img{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 20px;
}

.course-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.course-explanation{
	line-height: 1.6;
	margin-bottom: 20px;
	min-height: 3em;
	flex-wrap: nowrap;
}

/* リンクボタン */
.course-btn{
	position: absolute;
	background-color: #DFFF4F;
	color: #333333;
	font-weight: bold;
	width: 55px;
	height: 55px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	bottom: 20px;
	right: 30px;
}

/* ---科の分類バー部分--- */
.course-bar{
	display: flex;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
}

.course-bar-mobile{
	display: block;
	background-color: #D8F0F3;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	border: 1px solid #F0F9F9;
	box-sizing: border-box;
	
}

.bar-sys{
	background-color: #D9E4F2;
	width: 100%;
}

.bar-proc{
	display: none;
}

/* 各コースの背景色 */
.card-01{ background-color: #6795CB;}
.card-02{ background-color: #427BBF;}
.card-03{ background-color: #65C2CD;}
.card-04{ background-color: #3EB3C1;}
.card-05{ background-color: #328F9A;}

/* ---NEW!ラベルのデザイン--- */
.course-label-new{
	position: absolute;
	top: 5%;
	display: inline-block;
	background-color: #FF6B6B;
	color: #ffffff;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 3px;
	z-index: 10;
}

/* ---学科紹介だけ幅調整(パソコン版)--- */
@media(min-width: 1150px){
	.department-title{
		text-align: center;
		margin-bottom: 20px;
	}
	
	.course-bar-mobile{
		display: none;
	}
	
	.course-bar{
		word-spacing: flex;
		width: 100%;
	}
	
	.bar-proc{
		display: block;
		width: 60%;
		background-color: #D8F0F3;
	}
	
	.bar-sys{
		width: 40%;
	}
	
	.course-bar{
		display: flex;
	}
	
	.course-list{
		flex-direction: row;
		align-items: stretch;
	}
	
	.course-card{
		flex: 1;
		padding: 60px 10px;
		transition: transform 0.3s ease;
		cursor: pointer;
	}
	
	.card-05{
		border-right: none;
	}
}

/* ---応用課程--- */
.advanced-intro{
	text-align: center;
	margin: 40px 0;
}

.advanced-card{
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #151F41;
	color: #ffffff;
	text-decoration: none;
	position: relative;
	padding: 100px 20px;
	text-align: center;
}

/* 丸い画像 */
.advanced-img{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	margin: 40px auto 30px;
}

.advanced-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* テキストエリア */
.advanced-card-body{
	width: 100%;
}

.advanced-card-body h4{
	margin: 20px 0 30px;
}

/* リンクボタン */
.advanced-btn{
	position: absolute;
	background-color: #DFFF4F;
	color: #333333;
	width: 55px;
	height: 55px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	bottom: 20px;
	right: 30px;
}

.advanced-label-new{
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	
	display: inline-block;
	background-color: #FF6B6B;
	color: #ffffff;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 3px;
	z-index: 10;
	white-space: nowrap;
}

/*-----------------------------------
	7. 入学ガイド
-----------------------------------*/
.admissions-guide-section{
	width: 100%;
	margin: 80px 0;
}

.admissions-guide-inner{
	width: 90%;
	margin: 0 auto;
	background-color: #F4FFC2;
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: auto;
}

.admissions-guide-img{
	width: 100%;
}

.admissions-guide-img img{
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

.admissions-guide-set{
	width: 100%;
	padding: 40px 20px;
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
}

.admissions-guide-title{
	margin-bottom: 10px;
}

.admission-guide-text{
	line-height: 1.6;
	margin-bottom: 30px;
}

/* カードを包むコンテナ */
.exam-container {
    display: flex;
    flex-wrap: wrap;    
    gap: 20px;          
    justify-content: center; 
    width: 100%;
}

.exam-card {
    text-decoration: none;
    color: inherit;
    width: 45%;         
    max-width: 200px;   
    aspect-ratio: 1 / 1; 
}

.exam-card-inner {
    height: 100%;       
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
}
.exam-img img{
	width: 80px;
}




    /*-----------------------------------
			4. 学校の特色
	-----------------------------------*/
	.section-heading{
		margin-top: 200px;
	}
	.visitor-section{
		margin: 100px 0;
	}

	.visitor-inner {
        display: flex;
        flex-direction: row; /* スマホの縦並びを横並びに */
        width: 85%;
        background-color: #333; /* 背景色 */
    }

    /* 画像とテキストを50%ずつに */
    .visitor-img, .visitor-set {
        width: 50%;
    }

    /* 左寄せセクションの設定 */
    .visitor-content-left .visitor-inner {
        margin-left: 0;
        margin-right: auto;
        border-radius: 0 30px 30px 0; /* 右側だけ丸める */
    }

    /* 右寄せセクションの設定 */
    .visitor-content-right .visitor-inner {
        margin-right: 0;
        margin-left: auto;
        flex-direction: row-reverse; /* 画像を右、テキストを左に入れ替える場合 */
        border-radius: 30px 0 0 30px; /* 左側だけ丸める */
    }

	/*-----------------------------------
			5. 学科紹介
	-----------------------------------*/
	/* --専門課程-- */
	.course-list{
		display: flex;
		flex-direction: row;
	}
	
	.course-card{
		flex: 1;
	}
	
	/* --応用課程-- */
	.advanced-section{
		margin-top: 100px;
		width: 100%;
	}
	
	.advanced-card{
		display: block;
		padding: 0;
		width: 100%;
		background-color: #151F41;
		text-decoration: none;
	}
	
	.advanced-inner{
		display: flex;
		flex-direction: row;
		align-items: stretch;
		width: 100%;
		margin: 0;
	}
	
	.advanced-img{
		width: 50%;
		height: 500px;
		margin: 0;
		border-radius: 0;
		overflow: hidden;
	}

	.advanced-img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	
	.advanced-card-body{
		width: 50%;
		padding: 60px 8%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}
	
	.advanced-btn{
		margin: 40px 0 20px 30px;
		font-weight: bold;
	}

	/*-----------------------------------
			7. 入学ガイド
	-----------------------------------*/
	.visitor-content-left, .admissions-guide-inner{
		margin-left: 0;
		margin-right: auto;
		width: 85%;
	}
	
	.admissions-guide-inner{
		flex-direction: row;
		flex-direction: row-reverse;
		min-height: 400px;
		width: 80%;
		border-radius: 0 30px 30px 0;
		display: flex
	}
	
	.admissions-guide-img, .admissions-guide-set{
		width: 50%;
	}
	
	.admissions-guide-img img{
		height: 100%;
	}
	
	.exam-container{
		margin: 50px 0;
	}

    .exam-card {    
        max-width: 280px;
        flex-shrink: 0;  
    }



/* 2. 押した瞬間（クリック中）：グッと沈み込む */
.exam-card:active {
    transform: translateY(2px); 
    transition: transform 0.1s; 
}

.exam-card:active .exam-card-inner {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}