@charset "utf-8";
/* レイアウトのためのCSS */

body{
    background: black;
    font-family: "ヒラギノ明朝　PRO","Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3","Hiragino Mincho ProN", "A1明朝", "A1 Mincho", 'Noto Serif JP', "游明朝", YuMincho,"HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Shippori Mincho B1','STIX Two Math','Noto Serif JP', serif;
	color: #333;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body.appear{
     background: black;
}

@media screen and (max-width:768px) {
body{
	font-size:0.8rem;
	}
}

/*見出し設定*/
h1{
    position:fixed;
    left:20px;
    top:20px;
    width:5em;
}

@media screen and (max-width:768px) {
h1{
    left:10px;
}
}



/*PCでのタイトル*/
.pv-title{
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
　　 text-align: center;
    color: rgb(255,255,255);
    mix-blend-mode: difference;
    font-size: 4rem;
    line-height: 0.8;
    letter-spacing: 0.4em;
    white-space: nowrap;
}

/*スマートフォンでのタイトル*/
@media screen and (max-width:1024px){
  .pv-title{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      color: rgb(255,255,255);
      font-size: 3rem;
      line-height: 0.8;
      letter-spacing: 0.4em;
      white-space: nowrap;
  }
}

/*スマートフォンでのタイトル*/
@media screen and (max-width:768px) {
  .pv-title{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      text-align: center;
      color: rgb(255,255,255);
      font-size: 2rem;
      line-height: 1.7em;
      letter-spacing: 0.4em;
      white-space: normal;
}
}









/*PCでのサブタイトル*/
.sub-title{
    position:fixed;
    top: 58%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
    color: rgb(255,255,255);
    mix-blend-mode: difference;
    font-size: 1.4rem;
    line-height: 0.8;
    letter-spacing: 0.4em;
    white-space: nowrap;
}
/*アイパッドサイズでのサブタイトル*/
@media screen and (max-width:1024px){
  .sub-title{
      top: 58%;
      left: 50%;
      font-size: 1.2rem;
  }
}
/*スマートフォンでのサブタイトル*/
@media screen and (max-width:768px) {
  .sub-title{
      top: 61.5%;
      left: 50%;
      font-size: 1rem;
}
}

@media screen and (max-width: 768px) {
  .fadeDownTrigger{
    margin-left: 8px;
    margin-top: 8px;
    justify-content: center;
  }
  .logo{
    width: 40px;
  }
  .top-title-area{
    width: 90%;
  }

}



footer{
  display: block;
  justify-content: flex-end;
  text-align: right;
  padding: 30px 0;
  border-top: 0.5px solid rgb(100,100,100);
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 0px;
}
.copy-r{
  color: rgb(80,80,80);
  font-size: 0.875rem;
}


.top-title-area{
  width:95vw;
  white-space: nomal;
}



/*ヘッダーを上にしたい　意味ないかも*/


#g-nav{
    position: fixed;
    z-index: 2;
    top:15px;
    right:20px;
}