@charset "shift_jis";
/* =========================================================
   防犯対策ページ
   ========================================================= */

.security-page,
.security-page * {
    box-sizing: border-box !important;
    font-family: "Noto Sans JP", sans-serif !important;
}


/* ページ全体 */

.security-page {
    width: 770px !important;
    max-width: 770px !important;
    margin: 0 auto !important;
    padding: 0 15px 50px 15px !important;

    background: #fff !important;
    color: #222 !important;

    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   ヘッダー
   ========================================================= */

.security-header {
    width: 100% !important;
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
}

.security-header img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}


/* =========================================================
   おすすめする防犯対策
   ========================================================= */

.security-recommend {
    width: 100% !important;
    margin: 0 0 35px 0 !important;
    padding: 0 !important;
}

.security-recommend img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}


/* =========================================================
   商品カテゴリ
   ========================================================= */

.security-category {
    width: 100% !important;
    margin: 0 0 45px 0 !important;
    padding: 0 !important;
}


/* カテゴリタイトル */

.security-category-title {
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

.security-category-title img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}


/* =========================================================
   商品
   ========================================================= */

.security-product {
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

.security-product:last-child {
    margin-bottom: 0 !important;
}

.security-product img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}


/* =========================================================
   店舗案内
   ========================================================= */

.security-store {
    width: 100% !important;
    margin: 55px 0 0 0 !important;
    padding: 35px 15px 40px 15px !important;

    background: #f7f7f7 !important;

    text-align: center !important;
}


/* 店舗案内テキスト */

.security-store-lead {
    margin: 0 0 25px 0 !important;
    padding: 0 !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    color: #222 !important;
}


/* =========================================================
   「お近くの店舗はこちら」ボタン
   ========================================================= */
.security-page .security-store-button,
.security-page .security-store-button span {
    font-size: 20px !important;
    font-weight: 900 !important;
}
.security-store-button {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 90% !important;
    max-width: 550px !important;
    min-height: 65px !important;

    margin: 0 auto !important;
    padding: 15px 55px 15px 25px !important;

    background: #f5c400 !important;
    border: 3px solid #111 !important;
    border-radius: 5px !important;

    color: #111 !important;
    text-decoration: none !important;

    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;

    box-shadow: 0 4px 0 #111 !important;

    transition:
        transform 0.15s ease !important,
        box-shadow 0.15s ease !important;
}


/* ホバー */

.security-store-button:hover {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #111 !important;
}


/* =========================================================
   ボタン右側の矢印
   Shift-JISで「?」などを使わずCSSで描画
   ========================================================= */

.security-arrow {
    position: absolute !important;
    right: 25px !important;
    top: 50% !important;

    width: 13px !important;
    height: 13px !important;

    border-top: 3px solid #111 !important;
    border-right: 3px solid #111 !important;

    transform: translateY(-50%) rotate(45deg) !important;
}


/* =========================================================
   スマホで見た場合
   ========================================================= */

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

    .security-page,
    .security-page * {
        font-family: "Noto Sans JP", sans-serif !important;
    }

    .security-page {
        width: 100% !important;
        max-width: 770px !important;

        padding: 0 10px 40px 10px !important;

        font-size: 16px !important;
    }


    .security-header {
        margin-bottom: 20px !important;
    }


    .security-recommend {
        margin-bottom: 25px !important;
    }


    .security-category {
        margin-bottom: 35px !important;
    }


    .security-category-title {
        margin-bottom: 10px !important;
    }


    .security-product {
        margin-bottom: 10px !important;
    }


    .security-store {
        margin-top: 40px !important;
        padding: 30px 10px 35px 10px !important;
    }


    .security-store-lead {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }


    .security-store-button {
        width: 95% !important;
        min-height: 60px !important;

        padding: 13px 50px 13px 18px !important;

        font-size: 18px !important;
    }


    .security-arrow {
        right: 20px !important;
    }

}