@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    font-family: "ＭＳ Ｐゴシック","Hiragino Maru Gothic Pro","ヒラギノ丸ゴ Pro W4",Osaka,sans-serif;
    font-size: 80%;
    line-height: 120%;
}

select, input, textarea {
    font-size: 100%;
}

img {
    border: 0;
}

ul, li {
    list-style: none;
}

hr {
    display: none;
}

/* テーブル */

table {
    margin: 0 0 20px;
    border-collapse: collapse;
    width: 100%;
    font-size: 100%;
    text-align: left;
}

th, td {
    padding: 5px;
    border: 1px solid #ccc;
}

th {
    width: 240px;
    background: #f5f5f5;
    font-weight: normal;
    text-align: left;
}

.contents-main .btn-area, #popup .btn-area, #form_edit .btn-area {
    margin: 0px 0 60px 0;
    padding: 20px 0;
    clear: both;
    width: 100%;
    background: #f5f5f5;
    text-align: center;
}

/* ボタン */

.btn {
    padding: 1ex;
    border: solid 1px #bcbecb;
    display: inline-block;
    background-image: linear-gradient(#fff, #eee);
    background-clip: border-box;
    font-weight: normal;
    font-size: 90%;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 5px;

    &:link, &:visited {
        color: #444757;
    }

    &:hover {
        border: solid 1px #d5d7df;
        color: #6d728b;
    }

    &:active {
        background-image: linear-gradient(#eee, #fff);
    }

    /* 前へ戻る、次へ進む */

    &.prev,
    &.next {
        position: relative;
        font-size: 91.2%;
        font-weight: bold;

        &::before {
            content: "";
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            background: url("../img/ico_next.gif") right 1ex center no-repeat;
        }

        &.prev {
            padding-left: calc(2ex + 15px);
            &::before {
                transform: rotate(180deg);
            }
        }
    
        &.next {
            padding-right: calc(2ex + 15px);
        }
    }
}

/* LINK */

a {
    &.btn-tool-format:hover {
        border: solid 1px #363a47;
        color: #6b728b;
    }

    &:link, &:visited, &:hover {
        color: #39c;
        text-decoration: none;
    }
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.attention {
    color: #f00;
}

/* コンテンツ
----------------------------------------------- */

#contents {
    padding: 20px 20px 100px;
    width: 1000px;
}

/* インストールメッセージ
----------------------------------------------- */

/* 以下エラーページと共通■触るべからず */

#outside {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 100%;
}

#out-wrap {
    margin: 100px auto;
    width: 560px;

    .logo {
        padding-bottom: 5px;
        float: right;
    }
}

#out-area {
    width: 560px;
    text-align: left;
    border: #ccc 1px solid;
    border-radius: 5px;
    clear: both;
    padding: 10px 0 0;
    text-align: left;

    .contents {

        .block {
            margin: 0 auto;
            width: 520px;
        }

        .message {
            margin: 0 auto 0px auto;
            padding: 5px 0;
            width: 520px;
            color: #444757;
            font-size: 100%;
        }

        h2 {
            margin: 0 auto 10px auto;
            padding: 5px 0;
            width: 520px;
            color: #444757;
            font-size: 100%;
            font-weight: bold;
            border-bottom: solid 3px #ccc;
        }

        .result-info01 {
            margin: 0 auto 10px auto;
            padding: 20px;
            width: 480px;
            background: #eee;
            font-size: 86%;
            font-weight: bold;
            line-height: 160%;

            .site-info-list li {
                margin-bottom: 5px;
                font-size: 120%;
                font-weight: normal;
            }
        }

        .result-info02 {
            margin: 0 auto;
            width: 520px;

            p {
                margin-bottom: 10px;

                &.action-message {
                    margin: 20px 0 0 0;
                    padding-bottom: 10px;
                    color: #444757;
                }
            }
        }
    }

    /* ボタンエリア */

    .btn-area ul {
        margin: 1.5em 0 0;
        border-top: #ccc 1px solid;
        padding: 25px 0;
        text-align: center;
        background: #f5f5f5;

        li {
            display: inline;

            + li {
                margin-left: 10px;
            }
        }
    }
}

/* 以上エラーページと共通■触るべからず */

.ex-text {
    color: #7c7c7c;
    font-size: 86%;
}

/* EC-CUBEからのお知らせエリア
----------------------------------------------- */

#info-area {
    margin-top: 20px;
    width: 558px;
}

/* FORM */

.box470 {
    width: 470px;
    height: 300px;
}

.box280 {
    width: 280px;
    height: 30px;
}

/* FONT */

.bold {
    font-weight: bold;
}
