@charset "UTF-8";

/* 全体 */
#main{
	margin-bottom: -12px;}
/* FIRST VIEW */	
#first-view {
	background-attachment: fixed;
	background-position: center;
	background-repeat: repeat;
	background: linear-gradient(45deg, rgba(0,0,0,1.00), rgba(240,240,240,1.00), rgba(121,155,142,1.00));
	background-size: 500% 500%;
	animation: AnimationName 10s ease infinite;}	
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
    }
/* LOGO */			
#start {
	margin: 0;
	padding: 0;
	text-align: center; 
	width: 100vw;
	height: 100vh;
	background: rgba(250,250,250,1.00);
	position: fixed;
	display: flex;
	align-items: center;
	z-index: 99;}
#start img {
	max-height: 55%;
	max-width: 55%;
	display: none;
	position: fixed;
	bottom: 70px;
	left: 20px;}
#vis {
	margin: 0;
	padding: 0;
	text-align: center;                          
	width: 100vw;
	height: 100vh;
	background:url(../images/index/background_pattern01.png) repeat;
	background-attachment: fixed;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	position:relative;
	z-index: 1;}	
#logo img {
	max-height: 55%;
	max-width: 55%;
	position: fixed;
	bottom: 70px;
	left: 20px;}
/* << SP >> */
@media screen and (max-width: 500px) {
#start img {
	max-height: 75%;
	max-width: 75%;
	left: 10px;}
#vis {
	background-attachment: scroll;}	
#logo img {
	max-height: 75%;
	max-width: 75%;
	left: 10px;}		
}	
			
/* SCROLL */
#scroll {
	position: fixed;
	bottom: 32px;
	right: 20px;
	z-index: 5;
	animation: translate 2s;
	animation-iteration-count: infinite;
	-webkit-animation: translate 2s; /* Safari & Chrome */
	-webkit-animation-iteration-count: infinite;
}
@keyframes translate { 
  0%   { transform:  translate(0px, 0px);    } 
  25%   { transform:  translate(0px, 38px);   }
  75%   { transform:  translate(0px, 38px);   }
  100%  { transform:  translate(0px, 0px);   } 
  }

/* works */	
#item-works{
	margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -65px;
    color: rgba(255,255,255,1.00);
    font-family: basic;
    font-size: 100px;
    letter-spacing: 2px;
	z-index: 0;
	}
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/

#works-all {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
	width: 100vw;
    max-width: 1260px;
    margin: 0 auto;   
	padding-left: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    text-align: center;
	}
/* カードレイアウト内の画像を幅いっぱいに表示 */
#works-all img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;  }	
/*blocksit.jsの設定*/
#pickup {
	position: relative;
	width: 1260px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: -10px;}
#pickup img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;  }
#container {
	position: relative;
	width: 1260px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 120px;}
#container img {
    width: 100%;
    display: block; }	
.works {
   float: left;
   -webkit-transition: top 1s ease, left 1s ease;
   -moz-transition: top 1s ease, left 1s ease;
   -o-transition: top 1s ease, left 1s ease;
   -ms-transition: top 1s ease, left 1s ease;}
#pickup .caption-b, #container .caption-b {
    width: 90%;
    color: rgba(255,255,255,1.0);
    font-size: 13px;
    letter-spacing: 2px;
    text-align: left;
    margin-top: -10px;
    margin-left: 15px;}
#pickup .mask-b, #container .mask-b {
	width: 100%;
	height:	100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;	/* マスクを表示しない */
	background: linear-gradient(to top, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.5) 100%);
	-webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;}
#pickup .mask-b:hover, #container .mask-b:hover {
	opacity: 1;	/* マスクを表示する */
	padding-top: 20px;	/* ホバーで右にずらす */}
#pickup .caption-w, #container .caption-w {
    width: 90%;
    color: rgba(0,0,0,1.0);
    font-size: 13px;
    letter-spacing: 2px;
    text-align: left;
    margin-top: -10px;
    margin-left: 15px;}
#pickup .mask-w, #container .mask-w {
	width: 100%;
	height:	100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;	/* マスクを表示しない */
	background: linear-gradient(to top, rgba(245,245,245,0.0) 0%, rgba(245,245,245,0.1) 50%, rgba(255,255,255,0.8) 100%);
	-webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;}
#pickup .mask-w:hover, #container .mask-w:hover {
	opacity: 1;	/* マスクを表示する */
	padding-top: 20px;	/* ホバーで右にずらす */}	

@media screen and (max-width: 1260px) {	
#works-all {
    padding-left: 5px;}	
}
  
/*ABOUT*/ 
#item-about{
	margin-top: 30px;
	margin-left: 10px;
	margin-bottom: -75px;
	color: rgba(255,255,255,1.00);
	font-family: basic;
	font-size: 100px;
	letter-spacing: 2px;
    z-index: 0;}
#about {
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 80px;
	overflow: hidden;
	color: rgba(0,0,0,1.00);}
#company {
	width: 100%;
	height: auto;
	max-width: 900px;
	margin: 0px auto 0px;
	position: relative;
	overflow: hidden;
	background: url(../images/about/background_pattern.jpg) repeat;
	background-size: contain;
	text-align: center;
	font-family: "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	z-index: 2;
	padding-bottom: 50px;}	 
.company-details {
	width: 85%;
	height: auto;
	max-width: 900px;
	margin: 0px auto 0px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 30px;
	background-color: rgba(255,255,255,1.00);}		
.company-jp {
    margin-top: 60px;
    margin-bottom: 0px;
    padding-top: 40px;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 23px;
    text-align: left;}
.company-concept {
    margin-top: -20px;
    margin-bottom: 30px;
    padding-top: 40px;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 23px;
    text-align: left;}
.info {
	margin-top: 20px;
	margin-bottom: 30px;
	font-size: 13px;
	font-weight: lighter;
	letter-spacing: 2px;
	line-height: 25px;
	text-align: left;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}		
.category {
	margin-top: 20px;
	margin-bottom: 30px;
	font-size: 13px;
	font-weight: lighter;
	letter-spacing: 2px;
	line-height: 30px;
	text-align: left;}
.company-full-logo {
	margin-top: -50px;
	text-align: right;
	margin-right: 10px;}		
.company-full-logo img {
	width: 18%;
	height: auto;}	
				
 /* << TB >> */
@media screen and (max-width: 768px) {	
#company {
	width: 100%;}
.company-full-logo {
	margin-top: 20px;}
.company-full-logo img {
	width: 30%;}	
}
/* << SP >> */
@media screen and (max-width: 500px) {
#item-works{
    margin-bottom: -45px;}
#item-about{
	margin-bottom: -35px;}
.company-jp, .info, .category {
	font-size: 12px;}	
.company-full-logo img {
	width: 35%;}
}


/* CSS Document */