/* ArtLab-Tokyo Custom CSS */


/* サイト全体の中央寄せ,フォント指定 */
body {
	margin: auto;
	margin-top: 50px;
	font-size: ;
	line-height: 25px;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #242424;
}

main{
	background-color: #fff;
}

.fixed-background {
	height: 20vh;
	min-height: 450px;
	background-size: cover;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center center;
}

@media screen and (min-width:768px) {
	.fixed-background {
		height: 80vh;
		background-attachment: fixed;
	}
}


a {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

a img {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.thumbnail {
	border: none;
}

.global-navigation .navbar {
	background-color: #242424;
	border: none;
}

.global-navigation .navbar .navbar-toggle:hover,
.global-navigation .navbar .navbar-toggle:active,
.global-navigation .navbar .navbar-toggle:focus {
	background-color: none;
}

.global-navigation .navbar .navbar-brand {
	color: #fff;
	width: 190px;
	font-size:16px;
	letter-spacing: 6px;
	margin-top: 2px;
	
	
	
}

.global-navigation .navbar .navbar-brand:hover {
	color: #708090;
}

.global-navigation .navbar li a {
	text-align: center;
	color: #ccc;
	font-size: 12px;
	letter-spacing: 1px;
}

.global-navigation .navbar li a:hover {
	color: #708090;
}

.introduction {
	background-image: url(../../img/background-img-01.jpg);
	color: #fff;
}

.introduction .container {
	padding-top: 15vh;
}

.features h2 {
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;
}


/* メイン画像 */
.jumbotron {
  padding: 20px;
  margin-bottom: 0px;
  color: inherit;
	height: 17vh;
 background-image: url(../../img/background-img-01.jpg);
}
.jumbotron h1,
.jumbotron .h1 {
 font-size: 18px;
	  font-weight: 600;
	color: #fff;
	text-align: left;
	letter-spacing: 2px;
	
}



.jumbotron > hr {
  border-top-color: #cfd9db;
}
.container .jumbotron, .container-fluid .jumbotron {
  border-radius: 4px;
}
.jumbotron .container {
  max-width: 100%;

}
@media screen and (min-width: 768px) {
  .jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .container .jumbotron, .container-fluid .jumbotron {
    padding-left: 60px;
    padding-right: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 18px;
	  font-weight: 600;
	  line-height: 20px;
	  color: #fff;
	  letter-spacing: 2px;
  }
	
	 }
	
/* テキスト */	

.row h2,
.row .h2 {
 font-size: 17px;
	  font-weight: 600;
	color: #696969;
	letter-spacing: 2px;
	
}	




.row h1,
.row .h1 {
 font-size: 30px;
	  font-weight: 600;
	color: #fff;
	
}	

.row h3,
.row .h3 {
 font-size: 15px;
	  font-weight: 600;
	color: #fff;
	line-height: 25px;
	
}	



	

.container h4 {
 font-size: 20px;
	  font-weight: 300;
	color: #333333;
	margin: 30px;
	text-align: center;
	letter-spacing: 1px;
	
	
}	
	
	
	
	.container h5 {
 font-size: 18px;
	  font-weight: 300;
	color: #333333;
		line-height: 28px;
		text-align: center;
		margin-bottom: 20px;
	
}	


.container h6 {
 font-size: 16px;
	  font-weight: 300;
	 line-height: 30px;
	color: #333333;
	text-align: center;
	
}	
	
	.container-fluid h3 {
 font-size: 22px;
	  font-weight: 300;
	color: #ffffff;
		text-align: center;
	letter-spacing: 2px;
		padding-top: 35px;
	
}	
	

	
@media screen and (min-width: 768px) {	
.row h2,
.row .h2 {
 font-size: 22px;
	  font-weight: 300;
	color: #696969;
	letter-spacing: 2px;
	
}		
.row h1,
  .row .h1 {
    font-size: 40px;
	  font-weight: 600;
	  line-height: 80px;
	  color: #fff;
	  letter-spacing: 2px;
  }	
	
	.row h3,
.row .h3 {
 font-size: 15px;
	  font-weight: 300;
	color: #fff;
	line-height: 25px;
	
}	
	
	
	
	.container-fluid h3 {
 font-size: 30px;
	  font-weight: 300;
	color: #ffffff;
	padding-top: 35px;
	margin-bottom: 10px;
	text-align: center;
	letter-spacing: 2px;
}
	
	

.container h4 {
 font-size: 26px;
	  font-weight: 300;
	color: #333333;
	padding-top: 10px;
	margin-bottom: 30px;
	text-align: center;
	letter-spacing: 1px;
}
	
	
	.container h5 {
 font-size: 18px;
	  font-weight: 300;
	color: #333333;
	padding-top: 20px;
	margin-bottom: 20px;
	text-align: center;
		letter-spacing: 1px;
		line-height: 28px;
}
	
	.container h6 {
 font-size: 16px;
	  font-weight: 300;
	color: #333333;
	padding-top: 10px;
	margin-bottom: 10px;
	text-align: left;
		letter-spacing: 1px;
		line-height: 30px;
		text-align: center;
}
	
	
}	
	

	
.features .row {
	margin-bottom: 30px;
}

.features .thumbnail a img:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.features h3 {
	text-align: center;
}

.works {
	background-image: url(../../img/background-img-02.jpg);
	color: #fff;
	position: relative;
}

.works .container-fluid {
	max-width: 1170px;
}

.works .swiper-container {
	position: absolute;
	width: 100vw;
	top: calc((100% - 123px) / 2 + 123px);
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding-bottom: 40px;
}

@media screen and (min-width:768px) {
	.works .swiper-container {
		max-width: 750px;
	}
}

@media screen and (min-width:992px) {
	.works .swiper-container {
		max-width: 970px;
	}
}

@media screen and (min-width:1200px) {
	.works .swiper-container {
		max-width: 1140px;
	}
}

.works h2 {
	text-align: center;
	margin-top: 60px;
}

.works img {
	display: block;
	margin: auto;
}

.works .swiper-slide:not(.swiper-slide-active) a img {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}

.works .swiper-button-prev,
.works .swiper-button-next {
	display: none;
}

@media screen and (min-width:768px) {

	.works .swiper-button-prev,
	.works .swiper-button-next {
		display: block;
	}
}
	
	.works.fixed-background {
	height: 70vh;
	min-height: 450px;
	background-size: cover;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center;
}

@media screen and (min-width:768px) {
.works.fixed-background {
		height: 80vh;
		background-attachment: fixed;
	}
}

.scrolling-background {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 0px;
}


.staff h2 {
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;
}

.staff .row {
	margin-bottom: 60px;
}

.staff .thumbnail a img:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.staff .staff-name {
	font-size: 16px;
	font-weight: bold;
}

.staff .staff-name1 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 2px;
	margin-bottom: 30px;
}

.about {
	background-image: url(../../img/background-img-03.jpg);
	color: #000;
}

.about h2 {
	text-align: center;
	margin-top: 60px;
	margin-bottom: 30px;
}

.about .row {
	margin-bottom: 60px;
}

.custom-btn {
	background-color: #708090;
	color: #fff;
	border: none;
	border-radius: 0px;
	padding: 10px 30px;
}

.custom-btn:hover {
	color: #fff;
	background-color: #242424;
}

.custom-btn:hover,
.custom-btn:focus,
.custom-btn:active,
.custom-btn:active:focus,
.custom-btn:active:hover,
.custom-btn:active.focus,
.custom-btn.active,
.custom-btn.active:focus,
.custom-btn.active:hover,
.custom-btn.active.focus,
.open > .dropdown-toggle.custom-btn,
.open > .dropdown-toggle.custom-btn:hover,
.open > .dropdown-toggle.custom-btn:focus,
.open > .dropdown-toggle.custom-btn.focus,
.custom-btn.disabled:hover,
.custom-btn[disabled]:hover,
fieldset[disabled] .custom-btn:hover,
.custom-btn.disabled:focus,
.custom-btn[disabled]:focus,
fieldset[disabled] .custom-btn:focus,
.custom-btn.disabled.focus,
.custom-btn[disabled].focus,
fieldset[disabled] .custom-btn.focus {
	color: #fff;
	background-color: #242424;
}

.contact {
	background-color: #ccc;
	color: #000;
}

.brand-info {
	margin: 30px 0;
}

.contact .brand-name {
	font-size: 18px;
	font-weight: 700;
	margin-top: 10px;
	width: 180px;
	
}

.btn-wrapper {
	padding: 0;
}

@media screen and (min-width:768px) {
	.btn-wrapper {
		padding-right: 15px;
		padding-left: 15px;
	}
}

.contact .custom-btn {
	padding: 20px 0;
	font-size: 20px;
}

@media screen and (min-width:768px) {
	.contact .custom-btn {
		margin-top: 39px;
	}
}

footer {
	background-color: #242424;
	color: #fff;
}

footer .container {
	padding-top: 10px;
	padding-bottom: 10px;
}

footer .nav li a {
	color: #fff;
	font-size: 10px;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

footer .nav li a:hover {
	color: #708090;
	background-color: #242424;
}

footer .copyright p {
	font-size: 11px;
	color: #ffffff;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 0;
	letter-spacing: 2px;
}