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

/***** FONT SIZE ****************************************************/
html{
  font-size: 62.5%;
}

body{
  font-size: 14px;
  font-size: 1.4rem;
}

h1{
  font-size: 18px;
  font-size: 1.8rem;
}

h2{
  font-size: 16px;
  font-size: 1.6rem;
}

/**** decoratio *****************************************************/
.red{
	color: #7c0451;
}

.bold{
	font-weight: bold;
}

.torikeshi{
	text-decoration: line-through;
}

.togray{
	filter: grayscale(0%);
	transition:0.5s;
	transition:0.5s;
}

.togray:hover{
	filter: grayscale(100%);
}

a.p-events{
  pointer-events: none;/*リンクを非リンクに変える*/
  cursor: default;/*マウスカーソルを矢印のまま変えない*/ 
  text-decoration: none;/*下線を消す*/ 
  color: #5a4498;/*非リンクの文字色と同じにする*/
}

/**** FANCYBOX / responsiv **************************************************/
.fancy{
	display: block;
}
	
.fancy-res{
	display: none;
}

/** Responsiv 600px OVER **********************/
		@media only screen and (min-width: 480px) {
			.fancy{
				display: none;
			}
			.fancy-res{
				display: block;
			}
		}
	

/**** br/responsiv **************************************************/
.br-sp{
	display: block;
}
	
		/** Responsiv 600px OVER **********************/
		@media only screen and (min-width: 600px) {
			.br-sp{
				display: none;
			}
		}
				
/***** TO TOP *******************************************************/
.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;
}
.pagetop a {
	display: block;
	width: 60px;
	height: 60px;
	background-color: rgba(38, 38, 38,0.7);
	border-radius: 30px;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}

.arrow {
	position: absolute;
	width: 15px;
	height: 15px;
	border: 5px solid rgba(38, 38, 38,0);
	border-left-color: #FFF;
	border-top-color: #FFF;
	top: 25px;
	left: 23px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg)
}
		
/***** BODY *********************************************************/
body{
  color: #333;
  font-family: sans-serif;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

a:link{color:#5A4498;text-decoration:none;}/*FONT COLOR VIOLET*/
a:visited{color:#5A4498;text-decoration:none;}
a:active{color:#5A4498;text-decoration:none;}
a:hover{color:#7C0451;text-decoration:underline;}

img{
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}


/***** パンくず *******************************************************/
.topicpath{
	width: 100%;
	padding-left: 0.5rem;
}

.topicpath ol li{
	display: inline;
	line-height: 1.4;
}

.topicpath ol li:before {
    content: " > ";
}

.topicpath ol li:first-child:before {
    content: none;
}

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

/***** NAVER ********************************************************/
.naver a {
	background: #7c0451; /* Old browsers */
	background: -ms-linear-gradient(top,  #7c0451 0%,#6c0346 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #7c0451 0%,#6c0346 100%); /* W3C */
	color: white; 
	display: block; 
	float: left; 
	font-size: 1.8rem; 
	line-height: 3; 
	margin: 0 1px 0 0; 
	padding: 0 20px; 
	text-decoration: none;
}

.naver a:hover {
  background: #262626; 
}

.naver.enabled a { 
  float: none; 
  margin: 0 0 1px 0; 
  width: 100%;
}

		/** Responsiv 600px OVER **********************/
				@media only screen and (min-width: 600px) {
					.naver a {
				  	font-size: 1.6rem;
				  	line-height: 2; 
				  	padding: 0.5rem 20px; 
					}
				}

/***** HEADER *******************************************************/
header{
	position: relative;
}

header h1{
	font-size: 1.6rem;
	text-align: center;
	line-height:1.4;
	color: #666;
	padding: 0.5rem 0;
	border-top: 5px solid #7c0451;
}

header h2{
	width: 80%;
	margin: 5px auto;
}

.title1{
	position: absolute;
	top: 20px;
	left: 10px;
	z-index: 888;
	width: 100px;
	height: auto;
}

.title1 img{
	width: 100%;
	height: 100%;
}

.sns-logo{
	position: absolute;
	top: 20px;
	right: 10px;
	width: 30px;
	height: 30px;
	line-height: 3;
	z-index: 999;	
}

		/** デスクトップ 600px OVER *************************/
		@media only screen and (min-width: 600px) {
			.title1{
				top: 20px;
				left: 15px;
				width: 200px;
				margin-top: 35px;
			}

			.sns-logo{
				top: 50px;
				right: 20px;
				width: 50px;
				height: 50px;
				line-height: 5;
			}
			
			.sns-logo{
				top: 460px;
				right: 20px;
				width: 50px;
				height: 50px;
				line-height: 4;
			}
			
			header h2{
				width: 30%;
			}	
		}
		
		/** デスクトップ 900px OVER *************************/
		@media only screen and (min-width: 900px) {
			.title1{
				top: 20px;
				left: 20px;
				width: 300px;
				margin-top: 40px;
				margin-left: 5px;
			}

			.sns-logo{
				top: 50px;
				width: 70px;
				height: 70px;
				line-height: 7;
			}
			
			.sns-logo{
				top: 100px;
				right: 50px;
				width: 70px;
				height: 70px;
				line-height: 7;
			}	
		}

/*************************************************************** SWIPER ***/
%transition_all_03s {
  transition:all .3s ease;
}
%backface_visibility_hidden{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
  // display:inline-block;
  // vertical-align:top;
  /*float:left;*/
  transition:opacity .6s ease, transform .3s ease;
  /*&.nav-slider{
    width:20%;
    padding-left:5px;
    .swiper-slide{
      cursor:pointer;
      opacity:.4;
      transition:opacity .3s ease;
      &.swiper-slide-active{
        opacity:1;
      }
      .content{
        width:100%;
        .title{
          font-size:20px;
        }
      }
    }
  }
  &:hover{
    .swiper-button-prev,
    .swiper-button-next{
      transform:translateX(0);
      opacity:1;
      visibility:visible;
    }
  }*/
  &.loading{
    opacity:0;
    visibility:hidden;
  }
}

.swiper-container img{
	height: 500px;
	width: 100%;
	object-fit: cover;
}
		/** Responsiv 600px OVER **********************/
		@media only screen and (min-width: 600px) {
			.swiper-container img{
				height: 600px;
				width: 100%;
			}
		}
		/** Responsiv 900px OVER **********************/
		@media only screen and (min-width: 900px) {
			.swiper-container img{
				height: 100%;
				width: 100%;
			}
		}

.swiper-wrapper{

}
.swiper-slide{
  overflow: hidden;
  @extend %backface_visibility_hidden;
  .slide-bgimg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
  }
  .entity-img{
    display:none;
  }
  .content{
    position:absolute;
    top:40%;
    left:0;
    width:50%;
    padding-left:5%;
    color:#fff;
    .title{
      font-size:2.6em;
      font-weight:bold;
      margin-bottom:30px;
    }
    .caption{
      display:block;
      font-size:13px;
      line-height:1.4;
      transform:translateX(50px);
      opacity:0;
      transition:opacity .3s ease, transform .7s ease;
      &.show{
        transform:translateX(0);
        opacity:1;
      }
    }
  }
}
[class^="swiper-button-"]{
  width:44px;
  opacity:0;
  visibility:hidden;
  @extend %transition_all_03s;
}
.swiper-button-prev{
  transform:translateX(50px);
}
.swiper-button-next{
  transform:translateX(-50px);
}

		/** デスクトップ 768px OVER *************************/
		@media only screen and (max-width: 768px) {
			.swiper-wrapper{
				padding-top: 0px;
			}
		}


/*************************************************************** MAINLOGO **/
.main-logo{
	display: none;
}
		/** デスクトップ 325px OVER *************************/
		@media only screen and (min-width: 325px) {
		.main-logo{
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			color: #fff;
			font-family: 'Source Serif Pro';
			margin-bottom: 1rem;
			text-align: center;
			width: 100%;
			z-index: 999;
		}
		
		.main-logo dl{
			line-height: 1.2;
		}
		
		.main-logo dt{
			font-size: 2rem;
		}
		
		.main-logo dd{
			font-size: 4rem;
		}

		/** デスクトップ 768px OVER *************************/
		@media only screen and (min-width: 900px) {
			.main-logo{
				bottom: 20px;
			}
			
			.main-logo dl{
				line-height: 1.2;
			}
			
			.main-logo dt{
				font-size: 2rem;
			}
			
			.main-logo dd{
				font-size: 5rem;
			}
		}

		@media only screen and (min-width: 1280px) {
			.main-logo{
				bottom: 30px;
			}
			
			.main-logo dl{
				line-height: 1.2;
			}
			
			.main-logo dt{
				font-size: 4rem;
			}
			
			.main-logo dd{
				font-size: 8rem;
			}
		}

/***** WRAPPER ******************************************************/
.wrapper{
	max-width: 1280px;
	width: 100%;
	background: #fff;
	margin: 0 auto;
}

.container{
	width: 100%;
	margin: 0 auto;
}

.other-title{
	position: relative;
}

.other-title-sns{
	display: grid;
	gap: 5px;
	grid-auto-flow: column;
	position: absolute;
	bottom: -35px;
	right: 10px;
	width: 80px;
	height: 80px;
	z-index: 999;	
}

/**+++++***************************** RESPONSIV ***/
	@media only screen and (min-width: 900px) {
		.other-title-sns{
			width: 100px;
			height: 100px;
		}
	}

/***** FB *********************************************************+*/
.fb-text{
	text-align: left;
}

.fb-link{
	width: 100%;
	padding-bottom: 1rem;
}

	/**+++++***************************** RESPONSIV ***/
	@media only screen and (min-width: 768px) {
		.fb-text{
			text-align: center;
		}
		
		.fb-link{
			width: 500px;
			margin: 0 auto;
		}
		
	}

/***** YOUTUBE ******************************************************/
.youtube{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/***** MAIN CONTENTS ************************************************/
.maincontents{
	display: block;
}

.maincontents h1{
	color :#7c0451;
	margin: 10px auto 5px auto;
	text-align: center;
}


.left-contents{
	width: 100%;
}

.right-contents{
	width: 100%;
}

.contents{
	width: 99%;
	margin: 0 auto;
	border: 1px solid #7c0451;
	background: #fff0fa; /* Old browsers */
	background: linear-gradient(to bottom,  #fff0fa 0%,#fff9fd 100%); /* W3C */
	margin-bottom: 10px;
}

.contents h1{
	color :#7c0451;
	margin: 10px auto 5px auto;
	text-align: center;
}

.contents-changebg{
	background: #f0fff5;
	background: linear-gradient(to bottom,  #f0fff5 0%,#fafffc 100%); /* W3C */
}

		/** デスクトップ 900px OVER *************************/
				@media only screen and (min-width: 900px) {
					.maincontents{
						display: grid;
						grid-template-columns: 1fr 1fr;
						gap: 10px;
					}
		
					.contents{
						width: 100%;
					}

				}

/***** CONTENTS *****************************************************/
.contents h1, .contents h2{
	margin: 10px 1em;
	text-align: left;
}

.contents p, .contents dl{
	padding: 0.5em 1em;
	line-height: 1.4;
}

.contents dd{
	margin-left: 1em;
}

.contents .contents-photo{
	padding: 0;
}

.homepage-menu{
	display: block;
	width: 90%;
	margin: 1rem auto;
}

.homepage-menu ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}

.homepage-menu li{
	padding: 0.3rem;
	background: #fff0fa;
	border: 1px solid #7c0451;
	border-radius: 10px; 
	text-align: center;
}

.homepage-menu li:last-child{
	background: #f0fff5;
}

		/** デスクトップ 900px OVER *************************/
				@media only screen and (min-width: 900px) {
					.homepage-menu{
						display: none;
					}
				}



/***** 体験教室 *********************************************************/
.taiken{
	width: 92%;
	margin: 2rem auto;
}

.taiken li{
	display: block;
}

.taiken-in{
	display: flex;
	margin-top: 1rem;
}

.taiken-in li:first-child{
	width: 4.5em;
}

.taiken-in li:last-child{
	width: 75%;
	padding-left: 0.3rem;
}

.taiken-in li >.small{
	font-size: 1.2rem;
}

.taiken-honbun{
	border: 1px dotted #7c0451;
	width: 95%;
	margin: 0 auto;
	margin-top: 2rem;
	margin-bottom: 1rem;
	text-align: justify;
	text-justify: inter-ideograph;
}
		/** デスクトップ 480px OVER *************************/
			@media only screen and (min-width: 481px) {
				.taiken-in li:first-child{
					width: 4.5em;
				}		
			}	

/***** LINE *********************************************************/	
.line, .nav-line{
	clear: both;
	width: 99%;
	height: 5px;
	background: #7c0451;
	margin: 10px auto;
	border-radius: 5px;
}

.nav-line{
	margin: 0 auto;
}
		
/***** TOPICS *******************************************************/
.topics{
	overflow: hidden;
	margin-bottom: 0px;
}

.box ,.box2{
	display: block;
}

.topics h1{
	text-align: center;
	color: #7c0451;
	margin: 0.5rem 0;
}

.topics dl{
	width: 98%;
	margin: 10px auto;
	border: 1px solid #7c0451;
}

.topics-box{
	width: 98%;
	margin: 10px auto;
	border: 1px solid #7c0451;
	padding-bottom: 1rem;
	padding-left: 1rem;
}

.topics-box h1{
	margin-top: 1rem;
}

.topics-schedule{
	padding: 0.5rem;
	padding-bottom: 1rem;
	line-height: 1.5;
}

.topics-schedule-title{
	font-weight: bold;
	font-size: 1.6rem;
}

.topics-schedule-list{
	text-indent: 1em;
}

.topics dt{
	text-align: center;
	padding: 0.5rem;
}

.topics dd{
	padding: 1rem;
	text-align: center;
}

.topics p{
	padding: 0.5rem;
}

.topics dd.waku{
	width: 80%;
	margin: 0 auto;
	/*border: 1px dotted #7c0451;*/
	padding: 0.05rem;
	background: #fff9fd;
	border-left: 6px solid #7c0451;
	border-right: 6px solid #7c0451;
}

.topics dd.topics2{
	font-size: 2rem;
}

.topics dd.topics2 span{
	font-size: 1.4rem;
}

.topics dd.topics3{
	text-align: left;
	padding: 0 2rem 1rem;
}

.topics dd ul.topiul{
	display: flex;
	display: -webkit-flex;
	width: 60%;
	margin: 0 auto;
}

.topiul li{
	width: 60%;
	text-align: left;
	padding: 0.5rem;
	border-bottom: 1px dotted #7c0451;
}

.topiul li:last-child{
	width: 40%;
}

.topics dd ul.topiulb{
	/*display: flex;
	display: -webkit-flex;*/
	width: 80%;
	margin: 0 auto;
}

.subt{
	line-height: 2;
}

.topiul li.subt{
	width: 100%;
}

.selection h2{
	
}

.selection p,.selection h2{
	margin: 0 2rem;
	text-align: center;
}

.selection ul{
	width: 90%;
	margin: 0.5rem auto;
	display: flex;
	display: -webkit-flex;
	line-height: 1.7;
} 

.selection ul li{
	width: 50%;
	padding-left: 2rem;
	padding-bottom: 0.1rem;
	border-bottom: 1px dotted #7c0451;
}

.selection ul li:first-child{
	width: 50%;
	padding-left: 0;
} 


.selection ul:last-child{
	margin-bottom: 1.5rem;
}

.topics ol{
	margin-left: 0.5rem;
}

.topics ol li{
	text-align: left;
	padding: 0.3rem 0 0.3rem 15px;
	position: relative;
}

.topics ol li:before {
  content: "";
  position: absolute;
  top: .6em;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #7c0451;
  border-radius: 50%;
}

.topics-asian{
	padding-top: 3rem;
	padding-bottom: 1rem;
	font-family: 'Source Serif Pro';
	font-weight: 900;
	font-size: 3rem;
	text-align: center;
	color: #cb0058;
}

		/** デスクトップ 900px OVER *************************/
			@media only screen and (min-width: 900px) {
				.box ,.box2{
					display: flex;
					display: -webkit-flex;
					margin: 0 auto;
				}
				
				.topics dl{
					width: 49%;
				}
				
				.topics-box{
					width: 49%;
				}
			}
		
/***** FOOTER *******************************************************/
footer{
	margin-top: 20px;
}

.footer{
	background: #7c0451; /* Old browsers */
	background: -ms-linear-gradient(top,  #7c0451 0%,#6c0346 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #7c0451 0%,#6c0346 100%); /* W3C */
	overflow: hidden;
	padding-bottom: 10px;
}

.footer h1, .footer h2, .footer h3, .footer h4{
	text-align: center;
	line-height: 2;
	color: #fff;
}

.footer h3{
	font: 900 2rem/1.4 sans-serif;
	padding: 0.5rem 0 1rem 0;
}

.footer h3 a:link, footer h3 a:hover{
	color: #fff;
}

.footer h4{
	background: #fff;
	width: 80%;
	margin: 0 auto;
}

.bottom{
	margin: 3px 0;
	text-align: center;
	color: #666;
}

		/** デスクトップ 900px OVER ********************************/
			@media only screen and (min-width: 900px) {
				.footer{
					margin-top: 1px;
				}
			}
						

/***** FOOTER SNS ***************************************************/
.sns-footer{
	width: 95%;
	margin: 0 auto;
	padding: 0;
}

.sns-footer ul{
	display: flex;
	justify-content: flex-end;
}

.sns-footer li{
	padding: 5px;
}

.sns-footer img{
	width: 30px;
	height: 30px;
}

		/** デスクトップ 900px OVER ********************************/
			@media only screen and (min-width: 900px) {
				.sns-footer img{
					width: 50px;
					height: 50px;
				}
				
				.sns-footer li{
					padding: 10px;
				}	
			}