@charset "UTF-8";
@media screen and (min-width:641px){
/* CSS Document */

	.sp{
		display: none;
	}
	
	.hidden{
	display:none;
	}
		
	html{
		scroll-behavior: smooth;
	}
	
/*	ヘッダー*/
	#header_container{
		width: 100%;
		height:150px;
		display: flex;
		padding-bottom: 10px;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 10000; 
		justify-content: space-between;
	}
	#header_top_nav_container{
		width: 50%;
	}
	#header_top_nav{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
	
	#header_logo_container img{
		margin-top: 40px;
		margin-left: 40px;
	}
	
	#header_top_nav li{
		margin-top: 80px;
	}
	
	#header_top_icon_container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 60px;
		margin-left: 50px;
	}
	
	.header_top_icon_all{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 50px;
	}
	
	.header_top_icon_frame{
		display: flex;
		justify-content: center;
		align-items: center;
		border-style: solid;
		border-color: #26a3b9;
		width: 50px;
		height: 50px;
		
	}
	
	 .header_top_icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.header_top_icon img{
		width: 35px;
		height: 35px;

	}
	
	.header_top_icon_sentence {
		text-align: center;
		margin-top: 3px;
	}
	
	.header_top_icon_sentence p{
		font-size: 12px;
		font-weight: bold;
	}
	
	#main_container{
		width: 100%;
		position: relative;
	}
	
	#main_visual_container {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    width: 85%;

	}

	
/*	左メニュー*/
	#side_menu_container{
		width: 15%;
		margin-top: 180px;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999; 
	}
	
	#menu-list1_container{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	
	#menu-list1, #menu-list2, #menu-list3, #menu-list4, #menu-list5, #menu-list6, #menu-list7, #menu-list8, #menu-list9 {
		width: 200px;
		height: 100vh;
		position: fixed;
		top: 0;
		transform: translateX(-100vw);
		transition: 0.5s;
		z-index: 1000;
		margin-top: 150px;
	}

	#menu-list1 {
		background-color: #fff;
		left: 0;
		transform: translateX(0); /* 初期状態で表示 */
		z-index: 1000;
		width: 15%;
	}

	#menu-list2, #menu-list3, #menu-list4, #menu-list5, #menu-list6, #menu-list7, #menu-list8, #menu-list9 {
		color: #fff;
		background-color: #38352e;
		left: 200px;
	}

	#menu-list1 ul, #menu-list2 ul, #menu-list3 ul, #menu-list4 ul, #menu-list5 ul, #menu-list6 ul, #menu-list7 ul, #menu-list8 ul, #menu-list9 ul {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		font-size: 14px;
		height: 100%;
		margin-top:80px;
	}

	#menu-list1 ul li, #menu-list2 ul li, #menu-list3 ul li, #menu-list4 ul li, #menu-list5 ul li, #menu-list6 ul li, #menu-list7 ul li, #menu-list8 ul li, #menu-list9 ul li {
		width: 100%;
		padding: 15px 0;
		transition: 0.3s;
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	#menu-list1 ul li:hover{
		background-color: #26a3b9;
		color: #fff;
	}
		
	#menu-list2 ul li:hover, #menu-list3 ul li:hover, #menu-list4 ul li:hover, #menu-list5 ul li:hover, #menu-list6 ul li:hover, #menu-list7 ul li:hover, #menu-list8 ul li:hover, #menu-list9 ul li:hover {
		background-color: #fff;
		color: #303030;
	}

	body.open-right1 #menu-list1,
	body.open-right2 #menu-list2,
	body.open-right3 #menu-list3,
	body.open-right4 #menu-list4,
	body.open-right5 #menu-list5,
	body.open-right6 #menu-list6,
	body.open-right7 #menu-list7,
	body.open-right8 #menu-list8,
	body.open-right9 #menu-list9 {
		transform: translateX(68px);
		color: #fff;
		background-color: #303030;
}
	
/*	メインコンテンツ*/
	#main_contents_container{
		display: flex;
		flex-direction: column; /* 子要素を縦に並べる */
		justify-content: flex-start;
		align-items: center; /* 子要素を中央揃えにする */
		width: 100%;
		position: relative;
	}
/*	メインビジュアル*/
	
	#main_visual_container {
		flex-grow: 1;
		overflow: hidden;
		width: 85%;
		margin-left: auto;
		position: relative;
}
	
	#main_visual_slider{
		width:100%;
		position: relative;
	}
		
	#main_visual_slider img{
		display: block;
		width:100%;
	}
	

/*メインビジュアルの文字*/
	#main_visual_sentence_container{
		background-color: rgba(0, 0, 0, 0.5);
		padding: 30px 70px;
		position: absolute;
		/* top: 50%; */
		left: 45%;
		bottom: 68%;
		z-index: 100;
		/* 追加。相対値にして少しでも下に行かないように緩和 */
		width: 44vw;
	}
	
	#main_visual_sentence_container p{
		/* 追加。相対値にして少しでも下に行かないように緩和 */
		font-size: 2.2vw;
		z-index: 1000;
		position: relative;
		color:#fff;
	}
	
/*TOPICS*/
	#main_topics_container {
		width: 85%;
		margin-left: auto;
		margin-top: 50px;
	}

	#main_topics_slider_container {
	width: 80%;
	margin: 0 auto;

	}

	/* 追加。表示域の拡大 */
	#main_topics_slider{
		width: 100%;
	}
	/* 追加。表示域の調整 */
	.main_topics_slide {
		width: 80%;
	}
	/* 追加。表示域の調整 */
	.main_topics_slide img,
	.main_topics_slide p{
		width: 100%;
	}

	#main_topics_slider img {
		margin: 0 20px; /* 画像間の間隔を調整 */
		/* width: auto; */
		/* 追加。レイアウト調整のため。 */
		width: 100%;
		height: auto;
		display: block;
	}
	
	.main_topics_slider_contentes_sentence{
		background-color:#f5f5f5;
		margin: 0 20px; /* 画像間の間隔を調整 */
		padding: 20px;
		/* 追加 */
		width: 100%;
	}
	
	#main_contentes_container #main_topics_slider {
		width: 345px; /* スライダーの幅を345pxに設定 */
		height: auto; /* 高さを自動調整し、アスペクト比を維持 */
		overflow: hidden; /* コンテナからはみ出す内容を隠す */
	}
	
	#main_contentes_container #main_topics_slider img {
		width: 100%; /* すべての画像をスライダーの幅に合わせる */
		height: auto; /* 画像の高さを自動で調整し、アスペクト比を保持 */
	}

	h2{
		font-size: 30px;
		font-weight: bold;
		color: #38352e;
		position: relative;
		margin-left:30px;
	}
	
	h2::before{
		content: "";
		display: block;
		width: 7px;
		height: 30px;
		background-color: #259aaf;
		position: absolute;
		top: 13px;
		left: -20px;
	}
	
/*	Pick Up*/
	
	#main_pickup_container{
		width: 85%;
		margin-left: auto;
		margin-top: 50px;
	}
	
	#main_pickup_slider_container{
		width: 85%;
		margin-top: 20px;
		margin-left: 150px;
	}

/*NEWS*/
	#main_news_container{
		width: 85%;
		margin-left: auto;
		margin-top: 50px;


	}

	#main_news_contents{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width:80%;
		margin-left: auto;
		margin-right: auto;
	}

	/* 追加。リストが折り返しに行かないように */
	#main_news_contents li{
		width: 30%;
	}

	/* 追加。画像がはみ出ないように */
	#main_news_contents li img{
		width: 100%;
	}

	.main_news_sentence_container{
		background-color:#f5f5f5;
		padding: 20px;
	}
	
/*	Campus*/
	#main_campus_container{
		width: 85%;
		margin-left: auto;
		margin-top: 50px;
	}
			
	#main_campus_contents{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width:80%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.main_campus_sentence_container{
		background-color:#f5f5f5;
		width:100%;
		padding: 20px;
	}
	
/*	学部・大学院タブ*/
	
	#main_study_container{
		width: 85%;
		margin-left: auto;
		margin-top: 50px;
	}
			
	#main_study_contents_container{
		padding-top: 30px;
	}

	#main_study_contents{
		width:80%;
		margin-left: auto;
		margin-right: auto;
	}

	#main_study_all_contentes{
		padding-top:30px;
		background-color: #f5f5f5;
		padding-left: 50px;
	}
	
	#main_study_container_all{
		margin-top: 30px;
	}
	
	 .main_study_ul {
		background-color: #f5f5f5;
	}

	.department_name,
	.department_name a {
		list-style-type: none;
		text-decoration: none;
		cursor: pointer;
}

	/*tabの形状*/
	.tab{
		display: flex;
		flex-wrap: wrap;
		background: #f5f5f5;
	}
	
	.tab li a{
		display: block;
		background:#fff;
		margin:0 2px;
		padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
	.tab li.active a{
		background: #259aaf;
	}


/*エリアの表示非表示と形状*/
	.area {
		display: none;/*はじめは非表示*/
		opacity: 0;/*透過0*/
		background: #f5f5f5;
		padding:50px 20px;
	}

/*areaにis-activeというクラスがついた時の形状*/
	.area.is-active {
		display: block;/*表示*/
		animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
		animation-duration: 2s;
		animation-fill-mode: forwards;
		opacity: 1;
	}
	
	.area ul {
		display: flex;
		flex-wrap: wrap; /* 項目がコンテナを溢れる場合は折り返す */
		justify-content: space-around; /* 項目間のスペースを均等に分配 */
		margin-right: 10px;
		background: #f5f5f5;
	}

	.area ul li {
		width: calc(50% - 20px); /* コンテナの50%の幅から、両サイドのマージンを引いた値 */
		margin: 10px; /* 余白を設定 */
		padding: 5px;
		background-color: #fff;
		transition: .5s;
	}
	
	#campus2 ul, #campus3 ul, #campus5 ul, #campus6 ul{
		display: flex;
		flex-direction: column; /* 子要素を縦方向に並べる */
		justify-content: flex-start; /* 子要素をコンテナの開始位置から配置 */
		align-items: flex-start; /* 子要素を軸方向の開始位置に揃える */
	}
	
	.area ul li:hover{
		background-color: #26a3b9;
	}

	.campus-container {
		display: flex;
		justify-content: space-between; /* 必要に応じて */
		align-items: flex-start; /* 必要に応じて */
		flex-wrap: wrap; /* 子要素が多い場合や画面幅が狭い場合に折り返し */
	}
	
	#campus1, #campus4 {
		flex: 0 0 50%;
	}

	#campus2, #campus3, #campus5, #campus6 {
		flex: 0 0 25%;
	}

	
	#campus2 ul li, #campus3 ul li,#campus5 ul li, #campus6 ul li {
		width: calc(100% - 40px);
	}
	
	@keyframes displayAnime{
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	
	#main_study_container{
		width: 85%;
		margin-left: auto;
		margin-top: 50px;
	}

	.department_name:before {
		content: ''; /* 実際の内容は何もなし */
		display: inline-block; /* 線をインラインブロック要素として表示 */
		width: 24px; /* 線の長さ */
		height: 3px; /* 線の厚さ */
		background-color: #26a3b9; /* 線の色 */
		margin-right: 5px; /* テキストと線の間のマージン */
		vertical-align: middle; /* 線をテキストの中央に合わせる */
	}
	
/*お知らせ*/
	#main_info_container{
		width: 85%;
		margin-left: auto;
		margin-top: 50px;
	}
	
	#main_info_contents_all{
		margin-top:20px;
	}
	
	.main_info_contents_sentence{
		margin: 10px 30px 10px 30px;
	}
	
	#main_info_container hr{
		color: #26a3b9;
		border-style: solid;
		border-width: 1px 0 0 0;
	}
	
	#main_info_all_button{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		border:solid 1px #26a3b9;
		width: 400px;
		height: 50px;
		margin-top: 25px;
		position: relative;
		overflow: hidden; /* オーバーフローを隠す */
		transition: background-color .3s ease;
		z-index: 100;
	}
	
	/*== 背景が流れる（左から右） */
	#main_info_all_button:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		background:#26a3b9;
		width: 100%;
		height: 100%;
		transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
		transform: scale(0, 1);
		transform-origin: right top;
	}

/*hoverした際の形状*/
	#main_info_all_button:hover:before{
		transform-origin:left top;
		transform:scale(1, 1);
	}
	
	#main_info_all_button p{
		line-height: 50px;
		text-align: center;
		position: relative;
		z-index: 1000;
	}
	
	#main_info_all_button:hover p{
		color: #fff;
	}
	
/*フッター*/

	#footer_nav_container{
		background-color: #f5f5f5;
		padding-bottom: 40px;
		box-sizing: border-box;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#footer_nav_contents{
		width: 35%;
		margin-left: 481px;
		margin-top: 70px;
		display: flex;
		justify-content: space-between;
		margin-right: auto;
		padding-top: 50px;
	}
	
	#footer_nav_contents img{
		width: 158px;
		height: 94px;
	}
	
	#footer_copyright_container{
		background-color: #26a3b9;
	}
	
	#footer_copyright_container p{
		color: #fff;
		display: block;
		visibility: visible;
		margin-left: 300px;
		text-align: center;
		font-size: 12px;
	}


}