body.lower {
 background-image: repeating-linear-gradient(90deg, #f4f4f4, #f4f4f4 250px, #dedede 250px, #dedede 251px);
 box-shadow: inset 0 60px 22px rgba(213, 213, 213, .6);
}

nav[aria-label="パンくずリスト"] {
 background-color: #fff;
 border-radius: 150px;
 font-weight: bold;
 line-height: 48px;
 margin: 24px 48px;
 padding-left: 36px;
}

nav[aria-label="パンくずリスト"] ol {
 display: flex;
 flex-wrap: wrap;
 font-size: 1.3rem;
 font-weight: bold;
 list-style: none;
 margin: 0;
 padding: 0;
}

nav[aria-label="パンくずリスト"] li {
 align-items: center;
 display: flex;
}

nav[aria-label="パンくずリスト"] li + li::before {
 content: "›";
 padding: 0 .5em;
}

nav[aria-label="パンくずリスト"] a:hover {
 text-decoration: underline;
}

#works h2 {
 display: flex;
 flex-direction: column;
 font-size: 5.6rem;
 line-height: 1;
 margin-bottom: 48px;
 text-align: center;
}

#works h2 .add {
 font-size: 1.3rem;
 margin-bottom: 8px;
 padding: 8px 10px;
}

#works h2 .title {
 padding: 5px 5px 2px;
}

#works h2 > span > span {
 background-color: #e75297;
 color: #fff;
 display: inline-block;
}

.works_main {
 margin: 0 auto;
 max-width: 1200px;
 padding: 50px 0 80px;
}

.works_list {
 display: grid;
 gap: 36px 40px;
 grid-template-columns: repeat(3, 1fr);
}

.works_item {
 background-color: #fff;
 border-radius: 14px;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.works_item_head {
 min-height: 100px;
 padding: 28px 20px 20px;
 text-align: center;
}

.works_item_head .company {
 color: #e75297;
 font-size: 1.3rem;
 line-height: 1.5;
 margin-bottom: 4px;
}

.works_item_head h3 {
 color: #e75297;
 font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
 font-size: 1.7rem;
 font-weight: bold;
 line-height: 1.45;
}

.works_item_title-link {
 position: relative;
}

.works_item_title-link::before {
 background-color: currentColor;
 bottom: -5px;
 content: "";
 height: 1px;
 left: 0;
 position: absolute;
 right: 19px;
 transform: scale(0, 1);
 transform-origin: center top;
 transition: transform .3s ease;
}

.works_item_title-link:hover::before {
 transform: scale(1, 1);
}

.works_item_title-link:not([target="_blank"])::before {
 right: 0;
}

.works_item_title-link[target="_blank"]::after {
 background: url("../img/common/external-link.svg?v=20261006") center / contain no-repeat;
 content: "";
 display: inline-block;
 height: 12px;
 margin-left: 7px;
 vertical-align: -1px;
 width: 12px;
}

.works_item_pic {
 aspect-ratio: 16 / 9;
 background-color: #f4f4f4;
 overflow: hidden;
 width: 100%;
}

.works_item_pic a {
 display: block;
 height: 100%;
}

.works_item_pic img {
 display: block;
 height: 100%;
 object-fit: cover;
 object-position: top center;
 width: 100%;
}

.works_item_staff {
 padding: 22px 28px 12px;
}

.works_item_staff > div {
 align-items: center;
 display: grid;
 gap: 12px;
 grid-template-columns: 112px 1fr;
 margin-bottom: 8px;
}

.works_item_staff > div:last-child {
 margin-bottom: 0;
}

.works_item_staff dt {
 background-color: #e75297;
 color: #fff;
 font-family: "Lato", sans-serif;
 font-size: 1.3rem;
 font-weight: 700;
 letter-spacing: .08em;
 line-height: 1;
 padding: 7px 10px 6px;
 text-align: center;
}

.works_item_staff dd {
 color: #e75297;
 font-size: 1.4rem;
 font-weight: bold;
 line-height: 1.4;
}

.works_item_site-link {
 display: flex;
 justify-content: flex-end;
 margin-top: auto;
 padding: 0 28px 26px;
}

.works_item_site-link a {
 align-items: center;
 color: #e75297;
 display: inline-flex;
 font-size: 1.4rem;
 font-weight: 700;
 gap: 6px;
 letter-spacing: .08em;
 text-decoration: none;
}

.work_detail_site-link a[target="_blank"]::after {
 background: url("../img/common/external-link.svg?v=20261006") center / contain no-repeat;
 content: "";
 display: inline-block;
 flex: 0 0 12px;
 height: 12px;
 margin-left: 6px;
 width: 12px;
}

.work_detail {
 margin: 0 auto;
 max-width: 1200px;
 padding: 50px 0 80px;
}

.work_detail_head {
 margin-bottom: 32px;
 text-align: center;
}

.work_detail_head .company {
 color: #e75297;
 font-size: 1.4rem;
 margin-bottom: 8px;
}

.work_detail_head h1 {
 color: #e75297;
 font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
 font-size: 3.6rem;
 font-weight: bold;
 line-height: 1.45;
}

.work_detail_visual {
 background-color: #fff;
 border-radius: 14px;
 margin-bottom: 36px;
 overflow: hidden;
}

.work_detail_visual img {
 display: block;
 width: 100%;
}

.work_detail_body {
 background-color: #fff;
 border-radius: 14px;
 display: grid;
 gap: 48px;
 grid-template-columns: 1fr 420px;
 padding: 42px 48px;
}

.work_detail_summary {
 color: #333;
 font-size: 1.6rem;
 line-height: 1.9;
}

.work_detail_summary > p:first-child {
 font-size: 1.6rem;
 line-height: 1.9;
}

.work_detail_site-link {
 margin-top: 28px;
}

.work_detail_site-link a {
 align-items: center;
 color: #e75297;
 display: inline-flex;
 font-size: 1.4rem;
 font-weight: 700;
 letter-spacing: .08em;
}

.work_detail_staff > div {
 align-items: center;
 display: grid;
 gap: 14px;
 grid-template-columns: 120px 1fr;
 margin-bottom: 10px;
}

.work_detail_staff > div:last-child {
 margin-bottom: 0;
}

.work_detail_staff dt {
 background-color: #e75297;
 color: #fff;
 font-family: "Lato", sans-serif;
 font-size: 1.3rem;
 font-weight: 700;
 letter-spacing: .08em;
 line-height: 1;
 padding: 8px 10px 7px;
 text-align: center;
}

.work_detail_staff dd {
 color: #e75297;
 font-size: 1.4rem;
 font-weight: bold;
 line-height: 1.4;
}

.work_detail_back {
 margin-top: 36px;
 text-align: center;
}

.work_detail_back a {
 color: #e75297;
 font-size: 1.4rem;
 font-weight: 700;
 letter-spacing: .08em;
}

@media screen and (max-width: 900px) {
 body.lower {
  background-image: repeating-linear-gradient(90deg, #f4f4f4, #f4f4f4 100px, #dedede 100px, #dedede 101px);
 }

 nav[aria-label="パンくずリスト"] {
  line-height: 42px;
  margin: 16px;
  padding-left: 22px;
 }

 .works_main,
 .work_detail {
  padding: 24px 16px 48px;
 }

 #works h2 {
  font-size: 4rem;
  margin-bottom: 32px;
 }

 .works_list {
  gap: 24px;
  grid-template-columns: 1fr;
 }

 .works_item {
  border-radius: 10px;
 }

 .works_item_head {
  min-height: auto;
  padding: 20px 16px 16px;
 }

 .works_item_head .company {
  font-size: 1.2rem;
 }

 .works_item_head h3 {
  font-size: 1.6rem;
 }

 .works_item_staff {
  padding: 18px 20px 10px;
 }

 .works_item_staff > div {
  gap: 10px;
  grid-template-columns: 100px 1fr;
 }

 .works_item_staff dt {
  font-size: 1.1rem;
 }

 .works_item_staff dd {
  font-size: 1.3rem;
 }

 .works_item_site-link {
  padding: 0 20px 22px;
 }

 .works_item_site-link a {
  font-size: 1.3rem;
 }

 .work_detail_head {
  margin-bottom: 24px;
 }

 .work_detail_head .company {
  font-size: 1.2rem;
 }

 .work_detail_head h1 {
  font-size: 2.5rem;
 }

 .work_detail_visual {
  border-radius: 10px;
  margin-bottom: 24px;
 }

 .work_detail_body {
  border-radius: 10px;
  display: block;
  padding: 26px 20px;
 }

 .work_detail_summary {
  margin-bottom: 28px;
 }

 .work_detail_summary > p:first-child {
  font-size: 1.4rem;
 }

 .work_detail_staff > div {
  gap: 10px;
  grid-template-columns: 100px 1fr;
 }

 .work_detail_staff dt {
  font-size: 1.1rem;
 }

 .work_detail_staff dd {
  font-size: 1.3rem;
 }
}