@charset "UTF-8";
main {
    margin: 12rem 0 9rem 10rem
}
h1 {
    color: #242424;
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 5rem
}
.work-detail {
    margin-bottom: 9rem
}
li {
    display: flex;
    justify-content: center
}
.Work-img {
    height: 50rem
}
.ex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 2.25rem;
    margin-left: 7%
}
.name {
    margin-bottom: 1rem
}
.detail {
    font-size: 2rem;
    color: #3E3E3E;
    margin-top: 1rem
}
/*==================================================
ふわっ https://coco-factory.jp/ugokuweb/jscss/
===================================*/

/* fadeUp */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .fadeUpTrigger {
        opacity: 0;
    }
    @media (max-width: 768px) {
        /* ここに記述した分は、スマホ用の形になる（レスポンス対応）*/
        h1 {
            margin: 12rem 5rem 9rem 8rem
        }
        li {
            display: flex;
            justify-content: center;
            flex-direction: column
        }
        .ex {
            margin-top: 8rem;
            font-size: 1.5rem
        }
        .Work-img {
            height: 10%;
            min-height: 10rem
        }
        .line {
            width: 93%;
        }
    }
    @media (max-width: 430px){
        h1 {
            margin: 12rem 5rem 9rem 1rem
        }
    }
    @media (min-width: 1500px) {
        main {
            margin: 12rem 0 9rem 20rem
        }
        h1 {
            font-size: 4.5rem
        }
        .name {
            font-size: 3rem;
        }
        .detail {
            font-size: 2.5rem;
        }
    }