@charset 'UTF-8';
/*  Add Custom CSS here.  */
@font-face {
font-family: 'logotypegothic';
src: url('../fonts/logotypegothicCondense.otf'),
    url('../fonts/logotypegothicCondense.woff');
}
.header .headerSub__nav nav ul li a,
.header__gnavi--menu ul li a span.jp {
    font-family: "logotypegothic";
}


#loader{
    display: flex;
justify-content: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
   -ms-flex-direction: column;
       flex-direction: column;
    width: 100%;
    height: 100vh;
    background: #fff;
    pointer-events: none;
    opacity: 1;
    transition: 3s all;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    padding: 5%;
}
#loader.is-hello{
    opacity: 0;
}
#loader .logo{
    margin-top: 40px;
    animation: fade 2.5s ease-out forwards;
    animation-delay: .8s;
    opacity:0;
    margin-bottom: 8%;
}
#loader p{
    text-align: center;
    color: #757575;
    font-size: 30px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
  animation: fade 2.5s ease-out forwards;
  opacity:0;
}
#loader p span{
  letter-spacing: .2em;
  line-height:2em;
}
@keyframes fade {
0% {
    opacity:0;
}
100% {
    opacity: 1;
}
}
@media screen and (max-width: 767px){
#loader p{
    font-size: 20px;
    letter-spacing: 0;
    line-height: 2.2em;
}
#loader p .br:after{
    content: "";
    display: block;
}
#loader .logo{
    margin-top: 30px;
    width: 175px;
}
#loader p span{
  display: block;
}
}