@charset 'UTF-8';

.p-index-order-changer {
  display: none;
}

.p-index-mode-changer {
  display: none;
}

/* メインビジュアル */
.p-index-mv {
  position: relative;
  z-index: 0;
  display: grid;
  place-content: center;
  width: 100%;
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  min-height: 500px;
}

.p-index-mv__animation-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  --index-overlay-opacity: 0;
  opacity: var(--index-overlay-opacity, 1);
}


.p-index-mv__wave,
.p-index-mv__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.p-index-mv__text-wrap {
  position: relative;
  z-index: 1;
  top: calc(var(--header-height) * -1);
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-shadow: 0 0 4px var(--clr-bg);
  transition: text-shadow 0.75s;

  @media(max-width: 767.49px) {
    top: calc(var(--header-height) * -0.5);
  }
}

.p-index-mv__catch {
  margin-block: calc(1em * -0.25);
  font-size: 36px;
  font-weight: 900;
  text-align: center;
  line-height: 1.25;
}

.p-index-mv__title {
  margin-block: calc(1em * -0.25);
  line-height: 1.25;
  text-align: center;
}

.p-index-mv__desc {
  margin-block: calc(1em * -0.5);
  line-height: 1.75;
  text-align: center;
}

.p-index-content {
  position: relative;
}

/* ニュースティッカー */

.p-index-news-ticker {
  background-color: hsl(from var(--clr-main) h s calc(l - 10));
  overflow: hidden;
}

.p-index-news-ticker__list {
  --item-space: 7em;
  display: flex;
  flex-direction: row;
  gap: var(--item-space);
  width: max-content;
  padding-block: 4px;
  padding-left: var(--item-space);
  white-space: nowrap;
}

.p-index-news-ticker__item button {
  color: var(--clr-bg);
  transition: opacity var(--transition-duration);
}

@media(any-hover: hover) {
  .p-index-news-ticker__item button:hover {
    opacity: .65;
  }
}

.p-index-news-ticker__item time {
  margin-right: 1.5em;
}

.p-index-news-single {
  padding: 0;
  border-radius: var(--radius);
  opacity: 0;
  filter: blur(4px);
  transition-property: opacity, filter;
  transition-duration: var(--transition-duration);
}

.p-index-news-single:focus-visible {
  outline: none;
}

.p-index-news-single[open] {
  opacity: 1;
  filter: blur(0);
}

@starting-style {
  .p-index-news-single[open] {
    opacity: 0;
    filter: blur(4px);
  }
}

.p-index-news-single::backdrop {
  background-color: transparent;
  backdrop-filter: blur(0px);
  transition-property: background-color, backdrop-filter;
  transition-duration: var(--transition-duration);
}

.p-index-news-single[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(1px);
}

@starting-style {
  .p-index-news-single[open]::backdrop {
    background-color: transparent;
    backdrop-filter: blur(0px);
  }
}

.p-index-news-single__inner {
  max-width: min(1024px, calc(100cqw - 64px));
  max-height: 60vh;
  padding: 32px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}


.p-index-news-single__date {
  font-size: 14px;
  color: var(--clr-txt-muted);
}

.p-index-news-single__body {
  margin-top: 16px;
  line-height: 1.75;
}

.p-index-news-single__close-button-area {
  margin-top: 48px;
}

.p-index-news-single__close-button {
  margin-inline: auto;
}

/* Introduction */

.p-index-introduction {
  display: grid;
  place-content: center;
  height: 100vh;
  height: 100svh;

  @media(max-width:1023.49px) {
    height: auto;
    padding-block: 128px;
  }
}

.p-index-introduction__body {
  padding-inline: 16px;
  text-align: center;
  line-height: 2.5;

  @media(max-width: 767.49px) {
    text-align: start;
    line-height: 1.75;
  }
}

.p-index-introduction__body > * + * {
  margin-top: 24px;
}

/* About */
.p-index-about__grid {
  display: grid;
  grid-template-columns: minmax(350px, 390px) max-content;
  gap: 64px;
  align-items: start;
  margin-top: 48px;

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

.p-index-about__img {
  justify-self: center;
  width: 100%;
  max-width: 260px;
  /* max-width: 400px;
  aspect-ratio: 16/9; */
  border-radius: var(--radius);

  @media(max-width: 1023.49px) {
    order: 2;
  }
}

.p-index-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-index-about__text-area {
  display: flex;
  flex-direction: column;
  gap: 48px;

}

.p-index-about__button {
  width: fit-content;
  align-self: end;
}

/* Service */

.p-index-service__heading {
  margin-top: 48px;
}

.p-index-service__list-area {
  margin-top: 48px;
}

.p-index-service__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;

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

.p-index-service__item {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--clr-bg);
}

.p-index-service__item-inner {
  padding: 20px;
}

.p-index-service__item-img {
  width: 30%;
  aspect-ratio: 1/1;
  margin-inline: auto;
}

.p-index-service__item-icon {
  width: 100%;
  height: 100%;
  mask: center / contain no-repeat;
  background: var(--clr-txt);
}

.p-index-service__coding-icon {
  mask-image: url(../img/icon-coding.svg);
}

.p-index-service__maintenance-icon {
  mask-image: url(../img/icon-maintenance.svg);
}

.p-index-service__design-icon {
  mask-image: url(../img/icon-design.svg);
}

.p-index-service__item-heading {
  margin-top: 20px;
  text-align: center;
}

.p-index-service__item-desc {
  margin-top: 16px;
}

.p-index-service__link-area {
  --circle-width: 48px;
  --circle-border: 1px;
  --circle-inner: calc(var(--circle-width) - (var(--circle-border) * 2));
  --icon-width: 32px;
  --padding: 48px 64px;
  margin-top: 48px;

  @media(max-width: 1023.49px) {
    --circle-width: 48px;
    --icon-width: 32px;
    --padding: 48px 32px;
  }

  @media(Max-width: 767.49px) {
    --circle-width: 32px;
    --icon-width: 24px;
    --padding: 32px 16px;
  }
}

.p-index-service__link {
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--padding);
  background-color: var(--clr-bg);
  transition-property: background-color, color;
  transition-duration: var(--transition-duration);
}

@media(any-hover: hover) {
  .p-index-service__link:hover {
    background-color: var(--clr-sub-hover);
    color: var(--clr-on-sub);
    /* background-color: color-mix(in srgb, var(--clr-bg) 90%, var(--clr-main) 10%); */
  }
}

.p-index-service__link-icon {
  position: relative;
  width: var(--circle-width);
  aspect-ratio: 1/1;
  border: var(--border);
  border-width: var(--circle-border);
  border-radius: 9999px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color, var(--transition-duration);
}

.p-index-service__link-icon::before,
.p-index-service__link-icon::after {
  content: '';
  position: absolute;
  top: 0;
  display: block;
  width: var(--circle-inner);
  aspect-ratio: 1/1;
  mask: url(../img/icon-arrow-foward.svg) center / var(--icon-width) no-repeat;
  background-color: var(--clr-txt);
  /* transition-property: background-color, color;
  transition-duration: var(--transition-duration), 0.75s; */
}

.p-index-service__link-icon::before {
  left: calc(var(--circle-inner) * -1);
}

.p-index-service__link-icon::after {
  left: 0;
}

@media(any-hover: hover) {
  .p-index-service__link:hover .p-index-service__link-icon {
    border-color: var(--clr-on-sub);
  }

  .p-index-service__link:hover .p-index-service__link-icon::before,
  .p-index-service__link:hover .p-index-service__link-icon::after {
    animation: var(--transition-duration) index-about-service-arrow;
    background-color: var(--clr-on-sub);
  }


  @keyframes index-about-service-arrow {
    from {
      translate: 0 0;
    }

    to {
      translate: var(--circle-inner) 0;
    }
  }
}

.p-index-service__link-desc {
  margin-top: 32px;

  @media(max-width: 1023.49px) {
    margin-top: 32px;
  }

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


/* Skills */
.p-index-skills__heading {
  margin-top: 48px;
}

.p-index-skills__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  gap: 24px;
  margin-top: 16px;

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

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


.p-index-skills__item {
  anchor-scope: --skills-anchor;
}

.p-index-skills__button {
  anchor-name: --skills-anchor;
  width: 100%;
  padding-inline: 4px;
  text-align: center;
}

.p-index-skills__popover {
  position-anchor: --skills-anchor;
  position: fixed;
  position-area: top;
  max-width: 90vw;
  margin: 0;
  margin-block-end: 16px;
  margin-inline: 16px;
  padding: 16px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
}

.p-index-skills__popover:popover-open {
  opacity: 1;
}

@starting-style {
  .p-index-skills__popover:popover-open {
    opacity: 0;
  }
}

@media (hover:hover) and (pointer: fine) {
  .p-index-skills__popover {
    position-try-fallbacks: flip-block;
    transition-property: opacity, filter, display, overlay;
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
  }

  .p-index-skills__popover:popover-open {
    opacity: 1;
    filter: blur(0);
  }

  @starting-style {
    .p-index-skills__popover:popover-open {
      opacity: 0;
      filter: blur(8px);
    }
  }
}

.p-index-skills__popover-inner {
  display: flex;
  gap: 20px;
  align-items: center;
  line-height: 1.5;
}

.p-index-skills__popover-logo {
  flex-shrink: 0;
  width: clamp(40px, calc((80 - 40)/(767 - 375)*(100vw - 375px) + 40px), 80px);
  aspect-ratio: 1/1;
}

.p-index-skills__popover-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-index-skills__popover-desc {
  list-style-type: disc;
  padding-left: 1em;

}

/* components Library */
.p-index-library__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;

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

.p-index-library__item {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  padding: 24px;
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--clr-bg);
  box-shadow: var(--shadow);
}

.p-index-library__item-sample {
  width: 100%;
}

.p-index-library__item-heading {
  text-align: center;
}

.p-index-library__item-desc {
  margin-top: 16px;
  line-height: 1.75;
}

.p-index-library__item-tag-group {
  display: flex;
  justify-content: start;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 48px;
}

.p-index-library__item-tag-group a::before {
  content: '#';
}

.p-index-library__button-wrap {
  margin-top: 48px;
}

.p-index-library__button {
  width: fit-content;
  margin-left: auto;
}

/* Works */
.p-index-works__heading {
  margin-top: 48px;
}

.p-index-works__tab-wrap {
  margin-top: 48px;
}

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

.p-index-works__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-index-works__tab-button {
  padding: 8px 16px;
}

.p-index-works__content-area {
  margin-top: 48px;
}

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

/* 表示時 */
.s-index-works-content[aria-hidden="false"] {
  grid-template-rows: 1fr;
  filter: blur(0);
  opacity: 1;
  visibility: visible;
  transition:
    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-index-works-content[aria-hidden="true"] {
  grid-template-rows: 0fr;
  filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0s var(--transition-duration),
    opacity var(--transition-duration),
    filter var(--transition-duration),
    visibility var(--transition-duration);
  transition-behavior: allow-discrete;
}

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

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

/* Works - Web */

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

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

.p-index-works__panel-item-web {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--clr-bg);
}

.p-index-works__single-link-web {
  padding: 24px;
}

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

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

.p-index-works__title-web {
  margin-top: 24px;
  font-size: 18px;
}

.p-index-works__desc-web {
  margin-top: 8px;
}

.p-index-works__desc-web:has(+.p-index-works__external-link-wrap-web) {
  margin-bottom: 24px;
}

.p-index-works__label-web {
  margin-top: 16px;
  text-align: center;
}

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

.p-index-works__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-index-works__panel-list-design {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;

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

.p-index-works__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);
  background-color: var(--clr-bg);
}

.p-index-works__thumbnail-design {
  width: 100%;
  aspect-ratio: 1/1;
}

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

.p-index-works__desc-design {
  margin-top: 24px;
  line-height: 1.75;
}

/* Works - Music */

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

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

.p-index-works__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);
  background-color: var(--clr-bg);
}

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

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

.p-index-works__desc-music {
  margin-top: 24px;
  line-height: 1.75;
}

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

/* Blog */
.p-index-blog__panel-wrap {
  margin-top: 48px;
}

.p-index-blog__panel-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-index-blog__panel-item {
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--clr-bg);
  box-shadow: var(--shadow);
}

.p-index-blog__panel-link {
  display: grid;
  grid-template-columns: 300px 1fr;
  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-index-blog__thumbnail {
  width: 100%;
  aspect-ratio: 1.91/1;
}

.p-index-blog__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.p-index-blog__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-index-blog__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-index-blog__date {
  font-size: 14px;
  color: var(--clr-txt-muted);
}

.p-index-blog__date-publish {
  grid-area: date-publish;
}

.p-index-blog__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-index-blog__title {
  font-size: 18px;
}

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

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

.p-index-contact {
  margin-top: 144px;
}

.p-index-contact__intro {
  text-align: center;
  text-shadow: 0 0 4px var(--clr-bg);

  @media(max-width:1023.49px) {
    text-align: unset;
  }
}

.p-index-contact__form-wrap {
  max-width: 640px;
  margin: 48px auto 0;
  padding: 48px 64px 80px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--clr-bg);

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

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

.p-index-contact__annotation {
  margin-bottom: 32px;
}

.p-index-contact__annotation:empty {
  margin: 0;
}

.p-index-contact__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.p-index-contact__form-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-index-contact__input {
  width: 100%;
  padding: revert;
  padding-inline: 12px;
  border: var(--border-strong);
  line-height: 44px;

  @media(max-width: 767.49px) {
    line-height: 44px;
  }
}

.p-index-contact__textarea {
  padding: calc((44px - 1em) / 2) 12px;
  border: var(--border-strong);
  width: 100%;
  height: calc((44px - 1em) + (6em * 1.25));
  min-height: calc(4px + (2em * 1.25));
  max-height: calc(4px + (15em * 1.25));
  line-height: 1.25;
  resize: vertical;
}

.wpcf7-not-valid-tip {
  position: absolute;
  bottom: calc(1em * -1.25 - 4px);
  left: 0;
  color: var(--clr-alert);
}

.wpcf7 form.sent .wpcf7-response-output {
  display: none;
}

.p-index-contact__confirm {
  margin-top: 48px;
  padding: 16px;
  border-radius: 6px;
  background-color: var(--clr-sub-hover);
  color: var(--clr-on-sub);
  text-align: center;
  line-height: 1.75;
}

.p-index-contact__confirm-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: start;
  align-items: center;
}

.p-index-contact__confirm-annotation {
  font-size: 14px;
  align-items: center;
  line-height: 1.75;
}

.p-index-contact__confirm-policy-link {
  color: inherit;
  transition: none;
}

.p-index-contact__confirm-policy-link::after {
  transition: none;
}

label:has(.p-index-contact__confirm-checkbox) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-index-contact__confirm-checkbox {
  position: relative;
  width: calc(1em - 1px);
  aspect-ratio: 1;
  margin-right: 4px;
  border: 1px solid var(--clr-txt);
  border-radius: 2px;
  background-color: var(--clr-white);
  cursor: pointer;
}

.p-index-contact__confirm-checkbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1em;
  height: .5em;
  border-left: 2px solid var(--clr-black);
  border-bottom: 2px solid var(--clr-black);
  rotate: -45deg;
  translate: 1px -1px;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.2s 0.1s, filter 0.2s;
}

.p-index-contact__confirm-checkbox:checked::after {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.2s, filter 0.2s;
}

.p-index-contact__submit-wrap {
  margin-top: 16px;
}

.p-index-contact__submit-button {
  margin-inline: auto;
  padding: 24px 64px;
  letter-spacing: 0.25ch;
  transition-property: color, filter;
  transition-duration: var(--transition-duration);
}

.p-index-contact__submit-button:disabled {
  filter: grayscale(1);
  color: var(--clr-txt-muted);
}

.wpcf7 form .wpcf7-response-output {
  position: absolute;
  bottom: -3em;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 100%;
  margin: 0;
}

.p-index-contact__complete {
  padding: 0;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  filter: blur(4px);
  transition-property: opacity, filter, display, overlay;
  transition-duration: var(--transition-duration);
  transition-behavior: allow-discrete;
}

.p-index-contact__complete[open] {
  opacity: 1;
  filter: blur(0);
}

@starting-style {
  .p-index-contact__complete[open] {
    opacity: 0;
    filter: blur(4px);
  }
}

.p-index-contact__complete::backdrop {
  background-color: transparent;
  backdrop-filter: blur(0px);
  transition-property: background-color, backdrop-filter, display, overlay;
  transition-duration: var(--transition-duration);
  transition-behavior: allow-discrete;
}

.p-index-contact__complete[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(1px);
}

@starting-style {
  .p-index-contact__complete[open]::backdrop {
    background-color: transparent;
    backdrop-filter: blur(0px);
  }
}

.p-index-contact__complete-inner {
  padding: 24px;
  line-height: 1.75;
  text-align: center;
}

.p-index-contact__complete-button {
  margin-top: 16px;
  padding: 8px 16px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}