body{
    background-image: url("../img/pc-7.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
    text-align: center
}

a:hover img {
opacity: .2;
-webkit-opacity: .2;
-moz-opacity: .2;
filter: alpha(opacity=20);	/* IE lt 8 */
-ms-filter: "alpha(opacity=20)"; /* IE 8 */
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}

.contents{
    width: 90%;
    margin: 0 auto
}

.w{
    width: 90%;
}

.r {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px
}

[class*="c-"] {
    grid-column: span 12;
    padding: 10px
}



    .c-50 {
        grid-column: span 6;
    }
    .c-25 {
        grid-column: span 3;
    }    
    .c-75 {
        grid-column: span 9;
    }    
    .c-100 {
        grid-column: span 12;
    }  
  
    .c-1 {
        grid-column: span 1
    }

    .c-2 {
        grid-column: span 2
    }

    .c-3 {
        grid-column: span 3
    }

    .c-4 {
        grid-column: span 4
    }

    .c-5 {
        grid-column: span 5
    }

    .c-6 {
        grid-column: span 6
    }

    .c-7 {
        grid-column: span 7
    }

    .c-8 {
        grid-column: span 8
    }

    .c-9 {
        grid-column: span 9
    }

    .c-10 {
        grid-column: span 10
    }

    .c-11 {
        grid-column: span 11
    }

    .c-12 {
        grid-column: span 12
    }