@charset "UTF-8";

/*--------------------------------------------------*/

/* common

/*--------------------------------------------------*/
.b-cat {
  .b-item {
    display: inline-block;
    min-width: 4em;
    padding: 0 .9em;
    text-align: center;
    font-family: var(--fontNum);
    font-size: min(3.5vw,14px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--blue);
    border: 1px solid var(--blue);
    border-radius: var(--r);
  }
}
data {
  font-size: min(3.5vw,14px);
}

/* archive ------------------------*/

.b-pagenation {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-family: var(--fontNum2);
  font-weight: 300;
  color: var(--txt);
  .e-txt {
    font-size: 0;
  }
  .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    width: min(10vw,40px);
    border-radius: var(--r);
    font-size: min(4.5vw,18px);
    position: relative;
    &.current {
      background: #000;
      color: #fff;
    }
    &.next,
    &.prev {
      &::after {
        content: "";
        display: block;
        aspect-ratio: 1/1;
        width: .5em;
        border-right: 1px solid var(--txt);
        border-bottom: 1px solid var(--txt);
        position: absolute;
        top: 1.06em;
        right: 28%;
        transform: var(--arw);
      }
    }
    &.prev {
      transform: scaleX(-1);
    }
  }
}
@media screen and (min-width: 768px) {
  .b-pagenation {
    .page-numbers {
      transition: var(--transition);
      &:hover {
        background: #000;
        color: #fff;
      }
      &.next,
      &.prev {
        &:hover {
          &::after {
            border-color: #fff;
          }
        }
      }
    }
  }
}

/* single ------------------------*/

.b-singlePost {
  .b-postHead {
    display: flex;
    flex-direction: column-reverse;
    .b-postDetail {
      gap: 10px 20px;
      margin: 0 0 30px;
    }
  }
  .b-postBody {
    a {
      color: var(--blue);
      text-decoration: underline;
      &[target="_blank"] {
        position: relative;
        padding-right: 1.5em;
        &::after {
          content: "";
          display: block;
          aspect-ratio: 1/1;
          width: 1.15em;
          background: url(../images/icon-link_blank.png) center center / contain no-repeat;
          position: absolute;
          right: 0;
          top: .2em;
        }
      }
    }
    p+p {
      margin-top: 40px;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-singlePost {
    .b-postBody {
      a {
        transition: var(--transition);
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

/* postNav */
.b-postNav {
  .b-all {
    margin-bottom: 20px;
    .b-btn {
      width: 220px;
      height: 50px;
      margin: 0 auto;
    }
  }
  .b-prevnext {
    display: flex;
    justify-content: flex-end;
    .b-btn {
      aspect-ratio: 1/1;
      border: 0;
      filter: none;
      &::after {
        content: "";
        display: block;
        aspect-ratio: 1/1;
        width: .55em;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        position: absolute;
        top: 50%;
        right: 1.2em;
        transform-origin: center center;
        transform: var(--arw);
        transition: var(--transition);
      }
      &.m-prev {
        &::after {
          right: .9em;
          transform: translate(-70%,-50%) rotate(135deg) skew(15deg,15deg);
        }
      }
    }
    .e-txt {
      font-size: 0;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-postNav {
    .b-prevnext {
      .b-btn {
        &:hover {
          &::after {
            border-color: #fff;
          }
        }
      }
    }
  }
}
.b-morePost {
  margin-top: 100px;
}


/*--------------------------------------------------*/

/* NEWS

/*--------------------------------------------------*/

body.news {
  .b-singlePost {
    max-width: 860px;
    margin: 0 auto 50px;
  }
}

/* archive */
body.news {
  .b-monthArchive {
    text-align: right;
    margin-bottom: 50px;
    .inner {
      display: inline-block;
      min-width: 200px;
      position: relative;
      &::after {
        content: "";
        display: block;
        aspect-ratio: 1/1;
        width: .5em;
        border-right: 1px solid var(--txt);
        border-bottom: 1px solid var(--txt);
        position: absolute;
        right: 2em;
        top: 45%;
        transform: var(--arw-d);
      }
    }
    .b-monthSelect {
      width: 100%;
      font-size: min(4.5vw,18px);
      font-weight: 500;
      padding: 11px 45px 11px 15px;
      border: 1px solid var(--line-d);
      border-radius: var(--r);
      position: relative;
      cursor: pointer;
    }
  }
  
  .b-postList {
    .b-post {
      border-bottom: 1px solid var(--line-t);
    }
  }
  .b-postList a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    .b-postDetail {
      margin-top: 0;
      gap: 10px 20px;
      flex-shrink: 0;
    }
    .e-mds {
      font-size: min(4vw,16px);
      font-weight: 400;
      line-height: 1.5;
      padding-top: .05em;
      margin-bottom: 0;
    }
  }
}
@media screen and (max-width: 767px) {
  body.news {
    .b-postList a {
      flex-direction: column-reverse;
      padding: 20px 0;
    }
  }
}
@media screen and (min-width: 768px) {
  body.news {
    .b-postList a {
      flex-direction: row-reverse;
      justify-content: flex-end;
      padding: 30px 0;
      transition: var(--transition);
      &:hover {
        .e-mds {
          color: var(--blue);
          text-decoration: underline;
        }
      }
    }
  }
}


/* single */
body.news {
  .b-singlePost {
    max-width: 860px;
    margin: 0 auto 50px;
  }
}

/*--------------------------------------------------*/

/* CASE STUDY

/*--------------------------------------------------*/
.b-postDetail {
  font-size: min(4vw,16px);
  line-height: 1.5;
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  >span  {
    display: inline-block;
    font-size: min(4vw,15px);
    font-weight: 500;
    background: var(--bg);
    padding: 3px 17px;
  }
  .b-productData {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .e-brandName {
    font-family: var(--fontEN);
    font-weight: 300;
    letter-spacing: .1em;
    font-size: min(3.5vw,14px);
  }
  .e-productName {
    font-size: min(5vw,20px);
    font-weight: 600;
    margin-bottom: 3px;
  }
}

/* archcive */

body.casestudy {
  .e-caseLead {
    margin-bottom: 50px;
  }
  .b-postList {
    display: grid;
    .b-post {
      a {
        display: flex;
        flex-direction: column-reverse;
      }
      .b-img {
        aspect-ratio: 380/270;
        overflow: hidden;
        margin-bottom: 15px;
        .e-img {
          width: 100%;
          height: 100%;
          img {
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
        }
      }
      .b-txts {
        display: flex;
        flex-direction: column-reverse;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  body.casestudy {
    .b-postList {
      gap: 50px 10px;
      grid-template-columns: repeat(2,1fr);
    }
  }
}
@media screen and (min-width: 768px) {
  body.casestudy {
    .b-postList {
      gap: 50px min(4vw,65px);
      grid-template-columns: repeat(3,1fr);
      .e-img {
        transition: var(--transition);
        img {
          transition: var(--transition);
        }
      }
    }
  }
}

/* single */

body.casestudy {
  .b-singlePost {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 100px;
    .b-caseDetail {
      dt {
        display: inline-flex;
        justify-content: space-between;
        width: 5.5em;
        font-size: min(3.75vw,15px);
        &::before {
          content: "[";
        }
        &::after {
          content: "]";
        }
      }
      &+.b-caseDetail {
        margin-top: 40px;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  body.casestudy {
    .b-singlePost {
      .b-mds,
      .b-postDetail,
      .b-img {
        margin-bottom: 30px;
      }
      .b-caseDetail {
        dt {
          margin-bottom: 20px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  body.casestudy {
    .b-singlePost {
      .e-client {
        font-size: 32px;
      }
      .b-postDetail,
      .b-img {
        margin-bottom: 50px;
      }
      .b-caseDetail {
        display: flex;
        gap: 20px;
        dt {
          flex-shrink: 0;
        }
      }
    }
  }
}


/* archcive */