:root {
  --inner-value: 1200;
  --inner: 1200px;
  --padding-pc: 24px;
  --padding-sp: 24px;
  --rem: 1rem / 16;
  --em: 1em / 16;
  --cqi: 1920 * 100cqi;
}
@media screen and (max-width: 767px) {
  :root {
    --cqi: 414 * 100cqi;
  }
}
:root {
  --base-font: "Kiwi Maru", serif;
  --en-font: "Playfair Display", serif;
  --title-font: "Great Vibes", cursive;
  --rounded-font: "M PLUS Rounded 1c", sans-serif;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --color-black: #000;
  --color-white: #fff;
  --color-text: #583f4a;
  --color-main: #c0aab4;
  --color-sub: #dfd2d4;
  --color-blue: #365ea4;
  --color-navy: #374885;
  --color-light-blue: #6f84bb;
  --color-line-blue: #cad9ee;
  --color-off-white: #fffdf8;
  --color-linear: linear-gradient(90deg, #cad9ee 0%, #e8eef1 100%);
  --color-book-gradation: linear-gradient(90deg, #eba8cf 0%, #f6d4e6 100%);
  --color-title-gradation: linear-gradient(90deg, #583f4a 0%, #2e2858 100%);
  --z-index-header-ui: 103;
  --z-index-hamburger: 104;
  --z-index-drawer: 101;
  --z-index-header: 100;
  --z-index-totop: 10;
  --header-height: calc(100 * var(--rem));
  --scrollbar-width: 0;
}
@media screen and (max-width: 767px) {
  :root {
    --header-height: calc(80 * var(--rem));
  }
}

html {
  font-size: 16px;
}
@media (width <= 1200px) {
  html {
    font-size: calc(16 / var(--inner-value) * 100cqi);
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 16px;
  }
}
@media (width <= 414px) {
  html {
    font-size: 3.8647342995cqi;
  }
}

@property --scrollbar {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}
:root:has(:modal[open], .is-scroll-lock) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

html {
  scroll-padding-top: var(--header-height);
}

body {
  container-type: inline-size;
  font-family: var(--base-font);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text);
}

:where(h1) {
  margin: initial;
}

picture {
  width: 100%;
  height: 100%;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

button {
  padding: unset;
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.l-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-index-header);
}

@media screen and (max-width: 767px) {
  .l-home-about {
    margin-top: 4.25rem;
  }
}

@media screen and (max-width: 767px) {
  .l-home-common {
    margin-top: 4rem;
  }
}

.l-home-movie {
  margin-bottom: min(-150 / var(--cqi), -150px);
}
@media screen and (max-width: 767px) {
  .l-home-movie {
    margin-bottom: min(-50 / var(--cqi), -50px);
  }
}

.l-inner {
  width: 100%;
  max-width: calc(var(--inner) + var(--padding-pc) * 2);
  padding-inline: var(--padding-pc);
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-inner {
    max-width: 600px;
    padding-inline: var(--padding-sp);
  }
}

.l-lower {
  margin-block: min(-140px, -140 / var(--cqi)) -10rem;
}
@media screen and (max-width: 767px) {
  .l-lower {
    margin-block: min(-22 / var(--cqi), -22px) -2.25rem;
  }
}

.l-outer {
  --scrollbar: calc(100vw - 100cqw);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100svh;
}

body:has(.loader) .l-outer {
  opacity: 0;
}

/* !-------------------------------
  c-button
------------------------------- */
.c-button {
  --_color: var(--color-text);
  --_bg-color: var(--color-off-white);
  --_hover-bg-color: var(--_color);
  --_border-color: #9badce;
  --_transition: 0.3s;
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(54px, 4.1666666667vi, 80px);
  font-family: var(--rounded-font);
  font-size: max(12px, 1rem);
  line-height: 1;
  color: var(--_color);
  clip-path: inset(0 round 999em);
  transition: color var(--_transition) ease, background-color var(--_transition) ease, border-color var(--_transition) ease;
}
@media screen and (max-width: 767px) {
  .c-button {
    min-height: 4rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
  }
}

.c-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--_bg-color);
  border-radius: 999em;
}

.c-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--_hover-bg-color);
  border-radius: 999em;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--_transition) ease;
}

.c-button__inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1rem;
  width: 100%;
  height: 100%;
  border: 1px solid var(--_border-color);
  border-radius: 999em;
}

.c-button__inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 5px;
  border: 1px solid var(--_border-color);
  border-radius: 999em;
}

.c-button__text {
  position: relative;
  z-index: 1;
}

.c-button__text span {
  color: #f00;
}

.c-button--blue {
  --_bg-color: var(--color-blue);
  --_color: var(--color-off-white);
  --_hover-bg-color: color-mix(in srgb, var(--_bg-color) 50%, white);
}

.c-button--navy {
  --_color: var(--color-navy);
  --_hover-bg-color: var(--_color);
  min-height: clamp(54px, 3.3333333333vi, 64px);
  border-color: var(--_color);
  outline-offset: -6px;
}
@media screen and (max-width: 767px) {
  .c-button--navy {
    min-height: 4rem;
    outline-offset: -5px;
  }
}

@media (any-hover: hover) {
  .c-button:hover {
    color: var(--_bg-color);
  }
  .c-button:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .c-button:hover .c-button__inner {
    border-color: var(--_bg-color);
  }
  .c-button:hover .c-button__inner::after {
    border-color: currentcolor;
  }
  .c-button--navy:hover {
    color: var(--color-off-white);
  }
  .c-button--blue:hover {
    color: var(--color-off-white);
  }
  .c-button--blue:hover .c-button__inner {
    border-color: currentcolor;
  }
}
/* !-------------------------------
  c-cat-button
------------------------------- */
.c-cat-button {
  --_container-size: 400;
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: min(100%, 25rem);
}

.c-cat-button__ears {
  position: absolute;
  top: 0;
  width: max(54px, 78 / var(--_container-size) * 100%);
  translate: 0 -46.6666666667%;
}
@media screen and (max-width: 767px) {
  .c-cat-button__ears {
    width: 4.875rem;
  }
}

.c-cat-button svg {
  --_easing: cubic-bezier(0.54, 0.12, 0.59, 1.41);
  --_duration: 1s;
  width: 100%;
  height: auto;
  aspect-ratio: 78/30;
  overflow: visible;
  perspective: 600px;
}

.c-cat-button a {
  display: flex;
  gap: 0.5rem;
  align-items: start;
  justify-content: center;
  width: 100%;
  padding: 1.4375rem 2rem 1.3125rem;
  font-family: var(--rounded-font);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-off-white);
  text-align: center;
  letter-spacing: 0.1em;
  background-color: var(--color-main);
  border-radius: 62.4375rem;
}
@media screen and (max-width: 767px) {
  .c-cat-button a {
    gap: 0.375rem;
    align-items: center;
    padding-block: 1.5rem;
    font-size: 1rem;
  }
}

.c-cat-button a[target=_blank]::after {
  display: inline-block;
  width: 0.8em;
  aspect-ratio: 1;
  content: "";
  background-color: currentcolor;
  mask-image: url("../images/portfolio/icon_blank.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.c-cat-button__ear-left,
.c-cat-button__ear-right {
  transform-box: fill-box;
  transform-style: preserve-3d;
  perspective: 500px;
}

.c-cat-button__ear-left {
  transform-origin: 85% 90%;
}

.c-cat-button__ear-right {
  transform-origin: 15% 90%;
}

.c-cat-button:hover .c-cat-button__ear-left {
  animation: cat-ear-left var(--_duration) var(--_easing) forwards;
}

.c-cat-button:hover .c-cat-button__ear-right {
  animation: cat-ear-right var(--_duration) var(--_easing) forwards;
}

@keyframes cat-ear-left {
  0%, 100% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(-30deg);
  }
  50% {
    transform: rotateZ(5deg);
  }
  75% {
    transform: rotateZ(-1.5deg);
  }
}
@keyframes cat-ear-right {
  0%, 100% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(30deg);
  }
  50% {
    transform: rotateZ(-5deg);
  }
  75% {
    transform: rotateZ(1.5deg);
  }
}
/* !-------------------------------
c-modal-movie
------------------------------- */
.c-modal-movie {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  padding-block: 1.25rem;
  overflow-y: scroll;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s;
  scrollbar-width: none;
}

.c-modal-movie::-webkit-scrollbar {
  display: none;
}

.c-modal-movie.is-open {
  visibility: visible;
  opacity: 1;
}

.c-modal-movie__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 6.25rem;
  height: 6.25rem;
  cursor: pointer;
  transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
  .c-modal-movie__close {
    width: 4.125rem;
    height: 4.125rem;
  }
}

.c-modal-movie__close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (any-hover: hover) {
  .c-modal-movie__close:hover {
    opacity: 0.8;
  }
}
.c-modal-movie__inner {
  position: relative;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .c-modal-movie__inner {
    padding-block: 4.5625rem 0.125rem;
  }
}

.c-modal-movie__content {
  width: 80%;
  max-width: 81.25rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .c-modal-movie__content {
    width: 100%;
    max-width: 23.875rem;
  }
}

.c-modal-movie__content iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
}

@media screen and (height <= 500px) {
  .c-modal-movie {
    align-items: flex-start;
  }
}
/* !-------------------------------
  c-page-title
------------------------------- */
.c-page-title {
  display: grid;
  gap: calc(55 / var(--cqi));
  justify-items: center;
  color: var(--color-text);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-page-title {
    gap: 2rem;
  }
}

.c-page-title__en {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--title-font);
  font-size: clamp(60px, 128 / var(--cqi), 8rem);
  font-weight: var(--fw-regular);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .c-page-title__en {
    gap: 0.625rem;
    font-size: min(61 / var(--cqi), 3.8125rem);
  }
}

.c-page-title__text {
  text-box: trim-both cap alphabetic;
}

.c-page-title__spark {
  position: relative;
  display: grid;
  width: 0.3125em;
  aspect-ratio: 1;
  color: currentcolor;
}
@media screen and (max-width: 767px) {
  .c-page-title__spark {
    width: 0.3114754098em;
  }
}

.c-page-title__spark svg {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.c-page-title__spark--left {
  left: -1.25rem;
  align-self: start;
  padding-top: 0.0625rem;
}
@media screen and (max-width: 767px) {
  .c-page-title__spark--left {
    left: 0;
  }
}

.c-page-title__spark--right {
  left: 2.125rem;
  align-self: end;
  padding-bottom: 0.0625rem;
  scale: -1;
}
@media screen and (max-width: 767px) {
  .c-page-title__spark--right {
    left: 0.375rem;
  }
}

.c-page-title__spark-large {
  transform-origin: 40% 62%;
  animation: title-twinkle-lg 2.4s ease-in-out infinite;
}

.c-page-title__spark-small {
  transform-origin: 77% 22%;
  animation: title-twinkle-sm 2.4s ease-in-out infinite;
}

.c-page-title__ja {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  font-size: max(13px, 1rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-main);
  letter-spacing: 0.16em;
}
@media screen and (max-width: 767px) {
  .c-page-title__ja {
    font-size: 1rem;
  }
}

.c-page-title__ja::before,
.c-page-title__ja::after {
  width: 5em;
  aspect-ratio: 80/6;
  content: "";
  background-image: url("../images/portfolio/line_diamond.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .c-page-title__ja::before,
  .c-page-title__ja::after {
    width: 2.75em;
    aspect-ratio: 44/6;
    background-image: url("../images/portfolio/line_diamond_short-sp.svg");
  }
}

.c-page-title__ja::after {
  scale: -1;
}

.c-page-title__ja span {
  text-box: trim-both cap alphabetic;
}

@keyframes title-twinkle-lg {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.28;
    scale: 0.82;
  }
}
@keyframes title-twinkle-sm {
  0%, 100% {
    opacity: 0.35;
    scale: 0.82;
  }
  50% {
    opacity: 1;
    scale: 1;
  }
}
.js-fade-title .c-page-title__en {
  opacity: 0;
}

.js-fade-title .c-page-title__ja {
  opacity: 0;
  transform: translateY(0.625rem);
}

@scope (.p-contact) {
  @media screen and (max-width: 767px) {
    .c-page-title {
      gap: 1.125rem;
    }
  }
  @media screen and (max-width: 767px) {
    .c-page-title__en {
      font-size: min(80 / var(--cqi), 5rem);
    }
  }
}
/* !-------------------------------
  c-scroll-down
------------------------------- */
.c-scroll-down {
  --_scroll-size: calc(116 / 16 * 1em);
  --_scroll-duration: 2.8s;
  --_scroll-easing: cubic-bezier(0.22, 0.14, 0.91, 1.02);
  position: relative;
  display: grid;
  grid-template-areas: "text" "line";
  gap: 0.75rem;
  justify-items: center;
  font-size: 1rem;
}

.c-scroll-down::before {
  grid-area: line;
  width: 1px;
  height: var(--_scroll-size);
  content: "";
  background-color: currentcolor;
  border-radius: 999em;
}

.c-scroll-down::after {
  grid-area: line;
  width: 1.1875em;
  aspect-ratio: 1;
  content: "";
  background-image: url("../images/portfolio/icon_star.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: scroll-move var(--_scroll-duration) var(--_scroll-easing) infinite, scroll-fade var(--_scroll-duration) var(--_scroll-easing) infinite;
}

.c-scroll-down__text {
  grid-area: text;
  font-family: var(--en-font);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  text-box: trim-both cap alphabetic;
}

@keyframes scroll-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scroll-move {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 calc(var(--_scroll-size) - 8 / var(--cqi));
  }
}
/* !-------------------------------
c-separator
------------------------------- */
.c-separator {
  display: block;
  width: 14.6875rem;
}
@media screen and (max-width: 767px) {
  .c-separator {
    width: 10.125rem;
  }
}

.c-separator img {
  width: 100%;
  aspect-ratio: 235/24;
  object-fit: contain;
}

/* !-------------------------------
c-totop
------------------------------- */
.c-totop {
  position: fixed;
  right: 1rem;
  bottom: 3rem;
  z-index: var(--z-index-totop);
  display: grid;
  place-items: center;
  width: clamp(48px, 100 / var(--cqi), 100px);
  aspect-ratio: 1;
  cursor: pointer;
  visibility: hidden;
  background-color: var(--color-main);
  border: 1px solid var(--color-bg);
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, translate 0.3s ease;
}
@media screen and (max-width: 767px) {
  .c-totop {
    width: 40px;
    border-radius: 0.25rem;
  }
}

.c-totop.is-visible {
  visibility: visible;
  opacity: 1;
}

.c-totop img {
  width: 36%;
  height: auto;
  aspect-ratio: 36/52;
}
@media screen and (max-width: 767px) {
  .c-totop img {
    width: 45%;
    aspect-ratio: 18/26;
  }
}

.c-totop:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

@media (any-hover: hover) {
  .c-totop.is-visible:hover {
    background-color: var(--color-sub);
    translate: 0 -5px;
  }
}
/* !-------------------------------
p-achievements
------------------------------- */
.p-achievements__inner {
  position: relative;
  display: grid;
  justify-items: center;
}

.p-achievements__inner::after {
  grid-row-start: 3;
  width: 100%;
  height: 3px;
  margin-top: 5rem;
  content: "";
  background-image: radial-gradient(circle, var(--color-sub) 1.5px, transparent 1.5px);
  background-repeat: space no-repeat;
  background-position: left center;
  background-size: 13px 3px;
}
@media screen and (max-width: 767px) {
  .p-achievements__inner::after {
    margin-top: 4rem;
  }
}

.p-achievements__title {
  --_icon-rotate: 30deg;
  display: inline-flex;
  gap: 0.375em;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 1.5rem;
  font-size: 4rem;
  border-bottom: 2px solid var(--color-main);
}
@media screen and (max-width: 767px) {
  .p-achievements__title {
    gap: 0.6666666667em;
    font-size: 2.25rem;
  }
}

.p-achievements__title::before,
.p-achievements__title::after {
  width: 0.5em;
  aspect-ratio: 32/30;
  content: "";
  background-color: var(--color-sub);
  mask-image: url("../images/portfolio/icon_paw.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  rotate: calc(var(--_icon-rotate) * -1);
}
@media screen and (max-width: 767px) {
  .p-achievements__title::before,
  .p-achievements__title::after {
    width: 0.8888888889em;
  }
}

.p-achievements__title::after {
  rotate: var(--_icon-rotate);
  scale: -1 1;
}

.p-achievements__title span {
  font-weight: var(--fw-regular);
  line-height: 1;
  text-indent: 0.16em;
  letter-spacing: 0.16em;
  text-box: trim-both cap alphabetic;
}

.p-achievements__products {
  --_gap: calc(127 * var(--rem));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 30rem));
  gap: var(--_gap);
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-achievements__products {
    --_gap: calc(64 * var(--rem));
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3rem;
  }
}

.p-achievements__product {
  position: relative;
}

.p-achievements__product:nth-child(odd):not(:last-child)::before {
  position: absolute;
  top: 50%;
  right: calc(var(--_gap) / 2 * -1);
  width: 2rem;
  aspect-ratio: 32/30;
  content: "";
  background-image: linear-gradient(270deg, #374885 0%, #417bc4 100%);
  mask-image: url("../images/portfolio/icon_star.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  translate: 50% -50%;
}
@media screen and (max-width: 767px) {
  .p-achievements__product:nth-child(odd):not(:last-child)::before {
    content: none;
  }
}

.p-achievements__works {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 2%;
  align-items: start;
  justify-content: space-between;
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-achievements__works {
    margin-top: 4rem;
  }
}

.p-achievements__work {
  flex-shrink: 0;
  width: 32%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .p-achievements__work {
    width: 100%;
    height: auto;
  }
}

.p-achievements__work:nth-child(3) .p-work-card figcaption {
  padding-inline: min(5.2083333333%, 20px);
}
@media screen and (max-width: 767px) {
  .p-achievements__work:nth-child(3) .p-work-card figcaption {
    padding-inline: initial;
  }
}

.p-achievements__others {
  display: grid;
  gap: 2rem;
  width: 100%;
  padding: 3rem;
  margin-top: 5rem;
  background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 767px) {
  .p-achievements__others {
    padding: 2rem 1.5rem;
    margin-top: 4rem;
  }
}

.p-achievements__others-list {
  display: grid;
  gap: 2rem;
}

.p-achievements__others-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  font-size: max(14px, 1rem);
}
@media screen and (max-width: 767px) {
  .p-achievements__others-item {
    font-size: 0.875rem;
  }
}

.p-achievements__others-item::before {
  width: 0.8125rem;
  aspect-ratio: 13/12;
  content: "";
  background-color: var(--color-main);
  mask-image: url("../images/portfolio/icon_paw.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.p-achievements__others-item p {
  font-weight: var(--fw-regular);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-box: trim-both cap alphabetic;
}

.p-achievements__others-link {
  display: inline-flex;
  gap: 0.5625rem;
  align-items: end;
  justify-self: start;
  padding-bottom: 0.3125rem;
  margin-left: 1.3125rem;
  font-size: max(16px, 1.25rem);
  line-height: 1.5;
  color: var(--color-main);
  border-bottom: 1px solid;
  transition: color 0.3s ease;
}

.p-achievements__others-link::after {
  width: 0.65em;
  aspect-ratio: 1;
  content: "";
  background-color: currentcolor;
  mask-image: url("../images/portfolio/icon_blank.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.p-achievements__others-link span {
  text-box: trim-both cap alphabetic;
}

@media (any-hover: hover) {
  .p-achievements__others-link:hover {
    color: var(--color-text);
  }
}
/* !-------------------------------
p-contact
------------------------------- */
.p-contact__content {
  display: grid;
  gap: 4rem;
  justify-items: center;
}
@media screen and (max-width: 767px) {
  .p-contact__content {
    gap: 1.5rem;
  }
}

.p-contact__card {
  display: grid;
  gap: 1rem;
  justify-items: center;
  width: 100%;
  padding: 4.6666666667% 4%;
  margin-top: 5rem;
  border: 2px solid var(--color-main);
  outline: 1px solid var(--color-sub);
  outline-offset: -0.5rem;
}
@media screen and (max-width: 767px) {
  .p-contact__card {
    padding: 1.5rem;
    margin-inline: -0.25rem;
    margin-top: 3.25rem;
    outline-offset: -0.25rem;
  }
}

.p-contact__lead {
  font-size: max(14px, 1.25rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-main);
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-contact__lead {
    font-size: 0.875rem;
  }
}

.p-contact__info {
  display: grid;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .p-contact__info {
    gap: initial;
  }
}

.p-contact__label {
  font-size: max(10px, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-contact__label {
    font-size: 0.625rem;
  }
}

.p-contact__address {
  display: flex;
  gap: 1rem;
  align-items: end;
  font-family: var(--rounded-font);
  font-size: 3rem;
  font-weight: var(--fw-regular);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-contact__address {
    gap: 0.5rem;
    font-size: 1.25rem;
  }
}

.p-contact__copy {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.5rem;
  aspect-ratio: 1;
  anchor-name: --contact-copy;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .p-contact__copy {
    font-size: 1.25rem;
  }
}

.p-contact__copy img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.p-contact__copy-popup {
  position: absolute;
  top: calc(-100% - 1.25rem);
  z-index: 1;
  width: max-content;
  padding: 0.5rem 0.75rem;
  font-size: max(14px, 1rem);
  line-height: 1;
  color: var(--color-text);
  visibility: hidden;
  background-color: var(--color-white);
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease, translate 0.2s ease;
}
@media screen and (max-width: 767px) {
  .p-contact__copy-popup {
    top: calc(-100% - 0.25rem);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
}

.p-contact__copy-popup::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.5rem;
  aspect-ratio: 1;
  content: "";
  background-color: inherit;
  rotate: 45deg;
  translate: -50% -50%;
}

.p-contact__copy.is-copied .p-contact__copy-popup {
  visibility: visible;
  opacity: 1;
}

.p-contact__notes {
  display: grid;
  gap: 2rem;
  width: 100%;
  padding: 3rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-contact__notes {
    padding: 8.7431693989% 6.5573770492%;
    border-radius: 0;
  }
}

.p-contact__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  font-size: max(14px, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-contact__note {
    font-size: 0.875rem;
  }
}

.p-contact__note::before {
  width: 0.8125rem;
  aspect-ratio: 13/12;
  content: "";
  background-color: var(--color-main);
  mask-image: url("../images/portfolio/icon_paw.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.p-contact__note p {
  text-box: trim-both cap alphabetic;
}

.p-contact__notes strong {
  font-size: 1.25em;
  font-weight: var(--fw-medium);
}
@media screen and (max-width: 767px) {
  .p-contact__notes strong {
    font-size: 1.2857142857em;
  }
}

/* !-------------------------------
p-cta-card
------------------------------- */
.p-cta-card {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  padding: 1.5rem;
  overflow: clip;
  text-align: center;
  border: 1px solid var(--color-main);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px 0 rgba(192, 170, 180, 0.5);
}
@media screen and (max-width: 767px) {
  .p-cta-card {
    place-content: center;
    padding: 0;
    margin-inline: -1rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

.p-cta-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: url("../images/portfolio/bg_paw.avif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 767px) {
  .p-cta-card::before {
    content: none;
  }
}

.p-cta-card__inner {
  --_padding-inline: minmax(16px, 1fr);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: inherit;
  grid-template-columns: var(--_padding-inline) minmax(0, 406px) var(--_padding-inline);
  grid-row: inherit;
  place-items: center;
  padding-block: 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-sub);
  border-radius: 0.625rem;
}
@media screen and (max-width: 767px) {
  .p-cta-card__inner {
    grid-template-columns: var(--_padding-inline) minmax(0, 650px) var(--_padding-inline);
    padding-block: 2rem;
    border-radius: 0.5rem;
  }
}

.p-cta-card__inner > * {
  grid-column: 2;
}

.p-cta-card__header {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  padding-bottom: 1.75rem;
}
@media screen and (max-width: 767px) {
  .p-cta-card__header {
    padding-bottom: 1.5rem;
  }
}

.p-cta-card__header::before {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  content: "";
  background-image: radial-gradient(circle, var(--color-sub) 1.5px, transparent 1.5px);
  background-repeat: space no-repeat;
  background-position: left center;
  background-size: 0.625rem 3px;
}

.p-cta-card__prefix {
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.p-cta-card__title {
  margin-top: 0.5rem;
  font-size: 4rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  text-box: trim-both cap alphabetic;
  color: var(--color-off-white);
  text-shadow: 2px 2px 0 var(--color-main);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .p-cta-card__title {
    font-size: 3rem;
  }
}

.p-cta-card__subtitle {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  font-size: max(10px, 0.875rem);
  line-height: 1;
  letter-spacing: 0.16em;
}
@media screen and (max-width: 767px) {
  .p-cta-card__subtitle {
    font-size: 0.875rem;
  }
}

.p-cta-card__subtitle::before,
.p-cta-card__subtitle::after {
  width: 0.9285714286em;
  aspect-ratio: 13/12;
  content: "";
  background-color: var(--color-sub);
  mask-image: url("../images/portfolio/icon_paw.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.p-cta-card__subtitle span {
  text-box: trim-both cap alphabetic;
}

.p-cta-card__text {
  margin-top: 1.75rem;
  font-family: var(--rounded-font);
  font-size: max(10px, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 767px) {
  .p-cta-card__text {
    padding-inline: 0.25rem;
    margin-top: 1.5rem;
    font-size: 1rem;
  }
}

.p-cta-card__button {
  width: 100%;
  margin-top: 2.5rem;
}

/* !-------------------------------
p-footer
------------------------------- */
.p-footer {
  position: relative;
  z-index: 1;
  padding-top: 7.25rem;
  background-image: url("../images/portfolio/bg_footer.avif");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .p-footer {
    padding-top: calc(48 / var(--cqi));
    background-image: url("../images/portfolio/bg_footer-sp.avif");
    background-size: cover;
  }
}

.p-footer__inner {
  --inner: 814px;
  display: grid;
  justify-items: center;
}
@media screen and (max-width: 767px) {
  .p-footer__inner {
    --inner: 366px;
  }
}

.p-footer__logo {
  display: block;
  width: min(33.75rem, 100%);
}
@media screen and (max-width: 767px) {
  .p-footer__logo {
    width: min(20rem, 100%);
  }
}

.p-footer__logo img {
  width: 100%;
  aspect-ratio: 540/160;
  object-fit: contain;
}

.p-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-footer__nav {
    flex-direction: column;
    gap: 2px;
    margin-top: 2rem;
  }
}

.p-footer__nav::before,
.p-footer__nav::after {
  width: 1.5rem;
  aspect-ratio: 1;
  content: "";
  background-color: var(--color-sub);
  mask-image: url("../images/portfolio/icon_star.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
@media screen and (max-width: 767px) {
  .p-footer__nav::before,
  .p-footer__nav::after {
    content: none;
  }
}

.p-footer__nav-item {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
}

.p-footer__nav-item:not(:last-child)::after {
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  content: "";
  background-color: var(--color-sub);
}
@media screen and (max-width: 767px) {
  .p-footer__nav-item:not(:last-child)::after {
    right: initial;
    bottom: 0;
    width: 1.5rem;
    height: 1px;
  }
}

.p-footer__nav-link {
  display: flex;
  padding-inline: 3rem;
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-text);
  transition: color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .p-footer__nav-link {
    padding: 1rem;
    font-size: 1.5rem;
  }
}

.p-footer__nav-link span {
  text-box: trim-both cap alphabetic;
}

@media (any-hover: hover) {
  .p-footer__nav-link:hover {
    color: var(--color-sub);
  }
}
.p-footer__products {
  display: grid;
  grid-template-columns: minmax(0, 35rem);
  gap: 3rem;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-footer__products {
    grid-template-columns: minmax(0, 30rem);
    gap: 2rem;
    margin-top: 2rem;
  }
}

.p-footer__product {
  transition: filter 0.3s ease;
}

.p-footer__product img {
  width: 100%;
  aspect-ratio: 560/100;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-footer__product img {
    aspect-ratio: 366/72;
    border-radius: 999em;
  }
}

@media (any-hover: hover) {
  .p-footer__product:hover {
    filter: brightness(1.06) drop-shadow(0 0 10px rgba(192, 170, 180, 0.7));
  }
}
.p-footer__social {
  display: grid;
  gap: 2rem;
  justify-items: center;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-footer__social {
    gap: 2rem;
    margin-top: 3rem;
  }
}

.p-footer__social-label {
  position: relative;
  width: 100%;
  padding-block-end: 1rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-main);
  text-align: center;
  text-box: trim-both cap alphabetic;
}

.p-footer__social-label::before {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  content: "";
  background-image: radial-gradient(circle, var(--color-sub) 1.5px, transparent 1.5px);
  background-repeat: space no-repeat;
  background-position: left center;
  background-size: 9px 3px;
}

.p-footer__social-group {
  display: grid;
  gap: 1.5rem;
}

.p-footer__social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .p-footer__social-list {
    gap: 0.875rem 1rem;
  }
}

@media screen and (max-width: 767px) {
  .p-footer__social-list:first-of-type {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 6.6875rem));
  }
}

.p-footer__social-item {
  flex-shrink: 0;
}

.p-footer__social-link {
  display: inline-grid;
  place-items: center;
  height: 100%;
  padding: 0.8571428571em 2.2142857143em;
  font-size: max(12px, 0.875rem);
  line-height: 1.2;
  color: var(--color-text);
  text-align: center;
  border: 1px solid var(--color-text);
  border-radius: 999em;
  transition: color 0.3s ease, background-color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .p-footer__social-link {
    width: 100%;
    padding-inline: 1.1428571429em;
  }
}

.p-footer__social-link--wide {
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .p-footer__social-link--wide {
    min-height: 3.25rem;
    padding-inline: 2.2857142857em;
  }
}

.p-footer__social-link--wide2 {
  min-width: 15.8125rem;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .p-footer__social-link--wide2 {
    min-width: 14.375rem;
    min-height: 3.25rem;
    padding-inline: 2.2857142857em;
  }
}

.p-footer__social-link span {
  text-box: trim-both cap alphabetic;
}

@media (any-hover: hover) {
  .p-footer__social-link:hover {
    color: var(--color-off-white);
    background-color: var(--color-main);
  }
}
.p-footer__copyright {
  padding: 0.5rem;
  margin-top: 6rem;
  text-align: center;
  background-color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .p-footer__copyright {
    margin-top: 3rem;
  }
}

.p-footer__copyright small {
  font-family: var(--rounded-font);
  font-size: max(12px, 1rem);
  line-height: 1;
  color: var(--color-off-white);
}
@media screen and (max-width: 767px) {
  .p-footer__copyright small {
    font-size: 0.75rem;
  }
}

/* !-------------------------------
p-header
------------------------------- */
.p-header {
  position: fixed;
  z-index: var(--z-index-header);
}

.p-header__hamburger {
  --_container-size: 100;
  --_border: 1px solid var(--color-main);
  position: relative;
  z-index: var(--z-index-hamburger);
  display: grid;
  place-items: center;
  width: calc(var(--_container-size) * var(--rem));
  aspect-ratio: 1;
  margin-left: auto;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.9);
  border: var(--_border);
  border-bottom-left-radius: 3.125rem;
  container-type: inline-size;
}
@media screen and (max-width: 767px) {
  .p-header__hamburger {
    --_container-size: 66;
    border-bottom-left-radius: 2rem;
  }
}

.p-header__hamburger::before {
  position: absolute;
  inset: -1px;
  content: "";
  border: var(--_border);
  border-radius: 50%;
}

.p-header__hamburger::after {
  position: absolute;
  width: calc(79 / var(--_container-size) * 100cqi);
  aspect-ratio: 1;
  content: "";
  background-color: var(--color-sub);
  mask-image: url("../images/portfolio/icon_spark.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: rotate 0.5s ease-out;
}
@media screen and (max-width: 767px) {
  .p-header__hamburger::after {
    width: calc(50 / var(--_container-size) * 100cqi);
  }
}

@media (any-hover: hover) {
  .p-header__hamburger:hover::after {
    rotate: 180deg;
  }
}
.p-header__hamburger-text {
  position: relative;
  z-index: 1;
  grid-area: 1/1;
  font-family: var(--en-font);
  font-size: calc(20 / var(--_container-size) * 100cqi);
  font-style: italic;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: 0.08em;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-header__hamburger-text {
    font-size: 0.875rem;
    letter-spacing: 0.03em;
  }
}

.p-header__hamburger-text:nth-child(2) {
  visibility: hidden;
  opacity: 0;
}

.p-header__hamburger.is-open .p-header__hamburger-text:nth-child(1) {
  visibility: hidden;
  opacity: 0;
}

.p-header__hamburger.is-open .p-header__hamburger-text:nth-child(2) {
  visibility: visible;
  opacity: 1;
}

.p-header__drawer {
  --_easing: cubic-bezier(0.35, 0.21, 0.22, 0.9);
  position: fixed;
  inset-block: 0;
  right: 0;
  width: min(100%, clamp(340px, 640 / var(--cqi), 640px));
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--_easing), visibility 0.3s var(--_easing), translate 0.3s var(--_easing);
  translate: 100%;
}
@media screen and (max-width: 767px) {
  .p-header__drawer {
    inset: 0;
    width: 100%;
  }
}

.p-header__drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  translate: 0;
}

.p-header__drawer-panel {
  --_radius: calc(200 * var(--rem));
  --_padding-block: calc(172 / 640 * 100%);
  --_padding-inline: calc(64 / 640 * 100%);
  height: 100%;
  overflow-y: auto;
  background-color: rgba(253, 246, 243, 0.8);
  backdrop-filter: blur(8px);
  border: 2px solid var(--color-main);
  border-radius: var(--_radius) 0 0 var(--_radius);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .p-header__drawer-panel {
    --_padding-block: calc(76 * var(--rem));
    --_padding-inline: var(--padding-sp);
    border: none;
    border-radius: 0;
  }
}

.p-header__drawer-inner {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding-inline: var(--_padding-inline);
}
.p-header__drawer-contents {
  --_container-size: 509;
  display: grid;
  grid-row: 2;
  gap: 3rem;
  place-items: center;
  padding-block: var(--_padding-block);
  container-type: inline-size;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-contents {
    --_container-size: 414;
    gap: 1.5rem;
  }
}

.p-header__drawer-logo {
  width: min(100%, 400 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-header__drawer-logo {
    width: min(100%, 20rem);
  }
}

.p-header__drawer-logo img {
  width: 100%;
  aspect-ratio: 400/119;
  object-fit: contain;
}

.p-header__drawer-separator {
  display: block;
  width: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-separator {
    width: 1rem;
  }
}

.p-header__drawer-separator img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.p-header__drawer-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(40 / var(--_container-size) * 100cqi);
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-list {
    flex-direction: column;
    gap: 2rem;
  }
}

.p-header__drawer-item {
  flex-shrink: 0;
  min-width: calc(124 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-header__drawer-item {
    min-width: initial;
  }
}

.p-header__drawer-link {
  display: grid;
  gap: 0.75rem;
  color: var(--color-text);
  text-align: center;
  transition: color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-link {
    gap: 0.75rem;
  }
}

.p-header__drawer-link-en {
  font-family: var(--en-font);
  font-size: calc(32 / var(--_container-size) * 100cqi);
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.08em;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-link-en {
    font-size: 1.5rem;
  }
}

.p-header__drawer-link-ja {
  font-size: max(10px, 0.4375em);
  line-height: 1;
  letter-spacing: 0.08em;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-header__drawer-link-ja {
    font-size: 0.875rem;
  }
}

@media (any-hover: hover) {
  .p-header__drawer-link:hover {
    color: var(--color-main);
  }
}
.p-header__products {
  display: grid;
  gap: 2.25rem;
  justify-items: center;
}
@media screen and (max-width: 767px) {
  .p-header__products {
    gap: 1.5rem;
    width: calc(393 / var(--_container-size) * 100cqi);
  }
}

.p-header__product {
  --_width: calc(393 / var(--_container-size) * 100cqi);
  --_aspect-ratio: 393 / 100;
  display: grid;
  justify-items: center;
  width: min(100%, var(--_width));
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .p-header__product {
    --_width: calc(310 * var(--rem));
  }
}

.p-header__product--hoshishiro {
  --_width: calc(340 / var(--_container-size) * 100cqi);
  --_aspect-ratio: 340 / 96;
}
@media screen and (max-width: 767px) {
  .p-header__product--hoshishiro {
    --_width: calc(272 * var(--rem));
  }
}

.p-header__product-logo {
  width: 100%;
  transition: opacity 0.3s ease;
}

.p-header__product-logo img {
  width: 100%;
  aspect-ratio: var(--_aspect-ratio);
  object-fit: contain;
}

.p-header__product-text {
  font-size: max(10px, 0.875rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-text);
  letter-spacing: 0.08em;
  text-box: trim-both cap alphabetic;
  transition: color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .p-header__product-text {
    font-size: 0.875rem;
  }
}

@media (any-hover: hover) {
  .p-header__product:hover .p-header__product-logo {
    opacity: 0.6;
  }
  .p-header__product:hover .p-header__product-text {
    color: var(--color-main);
  }
}
/* !-------------------------------
p-home-about
------------------------------- */
.p-home-about {
  position: relative;
  padding-block: 10rem 17.6875rem;
  overflow-x: clip;
}
@media screen and (max-width: 767px) {
  .p-home-about {
    padding-block: calc(64 / var(--cqi)) calc(60 / var(--cqi));
  }
}

.p-home-about__inner {
  display: grid;
  gap: 5rem;
  justify-items: center;
}
@media screen and (max-width: 767px) {
  .p-home-about__inner {
    gap: 3rem;
  }
}

.p-home-about__profile-main {
  width: 100%;
}

.p-home-about__cta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-home-about__cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .p-home-about__cta::before {
    position: absolute;
    inset: 0 calc(50% - 50cqi);
    content: "";
    background-image: url("../images/portfolio/bg_paw.avif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-block: 1px solid var(--color-main);
  }
}

/* !-------------------------------
p-home-hoshishiro
------------------------------- */
.p-home-hoshishiro {
  overflow: clip;
}

.p-home-hoshishiro__layout {
  --_bg-blur: 0px;
  --_bg-opacity: 1;
  /* column */
  --_outer: minmax(0, 296fr);
  --_visual: minmax(380px, 664fr);
  --_center: minmax(60px, 197fr);
  --_content: minmax(240px, 467fr);
  /* row */
  --_row-block1: min(60 / var(--cqi), 60px);
  --_row-block2: min(50 / var(--cqi), 50px);
  position: relative;
  display: grid;
  grid-template-rows: var(--_row-block1) var(--_row-block2) 1fr var(--_row-block2) var(--_row-block1);
  grid-template-columns: var(--_outer) var(--_visual) var(--_center) var(--_content) var(--_outer);
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__layout {
    /* column */
    --_outer: minmax(32px, 1fr);
    --_inner: minmax(0, 400px);
    grid-template-rows: initial;
    grid-template-columns: var(--_outer) var(--_inner) var(--_outer);
  }
}

.p-home-hoshishiro__layout::after {
  position: absolute;
  inset: 0;
  grid-row: 2/-2;
  grid-column: 1/-1;
  content: "";
  background-image: url("../images/portfolio/bg_hoshishiro.avif");
  filter: blur(var(--_bg-blur));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: var(--_bg-opacity);
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__layout::after {
    grid-row: 2/3;
    background-image: url("../images/portfolio/bg_hoshishiro-sp.avif");
  }
}

.p-home-hoshishiro__visual {
  position: relative;
  z-index: 1;
  grid-row: 1/-1;
  grid-column: 1/4;
  height: 100%;
  overflow: hidden;
  outline: 1px solid var(--color-line-blue);
  outline-offset: -8px;
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__visual {
    grid-row: 1/2;
    grid-column: 1/-1;
    height: auto;
    outline: none;
  }
}

.p-home-hoshishiro__visual img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1141/803;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__visual img {
    height: auto;
    aspect-ratio: 414/293;
  }
}

.p-home-hoshishiro__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: subgrid;
  grid-row: 3/4;
  grid-column: 3/5;
  padding: min(64 / var(--cqi), 64px);
  background: rgba(255, 255, 255, 0.3);
  filter: none;
  backdrop-filter: blur(6px);
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__content {
    z-index: 3;
    grid-row: 2/3;
    grid-column: 1/-1;
    padding: 2.5rem 0 4rem;
    backdrop-filter: blur(2px);
  }
}

.p-home-hoshishiro__product {
  --_container-size: 664;
  position: relative;
  z-index: 2;
  grid-column: 1/-1;
  container-type: inline-size;
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__product {
    --_container-size: 350;
    grid-column: 2;
  }
}

.p-home-hoshishiro__en {
  display: grid;
  grid-template-areas: ". en";
  grid-template-columns: minmax(8px, 1fr) minmax(160px, min(78.3783783784%, 440px));
  grid-row: 3/4;
  align-self: start;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__en {
    position: absolute;
    top: 5.625rem;
    right: 1rem;
    grid-template-columns: minmax(0, 1fr);
    grid-row: 2/3;
  }
}

.p-home-hoshishiro__en-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  grid-area: en;
  width: min(9.375cqi, 440px);
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__en-text {
    width: 9.25rem;
  }
}

.p-home-hoshishiro__en-text img {
  width: 100%;
  aspect-ratio: 180/556;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__en-text img {
    aspect-ratio: 148/556;
  }
}

.p-home-hoshishiro__en-title {
  position: absolute;
  right: calc(-42 / var(--cqi));
  z-index: 1;
  grid-area: en;
  place-self: center end;
  width: calc(162 / var(--cqi));
}
@media screen and (max-width: 767px) {
  .p-home-hoshishiro__en-title {
    display: none;
  }
}

.p-home-hoshishiro__en-title img {
  width: 100%;
  aspect-ratio: 162/834;
  object-fit: contain;
}

/* !-------------------------------
p-home-kazeshiro
------------------------------- */
.p-home-kazeshiro {
  padding-block: 2.5rem 2.1875rem;
  overflow-x: clip;
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro {
    padding-block: 1.625rem 0;
  }
}

.p-home-kazeshiro__layout {
  --_bg-blur: 0px;
  --_bg-opacity: 1;
  /* column */
  --_outer: minmax(100px, 1fr);
  --_content: minmax(0, calc(405 / 1920 * 100cqi));
  --_center: minmax(100px, 195px);
  --_visual: minmax(140px, 600px);
  /* row */
  --_row1: calc(120 * var(--rem));
  --_row2: calc(63 * var(--rem));
  --_row3: var(--_row2);
  --_row4: calc(205 * var(--rem));
  position: relative;
  display: grid;
  grid-template-rows: var(--_row1) var(--_row2) 1fr var(--_row3) var(--_row4);
  grid-template-columns: var(--_outer) var(--_content) var(--_center) var(--_visual) var(--_outer);
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__layout {
    /* column */
    --_outer: minmax(32px, 1fr);
    --_inner: minmax(0, 400px);
    /* row */
    --_row1: calc(95 * var(--rem));
    --_row2: calc(50 * var(--rem));
    grid-template-rows: var(--_row1) auto var(--_row2) auto;
    grid-template-columns: var(--_outer) var(--_inner) var(--_outer);
  }
}

.p-home-kazeshiro__layout::before {
  position: absolute;
  inset: 0;
  grid-row: 2/-2;
  grid-column: 1/-1;
  content: "";
  background-image: url("../images/portfolio/bg_kazeshiro_back.avif");
  filter: blur(var(--_bg-blur));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: var(--_bg-opacity);
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__layout::before {
    grid-row: 2/3;
    background-image: url("../images/portfolio/bg_kazeshiro_back-sp.avif");
    background-position: center bottom;
  }
}

.p-home-kazeshiro__layout::after {
  position: absolute;
  inset: 0;
  grid-row: 3/4;
  grid-column: 1/4;
  content: "";
  background-image: url("../images/portfolio/bg_kazeshiro_front.avif");
  filter: blur(var(--_bg-blur));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: var(--_bg-opacity);
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__layout::after {
    grid-row: 3/5;
    grid-column: 1/-1;
    background-position: right center;
  }
}

.p-home-kazeshiro__visual {
  --_visual-parallax-y: 0%;
  --_visual-before-parallax-y: 0%;
  --_visual-after-parallax-y: 0%;
  --_visual-after-parallax-z: 0px;
  --_visual-after-parallax-skew: 0deg;
  position: relative;
  grid-row: 1/-1;
  grid-column: 3/-1;
  width: clamp(640px, 68.6979166667cqi, 1400px);
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__visual {
    z-index: 1;
    grid-row: 1/4;
    grid-column: 1/-1;
    place-self: end center;
    width: min(553 / var(--cqi), 680px);
  }
}

.p-home-kazeshiro__visual::before,
.p-home-kazeshiro__visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  will-change: transform;
}

.p-home-kazeshiro__visual::before {
  background-image: url("../images/portfolio/bg_visual_snowflake.avif");
  mix-blend-mode: plus-lighter;
  transform: translateY(var(--_visual-before-parallax-y));
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__visual::before {
    background-image: url("../images/portfolio/bg_visual_snowflake-sp.avif");
  }
}

.p-home-kazeshiro__visual::after {
  background-image: url("../images/portfolio/bg_visual_kirakira.avif");
  transform: perspective(500px) translateY(var(--_visual-after-parallax-y)) translateZ(var(--_visual-after-parallax-z)) skewY(var(--_visual-after-parallax-skew));
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__visual::after {
    background-image: url("../images/portfolio/bg_visual_kirakira-sp.avif");
  }
}

.p-home-kazeshiro__visual img {
  width: 100%;
  aspect-ratio: 1319/1045;
  object-fit: contain;
  transform: translateY(var(--_visual-parallax-y));
  will-change: transform;
}

.p-home-kazeshiro__content {
  --_row-block: max(40px, 54 / 1920 * 100cqi);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--_row-block) 1fr var(--_row-block);
  grid-template-columns: subgrid;
  grid-row: 3/4;
  grid-column: 1/4;
  row-gap: 1.6666666667cqi;
  filter: none;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__content {
    --_row-block: calc(48 * var(--rem));
    grid-row: 3/5;
    grid-column: 1/-1;
    row-gap: 1rem;
  }
}

.p-home-kazeshiro__badge {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: end;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-light-blue);
  letter-spacing: 0.1em;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__badge {
    position: absolute;
    grid-row: 1/2;
    font-size: 0.875rem;
  }
}

.p-home-kazeshiro__product {
  position: relative;
  z-index: 2;
  grid-column: 2/4;
  padding-inline: 2rem;
  container-type: inline-size;
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__product {
    --_container-size: 366;
    grid-row: 2;
    grid-column: 2;
    padding-inline: initial;
  }
}

.p-home-kazeshiro__en {
  position: relative;
  display: grid;
  grid-template-areas: "en .";
  grid-template-columns: min(82.7777777778%, 440px) minmax(2rem, 1fr);
  grid-row: 2/-1;
}
@media screen and (max-width: 767px) {
  .p-home-kazeshiro__en {
    display: none;
  }
}

.p-home-kazeshiro__en-text {
  display: inline-block;
  grid-area: en;
  justify-self: end;
  width: clamp(160px, 298 / var(--cqi), 440px);
}

.p-home-kazeshiro__en-text img {
  width: 100%;
  aspect-ratio: 298/400;
  object-fit: contain;
}

.p-home-kazeshiro__en-title {
  position: relative;
  bottom: 1.875rem;
  display: inline-block;
  grid-area: en;
  width: calc(104 / var(--cqi));
}

.p-home-kazeshiro__en-title img {
  width: 100%;
  aspect-ratio: 104/492;
  object-fit: contain;
}

/* !-------------------------------
p-home-movie
------------------------------- */
.p-home-movie {
  position: relative;
  padding-block: 6.25rem max(214 / var(--cqi), 214px);
  overflow-x: clip;
}
@media screen and (max-width: 767px) {
  .p-home-movie {
    padding-block: 4.5rem max(80 / var(--cqi), 80px);
  }
}

.p-home-movie__inner {
  --inner: 1596px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-home-movie__inner {
    --padding-sp: 6px;
  }
}

.p-home-movie__title {
  --_container-size: 580;
  position: relative;
  width: min(580 / var(--cqi), 580px);
}
@media screen and (max-width: 767px) {
  .p-home-movie__title {
    --_container-size: 219;
    width: min(219 / var(--cqi), 300px);
    margin-left: 0.875rem;
  }
}

.p-home-movie__title-text {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

.js-home-movie-title .p-home-movie__title-text {
  opacity: 0;
}

.p-home-movie__title-text img {
  width: 100%;
  aspect-ratio: 580/201;
  object-fit: contain;
}

.p-home-movie__title-stars {
  --_easing: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  position: absolute;
  top: 0;
  right: 0;
  width: calc(186 / var(--_container-size) * 100%);
  translate: 64.5161290323% -35.4961832061%;
}
@media screen and (max-width: 767px) {
  .p-home-movie__title-stars {
    width: calc(85 / var(--_container-size) * 100%);
    translate: 63.5294117647% -55.2380952381%;
  }
}

.js-home-movie-title .p-home-movie__title-stars {
  opacity: 0;
}

.p-home-movie__title-stars svg {
  width: 100%;
  height: auto;
  aspect-ratio: 186/262;
  object-fit: contain;
}

.p-home-movie__trigger-wrap {
  width: calc(100% - 1.25rem);
  margin-inline: auto;
  margin-top: 3.75rem;
}
@media screen and (max-width: 767px) {
  .p-home-movie__trigger-wrap {
    width: 100%;
    margin-top: 2.125rem;
  }
}

.p-home-movie__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.5rem;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .p-home-movie__trigger {
    padding: 0.375rem;
  }
}

.p-home-movie__trigger::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-image: url("../images/portfolio/frame_movie.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
@media screen and (max-width: 767px) {
  .p-home-movie__trigger::before {
    background-image: url("../images/portfolio/frame_movie-sp.svg");
  }
}

.p-home-movie__trigger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(13.125rem, 18%);
  aspect-ratio: 210/230;
  pointer-events: none;
  content: "";
  background-image: url("../../kazeshiro/assets/images/kazeshiro/intro/movie-play-btn.avif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease-out;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-home-movie__trigger::after {
    width: 21.6417910448%;
  }
}

@media (any-hover: hover) {
  .p-home-movie__trigger:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
  }
}
.p-home-movie__thumbnail {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-line-blue);
  border-radius: 999em;
}

.p-home-movie__thumbnail::after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
}

.p-home-movie__thumbnail img {
  position: relative;
  width: 100%;
  aspect-ratio: 1560/720;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-home-movie__thumbnail img {
    aspect-ratio: 390/243;
  }
}

.p-home-movie__separator {
  margin-inline: auto;
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-home-movie__separator {
    margin-top: 2rem;
  }
}

.p-home-movie__stars {
  position: absolute;
  top: 3.125rem;
  left: calc(50% + min(300 / var(--cqi), 300px));
}
@media screen and (max-width: 767px) {
  .p-home-movie__stars {
    top: 5.5rem;
    right: -2.875rem;
    left: initial;
  }
}

.p-home-movie__stars .js-home-movie-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-home-movie__star-lg {
  display: block;
  width: calc(600 / var(--cqi));
}
@media screen and (max-width: 767px) {
  .p-home-movie__star-lg {
    width: min(233 / var(--cqi), 300px);
  }
}

.p-home-movie__star-lg img {
  width: 100%;
  aspect-ratio: 600/426;
  object-fit: contain;
}

.p-home-movie__star-sm {
  position: absolute;
  top: -4.25rem;
  right: 4.25rem;
  display: block;
  width: calc(138 / var(--cqi));
}
@media screen and (max-width: 767px) {
  .p-home-movie__star-sm {
    top: -1.625rem;
    right: 1.625rem;
    width: min(53 / var(--cqi), 70px);
  }
}

.p-home-movie__star-sm img {
  width: 100%;
  aspect-ratio: 138/194;
  object-fit: contain;
}

@keyframes twinkle-lg {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.28;
    scale: 0.82;
  }
}
@keyframes twinkle-sm {
  0%, 100% {
    opacity: 0.35;
    scale: 0.82;
  }
  50% {
    opacity: 1;
    scale: 1;
  }
}
/*! ----------------------------------------
 * MV
 * ---------------------------------------- */
.p-home-mv {
  position: relative;
  padding-inline: max(var(--padding-pc), 2.375rem);
}
@media screen and (max-width: 767px) {
  .p-home-mv {
    padding-inline: initial;
  }
}

.p-home-mv__inner {
  --_container-size: 1844;
  /* column */
  --_outer: calc(64 / var(--_container-size) * 100%);
  --_logo: minmax(0, 1fr);
  display: grid;
  grid-template-columns: var(--_outer) var(--_logo) var(--_outer);
  container-type: inline-size;
}
@media screen and (max-width: 767px) {
  .p-home-mv__inner {
    --_container-size: 414;
    /* column */
    --_outer: var(--padding-sp);
  }
}

.p-home-mv__img {
  position: relative;
  grid-row: 1/-1;
  grid-column: 1/-1;
}
@media screen and (max-width: 767px) {
  .p-home-mv__img {
    border-block: 1px solid var(--color-main);
  }
}

.p-home-mv__img.js-mv-image {
  filter: blur(15px);
  opacity: 0;
}

.p-home-mv__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1844/1338;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .p-home-mv__img img {
    aspect-ratio: 414/480;
    object-fit: cover;
    object-position: center top;
  }
}

.p-home-mv__logo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-row: 1/-1;
  grid-column: 2/3;
  gap: 0.75rem;
  place-self: end center;
  padding-bottom: calc(64 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-home-mv__logo {
    place-items: center;
    padding-bottom: initial;
    translate: 0 47%;
  }
}

.p-home-mv__logo-img {
  width: calc(947 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-home-mv__logo-img {
    width: min(374 / var(--cqi), 37.5rem);
  }
}

.p-home-mv__logo-img.js-mv-logo-image {
  filter: blur(5px);
  opacity: 0;
}

.p-home-mv__logo-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 947/298;
  object-fit: contain;
}

.p-home-mv__logo-title {
  display: inline-flex;
  gap: 0.75em;
  align-items: center;
  justify-content: center;
  font-size: calc(16 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-home-mv__logo-title {
    gap: 0.75rem;
    font-size: 0.875rem;
  }
}

.p-home-mv__logo-title.js-mv-title {
  filter: blur(5px);
  opacity: 0;
  transform: translateY(1rem);
}

.p-home-mv__logo-title::before,
.p-home-mv__logo-title::after {
  width: 7.75em;
  aspect-ratio: 124/6;
  content: "";
  background-image: url("../images/portfolio/line_diamond.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-home-mv__logo-title::before,
  .p-home-mv__logo-title::after {
    width: 3.7142857143em;
    aspect-ratio: 52/6;
    background-image: url("../images/portfolio/line_diamond-sp.svg");
  }
}

.p-home-mv__logo-title::after {
  scale: -1;
}

.p-home-mv__logo-title span {
  font-weight: var(--fw-medium);
  color: var(--color-main);
  letter-spacing: 0.16em;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-home-mv__logo-title span {
    letter-spacing: 0.16em;
  }
}

.p-home-mv__site-label {
  position: relative;
  z-index: 1;
  grid-row: 1/-1;
  grid-column: 3/-1;
  place-self: center;
  padding-bottom: calc(314 / var(--_container-size) * 100cqi);
  font-family: var(--en-font);
  font-size: 1rem;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}
@media screen and (max-width: 767px) {
  .p-home-mv__site-label {
    display: none;
  }
}

.p-home-mv__site-label.js-mv-site-label {
  opacity: 0;
}

.p-home-mv__scroll {
  position: relative;
  z-index: 1;
  grid-row: 1/-1;
  grid-column: 1/2;
  place-self: center;
  padding-bottom: calc(324 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-home-mv__scroll {
    display: none;
  }
}

.p-home-mv__scroll.js-mv-scroll {
  opacity: 0;
}

/* !-------------------------------
p-home-product
------------------------------- */
.p-home-product {
  position: relative;
  min-height: 65rem;
  padding-block: 10rem;
  overflow: hidden;
  color: var(--color-text);
  background-image: url("../images/portfolio/bg_kazeshiro_front.avif"), url("../images/portfolio/bg_kazeshiro_back.avif"), url("../images/portfolio/bg_base.avif");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center, center, center;
  background-size: cover, cover, 30rem auto;
}

.p-home-product::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: url("../images/portfolio/bg_lace.avif");
  background-position: center;
  background-size: cover;
  opacity: 0.28;
}

.p-home-product__inner {
  position: relative;
  z-index: 1;
  width: min(75rem, 100% - 3rem);
  min-height: 45rem;
  margin-inline: auto;
}

.p-home-product__badge {
  position: absolute;
  inset-block-start: 7rem;
  inset-inline-start: 0;
  z-index: 3;
  font-family: var(--en-font);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1;
  color: var(--color-main);
  letter-spacing: 0.08em;
}

.p-home-product__visual {
  position: absolute;
  inset-block-start: -7.5rem;
  inset-inline-start: 25.3125rem;
  z-index: 1;
  width: 82.4375rem;
  max-width: none;
  height: auto;
}

.p-home-product__text-image {
  position: absolute;
  inset-block-start: 6.25rem;
  inset-inline-start: -22.5rem;
  width: 18.625rem;
}

.p-home-product__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4rem;
  width: 34.1875rem;
  padding-block-start: 9.875rem;
  padding-inline-start: 2rem;
}

.p-home-product__heading {
  display: grid;
  gap: 1rem;
}

.p-home-product__label {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-home-product__title {
  font-size: 3rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-home-product__details {
  display: grid;
  gap: 1.5rem;
}

.p-home-product__detail {
  display: grid;
  grid-template-columns: 8.75rem 0.625rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1;
}

.p-home-product__detail::before {
  grid-row: 1;
  grid-column: 2;
  width: 0.625rem;
  aspect-ratio: 10/12;
  content: "";
  background-color: currentcolor;
  mask: url("../images/portfolio/icon_snowflake.svg") center/contain no-repeat;
}

.p-home-product__detail dt {
  grid-column: 1;
}

.p-home-product__detail dd {
  grid-column: 3;
}

@media screen and (max-width: 1023px) {
  .p-home-product__visual {
    inset-inline-start: 18.75rem;
  }
}
@media screen and (max-width: 767px) {
  .p-home-product {
    padding-block: 6rem;
  }
  .p-home-product__inner {
    display: grid;
    gap: 2rem;
    width: min(37.5rem, 100% - 2.25rem);
    min-height: 0;
  }
  .p-home-product__badge,
  .p-home-product__visual,
  .p-home-product__text-image {
    position: static;
  }
  .p-home-product__visual {
    width: 100%;
    max-width: 100%;
  }
  .p-home-product__title {
    font-size: 2.125rem;
  }
  .p-home-product__content {
    width: auto;
    padding: 0;
  }
  .p-home-product__detail {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .p-home-product__detail::before {
    display: none;
  }
}
/* !-------------------------------
p-home-profile
------------------------------- */
.p-home-profile {
  position: relative;
  padding-block: 10rem 7rem;
}

.p-home-profile__inner {
  width: min(75rem, 100% - 3rem);
  margin-inline: auto;
}

.p-home-profile__separator {
  display: block;
  width: 14.6875rem;
  margin-block: 5rem;
  margin-inline: auto;
}

.p-home-profile__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.p-home-profile__card {
  min-height: 26.75rem;
  padding: 1.5rem;
  background-image: url("../images/portfolio/bg_paw.avif");
  background-repeat: repeat;
  background-position: center;
  background-size: 10rem auto;
  border: 1px solid var(--color-main);
}

.p-home-profile__card-inner {
  display: grid;
  gap: 1.75rem;
  justify-items: center;
  min-height: 23.75rem;
  padding-block: 2rem;
  text-align: center;
  border: 1px solid var(--color-main);
}

.p-home-profile__card-heading {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.p-home-profile__card-kicker {
  font-family: var(--en-font);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-home-profile__card-title {
  font-family: var(--en-font);
  font-size: 4rem;
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 0.8;
  letter-spacing: 0.02em;
}

.p-home-profile__card-label {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-home-profile__card-label::before,
.p-home-profile__card-label::after {
  width: 0.8125rem;
  aspect-ratio: 1;
  content: "";
  background-color: currentcolor;
  mask: url("../images/portfolio/icon_paw.svg") center/contain no-repeat;
}

.p-home-profile__card-text {
  width: 25.375rem;
  max-width: calc(100% - 2.5rem);
  padding-block-start: 1.75rem;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.08em;
  border-block-start: 1px solid var(--color-main);
}

@media screen and (max-width: 767px) {
  .p-home-profile {
    padding-block: 5rem;
  }
  .p-home-profile__inner {
    width: min(37.5rem, 100% - 2.25rem);
  }
  .p-home-profile__cards {
    grid-template-columns: 1fr;
  }
  .p-home-profile__card-title {
    font-size: 3rem;
  }
}
.p-home-work {
  position: relative;
  min-height: 64rem;
  padding-block: 7.5rem;
  overflow: hidden;
  color: var(--color-off-white);
  background-image: linear-gradient(-86deg, rgb(156, 0, 127) 0%, rgb(0, 80, 192) 100%), url("../images/portfolio/bg_hoshishiro.avif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.p-home-work::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: url("../images/portfolio/bg_hoshishiro.avif");
  background-position: center;
  background-size: cover;
  mix-blend-mode: hard-light;
  opacity: 0.55;
}

.p-home-work__text-image {
  position: absolute;
  inset-block-start: 3.75rem;
  inset-inline-end: 3.25rem;
  z-index: 1;
  width: 10.125rem;
  opacity: 0.9;
}

.p-home-work__inner {
  position: relative;
  z-index: 2;
  width: min(120rem, 100%);
  min-height: 50.1875rem;
  margin-inline: auto;
}

.p-home-work__visual {
  position: absolute;
  inset-block-start: 3rem;
  inset-inline-start: -0.25rem;
  width: 71.3125rem;
}

.p-home-work__visual img {
  width: 100%;
  height: auto;
}

.p-home-work__content {
  position: absolute;
  inset-block-start: 10rem;
  inset-inline-start: 50%;
  display: grid;
  width: 41.5rem;
  min-height: 37.4375rem;
  background-color: rgba(50, 43, 112, 0.72);
}

.p-home-work__content-inner {
  display: grid;
  gap: 4rem;
  padding: 4rem 4rem 4rem 6rem;
}

.p-home-work__heading {
  display: grid;
  gap: 1rem;
}

.p-home-work__label {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-home-work__title {
  font-size: 3rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-home-work__details {
  display: grid;
  gap: 1.5rem;
}

.p-home-work__detail {
  display: grid;
  grid-template-columns: 8.75rem 0.625rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1;
}

.p-home-work__detail::before {
  grid-row: 1;
  grid-column: 2;
  width: 0.625rem;
  aspect-ratio: 1;
  content: "";
  background-color: currentcolor;
  mask: url("../images/portfolio/icon_snowflake.svg") center/contain no-repeat;
}

.p-home-work__detail dt {
  grid-column: 1;
}

.p-home-work__detail dd {
  grid-column: 3;
}

.p-home-work__buttons {
  display: grid;
  gap: 2rem;
}

@media screen and (max-width: 1023px) {
  .p-home-work__inner {
    display: grid;
    gap: 2rem;
    width: min(56.25rem, 100% - 3rem);
  }
  .p-home-work__visual,
  .p-home-work__content {
    position: relative;
    inset: auto;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-home-work {
    padding-block: 5rem;
  }
  .p-home-work__inner {
    width: min(37.5rem, 100% - 2.25rem);
  }
  .p-home-work__content-inner {
    gap: 2rem;
    padding: 2rem;
  }
  .p-home-work__title {
    font-size: 2.125rem;
  }
  .p-home-work__detail {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .p-home-work__detail::before {
    display: none;
  }
}
/* !-------------------------------
p-home
------------------------------- */
.p-home {
  position: relative;
  z-index: 0;
  padding-top: 2.375rem;
  background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .p-home {
    padding-top: 0;
  }
}

.p-home::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url("../images/portfolio/bg_base.avif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.p-home__bg {
  position: relative;
  z-index: 1;
  background-image: url("../images/portfolio/bg_mv.avif");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .p-home__bg {
    background-image: url("../images/portfolio/bg_mv-sp.avif");
  }
}

.p-home-line-bg {
  position: relative;
}

.p-home-line-bg::before {
  position: absolute;
  inset: -18.75rem 0 6vw;
  content: "";
  background-image: url("../images/portfolio/bg_line.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .p-home-line-bg::before {
    content: none;
  }
}

/* !-------------------------------
p-lower-kv
------------------------------- */
.p-lower-kv {
  --_side: min(96 / var(--cqi), 96px);
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--_side) minmax(0, 1fr) var(--_side);
  place-items: start center;
  animation: kv-fade 1s ease-out forwards;
  filter: blur(8px);
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .p-lower-kv {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-lower-kv__img {
  grid-row: 1/-1;
  grid-column: 1/-1;
}

.p-lower-kv__img img {
  width: 100%;
  aspect-ratio: 1920/1357;
  object-fit: cover;
}

.p-lower-kv__scroll {
  grid-row: 1/-1;
  grid-column: 1/2;
  margin-top: calc(274 / var(--cqi));
}
@media screen and (max-width: 767px) {
  .p-lower-kv__scroll {
    display: none;
  }
}

@keyframes kv-fade {
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
/* !-------------------------------
p-lower
------------------------------- */
.p-lower-bg {
  position: relative;
  z-index: 1;
  display: grid;
  padding-block: 6rem 20rem;
  background-image: url("../images/portfolio/bg_page.avif");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .p-lower-bg {
    padding-block: 4rem 6.25rem;
    background-image: url("../images/portfolio/bg_page-sp.avif");
  }
}

.p-lower__separator {
  display: block;
  width: 14.6875rem;
  margin-block: 5rem;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-lower__separator {
    margin-block: 3.5rem;
  }
}
/* !-------------------------------
p-product-card
------------------------------- */
.p-product-card {
  --_title-bg: var(--color-navy);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  justify-items: center;
}

.p-product-card[data-color=blue] {
  --_title-bg: #417bc4;
}

.p-product-card__header {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}
@media screen and (max-width: 767px) {
  .p-product-card__header {
    gap: 1rem;
  }
}

.p-product-card__title {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  background-color: var(--_title-bg);
  text-box: trim-both cap alphabetic;
}

.p-product-card__title:nth-child(1) span {
  letter-spacing: 0.16em;
}

.p-product-card__role {
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
  text-box: trim-both cap alphabetic;
}

.p-product-card__thumbnail {
  position: relative;
  margin-top: 2rem;
}

.p-product-card__thumbnail::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  border: 1rem solid rgba(255, 255, 255, 0.2);
}

.p-product-card__thumbnail::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background-image: url("../images/portfolio/frame_product.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
@media screen and (max-width: 767px) {
  .p-product-card__thumbnail::after {
    background-image: url("../images/portfolio/frame_product-sp.svg");
  }
}

.p-product-card__thumbnail img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.p-product-card__buttons {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  width: min(25.1875rem, 100%);
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-product-card__buttons {
    grid-template-columns: minmax(0, min(95.8904109589%, 400px));
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
  }
}

/* !-------------------------------
p-product-info
------------------------------- */
.p-product-info {
  --_container-size: 536;
  --_color: var(--color-text);
  --_label-color: var(--color-light-blue);
  --_title-color: var(--color-blue);
  --_icon-color: #ced8ee;
  display: grid;
  align-content: start;
}
@media screen and (max-width: 767px) {
  .p-product-info {
    --_container-size: 350;
  }
}

.p-product-info__heading {
  display: grid;
  gap: calc(16 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-product-info__heading {
    gap: 1rem;
  }
}

.p-product-info__label {
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--_label-color);
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-product-info__label {
    font-size: 0.625rem;
  }
}

.p-product-info__title {
  font-size: min(48 / var(--_container-size) * 100cqi, 56px);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--_title-color);
  letter-spacing: 0.015em;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-product-info__title {
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
}

.p-product-info__details {
  display: grid;
  grid-template-areas: "term icon value";
  grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr);
  gap: calc(24 / var(--_container-size) * 100cqi);
  align-items: center;
  margin-top: calc(40 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-product-info__details {
    row-gap: 1rem;
    margin-top: 2rem;
  }
}

.p-product-info__detail {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  font-size: clamp(10px, 14 / var(--_container-size) * 100cqi, 16px);
  font-weight: var(--fw-medium);
  color: var(--_color);
}
@media screen and (max-width: 767px) {
  .p-product-info__detail {
    font-size: 0.875rem;
  }
}

.p-product-info__detail::before {
  grid-area: icon;
  width: 0.7142857143em;
  aspect-ratio: 10/12;
  content: "";
  background-color: var(--_icon-color);
  mask-image: url("../images/portfolio/icon_snowflake.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.p-product-info__detail-term {
  grid-area: term;
  text-box: trim-both cap alphabetic;
}

.p-product-info__detail-value {
  grid-area: value;
  text-box: trim-both cap alphabetic;
}

.p-product-info__buttons {
  display: grid;
  gap: 2rem;
  max-width: 515px;
  margin-top: calc(64 / var(--_container-size) * 100cqi);
}
@media screen and (max-width: 767px) {
  .p-product-info__buttons {
    margin-top: 2rem;
  }
}

@scope (.p-home-kazeshiro) {
  @media (max-width: 450px) {
    .p-product-info__title {
      font-size: 1.71875rem;
    }
  }
}
@scope (.p-home-hoshishiro) {
  .p-product-info {
    --_color: var(--color-off-white);
    --_label-color: var(--_color);
    --_title-color: var(--_color);
    --_icon-color: var(--_color);
    padding-left: 5.9701492537%;
    border-left: 1px solid var(--color-off-white);
  }
  @media screen and (max-width: 767px) {
    .p-product-info {
      padding-left: 0;
      border-left: 0;
    }
  }
  .p-product-info__detail::before {
    aspect-ratio: 1;
    mask-image: url("../images/portfolio/icon_star.svg");
  }
}
/* !-------------------------------
p-profile-main
------------------------------- */
.p-profile-main {
  display: grid;
  grid-template-columns: minmax(0, 550fr) minmax(0, 622fr);
  gap: 1.75rem;
  place-items: center start;
  overflow: clip;
}
@media screen and (max-width: 767px) {
  .p-profile-main {
    grid-template-columns: minmax(0, 1fr);
    gap: initial;
  }
}

.p-profile-main.js-profile-main > * {
  opacity: 0;
  transform: translateY(1.25rem);
}

.p-profile-main__images {
  display: grid;
  grid-template: "images";
  place-items: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-profile-main__images {
    grid-row-start: 2;
    margin-top: 1.5rem;
  }
}

.p-profile-main__visual {
  position: relative;
  grid-area: images;
  padding: 13.6363636364%;
}
@media screen and (max-width: 767px) {
  .p-profile-main__visual {
    width: 100%;
    padding: 13.6612021858%;
  }
}

.p-profile-main__visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: url("../images/portfolio/bg_lace.avif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: lace-rotate 60s linear infinite;
}

.p-profile-main__visual img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.p-profile-main__sd {
  position: relative;
  grid-area: images;
  place-self: end;
  width: 34.3636363636%;
}
@media screen and (max-width: 767px) {
  .p-profile-main__sd {
    width: 37.1584699454%;
  }
}

.p-profile-main__sd:hover,
.p-profile-main__sd:active,
.p-profile-main__sd:focus-visible {
  animation: poyon 0.9s cubic-bezier(0.3, 0.09, 0.39, 1.02) 1;
}

.p-profile-main__sd.is-poyon {
  animation: poyon-replay 0.9s cubic-bezier(0.3, 0.09, 0.39, 1.02) 1;
}

.p-profile-main__sd img {
  width: 100%;
  aspect-ratio: 189/247;
  object-fit: contain;
}

.p-profile-main__content {
  --_container-size: 622;
  width: 100%;
  container-type: inline-size;
}
@media screen and (max-width: 767px) {
  .p-profile-main__content {
    --_container-size: 366;
    display: contents;
  }
}

.p-profile-main__header {
  display: grid;
  gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-profile-main__header {
    gap: 1rem;
  }
}

.p-profile-main__heading {
  display: grid;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .p-profile-main__heading {
    gap: 0.5rem;
  }
}

.p-profile-main__label {
  font-size: max(10px, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-profile-main__label {
    font-size: 0.625rem;
  }
}

.p-profile-main__name {
  font-size: min(64 / var(--_container-size) * 100cqi, 64px);
  font-weight: var(--fw-regular);
  line-height: 1;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-profile-main__name {
    font-size: 2rem;
  }
}

.p-profile-main__name span {
  letter-spacing: 0.08em;
}

.p-profile-main__roles {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
@media screen and (max-width: 767px) {
  .p-profile-main__roles {
    gap: 0.5rem;
  }
}

.p-profile-main__role {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 4px;
  font-size: min(32 / var(--_container-size) * 100cqi, 32px);
  line-height: 1;
  color: var(--color-off-white);
  background-color: var(--color-sub);
  border-radius: 0.25rem;
}
@media screen and (max-width: 767px) {
  .p-profile-main__role {
    gap: 4px;
    padding: 2px;
    font-size: 0.875rem;
  }
}

.p-profile-main__role::before {
  width: 0.5em;
  aspect-ratio: 1;
  content: "";
  background-color: currentcolor;
  mask-image: url("../images/portfolio/icon_star.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
@media screen and (max-width: 767px) {
  .p-profile-main__role::before {
    width: 1em;
  }
}

.p-profile-main__role span {
  text-box: trim-both cap alphabetic;
}

.p-profile-main__description {
  margin-top: 3rem;
  font-size: max(14px, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-profile-main__description {
    margin-top: 1.5rem;
    font-size: 0.875rem;
  }
}

.p-profile-main__links {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-profile-main__links {
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
}

.p-profile-main__links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 31.25rem;
}

.p-profile-main__link-item {
  line-height: 1;
}

.p-profile-main__link {
  display: inline-flex;
  padding: 0.4375rem 1.9375rem;
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-text);
  border-radius: 999em;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.p-profile-main__link span {
  font-size: max(14px, 1rem);
  line-height: 1;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767px) {
  .p-profile-main__link span {
    font-size: 0.75rem;
  }
}

@media (any-hover: hover) {
  .p-profile-main__link:hover {
    color: var(--color-off-white);
    background-color: var(--color-main);
  }
}
.p-profile-main__button {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-profile-main__button {
    width: 100%;
    margin-top: 3.5rem;
    text-align: center;
  }
}

@keyframes lace-rotate {
  100% {
    rotate: 360deg;
  }
}
@keyframes poyon {
  0%, 100% {
    scale: 1;
    translate: 0 0;
  }
  24% {
    scale: 1.03 0.96;
    translate: 0 0.25rem;
  }
  48% {
    scale: 0.98 1.06;
    translate: 0 -1.125rem;
  }
  72% {
    scale: 1.01 1.01;
    translate: 0 0;
  }
}
@keyframes poyon-replay {
  0%, 100% {
    scale: 1;
    translate: 0 0;
  }
  24% {
    scale: 1.03 0.96;
    translate: 0 0.25rem;
  }
  48% {
    scale: 0.98 1.06;
    translate: 0 -1.125rem;
  }
  72% {
    scale: 1.01 1.01;
    translate: 0 0;
  }
}
@scope (.p-profile) {
  .p-profile-main {
    grid-template-columns: minmax(0, 550fr) minmax(0, 618fr);
    gap: 2rem;
  }
  @media screen and (max-width: 767px) {
    .p-profile-main {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.5rem;
    }
  }
  .p-profile-main__name {
    font-size: min(48 / var(--_container-size) * 100cqi, 48px);
  }
  @media screen and (max-width: 767px) {
    .p-profile-main__name {
      font-size: 2rem;
    }
  }
  @media screen and (max-width: 767px) {
    .p-profile-main__images {
      grid-row-start: 3;
      margin-top: initial;
    }
  }
  @media screen and (max-width: 767px) {
    .p-profile-main__description {
      margin-top: initial;
    }
  }
  @media screen and (max-width: 767px) {
    .p-profile-main__links {
      margin-top: initial;
    }
  }
}
/* !-------------------------------
p-profile
------------------------------- */
.p-profile__section-content {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-profile__section-content {
    margin-top: 2.5rem;
  }
}

.p-profile__separator {
  margin-inline: auto;
  margin-top: 5.5rem;
}
@media screen and (max-width: 767px) {
  .p-profile__separator {
    margin-top: 4rem;
  }
}

.p-profile__achievements {
  margin-top: 9.5rem;
}
@media screen and (max-width: 767px) {
  .p-profile__achievements {
    margin-top: 4rem;
  }
}

.p-top {
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--color-off-white);
  background-image: url("../images/portfolio/bg_base.avif");
  background-repeat: repeat;
  background-position: top center;
  background-size: 30rem auto;
}

/* !-------------------------------
p-work-card
------------------------------- */
.p-work-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.5rem;
  place-items: center;
  height: 100%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-work-card {
    gap: 0.875rem;
  }
}

.p-work-card__img {
  padding-inline: 7.8125%;
  filter: drop-shadow(0 0 8px 0 rgba(192, 170, 180, 0.4));
}
@media screen and (max-width: 767px) {
  .p-work-card__img {
    padding-inline: 5.7692307692%;
  }
}

.p-work-card__img img {
  aspect-ratio: 1;
  object-fit: contain;
}

.p-work-card figcaption {
  font-size: max(14px, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 767px) {
  .p-work-card figcaption {
    font-size: 0.875rem;
  }
}

.p-work-card figcaption span {
  display: inline-block;
}

/* !-------------------------------
animation
------------------------------- */
.js-blurFadeIn {
  filter: blur(8px);
  opacity: 0;
}

.js-fadeIns > * {
  opacity: 0;
  transform: translateY(30px);
}

.js-scale-child {
  opacity: 0;
  transform: scale(0.8);
}

/* -------------------------------
u-pc
------------------------------- */
@media screen and (max-width: 767px) {
  .u-pc {
    display: none;
  }
}

/* -------------------------------
u-sp
------------------------------- */
.u-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .u-sp {
    display: block;
  }
}