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

// Breaking container background.
.c-breaking-container-bg {
  &-wrapper { position: relative; }
  position: absolute;
  z-index: -1;
  top:  0;
  left: calc(-1 * ((100vw - 100%) / 2));  // 親要素の 0px を起点にデバイス幅始点を演算
  width:  100vw;                          // 上記のデバイス幅始点からデバイス幅いっぱいまで広げる
  height: 100%;
  margin: auto;
  transform: skewY(-2deg);
}

// Parallax.
.c-parallax-wrapper { position: relative; }
.c-parallax {
  position: absolute;
  z-index: -5;
  top: 0;       // rellax-config.js で ( 視差につき ) ちょっと手前で出しとくように後から変更 ( -5% )
  left: calc(-1 * ((100vw - 100%) / 2));  // 親の left: 0px を起点にデバイス幅始点を演算
  width: 100vw;  // 上記デバイス幅始点からコンテナをはみ出してデバイス幅いっぱいに広げる
  height: 100%;  // rellax-config.js で ( 視差につき ) ちょっと大きめに出しとくように後から変更 ( 115% )
  margin: auto;
  &__image {
    background-size: cover;        // 良い感じに縦横比頑張ってもらう
    background-position: 50% 50%;  // 良い感じに真ん中に出てもらう
    width: 100%;
    height: 100%;
    transform: skewY(-2deg);  // .c-parallax に transform が当たるのでこっちに transform 追加分をあてて傾ける
  }
}

// Page wrapper & Footer.
.c-wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding-bottom: 90px;
}
.c-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 0;
}

.c-heading {
  margin: 0 auto 1.5rem;
  font-size: 1.4rem;
  color: $color-blue-main;
  &--border {
    font-size: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px dotted #ccc;
  }
}

// Blockquote
.c-bq {
  margin: 0 auto 1rem;
  padding-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-left: 3px solid #ccc;
  color: #666;
}

// Products
.c-products {
  @media screen and (max-width: 575px) { // SP
    width: 100%;
  }
  @media screen and (max-width: 375px) { // SP
    width: 100%;
  }
  @media screen and (max-width: 320px) { // SP
    width: 100%;
  }
  &__sort {
    text-align: right;
    margin-bottom: 1.2rem;
    @media screen and (max-width: 575px) { // SP
      width: 100%;
    }
    @media screen and (max-width: 375px) { // SP
      width: 100%;
    }
    @media screen and (max-width: 320px) { // SP
      width: 100%;
    }
  }
  &__heading {
    @extend .entry-title;
    font-size: 1.6rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.2rem !important;
  }
  &__box {
    @media screen and (max-width: 575px) { // SP
      width: 50%;
    }
    @media screen and (max-width: 375px) { // SP
      width: 50%;
    }
    @media screen and (max-width: 320px) { // SP
      width: 50%;
    }
  }
}

.archive-products-width{
  max-width: 910px !important;
  padding-left: 0px!important;
  padding-right: 0px!important;
  @media screen and (min-width:1024px) { 
    width: 100% !important;
  }
  @media screen and (min-width:1199px) { 
    width: 100% !important;
  }
  @media screen and (min-width:768px) { 
    width: 100% !important;
  }
  @media screen and (max-width: 575px) { // SP
    max-width: 575px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
  @media screen and (max-width: 414px) { // SP
    max-width: 414px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
  @media screen and (max-width: 375px) { // SP
    max-width: 375px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
  @media screen and (max-width: 320px) { // SP
    max-width: 320px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
}

.single-products-width{
  max-width: 910px !important;
  padding-left: 15px!important;
  padding-right: 0px!important;
  @media screen and (max-width: 575px) { // SP
    max-width: 575px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
  @media screen and (max-width: 414px) { // SP
    max-width: 414px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
  @media screen and (max-width: 375px) { // SP
    max-width: 375px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
  @media screen and (max-width: 320px) { // SP
    width: 100%!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
}
// Taxonomies side bar
.c-taxonomies-side-bar {
  @media screen and (max-width: 1200px) { // xga以下は非表示 
    display: none!important;
  }
  width: 200px;
  max-width: 200px;
  margin-left: 45px !important;
  &__heading {
    i::before { margin: 0 0.35rem 0 0; font-size: 1rem; color: $color-blue-main--light; }
    line-height: 1;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid $color-blue-main--light;
    font-size: 0.9rem;
    font-weight: bold;
    color: $color-blue-main;
  }
  &__brands {
    border: 1px solid $color-blue-main;
    padding: .5rem;
    margin-bottom: 1rem;
    img { width: 100%; height: 50px; }
    background-image: url("/img/dot_w14.gif");
  }
  &__categories {
    background-image: url("/img/dot_w14.gif");
    border: 1px solid $color-blue-main;
    padding: .5rem;
    margin-bottom: 1rem;
    ul li {
      a { font-size: 13px; color: #666; }
      &::before {
        content: '\e801';
        font-family: 'fontello';
        font-size: 0.9rem;
        padding-right: .5rem;
        color: $color-blue-main;
      }
    }
  }
}

// Lists-brands
.lists-brands.lists-brands__top {
  div.row {
    a.col-md-6 {
      // カードホバー時画像拡大
      &:hover {
        color: #666;
        text-decoration: none; // hover 時の下線打消し
        div.card {
          div.card-img-top {
            div.img-wrap {
              overflow: hidden;
              img {
                transform: scale(1.15);
                transition: transform 0.5s ease;
              }
            }
          }
        }
      }
      // Card
      div.card {
        height: 100%;
        border: 1px solid $color-blue-main;
        border-radius: 0;
        min-height: 310px;
//        padding: 0.1rem;
        transition: box-shadow, background .3s;
        position: relative;
        .card-img-top {
          position: relative;
          div.img-wrap {
            height: 180px;
            img {
              width: 100%; // Need
              height: 100%; // Need
              // object-fit: cover;
              // object-position: 50% 50%;
            }
          }
          div.wrap-logo-wrap {
            box-shadow: 0 0 0 3px #fff inset;
            position: absolute;
            content: '';
            width: 100%;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            div.wrap-logo.d-flex.justify-content-center.align-items-center {
              background: white;
              position: absolute;
              width: 230px;
              height: 75px;
              top: 77%;
              right: 0;
              left: 0;
              margin: auto;
              padding: 2.0rem;
              img {
                // 縦横比を保ってボックスに格納
                width: 100% !important;
                // hright: auto;
                // max-width: 100%;
                // max-height: 100%;
              }
            }
          }
        }
        .card-body {
          background-image: url("/img/dot_w14.gif");
          box-shadow: 0 0 0 3px #fff inset;
          p {
            color: #666;
            padding-top: 40px;
          }
        }
        &:after {
          content: '\e800';
          position: absolute;
          bottom: -8px;
          right: -2px;
          font-family: 'fontello';
          font-size: 1.5rem;
          color: #0066cc;
        }
      }
    }
  }
}

.c-categories {
  &__lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    &__list {
      list-style: none;
      @media (max-width: 767.98px) {
        width: 48%;
      }
      width: 19%;
      margin-bottom: 1rem;
      border: solid 1px #ded7c6;
      height: auto;         // For square
      position: relative;   // For square
      &::before {
        content: '';
        display: block;
        padding-top: 100%;  // For square !important
      }
      a {
        color: white;
        font-weight: bold;
        &:focus  { color: white; text-decoration: none; }
        &:hover  { color: white; text-decoration: none; }
        &:active { color: white; text-decoration: none; }
      }
      &__inner {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        text-align: center;
        background-image: url('/img/dot_g100.gif');
        &__category-link {
          &::before{
            content: '\E800';
            font-family: 'fontello';
            font-size: 1.4rem;
            color:#666;
            background-color: white;
            @media (max-width: 990px) {
              font-size: 0.8rem !important;
            }
            @media (max-width: 769px) {
              font-size: 1.25rem !important;
            }
            @media (max-width: 375px) {
              font-size: 1.10rem !important;
            }
            @media (max-width: 320px) {
              font-size: 1.10rem !important;
              
            }
          }
          &:focus  { text-decoration: underline !important; }
          &:hover  { text-decoration: underline !important; }
          &:active { text-decoration: underline !important; }
          display: inline-block;
          position: absolute;
          top: 5%;
          left: 0;
          right: 0;
          margin: auto;
          font-size: 1.4rem;
          @media (max-width: 1200px) {
            font-size: 1.1rem !important;
          }
          @media (max-width: 990px) {
            font-size: 0.8rem !important;
          }
          @media (max-width: 769px) {
            font-size: 1.25rem !important;
          }
        }
        &__category-image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          max-width: 60% !important;
          max-height: 60% !important;
        }
        &__category-link-local {
          &:focus  { text-decoration: underline !important; }
          &:hover  { text-decoration: underline !important; }
          &:active { text-decoration: underline !important; }
          display: inline-block;
          position: absolute;
          bottom: 8%;
          left: 5%;
          margin: auto;
          font-size: 0.95rem !important;
          @media (max-width: 1190px) {
            font-size: 0.8rem !important;
            bottom: 8%!important;
            left: 5%!important;
            }
          @media (max-width: 991px) {
            font-size: 0.5rem !important;
            bottom: 11%!important;
            left: 27%!important;
          }
          @media (max-width: 768px) {
            font-size: 1.1rem !important;
            left: 27%!important;
          }
          @media (max-width: 414px) {
            font-size: 0.75rem !important;
            left: 50px!important;
            &:after{ content: '>'; }
          }
          @media (max-width: 375px) {
            font-size: 0.75rem !important;
            left: 43px!important;
            &:after{ content: '>'; }
          }
          @media (max-width: 320px) {
            font-size: 0.5rem !important;
            left: 37px!important;
            &:after{ content: '>'; }
          }
        }
        &__category-link-foreign {
          &:focus  { text-decoration: underline !important; }
          &:hover  { text-decoration: underline !important; }
          &:active { text-decoration: underline !important; }
          display: inline-block;
          position: absolute;
          bottom: 8%;
          right: 5%;
          margin: auto;
          font-size: 0.95rem !important;
          @media screen and (max-width: 1190px) {
            font-size: 0.8rem !important;
          }
          @media screen and (max-width: 990px) {
            font-size: 0.5rem !important;
            bottom: 0px!important;
            right: 27%!important;
          }
          @media screen and (max-width: 768px) {
            font-size: 1.1rem !important;
            right: 28%!important;
          }
          @media screen and (max-width: 414px) {
            font-size: 0.75rem !important;
            margin-right: 50px!important;
            margin-left: none!important;
            right: 0px!important;
            &:after{ content: '>'; }
          }
          @media screen and (max-width: 375px) {
            font-size: 0.75rem !important;
            margin-right: 45px!important;
            margin-left: none!important;
            right: 0px!important;
            &:after{ content: '>'; }
          }
          @media screen and (max-width: 320px) {
            font-size: 0.5rem !important;
            margin-right: 35px!important;
            margin-left: none!important;
            right: 0px!important;
            &:after{ content: '>'; }
          }

        }
      }
    }
  }
}

.c-keywords {
  ul.keyword-groups {
    li {
      min-height: 54px;
      .col-sm-2 {
        color: #666; 
        font-size: 1rem;
      }
      a.btn {
        background: white;
        padding: .2rem 0.7rem;
        border: 1px solid $color-blue-main;
        font-size: 1rem;
        color: $color-blue-main;
        &:hover {
          color: white;
          background: $color-blue-main;
        }
      }
    }
  }
}

.c-returntop{
  cursor: pointer;
  position:fixed;
  @media screen and (max-width: 600px) {
    bottom: 1em;
    right: 1em;
  }
  bottom: 2em;
  right: 2em;
  z-index: 9999;
  opacity: 0.85 ;

}
.c-btn-news{
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: 50%;
  margin-top: 2rem;

  a.btn {
    position: relative;
    border: 1px solid $color-blue-main;
    color: $color-blue-main;
    &:hover {
      color: white;
      background: $color-blue-main;
    }
    i.icon-arrow {
      font-size: 1.2rem;
      line-height: 1rem;
    }
  }
}
.c-footer-center{
  @media (max-width: 1190px) {
  }
  @media (max-width: 990px) {
  }
  @media (max-width: 768px) {
  }
  @media (max-width: 375px) {
    // margin-left: 10%;
  }
}
//汎用リンクボタン罫線色
.c-border-color-blue{
  color: #0066cc !important;
}
// ブランドページTOPロゴスタイル
.c-brand-logo-area{
  display: -webkit-box;
  border-style: none!important;
  height: 320px;
  width: 910px;
  margin-left: 0px;
  margin-right: 15px;
  @media screen and (orientation: landscape) {
    /* 横向きの場合のスタイル */
    @media (max-width: 812px) { 
      width: 812px!important;
    }
    @media (max-width: 768px) { 
      width: 768px!important;
    }
    @media (max-width: 667px) { 
      width: 667px!important;
    }
    @media (max-width: 568px) { 
      width: 568px!important;
      height: 128px!important;
    }
  }
  @media screen and (orientation: portrait) {
    /* 縦向きの場合のスタイル */
    //height: 135px!important;
    @media (max-width: 768px) {
      height: 275px!important;
      width: 100%!important;
    }
    @media (max-width: 600px) {
      height: 275px !important;
      width: 100%!important;
    }
    @media (max-width: 568px) {
      height: 96px!important;
      width: 100%!important;
    }
    @media (max-width: 425px) {
      height: 96px!important;
      width: 100%!important;
    }
    @media (max-width: 375px) {
      height: 96px!important;
      width: 100%!important;
    }
    @media (max-width: 320px) { 
      height: 96px!important;
      width: 100%!important;
    }
  }
}
.c-brand-logo-leftarea{
  border: solid 1px $color-blue-main;
  width: 320px;
  height: 320px;
  position: relative;
  @media (min-width: 1201px) {
    width: 320px!important;
    height: 320px!important;
  }
  @media (max-width: 1200px) {
    width: 240px!important;
    height: 275px!important;
  }
  @media (max-width: 768px) {
    width: 221px!important;
    height: 275px!important;
  }
  @media (max-width: 568px) {
    width: 128px!important;
    height: 128px!important;
  }
  @media (max-width: 414px) {
    width: 115px!important;
    height: auto!important;
  }
  @media (max-width: 375px) {
    width: 103px!important;
    height: auto!important;
  }
  @media (max-width: 320px) {
    width: 87px!important;
    height: auto!important;
  }
}
.c-brand-logo-leftarea img{
  position: absolute;
  max-width: 85%;
  max-height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.c-brand-logo-centerarea{
  border-style: none!important;
  width: 14px;
  @media (max-width: 768px) { // SP以下は無効
    width: 0px!important;
    height: 0px!important;
  }
}
.c-brand-logo-rightarea{
  width: 576px; // PC時最大幅
  @media (min-width: 769px) {
    width:576px!important;
  }
  @media (max-width: 768px) {
    width:516px!important;
  }
  @media (max-width: 600px) {
    width:399px!important;
  }
  @media (max-width: 414px) {
    width:268px!important;
  }
  @media (max-width: 375px) {
    width:241px!important;
  }
  @media (max-width: 320px) {
    width:203px!important;
  }
  img{
    @media (min-width: 1201px) {
      max-width: 576px!important; // PC時最大幅
      height: 320!important;
    }
    @media (max-width: 1200px) {
      max-width: 495px!important;
      height: 275!important;
    }
    @media (max-width: 768px) {
      max-width: 495px!important;
      height: auto!important;
    }
    @media (max-width: 600px) {
      max-width: 495px!important;
      height: 100%!important;
    }
    @media (max-width: 568px) {
      max-width: 410px!important;
      height: 128px!important;
    }
    @media (max-width: 414px) {
      width: 100%!important;
      height: 96px!important;
    }
    @media (max-width: 375px) {
      width: 100%!important;
      height: 96px!important;
    }
    @media (max-width: 320px) {
      width: 100%!important;
      height: 96px!important;
    }
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
  .container { max-width: 738px!important; } 
}

#dealings{
  margin-top : -150px;
  padding-top : 150px;

}
#vorze{
  margin-top : 0px !important;
  padding-top : 20px !important;
}