@charset "UTF-8";
/* CSS Document */

/* ---------- COMMON ---------- */
/* title */
.page_title {
    background-image: url("../img/collie/bg_title_collie.png");
    background-repeat: no-repeat;
}

/* photo list */
.photo_list ul li{
    list-style: none;
}

.photo_list ul figure{
    text-align: center;
}

.photo_list ul li span{
    display: block;
}

.prize_silver{
    background: url("../img/collie/prize_silver.png") no-repeat right top;
}
.prize_gold{
    background: url("../img/collie/prize_gold.png") no-repeat right top;
}
.prize_wsilver{
    background: url("../img/collie/prize_double_silver.png") no-repeat right top;
}
.prize_wgold{
    background: url("../img/collie/prize_double_gold.png") no-repeat right top;
}
.prize_double{
    background: url("../img/collie/prize_double.png") no-repeat right top;
}
.prize_tgs{
    background: url("../img/collie/prize_tgs.png") no-repeat right top;
}

/* name list */
.name_list ul{
    list-style: none;
}

/* ---------- Mobile ---------- */
@media(max-width:737px) {
/* title */
    article{
        margin-bottom: 40px;
    }

    .page_title {
        background-position: right 55px top 55px;
        background-size: 60px;
    }

/* photo list */
    .photo_list{
        padding-bottom: 10px;
    }

    .photo_list ul{
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }

    .photo_list ul figure{
        margin-bottom: 8px;
    }

    .photo_list ul li{
        font-size: 80%;
        line-height: 1.5em;
        list-style: none;
        margin-bottom: 20px;
    }

    .photo_list ul li span{
        font-size: 85%;
    }

    .prize_silver,
    .prize_gold{
        background-size: 30px;
    }

    .prize_wsilver,
    .prize_wgold,
    .prize_double{
        background-size: 56px;
    }

    .prize_tgs{
        background-size: 84px;
    }

/* name list */
    .name_list ul{
        font-size: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
        width: 300px;
    }

    .name_list p{
        font-size: 80%;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }

}

/* ---------- SE ---------- */
@media(max-width:374px) {
    .page_title {
        background-position: right 45px top 45px;
        background-size: 50px;
    }
}

/* ---------- Tablet / PC ---------- */
@media (min-width: 738px) {
/* title */
    .page_title {
        background-position: right 88px top 80px;
        background-size: 98px;
    }

/* photo list */
    .photo_list li{
        display: inline-block;
        font-size: 80%;
        line-height: 1.5em;
        width: 310px;
    }

/* name list */
    .name_list ul{
        font-size: 80%;
    }

    .name_list ul{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        width: 645px;
    }

    .name_list ul li{
        display: inline-block;
        width: 320px;
    }

    .name_list p{
        font-size: 80%;
        text-align: center;
    }

}
/* ---------- Tablet ---------- */
@media(max-width:1022px) and (min-width: 737px){
/* title */
    article{
        margin-bottom: 40px;
        margin-left: 1em;
        margin-right: 1em;
    }

/* photo list */
    .photo_list{
        margin-bottom: 25px;
    }

    .photo_list li{
        margin-bottom: 25px;
        margin-left: 25px;
        margin-right: 25px;
    }

    .photo_list ul figure{
        margin-bottom: 5px;
    }

}
/* ---------- PC ---------- */
@media(min-width:1023px){
/* title */
    article{
        margin-bottom: 60px;
        margin-left: auto;
        margin-right: auto;
        width: 920px;
    }

/* photo list */
    .photo_list{
        margin-bottom: 50px;
    }

    .photo_list li{
        margin-bottom: 40px;
        margin-left: 70px;
        margin-right: 70px;
    }

    .photo_list ul figure{
        margin-bottom: 10px;
    }

}