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

/* 共通スタイル------------------------- */
body {
	font-family: 'YuGothic','Yu Gothic',Hiragino Sans,'ヒラギノ角ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo', 'メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #121212;
	background: #e9ecec;
	height: 100%;
	margin: 0;
}
  
h2{
	text-align: center;
	padding-bottom: 20px;
	background: #e9ecec;
	color: #9c7440;
}

.blank{
	display: block;
    padding: 0.6rem;
    font-size: 0.735rem;
}


a {
  text-decoration: none;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }

 #contents-wrap{
 	margin: 0 auto;
	padding: 0;
	line-height: 1.6;
 }
 
 .title-wrap{
 	background: url("../img/img_main.jpg");
	background-size: cover;
	background-position: center;
	padding:20px 0;
	text-align: center;
	color: #fff;
 }
 
 .title-sub{
 	display: block;
	justify-content: center;
	width: 90%;
	margin: 0 auto;
 }

	.title-sub figure{
		width: 15%
	 
	 }
	 
.title-text{
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.4;
	text-shadow: 3px 3px 3px rgba(0,0,0,1);
}

.label{
	width: 22%;
	padding-top: 10px;
}

.label span{
	background: #FFF;
	color: #fff;
	padding: 10px;
	font-weight: bold;
	font-size:1rem;
}
		
.title-main{
	font-size: 2.8rem;
	line-height: 1.4;
	text-shadow: 3px 3px 3px rgba(0,0,0,1);
	color: #fff;
	margin-top: 10px;
}
	.title-main span.s-blacktxt{
				font-size: 2rem;
				display: block;
				color: #fff;
			}

	.title-main span.m-blacktext{
		color: #fff;
	}

.title-date{
	font-size: 1.5rem;
    font-weight: bold;
	text-shadow: 3px 3px 3px rgba(0,0,0,1);
}

	.title-date span{
		font-size: 2.4rem;
	}
	 

/* btn  */
.btn-wrap{ text-align: center;}

.btn-wrap p.deadline{
	margin: 20px 0 0;
    color: #cf1225;
    font-weight: bold;
}

.btn-wrap p.deadline.white{
	color: #cf1225;
}

.btn-animation-02 {
  display: inline-block;
  width: 40%;
  text-align: center;
  background-color: #fff;
  border: 2px solid #cf1225;
  font-size: 1.25rem;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  position: relative;
}

.title-wrap .btn-animation-02 {
  width: 20%;
  margin-top: 20px;

}

	.btn-animation-02 a{
		color: #fff;
		display: block;
	}

	.btn-animation-02 span {
	  position: relative;
	  z-index: 1;
		display: block;
		padding: 10px 24px;
	}

	.btn-animation-02::before,
	.btn-animation-02::after {
	  content: "";
	  display: block;
	  background-color: #cf1225;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  transition: .2s;
	}
	.btn-animation-02::before {
	  left: 0;
	}
	.btn-animation-02::after {
	  right: 0;
	}

	.btn-animation-02:hover:before,
	.btn-animation-02:hover:after {
	  width: 0;
	  background-color: #fff;
	  color: #cf1225;
	}

	.btn-animation-02:hover,
	.btn-animation-02 a:hover {
	  color: #cf1225;
	}
	
	
.btn-close{
	display: inline-block;
	padding: 5px 40px;
	text-align: center;
	background-color: #ccc;
	font-size: 1.25rem;
	color: #FFF;
	font-weight: bold;
	border-radius: 4px;
	position: relative;
}

	.instructor-wrap .btn-wrap p.deadline{
		color:#cf1225;
	}
	
	.btn-wrap.mt30{
		margin-top: 30px;
	}

/* main */

#main-contents{
	width: 100%;
	margin: 0 auto;
}


.greeting-wrap{
	max-width: 800px;
	width: 100%;
	margin: 30px auto;
}


	.greeting-text{
		text-align: left;
		font-size: 0.9375rem
	}
	
	.greeting-chief{
		text-align: right;
		padding-top: 20px;
		font-size: 0.9375rem
	}
			.greeting-chief span{
				font-weight: bold;
			}

.border{ border-bottom: 1px solid #ccc;}

.about-wrap{
	max-width: 800px;
	width: 100%;
	margin: 30px auto 30px;
	background: #fff;
	
}
	.about-list{
		display: flex;
    	justify-content: flex-start;
		flex-wrap: wrap;
		border-bottom: 1px solid black;	
		font-size: 0.9375rem;
	}
	
		.about-list dt{
			display: block;
			width:15%;
			color:#FFF;
			text-align: center;
			font-weight: bold;
			padding-top: 10px;
			background-color: #222;
			vertical-align: middle;
			border-top: 1px solid #FFF;
		}
		
		.about-list dt:first-child{
			border-top: 1px solid black;
		}
		
		.about-list dt.pt20{
			padding-top: 23px;

		}
		.about-list dd{
			width: 85%;
			padding: 10px 20px;
			border-top: 1px solid black;
			background: #FFF;
		}

.instructor-wrap{
	width: 100%;
	margin: 60px auto 30px;
	/*background: url("../img/koushi.png");*/
	background: #FFF;
}

	.instructor-intro{
		padding: 30px 0;
	}
	
	
		.instructor-intro h3{
			border-bottom: 1px solid #222;
			color: #222;
			font-weight: bold;
			font-size:1.25rem;
			max-width: 1000px;
			width: 100%;
			margin: 0 auto;
			padding: 10px 0;
			text-align: center;
		}
		
 .instructor-box{
 	display: flex;
	justify-content: center;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	flex-wrap: wrap;
 }
 
 
	.instructor-list{
		background-color: #FFF;
		margin:0 10px 0 0;
		padding: 15px;
		max-width: 480px;
		width: 100%;
	}
	.instructor-list.mr0{margin-right: 0;}

	.instructor-list .position {
	line-height: 1.4;
    border-bottom: 1px solid #CCC;
    margin: 0 0 20px 0 ;
	}
	
	.position li:nth-child(odd){
		font-weight: bold;
	}
	
	.position li:nth-child(even){
		font-size: 0.875rem;
	}
	
 	.explanation{
		display: flex;
		justify-content: flex-start;
	}
		.explanation li:first-child{
			width: 36%;
			margin-right: 20px;
		}
		.explanation li:nth-child(2){
			width: 60%;
		}
	
		.explanation li figure{
			width: 100%;
		}
		
		.explanation li p{
			width: 100%;
			font-size: 0.875rem;
			line-height: 1.4;
		}
		
		
.program-wrap{
	max-width: 900px;
	width: 100%;
	margin: 30px auto 30px;
	
}
	.program-list{
		display: flex;
    	justify-content: flex-start;
		flex-wrap: wrap;
		border-bottom: 1px solid black;	
		font-size: 0.875rem;
		line-height: 1.2;
	}
	
		.program-list dt{
			display: block;
			width:15%;
			color:#FFF;
			text-align: center;
			font-weight: bold;
			padding-top: 10px;
			background-color: #222;
			vertical-align: middle;
			border-top: 1px solid #FFF;
		}
		
		.program-list dt:first-child{
			border-top: 1px solid black;
		}
		
		.program-list dt.pt20{
			padding-top: 23px;

		}
		.program-list dd{
			width: 85%;
			padding:10px 10px;
			border-top: 1px solid black;
			line-height: 1rem;
			background: #FFF;
		}
		
		.program-list dd span{
			font-weight: bold;
		}
		
.program-list dt.pt3p{padding-top:3%;}
.program-list dt.pt4p{padding-top:4%;}
.program-list dt.pt5p{padding-top:5%;}
.program-list dt.pt9p{padding-top:9%;}
.program-list dt.pt12p{padding-top:12%;}

.footer-wrap{
	width: 100%;
	background-color: #222;
	color: #FFF;
	text-align: center;
	margin-top: 30px;
	padding: 20px 20px 0 20px;
}

	.ft-name{
		font-size: 1.125rem;
		line-height: 1.4;
		font-weight: bold;
	}
	
	.ft-notes{
		margin: 20px 0;
	}
	
	.ft-notes a{
		color: #FFF;
		text-decoration: none;
	}
	.ft-notes a:hover{
		text-decoration: underline;
	}
	
.attention{
	font-size: 0.735rem;
	padding: 10px 0;
	text-align: right;
}

span.txt-small{font-size: 0.735rem; font-weight: normal !important;}
span.txt-small8{font-size: 0.875rem; font-weight: normal !important;}
span.txt-small5{font-size: 0.625rem; font-weight: normal !important;}
	

@media screen and (max-width:1050px){
	.title-sub p.label span{font-size: 0.875rem;}
	.title-sub p.text{font-size: 1.25rem;}
	.title-wrap .btn-animation-02{width: 40%;}
}


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

 .title-sub{
 	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 auto;
 }

	.title-sub figure{
		width: 20%;
	 
	 }
	 
	.title-sub p.text{
		width: 80%;
		font-size: 0.875rem;
		font-weight: bold;
		line-height: 1.4;
		text-shadow: 3px 3px 3px rgba(0,0,0,1);
	 }
	 
	.title-sub p.label{
		width: 100%;
		padding-top: 10px;
		margin: 10px;
	 }
	 
		.title-sub p.label span{
			background: #FFF;
			color: #cf1225;
			padding: 10px;
			font-weight: bold;
			font-size:1rem;
		}
.title-main{
    font-size: 1.825rem;
	margin-top:10px;
}		

	.title-main span.s-blacktxt{
				font-size: 1.5rem;
				display: block;
				color: #fff;
			}
	.title-main span.s-blacktext{
				font-size: 1rem;
			}

.title-date{
	font-size: 1rem;
    font-weight: bold;
	text-shadow: 3px 3px 3px rgba(0,0,0,1);
}

	.title-date span{
		font-size: 2rem;
	}
	 
.title-wrap .btn-animation-02{
	width: 72%;
}
.title-text{
	font-size: 1rem;
}

.greeting-wrap,
.about-wrap,
.program-wrap{
	padding: 0 20px;
    line-height: 1.2;
	background: #e9ecec;
}

.btn-animation-02{width: 72%;}

.instructor-box{display: block;}

.footer-wrap{
	font-size: 0.750rem;
}
.ft-name{
	font-size: 0.875rem;
	line-height: 1.2;
}


.attention{text-align: left;}
.program-list {font-size: 0.875rem;}
.program-list dt{width: 20%;}
.program-list dd{width: 80%; word-break: break-all;}
.program-list dt.pt12p{padding-top:4%;}
.program-list dt.pt9p { padding-top: 4%;}
.instructor-list.mr0{margin-right: auto}
.instructor-list{margin: 30px auto 0; max-width: 100% ;}

}