@charset "UTF-8";
/* flow
-------------------------------------------------------------*/

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

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

body.flow #content h2.section-title {
    display: block;
    width: 660px;
    height: 36px;
    line-height: 38px;
    font-size: 14px;
    font-weight: bold;
    color: #464C50;
    text-align: center;
}

body.flow #content h2.section-title1 {
    background: url(../img/flow/flow-section-tit-bg-1.gif) no-repeat top left !important;
}

body.flow #content h2.section-title2 {
    background: url(../img/flow/flow-section-tit-bg-2.gif) no-repeat top left !important;
}

body.flow #content h2.section-title3 {
    background: url(../img/flow/flow-section-tit-bg-3.gif) no-repeat top left !important;
}

body.flow #content h2.section-title4 {
    background: url(../img/flow/flow-section-tit-bg-4.gif) no-repeat top left !important;
}

body.flow #content p.explanation {
    font-weight: normal;
    text-align: center;
    font-size: 11px;
    color: #666666;
}

body.flow #content .buttons {
    position: relative;
    width: 630px;
    margin: 0px auto;
}

body.flow #content .next {
    padding-bottom: 50px !important;
    background: url(../img/flow/flow-next.gif) no-repeat bottom left !important;
}


body.flow #content .buttons ul.button1 {
    display: block;
    width: 210px;
    margin: 0px auto;
}

body.flow #content .buttons ul.button3 {
    display: block;
    width: 630px;
    margin: 0px auto;
}

body.flow #content .buttons ul li {
    display: block;
    padding: 0px 5px;
    float: left;
}


/* font-size sample */

/*
    default = 12px
    24px = 200%
    23px = 192%
    22px = 183%
    21px = 175%
    20px = 166%
    19px = 158%
    18px = 150%
    17px = 142%
    16px = 133%
    15px = 125%
    14px = 117%
    13px = 108%
    11px = 92%
    10px = 84%
    9px = 75%
    8px = 67%
    7px = 58%
*/

.sp {
    display: none;
}

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

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

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


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

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

    body.flow #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: 2% 3%;
        box-sizing: border-box;
    }

    body.flow #content h2.section-title1 {
        background: url(../img/flow/flow-section-tit-bg-1.gif) no-repeat top left !important;
    }

    body.flow #content h2.section-title2 {
        background: url(../img/flow/flow-section-tit-bg-2.gif) no-repeat top left !important;
    }

    body.flow #content h2.section-title3 {
        background: url(../img/flow/flow-section-tit-bg-3.gif) no-repeat top left !important;
    }

    body.flow #content h2.section-title4 {
        background: url(../img/flow/flow-section-tit-bg-4.gif) no-repeat top left !important;
    }

    body.flow #content p.explanation {
        font-weight: normal;
        text-align: left;
        font-size: 11px;
        color: #666666;
        width: 94%;
        margin: 0 auto 3%;
    }

    body.flow #content .buttons {
        position: static;
        width: 94%;
        margin: 0px auto;
    }

    body.flow #content .next,
    .next2,
    .next-half,
    #main .t-right {
        padding-bottom: 5% !important;
        background: none !important;
        width: auto;
        text-align: center;
    }


    body.flow #content .buttons ul.button1 {
        display: block;
        width: 94%;
        margin: 0px auto;
    }

    body.flow #content .buttons ul.button3 {
        display: block;
        width: 94%;
        margin: 0px auto;
    }

    body.flow #content .buttons ul li {
        display: block;
        padding: 0px 1% 2%;
        float: left;
        width: 48%;
    }

    .flow-nav {
        width: 94%;
        margin: 0 auto;
    }

    .flow1 {
        width: 49%;
        float: left;
        margin: 0 0 2% 0;
    }

    .flow2 {
        width: 49%;
        float: right;
        margin: 0 0 2% 0;
    }

    .flow3 {
        width: 49%;
        float: left;
        margin: 0 0 0 0;
    }

    .example-box .text {
        width: 94%;
        margin: 0 auto 3%;
    }

    .example-box ul {
        width: 94%;
        margin: 0 auto 3%;
    }

    .example-box .leftbox {
        width: 49%;
    }

    .example-box .rightbox {
        width: 49%;
    }

    .wrap {
        width: 94%;
        margin: 0 auto;
    }

    .wrap ol {
        margin: 0 0 3%;
    }

    .wrap li {
        width: 33.33%;
        float: left;
    }

    .delivery-box,
    .three {
        width: 94%;
        margin: 0 auto;
    }

    .delivery-box-half .leftbox {
        width: 20%;
    }

    .delivery-box-half .rightbox {
        width: 78%;
    }

    .inner-inner {
        margin: 0 0 3%;
    }
}