@charset "UTF-8";
#container {
  width: 100%;
}

#wrap-container {
  width: 1200px;
}

#wrap-container #container h1#ttl {
  margin-bottom: 0;
}

#main-area-content {
  position: static !important;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, Meiryo, "メイリオ", "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

#main-content-inner {
  display: flex;
  width: 1200px;
  margin: 0 auto;
}

#dockingstation-table {
  width: 100%;
}

/* ページ内リンク */
#main-banner-area {
  display: flex;
  justify-content: space-between;
  width: 93%;
  margin: 28px auto 25px;
}

#main-banner-area .banner-item {
  width: 32%;
  position: relative;
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

#main-banner-area .banner-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 8px;
  border: 1px solid #194eaa;
  text-align: center;
  padding: 3% 16.6% 3.1% 0;
  box-sizing: border-box;
  transition: 0.3s;
}

#main-banner-area .banner-item a:hover {
  color: #194eaa;
  border: 1px solid #194eaa;
  opacity: 0.6;
}

#main-banner-area .banner-item .banner-item-text {
  margin: 3% 0 0 1.4%;
  line-height: 1.2;
  text-align: left;
}

#main-banner-area .banner-item .banner-item-text .banner-item-bold {
  font-size: 1.4666em;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #333;
  line-height: 1.18;
}

#main-banner-area .banner-item .banner-item-text .banner-item-desc {
  font-size: 0.8666em;
  color: #333;
  margin: 2% 0 0;
}

#main-banner-area .banner-item::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 3px #333;
  border-right: solid 3px #333;
  position: absolute;
  left: 260px;
  right: 0;
  bottom: 0;
  top: 0;
  transform: rotate(135deg);
  margin: auto;
}

#main-banner-area .banner-item.monitor-3 a {
  padding: 5% 9% 5.3% 0;
}

#main-banner-area .banner-item.monitor-3 a img {
  width: auto;
  height: 60px;
}

.banner-item.monitor-2 a img,
.banner-item.monitor-1 a img {
  width: auto;
  height: 75px;
}

.search-link {
  margin: 14% 0 0;
  display: block;
}

.search-link a {
  display: block;
  width: 50.9%;
  margin: 0 auto 0;
}

.search-link a img {
  width: 100%;
}

.search-link-bottom {
  display: none;
}

/*--------------------------------
    結果表示
--------------------------------*/
#result-area {
  width: 100%;
  margin: 65px auto 0;
}

#result-area .dockingstation-list-header {
  padding: 0 0 0 0.8%;
  position: relative;
  margin: 10.3% 0 0.4%;
}

#result-area .dockingstation-list-header:first-of-type {
  margin-top: 0;
}

#result-area .dockingstation-list-header img.list-header-tag {
  max-width: 100%;
  display: inline-block;
  vertical-align: -20px;
}

#result-area .dockingstation-list-header h2 {
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 0.8%;
}

#result-area .dockingstation-list-header img {
  margin: 0 0 0 auto;
}

#result-area table.dockingstation-list {
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
  position: relative;
}

#result-area table.dockingstation-list thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

#result-area table.dockingstation-list th,
#result-area table.dockingstation-list td {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #666666;
  padding: 0;
}

#result-area table.dockingstation-list th:last-child,
#result-area table.dockingstation-list td:last-child {
  border-right: 0;
}

#result-area table.dockingstation-list th {
  padding: 1% 2% 1%;
}

#result-area table.dockingstation-list p.note {
  color: #f00;
  font-weight: normal;
  font-size: 0.9em;
  margin-top: 3px;
}

#result-area table.dockingstation-list th.product {
  background-color: #404040;
  color: #fff;
  width: 160px;
  font-size: 1em;
  text-align: center;
}

#result-area table.dockingstation-list th.disp-output {
  background-color: #531f87;
  color: #fff;
  width: 465px;
  font-size: 1em;
  text-align: center;
}

#result-area table.dockingstation-list th.usbhub-port {
  background-color: #1f4e87;
  color: #fff;
  width: 195px;
  font-size: 1em;
  text-align: center;
}

#result-area table.dockingstation-list th.other-port {
  background-color: #1f7d87;
  color: #fff;
  width: 385px;
  font-size: 1em;
  text-align: center;
}

#result-area table.dockingstation-list td.product-item {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  background: #f5f5f5;
  position: relative;
}

#result-area table.dockingstation-list td.product-item .item-detail {
  padding: 0 0 5%;
}

#result-area table.dockingstation-list td.product-item .status-icon {
  position: absolute;
  top: 7px;
  left: 9px;
}

#result-area table.dockingstation-list td.product-item a {
  width: 75.32%;
  margin: 0 auto;
  display: block;
}

#result-area table.dockingstation-list td.product-item a img {
  width: 100%;
  mix-blend-mode: multiply;
}

#result-area table.dockingstation-list td.product-item .p-no-price {
  padding-left: 0.6em;
}

#result-area table.dockingstation-list td.product-item .p-no a {
  margin: 0;
  display: block;
  font-size: 0.9em;
  line-height: 1.6;
  font-weight: bold;
  position: relative;
  padding: 0 0 0 1em;
  background: url(/static/images/seihin_joho/online-medicine/yaji_maru_bl.png) no-repeat 0 0;
  background-size: 12px;
  background-position-y: 3px;
  width: -webkit-calc(100% - 1em);
  width: calc(100% - 1em);
  letter-spacing: -0.02em;
}

#result-area table.dockingstation-list td.product-item .price {
  font-size: 0.8666em;
  margin-left: 1em;
}

#result-area table.dockingstation-list .disp-output-item {
  background-color: #f5f2f8;
}

#result-area table.dockingstation-list .usbhub-port-item {
  background-color: #f2f4f8;
}

#result-area table.dockingstation-list .disp-output-inner {
  display: flex;
  justify-content: space-around;
}

#result-area table.dockingstation-list .other-port-item {
  background-color: #f2f7f8;
}

#result-area table.dockingstation-list .disp-icon {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-right: 1px solid #ccc;
  padding: 4% 0%;
  width: 38%;
}

#result-area table.dockingstation-list .disp-icon img {
  width: 43px;
  margin: 0 1%;
}

#result-area table.dockingstation-list .disp-icon span {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.9333em;
  font-weight: bold;
  margin: 7% 0 0;
}

#result-area table.dockingstation-list .icon-area {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 4% 2%;
}

#result-area table.dockingstation-list .icon-area .icon {
  display: block;
  width: 72px;
  text-align: center;
  line-height: 1.2;
  font-weight: bold;
}

#result-area table.dockingstation-list .icon-area .icon img {
  margin: 0 0 15%;
}

#result-area table.dockingstation-list .icon-area .icon img.usbhub-port-typec {
  margin: 5% 0 16%;
}

#result-area table.dockingstation-list .other-port-inner {
  display: flex;
  justify-content: center;
  text-align: center;
}

#result-area table.dockingstation-list .other-port-inner .icon {
  display: block;
  width: 76px;
  margin: 0 2%;
  font-weight: bold;
  line-height: 1.3;
}

#result-area table.dockingstation-list .other-port-inner .icon img {
  width: 73.7%;
  margin: 0 auto 11%;
  display: block;
}

#result-area table.dockingstation-list .port-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63%;
}

#result-area table.dockingstation-list .port-icon span {
  display: block;
  text-align: center;
  line-height: 1.2;
  font-weight: bold;
}

#result-area table.dockingstation-list .port-icon img {
  display: block;
  margin: 0 auto 8%;
}

#result-area .dockingstation-list-first-table table.dockingstation-list td.unit-ttl {
  padding: 2.6% 0 81px;
}

.note1-text,
.note2-text,
.note3-text {
  color: #ff0000;
  font-size: 0.8666em;
  margin: 0.8% 0 0 1em;
}

.recommended-link-ttl {
  font-size: 2.1333em;
  line-height: 1.5;
  font-weight: bold;
  border-bottom: 3px solid;
  margin: 6.3% 0 0;
  padding: 0 0 0.2% 1%;
}

.recommended-link {
  display: flex;
  justify-content: space-between;
  width: 92%;
  margin: 2.7% auto 0;
  flex-wrap: wrap;
}

.recommended-link a {
  display: block;
  width: 49%;
  position: relative;
  margin-bottom: 20px;
}

.recommended-link a::before {
  content: '';
  position: absolute;
  border-top: solid 3px #888888;
  border-right: solid 3px #888888;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  right: 29px;
  margin: auto;
}

.recommended-link a .link-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;
  padding: 0 5%;
  border: 1px solid #1b4da2;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.recommended-link a .link-inner .search-icon {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.recommended-link a .link-inner .search-text {
  font-size: 1.333em;
  font-weight: bold;
  line-height: 1.25;
  color: #1b4da2;
  margin: 0 0 0 4%;
}

.recommended-link a .link-inner .search-text .search-sub {
  display: block;
}

.recommended-link a .link-inner .search-text .search-main {
  display: block;
  font-size: 1.366em;
  line-height: 1;
}

/* 関連製品 */
.kanren-area {
  width: 100%;
  margin: 97px auto;
}

.kanren-area h3 {
  background-color: #3b3b3b;
  font-size: 1.55em;
  letter-spacing: .05em;
  text-align: left;
  margin: 0 0 2%;
  padding: 1.5% 0 1.3% 2%;
  color: #ffffff;
}

.kanren-area ul {
  display: flex;
  flex-wrap: wrap;
}

.kanren-area li {
  width: 18.97%;
  margin: 0 2% 1.4% 0;
}

.kanren-area li:nth-of-type(5n) {
  margin: 0 0 1.4%;
}

.kanren-area li a {
  display: block;
}

.kanren-area li img {
  width: 100%;
  border: 1px solid #cfcfcf;
}