@charset "UTF-8";
/* CSS Document */
  body{
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
    animation: fadeIn 3s ease 0s 1 normal;
	  margin: 0;
   padding: 0;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

html { scroll-behavior: smooth;}
header{
	font-size:14px;
	height: 10px;
	font-family: 'Lato', sans-serif;

}
a {
  text-decoration: none;
  color: #000000;
  transition : all 0.5s ease 0s;
	
}
a:hover {
  color: #c0c0c0;
}

a:active {
  color: #000000;
}

.head-container{
	width: 100%;
	height: 50px;
	top: 00px;
	padding:5px 00px 00px 00px;
	position: fixed;
	z-index: 3;
	background-color: white;
	
		
}
.header-left{
 float:left;
}
.header-right{
    float:right;
}

.header-logo{
  float:left;
	padding:6px 15px 00px 30px;
	}
.header-title{
  float:left;
	}

li{
  list-style: none;
  float:left;
  padding:14px 30px 00px 00px;
}
nav {
  display: block;
  position: fixed;
  background-color: #ffffff;
  width: 220px;
  top: 0;
  left: -300px;
  bottom: 0;
  transition: all 0.5s;
  z-index: 3;
  opacity: 0;
}
nav {
  display: block;
  position: fixed;
  background-color: #ffffff;
  width: 220px;
  top: 0;
  left: -300px;
  bottom: 0;
  transition: all 0.5s;
  z-index: 3;
  opacity: 0;
}

.open nav {
  left: 0;
  opacity: 1;
}

nav .inner {
  padding: 25px;
}

nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav .inner ul li {
  margin: 0;
  border-bottom: 1px solid #333;
}

nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1rem;
  text-decoration: none;
  transition-duration: 0.2s;
}

nav .inner ul li a:hover {
  background: #e4e4e4;
}

.toggle-btn {
  display: none;
  position: fixed;
  top: 15px;
  right: 30px;
  width: 30px;
  height: 30px;
  z-index: 3;
  cursor: pointer;
}

.toggle-btn span {
  position: absolute;
  display: block;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  transition: all 0.5s;
  border-radius: 4px;
}

.toggle-btn span:nth-child(1) {
  top: 4px;
}
.toggle-btn span:nth-child(2) {
  top: 14px;
}
.toggle-btn span:nth-child(3) {
  bottom: 4px;
}

.open .toggle-btn span {
  background-color: #fff;
}

.open .toggle-btn span:nth-child(1) {
  transform: translateY(10px) rotate(-315deg);
}

.open .toggle-btn span:nth-child(2) {
  opacity: 0;
}

.open .toggle-btn span:nth-child(3) {
  transform: translateY(-10px) rotate(315deg);
}

#mask {
  display: none;
  transition: all 0.5s;
}

.open #mask {
  display: block;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0.8;
  z-index: 2;
  cursor: pointer;
}
.top-container{
margin:30px 00px 30px 00px;
padding:00px;
}

.site-wrapper{
	width:1120px;
	height: 100%;
	margin: auto;
	
}
.works-container{
	width: 100%;
	height:580px;}

.works-page{
	height: 2000px;
margin: 60px 00px 00px 00px}
	
	
.worksimg-container{
    float:left;
	width:280px;
	height:280px;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
.more-container{
	width:100%;
	height:40px;
	margin: 00px 10px;
	font-size: 10pt;
}
.more-item{
	margin:00px 20px 00px 00px;
	float:right;
}

h3{ font-size:20px;
	font-family: 'Lato', sans-serif;
	margin:10px 00px 00px 00px;
	width:100%;
	height:90px;
	padding: 80px 00px 00px 00px;
	text-align:center;
		}

.studiotitle{width: 100%;
           height: 150px;
	padding: 70px 00px 00px 00px;
}

h2{ font-size:25px;
	font-family: 'Lato', sans-serif;
	margin:10px 00px 00px 00px;
	width:100%;
	height:90px;
	padding: 80px 00px 00px 00px;
	text-align:center;
		}
		
.studios{
	height:430px;
}
	
.studiosimg-container{
	position: relative;
    float:left;
	width:373px;
	height:373px;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}

.studiosimg-container:hover .text-studios{
	position: absolute;
	bottom: 0;
	width:360px;
	height:90px;
	background: #FFFFFF;
	opacity: 0.5;
	}
.text-contents{
	margin: 10px 20px;
	font-size: 13px;
}

.studiosimg-container .caption {
	
	font-size:		13px;
	color:			#FFFFFF;
	margin:	10px 50px 10px -20px;
}
.studiosimg-container .mask {
	width:			310px;
	height:			23%;
	position:		absolute;
	bottom: 0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(255,255,255,0.24);
	transition:		all 0.6s ease;
}
.studiosimg-container:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-left:		60px;	/* 右にずらす */
}
.concept {
          inherit: 30px;
}
.titleconcept{font-family: 'Noto Serif JP', serif;
	          font-size: 20pt;
              text-align: center ;}
.concept-image{width:530px;
	height: 290px;
               margin: 9px;
               float:left;}

.concept-text{width: 522px;
              height: 290px;
	          float:right;
              font-family: 'Noto Serif JP', serif;
	          font-size: 10pt;
	          text-align: justify;
              line-height:23px;
              letter-spacing:1px;
              padding: 00px 15px 00px 15px}

.studio-text{width: auto;
              height: 250px;
              font-family: 'Noto Serif JP', serif;
	          font-size: 10pt;
	          text-align: justify;
              line-height:23px;
              letter-spacing:1px;
              padding: 30px 100px}


.concept-container{width: 100%;
	               height: 350px;
}
.contact-container{width: 100%;
	               height: 270px;

}

.contact-list{width: 100%; 
              text-align: center;
	
}

.contact-button{/* 1.形をきめる */
  display: inline-block;
  width: 230px;
  border-radius: 25px;
	border: 1px solid #c0c0c0;
	margin: 00px 10px;
  /* 2.背景色をきめる */
  background: #fff;
  /* 3.文字の配置をきめる */
  font-size:12px;
	text-align: center;
  color: #000;
  font-weight: bold;
  font-weight: 100;
  letter-spacing:1px;
	
 }

.foot-wrapper {width: 100%;
	          height: 60px;
	          background-color:#EFEFEF;
	          text-align: center;
	          padding: 30px 00px;
	
	
    }
.min-text{font-size: 4px;
color: #808080;
	letter-spacing:1px;
	font-weight: 100;
margin: 00px 00px 10px 00px;
}
@media screen and (max-width:1060px) {
		
	
.site-wrapper{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	
.toggle-btn {
  display: block;}
	
.header-right{
	display: none;}
	
.works-container{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	

	.works-page{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
	}
	
	.mobil-wrapper
	{width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	
	.studios{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	
	.studios-container{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	

	.aconcept-container{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
.concept-container{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	

.concept-text{width:90%;
	height:100%;
              font-family: 'Noto Serif JP', serif;
	          font-size: 9pt;
	          text-align: justify;
              line-height:20px;
              letter-spacing:1px;
              padding: 30px }
.works-page
	{width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	
}
@media screen and (max-width:450px) {
	
	
	.head-container{
	height: 50px;

		}
	li{
  list-style: none;
  float:left;
  padding:14px 10px 00px 10px;
}
	
	.site-wrapper{
	width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	
	.titleconcept{
	font-size: 20px
	}

.concept-text{width:80%;
	height:100%;
              font-family: 'Noto Serif JP', serif;
	          font-size: 9pt;
	          text-align: justify;
              line-height:20px;
              letter-spacing:1px;
              padding: 00px 40px 00px 40px}
	
	.works-page
	{width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	.section
	{width:100%;}
	
 .mobil-wrapper
	{width:100%;
	height:100%;
	display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
	}
	
.studio-text{width: 100%;
              height: 100%;
              font-family: 'Noto Serif JP', serif;
	          font-size: 7pt;
	          text-align: justify;
              line-height:23px;
              letter-spacing:1px;
              padding: 30px 30px}
	
	.contact-button{margin: 5px}
	
	.concept-image{
		width: 100%;
	    height: 100%;
	}
	
	.min-text{
		font-size: 10px;
	padding: 00px 20px ;}
	
	.foot-wrapper {width: 100%;
	          height: 100px;
	          background-color:#EFEFEF;
	          text-align: center;
		margin-top: 50px;
	          padding: 30px 00px;}
	

	
}