/*
Theme Name: Lightning Child Sample
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: lightning
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
Tags: 
Version: 0.5.1
*/


/*loading
**************************************************************/
/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleY(0);
    background-color: #333;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;

}

@keyframes PageAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/

.fullPageScroll{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear .fullPageScroll{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
  position: relative;
z-index: 1;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

@media screen and (max-width:768px) { 
  #splash{
    height: 100vh;
    top: -64px;
  }
  #splash-logo {
    top: 55%;
  }

}

/*header
**************************************************************/
.vk-mobile-nav-menu-btn.position-right{
  z-index: 9999;
  top: 15px;
}

@media screen and (max-width:768px) {
  .site-header{
    background: #fff;
    left: 0;
  }
  .site-header .site-header-container{
    width: 145px;
    margin: 0 auto 0 0;
  }
}


/* contents
**************************************************************/


.box{
}

#box2,#box3,#box4{
  padding-top: 100px;
}

.wp-block-cover.is-light .wp-block-cover__inner-container {
  text-align: center;
}

/*========= ページネーションCSS ===============*/

.pagination {
  position:fixed;
  right:20px;
  top: 50%;
  transform: translateY(-50%);
  font-size:1em;
  z-index: 10;
  list-style: none;
}

.pagination a {
  display:block;
  height:20px;
  margin-bottom:5px;
  position:relative;
  padding:4px;
}

.pagination a.active:after {
  box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
  position:absolute;
  right:15px;
  top:0;
  opacity:0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  padding-right: 15px;
}

.pagination a:hover .hover-text {
  opacity: 1;
}

.pagination a:after {
  -webkit-transition:box-shadow 0.5s ease;
  transition:box-shadow 0.5s ease;
  width:10px;
  height:10px;
  display: block;
  border:1px solid;
  border-radius:50%;
  content:"";
  position: absolute;
  margin:auto;
  top:0;
  right:3px;
  bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
  .pagination a .hover-text{
    display: none;
  } 
  .box{
  }
}


.delay-time01{
  animation-delay: 0.5s;
}
  
.delay-time02{
  animation-delay: .75s;
}
.delay-time03{
  animation-delay: 1s;
}
.delay-time04{
  animation-delay: 1.25s;
}
/* fadeUp */

.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

  .fadeUpTrigger{
    /* opacity: 0; */
}

 #box2 .wp-container-7,.wp-container-18{
  justify-content: space-between;
}
#box2 .wp-container-7 .wp-block-column,
#box3 .wp-container-18 .wp-block-column{
  flex-basis: inherit;
  flex-grow: inherit;
  width: 31%;
}

@media screen and (max-width:768px) { 
  .fadeUpTrigger{
  } 
  .home {
  }
  .home .box{
  }
  .delay-time01{
    animation-delay: .5s;
  }    
  .delay-time02{
    animation-delay: .5s;
  }
  .delay-time03{
    animation-delay: .5s;
  }
  .delay-time04{
    animation-delay: .5s;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{

  }
  #box2 .wp-container-7 .wp-block-column,
#box3 .wp-container-18 .wp-block-column{
  margin-bottom: 20px;
}
}


@media screen and (max-width:768px) { 
  
  /*.fullPageScroll {
    width: 100%;
    height: 100vh;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-y: repeat(100vh);
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .box {
    scroll-snap-align: start;
  }*/

}



#breadcrumb{
  display: none;
}