@charset "UTF-8";
.con-works-list, .con-works-detail { max-width: 1280px; margin-inline: auto; width: calc(100% - 160px); }
@media (max-width: 1439px) { .con-works-list, .con-works-detail { width: 96%; } }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-list, .con-works-detail { width: 92%; } }
@media (max-width: 767px) { .con-works-list, .con-works-detail { width: 89.6%; } }

/*Animate */
/* -----------------------------------------------------------
 .con-works-list 建築事例　一覧

----------------------------------------------------------- */
@media (min-width: 1025px) { .con-works-list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } }
@media (max-width: 767px) { .con-works-list { padding-bottom: 160px; } }
@media (min-width: 1025px) { .con-works-list aside { position: sticky; bottom: 40px; left: 80px; width: 200px; } }
@media (min-width: 1025px) and (max-width: 1439px) { .con-works-list aside { left: 2%; } }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-list aside { display: flex; justify-content: center; gap: 40px; margin-bottom: 64px; } }
@media (max-width: 767px) { .con-works-list aside { margin-bottom: 40px; } }
@media (max-width: 1024px) { .con-works-list aside .list-category { display: flex; justify-content: center; gap: 40px; } }
@media (max-width: 767px) { .con-works-list aside .list-category { gap: 4%; } }
.con-works-list aside .list-category .button-secondary { width: 200px; }
@media (max-width: 767px) { .con-works-list aside .list-category .button-secondary { width: 48%; } }
.con-works-list aside .list-category .button-secondary a { font-size: 1.6rem; }
.con-works-list aside .button-secondary.all { display: inline-block; }
@media (min-width: 1025px) { .con-works-list aside .button-secondary.all { margin-top: 40px; } }
@media (max-width: 767px) { .con-works-list aside .button-secondary.all { margin-top: 8px; } }
.con-works-list aside .button-secondary.all a { font-size: 1.4rem; font-weight: 500; padding-right: 56px; }
@media (min-width: 768px) { .con-works-list aside .button-secondary.all a { border-bottom: none; } }
@media (min-width: 1025px) { .con-works-list .box-works-list { width: 74.1%; } }
@media (min-width: 1281px) { .con-works-list .box-works-list { padding-right: 40px; } }
.con-works-list .box-works-list .list-works { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 24px; grid-row-gap: 80px; }
@media (max-width: 767px) { .con-works-list .box-works-list .list-works { grid-template-columns: repeat(2, 1fr); grid-column-gap: 8px; grid-row-gap: 40px; } }
.con-works-list .box-works-list .list-works .item-works a { display: block; }
.con-works-list .box-works-list .list-works .item-works a .thumb { width: 100%; aspect-ratio: 3/4; overflow: hidden; }
.con-works-list .box-works-list .list-works .item-works a .thumb img { width: 100%; height: 100%; object-fit: cover; }
.con-works-list .box-works-list .list-works .item-works a .box-detail { margin-top: 24px; }
@media (max-width: 767px) { .con-works-list .box-works-list .list-works .item-works a .box-detail { margin-top: 16px; padding: 0 8px; } }
.con-works-list .box-works-list .list-works .item-works a .box-detail .year { font-family: "Outfit", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1; font-size: 1.5rem; color: #888; }
@media (max-width: 767px) { .con-works-list .box-works-list .list-works .item-works a .box-detail .year { font-size: 1.2rem; } }
.con-works-list .box-works-list .list-works .item-works a .box-detail .type { margin-top: 8px; font-size: 2rem; line-height: 1.5; font-weight: 500; }
@media (max-width: 767px) { .con-works-list .box-works-list .list-works .item-works a .box-detail .type { font-size: 1.6rem; } }
.con-works-list .box-works-list .list-works .item-works a .box-detail .number { margin-top: 24px; text-align: right; font-family: "Outfit", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #888; font-size: 1.3rem; line-height: 1.5; letter-spacing: 0.08em; }
@media (max-width: 767px) { .con-works-list .box-works-list .list-works .item-works a .box-detail .number { font-size: 1.1rem; } }
.con-works-list .page-nav { width: 100%; margin: 160px auto 0; }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-list .page-nav { margin: 120px auto 0; } }
@media (max-width: 767px) { .con-works-list .page-nav { margin: 64px auto 0; } }
.con-works-list .page-nav .wrp-pagenavi { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; gap: 40px; }
@media (max-width: 767px) { .con-works-list .page-nav .wrp-pagenavi { gap: 2em; } }
.con-works-list .page-nav a, .con-works-list .page-nav span { font-size: 1.8rem; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-family: "Outfit", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1; position: relative; display: inline-block; }
.con-works-list .page-nav a:after, .con-works-list .page-nav span:after { content: ""; background-color: #2B2B2B; width: 0; height: 1px; position: absolute; bottom: -8px; left: 0; }
@media (max-width: 767px) { .con-works-list .page-nav a, .con-works-list .page-nav span { font-size: 1.6rem; } }
.con-works-list .page-nav .prev svg { display: inline-block; transform: scale(-1, 1); }
.con-works-list .page-nav .current { color: #2E4282; }
.con-works-list .page-nav .current:after { width: 100%; }
.con-works-list .page-nav .prev, .con-works-list .page-nav .next { margin-top: 5px; }
@media (min-width: 1025px) { .con-works-list .page-nav .prev:hover svg, .con-works-list .page-nav .next:hover svg { fill: #2E4282; } }
.con-works-list .page-nav .prev svg, .con-works-list .page-nav .next svg { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; width: 16px; fill: #888; }
@media (min-width: 1025px) { .con-works-list .page-nav .page { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
  .con-works-list .page-nav .page:hover { color: #2E4282; } }

/* -----------------------------------------------------------
 建築事例　詳細

----------------------------------------------------------- */
/* ----------------------------------------------------------- .con-works-outline
----------------------------------------------------------- */
.con-works-outline { position: relative; }
.con-works-outline .img { overflow: hidden; position: relative; aspect-ratio: 1/0.797; }
@media (max-width: 767px) { .con-works-outline .img { aspect-ratio: 3/4; } }
.con-works-outline .img:before { content: ""; background-color: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.con-works-outline .img img { width: 100%; height: 100%; object-fit: cover; }
.con-works-outline .box-txt { color: #fff; position: absolute; bottom: 104px; left: 80px; }
@media (min-width: 1025px) and (max-width: 1439px) { .con-works-outline .box-txt { left: 2%; } }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-outline .box-txt { left: 4%; bottom: 4%; } }
@media (max-width: 767px) { .con-works-outline .box-txt { left: 5.2%; bottom: 5.2%; } }
.con-works-outline .box-txt .number { font-family: "Outfit", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: 0.08em; font-size: 3.6rem; margin-bottom: 24px; }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-outline .box-txt .number { font-size: 2rem; } }
@media (max-width: 767px) { .con-works-outline .box-txt .number { font-size: 1.4rem; margin-bottom: 16px; } }
.con-works-outline .box-txt .number span { text-transform: uppercase; }
.con-works-outline .box-txt h1 { font-family: "Outfit", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1; font-size: 6.7vw; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 40px; }
@media (min-width: 1440px) { .con-works-outline .box-txt h1 { font-size: 9.6rem; } }
@media (max-width: 767px) { .con-works-outline .box-txt h1 { font-size: 8.5vw; margin-bottom: 16px; } }
.con-works-outline .box-txt .type { font-size: 4rem; font-weight: 500; line-height: 1.5; margin-bottom: 8px; }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-outline .box-txt .type { font-size: 2.4rem; } }
@media (max-width: 767px) { .con-works-outline .box-txt .type { font-size: 1.6rem; } }
.con-works-outline .box-txt ul { font-family: "Outfit", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 2rem; line-height: 1; display: flex; align-items: center; gap: 18px; }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-outline .box-txt ul { font-size: 1.6rem; } }
@media (max-width: 767px) { .con-works-outline .box-txt ul { font-size: 1.2rem; } }

/* ----------------------------------------------------------- .con-works-detail
----------------------------------------------------------- */
.con-works-detail { padding: 80px 0 160px; }
@media (max-width: 767px) { .con-works-detail { padding: 24px 0 80px; } }
@media (min-width: 768px) { .con-works-detail .box-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 767px) { .con-works-detail .box-gallery { display: flex; flex-direction: column; gap: 8px; } }
.con-works-detail .box-gallery .item-gallery.is-landscape { grid-column: 1 / -1; }
.con-works-detail .box-gallery .item-gallery.is-portrait { grid-column: auto; }
@media (min-width: 768px) { .con-works-detail .box-gallery .item-gallery.is-portrait { aspect-ratio: 1/1.5; } }
@media (min-width: 768px) { .con-works-detail .box-gallery .item-gallery.is-portrait img { width: 100%; height: 100%; object-fit: cover; } }
@media (min-width: 768px) { .con-works-detail .box-detail { display: flex; justify-content: space-between; margin-top: 120px; } }
@media (max-width: 767px) { .con-works-detail .box-detail { margin-top: 64px; } }
@media (min-width: 1025px) { .con-works-detail .box-detail .box-txt { width: 50%; } }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-detail .box-detail .box-txt { width: 55%; } }
.con-works-detail .box-detail .box-txt h2 { font-size: 2rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.08em; margin-bottom: 40px; }
@media (max-width: 767px) { .con-works-detail .box-detail .box-txt h2 { font-size: 1.8rem; margin-bottom: 24px; } }
.con-works-detail .box-detail .box-txt .txt { display: flex; flex-direction: column; gap: 1em; }
@media (min-width: 1025px) { .con-works-detail .box-detail .box-date { width: 30%; } }
@media (min-width: 768px) and (max-width: 1024px) { .con-works-detail .box-detail .box-date { width: 40%; } }
@media (max-width: 767px) { .con-works-detail .box-detail .box-date { margin-top: 64px; } }
.con-works-detail .box-detail .box-date h3 { font-family: "Marcellus", serif; font-weight: 400; font-style: normal; text-align: right; font-size: 6.4rem; line-height: 1; margin-bottom: 32px; }
@media (max-width: 767px) { .con-works-detail .box-detail .box-date h3 { text-align: left; font-size: 4.8rem; margin-bottom: 24px; } }
.con-works-detail .box-detail .box-date table { width: 100%; }
.con-works-detail .box-detail .box-date table th, .con-works-detail .box-detail .box-date table td { padding: 0.5em; }
.con-works-detail .box-detail .box-date table th { color: #888; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.08em; }
@media (max-width: 767px) { .con-works-detail .box-detail .box-date table th { font-size: 1.2rem; } }
.con-works-detail .box-detail .box-date table td { font-weight: 500; letter-spacing: 0.08em; }
.con-works-detail .item-link { margin-top: 80px; }
@media (max-width: 767px) { .con-works-detail .item-link { margin-top: 64px; } }
.con-works-detail .item-link a { display: flex; justify-content: center; align-items: center; gap: 0 16px; }
@media (min-width: 1025px) { .con-works-detail .item-link a:hover .arrow img { transform: scale(1.5); } }
@media (max-width: 767px) { .con-works-detail .item-link a { justify-content: center; } }
.con-works-detail .item-link .txt { letter-spacing: 0.08em; line-height: 1; }
.con-works-detail .item-link .arrow { width: 80px; height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
.con-works-detail .item-link .arrow img { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; display: inline-block; width: 16px; }
.con-works-detail .item-link .arrow svg { position: absolute; top: 0; left: 0; animation: rotateAnimation 5s linear infinite; width: 100%; height: 100%; }
@keyframes rotateAnimation { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
@media (min-width: 1025px) { .con-works-detail .item-link.left { width: 30%; padding-right: 5%; }
  .con-works-detail .item-link.left a { justify-content: flex-start; }
  .con-works-detail .item-link.left a:hover .arrow img { transform: scale(-1.5, 1.5); } }
@media (max-width: 1024px) { .con-works-detail .item-link.left { display: none; } }
.con-works-detail .item-link.left .arrow img { transform: scale(-1, 1); }