﻿.block-common-header--outer {
  top: 0;
  /* transition: top .3s; */
}

/* スクロール後のスタイル */
.block-common-header--outer.isnoscroll {
  position: fixed;
  background: #f2f2f2;
  width: 100vw;
  top: 82px;
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
  padding-top: 24px;
}

.block-common-header--outer.isnoscroll .block-common-search {
  display: none;
}

.block-common-header--outer.isnoscroll .block-brand-detail--header-inner--bnr {
  display: none;
}

.block-common-header--outer.black {
  background: #000;
}

.block-common-header--outer.daiv {
  background: #333;
}

.block-brand-detail--header {
  position: relative;
}

.block-brand-detail--header-tab-box {
  width: 100%;
  position: absolute;
}

.page-brand--mouse .block-brand-detail--header-tab-box {
    box-shadow: 0 6px 6px rgb(0 0 0 / 10%); /* 211202 */
}

.page-brand--mousepro .block-brand-detail--header-tab-box {
    box-shadow: 0 6px 6px rgb(0 0 0 / 10%); /* 211202 */
}

.page-brand--mouse .block-brand-detail--header-tab-box,
.page-brand--mousepro .block-brand-detail--header-tab-box {
  background-color: #f2f2f2;
}

.page-brand--g-tune .block-brand-detail--header-tab-box {
  background-color: #000;
}

.page-brand--daiv .block-brand-detail--header-tab-box {
  background-color: #333;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%); /* 211202 */
}

.page-brand--iiyama .block-brand-detail--header-tab-box {
  background-color: #eaeef2;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%); /* 211202 */
}

.block-brand-detail--header-tabs {
  max-width: 1200px;
  margin: 0 auto;
}

.block-brand-detail--header-tab {
  display: none;
}

.block-brand-detail--header-tab.center {
  justify-content: center;
}

.block-brand-detail--header-tab.active {
  display: flex;
  padding: 24px 0;
  gap: 80px;
}

.block-brand-detail--header-tab-content-title {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.5;
  color: #000;
}

.block-brand-detail--header-tab-content-title.white {
  color: #fff;
}

.block-brand-detail--header-tab-content-uls {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
}

.block-brand-detail--header-tab-content-lists {
  max-width: 155px;
}

.block-brand-detail--header-tab-content-lists--many {
  display: flex;
  gap: 40px;
}

.block-brand-detail--header-tab-content-list {
  margin: 0 0 16px;
  line-height: 1;
}

.block-brand-detail--header-tab-content-list a {
  font-size: 14px;
  color: #000;
  word-wrap: break-word;
}

.block-brand-detail--header-tab-content-list.white a {
  color: #fff;
}

.page-brand--iiyama .block-brand-detail--header-logo img {
  width: 120px;
}

.page-brand--mouse .block-brand-detail--header-nav-list.toggle a,
.page-brand--g-tune .block-brand-detail--header-nav-list.toggle a,
.page-brand--daiv .block-brand-detail--header-nav-list.toggle a,
.page-brand--mousepro .block-brand-detail--header-nav-list.toggle a,
.page-brand--iiyama .block-brand-detail--header-nav-list.toggle a {
  position: relative;
}

.block-brand-detail--header-nav-list a .icon-arrow-bottom {
  display: inline-block;
  font-size: 9px;
  margin: 0 0 0 12px;
  transition: .3s;
}

.block-brand-detail--header-nav-list a.active .icon-arrow-bottom {
  transform: rotate(180deg)
}

.page-brand--mousepro .block-brand-detail--header-nav-list a .icon-arrow-bottom {
  margin: 0 0 0 8px;
}

.page-brand--mousepro .block-brand-detail--header-nav-list a {
  font-size: 12px;
}

.page-brand--mouse .block-brand-detail--header-nav-list.toggle a.active {
  background-color: #FEF000;
  text-decoration: none;
}

.page-brand--g-tune .block-brand-detail--header-nav-list.toggle a.active {
  background-color: #D70108;
  text-decoration: none;
}

.page-brand--daiv .block-brand-detail--header-nav-list.toggle a.active {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

.page-brand--mousepro .block-brand-detail--header-nav-list.toggle a.active {
  background-color: #0061A2;
  text-decoration: none;
  color: #fff;
}

.page-brand--iiyama .block-brand-detail--header-nav-list.toggle a.active {
  background-color: #004098;
  text-decoration: none;
  color: #fff;
}

/* 四角ボタン */
.page-brand--g-tune .block-brand-detail--header-nav-list.square--red a {
  border-radius: 5px;
  background-color: #D70108;
  position: relative;
  padding: 0.8em 1.2em 0.8em 0.8em !important;
}

.page-brand--daiv .block-brand-detail--header-nav-list.square--daiv a {
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  color: #000;
  padding: 0.8em 1.2em 0.8em 0.8em !important;
}

.page-brand--g-tune .block-brand-detail--header-nav-list.square--red a::after,
.page-brand--daiv .block-brand-detail--header-nav-list.square--daiv a::after {
  display: block;
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: 5px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 4px;
}

.page-brand--g-tune .block-brand-detail--header-nav-list.square--red a::after {
  border-color: transparent transparent transparent #ffffff;
}

.page-brand--daiv .block-brand-detail--header-nav-list.square--daiv a::after {
  border-color: transparent transparent transparent #000;
}

/* 画像あり */
.block-brand-detail--header-tab-content--with-image {
  display: flex;
  gap: 16px;
}

.block-brand-detail--header-tab-content-image {
  width: 140px;
  height: 140px;
  background-color: #fff;
}

/* 画像あり */

/* 画像なし */
.block-brand-detail--header-tab--no-image.active {
  gap: 160px;
}

/* 画像なし */

/* 画像あり２行 */
.block-brand-detail--header-tab-contents--with-image {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.block-brand-detail--header-tab-contents--with-image .block-brand-detail--header-tab-content-title {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.block-brand-detail--header-tab-content-image--multi {
  background-color: #fff;
}

.block-brand-detail--header-tab-content-image--multi img {
  width: 80px;
  height: 80px;
}

/* 画像ありタイトルのみ */
.block-brand-detail--header-tab-content-y_center {
  display: flex;
  align-items: center;
}

/* 個別ページ */
/* mousePro */
.page-brand--mousepro .block-brand-detail--header {
  margin: 0 0 30px;
}

.page-brand--mousepro .block-brand-detail--header-nav-btn a {
  font-size: 12px;
  position: relative;
}

.page-brand--mousepro .block-brand-detail--header-nav-btn a::after {
  display: block;
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: 7px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 4px;
  border-color: transparent transparent transparent #ffffff;
}

/* iiyama */
.page-brand--iiyama .block-brand-detail--header-nav-btn a {
  font-size: 12px;
  position: relative;
}

.page-brand--iiyama .block-brand-detail--header-nav-btn a::after {
  display: block;
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: 7px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 4px;
  border-color: transparent transparent transparent #ffffff;
}

/* IE対応 */
@media all and (-ms-high-contrast: none) {
  .block-brand-detail--header-tab-content-ul {
    margin-right: 80px;
  }

  .block-brand-detail--header-tab-content--with-image {
    margin: 0 80px 0 0;
  }

  .block-brand-detail--header-tab-content--with-image.last {
    margin: 0;
  }

  .block-brand-detail--header-tab-content-image {
    margin-right: 16px;
  }

  .page-brand--daiv .block-brand-detail--header-tab-content-image--multi,
  .page-brand--iiyama .block-brand-detail--header-tab-content-image--multi {
    margin: 0 16px 24px 0;
  }

  .page-brand--daiv .block-brand-detail--header-tab-content-image--multi~a,
  .page-brand--iiyama .block-brand-detail--header-tab-content-image--multi~.block-brand-detail--header-tab-content-y_center {
    margin-top: -24px;
  }

  .page-brand--mousepro .block-brand-detail--header-logo,
  .page-brand--iiyama .block-brand-detail--header-logo {
    display: inline-block;
  }

  .page-brand--mousepro .block-brand-detail--header-tab-content {
    margin-right: 80px;
  }
}










/* 追加css */
.block-brand-detail--header-tab.active {
  justify-content: center;
}

/* .block-brand-detail--header-tab-content-image--multi.topmenu {
  padding-top: 20px;
} */

.page-brand--mouse .block-brand-detail--header-tab-content-lists,
.page-brand--iiyama .block-brand-detail--header-tab-content-lists {
  max-width: 200px;
}

.block-brand-detail--header-tab-content-image--multi {
  text-align: center;
  padding-top: 20px;
}

.page-brand--mouse .block-brand-detail--header-tab-content-image--multi,
.page-brand--mousepro .block-brand-detail--header-tab-content-image--multi {
    background-color: #f2f2f2;
}
.page-brand--g-tune .block-brand-detail--header-tab-content-image--multi {
  background-color: #000;
}
.page-brand--daiv .block-brand-detail--header-tab-content-image--multi {
  background-color: #333;
}
.page-brand--iiyama .block-brand-detail--header-tab-content-image--multi {
  background-color: #eaeef2;
}



.block-brand-detail--header-tab-content-image {
  padding-top: 20px;
}

.page-brand--g-tune .block-brand-detail--header-tab-content-image {
  width: 80px;
  height: auto;
  text-align: center;
}

.page-brand--daiv .block-brand-detail--header-tab-content-image {
  width: 80px;
  height: auto;
  text-align: center;
}

.page-brand--g-tune .block-brand-detail--header-tab-content-image {
  /* padding-top: 20px; */
}

.page-brand--iiyama .block-brand-detail--header-tab-content-image {
  /* padding-top: 20px; */
}

.page-brand--g-tune .block-brand-detail--header-tab-content-image{
  background-color: #000;
  text-align: center;
}

.page-brand--daiv .block-brand-detail--header-tab-content-image {
  /* padding-top: 20px; */
  background-color: #333;
}

.page-brand--g-tune .block-brand-detail--header-tab-content-image.no_padding {
  padding-top: 0;
}








.page-brand--g-tune .block-brand-detail--header-tab-content-image--multi img{
  width: 80px;
  height: auto;
  text-align: center;
}
.page-brand--daiv .block-brand-detail--header-tab-content-image--multi img {
    width: 80px;
    height: auto;
    text-align: center;
}





.block-brand-detail--header-tab-content-image--multi img.img_desk {
  width: 80px;
  height: auto;
}

.block-brand-detail--header-tab-content-image--multi img.img_note {
  width: 76px;
  height: auto;
}

.block-brand-detail--header-tab-content-image--multi img.img_tablet {}

.page-brand--daiv .block-brand-detail--header-tab-content-image--multi img.concept {
  width: 60px;
  height: 60px;
}

.page-brand--daiv .block-brand-detail--header-tab.center.active.concept {
  padding-top: 0;
}

.page-brand--daiv .block-brand-detail--header-tab.center.active.concept .block-brand-detail--header-tab-contents--with-image {
  gap: 10px;
}

.page-brand--daiv .block-brand-detail--header-tab-content-image--multi {
  padding-top: 20px;
}
/* /追加css */

