@charset "UTF-8";
body.mac {
  font-size: 16px;
}

body #container {
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color: #333333;
  margin-bottom: 50px;
  width: 980px;
  margin-right: auto;
  margin-left: auto;
}

div#container {
  width: 980px;
  margin-bottom: 50px;
}

/*---------------------------
タイトル
---------------------------*/
h1 {
  border-bottom: 1px solid #CCCCCC;
  font-weight: normal;
  font-size: 1.8em;
  line-height: 1.2;
  margin: 0 0 20px;
  padding-bottom: 2px;
}

div#main-contents {
  float: right;
  width: 784px;
}

h2.ttl {
  margin: 0;
  padding: 7px 0 7px 7px;
  font-weight: normal;
  font-size: 1.8em;
  line-height: 1.5;
  color: #FFFFFF;
  background-color: #1E5CA7;
}

h2.ttl img {
  margin: 0 15px 0 0;
}

.process {
  margin: 35px 0 40px 0;
  text-align: center;
}

#process-item {
  display: block;
}

#process-set {
  display: none;
}

.select-area {
  padding: 22px 0 4px 0;
  background-color: #CBE5F6;
}

.select-area.e2 {
  margin: 40px 0 0 0;
  padding: 4px 0 4px 0;
}

.menu-area {
  padding: 0 19px 10px 19px;
}

.menu-area .menu-item {
  width: 365px;
  height: 83px;
  background-color: #FFFFFF;
  display: block;
  float: left;
  margin-bottom: 15px;
  margin-left: 0px;
}

.menu-area .menu-item + .menu-item {
  margin-left: 15px;
}

.menu-area .menu-item + .menu-item + .menu-item {
  margin-left: 0px;
}

.menu-area .menu-item + .menu-item + .menu-item + .menu-item {
  margin-left: 15px;
}

.menu-area .menu-item + .menu-item + .menu-item + .menu-item + .menu-item {
  margin-left: 0px;
}

.menu-area a.menu-item:hover {
  opacity: 0.6;
  text-decoration: none;
}

.menu-area a.menu-item span {
  display: block;
  padding: 20px 0 0 94px;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.4;
  color: #333333;
  text-decoration: none;
}

.menu-area .menu1 {
  background-image: url("/static/images/product/acc/esecurity/new/icn_scslot.png"), url("/static/images/common/yaji_kaku_bl_12.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 18px center, 346px 64px;
}

.menu-area .menu2 {
  background-image: url("/static/images/product/acc/esecurity/new/icn_connector.png"), url("/static/images/common/yaji_kaku_bl_12.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 18px center, 346px 64px;
}

.menu-area .menu3 {
  background-image: url("/static/images/product/acc/esecurity/new/icn_tape.png"), url("/static/images/common/yaji_kaku_bl_12.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 18px center, 346px 64px;
}

.menu-area .menu4 {
  background-image: url("/static/images/product/acc/esecurity/new/icn_cable.png"), url("/static/images/common/yaji_kaku_bl_12.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 18px center, 346px 64px;
}

#slot, #connector, #tape, #cable {
  display: none;
}

.detail-area {
  margin: 0 4px;
  background-color: #FFFFFF;
}

.detail-area.border-blue {
  margin: 40px 0 0 0;
  border: 4px solid #CEE4F5;
}

.detail-area .detail-inner {
  margin: 0 30px 0;
  padding: 40px 0 0 0;
}

.detail-area .detail-inner .notice {
  margin: 0 0 0 15px;
  font-weight: bold;
  color: #FF0000;
}

.detail-area .detail-inner .tab-menu {
  margin: 30px 0 25px 0;
}

.detail-area .detail-inner .tab-menu .tab-left {
  float: left;
}

.detail-area .detail-inner .tab-menu .tab-left .noclick {
  display: none;
}

.detail-area .detail-inner .tab-menu .tab-left .click {
  display: block;
}

.detail-area .detail-inner .tab-menu .tab-right {
  float: left;
  margin: 0 0 0 25px;
}

.detail-area .detail-inner .tab-menu .tab-right .noclick {
  display: block;
}

.detail-area .detail-inner .tab-menu .tab-right .click {
  display: none;
}

.detail-area .detail-inner #select-p_id {
  display: block;
}

.detail-area .detail-inner #result-area {
  display: none;
}

.detail-area .detail-inner h3 {
  margin: 0;
  padding: 0 0 10px 5px;
  font-weight: bold;
  font-size: 1.3em;
  line-height: 2.2;
  border-bottom: 1px solid #333333;
}

.detail-area .detail-inner h3 img {
  margin: 0 10px 0 0;
}

.detail-area .detail-inner .check {
  margin: 30px 0 0 0;
  padding: 0 0 10px 15px;
  font-size: 1.05em;
  color: #FF0000;
}

.detail-area .detail-inner .check.e2 {
  margin: 0;
}

.detail-area .detail-inner .select-item {
  padding: 25px 0 20px 15px;
  border-top: 1px dashed #AAAAAA;
}

.detail-area .detail-inner .select-item:hover {
  background-color: #EEEEEE;
  cursor: pointer;
}

.detail-area .detail-inner .select-item .left-area {
  float: left;
  width: 370px;
}

.detail-area .detail-inner .select-item.e2 .left-area {
  width: 410px;
}

.detail-area .detail-inner .select-item .left-area .left-inner {
  margin: 0 0 0 28px;
}

.detail-area .detail-inner .select-item label {
  padding: 0 0 0 28px;
  font-weight: bold;
  font-size: 1.0em;
  line-height: 1.5;
  color: #1C64B3;
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.detail-area .detail-inner .select-item.e2 label {
  color: #333333;
}

.detail-area .detail-inner .select-item label:before {
  content: '';
  width: 20px;
  /* ボタンの横幅 */
  height: 20px;
  /* ボタンの縦幅 */
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000000;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.detail-area .detail-inner .select-item .left-area .left-inner .type {
  margin: 0;
  font-size: 1em;
  line-height: 1.5;
}

.detail-area .detail-inner .select-item .left-area .left-inner .type img {
  vertical-align: middle;
}

.detail-area .detail-inner .select-item .left-area .left-inner .price {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.5;
}

.detail-area .detail-inner .select-item .left-area .left-inner .word {
  margin: 0;
  font-weight: bold;
  font-size: 0.90em;
  line-height: 1.5;
}

.detail-area .detail-inner .select-item .left-area .left-inner .detail {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.5;
}

.detail-area .detail-inner .select-item.e2 .left-area .left-inner .detail {
  margin: 10px 0 0 0;
}

.detail-area .detail-inner .select-item .left-area .left-inner .notice {
  margin: 10px 0 0 0;
  font-size: 0.85em;
  line-height: 1.5;
  color: #007CD1;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area {
  margin: 10px 0 0 0;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area .icon {
  margin: 0 5px 0 0;
  padding: 10px 0 0 0;
  width: 75px;
  height: 35px;
  font-weight: bold;
  font-size: 0.75em;
  line-height: 1.2;
  text-align: center;
  color: #FFFFFF;
  float: left;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area .icon.blue {
  background-color: #6186CA;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area .icon.green {
  background-color: #3FC1CD;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area .icon.green.one {
  padding-top: 16px;
  height: 29px;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area .icon.deepgreen {
  background-color: #41B898;
  padding-top: 16px;
  height: 29px;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area .icon.deepgreen.two {
  background-color: #41B898;
  padding-top: 9px;
  height: 36px;
}

.detail-area .detail-inner .select-item .left-area .left-inner .icon-area .icon.orange {
  background-color: #F18072;
}

.detail-area .detail-inner .select-item .right-area {
  margin: 0 10px 0 0;
  float: right;
  width: 310px;
}

.detail-area .detail-inner .select-item.e2 .right-area {
  margin: 0 30px 0 0;
  width: 180px;
}

.detail-area .detail-inner .select-item .right-area p {
  float: right;
  margin-left: 10px;
}

.detail-area .detail-inner .select-item .right-area p img {
  width: 140px;
  height: 140px;
}

.detail-area .detail-inner .select-item.e2 .right-area p img {
  width: 180px;
  height: 180px;
}

.detail-area .detail-inner .select-item input[type="radio"] {
  display: none;
}

.detail-area .detail-inner .select-item input[type="radio"]:checked + label:after {
  content: '';
  width: 10px;
  /* マークの横幅 */
  height: 10px;
  /* マークの縦幅 */
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: #000;
  border-radius: 50%;
}

.detail-area .detail-inner .way {
  margin: 0 0 0 0;
  padding: 30px 0 30px 0;
  border-top: 1px dashed #AAAAAA;
}

.detail-area .detail-inner .way-inner {
  padding: 25px 25px 25px 30px;
  background-color: #E4F2FD;
}

.detail-area .detail-inner .way-inner .left-area {
  float: left;
  width: 400px;
}

.detail-area .detail-inner .way-inner .left-area .title {
  font-weight: bold;
  font-size: 1.0em;
  color: #2357AA;
  line-height: 1.5;
}

.detail-area .detail-inner .way-inner .left-area .comment {
  margin: 10px 0 0 0;
  font-size: 0.9em;
  line-height: 1.6;
}

.detail-area .detail-inner .way-inner .right-area {
  float: right;
  width: 180px;
}

.next-btn {
  margin: 50px auto 0;
  width: 226px;
}

#select-p_id-btn-area {
  display: block;
}

#set-btn-area {
  display: none;
}

/* STEP2 */
.selected-item {
  margin: 0 auto;
  width: 715px;
}

.selected-item p {
  margin: 0 0 0 20px;
  font-size: 1.0em;
  font-weight: bold;
  line-height: 1.4;
}

.selected-item div.table {
  margin: 5px 0 0 0;
  display: table;
  border-top: 1px solid #AAAAAA;
  border-left: 1px solid #AAAAAA;
  width: 715px;
}

.selected-item div.table div.tr {
  display: table-row;
}

.selected-item div.table div.tr div.td {
  display: table-cell;
}

.selected-item div.table div.tr div.td.left {
  padding: 30px 0 30px 20px;
  display: table-cell;
  width: 200px;
  vertical-align: middle;
  background-color: #F3F4F6;
  border-bottom: 1px solid #AAAAAA;
}

.selected-item div.table div.tr div.td.right {
  padding: 15px 0 15px 30px;
  display: table-cell;
  width: 465px;
  border-bottom: 1px solid #AAAAAA;
  border-right: 1px solid #AAAAAA;
}

.selected-item div.table div.tr div.td.right img {
  float: left;
  width: 80px;
  height: 80px;
}

.selected-item div.table div.tr div.td.right .name {
  margin: 10px 0 0 0;
  float: right;
  display: block;
  width: 360px;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.5;
}

.selected-item div.table div.tr div.td.right .type, .selected-item div.table div.tr div.td.right .price {
  float: right;
  display: block;
  width: 360px;
  font-size: 0.9em;
  line-height: 1.5;
}

.btn-area {
  margin: 45px 0 0 0;
}

.btn-area .back-btn {
  margin: 0 0 0 165px;
  width: 226px;
  float: left;
}

.btn-area .next-btn {
  margin: 0 0 0 15px;
  width: 226px;
  float: left;
}

/* STEP3 */
.detail-area .detail-inner .wire-title {
  margin: 0 10px;
  font-weight: bold;
  font-size: 1.4em;
}

.detail-area .detail-inner .search-count-disp {
  border-bottom: 1px solid #333333;
  padding: 0 0 8px 5px;
  font-size: 1.0em;
}

.detail-area .detail-inner .search-count-disp span {
  margin: 0 3px 0 5px;
  font-size: 1.5em;
  font-weight: bold;
  color: #FF0000;
}

div.select-area dl {
  background-color: #E4F2FD;
  margin: 15px 10px 0 0;
  padding: 25px 50px 0;
}

div.select-area dl dt {
  float: left;
}

div.select-area dl dt.length-area {
  background: url(/static/images/product/acc/esecurity/new/icn_length.png) no-repeat left center;
  font-size: 1.1em;
  height: 36px;
  padding: 18px 0 0 80px;
  width: 140px;
  margin-bottom: 15px;
}

div.select-area dl dt.diameter-area {
  background: url(/static/images/product/acc/esecurity/new/icn_diameter.png) no-repeat 20px 5px;
  font-size: 1.1em;
  height: 36px;
  padding: 18px 0 0 80px;
  width: 140px;
  margin-bottom: 15px;
}

div.select-area dl dd {
  float: left;
  height: 42px;
  margin-bottom: 15px;
  padding-top: 12px;
}

div.select-area dl dd select {
  width: 165px;
  height: 27px;
  margin-right: 4px;
  margin-left: 4px;
}

.detail-area .detail-inner .reset-btn {
  margin: 10px 10px 0;
  padding: 0 0 30px 0;
  text-align: right;
}

.detail-area .detail-inner .search-count-disp {
  display: none;
}

.detail-area .detail-inner #result-area .select-item {
  margin: 0;
  padding: 25px 0 20px 15px;
  border-top: none;
}

.detail-area .detail-inner #result-area .select-item + .select-item {
  border-top: 1px dashed #AAAAAA;
}

.detail-area .detail-inner #result-area .select-item .left-area {
  width: 490px;
}

.detail-area .detail-inner #result-area .select-item .right-area {
  width: 140px;
}

#result-area .no-result {
  margin: 30px 0 0 0;
  padding: 0 0 30px 0;
  font-size: 1.2em;
  text-align: center;
}

/********* STEP 4 **********/
.detail-area .detail-inner .key-title {
  margin: 0 10px;
  font-weight: bold;
  font-size: 1.4em;
}

.key-area div.table {
  margin: 20px 0 0 0;
  display: table;
  border: 1px solid #AAAAAA;
  width: 715px;
}

.key-area div.table + div.table {
  margin: 0;
  border: 1px solid #AAAAAA;
  border-top: none;
}

.key-area div.table div.tr {
  display: table-row;
}

.key-area div.table div.tr div.td {
  display: table-cell;
}

.key-area div.table div.tr div.td.left {
  padding: 30px 0 30px 20px;
  display: table-cell;
  width: 160px;
  background-color: #E4F2FD;
  border-right: 1px solid #AAAAAA;
  vertical-align: middle;
}

.key-area div.table div.tr div.td.right {
  padding: 15px 0 15px 30px;
  display: table-cell;
  width: 148px;
  vertical-align: middle;
}

.key-area div.table div.tr div.td.right img {
  float: left;
  width: 80px;
  height: 80px;
}

.key-area div.table div.tr div.td.right .name {
  margin: 10px 0 0 0;
  float: right;
  display: block;
  width: 360px;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.5;
}

.key-area div.table div.tr div.td.right .type, .key-area div.table div.tr div.td.right .price {
  float: right;
  display: block;
  width: 360px;
  font-size: 0.9em;
  line-height: 1.5;
}

.key-area .detail-area .detail-inner label {
  padding: 1px 0 0 28px;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.5;
  color: #1C64B3;
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.key-area .detail-area .detail-inner label:before {
  content: '';
  width: 20px;
  /* ボタンの横幅 */
  height: 20px;
  /* ボタンの縦幅 */
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000000;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.key-area .detail-area .detail-inner .table label {
  color: #333333;
}

.key-area .detail-area .detail-inner input[type="radio"] {
  display: none;
}

.key-area .detail-area .detail-inner input[type="radio"]:checked + label:after {
  content: '';
  width: 10px;
  /* マークの横幅 */
  height: 10px;
  /* マークの縦幅 */
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: #000;
  border-radius: 50%;
}

.key-area .detail-area .detail-inner #key-no-area, .key-area .detail-area .detail-inner #masterkey-area {
  display: none;
}

.key-area .detail-area .detail-inner .reset-area {
  margin: 10px 10px 0;
  padding: 0 0 30px 0;
}

.key-area .detail-area .detail-inner .reset-area .masterkey-notice {
  margin: 4px 0 0 0;
  padding: 0;
  float: left;
  font-size: 0.85em;
  color: #EE0000;
}

.key-area .detail-area .detail-inner .reset-area .reset-btn {
  margin: 0;
  padding: 0;
  float: right;
}

/********* STEP 5 **********/
.total-title {
  margin: 0 0 10px 10px;
  font-size: 1em;
  font-weight: bold;
}

.total-item {
  margin: 0 auto;
  width: 783px;
}

.total-item div.table {
  margin: 5px 0 0 0;
  display: table;
  border-top: 1px solid #AAAAAA;
  border-left: 1px solid #AAAAAA;
  width: 783px;
}

.total-item div.table div.tr {
  display: table-row;
}

.total-item div.table div.tr div.th, .total-item div.table div.tr div.td {
  display: table-cell;
  border-bottom: 1px solid #AAAAAA;
  border-right: 1px solid #AAAAAA;
}

.total-item div.table div.tr div.th {
  background-color: #E4F2FD;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
}

.total-item div.table div.tr div.td {
  background-color: #FFFFFF;
  font-weight: normal;
}

.total-item div.table div.tr div.td.parts {
  padding: 20px 0 20px 20px;
  display: table-cell;
  width: 130px;
  vertical-align: middle;
}

.total-item div.table div.tr div.td.parts.total {
  font-weight: bold;
}

.total-item div.table div.tr div.td.hinban {
  padding: 20px 20px 20px 30px;
  display: table-cell;
  width: 433px;
  vertical-align: middle;
}

.total-item div.table div.tr div.td.hinban .icon-area {
  margin: 10px 0 0 0;
  float: right;
  width: 330px;
}

.total-item div.table div.tr div.td.hinban .icon-area .icon {
  margin: 0 5px 5px 0;
  padding: 10px 0 0 0;
  width: 75px;
  height: 35px;
  font-weight: bold;
  font-size: 0.75em;
  line-height: 1.2;
  text-align: center;
  color: #FFFFFF;
  float: left;
}

.total-item div.table div.tr div.td.hinban .icon-area .icon.blue {
  background-color: #6186CA;
}

.total-item div.table div.tr div.td.hinban .icon-area .icon.green {
  background-color: #3FC1CD;
}

.total-item div.table div.tr div.td.hinban .icon-area .icon.green.one {
  padding-top: 16px;
  height: 29px;
}

.total-item div.table div.tr div.td.hinban .icon-area .icon.deepgreen {
  background-color: #41B898;
  padding-top: 16px;
  height: 29px;
}

.total-item div.table div.tr div.td.hinban .icon-area .icon.deepgreen.two {
  background-color: #41B898;
  padding-top: 10px;
  height: 35px;
}

.total-item div.table div.tr div.td.hinban .icon-area .icon.orange {
  background-color: #F18072;
}

.total-item div.table div.tr div.td.price {
  padding: 30px 30px 30px 0px;
  display: table-cell;
  width: 120px;
  vertical-align: middle;
  text-align: right;
  font-size: 1.1em;
}

.total-item div.table div.tr div.td.price.total {
  font-weight: bold;
}

.total-item div.table div.tr div.td.hinban img {
  float: left;
  width: 80px;
  height: 80px;
}

.total-item div.table div.tr div.td.hinban .name {
  margin: 0 0 0 0;
  float: right;
  display: block;
  width: 330px;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.5;
}

.total-item div.table div.tr div.td.hinban .type {
  float: right;
  display: block;
  width: 330px;
  font-size: 0.9em;
  line-height: 1.5;
}

.total-item .mitsumori-notice {
  margin: 15px 0 0 20px;
  padding: 0;
  font-size: 0.85em;
  color: #EE0000;
}

.total-item .masterkey-notice {
  margin: 5px 0 0 20px;
  padding: 0;
  font-size: 0.85em;
  color: #EE0000;
}

.calc-area {
  margin: 60px 0 0 0;
}

.calc-area .calc-title {
  margin: 0 0 0 20px;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.4;
}

.calc-area .calc-inner {
  margin: 10px 0 0 0;
  padding: 20px 30px 20px 60px;
  border: 1px solid #AAAAAA;
}

.calc-area .calc-inner input {
  float: left;
  text-align: right;
  font-size: 1.3em;
  padding: 10px 10px 10px 0;
  width: 200px;
  ime-mode: disabled;
}

.calc-area .calc-inner .set {
  margin: 30px 0 0 10px;
  float: left;
  font-size: 0.9em;
}

.calc-area .calc-inner #total-price {
  margin: 15px 0 0 0;
  float: right;
  font-size: 1.5em;
  font-weight: bold;
  color: #EE0000;
}

.list-area {
  margin: 15px 0 0 0;
}

.list-area .btn-look, .list-area .btn-add {
  margin: 0 0 0 10px;
  float: right;
  width: 188px;
}

.mitsumori-area {
  margin: 45px 0 0 0;
  padding: 35px 0 30px 0;
  background-color: #F2F2F2;
}

.mitsumori-area .back-btn {
  margin: 0 0 0 110px;
  width: 226px;
  float: left;
}

.mitsumori-area .mitsumori-btn {
  margin: 0 0 0 15px;
  width: 305px;
  float: left;
}

/* サイドメニューグレー部分 */
h5.round {
  font-size: 0.9em;
  padding: 9px 7px 5px 8px;
  font-weight: normal;
  text-align: center;
  letter-spacing: -0.5px;
  color: #FFFFFF;
  background: #6F6F6F;
}

body.mac h5.round {
  font-size: 0.75em;
}

#sidemenu {
  float: left;
  padding: 0px 0 8px 0px;
  width: 180px;
}

#sidemenu a.side_banner {
  display: block;
  margin-bottom: 10px;
}

ul.naviR {
  zoom: 100%;
  padding: 0px 0px 0px 0px;
  border: 1px solid #ADADAD;
  margin-bottom: 10px;
}

ul.naviR li {
  margin: 0px 3px 0px 3px;
  text-indent: 0;
  zoom: 100%;
  padding: 5px 0 5px 5px;
  font-size: 0.8em;
}

body.mac ul.naviR li {
  font-size: 0.9em;
}

ul.naviR li + li {
  border-top: 1px dotted #ADADAD;
}

ul.naviR li img {
  padding: 0px 0 0 0px;
  margin: 5px 0px 0 -2px;
  float: left;
}

body.mac ul.naviR li img {
  margin: 7px 0px 0 -2px;
}

ul.naviR li a {
  display: block;
  margin: 2px 2px 0 9px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  font-size: 0.95em;
}

p#usbBn img {
  display: block;
  margin: 0 0 5px 0;
}

div#bot {
  clear: both;
}

div#bot p {
  text-align: left;
  margin: 25px auto 0 auto;
  padding: 25px 0 50px 225px;
}

#side-list-btn {
  display: none;
}

/*---------------------------
フロート解除
---------------------------*/
.clfx {
  display: inline-block;
}

.clfx:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  max-height: 0;
  visibility: hidden;
}

* html .clfx {
  height: 1%;
}

.clfx {
  display: block;
}