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

/* shinseikai
-----------------------------------------------------*/

/* ==============================================
    crumbs
============================================== */
#detail #magazine h3 img {
    width: 100%;
    height: auto;
}
#magazine ul.dotList {
    margin-bottom: 1.5em;
}
#magazine div.center {
    text-align: center;
}

#magazine .column3 {
    display: grid;
    grid-template-columns: 226px auto;
}
#magazine .column3 div {
    width: 100%;
    max-width: 435px;
    display: grid;
    grid-template-columns: 51.26% auto;
    grid-gap: 12px;
}
#magazine .column3 div img {
    width: 100%;
}
#magazine .column3 p {
    margin-left: 0;
    padding-left: 0;
}
#magazine .column3 p img {
    margin-left: 0;
}
#magazine .column3 p span {
    display: inline-block;
}
#magazine .column3 p strong {
    color: #f5696f;
    font-weight: normal;
}
#magazine .column3 p img {
    margin-bottom: 0.6em;
}
@media screen and (max-width: 960px) {
    #magazine .column3 {
        display: block;
        text-align: center;
    }
    #magazine .column3 > p,
    #magazine .column3 > div {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    #magazine .column3 > p {
        display: inline-block;
    }
}

#magazine .flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


#magazine #btn {
    margin: 3em 0;
    text-align: center;
}
#magazine #btn li {
    list-style: none;
    margin-bottom: 1em;
}
@media screen and (min-width: 910px) {
    #magazine #btn li {
        display: inline-block;
    }
    #magazine #btn li:last-child {
        margin-left: 18px;
    }
}

/* ==============================================
    backnumber
============================================== */
#magazine #backnumber {
    margin-bottom: 3em;
}
#magazine #backnumber p {
    margin-bottom: 1.5em;
    padding-left: 22px;
    text-indent: -22px;
}
#magazine #backnumber p a {
    padding-left: 22px;
    background: url("image/icn_circle.gif") no-repeat left 1px center;
}

/* ==============================================
    mag005
============================================== */
#magazine.mag005 .image2 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#magazine.mag005 .image2 img {
    width: calc(calc(100% - 12px)/2);
    max-width: 290px;
    margin-bottom: 0.6em;
}
#magazine.mag005 .image2 img:nth-of-type(2) {
    margin-left: 12px;
}
#magazine.mag005 .flex img {
    width: 34%;
    max-width: 223px;
}
#magazine.mag005 .flex img:last-of-type {
    width: 29%;
    max-width: 192px;
} 

/* ==============================================
    mag006
============================================== */
#magazine.mag006 .flex p {
    display: flex;
    align-items: center;
}
#magazine.mag006 .flex p:first-of-type {
    width: 45%;
}
#magazine.mag006 .flex p:last-of-type {
    width: 48%;
}
#magazine.mag006 .flex p img {
    margin-right: 12px;
}
#detail #contents #magazine.mag006 .faq strong.catch {
    color: #2c8ec6;
}
@media screen and (max-width: 750px) {
    #magazine.mag006 .flex p {
        font-size: 0.875em;
    }
}
@media screen and (max-width: 360px) {
    #magazine.mag006 .flex {
        display: block;
    }
    #magazine.mag006 .flex p {
        width: calc(100% - 3px) !important;
    }
    #magazine.mag006 .flex p + p {
        margin-top: 1em;
    }
    #magazine.mag006 .flex p:first-of-type img {
        margin-left: 3px;
        margin-right: 17px;
    }
}