/* CONTACT.CSS — Variables replaced, text readability improved */

.contact-hero {
		padding: calc(72px + 8rem) 0 3rem
}
.contact-hero__title {
		font-size: clamp(3rem, 7vw, 6rem);
		overflow: hidden
}
.contact-hero__title span {
		display: inline-block;
		transform: translateY(100%);
		animation: titleIn 1s cubic-bezier(.16, 1, .3, 1) .3s forwards
}
@keyframes titleIn {
		to {
				transform: translateY(0)
		}
}
.contact-hero__sub {
		font-size: 1.05rem;
		max-width: 560px;
		margin-top: 1.5rem;
		opacity: 0;
		animation: fadeUp .8s cubic-bezier(.16, 1, .3, 1) .6s forwards
}
@keyframes fadeUp {
		from {
				opacity: 0;
				transform: translateY(25px)
		}
		to {
				opacity: .7;
				transform: translateY(0)
		}
}

/* 修正13: Trust badges */
.trust-badges {
		display: flex;
		gap: 1.5rem;
		flex-wrap: wrap;
		margin-bottom: 3rem;
		padding: 1.5rem 2rem;
		border: 1.5px solid rgba(214, 52, 38, .15);
		background: rgba(214, 52, 38, .03)
}
.trust-badge {
		display: flex;
		align-items: center;
		gap: .5rem;
		font-size: .88rem;
		line-height: 1
}
.trust-badge__icon {
		font-size: 1rem;
		flex-shrink: 0
}
.trust-badge__text {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		color: #2D2926
}

/* Content grid */
.contact-content {
		padding: 3rem 0 8rem
}
.contact-content__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8rem
}

/* Form */
.contact-form {
		display: flex;
		flex-direction: column;
		gap: 1.5rem
}
.form-group__label {
		display: block;
		font-family: 'DM Mono', monospace;
		font-size: .7rem;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #2D2926;
		opacity: .7;
		margin-bottom: .6rem
}
.form-group__input, .form-group__textarea, .form-group__select {
		width: 100%;
		padding: .9rem 1rem;
		background: transparent;
		border: 1.5px solid rgba(45, 41, 38, .15);
		color: #2D2926;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: .95rem;
		transition: border-color .3s ease;
		outline: none;
		cursor: text
}
.form-group__select {
		cursor: pointer
}
.form-group__input:focus, .form-group__textarea:focus, .form-group__select:focus {
		border-color: #D63426
}
.form-group__input::placeholder, .form-group__textarea::placeholder {
		opacity: .4;
		color: #2D2926
}
.form-group__textarea {
		min-height: 160px;
		resize: vertical
}
.form-group__select {
		-webkit-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232D2926' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 1rem center;
		padding-right: 2.5rem;
		cursor: pointer
}
.contact-form .btn {
		align-self: flex-start
}
.contact-form .btn:disabled {
		opacity: .5;
		pointer-events: none
}

/* Contact info cards */
.contact-info {
		display: flex;
		flex-direction: column;
		gap: 2rem
}
.contact-info__item {
		padding: 2rem;
		border: 1.5px solid rgba(45, 41, 38, .15);
		transition: border-color .4s ease
}
.contact-info__item:hover {
		border-color: #D63426
}

/* SVG icon styling */
.contact-info__icon {
		margin-bottom: 1rem;
		color: #D63426;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border: 1.5px solid rgba(214, 52, 38, .12);
		border-radius: 50%;
		transition: all .4s cubic-bezier(.16, 1, .3, 1)
}
.contact-info__item:hover .contact-info__icon {
		background: #D63426;
		color: #F2EFE9;
		border-color: #D63426
}
.contact-info__icon svg {
		display: block
}

.contact-info__label {
		font-family: 'DM Mono', monospace;
		font-size: .7rem;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #D63426;
		margin-bottom: .4rem
}
.contact-info__value {
		font-size: 1rem;
		color: #2D2926
}
.contact-info__value a {
		transition: color .3s ease;
		color: #2D2926
}
.contact-info__value a:hover {
		color: #D63426
}

/* Social */
.contact-social {
		padding: 2rem;
		border: 1.5px solid rgba(45, 41, 38, .15)
}
.contact-social__title {
		font-family: 'DM Mono', monospace;
		font-size: .7rem;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #D63426;
		margin-bottom: 1.5rem
}
.contact-social__links {
		display: flex;
		gap: 1rem
}
.contact-social__link {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(45, 41, 38, .15);
		font-size: 1.1rem;
		transition: all .3s ease;
		cursor: pointer;
		color: #2D2926
}
.contact-social__link:hover {
		border-color: #D63426;
		color: #D63426;
		background: rgba(214, 52, 38, .12)
}
.contact-social__link svg {
		display: block
}

/* Success message */
.form-success {
		display: none;
		text-align: center;
		padding: 8rem
}
.form-success.show {
		display: block
}
.form-success__icon {
		margin-bottom: 1.5rem;
		display: flex;
		justify-content: center
}
.form-success__title {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.8rem;
		font-weight: 700;
		margin-bottom: 1rem;
		color: #2D2926
}
.form-success__text {
		opacity: .6;
		color: #2D2926;
		line-height: 2
}

/* ===== Responsive ===== */
@media(max-width:991px) {
		.contact-hero {
				padding: calc(72px + 5rem) 0 3rem
		}
		.contact-content {
				padding: 3rem 0 5rem
		}
		.contact-content__grid {
				grid-template-columns: 1fr;
				gap: 3rem
		}
		.contact-info {
				order: -1;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1.5rem
		}
		.contact-social {
				grid-column: 1/-1
		}
		.trust-badges {
				flex-direction: column;
				gap: 1rem
		}
}
@media(max-width:767px) {
		.contact-hero {
				padding: calc(60px + 3.5rem) 0 3rem
		}
		.contact-content {
				padding: 3rem 0 3.5rem
		}
		.contact-content__grid {
				gap: 2rem
		}
		.contact-info {
				grid-template-columns: 1fr
		}
		.form-success {
				padding: 3.5rem
		}
		.trust-badges {
				padding: 1.2rem 1.5rem;
				margin-bottom: 2rem
		}
		.trust-badge {
				font-size: .82rem
		}
}
@media(max-width:480px) {
		.contact-hero {
				padding: calc(60px + 3rem) 0 2.5rem
		}
		.contact-content {
				padding: 2.5rem 0 3rem
		}
}
