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

// Html, Body, #page-wrapper
html,body { 
  height: 100%; min-height: 100%; position: relative; 
  -webkit-overflow-scrolling: touch !important;
}

#page-wrapper {
  padding: 0 0 90px;
  position: relative;
  z-index: 1;
  @media screen and (max-width: 991px) {
    padding-bottom: 20px !important;
  }
  @media screen and (max-width: 414px) {
    padding-top: 0px !important;
  }
}
#archive-wrapper { padding-top: 0; position: relative; z-index: 1; top: 0px; }
#search-wrapper { padding-top: 0; position: relative; z-index: 1; top: 0px;}
#single-wrapper { padding-top: 0; position: relative; z-index: 1; }
#page-search-wrapper {
  padding-top: 0; position: relative; z-index: 1; top: 0px;
  @media screen and (max-width: 414px) {
    top: 10px!important;
  }
  padding-bottom: 90px;
}

// Breadcrumbs
#breadcrumbs {
  font-size: 12px;
  a  { color: #666; }
  ul {
    display: flex;
    flex-wrap: wrap;
    &:last-child { padding-bottom: 0.6rem; border-bottom: 1px dotted #ccc; }
  }
  li { 
    &::after { content: '>'; padding: 0 .5rem; }
    &:last-child { 
      font-weight: bold;
      a { color: $color-blue-main; }
      &::after { content: ''; }
    }
  }
  position: relative;
  z-index: 2;
  margin: 7.6rem auto 1.5rem;
  &.multiple-breadcrumbs { margin-top: 7.5rem; }
  @media screen and (max-width: 991px) {
    margin-top: 4.6rem;
    margin-bottom: 1.5rem;
    &.multiple-breadcrumbs { margin-top: 4.5rem; }
  }
  @media screen and (max-width: 769px) {
    margin-bottom: 1rem;
  }
  @media screen and (max-width: 568px) and (orientation: landscape) {
    padding-top: 25px !important;
  }
}


// Fontello
[class^="icon-"]:before, [class*=" icon-"]:before { margin-left: 0; }

// Object-fit
.object-fit--cover {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}
.object-fit--contain {
  object-fit: contain;
  font-family: 'object-fit: contain;';
}
.object-fit--fill {
  object-fit: fill;
  font-family: 'object-fit: fill;';
}
.object-fit--scale-down {
  object-fit: scale-down;
  font-family: 'object-fit: scale-down;';
}

// Headings
.entry-title {
  position: relative;
  margin: 0 auto 2rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid lighten($color-blue-main, 20%);
  color: $color-blue-main;
  font-size: 2rem;
  &::before {
    content: '\e800 ';
    font-family: 'fontello';
    color: lighten($color-blue-main, 20%);
  }
}

// Contents
.entry-content {
  color: #666 !important;
  p { margin: 0 auto 1rem; }
}

// Header
div#wrapper-navbar {
  position: fixed;
  width: 100%;
  background-color: white;
  z-index: 999;
  top: 0px;
  div.over-globalmenu {
    padding-right: 0px!important;
    padding-left: 0px!important;
    @media (max-width:991px) {
      flex-wrap: wrap;
    }
    width: 100%;
    // ヘッダーロゴ
    div.logo-over-globalmenu {
      @media (max-width:1199px) {
        width: 200px;
      }
      @media (max-width:991px) {
        display: block!important;
      }
      @media (max-width:575px) {
        padding-left: 15px;
      }
    }
    // リンク、サーチフォーム(サイトロゴを除くヘッダ上部のパーツエリア)
    // 991px以下で非表示にする
    div.wrap-link-over-globalmenu {
      @media (max-width:991px) {
        display: none!important;
      }
      a.d-flex {
        color: #666;
        position: relative;
        width: auto;
        &:hover {
          color: #666;
          text-decoration: underline;
        }
        p {
          font-size: 13px;
          line-height: 1rem;
        }
      }
      // Search form
      form#searchform {
        width: 200px;
        @media(max-width:1200px) {
          width: 150px;
        }
        @media(max-width:991px) {
          width: 130px;
        }
        label.assistive-text {
          display: none;
        }
        div.input-group {
          height: 43.59px;
          input.field.form-control {
            border-radius: 0;
            border: 1px solid $color-blue-main;
          }
          // Submit Btn
          span.input-group-append {
            button.submit {
              border-radius: 0;
              border: 1px solid $color-blue-main;
              background: $color-blue-main;
            }
          }
        }
      }
      // Keyword
      a.keyword-in-over-global-menu {
        position: relative;
        padding: 0.3rem;
        font-size: 13px;
        font-weight: bold;
        line-height: 1rem;
        color: $color-blue-main;
        border: 1px solid $color-blue-main;
        height: 43.59px;
        transition: color .15s ease-in-out;
        text-decoration: none;
        min-width: 65px;
        max-width: 180px;
        &:hover {
          color: white;
          background: $color-blue-main;
          text-decoration: none;
        }
        i.icon-arrow {
          font-size: 1.2rem;
        }
      }
    }
  }
  nav.navbar {
    padding: 0;
    border-bottom: 1px solid $color-blue-main;
    background-image: url('/img/dot_w14.gif');
  }
}

div#mega-menu-wrap-primary.mega-menu-wrap {
  width: 100%;
  ul#mega-menu-primary {
    display: flex;
    justify-content: space-between;
    p {
      margin-top: 5px;
      margin-bottom: 0px; // Reset
    }
    li.mega-menu-item {
      width: 100%;
      a.mega-menu-link {
        text-align: center;
        white-space: nowrap;
      }
    }
    ul.newproduct-in-menu {
      li {
        a {
          display: block;
          color: white;
          line-height: 1.0rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .textwidget.custom-html-widget {
      > a {
        color: white;
        &:hover { color: white; }
      }
      dl.keyword-groups.keyword-groups--inmenu {
        line-height: 2;
        width: 100%;
        // overflow: hidden;
        dt {
          width: 15%;
          height: 100%;
          padding: 0.8rem 0;
          padding-right: 0.5rem;
          float: left;
          overflow: visible;
          font-weight: bold;
        }
        dd {
          padding: 0.8rem 0.5rem;
          margin: 0 0 0 15%;
          &::after {
            content: '';
            display: block;
            clear: both;
          }
          a.btn {
            color: $color-blue-main;
            &:hover {
              color: white;
              background: $color-blue-main;
            }
          }
        }
      }
      ul.brands-in-menu {
        width: 100%;
        li.brand-wrap {
          width: 24.5%;
          padding: 1rem;
          a {
            display: block;
            color: white;
            div.brand-bg {
              position: relative;
              img {
                
              }
              div.brand-logo-wrap {
                position: absolute;
                content: '';
                width: 100%;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                div.brand-logo {
                  background: white;
                  width: 200px;
                  height: 60px;
                  padding: 0.5rem;
                  visibility: hidden;
                  img {
                    // 縦横比を保ってボックスに格納
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
      div.wrap-categories {
        div.wrap-category {
          background-image: url('/img/dot_g100.gif');
          width: 31%;
          height: auto;
          position: relative;
          margin-bottom: 1rem;
          &:before {
            content: "";
            display: block;
            padding-top: 100%; /* ここを100％にすることで正方形になる */
            @media screen and (max-width: 990px) {
              padding-top: 130%;
            }
          
          }
          div.inner {
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%;
            height: 100%;
            padding-top: 0.5em;
            padding-bottom: 1em;
            text-align: center;
            a.cate-name {
              &::before{
                content: '\E800';
                font-family: 'fontello';
                color:#666;
                background-color: white;
                @media (max-width: 990px) {
                }
                @media (max-width: 769px) {
                }
              }
              &:focus  { text-decoration: underline !important; }
              &:hover  { text-decoration: underline !important; }
              &:active { text-decoration: underline !important; }
              color: white;
              font-size: 16px;
              font-weight: bold;
              @media(max-width:990px) {
                font-size: 10px!important;
              }
            }
            div.wrap-cate-logo {
              width: 5vw;
              height: 5vw;
              margin: 0 auto;
              img {
                width: 100%; // Need
                height: 100%; // Need
              }
            }
            div.link-bottom {
              a.domestic{
                &:focus  { text-decoration: underline !important; }
                &:hover  { text-decoration: underline !important; }
                &:active { text-decoration: underline !important; }
                color: white;
                font-size: 11px!important;
                padding-bottom: 3px;
                margin-left: 5px!important;
                &:hover {
                  text-decoration: none;
                }
                @media screen and ( max-width:1199px){
                  margin-left: 4px!important;
                  &:after{
                    content: '>\A';
                    white-space: pre;
                  }
                }
                  
              }
              a.foreign{
                &:focus  { text-decoration: underline !important; }
                &:hover  { text-decoration: underline !important; }
                &:active { text-decoration: underline !important; }
                color: white;
                font-size: 11px!important;
                padding-bottom: 3px;
                margin-left: 0px!important;
                &:hover {
                  text-decoration: none;
                }
                @media screen and ( max-width:1199px){
                  margin-left: 1px!important;
                  &:after{
                    content: '>\A';
                    white-space: pre;
                  }
                }
              }


            }

          }
        }
      }
    }
  }
}

// Footer
#wrapper-footer {
  padding-bottom: 0;
  border-top: 1px solid $color-blue-main;
    footer.site-footer {
      div.footer-bg-white {
        .container {
          div.d-flex {
            div {
              width: 80%;
              div.d-flex.align-items-center {
                border-bottom: 1px solid $color-blue-main;
                padding-bottom: 0.5rem;
                margin-bottom: 1rem;
                i.icon-arrow-square {
                  color: $color-blue-main;
                  font-size: 1.5rem;
                  line-height: 1rem;
                }
                a {
                  color: $color-blue-main;
                  margin-left: 0.5rem;
                  font-weight: bold;
                }
              }
              ul {
                li {
                  margin-bottom: 1rem;
                  i.icon-arrow-square-reverse {
                    color: $color-blue-main;
                    line-height: 1rem;
                  }
                  a {
                    color: #666;
                    margin-left: 0.1rem;
                    font-size: 13px;
                  }
                }
              }
            }
          }
        }
      }
      // Blue
      div.footer-bg-blue {
        position: relative;
        & > .container {
          @media screen and (min-width: 992px) {
            position: relative;
          }
        }
        div.d-flex {
          @media (max-width:991px){
            justify-content: center!important;
          }
          div.d-flex.align-items-center {
            i.icon-arrow-square-reverse {
              color: white;
              line-height: 1rem;
            }
            a {
              color: white;
              font-size: 13px;
              margin-left: 0.1rem;
              margin-right: 0.75rem;
            }
          }
        }
        div.text-center {
          p {
            font-size: 12px;
            color: white;
          }
        }
      }
    }
}

// Search form in right side bar area
#custom-search-widget {
  > h3 {
  }
  aside {
    form {
      div.input-group {
        input {
          margin-top: 1.5rem;
          margin-bottom: 1.5rem;
        }
        margin-bottom: -24px;
      }
      div.safse-taxonomies-wrap {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        h3.safse-taxonomy-title {
          margin: 0 auto .2rem;
          color: #06c;
          font-size: 1.6rem;
          padding-bottom: 1rem;
          border-bottom: 1px dotted #ccc;
          margin-top: 1.5rem!important;
        }
        div.safse-terms-wrap {
          label.safse-term-label {
            color: $color-blue-main;
            padding: 0.4rem;
            margin: 0.2rem;
            input.safse-term-checkbox {
              margin-right: 0.2rem;
            }
          }
        }
      }
      button.btn-blue {
        border: 1px solid $color-blue-main;
        background: white;
        color: $color-blue-main;
        width: 40%;
        &:hover {
          background: $color-blue-main;
          color: white;
        }
        @media (max-width: 991px) {
          width: 100%;
        }
      }
    }
  }
}

// Navigation
nav {
  display: flex;
  justify-content: center;
  > ul.pagination {
    margin-top: 2rem;
    margin-bottom: 2rem;
    li.page-item {
      a.page-link {
        border-radius: 0;
        border: 1px solid $color-blue-main;
        color: $color-blue-main;      
        span {
          
        }
        + span.sr-only {
          
        }
      }
      &.active {
        span.page-link.current {
          border: 1px solid $color-blue-main;
          background-color: $color-blue-main;
          color: white;
        }
      }
    }
  }
}

// SP メニュー関連
@media (min-width:992px) {
  // SPメニュー
  #sp-menu {
    display: none;
  }
}
@media (max-width:991px) {
  // PC メニュー
  #mega-menu-wrap-primary {
    display: none!important;
  }
}

// ロゴが押せるように
div.over-globalmenu {
  div.logo-over-globalmenu {
    z-index: 1;
  }
}
body.sp-menu--active { overflow: hidden; }

// SP対応関連
@media (max-width: 1199px) {
  #wrapper-footer footer.site-footer div.footer-bg-white > .container div div div.d-flex {
    width: 85%;
  }
}
@media (max-width: 991px) {
  #wrapper-footer {
    border-top: inherit;
    padding: 0;
    .footer-bg-white {
      display: none;
    }
  }
}
body.page-template-pages-top {
  section.lists-categories {
    div.wrap-categories {
      div.wrap-category {
        @media (max-width: 991px) {
          width: 31%!important;
        }
        @media (max-width: 768px) {
          width: 48%!important;
          .inner {
            .cate-name {
              font-size: 1rem!important;
            }
          }
        }
        @media (max-width: 576px) {
        }
      }
    }
  }
}

@media (min-width: 991.98px) {
  div#mega-menu-wrap-primary.mega-menu-wrap ul#mega-menu-primary .textwidget.custom-html-widget div.wrap-categories div.wrap-category .link-bottom {
    padding-top: 5px;
    a {
      font-size: 1rem !important;
      margin: 0px 10px 0px;
    }
  }
}
@media (min-width: 767.98px) {
  #mega-menu-wrap-primary.mega-menu-wrap #mega-menu-primary .textwidget.custom-html-widget .wrap-categories .wrap-category .cate-name {
    font-size: 12px !important;
  }
}
@media (max-width: 767.98px) {
  #mega-menu-wrap-primary.mega-menu-wrap #mega-menu-primary .textwidget.custom-html-widget .wrap-categories .wrap-category {
    width: 47% !important;
    padding-bottom: .8em;
  }
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
  max-height: 90vh;
  overflow: hidden;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu {
  overflow-y: scroll;
}
.new-btn-background {
  width: 40px;
  height: 40px;
  border: 0;
  background-image: url('/img/btn_news_open.png');
  &:active {
    background-color: none;
    background-image: url('/img/btn_news_open.png') !important;
  }
  &--active {
    &:active {
      background-image: url('/img/btn_news_close.png') !important;
    }
    background-image: url('/img/btn_news_close.png');
  }
}
.new-btn-color{
  font-weight: 100 !important;
}
.pc-mode{
  visibility: hidden;
  width: 0%!important;
  @media screen and (min-width: 768px) {
    visibility: visible!important; 
    width: 50%!important;
  }
}
.sp-mode{
  visibility: hidden;
  width: 0%!important;
  height: 50px!important;
  @media screen and (max-width: 767px) {
    visibility: visible!important; 
    width: 50%!important;
    margin-top: 5px!important;
    margin-bottom: 5px!important;  }
}

.bg-white{
  background-color: white!important;
}

// news in PC menu 2018/11/06
div#mega-menu-wrap-primary {
  #mega-menu-primary {
    li.mega-menu-item-434 { // 新着情報
      li#mega-menu-434-0-0 { // 新着情報
        .custom-html-widget {
          .post-news-wrap.in-menu {
            .post-news {
              height: 100%;
              display: flex;
              align-items: flex-start;
              padding-bottom: 1rem;
              padding-right: 1rem;
              margin-bottom: 1rem;
              background-image: linear-gradient(to right, white, white 1px, transparent 1px, transparent 4px);
              background-size: 5px 1px;
              background-position: bottom;
              background-repeat: repeat-x;
              // width: 100%;
              .date { margin-right: 1.5rem; margin-top: 0; }
              .badge { padding: 3px 16px; margin-top: 0; }
              .icon-arrow {
                margin-left: .5rem;
              }
              a.post-t-wrap {
                &:hover {
                  color: white;
                }
                p.post-t {
                  margin-top: 0; 
                  color: white;
                }
              }
            }
          }
        }
      }
      li#mega-menu-434-0-1 { // 新商品
        ul.newproduct-in-menu {
          flex-wrap: wrap;
          li.col-4 {
            padding-left: 0;
            padding-bottom: 1rem;
          }
        }
      }
    }
  }
}

// read only input type "date"
:disabled.form-control, [readonly].form-control, .wpcf7 :disabled.wpcf7-validation-errors, .wpcf7 [readonly].wpcf7-validation-errors, input:disabled[type=date], .wpcf7 input[readonly][type=date], .wpcf7 input[readonly][type=datetime-local], .wpcf7 input[readonly][type=datetime] {
  background-color: white;
}

#wrapper-footer {
  #colophon {
    .footer-bg-blue {
      .container {
        position: relative;
        overflow-x: hidden;
        .d-flex {
          .footer-link-wrap {
            display: flex;
            flex-wrap: wrap;
            @media (max-width:767px) {
              margin-bottom: 1rem;
            }
            .d-flex.align-items-center {
              .icon-arrow-square-reverse {
                color: #fff;
                line-height: 1rem;
              }
              a {
                color: #fff;
                font-size: 13px;
                margin-left: .1rem;
                margin-right: .75rem;
              }
            }
          }
          #sns-btn--footer {
            display: inline-block;
            outline: 0 !important;
            @media (max-width:767px) {
              display: block;
              width: 100%;
              text-align: center;
            }
            .addtoany_list {
              display: inline-block;
              .a2a_button_twitter {
                padding-right: 0;
              }
              .a2a_button_line {
                padding-left: 0;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 991px) {
  #wrapper-footer footer.site-footer div.footer-bg-blue div.d-flex {
    justify-content: space-between !important;
  }
}