@charset "UTF-8";
/* Scss Document */
:root {
  --pc: 1000px;
  --sp: 999px;
  --fs48: 4.8rem;
  --fs42: 4.2rem;
  --fs36: 3.6rem;
  --fs28: 2.8rem;
  --fs24: 2.4rem;
  --fs20: 2.0rem;
  --fs18: 1.8rem;
  --fs16: 1.6rem;
  --fs14:1.4rem;
  --fs12:1.2rem; }

@media (max-width: 999px) {
  :root {
    --fs48: 2.4rem;
    --fs42: 2.4rem;
    --fs36: 2.2rem;
    --fs28: 2.0rem;
    --fs24: 1.8rem;
    --fs20: 1.6rem;
    --fs18: 1.4rem;
    --fs16: 1.4rem;
    --fs14: 1.2rem;
    --fs12: 1.0rem; } }
.works #news-archive {
  padding: 0 0 16rem; }
  @media (max-width: 999px) {
    .works #news-archive {
      padding-bottom: 6rem; } }
  .works #news-archive .inner12 {
    display: grid;
    gap: 8rem 5.5rem;
    grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 999px) {
      .works #news-archive .inner12 {
        gap: 2rem 1.5rem;
        grid-template-columns: repeat(2, 1fr); } }
  .works #news-archive li a {
    display: block;
    background: none;
    padding: 0;
    margin-bottom: 0; }
  .works #news-archive .sttl {
    font-size: 1.6rem;
    text-align: justify;
    line-height: 1.5;
    margin-bottom: 0.4rem; }
    @media (max-width: 999px) {
      .works #news-archive .sttl {
        font-size: 1.4rem; } }
  .works #news-archive .pic {
    aspect-ratio: 382 / 257;
    overflow: hidden;
    background: #fff; }
  .works #news-archive .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: top center;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; }

.works #news-archive time {
  font-size: 1.4rem;
  color: #787574;
  display: flex;
  margin-bottom: 0.8rem; }
  @media (max-width: 999px) {
    .works #news-archive time {
      font-size: 1rem; } }
.works #news-archive .categoryBox {
  display: flex;
  flex-wrap: wrap; }
.works #news-archive .category {
  color: #fff;
  background: #E33C0B;
  padding: 0 1rem;
  height: 3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.8rem;
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  font-weight: bold;
  line-height: 1.2; }
  @media (max-width: 999px) {
    .works #news-archive .category {
      padding: 0 0.6rem;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      font-size: 1.1rem; } }
.works #news-archive .categoryNav {
  display: flex;
  justify-content: space-between; }
  .works #news-archive .categoryNav .btns {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
    flex-wrap: wrap; }
    @media (max-width: 999px) {
      .works #news-archive .categoryNav .btns {
        gap: 0.4rem;
        justify-content: center; } }
  @media (min-width: 1000px) {
    .works #news-archive .categoryNav li {
      flex: 1; } }
  @media (max-width: 999px) {
    .works #news-archive .categoryNav li {
      border-bottom: 1px solid #ddd; } }
  .works #news-archive .categoryNav a {
    text-align: center;
    padding: 2rem 0;
    font-weight: bold;
    background: #707070;
    color: #fff; }
    @media (max-width: 999px) {
      .works #news-archive .categoryNav a {
        padding: 1rem;
        font-size: 1.3rem;
        padding: 0.8rem 1.2rem; } }
  .works #news-archive .categoryNav a.active {
    background: #FF7D44; }

.pagination {
  margin-top: 6rem;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (max-width: 999px) {
    .pagination {
      margin-top: 4rem; } }

.pagination span {
  background: #F7F7F7;
  text-align: center;
  padding: 0;
  font-size: 1.8rem;
  line-height: 0;
  width: 6rem;
  height: 6rem;
  margin-right: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E33C0B; }
  @media (max-width: 999px) {
    .pagination span {
      font-size: 16px;
      line-height: 16px;
      padding: 12px 16.7px;
      margin-right: 6px;
      width: 4rem;
      height: 4rem; } }

.pagination a.page-numbers {
  background: #fff;
  text-align: center;
  padding: 0;
  font-size: 1.8rem;
  line-height: 0;
  width: 6rem;
  height: 6rem;
  margin-right: 1rem;
  border: 1px solid #E33C0B;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E33C0B; }
  @media (max-width: 999px) {
    .pagination a.page-numbers {
      font-size: 16px;
      margin-right: 6px;
      width: 4rem;
      height: 4rem; } }

.pagination a.page-numbers.prev {
  background: #E33C0B;
  text-align: center;
  padding: 0;
  font-size: 1.8rem;
  line-height: 0;
  width: 6rem;
  height: 6rem;
  margin-right: 1rem;
  border: 1px solid #E33C0B;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; }
  @media (max-width: 999px) {
    .pagination a.page-numbers.prev {
      font-size: 16px;
      margin-right: 10px;
      width: 4rem;
      height: 4rem; } }

.pagination a.page-numbers.next {
  background: #E33C0B;
  text-align: center;
  padding: 0;
  font-size: 1.8rem;
  line-height: 0;
  width: 6rem;
  height: 6rem;
  margin-right: 1rem;
  border: 1px solid #E33C0B;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; }
  @media (max-width: 999px) {
    .pagination a.page-numbers.next {
      font-size: 16px;
      margin-left: 10px;
      width: 4rem;
      height: 4rem; } }

/*
---------------------------------------
施工事例詳細 
---------------------------------------
*/
#news-single {
  padding: 0 0 2rem;
  /* AFTER ラベル */
  /* BEFORE ラベル */ }
  #news-single .ttl {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: bold; }
    @media (max-width: 999px) {
      #news-single .ttl {
        font-size: 1.8rem;
        margin-bottom: 0.5rem; } }
  #news-single time {
    font-size: 1.4rem;
    color: #787574;
    display: flex;
    margin-right: 0.8rem; }
    @media (max-width: 999px) {
      #news-single time {
        font-size: 1rem;
        margin-bottom: 0;
        margin-right: 0; } }
  #news-single .categoryBox {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #news-single .categoryBox {
        margin-bottom: 2rem; } }
  #news-single .category {
    color: #fff;
    background: #E33C0B;
    padding: 0 1rem;
    height: 3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.2; }
    @media (max-width: 999px) {
      #news-single .category {
        padding: 0 0.6rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 1.1rem; } }
  #news-single .timeBox {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; }
    @media (max-width: 999px) {
      #news-single .timeBox {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5rem; } }
  #news-single .btn {
    background: #E33C0B;
    margin: 0 auto; }
  #news-single .section-box {
    display: flex;
    box-shadow: 0 2px 1rem rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem; }
    @media (max-width: 999px) {
      #news-single .section-box {
        flex-direction: column;
        margin-bottom: 1rem; } }
  #news-single .section-title {
    width: calc(336/1200*100%);
    background: #707070;
    padding: 3rem 2rem;
    font-weight: 600;
    font-size: 2.2rem;
    text-align: center;
    color: #fff; }
    @media (max-width: 999px) {
      #news-single .section-title {
        font-size: 1.6rem;
        width: 100%;
        padding: 1rem 1rem; } }
  #news-single .section-content {
    width: calc(864/1200*100%);
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    @media (max-width: 999px) {
      #news-single .section-content {
        width: 100%;
        padding: 1.5rem 2rem; } }
  #news-single .detail-table dl {
    display: flex;
    padding: 1rem 0;
    border-bottom: 0.1rem solid #ddd; }
  #news-single .detail-table dt {
    width: 25%;
    font-weight: 600;
    font-size: 1.8rem;
    color: #707070; }
    @media (max-width: 999px) {
      #news-single .detail-table dt {
        font-size: 1.6rem; } }
  #news-single .detail-table dd {
    width: 75%; }
  #news-single .pics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem; }
    @media (max-width: 999px) {
      #news-single .pics {
        grid-template-columns: repeat(2, 1fr); } }
  #news-single .pics .pic img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; }
  #news-single .main-pic {
    position: relative;
    display: flex;
    overflow: hidden;
    height: max-content;
    width: 100%;
    max-width: 100rem;
    margin: 0 auto 4rem; }
    @media (max-width: 999px) {
      #news-single .main-pic {
        margin-bottom: 1rem; } }
  #news-single .main-pic img {
    width: 100%;
    display: block;
    height: auto; }
  #news-single .main-pic.before {
    max-width: 40rem;
    margin: 0 0 4rem;
    height: auto; }
    @media (max-width: 999px) {
      #news-single .main-pic.before {
        width: 60%; } }
  #news-single .main-pic.after::before {
    content: "AFTER";
    position: absolute;
    bottom: 0;
    left: 0;
    background: #E33C0B;
    color: #fff;
    padding: 0.6rem 0;
    font-size: 3rem;
    font-weight: 700;
    z-index: 10;
    width: 20rem;
    text-align: center; }
    @media (max-width: 999px) {
      #news-single .main-pic.after::before {
        font-size: 1.4rem;
        padding: 0.3rem 0;
        width: 10rem; } }
  #news-single .main-pic.before::before {
    content: "BEFORE";
    position: absolute;
    top: 0;
    left: 0;
    background: #707070;
    color: #fff;
    padding: 0.6rem 0;
    font-size: 3rem;
    font-weight: 700;
    z-index: 10;
    width: 20rem;
    text-align: center; }
    @media (max-width: 999px) {
      #news-single .main-pic.before::before {
        font-size: 1.4rem;
        padding: 0.3rem 0;
        width: 10rem; } }

/*
---------------------------------------
関連施工事例 
---------------------------------------
*/
.related-works {
  background: #F8F8F8;
  position: relative;
  padding: 8rem 0 16rem; }
  @media (max-width: 999px) {
    .related-works {
      padding: 4rem 0 8rem; } }
  .related-works .ttlBox {
    position: relative; }
  .related-works .ttl {
    font-weight: bold;
    font-size: 2.4rem;
    text-align: center;
    position: relative;
    z-index: 1;
    line-height: 1.5;
    background: #707070;
    color: #fff;
    padding: 2rem 0; }
    @media (max-width: 999px) {
      .related-works .ttl {
        font-size: 1.8rem;
        padding: 1rem; } }
  .related-works img {
    margin: 0 auto; }
  .related-works .related-works-list {
    display: flex;
    flex-wrap: wrap; }
  .related-works .box {
    width: 31%;
    margin-bottom: 4rem;
    margin-right: 3.5%; }
    @media (max-width: 999px) {
      .related-works .box {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 20px; } }
  .related-works .box:nth-child(3n) {
    margin-right: 0; }
    @media (max-width: 999px) {
      .related-works .box:nth-child(3n) {
        margin-right: 4%; } }
  @media (max-width: 999px) {
    .related-works .box:nth-child(2n) {
      margin-right: 0; } }
  .related-works .box > a:first-child {
    overflow: hidden;
    aspect-ratio: 265 / 200;
    display: block;
    margin-bottom: 1rem; }
  .related-works .box > a:first-child img {
    object-fit: cover;
    width: 100%;
    height: 100%; }
  .related-works .time {
    font-size: 1.4rem;
    color: #787574;
    display: flex;
    margin-bottom: 0.8rem; }
    @media (max-width: 999px) {
      .related-works .time {
        font-size: 12px; } }
  .related-works .sttl {
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 1.6rem;
    font-size: 1.8rem; }
    @media (max-width: 999px) {
      .related-works .sttl {
        margin-bottom: 8px;
        font-size: 16px; } }
  .related-works .categorys {
    display: flex;
    align-items: center;
    flex-wrap: wrap; }
  .related-works .categorys li {
    color: #fff;
    background: #E33C0B;
    padding: 0 1rem;
    height: 3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    font-weight: bold;
    line-height: 1.2; }
    @media (max-width: 999px) {
      .related-works .categorys li {
        padding: 0 0.6rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 1.1rem; } }
  .related-works .btn {
    padding: 1.6rem 0;
    background: #E33C0B;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 46rem;
    margin: 0 auto;
    justify-content: center;
    width: 100%; }
    @media (max-width: 999px) {
      .related-works .btn {
        width: 90%; } }
  .related-works .btn i {
    position: absolute;
    left: 2rem; }