@charset "utf-8";
// Top page
body.page-template-pages-top {
  h2 {
    text-align: center;
    color: $color-blue-main;
  }
  
  section.page-top-widget-area {
    padding-top: 50px!important;
    min-height: 50vh; // 明示的に設定
    @media screen and (max-width: 1200px) {
      padding-top: 40px !important;
    }
    @media screen and (max-width: 991px) and (min-width: 768px) {
      padding-top: 0px !important;
    }
    @media screen and (max-width: 767px) and (min-width: 415px) {
      padding-top: 30px !important;
    }
    @media screen and (max-width: 414px) {
      padding-top: 70px!important;
    }
    @media screen and (max-width: 375px) {
      padding-top: 65px!important;
    }
  
  }
  section.lists-brands__top {
  }
  // カテゴリ
  section.lists-categories {
    div.wrap-categories {
      div.wrap-category {
        background: #666;
        width: 19%;
        height: auto;
        position: relative;
        margin-bottom: 1rem;
        overflow: hidden;
        &:before {
          content: "";
          display: block;
          padding-top: 100%; /* ここを100％にすることで正方形になる */
        }
        div.inner {
          position: absolute;
          top: 0; 
          left: 0;
          width: 100%;
          height: 100%;
          padding: 1em;
          text-align: center;
          a.cate-name {
            position: absolute;
            top: 5%;
            left: 0;
            right: 0;
            margin: auto;
            color: white;
            font-size: 18px;
            font-weight: bold;
          }
          div.wrap-cate-logo {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            max-width: 50%;
            max-height: 50%;
            img {
              width: 100%; // Need
              height: 100%; // Need
            }
          }
          div.link-bottom {
            position: absolute;
            bottom: 8%;
            left: 0;
            right: 0;
            margin: auto;
            a {
              color: white;
              font-size: 13px;
              border-bottom: 1px solid white;
              padding-bottom: 3px;
              transition: all .3s;
              &:hover {
                text-decoration: none;
                font-weight: bold;
                border-bottom: 1px solid $color-blue-main;
                color: $color-blue-main;
              }
            }
          }
        }
      }
    }
  }
  // 新着情報
  
  div.white-space-before {
    position: absolute;
    content: '';
    background: white;
    z-index: -1;
    transform: skewY(-2deg);
  }
  div.white-space-after {
    position: absolute;
    content: '';
    background: white;
    transform: skewY(-2deg);
    min-height: 820px;
    z-index: -1;
  }

  section.posts-news {
    div.row.pt-5 {
      div.wrap-posts {
        div.post-news {
          // 破線調整
          background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
          background-size: 5px 1px;
          background-position: bottom;
          background-repeat: repeat-x;
          .row {
            width: 100%;
            > p.col-sm-12 {
              text-align: left;
              max-width: 20%;
            }
            div {
              div.d-flex {
                p.badge {
                  width: 70px;
                }
              }
              a.post-t-wrap {
                position: relative;
                p.post-t {
                  color: #666;
                  text-align: left;
                }
                &:hover {
                  color: #666;
                }
              }
              i.icon-arrow {
                color: $color-blue-main;
              }
            }
          }
        }
        div {
          text-align: center;
          a.btn {
            visibility: hidden; //非表示
            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;
            }
          }
        }
      }
    }
  }
  // Lists keyword
  section.lists-keyword {
    width: 100%;
    position: relative;
    h2 {
      color: white;
    }
    ul.keyword-groups {
      li {
        min-height: 54px;
        div.row {
          .col-sm-2 {
            color: white;
          }
        }
        a.btn {
          color: $color-blue-main;
          background: white;
          border: 1px solid $color-blue-main;
          &:hover {
            color: white;
            background: $color-blue-main;
          }
        }
      }
    }
    div.text-center {
      a.btn {
        width:  50%;
        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;
        }
      }
    }
  }
}

.custom-html-widget {
  .row * { font-size: .95em; }
  .card-body        { padding: .8rem; 
    box-shadow:0px 0px 0px 3px #ffffff inset;
  }
  .card-title       { font-size: 1.6em; margin-bottom: 0.2em; }
  .card-title small { font-size: 0.8em; display: block; }
  .card-text        { font-size: 1em; color: #666; }
  .card {
    border: 1px solid $color-blue-main;
    border-radius: 0;
    .badge {
      position: absolute;
      top: -10px;
      left: 5px;
      padding: .3rem;
    }
    &-img-top {
      box-shadow:0px 0px 0px 3px #ffffff inset;
      border-radius: 0;
      padding: 1px;
    }
    &::after {
      content: '\e800';
      position: absolute;
      bottom: -8px;
      right: -2px;
      font-family: 'fontello';
      font-size: 1.5rem;
      color: $color-blue-main;
    }
  }
  padding: 2rem 0 1rem;
  @media screen and (max-width: 767px) {
    padding: 1rem 0 1rem;
    padding-top: 0px;
  }
  @media screen and (max-width: 414px) {
    padding: 1rem 0 1rem;
    padding-top: 5px;
  }
  @media screen and (max-width: 375px) {
    padding: 0rem 0 1rem;
    padding-top: 16px;
  }
}
.custom-banner-area {
  margin-bottom: 1rem;
  text-align: center;
}
.mb-20 {
  padding-top: 50px!important;
}
.custom-html-widget-about .card-title {
  &:lang(en) {
    margin-bottom: 1.0em !important;
  }
}

// ver1.1.0
body.l-ie {
  .custom-html-widget .card::after {
    bottom: -7.5px !important;
    right: -1.5px !important;
  }
  .lists-brands.lists-brands__top div.row a.col-md-6 div.card::after {
    right: -1.5px !important;
    text-decoration: none;
    @media (max-width:991px) {
      bottom: -7.5px;
    }
  }
}
body.l-edge {
  .custom-html-widget .card::after {
    bottom: -7px !important;
    @media (max-width:991px) {
      bottom: -7.5px !important;
    }
  }
  .lists-brands.lists-brands__top div.row a.col-md-6 {
    div.card {
      &::after {
        display: inline-block;
        text-decoration-line: none;
        bottom: -7.5px !important;
        right: -1.5px !important;
      }
    }
  }
}
body.l-ios {
  .custom-html-widget .card::after {
    bottom: -8px !important;
    right: -2px !important;
  }
  .lists-brands.lists-brands__top div.row a.col-md-6 div.card::after {
    right: -2px !important;
    text-decoration: none;
    @media (max-width:991px) {
      bottom: -8px !important;
    }
  }
}