bnmbertsurhetertertertertertertertpdf'tdfg

hjkhghopjkertteerterterterertertrtoirh bnmbertsurhetertertertertertertertpdf'tdfg

@charset "UTF-8";
/* CSS Document */
html { height: 100%;/*width: 100%;margin: 0;	padding: 0;*/} 
body{margin: 0;	padding: 0; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-weight:500; -webkit-text-size-adjust: 100%;}

/*body.fixed {	position: fixed;height: 100vh;}*/
.gothic{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.clearfix:after{content: "";clear: both;display: block;}
:hover{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}

.scroll{display:inline-block;position:absolute;left:5%;bottom:0;z-index:2;padding:10px 10px 110px;overflow:hidden;color:#000;font-size:14px;line-height:1;letter-spacing:.2em;text-transform:uppercase;text-decoration: none; writing-mode: vertical-lr;}
.scroll::before {  content: '';  position: absolute;  bottom: 0;  left: 50%;  width: 1px;  height: 100px;  background: rgba(000, 000, 000, .2);}
.scroll::after {  content: '';  position: absolute;  bottom: 0;  left: 50%;  width: 1px;  height: 100px;  background: #000;animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}
@keyframes sdl {
	0% {    transform: scale(1, 0);    transform-origin: 0 0;  }
	50% {    transform: scale(1, 1);    transform-origin: 0 0;  }
	50.1% {    transform: scale(1, 1);    transform-origin: 0 100%;  }
	100% {    transform: scale(1, 0);    transform-origin: 0 100%;  }
}

@media screen and (min-width:1051px) {
	header{margin: 0 auto;padding:0px ;font-size: 0;}
	header #inner{position: relative;height: 100vh;margin: 0 auto;padding:0px ;}
	header #inner h1{position: absolute;bottom:40%;right:55%;width:30%; max-width:500px;margin: 0 auto;padding: 0;text-align: center;}
	header #inner h1 img{width:100%}		
	header #inner h2{position: absolute;top:65%;right:55%;width:30%;max-width:500px; margin: 0 auto;padding: 0;text-align: center;}	
	header #inner h2 img{width:70%}		
	header #inner #model{position: absolute;top:0%;left:48%;width:52%;/*max-width:800px;*/ height: 100vh;margin: 0;padding: 0;background: url("../img/vanguard_model.jpg") no-repeat;background-position: 0% 100%;background-size:auto 95% }		
	
	main{background:black;color: white;}
	main section{width:1000px; margin: 0 auto;padding: 80px 0;}
	main section h3 span{position: relative;width:1000px; margin: 0 auto 20px auto;padding:40px 0 0 0 ; text-align: center;font-size: 42px;letter-spacing: 3px;font-weight: normal;}
	main section h3 span::before{display: block; content:'FRANCK MULLER';position: absolute;top: 0;left: 0;width:100%;font-size: 30px;letter-spacing: 3px;text-align: center;}
	main section h4 span{ margin: 0 auto 50px auto;padding: 0 0; text-align: center;font-size: 22px;letter-spacing: 3px;font-weight: normal;}
	main section h4 span .brank{display:none}
	main section p{ margin: 0 auto 20px auto;padding: 0 0; font-size: 18px;letter-spacing: 2px;line-height: 38px;}
	main section #company{width:350px;  margin: 0 0 50px auto;padding: 0 0; font-size: 18px;letter-spacing: 2px;line-height: 34px;}
	main section #banner a{display: block;width:500px;  margin: 0 auto;padding:30px 0;color: white; font-size: 18px;letter-spacing: 2px;line-height: 34px;text-align: center;text-decoration:none;border: 1px solid white;}
	main section #banner a:hover{background:white;color: black;}
	main section #banner a .fa-angle-double-right{margin-left:10px;}
	
	footer{background:black;color: white;padding:0 0 30px 0;}
	footer small{display:block;text-align: center;font-size: 14px;letter-spacing: 2px;}
}

@media screen and (min-width:701px) and (max-width:1050px) {    
	header{margin: 0 auto;padding:0px ;font-size: 0;}
	header #inner{position: relative;height: 100vh;margin: 0 auto;padding:0px ;}
	header #inner h1{position: absolute;bottom:35%;right:52%;width:40%;margin: 0 auto;padding: 0;text-align: center;}
	header #inner h1 img{width:100%}		
	header #inner h2{position: absolute;top:70%;right:52%;width:40%; margin: 0 auto;padding: 0;text-align: center;}	
	header #inner h2 img{width:70%}		
	header #inner #model{position: absolute;top:0%;left:50%;width:50%; height: 100vh;margin: 0;padding: 0;background: url("../img/vanguard_model.jpg") no-repeat;background-position: 0% 100%;background-size:auto 90% }
	
	main{background:black;color: white;}
	main section{width:80%; margin: 0 auto;padding: 80px 0;}
	main section h3 span{position: relative;width:100%; margin: 0 auto 20px auto;padding:40px 0 0 0 ; text-align: center;font-size: 32px;letter-spacing:1px;font-weight: normal;}
	main section h3 span::before{display: block; content:'FRANCK MULLER';position: absolute;top: 0;left: 0;width:100%;font-size:26px;letter-spacing: 1px;text-align: center;}
	main section h4 span{ margin: 0 auto 50px auto;padding: 0 0; text-align: center;font-size: 22px;letter-spacing: 3px;font-weight: normal;}
	main section h4 span .brank{display:none}
	main section p{ margin: 0 auto 20px auto;padding: 0 0; font-size: 18px;letter-spacing: 2px;line-height: 38px;}
	main section #company{width:350px;  margin: 0 0 50px auto;padding: 0 0; font-size: 18px;letter-spacing: 2px;line-height: 34px;}
	main section #banner a{display: block;width:500px;  margin: 0 auto;padding:30px 0;color: white; font-size: 18px;letter-spacing: 2px;line-height: 34px;text-align: center;text-decoration:none;border: 1px solid white;}
	main section #banner a:hover{background:white;color: black;}
	main section #banner a .fa-angle-double-right{margin-left:10px;}
	
	footer{background:black;color: white;padding:0 0 30px 0;}
	footer small{display:block;text-align: center;font-size: 14px;letter-spacing: 2px;}
}

@media screen and (max-width:700px) {    
	header{margin: 0 auto;padding:0px ;font-size: 0;}
	header #inner{position: relative;height: 100vh;margin: 0 auto;padding:0px ;}
	header #inner h1{position: absolute;bottom:50%;right:52%;width:40%;margin: 0 auto;padding: 0;text-align: center;}
	header #inner h1 img{width:100%;max-width: 150px;}		
	header #inner h2{position: absolute;top:54%;right:52%;width:40%; margin: 0 auto;padding: 0;text-align: center;}	
	header #inner h2 img{width:70%;max-width: 120px;}		
	header #inner #model{position: absolute;top:0%;left:50%;width:50%; height: 100vh;margin: 0;padding: 0;background: url("../img/vanguard_model.jpg") no-repeat;background-position: 0% 100%;background-size:auto 90% }
	
	main{background:black;color: white;}
	main section{width:100%; margin: 0 auto;padding: 30px 0;}
	main section h3 span{position: relative;width:100%; margin: 0 auto 20px auto;padding:30px 0 0 0 ; text-align: center;font-size: 22px;letter-spacing:1px;font-weight: normal;}
	main section h3 span::before{display: block; content:'FRANCK MULLER';position: absolute;top: 0;left: 0;width:100%;font-size:18px;letter-spacing: 0px;text-align: center;}
	main section h4 span{ margin: 0 auto 30px auto;padding: 0 0; text-align: center;font-size: 16px;letter-spacing: 0px;font-weight: normal;}
	main section p{width:80%; margin: 0 auto 20px auto;padding: 0 0; font-size: 14px;letter-spacing: 1px;line-height:20px;}
	main section #company{width:60%;  margin: 0 0 30px auto;padding:0 30px 0 0; font-size: 12px;letter-spacing: 0px;line-height: 18px;}
	main section #banner a{display: block;width:80%;  margin: 0 auto;padding:20px 0;color: white; font-size: 15px;letter-spacing: 0px;text-align: center;text-decoration:none;border: 1px solid white;}
	main section #banner a:hover{background:white;color: black;}
	main section #banner a .fa-angle-double-right{margin-left:3px;}
	
	footer{background:black;color: white;padding:0 0 30px 0;}
	footer small{display:block;text-align: center;font-size: 10px;letter-spacing: 0px;}
}

/*アニメーション*/
.model_animation {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:1.0s; 
    -ms-animation-duration:1.0s; 
    animation-duration:1.0s; 
    -webkit-animation-name:model_animation; 
    animation-name:model_animation; 
    visibility: visible !important;
}
@-webkit-keyframes model_animation{
    0% {opacity: 0;-webkit-transform: translateY(-50px); }
    30% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes model_animation {
    0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 
    30% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.title_animation {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:1.8s; 
    -ms-animation-duration:1.8s; 
    animation-duration:1.8s; 
    -webkit-animation-name:title_animation; 
    animation-name:title_animation; 
    visibility: visible !important;
}
@-webkit-keyframes title_animation{
    0% { opacity: 0; -webkit-transform: translateY(50px); }
    30% { opacity: 0; }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes title_animation{ 
    0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
    30% { opacity: 0; } 
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.logo_animation {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:2.8s; 
    -ms-animation-duration:2.8s; 
    animation-duration:2.8s; 
    -webkit-animation-name:logo_animation; 
    animation-name:logo_animation; 
    visibility: visible !important;
}
@-webkit-keyframes logo_animation{
    0% { opacity: 0; -webkit-transform: translateY(50px); }
    30% { opacity: 0; }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes logo_animation{ 
    0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
    30% { opacity: 0; } 
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.campaign_animation{  display: flex;  overflow: hidden;}
.campaign_animation span{    
    -webkit-transition: all .5s linear .6s;
    -o-transition: all .5s linear .6s;
    transition: all .5s linear .6s;
	-webkit-transform: translate(0, 100%);  
	-moz-transform: translate(0, 100%);  
	-ms-transform: translate(0, 100%);  
	transform: translate(0, 100%);  	
	opacity: 0;	text-align: center;	display: block;	margin: 0 auto;	 
}
.campaign_animation.active span{
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);   
  opacity: 1;
}

.campaign_j_animation{  display: flex;  overflow: hidden;}
.campaign_j_animation span{    
    -webkit-transition: all .5s linear 1.1s;
    -o-transition: all .5s linear 1.1s;
    transition: all .5s linear 1.1s;
	-webkit-transform: translate(0, 100%);  
	-moz-transform: translate(0, 100%);  
	-ms-transform: translate(0, 100%);  
	transform: translate(0, 100%);  	
	opacity: 0;	text-align: center;	display: block;	margin: 0 auto;	 
}
.campaign_j_animation.active span{
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);   
  opacity: 1;
}

.contents_animation{    
    -webkit-transition: all .7s linear 1.6s;
    -o-transition: all .7s linear 1.6s;
    transition: all .7s linear 1.6s;
  -webkit-transform: translateY(00px);
  -moz-transform: translateY(00px);
  -ms-transform: translateY(00px);
  transform: translateY(00px);
  opacity: 0;
}
.contents_animation.active{
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);   
  opacity: 1;	
}