@charset "utf-8";
html{
    scroll-behavior: smooth;
  }
.logo {
    margin-top: 5vw;
    position: fixed;
    width: min(800px,60vw);
  }
body {
    width: min(1200px,80vw);
    margin: 0 auto;
    min-height: 90vh;
    position: relative;
}
#header{
  width:100%;
  height: 80vh;
  position: relative;
} 
#header:before{
  content: '';
  position:fixed;
  top:0;
  left:0;
  z-index:-2;
  width:100%;
  height: 100vh;
}
#container{
  position: relative;
  z-index:1;
  background:white;
}
/*========= スクロールダウンのためのCSS ===============*/


/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

        /*スクロールダウン全体の場所*/
        .scrolldown4{
          /*描画位置※位置は適宜調整してください*/
        position:absolute;
        right:50%;
          /*矢印の動き1秒かけて永遠にループ*/
        animation: arrowmove 1s ease-in-out infinite;
        }

        /*下からの距離が変化して全体が下→上→下に動く*/
        @keyframes arrowmove{
            0%{bottom:1%;}
            50%{bottom:3%;}
          100%{bottom:1%;}
        }

        /*Scrollテキストの描写*/
        .scrolldown4 span{
          /*描画位置*/
        position: absolute;
        left:-20px;
        bottom:10px;
          /*テキストの形状*/
        color: rgb(89, 224, 77);
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        /*縦書き設定*/
        -ms-writing-mode: tb-rl;
          -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
        }

        /* 矢印の描写 */
        .scrolldown4:before {
          content: "";
          /*描画位置*/
          position: absolute;
          bottom: 0;
          right: -6px;
          /*矢印の形状*/
          width: 1px;
          height: 20px;
          background: rgb(89, 224, 77);
          transform: skewX(-31deg);
        }

        .scrolldown4:after{
        content:"";
          /*描画位置*/
        position: absolute;
        bottom:0;
        right:0;
          /*矢印の形状*/
        width:1px;
        height: 50px;
        background:rgb(89, 224, 77);
        }
.fade-in-bottom {
    opacity: 0;
    animation-name: fadein-bottom;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }
@keyframes fadein-bottom {
  0% {
     opacity: 0;
     transform: translateY(20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}
.copy {
  margin: 30px 0 50px 0;
  font-size: clamp(16px, 3vw,18px) ;
  text-align: center ;
}
.fade-in-bottom img {
  height: 30vh;
  margin-top: 5px;
}
.title {
  width: 7vw;
}
hr {
    margin-top: 10px;
	border: none;
	border-top: solid 7px rgb(7, 0, 0);
}
a {
    color: black;
    text-decoration:none; 
    position: relative;
    }
    a::before {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        display: block;
        width: 0;
        height: 2px;
        background-color: #000;
        transition: width 0.3s;
    }
    a:hover::before {
        width: 100%;
  }
table{
        padding: 60px 0 60px 0;
        font-size: 18px;
        width: 100%;
    }
    table th{
        position: relative;
        text-align: left;
        width: 7%;
    }
    table td{
        text-align: left;
        width: 95%;
  }
  p {
    font-size: 14px;
    padding: 0 5px 20px 0;
    text-align: right;
}
.fade-in01,.copy,.logo,.works,.title { 
        opacity:0;
        animation-name: fade-in; 
        animation-duration: 5s; 
        animation-iteration-count:2;
        animation-fill-mode: forwards; 
      }
      @keyframes fade-in {
      0% {
        opacity: 0;
        color:#000;
      }
      90% {
      opacity: 1;
      color:#000;
      }
      100% {
        opacity: 1;
      } 
}
/* 🍔 */
#menuToggle
{
    display: block;
    position: absolute;
    position: fixed;
    top: 50px;
    right: 5vw;
    z-index: 7;
    
    -webkit-user-select: none;
    user-select: none;
    }

    #menuToggle a
    {
    text-decoration: none;
    color: #232323;
    
    transition: color 0.3s ease;
    }

    #menuToggle a:hover
    {
    color: tomato;
    }


    #menuToggle input
    {
    display: block;
    width: 200px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
    }
    #menuToggle span
    {
    display: block;
    width: 38px;
    height: 6px;
    margin-bottom: 5px;
    position: relative;
    
    background: #070707;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
    transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
    transform-origin: 0% 100%;
    }
    #menuToggle input:checked ~ span
    {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
    }
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
    }
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
    transform: rotate(-45deg) translate(0, -1px);
    }
    #menu
    {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px 5px 0 20px;
    padding-top: 125px;
    
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    #menu li
    {
    padding: 10px 0;
    font-size: 22px;
    }

    /*
    * And let's slide it in from the left
    */
    #menuToggle input:checked ~ ul
    {
    transform: none;
}

@media screen and (max-width:768px){
    #header,
    #header:before {
    height: 40vh;    
    }
    body {
      width: min(800px,90vw);
      position: center;
    }
    .title {
      width: 20vw;
    }
    .copy {
      font-size: 14px;
    }
   .fade-in-bottom img {
      display: flex;
      flex-direction: column;
      width: 70vw;
      height: auto;
      margin: 0 auto;
      margin-top: 10px;
    }
    table{
        padding: 60px 0 60px 0;
        font-size: 14px;
        width: 100%;
    }      
    table th{
        position: relative;
        text-align: left;
        width: 15%;
        }
    table td{
        text-align: left;
        width: 90%;
    }
    p {
      font-size: 12px;
    }
 /* 🍔 */
        #menuToggle
        {
        display: block;
        position: absolute;
        position: fixed;
        top: 30px;
        right: 30px;
        z-index: 7;
              
        -webkit-user-select: none;
        user-select: none;
        }
        #menuToggle a
        {
          text-decoration: none;
          color: #232323;
          
          transition: color 0.3s ease;
        }
        #menuToggle a:hover
        {
          color: tomato;
        }
        #menuToggle input
        {
          display: block;
          width: 130px;
          height: 50px;
          position: absolute;
          top: -7px;
          left: -5px;
          
          cursor: pointer;
          
          opacity: 0; /* hide this */
          z-index: 2; /* and place it over the hamburger */
          
          -webkit-touch-callout: none;
        }
        #menuToggle span
        {
          display: block;
          width: 50px;
          height: 6px;
          margin-bottom: 10px;
          position: relative;
          
          background: #070707;
          border-radius: 3px;
          
          z-index: 1;
          
          transform-origin: 4px 0px;
          
          transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                      opacity 0.55s ease;
        }

        #menuToggle span:first-child
        {
          transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2)
        {
          transform-origin: 0% 100%;
        }
        #menuToggle input:checked ~ span
        {
          opacity: 1;
          transform: rotate(45deg) translate(-2px, -1px);
          background: #232323;
        }
        #menuToggle input:checked ~ span:nth-last-child(3)
        {
          opacity: 0;
          transform: rotate(0deg) scale(0.2, 0.2);
        }
        #menuToggle input:checked ~ span:nth-last-child(2)
        {
          transform: rotate(-45deg) translate(0, -1px);
        }
}