@charset "UTF-8";

/*
 * order.css
 *
 * create:
 * update: 2009-12-20 (Nakahara@MonkeyWorks)
 *
 */

/* order
-------------------------------------------------------------*/

body.order .prints {
    display: none;
}

body.order .pn {
    display: none;
    width: 95%;
}

body.order .pc-df {
    display: inline;
}

/* neworder / ordersheet
-------------------------------------------------------------*/

body.neworder #content .notice,
body.ordersheet #content .notice {
    position: relative;
    width: 660px;
    height: 185px;
    margin: 0px auto 20px auto;
    background: url(../img/order/order-notice-bg.gif) no-repeat top left;
}

body.neworder #content .notice p,
body.ordersheet #content .notice p {
    position: absolute;
    width: 550px;
    height: 120px;
    top: 45px;
    left: 75px;
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

body.neworder #content h2.section-title,
body.ordersheet #content h2.section-title {
    display: block;
    width: 660px;
    height: 36px;
    line-height: 38px;
    font-size: 14px;
    font-weight: bold;
    color: #464C50;
    text-align: center;
    background: url(../img/order/order-section-tit-bg.gif) no-repeat top left !important;
}

body.neworder #main #content h3,
body.ordersheet #main #content h3 {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    background: none !important;
    font-size: 1.2em;
}

body.neworder #main #content .buttons,
body.neworder #main #content .notandum,
body.neworder #main #content .caution,
body.ordersheet #main #content .buttons,
body.ordersheet #main #content .notandum,
body.ordersheet #main #content .caution {
    position: relative;
    width: 660px;
    margin: 0px auto 20px auto;
}

body.neworder #main #content .buttons ul,
body.neworder #main #content .notandum ul,
body.neworder #main #content .caution ul,
body.ordersheet #main #content .buttons ul,
body.ordersheet #main #content .notandum ul,
body.ordersheet #main #content .caution ul {
    position: relative;
    width: 620px;
    margin: 20px auto 15px auto;
}

body.neworder #main #content .buttons ul li,
body.neworder #main #content .notandum ul li,
body.neworder #main #content .caution ul li,
body.ordersheet #main #content .buttons ul li,
body.ordersheet #main #content .notandum ul li,
body.ordersheet #main #content .caution ul li {
    position: relative;
    width: 620px;
    margin: 0 auto 15px auto;
}

body.neworder #main #content .buttons dt,
body.ordersheet #main #content .buttons dt {
    position: relative;
    display: block;
    width: 280px;
    float: left;
}

body.neworder #main #content .buttons dd,
body.ordersheet #main #content .buttons dd {
    position: relative;
    display: block;
    width: 320px;
    float: right;
}

body.neworder #main #content .buttons p,
body.ordersheet #main #content .buttons p {
    position: relative;
    margin: 0;
    width: 320px;
    padding: 0px;
    color: #666666;
    font-size: 0.9em;
}

body.neworder #main #content .notandum dl {
    position: relative;
    width: 620px;
    margin: 0 auto 15px auto;
}

body.neworder #main #content .notandum dt {
    position: relative;
    display: block;
    width: 150px;
    float: left;
}

body.neworder #main #content .notandum dd {
    position: relative;
    display: block;
    width: 460px;
    float: right;
}

body.neworder #main #content .notandum p {
    position: relative;
    margin: 0;
    width: 440px;
    padding: 10px;
    color: #666666;
    font-size: 0.9em;
}

body.neworder #main #content .caution dt {
    position: relative;
    display: block;
    width: 620px;
    margin: 0px auto;
    font-size: 1.0em;
    line-height: 2.5em;
    font-weight: bold;
}

body.neworder #main #content .caution dd {
    position: relative;
    display: block;
    width: 560px;
    margin: 0px auto;
    color: #666666;
    font-size: 0.9em;
}



/* end
-------------------------------------------------------------*/

.sp {
    display: none;
}

/*スマホ
------------------------------*/

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

    .pc {
        display: none;
    }
    .sp {
        display: block;
    }

    body.neworder #content .notice,
    body.ordersheet #content .notice {
        position: static;
        width: 94%;
        height: auto;
        margin: 0px auto 3% auto;
        background: none;
        border: #ccc 2px solid;
        padding: 3%;
        box-sizing: border-box;
    }

    body.neworder #content .notice p,
    body.ordersheet #content .notice p {
        position: static;
        width: 100%;
        height: auto;
        font-size: 13px;
        line-height: 1.5;
        color: #666666;
    }

    body.neworder #content h2.section-title,
    body.ordersheet #content h2.section-title {
        display: block;
        width: 100%;
        height: auto;
        line-height: 1.5;
        font-size: 14px;
        font-weight: bold;
        color: #464C50;
        text-align: center;
        padding: 3%;
        box-sizing: border-box;
        background: #f8f8f8 !important;
        background-image: none;
        border-bottom: #ccc 1px solid;
        border-top: #ccc 1px solid;
    }


    body.neworder #main #content .buttons dt,
    body.ordersheet #main #content .buttons dt {
        position: static;
        display: block;
        width: 100%;
        text-align: center;
        float: none;
        padding: 0 0 2%
    }

    body.neworder #main #content .buttons dd,
    body.ordersheet #main #content .buttons dd {
        position: static;
        display: block;
        width: 100%;
        float: none;
        padding: 0 3%;
        box-sizing: border-box;
    }


    body.neworder #main #content .notandum dl {
        position: static;
        width: 100%;
        margin: 0 auto 2% auto;
    }

    body.neworder #main #content .notandum dt {
        position: static;
        display: block;
        width: 100%;
        float: none;
        text-align: center;
        padding: 0 0 2%;
    }

    body.neworder #main #content .notandum dd {
        position: static;
        display: block;
        width: 100%;
        float: none;
        padding: 0 3%;
        box-sizing: border-box;
    }


    body.neworder #main #content .buttons,
    body.neworder #main #content .notandum,
    body.neworder #main #content .caution,
    body.ordersheet #main #content .buttons,
    body.ordersheet #main #content .notandum,
    body.ordersheet #main #content .caution {
        position: static;
        width: 100%;
        margin: 0px auto 2% auto;
    }

    body.neworder #main #content .buttons ul,
    body.neworder #main #content .notandum ul,
    body.neworder #main #content .caution ul,
    body.ordersheet #main #content .buttons ul,
    body.ordersheet #main #content .notandum ul,
    body.ordersheet #main #content .caution ul {
        position: static;
        width: 100%;
        margin: 2% auto 2% auto;
    }

    body.neworder #main #content .buttons ul li,
    body.neworder #main #content .notandum ul li,
    body.neworder #main #content .caution ul li,
    body.ordersheet #main #content .buttons ul li,
    body.ordersheet #main #content .notandum ul li,
    body.ordersheet #main #content .caution ul li {
        position: static;
        width: 100%;
        margin: 0 auto 3% auto;
    }


    body.neworder #main #content .caution dt {
        position: static;
        display: block;
        width: 94%;
        margin: 0px auto;
        font-size: 1.0em;
        line-height: 1.5;
        font-weight: bold;
    }

    body.neworder #main #content .caution dd {
        position: static;
        display: block;
        width: 94%;
        margin: 0px auto;
        color: #666666;
        font-size: 0.9em;
    }

    body.neworder #main #content .notandum p {
        position: static;
        margin: 0;
        width: 100%;
        padding: 0;
        color: #666666;
        font-size: 0.9em;
    }
}