/* --------------------
 * hover-bgScale
 * -------------------- */
.hover-bgScale {
  background-size: auto 100% !important;
  transition: .5s;
}

.hover-bgScale:hover {
  background-size: auto 120% !important;
}

/* --------------------
 * hover-pseudoScale
 * -------------------- */
.hover-pseudoScale:before {
  transition: all .5s;
}

.hover-pseudoScale:hover:before {
  transform: scale(1.15);
}

/* --------------------
 * effectTypeB
 * -------------------- */
.effectTypeB {
  /*overflow: hidden;*/
  opacity: 0;
  transform: translateY(0px);
  transition: all 1s, transform .5s;
}

.effectTypeB .effectTypeB_contentsBase {
  opacity: 0;
  transition: all 2s;
}

.p_top .effectTypeB.effectTypeB-right .effectTypeB_contentsBase {transform: translateX(60px);}
.p_top .effectTypeB.effectTypeB-left .effectTypeB_contentsBase {transform: translateX(-60px);}
.effectTypeB.effectTypeB-center .effectTypeB_contentsBase {transform: translateY(60px);}

@media screen and (max-width: 767px){
.p_about_access .bgEffect::before { transition: 1s;}
.p_about_access .effectTypeB { transform: translateY(0px); transition: all 1s;}
.p_about_access .bgEffect::before{ transition: none;}

}

.p_global  .effectTypeB.effectTypeB-right .effectTypeB_contentsBase {transform: translateX(60px) translateY(-50%);}
.p_global  .effectTypeB.effectTypeB-left .effectTypeB_contentsBase {transform: translateX(-60px) translateY(-50%);}

@media screen and (max-width:767px) {
  .p_global  .effectTypeB.effectTypeB-right .effectTypeB_contentsBase {transform: translateX(60px);}
  .p_global  .effectTypeB.effectTypeB-left .effectTypeB_contentsBase {transform: translateX(-60px);}
}

.effectTypeB .effectTypeB_contents {
  opacity: 0;
  transition: all .6s;
}

.effectTypeB .effectTypeB_contentsBase .effectTypeB_contents {
  transition: all .6s .8s;
}

.effectTypeB.appeared {
  opacity: 1;
  transform: translateY(0);
}

.effectTypeB.appeared .effectTypeB_contentsBase {
  opacity: 1;
}

.tab .effectTypeB{
  opacity: 1;
}
.tab .effectTypeB .effectTypeB_contentsBase {
  opacity: 1;
}

.p_top .effectTypeB.effectTypeB-right.appeared .effectTypeB_contentsBase {transform: translateX(0);}
.p_top .effectTypeB.effectTypeB-left.appeared .effectTypeB_contentsBase {transform: translateX(-20px);}
.effectTypeB.effectTypeB-center.appeared .effectTypeB_contentsBase {transform: translateY(0);}
.p_global .effectTypeB.effectTypeB-right.appeared .effectTypeB_contentsBase {transform: translateX(0) translateY(-50%);}
.p_global .effectTypeB.effectTypeB-left.appeared .effectTypeB_contentsBase {transform: translateX(0) translateY(-50%);}

@media screen and (max-width:767px) {
  .p_global .effectTypeB.effectTypeB-right.appeared .effectTypeB_contentsBase {transform: translateX(0);}
	.p_top .effectTypeB.effectTypeB-left.appeared .effectTypeB_contentsBase {transform: translateX(0);}
  .p_global .effectTypeB.effectTypeB-left.appeared .effectTypeB_contentsBase {transform: translateX(0px);}

}


.effectTypeB.appeared .effectTypeB_contents {
  opacity: 1;
}

.upper10 {transform: translateY(10px);}

.upper10.appeared {transform: translateY(0);}

.upper20 {transform: translateY(20px);}

.upper20.appeared {transform: translateY(0);}

.upper60 {transform: translateY(60px);}

.upper60.appeared {transform: translateY(0);}

.upper100 {transform: translateY(100px);}

.upper100.appeared {transform: translateY(0);}

/* --------------------
 * effectFade-self
 * effectFade + effectFade_child
 * -------------------- */
.effectFade-self,
.effectFade_child {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
}

.effectFade-self.appeared,
.effectFade.appeared .effectFade_child {
  opacity: 1;
}

.effectFade_child-2 {transition-delay: .3s;}
.effectFade_child-3 {transition-delay: .6s;}
.effectFade_child-4 {transition-delay: .9s;}
.effectFade_child-5 {transition-delay: 1.2s;}
.effectFade_child-6 {transition-delay: 1.5s;}
.effectFade_child-7 {transition-delay: 1.8s;}
.effectFade_child-8 {transition-delay: 2.1s;}
.effectFade_child-9 {transition-delay: 2.4s;}

/* --------------------
 * effectFadeUp-self
 * effectFadeUp + effectFadeUp_child
 * -------------------- */
.effectFadeUp-self,
.effectFadeUp_child {
  opacity: 0;
  transform: translateY(30px);
  transition-property: all;
  transition-duration: 1s;
}

.effectFadeUp-self.appeared,
.effectFadeUp.appeared .effectFadeUp_child {
  opacity: 1;
  transform: translateY(0);
}

.effectFadeUp_child-2 {transition-delay: .3s;}
.effectFadeUp_child-3 {transition-delay: .6s;}
.effectFadeUp_child-4 {transition-delay: .9s;}
.effectFadeUp_child-5 {transition-delay: 1.2s;}
.effectFadeUp_child-6 {transition-delay: 1.5s;}
.effectFadeUp_child-7 {transition-delay: 1.8s;}
.effectFadeUp_child-8 {transition-delay: 2.1s;}
.effectFadeUp_child-9 {transition-delay: 2.4s;}
.effectFadeUp_child-10 {transition-delay: 2.7s;}


/* --------------------
 * bgEffect
 * bgEffect + bgEffect-r or bgEffect-l
 * -------------------- */

.bgEffect{
  position: relative;
}

.bgEffect::before{
  position: absolute;
  z-index: 0;
  content: "";
  top: 0;
  display: block;
  width: calc(100% + 200px);
  height: 100%;
  background: url('') no-repeat center / cover;
  transition: 3s;
  opacity: .1;
}
.p_about_access .bgEffect::before{
  transition-duration: 2s;
}
.bgEffect.appeared::before{
  opacity: 1;
}

.bgEffect-r::before{
  right: -100px;
}

.bgEffect-r.appeared::before{
  right: 0;
}

.bgEffect-l::before{
  left: -100px;
}

.bgEffect-l.appeared::before{
  left: 0;
}



/*** Button Effect ***/
.hoverSlideUp{
  transform: translateY( 33px);
  transition: .5s;
}

.jb:hover .hoverSlideUp{
  transform: translateY( 0);
}

.slideUpBtn{
  font-size: 15px;
  text-align: center;
  transform: translateY( 200px);
  transition: .5s;
}

.jb:hover .slideUpBtn{
  transform: translateY( 0);
}

.slideUpBtn {
  position: relative;
  display: inline-block;
  color: #FFF;
  text-decoration: none;
  padding: 0 10px 3px 0;
  border-bottom: 1px solid #FFF;
}

.slideUpBtn::after{
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  right: 2.5px;
  width: 1px;
  height: 10px;
  background: #FFF;
  transform: rotate( -45deg);
}


.hoverBgLighter{
  padding-top: 80px !important;
}

#jr_book.hoverBgLighter{
  background: url(../img/top/book_bg-h.jpg) no-repeat center /cover;
}

#jr_study.hoverBgLighter{
  background: url(../img/top/study_bg-h.jpg) no-repeat center /cover;
}

.jb.hoverBgLighter:hover::before {
  opacity: 0;
}

.hoverBgLighter a{
  color: #FFF;
  text-decoration: none;
}

/** onLoadEffect **/

.loadEffectA{
  opacity: 0;
  transition: opacity 1.5s;
  transition-delay: .1s;
}

.loadEffectA.loadEffectA-5{
  transition-delay: .5s;
}

.loadEffectA.appeared{
  opacity: 1;
}


/** modal **/
/*.cats{
  padding: 38px;
  background: #fff;
}
@media screen and (max-width:767px) {
  .cats{
    padding: 10px;
  }
}*/
.dialog.open{
  animation: hopUp .4s ease;
}
@keyframes hopUp {
  from { transform: scaleY(.5) scaleX(.5); opacity: 0;  }
  to {  transform: scaleY(1) scaleX(1); opacity: 1;  }
}


.p_facility_seminar #intro div {
  color: #00284C;
  text-align: center;
  font-size: 16px;
  margin: 40px 30px;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
.p_facility_seminar #intro div{
  text-align: left;
	}
}

.gwrap{
  padding-top: 50px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f5f5+0,ffffff+88 */
  background: rgb(244,245,245); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(244,245,245,1) 0%, rgba(255,255,255,1) 88%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(244,245,245,1) 0%,rgba(255,255,255,1) 88%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(244,245,245,1) 0%,rgba(255,255,255,1) 88%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f5f5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gwrap .gwrap_ttl{
  font-size: 28px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
  font-family: "A-OTF 見出ゴMB1 Std DeBold","Midashi Go MB1 Std DeBold",sans-serif;
}

@media print{
#news_panel{
  display: none;
}
.scroll-clsSwitch,.scroll-clsSwitch-l,.scroll-clsSwitch *,.scroll-clsSwitch-l *{
  opacity: 1 !important;
}

}