@charset "utf-8";

/*柴犬百面相コンテスト　特設ページ
=================================*/
.SPOnly{
	display: none;
}
.topMessage{
	margin-top: 40px;
}
.topMessage + .topMessage{
	margin-top: 1em !important;
}
.shiba100Inner{
	margin-top: 50px;
}
.shiba100Inner h2{
	font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background: #fd6266;
    padding: 10px 0;
}
/* とびきり笑顔部門 */
.topContents {
    margin: 50px 0 30px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    position: relative;
    padding: 20px 10px;
	background-color: #f2d73f;
	border-radius: 6px;
}
.bumonEmblem{
	position: absolute;
    top: -21px;
    left: 13px;
    width: 123px;
    z-index: 1;
}
.imgBox{
	width: 330px;
}
.imgBox h3{
    padding-left: 120px;
    text-align: left;
    font-weight: bold;
    font-size: 2.5rem;
} 
.imgBox figure{
	margin-top:15px;
}
.imgBox figure img{
	border-radius: 6px;
	border: 4px solid #fff;
}
.imgBox .name{
	text-align: center;
    font-size: 2.1rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    margin-top: 10px;
}
.imgBox .name span{
	font-size: 3rem;
}
.commentBox{
    width: 380px;
	margin-top:50px;
}
.commentBox h4{
    background-color:#b29547;
    padding: 5px 11px 24px 20px;
    border-radius: 6px;
}
.fukidashi{
	position: relative;
	margin-top:20px;
	background-color: #fff;
	padding: 5px 14px 12px;
	border-radius: 10px;
	line-height: 1.6;
}
.fukidashi:before {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid #fff;
}

/* ごくらく寝顔部門～しょんぼり顔部門 */
.shibaWrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.categoryBox{
	position: relative;
	padding: 25px 33px 10px;
	border-radius: 6px;
	margin-top: 40px;
	background-color: #b2e3a4;
}
.categoryBox .bumonEmblem{
	position: absolute;
    top: -12px;
    left: 6px;
    width: 110px;
}
.categoryBox .imgBox h3{
    padding-left: 90px;
    font-size: 2.2rem;
} 
.categoryBox .imgBox{
	width: 330px;
}
.categoryBox .imgBox figure {
    width: 260px;
    margin: 10px auto 0;
}
#manpuku .imgBox h3 {
	font-size: 1.8rem ;
}
#manpuku{
	background-color:#febbb0 ;
}
#ikari{
	background-color: #bdbdbd;
}
#kowagari{
	background-color: #bae4e5;
}
#shonbori{
	background-color: #cbbf9e;
}

@media only screen and (max-width: 768px) {

    /*柴犬百面相コンテスト　特設ページ
    =================================*/
    .PCOnly{
        display: none;
    }
    .SPOnly{
        display: block;
    }
    .topMessage{
        margin-top:25px;
    }
    .shiba100Inner h2{
        font-size: 1.8rem;
    } 
    /* とびきり笑顔部門 */
    .mainLayout .shiba100Inner{
        margin-top: 0px;
    }
    .topContents {
        display: block;
        margin: 30px 0px 0px;
        padding: 7.5vw 35px 20px;
        border-radius: 0px;
    }
    .bumonEmblem{
        top: -2%;
        left: 5%;
        width: 30%;
    }
    .imgBox,.commentBox{
        width: 100%;
        margin:0 auto;
    }
    .imgBox h3{
        padding-left: 28vw;
        font-size: 5.5vw;
    } 
    .imgBox figure,.categoryBox .imgBox figure{
        width: 75%;
        margin: 10px auto 0;
    }
    .imgBox .name{
        font-size:  4vw;
    }
    .imgBox .name span{
        font-size:  6.5vw;
    }
    .commentBox {
        margin-top: 10px;
    }
    .fukidashi:before {
        top: -20px;
        border: 10px solid transparent;
        border-bottom: 10px solid #fff;
    }
    .shibaWrap{
        display: block;
    }
    .categoryBox .imgBox {
        width: 100%; 
    }
    .categoryBox .bumonEmblem {
        top: -2%;
        left: 2%;
        width: 30%;
    }
    .categoryBox {
        padding: 7.8vw 25px 10px;
    }
    .categoryBox .imgBox h3 {
        padding-left: 27vw;
        font-size: 5.5vw;
    }
    #manpuku .bumonEmblem {
        top: -4%;
    }
    /* おいしいごはんで満腹顔部門 */
    #manpuku .imgBox h3 {
        font-size: 4.2vw;
        padding-left: 25vw
    }
}