@charset "UTF-8";

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.prof {
    padding: 40px 0px;
}

.pagenation {
    position: relative;
    padding-top: 20px;
}

.pagenation a {
    font-size: 20px;
}

.back, .next {
    position: absolute;
}
    
.back {
    left: 5%;
}

.next {
    right: 5%;
}

.fas {
    width: 18px;
    height: auto;
}
/*
.fa-angle-left {
    padding-right: 0px;
}
*/
.fa-angle-right {
    padding-left: 9px;
}

.col-l {
    width: 100%;
    text-align: center;
    padding: 20px 0px 0px;;
}

.col-l img {
    padding: 10px;
}

.col-r {
    width: 100%;
    text-align: center;
    padding: 0px 0px 20px;
}

.col-r h4 {
    padding-top: 20px;
    letter-spacing: 2px;
    line-height: 40px;
}

/* -------------------ここから個人画像CSS-------------------- */

#snap001 {
    background-image: url(../img/snap-3_mobile.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #ffffff;
    text-align: left;
    letter-spacing: 2px;
}

#snap002 {
    background-image: url(../img/snap-6.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #3b3b3b;
    text-align: left;
    letter-spacing: 2px;
}

#snap003 {
    background-image: url(../img/snap-9.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap004 {
    background-image: url(../img/snap-12.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap005 {
    background-image: url(../img/snap-15.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap006 {
    background-image: url(../img/snap-18.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap007 {
    background-image: url(../img/snap-21.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap008 {
    background-image: url(../img/snap-24.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap009 {
    background-image: url(../img/snap-27.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap010 {
    background-image: url(../img/snap-30.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap011 {
    background-image: url(../img/snap-33.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap012 {
    background-image: url(../img/snap-36.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap013 {
    background-image: url(../img/snap-39.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap014 {
    background-image: url(../img/snap-42.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap015 {
    background-image: url(../img/snap-45.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #ffffff;
    text-align: left;
    letter-spacing: 2px;
}

#snap016 {
    background-image: url(../img/snap-48.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap017 {
    background-image: url(../img/snap51.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap018 {
    background-image: url(../img/snap-54.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap019 {
    background-image: url(../img/snap-57.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap020 {
    background-image: url(../img/snap-60.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap021 {
    background-image: url(../img/snap-63.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap022 {
    background-image: url(../img/snap-66.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap023 {
    background-image: url(../img/snap-69.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap024 {
    background-image: url(../img/snap-72.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap025 {
    background-image: url(../img/snap-75.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap026 {
    background-image: url(../img/snap-78.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap027 {
    background-image: url(../img/snap-81.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap028 {
    background-image: url(../img/snap-84.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap029 {
    background-image: url(../img/snap-87.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap030 {
    background-image: url(../img/snap-90.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap031 {
    background-image: url(../img/snap-93.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap032 {
    background-image: url(../img/snap-96.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap033 {
    background-image: url(../img/snap-99.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap034 {
    background-image: url(../img/snap-102.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap035 {
    background-image: url(../img/snap-105.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#snap036 {
    background-image: url(../img/snap-108.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

#self {
    background-image: url(../img/self-3.jpg);
    background-size: cover;
    padding: 40px 20px 180px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
}

/* -----------------メディアクエリ------------------- */

@media (min-width: 768px){
    
    .back {
        left: 0%;
    }
    
    .next {
        right: 0%;
    }
    
    .col-l {
        width: 55%;
        float: left;
    }
    
    .col-r {
        position: relative;
        right: 8%;
        width: 30%; 
        float: right;
        text-align: left;
    }
    
    .prof-brand  h4 {
        line-height: 3em;
        font-size: 15px;
        letter-spacing: 1px;
    }
    
    /* -------------------ここから個人画像CSS-------------------- */
    
    #snap001 {
        background-image: url(../img/snap-3.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap002 {
        background-image: url(../img/snap-6.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap003 {
        background-image: url(../img/snap-9.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap004 {
        background-image: url(../img/snap-12.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap005 {
        background-image: url(../img/snap-15.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap006 {
        background-image: url(../img/snap-18.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap007 {
        background-image: url(../img/snap-21.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap008 {
        background-image: url(../img/snap-24.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap009 {
        background-image: url(../img/snap-27.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap010 {
        background-image: url(../img/snap-30.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap011 {
        background-image: url(../img/snap-33-mobile.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap012 {
        background-image: url(../img/snap-36.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap013 {
        background-image: url(../img/snap-39.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap014 {
        background-image: url(../img/snap-42.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap015 {
        background-image: url(../img/snap-45.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap016 {
        background-image: url(../img/snap-48.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap017 {
        background-image: url(../img/snap-51.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap018 {
        background-image: url(../img/snap-54.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap019 {
        background-image: url(../img/snap-57.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap020 {
        background-image: url(../img/snap-60.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap021 {
        background-image: url(../img/snap-63.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap022 {
        background-image: url(../img/snap-66.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap023 {
        background-image: url(../img/snap-69.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap024 {
        background-image: url(../img/snap-72.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap025 {
        background-image: url(../img/snap-75.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap026 {
        background-image: url(../img/snap-78.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap027 {
        background-image: url(../img/snap-81.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap028 {
        background-image: url(../img/snap-84.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap029 {
        background-image: url(../img/snap-87.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap030 {
        background-image: url(../img/snap-90.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap031 {
        background-image: url(../img/snap-93.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap032 {
        background-image: url(../img/snap-96.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap033 {
        background-image: url(../img/snap-99.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap034 {
        background-image: url(../img/snap-102.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap035 {
        background-image: url(../img/snap-105.jpg);
        padding: 50px 3em 20em;
    }
    
    #snap036 {
        background-image: url(../img/snap-108.jpg);
        padding: 50px 3em 20em;
    }
    
    #self {
        background-image: url(../img/self-3.jpg);
        padding: 50px 3em 20em;
    }
}

@media (min-width: 1024px){
    #snap001 {
        padding: 5em 3.5em 30em;
    }
    
    #snap002 {
        padding: 5em 3.5em 30em;
    }
    
    #snap003 {
        padding: 5em 3.5em 30em;
    }
    
    #snap004 {
        padding: 5em 3.5em 30em;
    }
    
    #snap005 {
        padding: 5em 3.5em 30em;
    }
    
    #snap006 {
        padding: 5em 3.5em 30em;
    }
    
    #snap007 {
        padding: 5em 3.5em 30em;
    }
    
    #snap008 {
        padding: 5em 3.5em 30em;
    }
    #snap009 {
        padding: 5em 3.5em 30em;
    }
    #snap010 {
        padding: 5em 3.5em 30em;
    }
    
    #snap011 {
        padding: 5em 3.5em 30em;
    }
    
    #snap012 {
        padding: 5em 3.5em 30em;
    }
    
    #snap013 {
        padding: 5em 3.5em 30em;
    }
    
    #snap014 {
        padding: 5em 3.5em 30em;
    }
    
    #snap015 {
        padding: 5em 3.5em 30em;
    }
    
    #snap016 {
        padding: 5em 3.5em 30em;
    }
    
    #snap017 {
        padding: 5em 3.5em 30em;
    }
    
    #snap018 {
        padding: 5em 3.5em 30em;
    }
    #snap019 {
        padding: 5em 3.5em 30em;
    }
    #snap020 {
        padding: 5em 3.5em 30em;
    }
    #snap021 {
        padding: 5em 3.5em 30em;
    }
    
    #snap022 {
        padding: 5em 3.5em 30em;
    }
    
    #snap023 {
        padding: 5em 3.5em 30em;
    }
    
    #snap024 {
        padding: 5em 3.5em 30em;
    }
    
    #snap025 {
        padding: 5em 3.5em 30em;
    }
    
    #snap026 {
        padding: 5em 3.5em 30em;
    }
    
    #snap027 {
        padding: 5em 3.5em 30em;
    }
    
    #snap028 {
        padding: 5em 3.5em 30em;
    }
    #snap029 {
        padding: 5em 3.5em 30em;
    }
    #snap030 {
        padding: 5em 3.5em 30em;
    }
    
    #snap031 {
        padding: 5em 3.5em 30em;
    }
    
    #snap032 {
        padding: 5em 3.5em 30em;
    }
    
    #snap033 {
        padding: 5em 3.5em 30em;
    }
    
    #snap034 {
        padding: 5em 3.5em 30em;
    }
    
    #snap035 {
        padding: 5em 3.5em 30em;
    }
    
    #snap036 {
        padding: 5em 3.5em 30em;
    }
    
    #self {
        padding: 5em 3.5em 30em;
    }
}