@charset "UTF-8";
/*-- 770px Over landscape --*/
@media screen and (min-aspect-ratio: 127000/100000) and (min-width: 770px){
/* PC non-visible */
  .side{
    display: none;
  }

/* PC scroll area */
  .main{
    height: 90svh;
    margin-left: min(50%,100% - 72.5svh);
    width: 67.5svh;
    object-fit: cover;
  }

/* PC title under line */
  .title-line {
    position: fixed;
    bottom: 13.5svh;
    left: max(2svh,50% - 83svh);
    height: 1px;
  }
  .title-line::before {
    content: "";
    position: fixed;
    border-top: solid 1px #323232;
    animation: line05_slide 1s linear forwards;
    animation-timing-function: ease;
    animation-delay: 1s;
  }
  @keyframes line05_slide {
      0% {width: 0px;}
    100% {width: 50svh;}
  }
}

/*-- 770px Over portrait --*//*-- 770px Under --*/
@media screen and (max-aspect-ratio: 126999/100000) and (min-width: 770px) , (max-width: 769.8px) {
/* mobile non-visible */
  .waku,.head,.title,.url,.copyright{
    display: none;
  }

  .logo,.menu,.whitetitle,.top-toggle-left-line,.top-toggle-under-line{
    position: fixed;
  }

/* mobile header area */
  .whitehead{
    position: relative;
    padding-top: 40px;
    padding-left: 36px;
    height: 100dvh;
  }

  /* mobile copyright */
  .copy-mobile{
    position: fixed;
    bottom: 7px;
    right: 14px;
    height: 8px;
  }
}