html{
    font-size: 100%;
}
img{
    max-width: 100%;
    vertical-align: bottom;
}
.wrapper{
   margin: 0 auto;
   max-width: 1200px;
}
a{
    color: #000;
    text-decoration: none;
}
ul{
    list-style: none;
}
body{
    opacity: 0.7;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    background-size: cover;
   background-image: url("../img/mainvisual1.jpg"),url("../img/mainvisual2.jpeg"),url("../img/maivisual3.jpg");
    width: 100%;
    height: 100vh;
    animation: image_anime 36s ease-in-out infinite; 
    /* forwardsを設定すると100%の状態で止まる */
    animation-fill-mode: forwards; 
    /* animationを開始する時間を設定 */
    animation-delay: 2s; 
  }
  
  @keyframes image_anime {
    33% {
      /* 切り替え後の画像 */
      background-image: url("../img/mainvisual2.jpeg"); 
    }
    66%{
        background-image: url("../img/maivisual3.jpg");
    }
  }
  /* 上記背景画像のアニメーション */

.section-title .ja{
    font-size: 40px;
    font-weight: 400;
 }
 .section-title .en{
     font-size: 60px;
     font-weight: 600;
 }
.openbtn{
   position: fixed;
  top: 0px;
  
 }
.mainvisual{
    height: 100vh;
   position: relative;
}
.mainvisual-senten{
    font-family: "Nanum Gothic", sans-serif;
        font-style: normal;    
        color: #fff;
        text-align: center;
        transform: skewX(-15deg);
       position: absolute;
       top:200px;
       left: 0;
       right: 0;
}
.mainvisual-senten .Thank{
    font-size: 40px;
}
.mainvisual-senten .Goemon{
    font-size: 120px;
    font-weight: 100;
}
.mainvisual-senten .border{
    height: 2px;
    width: 240px;
    background-color: #fff;
    margin: 2px auto;
}
.mainvisual-senten .border.grow{
 animation: growstick 0.5s ease-in-out forwards;
}
@keyframes growstick {
    0%{width: 240px;}
    100%{width:480px;}
}
.mainvisual-senten .border.reverce{
    animation: reverce 0.5s ease-in-out forwards;
}
@keyframes reverce {
    0%{width: 480px;}
    100%{width: 240px;}
}

.mainvisual .studio{
    font-family: "Nanum Gothic", sans-serif;
    font-style: normal;    
    color: #fff;
    transform: skewX(-15deg);
    position: absolute;
    top: 85%;
    right: 10%;
    font-size: 30px;
}
.content{
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    color: #000;
    background-color: #F1F1F2;
}
span{
    display: block;
}
.content #myinfo{
    position: relative;
    height: 70vh;
   margin-bottom: 100px;
}
.content #myinfo .section-title{
    padding-top: 28vh;
}
.content #myinfo .en{
    margin-bottom: 4vh;
}
.content #myinfo p span{
    display: inline-block;
}
.content #myinfo .p-1{
    background-image: linear-gradient(transparent 50%,#ffff66 50%);
}
.content #myinfo .p-2{
    background-image: linear-gradient(transparent 50%,#33ffff 50%);
}
.content #myinfo .p-3{
    background-image: linear-gradient(transparent 50%,#ff3366 50%);
}
.content #myinfo .info-img{
    position: absolute;
    top:12vh ;
    right: 70px;
    border-radius:30px ;
    object-fit: cover;
}
.content #mysite .section-title .en{
    margin-bottom: 4vh;
}
.content #mysite .flex{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.content #mysite .flex .left{
    width: 46%;
}
.content #mysite .flex .right{
    margin-top:80px ;
    width: 46%;
}
.content #mysite .flex .item{
    margin-bottom:80px ;
  position: relative;
  bottom: 0px;
}
.content #mysite .flex .item.active{
    animation: itemtransition 1s  ease-in-out infinite;
}
@keyframes itemtransition {
    0%{ bottom: 0px;}
    50%{bottom: 20px;}
    100%{bottom: 0px;}
}
.content #mysite .flex .item a:hover{
  opacity: 0.7;
}
.content #mysite .flex .item a img{
    width: 550px;
    object-fit: cover;
}
.content #mysite .flex .item .site-name{
    padding: 20px 0 40px 0;
    font-size: 30px;
}
.content #mysite .flex .item dl{
    display: flex;
   width: 100%;
   flex-wrap: wrap;
}
.content #mysite .flex .item dl dt{
    width: 30%;
}
.content #mysite .flex .item dl dd{
    width: 70%;
}
#footer{
    background-color: #fff;
    opacity: 1;
    text-align: center;
}
#footer .section-title{
    font-size: 60px;
    padding: 40px 0 40px 0;
}
#footer .flex{
    display: flex;
    width: 84%;
    margin: 0 auto;
    padding-bottom: 50px;
    justify-content: space-between;
}
#footer .flex .item{
    width: 20%;
}

#footer .flex .item a:hover{
    color: #0481A2;
   
}
#footer .flex .item a::after{
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}
#footer .flex .item a{
   display: flex;
   flex-direction: column;
   font-size: 25px;
   position: relative;
}
#footer .flex .item a:hover::after{
    transform: scale(1,1);
}
#footer .flex .item a img{
    object-fit: cover;
    height: 200px;
    border-radius: 50%;
}
@media screen and (max-width:1700px){
    #myinfo .info-img{
        height: 300px;
        width: 300px;
    }
}
@media  screen and (max-width:834px) {
    .content{
        width: 100%;
    }
    .section-title{
        text-align: center;
    }
    #myinfo .section-title .en{
        margin-bottom: 25vh;
    }
    #myinfo .info-img{
        margin: 34vh auto 0 auto;
        height: 200px;
        width: 200px;
        display: block;
    }
    #mysite{
        margin-top:30vh ;
    }
    #mysite .flex{
        flex-direction: column;
      align-items: center;
    }
    #footer .flex{
        flex-direction: column;
        align-items: center;
    }
    #footer .flex .item a img{
        height: 100px;
    }
}
@media screen and (max-width:605px){
    
    #mysite{
        margin-top: 79vh;
    }
    .content #mysite .flex .item dl dd{
        width: 40%;
    }
    .content #mysite .flex .item dl dt{
        width: 60%;
    }
}