/* INDEX.CSS — Home — Variables replaced */
/* Hero */
.hero {
		min-height: 100vh;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		padding-top: 72px
}
.hero__shapes {
		position: absolute;
		inset: 0;
		pointer-events: none
}
.hero__shape {
		position: absolute;
		transition: transform .1s linear
}
.hero__shape--circle {
		width: clamp(200px, 28vw, 420px);
		aspect-ratio: 1;
		border-radius: 50%;
		background: #D63426;
		top: 12%;
		right: 8%;
		animation: breathe 6s ease-in-out infinite;
		mix-blend-mode: multiply
}
.hero__shape--triangle {
		width: 0;
		height: 0;
		border-left: clamp(100px, 14vw, 210px) solid transparent;
		border-right: clamp(100px, 14vw, 210px) solid transparent;
		border-bottom: clamp(170px, 24vw, 360px) solid #2B4C7E;
		bottom: 8%;
		left: 6%;
		animation: breathe 8s ease-in-out 1s infinite;
		mix-blend-mode: multiply
}
.hero__shape--square {
		width: clamp(120px, 16vw, 240px);
		aspect-ratio: 1;
		background: #EBB424;
		bottom: 22%;
		right: 22%;
		animation: breathe 7s ease-in-out .5s infinite;
		mix-blend-mode: multiply;
		transform: rotate(12deg)
}
.hero__shape--overprint {
		width: clamp(80px, 10vw, 150px);
		aspect-ratio: 1;
		border-radius: 50%;
		background: rgba(214, 52, 38, .25);
		top: 40%;
		right: 25%;
		mix-blend-mode: multiply;
		animation: breathe 5s ease-in-out 2s infinite
}
@keyframes breathe {
		0%, 100% {
				transform: scale(1) rotate(var(--r, 0deg))
		}
		50% {
				transform: scale(1.06) rotate(var(--r, 0deg))
		}
}
.hero__content {
		position: relative;
		z-index: 2;
		max-width: 700px
}
.hero__label {
		opacity: 0;
		animation: fadeUp .8s cubic-bezier(.16, 1, .3, 1) 2.4s forwards
}
.hero__title {
		font-size: clamp(2.4rem, 5.5vw, 4.5rem);
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: .08em;
		margin: 1.5rem 0 2rem
}
.hero__title-line {
		display: block;
		overflow: hidden
}
.hero__title-line span {
		display: inline-block;
		transform: translateY(110%);
		animation: titleIn 1.1s cubic-bezier(.16, 1, .3, 1) forwards
}
.hero__title-line:nth-child(1) span {
		animation-delay: 2.5s
}
.hero__title-line:nth-child(2) span {
		animation-delay: 2.65s
}
.hero__title-line:nth-child(3) span {
		animation-delay: 2.8s
}
.hero__accent {
		color: #D63426;
		font-style: italic
}
@keyframes titleIn {
		to {
				transform: translateY(0)
		}
}
@keyframes fadeUp {
		from {
				opacity: 0;
				transform: translateY(30px)
		}
		to {
				opacity: 1;
				transform: translateY(0)
		}
}
.hero__desc {
		font-size: 1.05rem;
		max-width: 460px;
		margin-bottom: 3rem;
		opacity: 0;
		animation: fadeUp .8s cubic-bezier(.16, 1, .3, 1) 3s forwards
}
.hero__cta {
		display: flex;
		gap: 1.5rem;
		flex-wrap: wrap;
		opacity: 0;
		animation: fadeUp .8s cubic-bezier(.16, 1, .3, 1) 3.2s forwards
}

/* 修正2: メインCTAボタン大きめスタイル */
.btn--large {
		padding: 1.1rem 2.4rem;
		font-size: .78rem
}

.hero__scroll {
		position: absolute;
		bottom: 3rem;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		opacity: 0;
		animation: fadeUp .8s cubic-bezier(.16, 1, .3, 1) 3.5s forwards
}
.hero__scroll-text {
		font-family: 'DM Mono', monospace;
		font-size: .55rem;
		letter-spacing: .25em;
		text-transform: uppercase;
		opacity: .35;
		writing-mode: vertical-lr
}
.hero__scroll-line {
		width: .5px;
		height: 50px;
		background: #2D2926;
		animation: scrollPulse 2s ease-in-out infinite
}
@keyframes scrollPulse {
		0%, 100% {
				transform: scaleY(1);
				opacity: .4
		}
		50% {
				transform: scaleY(.4);
				opacity: .15
		}
}
/* Works section */
.works {
		padding: 8rem 0
}
.works__header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 5rem;
		flex-wrap: wrap;
		gap: 1.5rem
}
.works__title {
		font-size: clamp(2.5rem, 5vw, 4.5rem)
}
.works__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5px;
		background: #2D2926;
		border: 1.5px solid #2D2926
}
.work-card {
		background: #F2EFE9;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		transition: all .6s cubic-bezier(.16, 1, .3, 1)
}
.work-card:hover {
		z-index: 2
}
.work-card__image {
		aspect-ratio: 16/10;
		overflow: hidden;
		position: relative
}
.work-card__placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.4rem;
		font-weight: 600
}
.work-card__ink {
		position: absolute;
		inset: 0;
		background: #2D2926;
		border-radius: 50%;
		transform: scale(0);
		opacity: 0;
		transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, border-radius 1.2s cubic-bezier(.16, 1, .3, 1);
		z-index: 1
}
.work-card:hover .work-card__ink {
		transform: scale(3);
		opacity: 1;
		border-radius: 0
}
.work-card__hover-info {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 2rem;
		z-index: 2;
		opacity: 0;
		transform: translateY(10px);
		transition: all .5s cubic-bezier(.16, 1, .3, 1) .15s
}
.work-card:hover .work-card__hover-info {
		opacity: 1;
		transform: translateY(0)
}
.work-card__hover-title {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.3rem;
		font-weight: 700;
		color: #F2EFE9;
		margin-bottom: .5rem
}
.work-card__hover-cat {
		font-family: 'DM Mono', monospace;
		font-size: .6rem;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #EBB424
}
.work-card__info {
		padding: 1.5rem
}
.work-card__cat {
		font-family: 'DM Mono', monospace;
		font-size: .6rem;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #D63426;
		margin-bottom: .5rem
}
.work-card__title {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.1rem;
		font-weight: 600;
		margin-bottom: .4rem
}
.work-card__desc {
		font-size: .8rem;
		opacity: .5;
		line-height: 1.6
}
.work-card--featured {
		grid-column: 1/-1
}
.work-card--featured .work-card__image {
		aspect-ratio: 21/9
}
/* About preview kinetic typography */

/* ===== Services Section ===== */
.services {
		padding: 8rem 0;
		border-bottom: 1.5px solid rgba(45, 41, 38, .06)
}
.services__title {
		font-size: clamp(2rem, 4vw, 3rem);
		margin-top: 2rem;
		margin-bottom: 1rem
}
.services__lead {
		font-size: 1rem;
		opacity: .55;
		max-width: 520px;
		line-height: 1.9;
		margin-bottom: 5rem
}
.services__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5px;
		background: #2D2926;
		border: 1.5px solid #2D2926
}
.service-card {
		background: #F2EFE9;
		padding: 3rem 2rem 2.5rem;
		position: relative;
		overflow: hidden;
		transition: all .5s cubic-bezier(.16, 1, .3, 1)
}
.service-card::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 3px;
		background: #D63426;
		transition: width .6s cubic-bezier(.16, 1, .3, 1)
}
.service-card:hover::before {
		width: 100%
}
.service-card:hover {
		background: #F7F5F0
}
.service-card__icon {
		margin-bottom: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border: 1.5px solid rgba(214, 52, 38, .15);
		transition: all .4s cubic-bezier(.16, 1, .3, 1)
}
.service-card:hover .service-card__icon {
		border-color: #D63426;
		background: rgba(214, 52, 38, .06)
}
.service-card__num {
		font-family: 'DM Mono', monospace;
		font-size: .6rem;
		letter-spacing: .2em;
		color: #D63426;
		opacity: .5;
		margin-bottom: 1rem
}
.service-card__title {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.15rem;
		font-weight: 600;
		margin-bottom: .8rem;
		letter-spacing: -.01em
}
.service-card__desc {
		font-size: .88rem;
		line-height: 1.9;
		opacity: .55;
		margin-bottom: 1.5rem
}
.service-card__price {
		font-family: 'DM Mono', monospace;
		font-size: .85rem;
		font-weight: 600;
		color: #D63426;
		margin-bottom: 1rem;
		letter-spacing: .04em
}
.service-card__tags {
		display: flex;
		flex-wrap: wrap;
		gap: .4rem
}
.service-card__tags span {
		font-family: 'DM Mono', monospace;
		font-size: .55rem;
		letter-spacing: .08em;
		padding: .25rem .6rem;
		border: 1px solid rgba(45, 41, 38, .08);
		transition: all .3s ease
}
.service-card:hover .service-card__tags span {
		border-color: rgba(214, 52, 38, .2);
		color: #D63426
}

/* Services responsive */
@media(max-width:991px) {
		.services {
				padding: 5rem 0
		}
		.services__lead {
				margin-bottom: 4rem
		}
		.services__grid {
				grid-template-columns: 1fr
		}
}
@media(max-width:767px) {
		.services {
				padding: 3.5rem 0
		}
		.services__lead {
				margin-bottom: 3rem
		}
		.service-card {
				padding: 2rem 1.5rem
		}
		.service-card__icon {
				margin-bottom: 1.5rem
		}
}
@media(max-width:480px) {
		.services {
				padding: 3rem 0
		}
}

/* ===== end Services ===== */

.about-prev {
		padding: 8rem 0;
		overflow: hidden
}
.about-prev__kine {
		font-family: 'Space Grotesk', sans-serif;
		font-size: clamp(2rem, 5vw, 4.5rem);
		font-weight: 700;
		line-height: 1.15;
		max-width: 900px
}
.about-prev__kine .k-red {
		color: #D63426
}
.about-prev__kine .k-blue {
		color: #2B4C7E
}
.about-prev__kine .k-gold {
		color: #EBB424
}
.k-word {
		display: inline-block;
		overflow: hidden
}
.k-word span {
		display: inline-block;
		transform: translateY(110%);
		transition: transform 1s cubic-bezier(.16, 1, .3, 1)
}
.k-word.visible span {
		transform: translateY(0)
}
.about-prev__sub {
		margin-top: 3rem;
		display: flex;
		gap: 5rem;
		flex-wrap: wrap
}
.about-prev__stat-num {
		font-family: 'Space Grotesk', sans-serif;
		font-size: clamp(2.5rem, 4vw, 4rem);
		font-weight: 700;
		line-height: 1;
		color: #D63426
}
.about-prev__stat-label {
		font-family: 'DM Mono', monospace;
		font-size: .6rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		margin-top: .4rem;
		opacity: .45
}
/* Skills */
.skills {
		padding: 8rem 0
}
.skills__grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 1.5rem
}
.skill-card {
		padding: 3rem 1.5rem;
		border: 1.5px solid #2D2926;
		position: relative;
		overflow: hidden;
		transition: all .5s cubic-bezier(.16, 1, .3, 1)
}
.skill-card::before {
		content: '';
		position: absolute;
		top: -20px;
		right: -20px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		transition: all .6s cubic-bezier(.16, 1, .3, 1);
		mix-blend-mode: multiply
}
.skill-card:nth-child(1)::before {
		background: rgba(214, 52, 38, .12)
}
.skill-card:nth-child(2)::before {
		background: rgba(43, 76, 126, .10)
}
.skill-card:nth-child(3)::before {
		background: rgba(235, 180, 36, .14)
}
.skill-card:nth-child(4)::before {
		background: rgba(214, 52, 38, .12)
}
.skill-card:nth-child(5)::before {
		background: rgba(43, 76, 126, .10)
}
.skill-card:hover::before {
		width: 300px;
		height: 300px;
		top: -100px;
		right: -100px
}
.skill-card:hover {
		border-color: #D63426
}
.skill-card__num {
		font-family: 'DM Mono', monospace;
		font-size: .6rem;
		letter-spacing: .2em;
		color: #D63426;
		margin-bottom: 1.5rem;
		opacity: .6
}
.skill-card__title {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.1rem;
		font-weight: 600;
		margin-bottom: 1rem
}
.skill-card__tools {
		display: flex;
		flex-wrap: wrap;
		gap: .4rem
}
.skill-card__tool {
		font-family: 'DM Mono', monospace;
		font-size: .58rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		padding: .3rem .65rem;
		border: 1px solid rgba(45, 41, 38, .06);
		transition: all .3s ease
}
.skill-card__tool:hover {
		border-color: #D63426;
		color: #D63426
}
/* CTA */
.cta {
		padding: 12rem 0;
		text-align: center
}
.cta__title {
		font-size: clamp(2.5rem, 6vw, 5.5rem);
		margin-bottom: 1.5rem
}
.cta__title .cta-red {
		color: #D63426
}
.cta__sub {
		opacity: .5;
		font-size: 1rem;
		margin-bottom: 3rem
}
/* ===== Responsive ===== */
@media(max-width:1199px) {
		.skills__grid {
				grid-template-columns: repeat(3, 1fr)
		}
}
@media(max-width:991px) {
		.hero {
				min-height: 85vh
		}
		.skills__grid {
				grid-template-columns: repeat(2, 1fr)
		}
		.works {
				padding: 5rem 0
		}
		.works__grid {
				grid-template-columns: 1fr
		}
		.work-card--featured .work-card__image {
				aspect-ratio: 16/10
		}
		.works__header {
				flex-direction: column;
				align-items: flex-start;
				margin-bottom: 4rem
		}
		.hero__scroll {
				display: none
		}
		.about-prev {
				padding: 5rem 0
		}
		.about-prev__sub {
				gap: 2rem
		}
		.skills {
				padding: 5rem 0
		}
		.cta {
				padding: 8rem 0
		}
}
@media(max-width:767px) {
		.hero__title {
				font-size: clamp(1.8rem, 8vw, 2.8rem);
				margin: 1.5rem 0 1.5rem
		}
		.hero__desc {
				margin-bottom: 2rem
		}
		.hero__cta {
				flex-direction: column
		}
		.btn--large {
				padding: .9rem 1.8rem;
				font-size: .7rem
		}
		/* シェイプを背景の奥に追いやって薄く */
		.hero__shapes {
				z-index: 0;
				opacity: .18;
				filter: blur(2px)
		}
		.hero__shape--circle {
				width: 220px;
				top: -40px;
				right: -60px
		}
		.hero__shape--triangle {
				border-left-width: 80px;
				border-right-width: 80px;
				border-bottom-width: 138px;
				bottom: -20px;
				left: -30px
		}
		.hero__shape--square {
				width: 120px;
				bottom: 10%;
				right: -20px
		}
		.hero__shape--overprint {
				display: none
		}
		.hero__content {
				z-index: 2;
				position: relative
		}
		.skills__grid {
				grid-template-columns: 1fr
		}
		.about-prev {
				padding: 3.5rem 0
		}
		.about-prev__sub {
				flex-direction: column
		}
		.works {
				padding: 3.5rem 0
		}
		.works__header {
				margin-bottom: 3rem
		}
		.skills {
				padding: 3.5rem 0
		}
		.cta {
				padding: 5rem 0
		}
}
@media(max-width:480px) {
		.works {
				padding: 3rem 0
		}
		.about-prev {
				padding: 3rem 0
		}
		.skills {
				padding: 3rem 0
		}
		.cta {
				padding: 4rem 0
		}
}