/****** Stream,exhibition ******/

#stream,
#exhibition,
#book,
#degitalcatarog,
#runway,
#use
{
    margin-top: 20px;
    padding-bottom: 100px;
    text-align: center;
}

#stream h2,
#exhibition h2,
#book h2,
#degitalcatarog h2,
#runway h2,
#use h2{
    margin: 50px auto;
    display: block;
    font-size: 32px;
}


#stream .detail,
#exhibition .detail,
#book .detail,
#degitalcatarog .detail,
#runway .detail{
    width: 80%;
    margin: 50px auto 0 auto;
    padding: 18% 20px 50px 20px;
    text-align: center;
    background-size: 100%;
    display: block;
}





#stream .detail h3,
#exhibition .detail h3,
#book .detail h3,
#degitalcatarog .detail h3,
#runway .detail h3,
#use .detail h3{
    padding: 50px auto;
    display: block;
    font-size: 32px;
}

#stream .detail p,
#exhibition .detail p,
#book .detail p,
#degitalcatarog .detail p,
#runway .detail p,
#use .detail p{
    text-align: left;
    padding: 20px;
    line-height: 1.8em;
}

#stream .detail .subheader,
#exhibition .detail .subheader,
#book .detail .subheader,
#degitalcatarog .detail .subheader,
#runway .detail .subheader,
#use .detail .subheader{
    width: 100%;
}

#stream .detail .planner,
#exhibition .detail .planner,
#book .detail .planner,
#degitalcatarog .detail .planner,
#runway .detail .planner,
#use .detail .planner{
    text-align: center;
    margin: 50px auto 0px auto;
    font-size: 14px;

}

/****** Use ******/
#use .detail{
    width: 80%;
    margin: 50px auto 0 auto;
    padding: 20px 20px 50px 20px;
    text-align: center;
    background-size: 100%;
    display: block;
}

#use .detail .use_list {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    padding-top: 20px;
}

#use .detail .chart{
    margin: 0;
    padding: 10px;
}

#use .detail .chart th{
    width: 25%;
    text-align: left;
}


#use .detail .range{
    background: #fff 0% 0% no-repeat padding-box;
    border-radius: 30px;
    padding-top: 10px;
    margin: 30px auto;
}

#use .detail .use_list li {
    list-style: none;
    padding: 10px;
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    color: #29262B;
    width: 18%;
}

#use .detail .use_list img {
    width: 90%;
    background-size: 100%;
    border-radius: 100px;
}
#use .detail .use_list p {
    margin-top: 0;
    padding: 10px;
    font-weight: 100;
    text-align: left;
}


    @media screen and (min-width:320px) { 
        /*　画面サイズが480pxからはここを読み込む　*/


    #use .detail .use_list li {
        list-style: none;
        padding: 10px;
        font-size: 14px;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 800;
        color: #29262B;
        width: 40%;
    }

    #use .detail .use_list img {
        width: 90%;
        background-size: 100%;
        border-radius: 100px;
    }
}

@media screen and (min-width:768px) {
    /*　画面サイズが768pxはここを読み込む　*/


    #use .detail .use_list li {
        list-style: none;
        padding: 10px;
        font-size: 14px;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 800;
        color: #29262B;
        width: 18%;
    }

    #use .detail .use_list img {
        width: 90%;
        background-size: 100%;
        border-radius: 100px;
    }
}



.chart th{
    width: 18%;
    vertical-align: top;
}

.chart td{
    text-align:left;
}

@media screen and (max-width:640px){
    table th, table td{ display:block; }
    .chart th{
        width: 100%;
        background: #ddd;
        padding: 10px auto;
        display: block;

    }
}