@charset "UTF-8";
/* CSS Document */
* {
   box-sizing: border-box;
}

a {
   text-decoration: none;
   color: #040000;
}

body {
   margin: 0;
   padding: 0;
   font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* headerここから */

header{
  width:100vw;
  height:90px;
  background-color: #fff;
  display: table;
  z-index: 99;
  position: fixed;
  top: 0;
}

.h-logo {
  display: table-cell;
  position: absolute;
  width: 87px;
  margin: 47px 36px;
  cursor: pointer;
}


.h-logo img {
    position: absolute;
    top: -2px;
    left: 35px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 85px;
    display: block;
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

.h-logo:hover img:nth-of-type(2) {
	opacity: 0;
}



.h-nav {
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100vw;
    margin-top: 31px;
    height: 2rem;
}


.h-nav li {
  list-style: none;
  width: 150px;
}


.h-nav li a {
  display: block;
  font-size: 17px;
  font-style: italic;
  font-family:"Helvetica Neue";
  letter-spacing: 2px;
  font-weight: Bold;
  transform: rotate(-13deg);
  -moz-transform: rotate(-13deg);
  -webkit-transform: rotate(-13deg);

}



.h-nav li a:hover {
   color: #DC5C0E;
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
}


/*子階層以降共通*/


.h-nav li li {
   height: 0;
  overflow: hidden;
  transition: .5s;
}

.h-nav li ul {
  background-color: #fff;
  text-align: left;
  width: 148%;
  margin: 13px 0 0;
  padding: 0 0 24px 20px;
}

.h-nav li li a {
  padding: 20px;
  font-size: 16px;
  text-align: left;
}

.last-a{
  padding-bottom: 20px;

}

.h-nav li:hover > ul > li {
  height: 3rem;
  overflow: visible;
}






#about #navi #menu1,
#works #navi #menu2{
    color: #9D9C9C;
}

.c-btn {
  position: absolute;
  width: 84px;
  top: 73px;
  right: 84px;
  height: auto;
  margin: 0 auto;
  display: inline-block;
  cursor: pointer;
  z-index: 100;
}

.c-btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.c-btn:hover img:nth-of-type(2) {
	opacity: 0;
}

/* headerここまで */

/* ハンバーガーメニューここから */
.hamburger-menu {
  display: flex;
  align-items: center;
  width: 20px;
  height: 32px;
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 11px;
  right: 19px;
}

.hamburger-menu__line{
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: #545351;
  position: relative;
  transition: all 0.5s;
}

.hamburger-menu__line::before,
.hamburger-menu__line::after {
    content: '';
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: #545351;
    position: absolute;
    transition: all 0.5s;
}

.hamburger-menu__line::before{
  transform: translateY(-7px);
}
.hamburger-menu__line::after{
  transform: translateY(7px);
}

.hamburger-menu.open .hamburger-menu__line{
  background-color: transparent;
}
.hamburger-menu.open .hamburger-menu__line::before{
  transform: rotate(45deg);
}
.hamburger-menu.open .hamburger-menu__line::after{
  transform: rotate(-45deg);
}

/* ナビゲーション */
.nav-sp {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100%;
  padding: 7px 30px 0 30px;
  background-color: #FFF;
  text-align: left;
  transition: right 0.5s;
  z-index: 99;
}

.nav-sp.open {
    right: 0;
    text-align: center;
    overflow: hidden
    padding-bottom: 15%;
}

.nav-sp a {
    display: inline-block;
    padding: 3px 0;
    text-decoration: none;
    color: #333;
}

.nav-sp a:hover{
    color: #DC5C0E
}

.nav_logo a img {
  position: fixed;
  top: 13px;
  left: 21px;
  width: 53px;
}

ul.nav-sp-inner {
  text-align: left;
  padding: 8% 3% 19% 3%;
}

li.inner-li {
    padding: 3%;
}

.inner-li {
    list-style: none;
}


.inner-li a {
  display: block;
  font-size: 24.5px;
  font-style: italic;
  font-family: "Helvetica Neue";
  letter-spacing: 4px;
  font-weight: Bold;
  transform: rotate(-13deg);
  -moz-transform: rotate(-13deg);
  -webkit-transform: rotate(-13deg);
}

.small a {
  font-size: 17px;
}


.inner-btn{
  display: flex;
}

.inner-contact a img,
.inner-youtube a img{
  height: 65px;
}

.inner-contact{
  flex-basis: 43%;
}

.inner-youtube{
  flex-basis: 53%;
}
/* main-containerここから */
.main-container{
  width: 100vw;
  position: relative;
}


.movie {
	position: relative;
  object-fit: scale-down;
  overflow: hidden;
	width: 100%;
	height: 100vh;
}
.movie video{
  -webkit-transform: translateX(-50%);
	left: 50%;
	max-height: initial;
	max-width: initial;
	min-height: 100vh;
	min-width: 100%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	z-index: -1;
}
.movie::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACJJREFUGFdj/P///38GBgYGRkZGRhANA4w4JZBVoeigngQAOp8IB0lspHEAAAAASUVORK5CYII=);
  background-size: 7px 7px;
  background-position: 0 0, 2px 2px;
}

.big-logo{
  width: 19%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

/* main-containerここまで */
/* footerここから */

footer {
  background-color: #FFF;
  width: 100vw;
  height: 50px;
  position: fixed;
  bottom: 0;
}

.footer-txt{
  position: relative;
}

footer p{
  position: absolute;
  display: block;
  transform: translateY(50%);
  font-family: "Futura";
  font-size: 10px;
  width: 100%;
  text-align: center;
  vertical-align: center;
}


/* footerここまで */