/* ==========================================
   カラーパレット（3色のみ）
   ========================================== */
:root {
	/* メインカラー: パステルブルー */
	--color-primary: #a8d8ea;
	--color-primary-light: #c8e7f2;
	--color-primary-dark: #88c8dc;

	/* アクセント1: パステルピーチ */
	--color-accent: #ffd6ba;
	--color-accent-light: #ffe5d0;
	--color-accent-dark: #ffc8a0;

	/* アクセント2: ホワイト/クリーム */
	--color-base: #fffef9;
	--color-white: #ffffff;
	--color-text: #2c2c2c;
	--color-text-light: #666666;
}

/* ==========================================
   グローバルスタイル
   ========================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	background-color: var(--color-base);
	color: var(--color-text);
	overflow-x: hidden;
	line-height: 1.7;
}

::selection {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* スムーススクロール */
html {
	scroll-behavior: smooth;
}

section {
	scroll-margin-top: 80px;
}

/* ==========================================
   ヘッダー - ミニマルデザイン
   ========================================== */
#header {
	background: rgba(255, 254, 249, 0.95);
	backdrop-filter: blur(20px);
	border-bottom: 2px solid var(--color-primary-light);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#header.scrolled {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 10px 40px rgba(168, 216, 234, 0.15);
}

.logo-text {
	color: var(--color-primary-dark);
	letter-spacing: 0.05em;
	position: relative;
}

.logo-subtitle {
	color: var(--color-text-light);
	opacity: 0.7;
}

.nav-link {
	color: var(--color-text);
	font-weight: 500;
	font-size: 0.95rem;
	position: relative;
	transition: all 0.3s ease;
	letter-spacing: 0.05em;
}

.nav-link::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	border-radius: 10px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::before {
	width: 100%;
}

.nav-link:hover {
	color: var(--color-primary-dark);
}

.menu-icon {
	color: var(--color-primary-dark);
}

.mobile-menu {
	background: var(--color-white);
	border-bottom: 2px solid var(--color-primary-light);
}

.mobile-nav-link {
	color: var(--color-text);
	font-weight: 500;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	padding: 10px 0;
	border-bottom: 2px solid transparent;
}

.mobile-nav-link:hover {
	color: var(--color-primary-dark);
	border-bottom-color: var(--color-primary);
}

/* ==========================================
   ヒーローセクション - 独創的レイアウト
   ========================================== */
.hero-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	position: relative;
	background: linear-gradient(135deg, var(--color-base) 0%, var(--color-primary-light) 100%);
	overflow: hidden;
	padding: 120px 0 80px;
}

/* 浮遊する円形背景 */
.hero-circles {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 1;
}

.circle {
	position: absolute;
	border-radius: 50%;
	opacity: 0.3;
	animation: float 20s infinite ease-in-out;
}

.circle-1 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
	top: -200px;
	right: -150px;
	animation-delay: 0s;
}

.circle-2 {
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
	bottom: -100px;
	left: -100px;
	animation-delay: 5s;
}

.circle-3 {
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);
	top: 50%;
	left: 50%;
	animation-delay: 10s;
}

@keyframes float {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	25% {
		transform: translate(50px, -50px) scale(1.1);
	}
	50% {
		transform: translate(-30px, 30px) scale(0.9);
	}
	75% {
		transform: translate(30px, 50px) scale(1.05);
	}
}

/* ヒーローグリッド */
.hero-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 60px;
	align-items: center;
}

.hero-main {
	animation: fadeInUp 1s ease-out;
}

.hero-badge {
	display: inline-block;
	padding: 10px 24px;
	background: var(--color-white);
	color: var(--color-primary-dark);
	border-radius: 50px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
	box-shadow: 0 10px 30px rgba(168, 216, 234, 0.3);
	animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-title {
	font-size: clamp(3rem, 8vw, 5.5rem);
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 30px;
}

.title-line {
	display: block;
	color: var(--color-text);
	animation: fadeInUp 1s ease-out 0.4s both;
}

.title-highlight {
	background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	animation: fadeInUp 1s ease-out 0.6s both;
}

.hero-description {
	font-size: 1.15rem;
	color: var(--color-text-light);
	line-height: 1.8;
	margin-bottom: 40px;
	animation: fadeInUp 1s ease-out 0.8s both;
}

.hero-buttons {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	animation: fadeInUp 1s ease-out 1s both;
}

.btn-primary,
.btn-secondary {
	padding: 18px 40px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	letter-spacing: 0.05em;
}

.btn-primary {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: var(--color-white);
	box-shadow: 0 15px 40px rgba(168, 216, 234, 0.4);
}

.btn-primary:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 50px rgba(168, 216, 234, 0.6);
}

.btn-secondary {
	background: var(--color-white);
	color: var(--color-primary-dark);
	border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
	background: var(--color-primary-light);
	transform: translateY(-5px);
}

/* フローティングカード */
.hero-side {
	position: relative;
	height: 500px;
}

.floating-card {
	position: absolute;
	background: var(--color-white);
	border-radius: 24px;
	padding: 30px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(168, 216, 234, 0.25);
	backdrop-filter: blur(10px);
	transition: all 0.4s ease;
}

.floating-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 30px 80px rgba(168, 216, 234, 0.35);
}

.card-1 {
	top: 50px;
	left: 0;
	width: 220px;
	animation: floatCard 4s infinite ease-in-out;
}

.card-2 {
	top: 200px;
	right: 20px;
	width: 200px;
	animation: floatCard 4s infinite ease-in-out 1.3s;
}

.card-3 {
	bottom: 50px;
	left: 60px;
	width: 210px;
	animation: floatCard 4s infinite ease-in-out 2.6s;
}

@keyframes floatCard {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
}

.card-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 15px;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	color: var(--color-primary-dark);
}

.floating-card h4 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 8px;
	line-height: 1.4;
}

.floating-card p {
	font-size: 0.95rem;
	color: var(--color-text-light);
	font-weight: 600;
}

/* スクロールダウン */
.scroll-down {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: var(--color-text-light);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	font-weight: 600;
}

.scroll-line {
	width: 2px;
	height: 50px;
	background: linear-gradient(180deg, var(--color-primary), transparent);
	margin: 10px auto 0;
	animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
	0%,
	100% {
		opacity: 0;
		transform: translateY(0);
	}
	50% {
		opacity: 1;
		transform: translateY(20px);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================
   セクション共通スタイル
   ========================================== */
.section-header {
	margin-bottom: 60px;
}

.section-label {
	display: inline-block;
	padding: 8px 20px;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	border-radius: 50px;
	margin-bottom: 20px;
}

.section-title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 900;
	color: var(--color-text);
	margin-bottom: 20px;
	line-height: 1.2;
}

.section-description {
	font-size: 1.1rem;
	color: var(--color-text-light);
	max-width: 600px;
	margin: 0 auto;
}

/* ==========================================
   会社概要セクション
   ========================================== */
.about-section {
	padding: 120px 0;
	position: relative;
	background: var(--color-white);
}

.about-grid {
	max-width: 900px;
	margin: 0 auto;
}

.about-main-card {
	background: var(--color-base);
	border-radius: 32px;
	padding: 60px;
	position: relative;
	overflow: hidden;
	border: 3px solid var(--color-primary-light);
	box-shadow: 0 30px 80px rgba(168, 216, 234, 0.15);
}

.about-pattern {
	position: absolute;
	top: -50px;
	right: -50px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, var(--color-accent-light) 0%, transparent 70%);
	opacity: 0.3;
	border-radius: 50%;
}

.company-name {
	font-size: 2.5rem;
	font-weight: 900;
	color: var(--color-primary-dark);
	margin-bottom: 40px;
	position: relative;
	z-index: 2;
}

.company-info {
	display: grid;
	gap: 30px;
	position: relative;
	z-index: 2;
}

.info-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.info-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-white);
	font-size: 1.2rem;
}

.info-content h4 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 5px;
}

.info-content p {
	font-size: 0.95rem;
	color: var(--color-text);
	line-height: 1.6;
}

.about-decoration {
	position: absolute;
	bottom: -100px;
	right: 100px;
	z-index: 1;
}

.deco-circle {
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);
	border-radius: 50%;
	opacity: 0.4;
}

/* ==========================================
   事業内容セクション
   ========================================== */
.business-section {
	padding: 120px 0;
	background: linear-gradient(180deg, var(--color-base) 0%, var(--color-primary-light) 100%);
}

/* カテゴリータブ - 独創的デザイン */
.category-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin-bottom: 60px;
}

.category-tab {
	padding: 14px 28px;
	background: var(--color-white);
	border: 2px solid var(--color-primary-light);
	border-radius: 50px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-text);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	letter-spacing: 0.05em;
}

.category-tab:hover {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
	transform: translateY(-3px);
}

.category-tab.active {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
	box-shadow: 0 10px 30px rgba(168, 216, 234, 0.4);
}

.tab-icon {
	font-size: 1.1rem;
}

/* 事業カード - マソンリーレイアウト */
.business-masonry {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.business-card {
	background: var(--color-white);
	border-radius: 24px;
	padding: 40px 30px;
	position: relative;
	overflow: hidden;
	border: 2px solid var(--color-primary-light);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 1;
	transform: scale(1);
}

.business-card.hidden {
	display: none;
}

.business-card:hover {
	transform: translateY(-10px) rotate(1deg);
	border-color: var(--color-primary);
	box-shadow: 0 30px 70px rgba(168, 216, 234, 0.3);
}

.card-corner {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, transparent 50%, var(--color-accent-light) 50%);
	border-radius: 0 24px 0 0;
}

.business-card .card-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--color-primary-dark);
	margin-bottom: 20px;
	transition: all 0.4s ease;
}

.business-card:hover .card-icon {
	transform: rotate(10deg) scale(1.1);
}

.business-card h3 {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 15px;
	line-height: 1.4;
}

.business-card p {
	font-size: 0.95rem;
	color: var(--color-text-light);
	line-height: 1.7;
}

/* ==========================================
   お問い合わせセクション
   ========================================== */
.contact-section {
	padding: 120px 0;
	background: var(--color-white);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.info-card {
	background: var(--color-base);
	border: 2px solid var(--color-primary-light);
	border-radius: 20px;
	padding: 30px;
	transition: all 0.3s ease;
}

.info-card:hover {
	transform: translateY(-5px);
	border-color: var(--color-primary);
}

.info-card-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-size: 1.3rem;
	margin-bottom: 15px;
}

.info-card h4 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	margin-bottom: 10px;
}

.info-card p {
	font-size: 0.95rem;
	color: var(--color-text);
	line-height: 1.7;
}

/* フォームスタイル */
.contact-form-container {
	background: var(--color-base);
	border: 2px solid var(--color-primary-light);
	border-radius: 24px;
	padding: 50px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.form-group label {
	font-weight: 600;
	color: var(--color-text);
	font-size: 0.95rem;
}

.required {
	color: var(--color-accent-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
	padding: 15px 20px;
	border: 2px solid var(--color-primary-light);
	border-radius: 12px;
	font-size: 1rem;
	font-family: 'Noto Sans JP', sans-serif;
	background: var(--color-white);
	color: var(--color-text);
	transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(168, 216, 234, 0.2);
}

.form-group textarea {
	resize: vertical;
	min-height: 150px;
}

.submit-btn {
	padding: 18px 50px;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: var(--color-white);
	border: none;
	border-radius: 50px;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	align-self: flex-start;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	letter-spacing: 0.05em;
}

.submit-btn:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 50px rgba(168, 216, 234, 0.5);
}

/* ==========================================
   フッター
   ========================================== */
.footer {
	background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
	color: var(--color-white);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 60px;
	margin-bottom: 40px;
}

.footer-logo {
	font-size: 2rem;
	font-weight: 900;
	margin-bottom: 15px;
}

.footer-description {
	font-size: 0.95rem;
	line-height: 1.8;
	opacity: 0.9;
}

.footer-title {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 20px;
}

.footer-links,
.footer-contact {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-links a {
	color: var(--color-white);
	text-decoration: none;
	opacity: 0.9;
	transition: all 0.3s ease;
	font-size: 0.95rem;
}

.footer-links a:hover {
	opacity: 1;
	transform: translateX(5px);
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	opacity: 0.9;
	line-height: 1.7;
}

.footer-contact i {
	margin-top: 3px;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 30px;
	text-align: center;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* ==========================================
   レスポンシブデザイン
   ========================================== */
@media (max-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.hero-side {
		display: none;
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding: 140px 0 60px;
	}

	.hero-title {
		font-size: 2.5rem;
	}

	.section-title {
		font-size: 2rem;
	}

	.about-main-card {
		padding: 40px 30px;
	}

	.business-masonry {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.form-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.contact-form-container {
		padding: 30px;
	}

	.category-tabs {
		gap: 10px;
	}

	.category-tab {
		font-size: 0.85rem;
		padding: 10px 20px;
	}
}

@media (max-width: 480px) {
	.hero-buttons {
		flex-direction: column;
		width: 100%;
	}

	.btn-primary,
	.btn-secondary {
		width: 100%;
		justify-content: center;
	}

	.about-main-card {
		padding: 30px 20px;
	}

	.company-name {
		font-size: 1.8rem;
	}
}

/* ==========================================
   カスタムスクロールバー
   ========================================== */
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: var(--color-base);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--color-primary-dark), var(--color-accent-dark));
}

/* ==========================================
   Thanks セクション
   ========================================== */
.thanks-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-base) 0%, var(--color-primary-light) 100%);
	padding: 120px 20px;
	text-align: center;
}

.thanks-inner {
	background: var(--color-white);
	border-radius: 32px;
	padding: 80px 60px;
	max-width: 720px;
	width: 100%;
	box-shadow: 0 30px 80px rgba(168, 216, 234, 0.25);
	border: 3px solid var(--color-primary-light);
	animation: fadeInUp 1s ease-out;
}

.thanks-badge {
	display: inline-block;
	padding: 10px 24px;
	margin-bottom: 30px;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	border-radius: 50px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
}

.thanks-title {
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	font-weight: 900;
	line-height: 1.3;
	margin-bottom: 30px;
	color: var(--color-text);
}

.thanks-text {
	font-size: 1.05rem;
	line-height: 1.9;
	color: var(--color-text-light);
	margin-bottom: 40px;
}

.thanks-note {
	background: var(--color-base);
	border-radius: 16px;
	padding: 20px;
	font-size: 0.9rem;
	color: var(--color-text-light);
	margin-bottom: 40px;
}

.thanks-actions {
	display: flex;
	justify-content: center;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.thanks-inner {
		padding: 50px 30px;
	}

	.thanks-text {
		font-size: 1rem;
	}
}
@media (max-width: 500px) {
	.thanks-section {
		padding: 120px 16px 24px;
	}

	.thanks-inner {
		padding: 40px 20px;
		border-radius: 24px;
	}

	.thanks-badge {
		margin-bottom: 20px;
		font-size: 0.75rem;
		padding: 8px 18px;
	}

	.thanks-title {
		font-size: 1.8rem;
		line-height: 1.25;
		margin-bottom: 20px;
	}

	.thanks-text {
		font-size: 0.8rem;
		line-height: 1.75;
		margin-bottom: 15px;
	}

	.thanks-note {
		padding: 16px;
		font-size: 0.8rem;
		margin-bottom: 30px;
		padding-left: 0;
		padding-right: 0;
	}

	.thanks-actions .btn-primary {
		padding: 16px 24px;
		font-size: 0.95rem;
		width: 100%;
	}
}