@charset "utf-8";
/* CSS Document */
html,body{
	margin:0px;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	
	overflow-x: hidden;
}

@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}

	.contents-a,.contents-b,.contents-h{
		font-size: 18px;
		letter-spacing: 2px;
		line-height: 36px;
		font-weight: bold;
	}
 

#menu-wrap {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  background: #545454;
  transition: .3s;
}
#menu {
  list-style-type: none;
  width: 980px;
  margin: 0px auto;
  padding: 0;
}
#menu li {
  width: 25%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#menu li a {
  display: block;
  width : 100%;
  padding: 20px 0;
  color: #fff;
  font-size: 0px;
  line-height: 1;
  text-decoration: none;
  transition: .3s;
}
#menu li a:active {  background: #FFF; }

.menu-img{
	height:40px;
}


.contents-img{
	height:70px;
}



.works1{
	float:left;
	position:relative;
	left:-60px;
	width:1040px;
	margin:20px 0px;
}
.works2{
	float:left;
	position:relative;
	left:0px;
	width:1040px;
	margin:20px 0px;
}
.works-img{
	float:left;
	position:relative;
	width:592px;
	height:592px;
}
.works-caption-1{
	width:360px;
	height:580px;
	display:table-cell;
	text-align:center;
	vertical-align: middle;
	margin:10px;
	z-index: 2;
	position: relative;
}

.works-caption-2{
	background:#545454;
	color:#fff;
	padding:5px 13px;
	border-radius: 999px;
	text-shadow: none ;
}
.works-caption{
	float:left;
}




.arts1{
	float:left;
	position:relative;
	left:-60px;
	width:1040px;
	margin:5px 0px;
}
.arts2{
	float:left;
	position:relative;
	left:0px;
	width:1040px;
	margin:5px 0px;
}
.arts-img{
	float:left;
	position:relative;
	border-radius:100%;
	width:592px;
}
.arts-caption-1{
	width:360px;
	height:580px;
	display:table-cell;
	text-align:center;
	vertical-align: middle;
	margin:10px;
}
.arts-caption{
	float:left;
}





.about{
	float:left;
	position:relative;
	width:960px;
	margin:10px 0px;
}
.about-caption-1{
	width:480px;
	height:580px;
	display:table-cell;
	text-align:center;
	vertical-align: middle;
	margin:10px;
}
.about-caption{
	float:left;
}

.about-caption-in{
	background:#545454;
	text-shadow: none;
	color:#fff;
	padding:0px 10px;
	font-size:15px;
	box-shadow:  2px 3px 15px rgba(0,0,0,0.3);
}

.about-caption-in i{
	position: absolute;
	padding:10px;
	left:0px;
}

.footer-caption-1{
	display:table-cell;
	text-align:center;
	vertical-align: middle;
	height:200px;
}
.footer-caption{
	display:table;
	width:100%;
}


.wrap-a{
	width:100%;
	background-color:#FFF;
}
.contents-a{
	position:relative;
	width:980px;
	margin:auto;
	padding:82px 10px;
	background-color: #FFF;
	color:#545454;
}
.contents-a a{
	color:#545454;
	text-shadow: 2px 2px 6px #B7B7B7,
				 10px 10px 20px #D7D7D7;
	text-decoration: none;
}

a .works-img{
	z-index: 0;
	box-shadow: 3px 3px 10px #B7B7B7,
				 10px 10px 40px #B7B7B7;
}

.wrap-b{
	width:100%;
	background-color:rgba(84,84,84,1.00);
}
.contents-b{
	position:relative;
	width:980px;
	margin:auto;
	padding:82px 10px;
	background-color: #545454;
	color:#FFF;
}
.contents-b a{
	color:#FFF;
	text-shadow: 5px 5px 20px #000,
				 5px 5px 10px #000;
	text-decoration: none;
}

a .arts-img{
	z-index: 0;
	box-shadow: 10px 10px 40px #222;
}

#c-1{
	text-align: center;
	height:100vh;
}
.wrap-h{
	position:relative;
	width:100%;
	background-color:#545454;
	display: table;
}
.contents-h{
	display:table-cell;
	height:100vh;
	width:100%;
	text-align: center;
	vertical-align: middle;

}

.contents-f{

	position:relative;
	width:980px;
	margin:auto;
	padding:82px 10px;
	background-color: #545454;
	color:#FFF;
}

.top-img{
	display:inline-block;
	position: relative;
	width:500px;
	height:500px;

}

.top-img1{
	z-index: 1;
	position: absolute;
	width:500px;
	height:500px;
	background: url("img/top-1.png");
	background-position: top;
	background-size: 100% auto; 
	background-repeat: no-repeat;
	
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-name:blind1;
}
@keyframes blind1{
	0%{
		height:0%;
	}
	
	40%{
		height:0%;
	}
	
	100%{
		height:100%;
	}
}


.top-img2{
	z-index: 0.5;
	position: absolute;
	bottom:0px;
	width:500px;
	height:500px;
	background: url("img/top-2.png");
	background-position: bottom;
	background-size: 100% auto; 
	background-repeat: no-repeat;
	
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-name:blind2;
}
@keyframes blind2{
	0%{
		height:0%;
	}
	
	40%{
		height:0%;
	}
	
	100%{
		height:100%;
	}
}



.top-down{
	position: absolute;
	width:10px;
	height:60px;
	border-right: solid 2px #FFFFFF ;
	right:49vw;
	right:calc(50vw - 1px);
	bottom:0px;
	margin:auto;
	
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-name:blind3;
}

@keyframes blind3{
	0%{
		height:0px;
		bottom:90px;
	}
	50%{
		height:90px;
		bottom:0px;
	}
	
	100%{
		height:0px;
		bottom:0px;
	}
}


form{
	margin:50px 0px;
}

.form-t{
	width:80%;
	margin:10px 10%;
}

.form-c{
	width:75%;
	width:calc(80% - 20px);
	margin:10px 10%;
	border-radius: 10px;
	border:#fff solid 1.5px;
	padding:10px;
	-webkit-appearance: none;
}

.form-b{
	margin:10px 40%;
	margin:10px calc(50% - 40px);
	width:80px;
	height:40px;
	border-radius: 70px;
	background:#545454;
	color:#fff;
	border:#fff solid 1.5px;
	-webkit-transition: 0.4s ease;
	transition: 0.4s ease;
}

.form-b:hover{
	background:#fff;
	color:#000;
}

#msg{
	height:120px;
}

.mydesign{
	width:700px;
	margin:100px 0;
}


/*-----------------------------------------works------------------------------------------*/



.workstop{
	z-index: 9;
	position: relative;
	width:90vh;
	max-width:40vw;
	height:90vh;
	max-height:40vw;
	margin:auto;
	background-size: cover;
	background-position: center;
}

.workstop-caption{
	font-size: 22px;

}

.workstop-caption2{
	font-size: 22px;
	border:solid 2px #fff;
	border-radius: 999px;
	width:240px;
	margin:auto;
	text-shadow: none;
	box-shadow: 2px 3px 15px rgba(0,0,0,0.3);
	color:#545454;
	background: #fff;
}

.workstop-caption2:hover{
	font-size: 22px;
	border:solid 2px #fff;
	background:#fff;
}

.contents-works p{
	line-height: 40px;
	padding:10px 40px;
	font-weight: bold;
}

.contents-works a{
	text-shadow: 2px 2px 6px rgba(0,0,0,0.4),
				 10px 10px 20px rgba(0,0,0,0.5);
	text-decoration: none;
}

.works-1{
	background:#f8f8f8;
	color:#351383;
}

.works-2{
	background: url("img/2-bg.jpeg");
	background-size: cover;
	background-position: center;
	color:#fff;
}

.works-3{
	background: url("img/3-bg.jpeg");
	background-size: cover;
	background-position: center;
	color:#fff;
}

.works-5{
	background: url("img/5-bg.jpeg");
	background-size: cover;
	background-position: center;
	color:#fff;
}

.works-6{
	background: url("img/6-bg.jpeg");
	background-size: cover;
	background-position: center;
	color:#000;
}

.works-7{
	background:#920008;
	background: url("img/7-bg.jpeg");
	background-size: cover;
	background-position: center;
	color:#fff;
}

.contents-works{
	display:table-cell;
	height:100vh;
	width:50vw;
	text-align: center;
	vertical-align: middle;

}

.b-back{
	z-index: 99;
	position:fixed;
	bottom:30px;
	left:30px;
	width:100px;
	height:100px;
	text-align: center;
	background:#545454;
	border-radius: 999px;
	line-height: 20px;
	display: table;
	box-shadow:  2px 3px 20px rgba(0,0,0,0.3);
}


.b-back2{
	position: relative;
	font-size: 35px;
	display: table-cell;
	vertical-align: middle;
	padding:0px;
	color:#FFF;
}

   .swiper-container {
        width: 46vw;
        height: 100vh;

      }
      
.swiper-c {
	text-align: center;
	color: #fff;
	width:45vw;
	height:100vh;
	padding:0 0.5vw;
	
	display:table-cell;
	text-align: center;
	vertical-align: middle;
}

.swiper-button-next,.swiper-button-prev{
	background-size:24px !important;
}



















@media screen and (max-width: 1230px){
	html,body{
		overflow-x: hidden;
	}
}


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

	.contents-a,.contents-b,.contents-h{
		width:100%;
		font-size: 2.8vw;
		line-height: 6vw;
		letter-spacing: 0.2vw;
	}

	
#menu {
  width: 100%;
}
	
#menu li a {
  padding: 15px 0;
}
	
.menu-img{
	height:5vw;
}
	
.contents-img{
	height:10vw;
}
	
.works1{
	left:-5%;
	width:110%;
}
.works2{
	left:0;
	width:110%;
}
.works-img{
	width:60vw;
	height:60vw;
}
.works-caption-1{
	width:37vw;
	height:60vw;
	padding:1vw;
}
	
.arts1{
	left:-5%;
	width:111%;
}
.arts2{
	left:0;
	width:111%;
}
.arts-img{
	width:60vw;
}
.arts-caption-1{
	width:36vw;
	height:60vw;
	padding:2vw;
}
	
	
.about{
	width:100%;
}
.about-caption-1{
	width:46vw;
	height:70vw;
	margin:2vw;
}
	
.about-caption-in{
	background:#646464;
	text-shadow: none;
	color:#fff;
	padding:0.5vw 2vw 0.5vw 4.5vw;
	font-size:2.4vw;
	box-shadow:  2px 3px 15px rgba(0,0,0,0.3);
	line-height: 4.2vw;
}

.about-caption-in i{
	position: absolute;
	padding:10px;
	left:0px;
}	
	
	
.footer-caption-1{
	text-align:center;
	display:table-cell;
	height:20vw;
}
	

	
	
.contents-a{
	width:98%;
	padding:60px 1%;
}
.contents-b{
	width:98%;
	padding:60px 1%;
}
	
#c-1{
	height:85vh;
	}
.contents-h{
	width:98%;
	height:85vh;
	padding: 1% 0px;
	
}

.contents-f{
	width:98%;
	padding: 60px 1%;
	
}
	
.top-img{
	width:80vw;
	height:80vw;
}
	
	.top-img1{
		width:100%;
	}
	
	.top-img2{
		width:100%;
	}
	
	
form{
	margin:0px 0px;
}
	
.mydesign{
	width:90vw;
	margin:12.2vh 0;
}
	

/*-----------------------------------------works------------------------------------------*/



.workstop{
	width:90vw;
	max-width:none;
	height:90vw;
	max-height:none;
	margin:auto;
	background-size: cover;
	background-position: center;
}



.contents-works p{
	font-size:3vw;
	line-height: 6vw;
	padding:1vw 4vw;
	font-weight: bold;
}
	
.workstop-caption{
	font-size:4vw!important;
	line-height: 7vw!important;
}
	
.workstop-caption2{
	font-size: 4vw!important;
	width:45vw;
	margin:auto;
	text-shadow: none;
	box-shadow: 2px 3px 15px rgba(0,0,0,0.3);
	color:#545454;
	background: #fff;
}

.works-7{
	color:#fff;
}

.contents-works{
	float: left;
	display:table-cell;
	height:auto;
	width:100%;
	padding:10px 0;

}
	
.b-back{
	bottom:25px;
	left:10px;
	width:15vw;
	height:15vw;
}


.b-back2{
	font-size: 7vw;
}
	
	
   .swiper-container {
        width: 95vw;
        height: 115vw;

      }
      
.swiper-c {
	text-align: center;
	color: #fff;
	width:83vw;
	height:100vw;
	padding:0 6vw;
	
	display:table-cell;
	vertical-align: middle;
}
	
.swiper-button-next,.swiper-button-prev{
	background-size:4vw !important;
	
	
}