/*↓共通パーツ*/

*{
  color:#fff;
}

body{
      font-family: "游ゴシック Light", "Yu Gothic light", "游ゴシック", "游ゴシック体", YuGothic, sans-serif;
      background-color:#000;
}

a{
  transition:.5s;
}

a:hover{
  transition:.5s;
  opacity:.65;
}

.forsp{display:none;}

h1#logo img{
  width:180px;
}

/*↑共通パーツ*/

/*↓共通パーツ・ヘッダー*/
.header{
  background-color:inherit;
}

#js-spNav{
  width:100%;
  display: flex;
  justify-content: flex-end;
}


ul#menu{
  /*display:none;*/
  position: fixed;
  top: 30%;
  right: 0;
  /* height: 40px; */
  z-index: 70;
  width: 40px;
  padding: 0;
  margin: 0;
  transition:.3s;
}

.fp-viewing-wanted ul#menu{
  top:15%;
  transition:.3s;
}

#menu li {
  display: inline-block;
  margin: 5px;
  color: #626262;
  /* background: #fff; */
  /* background: rgba(255,255,255, 0.5); */
  border-radius: 10px;
}
#menu li.active{
   /*background:#666;
   background: rgba(0,0,0, 0.5);*/
   color: #fff;
}
#menu li a{
   text-decoration:none;
   color: #333;
   font-size:0.5rem;
}
#menu li.active a:hover{
   color: #000;
}
#menu li{
  transition:.3s;
}
#menu li:hover{
   background: rgba(255,255,255, 0.1);
   transition:.3s;
}
#menu li a,
#menu li.active a{
   padding: 5px 10px;
   display:block;
}
#menu li.active a{
   color: #fff;
}
#menu{
   position:fixed;
   top:0;
   height: 40px;
   z-index: 70;
   width: 100%;
   padding: 0;
   margin:0;
}

/*↑共通パーツ・ヘッダー*/

/*↓共通パーツ・フッター*/

.in_footer{
  position:absolute;
  bottom:0px;
  left:0px;
  width:100%;
  height:120px;
  background-color:#000;
}

.in_footer .f_inner{
  display:flex;
  justify-content:flex-start;
  max-width:90%;
  height:100%;
  margin:0 auto;
  align-items:center;
}

.in_footer .f_inner ul{
  display:flex;
}

.in_footer p{
  margin:0px;
  font-size:.8rem;
}
.box_l{
  margin-left:50px;
}
.box_r,
.box_l{
  text-align:left;
}

.in_footer ul{
  margin:0px;
}

.in_footer ul li{
  margin-left:20px;
}

.in_footer ul li a{
  color:#fff;
}

.in_footer ul li:first-child{
  margin:0px;
}

.page_top{
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 15px;
  z-index: 100;
}

p.copyright{
  font-family: 'Bellefair',"游ゴシック Light", "Yu Gothic light", "游ゴシック", "游ゴシック体", YuGothic, sans-serif;

}

.scroll_mark{
  position:absolute;
  bottom:60px;
  right:0;
  left:0;
  color:#fff;
  font-family: 'Bellefair', serif;
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
  -webkit-transform-style: preserve-3d;
}

.scroll_mark::after{
  content: "";
  width: 1px;
  height: 60px;
  position: absolute;
  right: 50%;
  /* left: 0px; */
  bottom: -60px;
  background-color: #fff;
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
  -webkit-transform-style: preserve-3d;
}

/*↑共通パーツ・フッター*/


/*↓インデックス*/
h2{
  color:#C08450;
}
h3{
  font-family: 'Bellefair', serif;
  font-size:2rem;
  position:relative;
  display:inline-block;
}

h3::before{
  content:"";
  height:1px;
  width:30px;
  background-color:#fff;
  display:flex;
  position:absolute;
  top:15px;
  left:-60px;
}

h3::after{
  content:"";
  height:1px;
  width:30px;
  background-color:#fff;
  display:flex;
  position:absolute;
  top:15px;
  right:-60px;
}

#container {
  overflow: unset;
}



  #maxback{
/*    position:relative;*/
  }

  #maxback video{
/*    width:100%;*/
    z-index:-2;
  }

  .full_outer{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }

  .section {
   text-align: center;
   font-size: 200%;
   background-repeat:no-repeat;
   background-size:2880px 1920px;
   background-position:center;
      will-change: transform;
transform: translate3d(0,0,0);
   transition:8s ease-out;
   -webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.section.active{
  background-size:1920px 1280px;
  transition:8s ease-out;
  will-change: transform;
}

.section .inner{
  width:100%;
  height:100%;
  background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/dot.svg");
  background-size:2px;
  background-repeat:repeat;
  background-color:rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

/*アニメーション定義*/
.section .inner .c_inner{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  z-index:2;
  opacity:0;
  transition:3s;
}

.section.active .inner .c_inner{
  opacity:1;
  transition:3s;
}

.section .inner .c_inner h4{
  opacity:0;
  transition:3s;
  transform:scale(0.9);
  min-width:500px;
}

.section.active .inner .c_inner h4{
  opacity:1;
/*  margin-top:0px;*/
  transform:scale(1);
  transition:2s;
  backface-visibility: hidden;
}

.backgroundimage{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-1;
  transition:5s;
  transform:scale(1.1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.section.active .backgroundimage{
  transform:scale(1);
  transition:5s;
}

.section.third{
z-index:10
}
.section.fourth{
z-index:9;
}
.section.fifth{
z-index:8;
}
.section.sixth{
z-index:7;
}
.section.seventh{
z-index:6;
}

.section.third .backgroundimage{
  background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/slide3bk.jpg");
}
.section.fourth .backgroundimage{
  background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/slide4bk.jpg");

}
.section.fifth .backgroundimage{
  background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/slide6bk.jpg");

}
.section.sixth .backgroundimage{
  background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/slide5bk.jpg");
}
.section.seventh .backgroundimage{
  /*background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/slide7bk.jpg");*/
}

.section.fourth ul li,
.section.sixth ul li{
  opacity:0;
  transition:.7s;
}

.section.fourth.active ul li:nth-child(1),
.section.sixth.active ul li:nth-child(1){
  opacity:1;
  transition-delay:.3s;
}

.section.fourth.active ul li:nth-child(2),
.section.sixth.active ul li:nth-child(2){
  opacity:1;
  transition-delay:.6s;
}

.section.fourth.active ul li:nth-child(3),
.section.sixth.active ul li:nth-child(3){
  opacity:1;
  transition-delay:.9s;
}

.section.fourth.active ul li:nth-child(4),
.section.sixth.active ul li:nth-child(4){
  opacity:1;
  transition-delay:1.2s;
}

.section.fourth.active ul li:nth-child(5),
.section.sixth.active ul li:nth-child(5){
  opacity:1;
  transition-delay:1.5s;
}

.section.fourth.active ul li:nth-child(6),
.section.sixth.active ul li:nth-child(6){
  opacity:1;
  transition-delay:1.8s;
}

.section.sixth #sb_instagram.sbi_fixed_height{
  margin-bottom:30px;
}


.t_banner{
  position:fixed;
  right:-200px;
  bottom:10%;
  z-index:100;
  transition:0.5s;
  max-width:300px;
}

.t_banner:hover{
  right:0px;
  transition:0.3s;
}

.fp-viewing-wanted .t_banner{
  bottom:35%;
  transition:0.3s;
}

.firstimage img{
  max-width:1000px;
  margin:0 auto;
}

.exp_list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.exp_list li{
  width:26%;
  /*margin:0 auto;*/
  padding:10px;
}

.black_box{
  width:600px;
  padding:50px;
  background-color:rgba(0,0,0,.5);
  margin:0 auto;
}

h2{
  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

h3{
  margin-bottom:50px;
}

h4{
  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size:1.3rem;
}

h4 .j_name{
  font-size: 1.5rem;
  font-weight: lighter;
  border-bottom:solid 1px #C08450;
  display:inline-block;
  letter-spacing:3px;
  margin-top:5px;
}

h4 .job{
  font-weght:100;
  margin-bottom:5px;
}


h4 .e_name{
  margin:0 auto;
}
ul.last_link{
  display:flex;
  justify-content:center;
}

/*.skele_button{
  background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/outer.svg");
  background-size:contain;
  background-repeat:no-repeat;
  width:197px;
  height:80px;
  z-index:2;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  font-family: 'Bellefair',"游ゴシック Light", "Yu Gothic light", "游ゴシック", "游ゴシック体", YuGothic, sans-serif;
  opacity:1;
  transition:.5s;
  color:#fff;
  overflow:hidden;
}

.skele_button:hover{
  color:#000;
}

.skele_button::after{
  top:-100%;
  width:197px;
  height:80px;
  /*width:100%;
  height:100%;
  content:"　";
}*/

/*.skele_button:hover::after{
  top:0;
  background-color:#fff;
}*/



.skele_button{
  background-image:url("https://bejoin.jp/wp-content/themes/bejoin/img/outer.svg");
  background-size:contain;
/*  width: 197px;
  height: 80px;*/
  width:240px;
  height:110px;
  background-repeat:no-repeat;
  align-items: center;
  justify-content: center;
  display:flex;
  margin:0 auto;
  font-family: 'Bellefair',"游ゴシック Light", "Yu Gothic light", "游ゴシック", "游ゴシック体", YuGothic, sans-serif;
  opacity:1;
  transition:.5s;
  position:relative;
}

.active .skele_button{
  -webkit-animation:bounceInLeft 1.5s ease-in-out 0s 1 alternate forwards;
  -moz-animation:bounceInLeft 1.5s ease-in-out 0s 1 alternate forwards;
  animation:bounceInLeft 1.5s ease-in-out 0s 1 alternate forwards;
  opacity:1;
  transition:.5s;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
backface-visibility: hidden;
}*/

li.skele_button{
  margin:10px;
}

.skele_button a{
/*  width: 177px;
  height: 40px;*/
  width: 212px;
    height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  transition:.5s;
  position:absolute;
  top: 25px;
      left: 14px;
  /*backface-visibility:hidden;*/
  overflow:hidden;
  opacity:1;
}

.skele_button a::before,
.skele_button a::after{
  /*top:0;*/
  width:100%;
  height:50%;
  background-color:#202020;
  position:absolute;
  content:"";
  z-index:-1;
  transition:.5s;
}

.skele_button a::before{top:0;left:0;}
.skele_button a::after{bottom:0;left:0;}

.skele_button.cm{
  pointer-events: none;
}


.skele_button:hover a::before,
.skele_button:hover a::after{
  /*width:0%;*/
  height:0%;
  transition:.5s;
  opacity:0;
}

.skele_button:hover a{
  /*color:#fff;*/
}

/*.skele_button a:hover{
  opacity:1;
}*/

.skele_button.pt_b{

}
.skele_button.pt_c{

}

.skele_button.pt_b a::after{
  width:100%;
  height:100%;
  top:0;
  bottom:0%;
  right:0%;
  left:0;
}
.skele_button.pt_b:hover a::after{
  width:0%;
  height:0%;
}

.skele_button.pt_b a::before{
  display:none;
}

.skele_button.pt_c a::after{
  width:100%;
  height:100%;
  transition:.5s;
}

.skele_button.pt_c a::before{
  display:none;
}

.skele_button.pt_c:hover a::after{
  webkit-animation: blink 1.5s ease-in-out infinite alternate;
  -moz-animation: blink 1.5s ease-in-out infinite alternate;
  animation: blink 1.5s ease-in-out infinite alternate;
  -webkit-transform-style: preserve-3d;
  width:100%;
  height:100%;
  transition:.5s;
}

/*.skele_button a::before{
  width:177px;
  height:0px;
  top:0px;
  left:0px;
  background-color:#fff;
  content:"　";
  position:absolute;
  transition:.5s;
  z-index:-1;
}

.skele_button a:hover::before{
  height:40px;
  transition:.5s;
}


ul.last_link .skele_button a:hover{
    font-weight:bold;
}

.skele_button a:hover{
/*  background-color:#fff;*/
/*  color:#333;
  transition:.5s;
  opacity:1;
}
*/
#inner-header.wrap{
  width:90%;
}

.text_box{
  letter-spacing:3px;
  margin-bottom:50px;
  line-height:30px;
}

#fullpage .text_box{
  opacity:1;
  transition:.5s;
}

#fullpage .active .text_box{
  -webkit-animation:bounceInUp 1.5s ease-in-out alternate;
  -moz-animation:bounceInUp 1.5s ease-in-out alternate;
  animation:bounceInUp 1.5s ease-in-out alternate;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
  opacity:1;
  transition:.5s;
}

img.shop_logo{
  max-width:800px;
}

ul.last_link .skele_button a{
  /*font-size:0.9rem;*/
  font-size:1rem;
}

.headerNav{
  font-size:1rem;
}

.headerNav.forpc{
  margin:0px;
}

.section.seventh{
  position:relative;
}



.midashi_box{
/*		height:300px;*/
  height:200px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}


.section h3 span{
  opacity:0;
  font-size:2rem;
}

.section.active	h3 span{
  opacity:1;
  transition:1.5s;
}

/*.section h3 span:nth-child(1){transition-delay:.25s;}
.section h3 span:nth-child(2){transition-delay:.28s;}
.section h3 span:nth-child(3){transition-delay:.31s;}
.section h3 span:nth-child(4){transition-delay:.34s;}
.section h3 span:nth-child(5){transition-delay:.37s;}
.section h3 span:nth-child(6){transition-delay:.40s;}
.section h3 span:nth-child(7){transition-delay:.43s;}
.section h3 span:nth-child(8){transition-delay:.46s;}
.section h3 span:nth-child(9){transition-delay:.49s;}
.section h3 span:nth-child(10){transition-delay:.52s;}
.section h3 span:nth-child(11){transition-delay:.55s;}
.section h3 span:nth-child(12){transition-delay:.58s;}
.section h3 span:nth-child(13){transition-delay:.61s;}
.section h3 span:nth-child(14){transition-delay:.64s;}
.section h3 span:nth-child(15){transition-delay:.67s;}
.section h3 span:nth-child(16){transition-delay:.7s;}
.section h3 span:nth-child(17){transition-delay:.73s;}
.section h3 span:nth-child(18){transition-delay:.73s;}
*/

.section h3 span:nth-child(1){transition-delay:.25s;}
.section h3 span:nth-child(2){transition-delay:.28s;}
.section h3 span:nth-child(3){transition-delay:.31s;}
.section h3 span:nth-child(4){transition-delay:.34s;}
.section h3 span:nth-child(5){transition-delay:.37s;}
.section h3 span:nth-child(6){transition-delay:.40s;}
.section h3 span:nth-child(7){transition-delay:.43s;}
.section h3 span:nth-child(8){transition-delay:.46s;}
.section h3 span:nth-child(9){transition-delay:.49s;}
.section h3 span:nth-child(10){transition-delay:.52s;}
.section h3 span:nth-child(11){transition-delay:.55s;}
.section h3 span:nth-child(12){transition-delay:.58s;}
.section h3 span:nth-child(13){transition-delay:.61s;}
.section h3 span:nth-child(14){transition-delay:.64s;}
.section h3 span:nth-child(15){transition-delay:.67s;}
.section h3 span:nth-child(16){transition-delay:.7s;}
.section h3 span:nth-child(17){transition-delay:.73s;}
.section h3 span:nth-child(18){transition-delay:.73s;}

/*.section h3 span:nth-child(1){transition-delay:.1s;}
.section h3 span:nth-child(2){transition-delay:.11s;}
.section h3 span:nth-child(3){transition-delay:.12s;}
.section h3 span:nth-child(4){transition-delay:.13s;}
.section h3 span:nth-child(5){transition-delay:.14s;}
.section h3 span:nth-child(6){transition-delay:.15s;}
.section h3 span:nth-child(7){transition-delay:.16s;}
.section h3 span:nth-child(8){transition-delay:.17s;}
.section h3 span:nth-child(9){transition-delay:.18s;}
.section h3 span:nth-child(10){transition-delay:.19s;}
.section h3 span:nth-child(11){transition-delay:.20s;}
.section h3 span:nth-child(12){transition-delay:.21s;}
.section h3 span:nth-child(13){transition-delay:.22s;}
.section h3 span:nth-child(14){transition-delay:.23s;}
.section h3 span:nth-child(15){transition-delay:.24s;}
.section h3 span:nth-child(16){transition-delay:.25s;}
.section h3 span:nth-child(17){transition-delay:.26s;}*/

/*animate*/