@charset "UTF-8";


/*allreset*/
body,div,form,hr,img,br,a,h1,h2,h3,h4,h5,h6,span,p,dl,dt,dd,ul,li,ol,table,td,th,tr,tbody,caption,b,em,strong,i,font,big,small,embed,object,map,frame,frameset,iframe,select,option,address,button,figure,input,textarea    { color: #000; text-indent: 0px; list-style-type: none; margin: 0px; padding: 0px; border: none 0px;background-color: transparent;font-size: 62.5%;font-family:'Noto Sans JP', sans-serif;text-decoration: none;font-style: normal;font-variant: normal;line-height: 100%;-webkit-text-size-adjust: none;box-sizing: border-box;font-weight: 200;outline:none;}
html {
	margin-top: 0!important;
}
img {
	display: block;}
.lock {
	overflow: hidden;
	display: block;
}
.overlay {
	z-index: 1000;
	overflow: auto !important;
}
.mincho {font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","游明朝体", "Yu Mincho", YuMincho,"HGS明朝E","ＭＳ Ｐ明朝",serif;}
.txtright {text-align: right!important;}
.txtleft {text-align: left!important;}
.txtcenter {text-align: center!important;}

/*tothetopfixed*/
div.tothetopfixed {
	position: fixed;
	bottom: 0;
	z-index: 1500;right: 0;}	
div.tothetopfixed a  {display: block;float: right;background-color: #fff;}
div.tothetopfixed a:hover {
transition: opacity 0.2s ease-in-out;
opacity:1;
filter: alpha(opacity=100);
}
div.tothetopfixed a {
    display: block;
    color: #fff;
    border-radius: 5px;
    font-size: 0.8em;width: 40px;height: 40px;background: url(../img/b_gototop.png) no-repeat 0 0;background-size:contain;margin: 0 20px 20px 0;text-indent: -9999px;
transition: opacity 0.2s ease-in-out;
opacity:0.75;
filter: alpha(opacity=75);
}

/*hover*/
a.hover {
opacity:1;
filter: alpha(opacity=100);
display: block;
transition: all 250ms 0ms ease;}
a.hover:hover  {
opacity:0.75;
filter: alpha(opacity=75);
cursor:pointer;
transition: all 250ms 0ms ease;}

/*hover2*/
a.hover2,a.hover2 img,button.hover2 {
opacity:1;
filter: alpha(opacity=100);
display: block;
transition: all 250ms 0ms ease;}
a.hover2:hover ,a.hover2 img:hover,button.hover2:hover {
opacity:0.50;
filter: alpha(opacity=50);
cursor:pointer;
transition: all 250ms 0ms ease;}

/*hover3*/
a.hover3 {
opacity:1;
filter: alpha(opacity=100);
display: block;background-color: #fff;
transition: all 250ms 0ms ease;}
a.hover3:hover  {
opacity:1;
filter: alpha(opacity=100);
background-color: #eee;color: #333!important;
transition: all 250ms 0ms ease;}

/*hovertext*/
a.thover:hover {
	text-decoration: underline;
}

@media screen and (max-width: 34em) {
	.overlay {
		font-size: 90%;
	}
	.overlay .overlay-close {

	}
}


@media screen and (max-width: 25em) {
	.codrops-icon span {
		display: none;
	}
}



















/*——————————————————————————————————————————*/
/*——————————————————————————————————————————*/
/*——————————————————————————————————————————*/

/* @group SmartPhone */
@media screen and (max-width: 767px) {

.nosp {
		display: none!important;
}

.head-head {
	position: fixed;
	top: 0;
	height: 70px;
	width: 100%;
	background-color: #fff;
	z-index: 1000;
	border-bottom: 1px solid #000;
}


.h1-head {
	
}
.a-h1 {
	background: url(../img/bg_h1logo.svg) left top no-repeat;
	text-indent: -9999px;
	display: block;
	width: 70px;
	height: 45px;
	background-size: 100% auto;
	position: absolute;
	top: 13px;
	left: 15px;
}

.art-right {


}

.ul-hrmenu {
position: absolute;
top: 0px;
right: 70px;
border-left: 1px solid #000;

width: calc(100% - 170px);
}

.li-hrmenu1 {
text-align: center;
border-bottom: 1px solid #000;
}
.a-hrmenu01 {
display:flex;
align-items: center;
height: 35px;
text-align: center;
}
.a-hrmenu01 i {
	display: block;
	text-align: center;
	width: 100%;
font-size: 0.85rem;
color: #000;
}


.li-hrmenu2 {
text-align: center;
}
.a-hrmenu02 {
display:flex;
align-items: center;

height: 35px;
}
.a-hrmenu02 i {
	display: block;
	text-align: center;
	width: 100%;
font-size: 0.85rem;
color: #c00;
}


.a-pcheadtel {
	background-color: #000;
	position: absolute;
	top: 0;
	right: 200px;
	width: 70px;
	height: 70px;
	padding-top: 20px;
		padding-left: 20px;
}
.a-pcheadtel i {

	color: #fff;
	font-size: 30px;
}






#trigger-overlay {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;

	transition: all 0.2s ease-in-out 0s;

	background-color: #000;
}
#trigger-overlay i {
	color: #fff;
	font-size: 0.8rem;
}
#trigger-overlay:hover {
	background-color: #999;
	cursor: pointer;
	transition: all 0.2s ease-in-out 0s;
}
.overlay-close {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;

	transition: all 0.2s ease-in-out 0s;
	background-color: #000;
	z-index: 100;
	color: #fff;
	font-size: .8rem;
}

.sec-topimg {
	width: 100%;
	margin-top: 70px;
}
.art-topimg {
	width: 100%;
	overflow: hidden;
	float: left;
	margin-bottom: 5%;
}
.div-til {
	width: 100%;
	background-color: #fff;

    height: calc(100% - 70px);
	float: left;
}
.div-tir {
	background-color: rgb(108, 47, 129);


	width: 80%;
	color: #fff;
	font-weight: 700;
	font-size: 15vw;
	float: right;
	position: relative;
	z-index: 100;
	margin-top: -5%;
	padding-top: 3%;
		padding-bottom: 5%;
		padding-left: 5%;
	line-height: 1.1em;
}

.v-topimg {
filter: grayscale(100%)	;
width: 100%;
}

.div-tir {
filter: grayscale(100%)	;
height: auto;
}



 

 


/*INTROMOTION*/
.div-intro {
animation-name: bgintro;
animation-fill-mode:forwards;
animation-duration:1.5s;
animation-iteration-count:1;
animation-timing-function:ease-in-out;
animation-delay: 0.5s;
animation-direction:normal;
position: fixed;
z-index: 1000;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: #fff;
}
@keyframes bgintro {
0%{
	opacity: 1;
}
80%{
	opacity: 1;
}
100%{
   opacity: 0;
visibility:hidden
}
}



.img-logotop {
animation-name: logotopintro;
animation-fill-mode:forwards;
animation-duration:2s;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-direction:normal;	
	width: 15%;
	height: auto;
	opacity: 0;
	top: 0;
	position: absolute;
  left: 50%;
  transform:  translateX(-50%);
}

@keyframes logotopintro {
0%{

}
20%{
	opacity: 1;
	top: 50%;
}
80%{
	opacity: 1;
	top: 50%;
	width: 15%;
}
100%{
	opacity: 0;
	top: 100%;
	width: 100%;
}
}


.img-logobtm {
animation-name: logobtmintro;
animation-fill-mode:forwards;
animation-duration:2s;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-direction:normal;	
	width: 15%;
	height: auto;
	opacity: 0;
position: absolute;
  left: 50%;
  transform:  translateX(-50%);
bottom: 0;
}

@keyframes logobtmintro {
0%{

}
20%{
	opacity: 1;
	bottom: 50%;
}
80%{
	opacity: 1;
	bottom: 50%;
	width: 15%;
}
100%{
	opacity: 0;
	bottom: 100%;
	width: 100%;
}
}


.sec-cont01 {
/*  background-image: linear-gradient(100deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));*/
	padding-top: 10%;
background-color: #fff;
}


.sec-cont02on {	
	padding-top: 10%;
		padding-bottom: 10%;
	background-color: #efefef;
}

.sec-cont02off {	
	padding-top: 10%;
		padding-bottom: 10%;
	background-color: #fff;
}



.sec-cont00 {
	background-color: #fff;
	padding-top: 10%;
		padding-bottom: 10%;
}

.sec-about {
	background-color: #efefef;
	padding-top: 10%;
		padding-bottom: 10%;
}

.sec-contmap {
	background-color: #fff;
	padding-top: 20%;
}
.top15per {
	margin-top: 13%;
}

.p-topcopy   {
	color: #000;
	line-height: 2;
	text-align: center;
	margin-right: auto;
		margin-left: auto;
	overflow: hidden;
	width: 90%;
	font-size: 3.5vw;
}


.div-topcopy {
margin-right: auto;
margin-left: auto;
}

.div-topcopy .mask-wrap {
	margin-right: auto;
		margin-left: auto;
}

/*MENU*/
.art-topmenu {

width: 90%;
margin-right: auto;
		margin-left: auto;
}


.div-topmenu {
	width: 100%;
}
.a-topmenu {
	
}
.a-topmenu img {
	width: 100%;
	height: auto;
}
.h3-topmenu {
	text-align: center;
	font: bold 7.5vw "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #000;
}

.h3-topmenu i {
	display: block;
	padding-top: 5px;
		color: #000;
	font-size: 3.5vw;
	padding-bottom: 15px;
}
.img-topmenu {
	width: 100%;
	height: auto;

	transition: all 0.2s ease-in-out 0s;;
	filter: grayscale(100%);

  transition:1s all;
	margin-bottom: 2.5%;
}
.a-topmenu:hover .img-topmenu {
	filter: grayscale(100%);	
	transition: all 0.2s ease-in-out 0s;
	
}


.a-topmenu:hover .s-topmenu {
	background-color: #ddd;
	transition: all 0.2s ease-in-out 0s;;
}
.p-topmenu {
	color: #000;
	font-size:3.5vw;
	line-height: 1.75;
	display: block;
	margin-bottom: 2.5%;
}

.s-topmenu {
	border: 1px solid #999;
	padding-top: 10px;
		padding-bottom: 15px;
	color: #000;
	font-size: 5vw;
	text-align: center;
	width: 100%;
	display: block;
	border-radius: 50px;
	background-color: #fff;
	transition: all 0.2s ease-in-out 0s;;
}
















.topgmap {
	width: 100%;
	height: 400px;
/*	  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);*/
}

.p-access {
	color: #000;
	display: block;
	margin-bottom: 5%;
	font-weight: 300;
	text-align: center;
	font-size: 4.5vw;
	line-height: 1.5;
}
.p-access i {
	color: #000;
	font-size: 3.5vw;
}


.foot-foot {
	padding-top: 5%;
		padding-bottom: 20%;
}

.img-footlogo {
	margin-right: auto;
		margin-left: auto;
	height: auto;
	width: 20%;
	margin-bottom: 2.5%;
}

.ul-footsns {
display:flex;
justify-content:center;
flex-wrap: wrap;
margin-bottom: 25px;
}
.ul-footsns li {
	margin-right: 1rem;
		margin-left: 1rem;
}
.ul-footsns li a  {
	display: block;
}

.ul-footsns li a i  {
display: block;
color: #000;
font-size: 1.5rem;
font-weight: bold;
}

.ul-footsns li1 a i {
	margin-bottom: 25px;
}
.ul-footsns li2 a i {
	
}
.ul-footsns li3 a i {
	
}
.ul-footsns li4 a i {
	
}
.add-foot {
	color: #000;
	font-size: 4.5vw;
	text-align: center;
	margin-bottom: 10%;
	line-height: 1.5em;
}

.add-foot strong {
	color: #000;
	text-align: center;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
	font-size: 1.2rem;
	line-height: 1.5em;
}
.add-foot i {
	color: #000;
	text-align: center;
	display: block;
	font-size: 0.75rem;
	line-height: 1.5em;
	margin-top: 10px;
}



.ul-footmenu {

margin-bottom: 5%;
}
.ul-footmenu li {
	margin-right: 0.5rem;
		margin-left: 0.5rem;
	text-align: center;
		margin-bottom: 5%;
}
.ul-footmenu li a {
	color: #000;
	font-size: 0.75rem;
	text-align: center;
	display: block;
}

.ul-footmenu li a {
  display: inline-block;
  position: relative;
}

.ul-footmenu li a::after {
  background-color: #000;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
  left: 50%;
    transform: translateX(-50%);
}

.ul-footmenu li a:hover::after {
  width: 100%;
}

.p-copyright {
	color: #000;
	text-align: center;
	font-size: 0.75rem;
}


/*SUBPAGE*/
.sec-subtop {
	margin-top: 70px;
}
.sec-course {
padding-top: 10%;
		padding-bottom: 10%;
}
.sec-course00 {
	background-color: #fff;
}

.sec-course01 {
	background-color: #efefef;
}


.h2-subtit {
	text-align: center;
    font: bold 6vw "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #666;
	margin-bottom: 5%;
}

.h2-subtit i {
display: block;
    padding-top: 5px;
    color: #666;
    font-size: 4vw;
    padding-bottom: 15px;
}

.art-subtop {

margin-right: auto;
		margin-left: auto;
overflow: hidden;
margin-bottom: 50px;
}
.div-subtop {

/*	float: left;*/
}
.img-subtop {
	width: 100%;
	height: auto;
}
.p-subtime {
	
}
.p-subcopy {

	float: right;
	color: #fff;
	font-size: 4vw;
	line-height: 2em;
    background-image: linear-gradient(120deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
	margin-top: -5%;
	padding: 5%;
	width: 80%;
}
.ul-lesson {
	margin-right: auto;
		margin-left: auto;
	border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-bottom: 10%;
width: 90%;
}
.ul-lesson li {
color: #000;
	font-size: 3.5vw;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;

padding: 2.5%;
}

.art-trainer {
	margin-right: auto;
		margin-left: auto;
	overflow: hidden;
		margin-bottom: 10%;
}
.img-trainer {
	width: 75%;
	height: auto;
	float: left;
}



.div-trainer {
	float: right;
	width: 65%;

	padding: 5%;
	margin-top: -45%;
	background-color: rgba(255, 255, 255, .5);
}

.h3-trainer {
	color: #000;
	font-size: 5vw;
	margin-bottom: 7.5%;
	font-weight: 700;
	text-align: center;
}
.p-trainer {
	color: #000;
	font-size: 3.5vw;
	line-height: 1.75em;
}
.p-trainer b {
	font-weight: bold;
	color: #000;
	font-size: 3vw;
}

.tab-subprice {

margin-right: auto;
		margin-left: auto;
margin-top: -2.5%;
width: 90%;
}

.tab-subprice th {
	color: #000;
	font-size: 4vw;
	text-align: left;
	display: block;
	line-height: 1.5;
	background-color: #efefef;
	padding: 2.5%;
}
.tab-subprice th b {
	color: #000;
	font-size: 3.5vw;
	line-height: 1.5em;
	display: block;
}

.tab-subprice td {
	color: #000;
	font-size: 4.5vw;
	text-align: left;
	display: block;
	line-height: 2em;
	padding-bottom: 15%;
		padding-top: 2.5%;
}
.tab-subprice td i {
	color: #000;
	font-size: 3.5vw;
	line-height: 1.25em;
}

.tab-subprice td b {
	color: #000;
	font-size: 3.5vw;
	line-height: 1.5em;
	display: block;
}




.ul-trainsns {
display:flex;
justify-content:center;
flex-wrap: wrap;
}
.ul-trainsns li {
margin-right: 0.5rem;
		margin-left: 0.5rem;
}
.ul-trainsns li a  {
	display: block;
}

.ul-trainsns li a i  {
display: block;
color: #000;
font-size: 1rem;
font-weight: bold;
}

.ul-trainsnsli1 a i {
	margin-bottom: 2.5%;
}
.ul-trainsns li2 a i {
	
}
.ul-trainsns li3 a i {
	
}
.ul-trainsns li4 a i {
	
}



.mask_wrap{
  display: table;
  overflow: hidden;
}
.mask-wrap .mask{
  display: table;
  position: relative;
  overflow: hidden;
}
.mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.div-topmenu {
	position: relative;
/*    background-image: linear-gradient(300deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));*/

background-color: #fff;
margin-bottom: 5%;
}
.div-topmenu:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ececec;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}


/*MASK ANIMATION*/

.div-topmenu.fire:after {
animation:div-topmenu 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes div-topmenu {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }
.div-topmenu.fire .img-topmenu {

transition: all 0.5s ease-out 1s;
filter: grayscale(00%)	;
}

		
	
	
	
	
	
/*MASK ANIMATION*/
.div-til.fire .v-topimg {
transition: all 0.5s ease-out 1s;
filter: grayscale(00%)	;
}
.div-tir.fire {
transition: all 0.5s ease-out 1s;
filter: grayscale(00%)	;
}

.div-til {
	position: relative;
}
.div-til:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.div-til.fire:after {
animation:div-til 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes div-til {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }
/*MASK ANIMATION*/
.div-tir {
	position: relative;
}
.div-tir:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.div-tir.fire:after {
animation:div-tir 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes div-tir {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }
/*MASK ANIMATION*/
.p-topcopy {
	position: relative;
}
.p-topcopy:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.p-topcopy.fire:after {
animation:p-topcopy 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes p-topcopy {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }




/*MASK ANIMATION*/
.div-subtop {
	position: relative;
}
.div-subtop:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.div-subtop.fire:after {
animation:div-subtop 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes div-subtop {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }


.div-subtop2 {
	position: relative;
}
.div-subtop2:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.div-subtop2.fire:after {
animation:div-subtop 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes div-subtop2 {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }



/*MASK ANIMATION*/
.p-subcopy {
	position: relative;
}
.p-subcopy:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.p-subcopy.fire:after {
animation:p-subcopy 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes p-subcopy {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }


/*MASK ANIMATION*/
.ul-lesson {
	position: relative;
}
.ul-lesson:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.ul-lesson.fire:after {
animation:ul-lesson 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes ul-lesson {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }

/*MASK ANIMATION*/
.tab-subprice {
	position: relative;
}
.tab-subprice:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.tab-subprice.fire:after {
animation:tab-subprice 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes tab-subprice {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }

/*MASK ANIMATION*/
.art-trainer {
	position: relative;
}
.art-trainer:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.art-trainer.fire:after {
animation:art-trainer 1s forwards;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes art-trainer {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }



.h2-topmenu {
	position: relative;
}
.h2-topmenu:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}
.h2-topmenu2 {
	position: relative;
}
.h2-topmenu2:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #efefef;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}


.h2-topmenu {
	color: #666;
	font: 1.5rem/1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: 700;
	text-align: center;
/*	-webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;*/
  width: 95%;
  margin-right: auto;
		margin-left: auto;
  margin-bottom: 5%;
  display: block;
}
.h2-topmenu i {
	color: #666;
	font: 1rem "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: 500;
	text-align: center;
	margin-bottom: 5%;
	display: block;
  -webkit-text-stroke: 0px #FFF;
  text-stroke: 0px #FFF;
  margin-top: 1.5%;
}
.h2-topmenu2 {
	color: #666;
	font: 1.5rem "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: 700;
	text-align: center;
/*	-webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;*/
  margin-bottom: 5%;
		margin-right: auto;
  display: block;
  width: 90%;
  margin-left: auto;
}
.h2-topmenu2 i {
	color: #666;
	font: 1rem "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: 500;
	text-align: center;
	margin-bottom: 5%;
	display: block;
  -webkit-text-stroke: 0px #FFF;
  text-stroke: 0px #FFF;
  margin-top: 1.5%;
}


		
	
.h2-topmenu.fire:after {
animation:div-topmenu 1s forwards;
transform:scaleX(1.1);
transform-origin: right 0;
margin-right: -3px;
animation-delay: 0.5s;
width: 90%;
}
@keyframes div-topmenu {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }

		
.h2-topmenu2.fire:after {
animation:div-topmenu 1s forwards;
transform:scaleX(1.1);
transform-origin: right 0;
margin-right: -3px;
animation-delay: 0.5s;
}
@keyframes div-topmenu {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }


.ul-catname {
margin-right: auto;
		margin-left: auto;
width: 90%;
overflow: hidden;
}
.ul-catname li  {
	background-color: #000;
	color: #fff;
	font-size: 6vw;
	font-weight: 700;
	border-radius: 10px;
	transform:skewX(-10deg);;
	margin-bottom: 0.5em;
		margin-right: auto;
	display: block;
	position: relative;
	width: 95%;
	margin-left: auto;
	padding: 4%;
}
.ul-catname li i {
font: bold 3.5vw Georgia, "Times New Roman", Times, serif;
color: #fff;
display: block;
margin-top: 0.5em;
text-align: right;
}

.ul-catname li:after {
	    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 200;
    display: block;
    top: 0;
    right: 0;
}

.ul-catname li.fire::after {
content: '';
animation:div-topmenu 1s forwards;
animation-delay: 0.5s;
transform:scaleX(1);
transform-origin: right 0;
}
@keyframes div-topmenu {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }



.sec-feature {
	background-color: #fff;
	padding-top: 10%;

}
.art-future {
margin-right: auto;
		margin-left: auto;
width: 90%;
}
.dl-future {


	margin-bottom: 2.5%;
	border: 3px solid #000;
	position: relative;
	padding: 2.5%;
	overflow: hidden;
}
.dt-future {
	color: #000;
	font-size: 1.5rem;
	display: block;
	font-weight: 500;
	text-align: center;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #000;
}
.dd-futurer {
	color: #000;
	font-size: 0.75rem;
	display: block;
	width: 70%;
	float: right;
	line-height: 1.5em;
}
.dd-futurel {
	display: block;
	width: 30%;
	float: left;
}
.img-future {
	width: 50%;
	height: auto;
	margin-right: auto;
		margin-left: auto;
}

.dl-future:after {
	content: '';
    position: absolute;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    background-color: #fff;
    z-index: 200;
    display: block;
    top: -3px;
    right: -3px;
}

.dl-future.fire::after {
content: '';
animation:div-topmenu0 1s forwards;
animation-delay: 0.5s;
transform:scaleX(1);
transform-origin: right 0;

}
@keyframes div-topmenu0 {
      to {
transform:scaleX(0.0);
transform-origin: right 0;

}
 }

.p-menusub {
	color: #000;
	line-height: 1.75;
	width: 90%;
	margin-right: auto;
		margin-left: auto;
	font-size: 0.8rem;
		margin-bottom: 5%;
	position: relative;
}

.p-menusub:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #efefef;
	z-index: 200;
	display: block;
	top: 0;
	right: 0;
}	
.p-menusub.fire:after {
animation:div-topmenu10 1s forwards;
transform:scaleX(1.1);
transform-origin: right 0;
margin-right: -0px;
animation-delay: 0.5s;
}
@keyframes div-topmenu10 {
      to {
transform:scaleX(0.0);
transform-origin: right 0;
}
 }



/*PRIVACY*/
.art-privacy {

	margin-right: auto;
		margin-left: auto;
	width: 90%;
}

.p-privacy {
	color: #000;
	font-size: 0.8rem;
	line-height: 1.5;
}

.ul-privacy {

}

.li-privacy {
	color: #000;
	font-size: 0.8rem;
	line-height: 1.5;
	list-style-type: disc;
	margin-left: 2em;
}

.h3-privacy {
	color: #000;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.5;
}

.pvbtm05 {
	margin-bottom: 0.5em;
}

.pvbtm10 {
	margin-bottom: 1em;
}
.pvbtm20 {
	margin-bottom: 2em;
}

.tab-privacy {

	margin-right: auto;
		margin-left: auto;
	border-top: 1px solid #ddd;
	width: 100%;
}

.tab-privacy th {
	color: #000;
	font-size: 0.8rem;
	line-height: 1.5;
	width: 12em;
	border-bottom: 1px solid #ddd;
	padding: 1.5%;
	text-align: left;
}


.tab-privacy td {
	color: #000;
	font-size: 0.8rem;
	line-height: 1.5;
	width: 12em;
	border-bottom: 1px solid #ddd;
	padding: 1.5%;
	text-align: left;
}

.tab-privacy td a {
	color: #000;
	font-size: 0.8rem;
	text-decoration: underline;
}


.ul-topmenu {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
margin-bottom:2.5%;
}
.ul-topmenu li {
	color: #fff;
	background-color: #666;
	width: calc(100% / 3 - 1px);
	margin-left: 1px;
	text-align: center;
	font-size: 0.75rem;

	display: block;
	line-height: 1.5em;
	padding: 2.5%;
}


.a-trainsta {
	width: 50%;
	margin-right: auto;
		margin-left: auto;
	display: block;
}
.img-trainsta{
	width: 100%;
	height: auto;
}

.ul-spfoot {

width: 100%;
bottom: 0;
position: fixed;
z-index: 1000;
}
.ul-spfoot li {

}

.ul-spfoot li a {
	color: #fff;
	font-size: 4vw;
	background-color: #000;
	font-weight: bold;
	display: block;
	text-align: center;
	bottom: 0;
	padding-top: 5%;
		padding-bottom: 5%;
}
.ul-spfoot li a i {
	color: #fff;
	font-size: 4vw;
	background-color: #000;
	font-weight: bold;
	margin-right: 5px;
}
.ul-spfoot li a span {
	color: #fff;
	font-size: 3vw;
}
/*FORM*/
.p-form {
	text-align: center;
	color: #aa5959;
	font-size: 25px;
	line-height: 1.75em;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1em;
}
.p-form i {
	text-align: center;
	color: #666;
	font-size: 14px;
	font-weight: bold;
	line-height: 3em;
	display: block;
}



#mailformpro {
	width:90%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10%;
}
*:focus {
    outline: none;
}
.form100 {
	border: 1px solid #ccc;
	padding: 10px;
	width: 100%;
	color: #333;
	font-size: 18px;
	line-height: 1.5em;
}
.form100x6 {
	border: 1px solid #ccc;
	padding: 10px;
	width: 100%!important;
	color: #333;
	font-size: 18px;
	line-height: 1.5em;
	height: 20em!important;
}






.tab-contact {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.tab-contact th {
	display: block;
	text-align: left;
	color: #666;
	font-size: 18px;
}
.tab-contact td {
	display: block;
	margin-top: 10px;
	margin-bottom: 40px;
	text-align: left;
	color: #666;
	font-size: 18px;
}
.tab-contact th b {
	color: #eb5f60;
	font-size: 16px;
	margin-left: 0.5em;
}
.tab-contact td i {
	color: #666;
	font-size: 16px;
	line-height: 1.5em;
	display: block;
	padding-top: 1em;
}
.tab-contact td i span {
	color: #c00;
	font-size: 16px;
}

.cont_submit {
	display: block;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	background-color: #000;
	
border-radius: 50px;
	width: 100%;
margin-right: auto;
	margin-left: auto;
transition: all 0.25s ease-in-out 0s;
}
.cont_submit:hover {
cursor: pointer;
background-color: #666;
transition: all 0.25s ease-in-out 0s;
}

.h2-mailform {
	text-align: center;
	color: #666;
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 50px;
	margin-top: 50px;
}

.f-mailform i {
	font-weight: normal;
	font-style: normal;
}

::placeholder{
  -webkit-color:#ccc;
  color:#ccc;
}

.p-exp01 {
	background-color: #fff;
	padding: 30px;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	color: #666;
	font-size: 18px;
	line-height: 1.5em;
}



.div-agree {
	color: #000;
	font-size: 16px;
	text-align: center;
	margin-bottom: 50px;
}
.div-agree a {
	color: #000;
	font-size: 16px;
	text-decoration: underline;
}
.div-agree input {
-webkit-appearance: none;
appearance: none;
margin-right: 5px;
width: 20px;
height: 20px;
}
.div-agree input:before {
content: '\f146';
	color: #000;
	font-size: 20px;
	font-weight: bold;
	  font-family: "Font Awesome 5 Free";

}
.div-agree input:before {
content: '\f0c8';
	color: #ccc;
	font-size: 20px;
	font-weight: bold;
	  font-family: "Font Awesome 5 Free";

}
.div-agree input:checked:before {
content: '\f14a';
	color: #000;
	font-size: 20px;
	font-weight: bold;
	  font-family: "Font Awesome 5 Free";

}

.spn-course {
	color: #000;
	font-size: 18px;
	line-height: 2em;
}

#course label {
}
#course{
	width: 20px;
	height: 20px;
-webkit-appearance: none;
appearance: none;
}
.spn-course input {
-webkit-appearance: none;
appearance: none;	
}
.mfp_not_checked input:before {
content: '\f0c8';
	color: #ccc;
	font-size: 20px;
	font-weight: bold;
	  font-family: "Font Awesome 5 Free";	
}

.mfp_checked input:before {
content: '\f14a';
	color: #000;
	font-size: 20px;
	font-weight: bold;
	  font-family: "Font Awesome 5 Free";	
}

#mfp_phase_confirm_inner {
	
}

#mfp_phase_confirm_inner h4 {
	color: #000;
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 25px;
}
#mfp_confirm_table {
	margin-bottom: 50px;
}

#mfp_confirm_table th {
	color: #000;
	font-size: 18px;
	line-height: 1.5em;
	padding: 15px!important;
}
#mfp_confirm_table td {
	color: #000;
	font-size: 18px;
	line-height: 1.5em;
	padding: 15px!important;
}

#mfp_button_send {
	color: #fff!important;
	font-size: 16px!important;
	font-weight: bold!important;
	width: 10em!important;
	padding: 15px!important;
	text-align: center!important;
	background-color: #000!important;
	border-radius: 50px!important;
}
#mfp_button_cancel {
	color: #000!important;
	font-size: 16px!important;
	font-weight: bold!important;
	width: 8em!important;
	padding: 15px!important;
	text-align: center!important;
	border-radius: 50px!important;
	background-color: #fff!important;
	border: 1px solid #000!important;
}



.sec-corona {

	background-color: #efefef;
	padding-top: 5%;
		padding-bottom: 5%;
}
.a-corona {
	display: block;
	padding-top: 10px;
		padding-bottom: 12px;
	color: #000;
	border: 1px solid #000;
	width: 90%;
	text-align: center;
	border-radius: 100px;
	position: relative;
	overflow: hidden;
	z-index: 500;
transition: all 0.25s ease-in-out 0s;
min-height: auto;
max-height: auto;
font-size: 1rem;
margin-right: auto;
		margin-left: auto;
background-color: #fff;
}

.a-corona::before {
content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	border-radius: 100px;
	display: block;
top: 0;
transform: translateX(-100%);
transition: all 0.25s ease-in-out 0s;
}

.a-corona:hover::before {
content: '';
transition: all 0.25s ease-in-out 0s;
transform: translateX(0);
z-index: 250;
}
.a-corona i {
	position: relative;
	z-index: 500;
	color: #000;
	font-size: 0.9rem;
transition: all 0.25s ease-in-out 0s;
}

.a-corona:hover i {
	position: relative;
	z-index: 500;
	color: #fff;
	font-size: 1rem;
transition: all 0.25s ease-in-out 0s;
}




/*ABOUT*/

.art-about {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
width: 90%;
margin-right: auto;
		margin-left: auto;
}
.div-about {
	width: 47.5%;
	margin-bottom: 10%;
}
.h3-about {
	
	color: #000;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 10px;

}
.p-about {
	color: #000;
	font-size: 0.8rem;
	text-align: left;
	line-height: 1.75;
}

.div-aboutdummy {
	width: 100%;
	padding-top: 40%;
		padding-bottom: 40%;
	color: #000;
	font-size: 0.8rem;
	text-align: center;
	background-color: #ccc;
	margin-bottom: 10px;
}



/*CORONA*/
.art-corona {
	width: 90%;
	margin-right: auto;
		margin-left: auto;
}
.ul-corona {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
}
.ul-corona li {
	color: #000;
	font-size: 0.7rem;
	line-height: 1.5;
	width: 47.5%;
	margin-bottom: 5%;
	background-color: #efefef;
	padding: 2.5%;
}
.ul-corona li b {
	color: #000;
	font-size: 0.8rem;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	display: block;
	margin-bottom: 10px;
}
.ul-corona img {
	width: auto;
	height: 100px;
	margin-right: auto;
		margin-left: auto;
	margin-bottom: 10px;
}



/*ABOUT*/

.art-about {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
width: 90%;
margin-right: auto;
		margin-left: auto;
}
.div-about {
	width: 22.5%;
}
.h3-about {
	color: #000;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 10px;
	font-size: 1.3vw;
}
.p-about {
	color: #000;
	font-size: 0.8rem;
	text-align: left;
	line-height: 1.75;
}

.div-aboutdummy {
	width: 100%;
	padding-top: 10%;
		padding-bottom: 10%;
	color: #000;
	font-size: 0.8rem;
	text-align: center;
	background-color: #ccc;
	margin-bottom: 10px;
}

.p-about2 {
	color: #000;
	line-height: 2;
	margin-right: auto;
		margin-left: auto;
	font-weight: 700;
	text-align: center;
	padding-top: 2.5%;
	border-bottom: 1px solid #000;
	padding-bottom: 5%;
	width: 90%;
	font-size: 1.25rem;
}

.p-about3 {
	color: #000;
	font-size: 0.85rem;
	line-height: 2;
	margin: 5% auto 10%;
	text-align: center;
	}


.h3-point {
	color: #ff65ba;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 25px;
	

}
.h3-point b {
	color: #ff65ba;
	font-size: 3rem;
	font-weight: 700;
	margin-right: 5px;
		margin-left: 5px;
}	
}
.dl-point {
	margin-right: auto;
	margin-left: auto;
width: 90%;
	margin-bottom: 7.5%;
}
.dl-point dt {

margin-bottom: 2.5%;
}
.dl-point dt:after {
	width: 100%;
	height: 10px;
}

.dl-point dt b {

	margin-right: auto;
	margin-left: auto;
color: #000;
	font-size: 4.25vw;
	font-weight: 500;
text-align: center;
display: block;
line-height: 1.5em;
letter-spacing: 0.2em;
}

.dl-point dd {

	margin-right: auto;
		margin-left: auto;
	color: #000;
	font-size: 0.85rem;
	line-height: 1.5rem;
	text-align: center;
}


.sec-point {
		background: url(../img/bg_point.jpg) center top repeat-y #fff;

	background-size: 150% auto;
		padding-top: 10%;
		padding-bottom: 10%;
}



.dl-point dt b.silidein {
padding-bottom: 10%;
position: relative;
width: 100%;
margin-right: auto;
	margin-left: auto;
}
.dt-point2 b.silidein.fire:after  {
padding-bottom: 5%!important;

}
.dl-point dt b.silidein:after {
content: '';
background: url(../img/bg_linepoint.svg) center bottom no-repeat;
position: absolute;
height: 25px;
left: 50%;
transform:  scaleX(0) translateX(-50%);x
bottom: 0;
width: 50%;
top: 47%;
}
.dl-point dt b.silidein.fire:after {
content: '';
background: url(../img/bg_linepoint.svg) center bottom no-repeat;
position: absolute;
height: 25px;

left: 50%;
transform:  scaleX(1) translateX(-50%);;
transform-origin: -150% 0;
transition: transform 1s ease-in-out 0s;
bottom: 0;
}

.silidein0 {
	margin-bottom: 2.5%;
}


.img-pointlogo {
	width: 30%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.a-schedule {
	color: #000;
	font-size: 0.75rem;
	text-align: center;
	display: block;
	margin-top: -2.5%;
	margin-right: auto;
	width: 90%;
	margin-left: auto;
}

.a-schedule img {

	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	width: 100%;
	height: auto;
}
/*BLOG2022*/


.sec-blog {
	padding-top: 50px;
}
.sec-blog00 {
	
}
.sec-blogtop {
	margin-top: 70px;
}
.div-blog {
	margin-right: auto;
	margin-left: auto;
	width: 90%;
}
.p-blogcat {
	color: #000;
	font-size: 1rem;
	text-align: center;
	margin-bottom: 2.5%;
}
.h2-blogtit {
	color: #000;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2.5%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 1.5%;
	line-height: 1.25em;
	font-size: 1.25rem;
}
.art-blog {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
}

.div-blogdate {
	color: #999;
	font-size: 0.75rem;
	text-align: right;
	margin-bottom: 2.5%;
}
.div-blogdate i {
	color: #999;
	font-size: 0.8rem;
	margin-right: 5px;
}

.div-blogdate2 {
	color: #999;
	text-align: left;
	margin-bottom: 0.5%;
	font-size: 0.65rem;
}
.div-blogdate2 i {
	color: #999;
	font-size: 0.8rem;
	margin-right: 5px;
}



.div-blogbody {
	
}
.div-blogbody p {
	color: #000;
	font-size: 1rem;
	line-height: 1.75em;
	margin-bottom: 2.5%;
}

.div-blogbody p a {
	color: #3977bf;
	font-size: 1rem;
	line-height: 1.75em;
	text-decoration: underline;
}


.div-blogbody p img {
	width: 100%;
	margin-right: auto;
	margin-bottom: 2.5%;
	margin-left: auto;
	height: auto;
}

.archnav {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
width: 100%;
margin-bottom: 10%;
}
.archnav li {

}
.archnav li a {
		width: 8em;
	display: block;
	background-color: #000;
	color: #fff;
	font-size: 0.75rem;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sec-blogfeed {
	width: 100%;
	padding-top: 10%;
}


.sec-newsfeed {
	margin-top: calc(70px)!important;
}

.sec-footfeed {
	background-color: #fff;
}
.sec-footfeed0 {
	background-color: #fff;
}


.div-blogfeed {
	margin-right: auto;
	margin-left: auto;
}


.bog-archnav {
	
}

.archnav-p {
	
}
.archnav-i {
	
}
.archnav-n {
	
}

.ul-footlist {
display:flex;
justify-content:left;
flex-wrap: wrap;
width: 100%;

}
.ul-footlist li {
	width: calc(100% / 2 - 10%);
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 10%;
}
.ul-footlist li a {
	color: #000;
	font-size: 0.75rem;
	line-height: 1.5em;
	text-align: center;
}
.ul-footlist li a img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.addtoany_share_save_container {
	width: 100%;
	border-top: 1px solid #ccc;
	margin-top: 5%;
	margin-bottom: 5%;
	padding: 5%;
}
.addtoany_header {
	color: #000;
	font-size: 0.75rem;
}

.h4-feedtit {
	text-align: center;
	color: #000;
	font-size: 1.25rem;
	margin-bottom: 5%;
}

.wp-pagenavi {
display:flex;
justify-content:center;
flex-wrap: wrap;
}
.wp-pagenavi a {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 1rem;
	width: 2rem;
	height: 2rem;
	background-color: #000;
	border-radius: 100%;
	padding-top: 0.4rem;
	margin-right: 5px;
	margin-left: 5px;
}
.previouspostslink {
	
}
.nextpostslink {
	
}
.extend {
	color: #000;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 5px;
}
.current {
	display: block;
	text-align: center;
	color: #000;
	font-size: 1rem;
	width: 2rem;
	height: 2rem;
	background-color: #fff;
	border-radius: 100%;
	padding-top: 0.4rem;
	margin-right: 5px;
	margin-left: 5px;
	border: 1px solid #000;
}


}/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */
/* @end group SmartPhone */

/*cssanimation*/

.fadein {
	opacity: 0;
}
.animfadein.forimg01 {
	opacity: 1;
	transition: all 1000ms 250ms ease;
}
.animfadein.forimg02 {
	opacity: 1;
	transition: all 1000ms 500ms ease;
}
.animfadein.forimg03 {
	opacity: 1;
	transition: all 1000ms 750ms ease;
}
.animfadein.forimg04 {
	opacity: 1;
	transition: all 1000ms 1000ms ease;
}

.fadein {
	opacity: 0;
	margin-top: 20px;
	margin-bottom: -20px;
}
.animfadein.forimg01 {
	opacity: 1;
	transition: all 1000ms 250ms ease;
	margin-top: 0;
	margin-bottom: 0;
}
.animfadein.forimg02 {
	opacity: 1;
	transition: all 1000ms 500ms ease;
	margin-top: 0;
	margin-bottom: 0;
}
.animfadein.forimg03 {
	opacity: 1;
	transition: all 1000ms 750ms ease;
	margin-top: 0;
	margin-bottom: 0;
}
.animfadein.forimg04 {
	opacity: 1;
	transition: all 1000ms 1000ms ease;
	margin-top: 0;
	margin-bottom: 0;
}
.animfadein.forimg05 {
	opacity: 1;
	transition: all 1000ms 1250ms ease;
	margin-top: 0;
	margin-bottom: 0;
}
.animfadein.forimg06 {
	opacity: 1;
	transition: all 1000ms 1500ms ease;
	margin-top: 0;
	margin-bottom: 0;
}


.fadezoom0 {
	opacity: 0;
	transform: scale(2,2);
}
.animzoom0.forimg01 {
	opacity: 1;
	transform: scale(1,1);
	transition: all 1000ms 250ms ease;
}
.animzoom0.forimg02 {
	opacity: 1;
	transform: scale(1,1);
	transition: all 1000ms 500ms ease;
}
.animzoom0.forimg03 {
	opacity: 1;
	transform: scale(1,1);
	transition: all 1000ms 750ms ease;
}
.animzoom0.forimg04 {
	opacity: 1;
	transform: scale(1,1);
	transition: all 1000ms 1000ms ease;
}
.animzoom0.forimg05 {
	opacity: 1;
	transform: scale(1,1);
	transition: all 1000ms 1250ms ease;
}

.animzoom0.forimg06 {
	opacity: 1;
	transform: scale(1,1);
	transition: all 1000ms 1500ms ease;
}



/*wideslider*/ 

.mainList {position: relative;}



.wideslider {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.wideslider ul,
.wideslider ul li {
	float: left;
	display: inline;
	overflow: hidden;background-color: #fff;}


.wideslider ul li img {
	width: 100%;
	display: none;
}

.wideslider_base {
	top: 0;
	position: absolute;
}
.wideslider_wrap {
	top: 0;
	position: absolute;
	overflow: hidden;

}
.slider_prev,
.slider_next {
	top: 0;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	cursor: pointer;
}
.slider_prev {background: #fff url(https://www.sakura-db.jp/wp-content/themes/sakuradb2017/img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(https://www.sakura-db.jp/wp-content/themes/sakuradb2017/img/next.jpg) no-repeat left center;}

.pagination {
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 200;
}

.pagination a {
	margin: 0 5px;
	width: 10px;
	height: 10px;
	display: inline-block;
	overflow: hidden;
	background: #fff;
		filter:alpha(opacity=50)!important;
	-moz-opacity: 0.5!important;
	opacity: 0.5!important;
}
.pagination a.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}


/* =======================================
	ClearFixElements
======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.wideslider ul {
	display: inline-block;
	overflow: hidden;
}



/*TOPANIMATION*/

.art-topamine {
	width: 100%;
	position: relative;
	padding-top: 50%;
	margin-right: auto;
	margin-left: auto;
}

.div-toptxt01 {
width: 70%;
    height: auto;
    position: absolute;
top: 25%;
left: 15%;
}
.div-toptxt01 svg path {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: 2s ease-in forwards 0.5s text01;
fill-opacity: 0;
fill: #fff;
/*filter: drop-shadow(0px 0px 0px #fff);*/
}

.topimg02 {
	opacity: 0;
	animation: 2s ease-in-out forwards 0s topimg02;
	right: -15%;
}
@keyframes topimg02 {
0% {
	opacity: 0;
}
100% {
	opacity: 1;
	right: -2.5%;
}
}

.topimg03 {
	
	opacity: 0;
	animation: 2s ease-in-out forwards 2s topimg03;
	left: -15%;
}
@keyframes topimg03{
0% {
	opacity: 0;
}
100% {
	opacity: 1;
	left: -2.5%;
}
}

.topimg04 {
	
	opacity: 0;
	animation: 2s ease-in-out forwards 2s topimg04;
	bottom: 10%;
}
@keyframes topimg04 {
0% {
	opacity: 0;
}
100% {
	opacity: 1;
	bottom: 16%;
}
}


@keyframes text01 {
0% {
stroke-dashoffset: 3000;	
}
80% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
100% {
stroke-dashoffset: 0;	
fill-opacity: 1;
filter: drop-shadow(5px 5px 5px #000);
}
}

.div-toptxt02 {
    width: 58%;
    height: auto;
    position: absolute;

    z-index: 500;
	right: 0;
	top: 40%;
}

.div-toptxt02 svg path {

animation: 2s ease-in forwards 0.5s text01;
fill-opacity: 0;
fill: #fff;
filter: drop-shadow(0px 0px 0px #fff);
}
@keyframes text02 {
0% {
fill-opacity: 0;	
}
80% {
fill-opacity: 0.5;
}
100% {
fill-opacity: 1;
filter: drop-shadow(5px 5px 5px #000);
}
}




/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(153,204,51,0.9);
}

/* Overlay closing cross */
.overlay .overlay-close {

}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	font-size: 54px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
}

.overlay ul li a {
	font-weight: 300;
	display: block;
	color: #fff;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #e3fcb1;
}

/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;

}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	-webkit-perspective: 1200px;
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}




.art-beginners {


}
.ul-beginners {

}


.ul-beginners li {
	margin-bottom: 10%;
	margin-right: auto;
	width: 90%;
	margin-left: auto;
}
.ul-beginners li b {

	color: #333;
	text-align: left;
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 2.5%;
	display: block;
	line-height: 1.5em;
}
.ul-beginners li b:before {
	content: '◎';
}
.art-beginners iframe {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 28vh;
}

.ul-equip {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
.ul-equip li b {
	color: #333;
	text-align: left;
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 2.5%;
	display: block;
}
.ul-equip li b:before {
	content: '◎';
}
.ul-equip li i {
	color: #333;
	text-align: left;
	font-size: 0.8rem;
	margin-bottom: 10%;
	display: block;
	line-height: 1.5em;
}
.ul-equip li img {
	width: 100%;
	height: auto;
	margin-bottom: 1.5%;
}


.slick-dots {
	bottom: 10%!important;
}
.slick-dots li button {
	background-color: #ccc !important;
	width: 5px!important;
	height: 5px!important;
	border-radius: 100%!important;
	border: 1px solid #fff!important;
	display: block!important;
	opacity: 0.5!important;
}


.slick-dots li.slick-active button {
	background-color: #000!important;
}



.sec-topimg .slick-dots li.slick-active button {
	display: none!important;
}



.art-topcourse {




    background-image: linear-gradient(120deg, rgb(216, 216, 249) 0%, rgb(253, 226, 233) 100%);
margin-bottom: 10%;
position: relative;
margin-top: 20%;
padding-top: 45%;
	padding-bottom: 5%;
}

.img-topcourse {
	width: 75%;
	height: auto;
	position: absolute;
	top: -10%;
  left: 50%;
  transform: translateX(-50%);
}

.p-topcourse {
	display: block;
	color: #333;
	font-size: 0.75rem;
	line-height: 1.5em;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
}
.p-topcourse b {
	color: #333;
	font-size: 1.25rem;
	display: block;
	font-weight: bold;
	margin-bottom: -5px;
}



.a-topcourse {
	display: block;
	padding-top: 10px;
		padding-bottom: 10px;
	color: #000;
	border: 1px solid #000;
	width: 90%;
	text-align: center;
	font-size: 0.75rem;
	border-radius: 100px;
	position: relative;
	overflow: hidden;
	z-index: 500;
transition: all 0.25s ease-in-out 0s;
background-color: #fff;
margin-right: auto;
	margin-left: auto;
}

.a-topcourse::before {
content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	border-radius: 100px;
	display: block;
top: 0;
transform: translateX(-100%);
transition: all 0.25s ease-in-out 0s;
}

.a-topcourse:hover::before {
content: '';
transition: all 0.25s ease-in-out 0s;
transform: translateX(0);
z-index: 250;
}
.a-topcourse i {
	position: relative;
	z-index: 500;
	color: #000;
	font-size: 0.75rem;
transition: all 0.25s ease-in-out 0s;
}

.a-topcourse:hover i {
	position: relative;
	z-index: 500;
	color: #fff;
	font-size: 0.75rem;
transition: all 0.25s ease-in-out 0s;
}

/*COURSEEXP20230308*/
.art-topcourse2 {

	margin-right: auto;
	margin-left: auto;
	width: 90%;
}
.p-regularexp {
	color: #000;
	font-size: 0.75rem;
	margin-bottom: 25px;
	text-align: center;
}
.div-topexp {
	margin-bottom: 5%;
}
.h4-topexp {
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	padding: 1rem;
	margin-bottom: 10px;
	overflow: hidden;
}


.h4-topexp:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f055";
	float: right;
}
.h4-topexp span {
	display: none;
}
.h4-topexp span i {
	color: #fff;
	font-size: 1rem;
	margin-right: 0.5em;
}
.h4-topexp span b {
	color: #fff;
	font-size: 1rem;	
}


.div-topexpcont {
	display: none;
}


.div-topexpdiff  {
	text-align: right;
	display: block;
	margin-bottom: 10px;
	width: 100%;
}
.div-topexpdiff i  {
	margin-right: 0.5em;
	color: #000;
	font-size: 1rem;
	margin-bottom: 1px;
}

.div-topexpdiff b  {
	color: #000;
	font-size: 1rem;
}




.dl-topexp {
	margin-bottom: 10px;
}
.dt-topexp {
	color: #000;
	font-size: 0.8rem;
	line-height: 1.5em;
	font-weight: 700;
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
	padding-bottom: 5px;
	letter-spacing: 0.1em;
}

.dd-topexp {
	color: #000;
	font-size: 0.8rem;
	line-height: 1.75em;
}
.texd01 {
	background-color: #4fbadc;
}
.texd02 {
	background-color: #51b37e;
}
.texd03 {
	background-color: #e2df00;
}

.texd04 {
	background-color: #6176b7;
}

.texd05 {
	background-color: #e79cc0;
}

.texd06 {
	background-color: #83ba1c;
}

.texd07 {
	background-color: #e75f6c;
}

.texd08 {
	background-color: #666666;
}




/*FAQ*/
.dl-faq {
	margin-right: auto;
	margin-left: auto;
	width: 90%;
	border-bottom: 1px solid #ccc;
}

.dl-faq dt {
	color: #000;
	font-size: 1rem;
	line-height: 1.5em;
	border-top: 1px solid #ccc;
	padding-top: 1em;
	padding-bottom: 1em;
	font-weight: 700;
}
.dl-faq dt:before {
content: 'Q';
color: #fff;
font: 1rem/1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-weight: 700;
margin-right: 0.5em;
background-color: #900;
border-radius: 100%;
width: 15px;
height: 15px;
padding: 5px;
display: inline-block;
text-align: center;
}
.dl-faq dt:after {
	font: 1rem/1.5em "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f055";
	float: right;
	color: #900;
}
.dl-faq dd {
	display: none;
}
.dl-faq dd span {
display:flex;
justify-content:left;
flex-wrap: wrap;
}



.dl-faq dd span i {
	color: #000;
	font-size: 0.85rem;
	line-height: 1.75em;
padding-bottom: 1em;
width: 90%;
}
.dl-faq dd span b {
color: #fff;
font: 1rem/1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-weight: 700;
margin-right: 0.5em;
background-color: #009;
border-radius: 100%;
width: 25px;
height: 25px;
padding: 5px;
display: inline-block;
text-align: center;


}
.titfaq {
	margin-top: 100px;
	margin-bottom: 25px;
}