@charset "utf-8";

/*************
workshop
****************/
#mv_under {
    background-image: url(../img/workshop/mv.jpg);
    background-position: center 52%;
}

section img {
    width: 100%;
    height: auto;
    margin: 24px auto;
}
section dl {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}
section dl dt {
    background: #eaeaea;
    /*color: #5d5b5b;*/
    color: #333;
}

section p a:link,
section p a:active,
section p a:visited,
section dd a:link,
section dd a:active,
section dd a:visited {
    color: #333;
    text-decoration: underline;
}

section p a:hover,
section dd a:hover {
    text-decoration: none;
}

/*----------------------------------------
for PC (min-width:641px)
----------------------------------------*/
@media only screen and (min-width:641px),
print {

    section dl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        margin: 30px 0;
        padding: 10px;
    }

    section dl dt {
        width: 21%;
        margin: 0 5px 5px 0;
        text-align: center;
    }

    section dl dd {
        width: 76%;
        margin: 0 5px 5px 10px;
    }

    section dl dt:last-of-type {
        margin: 0 5px 0 0;
    }

    section dl dd:last-of-type {
        margin: 0 5px 0 10px;
    }

    section dl dt,
    section dl dd {
        /*縦位置中央*/
        display: -webkit-box;
        /* safari, Chrome */
        display: -moz-box;
        /* Firefox */
        display: -o-box;
        /* Opera */
        display: -ms-box;
        /* IE */
        display: box;
        -webkit-box-align: center;
        /* safari, Chrome */
        /* Firefox */
        -o-box-align: center;
        /* Opera */
        -ms-box-align: center;
        /* IE */
        box-align: center;
    }

    section dl dt em {
        display: block;
        margin: auto;
        padding: 0 0 0 20px;
        line-height: 2;
        letter-spacing: 20px;
    }

    section dl dt:last-of-type em {
        padding: 0;
        letter-spacing: 0;
    }

    section dl dd em {
        display: block;
    }

}

/*----------------------------------------
for SP (max-width:640px)
----------------------------------------*/

@media only screen and (max-width:640px),
print {

    section img {
        width: 100%;
        height: auto;
        margin: 12px auto 6px;
    }

    section dl {
        display: block;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: 100%;
        height: auto;
        margin: 14px 0;
    }

    section dl dt,
    section dl dd {
        width: 100%;
        margin: 0 5px 5px 0;
        padding: 3px 10px;
    }

    section dl dt {
        letter-spacing: 5px;
        font-weight: bold;
        text-align: center;
    }

    section dl dt:last-of-type {
        letter-spacing: 2px;
    }

    section dl dt {}

    section dl dt em,
    section dl dt:last-of-type em {
        display: block !important;
        padding: 0 0 0 12px !important;
        line-height: 1.8 !important;
        letter-spacing: 10px !important;
    }

    h3:last-of-type {
        font-size: 24px;
        line-height: 1.2;
    }

    section p a:link,
    section p a:active,
    section p a:visited,
    section dd a:link,
    section dd a:active,
    section dd a:visited {
        color: #333;
        text-decoration: underline;
        word-break: break-all;
    }

}