@charset "utf-8";
@import "00_conf";
// ver1.1.0

$draft-border: #e91919;

.products_breadcrumbs {
//  border: solid 1px $draft-border;
  margin-top: 1rem;
  font-size: 1rem;
  color: $color-blue-main;
}
.product_name_area {
  margin-bottom: 1.5rem;
}
.brand_logo {
  @media (max-width: 575.98px) { max-width: 40% !important; }
}
.product_name h2 {
  font-weight: bold !important;
  color: $color-blue-main;
  @media (max-width: 575.98px) { padding-top: 1.0rem; }
}

.product_area {  
  max-width: 910px;
  @media screen and (max-width: 575px) { // SP
    max-width: 575px!important;
  }
  @media screen and (max-width: 414px) { // SP
    max-width: 414px!important;
  }
  @media screen and (max-width: 375px) { // SP
    max-width: 375px!important;
  }
  @media screen and (max-width: 320px) { // SP
    width: 320px!important;
    padding-left: 0px!important;
    padding-right: 0px!important;
  }
  .subSwiper {
    max-height: 0;  // Will be set up by JavaScript when 'load' & 'resize' events.
    margin: 0 auto 0 0 !important;
    img { width: 100%; height: 100%; border: solid 1px $color-blue-main; }
  }
  .mainSwiper {
    .swiper-wrapper {}
    .swiper-slide {
      height: 100%;
    }
    border: solid 1px $color-blue-main;
    img { width: 100%; height: 100%; margin: auto; }
  }

}

.swiper-button-next, .swiper-button-prev {
  border: solid 1px $color-blue-main--light;
  width: 30px !important; 
  height: 30px !important;
  background-size: 20px 22px !important;
}

//　商品スペック情報
.mgl-15px{
  margin-left: 0px;
}
.product-spec-area {
  font-size: 12px;
  padding-left: 15px;
}
.spec-line {
  margin: 0px;
}
.spec-subject-nonbody {
  color: $color-blue-main;
  font-weight: bold;
  word-wrap: break-word;
  margin: 0px;
  font-size: 16px;
  width:100%!important;
  padding-left: 15px!important;
  padding-right: 15px!important;
  margin-left: -15px;
}
.spec-subject {
  color: white;
  background:#0064B3;
  border: solid 1px white;
  padding-top:  5px;
  padding-bottom: 5px;
  padding-left: 5px;
  word-wrap: break-word;
  font-size: 12px;
  margin: 0px;
}
.spec-body {
  color: $color-blue-main;
  border: solid 1px white;
  background: #F1F1F1;
  font-weight: bold;
  padding-top:  5px;
  padding-bottom: 5px;
  padding-left: 5px;
  word-wrap: break-word;
  font-size: 12px;
  margin: 0px;
}

#product_caption {
  color: #666;
  padding-top: 0.5rem;
}

.product_heading_text {
//  border: solid 1px $draft-border;
  color: $color-blue-main;
  font-size: 1.6rem !important;  
  font-weight: bold;
  margin: 2rem 0 1rem;
}
.product_main_text{
//  border: solid 1px $draft-border;
color: #666;
font-size: 1rem;
  margin-top: 0rem;
}
.promotion_image {
//  border: solid 1px $draft-border;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.promotion_image > img {
  width: 100%;
}

.promotion_image_text {
  color: #666;
  font-size: 1rem;
  margin-top: 0rem;
}

.download_area {
//  border: solid 1px $draft-border;
  vertical-align:middle;
  color: #666;
  margin-top: 1rem;
 
}
.download-button {
   width: 200px;
}

.keyword_tags_text {
  color: $color-blue-main;
  font-size: 1.6rem;
}

.keyword_tags_area {
}

.keyword_tags {
  border: solid 1px $color-blue-main;
  color: $color-blue-main;
  font-size: 14px;
  font-weight: bold;
  padding: .05rem 0.7rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  &:hover {
    color: white!important;
    background: $color-blue-main;
  }
}
.keyword_tags > a{
  text-decoration: none;
  color: $color-blue-main;
  &:hover {
    color: white!important;
    background: $color-blue-main;
  }

}


.relation_infomation_area {
//  border: solid 1px $draft-border;
  width: 100%;
  margin: 0px;
  @media (max-width:375px) {
    line-height: 1.0rem;
  }
}

.relation_infomation_text {
//  border: solid 1px $draft-border;
  color: $color-blue-main;
  font-size: 1.5rem;
}
.relation_infomation_img {
    width:  100%;
}
.relation_infomation_sub_text {
    color: #666;
    font-size: 12px;
  }
  
.intense {
  cursor: url('/img/plus_cursor.png') 25 25, pointer;
}

html > body > figure {
  & > img {
    position: relative;
    @media screen and (min-width: 767px) {
      height: 100%;
      width: auto;
      left: 50%;
      transform: translateX(-50%) !important;
    }
  }
}
.l-ios > figure {
  & > img {
    max-width: none !important;
    position: relative;
    // for iPad (768 * 1024)
    @media screen and (orientation: portrait) and (min-width:600px) {
      width: 100%;
      height: auto;
      top: 50%;
      left: 0%;
      right: 0%;
      transform: translateY(-50%) !important;
    }
    @media screen and (orientation: landscape) and (min-width: 1024px) {
      width: auto;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 50%;
      right: 0;
      transform: translateX(-50%) !important;
    }
  }
}
.l-android > figure {
  & > img {
    // for Android (600 * 600)
    max-width: none !important;
    @media screen and (orientation: portrait) and (min-width:600px) {
      width: 100%;
      height: auto;
      top: 50%;
      left: 0%;
      right: 0%;
      transform: translateY(-50%) !important;
    }
    @media screen and (orientation: landscape) and (min-width:600px) {
      width: auto;
      height: 100%;
      top: 0%;
      left: 50%;
      right: 0%;
      transform: translateX(-50%) !important;
    }
  }
}

.relation_infomation_sp_mode{
  @media screen and (max-width: 767px) {
    flex: 0 0 50%!important;
    max-width: 50%!important;
  }
}