@charset "UTF-8";

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

---------------------------------------- */
.page-header {
  background-image: url(/projects/images3/title-mv_sp.jpg);
}

h1 span {
  font-size: 1.4rem;
}


/* ----------------------------------------
.nav-category
---------------------------------------- */
.nav-category{
  background-color: #f2f6f8;
  padding: 0 1.5rem;
}

.nav-category-inner .c-all{
  font-size: 1.6rem;
  margin: 0 0 2rem 0;
}

.nav-category-inner ul {
  gap: 1rem;
  width: auto;
}

.nav-category-inner ul li{
  width: calc((100% - 1rem)/2);
}

.nav-category-inner ul a {
  font-size: 1.4rem;
  min-height: 5.6rem;
}

.nav-category-inner ul a figure{
  width: 3.6rem;
}



/* ----------------------------------------
.new-projects
---------------------------------------- */
.new-projects + .nav-category-inner{
  padding: 1rem 0 3rem;
}

.new-projects a{
  gap: 1.2rem;
  font-size: 1.5rem;
  padding: 2rem 1.5rem;
  min-height: 8rem;
}

  .new-projects a::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.2rem);
    left: 2.3rem;
    width: 0.66rem;
    aspect-ratio: 1/1;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
  }



/* ----------------------------------------
.projects-content
---------------------------------------- */
.projects-content ul {
}

.p-list {
  gap: 4rem 1.5rem;
}

.p-list li {
  width: calc((100% - 1.5rem) / 2);
}

.p-list figure {
  margin: 0 0 1rem 0;
}

.p-list .p-list-category{
  gap: 0.4rem;
}

.p-list .p-list-category span{
  padding: 0.6rem 0.8rem;
}

.p-list .p-list-product{
  font-size: 1.2rem;
}


/* ----------------------------------------
.pagination
---------------------------------------- */
.pagination ol li{
  margin: 4rem 0 6rem 0;
}
.pagination ol li .current_page,
.pagination ol li a{
  width: 3.8rem;
  height: 3.8rem;
}
.pagination ol li a.link_before,
.pagination ol li a.link_next{
  width: 7rem;
}
.pagination ol li a.link_before::before{
  right: 0.5rem;
}
.pagination ol li a.link_next::after{
  left: 0.5rem;
}

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

---------------------------------------- */
.c-more-contents button {
  margin-top: 4rem;
}