/* CSS Document */

/***********************************************************************
 ** Fonts
 ***********************************************************************/






.aboutColumn{
	margin-bottom: 40px;
}
.aboutColumn img{
	width: 200px;
}
@media screen and (max-width:575px){
	.aboutColumn img{
		width: 120px;
	}
}
.aboutColumn .float-right{
	padding-left: 40px;
}
.aboutColumn .float-left{
	padding-right: 40px;
}
.aboutColumn h3{
	text-align: left;
}
@media screen and (max-width:575px){
	
}
.aboutIndexItems{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
.aboutIndexItems .title{
	color: white;
	font-size: 24px;
}
.aboutIndexItems .info{
	width: 300px;
}
.aboutIndexItems .info p{
	font-size: 14px;
}
.aboutIndexItems .photo{
	flex: 1;
	background-image: url("/educate/gendaisyakai/about/images/image_manabi.jpg");
	background-repeat: no-repeat;
	background-position: right;
	min-height: 240px;
}

.aboutIndexItems h3,
.aboutIndexItems p{
	color: white;
}
.aboutIndexItems-white h3{
	color: #006666;
	text-align: left;
	margin-bottom: 8px;
}
.aboutIndexItems-white p{
	color: black;
}
.aboutIndexItems-white .photo{
	
}
.aboutIndexItems-white .info{
	width: 600px;
}
.aboutIndexItems span{
	display: block;
	width: 100%;
	border:  1px solid #ccc;margin:15px;
}

.aboutIndexItems:nth-child(1) .photo{
	background-image: url("/educate/gendaisyakai/about/images/image_manabi.jpg");
}
.aboutIndexItems:nth-child(2) .photo{
	background-image: url("/educate/gendaisyakai/about/images/image_curriculum.jpg");
}
.aboutIndexItems:nth-child(3) .photo{
	background-image: url("/educate/gendaisyakai/about/images/image_4fields_ver2.jpg");
}
.aboutIndexItems:nth-child(4) .photo{
	background-image: url("/educate/gendaisyakai/about/images/image_shikaku.jpg");
}

.aboutIndexItems-white:nth-child(1) .photo{
	background-image: url("/educate/gendaisyakai/about/images/image_greeting2023.jpg");
}
.aboutIndexItems-white:nth-child(2) .photo{
	background-image: url("/educate/gendaisyakai/about/images/image_history.jpg");
}
.aboutIndexItems-white:nth-child(3) .photo{
	background-image: url("/educate/gendaisyakai/about/images/image_philosophy.jpg");
}


@media screen and (max-width:575px){
	
	.aboutIndexItems{
		flex-flow: column-reverse;
		margin-bottom: 45px;
	}
	.aboutIndexItems .info{
		width: 100%;
	}
	.aboutIndexItems .photo{
		display: block;
		min-height: 100px;
		background-size: cover;
		margin-bottom: 15px;
	}
	
	.aboutIndexItems-white{
		display: flex;
	}
	.aboutIndexItems-white:nth-child(1) .photo{
		width: 100px;
	}
	
}

/** ---------------------------------------------
 ** manabi
 ** ---------------------------------------------*/

.manabi_4fields{
	text-align: center;
}
.manabi_4fields img{
	max-width: 640px;
}

@media screen and (max-width:575px){
	.manabi_4fields img{
		width: 100%;
		
	}
}

.threePoints{
	margin-top: 40px;
}
.threePoints ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding:0;
}
.threePoints ul li{
	width: 30%;
	list-style: none;
	border-radius: 10px;
	border: 1px solid #006666;
	color:#006666;
	display: block;
	padding: 25px;
}
.threePoints h4{
	font-weight: bold;
	font-size: 14px;
}
.threePoints p{
	font-size: 12px;
	margin-bottom: 0;
}

@media screen and (max-width:575px){
	.threePoints ul li{
		width: 100%;
		margin-bottom: 15px;
	}
}

.kousou-zu{
	max-width: 640px;
	margin: auto;
}

/** ---------------------------------------------
 ** Greeting
 ** ---------------------------------------------*/

.gakubucho{
	padding-left: 25px;
}
.gakubucho img{
	margin-bottom: 15px;
	font-weight: bold;
	max-width: 260px;
}
@media screen and (max-width:575px){
	
	.gakubucho div{
		max-width: 125px;
		font-size: 12px;
	}
}

/** ---------------------------------------------
 ** Philosophy
 ** ---------------------------------------------*/
.philosophyList li{
	margin-bottom: 25px;
}

.philosophyBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.philosophyBoxItem{
	border-radius: 10px;
	border-style:solid;
	border-width: 5px;
	width: 48%;
	margin-bottom: 40px;
}
.philosophyBoxItem dt{
	font-size: 26px;
	font-weight: bold;
	padding:20px 20px 10px 20px;
}
.philosophyBoxItem dd{
	padding:10px 20px;
}
.philosophyBoxItem:nth-child(1) dt{ color: #6BB6D5;}
.philosophyBoxItem:nth-child(2) dt{ color: #56B98C;}
.philosophyBoxItem:nth-child(3) dt{ color: #B0D05D;}
.philosophyBoxItem:nth-child(4) dt{ color: #D87FB1;}

.philosophyBoxItem:nth-child(1){ border-color: #6BB6D5;}
.philosophyBoxItem:nth-child(2){ border-color: #56B98C;}
.philosophyBoxItem:nth-child(3){ border-color: #B0D05D;}
.philosophyBoxItem:nth-child(4){ border-color: #D87FB1;}

.philosophyListNumber{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin:auto auto 25px auto;
	max-width: 640px;
}
.philosophyListNumber dt{
	font-weight: normal;
	text-align: center;
	font-size: 26px;
	width: 1em;
}
.philosophyListNumber dt::after{
	content:'';
	display: block;
	width: 1em;
	height: 5px;
	margin-top:-8px;
	background-color: #B6E6B6;
}
.philosophyListNumber dd{
	flex:1;
	padding-left: 45px;
}


.mokuhyouWrap{
	border-style: solid;
	border-width: 5px;
}
.mokuhyouWrap .title{
	text-align: center;
	font-size: 26px;
	padding: 8px;
	margin-bottom: 25px;
}
.mokuhyouWrap h4{
	font-size: 18px;
	font-weight: bold;
}
.mokuhyouWrap ol{
	padding-left: 60px;
	padding-right: 60px;
	margin-top:    20px;
	margin-bottom: 20px;
}


@media (max-width:575px){

	.philosophyBox{
		display: block;
	}
	.philosophyBoxItem{
		width: 100%;
	}
	.mokuhyouWrap ol{
		padding-left: 30px;
		padding-right: 30px;
	}
}


/** ---------------------------------------------
 ** Philosophy
 ** ---------------------------------------------*/

.historyLayout1{
	display: flex;
	flex-wrap: wrap;
	margin-bottom:25px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.historyLayout1 .title{
	width: 100px;
	height: 100px;
	border-radius: 100px;
	border: 2px solid #006666;
	text-align: center;
	line-height: 100px;
	font-size: 20px;
	color : #006666;
}
.historyLayout1 ol li{
	flex:1;
	line-height: 30px;
	font-weight: bold;
	color: #006666;
}

.historyTable{
	margin-bottom: 5px;
}

.historyTable .itemHeader{
	font-weight: bold;
	margin-bottom: 16px;
	color: #006666;
	letter-spacing: 0.15em;
}
.historyTable .itemHeader span{
	display: inline-block;
	background-color: #006666;
	color:white;
	padding: 4px 25px;
	
	margin-left: 10px;
	margin-right: 10px;
}

.historyTable th{
	border-top:none;
	border-bottom: 1px solid #ccc;
	background-color: white;
	color: black;
	width: 33%;
}
.historyTable td{
	border-top:none;
	border-bottom: 1px solid #ccc;
}

.historyMatome{
	border : 1px solid #ccc;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	padding: 40px;
}


.historyLayout2{
	display: flex;
	flex-wrap: wrap;
	margin-bottom:25px;

}

.historyLayout2 .title{
	width: 100px;
	height: 100px;
	border-radius: 100px;
	background-color:#006666;
	text-align: center;
	line-height: 100px;
	font-size: 20px;
	color : #fff;
}
.historyLayout2 .text{
	flex:1;
	padding-left: 40px;
}
.historyLayout2 .text h4{
	font-size:20px;
	color: #006666;
}

.historyMatome-second .title{
	border-radius: 4px;
	
}

.historyLayout2:last-child p,
.historyLayout2:last-child{
	margin-bottom: 0;
}


@media (max-width:575px){
	.historyLayout1 .list{
		flex: 1;
	}
	.historyTable th{
		font-size: 14px;
	}
	
	.historyLayout2 .title{
		width: 100%;
		height: auto;
		line-height: 100%;
		padding: 8px;
		margin-bottom: 15px;
	}
	.historyLayout2 .text{
		padding-left: 0;
	}
	.historyMatome{
		padding: 20px;
	}
}


/** ---------------------------------------------
 ** Curriculum
 ** ---------------------------------------------*/

/*
.curriculumBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.curriculumBoxItem{
	border-radius: 10px;
	border-style:solid;
	border-width: 5px;
	width: 48%;
	line-height: 180%;
}

@media screen and (max-width:575px){
	
	.curriculumBoxItem{
		width:100%;
	}
	
}

.curriculumBoxItem dt{
	font-size: 26px;
	font-weight: bold;
	padding:20px 20px 10px 20px;
}
.curriculumBoxItem dd{
	padding:10px 20px;
}
.curriculumBoxItem:nth-child(1) dt{ color: #6BB6D5;}
.curriculumBoxItem:nth-child(2) dt{ color: #56B98C;}
.curriculumBoxItem:nth-child(3) dt{ color: #B0D05D;}
.curriculumBoxItem:nth-child(4) dt{ color: #D87FB1;}

.curriculumBoxItem:nth-child(1){ border-color: #6BB6D5;}
.curriculumBoxItem:nth-child(2){ border-color: #56B98C;}
.curriculumBoxItem:nth-child(3){ border-color: #B0D05D;}
.curriculumBoxItem:nth-child(4){ border-color: #D87FB1;}

.curriculumBoxItem .thumb img{
	max-width: 100px;
	float:right;
	margin-left:10px;
}
*/

.curriculumBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.curriculumBoxItem{
	border-radius: 20px;
	border-style:solid;
	border-width: 4px;
	width: 24%;
	line-height: 140%;
}

@media screen and (max-width:575px){
	
	.curriculumBoxItem{
		width:100%;
	}
	
}

.curriculumBoxItem dt{
	font-size: 18px;
	font-weight: bold;
	padding: 18px 0;
	text-align: center;
}
.curriculumBoxItem dd{
	padding:0 0 8px 0;
	text-align: center;
}
.curriculumBoxItem dd a{
	display: inline-block;
	border-radius: 12px;
	padding: 4px 16px 4px 32px;
	font-size: 14px;
	color: #333;
	background: white;
	border: 1px solid #ccc;
	background-image: url("/educate/gendaisyakai/images/common/pdf.png");
	background-repeat: no-repeat;
	background-position: left 10px center;
}
.curriculumBoxItem dd a:hover{
	background-color: #333;
	color: white;
}

.curriculumBoxItem:nth-child(1) dt{ color: #6BB6D5;}
.curriculumBoxItem:nth-child(2) dt{ color: #56B98C;}
.curriculumBoxItem:nth-child(3) dt{ color: #B0D05D;}
.curriculumBoxItem:nth-child(4) dt{ color: #D87FB1;}

.curriculumBoxItem:nth-child(1){ border-color: #6BB6D5;}
.curriculumBoxItem:nth-child(2){ border-color: #56B98C;}
.curriculumBoxItem:nth-child(3){ border-color: #B0D05D;}
.curriculumBoxItem:nth-child(4){ border-color: #D87FB1;}

.curriculumBoxItem .thumb img{
	max-width: 100px;
	float:right;
	margin-left:10px;
}

/** ---------------------------------------------
 ** Shikaku
 ** ---------------------------------------------*/

.shikakuBox{
	margin-bottom: 35px;
}
.shikakuBox .title{
	border-bottom: 1px solid #ccc;
	margin-bottom: 8px;
	padding-bottom: 8px;
	font-size: 20px;
}
.shikakuBox .icons{
	display: inline-block;
	float:right;
}
.shikakuBox .icons span{
	display: inline-block;
	border-radius: 25px;
	padding: 4px 8px;
	font-size: 10px;
	color:white;
}

.shikakuBox p.text{
	font-size: 14px;
}

@media screen and (max-width:767px){
	.shikakuBox .title{
		padding-bottom: 12px;
	}
	.shikakuBox .icons{
		display: block;
		float:none;
	}
	.shikakuBox .icons span{
		font-size: 8px;
	}
}

.hiddenBox{
	display: none;
	border: 1px solid #ccc;
	border-radius: 15px;
	padding: 40px;
}
.hiddenBox h4{
	border-bottom: 1px solid #006666;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.shikakuBox .hiddenBox h5{
	font-size: 18px;
	font-weight: bold;
	color: #006666;
}
.hiddenBox p{
	text-indent: 1em;
	font-size:86%;
	
}

.chushakuWrap{
	border: 1px dotted #ccc;
	border-radius: 10px;
	padding: 15px;
}
/** ---------------------------------------------
 ** 4Fields
 ** ---------------------------------------------*/

.senkouBox{
	margin-top:25px;
	margin-bottom:25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.senkouBox .visual{
	position: relative;
	width: 150px;
	height: 150px;
}
.senkouBox .visual div{
	position: absolute;
	top: 25px;
	left:25px;
	background:  no-repeat;
	width: 150px;
	height: 150px;
	background-size: cover;
}
.senkouBox .navi{
	padding-left: 100px;
	flex:1;
}
.senkouBox .title{
	font-size: 20px;
	font-weight: bold;
}
.senkouBox .name{
	margin-bottom: 25px;
	font-size: 40px;
	letter-spacing: 0.1em;
}

.senkouBox.shakai .visual{ background-color: #0072B7;}
.senkouBox.shakai .visual div{ background-image: url("/educate/gendaisyakai/about/images/4fields/v_shakai.jpg");}

.senkouBox.community .visual{ background-color: #56B98C;}
.senkouBox.community .visual div{ background-image: url("/educate/gendaisyakai/about/images/4fields/v_community.jpg");}

.senkouBox.fukushi .visual{ background-color: #B0D05D;}
.senkouBox.fukushi .visual div{ background-image: url("/educate/gendaisyakai/about/images/4fields/v_fukushi.jpg");}

.senkouBox.kokusai .visual{ background-color: #D87FB1;}
.senkouBox.kokusai .visual div{ background-image: url("/educate/gendaisyakai/about/images/4fields/v_kokusai.jpg");}


@media screen and (max-width:575px){
	.senkouBox{
		display: block;
		margin-bottom: 45px;
	}
	.senkouBox .visual{
		margin-left:auto;
		margin-right:auto;
		margin-bottom: 45px;
	}
	.senkouBox .visual div{
		top:10px;
		left:10px;
	}
	.senkouBox .navi{
		padding-left:0;
	}
	.senkouBox .navi p{
		font-size: 86%;
	}
	
	.senkouBox .title{
		text-align: center;
		font-size:16px;
	}
	.senkouBox .name{
		font-size: 26px;
		text-align: center;
	}
}


/** ---------------------------------------------
 ** 4 Fields
 ** ---------------------------------------------*/

.toSenkouTop a{
	display: block;
	text-align: center;
	border:1px solid #ccc;
	max-width: 100%;
	width: 320px;
	margin-left:  auto;
	margin-right: auto;
	margin-bottom: 60px;
	padding: 8px;
	color: #006666;
}
.toSenkouTop a:hover{
	color: #fff;
	border-color: #6BB6D5;;
	background-color: #6BB6D5;
}

.senkouMenu{
	padding: 40px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.senkouMenu li{
	list-style: none;
	width: 30%;
	border:1px solid #006666;
	margin-top: 5px;
	margin-bottom: 5px;
}
.senkouMenu li a{
	padding: 10px 10px 10px 16px;
	display: block;
	color: #333;
	position: relative;
}
.senkouMenu li a:hover{
	color: #fff;
	text-decoration: none;
	background-color: #6BB6D5;
}

.senkouMenu li a::before{
	content:'▲';
	color: #006666;
	display: block;
	position: absolute;
	top:   18px;
	bottom:0;
	left:0;
	right:0;
	transform: rotate(90deg);
	font-size: 8px;
	width: 1em;
	height: 1em;
}

@media screen and (max-width:575px){
	.senkouMenu li{
		width: 100%;
	}
}

.senkouColumnList{
	
}

#majorColumn .container{
	background-color: white;
	margin-bottom: 45px;
}
@media screen and (max-width:575px){
	#majorColumn{
		padding:10px;
	}
	#majorColumn .container{
		margin-bottom: 5px;
	}
	#majorColumn .photo-right{
		max-width: 50%;
	}
}

#majorColumn h3 small{
	display: block;
	padding-bottom: 8px;
}
#majorColumn h4{
	color: #006666;
	margin-bottom: 20px;
}

#majorColumn h5{
	margin-bottom: 10px;
	font-weight: bold;
	color: #6BB6D5;
}
/*.clr_shakai{
	color: #0072B7;
}
.clr_community{
	color: #008C76;
}
.clr_fukushi{
	color: #829F3A;
}
.clr_kokusai{
	color: #B26982;
}*/
.major_social{
	border-top: 8px solid #0072B7;
}
.major_community{
	border-top: 8px solid #008C76;
}
.major_welfare{
	border-top: 8px solid #829F3A;
}
.major_culture{
	border-top: 8px solid #B26982;
}

.arrow::after{
	display: block;
	text-align: center;
	content:'▼';
}

.table-fieldwork{
	max-width: 640px;
	margin-left:auto;
	margin-right:auto;
}
.table-fieldwork td,
.table-fieldwork th{
	text-align: center;
}


.majorSocial h4{ color: #0072B7; }
.majorCommunity h4{ color: #008C76; }
.majorWelfare h4{ color: #829F3A; }
.majorCulture h4{ color: #B26982; }
.majorSection .col p{
	margin-bottom: 25px!important;
}

@media screen and (max-width:575px){

	.majorSection .photo{
		max-width: 50%;
	}
	.majorSection.majorCommunity .photo{
		max-width: 100%;
		padding-left:0;
		margin-bottom: 15px;
	}
	.majorSection h4{
		font-size: 22px;
	}
	.majorSection .col p{
		margin-bottom: 45px!important;
	}
	
	.majorSection.majorWelfare .photo{
		max-width: 100%;
		padding-left:0;
		margin-bottom: 15px;
		border:1px solid #ccc;
		padding: 8px;
		font-size: 12px;
	}
	
}