@charset "utf-8";

* {
   box-sizing: border-box;
}

.language-change{
  display:flex;
  gap:10px;
  margin:0px;
  color:#fff;
  align-items:center;
  cursor:pointer;
}

html[lang='ja'] *:is([lang]):not([lang='ja']),
html[lang='en'] *:is([lang]):not([lang='en']),
html[lang='de'] *:is([lang]):not([lang='de']){
  display:none!important;
}


 body{
  margin:0;
  padding:0;
  background-color: #000;
}
 header {
   padding: 10px 5px 10px 4%;
   position: fixed;
   top: 0;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1;
   background-color: transparent;
}


h1 {
   margin: 0; padding: 0;
   font-size: 20px;
}
a {	
   text-decoration: none;
   color: #fff;
}
p {
   font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
   margin:0px;
   transform: rotate(0.05deg);
   text-align:center;
   
 }
.top_logo{
   width: 50%;
   max-width: 350px;
}
/*---------nav---------*/
nav {
   /* margin: 0 auto; */
   margin-left: 33%;
}
.sp-nav {
   display: none;
}
.change-color {
   background-color:#080909; /*スクロールしたあとにnav背景色*/
   transition: 0.3s;
}
ul {
   list-style: none;
   margin: 0;
   display: flex;
}
li {
   margin: 0 0 0 15px;
   font-size: 16px;
}

/*---------first_view---------*/
.video{
   width: 100%;
   height: 720px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
   z-index: -1;
   background-color: #000;
}

.video::after{
   content: '';
   width: 100%;
   height: 100%;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAHJJREFUKFNdT1sNgDAQ62wMGeChX9hABzqwwVc9gAywAXRs5MIlS3brcwlAD2DHOzOABcDpheSVKmDSWAl+yiQPSakRrFybk5WSOjuZYNDH05PcrKx79iXHTElD7PQxW+a/UyHEzPCb0ilV8HN64qbY6QbAES2qudYCNAAAAABJRU5ErkJggg==");/* 背景画像の前にパターンのURLを入れる */
   background-repeat: repeat, no-repeat; /* パターンのリピート */
   background-blend-mode: overlay; /* パターンをオ?バーレイで表示 */
   background-size: auto, cover;/* パターンにautoを指定 */
   position: absolute; /* absoluteに指定 */
   z-index: 1;/* 前面に表示 */
   /*background-color: rgba(16, 57, 75, .3);*/
   display: block;
   position: absolute;
   left: 0;
   top: 0;
}

.video video{
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}
.logo img{
   width: 600px;
}

@media screen and (min-width: 768px) {
    .v01{
        height: 100vh;
			}
    .video{
        min-width: 960px;
        height: 100vh;
    }

}

/*-------矢印-------*/ 
.tap{
   position: absolute;
   left: 48%;
   width: 32px;
   height: 32px;
   border-left: 1px solid #fff;
   border-bottom: 1px solid #fff;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   box-sizing: border-box;
 }
 .fixed-bg {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
/*-------背景-------*/ 
.bg01 {
  background-image: url(../img/crow02.png);
  background-position: center;
  min-height:700px;
}
.bg02 {
  background-image: url(../img/crow_contact.png);
  background-position: center;
  height:500px;
}
.bg-color{
   background:#080909;
}
 
@font-face {
  font-family: YuGothicM;
  src: local(Yu Gothic Medium),
       local(Yu Gothic);
  font-weight: 500;
}

.box {
   z-index: 2;
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   margin: auto;
   width: 100%;
   height: 50%; 
   color:#FFF;
}
.box2{
   color:#FFF;
   margin:0 auto;
}
.box2 p{
	padding-top: 80px;
}
.wrapper{
   width:70%;
   margin: 0 auto;
   padding-bottom: 50px;
}

/*-----Twitter-------*/ 
.twitter-timeline{
   margin: 0 auto;
   padding: 0 20px;
   display: flex;
   width: 100%;
   max-width: 480px;
}
/*-----youtube-------*/ 
.youtube iframe{
   width: 45%;
   height: 260px;
 }
/*-----contact-------*/ 
.add{
   font-style: normal;
   text-align: center;
   padding-top: 60px;
}
/*--------共通----------*/
.title{
   font-size:300%;
}
.mA{
   margin: 0 auto;
}
.mB30{
   margin-bottom: 30px;
}
.mB50{
   margin-bottom: 50px;
}
.mB70{
   margin-bottom: 70px;
}
.pLR{
   padding: 0 20px;
}
.pT20{
   padding-top:20px !important;
}
.pT60{
   padding-top: 60px;
}
.pTB30{
   padding: 30px 0;
}
.lH30{
   line-height:30px;
}
.font-line{
   font-size:1.2em;
   line-height:150%;
}
.font05{
   font-size: 0.5em;
}
.font01{
   font-size:1em;
}
.font15{
   font-size: 1.5em;
   line-height: 50px;
}

/*==============スマホCSS==============*/
@media screen and (max-width: 768px) {

   .logo img{
      width: 300px;
   }
   .v01{
      height:720px;
   }
   .pc-nav {
      display: none;
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(0, 0, 0, .85);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin-right: 15px;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #fff;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #fff;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #fff;
   }
/*------スマホメニュー------*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #fff;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
/*------閉じるアイコン------*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( 45deg );
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      transform: rotate( -45deg );
   }
   nav {
      margin: 0 auto;
   }

   .toggle {
      transform: translateY( 0 );
      opacity: 1;
      margin: 0 auto;
   }
   .box {
      margin: 40% 0;
   }


/*-----矢印-------*/ 
   .tap{
      bottom: -30%;
      left: 45%;
   }
/*-----共通-------*/ 
   .wrapper {
      width: 100%;
      margin: 0 auto;
      padding: 0 30px 50px;
      font-size:1em;
   }
   .font-line {
      font-size: 1em;
      line-height: 1.6em;
   }
   .font15{
      font-size: 1.2em;
   }
   .title {
      font-size: 2.5em;
   }

/*-----youtube-------*/   
   .youtube iframe{
      width: 80%;
      height: 260px;
    }   

}