/* 20260407 pub-05 */
.wrapper {
  max-width: 1230px;
  margin: 0 auto;
}
.sub_wrap {display: flex; flex-flow: wrap; align-items: flex-start; padding: 0 0 60px 0;}
.sub_wrap_menu {width: 277px; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto;}
.sub_wrap_main {width: 100%;}
.sub_wrap > .sub_wrap_menu + .sub_wrap_main {width: calc(100% - 277px); padding: 0 0 0 30px; position: relative; z-index: 1;}
.sub_wrap_main_full {position: absolute; top: -21px; left: 30px; z-index: 100; width: 40px; height: 20px; border: 1px solid #ccc; border-radius: 5px; background: #fff; cursor: pointer; opacity: 0; transition: all 0.5s ease 0s;}
.sub_wrap > .sub_wrap_menu + .sub_wrap_main:hover .sub_wrap_main_full {opacity: 1;}
.sub_wrap_main_full span {position: absolute; width: 5px; height: 5px; border-style: solid; border-color: #ccc; transform: rotate(0deg); opacity: 1; transition: all 0.5s ease 0s;}
.sub_wrap_main_full span:nth-child(1) {left: 3px; top:2px; border-width: 2px 0 0 2px;}
.sub_wrap_main_full span:nth-child(2) {right: 3px; top:2px; border-width: 2px 2px 0 0;}
.sub_wrap_main_full span:nth-child(3) {right: 3px; bottom:2px; border-width: 0 2px 2px 0;}
.sub_wrap_main_full span:nth-child(4) {left: 3px; bottom:2px; border-width: 0 0 2px 2px;}
.sub_wrap_menu_hide .sub_wrap_menu {display: none;}
.sub_wrap_menu_hide > .sub_wrap_menu + .sub_wrap_main {width: 100%; padding: 0;}
.sub_wrap_menu_hide > .sub_wrap_menu + .sub_wrap_main .container {max-width: 100%;}
.sub_wrap_menu_hide .sub_wrap_main_full {left: 0; opacity: 1;}
.sub_wrap_menu_hide .sub_wrap_main_full span:nth-child(1) {height: 14px; width: 10px; border-width: 2px 2px 2px 2px;}
.sub_wrap_menu_hide .sub_wrap_main_full span:nth-child(2) {width: 17px; height: 10px;}
.sub_wrap_menu_hide .sub_wrap_main_full span:nth-child(3) {width: 17px; height: 10px;}
.sub_wrap_menu_hide .sub_wrap_main_full span:nth-child(4) {left: 17px; bottom: 7px; transform: rotate(45deg);}
@media (max-width: 1024px) {
  .sub_wrap {padding: 0 0 40px 0;}
  .sub_wrap_menu {width: 100%; position: relative; z-index: 10; top: auto; max-height: none; overflow-y: inherit;}
  .sub_wrap > .sub_wrap_menu + .sub_wrap_main {width: 100%; padding: 0; position: relative; z-index: 1;}
  .sub_wrap > .sub_wrap_menu + .sub_wrap_main .container {max-width: 100%;}
  .sub_wrap_main_full {display: none;}
}

/* leftMenu */
.leftMenu ul, .leftMenu ul li {list-style-type:none; margin: 0; padding: 0;}
.leftMenu ul {width: 100%; background: #f5f5f5; }
.leftMenu ul:nth-child(2) {width: 100%; background: #f5f5f5;  }
.leftMenu ul li.menu-title a{ color:#fff; font-size: 1.1rem; line-height: 1.5rem; background:#5a0707; }
.leftMenu ul:nth-child(2) li.menu-title a{ background:#0070c9; }
.leftMenu ul li:hover.menu-title a{ color:#fff; }
.leftMenu ul:nth-child(2){margin-bottom:0px;}
.leftMenu > ul ul {display: none; background:#c6c6c6;}
.leftMenu ul li {position: relative; z-index: 1;font-size: 0.85rem;  line-height: 20px; border-bottom: 1px solid #d8d8d8;}
/*.leftMenu ul li:last-child {border-bottom: 0;}*/
.menu_dot {position: absolute; top: 6px; right: 0px; z-index: 99; width: 30px; height: 30px; cursor: pointer;}
.menu_dot::before {content: ''; width: 12px; height: 2px; background-color: #000; border-radius: 2px; position: absolute; top: 12px; left: 7px; z-index: 99; transition: all 0.5s ease 0s;}
.menu_dot::after {content: ''; width: 2px; height:12px; background-color: #000; border-radius: 2px; position: absolute; top: 7px; left: 12px; z-index: 99; transition: all 0.5s ease 0s;}
.leftMenu .menu_dot_open{top:6px; }
.leftMenu .menu_dot_open::before {background-color: #fff;}
.leftMenu .menu_dot_open::after { display: none;}
.leftMenu a:link, .leftMenu a:visited {text-decoration:none; color:#222; background-color: transparent; padding: 10px 25px; display: block; position: relative; z-index: 1; transition: all 0.5s ease 0s;}
.leftMenu a:active, .leftMenu a:hover {text-decoration:none; color:#fff; background-color:#4C83FF; cursor:pointer; transition: all 0.5s ease 0s;}
.leftMenu ul li a.menu_arrow_open{background-color:#4C83FF; color: #fff;}
.menu_arrow {position: absolute; top: 10px; left: 5px; width: 20px; height: 20px; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); transition: all 0.5s ease 0s;}
.menu_arrow::before {content: ''; width: 7px; height: 2px; background-color: #000; border-radius: 2px; position: absolute; top: 7px; left: 6px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.5s ease 0s;}
.leftMenu a:hover .menu_arrow::before {background-color: #fff; transition: all 0.5s ease 0s;}
.menu_arrow::after {content: ''; width: 7px; height: 2px; background-color: #000; border-radius: 2px; position: absolute; top: 11px; left: 6px; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); transition: all 0.5s ease 0s;}
.leftMenu ul li a.menu_arrow_open .menu_arrow::before,.leftMenu ul li a.menu_arrow_open .menu_arrow::after  {background-color:#fff; }
.leftMenu a:hover .menu_arrow::after {background-color: #fff; transition: all 0.5s ease 0s;}
.menu_arrow_open .menu_arrow {-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); transition: all 0.5s ease 0s; }
.leftMenu a.active{background: #2cacd1;}
.leftMenu ul.menu_sub_open { display: block !important; }

@media only screen and (min-width:1025px){
  .leftMenuMobile {display: none;}
}
@media only screen and (max-width:1024px){
  .leftMenu ul:nth-child(2){position: absolute; top: 67px; left: 0; z-index: 99;}
  .leftMenuMobile {width: 30px; height: 20px; margin: 40px auto 10px auto; position: relative; cursor: pointer;}
  .leftMenuMobile > span:nth-child(1) {width: 30px; height: 2px; background-color: #000; position: absolute; top: 0px; left: 0; transition: all 0.5s ease 0s;}
  .leftMenu > div.show > span:nth-child(1) {top: 14px; transform: rotate(45deg);}
  .leftMenuMobile > span:nth-child(2) {width: 30px; height: 2px; background-color: #000; position: absolute; top: 10px; left: 0; transition: all 0.5s ease 0s;}
  .leftMenu > div.show > span:nth-child(2) {top: 14px; transform: rotate(-45deg);}
  .leftMenuMobile::before {content: attr(data-title); width: 200px; height: 30px; line-height: 30px; position: absolute; top: -34px; left: calc(50% - 100px); text-align: center; font-size: 12px; color: #000;}
  .leftMenu > ul {max-height: 0; overflow: hidden; transition: all 0.5s ease 0s;}
  .leftMenu > ul.open {max-height: 500px; overflow: auto; padding-bottom: 10px; transition: all 1.5s ease 0s;}
}

/* Products List ============================================================== */
.product-list figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
  cursor: pointer;
  height: 0;
  padding-bottom: 133.33%;
}
.product-list figure .img-center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.product-list figure img {
  max-height: 100%;
  opacity: 1;
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(0px, 0, 0);
}
.product-list figure:before, .product-list figure:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  z-index: 10;
  transition: all 0.5s ease 0s;
}
.product-list figure:before {
  bottom: 5%;
  left: 5%;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}
.product-list figure:after {
  top: 5%;
  right: 5%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.product-list figure:hover img {
  opacity: 0.75;
  transform: scale(1.1);
  background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
}
.product-list figure:hover:before, .product-list figure:hover:after {
  opacity: 1;
  width: 100%;
  height: 100%;
}
.product-list figcaption h3 {
  padding: 10px;
  word-spacing: -0.15em;
  font-size: 1.15rem;
  font-weight: 500;
  color: #3e79ea; text-align: center;
}

/* Product Detail ============================================================ */
.product-wrap {
  margin: 30px 0;
}
.product-wrap h1 {
  width: 100%;
  margin-bottom: 2%;
  font-size: 2rem;
  color: #323d47;
  font-weight: 600;
  line-height: 1.25em;
}
.product-wrap h1:after {
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  margin: 10px 0;
  background-image: linear-gradient(to right, #50a1ff 0%, #fff 100%);
}

.product-wrap-left {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.product-wrap-left > ul {
  padding-left: 0;
}

.pro-detail-pic {
  position: relative;
  overflow: hidden;
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  height: 0;
  padding-bottom: 100%;
}
.pro-detail-pic img {
  max-height: 100%;
}
.pro-detail-pic .img-center a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.product-info {
  padding: 1em 0.5em;
  border-bottom: 1px solid #d6d6d6;
}
.product-info a:hover {
  color: #007bff;
}
.product-button {
  padding-left: 0;
}

.upload-file-zone {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.upload-file {
  margin: 0 30px 10px 0;
}

ol.product-button li {
  width: auto;
  display: inline-block;
  list-style-type: none;
  margin: 5% 3px 0 0;
  font-size: inherit;
  line-height: inherit;
}
ol.product-button li img {
  width: 20px;
}

.btn-inquiry {
  color: #fff !important;
  font-weight: 400;
  background-color: #0070c9;
  background: linear-gradient(#42a1ec, #0070c9);
  border: solid 1px #07c;
  padding: 3px 7px;
}
.btn-inquiry:hover {
  color: #fff;
  background: #42a1ec;
  background: linear-gradient(#0070c9, #42a1ec);
  box-shadow: 0px 1px 6px #42a1ec;
}

.btn-border {
  background-color: transparent;
  border: 2px solid #999;
  color: #999;
  font-weight: 500;
  padding: 3px 7px;
}
.btn-border:hover {
  color: #50a1ff;
  background-color: transparent;
  box-shadow: 0px 1px 6px #42a1ec;
  border: 2px solid #50a1ff;
}

.social-icons img {
  width: auto;
}

.resp-tab-content p, .resp-tab-content li {
  font-size: 1rem;
  line-height: 2rem;
}
.resp-tab-content a:hover {
  color: #007bff;
}
.resp-tab-content ul, .resp-tab-content ol {
  padding-left: 20px;
}

.related-product-title {
  margin-top: 30px;
  font-size: 1.5rem;
  font-weight: 700;
}
.related-product-title:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin: 10px 0;
  background-image: linear-gradient(to right, #50a1ff 0%, #fff 100%);
}

.related-product-wrap {
  margin: 30px auto 0 auto;
  padding: 0 30px 10px 30px;
  max-width: 1200px;
}

.related-list {
  padding-left: 0;
}
.related-list figure {
  position: relative;
  overflow: hidden;
  padding-bottom: 133.33%;
}
.related-list figure .img-center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.related-list li {
  width: calc(100%/4);
  /*margin-right: 5px;
  margin-bottom: 5%;*/
  display: inline-block;
  text-align: center;
  padding: 0 10px;
}
@media (max-width: 479px) {
   .related-list li {padding: 0;}
}

.related-list li h3 {
  padding: 20px;
  word-spacing: -0.15em;
  font-size: 0.9rem;
  font-weight: 400;
  color: #000;
}

.related-list li img {
  max-height: 100%;
}