body {
    background-image: url(/Images/Setsuden/base.jpg);
}

div#content {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    color: #333333;
}

.large {
    font-size: 1.25em;
}

.small {
    font-size: 0.75em;
}

.gray {
    color: #a2a2a2;
}

.c {
    text-align: center;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clear {
    clear: both;
}

.mt05 {
    margin-top: 0.5em;
}

.mt1 {
    margin-top: 1em;
}

.mt2 {
    margin-top: 2em;
}

.ml4 {
    margin-left: 4em;
}

.pd05 {
    padding: 0.5em;
}

.pd1 {
    padding: 1em;
}

.pdl1 {
    padding-left: 1em;
}

.lh125 {
    line-height: 125%;
}

.lh150 {
    line-height: 150%;
}

.lh175 {
    line-height: 175%;
}

div#headerBar {
    top: 0px;
    width: auto;
    max-width: 640px;
    position: fixed;
    background-repeat: repeat-x;
    background-image: url(images/header.png);
    height: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: right;
}

    div#headerBar img {
        height: 2em;
        margin-right: 0.5em;
    }

div#headerBarDummy {
    height: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

img.topLogo {
    width: 100%;
}

a.button {
    width: 60%;
    text-align: center;
    padding: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.75em;
    background-color: #ffffff;
    font-weight: bold;
    display: block;
}

    a.button:active {
        background-color: #000000;
        color: #ffffff;
    }

a.anchor {
    color: #33afe0;
    text-decoration: underline;
}

    a.anchor:active {
        color: #ff4444;
    }

div.buttonLarge {
    width: 100%;
    text-align: center;
    padding: 0.25em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    background-color: #ffffff;
    font-weight: bold;
}

    div.buttonLarge img {
        height: 1em;
    }

a.disabled {
    background-color: #b2b2b2;
}

div.outer {
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 1em;
}

div.foldingBox {
    border-radius: 8px;
    box-shadow: 1px 1px 5px #aaa;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

    div.foldingBox div.header {
        border-radius: 8px 8px 0px 0px;
        font-size: 1.25em;
        color: #ffffff;
        background-color: #33afe0;
        padding: 0.5em;
    }

    div.foldingBox div.body {
        border-radius: 0px 0px 8px 8px;
        padding: 1em;
        background-color: #f4f4f0;
    }

        div.foldingBox div.body div.sampleArea {
            margin-top: 0.5em;
        }

        div.foldingBox div.body div.showButton {
            background-color: #ffffff;
            padding: 0.5em;
            font-weight: bold;
        }

        div.foldingBox div.body img.openClose {
            width: 1em;
        }

        div.foldingBox div.body div.showedSample {
            background-color: #ffffff;
            padding: 0.5em;
        }

            div.foldingBox div.body div.showedSample img.screenShot {
                width: 80%;
            }

            div.foldingBox div.body div.showedSample .hideButton {
                font-weight: bold;
            }

            div.foldingBox div.body div.showedSample .imageArea {
                text-align: center;
                margin-top: 1em;
            }


div.backToTop {
    text-align: right;
    margin-top: 0.5em;
}

    div.backToTop a {
        padding: 0.5em;
    }

        div.backToTop a img {
            height: 1em;
        }

div.navigation {
    margin-top: 0.5em;
    border-top: 1px solid #b2b2b2;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    padding-top: 0.25em;
}

    div.navigation p {
        padding: 0.25em;
        font-size: 0.75em;
    }

div.footer {
    margin-top: 0.5em;
    border-top: 1px solid #b2b2b2;
    text-align: center;
    padding: 0.5em;
}

.blue {
    color: #33afe0;
}

a.largeButton {
    display: block;
    background-color: #ffffff;
    padding: 0.20em 0.5em 0.20em 0.5em;
    font-weight: bold;
    width: 88%;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2em;
    text-align: center;
}


a.largeRectLink {
    display: block;
    background-color: #ffffff;
    padding: 0.20em 0.5em 0.20em 0.5em;
    font-weight: bold;
    width: 88%;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2em;
}

    a.largeRectLink img {
        height: 1em;
    }

input[type="radio"] {
    width: 1em;
    height: 1em;
    vertical-align: sub;
}

div.appTitleBar {
    background: #cedce7; /* Old browsers */
    background: -moz-lineddddddddddddar-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%); /* ddddddddOpera 11.10+ */
    background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%); /* IE10+ */
    background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    color: #ffffff;
    font-weight: bold;
}

div.commerceLawArea {
    line-height: 175%;
    padding: 1em;
}

    div.commerceLawArea p {
        margin-top: 1em;
    }

h3.shopStepChapter {
    margin-top: 1em;
    font-size: 150%;
}

div.shopStepContent {
    padding: 0.5em;
}

    div.shopStepContent p {
        line-height: 150%;
    }

div.shopStepNavigation {
    margin-top: 0.5em;
}

    div.shopStepNavigation p {
        padding: 0.25em;
    }
    
div.test {
    margin-top: 1em;
    margin-bottom: 1em;
}

    div.test p {
    margin-top: 2em;
    }