@charset "UTF-8";
/* スピーカーフォン対応表 */
#speakerphone-list-outer {
  margin: 50px 0 40px;
}

#speakerphone-list-outer h4 {
  border-left: 4px solid #174dad;
  font-size: 1.8em;
  font-weight: bold;
  padding-bottom: 4px;
  background-color: #fff;
  color: #000;
  padding: 8px 15px 3px 10px;
  margin-bottom: 12px;
  letter-spacing: 0;
}

#speakerphone-list-outer > .hyou.box {
  margin-top: -57px;
}

#speakerphone-list-outer .note-att {
  line-height: 1.4;
  margin: 10px 0 0;
}

#speakerphone-list {
  padding-bottom: 0;
  /* リストの中 */
  /* スライド */
  /* slick setting */
}

#speakerphone-list .list-head {
  display: flex;
  z-index: 1;
  position: relative;
}

#speakerphone-list .list-head .list-label {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#speakerphone-list .list-head .list-label ul {
  text-align: center;
  width: 190px !important;
}

#speakerphone-list .list-head .list-label ul li {
  width: 190px;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-top: 0;
  box-sizing: border-box;
  height: 150px;
  position: relative;
  font-size: 0.9em;
  text-align: center;
}

#speakerphone-list .list-head .list-label ul li.head-cell {
  height: 30px;
}

#speakerphone-list .list-head .list-label ul li.main-img {
  height: 175px;
}

#speakerphone-list .list-head .list-label ul li span {
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
  width: 100%;
}

#speakerphone-list .list-head table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 190px !important;
  height: 205px;
}

#speakerphone-list .list-head table colgroup,
#speakerphone-list .list-head table tbody {
  width: 190px !important;
}

#speakerphone-list .list-head table td {
  width: 190px !important;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-top: 0;
  box-sizing: border-box;
  height: 150px;
  position: relative;
  font-size: 0.9em;
  text-align: center;
}

#speakerphone-list .list-head table td.head-cell {
  height: 30px;
}

#speakerphone-list .list-head table td.main-img {
  height: 175px;
  border-bottom: 0;
}

#speakerphone-list .list-head .list-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 94px;
  left: 169px;
  background-color: #a0a0a0;
  border-radius: 40px;
  display: none;
}

#speakerphone-list .list-head .list-btn p {
  position: relative;
  width: 100%;
  height: 100%;
}

#speakerphone-list .list-head .list-btn p::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 15px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#speakerphone-list .list-head .list-btn.right {
  top: 94px;
  right: 0;
  left: unset;
}

#speakerphone-list .list-head .list-btn.right p::before {
  left: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#speakerphone-list .list-head .list-product {
  display: flex;
}

#speakerphone-list .list-head .list-product ul {
  width: 771px;
  margin: 0 auto;
  padding: 0;
}

#speakerphone-list .list-head .list-product ul li {
  width: 257px !important;
  border-top: 1px solid #ccc;
  border-right: 1px solid;
  border-bottom: 1px solid;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  padding: 0.4% 0 1%;
  height: 150px;
}

#speakerphone-list .list-head .list-product ul li img {
  width: 80px;
  height: auto;
  margin: 0 auto;
}

#speakerphone-list .list-head .list-product ul li a.sku {
  font-size: 0.85em;
  margin: 6% 0 0;
  display: block;
}

#speakerphone-list .list-head .list-product ul li .price {
  font-size: 0.9em;
  margin: 3% 0 0;
  display: block;
}

#speakerphone-list .box-inner {
  display: flex;
}

#speakerphone-list .box-inner ul {
  border-top: 1px solid #ccc;
  margin-top: -1px;
}

#speakerphone-list .box-inner .list-label ul li {
  background-color: #f7f7f7;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  box-sizing: border-box;
}

#speakerphone-list .box-inner .list-label table {
  border-collapse: separate;
  table-layout: fixed;
  width: 190px;
  border-spacing: 0;
}

#speakerphone-list .box-inner .list-label table col.vl-cell-grp {
  width: 24px;
}

#speakerphone-list .box-inner .list-label table td {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-top: 0;
  box-sizing: border-box;
  position: relative;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}

#speakerphone-list .box-inner .list-label table td.bt0 {
  border-top: 0;
}

#speakerphone-list .box-inner .list-label table td.bb2 {
  border-bottom: 2px solid #ccc;
}

#speakerphone-list .box-inner .list-label table td.vl-cell {
  writing-mode: vertical-rl;
  border-right: 0;
  letter-spacing: 1px;
}

#speakerphone-list .box-inner .list-label table td.vl-cell + td {
  width: 166px;
}

#speakerphone-list .box-inner .list-label table td.vl-cell.mic {
  background-color: #99d7f6;
}

#speakerphone-list .box-inner .list-label table td.vl-cell.speaker {
  background-color: #c8f699;
}

#speakerphone-list .main-list {
  display: flex;
  width: 771px;
  border-bottom: 1px solid #ccc;
}

#speakerphone-list .main-list li {
  width: 257px !important;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
}

#speakerphone-list .main-list li.c-accent {
  background-color: #ffeb00;
  font-weight: bold;
}

#speakerphone-list .main-list.slider-nav li {
  border-top: 1px solid #ccc;
  border-bottom: 0;
}

#speakerphone-list .main-list li.head-cell {
  height: 30px;
}

#speakerphone-list .main-list li.head-cell span {
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
  width: 100%;
}

#speakerphone-list .main-list li.main-img {
  height: 175px;
  text-align: center;
  background-color: #fff;
}

#speakerphone-list .main-list li.main-img img {
  width: 110px;
  height: auto;
  display: block;
  margin: 0 auto 2%;
}

#speakerphone-list .main-list li.main-img a {
  display: block;
  margin: 0;
}

#speakerphone-list .main-list li.main-img a.sku {
  font-size: 0.85em;
  margin: 6% 0 0;
  display: block;
}

#speakerphone-list .main-list li.main-img .price {
  font-size: 0.9em;
  margin: 3% 0 0;
  display: block;
}

#speakerphone-list ul.list-product {
  text-align: center;
  width: 257px !important;
}

#speakerphone-list ul.list-product .list-label {
  border-top: 0;
}

#speakerphone-list ul.list-product li {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: relative;
  width: 100%;
  margin: 0;
}

#speakerphone-list ul.list-product li.bb0 {
  border-bottom: 0;
}

#speakerphone-list ul.list-product li.bb2 {
  border-bottom: 2px solid #ccc;
}

#speakerphone-list ul.list-product li span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
}

#speakerphone-list ul.list-product li.fw-bold {
  font-weight: bold;
}

#speakerphone-list ul.list-product li.al-left span {
  text-align: left;
  vertical-align: middle;
  padding-left: 1em;
  padding-top: 1em;
  bottom: auto;
}

#speakerphone-list .list-label {
  width: 190px;
}

#speakerphone-list .list-label ul li:not(.first-list),
#speakerphone-list ul.list-product li:not(.first-list) {
  font-size: 0.9em;
  height: 30px;
  box-sizing: border-box;
  padding: 5%;
  position: relative;
  text-align: center;
}

#speakerphone-list .list-label table td.line-feature,
#speakerphone-list .list-label ul li.line-feature,
#speakerphone-list ul.list-product li.line-feature {
  height: 85px;
}

#speakerphone-list .list-label table td.line-users,
#speakerphone-list .list-label ul li.line-users,
#speakerphone-list ul.list-product li.line-users {
  height: 145px;
}

#speakerphone-list .list-label table td.line-power,
#speakerphone-list .list-label ul li.line-power,
#speakerphone-list ul.list-product li.line-power {
  height: 80px;
}

#speakerphone-list .list-label table td.line-size,
#speakerphone-list .list-label ul li.line-size,
#speakerphone-list ul.list-product li.line-size {
  height: 100px;
}

#speakerphone-list .list-label ul li span,
#speakerphone-list ul.list-product li span {
  height: fit-content;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 1.4;
}

#speakerphone-list .list-btn.background-none {
  background: none;
}

#speakerphone-list .list-btn .first-list span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
  width: fit-content;
  left: 0;
  right: 0;
  cursor: pointer;
}

#speakerphone-list .js-fix.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#speakerphone-list .hyou.box-1 {
  margin: 5% 0 0;
}

#speakerphone-list .hyou h2.title {
  border-left: 4px solid #174dad;
  font-weight: bold;
  padding-bottom: 4px;
  background-color: #fff;
  color: #000;
  padding: 8px 15px 3px 10px;
  letter-spacing: 1px;
  font-size: 1.6em;
  display: inline-block;
  margin: 0 0 1% 0.4%;
}

#speakerphone-list .hyou h2.title + p {
  display: inline-block;
  font-size: 0.9em;
  margin: 0 0 0 2%;
}

#speakerphone-list .slider img {
  height: auto;
  width: 100%;
}

#speakerphone-list .slick-prev::before,
#speakerphone-list .slick-next::before {
  width: 40px;
  height: 40px;
  background: #a0a0a0;
  border-radius: 40px;
  display: block;
  opacity: 1;
  font-size: 0;
}

#speakerphone-list .slick-prev.slick-disabled::before,
#speakerphone-list .slick-next.slick-disabled::before {
  background-color: #e0e0e0;
}

#speakerphone-list .slick-prev::after {
  content: "";
  display: block;
  position: relative;
  top: -28px;
  left: 15px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(-135deg);
}

#speakerphone-list .slick-next::after {
  content: "";
  display: block;
  position: relative;
  top: -28px;
  left: 10px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#speakerphone-list .slick-prev,
#speakerphone-list .slick-next {
  top: 54% !important;
  z-index: 100;
}

#speakerphone-list .slick-prev {
  left: -20px;
}

#speakerphone-list .slick-next {
  right: 0;
}

#speakerphone-list .slick-track {
  min-width: 2196px !important;
}

#speakerphone-list .type-name .slick-prev,
#speakerphone-list .type-name .slick-next {
  display: none !important;
}

#speakerphone-list .sidebar__inner {
  z-index: 100;
  padding-top: 57px;
}

/* 中間ページ用 */
#speaker-list-area {
  font-size: 0.95em;
}

#speaker-list-area #speakerphone-list-outer > .hyou.box {
  margin-top: 0;
}

#speaker-list-area #speakerphone-list .sidebar__inner {
  padding-top: 0;
}