
.body_pc{
	min-width: 1024px;
}
.col-md-6{

}
.col-md-8{

}

.col-md-9{

}

.col-md-12{

}

.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}


a { cursor:pointer;
   text-decoration: none;
   color:#fff;}
a:hover {color:#aaa;text-decoration: none;}
a:visited {}
a:focus {
	outline:0;
}







/* --------- loading ------------- */

/* loading safari */



#load_box_safari{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity:0;
  transition :  1s;
}

#load_box_safari.in{
opacity:1;
}


#load_safari {
  position:absolute;
  width:100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
}

/* other */

#wrap_top{
opacity:0;
}





/* -- animation --*/

#load_box{
  opacity:0;
  transition :  3s;
}

#load_box.in{
opacity:1;
}


#load {
  position:absolute;
  width:600px;
  height:36px;
  left:50%;
  top:46%;
  margin-left:-300px;
  overflow:visible;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
  opacity:0.7;
}

#load div {
  position:absolute;
  width:20px;
  height:36px;
  opacity:0;
  font-family:Helvetica, Arial, sans-serif;
  animation:move 2s linear infinite;
  -o-animation:move 2s linear infinite;
  -moz-animation:move 2s linear infinite;
  -webkit-animation:move 2s linear infinite;
  transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  color:#b70004;
}

#load div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
    35% {
        left: 41%; 
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%; 
        -moz-transform:rotate(0deg); 
        -webkit-transform:rotate(0deg); 
        -o-transform:rotate(0deg);
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%; 
        -moz-transform:rotate(-180deg); 
        -webkit-transform:rotate(-180deg); 
        -o-transform:rotate(-180deg); 
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-moz-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -moz-transform:rotate(0deg); 
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%; 
        -moz-transform:rotate(0deg); 
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%; 
        -moz-transform:rotate(-180deg); 
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-webkit-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -webkit-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    65% {
        left:59%; 
        -webkit-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%;
        -webkit-transform:rotate(-180deg); 
        transform:rotate(-180deg); 
        opacity:0;
    }
}

@-o-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -o-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    65% {
        left:59%; 
        -o-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%; 
        -o-transform:rotate(-180deg); 
        transform:rotate(-180deg); 
        opacity:0;
    }
}








/* ----- nav  -------- */

.nav_top {
    position: fixed;
    left: 0px;
    width:100%;    
    line-height:110px;

   
    font-weight:100;
    font-family: 'Noto Sans JP', sans-serif;
    font-size:12px;
    letter-spacing:1px;
    font-size:11px;


    z-index:999;
    color:#fff;
    background-color:#b70004;

}
.nav_contents{
    line-height:normal;
      
	  display:inline-block;
  padding-left: 26px;
  padding-right: 26px;
  vertical-align: middle;
  
  

}
.animoSwingVertical{color:#474e51;cursor:pointer}
.animoSwingVertical:hover{animation:swingVertical 1s ease;animation-iteration-count:1}@keyframes swingVertical{15%{transform:translateY(6px)}30%{transform:translateY(-6px)}50%{transform:translateY(4px)}65%{transform:translateY(-2px)}80%{transform:translateY(2px)}100%{transform:translateY(0)}}




/* -- contents fadein  --　*/


 .fadeInUp {
  opacity : 0;
  transform : translate(0, 60px);
  transition :  2s;
}
.fadeInUp.in{
  opacity : 1;
  transform : translate(0, 0);
}
    
.fadeInUp2 {
  opacity : 0;
  transform : translate(0, 60px);
  transition :  2s;
}
.fadeInUp2.in{
  opacity : 1;
  transform : translate(0, 0);
}



/* work flow */

    .fadeInUp3 {
  opacity : 0;
  transform : translate(0, 0px);
  transition :  1s;
}
.fadeInUp3.in{
  opacity : 1;
  transform : translate(0, 0);
}

    .fadeInUp4 {
  opacity : 0;
  transform : translate(0, 0px);
  transition :  2s;
}
.fadeInUp4.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp5 {
  opacity : 0;
  transform : translate(0, 0px);
  transition :  2s;
}
.fadeInUp5.in{
  opacity : 1;
  transform : translate(0, 0);
}



/* works */

  .fadeInUp_works {
  opacity : 0;
  transform : translate(-1000px, 0);
  transition :  1s;
}
.fadeInUp_works.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp_works2 {
  opacity : 1;
  transform : translate(0, 0px);
  transition :  0.5s;
}
.fadeInUp_works2.in{
  opacity : 1;
  transform : translate(-800px, 0);
}


.mask_works{
  display: block;

  width: 760px;
  height: 270px;
  top:0px;
  left:0;
  background-color:#f6921e;
 position: absolute;
 z-index:2;
  }
  .mask_img{
  position: absolute;
  top:0;
  left:0;
 z-index:1;
  }


  .fadeInUp_works3 {
  opacity : 0;
  transform : translate(0, 40px);
  transition :  1s;
}
.fadeInUp_works3.in{
  opacity : 1;
  transform : translate(0, 0);
}


/* works contetns */

  .fadeInUp_works_contents {
  opacity : 1;
  transform : translate(0, 0);
  transition :  0s;
}
.fadeInUp_works_contents1.in{
  opacity : 1;
  transform : translate(0, 0);
}


  .fadeInUp_works_contents1 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents1.in{
  opacity : 1;
  transform : translate(0, 0);
}


  .fadeInUp_works_contents2 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents2.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp_works_contents3 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents3.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp_works_contents4 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents4.in{
  opacity : 1;
  transform : translate(0, 0);
}


  .fadeInUp_works_contents5 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents5.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp_works_contents6 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents6.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp_works_contents7 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents7.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp_works_contents8 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents8.in{
  opacity : 1;
  transform : translate(0, 0);
}

  .fadeInUp_works_contents9 {
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_contents9.in{
  opacity : 1;
  transform : translate(0, 0);
}






/* -- nav fadein out -- */


.fixed {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;  }
  @keyframes fadeIn {
    0% {opacity: 0;top:-50px}
    100% {opacity: 1;top:0px}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;top:-50px}
    100% {opacity: 1;top:0px}
}

.fixed_back {
    animation: fadeOut 1s ease 0s 1 normal;
    -webkit-animation: fadeOut 1s ease 0s 1 normal;  }

  @keyframes fadeOut {
    0% {opacity: 1;top:0px}
    100% {opacity: 0;top:-110px}
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1;top:0px}
    100% {opacity: 0;top:-110px}
}




/* ----- top mov ----- */

*{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		.top_mov{
   margin-bottom: 100px;
			height: 100vh;

		}


  

  
  /* ---------- top contents in mov ------- */
  
.top_contents_center1{
			top: 34%;
			font-weight: 400;
			left: 58%;
			position: absolute;
			transform: translateX(-50%);
   font-family: 'Playfair Display', serif;
   font-size:7vh;
   color:#b70004;
		}

.top_contents_center2{
			top: 39%;
			font-weight: 400;
			left: 58%;
			position: absolute;
			transform: translateX(-50%);
   font-family: 'Playfair Display', serif;
   font-size:12vh;
   color:#b70004;
		}

.top_contents_center3{
			top: 54%;
			font-weight:100;
			left: 58%;
			position: absolute;
			transform: translateX(-50%);
   font-family: 'Noto Sans JP', sans-serif;
   font-size:2vh;
   color:#666666;
		}

.top_left_box{
	 top: 0;
  left: -180px;
  position: absolute;
  z-index: 0;
}

.top_left_box2{
	 top: 0;
  left: -180px;
  position: absolute;
  z-index: 1;
}

.top_left_box3{
	 top: 0px;
  left:0px;
  position: absolute;
  z-index: 2;
  }

.top_logo{
	 top: 16vh;
  left: 35px;
  position: absolute;
  z-index: 999;
}

.top_contents_left1{
			top: 33vh;
			font-weight:100;
			left: 43px;
			position: absolute;
   font-family: 'Noto Sans JP', sans-serif;
   font-size:12px;
   color:#fff;
   line-height:2.6vh;
   letter-spacing:1px;
   z-index: 3;

		}
  

.top_contents_left2{
			font-weight:400;
   font-family: 'Playfair Display', serif;
   color:#eda067;
   padding-top:20px;
   letter-spacing:1px;
   font-size:11px;
  z-index: 2;
		}

  .top_contents_left3{
   margin-top:-10px;
			font-weight:400;
   font-family: 'Playfair Display', serif;
   background-color:#9a0004;
   padding:5px;
   font-size:17px;
   color:#eda067;
   border: 1px solid;
   border-color: #eda067;
   letter-spacing:2px;
  z-index: 2;

		}
  


/* -------------- footer ------------------- */

		.footer{
			font-weight:400;
			background: #b70004;
			color: #fff;
   letter-spacing:1px;
			padding-top: 6px;
   padding-bottom: 10px;
			text-align: center;
   font-family: 'Noto Sans JP', sans-serif;
   font-size:8px;
		}
  
  
  
  
