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

/* 共通スタイル-- */

:root{
	--ruri-color:#d9e480;
	--footer-bg:#d9e480;
	--btn-color:#CC0000;
	--btn-border-color:#CC0000;
	--bg-purple:url("../images/img_main.webp");
	--bg-tetsukon:#efb387;
	--maintitle-coler:#000000;
}


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: #000000;
	height: 100%;
	margin: 0;
}
  
h2{
	text-align: center;
	padding-bottom: 20px;
	color:var(--maintitle-coler);
}

.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; }

.f-nomal{
	font-weight: normal;
}
.pc-type{
	display:block;
}

.sp-type{
	display:none;
}

.inline-type{
	display: inline-block;
}

.moji-s{
	font-size:1.3rem;
}

.gyoukan{
	line-height:1.3;
}
 #contents-wrap{
 	margin: 0 auto;
	padding: 0;
	line-height: 1.6;
 }
 
 .title-wrap{
 	background:url("../images/img_main.webp");
	background-position: bottom center;
	 background-size:cover;
	 background-repeat: no-repeat,no-repeat;
	text-align: center;
	 width:100%;
 }

.toumei{
  background-color: rgba(255, 255, 255, 0.6);
}


 .title-overflow{
 	max-width: 1100px;
	width: 100%;
  	display: flex;
	justify-content:center;
	margin: 0 auto;
	padding: 20px 0 0;
}
 
 .logo-right{
 }

 .logo-right figure{
 	width: 200px;
	margin: auto;

 }
 
 .pr-left{
 	/*color: #CC0000;*/
   font-size: 1.5rem;
   padding-top: 25px;
 }
 
.title_shadow{
	text-shadow:1px 1px 2px #00000050;
}
.title-sanka{
 	font-size:1.3rem;
	padding:5px 10px;
	background: #dfef90;
	width:180px;
	margin:10px auto;
	text-align: center;
	color: #000;
	font-weight: bold;
	
}
.mini{
	font-size:2.5rem;}

.midoricolor{
		color: #74aa56;
}
.koimidoricolor{
		color: #415c00;
}

 
 
 .title-svg{
     width: 54%;
     margin: 0 auto;
 }
 
 .title-sub{
 	display: block;
	text-align: center;
	margin: 0 auto;
	font-size: 3.8rem;
	font-weight: bold;
	line-height: 1.2;
 }

	 
.title-text{
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.4;
	font-family: 'Noto Serif JP', serif;
	color:var(--maintitle-coler);
}

.label{
	background:#000000;
    padding: 5px;
    font-weight: bold;
	color: #FFF;
    font-size: 1.25rem;
    width: 15%;
    border-radius: 50px;
    margin: 15px auto 0;
	}
		
.title-main{
	font-size: 3.182rem;
	line-height: 1.4;
	color:var(--maintitle-coler);
	font-family: 'Noto Serif JP', serif;
}

.title-main span{
	font-size: 2.5rem;
	display: block;
}

.s-blacktxt{
	font-size: 1.5rem;
	display: flex;
	align-items: center; /* 垂直中心 */
	justify-content: center; /* 水平中心 */
	font-weight: bold;
	font-family: 'Noto Serif JP', serif;
	color:var(--maintitle-coler);
}
.s-blacktxt:before, .s-blacktxt:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.s-blacktxt:before {
  margin-right: 1em; /* 文字の右隣 */
}
.s-blacktxt:after {
  margin-left: 1em; /* 文字の左隣 */
}


.title-date{
	font-size: 2rem;
    font-weight: bold;
	line-height: 1.4;
/*	margin-bottom: 20px;*/
}

.redcolor{
		color: #cf1225;
	}

.blackcolor{
		color: black;
	}
	.title-date span.redcolor,
	.title-date .kaigyo span.redcolor{
		font-size: 3rem;
		color: red;
	}
	
span.graycolor{
    color: gray;
}


.bg-overlay{
	/*background: #081d0850;*/
	mix-blend-mode:multiply;
	height: 150px;
}

.absolute{
position: absolute;
 width: 100%;
top:0;
margin: 0 auto;
}


.overlay-wrap{
	position: relative;
}

/* 日付  */

.box-hiduke {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 800px;
    margin: 30px auto;

	
}
.box-child {
    width: calc(100%/2);
    height: auto;
    display: flex;
    flex-direction: column;
    border: 10px solid transparent;
    box-sizing: border-box;

}
/*.box-text{
	background: #F5FFBF;
}*/

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

.btn-wrap p.deadline{
	margin: 0;
    color: #cf1225;
    font-size:1.0rem;
    font-weight: bold;
	margin-bottom: 8px;
}

.btn-wrap p.deadline-setsumei{
	margin: 0;
    color: #000000;
    font-size: 0.9rem;
    margin: 20px;
}


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

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

.title-wrap .btn-animation-02 {
  width: 40%;
 /* 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: var(--btn-color);
	  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:  var(--btn-color);
	}

	.btn-animation-02:hover,
	.btn-animation-02 a:hover {
	  color:  var(--btn-color);
	}
	
	
.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;
	}
	
	

.btn-11 {
  position: relative;
  color: #52655f;
}
.btn-11:before, .btn-11:after {
  position: absolute;
  top: 50%;
  content: '';
  width: 20px;
  height: 20px;
  background-color: #334a43;
  border-radius: 50%;
}
.btn-11:before {
  left: -20px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.btn-11:after {
  right: -20px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.btn-11:hover {
  color: #ccd2d0;
}
.btn-11:hover:before {
  -webkit-animation: criss-cross-left 0.8s both;
          animation: criss-cross-left 0.8s both;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
.btn-11:hover:after {
  -webkit-animation: criss-cross-right 0.8s both;
          animation: criss-cross-right 0.8s both;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
.hosoji{font-weight: 300;}

.waku{
padding:2px 20px;
margin-right:10px;
border-radius: 20px;
background-color: #74aa56;
color: #fff;
}

.waku-2{
padding:2px 20px;
margin-right:10px;
background-color: #74aa56;
color: #fff;
font-weight: bold;
}



/* main */

#main-contents{
	width: 100%;
	margin: 0 auto;
	padding-top:30px;
}


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


	.greeting-text{
		text-align: left;
		font-size: 0.9375rem;
		line-height: 1.8;
	}
	
	.greeting-chief{
		text-align: right;
		padding-top: 30px;
		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  lightgray;	
		font-size: 0.9375rem;
	}
	
		.about-list dt{
			display: flex;
			justify-content: center;
			align-items: center;
			width:15%;
            color: #000000;
			text-align: center;
			font-weight: bold;
			background-color: var(--ruri-color);
			vertical-align: middle;
			border-top: 1px solid  #FFFFFF;
		}
		
		.about-list dt:first-child{
			border-top: 1px solid  #FFFFFF;
		}


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

       /* .about-list dd span{
            font-weight: bold;
        }*/


.instructor-wrap{
	width: 100%;
	margin: 0 auto ;
	background: var(--ruri-color);
	padding-bottom: 30px;
}
	.instructor-wrap h2{
			padding-top: 30px;
			padding-bottom: 0;
            color:var(--maintitle-coler);
		}
	.instructor-intro{
		padding: 20px 0;
	}
	
	.instructor-info{
		font-weight: bold !important;
		display: block;
		padding-bottom: 10px;
		color: #415c00;
	}

.mt15{
	margin-left:15px;
}


    .lightgeen{ background: #abc080;}
    
    .instructor-intro h3{
			/*border-bottom: 1px solid #000000;*/
			font-weight: bold;
			font-size:1.25rem;
			max-width: 1000px;
			width: 100%;
			margin: 0 auto 10px;
			padding: 10px 0;
			text-align: center;
		}
		
        .instructor-intro .panel-title{
			font-size:1.25rem;
            text-align: center;
            padding: 0 0 30px;
            color:#000000;
        }
        
        .instructor-intro h3.whitecolor{
            color:var(--maintitle-coler);
			border-bottom: 1px solid var(--maintitle-coler);;
        }

        .instructor-intro .panel-title.whitecolor{
            color:var(--maintitle-coler);
        }
        
		.instructor-wrap img{
			max-width: 200px;
			width: 100%;
			height: auto;
		}

.instructor-wrap.tetsukon{
	background: var(--bg-tetsukon);
}

 .instructor-box{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0 10px 0 10px;
	flex-wrap: wrap;
 }

 .instructor-box-flex{
display: flex;
    justify-content: flex-start;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    color: #000000;
	 background-color: #fff;
 }
 
 
	.instructor-list{
		background-color: #FFF;
		margin:20px 0 0 0;
		padding: 15px;
		width: 100%;
	}

	.instructor-list-flex{
    background-color: #fff;
    margin: 0 10px 10px 0;
    padding: 0 0 15px;
    max-width: 470px;
    width: 100%;
}
	.instructor-list-flex-bt0{
    background-color: #fff;
    margin: 0;
    padding: 0;
    max-width: 470px;
    width: 100%;
}

	.mt0{margin: 0 0 0 0;}



	.instructor-list.mr0{margin-right: 0;}
	.instructor-list.mt0{margin-top: 0;}

	.instructor-list .position {
	line-height: 1.4;
    border-bottom: 1px solid #CCC;
    margin: 0 0 20px 0 ;
	}

	.title-left{
 margin:5px 0 0 15px;
	}
	
	.position li:nth-child(odd){
		font-weight: bold;
	}
    
   /* .position li:nth-child(odd) span{
        font-weight: 300;
    }*/
    
	
	.position li:nth-child(even){
		font-size: 0.875rem;
	}
	
 	.explanation{
		display: flex;
		justify-content: flex-start;
	}
		.explanation li:first-child{
			 /*width: 50%;*/
			margin-right: 20px;
		}
		
		.explanation li:nth-child(2){
			    width: 80%;
		}
		
		.explanation li.wide{max-width: 150px;}
	
		.explanation li figure{
			width: 100%;
		}
		
		.explanation li p{
			width: 100%;
			font-size: 0.875rem;
			line-height: 1.4;
		}
		.explanation li p.co{
			font-weight: bold;
			font-size: 1rem;
		}

		.explanation li p.koshi-name{
			font-weight: bold;
			font-size: 1.25rem;
			border-bottom: 1px solid #CCC;
			margin-bottom: 10px;
			padding-bottom: 5px
		}

		.explanation li p.position{
			font-size: 0.875rem;
		}
	

.explanation-small{
	display: flex;
	justify-content: flex-start;
}
	.explanation-small li:first-child{
		width: 25%;
		margin-right: 10px;
	}

	.explanation-small li:nth-child(2){
			width: 70%;
	}

	.explanation-small li.wide{max-width: 150px;}

	.explanation-small li figure{
		width: 100%;
	}

	.explanation-small li p{
		width: 100%;
		font-size: 0.875rem;
		line-height: 1.4;
	}
	.explanation-small li p.co{
		font-weight: bold;
		font-size: 1rem;
	}

	.explanation-small li p.koshi-name{
		font-weight: bold;
		font-size: 1.25rem;
		border-bottom: 1px solid #CCC;
		margin-bottom: 10px;
		padding-bottom: 5px
	}

	.explanation-small li p.position{
		font-size: 0.875rem;
	}
	

		
.program-wrap{
	max-width: 900px;
	width: 100%;
	margin: 30px auto 0;
}

.program-wrap h2{
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 1rem;
}

.program-wrap p.text-info{
	text-align: center;
	margin: .5rem 0 2rem;
	
}

	.program-list{
		display: flex;
    	justify-content: flex-start;
		flex-wrap: wrap;
		border-bottom: 1px solid  lightgray;	
		font-size: 0.875rem;
		line-height: 1.2;
	}
	
		.program-list dt{
			display: flex;
			justify-content: center;
			align-items:center;
			width:15%;
			text-align: center;
			font-weight: bold;
			padding: 10px 0;
			background-color: var(--ruri-color);
			vertical-align: middle;
			border-top: 1px solid #FFFFFF;
		}
		
		.program-list dt:first-child{
			border-top: 1px solid #FFFFFF;
		}
		
		.program-list dt.pt20{
			padding-top: 23px;

		}
		
		.program-list dt.tetsukon{
			background: var(--bg-tetsukon);
		}
        
        .program-list dt.darkgreen{
            background:#78a660;
        }

		.program-list dd{
			width: 85%;
			padding:10px 10px;
			border-top: 1px solid lightgray;
			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: var(--footer-bg);
	color: #000000;
	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: #000000;
		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;}


.accordion {
margin: 3em auto 1rem;
max-width: 60vw;
}

.toggle {
display: none;
}

.option {
position: relative;
margin-bottom: 1em;
}

.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}

.title {
border: solid 1px #ccc;
padding: 0.5em;
display: block;
color: #333;
font-size: 0.825rem;
font-weight: bold;
}

.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}

.title::after {
transform: rotate(90deg);
}

.content {
max-height: 0;
overflow: hidden;
}

.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}

.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}

.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}



@media screen and (max-width:1050px){
	 .title-sub{

	font-size: 3.5rem;

 }
.instructor-box-flex {
    display: block;
    padding: 10px 0 0;
    color: #000000;
}
	
	.instructor-list-flex {
    margin: 0 auto 0;
    max-width: 100%;
}
}


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

 .title-svg{
     width: 80%;
 }

.title-sub {
    font-size: 3.0rem;

}

.title-main span{
	font-size: 1.25rem;
}

.title-main{
    font-size: 1.825rem;
	margin-top:10px;
}		

.label{width: 30%;}
.s-blacktxt{
	font-size: 1.5rem;
	display: flex;
	align-items: center; /* 垂直中心 */
	justify-content: center; /* 水平中心 */
}
.s-blacktxt:before, .s-blacktxt:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.s-blacktxt:before {
  margin-right: 1em; /* 文字の右隣 */
}
.s-blacktxt:after {
  margin-left: 1em; /* 文字の左隣 */
}


.title-date{
	font-size: 1.5rem;
    font-weight: bold;
}

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

.greeting-wrap,
.about-wrap,
.about-wrap2,
.program-wrap{
	padding: 0 10px;
    line-height: 1.2;
	background: #FFF;
}

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

.instructor-box{display: block;
	padding: 0 5px;
}

.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% ;}

}

.mt30{ margin-top: 30px;}
.mb30{margin-bottom: 30px;}

@media screen and (max-width:590px){
	.pc-type{
	display:none;
}

.sp-type{
	display:block;
}
	
.waku-2{
margin-bottom:10px;
}
	
.instructor-intro {
    padding: 0 0;
}

.box-child {
    width: calc(100%/1);
}
	
.mini {
    font-size: 1.5rem;
}
 .title-svg{
     width: 100%;
 }
 
  .pr-left{
 	/*color: #CC0000;*/
   font-size: 1.5rem;
   padding-top:0;
 }

 
 .kaigyo{
 	display: block;
 }
 
 .title-date{
 	line-height: 1.4
 }
 
  .title-overflow{
 	max-width: 1100px;
	width: 100%;
  	display: block;
	margin: 0 auto;
}

.title-h1 h1{
	font-size:1.5rem;
	line-height: 1.2;
}

.title-sub{
	font-size: 2.5rem;
    line-height: 1.2;
}
	
.btn-wrap p.deadline{
    font-size:1.0rem;
}
	

.label{width: 50%;}

.explanation {
     display: block; 
    justify-content: center;
}

.explanation li:first-child,
.explanation li:nth-child(2){
	width: 100%;
}


.instructor-wrap img {
    max-width: 180px;
    width: 100%;
	height: auto;
    margin: 0 auto 10px;
}

.instructor-list-flex {
    margin: 0 auto; 
    max-width: 100%;
}
}


@media screen and (max-width:320px){
	.btn-animation-02 {

    font-size: 1.0rem;
	}
.title-main {
    font-size: 1.5rem;	
}
.title-main span {
    font-size: 1rem;
	}

.s-blacktxt {
    font-size: 1rem;
}
	.bg-overlay {
    margin: 0 auto 20px;
}
}