@charset "UTF-8";
/* display speed */
body{
  position: relative;
  height: 100dvh;
  color: #323232;
  background-color: #F2F0ED;
  font-size: 0;
  font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  animation-name: animations;
  animation-duration: 2.8s;
  animation-timing-function: ease;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}/* f7f4ed norm */
@keyframes animations{
    0%{opacity: 0;}
  100%{opacity: 1;}
}


/*-- 770px Over landscape --*/
@media screen and (min-aspect-ratio: 127000/100000) and (min-width: 770px){
/* PC flame */
.waku{
  position: absolute;
  bottom: 5svh;
  left: max(5svh,50% - 80svh);
  height: calc(100dvh - 10svh);
  width: min(160svh,100% - 5svh);
}

/* PC header area */
  .head{
    position: fixed;
    top: 5svh;
    /* bottom: calc(30dvh - 5svh); */
    left: max(10svh,50% - 75svh);
    height: 70svh;
    width: 17.5svh;
  }

/* PC logo */
  .logo{
    width: 6.2svh;
    margin-top: 6.5svh;
  }

/* PC menu */
  .menu{
    height: 16svh;
    margin-top: 4.75svh;
  }
  .nav{
    height: 4svh;
  }
  .nav img{
    height: 3svh;
    padding: 0.75svh 0;
  }

  /* PC title */
  .title{
    position: fixed;
    bottom: 15svh;
    left: max(10svh,50% - 75svh);
    width: 41.75svh;
  }

  .url{
    position: fixed;
    bottom: 11.5svh;
    left: max(32.3svh,50% - 52.7svh);
    height: 1.25svh;
  }

/* PC menu underline */
  .nav a {
    position: relative;
  }
  .nav a::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    height: 1px;
    width: 100%;
    background-color: #999999;
    transform: scale(0,1);
    transform-origin: left top;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.65, 0, 0.3, 1);
  }

  .nav a:hover::after {
    transform: scale(1,1);
  }

/* PC top line */
  .top-line{
    position: fixed;
    top: 5svh;
    left: 0;
    height: 1px;
    width: max(5svh + 160svh,50% - 80svh + 160svh);
    background-color:  #323232;
    z-index: 99;
  }

/* PC left line */
  .left-line{
    position: fixed;
    bottom: 5svh;
    left: max(5svh,50% - 80svh);
    height: calc(100dvh - 5svh);
    width: 1px;
    background-color:  #323232;
  }

/* PC right line */
  .right-line{
    position: fixed;
    bottom: 0;
    left: max(5svh + 160svh,50% - 80svh + 160svh);
    height: calc(100dvh - 5svh);
    width: 1px;
    background-color:  #323232;
  }

/* PC bottom line */
  .under-line{
    position: fixed;
    bottom: 5svh;
    left: max(5svh,50% - 80svh);
    height: 1px;
    width: max(100% - 5svh,100% - 50vw + 80svh);
    background-color:  #323232;
    z-index: 99;
  }

  /* PC copyright */
  .copyright{
    position: fixed;
    bottom: 3.25svh;
    left: max(5.5svh,50% - 79.5svh);
    height: 1svh;
  }
}

/*-- 770px Over portrait --*//*-- 770px Under --*/
@media screen and (max-aspect-ratio: 126999/100000) and (min-width: 770px) , (max-width: 769.8px) {
/* mobile/toggle logo */
  .logo{
    position: absolute;
    top: 40px;
    left: 36px;
    height: 54px;
  }

/* mobile/toggle menu */
  .menu{
    position: absolute;
    top: 129px;
    left: 36px;
  }
  .nav{
    height: 14px;
    margin-bottom: 26px;
  }

/* mobile/toggle title */
  .whitetitle{
    position: absolute;
    bottom: 40px;
    left: 36px;
    height: auto;
    width: 273px;
  }

  .menu-back{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }
  .menu-back img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .top-toggle-top-line{
    position: fixed;
    top: 20px;
    left: 0;
    height: 1px;
    width: 100%;
    background-color:  #F2F0ED;
  }

  .top-toggle-left-line{
  position: absolute;
  top: 0;
  left: 20px;
  height: 100%;
  width: 1px;
  background-color: #F2F0ED;
  }

  .top-toggle-under-line{
    position: absolute;
    bottom: 20px;
    left: 0;
    height: 1px;
    width: 100%;
    background-color:  #F2F0ED;
  }
}