/*
Theme Name: kai_portfolio
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
	font-family: "Noto Sans JP", sans-serif;
}

body {
	margin: 0;
    padding: 0;
   background: linear-gradient(
        180deg,
        #f8f8f5 0%,
        #f1f1ec 100%
    );
}

@media (hover: hover) and (pointer: fine) {
	html,
	body,
	body *,
	#wpadminbar,
	#wpadminbar * {
		cursor: none !important;
	}

	.custom-cursor,
	.custom-cursor__outline {
		position: fixed;
		top: 0;
		left: 0;
		border-radius: 50%;
		pointer-events: none;
		opacity: 0;
		z-index: 99999;
	}

	.custom-cursor {
		width: 8px;
		height: 8px;
		background: #fff;
		transform: translate(-50%, -50%);
		mix-blend-mode: difference; /* 背景とコントラストを作る */
	}

	.custom-cursor__outline {
		width: 40px;
		height: 40px;
		border: 1px solid #fff;
		transform: translate(-50%, -50%);
		transition:
			width 0.3s ease,
			height 0.3s ease,
			background-color 0.3s ease;
		mix-blend-mode: difference; /* 背景とコントラストを作る */
	}

	.custom-cursor.is-visible,
	.custom-cursor__outline.is-visible {
		opacity: 1;
	}

	.custom-cursor__outline.is-hover {
	width: 84px;
	height: 84px;

	background: #fff;
	border-color: #fff;

	mix-blend-mode: difference;
    }
}

@media (hover: none), (pointer: coarse) {
	.custom-cursor,
	.custom-cursor__outline {
		display: none;
	}
}

h1,
h2,
h3,
.section-title {
  font-family: "Space Grotesk", sans-serif;
}

.header-logo,
.header-nav-link,
.fv__title,
.fv__caption,
.about__name-en,
.about__button,
.works-card__category,
.works-card__tags,
.works__button,
.contact__mail-label,
.contact__mail-address {
	font-family: "Space Grotesk", sans-serif;
}

/* =========================
   header
========================= */
.header {
	position: sticky;
	top: 0;
	z-index: 1000;

	background: rgba(246, 246, 242, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.header.is-scroll .inner {
	padding: 18px 40px;
}

.header-logo {
	margin: 0;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1;

	transition:
		opacity .3s ease,
		transform .3s ease;
}

.header.is-scroll .header-logo {
	opacity: 0;
	transform: translateX(-20px);
	pointer-events: none;
}

.inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 40px;

	display: flex;
	justify-content: space-between;
	align-items: center;

	transition: padding 0.3s ease;
}

.header-nav-list {
	display: flex;
	gap: 48px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.header-nav-link,
.header-nav-link:visited {
	position: relative;

	color: #111;
	text-decoration: none;

	font-size: 18px;
	letter-spacing: 0.02em;

	transition: opacity 0.3s ease;
}

.header-nav-link::after {
	content: "";
	position: absolute;

	left: 0;
	bottom: -6px;

	width: 100%;
	height: 1px;

	background: #111;

	transform: scaleX(0);
	transform-origin: right;

	transition: transform 0.35s ease;
}

.header-nav-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.header-nav-link:hover {
	opacity: 0.65;
}

.fv {
  padding: 50px 20px 140px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.fv__visual {
  position: relative;
  width: min(100%, 1200px);
  height: 560px;
}

/* =========================
   画像
========================= */

.fv__image-wrap {
	position: absolute;
	z-index: 2;

	top: 50%;
	left: 49.5%;
	transform: translate(-50%, -50%);

	width: min(38vw, 460px);
	aspect-ratio: 4 / 5;
}

/* 1本目の線 */
.fv__image-wrap::before {
	content: "";
	position: absolute;
	z-index: 3;
	pointer-events: none;

	top: -5px;
	right: -12px;
	bottom: -5px;
	left: -12px;

	border: 1px solid #999;
	border-radius: 48% 52% 46% 54% / 54% 46% 56% 44%;

	animation: fv-border-morph 9s ease-in-out infinite;
}

/* 2本目の線 */
.fv__image-wrap::after {
	content: "";
	position: absolute;
	z-index: 3;
	pointer-events: none;

	top: -13px;
	right: 30px;
	bottom: -13px;
	left: -4px;

	border: 1px solid #999;
	border-radius: 52% 48% 55% 10% / 47% 53% 44% 5%;

	animation: fv-border-morph-second 12s ease-in-out infinite;
}

.fv__image {
	width: 100%;
	height: 100%;
	overflow: hidden;

	border-radius: 48% 50% 46% 54% / 54% 46% 56% 44%;
	animation: fv-image-morph 10s ease-in-out infinite;
}

.fv__image img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

/* =========================
   大きい文字
========================= */

.fv__title {
	position: absolute;
	z-index: 4;

	margin: 0;

	font-size: clamp(50px, 9vw, 100px);
	font-weight: 700;
	line-height: 0.68;
	letter-spacing: -0.009em;
	white-space: nowrap;

	pointer-events: none;
}

.fv__title--left {
	top: 34%;
	left: 13%;
}

.fv__title--right {
	top: 48%;
	right: 25%;
}

.fv__title-black {
	color: #111;
}

.fv__title-accent {
	color: #d8ff00;
}

.fv__port {
  display: inline-block;
  transform: translateX(55px);
}

.fv__fo {
  display: inline-block;
  transform: translateX(-60px) translateY(-13px);
}

.fv__lio {
  display: inline-block;
  transform: translateX(-1px);
}

/* =========================
   右上の小さい文字
========================= */

.fv__caption {
	position: absolute;
	z-index: 5;

	top: 7%;
	right: 10%;

	margin: 0;

	font-size: 13px;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-align: center;
	color: #111;
}

/* =========================
   形が変わるアニメーション
========================= */

@keyframes fv-image-morph {
	0%,
	100% {
		border-radius: 48% 52% 46% 54% / 54% 46% 56% 44%;
	}

	25% {
		border-radius: 53% 47% 51% 49% / 47% 55% 45% 53%;
	}

	50% {
		border-radius: 45% 55% 48% 52% / 56% 44% 54% 46%;
	}

	75% {
		border-radius: 52% 48% 55% 45% / 45% 56% 44% 55%;
	}
}

@keyframes fv-border-morph {
	0%,
	100% {
		border-radius: 52% 48% 55% 45% / 47% 53% 44% 56%;
	}

	25% {
		border-radius: 46% 54% 48% 52% / 55% 45% 57% 43%;
	}

	50% {
		border-radius: 55% 45% 51% 49% / 44% 56% 48% 52%;
	}

	75% {
		border-radius: 49% 51% 44% 56% / 56% 44% 54% 46%;
	}
}

@keyframes fv-border-morph-second {
	0%,
	100% {
		border-radius: 46% 54% 52% 48% / 56% 44% 51% 49%;
	}

	25% {
		border-radius: 55% 45% 47% 53% / 45% 55% 43% 57%;
	}

	50% {
		border-radius: 49% 51% 56% 44% / 53% 47% 56% 44%;
	}

	75% {
		border-radius: 53% 47% 45% 55% / 44% 56% 49% 51%;
	}
}

/* =========================
   About
========================= */

.about,
.works,
.contact {
	overflow-x: clip;
}

.about{
    position: relative;
	padding: 140px 20px 140px;
    background:#171717;
}

.about__heading {
	grid-column: 1 / -1;
}

.about::before{
    content:"";
    position:absolute;

    top:-40px;
    left:-5%;
    width:110%;
    height:180px;

    background:linear-gradient(
        to bottom,
        #f6f6f2 0%,
		#2a2a2a 10%,
		#171717 20%,
		#171717 40%,
		#171717 100%
    );

    filter:blur(18px);
    pointer-events:none;
}

.about__inner {
	width: min(100%, 1200px);
	margin-inline: auto;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 70px 100px;
}

.about__title {
	margin: 0;

	font-size: clamp(56px, 8vw, 110px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #fff;
}

.about__subtitle {
	display: flex;
	align-items: center;
	gap: 16px;
	color: #fff;

	margin-top: 24px;
	margin-left: 24%;
}

.about__subtitle-line {
	width: 42px;
	height: 1px;
	background: #fff;
}

.about__subtitle span:last-child {
	font-size: 16px;
	letter-spacing: 0.08em;
}

.about__image {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	grid-column: 1;
}

.about__image img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
	filter: brightness(.9);
	transition:
		transform .8s ease,
		filter .8s ease;
}

.about__image:hover img {
	transform: scale(1.04);
	filter:brightness(1.05);
}

.about__content {
	max-width: 540px;
	grid-column: 2;
}

.about__name-en {
	margin: 0 0 4px;

	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #fff;
}

.about__name {
	margin: 0;

	font-size: clamp(30px, 3vw, 46px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.06em;
	color: #fff;
}

.about__line {
	width: 100%;
	height: 1px;

	margin: 24px 0;
	background: #fff;
}

.about__lead,
.about__text {
	margin: 0;

	font-size: 15px;
	line-height: 2;
	color: #fff;
}

.about__lead {
	margin-bottom: 16px;
	font-weight: 500;
}

.about__text + .about__text {
	margin-top: 12px;
}

.about__button {
	display: inline-flex;
	align-items: center;
	gap: 20px;

	padding: 12px 22px;

	border-radius: 999px;
	background: #fff;
	color: #171717;
	text-decoration: none;

	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;

	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

.about__button:hover {
	background: #d8ff00;
	color: #171717;
	transform: translateY(-2px);
}

.about__button-arrow {
	transition: transform 0.3s ease;
}

.about__button:hover .about__button-arrow {
	transform: translateX(8px);
}

/* =========================
   Works
========================= */

.works {
	position: relative;
	padding: 50px 20px 140px;
	overflow-x: clip;
}

.works::before {
	content: "";
	position: absolute;

	top: -40px;
	left: -5%;
	width: 110%;
	height: 180px;

	background:
	linear-gradient(
            to bottom,
            #171717 0%,
            #5a5a58 10%,
            #f6f6f2 20%,
			#f6f6f2 40%,
            #f6f6f2 100%
	);

	filter: blur(18px);
	pointer-events: none;
}

.works__inner {
	position: relative;
	z-index: 1;
}

.works__inner {
	width: min(100%, 1200px);
	margin-inline: auto;
}

.works__heading {
	margin-bottom: 110px;
}

.works__title {
	margin: 0;

	font-size: clamp(56px, 8vw, 110px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #222;
}

.works__subtitle {
	display: flex;
	align-items: center;
	gap: 16px;

	margin-top: 24px;
	margin-left: 24%;
}

.works__subtitle-line {
	width: 42px;
	height: 1px;
	background: #222;
}

.works__subtitle span:last-child {
	font-size: 16px;
	letter-spacing: 0.08em;
}

/* =========================
   Grid
========================= */

.works__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(70px, 9vw, 150px);
	row-gap: 120px;
	align-items: start;
}

.works-card{
    transition:.4s;
}

.works-card:hover{
    transform:translateY(-10px);
}

.works-card--lower {
	margin-top: 180px;
}

.works-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.works-card__image {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #ddd;
}

.works-card__image img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	transition: transform 0.7s ease;
}

.works-card__link:hover .works-card__image img {
	transform: scale(1.04);
}

.works-card__body {
	padding-top: 16px;
}

.works-card__category {
	display: inline-block;

	padding: 2px 10px;
	background: #222;
	color: #fff;

	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.works-card__title {
	margin: 10px 0 0;

	font-size: clamp(22px, 2.1vw, 32px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.works-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;

	margin: 8px 0 0;

	font-size: 15px;
	color: #777;
}

/* =========================
   Works-Button
========================= */

.works__button-wrap {
	margin-top: 140px;
	text-align: center;
}

.works__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 20px; /* Aboutに合わせるなら20px */

	padding: 16px 32px;

	border: 1px solid #222;
	border-radius: 999px; /* ←追加 */
	background: #222;
	color: #fff;
	text-decoration: none;

	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;

	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

.works__button:hover {
	background: #d8ff00;
	color: #171717;
	transform: translateY(-2px);
}

.works__button-arrow {
	transition: transform 0.3s ease;
}

.works__button:hover .works__button-arrow {
	transform: translateX(8px);
}

/* =========================
   Contact
========================= */

.contact{
    position:relative;
	padding: 140px 20px 140px;
    background:#171717;
}

.contact::before{
    content:"";
    position:absolute;

    top:-40px;
    left:-5%;
    width:110%;
    height:180px;

    background:linear-gradient(
        to bottom,
        #f6f6f2 0%,
		#2a2a2a 10%,
		#171717 20%,
		#171717 40%,
		#171717 100%
    );

    filter:blur(18px);
    pointer-events:none;
}

.contact__inner {
	width: min(calc(100% - 80px), 1200px);
	margin-inline: auto;
}

.contact__heading {
	margin-bottom: 48px;
}

.contact__title {
	margin: 0;

	font-size: clamp(56px, 8vw, 110px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #fff;
}

.contact__line {
	display: block;

	width: 28px;
	height: 1px;

	margin-top: 18px;
	background: #fff;
}

.contact__body {
	max-width: 580px;
}

.contact__text {
	margin: 0 0 24px;

	font-size: 14px;
	line-height: 2;
	color: rgba(255,255,255,.7);
}

.contact__mail {
	display: inline-flex;
	align-items: center;
	gap: 14px;

	color: #fff;
	text-decoration: none;
}

.contact__mail-label {
	display: inline-grid;
	place-items: center;

	min-width: 42px;
	padding: 5px 8px;

	background: #fff;
	color: #171717;

	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
}

.contact__mail-address {
	position: relative;

	font-size: 14px;
	letter-spacing: 0.03em;
}

.contact__mail-address::after {
	content: "";
	position: absolute;

	left: 0;
	bottom: -4px;

	width: 100%;
	height: 1px;
	background: currentColor;

	transform: scaleX(1);
	transform-origin: right;
	transition: transform 0.35s ease;
}

.contact__mail:hover .contact__mail-address::after {
	transform: scaleX(0);
}

/* =========================
   Footer
========================= */

.footer {
	padding: 10px 20px;
	background: #222;
	color: #fff;
}

.footer__inner {
	width: min(100%, 1200px);
	margin-inline: auto;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;

	font-size: 10px;
}

.footer__privacy {
	color: inherit;
	text-decoration: none;
}

.footer__privacy:hover {
	text-decoration: underline;
}

.footer__copyright {
	margin: 0;
}

/* =========================
   Page Top
========================= */

.page-top {
	position: fixed;
	right: 30px;
	bottom: 30px;

	width: 58px;
	height: 58px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	background: #222;
	color: #fff;

	text-decoration: none;
	font-size: 13px;
	font-weight: 600;

	box-shadow: 0 8px 20px rgba(0,0,0,.18);

	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);

	transition:
		background-color .3s,
		color .3s,
		transform .3s,
		opacity .3s,
		visibility .3s;

	z-index: 999;
}

.page-top.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.page-top:hover {
	background: #d8ff00;
	color: #171717;
	transform: translateY(-4px);
}

/* =========================
   About Page
========================= */

.about-page {
	background: #f6f6f2;
	color: #171717;
}

.about-page__inner {
	width: min(100% - 40px, 1200px);
	margin-inline: auto;
}

.about-page__title,
.about-page__section-title {
	margin: 0;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	line-height: 0.9;
	text-transform: uppercase;
}

.about-page__title {
	font-size: clamp(72px, 11vw, 160px);
}

.about-page__section-title {
	font-size: clamp(58px, 8vw, 112px);
}

.about-page__section-heading {
	position: relative;
	margin-bottom: 90px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(23, 23, 23, 0.35);
}

.about-page__line {
	width: 100%;
	height: 1px;
	margin: 24px 0;
	background: rgba(23, 23, 23, 0.45);
}

/* =========================
   Profile
========================= */

.about-profile {
	padding: 100px 0 130px;
}

.about-profile__heading {
	margin-bottom: 60px;
}

.about-profile__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(60px, 9vw, 140px);
}

.about-profile__content {
	max-width: 500px;
}

.about-profile__name-en {
	margin: 0 0 4px;
	font-family: "Space Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.about-profile__name {
	margin: 0;
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 500;
	letter-spacing: 0.08em;
}

.about-profile__text {
	margin: 0;
	font-size: 15px;
	line-height: 2;
}

.about-profile__text + .about-profile__text {
	margin-top: 18px;
}

.about-profile__image {
	overflow: hidden;
	aspect-ratio: 4 / 4;
}

.about-profile__image img {
	display: block;
	width: 90%;
    margin-left: auto;

	object-fit: cover;
	object-position: center 50%;

	filter: brightness(.97);

	transition:
		transform .8s ease,
		filter .8s ease;
}

.about-profile__image:hover img {
	transform: scale(1.04);
	filter: brightness(1.05);
}

/* =========================
   Career
========================= */

.career {
	padding: 150px 0;
	border-top: 1px solid rgba(23, 23, 23, 0.2);
}

.career__list {
	position: relative;
	width: min(100%, 760px);
	margin-left: auto;
	padding-left: 46px;
}

/* 全体の縦線 */
.career__list::before {
	content: "";
	position: absolute;

	top: 42px;
	left: 12px;

	width: 1px;
	height: calc(100% - 84px);

	background: rgba(23, 23, 23, 0.3);

	transform: scaleY(0);
	transform-origin: top;

	transition: transform 1.8s cubic-bezier(.22, 1, .36, 1);
}

/* 縦線が伸びる */
.career__list.is-show::before {
	transform: scaleY(1);
}

.career__item {
	position: relative;

	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 40px;

	padding: 34px 0;
	border-bottom: 1px solid rgba(23, 23, 23, 0.35);

	opacity: 0;
	transform: translateY(24px);

	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(.22, 1, .36, 1);
}

/* 丸 */
.career__item::before {
	content: "";
	position: absolute;

	top: 42px;
	left: -40px;

	width: 14px;
	height: 14px;

	border: 1px solid #171717;
	border-radius: 50%;
	background: #d8ff00;

	transform: scale(0);
	transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1);

	z-index: 2;
}

/* 表示状態 */
.career__item.is-show {
	opacity: 1;
	transform: translateY(0);
}

.career__item.is-show::before {
	transform: scale(1);
}

.career__date {
	font-family: "Space Grotesk", sans-serif;
	font-size: 13px;
	font-weight:500;
	letter-spacing:.08em;
}

.career__title {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
}

.career__text {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.9;
	color: rgba(23, 23, 23, 0.72);
}

/* =========================
   Strengths
========================= */

.strengths {
	padding: 150px 0;
	border-top: 1px solid rgba(23, 23, 23, 0.2);
}

.strengths__layout {
	display: grid;
	grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: clamp(70px, 10vw, 150px);
}

.strengths__visual {
	position: relative;
	width: min(100%, 430px);
	aspect-ratio: 1;
	margin-inline: auto;
}


.strengths__visual,
.strengths__list {
	opacity: 0;
	transform: translateY(40px);

	transition:
		opacity 1.5s ease,
		transform 1.5s cubic-bezier(.22,1,.36,1);
}

.strengths__visual.is-show,
.strengths__list.is-show{
	opacity:1;
	transform:translateY(0);
}

.strengths__circle {
	position: absolute;

	width: 52%;
	aspect-ratio: 1;

	display: grid;
	place-items: center;

	/* 本体では線と背景を描かない */
	border: none;
	background: transparent;

	font-family: "Space Grotesk", sans-serif;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;

	isolation: isolate;
}

/* 動く円の線 */
.strengths__circle::before {
	content: "";
	position: absolute;
	inset: 0;

	border: 1px solid #171717;
	border-radius: 50%;

	animation: circleMorph 9s ease-in-out infinite;

	z-index: -1;
}

/* 動く円の中の色 */
.strengths__circle::after {
	content: "";
	position: absolute;
	inset: 4px;

	background: rgba(216, 255, 0, 0.1);
	border-radius: 50%;

	animation: circleFill 8s ease-in-out infinite;

	mix-blend-mode: multiply;
	z-index: -2;
}

.strengths__circle::before,
.strengths__circle::after{
	animation-play-state: paused;
}

.strengths__visual.is-show .strengths__circle::before,
.strengths__visual.is-show .strengths__circle::after{
	animation-play-state: running;
}

.strengths__circle span {
	position: relative;
	z-index: 2;
}

@keyframes circleMorph {
	0%,
	100% {
		border-radius:
			58% 42% 60% 45% /
			40% 60% 43% 60%;
	}

	25% {
		border-radius:
			45% 59% 42% 58% /
			60% 45% 60% 40%;
	}

	50% {
		border-radius:
			57% 44% 40% 55% /
			55% 45% 60% 40%;
	}

	75% {
		border-radius:
			40% 55% 60% 42% /
			40% 60% 45% 55%;
	}
}

@keyframes circleFill {
	0%,
	100% {
		border-radius:
			52% 48% 58% 48% /
			42% 58% 46% 54%;
	}

	25% {
		border-radius:
			48% 59% 44% 56% /
			59% 44% 60% 44%;
	}

	50% {
		border-radius:
			54% 46% 40% 60% /
			54% 46% 60% 42%;
	}

	75% {
		border-radius:
			42% 58% 60% 44% /
			42% 58% 46% 54%;
	}
}

.strengths__circle--top::before {
	animation-duration: 16s;
	animation-delay: -2s;
}

.strengths__circle--top::after {
	animation-duration: 19s;
	animation-delay: -6s;
}

.strengths__circle--left::before {
	animation-duration: 18s;
	animation-delay: -8s;
}

.strengths__circle--left::after {
	animation-duration: 21s;
	animation-delay: -4s;
}

.strengths__circle--right::before {
	animation-duration: 20s;
	animation-delay: -10s;
}

.strengths__circle--right::after {
	animation-duration: 23s;
	animation-delay: -7s;
}

.strengths__circle--top {
	top: 0;
	left: 24%;
}

.strengths__circle--left {
	left: 3%;
	bottom: 7%;
}

.strengths__circle--right {
	right: 3%;
	bottom: 7%;
}

.strengths__item {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 20px;

	padding: 30px 0;
	border-bottom: 1px solid rgba(23, 23, 23, 0.35);

	opacity:0;
	transform:translateX(30px);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease;
}

.strengths__item.is-show{
	opacity:1;
	transform:translateX(0);
}

.strengths__number {
	margin: 0;
	font-family: "Space Grotesk", sans-serif;
	font-size: 12px;
}

.strengths__title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
}

.strengths__text {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 2;
	color: rgba(23, 23, 23, 0.72);
}

/* =========================
   Interests
========================= */

.interests {
	padding: 150px 0 180px;
	border-top: 1px solid rgba(23, 23, 23, 0.2);
}

.interest-card {
	position: relative;
	overflow: hidden;

	aspect-ratio: 1 / 1;

	box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
}

.interest-card img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.7s ease,
		filter 0.5s ease;
}

.interest-card__overlay {
	position: absolute;
	inset: 0;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	padding: 36px;
	box-sizing: border-box;

	background: rgba(23, 23, 23, 0.72);
	color: #fff;

	opacity: 0;
	transform: translateY(20px);

	transition:
		opacity 0.45s ease,
		transform 0.45s ease;
}

.interest-card__title {
	margin: 0;

	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.interest-card__text {
	margin: 18px 0 0;

	font-size: 14px;
	line-height: 1.9;
}

.interest-card:hover img {
	transform: scale(1.06);
	filter: brightness(0.75);
}

.interest-card:hover .interest-card__overlay {
	opacity: 1;
	transform: translateY(0);
}

.interests__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);

	gap: 50px;   /* ←画像同士の間隔 */

	max-width: 1040px;
	column-gap: 70px;
	row-gap: 90px;
	margin: 0 auto;
}

/* =========================
   Works Page
========================= */

.works-page {
	background: #171717;
	color: #fff;
}

.works-page__inner {
	width: min(calc(100% - 80px), 1200px);
	margin-inline: auto;
}

.post-type-archive-works .contact::before,
.single-works .contact::before {
	display: none;
}


/* =========================
   Hero
========================= */

.works-page__hero {
	padding: 100px 0 90px;
	background: #171717;
}

.works-page__title {
	margin: 0;
	font-size: clamp(72px, 11vw, 160px);
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	line-height: 0.9;
	text-transform: uppercase;
}

.works-page__subtitle {
	display: flex;
	align-items: center;
	gap: 14px;

	margin-top: 20px;
}

.works-page__subtitle-line {
	width: 38px;
	height: 1px;

	background: #fff;
}

.works-page__subtitle span:last-child {
	font-size: 13px;
	letter-spacing: 0.08em;
}


/* =========================
   Contents
========================= */

.works-page__contents {
	padding: 140px 0 180px;
}


/* =========================
   Grid
========================= */

.works-page__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	column-gap: clamp(70px, 9vw, 140px);
	row-gap: 120px;

	align-items: start;
}


/* 参考画像みたいに右側を少し下げる */
.works-list-card--lower {
	margin-top: 100px;
}


/* =========================
   Card
========================= */

.works-list-card__link {
	display: block;

	color: inherit;
	text-decoration: none;
}


/* =========================
   Image
========================= */

.works-list-card__image {
	position: relative;
	overflow: hidden;

	aspect-ratio: 16 / 10;

	background: transparent;
}

.works-list-card__image::after {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 0;

	width: 0;
	height: 4px;

	transform: translateX(-50%);
	background: #d8ff00;

	transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.works-list-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .8s cubic-bezier(.22, 1, .36, 1),
		filter .8s ease;
}

.works-list-card__link:hover .works-list-card__image img {
	transform: scale(1.04);
	filter: brightness(.92);
}

.works-list-card__link:hover .works-list-card__image::after {
	width: 100%;
}

/* =========================
   Text
========================= */

.works-list-card__body {
	padding-top: 15px;
}

.works-list-card__category {
	display: inline-block;

	font-size: 10px;
	padding:4px 10px;

	background: #fff;
	color: #171717;

	border-radius:999px;

	font-weight:600;
	letter-spacing:.08em;

	transition:
	background-color 0.3s ease,
	color 0.3s ease,
	transform 0.3s ease;
}

.works-list-card__category:hover {
	background: #d8ff00;
	color: #fff;
	transform: translateY(-2px);
}

.works-list-card__category:hover{
	transform: translateX(8px);
}

.works-list-card__title {
	margin: 10px 0 0;

	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 500;
	line-height: 1.5;

	letter-spacing: 0.04em;
}

.works-list-card__tags {
	margin: 5px 0 0;

	font-family: "Space Grotesk", sans-serif;

	font-size: 12px;
	color: #777;
}

/* ========================================
   Single Works
======================================== */

.work-detail {
	background: #171717;
	color: #fff;
}

.work-detail__inner {
	width: min(calc(100% - 80px), 1200px);
	margin-inline: auto;
}


/* ========================================
   Hero
======================================== */

.work-detail__hero {
	padding: 120px 0 140px;
}

.work-detail__category {
	display: inline-block;

	margin: 0 0 20px;
	padding: 6px 14px;

	border-radius: 999px;

	background: #fff;
	color: #171717;

	font-family: "Space Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.work-detail__title {
	margin: 0;

	font-size: clamp(42px, 6vw, 84px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.03em;
}

.work-detail__skills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;

	margin-top: 24px;
}

.work-detail__skills span {
	font-family: "Space Grotesk", sans-serif;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.work-detail__visual {
	margin-top: 70px;

	overflow: hidden;
}

.work-detail__visual img {
	display: block;

	width: 100%;
	height: auto;

	object-fit: cover;

	transition: transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.work-detail__visual:hover img {
	transform: scale(1.015);
}


/* ========================================
   Section
======================================== */

.work-detail__section {
	padding: 120px 0;

	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.work-detail__section-heading {
	display: grid;

	grid-template-columns: 60px 1fr;

	align-items: baseline;

	margin-bottom: 70px;
}

.work-detail__number {
	margin: 0;

	font-family: "Space Grotesk", sans-serif;

	font-size: 12px;
	font-weight: 500;

	color: #d8ff00;
}

.work-detail__heading {
	margin: 0;

	font-family: "Space Grotesk", sans-serif;

	font-size: clamp(42px, 5.5vw, 76px);
	font-weight: 500;

	line-height: 1;
	letter-spacing: 0.02em;
}


/* ========================================
   Information
======================================== */

.work-info {
	margin: 0;
}

.work-info__item {
	display: grid;

	grid-template-columns: 180px 1fr;

	gap: 40px;

	padding: 28px 0;

	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.work-info__item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.work-info__item dt {
	font-size: 13px;
	font-weight: 400;

	color: rgba(255, 255, 255, 0.45);
}

.work-info__item dd {
	margin: 0;

	font-size: 14px;
	line-height: 1.8;

	color: rgba(255, 255, 255, 0.9);
}

.work-info__skills {
	display: flex;
	flex-wrap: wrap;
}


/* ========================================
   Overview
======================================== */

.work-detail__text-block {
	max-width: 780px;

	margin-left: auto;
}

.work-detail__text-block p {
	margin: 0;

	font-size: 15px;
	line-height: 2;

	color: rgba(255, 255, 255, 0.68);
}

.work-detail__text-block p + p {
	margin-top: 20px;
}

.work-full-image {
	margin-top: 80px;
	border: 1px solid #333;
	border-radius: 12px;
	overflow: hidden;
}

.work-full-image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ========================================
   Coding Point
======================================== */

.coding-point {
	max-width: 850px;

	margin-left: auto;
}

.coding-point__item {
	padding: 42px 0;

	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.coding-point__title {
	margin: 0;

	font-size: 22px;
	font-weight: 500;

	line-height: 1.5;
}

.coding-point__text {
	margin: 20px 0 0;

	font-size: 14px;
	line-height: 2;

	color: rgba(255, 255, 255, 0.66);
}


/* ========================================
   Problem & Solution
======================================== */

.problem {
	max-width: 850px;

	margin-left: auto;
}

.problem__block {
	position: relative;

	padding: 42px;

	border: 1px solid rgba(255, 255, 255, 0.14);

	background: rgba(255, 255, 255, 0.015);
}

.problem__label {
	margin: 0 0 18px;

	font-family: "Space Grotesk", sans-serif;

	font-size: 11px;
	font-weight: 600;

	letter-spacing: 0.1em;

	color: rgba(255, 255, 255, 0.4);
}

.problem__label--solution {
	color: #d8ff00;
}

.problem__title {
	margin: 0;

	font-size: 22px;
	font-weight: 500;

	line-height: 1.5;
}

.problem__text {
	margin: 18px 0 0;

	font-size: 14px;
	line-height: 2;

	color: rgba(255, 255, 255, 0.66);
}

.problem__arrow {
	padding: 20px 0;

	text-align: center;

	font-family: "Space Grotesk", sans-serif;

	font-size: 24px;

	color: #d8ff00;
}


/* ========================================
   Technology
======================================== */

.work-tech {
	display: flex;
	flex-wrap: wrap;

	gap: 14px;
}

.work-tech span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 10px 18px;

	border: 1px solid #d8ff00;
	border-radius: 999px;

	font-family: "Space Grotesk", sans-serif;

	font-size: 13px;
	font-weight: 500;

	color: #d8ff00;

	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

.work-tech span:hover {
	background: #d8ff00;
	color: #171717;

	transform: translateY(-3px);
}


/* ========================================
   View Site Button
======================================== */

.work-detail__button {
	display: inline-flex;
	align-items: center;

	gap: 24px;

	margin-top: 36px;

	padding: 14px 24px;

	border-radius: 999px;

	background: #fff;
	color: #171717;

	text-decoration: none;

	font-family: "Space Grotesk", sans-serif;

	font-size: 13px;
	font-weight: 600;

	transition:
		background-color 0.3s ease,
		transform 0.3s ease;
}

.work-detail__button:hover {
	background: #d8ff00;

	transform: translateY(-3px);
}


/* ========================================
   Works Navigation
======================================== */

.work-navigation {
	padding: 100px 0;

	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.work-navigation .work-detail__inner {
	display: grid;

	grid-template-columns: 1fr auto 1fr;

	align-items: center;

	gap: 40px;
}

.work-navigation__prev,
.work-navigation__next {
	min-width: 0;
}

.work-navigation__link {
	display: flex;
	flex-direction: column;

	gap: 8px;

	color: #fff;

	text-decoration: none;
}

.work-navigation__link span {
	font-family: "Space Grotesk", sans-serif;

	font-size: 11px;
	font-weight: 500;

	letter-spacing: 0.08em;

	color: rgba(255, 255, 255, 0.45);
}

.work-navigation__link strong {
	font-size: 15px;
	font-weight: 500;

	line-height: 1.5;

	transition: color 0.3s ease;
}

.work-navigation__link:hover strong {
	color: #d8ff00;
}

.work-navigation__link--next {
	text-align: right;
	align-items: flex-end;
}

.work-navigation__all {
	position: relative;

	color: #d8ff00;

	text-decoration: none;

	font-family: "Space Grotesk", sans-serif;

	font-size: 12px;
	font-weight: 600;

	letter-spacing: 0.1em;
}

.work-navigation__all::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: -5px;

	width: 100%;
	height: 1px;

	background: #d8ff00;

	transform: scaleX(0);
	transform-origin: right;

	transition: transform 0.35s ease;
}

.work-navigation__all:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* =========================
   404
========================= */

.error-page {
    min-height: 75vh;
    padding: 160px 20px 120px;

    display: flex;
    align-items: center;

    background: #f6f6f2;
}

.error-page__inner {
    width: min(100%, 1200px);
    margin-inline: auto;
}

.error-page__number {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(140px, 24vw, 320px);
    font-weight: 600;
    line-height: .75;
    letter-spacing: -0.06em;

    color: #171717;
}

.error-page__title {
    margin: 70px 0 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 500;
    line-height: 1;
}

.error-page__text {
    margin: 32px 0 0;
    max-width: 560px;

    font-size: 15px;
    line-height: 2;
    color: #666;
}

.error-page__button {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    margin-top: 48px;
    padding: 16px 32px;

    border-radius: 999px;
    background: #171717;
    color: #fff;

    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.error-page__button:hover {
    background: #d8ff00;
    color: #171717;
    transform: translateY(-2px);
}

.error-page__arrow {
    transition: transform .3s ease;
}

.error-page__button:hover .error-page__arrow {
    transform: translateX(8px);
}


/* ========================================
   タブレット対応
======================================== */

@media screen and (max-width: 1024px) {

	html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

	.work-detail__inner {
		width: min(calc(100% - 60px), 1200px);
	}

	.work-detail__hero {
		padding: 100px 0 120px;
	}

	.work-detail__section {
		padding: 100px 0;
	}

	.work-detail__section-heading {
		margin-bottom: 60px;
	}

	.work-info__item {
		grid-template-columns: 150px 1fr;
	}

}


/* =========================
   スマホ対応
========================= */

@media screen and (max-width: 767px) {

	html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

	/*====================
	       header
    ====================*/
	.header .inner {
		padding: 16px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.header-nav {
		width: 100%;
	}

	.header-nav-list {
		width: 100%;
		gap: 0;
		justify-content: space-between;
	}

	.header-nav-link {
		font-size: 13px;
	}

	.header-logo {
		font-size: 26px;
	}

	/*===================
	       top
    ====================*/
	.fv {
        min-height: 580px;
        padding-inline: 15px;
    }

    .fv__visual {
        height: 540px;
    }

	.fv__image-wrap {
		width: min(78vw, 380px);
	}

	.fv__title {
		font-size: clamp(55px, 19vw, 90px);
	}

	.fv__title--left {
		top: 25%;
		left: 0%;
	}

	.fv__title--right {
		top: 58%;
		right: 5%;
	}

	.fv__caption {
		top: 2%;
		right: 3%;
		font-size: 11px;
	}

	/* =========================
   　Section blur
	========================= */

	.about::before,
	.works::before,
	.contact::before {
		top: -30px;
		height: 120px;
		filter: blur(8px);
	}

	/* コンテンツをぼかしより前面に */
	.about__inner,
	.works__inner,
	.contact__inner {
		position: relative;
		z-index: 1;
	}

	/*===================
    about
	===================*/

	.about {
		padding: 80px 20px;
	}

	/* ぼかしより内容を前に出す */
	.about__inner {
		position: relative;
		z-index: 1;

		grid-template-columns: 1fr;
		gap: 46px;
	}

	.about__image {
		width: 100%;
		aspect-ratio: 4 / 5;

		grid-column: 1;
	}

	.about__content {
		max-width: none;

		grid-column: 1;
	}

	.about__name-en {
		font-size: 11px;
	}

	.about__lead,
	.about__text {
		font-size: 14px;
		line-height: 1.9;
	}

	/*======================
	    works
	======================*/
	.works {
		padding: 90px 20px;
	}

	.works__heading {
		margin-bottom: 70px;
	}

	.works__title {
		font-size: clamp(70px, 25vw, 110px);
		letter-spacing: 0.04em;
	}

	.works__subtitle {
		margin-top: 18px;
		margin-left: 20%;
	}

	.works__subtitle span:last-child {
		font-size: 13px;
	}

	.works__grid {
		grid-template-columns: 1fr;
		row-gap: 70px;
	}

	.works-card--lower {
		margin-top: 0;
	}

	.works-card__title {
		font-size: 22px;
	}

	.works-card__tags {
		font-size: 13px;
	}

	.works__button-wrap {
    margin-top: 70px;
	}

	.works__button {
		width: auto;
		min-width: 180px;
		padding: 14px 24px;
	}

	/*==================
	    contact
	==================*/
	.contact__inner {
		width: calc(100% - 40px);
	}

	.contact__heading {
		margin-bottom: 36px;
	}

	.contact__title {
		font-size: clamp(48px, 17vw, 72px);
		letter-spacing: 0.08em;
	}

	.contact__text {
		font-size: 13px;
	}

	.contact__mail {
		align-items: flex-start;
	}

	.contact__mail-address {
		font-size: 12px;
		word-break: break-all;
	}

	.footer__inner {
		flex-direction: column;
		gap: 5px;
		text-align: center;
	}

	/*====================
	       page top
	====================*/
	.page-top {
        right: 10px;
        bottom: 10px;

        width: 48px;
        height: 48px;

		font-size: 10px;

        transform: none;
    }

    .page-top.is-show {
        transform: none;
    }

	/* =========================
	    About Page
	========================= */

	.about-page__inner {
		width: min(100% - 40px, 1200px);
	}

	.about-profile {
		padding: 90px 0 110px;
	}

	.about-profile__heading {
		margin-bottom: 60px;
	}

	.about-page__title {
		font-size: clamp(64px, 21vw, 100px);
	}

	.about-profile__layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.about-profile__content {
		max-width: none;
		order: 2;
	}

	.about-profile__image {
		order: 1;
		aspect-ratio: 4 / 5;
	}

	.about-profile__image img {
    width: 90%;
    margin-inline: auto;
    }

	.about-profile__text {
		font-size: 14px;
		line-height: 1.9;
	}

	.career,
	.strengths,
	.interests {
		padding: 100px 0;
	}

	.about-page__section-heading {
		margin-bottom: 60px;
	}

	.about-page__section-title {
		font-size: clamp(52px, 17vw, 82px);
	}

	.about-page__section-ja {
		position: static;
		margin-top: 16px;
	}

	.career__list {
    width: 100%;
    padding-left: 34px;
    box-sizing: border-box;
    }

	.career__item {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.career__item::before {
		left: -28px;
		top: 34px;
	}

	.career__item::after {
		left: -22px;
		top: 47px;
	}

	/* STRENGTHSだけスマホで少し小さく */
	.strengths .about-page__section-title {
		font-size: clamp(42px, 14vw, 56px);
		letter-spacing: 0.02em;
	}

	.strengths__layout {
		grid-template-columns: 1fr;
		gap: 70px;
	}

	.strengths__visual {
		width: min(100%, 350px);
	}

	.strengths__item {
		grid-template-columns: 38px 1fr;
	}

	.interests__grid{
		display:grid;
		grid-template-columns:1fr;
		gap:32px;
	}

	.interest-card{
		width:100%;
		aspect-ratio:16 / 10;
	}

	.interest-card__overlay{
		opacity:0;
		transform:translateY(20px);
		transition:.4s;
	}

	.interest-card.is-open .interest-card__overlay{
		opacity:1;
		transform:translateY(0);
	}

	/* =========================
	    Works Page
	========================= */

	.works-page__inner {
		width: calc(100% - 40px);
	}

	.works-page__hero {
		padding: 70px 0 60px;
	}

	.works-page__title {
		font-size: clamp(56px, 20vw, 82px);
	}

	.works-page__contents {
		padding: 80px 0 120px;
	}

	.works-page__grid {
		grid-template-columns: 1fr;

		row-gap: 70px;
	}

	.works-list-card--lower {
		margin-top: 0;
	}

	.works-list-card__image {
		aspect-ratio: 16 / 10;
	}

	.works-list-card__title {
		font-size: 20px;
	}

	/* =========================
	    single works
	========================= */

	.work-detail__inner {
		width: calc(100% - 40px);
	}


	/* Hero */

	.work-detail__hero {
		padding: 80px 0 90px;
	}

	.work-detail__category {
		margin-bottom: 16px;
	}

	.work-detail__title {
		font-size: clamp(36px, 11vw, 52px);
	}

	.work-detail__skills {
		gap: 8px 12px;

		margin-top: 18px;
	}

	.work-detail__skills span {
		font-size: 11px;
	}

	.work-detail__visual {
		margin-top: 45px;
	}


	/* Section */

	.work-detail__section {
		padding: 80px 0;
	}

	.work-detail__section-heading {
		grid-template-columns: 1fr;

		gap: 14px;

		margin-bottom: 45px;
	}

	.work-detail__heading {
		font-size: clamp(38px, 13vw, 56px);
	}


	/* Information */

	.work-info__item {
		grid-template-columns: 1fr;

		gap: 10px;

		padding: 22px 0;
	}

	.work-info__item dt {
		font-size: 11px;
	}

	.work-info__item dd {
		font-size: 13px;
	}


	/* Text */

	.work-detail__text-block,
	.coding-point,
	.problem {
		max-width: none;

		margin-left: 0;
	}

	.work-detail__text-block p {
		font-size: 14px;
		line-height: 1.9;
	}


	/* Coding */

	.coding-point__item {
		padding: 32px 0;
	}

	.coding-point__title {
		font-size: 19px;
	}

	.coding-point__text {
		font-size: 13px;
		line-height: 1.9;
	}


	/* Problem */

	.problem__block {
		padding: 28px 22px;
	}

	.problem__title {
		font-size: 19px;
	}

	.problem__text {
		font-size: 13px;
		line-height: 1.9;
	}


	/* Tech */

	.work-tech {
		gap: 10px;
	}

	.work-tech span {
		padding: 8px 14px;

		font-size: 11px;
	}


	/* Navigation */

	.work-navigation {
		padding: 70px 0;
	}

	.work-navigation .work-detail__inner {
		grid-template-columns: 1fr;

		gap: 45px;
	}

	.work-navigation__all {
		order: -1;
	}

	.work-navigation__link--next {
		text-align: left;
		align-items: flex-start;
	}

   /* =========================
	    404
	========================= */

    .error-page {
        min-height: 70vh;
        padding: 120px 20px 80px;
    }

    .error-page__number {
        font-size: clamp(120px, 40vw, 180px);
    }

    .error-page__title {
        margin-top: 48px;
        font-size: 36px;
    }

    .error-page__text {
        font-size: 14px;
    }

}

@media screen and (min-width: 600px) and (max-width: 767px) {
    .fv__title--right {
        right: 20%;
    }
}