@charset 'UTF-8';

.c-content-header__inner {
  display: grid;
  place-content: center;
  width: 100%;
  height: 80px;
  background-color: var(--clr-main);
}

.c-content-header__heading {
  color: var(--clr-on-main);
  font-size: 32px;
  font-weight: 600;
}

/* ========== About ========== */
.p-about-web__inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;

  @media(max-width:1023.49px) {
    grid-template-columns: 1fr;
  }
}

.p-about-web__text-area p {
  margin-top: 24px;
  line-height: 2;
}

.p-about-web__img {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--radius);
  overflow: hidden;

  @media(max-width: 1023.49px) {
    aspect-ratio: 2/1;
  }
}

.p-about-web__img img {
  @media(max-width: 1023.49px) {
    width: 100%;
    object-fit: cover;
    object-position: top;
  }
}

.p-about-divider__img {
  position: relative;
  width: 100%;
  height: min(calc(200 / 767 * 100vw), 200px);
  overflow: hidden;
}

.p-about-divider__img img {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  min-width: 100%;
  height: calc(min(calc(200 / 767 * 100vw), 200px) + 80px);
  object-fit: cover;
  transform-origin: right top;
}

.p-about-flute__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;

  @media(max-width:1023.49px) {
    grid-template-columns: 1fr;
  }
}

.p-about-flute__text-area p {
  margin-top: 24px;
  line-height: 2;
}

.p-about-flute__img {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--radius);
  overflow: hidden;

  @media(max-width: 1023.49px) {
    order: 2;
    aspect-ratio: 2/1;
  }
}

.p-about-flute__img img {
  @media(max-width: 1023.49px) {
    width: 100%;
    object-fit: cover;
    object-position: top;
  }
}

.p-about-cta__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;

  @media(max-width:1023.49px) {
    gap: 24px;
  }

  @media(max-width:767.49px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.p-about-cta__link-contact,
.p-about-cta__link-service {
  display: block;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  padding: 40px 48px 48px;
  border-radius: var(--radius);
  transition: background-color var(--transition-duration), color 0.75s;

  @media(max-width:1023.49px) {
    padding: 24px 32px 32px;
  }
}

.p-about-cta__link-contact {
  background-color: var(--clr-accent);
  color: var(--clr-on-accent);
}

.p-about-cta__link-service {
  background-color: var(--clr-sub);
  color: var(--clr-on-sub);
}

@media(any-hover: hover) {
  .p-about-cta__link-contact:hover {
    background-color: var(--clr-accent-hover);
  }

  .p-about-cta__link-service:hover {
    background-color: var(--clr-sub-hover);
  }
}

.p-about-cta__link-heading {
  display: flex;
  gap: 24px;
  align-items: center;
  line-height: 1.1;
  letter-spacing: 1px;
}

.p-about-cta__link-heading::after {
  content: '';
  display: block;
  width: 32px;
  aspect-ratio: 1/1;
  mask: url(../img/icon-arrow-foward-bold.svg) center / contain no-repeat;
  background-color: var(--clr-on-accent);
}

.p-about-cta__link-desc {
  margin-block: calc(24px - 8px) -8px;
  line-height: 2;
}

/* ========== Service ========== */
.p-service-index {
  position: sticky;
  top: 84px;
  z-index: 5;
  width: fit-content;
  height: var(--service-index-height, auto);
  margin: 48px auto 0;
}

.p-service-index_drawer {
  position: relative;
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  padding: 20px;
  margin-inline: auto;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--clr-bg);
  transition: gap var(--transition-duration), opacity var(--transition-duration);

  @media(max-width: 767.49px) {
    flex-direction: column;
    width: 9.5rem;
  }
}

.p-service-index_drawer.is-measuring,
.p-service-index_drawer.is-measuring::details-content {
  transition: none !important;
}

.p-service-index_drawer[open],
.p-service-index_drawer.is-scrolled[open] {
  gap: 32px;
  opacity: 1;
}

.p-service-index_drawer.is-scrolled {
  opacity: 0.125;
}

@media(any-hover:hover) {
  .p-service-index_drawer.is-scrolled:hover {
    opacity: 1;
  }
}

.p-service-index_drawer::details-content {
  width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition-property: width, height, opacity, content-visibility;
  transition-duration: var(--transition-duration);
  transition-behavior: allow-discrete;

  @media(max-width: 767.49px) {
    width: 100%;
    height: 0;
  }
}

.p-service-index_drawer[open]::details-content {
  width: auto;
  opacity: 1;

  @media(max-width: 767.49px) {
    width: 100%;
    height: auto;
  }
}

.p-service-index_drawer summary {
  cursor: pointer;
}

.p-service-index_drawer summary:first-of-type {
  list-style: none;
}

.p-service-index_drawer-heading {
  display: flex;
  gap: 8px;
  align-items: center;
}

.p-service-index_drawer-heading::after {
  content: '';
  display: inline-block;
  width: 12px;
  aspect-ratio: 1/1;
  background-color: var(--clr-txt);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  translate: 0 -1px;
  transition: rotate var(--transition-duration);
}

.p-service-index_drawer[open] .p-service-index_drawer-heading::after {
  rotate: 90deg;
}

.p-service-index__list {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;

  @media(max-width: 767.49px) {
    flex-direction: column;
  }
}

.p-service-offer {
  container-type: inline-size;
  margin-top: 48px;
}

.p-service-offer__anchor-area {
  margin-top: 48px;
  margin-inline: calc(50% - 50cqw);

  @media(max-width: 767.49px) {
    margin-inline: auto
  }
}

.p-service-offer__anchor-list {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-inline: auto;

  @media(max-width: 1023.49px) {
    gap: 20px;
  }

  @media(max-width: 767.49px) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(202px, 1fr));
  }
}

.p-service-offer__anchor-link {
  display: block;
  padding: 16px 20px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  white-space: nowrap;
  transition: background-color var(--transition-duration), color var(--transition-duration);
}

@media(any-hover: hover) {
  .p-service-offer__anchor-link:hover {
    background-color: var(--clr-sub-hover);
    color: var(--clr-on-sub);
  }
}

/* 項目間の調整 */
.c-service-grid-wrap:first-of-type {
  margin-top: 64px;
}

.c-service-grid-wrap:not(:first-of-type) {
  margin-top: 128px;
}

/* 上部グリッドエリア */
.c-service-grid1 {
  display: grid;
  grid-template-areas: 'heading outline';
  grid-template-columns: auto 1fr;
  align-items: center;

  @media(max-width: 767.49px) {
    grid-template-areas: 'heading' 'outline';
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* 下部グリッドエリア */
.c-service-grid2 {
  display: grid;
  grid-template-areas: 'scope scope' 'due fee';
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;

  @media(max-width: 767.49px) {
    grid-template-areas: 'scope' 'due' 'fee';
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }
}


/* headingエリアと見出し設定 */
.c-service-grid__heading-area {
  grid-area: heading;
  display: grid;
  place-content: center;
  padding-inline: 64px;
}

.c-service-grid__heading-lg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
}

.c-service-grid__heading-lg::before {
  content: '';
  display: block;
  width: 26px;
  aspect-ratio: 1/1;
  mask: center / contain no-repeat;
  background-color: var(--clr-txt);
}

.p-service-coding__heading::before {
  mask-image: url(../img/icon-coding-bold.svg);
}

.p-service-wordpress__heading::before {
  mask-image: url(../img/icon-cms.svg);
}

.p-service-maintenance__heading::before {
  mask-image: url(../img/icon-maintenance-bold.svg);
}

.p-service-design__heading::before {
  mask-image: url(../img/icon-design-bold.svg);
}

/* heading以外の各エリアの見出し*/
.c-service-grid__heading-md {
  display: flex;
  gap: 8px;
  justify-content: start;
  align-items: center;
  font-size: 20px;
}

.c-service-grid__heading-md::before {
  content: '';
  display: block;
  width: 22px;
  aspect-ratio: 1/1;
  mask: center/contain no-repeat;
  background-color: var(--clr-txt);
}

.c-service-grid__heading--outline::before {
  mask-image: url(../img/icon-outline.svg);
}

.c-service-grid__heading--scope::before {
  mask-image: url(../img/icon-scope.svg);
}

.c-service-grid__heading--due::before {
  mask-image: url(../img/icon-due.svg);
}

.c-service-grid__heading--fee::before {
  mask-image: url(../img/icon-fee.svg);
}

/* outlineエリア */
.c-service-grid__outline-area {
  grid-area: outline;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  @media(max-width: 767.49px) {
    padding: 16px;
  }
}

/* scopeエリア */
.c-service-grid__scope {
  grid-area: scope;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  @media(max-width: 767.49px) {
    padding: 16px;
  }
}

/* dueエリア */
.c-service-grid__due {
  grid-area: due;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  @media(max-width: 767.49px) {
    padding: 16px;
  }
}

/* feeエリア */
.c-service-grid__fee {
  grid-area: fee;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  @media(max-width: 767.49px) {
    padding: 16px;
  }
}

/* scopeエリア内のグリッド設定 */
.c-service-grid__multi-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;

  @media(max-width: 767.49px) {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* 各エリア内の要素設定 */
.c-service-grid-wrap p {
  margin-top: 24px;
}

.c-service-grid-wrap ul {
  margin-top: 24px;
  margin-left: 1.5em;
}

.c-service-grid-wrap li + li {
  margin-top: 16px;

  @media(max-width: 767.49px) {
    margin-top: 16px;
  }
}



.p-service-flow__list-area {
  max-width: 680px;
  margin: 48px auto 0;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.p-service-flow__list {
  list-style-position: inside;
}

.p-service-flow__list li {
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.p-service-flow__list li + li {
  margin-top: 24px;
}

.p-service-flow__list li::marker,
.p-service-flow__list h4 {
  display: inline-block;
  font-size: 20px;
}

.p-service-flow__list p {
  margin-top: 16px;
}


.p-service-faq__heading {
  margin-top: 48px;
}

.p-service-faq__tab-wrap {
  margin-top: 48px;
}

.p-service-faq__tab-list {
  --active-anchor: --tab-1;
  position: relative;
  display: flex;
  gap: min(calc(48/500*100vw), 48px);
  justify-content: center;
}

.p-service-faq__tab-list::after {
  content: '';
  position: absolute;
  position-anchor: var(--active-anchor);
  top: calc(anchor(bottom) + 4px);
  left: anchor(left);
  display: block;
  width: anchor-size(width);
  height: 3px;
  border-radius: 9999px;
  background-color: var(--clr-main);
  transition: background-color 0.75s, left var(--transition-duration), width var(--transition-duration);
}

.p-service-faq__tab-button {
  padding: 8px 16px;
}

.p-service-faq__content-area {
  margin-top: 48px;
}

.s-service-faq-content {
  display: grid;
  grid-template-rows: 0fr;
  filter: blur(4px);
  opacity: 0;
  visibility: hidden;
}

/* 表示時 */
.s-service-faq-content[aria-hidden="false"] {
  grid-template-rows: 1fr;
  filter: blur(0);
  opacity: 1;
  visibility: visible;
  transition:
    background-color 0.75s,
    color 0.75s,
    grid-template-rows 0s var(--transition-duration),
    opacity var(--transition-duration) var(--transition-duration),
    filter var(--transition-duration) var(--transition-duration),
    visibility var(--transition-duration) var(--transition-duration);
  transition-behavior: allow-discrete;
}

/* 非表示時 */
.s-service-faq-content[aria-hidden="true"] {
  grid-template-rows: 0fr;
  filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    background-color 0.75s,
    color 0.75s,
    grid-template-rows 0s var(--transition-duration),
    opacity var(--transition-duration),
    filter var(--transition-duration),
    visibility var(--transition-duration) allow-discrete;
}

.s-service-faq-content-inner {
  margin: -4px;
  padding: 4px;
  overflow: hidden;
  transition: margin 0s var(--transition-duration), padding 0s var(--transition-duration);
}

.s-service-faq-content[aria-hidden="true"] .s-service-faq-content-inner {
  margin: 0;
  padding: 0;
}



.p-service-info__table-wrap {
  width: 100%;
  margin-top: 20px;
  padding-block: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
}

@media(any-hover:hover) {
  .p-service-info__table-wrap:hover {
    scrollbar-color: revert;
  }
}

.p-service-info__table {
  width: 544px;
  margin-inline: auto;
  white-space: nowrap;
}

.p-service-info__table tr {
  border-top: #27c4c4 1px solid;
}

.p-service-info__table tr:last-child {
  border-bottom: #27c4c4 1px solid;
}

.p-service-info__table :where(th, td) {
  padding: 20px;
  vertical-align: middle;
}

.p-service-cta__link {
  display: block;
  max-width: 700px;
  margin-inline: auto;
  padding: 40px 48px 48px;
  border-radius: var(--radius);
  background-color: var(--clr-accent);
  color: var(--clr-on-accent);
  transition: background-color var(--transition-duration), color 0.75s;

  @media(max-width:1023.49px) {
    padding: 24px 32px 32px;
  }
}

@media(any-hover: hover) {
  .p-service-cta__link:hover {
    background-color: var(--clr-accent-hover);
  }
}

.p-service-cta__link-heading {
  display: flex;
  gap: 24px;
  align-items: center;
  line-height: 1.1;
  letter-spacing: 1px;
}

.p-service-cta__link-heading::after {
  content: '';
  display: block;
  width: 32px;
  aspect-ratio: 1/1;
  mask: url(../img/icon-arrow-foward-bold.svg) center / contain no-repeat;
  background-color: var(--clr-on-accent);
}

.p-service-cta__link-desc {
  margin-block: calc(24px - 8px) -8px;
  line-height: 2;
}




.p-blog-archive__grid-wrap {
  display: grid;
  grid-template-columns: 1fr clamp(160px, calc((240 - 160)/(1280 - 1024)*(100vw - 1024px) + 160px), 240px);
  gap: 16px;
  max-width: calc(1280px + 128px);
  margin-inline: auto;
  padding-inline: 64px;

  @media(max-width: 1023.49px) {
    grid-template-columns: 1fr;
  }

  @media(max-width: 767.49px) {
    padding-inline: 20px;
  }
}

.p-blog-archive__list .p-blog-archive__panel-wrap {
  margin-top: 48px;
}

.p-blog-archive__list {
  display: flex;
  flex-direction: column;
  gap: 24px;

  @media(max-width: 767.49px) {
    gap: 32px;
  }
}

.p-blog-archive__list-item {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.p-blog-archive__item-link {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
  gap: 12px 24px;
  padding: 24px;

  @media(max-width: 1023.49px) {
    grid-template-columns: 200px 1fr;
  }

  @media(max-width: 767.49px) {
    grid-template-columns: 1fr;
  }
}

.p-blog-archive__thumbnail {
  width: 100%;
  aspect-ratio: 1.91/1;
}

.p-blog-archive__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  transition: opacity var(--transition-duration);
}

@media(any-hover:hover) {
  .p-blog-archive__panel-link:hover .p-blog-archive__thumbnail img {
    opacity: 0.75;
  }
}

.p-blog-archive__info {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-areas: 'cat date-publish date-update';
  gap: 8px 24px;
  justify-content: start;
  align-items: center;
  margin-top: 8px;

  @media(max-width: 1279.49px) {
    grid-template-columns: repeat(2, auto);
    grid-template-areas:
      'cat cat'
      'date-publish date-update';
  }
}

.p-blog-archive__category {
  grid-area: cat;
  width: fit-content;
  padding: 2px 4px;
  border: 1px solid var(--clr-sub-txt);
  border-radius: 4px;
  color: var(--clr-sub-txt);
  font-size: 14px;
}

.p-blog-archive__date {
  font-size: 14px;
  color: var(--clr-txt-muted);
}

.p-blog-archive__date-publish {
  grid-area: date-publish;
}

.p-blog-archive__date-update {
  grid-area: date-update;
}

.u-icon-publish::before,
.u-icon-update::before {
  content: '';
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.5ch;
  background-color: var(--clr-txt-muted);
  vertical-align: text-bottom;
}

.u-icon-publish::before {
  mask: url(../img/icon-edit.svg) center/contain no-repeat;
}

.u-icon-update::before {
  mask: url(../img/icon-cashed.svg) center/contain no-repeat;
}

.p-blog-archive__title {
  font-size: 18px;
}

.p-blog-archive__excerpt {
  margin-top: 24px;
  font-size: 14px;
  color: var(--clr-txt-muted);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  @media(max-width: 767.49px) {
    margin-top: 16px;
  }
}




.c-blog-side__inner {
  padding: 24px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.c-blog-side__heading {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.c-blog-side__category-list {
  margin-top: 24px;
  padding-inline-start: 1em;
}

.c-blog-side__category-item + .c-blog-side__category-item {
  margin-top: 0.5em;
}





.p-blog-single__grid-wrap {
  display: grid;
  grid-template-columns: 1fr clamp(160px, calc((224 - 160)/(1280 - 1024)*(100vw - 1024px) + 160px), 224px);
  gap: 32px;
  max-width: calc(1024px + 128px);
  margin-inline: auto;
  padding-inline: 64px;

  @media(max-width: 1023.49px) {
    grid-template-columns: 1fr;
  }

  @media(max-width: 767.49px) {
    padding-inline: 20px;
    gap: 64px;
  }
}

.p-blog-single__title {
  font-size: 28px;
  font-weight: 500;
}

.p-blog-single__categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: end;
  align-items: center;
  margin-top: 16px;
}

.p-blog-single__category {
  width: fit-content;
  padding: 2px 4px;
  border: 1px solid var(--clr-sub-txt);
  border-radius: 4px;
  color: var(--clr-sub-txt);
  font-size: 14px;
  white-space: nowrap;
}

.p-blog-single__dates {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: end;
  align-items: center;
  margin-top: 16px;
}

.p-blog-single__date {
  font-size: 14px;
  color: var(--clr-txt-muted);
  white-space: nowrap;
}

.p-blog-single__thumbnail {
  width: 100%;
  aspect-ratio: 1.91/1;
  margin-top: 16px;
}

.p-blog-single__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-blog-single__nav-area {
  margin-top: 96px;
}

.p-blog-single__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'next archive prev';
  gap: 32px;
  justify-content: space-between;
  align-items: start;

  @media(max-width: 767.49px) {
    grid-template-columns: 1fr;
    grid-template-areas: 'next' 'prev' 'archive';
    gap: 16px;
    justify-content: center;
  }
}

.p-blog-single__nav-next {
  grid-area: next;
}

.p-blog-single__nav-archive {
  grid-area: archive;
}

.p-blog-single__nav-prev {
  grid-area: prev;
  text-align: right;

  @media(max-width: 767.49px) {
    text-align: left;
  }
}

@media(max-width: 767.49px) {

  .p-blog-single__nav-next,
  .p-blog-single__nav-archive,
  .p-blog-single__nav-prev {
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
}

:where(.p-blog-single__nav-next,
  .p-blog-single__nav-archive,
  .p-blog-single__nav-prev) a {

  @media(max-width: 767.49px) {
    display: grid;
    place-content: center start;
    width: 100%;
    min-height: 4em;
    padding: 8px 16px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background-color var(--transition-duration), color var(--transition-duration);
  }
}

@media(max-width: 767.49px) and (any-hover: hover) {

  :where(.p-blog-single__nav-next,
    .p-blog-single__nav-archive,
    .p-blog-single__nav-prev) a:hover {
    background-color: var(--clr-sub-hover);
    color: var(--clr-on-sub);
  }
}

.p-works-archive__introduction {
  text-align: center;
}

.p-works-archive__tab-wrap {
  margin-top: 48px;
}

.p-works-archive__tab-list {
  --active-anchor: --tab-1;
  position: relative;
  display: flex;
  gap: min(calc(48/500*100vw), 48px);
  justify-content: center;
}

.p-works-archive__tab-list::after {
  content: '';
  position: absolute;
  position-anchor: var(--active-anchor);
  top: calc(anchor(bottom) + 4px);
  left: anchor(left);
  display: block;
  width: anchor-size(width);
  height: 3px;
  border-radius: 9999px;
  background-color: var(--clr-main);
  transition: background-color 0.75s, left var(--transition-duration), width var(--transition-duration);
}

.p-works-archive__tab-button {
  padding: 8px 16px;
}

.p-works-archive__content-area {
  margin-top: 48px;
}

.s-works-archive-content {
  display: grid;
  grid-template-rows: 0fr;
  filter: blur(4px);
  opacity: 0;
  visibility: hidden;
}

/* 表示時 */
.s-works-archive-content[aria-hidden="false"] {
  grid-template-rows: 1fr;
  filter: blur(0);
  opacity: 1;
  visibility: visible;
  transition:
    background-color 0.75s,
    color 0.75s,
    grid-template-rows 0s var(--transition-duration),
    opacity var(--transition-duration) var(--transition-duration),
    filter var(--transition-duration) var(--transition-duration),
    visibility var(--transition-duration) var(--transition-duration);
  transition-behavior: allow-discrete;
}

/* 非表示時 */
.s-works-archive-content[aria-hidden="true"] {
  grid-template-rows: 0fr;
  filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    background-color 0.75s,
    color 0.75s,
    grid-template-rows 0s var(--transition-duration),
    opacity var(--transition-duration),
    filter var(--transition-duration),
    visibility var(--transition-duration) allow-discrete;
}

.s-works-archive-content-inner {
  margin: -4px;
  padding: 4px;
  overflow: hidden;
  transition: margin 0s var(--transition-duration), padding 0s var(--transition-duration);
}

.s-works-archive-content[aria-hidden="true"] .s-works-archive-content-inner {
  margin: 0;
  padding: 0;
}

/* Works - Web */

.p-works-archive__panel-list-web {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;

  @media(max-width: 1023.49px) {
    grid-template-columns: 1fr;
  }
}

.p-works-archive__panel-item-web {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.p-works-archive__single-link-web {
  padding: 24px;
}

.p-works-archive__thumbnail-web {
  width: 100%;
  aspect-ratio: 3/2;
  border: var(--border-muted);
}

.p-works-archive__thumbnail-web img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-works-archive__title-web {
  margin-top: 24px;
  font-size: 18px;
}

.p-works-archive__desc-web {
  margin-top: 8px;
}

.p-works-archive__desc-web:has(+.p-works-archive__link-wrap-web) {
  margin-bottom: 24px;
}

.p-works-archive__label-web {
  margin-top: 16px;
  text-align: center;
}

.p-works-archive__external-link-wrap-web {
  border-top: var(--border-muted);
}

.p-works-archive__external-link-web {
  display: block;
  width: 100%;
  height: 100%;
  padding: 16px 12px;
  box-shadow: none !important;
  border: none !important;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  text-align: center;
}

/* Works - Design */

.p-works-archive__panel-list-design {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;

  @media(max-width: 1023.49px) {
    grid-template-columns: 1fr;
  }
}

.p-works-archive__panel-item-design {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  padding: 24px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.p-works-archive__thumbnail-design {
  width: 100%;
  aspect-ratio: 1/1;
}

.p-works-archive__thumbnail-design img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-works-archive__desc-design {
  margin-top: 24px;
}

/* Works - Music */

.p-works-archive__panel-list-music {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;

  @media(max-width: 1023.49px) {
    grid-template-columns: 1fr;
  }
}

.p-works-archive__panel-item-music {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  padding: 24px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.p-works-archive__thumbnail-music {
  width: 100%;
  aspect-ratio: 16/9;
}

.p-works-archive__thumbnail-music img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-works-archive__desc-music {
  margin-top: 24px;
}

.p-works-archive__link-wrap {
  margin-top: 48px;
  margin-left: auto;
  width: fit-content;
}

.p-works-single__heading {
  font-size: 24px;
  font-weight: 700;
}

.p-works-single__grid {
  display: grid;
  grid-template-areas: 'thumbnail';
}

.p-works-single__thumbnail {
  grid-area: thumbnail;
  position: relative;
  width: 100%;
  transition: opacity var(--transition-duration), visibility var(--transition-duration);
}

.p-works-single__thumbnail[aria-hidden=true] {
  opacity: 0;
  visibility: hidden;
}

.p-works-single__thumbnail-wrap {
  aspect-ratio: 16/9;
}

.p-works-single__thumbnail-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-works-single__thumbnail-caption {
  margin-top: 12px;
}

.p-works-single__image-list-wrap {
  margin-top: 24px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 16px;
}

.p-works-single__image-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: safe center;
  max-width: 1024px;
  min-width: 624px;
}

.p-works-single__image-list-item {
  flex-shrink: 0;
  width: max(calc(25% - 12px), 144px);
}

.p-works-single__image-button {
  width: 100%;
  aspect-ratio: 16/9;
}

.p-works-single__image-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-works-single__desc {
  margin-top: 8px;
}

.p-works-single__info {
  margin-block: 24px;
}

.p-works-single__body {
  margin-top: 24px;
}

.p-works-single__archive-link-wrap {
  margin-top: 64px;
}

.p-works-single__archive-link {
  width: fit-content;
  text-align: center;
  margin-inline: auto;
}