/* ===== RESET & BASE STYLES (from Tailwind CSS) ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid #e5e7eb;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* reCAPTCHAのバッジを非表示 */
.grecaptcha-badge {
	visibility: hidden;
}

body {
	margin: 0;
	font-family: inherit;
	line-height: inherit;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #ffffff;
	color: #1f2937;
	letter-spacing: 0.05em; /* tracking-wider */
	opacity: 0; /* Initial state for fade-in */
	animation: fadeIn 1s ease-in forwards; /* Apply fade-in animation */
}

@keyframes fadeIn {
	from {
		opacity: 0.6;
	}
	to {
		opacity: 1;
	}
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main.main {
	flex: 1 1 0%;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: inherit;
}

h1,
h2,
h3,
h4 {
	font-size: inherit;
	font-weight: inherit;
}

button {
	cursor: pointer;
	background-color: transparent;
	background-image: none;
}

/* ===== UTILITY CLASSES ===== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ===== HEADER ===== */
.header {
	position: fixed; /* stickyからfixedに変更 */
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background-color: transparent; /* 初期状態は透明 */
	backdrop-filter: blur(0px); /* 初期状態はぼかしなし */
	transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; /* アニメーションを追加 */
	box-shadow: none; /* 初期状態は影なし */
}

/* スクロール時のヘッダーのスタイル */
.header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.8); /* スクロール時は半透明の白 */
	backdrop-filter: blur(4px); /* スクロール時はぼかしあり */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* スクロール時は影を追加 */
}

/* スマートフォン表示時のヘッダーのスタイル */
@media (max-width: 1023px) {
	.header {
		background-color: transparent; /* 初期状態は透明 */
		box-shadow: none; /* 初期状態は影なし */
	}

	.header__mobile-menu-button svg {
		color: #ffffff; /* 初期状態は白 */
	}

	.header.is-scrolled {
		background-color: rgba(255, 255, 255, 0.8); /* スクロール時は半透明の白 */
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* スクロール時は影を追加 */
	}

	.header.is-scrolled .header__mobile-menu-button svg {
		color: #4b5563; /* スクロール時は元の色 */
	}
}

.header__container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	height: 3.5rem; /* h-20 */
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem; /* px-4 */
}

@media (min-width: 768px) {
	.header__container {
		padding: 0 1.5rem; /* md:px-6 */
	}
}

.header__logo {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* gap-2 */
	padding: 0.5rem;
	height: 100%;
}

.header__logo-image {
	height: 100%;
	width: 100%;
}
.header__logo-image img {
	height: 100%;
	/* width: 100%; */
}

@media (min-width: 768px) {
	.header__logo-text--sub {
		display: inline; /* md:inline */
	}
}

.header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.header__nav {
		display: flex;
		align-items: center;
		gap: 2rem; /* gap-8 */
	}
}

.header__nav-link {
	/* font-size: 0.875rem;  */
	font-size: 1rem;
	font-weight: 400; /* font-normal */
	transition: color 0.3s ease;
	outline: none; /* フォーカス時の枠線を削除 */
}

.header__nav-link:focus {
	outline: none; /* フォーカス時の枠線を削除 */
}

.header__nav-link:hover {
	color: #dc2626; /* hover:text-red-600 */
}

/* Header Navigation with Submenu */
@media (min-width: 1024px) {
	.header__nav {
		display: flex;
		align-items: center;
		gap: 3rem; /* gap-8 */
	}

	.header__nav-item {
		position: relative;
	}

	.header__nav-item > .header__nav-link {
		/* padding-right: 1.5rem; /* サブメニューアイコンのためのスペース */
		position: relative;
		color: #1f2937; /* デフォルトの色 */
		transition: color 0.3s ease;
	}

	/* ホームページでのみ最上段の時（is-scrolledがない時）の文字色を白に */
	.home-page .header:not(.is-scrolled) .header__nav-link {
		color: white;
	}

	/* ホームページでスクロール時の文字色を元に戻す */
	.home-page .header.is-scrolled .header__nav-link {
		color: #1f2937;
	}

	/* ▼アイコンはspan.submenu-toggleに移動するため削除 */
	.header__nav-item > .header__nav-link::after {
		display: none;
	}

	.submenu-toggle {
		position: absolute;
		right: -1.6rem; /* リンクの右側に配置 */
		top: 50%;
		transform: translateY(-50%);
		font-size: 0.75rem;
		color: #6b7280; /* デフォルトの色 */
		cursor: pointer;
		padding: 0.5rem; /* ホバー領域を広げる */
		transition: color 0.3s ease, transform 0.3s ease; /* Add transition for smooth color and transform change */
	}

	/* ホームページでのみ最上段の時（is-scrolledがない時）のサブメニューアイコンの色を白に */
	.home-page .header:not(.is-scrolled) .submenu-toggle {
		color: white;
	}

	/* ホームページでスクロール時のサブメニューアイコンの色を元に戻す */
	.home-page .header.is-scrolled .submenu-toggle {
		color: #6b7280;
	}

	.submenu-toggle:hover,
	.header__nav-item.submenu--active .submenu-toggle {
		color: #dc2626; /* Change color on hover */
		transform: translateY(-40%) scale(1.1); /* Move down slightly and enlarge */
	}

	.submenu {
		position: absolute;
		top: calc(100% + 0.5rem); /* 親要素の下に少しスペースを開けて配置 */
		left: 100%; /* 中央寄せ */
		transform: translate(-50%, 10px); /* 中央寄せ & アニメーション */
		background-color: rgba(255, 255, 255, 0.95); /* 背景を少し濃く */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-radius: 0.375rem;
		min-width: 220px; /* 幅を広げる */
		padding: 0.5rem 0; /* 上下のパディングのみ */
		z-index: 60;
		list-style: none;
		display: block; /* 縦並びに変更 */

		/* Animation properties */
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
	}

	.header__nav-item.submenu--active .submenu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0); /* アニメーションの終点 */
	}

	.submenu--active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.submenu li {
		/* flex-basis is no longer needed */
	}

	.submenu li a {
		display: block;
		padding: 0.75rem 1.5rem; /* パディングを調整 */
		font-size: 0.875rem;
		color: #1f2937;
		white-space: nowrap;
		transition: background-color 0.2s ease, color 0.2s ease; /* トランジションを追加 */
		outline: none; /* フォーカス時の枠線を削除 */
	}

	.submenu li a:focus {
		outline: none; /* フォーカス時の枠線を削除 */
	}

	.submenu li a:hover {
		background-color: #dc2626; /* ホバー時の背景色を赤に */
		color: #ffffff; /* ホバー時の文字色を白に */
	}

	/* ホバーはJavaScriptで制御するため、CSSの:hoverは削除 */
	/* .header__nav-item:hover .submenu {
    display: block;
  } */
}

.header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* gap-2 */
}

.header__cta-button {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	border-radius: 0.375rem; /* rounded-md */
	font-size: 0.875rem; /* text-sm */
	font-weight: 500; /* font-medium */
	height: 2.5rem; /* h-10 */
	padding: 0 1rem; /* px-4 py-2 */
	transition: background-color 0.2s ease;
}

.header__cta-button:hover {
	background-color: #f3f4f6; /* hover:bg-accent */
}

@media (min-width: 640px) {
	.header__cta-button {
		display: inline-flex; /* sm:flex */
	}
}

.header__cta-icon {
	margin-right: 0.5rem; /* mr-2 */
	height: 1rem; /* h-4 */
	width: 1rem; /* w-4 */
	stroke-width: 2;
}

.header__mobile-menu-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background-color: transparent;
	border: none;
	cursor: pointer;
	z-index: 100; /* メニューより手前に表示 */
	position: relative;
	padding: 0;
}

.hamburger-line {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: #4b5563; /* デフォルトの色 */
	transition: all 0.3s ease;
	position: absolute;
}

.hamburger-line:nth-child(1) {
	transform: translateY(-6px);
}

.hamburger-line:nth-child(3) {
	transform: translateY(6px);
}

/* スクロール時のハンバーガーラインの色 */
.header.is-scrolled .hamburger-line {
	background-color: #4b5563;
}

/* ホームページでスクロールしていない時のハンバーガーラインの色 */
.home-page .header:not(.is-scrolled) .hamburger-line {
	background-color: #ffffff;
}

/* メニューが開いた時のハンバーガーボタンのアニメーション */
body.menu-open .header__mobile-menu-button .hamburger-line:nth-child(1) {
	transform: translateY(0) rotate(45deg);
}

body.menu-open .header__mobile-menu-button .hamburger-line:nth-child(2) {
	opacity: 0;
}

body.menu-open .header__mobile-menu-button .hamburger-line:nth-child(3) {
	transform: translateY(0) rotate(-45deg);
}

@media (min-width: 1024px) {
	.header__mobile-menu-button {
		display: none;
	}
}

/* Mobile Menu (Drawer Style) */
@media (max-width: 1023px) {
	.header__nav {
		position: fixed;
		top: 0;
		left: 0;
		transform: translateX(-100%); /* 画面外に配置 */
		width: 80%; /* メニューの幅 */
		max-width: 300px; /* 最大幅 */
		height: 100vh;
		background-color: #ffffff;
		box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
		padding: 4rem 1rem 1rem; /* ヘッダーの高さ分を考慮 */
		z-index: 90; /* オーバーレイより手前 */
		display: flex;
		flex-direction: column;
		transition: transform 0.3s ease-out;
		overflow-y: auto; /* メニュー項目が多い場合にスクロール可能にする */
	}

	body.menu-open .header__nav {
		transform: translateX(0); /* 画面内にスライドイン */
	}

	/* モバイルメニュー内のナビゲーションリンク */
	.header__nav .header__nav-link {
		padding: 0.75rem 1rem;
		border-bottom: 1px solid #e5e7eb;
		color: #4b5563;
		display: block;
		background-color: #ffffff;
		transition: background-color 0.2s ease, color 0.2s ease;
		outline: none; /* フォーカス時の枠線を削除 */
	}

	.header__nav .header__nav-link:focus {
		outline: none; /* フォーカス時の枠線を削除 */
	}

	.header__nav .header__nav-link:hover,
	.header__nav .header__nav-link:active {
		background-color: #f3f4f6;
		color: #dc2626;
	}

	/* モバイルメニュー内のサブメニュー */
	.header__nav .header__nav-item {
		width: 100%;
		background-color: #ffffff;
	}

	.header__nav .header__nav-item > .header__nav-link {
		position: relative;
		padding-right: 2.5rem; /* 矢印アイコンのためのスペース */
	}

	.header__nav .header__nav-item:hover,
	.header__nav .header__nav-item:active {
		/* background-color: #f3f4f6; */
		color: #dc2626;
	}

	.header__nav .submenu-toggle {
		display: none; /* モバイルメニューでは矢印を表示 */
		position: absolute;
		right: 1rem;
		top: 50%;
		transform: translateY(-50%) rotate(0deg);
		transition: transform 0.3s ease, color 0.2s ease;
		color: #6b7280;
		cursor: pointer;
		padding: 0.5rem;
	}

	.header__nav .header__nav-item:hover .submenu-toggle,
	.header__nav .header__nav-item:active .submenu-toggle {
		color: #1f2937;
	}

	.header__nav .submenu {
		position: static; /* モバイルでは通常のフローに */
		display: flex; /* デフォルトでは非表示 */
		box-shadow: none;
		border-radius: 0;
		/* background-color: #f9fafb; */
		padding: 0;
		margin-left: 1rem;
		flex-direction: column;
		gap: 0;
		list-style-type: none;
	}

	/* .header__nav .header__nav-item.submenu--active .submenu-toggle {
        transform: translateY(-50%) rotate(180deg);
    }

    .header__nav .header__nav-item.submenu--active .submenu {
        display: flex;
    } */

	.header__nav .submenu li {
		/* background-color: #f9fafb; */
	}

	.header__nav .submenu li a {
		padding: 0.5rem 1rem;
		color: #4b5563;
		border-bottom: 1px solid #e5e7eb;
		display: block;
		/* background-color: #f9fafb; */
		transition: background-color 0.2s ease, color 0.2s ease;
		outline: none; /* フォーカス時の枠線を削除 */
	}

	.header__nav .submenu li a:focus {
		outline: none; /* フォーカス時の枠線を削除 */
	}

	.header__nav .submenu li:last-child a {
		border-bottom: none; /* 最後の項目は下線なし */
	}

	.header__nav .submenu li:hover,
	.header__nav .submenu li:active {
		background-color: #f3f4f6;
	}

	.header__nav .submenu li a:hover,
	.header__nav .submenu li a:active {
		background-color: #f3f4f6;
		color: #dc2626;
	}

	/* Mobile Menu Overlay */
	.mobile-menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 40; /* メニューより下、コンテンツより上 */
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
	}

	body.menu-open .mobile-menu-overlay {
		opacity: 1;
		visibility: visible;
	}
}

/* ===== HERO SECTION ===== */
.hero {
	position: relative;
	width: 100%;
	height: 96vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.hero {
		height: 90vh;
	}
}

.slick-next {
	right: 0;
	display: none;
}
.slick-prev {
	z-index: 10;
	left: 0;
	display: none;
}
.slick-track {
	filter: brightness(0.8);
}

.hero__slider {
	width: 100%;
	height: 100%;
	margin-bottom: 0 !important; /* mb-0 */
	display: none; /* 追加: 初期表示を非表示にする */
}

.hero__slide {
	position: relative;
	width: 100%;
	height: 96vh;
	display: flex !important; /* for slick slider */
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.hero__slide {
		height: 90vh;
	}
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2); /* bg-black/20 */
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__content {
	position: relative;
	z-index: 20;
	text-align: center;
	color: white;
	padding: 0 1rem;
}

.hero__title {
	font-family: serif; /* font-serif */
	text-shadow: 2px 2px 12px #000d;
	color: #fffe;
	font-size: 2.25rem; /* text-4xl */
	line-height: 1.25; /* leading-tight */
	font-weight: 700; /* font-bold */
}

@media (min-width: 768px) {
	.hero__title {
		font-size: 3.75rem; /* md:text-6xl */
	}
}

@media (min-width: 1024px) {
	.hero__title {
		font-size: 4.5rem; /* lg:text-7xl */
	}
}

.hero__description {
	text-shadow: 2px 4px 2px rgba(0, 0, 0, 0.4);
	margin-top: 1.5rem; /* mt-6 */
	max-width: 42rem; /* max-w-2xl */
	margin-left: auto;
	margin-right: auto;
	font-size: 1.125rem; /* text-lg */
	color: rgba(255, 255, 255, 0.9); /* text-white/90 */
}

@media (min-width: 768px) {
	.hero__description {
		font-size: 1.25rem; /* md:text-xl */
	}
}

.hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	border-radius: 9999px; /* rounded-full */
	font-size: 1rem; /* text-base */
	font-weight: 600; /* font-semibold */
	height: 2.75rem; /* h-11 */
	margin-top: 2rem; /* mt-8 */
	background-color: #dc2626; /* bg-red-600 */
	color: white;
	padding: 1.5rem 2rem; /* px-8 py-6 */
	transition: background-color 0.2s ease;
}

.hero__button:hover {
	background-color: #b91c1c; /* hover:bg-red-700 */
}

.hero__button svg {
	margin-left: 0.5rem; /* ml-2 */
	height: 1.25rem; /* h-5 */
	width: 1.25rem; /* w-5 */
	stroke-width: 2;
}

/* ===== GREETING SECTION ===== */
.greeting {
	width: 100%;
	padding: 5rem 0; /* py-20 */
	background-color: #ffffff; /* white background */
}

/* 2つ目のgreetingセクションに上部の余白を追加 */
.greeting + .greeting {
	padding-top: 0; /* 連続するgreetingセクションの上部パディングを調整 */
}

@media (min-width: 768px) {
	.greeting {
		padding: 8rem 0; /* md:py-32 */
	}
	.greeting + .greeting {
		padding-top: 0; /* 連続するgreetingセクションの上部パディングを調整 */
	}
}

.greeting__container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem; /* px-4 */
}

@media (min-width: 768px) {
	.greeting__container {
		padding: 0 1.5rem; /* md:px-6 */
	}
}

.greeting__grid {
	display: flex; /* モバイルではflexboxを使用 */
	flex-direction: column; /* デフォルトはテキストが上、画像が下 */
	align-items: start; /* 上揃えに変更 */
	gap: 3rem; /* gap-12 */
}

/* 2つ目のgreetingセクション（信頼と技術革新）のモバイル表示で画像が下に来るように */
#greeting-innovation .greeting__grid {
	flex-direction: column-reverse;
}

@media (min-width: 768px) {
	.greeting__grid {
		display: grid; /* デスクトップではグリッドに戻す */
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
		gap: 6rem; /* md:gap-24 */
		flex-direction: unset; /* デスクトップではflex-directionをリセット */
	}
	/* デスクトップでは#greeting-innovationのflex-directionをリセット */
	#greeting-innovation .greeting__grid {
		flex-direction: unset;
	}
}

.greeting__content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* space-y-6 */
}

.greeting__title {
	text-align: center;
	font-size: 1.875rem; /* text-3xl */
	font-weight: 700; /* font-bold */
	letter-spacing: -0.025em; /* tracking-tight */
	color: #111827; /* text-gray-900 */
}

@media (min-width: 768px) {
	.greeting__title {
		text-align: left;
		font-size: 2.25rem; /* md:text-4xl */
	}
}
.greeting__text {
	font-size: 1rem; /* text-base */
	color: #4b5563; /* text-gray-600 */
	line-height: 1.625; /* leading-relaxed */
}

.greeting__text p {
	margin-bottom: 1rem;
}

.greeting__text h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 1rem;
}

.greeting__text h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin-top: 1rem;
}

.greeting__signature {
	text-align: right;
	font-weight: 600; /* font-semibold */
	color: #374151; /* text-gray-800 */
	margin-top: 1rem; /* mt-4 */
}

.greeting__image {
	position: relative;
	height: 400px;
	width: 100%;
}

@media (min-width: 768px) {
	.greeting__image {
		height: 500px; /* md:h-[500px] */
	}
}

.greeting__image img {
	border-radius: 0.375rem; /* rounded-md */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
	object-fit: cover;
	position: absolute;
	height: 100%;
	width: 100%;
}

.greeting-item__title {
	text-align: center;
	font-size: 1.1rem; /* text-2xl */
	font-weight: 600; /* font-semibold */
	color: #1f2937; /* text-gray-800 */
	margin-bottom: 0.5rem; /* mb-2 */
}

@media (min-width: 768px) {
	.greeting-item__title {
		text-align: left;
	}
}

/* ===== PROJECTS SECTION ===== */
.projects {
	width: 100%;
	padding: 5rem 0; /* py-20 */
	background-color: #ffffff; /* white background */
}

@media (min-width: 768px) {
	.projects {
		padding: 8rem 0; /* md:py-32 */
	}
}

.projects__container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem; /* px-4 */
}

@media (min-width: 768px) {
	.projects__container {
		padding: 0 1.5rem; /* md:px-6 */
	}
}

.projects__header {
	text-align: center;
	margin-bottom: 4rem; /* mb-16 */
}

.projects__title {
	font-size: 1.875rem; /* text-3xl */
	font-weight: 700; /* font-bold */
	letter-spacing: -0.025em; /* tracking-tight */
	color: #111827; /* text-gray-900 */
}

@media (min-width: 768px) {
	.projects__title {
		font-size: 2.25rem; /* md:text-4xl */
	}
}

.projects__subtitle {
	font-size: 1.125rem; /* text-lg */
	color: #6b7280; /* text-gray-500 */
	margin-top: 0.5rem; /* mt-2 */
}

.projects__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
	gap: 0.8rem; /* gap-8 */
}

@media (min-width: 520px) {
	.projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
	}
}

@media (min-width: 1024px) {
	.projects__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr)); /* lg:grid-cols-4 */
		gap: 0.5rem;
	}
}

.project-item {
	position: relative;
	overflow: hidden;
	height: 8rem; /* h-80 */
	border-radius: 0.375rem; /* rounded-md */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
	transition: all 0.3s ease;
}

@media (min-width: 520px) {
	.project-item {
		height: 10rem;
	}
}

/* PC表示 */
@media (min-width: 1024px) {
	.project-item {
		height: 17rem;
	}
}
.project-item:hover {
	transform: translateY(-0.5rem); /* hover:-translate-y-2 */
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
}

.project-item__image {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}

.project-item:hover .project-item__image {
	transform: scale(1.05);
}

.project-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0), transparent);
}

.project-item__content {
	position: relative;
	z-index: 10;
	height: 100%;
	padding: 1.5rem 1.5rem 1.15rem 1.5rem; /* p-6 */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: white;
}

@media (min-width: 520px) {
	.project-item__content {
		padding-bottom: 1.5rem;
	}
}

.project-item__title {
	font-size: 1rem; /* 1.5rem text-2xl */
	font-weight: 700; /* font-bold */
	/* margin-bottom: 0.75rem; mb-3 */
}
/* PC表示 */
@media (min-width: 1024px) {
	.project-item__title p {
		height: 3.5rem;
	}
}

.project-item__text {
	color: rgba(255, 255, 255, 0.9); /* text-white/90 */
	font-size: 0.875rem; /* text-sm */
	line-height: 1.625; /* leading-relaxed */
}

/* ===== COMPANY GUIDE SECTION ===== */
.company-guide {
	width: 100%;
	padding: 5rem 0; /* py-20 */
	background-color: #f9fafb; /* bg-gray-50 */
}

@media (min-width: 768px) {
	.company-guide {
		padding: 8rem 0; /* md:py-32 */
	}
}

.company-guide__container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem; /* px-4 */
}

@media (min-width: 768px) {
	.company-guide__container {
		padding: 0 1.5rem; /* md:px-6 */
	}
}

.company-guide__content {
	text-align: center;
	max-width: 42rem; /* max-w-2xl */
	margin-left: auto;
	margin-right: auto;
}

.company-guide__title {
	font-size: 1.875rem; /* text-3xl */
	font-weight: 700; /* font-bold */
	letter-spacing: -0.025em; /* tracking-tight */
	color: #111827; /* text-gray-900 */
}

@media (min-width: 768px) {
	.company-guide__title {
		font-size: 2.25rem; /* md:text-4xl */
	}
}

.company-guide__subtitle {
	font-size: 1.125rem; /* text-lg */
	color: #6b7280; /* text-gray-500 */
	margin-top: 0.5rem; /* mt-2 */
}

.company-guide__text {
	margin-top: 1.5rem; /* mt-6 */
	font-size: 1rem; /* text-base */
	color: #4b5563; /* text-gray-600 */
	line-height: 1.625; /* leading-relaxed */
}

@media (min-width: 768px) {
	.company-guide__text {
		font-size: 1.125rem; /* md:text-lg */
	}
}

.company-guide__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	border-radius: 9999px; /* rounded-full */
	font-size: 1rem; /* text-base */
	font-weight: 600; /* font-semibold */
	height: 2.75rem; /* h-11 */
	margin-top: 2rem; /* mt-8 */
	background-color: #dc2626; /* bg-red-600 */
	color: white;
	padding: 1.5rem 2rem; /* px-8 py-6 */
	transition: background-color 0.2s ease;
}

.company-guide__button:hover {
	background-color: #b91c1c; /* hover:bg-red-700 */
}

/* ===== CONTACT & RECRUIT WRAPPER ===== */
.contact-recruit-wrapper {
	width: 100%;
	padding: 8rem 2rem 8rem 2rem;
	/* margin-bottom: 3rem; */
	background-color: #f9fafb; /* bg-gray-50 */
}

.contact-recruit-container {
	display: flex;
	flex-direction: column;
	max-width: 512px;
	margin: 0 auto;
	gap: 1.5rem; /* no gap since we want seamless sections */
}

@media (min-width: 768px) {
	.contact-recruit-container {
		flex-direction: row; /* horizontal layout on desktop */
		max-width: 1280px;
	}
}

/* ===== CONTACT & RECRUIT SECTIONS ===== */
.contact,
.recruit {
	flex: 1; /* equal width distribution */
	width: 100%;
	background-color: transparent; /* inherit from wrapper */
}

.contact__container,
.recruit__container {
	max-width: none; /* remove max-width constraint for flexbox */
	margin: 0; /* remove auto margins */
	/* padding: 1rem 1rem;  */
	height: 100%;
}

@media (min-width: 768px) {
	.contact__container,
	.recruit__container {
		padding: 0rem 1.5rem;
	}
}

.contact .contact__container,
.recruit .recruit__container {
	position: relative;
	border-radius: 0.5rem;
	overflow: hidden;
	/* border: 1px solid #e5e7eb;  */
}

.contact__image,
.recruit__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact__content,
.recruit__content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 1.5rem; /* reduced padding */
	background-color: #ffffff; /* white background */
	color: #111827; /* dark text for readability */
	border-radius: 1.375rem;
	text-align: left;
	align-items: stretch;
}

@media (min-width: 768px) {
	.contact__content,
	.recruit__content {
		padding: 2rem; /* reduced from 4rem */
	}
}

.contact__title,
.recruit__title {
	font-size: 1.5rem; /* reduced from 1.875rem */
	font-weight: 700;
	color: #111827; /* dark gray */
}

@media (min-width: 768px) {
	.contact__title,
	.recruit__title {
		font-size: 1.875rem; /* reduced from 2.25rem */
	}
}

.contact__subtitle,
.recruit__subtitle {
	margin-top: 0.25rem; /* reduced margin */
	font-size: 1rem; /* reduced from 1.125rem */
	color: #6b7280; /* medium gray */
}

.contact__text,
.recruit__text {
	margin-top: 0.75rem; /* reduced margin */
	max-width: 36rem;
	color: #374151; /* dark gray for body text */
	font-size: 0.875rem; /* slightly smaller text */
	line-height: 1.5;
}

.contact__button,
.recruit__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	border-radius: 9999px;
	font-size: 0.875rem; /* reduced font size */
	font-weight: 600;
	height: 3rem; /* 2.25rem slightly smaller height */
	margin-top: 1.25rem; /* reduced margin */
	/* background-color: #999999; */
	background-color: #dc2626;
	color: white; /* white text */
	padding: 1rem 1.5rem; /* reduced padding */
	transition: background-color 0.2s ease;
}

.contact__button:hover,
.recruit__button:hover {
	background-color: #b91c1c; /* darker red on hover */
}

/* ===== INVIEW ANIMATION STYLES ===== */
.js-inview-fadein {
	opacity: 0;
	transform: translateY(20px); /* Start slightly below its final position */
	transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

.js-inview-fadein.is-inview {
	opacity: 1;
	transform: translateY(0); /* Move to its final position */
}

/* ===== FOOTER ===== */
.footer {
	background-color: #1f2937; /* bg-gray-800 */
	color: white;
}

.footer__container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 3rem 0 3rem 15vw; /* py-12 px-4 */
}

@media (min-width: 768px) {
	.footer__container {
		padding: 3rem 1.5rem; /* md:px-6 */
	}
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
	gap: 2rem; /* gap-8 */
	text-align: left;
	max-width: 600px; /* モバイル時の最大幅を制限 */
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.footer__grid {
		grid-template-columns: 1.2fr 2fr; /* footer__brandとfooter__linksの比率を調整 */
		text-align: left;
		gap: 3rem; /* 間隔を少し広げる */
		max-width: none; /* デスクトップでは最大幅を解除 */
		margin-left: 0;
		margin-right: 0;
	}
}

.footer__logo {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* gap-2 */
	margin-bottom: 1rem; /* mb-4 */
	justify-content: flex-start;
}
@media (min-width: 768px) {
	.footer__logo {
		/* justify-content: flex-start; */
	}
}

.footer__logo-text--main {
	font-size: 1.125rem; /* 少し大きく */
	font-weight: 700; /* font-bold */
	color: #ef4444; /* text-red-500 */
	letter-spacing: -0.025em; /* tracking-tighter */
}

.footer__logo-text--sub {
	/* font-size: 0.875rem;  */
	font-weight: 700; /* font-medium */
}

.footer__address {
	font-size: 0.8125rem; /* 少し小さく */
	color: #9ca3af; /* text-muted-foreground */
	font-style: normal;
	line-height: 1.6;
}

.footer__links-title {
	font-weight: 700; /* font-bold */
	margin-bottom: 1rem; /* mb-4 */
	color: white; /* 文字色を明示的に指定 */
}

.footer__links-list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2列に変更 */
	gap: 0.5rem 1.5rem; /* 縦方向のgapと横方向のgap */
	font-size: 0.875rem; /* text-sm */
	align-items: start; /* 上揃え */
}

/* ご挨拶と会社案内を左列に縦に並べる */
.footer__links-list > li:nth-child(1),
.footer__links-list > li:nth-child(2) {
	grid-column: 1; /* 左列に配置 */
}

.footer__links-list > li:nth-child(1) {
	grid-row: 1; /* ご挨拶を上に */
}

.footer__links-list > li:nth-child(2) {
	grid-row: 2; /* 会社案内を下に */
}

/* 技術情報を右列に配置 */
.footer__links-list > li:nth-child(3) {
	grid-column: 2; /* 右列に配置 */
	grid-row: 1 / 3; /* 2行分の高さを使用 */
}

@media (max-width: 767px) {
	.footer__links-list {
		grid-template-columns: 1fr; /* モバイルでは1列に */
	}

	.footer__links-list > li:nth-child(1),
	.footer__links-list > li:nth-child(2),
	.footer__links-list > li:nth-child(3) {
		grid-column: 1; /* すべて1列に */
		grid-row: auto; /* 行を自動に */
	}
}

.footer__links-list a {
	outline: none; /* フォーカス時の枠線を削除 */
}

.footer__links-list a:focus {
	outline: none; /* フォーカス時の枠線を削除 */
}

.footer__links-list a:hover {
	text-decoration: underline;
}

.footer__links-list > li {
	/* 元のデザインを維持 */
}

.footer__links-sublist {
	list-style: none;
	margin-left: 1rem;
	margin-top: 0.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.8125rem; /* 少し小さめのフォントサイズ */
}

.footer__links-sublist a {
	color: #9ca3af; /* text-muted-foreground */
	transition: color 0.2s ease;
	outline: none; /* フォーカス時の枠線を削除 */
}

.footer__links-sublist a:focus {
	outline: none; /* フォーカス時の枠線を削除 */
}

.footer__links-sublist a:hover {
	color: white;
	text-decoration: underline;
}

.footer__bottom {
	margin-top: 2rem; /* mt-8 */
	border-top: 1px solid rgba(255, 255, 255, 0.2); /* border-border/20 */
	padding-top: 2rem; /* pt-8 */
	text-align: center;
	font-size: 0.875rem; /* text-sm */
	color: #9ca3af; /* text-muted-foreground */
}