@charset "UTF-8";
html {
	font-size: 32.5%;
	width: 100%;
	height: 100%;
}
body {
-webkit-text-size-adjust: 100%;
	font-family: "Helvetica Neue";
	margin: auto;
	padding: 0px;
	width: 100%;
	height: calc(100% - 0);
    background-color: #FFF;

}
 /* ----- 背景用の動画ファイル ----- */
#bg-video{
 position: fixed;
 right: 0;
 left: 0;
 top: 0px;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 background: url('poster.jpg') no-repeat;
 background-size: cover;
text-align: center;
}
/* ----- 背景の上に表示させたいコンテンツ ----- */
.header-title{
 position: relative; /*必ず必要*/
 z-index: 2; /*必ず必要*/
 display: flex;
 width: 50%;
 height: auto;
 justify-content: center;
 align-items: center;
 text-align:center;
 margin: auto;
}
#logo {
    padding: 30% 0 0 0;
    margin: auto;
    max-width: 300px;
  }
#logo img{
    padding: 0;
    margin: auto;
    width: 100%;
    height: auto;
}
#logo h2{
    text-align: center;
    width: 100%;
    padding: 15px 0 65px 0;
    margin: auto;
    font-size: 4em;
    color: #FFF;
    letter-spacing: 0.02em;
    line-height: 1em;
}
#logo h3, #logo h4, #logo h5 {
    text-align: center;
    width: 100%;
    padding: 0;
    margin: auto;
    font-size: 4em;
    color: #FFF;
    letter-spacing: 0.02em;
    line-height: 1.5em;
}
#button_box {
    padding: 25px 0 0 0;
    margin: auto;
    max-width: 400px;
    overflow: hidden;
}
#button_box ul{
    padding: 0;
    margin: auto;
    width: 100%;
    list-style: none;
}
#button_box ul li{
    float: left;
    padding: 0;
    margin: auto;
    width: 50%;
    list-style: none;
    text-align: center;
}
#button_box ul li a{
    text-decoration:  none;
    color: #FFF;
}
.text_en_01{
    font-size: 4em;
    letter-spacing: 0.02em;
    color: #FFF;
    font-weight: 700;
    line-height: 1.4em;
    padding: 2px;
    margin: auto;
}
.text_jp_01{
    font-size: 2.2em;
    color: #FFF;
    line-height: 1.4em;
    padding: 2px;
    margin: auto;
}
.button_img{
     width: 20px;
     padding: 0;
     margin: 0 auto;
 }
.button_text {
     width: 150px;
     padding: 0;
     margin: 20px auto 0 auto;
     height: 40px;
}
.button_text a p:hover {
     background-color: rgba(0,0,0,0.6);
     color: #FFF;
}
.button_text a {
    text-decoration: none;
    padding: 0;
    margin: 0;
}
.button_text a p {
    padding: 0;
    margin: 0;
    color: #FFF;
    font-size: 3.5em;
     font-weight: 600;
     letter-spacing: 0.05em;
     vertical-align: middle;
     line-height: 40px;
     background-color: rgba(0,0,0,0.1);
     border: solid 1px #FFF;
     transition: all 0.3s ease-out;
}
#bottom {
    width: 100%;
    height: 50px;
    padding: 0;
    margin: auto;
    color: #FFF;
    position: fixed;
    bottom:0px;
}
#bottom p{
    padding: 0 0 0 0;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    color: #FFF;
    font-size: 2.2em;
    font-weight: 600;
    line-height: 50px;
    height: 50px;
}
#bottom_other{
    padding: 20px 0 20px 0 ;
    margin: auto;
    text-align: center;
    color: #000;
    font-size: 2.2em;
    max-width: 100%;
}
.wrap {
}
#menu {
	display: block;
}
#other_wrap {
    padding: 0;
    margin: auto;
    width: 100%;
}
#other_logo {
    max-width: 130px;
    height: auto;
    padding: 0;
    left: 30px;
    top: 20px;
    z-index: 999;
    position: relative;
}
#other_logo img {
    max-width: 130px;
    padding: 0;
    margin: 0;
    height: auto;
}
#title_01 {
    width: 100%;
    padding: 20px 0 0 0;
    margin: auto;
    color: #000;
    text-align: center;
}
#title_01 h2{
    font-size: 8em;
    color: #000;
    text-align: center;
     letter-spacing: 0.02em;
}
#title_01 p {
    padding: 0;
    margin: auto;
    font-size: 2.8em;
    line-height: 1.9em;
    text-align: center;
    font-weight: 600;
    color: #000;
}
#works_wrap {
    padding: 30px 30px 15px 30px;
    margin: auto;
    max-width: calc(980px - 60px);
    overflow: hidden;
    color: #000;
}
#works_wrap p {
    padding: 9px 0 0 0;
    margin: auto;
    font-size: 2.1em;
    line-height: 1.6em;
    text-align: left;
}
#works_wrap ul {
    width: 100%;
    padding: 0 0 0 0;
    margin: auto;
    overflow: hidden;
}
#works_wrap ul li {
    width: calc(50% - 40px);
    float: left;
    padding: 0 20px 30px 20px;
    margin: auto;
    list-style: none;
    min-height: 380px;
}
.works_img_01 {
    width: 100%;
    height: auto;
    padding: 0 0 12px 0;
    margin: auto;
    transition: all 0.3s ease-out;
}
.works_img_01 img {
    width: 100%;
    height: auto;
    padding: 0;
    margin: auto;
}
.works_img_01:hover {
     opacity: 0.7;
}
#works_wrap h3 {
    font-size: 3em;
    line-height: 1.6em;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 0;
    margin: auto;
}
#works_wrap h3 a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000;
}
#works_wrap h3 a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .4s;
}
#works_wrap h3 a:hover::after {
  transform: scale(1, 1);
}
#contact_text {
    text-align: center;
    max-width: 408px;
    padding: 0 10px 0 10px;
    margin: 20px auto auto auto;
}
#contact_text a{
    text-decoration: none;
}
#contact_text p{
    color: #FFF;
    font-size: 4.5em;
    text-align: center;
    width: 100%;
    border: 4px solid #FFF;
    font-weight: 600;
    border-radius: 60px;
    line-height: 50px;
    padding: 0;
    margin: auto;
    background-color: #000;
    transition: all 0.3s ease-out;
}
#contact_text p:hover{
    color: #000;
    border: 4px solid #FFF;
    background-color: #FFF;
}
#detail_wrap {
    padding: 30px 30px 70px 30px;
    margin: auto;
    max-width: calc(780px - 60px);
    overflow: hidden;
    color: #FFF;
}
.detal_text_01 {
    color: #000;
    font-size: 3.5em;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 35px;
    padding: 35px 0 0 0;
    margin: auto;
    letter-spacing: 0.05em;
}
.detal_text_02 {
    color: #000;
    font-size: 4.5em;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 35px;
    padding: 0;
    margin: auto;
    letter-spacing: 0.05em;
}
#works_movie {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #FFF;
}
#works_movie iframe {
  width: 100%;
  height: 100%;
}
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 0;
}
#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;
  z-index: 0;
}
#index_body {
    background-color: #000;
}
@media screen and (max-width: 950px) {

#bg-video{
 position: fixed;
 top: 0px;
 left: 50%;
 min-height: 100%;
 min-width: 100%;
 z-index: -100;
 transform: translateX(-50%);
}
.header-title{
 width: 65%;
}
#logo {
    padding: 150px 0 0 0;
  }
#logo h2{
    font-size: 3.2em;
}
#other_logo {
    max-width: 130px;
    height: auto;
    padding: 20px 0 0 0;
    margin: auto;
    position: static;
}
#works_left {
    width: calc(100% - 10px);
    float: none;
    padding: 0 5px 40px 5px;
}
#works_right {
    width: 100%;
    float: none;
}
#works_right ul li {
    width: calc(50% - 10px);
    padding: 0 5px 40px 5px;
}
#works_wrap ul li {
    width: calc(100% - 40px);
    float: none;
    padding: 0 20px 15px 20px;
    margin: auto;
    list-style: none;
    min-height: 300px;
}
#title_01 h2{
    font-size: 4em;
}
#title_01 p {
    padding: 0 20px 0 20px;
    font-size: 2em;
    line-height: 1.9em;
}

}