/* ===== CSS Variables ===== */ :root {
	--navy: #192744;
	--blue-deep: #004e8c;
	--blue-mid: #0077b6;
	--blue-bright: #00a8e8;
	--teal: #00c9b1;
	--spic-brown: #46342a;
	--spic-cream: #f5f0cc;
	--spic-gold: #b9a273;
	--gold: #b9a273;
	--gold-light: #cbb98d;
	--light-blue: #d4eaf7;
	--light-orange: #fce9d8;
	--beige: #e8ddd0;
	--white: #ffffff;
	--off-white: #f4f8fc;
	--gray-light: #e8f0f7;
	--gray: #666666;
	--text-dark: #1a1a1a;
	--text-mid: #444444;
	--font-base: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--font-en: Helvetica, 'Helvetica Neue', Arial, sans-serif;
	--font-noto: 'Noto Sans JP', sans-serif;
}
/* ===== Reset & Base ===== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-base);
	color: var(--text-dark);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
.f-en {
	font-family: var(--font-en);
}
.f-noto {
	font-family: var(--font-noto);
}
img {
	max-width: 100%;
	display: block;
}
a {
	text-decoration: none;
	color: inherit;
}
/* ===== Typography ===== */
h2 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
}
h3 {
	font-size: clamp(1rem, 2vw, 1.2rem);
	font-weight: 700;
}
p {
	font-size: clamp(0.9375rem, 1.5vw, 1rem);
	line-height: 1.85;
}
/* ===== Utility ===== */
.sp-none { display: none; }
.pc-none { display: block; }
@media (min-width: 768px) {
	.sp-none { display: block; }
	.pc-none { display: none; }
}
.container {
	width: 90%;
	max-width: 1080px;
	margin: 0 auto;
}
.section {
	padding: 80px 0;
}
.section--blue {
	background: linear-gradient(135deg, var(--light-blue) 0%, #eef7ff 100%);
	color: var(--text-dark);
}
.section--off-white {
	background: var(--off-white);
}
.section--white {
	background: var(--white);
}
.section--teal {
	background: linear-gradient(135deg, var(--light-orange) 0%, #fef7f2 100%);
	color: var(--text-dark);
}
.section-label {
	display: inline-block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 4px;
	margin-bottom: 16px;
	color: var(--gold);
}
.section-title {
	margin-bottom: 48px;
}
.section-title h2 {
	margin-bottom: 15px;
}
.section-title p {
	color: var(--text-mid);
}
.section--blue .section-title p, .section--teal .section-title p {
	color: var(--text-mid);
}
/* ===== Image Placeholder ===== */
.img-placeholder {
	background: var(--gray-light);
	border: 2px dashed #aac8e0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--blue-mid);
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	padding: 20px;
	border-radius: 8px;
	line-height: 1.6;
}
.img-placeholder::before {
	content: '＋ 画像';
	display: block;
	font-size: 0.7rem;
	margin-bottom: 6px;
	opacity: 0.5;
}
.img-placeholder--dark {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.7);
}
/* ===== Buttons ===== */
.btn {
	display: inline-block;
	padding: 18px 56px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.btn--gold {
	background: var(--gold);
	color: var(--white);
	box-shadow: 0 4px 20px rgba(182, 159, 114, 0.35);
}
.btn--gold:hover {
	background: var(--gold-light);
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(182, 159, 114, 0.45);
}
.btn--outline-white {
	border: 2px solid var(--white);
	color: var(--white);
	background: transparent;
}
.btn--outline-white:hover {
	background: var(--white);
	color: var(--navy);
	transform: translateY(-3px);
}
/* ===== Header ===== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(10px);
	padding: 14px 0;
	border-bottom: 1px solid rgba(182, 159, 114, 0.25);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 90%;
	max-width: 1080px;
	margin: 0 auto;
}
.header-left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.header-logos {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
}
.header-logo-spic {
	height: 34px;
	width: auto;
	display: block;
}
.header-logo-sj60 {
	height: 34px;
	width: auto;
	display: block;
}
.header-title {
	display: block;
}
.header-title-main {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: 0.02em;
	line-height: 1.3;
}
.header-title-sub {
	font-size: 0.82rem;
	color: var(--text-mid);
	margin-top: 2px;
	letter-spacing: 0.02em;
}
.header-cta {
	display: inline-block;
	padding: 10px 28px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	background: var(--gold);
	color: var(--white);
	border-radius: 50px;
	transition: all 0.3s;
}
.header-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
@media (max-width: 767px) {
	.header-title-main{
		font-size: 0.8rem;
	}
	.site-header { padding: 10px 0; }
	.header-left {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.header-inner{
		width: 92%;
	}
	.header-logo-spic { height: 20px; }
	.header-logo-sj60 { height: 20px; }
	.header-title-sub { display: none; }
	.header-cta {
		display: inline-block;
		padding: 7px 16px;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		background: var(--gold);
		color: var(--white);
		border-radius: 50px;
	}
}
/* ===== Footer ===== */
.site-footer {
	background: var(--navy);
	padding: 48px 0 32px;
}
.footer-inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 90%;
	max-width: 1080px;
	margin: 0 auto;
}
.footer-logo {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--white);
}
.footer-logo span {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--gold);
	letter-spacing: 0.05em;
	margin-top: 4px;
}
.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.footer-logos {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}
.footer-logo-spic {
	height: 46px;
	width: auto;
	display: block;
}
.footer-logo-sj60 {
	height: 38px;
	width: auto;
	display: block;
}
.footer-title-main {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 0.02em;
}
.footer-title-sub {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.02em;
}
@media (max-width: 767px) {
	.footer-inner { flex-direction: column; align-items: flex-start; }
	.footer-brand { align-items: flex-start; text-align: left; }
}
.footer-copy {
	font-size: 0.7rem;
	color: #FFF;
	letter-spacing: 0.04em;
	align-self: flex-end;
}
/* ===== Scroll Animations ===== */
.animate-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}
/* ===== Responsive ===== */
@media (max-width: 639px) {
	.section {
		padding: 60px 0;
	}
	.btn {
		padding: 16px 36px;
		font-size: 0.9rem;
	}
}