@charset "UTF-8";

*, *::before, *::after { box-sizing: border-box; }
* { font-family: sans-serif; }

body {
    background-color: black;
    font-size: 100%;
    color: white;
    line-height: 2;
    margin: 0 auto;
    padding: 10px;
    max-width: 1180px;
    text-align: left;
    -webkit-text-size-adjust: 100%;
}

a { text-decoration: none; }
a:link, a:visited, a:hover, a:active { color: white; }

img, embed { border: 0; }
p { clear: both; margin: 10px 0px; }

header, #top { height: 38px; margin: 0px; }
footer { clear: both; margin: 20px 0px 5px 0px; }
h1 { font-size: 1.4em; font-weight: normal; margin: 0px; }
h2, h3, h4, h5, h6 { font-size: 1.2em; font-weight: normal; margin: 10px 0px; }
section { clear: both; margin: 20px 0px; }

.img-logo { float: left; margin: 0px; border: none; }
.img-cart { float: right; margin: 0px; border: none; }
.img-resd { clear: both; height: auto; max-width: 100%; margin: 0px 10px 0px 0px; }
.img-left { float: left; clear: both; margin: 0px 10px 0px 0px; border: none; }

nav { width: 100%; margin: 10px 0px; }
nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; }
nav li { margin: 10px 20px 10px 0px; padding: 0px; height: 20px; }
nav img { vertical-align: middle; }

#main { clear: both; margin: 20px 0px 15px 0px; }
#brand { display: flex; flex-wrap: wrap; margin: 0px; }
.img-brand { display: flex; flex-wrap: wrap; margin: 10px; padding: 0px; width: 100px; }

aside { width: 100%; margin: 0px; }
aside ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; }
aside li { margin: 0px 20px 0px 0px; padding: 0px; }

.form { clear: both; margin: 10px 0px; }
.clearfix { display: block; }
.clearfix:before, .clearfix:after { content: ""; display: block; clear: both; }
.price { margin: 0px; }
.img-vmid { border: none; padding: 0px; position: relative; top: -0.1em; vertical-align: middle; }

.video-container { clear: both; height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; }
.video-container iframe { border: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.video-box { background-color: black; border: none; clear: both; height: auto; margin: 0px auto; padding: 30px 0px 0px 0px; text-align: center; width: 100%; }
.video-box video { border: none; display: block; height: auto; margin: 0px; padding: 0px; width: 100%; }

.card-table { width: 100%; max-width: 850px; margin: 0 auto 20px auto; display: block; }
.card-table tbody { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; }
.card-table tr { display: block; width: 100%; max-width: 400px; border: 2px solid #333; border-radius: 8px; margin-bottom: 0; overflow: hidden; background-color: #111; }
.card-table td { display: block; width: 100%; border: none; border-bottom: 1px solid #333; text-align: right; padding: 15px 15px 15px 60%; position: relative; white-space: nowrap; }
.card-table td:last-child { border-bottom: none; }
.card-table td::before { content: attr(data-label); position: absolute; left: 15px; top: 15px; width: auto; text-align: left; font-weight: bold; color: #ccc; white-space: nowrap; line-height: 1.4; }
.card-table td:first-child { background-color: #333; color: #fff; text-align: center; padding: 12px; font-size: 16px; border-bottom: 1px solid #555; white-space: normal; }
.card-table td:first-child::before { display: none; }

.pagetop { align-items: center; background: #333; border: solid 2px #000; border-radius: 50%; bottom: 30px; display: flex; height: 50px; justify-content: center; right: 30px; position: fixed; width: 50px; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.pagetop.is-show { opacity: 1; visibility: visible; }
.pagetop__arrow { border-right: 3px solid #000; border-top: 3px solid #000; height: 10px; width: 10px; transform: translateY(20%) rotate(-45deg); }

#content { clear: both; margin: 10px 0px; padding: 0px; }
.img-mini { float: left; margin: 2px 2px 2px 0px; border: none; }
.img-right { float: right; margin: 5px 0px 5px 10px; border: none; }
hr { border: 0 none; height: 10px; background-color: #000000; }

#shipping ul li { display: inline; float: left; margin: 0; padding: 0px 10px; height: 22px; border-left: 1px dotted #CCC; }

.box { display: grid; width: calc(100% - 10px); border-top: 1px solid #444; border-left: 1px solid #444; grid-auto-rows: auto; grid-template-columns: 80px 1fr; }
.box__itmes { font-size: 1em; padding: .25rem .25rem .25rem .5rem; color: #ccc; border-right: 1px solid #444; border-bottom: 1px solid #444; background-color: #000000; }
.box__title { font-size: 0.8em; color: #eeeeee; font-weight: normal; background-color: #000000; }

.box__itmes input, .box__itmes select, .box__itmes textarea {
    width: 100%; font-size: 1em; box-sizing: border-box; border: 1px solid #444;
    color: #ccc; background-color: #000000; padding: 1em; margin: 0;
}

.onebox { width: calc(100% - 10px); border: 1px solid #444; color: #ccc; }
.onebox textarea { width: 100%; box-sizing: border-box; border: 1px solid #444; color: #ccc; background: #000000; padding: 1em; margin: 0; }

.button { display: inline-block; font-size: 1em; text-align: center; cursor: pointer; padding: 12px 53px; background: #000000; color: #ccc; line-height: 1em; transition: .3s; border: 2px solid #000000; }
.button:hover { color: #000000; background: #ccc; }
.input_button { text-align: center; }

input[type="radio"] { -webkit-transform: scale(1.5); transform: scale(1.5); margin-right: 0.5em; }
label.radio { position: relative; display: inline-block; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 100%; overflow: hidden; cursor: pointer; }
label.radio:before { content: ''; display: block; width: 20px; height: 20px; border-radius: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; background-color: #FF0000; }
label.radio input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; margin: 0px; position: absolute; z-index: 2; top: -2px; left: -45px; width: 30px; height: 30px; display: block; box-shadow: 20px 0px #000000; }
label.radio input[type="radio"]:checked { box-shadow: none; }
label.radio input[type="radio"]:focus { box-shadow: 20px 0px #ccc; opacity: 0; }
label.radio input[type="radio"]:disabled { box-shadow: 20px 0px #808080; opacity: 1; }