/*====================================================
////id #archive #title
====================================================*/
#archive #title .imgBox img {
    margin-right: 0;
}
#archive #title .innerBox {
}
#archive #title .h2Box {
    padding: 30px;
    text-align: center;
}
#archive #title .bgBox {
    height: 100%;
    width: calc(100% + 5vw);
    left: -5vw;
}
#archive #title .h2Box h2 {
    position: relative;
    margin: 0;
    display: inline-block;
    text-align: left;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
    #archive #title .imgBox {
        width: 100%;
    }
    #archive #title .innerBox {
        width: 100%;
    }
    #archive #title .h2Box {
        padding: 20px ;
    }
}

@media screen and (max-width:480px)  {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    #archive #title .imgBox {
        width: 70%;
        max-width: 1000px;
        margin: 0;
        margin-left: auto;
    }
    #archive #title .h2Box {
        position: absolute;
        display: inline-block;
        padding: 30px;
        width: 50%;
        text-align: center;
        bottom: 30px;
    }

}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
    #archive #title .imgBox {
        width: 80%;
    }
    #archive #title .innerBox {
        margin-top: -30px;
    }
    #archive #title .h2Box {
        position: relative;
        bottom: 0;
    }
}

@media screen and (min-width:1200px) {
    #archive #title .innerBox {
    }
    #archive #title .bgBox {
        width: calc(100% + ((100vw - 1200px) / 2));
        left: calc(-1 * ((100vw - 1200px) / 2));
    }

}


/*====================================================
////id #archive #detail
====================================================*/
#archive #detail .postBox {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
#archive #detail .postBox figcaption.birthBox {
    position: absolute;
    width: 5.5em;
    height: 5.5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: 1.3;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100%;
    overflow: hidden;
    color: #fff;
    font-weight: bold;
    top: -12px;
    left: -12px;
}
#archive #detail .postBox figcaption.sex-male {
    background: #5781C1;
}
#archive #detail .postBox figcaption.sex-female {
    background: #D55E83;
}
#archive #detail .postBox figcaption.status {
    position: absolute;
    width: 100%;
    height: 2em;
    top: auto;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
}
#archive #detail .postBox .linkBtn {
    margin: 10px auto;
    padding: 6px;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
    #archive #detail .postBox {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        max-width: 580px;
        margin: auto;
    }
    #archive #detail .postBox .item {
        width: calc(100% / 2 - 8px);
        margin: 0px 0 20px;
    }
    #archive #detail .postBox .linkBtn {
        font-size: 1.2rem;
    }
}

@media screen and (max-width:580px)  {
    #archive #detail .postBox figcaption.birthBox {
        font-size: 2.5vw;
        font-weight: normal;
        width: 16vw;
        height: 16vw;
    }
    #archive #detail .postBox figcaption .small {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        line-height: 1;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    #archive #detail .postBox .item {
        width: calc(100% / 3 - 20px);
        margin: 0px 10px 20px;
    }
    #archive #detail .postBox figure {
        -webkit-transition: .2s all;
        transition: .2s all;
    }
    #archive #detail .postBox a:hover figure {
        opacity: .8;
    }
    #archive #detail .postBox figcaption {
        font-size: 1.5rem;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

@media screen and (min-width:1200px) {
    #archive #detail .postBox .item {
        width: calc(100% / 4 - 20px);
    }
}

/*====================================================
////id #archive
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (max-width:480px)  {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

@media screen and (min-width:1200px) {
}




/*====================================================
////id #dogs #title
====================================================*/
#dogs #title {
    position: relative;
}
#dogs #title .innerBox {
    padding-bottom: 0;
}
#dogs #title .bgBox {
    top: 30px;
    width: 70%;
    height: 60%;
    
}
#dogs #title .imgBox {
    max-width: 700px;
}
#dogs .slick-dots {
    bottom: 0;
}
#dogs .slick-dots li button:before {
    font-size: 26px;
    color: #53250F;   
}
#dogs #title .status {
    background: rgba(0, 0, 0, .5);
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
}

#dogs #title .imgBox .slick-dotted.slick-slider {
    margin-bottom: 0;
}
.slick-dots li button:before {
    content: '';
    width: 8px;
    height: 8px;
    background: #53250f;
    border-radius: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
    #dogs #title .bgBox {
        top: 15px;
    }

    #dogs #title .itemBox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    #dogs #title .imgBox {
        width: 90%;
        margin: auto;
    }
    #dogs #title .txtBox {
        width: 90%;
        margin: 30px auto 0;
    }
}

@media screen and (max-width:480px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    #dogs #title .h2Box {
        width: calc(45% - 1.5em);
        position: relative;
        text-align: left;
        padding: 0;
        bottom: 0;
    }
    #dogs #title .itemBox {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
    #dogs #title .imgBox {
        width: 55%;
        margin-top: -80px;
    }
    #dogs #title .txtBox {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-right: 1.5em;
        margin-top: 2em;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
    #dogs #title .h2Box {
        width: 100%;
    }
    #dogs #title .itemBox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 30px;
    }
    #dogs #title .imgBox {
        margin-top: 0;
        width: 480px;
        height: 480px;
        margin: auto;
    }
}

@media screen and (min-width:1200px) {
}

/*====================================================
////id #dogs #detail
====================================================*/
#dogs #detail dl {
    max-width: 700px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-top: solid 1px;
    margin: auto;
}
#dogs #detail dl:last-child {
    border-bottom: solid 1px;
}
#dogs #detail .videoBox {
    margin: 20px auto 40px;
    overflow: hidden;
}
#dogs #detail .videoBox video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#dogs #detail .parentBox {
    position: relative;
    margin-top: 60px;
    padding-top: 40px
}
#dogs #detail .parentBox .bgBox {
    -webkit-transform-origin: right;
    transform-origin: right;
    right: 0;
    left: auto;
    z-index: -1;
    height: 80%;
}
#dogs #detail .parentBox h4 {
    text-align: center;
    width: 70%;
    margin: 0 0 0 auto;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
    #dogs #detail dl {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 10px;
    }
    #dogs #detail dt {
        font-size: .9em;
        font-weight: bold;
    }
    #dogs #detail dd {
        margin-left: .5em;
        text-align: left;
    }
    #dogs #detail .videoBox {
        width: 90%;
        max-width: 400px;
        max-height: 90vh;
    }
    #dogs #detail .parentBox h4 {
        width: 100%;
    }
    #dogs #detail .parentBox .flexBox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    #dogs #detail .parentBox figure {
        width: 60%;
        margin: 15px auto;
    }
}

@media screen and (max-width:480px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    #dogs #detail dt {
        width: 8em;
        padding: 10px;

    }
    #dogs #detail dd {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: left;
        padding: 10px;
    }
    #dogs #detail .videoBox {
        width: 600px;
        height: 600px;
        text-align: center;
    }
    #dogs #detail .parentBox figure {
        width: 45%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    #dogs #detail .parentBox figure img {
        margin: 0;
    }
    #dogs #detail .parentBox p {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 15px 30px;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
    #dogs #detail .parentBox h4 {
        width: 100%;
        margin-bottom: 15px;
    }
    #dogs #detail .parentBox .flexBox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    #dogs #detail .parentBox figure {
        width: 60%;
        margin: auto;
    }
}

@media screen and (min-width:1200px) {
}

/*====================================================
////
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (max-width:480px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

@media screen and (min-width:1200px) {
}