@charset "utf-8";

/*
  File Name   : works.css
  Description : コンテンツエリア関係 他
*/

/* lay-main
============================================================ */
#lay-main {
  padding-top: 0 !important;
}

/* sect-category
============================================================ */
.sect-category {
  background-color: #b4cad7;
}
.sect-category__nav {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0;
}
.sect-category__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 68px;
  align-items: center;
  justify-content: center;
}
.sect-category__item {
  flex: 1;
}
.sect-category__tab,
.sect-category__tab:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: none;
  box-shadow: 0 2px 4px rgb(0 0 0 / 18%);
  background-color: #b5b6b6;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.sect-category__tab:is(:hover, :focus-visible, :active) {
  background-color: #53698d;
  color: #fff;
  opacity: 1;
}
.sect-category__tab.-current {
  background-color: #074073;
  color: #fff;
  opacity: 1;
}
.sect-category__tab.-current:is(:hover, :focus-visible, :active) {
  opacity: 1;
}

/* @media
------------------------------------------------------------ */
@media screen and (max-width: 961px) {
  .sect-category__nav {
    max-width: none;
    padding: 18px 0;
  }
  .sect-category__tabs {
    flex-wrap: nowrap;
    gap: 16px;
  }
  .sect-category__item {
    flex: 1 1 0;
    min-width: 0;
  }
  .sect-category__tab,
  .sect-category__tab:visited {
    box-sizing: border-box;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 17px;
  }
}
@media screen and (max-width: 481px) {
  .sect-category__nav {
    padding: 12px 0;
  }
  .sect-category__tabs {
    gap: 6px;
  }
  .sect-category__tab,
  .sect-category__tab:visited {
    min-height: 44px;
    padding: 8px 4px;
    font-size: clamp(11px, 3.1vw, 18px);
    line-height: 1.35;
  }
}

/* sect-works
============================================================ */
.sect-works {
  margin-top: 55px;
}
.sect-works__header {
  text-align: center;
}
.sect-works__lead {
  max-width: 100%;
  margin: 37px 0 0;
  color: #000;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.02em;
}
.sect-works__lead span {
  display: inline-block;
}
.sect-works__filter {
  max-width: 900px;
  margin: 32px auto 0;
}
.sect-works__filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: 16px;
  row-gap: 12px;
}
.sect-works__filter-item {
  margin: 0;
  padding: 0;
}
.sect-works__filter-link,
.sect-works__filter-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid #074073;
  background-color: #fff;
  color: #074073;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.sect-works__filter-link:is(:hover, :focus-visible) {
  background-color: #53698d;
  color: #fff;
}
.sect-works__filter-link.-current {
  background-color: #074073;
  color: #fff;
}
.sect-works__filter-link.-current:is(:hover, :focus-visible) {
  background-color: #074073;
  color: #fff;
}
.sect-works__filter + .sect-works__table-wrap {
  margin-top: 20px;
}
.sect-works__table-wrap {
  width: 100%;
  max-width: 900px;
  margin: 43px auto 0;
  overflow-x: visible;
}
.sect-works__table {
  width: 100%;
  margin: 0;
  border-top: 1px solid #b8b8b8;
  border-bottom: 1px solid #b8b8b8;
  border-collapse: collapse;
  color: #000;
  font-size: 18px;
  line-height: 1.45;
  table-layout: fixed;
  letter-spacing: 0.02em;
}
.sect-works__col-year {
  width: 10%;
}
.sect-works__col-business {
  width: 70%;
}
.sect-works__col-scale {
  width: 20%;
}
.sect-works__table th,
.sect-works__table td {
  height: auto;
  min-height: 41px;
  padding: 4px 12px 5px;
  border-top: 1px solid #b8b8b8;
  border-right: 1px solid #d4d4d4;
  vertical-align: middle;
}
.sect-works__table th:last-child,
.sect-works__table td:last-child {
  border-right: 0;
}
.sect-works__table thead th {
  height: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid #b8b8b8;
  border-bottom: 1px solid #b8b8b8;
  background-color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.35em;
}
.sect-works__table tbody th,
.sect-works__table tbody td {
  font-weight: 700;
  vertical-align: top;
}
.sect-works__year {
  padding-top: 10px;
  padding-right: 14px;
  padding-left: 14px;
  text-align: center;
  white-space: nowrap;
}
.sect-works__table td.sect-works__business {
  padding-top: 10px;
  overflow-wrap: anywhere;
  text-align: left;
}
.sect-works__table td.sect-works__business--order {
  text-align: left;
}
.sect-works__table td.sect-works__business--indented {
  padding-left: calc(24px + 1em);
  text-align: left;
}
.sect-works__table td.sect-works__scale {
  padding-top: 10px;
  overflow-wrap: anywhere;
  text-align: left;
}
.no-post {
  margin-top: 60px;
  text-align: center;
}

/* @media
------------------------------------------------------------ */
@media screen and (max-width: 961px) {
  .sect-works {
    margin-top: 36px;
  }
  .sect-works__lead {
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.6;
  }
  .sect-works__filter {
    margin-top: 24px;
  }
  .sect-works__filter-link,
  .sect-works__filter-link:visited {
    min-height: 42px;
    padding: 8px 16px;
    font-size: 16px;
  }
  .sect-works__table-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 36px;
    overflow-x: visible;
  }
  .sect-works__table {
    width: 100%;
    font-size: 16px;
    table-layout: fixed;
  }
  .sect-works__col-year {
    width: 12%;
  }
  .sect-works__col-business {
    width: 68%;
  }
  .sect-works__col-scale {
    width: 20%;
  }
  .sect-works__table td.sect-works__business--indented {
    padding-left: calc(9px + 1em);
  }
  .sect-works__table thead th {
    white-space: normal;
    letter-spacing: 0.1em;
  }
  .sect-works__table th,
  .sect-works__table td {
    padding-right: 9px;
    padding-left: 9px;
  }
  .sect-works__table .sect-works__year,
  .sect-works__table thead th:first-child {
    padding-right: 5px;
    padding-left: 5px;
  }
  .no-post {
    margin-top: 48px;
  }
}
@media screen and (max-width: 481px) {
  .sect-works {
    margin-top: 28px;
  }
  .sect-works__lead {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.65;
  }
  .sect-works__filter {
    margin-top: 20px;
  }
  .sect-works__filter-list {
    column-gap: 10px;
    row-gap: 10px;
  }
  .sect-works__filter-link,
  .sect-works__filter-link:visited {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 14px;
  }
  .sect-works__table-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 28px;
    overflow-x: visible;
  }
  .sect-works__table {
    width: 100%;
    font-size: 14px;
    table-layout: fixed;
  }
  .sect-works__col-year {
    width: 18%;
  }
  .sect-works__col-business {
    width: 52%;
  }
  .sect-works__col-scale {
    width: 30%;
  }
  .sect-works__table td.sect-works__business--indented {
    padding-left: calc(7px + 1em);
  }
  .sect-works__table thead th {
    letter-spacing: 0.05em;
  }
  .sect-works__table th,
  .sect-works__table td {
    min-height: 38px;
    padding-right: 7px;
    padding-left: 7px;
  }
  .sect-works__table .sect-works__year,
  .sect-works__table thead th:first-child {
    padding-right: 3px;
    padding-left: 3px;
  }
  .no-post {
    margin-top: 36px;
  }
}

/* 狭い幅：見出し幅のみ確保（字間・括弧サイズは common.css に合わせる） */
@media screen and (max-width: 620px) {
  .sect-works .com-title {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  .sect-works .com-title__label.sect-works__title-label--split {
    white-space: normal;
  }
  .sect-works .com-title__label.sect-works__title-label--split .sect-works__title-term {
    display: block;
  }
}

/* sect-pagination
============================================================ */
.sect-pagination {
  margin-top: 60px;
}

/* @media
------------------------------------------------------------ */
@media screen and (max-width: 961px) {
  .sect-pagination {
    margin-top: 48px;
  }
}
@media screen and (max-width: 481px) {
}

/* sect-work-detail
============================================================ */
.sect-work-detail {
  padding: 56px 0 0;
}
.sect-work-detail__header {
  text-align: center;
}
.sect-work-detail__meta {
  margin: 28px 0 0;
  text-align: center;
}
.sect-work-detail__date {
  display: block;
  color: #727171;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.05em;
}
.sect-work-detail__type {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.sect-work-detail__figure {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0;
  text-align: center;
}
.sect-work-detail__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 538 / 330;
  object-fit: cover;
}
.sect-work-detail__text {
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.sect-work-detail__back {
  margin-top: 80px;
  text-align: center;
}

/* @media
------------------------------------------------------------ */
@media screen and (max-width: 961px) {
  .sect-work-detail {
    padding: 44px 0 0;
  }
  .sect-work-detail__meta {
    margin-top: 22px;
  }
  .sect-work-detail__date {
    font-size: 15px;
  }
  .sect-work-detail__type {
    margin-top: 4px;
    font-size: 17px;
  }
  .sect-work-detail__figure {
    margin-top: 36px;
  }
  .sect-work-detail__text {
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.6;
  }
  .sect-work-detail__back {
    margin-top: 60px;
  }
}
@media screen and (max-width: 481px) {
  .sect-work-detail {
    padding: 32px 0 0;
  }
  .sect-work-detail__meta {
    margin-top: 20px;
  }
  .sect-work-detail__date {
    font-size: 14px;
  }
  .sect-work-detail__type {
    margin-top: 4px;
    font-size: 15px;
  }
  .sect-work-detail__figure {
    margin-top: 28px;
  }
  .sect-work-detail__text {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.65;
  }
  .sect-work-detail__back {
    margin-top: 48px;
  }
}