@charset "UTF-8";

/**
 * common
 */

/* breadcrumb */

.breadcrumbs {
  color: #fff;
  background: var(--c2);
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 2rem;
  a {
    color: #fff;
    text-decoration: none;
  }
  .current-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* page header */

.page_header {
  img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* content */

.content_body {
  padding-top: 94px;
}

.content_body_b {
  margin-top: 94px;
  padding-top: 85px;
  padding-bottom: 80px;
  background: var(--c3);
}

.content_common_body {
  .date {
    font-size: 1.6rem;
    span {
      display: inline-block;
      margin-left: 12px;
      border: 1px solid var(--c2);
      padding: 3px 6px;
      font-size: 1.2rem;
    }
  }
  h1 {
    color: var(--c2);
    font-family: var(--go);
    margin-top: 12px;
    margin-bottom: 40px;
  }
}

/* category */

.category_list {
  text-align: center;
  background: var(--c3);
  padding: 12px 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  margin-bottom: 60px;
  h3 {
    color: var(--c2);
    font-family: var(--en);
    font-size: 2rem;
  }
  .category_elements {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    .category_element {
      text-decoration: none;
      border-right: 1px solid var(--c2);
      color: var(--c2);
      padding: 2px 12px;
      font-size: 1.6rem;
    }
    .category_element:last-child {
      border-right: none;
    }
  }
}

/* pagenation */

.archive_pagenation {
  margin-top: 80px;
  text-align: center;
  a {
    color: var(--c2);
    font-family: var(--en);
  }
  span.current {
    font-family: var(--en);
  }
  .prev,
  .next {
    font-family: var(--go);
  }
}

.customer_content .archive_pagenation {
  a,
  span.current {
    color: #fff;
  }
}

/* page-navi */

.page_navi {
  .inner {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 2px dotted var(--c2);
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
    a {
      text-decoration: none;
      font-family: var(--go);
      color: var(--c2);
    }
    .next,
    .prev {
      width: calc((92% - 120px) / 2);
      a {
        background: var(--c3);
        padding: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        .thumb {
          width: 40%;
          position: relative;
          img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover;
          }
        }
        .thumb::before {
          content: "";
          display: block;
          padding-top: calc(28000% / 426);
        }
        h3 {
          width: calc(60% - 16px);
          font-size: 1.6rem;
        }
      }
    }
    .prev {
      a {
        .thumb {
          order: 2;
        }
        h3 {
          order: 1;
        }
      }
    }
    .list {
      width: 120px;
      display: flex;
      align-items: center;
    }
  }
}

@media screen and (max-width: 1110px) {
}
@media screen and (max-width: 740px) {
  .content_body {
    padding-top: 40px;
  }
  .breadcrumbs {
    font-size: 1.4rem;
  }
  .content_common_body {
    h1 {
      font-size: 2.4rem;
    }
  }
  .category_elements_option {
    select {
      margin-top: 12px;
      border: 1px solid var(--c2);
      padding: 10px;
      width: calc(100% - 20px);
      option {
      }
    }
  }
  .page_navi {
    .inner {
      gap: 24px;
      .next,
      .prev {
        width: 100%;
        a {
          .thumb {
            order: 1;
          }
          h3 {
            order: 2;
          }
        }
      }
      .list {
        width: 100%;
        justify-content: center;
      }
    }
  }
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 500px) {
}