/*
For Product Pages
*/

.x-section {
  padding: 0 !important;
}
i {
  font-style: normal;
}
:root {
  --swiper-theme-color: var(--image-color) !important;
}
div[class^="swiper-button-"]:hover {
  opacity: 0.6;
  transition: .2s ease;
}

/* ページヘッダ */
.section_header {
  padding: 1em 0 1.5em !important;
}
.column_pnkz {
  font-size: 0.8em;
}

/*** 各種リンク ***/
#links {
  position: absolute;
  top: 25vh;
  right: -1em;
  transition: ease .2s;
  z-index: 99;
}
.btn_links {
  display: block;
  width: 10em;
  text-align: center;
  font-size: .9em;
  color: #fff;
  font-weight: bold;
  line-height: 1.6em;
  border-radius: .25rem;
  border: solid 2px var(--image-color);
  background: var(--image-color);
  padding: .5em .25em;
  padding-right: 1em;
  margin-bottom: 1px;
}
.btn_links:hover {
  color: var(--image-color);
  background: #fff;
}
.btn_links i {
  font-size: 1.2em;
  margin: 0 !important;
}
@media (max-width:979px) {
  .btn_links {
    font-size: 0.9em;
  }
}

/*** 製品概要 ***/
.section_info .width {
  width: 75% !important;
}
span.status {
  display: block;
  min-width: 6em;
  line-height: 1.4em;
  text-align: center;
  border: 1px solid #000;
  font-size: 1em;
  font-weight: bold;
  background: var(--idk-gray);
}
span.status.latest {
  color: var(--image-color);
}
span.status.new {
  color: #fff;
  background: var(--image-color);
  border: 1px solid var(--image-color);
}
span.status.eop {
  color: #fff;
  background: #808080;
  border: 1px solid #808080;
  font-weight: normal;
}
span.status.stop {
  width: 8em;
}
h1 {
  font-size: 1em;
  font-weight: normal;
  margin-bottom: 1.5em;
}
.model {
  display: block;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.2em;
  white-space: nowrap;
}
.outline {
  display: block;
  font-size: 1.2em;
  line-height: 1.2em;
}
.list_advantages {
  font-size: 1.1em;
  list-style: none;
  margin: 0;
}
.list_advantages li {
  line-height: 1.4em;
}
.list_advantages li::before {
  content: '\25CF';
  color: var(--image-color);
  margin-right: 0.3em;
}
div.icon {
  margin: 1em 0 2em;
}
.icon img {
  height: 7em !important;
  margin-right: 1.2em;
  margin-top: 1em;
}
.icon a.x-extra {
  display: inline-block;
}
.icon a:hover img {
  transform: translateY(-3px);
}
@media (max-width:1399px) {
  .outline {
    font-size: 1em;
  }
}
@media (max-width:1199px) {
  .outline {
    font-size: 0.9em;
  }
}
@media (max-width:767px) {
  div.icon {
    margin: 1em 0 1em;
  }
  .icon img {
    height: 6em !important;
  }
}

#cs-content .fade.in {
  opacity: 0.9;
  z-index: 99;
}
#cs-content .popover,
#cs-content .popover-title,
#cs-content .popover-content {
  background: #333;
  color: #fff;
}
#cs-content .popover.top .arrow {
  border-top-color: #333;
}
#cs-content .popover-title {
  border-bottom: 1px solid #fff;
}

/* 製品画像スライダー */
.column_slider {
  vertical-align: middle !important;
  z-index: 0 !important;
}
.product-img .swiper-slide {
  max-width: 100%;
}
.product-img .swiper-slide img {
  padding: 0 8% 2em;
  background: #fff;
}
.product-img .swiper-slide span {
  position: absolute;
  background: #fff;
  opacity: 0.8;
  padding-left: 50px;
}
.slider-thumbnail .swiper-wrapper {
  display: table;
  margin: 0 auto;
}
.slider-thumbnail .swiper-slide {
  max-width: 100px;
  display: table-cell;
  opacity: 0.5;
  transition: ease 0.2s;
  cursor: pointer;
}
.slider-thumbnail.swiper-container-thumbs {
  margin: 0 auto;
  width: 80%;
}
.slider-thumbnail img {
  padding: 0 !important;
}
.slider-thumbnail .swiper-slide:hover,
.slider-thumbnail .swiper-slide-thumb-active {
  opacity: 1 !important;
}
i.slider_video,i.slider_thumb_video {
  color: var(--image-color);
  opacity: 0.7;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
i.slider_video.fa-youtube::before {
  font-family: 'Font Awesome 5 Brands';
  font-size: 5rem;
}
i.slider_video,i.slider_thumb_video {
  top: 50%;
}
i.slider_thumb_video.fa-youtube::before {
  font-family: 'Font Awesome 5 Brands';
  font-size: 3rem;
}
#thumbs {
  position: relative;
  padding: 0 2em;
}
#thumbs .swiper-slide img {
  border: solid 1px #ccc;
}
#thumbs .swiper-slide.swiper-slide-thumb-active img {
  border: solid 2px var(--image-color);
}
.product-img .swiper-slide img {
  padding: 0;
  margin-bottom: 0.5em;
}
.product-img .swiper-slide iframe {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
div#thumbs {
  --swiper-navigation-size: 30px;
  overflow: hidden;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left: 5px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right: 5px;
}

/*** お知らせ ***/
div.block_notice {
  background: #ffeded;
  padding: 1.25em;
  margin-bottom: 2em;
}

div.block_notice p.notice_title {
  font-weight: bold;
  color: var(--image-color);
  margin-bottom: .25em;
}

div.block_notice p.notice_content {
  margin-bottom: 0;
}

div.block_notice p.notice_content a {
  margin-left: 2em;
  text-decoration: underline;
  white-space: nowrap;
}

/*** シリーズ一覧表 ***/
.section_table {
  margin-bottom: 4em !important;
}
.section_table .width {
  width: 75% !important;
}
table.table_series {
  border-bottom: solid 1px #bbb;
  margin-bottom: 2em;
  font-size: 0.9em;
  color: #000;
}
.h6_lineup {
  margin: 0 0 .3em;
  padding-left: .5em;
  font-weight: normal;
}
table.lineup {
  border-top: solid 1px #bbb;
}
table.lineup tr:first-child td {
  border-top: solid 1px #bbb;
}
.t_cable {
  float: left;
  width: 47%;
  margin-right: 1%;
}
table.table_series th {
  border: none;
  background: #bbb;
  font-weight: bold;
  line-height: 0.8em;
  padding-left: 1em;
}
table.table_series td {
  line-height: 1.2em;
  padding: .3em 1em;
}
th.th_model,
table.lineup td.td_title {
  width: 20%;
}
table.table_series th:nth-last-child(2).th_model {
  width: auto;
}
th.th_price,
td.td_price {
  width: 20%;
}
th.th_length {
  min-width: 5em;
}
th.th_status,
td.td_status {
  width: 10%;
}
.table_series td.td_title {
  white-space: nowrap;
}
td.td_title a {
  text-decoration: underline;
}
.cable {
  min-width: auto;
}
a[name="collapseRowsToggle"] {
  display: block;
  text-align: center;
  cursor: pointer;
}
table.table_series tr:hover td {
  background: var(--idk-gray);
}
.collapseRow, ._fewer {
  display: none;
}
a[name="collapseRowsToggle"] span::before,
a[name="collapseRowsToggle"] span::after {
  display: table-cell;
  font-family: 'FontAwesome';
  content: '\f04b';
  color: var(--image-color);
  font-size: .8em;
  padding-right: .2em;
}
a[name="collapseRowsToggle"] span::before {
}
a[name="collapseRowsToggle"] span::after {
  transform: rotate(180deg);
  padding-top: 0.12em;
}

/*** タブ ***/
.section_bg {
  margin: 0 !important;
  height: 2.4em;
  background: #000;
}
.section_detail {
  margin: -2.4em 0 3em !important;
}
.section_detail .width {
  width: 75% !important;
}
.column_tab {
//  width: calc(100% - 300px) !important;
  z-index: 99 !important;
}
.x-tab-content {
  margin: 0 !important;
  margin-right: 3em !important;
}
.x-tab-pane {
  padding: 1em 0 0 !important;
}
.tab-product {
  display: flex;
  color: black;
  font-size: .9em;
  line-height: 1.8em;
  border: none;
}
#cs-content .x-tab-content .x-tab-pane {
  width: 100%;
}
#cs-content .x-nav-tabs {
  width: 80vw;
  padding-right: 20% !important;
  border: 0;
  font-weight: bold;
  margin-bottom: 1em;
}
#cs-content .x-nav-tabs > li {
  height: 2.4em;
  border: none;
}
#cs-content .x-nav-tabs > li > a {
  background: transparent;
  padding: 0.7em 0;
  border: 0;
  font-size: 1.2em;
  line-height: 0.6em;
  cursor: pointer;
}
#cs-content .x-nav-tabs > li > a:hover, #cs-content .x-nav-tabs > .active > a:hover {
  color: var(--image-color);
}
#cs-content .x-nav-tabs > li > a, #cs-content .x-nav-tabs > .active > a {
  color: white;
}
#cs-content .x-nav-tabs > .active {
  border-bottom: solid 5px var(--image-color);
}
@media (max-width:980px) {
  #cs-content .x-nav-tabs {
    padding: 0 !important;
  }
  .x-nav-tabs>li {
    float: left !important;
  }
  .x-nav-tabs.two-up>li {
    width: 50%;
  }
  .x-nav-tabs.three-up>li {
    width: 33.3%;
  }
  .x-nav-tabs.four-up>li {
    width: 25%;
  }
  .x-nav-tabs.five-up>li {
    width: 20%;
  }
}
@media (max-width:767px) {
  #cs-content .x-nav-tabs > li > a {
    font-size: 1em;
    line-height: 1.2em;
  }
  #cs-content .x-nav-tabs > li > #x-legacy-tab-5 {
    font-size: 0.9em;
    line-height: 1.3em;
  }
}
div.notes {
  margin-top: 5em !important;
  font-size: .8em;
}

/*** タブ_概要 ***/
.h_advantage {
  font-size: 20px;
}
.ul_advantage {
  margin: 0 0 1.5em;
  list-style-type: none;
}
.ul_advantage > li {
  margin-right: 0.5em;
}
.ul_advantage > li a {
  display: block;
  line-height: 2.5em;
  padding: 0 0.5em;
  background: #bbbbbb;
  color: #000;
  font-weight: bold;
}
.ul_advantage > li a::after {
  float: right;
  content: '\f078';
  font-family: "FontAwesome" !important;
  color: var(--image-color);
  transition: .3s;
}
.ul_advantage > li ul {
  list-style-type: none;
  height: 0;
  margin-bottom: 1em;
  margin-left: 0.5em;
  font-size: 0.95em;
  opacity: 0;
  visibility: hidden;
  padding-top: 0;
  transition:
    opacity .1s linear,
    visiblity .1s linear,
    padding-top .3s ease,
    padding-bottom .3s ease;
}
.ul_advantage > li li {
  line-height: 0;
  margin-left: 0;
  padding-left: 1em;
  transition:
    line-height .3s ease;
}
.ul_advantage > li:hover a {
  color: #fff;
  background: #555;
}
.ul_advantage > li._open a::after {
  transform: rotate(180deg);
  transition: .3s;
}
.ul_advantage > li._open ul {
  height: auto;
  opacity: 1;
  visibility: visible;
  padding-top: .5em;
  transition:
    opacity .1s linear .1s,
    visibility .1s linear .1s,
    padding-top .3s ease,
    padding-bottom .3s ease;
}
.ul_advantage > li._open li {
  line-height: 1.6em;
  padding-right: 2em;
  transition: line-height .3s ease;
}
.ul_advantage > li._open li::before {
  content: '\2022';
  color: var(--image-color);
  margin-left: -1em;
  margin-right: 0.4em;
  transition: all .2s ease;
}
@media (max-width:767px) {
  .ul_advantage li {
    width: 100%;
  }
}

/*** タブ_仕様 ***/
h2.tablepress-table-name {
  font-size: 1.2em;
  margin: 0;
}
.table_spec {
  border-top: solid 2px #666;
  border-bottom: solid 2px #666;
  font-size: 0.9em;
}
.table_spec th {
  border: solid 1px #666;
  border-left: none;
  background: #808080;
  color: white;
  white-space: nowrap;
}
.table_spec th:last-child {
  border-right: none;
}
.table_spec td {
  border: solid 1px #666;
  border-left: none;
  line-height: 1.4em;
}
.table_spec td:last-child {
  border-right: none;
  border-left: solid 1px #666;
}
.table_spec td:first-child {
  border-left: none;
}
.table_spec td.column-1,
.table_spec:not(.style3) td.column-2 {
  white-space: nowrap;
  background: var(--idk-gray);
}
.table_spec._2 td.column-1,
.table_spec._2 td.column-2 {
  font-weight: bold;
  white-space: nowrap;
}
.table_spec._3 td.column-1,
.table_spec._3 td.column-2,
.table_spec._3 td.column-3 {
  font-weight: bold;
  white-space: nowrap;
}
.table_spec.style2 td.column-1,
.table_spec.style2 td.column-2,
.table_spec.style3 th,
.table_spec.style3 td.column-2 {
  background-color: initial;
  color: initial;
}

/*** タブ_ビデオ ***/
.video_product {
  float: left;
  width: 40%;
  min-width: 400px;
  margin-right: 1em;
}
.video_product + h5 {
  margin: 0;
}
hr.hr_video {
  clear: both;
  border-top: none;
  border-bottom: 1px solid #555;
  padding: .5em 0 1em;
}
@media (max-width: 979px) {
  .video_product {
    float: none;
  }
  hr.hr_video {
    padding: 0;
  }
}

/*** タブ_ダウンロード ***/
.table_download {
  border-bottom: 1px solid #bbb;
  margin-bottom: 3em;
}
tbody.table_download {
  border: solid 1px #bbb;
}
tbody.table_download th {
  background: #bbb;
  font-weight: bold;
}
th.th_version, th.th_size, th.th_format {
  text-align: center;
}
@media (min-width:768px) {
  th.th_version, th.th_format {
    width: 7.5em;
  }
  th.th_size {
    width: 6em;
  }
}
tbody.table_download tr td {
  text-align: center;
}
tbody.table_download tr td.td_title {
  text-align: left;
}
td.td_title .comment {
  margin-left: 0.5em;
}
tbody.table_download tr td a {
  color: black;
}
tbody.table_download tr td a::before {
  display: inline-block;
  content: '\2022';
  color: var(--image-color);
  margin-right: 10px;
}
tbody.table_download tr td a:hover {
  color: var(--image-color);
}
tbody.table_download tr td.td_description {
  text-align: left;
  font-size: 0.75em;
}
td span.description {
  display: block;
  margin-top: 0.25em;
  margin-left: 18px;
  font-size: 0.75rem;
}
.table_download tr:hover td {
  background: var(--idk-gray);
}
/* Dialog */
dialog {
  width: fit-content;
  padding: 0;
  border-color: var(--idk-darkgray);
}
dialog > div {
  background: var(--idk-gray);
  font-size: 0.9em;
  line-height: 1.4em;
  max-width: 750px;
}
dialog > * > * {
  padding: 1em 2em;
}
dialog h6 {
  background: var(--idk-darkgray);
  color: #fff;
  margin: 0 0 1em;
}
dialog div.div_buttons {
  text-align: center;
  padding: 0 0 1em;
}
dialog button {
  padding: .5em 3em;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: .5rem;
  transition: .2s ease;
}
dialog button:first-of-type {
  margin-right: 1em;
}
dialog button._ok {
  background: var(--image-color);
}
dialog button._ok:hover {
  background: var(--image-color-dark);
}
dialog button._close {
  background: var(--idk-darkgray);
}
dialog button._close:hover {
  background: #555;
}

/*** 特集リンク ***/
div.feat_contents {
  font-size: 0.8em;
  line-height: 1.2em;
  margin-bottom: 2em;
}
div.feat_contents h5 {
  font-size: 1.25em;
  border-bottom: solid 1px #aaa;
	margin-top: 1em;
}
div.feat_contents a:hover img {
  opacity: 0.8;
}
div.feat_contents span {
  font-size: 0.95em;
}
div.feat_contents a img {
  margin: 0.5em 0;
}
._forsp div.feat_contents span {
  font-size: 1.2em;
}
._forsp div.feat_contents a img {
  margin: 1em 0 0.5em;
}

/*** 問合せ ***/
.div_contact {
  display: flex;
  margin-right: 3em;
  margin-top: 1em;
}
.block_contact {
  position: relative;
  width: 50%;
  padding: 1.5em 1.5em 1.5em;
  margin: 0 1em 0;
  border: solid 1px #555;
  font-size: 0.8em;
  line-height: 1.5em;
}
._forpc .block_contact {
  min-height: calc(18vh + 3em);
}
div.block_contact b {
  display: block;
  font-size: 1.2em;
  margin-bottom: 1em;
}

div.block_contact a {
  display: block;
  width: fit-content;
  background: var(--image-color);
  padding: 0.75em 3em;
  border-radius: 5rem;
  color: white;
  font-weight: bold;
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width:960px) {
  .block_contact {
    font-size: 0.75em;
  }
}
div.block_contact a:hover {
  background: var(--idk-darkred);
}
div.block_contact a.btn_gray {
  border-radius: .225rem !important;
  background: #595858;
  border: 1px solid #595858;
}
div.block_contact a.btn_gray:hover {
  background: #231815;
  border: 1px solid #231815;
}
._forsp div.div_contact {
  margin-top: 3em;
  margin-right: auto;
  flex-wrap: wrap;
}
._forsp .block_contact {
  width: 100%;
  margin-bottom: 1em;
  min-height: calc(15vh + 3em);
}

/*** 関連製品 ***/
.column_option {
  padding-top: 3.5em;
}
/* header */
.opt_header {
  display: block;
  background: var(--idk-gray);
  font-weight: bold;
  line-height: 1.4em;
  padding: 0.5em 1em;
  margin-top: 1em;
  cursor: pointer;
}
.opt_header::after {
  content: '\f068';
  font-family: "FontAwesome";
  color: var(--image-color);
  float: right;
}
.opt_header:not(.opened)::after {
  content: '\f067';
}
/* footer */
.opt_footer {
  display: block;
  text-align: right;
  line-height: 1.8em;
  padding: 0.5em 0;
  cursor: pointer;
}
.opt_footer:hover {
  color: var(--image-color);
}
.opt_footer::before {
  content: '\f054';
  font-family: "FontAwesome";
  padding-right: 0.8em;
  color: var(--image-color);
}
/* contents */
div.opt_contents {
  background: var(--idk-gray);
  font-size: 0.8em;
  line-height: 1.4em;
  padding: 0 1em;
  margin-bottom: 2em;
}
div.opt_contents:not(._main) a:not(.opt_footer) {
  display: table;
  border-bottom: 1px solid #bbb;
  padding: 1em 0;
}
div.opt_contents:not(._main) a:not(.opt_footer):first-child {
  border-top: 1px solid #bbb;
}
div.opt_contents a:hover {
  color: var(--image-color);
}
div.opt_contents a:hover img {
  opacity: 0.7;
}
div.opt_contents img {
  width: 100%;
}
div.opt_contents .proinfo {
  display: table-cell;
  width: 70%;
  padding-left: 1em;
  vertical-align: middle;
}
div.opt_contents .proinfo b {
  display: block;
  font-size: 1.5em;
}

/*** RESPONSIVE ***/
@media (max-width:959px) {
  ._forpc {
    display: none !important;
  }
}
@media (min-width:960px) {
  ._forsp {
    display: none !important;
  }
}
/* Product Search */
@media (max-width:767px) {
  .div_category .a_catcard {
    width: calc(25% - 1em);
  }
}
@media (max-width:480px) {
  .div_category .a_catcard {
    width: calc(33.3% - 1em);
  }
}
/* Product Detail */
ul.ul_spec {
  font-size: 1.4rem;
  line-height: 2rem;
  margin: 0;
  list-style: none;
}
ul.ul_spec li::before {
  content: '\2022';
  color: var(--image-color);
  margin-right: 0.3em;
}
ul.ul_spec li a {
  text-decoration: underline;
}
@media(max-width:959px) {
  .section_info .width,
  .section_table .width,
  .section_detail .width {
    width: 85% !important;
  }
  .x-tab-content,div.notes {
    margin-right: 1em !important;
  }
  .column_option {
    width: 250px !important;
  }
  ._forsp h5 {
    margin: 0;
    margin-top: 0.5em;
  }
  ._forsp .swiper-container {
    padding-bottom: 20px;
  }
  ._forsp .slide-yt {
    border: solid 3px #fff;
    box-sizing: border-box;
  }
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: 0;
  }
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: 0;
  }
  .t_cable {
    width: 100%;
  }
  .table_series td.td_title {
    white-space: normal;
  }
  .section_detail._forsp {
    font-size: 1.25rem;
  }
  .opt_header {
    text-align: center;
    margin-top: 0;
  }
  div.opt_contents {
    margin-bottom: .5em;
  }
  .opt_header._main {
    background: black;
    color: white;
  }
  .opt_header._main:hover {
    color: var(--image-color);
  }
  .opt_contents._main {
    background: transparent;
    margin-top: 1em;
    margin-bottom: -0.5em;
  }
  .opt_footer {
    margin-bottom: 0.5em;
  }
  ._main .video_product {
    width: 100%;
    min-width: 0;
    margin: 1em 0;
  }
  .x-gap._main {
    margin-bottom: 1.5em;
  }
  .h_advantage {
    font-size: 1.2rem;
    margin: 1em 0 0.25em !important;
  }
  .ul_advantage {
    margin: 0;
    list-style: none;
  }
  .ul_advantage > li ul {
    margin-bottom: 0.5em;
    list-style: none;
  }
  .ul_advantage > li._open li {
    font-size: 1rem;
    line-height: 1.5em;
  }
  ul.ul_spec {
    line-height: 1.2em;
  }
  ul.ul_spec a {
    line-height: 1.4em;
  }
  span.comment {
    font-size: 0.75em;
    line-height: 0.5em;
  }
  dialog button:first-of-type {
    margin-right: 0;
    margin-bottom: 0.5em;
  }

}