@charset "UTF-8";

/* ==========================================================================
   bark design — Main Stylesheet
   ブロブ主役・物質感のあるカード・ミニマル背景版
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */
:root {
	/* PINK × PUR（デフォルトテーマ） */
	--accent: #ff5599;
	--accent-text: #ff2d81;
	--accent-deep: #b070ff;

	/* ブロブカラー（添付画像Image1, 2のような有機的な色） */
	--blob-pink: #ff8db8;
	--blob-purple: #b070ff;
	--blob-orange: #ff9966;
	--blob-blue: #a8c8ff;
	--blob-pale: #ffd0e0;
	--blob-cream: #fff0d8;

	/* 背景・テキスト（添付画像のような白に近いグレージュ） */
	--bg: #f5f3ef;
	--bg-pure: #faf9f6;
	--text: #1a1a1a;
	--text-muted: #6b6b6b;
	--text-light: #9a9a9a;

	/* ガラス・カード */
	--glass-bg: rgba(255, 255, 255, 0.45);
	--glass-bg-deep: rgba(255, 255, 255, 0.65);
	--glass-border: rgba(255, 255, 255, 0.85);
	--glass-blur: 24px;

	/* 物質感シャドウ（多層シャドウで厚みを表現） */
	--shadow-glass:
		0 1px 2px rgba(26, 26, 26, 0.04),
		0 4px 12px rgba(26, 26, 26, 0.06),
		0 16px 40px rgba(26, 26, 26, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(255, 255, 255, 0.3);

	--shadow-glass-hover:
		0 2px 4px rgba(26, 26, 26, 0.05),
		0 8px 24px rgba(26, 26, 26, 0.08),
		0 24px 56px rgba(26, 26, 26, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 0 rgba(255, 255, 255, 0.4);

	/* フォント */
	--font-syne: 'Syne', sans-serif;
	--font-ja: 'Noto Sans JP', sans-serif;

	/* レイアウト */
	--container: 1280px;
	--container-sm: 760px;
	--container-px: clamp(20px, 4vw, 48px);

	scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-ja);
	font-weight: 300;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

::selection {
	background: var(--accent);
	color: #fff;
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.03);
}

::-webkit-scrollbar-thumb {
	background: rgba(214, 54, 112, 0.3);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent-text);
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

button {
	font: inherit;
	cursor: pointer;
	background: none;
	border: none;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes blobMorph1 {

	0%,
	100% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	33% {
		border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
		transform: translate(40px, -30px) rotate(15deg) scale(1.05);
	}

	66% {
		border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%;
		transform: translate(-30px, 40px) rotate(-10deg) scale(0.95);
	}
}

@keyframes blobMorph2 {

	0%,
	100% {
		border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	50% {
		border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%;
		transform: translate(-50px, 30px) rotate(-20deg) scale(1.1);
	}
}

@keyframes blobMorph3 {

	0%,
	100% {
		border-radius: 50% 50% 70% 30% / 50% 70% 30% 50%;
		transform: translate(0, 0) rotate(0deg);
	}

	50% {
		border-radius: 70% 30% 50% 50% / 30% 50% 70% 50%;
		transform: translate(30px, -40px) rotate(25deg);
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes pulseLine {

	0%,
	100% {
		opacity: 1;
		transform: scaleY(1);
	}

	50% {
		opacity: 0.4;
		transform: scaleY(0.8);
	}
}

.fade-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible {
	opacity: 1;
	transform: translateY(0);
}

.fade-up.delay-1.visible {
	transition-delay: 0.1s;
}

.fade-up.delay-2.visible {
	transition-delay: 0.25s;
}

.fade-up.delay-3.visible {
	transition-delay: 0.4s;
}

.fade-up.delay-4.visible {
	transition-delay: 0.55s;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--container-px);
}

.container--sm {
	max-width: var(--container-sm);
}

/* --------------------------------------------------------------------------
   Site Header (Nav)
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 18px var(--container-px);
	background: rgba(245, 243, 239, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.site-header__logo img {
	/* height: 36px; */
	height: 42px;
	width: auto;
}

.site-nav {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.site-nav a {
	font-family: var(--font-syne);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 500;
}

.site-nav a:hover {
	color: var(--accent-text);
}

.nav-cta {
	background: transparent;
	border: 1px solid var(--accent-text);
	color: var(--accent-text);
	padding: 10px 22px;
	font-family: var(--font-syne);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	transition: all 0.25s;
	border-radius: 2px;
}

.nav-cta:hover {
	background: var(--accent-text);
	color: #fff;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 140px var(--container-px) 100px;
	overflow: hidden;
	isolation: isolate;
}

/* ヒーローのブロブ群 */
.hero-blobs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: -1;
}

.hero-blob {
	position: absolute;
	filter: blur(35px);
	mix-blend-mode: multiply;
}

.hero-blob--1 {
	width: 700px;
	height: 700px;
	top: -10%;
	right: -10%;
	background: radial-gradient(circle at 30% 30%,
			var(--blob-pink) 0%,
			var(--blob-purple) 50%,
			transparent 75%);
	animation: blobMorph1 18s ease-in-out infinite;
	opacity: 0.28;
}

.hero-blob--2 {
	width: 500px;
	height: 500px;
	bottom: 5%;
	left: -8%;
	background: radial-gradient(circle at 60% 40%,
			var(--blob-orange) 0%,
			var(--blob-pale) 60%,
			transparent 80%);
	animation: blobMorph2 22s ease-in-out infinite;
	opacity: 0.22;
}

.hero-blob--3 {
	width: 400px;
	height: 400px;
	top: 50%;
	left: 40%;
	background: radial-gradient(circle at 50% 50%,
			var(--blob-blue) 0%,
			transparent 70%);
	animation: blobMorph3 25s ease-in-out infinite;
	opacity: 0.18;
}

/* グリッド背景（ごく薄く） */
.hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(26, 26, 26, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(26, 26, 26, 0.03) 1px, transparent 1px);
	background-size: 100px 100px;
	z-index: -1;
	pointer-events: none;
}

.hero__inner {
	max-width: var(--container);
	margin: 0 auto;
	width: 100%;
}

.hero__eyebrow {
	font-family: var(--font-syne);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 600;
}

.hero__eyebrow::before {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	background: var(--accent-text);
}

.hero__title {
	font-family: var(--font-syne);
	font-weight: 800;
	font-size: clamp(56px, 11vw, 180px);
	line-height: 0.92;
	letter-spacing: -0.04em;
	margin-bottom: 48px;
	color: var(--text);
	mix-blend-mode: multiply;
	/* ブロブと混ざる */
}

.hero__title .accent {
	color: var(--accent);
	display: inline-block;
}

.hero__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.hero__lead {
	font-size: clamp(15px, 1.4vw, 18px);
	color: var(--text-muted);
	max-width: 460px;
	line-height: 1.9;
}

.hero__signature {
	margin-top: 16px;
	font-size: 13px;
	color: var(--text-light);
	letter-spacing: 0.05em;
}

.hero__actions {
	display: flex;
	gap: 14px;
}

.btn-primary {
	background: var(--accent-text);
	color: #fff;
	border: none;
	padding: 16px 32px;
	font-family: var(--font-syne);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: all 0.25s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 2px;
}

.btn-primary:hover {
	background: var(--accent-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(214, 54, 112, 0.25);
}

.btn-ghost {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--text-muted);
	border: 1px solid rgba(255, 255, 255, 0.7);
	padding: 16px 32px;
	font-family: var(--font-syne);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 500;
	transition: all 0.25s;
	border-radius: 2px;
}

.btn-ghost:hover {
	border-color: var(--accent-text);
	color: var(--accent-text);
	background: rgba(255, 255, 255, 0.8);
}

.scroll-hint {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-syne);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--text-light);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.scroll-hint__line {
	width: 1px;
	height: 50px;
	background: linear-gradient(to bottom, var(--accent-text), transparent);
	animation: pulseLine 2.5s ease-in-out infinite;
	transform-origin: top;
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee-wrap {
	border-top: 1px solid rgba(26, 26, 26, 0.08);
	border-bottom: 1px solid rgba(26, 26, 26, 0.08);
	padding: 14px 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.marquee-inner {
	display: flex;
	gap: 0;
	white-space: nowrap;
	animation: marquee 40s linear infinite;
	will-change: transform;
}

.marquee-item {
	font-family: var(--font-syne);
	font-size: 13px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--text-light);
	padding: 0 36px;
	font-weight: 500;
}

.marquee-item.accent {
	color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Section 共通
   -------------------------------------------------------------------------- */
.section {
	position: relative;
	padding: 140px var(--container-px);
	overflow: hidden;
}

.section__inner {
	max-width: var(--container);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* セクション内の装飾ブロブ */
.section-blob {
	position: absolute;
	pointer-events: none;
	filter: blur(50px);
	mix-blend-mode: multiply;
	z-index: 0;
}

.section-blob--tl {
	top: -100px;
	left: -100px;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, var(--blob-pink) 0%, transparent 70%);
	animation: blobMorph1 20s ease-in-out infinite;
	opacity: 0.32;
}

.section-blob--tr {
	top: -50px;
	right: -100px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, var(--blob-purple) 0%, transparent 70%);
	animation: blobMorph2 22s ease-in-out infinite;
	opacity: 0.25;
}

.section-blob--br {
	bottom: -100px;
	right: -50px;
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, var(--blob-orange) 0%, transparent 70%);
	animation: blobMorph3 18s ease-in-out infinite;
	opacity: 0.22;
}

.section-blob--bl {
	bottom: -50px;
	left: 10%;
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, var(--blob-blue) 0%, transparent 70%);
	animation: blobMorph1 24s ease-in-out infinite reverse;
	opacity: 0.25;
}

.section-label {
	font-family: var(--font-syne);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin-bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-weight: 600;
}

.section-label::after {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	background: var(--accent-text);
}

.section-title {
	font-family: var(--font-syne);
	font-weight: 800;
	font-size: clamp(36px, 5vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin-bottom: 64px;
	color: var(--text);
}

.section-title__sub {
	display: inline-block;
	margin-left: 16px;
	font-size: 0.45em;
	font-weight: 500;
	color: var(--text-light);
	letter-spacing: 0.05em;
}

.section-head-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 64px;
	gap: 32px;
	flex-wrap: wrap;
}

.section-head-row .section-title {
	margin-bottom: 0;
}

.view-all-link {
	font-family: var(--font-syne);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-text);
	font-weight: 600;
	transition: gap 0.2s;
	display: inline-flex;
	gap: 8px;
}

.view-all-link:hover {
	gap: 14px;
	color: var(--accent-deep);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.about-story p {
	color: var(--text-muted);
	line-height: 1.95;
	margin-bottom: 22px;
	font-size: 15px;
	font-weight: 300;
}

.about-story strong {
	color: var(--text);
	font-weight: 500;
}

.profile-card {
	border: 1px solid var(--glass-border);
	padding: 44px 40px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 240, 245, 0.35));
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-glass);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

/* カード内側にブロブを閉じ込める */
.profile-card::before {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	top: -50px;
	right: -50px;
	background: radial-gradient(circle, var(--blob-pink) 0%, transparent 70%);
	filter: blur(30px);
	opacity: 0.28;
	z-index: 0;
}

.profile-card>* {
	position: relative;
	z-index: 1;
}

.profile-name {
	font-family: var(--font-syne);
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 6px;
	color: var(--text);
}

.profile-role {
	color: var(--accent-text);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 28px;
	font-weight: 700;
}

.timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 28px;
}

.timeline-item {
	display: flex;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.timeline-item:last-child {
	border-bottom: none;
}

.timeline-year {
	font-family: var(--font-syne);
	font-size: 12px;
	color: var(--accent-text);
	width: 100px;
	flex-shrink: 0;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.timeline-text {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
}

.tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.tag {
	border: 1px solid rgba(26, 26, 26, 0.12);
	padding: 6px 14px;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	border-radius: 2px;
	transition: all 0.2s;
}

.tag:hover {
	border-color: var(--accent-text);
	color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.service-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 250, 248, 0.4));
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	padding: 48px 36px;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: var(--shadow-glass);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
}

.service-card::before {
	content: '';
	position: absolute;
	width: 280px;
	height: 280px;
	top: -100px;
	right: -100px;
	background: radial-gradient(circle, var(--blob-purple) 0%, transparent 70%);
	filter: blur(35px);
	opacity: 0.22;
	transition: opacity 0.4s;
	z-index: 0;
}

.service-card:nth-child(1)::before {
	background: radial-gradient(circle, var(--blob-pink) 0%, transparent 70%);
}

.service-card:nth-child(2)::before {
	background: radial-gradient(circle, var(--blob-purple) 0%, transparent 70%);
}

.service-card:nth-child(3)::before {
	background: radial-gradient(circle, var(--blob-orange) 0%, transparent 70%);
}

.service-card>* {
	position: relative;
	z-index: 1;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-glass-hover);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(255, 250, 248, 0.55));
}

.service-card:hover::before {
	opacity: 0.4;
}

.service-num {
	font-family: var(--font-syne);
	font-size: 56px;
	font-weight: 800;
	color: var(--accent);
	opacity: 0.5;
	margin-bottom: 24px;
	line-height: 1;
	letter-spacing: -0.04em;
	transition: opacity 0.3s;
}

.service-card:hover .service-num {
	opacity: 0.85;
}

.service-title {
	font-family: var(--font-syne);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 14px;
	color: var(--text);
	letter-spacing: -0.01em;
}

.service-desc {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.85;
	font-weight: 300;
	flex: 1;
}

.service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.service-tag {
	background: rgba(214, 54, 112, 0.06);
	border: 1px solid rgba(214, 54, 112, 0.15);
	padding: 4px 12px;
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--accent-text);
	border-radius: 2px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Works
   -------------------------------------------------------------------------- */
.works-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.work-card {
	position: relative;
	overflow: hidden;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-glass);
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	border-radius: 4px;
	background: var(--bg-pure);
}

.work-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-glass-hover);
}

/* Worksカードの背景に大きなブロブ */
.work-bg {
	position: absolute;
	inset: 0;
	transition: transform 0.8s ease;
	overflow: hidden;
}

.work-card:hover .work-bg {
	transform: scale(1.06);
}

.work-bg::before {
	content: '';
	position: absolute;
	inset: -10%;
	background: radial-gradient(ellipse at 30% 30%,
			var(--blob-pink) 0%,
			var(--blob-purple) 40%,
			var(--blob-orange) 70%,
			transparent 90%);
	filter: blur(40px);
	opacity: 0.4;
}

.work-card:nth-child(2n) .work-bg::before {
	background: radial-gradient(ellipse at 70% 50%,
			var(--blob-blue) 0%,
			var(--blob-purple) 40%,
			var(--blob-pink) 70%,
			transparent 90%);
}

.work-card-inner {
	position: relative;
	z-index: 1;
	padding: 32px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.work-status {
	font-family: var(--font-syne);
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--accent-text);
	border: 1px solid var(--accent);
	padding: 4px 12px;
	display: inline-block;
	margin-bottom: 14px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 2px;
	font-weight: 600;
}

.work-title {
	font-family: var(--font-syne);
	font-size: 26px;
	font-weight: 800;
	margin-bottom: 10px;
	color: var(--text);
	letter-spacing: -0.02em;
}

.work-desc {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.news-card {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--glass-border);
	padding: 28px 30px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 250, 245, 0.35));
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-glass);
	transition: all 0.35s;
	border-radius: 4px;
	color: inherit;
}

.news-card::before {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	bottom: -80px;
	right: -80px;
	background: radial-gradient(circle, var(--blob-pale) 0%, transparent 70%);
	filter: blur(30px);
	opacity: 0.35;
	z-index: 0;
}

.news-card>* {
	position: relative;
	z-index: 1;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-glass-hover);
	color: inherit;
}

.news-badge {
	display: inline-block;
	font-family: var(--font-syne);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 4px 12px;
	border: 1px solid var(--accent);
	color: var(--accent-text);
	background: rgba(255, 255, 255, 0.6);
	margin-bottom: 14px;
	border-radius: 2px;
	font-weight: 700;
}

.news-badge.release {
	border-color: #e8906a;
	color: #b85c38;
}

.news-badge.update {
	border-color: #9988cc;
	color: #6655aa;
}

.news-date {
	font-family: var(--font-syne);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--text-light);
	margin-bottom: 10px;
	font-weight: 500;
}

.news-title {
	font-family: var(--font-syne);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	margin-bottom: 10px;
	color: var(--text);
}

.news-body {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.7;
}

.news-link {
	margin-top: 14px;
	font-family: var(--font-syne);
	font-size: 11px;
	color: var(--accent-text);
	letter-spacing: 0.15em;
	font-weight: 600;
}

/* News一覧ページの横長カード */
.news-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.news-list .news-card {
	padding: 28px 32px;
}

.news-item-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.news-item-row .news-date,
.news-item-row .news-badge {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.blog-card {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--glass-border);
	padding: 32px;
	transition: all 0.35s;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(250, 240, 245, 0.35));
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-glass);
	border-radius: 4px;
	color: inherit;
}

.blog-card::before {
	content: '';
	position: absolute;
	width: 250px;
	height: 250px;
	top: -100px;
	left: -80px;
	background: radial-gradient(circle, var(--blob-pink) 0%, transparent 70%);
	filter: blur(35px);
	opacity: 0.25;
	transition: opacity 0.35s;
	z-index: 0;
}

.blog-card:nth-child(2)::before {
	background: radial-gradient(circle, var(--blob-purple) 0%, transparent 70%);
}

.blog-card:nth-child(3)::before {
	background: radial-gradient(circle, var(--blob-blue) 0%, transparent 70%);
}

.blog-card>* {
	position: relative;
	z-index: 1;
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-glass-hover);
	color: inherit;
}

.blog-card:hover::before {
	opacity: 0.4;
}

.blog-thumb {
	margin: -32px -32px 20px;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
	aspect-ratio: 16/9;
}

.blog-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-date {
	font-family: var(--font-syne);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--text-light);
	margin-bottom: 14px;
	font-weight: 500;
}

.blog-cat {
	font-family: var(--font-syne);
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin-bottom: 14px;
	font-weight: 600;
}

.blog-title {
	font-family: var(--font-syne);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	margin-bottom: 12px;
	color: var(--text);
	letter-spacing: -0.01em;
}

.blog-excerpt {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.75;
}

.blog-more {
	margin-top: 18px;
	font-family: var(--font-syne);
	font-size: 11px;
	color: var(--accent-text);
	letter-spacing: 0.15em;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-inner {
	max-width: 760px;
	margin: 0 auto;
}

.contact-intro {
	font-size: 18px;
	color: var(--text-muted);
	line-height: 1.85;
	margin-bottom: 48px;
	font-weight: 300;
}

.contact-intro strong {
	color: var(--text);
	font-weight: 500;
}

.contact-info {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 12px 36px;
	padding: 32px 36px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 245, 250, 0.4));
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-glass);
	border-radius: 4px;
	margin-bottom: 48px;
	font-size: 14px;
	position: relative;
	overflow: hidden;
}

.contact-info::before {
	content: '';
	position: absolute;
	width: 250px;
	height: 250px;
	top: -100px;
	right: -100px;
	background: radial-gradient(circle, var(--blob-pink) 0%, transparent 70%);
	filter: blur(35px);
	opacity: 0.28;
	z-index: 0;
}

.contact-info>* {
	position: relative;
	z-index: 1;
}

.contact-info dt {
	font-family: var(--font-syne);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-light);
	align-self: center;
	font-weight: 600;
}

.contact-info dd {
	color: var(--text);
	margin: 0;
}

.contact-form-area {
	padding: 40px 36px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 245, 250, 0.35));
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-glass);
	border-radius: 4px;
}

.contact-form-area .wpcf7-form-control {
	width: 100%;
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.85);
	padding: 14px 18px;
	font-size: 15px;
	font-family: var(--font-ja);
	outline: none;
	transition: all 0.2s;
	border-radius: 2px;
	box-shadow: inset 0 1px 4px rgba(26, 26, 26, 0.04);
	color: var(--text);
}

.contact-form-area .wpcf7-form-control:focus {
	border-color: var(--accent-text);
	background: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	padding: 48px var(--container-px);
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.site-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.site-footer img {
	height: 28px;
	opacity: 0.5;
}

.site-footer__copy {
	font-family: var(--font-syne);
	font-size: 11px;
	color: var(--text-light);
	letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Archive / Entry
   -------------------------------------------------------------------------- */
.archive-section {
	position: relative;
	padding: 160px var(--container-px) 120px;
	overflow: hidden;
}

.archive-intro {
	font-size: 16px;
	color: var(--text-muted);
	max-width: 600px;
	line-height: 1.9;
	margin-bottom: 64px;
	font-weight: 300;
}

.entry {
	position: relative;
	max-width: var(--container-sm);
	margin: 0 auto;
	padding: 160px var(--container-px) 80px;
}

.entry-breadcrumb {
	font-family: var(--font-syne);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--text-light);
	margin-bottom: 36px;
	font-weight: 500;
}

.entry-breadcrumb a:hover {
	color: var(--accent-text);
}

.entry-meta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.entry-title {
	font-family: var(--font-syne);
	font-weight: 800;
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin-bottom: 36px;
	color: var(--text);
}

.entry-techs {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.entry-techs li {
	font-size: 11px;
	padding: 5px 14px;
	border: 1px solid var(--accent);
	color: var(--accent-text);
	border-radius: 2px;
	letter-spacing: 0.1em;
	font-weight: 500;
}

.entry-thumbnail {
	margin: 48px 0;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--shadow-glass);
}

.entry-content {
	font-size: 16px;
	line-height: 2;
	color: var(--text);
	margin-top: 48px;
	font-weight: 400;
}

.entry-content>*+* {
	margin-top: 1.5em;
}

.entry-content h2 {
	font-family: var(--font-syne);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	margin-top: 2em;
	color: var(--text);
}

.entry-content h3 {
	font-family: var(--font-syne);
	font-size: 20px;
	font-weight: 700;
	margin-top: 1.5em;
	color: var(--text);
}

.entry-content a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.entry-content a:hover {
	color: var(--accent-deep);
}

.entry-content img {
	border-radius: 4px;
	margin: 32px 0;
	box-shadow: var(--shadow-glass);
}

.entry-content blockquote {
	border-left: 3px solid var(--accent);
	padding-left: 24px;
	margin: 32px 0;
	color: var(--text-muted);
	font-style: normal;
}

.entry-content code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: rgba(214, 54, 112, 0.08);
	padding: 0.2em 0.5em;
	border-radius: 3px;
	color: var(--accent-text);
}

.entry-content pre {
	background: rgba(26, 26, 26, 0.04);
	padding: 24px;
	border-radius: 4px;
	overflow-x: auto;
	margin: 32px 0;
}

.entry-content pre code {
	background: transparent;
	padding: 0;
	color: var(--text);
}

.entry-links {
	display: flex;
	gap: 14px;
	margin-top: 56px;
	flex-wrap: wrap;
}

.entry-tags {
	list-style: none;
	padding: 24px 0 0;
	margin: 56px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.entry-tags li a {
	font-family: var(--font-syne);
	font-size: 12px;
	color: var(--text-muted);
	letter-spacing: 0.05em;
}

.entry-tags li a:hover {
	color: var(--accent-text);
}

.entry-nav {
	max-width: var(--container-sm);
	margin: 0 auto;
	padding: 48px var(--container-px) 80px;
	border-top: 1px solid rgba(26, 26, 26, 0.06);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
	margin-top: 80px;
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	gap: 8px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(26, 26, 26, 0.1);
	font-family: var(--font-syne);
	font-size: 13px;
	color: var(--text-muted);
	transition: all 0.2s;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.pagination .page-numbers:hover {
	border-color: var(--accent-text);
	color: var(--accent-text);
}

.pagination .page-numbers.current {
	background: var(--accent-text);
	color: #fff;
	border-color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.site-header {
		padding: 14px 20px;
	}

	.site-nav {
		display: none;
	}

	.hero {
		padding: 120px 20px 80px;
		min-height: auto;
	}

	.section {
		padding: 100px 20px;
	}

	.archive-section {
		padding: 120px 20px 80px;
	}

	.entry {
		padding: 120px 20px 60px;
	}

	.entry-nav {
		padding: 40px 20px 80px;
	}

	.hero__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.services-grid,
	.news-grid,
	.blog-grid {
		grid-template-columns: 1fr;
	}

	.works-grid {
		grid-template-columns: 1fr;
	}

	.section-head-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.site-footer__inner {
		flex-direction: column;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.fade-up {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Contact Form 7 スタイル
   bark design テーマに統一感を出すためのCF7オーバーライド
   -------------------------------------------------------------------------- */

/* フォーム全体 */
.wpcf7 form {
	margin: 0;
}

/* CF7のレスポンスメッセージ（送信成功・失敗時） */
.wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 14px 18px !important;
	border-radius: 4px !important;
	font-size: 14px;
	font-family: var(--font-ja);
	border-width: 1px !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--accent) !important;
	background: rgba(255, 85, 153, 0.08);
	color: var(--accent-text);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #d96666 !important;
	background: rgba(217, 102, 102, 0.08);
	color: #b04545;
}

/* 各フォーム行 */
.bd-form-row {
	margin-bottom: 22px;
}

.bd-form-row>label {
	display: block;
	font-family: var(--font-syne);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 600;
	margin-bottom: 8px;
}

.bd-form-row .required {
	color: var(--accent);
	margin-left: 4px;
	font-size: 12px;
}

/* 入力フィールド */
.contact-form-area input[type="text"],
.contact-form-area input[type="email"],
.contact-form-area input[type="url"],
.contact-form-area input[type="tel"],
.contact-form-area select,
.contact-form-area textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.85);
	padding: 14px 18px;
	font-size: 15px;
	font-family: var(--font-ja);
	font-weight: 400;
	color: var(--text);
	outline: none;
	transition: all 0.2s;
	border-radius: 2px;
	box-shadow: inset 0 1px 4px rgba(26, 26, 26, 0.04);
	box-sizing: border-box;
}

.contact-form-area input[type="text"]:focus,
.contact-form-area input[type="email"]:focus,
.contact-form-area input[type="url"]:focus,
.contact-form-area input[type="tel"]:focus,
.contact-form-area select:focus,
.contact-form-area textarea:focus {
	border-color: var(--accent-text);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: inset 0 1px 4px rgba(26, 26, 26, 0.04), 0 0 0 3px rgba(255, 45, 129, 0.1);
}

.contact-form-area textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.7;
}

.contact-form-area select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff2d81' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 44px;
	cursor: pointer;
}

::placeholder {
	color: var(--text-light);
	opacity: 1;
}

/* バリデーションエラー */
.wpcf7-not-valid-tip {
	color: #d96666 !important;
	font-size: 12px !important;
	margin-top: 6px !important;
	display: block !important;
}

.wpcf7-form-control.wpcf7-not-valid {
	border-color: #d96666 !important;
}

/* 送信ボタン */
.bd-form-submit {
	margin-top: 32px;
}

.contact-form-area input[type="submit"] {
	background: var(--accent-text);
	color: #fff;
	border: none;
	padding: 16px 36px;
	font-family: var(--font-syne);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.25s;
	border-radius: 2px;
	box-shadow: 0 4px 16px rgba(255, 45, 129, 0.18);
}

.contact-form-area input[type="submit"]:hover {
	background: var(--accent-deep);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(255, 45, 129, 0.28);
}

.contact-form-area input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* 送信中スピナー */
.wpcf7-spinner {
	background-color: var(--accent) !important;
	margin-left: 14px !important;
}

/* Honeypot フィールドは絶対に表示しない */
.wpcf7-form .wpcf7-honeypot {
	display: none !important;
}