body {
    transition: background 1s ease;
    background: #FFFFFF;
}

.wrap {
    transition: background 1s ease;
    background: #FFFFFF;
}


.colorSectionText h3 {
    padding-left: 15%
}



@media screen and (min-width:1300px) {     /*pc用のcssを記述*/
    
    .contents {
        width: 60%;
        transition: background 1s ease;
        background: #FFFFFF;
    }
    
    #colorIndex {
        margin: 100px auto 250px auto
    }
    
    #colorIndex ul {
        display: flex
    }
    
    #colorIndex ul li {
        width: 20%
    }
    
    #colorIndex ul li img {
        width: 100%
    }
    
    
    .colorSectiondiv {
        margin: 0 auto 500px auto;
        transition: background 1s ease;        
    }
    
    

    
    .colorSectiondiv:last-child {
        margin: 0 auto
     } 
    
    
    
    .colorSectionTop {
        display: inline-flex
    }
    
    .colorSectionTop img {
        width: 50%;
        height: 50%
    }
    
    
    .colorSectionTopText { 
        display: flex; /* テキスト縦のど真ん中に */
        flex-direction: column; /* テキスト縦のど真ん中に */
        justify-content: center; /* テキスト縦のど真ん中に */
        width: 50%;
        height: inherit;
        text-align: center
    }
    
    
    .colorSectionTopText h3 {
        font-size: 38px;
        font-weight: 200;
        letter-spacing: 0.7em;
        padding-left: 0.7em;
    }
    
    
    .colorSectionTopText p {
        font-size: 16px;
        font-weight: 200;
        letter-spacing: 2px
    }
    
    
    
    .colorSection {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -ms-flexbox;
        display: -o-flex;
        justify-content: space-between
    }

    .colorSection img {
        width: 30%;
        height: 30%
    }


    
    .colorSectionText { 
        display: flex; /* テキスト縦のど真ん中に */
        flex-direction: column; /* テキスト縦のど真ん中に */
        justify-content: center; /* テキスト縦のど真ん中に */
        width: 65%;
        height: inherit;
        margin: 0;
        text-align: center;
    }


    .colorSectionText div {
        background-size: cover;
        border-bottom: 1px solid #666666        
    }
    
        
    .colorSectionText h3 {
        display: block;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 5px;
        text-align: right;
        min-width: 500px
    }


    .colorSectionText p {
        width: 100%;
        margin: 15px auto auto auto;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: .01em;
        text-align: justify
    }
    
    
    .colorSectiondiv section {
        margin: 0 auto 150px auto
    }
    
    
    
    section{
        transition: background 1s ease;
        background: #FFFFFF;
        padding-top: 120px;
        margin-top: -120px;
    }
    
}





@media only screen and (min-width:768px) and (max-width:1299px) {     /*tablet用のcssを記述*/
    
    .contents {
        width: 90%;
        margin: auto;
        transition: background 1s ease;
        background: #FFFFFF;
    }

    #colorIndex {
        margin: 100px auto 250px auto
    }

    #colorIndex ul {
        display: flex
    }

    #colorIndex ul li {
        width: 20%
    }

    #colorIndex ul li img {
        width: 100%
    }


    .colorSectiondiv {
        margin: 0 auto 500px auto;
        transition: background 1s ease;        
    }

    .colorSectiondiv:last-child {
        margin: 0 auto
    } 



    .colorSectionTop {
        display: inline-flex
    }

    .colorSectionTop img {
        width: 50%;
        height: 50%
    }


    .colorSectionTopText { 
        display: flex; /* テキスト縦のど真ん中に */
        flex-direction: column; /* テキスト縦のど真ん中に */
        justify-content: center; /* テキスト縦のど真ん中に */
        width: 50%;
        height: inherit;
        text-align: center
    }


    .colorSectionTopText h3 {
        font-size: 38px;
        font-weight: 200;
        letter-spacing: 0.7em;
        padding-left: 0.7em;
    }


    .colorSectionTopText p {
        font-size: 16px;
        font-weight: 200;
        letter-spacing: 2px
    }




    .colorSection {
        display: flex;
        justify-content: space-between
    }

    .colorSection img {
        width: 30%;
        height: 30%
    }



    .colorSectionText { 
        display: flex; /* テキスト縦のど真ん中に */
        flex-direction: column; /* テキスト縦のど真ん中に */
        justify-content: center; /* テキスト縦のど真ん中に */
        width: 65%;
        height: inherit;
        margin: 0;
        text-align: center;
    }


    .colorSectionText div {
        background-size: cover;
        border-bottom: 1px solid #666666        
    }


    .colorSectionText h3 {
        display: block;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 2px;
        text-align: right;
    }


    .colorSectionText p {
        width: 100%;
        margin: 15px auto auto auto;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: .01em;
        text-align: justify
    }


    .colorSectiondiv section {
        margin: 0 auto 150px auto
    }

    section{
        transition: background 1s ease;
        background: #FFFFFF;
        padding-top: 80px;
        margin-top: -80px;
    }

}




@media screen and (max-width:767px){     /*smartphone用のcssを記述*/
    

    
    .contents {
        width: 90%;
        margin: auto;
        transition: background 1s ease;
        background: #FFFFFF;
    }

    #colorIndex {
        margin: 0px auto 20px auto
    }

    #colorIndex ul {
        display: flex
    }

    #colorIndex ul li {
        width: 20%;
        margin: auto 0
    }

    #colorIndex ul li img {
        width: 100%
    }


    .colorSectiondiv {
        margin: auto;
        transition: background 1s ease;        
    }

    .colorSectiondiv:last-child {
        margin: 0 auto
    } 



    .colorSectionTop {
    }

    .colorSectionTop img {
        width: 100%;
        height: 100%
    }


    .colorSectionTopText { 
        display: flex; /* テキスト縦のど真ん中に */
        flex-direction: column; /* テキスト縦のど真ん中に */
        justify-content: center; /* テキスト縦のど真ん中に */
        width: 100%;
        height: inherit;
        text-align: center
    }


    .colorSectionTopText h3 {
        margin: 10px auto;
        font-size: 38px;
        font-weight: 200;
        letter-spacing: 0.6em;
        padding-left: 0.6em;
    }


    .colorSectionTopText p {
        font-size: 16px;
        font-weight: 200;
        letter-spacing: 1px
    }



    .colorSection {
        
    }

    .colorSection img {
        width: 100%;
        height: 100%
    }



    .colorSectionText { 
        display: flex; /* テキスト縦のど真ん中に */
        flex-direction: column; /* テキスト縦のど真ん中に */
        justify-content: center; /* テキスト縦のど真ん中に */
        width: 100%;
        height: inherit;
        margin: 20px auto auto auto;
        text-align: center;
    }


    .colorSectionText div {
        background-size: cover;
        border-bottom: 1px solid #666666;        
    }


    .colorSectionText h3 {
        display: block;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: .01em;
        text-align: right;
        height: 30px;
        margin: 0px auto 40px auto
    }


    .colorSectionText p {
        width: 100%;
        margin: 15px auto auto auto;
        font-weight: 400;
        letter-spacing: .01em;
        text-align: justify
    }


    .colorSectiondiv section {
        margin: 0 auto 50px auto
    }

    section{
        transition: background 1s ease;
        background: #FFFFFF;
    }
    
    #colorIndexTxt {
        margin: auto
    }
    
    #colorIndexTxt ul li {
        margin: 10px auto;
        text-align: center
    }
    
    
    #colorIndexTxt ul li a img {
        height: 20px
    }
    
    
    section {
        padding-top: 50px;
        margin-top: -50px;
    }


}



/*IEのみ*/
@media all and (-ms-high-contrast:none){


    
    .colorSectiondiv {
        
        margin: 0 auto;
    }
    
    
    .colorSectiondiv section {

        margin: 0 auto 75px auto
    }
    
    
    section{
        padding-top: 0px;
        margin-top: -0px;
    }

}