@charset "UTF-8";


body {
	margin: 0;
	padding: 0;
}

#main{
	border-top:40px solid #000;
	background:#fff;
	position:relative;
}

#logosvg{
	position:absolute;
	top:600px;
	left:0px;
	z-index:2;
}


div#contents{
	position:relative;
	z-index:1;
}


header#header{
	height:auto;
	position:relative;
}

div#top{
	position:relative;
}

img#phone{
	display:none;
}


#video{
	top:inherit;
	left:inherit;
	width:100%;
	height:auto;
	z-index:-1;
	position:fixed;
}



/*トップロゴ*/
h1{
	position:relative;
}

h1 #logo{
	max-width:100%;
	height:auto;
	position:absolute;
	top:auto;
	left:auto;
}


/*トップ矢印*/

.topArrow{
	width:100%;
	height:40px;
	background:#000;
	text-align:center;
	position:absolute;
	margin:0 auto;
}

.topArrow a{
	display:inline-block;
	width:50px;
	height:70px;
	position:absolute;
	top:-70px;
	left:50%;
	text-decoration: none;
	font-family:'Quattrocento', serif;
	color:#fff;
	font-size:1.3rem;
}

.topArrow a span {
	position: absolute;
	top:0px;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-top:25px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-sizing: border-box;
	z-index:2;
}



/*WORKエリアの設定*/


section.work{
	padding:150px 0 200px;
}

section.work h2{
	padding-bottom:40px;
}

div.workTja{
	letter-spacing:1.5px;
}

div.workTja p{
	margin-bottom:20px;
}

br.phone{
	display:none;
}



/*PHOTOエリアの設定*/

/*PHOTOの写真*/

div.photoArea{
	width:525px;
	height:433px;
	margin:0 auto;
	position:relative;
	margin-bottom:50px;
}


div.photoArea a:first-of-type{
	position:absolute;
	top:0;
	left:0;
}

div.photoArea a:nth-of-type(2){
	position:absolute;
	top:0;
	left:181px;
}

div.photoArea a:nth-of-type(3){
	position:absolute;
	top:0;
	left:421px;
}

div.photoArea a:nth-of-type(4){
	position:absolute;
	top:160px;
	left:181px;
}

div.photoArea a:nth-of-type(5){
	position:absolute;
	top:160px;
	left:343px;
}

div.photoArea a:nth-of-type(6){
	position:absolute;
	top:269px;
	left:0px;
}

div.photoArea a:nth-of-type(7){
	position:absolute;
	top:269px;
	left:228px;
}

/*MOVIEエリアの設定*/

section.movie h3{
	margin-top:30px;
}

div.movieArea{
	width:525px;
	height:439px;
	margin:0 auto;
	position:relative;
	margin-bottom:50px;
}

div.movieArea a#movie1 img{
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
}

div.movieArea a#movie2 img{
	display:inline-block;
	position:absolute;
	top:239px;
	left:169px;
}


div.movieArea a.movieBtn1{
	position:absolute;
	top:97px;
	left:182.5px;
	width:40px;
	height:40px;
	border-radius:20px;
	background:rgba(255,255,255,0.3);
	line-height:48px;
}

div.movieArea a.movieBtn2{
	position:absolute;
	top:319px;
	left:328px;
	width:40px;
	height:40px;
	border-radius:20px;
	background:rgba(255,255,255,0.3);
	line-height:48px;
}



div.movieArea a span{
	display:inline-block;
	width:14px;
	height:16px;
	padding-left:3px;
	background:url(../img/movieBtn.png) no-repeat center right;
}


/*PAPERエリアの設定*/

section.design{
	margin-top:100px;
}

div.designArea{
	width:525px;
	height:448px;
	margin:0 auto;
	position:relative;
	margin-bottom:50px;
}

div.designArea a:first-of-type{
	position:absolute;
	top:0;
	left:0;
}

div.designArea a:nth-of-type(2){
	position:absolute;
	top:0;
	left:351px;
}

div.designArea a:nth-of-type(3){
	position:absolute;
	top:249px;
	left:0
}





/*コンタクトエリアの設定*/

section#contact{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	padding:200px 0 270px;
	text-align:center;
}

div.contactArea{
	width:525px;
	height:auto;
	margin:0 auto;
	padding-top:80px;
}

p.face{
	float:left;
	padding-left:45px;
}

div.info{
	text-align:left;
	float:right;
	padding:20px 45px 0 0;
	font-size:1.2rem;
}

div.info ul li:first-of-type{
	padding-bottom:10px;
	font-family: 'Open Sans', sans-serif;
}

div.info ul li:nth-of-type(2){
	padding-bottom:3px;
	letter-spacing:0.1em;
}

div.info ul li:nth-of-type(3){
	font-size:1.4rem;
	padding-bottom:10px;
	letter-spacing:0.22em;
}

div.info ul li:nth-of-type(4){
	padding-bottom:2px;
	letter-spacing:0.1em;
}

div.info ul li:nth-of-type(5){
	padding-bottom:10px;
	letter-spacing:0.1em;
}

div.info ul li:nth-of-type(6){
	padding-bottom:5px;
	letter-spacing:0.1em;
	font-family: 'Open Sans', sans-serif;
}

div.info ul li:nth-of-type(7){
	padding-bottom:20px;
	letter-spacing:0.1em;
}

div.info li.mail a{
	color:#000;
}

.list{
	overflow: hidden;
}

.list h2,
.list h3,
.list a,
.list p,
.list div{
	transition:1.2s;
}


.list-mv07{
	opacity: 0;
	-webkit-transform: translate(0,80px); 
	transform: translate(0,80px); 
}
.mv07{
	opacity: 1.0;
	-webkit-transform: translate(0,0);
	transform: translate(0,0); 
}



/*背景の設定*/

.contents {
  position: relative;
  overflow: hidden;
  margin: 10% 0;
  padding:100px 0;
}

.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #e8e8e8;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
  /*z-index:-1;*/
}

.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  padding: 100px 10px 120px;
  color: #000;
  text-align: center;
  position:relative;
  z-index:1;
}


/*==============fadeinの設定======================*/


/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
	
	
	.fadeinB {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
	
	section.work div.fadein,
	section#photo p.fadein,
	div.photoArea a.fadein:first-of-type,
	section.movie p.fadein,
	section.design p.fadein,
	div.contactArea p.fadein,
	div.movieArea a:nth-of-type(2),
	div.movieArea a:nth-of-type(4),
	div.info ul li.fadein:first-of-type{
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
    }
	
	
	div.movieArea a#movie1 img.fadein,
	div.designArea a.fadein:first-of-type,
	div.photoArea a.fadein:nth-of-type(2){
		-moz-transition-delay:250ms;
    -webkit-transition-delay:250ms;
    -o-transition-delay:250ms;
    -ms-transition-delay:250ms;
	}
	
	
	div.movieArea a#movie2 img.fadein,
	div.designArea a.fadein:nth-of-type(2),
	div.photoArea a.fadein:nth-of-type(3){
		-moz-transition-delay:300ms;
    -webkit-transition-delay:300ms;
    -o-transition-delay:300ms;
    -ms-transition-delay:300ms;
	}
	
	div.photoArea a.fadein:nth-of-type(4),
	div.designArea a.fadein:nth-of-type(3){
		-moz-transition-delay:350ms;
    -webkit-transition-delay:350ms;
    -o-transition-delay:350ms;
    -ms-transition-delay:350ms;
	}
	
	
	div.photoArea a.fadein:nth-of-type(5),
	div.info ul li.fadein:nth-of-type(2),
	div.info ul li.fadein:nth-of-type(3){
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
    }
	
	
	
	div.photoArea a.fadein:nth-of-type(6),
	div.info ul li.fadein:nth-of-type(4),
	div.info ul li.fadein:nth-of-type(5){
    -moz-transition-delay:450ms;
    -webkit-transition-delay:450ms;
    -o-transition-delay:450ms;
    -ms-transition-delay:450ms;
    }
	
	
	
	div.photoArea a.fadein:nth-of-type(7),
	div.info ul li.fadein:nth-of-type(6){
    -moz-transition-delay:500ms;
    -webkit-transition-delay:500ms;
    -o-transition-delay:500ms;
    -ms-transition-delay:500ms;
    }
	
	
	div.info ul li.fadein:nth-of-type(7){
    -moz-transition-delay:550ms;
    -webkit-transition-delay:550ms;
    -o-transition-delay:550ms;
    -ms-transition-delay:550ms;
    }
	
	div.info p.fadein{
    -moz-transition-delay:600ms;
    -webkit-transition-delay:600ms;
    -o-transition-delay:600ms;
    -ms-transition-delay:600ms;
    }

/*====================================*/

@media screen and (max-width:959px) {
	
	#logosvg{
	display:none;
}
	
}



@media screen and (max-width:599px){
	
	#logosvg{
	display:none;
}
	
	#main{
	border-top:20px solid #000;
	}
	
	
	#video{
		display:none;
	}
	
	#video source{
		display:none;
	}
	
	img#phone{
		display:inline-block;
		width:100%;
		height:auto;
		z-index:-1;
		position:fixed;
	}
	
	/*トップロゴ*/
	
	h1 #logo{
		max-width:30%;
		height:auto;
	}
	
	/*トップ矢印*/
	
.topArrow a{
	top:-50px;
	left:50%;
}

.topArrow a span {
	margin-top:10px;
	margin-left: -12px;
}

/*WORKエリアの設定*/

section.work{
	padding:120px 0 160px;
}

section.work h2{
	padding-bottom:50px;
}

div.workTja{
	padding:0 10px 0;
	letter-spacing:1.5px;
}

div.workTja p{
	margin-bottom:20px;
}

br.phone{
	display:inline-block;
}



/*photoエリアの設定*/

div.photoArea{
	width:262.5px;
	height:216.5px;
}

div.photoArea a img{
	width:100%;
	height:100%;
}

div.photoArea a:first-of-type{
	width:88px;
	height:132px;
	position:absolute;
	top:0;
	left:0;
}


div.photoArea a:nth-of-type(2){
	width:117.5px;
	height:77.5px;
	position:absolute;
	top:0;
	left:90.5px;
}

div.photoArea a:nth-of-type(3){
	width:52px;
	height:77.5px;
	position:absolute;
	top:0;
	left:210.5px;
}

div.photoArea a:nth-of-type(4){
	width:78.5px;
	height:52px;
	position:absolute;
	top:80px;
	left:90.5px;
}

div.photoArea a:nth-of-type(5){
	width:91px;
	height:136.5px;
	position:absolute;
	top:80px;
	left:171.5px;
}

div.photoArea a:nth-of-type(6){
	width:111.5px;
	height:82px;
	position:absolute;
	top:134.5px;
	left:0px;
}

div.photoArea a:nth-of-type(7){
	width:55px;
	height:82px;
	position:absolute;
	top:134.5px;
	left:114px;
}



/*MOVIEエリアの設定*/

section.movie{
	text-align:center;
}

div.contents_inner{
	text-align:center;
}

section.movie h3{
	margin-top:0px;
}

div.movieArea{
	width:262.5px;
	height:219.5px;
	margin:0 auto;
	position:relative;
	margin-bottom:50px;
}

div.movieArea a#movie1 img{
	width:208.5px;
	height:117px;
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
}

div.movieArea a#movie2 img{
	width:178.5px;
	height:100px;
	display:inline-block;
	position:absolute;
	top:119.5px;
	left:84px;
}


div.movieArea a.movieBtn1{
	top:38.5px;
	left:84px;
}

div.movieArea a.movieBtn2{
	top:149.5px;
	left:153.25px;
}

/*背景の設定*/

.contents {
  position: relative;
  overflow: hidden;
  margin: 10% 0 0;
  padding:100px 0 100px;
}

.contents_inner {
  padding: 30px 0px 120px;
}


/*PAPERエリアの設定*/

section.design{
	margin-top:-20px;
}

div.designArea a img{
	width:100%;
	height:100%;
}

div.designArea{
	width:262.5px;
	height:224px;
	margin:0 auto;
	position:relative;
	margin-bottom:50px;
}

div.designArea a:first-of-type{
	display:block;
	width:173px;
	height:122px;
	position:absolute;
	top:0;
	left:0;
}

div.designArea a:nth-of-type(2){
	display:block;
	width:88px;
	height:122px;
	position:absolute;
	top:0;
	left:175.5px;
}

div.designArea a:nth-of-type(3){
	display:block;
	width:263px;
	height:99.5px;
	position:absolute;
	top:124.5px;
	left:0
}


/*コンタクトエリアの設定*/

section#contact{
	padding:180px 0 100px;
}

div.contactArea{
	width:340px;
	height:auto;
	margin:0 auto;
	padding-top:50px;
}

p.face img{
	width:100%;
	height:100%;
}

p.face{
	width:125.3px;
	height:209.3px;
	float:left;
	padding-left:30px;
}

div.info{
	text-align:left;
	float:right;
	padding:10px 0 50px;
	font-size:1rem;
}

div.info ul li img{
	width:100%;
	height:100%;
}

div.info ul li:first-of-type{
	width:72px;
	height:39.5px;
	padding-bottom:10px;
}


div.info ul li:nth-of-type(3){
	font-size:1.1rem;
}

div.info ul li:nth-of-type(6){
	padding-bottom:10px;
}


div.info ul li:nth-of-type(7){
	padding-bottom:10px;
	letter-spacing:0.1em;
}

/*============fadeinの設定========================*/


/* 画面外にいる状態 */
.fadein {
    opacity : 1;
    transform:none;
    transition:none;
    }
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform :none;
    }
	
/*====================================*/


}

@media screen and (max-width:320px){

div.contactArea{
	width:320px;
	height:auto;
	margin:0 auto;
	padding-top:50px;
}

p.face img{
	width:85%;
	height:85%;
}

p.face{
	width:125.3px;
	height:209.3px;
	float:left;
	padding:0 15px 0 5px;
}

div.info{
	text-align:left;
	float:left;
	padding:10px 0 50px;
	font-size:1rem;
}


	
}