/*
Theme Name: IMK Theme
Theme URI:
Author: Yuichiro Tsuji
Author URI:
Description: 広告運用・MEO対策・Web集客を支援する「IMK」のコーポレートサイト用テーマ。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imk-theme
*/

/* ============================================================================
   共通設定（色・土台）
   ============================================================================ */
:root {
	--bg:        #16181d; /* 背景（少しグレーっぽいダーク） */
	--bg-alt:    #1d2027; /* 1段明るいグレー背景 */
	--surface:   #141b30; /* カードなどの面の色 */
	--border:    #1f2940; /* 境界線の色 */
	--text:      #e8ecf5; /* 基本の文字色（明るいグレー） */
	--muted:     #9aa6c0; /* 補足テキスト */
	--accent:    #3b9bd6; /* サイト統一の青（1色） */
	--accent-2:  #3b9bd6; /* 統一のため同色 */
	--maxw:      1120px;
	--radius:    14px;
}

*, *::before, *::after { box-sizing: border-box; }

/* スクロールロックの解除時にスクロールバーの有無で横幅が変わり“がたつく”のを防ぐ
   （スクロールバー分の余白を常に確保しておく） */
html { scrollbar-gutter: stable; }

/* 切り替え中のレイアウト変化でブラウザが位置を自動補正（スクロールアンカリング）して
   微小にガタつくのを防ぐ */
html, body { overflow-anchor: none; }

/* スクロールロックは overflow を切り替えない（切り替えるとホイールが止まる不具合があるため）。
   .is-locked は状態の目印のみ。実際のスクロール抑制は JS の preventDefault と最上部固定で行う。 */

/* ヒーロー状態（step0）の間は Concept ステージと本編を隠して、位置復元などで
   青背景や下部が一瞬見えるのを防ぐ。演出開始(open1)で解除。
   ※opacity で隠す（要素は描画されるので初回から transform が正しくアニメする）。 */
html.hero-state .concept-section { opacity: 0; pointer-events: none; }

body {
	margin: 0;
	font-family: -apple-system, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	line-height: 1.8;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }

.container {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* ============================================================================
   ヘッダー（固定ナビ）
   ============================================================================ */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 300;
	background: transparent;        /* 背景なし＝要素が浮いて見える */
	pointer-events: none;           /* 透明部分はクリックを透過 */
}
.site-header__inner > * { pointer-events: auto; }  /* ロゴ・ナビは操作可能 */
.site-header__inner {
	max-width: 100%;
	margin: 0;
	padding: 16px clamp(18px, 3vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-logo { display: inline-flex; align-items: center; line-height: 0; }
.site-logo img { height: clamp(40px, 4.4vw, 58px); width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 42px); }
.site-nav a {
	font-family: "Space Grotesk", "Zen Kaku Gothic Antique", sans-serif;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: #0b1020;
	text-decoration: none;
	transition: color 0.2s;
}
.site-nav a:hover { color: var(--accent); }
.site-nav__cta {
	padding: 11px 28px;
	border: 1px solid #0b1020;
	border-radius: 999px;
	transition: background 0.25s, color 0.25s;
}
.site-nav__cta:hover { background: #0b1020; color: #fff !important; }
.site-nav__cta-icon { display: none; }   /* PCではアイコン非表示（デスクトップナビはテキストのまま） */
/* ハンバーガーボタン（PCは非表示） */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	z-index: 360;
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: #0b1020; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; }
@media (max-width: 767px) {
	/* スマホ：ハンバーガー表示・ナビは全画面オーバーレイに */
	.nav-toggle { display: flex; }
	.site-nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: clamp(30px, 6vh, 48px);
		background: #eef1f5;   /* 透けないよう不透明に */
		transform: translateX(100%);
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 350;
	}
	.nav-open .site-nav { transform: translateX(0); }
	.site-nav a { display: block; font-size: 22px; letter-spacing: 0.06em; color: #0b1020; }
	/* 見出しナビ（Contact以外）：コンセプトの白ボックス見出しと同条件（白背景・紺文字・太字700・字詰め）＋右上ギザギザ */
	.site-nav a:not(.site-nav__cta) {
		position: relative;
		background: #fff;
		color: #1b2a4a;
		font-weight: 700;
		letter-spacing: 0.02em;   /* もう少し広げる */
		padding: 0.12em 0.55em;
		border-radius: 2px;
	}
	/* 見出しの上に小さいカタカナ（data-kana） */
	.site-nav a:not(.site-nav__cta)::before {
		content: attr(data-kana);
		position: absolute;
		left: 50%;
		bottom: 100%;
		transform: translateX(-50%);
		margin-bottom: 5px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.18em;
		color: #7a8296;
		white-space: nowrap;
	}
	.site-nav a:not(.site-nav__cta)::after {
		content: "";
		position: absolute;
		top: -0.5em;
		right: -0.45em;
		width: 0.95em;
		height: 0.95em;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
		pointer-events: none;
	}
	/* ハンバーガー内のContact：右下の付箋fabと同じ見た目・サイズの複製をメニュー内・右下に配置。
	   （スタッキングに依存せず確実に表示。.site-nav a に負けないよう詳細度を上げる） */
	.site-nav a.site-nav__cta {
		position: absolute;
		right: 16px;
		bottom: 16px;
		margin: 0;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 80px;
		height: 80px;
		padding: 0;
		color: #fff !important;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.06em;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		border: none;
		border-radius: 6px;
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
		transform: rotate(-4deg);
	}
	.site-nav a.site-nav__cta::before {   /* テープ */
		content: "";
		position: absolute;
		top: -9px;
		left: 50%;
		transform: translateX(-50%) rotate(3deg);
		width: 40px;
		height: 16px;
		background: rgba(255, 255, 255, 0.35);
		border-radius: 2px;
	}
	.site-nav a.site-nav__cta .site-nav__cta-icon { display: block; width: 22px; height: 22px; }
	/* 付箋型Contact（z:200）はメニューのオーバーレイ(z:350)より背面＝メニューを開いた時は出さない。
	   メニューを閉じている間は右下の固定位置に表示。 */
	/* ハンバーガー → ×（開いている時） */
	.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* 本編を translate3d で下げた分の“はみ出し”をクリップして、
   ページ下部に余分なスクロール領域（＝リロード時にCTAやフッターが見える原因）を作らない。
   ※ヒーロー/パネルは position:fixed なのでクリップされません。 */
/* .front-page の overflow:hidden は削除（祖先のoverflow:hiddenで横スライドのstickyが無効化されるため）。
   横スライドのはみ出しは .hslide-sticky 側の overflow:hidden でクリップ。 */
.front-page { overflow: visible; }

/* ============================================================================
   共通ボタン
   ============================================================================ */
.btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 16px;
	transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.btn-lg { padding: 18px 44px; font-size: 17px; }

/* ============================================================================
   ヒーロー（常に固定）＋ 4パネルのワイプ ＋ 本編のせり上がり
   ============================================================================ */
.hero {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(180deg, #eef1f5 0%, #f7f9fb 100%);
	color: #0b1020;
}

/* ヒーローを覆う4本のパネル */
.fv-cover {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	pointer-events: none;
}
.fv-cover > span {
	flex: 1;
	height: 100%;
	background: #e0e3e8;   /* 背景と同じグレー */
	transform: scaleY(0);
	transform-origin: center bottom;
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}
.fv-cover.is-playing > span { transform: scaleY(1); }
/* 1枚ずつはっきり見えるよう、時間差を大きめに（各パネルの速度は0.45sのまま） */
.fv-cover > span:nth-child(1) { transition-delay: 0s;    }
.fv-cover > span:nth-child(2) { transition-delay: 0.15s; }
.fv-cover > span:nth-child(3) { transition-delay: 0.30s; }
.fv-cover > span:nth-child(4) { transition-delay: 0.45s; }

/* ナビ遷移中（.no-anim）は、フロントの構造アニメ（4分割パネル・コンセプト/サービスの登場）を
   再生させず瞬時に目的状態へ。JSが一時的に付与し、反映後に外す。 */
html.no-anim .fv-cover > span,
html.no-anim .fv-cover--2 > span,
html.no-anim .concept-section,
html.no-anim .concept-bg,
html.no-anim .concept-head,
html.no-anim .concept-body,
html.no-anim .concept-mark,
html.no-anim .below-service,
html.no-anim .service-section,
html.no-anim .service-head,
html.no-anim .service-section .va { transition: none !important; }

/* 演出2のパネル（Concept→サービス）：cover1 と全く同じ挙動（下から scaleY で伸びて覆う） */
.fv-cover--2 {
	position: fixed;
	inset: 0;
	z-index: 2;            /* Concept(z:3) の背面（cover1 と同じく背面でパネルが動く）。service(z:1)より前 */
	display: flex;
	pointer-events: none;
	opacity: 0;            /* 通常は不可視（step0/1） */
}
.fv-cover--2.is-cover { opacity: 1; }
.fv-cover--2 > span {
	flex: 1;
	height: 100%;
	background: #e0e3e8;
	transform: translateY(0);
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}
.fv-cover--2.is-lift > span { transform: translateY(-100%); }
.fv-cover--2 > span:nth-child(1) { transition-delay: 0s;    }
.fv-cover--2 > span:nth-child(2) { transition-delay: 0.10s; }
.fv-cover--2 > span:nth-child(3) { transition-delay: 0.20s; }
.fv-cover--2 > span:nth-child(4) { transition-delay: 0.30s; }

/* サービス。Conceptの背面(z:2)に配置。Conceptが消えると現れ、スクロールで下まで読める。
   （戻る時だけ最上部で固定してConceptへ戻す＝制御はJS側） */
.below-service {
	position: relative;
	z-index: 1;              /* Concept(z:3)・パネル(z:2)の背面に控える静止背景 */
	background: #f7f9fb;
	opacity: 0;               /* step0/1 は隠す。open2 で表示 */
	pointer-events: none;     /* 非表示中は最背面ヒーローのホバー/クリックを奪わない */
}
.js .below-service.is-revealed { opacity: 1; pointer-events: auto; }
/* 戻り時：サービスが下へスライドして退場（最初から動きが見える＝コンセプトの降下と一緒の方向） */
.js .below-service.is-exit-down {
	transform: translate3d(0, 100vh, 0);
	transition: transform 0.9s cubic-bezier(0.42, 0, 0.58, 1);
}

/* --- 背景：オーロラ風（やわらかい青の光がゆっくり漂う）。中央はマスクで抜き、ロゴ等の視認性を確保 --- */
.hero-aurora {
	position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 50%, transparent 33%, #000 70%);
	        mask-image: radial-gradient(ellipse 52% 56% at 50% 50%, transparent 33%, #000 70%);
}
.hero-aurora span { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.hero-aurora .a1 {
	width: 46vw; height: 46vw; left: -8%; top: -16%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.42), transparent 68%);
	animation: aurora1 24s ease-in-out infinite;
}
.hero-aurora .a2 {
	width: 40vw; height: 40vw; right: -8%; top: 6%;
	background: radial-gradient(circle, rgba(14, 165, 233, 0.38), transparent 68%);
	animation: aurora2 30s ease-in-out infinite;
}
.hero-aurora .a3 {
	width: 52vw; height: 52vw; left: 16%; bottom: -26%;
	background: radial-gradient(circle, rgba(108, 192, 236, 0.40), transparent 70%);
	animation: aurora3 26s ease-in-out infinite;
}
@keyframes aurora1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.12); } }
@keyframes aurora2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7%, 6%) scale(1.10); } }
@keyframes aurora3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, -6%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero-aurora span { animation: none; } }

/* --- ヒーローの中身 --- */
.hero-inner { position: relative; z-index: 1; padding: 24px; text-align: center; }
.hero-eyebrow {
	display: inline-block;
	color: #0b1020;
	font-size: clamp(20px, 2.9vw, 28px);
	font-weight: 700;
	letter-spacing: 0.25em;
	margin: 0 0 15px;
}
.hero-title { margin: 0; line-height: 0; }
.hero-logo-img { width: clamp(315px, 48vw, 505px); height: auto; display: block; margin: 0 auto; }
.hero-sub {
	color: #3b82f6;
	font-size: clamp(16px, 2.25vw, 22px);
	font-weight: 700;
	letter-spacing: 0.3em;
	margin: 15px 0 0;
}
.hero-lead {
	max-width: 730px;
	margin: 33px auto 0;
	color: #3a4255;
	font-size: clamp(18px, 2.25vw, 24px);
}

/* 文字が波打つホバーアニメーション */
.wave-text { cursor: pointer; }
.wave-char {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: transform;
}
.wave-text:hover .wave-char { transform: translateY(-4px) scale(1.2); }
@media (prefers-reduced-motion: reduce) {
	.wave-char { transition: none; }
	.wave-text:hover .wave-char { transform: none; }
}

/* ============================================================================
   セクション共通
   ============================================================================ */
.section-head { text-align: center; margin-bottom: 56px; }
.section-eyebrow { color: var(--accent); font-size: 13px; letter-spacing: 0.25em; margin: 0 0 12px; }
.section-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin: 0; }
.services, .reasons, .news, .cta { padding: 110px 0; }

/* 各セクションの背景色（::before パネルで使用） */
.services { --panel: #3b9bd6; }
.reasons  { --panel: var(--bg-alt); }
.news     { --panel: #0f1117; }
.cta      { --panel: #0f1117; }

/* ============================================================================
   スクロール連動の出現演出（背景パネルがせり上がってから中身が出る）
   ============================================================================ */
.reveal { position: relative; isolation: isolate; background: transparent; }
.reveal::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--panel, var(--bg));
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.reveal.in-view::before { transform: scaleY(1); }

.js .reveal .about-intro,
.js .reveal .section-head,
.js .reveal .reason,
.js .reveal .service-card,
.js .reveal .news-list,
.js .reveal .cta-title,
.js .reveal .cta-text,
.js .reveal .cta-inner .btn {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in-view .about-intro,
.reveal.in-view .section-head,
.reveal.in-view .reason,
.reveal.in-view .service-card,
.reveal.in-view .news-list,
.reveal.in-view .cta-title,
.reveal.in-view .cta-text,
.reveal.in-view .cta-inner .btn { opacity: 1; transform: none; }

.reveal.in-view .section-head,
.reveal.in-view .cta-title { transition-delay: 0.50s; }
.reveal.in-view .news-list,
.reveal.in-view .cta-text  { transition-delay: 0.60s; }
.reveal.in-view .reason:nth-child(1) { transition-delay: 0.60s; }
.reveal.in-view .reason:nth-child(2) { transition-delay: 0.70s; }
.reveal.in-view .reason:nth-child(3) { transition-delay: 0.80s; }
.reveal.in-view .service-card:nth-child(1) { transition-delay: 0.60s; }
.reveal.in-view .service-card:nth-child(2) { transition-delay: 0.70s; }
.reveal.in-view .service-card:nth-child(3) { transition-delay: 0.80s; }
.reveal.in-view .cta-inner .btn      { transition-delay: 0.70s; }

/* Concept（サービス枠）の中身は、背景が出切ってから浮かび上がる */
.reveal[data-intro].in-view .about-intro { transition-delay: 1.05s; }

@media (prefers-reduced-motion: reduce) {
	.reveal::before { transition: none; transform: scaleY(1); }
	.js .reveal .about-intro,
	.js .reveal .section-head,
	.js .reveal .reason,
	.js .reveal .service-card,
	.js .reveal .news-list,
	.js .reveal .cta-title,
	.js .reveal .cta-text,
	.js .reveal .cta-inner .btn { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   Concept（会社の理念・思い）セクション ＝ .services 枠を使用
   ============================================================================ */
.services.reveal { background: #3b9bd6; }                 /* 明るいグレー */
.services { box-sizing: border-box; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding-top: 64px; padding-bottom: 64px; }
.services > .container { width: 100%; }
.services .section-title   { color: #ffffff; }
.services .section-eyebrow { color: rgba(255, 255, 255, 0.85); }

/* 背景イラストアニメーション（データ／集客のイメージ） */
.about-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.about-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; text-align: left; }
.about-intro { max-width: 760px; }

.ab-blob { position: absolute; border-radius: 50%; filter: blur(55px); opacity: 0.55; }
.ab-blob-1 { width: 380px; height: 380px; left: -70px; top: -50px; background: radial-gradient(circle, rgba(59,155,214,0.5), transparent 70%); animation: ab-float1 16s ease-in-out infinite; }
.ab-blob-2 { width: 340px; height: 340px; right: -60px; bottom: -70px; background: radial-gradient(circle, rgba(14,165,233,0.45), transparent 70%); animation: ab-float2 20s ease-in-out infinite; }
@keyframes ab-float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,32px); } }
@keyframes ab-float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-44px,-28px); } }

.ab-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; animation: ab-netfloat 24s ease-in-out infinite; }
@keyframes ab-netfloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-14px,10px); } }
.ab-net__lines line { stroke: rgba(59,155,214,0.45); stroke-width: 1.2; }
.ab-net__dots circle { fill: rgba(59,155,214,0.65); }
.ab-flow { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 12; animation: ab-flow 3.2s linear infinite; }
@keyframes ab-flow { to { stroke-dashoffset: -180; } }

.ab-rise { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(59,155,214,0.4); opacity: 0; animation: ab-rise 7s ease-in-out infinite; }
.ab-r1 { left: 18%; bottom: 14%; animation-delay: 0s;   }
.ab-r2 { left: 38%; bottom: 8%;  animation-delay: 1.6s; width: 6px; height: 6px; }
.ab-r3 { left: 62%; bottom: 16%; animation-delay: 3.0s; }
.ab-r4 { left: 82%; bottom: 10%; animation-delay: 2.2s; width: 7px; height: 7px; }
@keyframes ab-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.85; } 100% { transform: translateY(-160px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ab-blob, .ab-net, .ab-flow, .ab-rise { animation: none; } .ab-rise { opacity: 0.4; } }

/* Concept の文言（左：英字サブ見出し＋主見出し＋本文＋ボタン） */
.about-title {
	font-family: "Space Grotesk", sans-serif;
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.04em;
	margin: 8px 0 22px;
	color: #ffffff;
}
.about-heading {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: clamp(28px, 4.6vw, 52px);
	font-weight: 700;
	line-height: 1.62;
	letter-spacing: 0.04em;
	margin: 0 0 30px;
	color: #ffffff;
}
.about-text {
	font-family: "Zen Kaku Gothic New", sans-serif;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 500;
	line-height: 2;
	margin: 0 0 30px;
}
.about-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 999px;
	background: #ffffff;
	color: #1565a8;
	font-weight: 700;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.about-btn::after { content: "→"; }
.about-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11, 16, 32, 0.2); }

/* 英字見出しのホバー（可変フォントで太くなる） */
.vfont { display: inline-flex; flex-wrap: wrap; cursor: pointer; font-family: "Space Grotesk", sans-serif; }
.vletter {
	display: inline-block;
	white-space: pre;
	font-variation-settings: "wght" 400;
	transition: font-variation-settings 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vfont:hover .vletter { font-variation-settings: "wght" 700; }
@media (prefers-reduced-motion: reduce) {
	.vletter { transition: none; font-variation-settings: "wght" 600; }
	.vfont:hover .vletter { font-variation-settings: "wght" 600; }
}

/* ============================================================================
   選ばれる理由
   ============================================================================ */
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.reason { padding-top: 24px; border-top: 2px solid var(--accent); }
.reason-title { font-size: 19px; margin: 0 0 12px; }
.reason-text { color: var(--muted); font-size: 15px; margin: 0; }

/* ============================================================================
   サービスセクション（Conceptの次）
   ============================================================================ */
/* ヒーローと同じ明るいグラデーション背景の“固定ステージ”として全画面表示 */
.service-section {
	background: #f7f9fb;        /* 薄いグレー */
	color: #0b1020;
	min-height: 100svh;
	display: flex;
	align-items: flex-start;   /* 縦に長い内容を上から表示（スクロールで下へ） */
	padding: clamp(56px, 9vh, 110px) 0 0;   /* 下余白は0（02→03の間隔はhslide-intro側で管理） */
}
.service-section > .container { width: 100%; }
.service-section .section-title   { color: #0b1020; }
.service-section .section-eyebrow { color: var(--accent); }

/* 見出し（Conceptと同じ書体＋マーカー帯デザイン。明るい背景なので帯は濃色＋白文字） */
.service-head { text-align: center; margin-bottom: clamp(72px, 13vh, 150px); }
.service-label {
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--accent);
	margin: 0 0 20px;
}
.service-title {
	margin: 0;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(30px, 4.8vw, 60px);
	line-height: 1.7;
}
.service-mark {
	display: inline-block;
	position: relative;
	background: #ffffff;          /* 白帯 */
	color: #000000;              /* 黒文字 */
	padding: 0.06em 0.18em;
	border-radius: 2px;
	white-space: nowrap;
	overflow: hidden;
}
/* 白ボックス見出しを黒で覆い、スクロールで入ったら右へ開く（黒リビール） */
.js .service-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	transform-origin: right center;
	transform: scaleX(1);          /* 初めは黒で全部覆う */
	transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
	z-index: 1;
}
.service-mark.is-wiped::after { transform: scaleX(0); }  /* 開く */

/* アプローチ一覧（VUILD風：大きな番号＋宣言的タイトル＋説明を縦に並べ、罫線で区切る） */
/* APPROACH 01 ブロック（editorial：大きな番号＋見出し＋コピー＋本文＋画像＋Case） */
.va { max-width: 1040px; margin: 0 auto; text-align: left; }
.va + .va { margin-top: clamp(120px, 22vh, 250px); }  /* approach同士の間隔 */
.va-label {
	font-family: "Space Grotesk", sans-serif;
	font-size: 12px; letter-spacing: 0.22em; color: #6b7488; margin: 0 0 6px;
}
.va-no {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: clamp(56px, 11vw, 120px);
	line-height: 1;
	color: #1b2a4a;
	margin: 0 0 22px;
}
.va-head {
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(24px, 3.4vw, 40px);
	line-height: 1.5;
	color: #0b1020;
	margin: 0 0 24px;
}
/* 見出しに白い背景ボックス＋黒が左から消えるリビール */
.va-mark {
	display: inline;
	color: #0b1020;             /* 黒に戻す */
}
/* （見出しの白ボックスの黒アニメーションは削除。白ボックスのみ表示） */
/* 01：テキストはそのまま。イラストは右側に絶対配置し、境界外へはみ出して重ねる */
.va--media { position: relative; }
/* 01テキストを少し左へ（イラストは絶対配置なので動かない） */
.va--media > :not(.va-svg) { position: relative; left: clamp(-80px, -4vw, -22px); }
.va-svg {
	position: absolute;
	top: 67.5%;
	right: clamp(-200px, -11vw, -70px);   /* 右の境界外へさらにはみ出す */
	transform: translateY(-50%);
	width: clamp(380px, 56%, 680px);
	height: auto;
	max-width: none;
	pointer-events: none;
	border-radius: 8px;
}
/* 02：左スペースにイラストを絶対配置（テキストは右寄せ＝va--right） */
.va--media-left { position: relative; }
/* 02テキスト（イラスト以外）を少し右へ */
.va--media-left > :not(.va-svg) { position: relative; left: clamp(20px, 3vw, 56px); }
.va-svg--left {
	right: auto;
	left: clamp(-200px, -11vw, -70px);   /* 左の境界外へはみ出す */
}
/* 01・03のイラストも下端をカット（02の見え方に合わせる） */
.va-svg:not(.va-svg--left) {
	-webkit-clip-path: inset(0 0 22% 0);
	        clip-path: inset(0 0 22% 0);
}
/* 03（hslide内）のイラストだけ上へ */
.hslide-intro .va-svg { top: 57%; }
@media (max-width: 880px) {
	/* 狭い画面は重ねず、テキストの下にフルで表示 */
	.va-svg {
		position: static;
		transform: none;
		width: 100%;
		margin-top: 20px;
	}
}
.va-quote {
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-size: clamp(14px, 1.7vw, 18px);
	line-height: 1.9;
	color: #46506a;
	margin: 0 0 18px;
}
.va-body {
	font-size: clamp(13px, 1.4vw, 15px);
	line-height: 2;
	color: #6b7488;
	max-width: 660px;
	margin: 0 0 clamp(36px, 6vh, 64px);
}
.va-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(20px, 3vw, 48px);
	align-items: start;
}
.va-photo { background: #d4d8df; border-radius: 4px; }
.va-photo--main { aspect-ratio: 16 / 10; }
.va-case-label {
	font-family: "Space Grotesk", sans-serif;
	font-size: 12px; letter-spacing: 0.2em; color: #46506a; margin: 0 0 12px;
}
.va-case-text { font-size: 13px; line-height: 1.9; color: #6b7488; margin: 0 0 16px; }
.va-case-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.va-case-thumbs .va-photo { aspect-ratio: 4 / 3; }

/* APPROACH 02：見出しブロックを右寄せ＋下に大きな画像2枚（Caseは左上） */
.va--right { text-align: right; }
.va--right .va-body { margin-left: auto; margin-right: 0; }
.va--right .va-gallery { text-align: left; }
.va-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 24px);
	align-items: start;
}
.va-gallery .va-case { grid-column: 1 / -1; max-width: 560px; margin-bottom: 4px; }
.va-gallery .va-photo { aspect-ratio: 4 / 3; }

@media (max-width: 760px) {
	.va-grid { grid-template-columns: 1fr; }
	.va-gallery { grid-template-columns: 1fr; }
	.va--right { text-align: left; }
	.va--right .va-body { margin-left: 0; }
}

/* ステージが固定されてから本文がふわっと浮き上がる（.is-shown はJSが付与） */
.js .service-section .va,
.js .service-section .service-head {
	opacity: 0;
	transform: translate3d(0, 56px, 0);   /* コンセプト要素と全く同じ浮き上がり */
	transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-section.is-shown .service-head { opacity: 1; transform: translate3d(0, 0, 0); }
.service-section.is-shown .va { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
	.js .service-section .va,
	.js .service-section .service-head { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   横スライド（考えていること／事業のこと／会社のこと）
   ============================================================================ */
/* 背の高いセクション。中の .hslide-sticky を画面に固定し、縦スクロール量に応じて
   .hslide-track を横へ動かす（JSが transform を更新）。高さ＝スライド枚数×100vh。 */
.hslide-section { position: relative; height: 500vh; background: #f7f9fb; } /* サービスと同じ薄いグレー（03フェード→スライド入場の余白込み） */
/* 退場フェード用：サービス最後の項目(03)はJSでopacityを動かす */
.js .service-section .va:last-child { will-change: opacity; }
.hslide-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	background: #f7f9fb;       /* サービスと同じ背景（切り替わって見えないように） */
}
/* 03の固定レイヤー（フェードして消える） */
.hslide-intro {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;   /* 上寄せ（02からの間隔を01→02と同じに） */
	justify-content: center;
	padding: clamp(120px, 22vh, 250px) clamp(24px, 6vw, 90px) 0;  /* 上＝01→02と同じ間隔 */
	box-sizing: border-box;
}
.hslide-intro .va { margin: 0; width: 100%; }  /* 01と同じく幅1040pxを取り、テキスト列を揃える */
/* スライドのトラック（右から入ってくる） */
.hslide-track {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	height: 100%;
	width: 100%;
	will-change: transform;
}
.hslide {
	flex: 0 0 80vw;            /* スライド幅を狭めて間隔（中心間）を詰める（隣が少し覗く） */
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 clamp(16px, 3vw, 48px);
}
.hslide-inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
	width: 100%;
	max-width: 1040px;
}
.hslide-img {
	aspect-ratio: 1 / 1;
	background: transparent;        /* グレーの四角背景は無し */
	border-radius: 2px;
	overflow: hidden;
}
.hslide-img .hslide-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* ロゴマークは全体表示＋余白（枠いっぱいに切らない） */
.hslide-img .hslide-logo {
	object-fit: contain;
	padding: clamp(24px, 12%, 72px);
	box-sizing: border-box;
}
.hslide-title {
	margin: 0 0 24px;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(26px, 3.6vw, 42px);
	color: #1a1d24;
}
.hslide-text {
	margin: 0 0 34px;
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 2.05;
	color: #5b6270;
	max-width: 520px;
}
.hslide-btn {
	display: inline-block;
	padding: 15px 42px;
	border: 1px solid #1a1d24;
	border-radius: 999px;
	font-family: "Space Grotesk", sans-serif;
	font-size: 15px;
	letter-spacing: 0.12em;
	color: #1a1d24;
	text-decoration: none;
	transition: background 0.25s, color 0.25s;
}
.hslide-btn:hover { background: #1a1d24; color: #fff; }
/* 進捗ドット */
.hslide-dots {
	display: none;            /* 進捗ドットは非表示 */
	position: absolute;
	left: 0; right: 0; bottom: clamp(28px, 5vh, 56px);
	justify-content: center; gap: 12px;
}
.hslide-dots span {
	width: 8px; height: 8px; border-radius: 50%;
	background: rgba(26, 29, 36, 0.25);
	transition: background 0.3s, transform 0.3s;
}
.hslide-dots span.is-active { background: #1a1d24; transform: scale(1.3); }
@media (max-width: 760px) {
	/* カード：イラストを上、見出し＋ボタンを下端に（見出しはボタンのすぐ上）。3枚で平行 */
	.hslide { align-items: stretch; }
	/* カード間に隙間を空けて距離を離す（内容幅は変えない。JS側の送り量G=8と一致） */
	.hslide-track { gap: 8vw; }
	.hslide-inner { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: 100%; padding: clamp(10px, 2.5vh, 32px) 0 clamp(20px, 5vh, 48px); box-sizing: border-box; }
	/* イラスト枠は全カード同じ高さ40vh（＝見出しの開始位置が揃う）。中身は中央配置で全体表示 */
	.hslide-img { display: flex; align-items: flex-end; justify-content: center; height: 40vh; max-height: none; aspect-ratio: auto; margin: 0 auto; }
	.hslide-img .hslide-photo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
	/* 「考えていること」（1枚目）のイラストだけ、少し小さく＋左＋下へ（この枠だけはみ出し許可） */
	.hslide-track .hslide:first-child .hslide-img { overflow: visible; }
	.hslide-track .hslide:first-child .hslide-photo { max-height: 72%; transform: translate(-30%, 13%); }
	/* 事業のこと（2枚目）は少し左＋少し小さく＋少し下へ（この枠だけはみ出し許可） */
	.hslide-track .hslide:nth-child(2) .hslide-img { overflow: visible; }
	.hslide-track .hslide:nth-child(2) .hslide-photo { max-height: 82%; transform: translate(-10%, 6%); }
	/* 会社：枠は40vhのまま（見出し等は動かさない）。ロゴの下余白を詰めて枠内で下へ＋左へ */
	.hslide-track .hslide:nth-child(3) .hslide-logo { padding-bottom: 0; padding-top: clamp(48px, 22%, 120px); object-position: bottom; }
	.hslide-track .hslide:nth-child(3) .hslide-photo { transform: translateX(-7%); }
	/* 本文ブロックは自然な高さ。ボタンは本文のすぐ下に */
	.hslide-body { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; margin-top: clamp(10px, 2vh, 20px); }
	.hslide-title { margin-bottom: 12px; }
	.hslide-text { margin-bottom: 2px; }
	.hslide-btn { margin-top: 20px; align-self: flex-start; }
	/* 本文の後半（hslide-more）はスマホでは非表示＝「会社のこと」くらいの分量に揃える。PCは全文表示 */
	.hslide-more { display: none; }
	/* 見出しを白ボックス＋太字＋字詰め＋ロゴ紺色（他のボックス見出しと統一）＋右上ギザギザ */
	.hslide-title {
		display: inline-block;
		position: relative;
		background: #ffffff;
		color: #1b2a4a;
		padding: 0.08em 0.2em;
		border-radius: 2px;
		font-weight: 700;
		letter-spacing: -0.03em;
	}
	.hslide-title::after {
		content: "";
		position: absolute;
		top: -0.55em;
		right: -0.5em;
		width: 1.1em;
		height: 1.1em;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
		pointer-events: none;
	}
}

/* ============================================================================
   Topics（ニュース一覧）／下から流れて出る
   ============================================================================ */
.topics-section {
	background: #f7f9fb;            /* スライド・サービスと同じ薄いグレー */
	color: #1a1d24;
	padding: clamp(72px, 12vh, 150px) clamp(16px, 4vw, 48px);
}
.topics-inner {
	max-width: 1600px;
	margin: 0 auto;
	background: #e0e3e8;           /* コンセプトと同じ背景色の角丸カード */
	border-radius: clamp(20px, 3vw, 36px);
	padding: clamp(40px, 6vh, 72px) clamp(28px, 5vw, 64px);
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}
.topics-head { position: sticky; top: 32px; }
.topics-title {
	display: inline-block;
	position: relative;
	margin: 0 0 22px;
	font-family: "Space Grotesk", "Zen Kaku Gothic Antique", sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 4vw, 48px);
	/* 他の白ボックス見出しと同条件：白背景・紺文字・字詰め＋右上ギザギザ */
	background: #ffffff;
	color: #1b2a4a;
	letter-spacing: -0.03em;
	padding: 0.08em 0.28em;
	border-radius: 2px;
}
.topics-title::after {
	content: "";
	position: absolute;
	top: -0.5em; right: -0.45em;
	width: 1em; height: 1em;
	background: linear-gradient(135deg, #3b82f6, #0ea5e9);
	clip-path: polygon(
		50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
		100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
		50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
		0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
	);
	pointer-events: none;
}
.topics-all {
	display: inline-block;
	padding: 9px 22px;
	border: 1px solid rgba(26, 29, 36, 0.4);
	border-radius: 999px;
	font-family: "Space Grotesk", sans-serif;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #1a1d24;
	text-decoration: none;
	transition: background 0.25s, color 0.25s;
}
.topics-all:hover { background: #1a1d24; color: #fff; }
/* Topicsボタン：PC・スマホとも「全て見る」（JP）を表示。EN（ALL ARTICLES）は非表示 */
.topics-all__en { display: none; }

/* ============================================================================
   お知らせ一覧ページ（page-news.php）：パンくず＋絞り込み＋横一列リスト＋ページ送り
   ============================================================================ */
.news-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(11, 16, 32, 0.5); margin-bottom: clamp(18px, 3vh, 32px); }
.news-crumb a { color: inherit; text-decoration: none; }
.news-crumb a:hover { color: #1b2a4a; }
.news-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 5vh, 52px); }
.news-filter__btn {
	font-family: inherit; font-size: 13px; padding: 8px 20px;
	border: 1px solid rgba(11, 16, 32, 0.18); border-radius: 999px;
	background: transparent; color: #46506a; cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.news-filter__btn:hover { border-color: #1b2a4a; }
.news-filter__btn.is-active { background: #1b2a4a; border-color: #1b2a4a; color: #fff; }
.news-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(36px, 6vh, 64px); }
.news-pager__num, .news-pager__next {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%; font-size: 14px;
	color: #46506a; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.news-pager__num:hover, .news-pager__next:hover { background: rgba(11, 16, 32, 0.06); }
.news-pager__num.is-current { background: #1b2a4a; color: #fff; }
.news-empty { padding: clamp(40px, 8vh, 80px) 0; color: #6b7488; font-size: 15px; }
/* アイキャッチ無しの横一列リスト（日付＋カテゴリ＋タイトル＋外部リンク・罫線区切り） */
.topics-list { display: flex; flex-direction: column; }
.topic {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	padding: clamp(20px, 3vh, 30px) clamp(4px, 1.5vw, 16px);
	border-top: 1px solid rgba(11, 16, 32, 0.10);
	text-decoration: none;
	color: #0b1020;
}
.topics-list .topic:last-child { border-bottom: 1px solid rgba(11, 16, 32, 0.10); }
.topic-date {
	font-family: "Space Grotesk", sans-serif;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: #6b7488;
	white-space: nowrap;
}
.topic-cat {
	justify-self: start;
	padding: 5px 16px;
	background: #eaf1fb;
	color: #3b82f6;
	font-size: 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.topic-ttl {
	margin: 0;
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.6;
	font-weight: 500;
	color: #0b1020;
	transition: color 0.2s;
	overflow: hidden;
	text-overflow: ellipsis;
}
.topic-ext { width: 20px; height: 20px; color: #3b82f6; flex-shrink: 0; }
.topic:hover .topic-ttl { color: #3b82f6; }
@media (max-width: 820px) {
	.topics-inner { grid-template-columns: 1fr; gap: 32px; }
	.topics-head { position: static; }
}
@media (max-width: 560px) {
	.topic { grid-template-columns: auto 1fr auto; gap: 12px 16px; }
	.topic-cat { grid-row: 1; }
	.topic-ttl { grid-column: 1 / -1; }
}

/* 下から流れて出る入場（画面に入ったら .is-up を付与） */
.js .topics-inner {
	opacity: 0;
	transform: translateY(80px);
	transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.topics-section.is-up .topics-inner { opacity: 1; transform: none; }
.js .topics-section.is-up .topic {
	animation: topic-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.topics-section.is-up .topic:nth-child(2) { animation-delay: 0.08s; }
.topics-section.is-up .topic:nth-child(3) { animation-delay: 0.16s; }
.topics-section.is-up .topic:nth-child(4) { animation-delay: 0.24s; }
.topics-section.is-up .topic:nth-child(5) { animation-delay: 0.32s; }
.topics-section.is-up .topic:nth-child(6) { animation-delay: 0.40s; }
@keyframes topic-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.js .topics-inner { opacity: 1; transform: none; transition: none; }
	.js .topics-section.is-up .topic { animation: none; }
}

/* ============================================================================
   Contact（お問い合わせフォーム）
   ============================================================================ */
.contact-section {
	--panel: linear-gradient(135deg, #3b82f6, #0ea5e9);     /* reveal::before が塗る背景 */
	background: linear-gradient(135deg, #3b82f6, #0ea5e9);   /* ギザギザと同じ配色 */
	color: #ffffff;
	padding: clamp(64px, 11vh, 140px) 0 clamp(40px, 7vh, 80px);
	overflow: hidden;
}
.contact-top {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 72px);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: clamp(24px, 5vw, 80px);
	flex-wrap: wrap;
}
.contact-eyebrow {
	font-family: "Space Grotesk", sans-serif;
	font-size: 13px; letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 16px;
}
.contact-jp-row { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); }
.contact-jp { margin: 0; }
/* 見出し右の丸い矢印ボタン（細枠） */
.contact-circle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(110px, 13vw, 184px);
	height: clamp(110px, 13vw, 184px);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	color: #ffffff;
	text-decoration: none;
	transition: background 0.25s, color 0.25s;
}
.contact-circle svg { width: 42%; height: auto; }
.contact-circle:hover { background: #ffffff; color: #1b2a4a; }
.contact-jp-mark {
	display: inline-block;
	background: #ffffff;
	color: #1b2a4a;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: clamp(32px, 4.2vw, 58px);
	padding: 0.08em 0.4em;
	border-radius: 2px;
}
.contact-top__note { max-width: 360px; }
.contact-top__note p {
	margin: 0 0 14px;
	font-size: clamp(13px, 1.4vw, 15px);
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.92);
}
.contact-arrow {
	font-family: "Space Grotesk", sans-serif;
	font-size: 14px; letter-spacing: 0.06em;
	color: #ffffff; text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 2px;
	transition: opacity 0.2s;
}
.contact-arrow:hover { opacity: 0.7; }
/* 大きく横に流れるマーキー */
.contact-marquee {
	margin-top: clamp(24px, 5vh, 64px);
	overflow: hidden;
}
.contact-marquee__track {
	display: flex;
	width: max-content;
	animation: contact-marquee 26s linear infinite;
}
.contact-marquee__track span {
	flex-shrink: 0;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 400;
	font-size: clamp(48px, 13vw, 180px);
	line-height: 1.1;
	white-space: nowrap;
	color: #ffffff;
	letter-spacing: -0.01em;
}
@keyframes contact-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.contact-marquee__track { animation: none; }
}
.contact-head { text-align: center; margin-bottom: clamp(40px, 6vh, 64px); }
.contact-label {
	font-family: "Space Grotesk", sans-serif;
	font-size: 13px; letter-spacing: 0.25em; color: #6b7488; margin: 0 0 16px;
}
.contact-title {
	margin: 0 0 18px;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(28px, 4.4vw, 52px);
	color: #1b2a4a;
}
.contact-lead {
	margin: 0 auto;
	max-width: 600px;
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 1.9;
	color: #46506a;
}
.contact-form { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 22px); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 22px); }
.cf-field { display: flex; flex-direction: column; }
.cf-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	color: #0b1020;
	display: flex;
	align-items: center;
	gap: 8px;
}
.cf-label em {
	font-style: normal;
	font-size: 10px;
	letter-spacing: 0.08em;
	padding: 2px 8px;
	border-radius: 3px;
	background: #0b1020;
	color: #fff;
}
.cf-field input,
.cf-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d7dbe2;
	border-radius: 8px;
	background: #f4f6f9;
	color: #1a1d24;
	font: inherit;
	font-size: 15px;
	padding: 14px 16px;
	outline: none;
	transition: box-shadow 0.2s;
}
.cf-field textarea { resize: vertical; line-height: 1.7; }
.cf-field input:focus,
.cf-field textarea:focus { box-shadow: 0 0 0 3px rgba(11, 16, 32, 0.35); }
.cf-submit { text-align: center; margin-top: clamp(8px, 2vh, 16px); }
.cf-btn {
	display: inline-block;
	border: 0;
	cursor: pointer;
	background: linear-gradient(135deg, #3b82f6, #0ea5e9);   /* ギザギザと同じ配色 */
	color: #ffffff;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-size: 16px;
	letter-spacing: 0.08em;
	padding: 16px 64px;
	border-radius: 999px;
	transition: transform 0.2s, opacity 0.2s;
}
.cf-btn:hover { transform: translateY(-2px); opacity: 0.92; }
/* お問い合わせ送信結果メッセージ */
.cf-notice { margin: 0 0 24px; padding: 14px 18px; border-radius: 8px; font-size: 15px; line-height: 1.8; }
.cf-notice--ok { background: rgba(59, 155, 214, 0.12); color: #1b2a4a; border: 1px solid rgba(59, 155, 214, 0.45); }
.cf-notice--ng { background: rgba(214, 69, 69, 0.10); color: #b02a2a; border: 1px solid rgba(214, 69, 69, 0.35); }
/* ハニーポット：画面外に隠す（display:noneだとボットが避けるため位置で隠す） */
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 送信完了：大きな専用画面 */
.cf-thanks { max-width: 720px; margin: 0 auto; text-align: center; padding: clamp(140px, 22vh, 220px) 0 clamp(48px, 9vh, 96px); }
.cf-thanks__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: clamp(72px, 14vw, 104px); height: clamp(72px, 14vw, 104px);
	margin: 0 auto clamp(20px, 4vh, 36px);
	border-radius: 50%; color: #fff;
	background: linear-gradient(135deg, #3b82f6, #0ea5e9);
	box-shadow: 0 14px 30px rgba(59, 130, 246, 0.35);
}
.cf-thanks__mark svg { width: 48%; height: auto; }
.cf-thanks__title {
	margin: 0 0 clamp(16px, 3vh, 28px);
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.35;
	font-size: clamp(28px, 6vw, 52px); color: #1b2a4a;
}
.cf-thanks__text { margin: 0 0 clamp(28px, 5vh, 48px); font-size: clamp(16px, 2.2vw, 20px); line-height: 2; color: #46506a; }
.cf-thanks__btn {
	display: inline-block; padding: 15px 44px; border-radius: 999px;
	background: linear-gradient(135deg, #3b82f6, #0ea5e9); color: #fff; text-decoration: none;
	font-size: 16px; letter-spacing: 0.04em; transition: transform 0.2s, opacity 0.2s;
}
.cf-thanks__btn:hover { transform: translateY(-2px); opacity: 0.92; }
@media (max-width: 600px) {
	.cf-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   Process（ご依頼の流れ）セクション
   ============================================================================ */
.process-section {
	background: #ffffff;
	color: #0b1020;
	padding: clamp(80px, 13vh, 150px) 0;
}
.process-head { text-align: center; margin-bottom: clamp(48px, 8vh, 90px); }
.process-label {
	font-family: "Space Grotesk", sans-serif;
	font-size: 13px; letter-spacing: 0.25em; color: var(--accent); margin: 0 0 16px;
}
.process-title {
	margin: 0;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(28px, 4.4vw, 52px);
	color: #0b1020;
}
.process-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
}
.process-step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: start;
	padding: 0 0 clamp(36px, 5vh, 56px);
}
/* 番号をつなぐ縦線 */
.process-step::before {
	content: "";
	position: absolute;
	left: calc(clamp(28px, 4vw, 40px) / 2);
	top: clamp(44px, 6vw, 60px);
	bottom: 0;
	width: 2px;
	background: rgba(11, 16, 32, 0.12);
	transform: translateX(-50%);
}
.process-step:last-child { padding-bottom: 0; }
.process-step:last-child::before { display: none; }
.process-no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(28px, 4vw, 40px);
	height: clamp(28px, 4vw, 40px);
	border-radius: 50%;
	background: var(--accent);
	color: #ffffff;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: clamp(13px, 1.5vw, 16px);
}
.process-name {
	margin: 0 0 8px;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(18px, 2.2vw, 24px);
	color: #0b1020;
	line-height: 1.3;
}
.process-text { margin: 0; color: #46506a; font-size: clamp(13px, 1.5vw, 15px); line-height: 1.9; }

/* ============================================================================
   新着ニュース
   ============================================================================ */
.news-list { list-style: none; margin: 0 auto; padding: 0; max-width: 800px; }
.news-item { display: flex; align-items: baseline; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--border); }
.news-date { color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.news-link { color: var(--text); transition: color 0.2s; }
.news-link:hover { color: var(--accent); }

/* ============================================================================
   お問い合わせCTA
   ============================================================================ */
.cta-inner {
	text-align: center;
	background: radial-gradient(800px 300px at 50% 0%, rgba(59,155,214, 0.2), transparent 70%), var(--surface);
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 72px 24px;
}
.cta-title { font-size: clamp(24px, 4vw, 34px); margin: 0 0 16px; }
.cta-text { color: var(--muted); max-width: 560px; margin: 0 auto 36px; }

/* ============================================================================
   フッター
   ============================================================================ */
.site-footer {
	position: relative; z-index: 6;
	background: #1a1d24;
	color: #ffffff;
	padding: clamp(48px, 8vh, 96px) clamp(24px, 5vw, 72px) clamp(28px, 5vh, 52px);
	/* 最下部の隙間から背面のヒーロー（薄色）が覗かないよう、暗色を下へ延長（スクロールは増えない） */
	box-shadow: 0 80px 0 80px #1a1d24;
}
.footer-top {
	max-width: 1400px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	padding-bottom: clamp(32px, 6vh, 64px);
}
.footer-logo { line-height: 0; display: inline-block; }
.footer-logo img { height: clamp(26px, 3vw, 38px); width: auto; display: block; }
.footer-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); flex-wrap: wrap; }
.footer-nav a {
	font-family: "Space Grotesk", sans-serif;
	font-size: 14px; letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 0.2s;
}
.footer-nav a:hover { color: #ffffff; }
.footer-nav__cta {
	display: none;   /* フッターのContactボタンは表示しない（PC・スマホとも） */
	background: #3b9bd6;
	color: #ffffff !important;
	padding: 10px 28px;
	border-radius: 999px;
	transition: opacity 0.2s, transform 0.2s;
}
.footer-nav__cta:hover { opacity: 0.92; transform: translateY(-1px); }
.footer-bottom {
	max-width: 1400px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: clamp(18px, 3vh, 30px);
}
.footer-privacy { font-size: 13px; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s; }
.footer-privacy:hover { color: #ffffff; }
.footer-copy { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }

/* ============================================================================
   付箋風の Contact ボタン（右下に固定）
   ============================================================================ */
.contact-fab {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 96px;
	height: 96px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	background: linear-gradient(135deg, #3b82f6, #0ea5e9); /* このボタンだけ現状の配色を維持 */
	border-radius: 6px;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
	transform: rotate(-4deg);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-fab::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%) rotate(3deg);
	width: 48px;
	height: 16px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 2px;
}
.contact-fab:hover { color: #fff; transform: rotate(0deg) translateY(-3px) scale(1.05); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.48); }
.contact-fab-icon { width: 26px; height: 26px; }
@media (max-width: 640px) {
	.contact-fab { right: 16px; bottom: 16px; width: 80px; height: 80px; font-size: 13px; }
	.contact-fab-icon { width: 22px; height: 22px; }
}

/* ============================================================================
   ローディング画面（IMKロゴが浮き出る）
   ============================================================================ */
.imk-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0a0e1a;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
.imk-loader.is-hidden { opacity: 0; visibility: hidden; }
.imk-loader-logo { width: min(60vw, 300px); height: auto; animation: imk-loader-emerge 1.4s ease-out forwards; }
@keyframes imk-loader-emerge {
	0%   { opacity: 0; transform: scale(0.9) translateY(14px); filter: blur(10px); }
	100% { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .imk-loader-logo { animation: none; opacity: 1; } }

/* ============================================================================
   レスポンシブ
   ============================================================================ */
@media (max-width: 900px) {
	.reason-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.hero-inner { padding: 20px; }
	.reason-grid { grid-template-columns: 1fr; }
	.services, .reasons, .news, .cta { padding: 72px 0; }
	.news-item { flex-direction: column; gap: 6px; }
}


/* ============================================================================
   ★Conceptセクション（独立ブロック）
   ----------------------------------------------------------------------------
   ・このセクション専用のスタイル。すべて .concept-section 配下に限定し、
     他のセクションには一切影響しないようにしています。
   ・背景：ブルー一色(#3B9BD6)＋薄い白の楕円軌道線＋左下のギザギザ円
   ・左右2カラム（左：白マーカー見出し／右：白文字の本文）
   ============================================================================ */
.concept-section {
	position: relative;
	overflow: hidden;
	background: #e0e3e8;                       /* グレー一色（少しだけ濃いめ） */
	color: #0b1020;
	min-height: 100svh;                       /* 画面いっぱい（JS無効時のフォールバック） */
	display: flex;                            /* 中身を上下中央に配置 */
	align-items: center;
	padding: clamp(48px, 7vh, 88px) 0;
	/* 参考画像（ゴシックMB101/石井ゴシック系）に近い、クラシックなゴシック体 */
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
}
/* JS有効時：ヒーローと同様に画面固定ステージ化し、下からせり上がる演出にする */
.js .concept-section {
	position: fixed;
	inset: 0;
	z-index: 3;
	min-height: 0;
	transform: translate3d(0, 100vh, 0);      /* 初期は画面下に隠す */
	transition: transform 0.9s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s ease;
	will-change: transform;
	backface-visibility: hidden;
}
.js .concept-section.is-revealed { transform: translate3d(0, 0, 0); }
/* concept↔service 専用：背景ごと画面上方へスライド＋フェード（テキスト・イラストは子として一緒に上昇/下降） */
.js .concept-section.is-exit-up {
	transform: translate3d(0, -100vh, 0);
	opacity: 0;
	transition: transform 0.9s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) { .js .concept-section { transition: none; } }

/* --- 背景装飾 --- */
.concept-section .concept-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.concept-section .concept-orbits {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.concept-section .concept-orbits ellipse {
	fill: none;
	stroke: rgba(11, 16, 32, 0.08);            /* 薄いグレーの軌道線 */
	stroke-width: 1.5;
}
/* 左下のギザギザ円（やや明るい同系青・うっすら） */
.concept-section .concept-spark {
	position: absolute;
	left: -50px;
	bottom: -50px;
	width: clamp(220px, 30vw, 380px);
	aspect-ratio: 1;
	background: linear-gradient(135deg, #3b82f6, #0ea5e9);   /* コンタクトボタンと同じ配色 */
	opacity: 1;
	clip-path: polygon(
		50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
		100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
		50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
		0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
	);
}
/* --- レイアウト（左右2カラム・非対称） --- */
.concept-section .concept-inner {
	position: relative;
	z-index: 1;
	width: 100%;                              /* flex子要素として横いっぱい（max-widthで上限） */
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(24px, 6vw, 80px);
	display: grid;
	grid-template-columns: 1.06fr 0.94fr;      /* 左カラムを少し広げ、見出しを右へ寄せても折返さない */
	gap: clamp(20px, 3vw, 48px);
	align-items: start;
}

/* --- 左カラム：見出し --- */
.concept-section .concept-head {
	margin-left: clamp(-24px, -1vw, 0px); /* 少し右へ寄せる */
}
.concept-section .concept-label {
	margin: 0 0 26px;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 400;                          /* 標準 */
	font-size: 14px;
	letter-spacing: 0.3em;                      /* 字間広め */
	color: #0b1020;
}
.concept-section .concept-title {
	margin: 0;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 500;                          /* 少し太め（サイズはそのまま） */
	font-size: clamp(26px, 4vw, 52px);
	line-height: 1.7;                          /* 詰めすぎない */
}
/* ★白い長方形のマーカー帯＋黒文字。行ごとに独立し、文字の長さ分だけ伸びる */
.concept-section .concept-mark {
	display: inline;
	background: #ffffff;       /* 白のマーカー帯 */
	color: #1b2a4a;           /* ロゴと同じ紺色 */
	padding: 0.06em 0.04em;   /* 左右はほぼ無し＝文字幅ギリギリ */
	border-radius: 2px;
	white-space: nowrap;      /* マーカー内で途中改行させない（各行は<br>で分ける） */
	/* 折り返しても改行ごとに帯が分かれる */
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* --- 右カラム：本文 --- */
.concept-section .concept-body { color: #0b1020; margin-left: clamp(0px, 1.2vw, 20px); margin-top: clamp(16px, 4vh, 48px); }
.concept-section .concept-body p {
	margin: 0 0 1.7em;                          /* 段落間（収めるため少し詰める） */
	font-size: clamp(16px, 1.8vw, 20px);        /* やや大きめ（大きすぎない） */
	line-height: 1.95;                          /* 行間（収めるため少し詰める） */
	letter-spacing: 0.06em;
	font-weight: 400;
}
.concept-section .concept-body p:last-child { margin-bottom: 0; }

/* --- レスポンシブ：スマホは縦1カラム（見出し→本文） --- */
@media (max-width: 880px) {
	.concept-section .concept-inner { grid-template-columns: 1fr; gap: 40px; }
	.concept-section .concept-head { margin-left: 0; }
	.concept-section .concept-title { font-size: clamp(22px, 6vw, 38px); line-height: 1.7; }
}


/* --- Conceptセクション：背景が固定されてから、見出し→本文の順に浮き出る --- */
/* JS有効時のみ最初は隠し、.is-shown が付いたら下からフワッと表示 */
.js .concept-section .concept-head,
.js .concept-section .concept-body {
	opacity: 0;
	transform: translate3d(0, 56px, 0);   /* 下から浮き出る移動量（3D変換でGPU合成） */
	/* ふわっと：やわらかいease-out（最初に動いて、ゆっくり静かに着地） */
	transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.concept-section.is-shown .concept-head,
.concept-section.is-shown .concept-body { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0s; }
/* イラスト(concept-bg)もフェードイン＋上昇でふんわり。will-change は付けない（点滅防止） */
.js .concept-section .concept-bg {
	opacity: 0;
	transform: translate3d(0, 56px, 0);
	transition: opacity 0.7s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.concept-section.is-shown .concept-bg { opacity: 1; transform: translate3d(0, 0, 0); }
/* スマホ：下部イラストの迫り上がりを、スクロール駆動アニメ（コンポジタ処理＝ガタつかない）で行う。
   距離 --cbg-max は JS が一度だけ設定。非対応ブラウザは JS 駆動にフォールバック（footer.js）。位置・大きさは同じ。 */
@keyframes imk-cbg-rise {
	from { transform: translateY(var(--cbg-max, 100svh)); }
	to   { transform: translateY(0); }
}
@supports (animation-timeline: scroll()) {
	@media (max-width: 767px) {
		.js .concept-section { timeline-scope: --imk-cbg; }
		.js .concept-section .concept-inner { scroll-timeline: --imk-cbg block; }
		.js .concept-section .concept-bg {
			animation: imk-cbg-rise linear both;
			animation-timeline: --imk-cbg;
		}
	}
}
/* 退避中（is-exit-up＝画面外）は要素のトランジションを無効化＝残留フェードによる点滅を防止 */
.js .concept-section.is-exit-up .concept-head,
.js .concept-section.is-exit-up .concept-body,
.js .concept-section.is-exit-up .concept-bg { transition: none; }
/* 退場：要素がふわっと上へ消える（サービスへ移るとき） */
.concept-section.is-exiting .concept-head,
.concept-section.is-exiting .concept-body {
	opacity: 0;
	transform: translate3d(0, -28px, 0);
	transition: opacity 0.2s ease, transform 0.2s ease;
	transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
	.js .concept-section .concept-head,
	.js .concept-section .concept-body,
	.js .concept-section .concept-bg { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   下層ページ（vision / business / company）
   ============================================================================ */
.subpage { background: #f7f9fb; color: #0b1020; min-height: 100vh; position: relative; z-index: 1; }
.subpage-inner { max-width: 980px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); }
.subpage-hero {
	padding: clamp(130px, 20vh, 220px) 0 clamp(44px, 7vh, 84px);
	border-bottom: 1px solid rgba(11, 16, 32, 0.08);
}
.subpage-eyebrow { font-family: "Space Grotesk", sans-serif; font-size: 13px; letter-spacing: 0.22em; color: #3b9bd6; margin: 0 0 16px; }
.subpage-title {
	margin: 0 0 20px;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-size: clamp(32px, 5.5vw, 64px); line-height: 1.3;
	/* コンセプトの白ボックス見出しと同条件（白背景・紺文字・太字700・字詰め）＋右上に青ギザギザ */
	display: inline-block;
	position: relative;
	background: #ffffff;
	color: #1b2a4a;
	font-weight: 700;
	letter-spacing: -0.03em;
	padding: 0.06em 0.24em;
	border-radius: 2px;
}
.subpage-title::after {
	content: "";
	position: absolute;
	top: -0.5em;
	right: -0.4em;
	width: 1em;
	height: 1em;
	background: linear-gradient(135deg, #3b82f6, #0ea5e9);
	clip-path: polygon(
		50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
		100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
		50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
		0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
	);
	pointer-events: none;
}
.subpage-lead { margin: 0; max-width: 660px; font-size: clamp(15px, 1.7vw, 18px); line-height: 2; color: #46506a; }
.subpage-body { padding: clamp(48px, 8vh, 90px) 0 clamp(72px, 12vh, 130px); }
.subpage-block { margin: 0 0 clamp(40px, 6vh, 72px); }
/* プライバシーポリシー等の箇条書き */
.policy-list { margin: 14px 0 0; padding-left: 1.25em; }
.policy-list li { margin: 0 0 10px; line-height: 1.9; color: #46506a; }

/* 個別記事ページ（single.php） */
.article-title {
	margin: 0 0 8px;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 4vw, 44px);
	line-height: 1.5;
	color: #1b2a4a;
}
.article-content { max-width: 760px; font-size: clamp(15px, 1.9vw, 17px); line-height: 2; color: #2a3244; }
.article-content > *:first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.6em; }
.article-content h2 { margin: 2em 0 0.7em; font-size: 1.4em; font-weight: 700; color: #1b2a4a; }
.article-content h3 { margin: 1.6em 0 0.6em; font-size: 1.2em; font-weight: 700; color: #1b2a4a; }
.article-content a { color: var(--accent); text-decoration: underline; }
.article-content img { max-width: 100%; height: auto; border-radius: 6px; }
.article-content ul, .article-content ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.article-content li { margin: 0 0 0.5em; }
.article-content blockquote { margin: 0 0 1.6em; padding: 0.5em 0 0.5em 1em; border-left: 3px solid var(--accent); color: #46506a; }
.subpage-block:last-of-type { margin-bottom: 0; }
.subpage-block h2 {
	margin: 0 0 18px; font-weight: 600; color: #1b2a4a;
	font-size: clamp(20px, 2.6vw, 30px);
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.subpage-block h2 .en { font-family: "Space Grotesk", sans-serif; font-size: 13px; letter-spacing: 0.14em; color: #3b9bd6; font-weight: 500; }
.subpage-block p { margin: 0 0 1.2em; font-size: clamp(14px, 1.5vw, 16px); line-height: 2; color: #46506a; }
.subpage-block p:last-child { margin-bottom: 0; }
/* 会社概要テーブル */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { text-align: left; padding: 18px 8px; border-bottom: 1px solid rgba(11, 16, 32, 0.1); font-size: clamp(14px, 1.5vw, 16px); vertical-align: top; line-height: 1.9; }
.info-table th { width: 32%; color: #1b2a4a; font-weight: 600; white-space: nowrap; }
.info-table td { color: #46506a; }
/* サービスカード */
.svc-list { display: grid; gap: clamp(20px, 3vw, 32px); }
.svc-item { background: #fff; border-radius: 16px; padding: clamp(28px, 4vw, 48px); box-shadow: 0 20px 50px rgba(11, 16, 32, 0.05); }
.svc-item .no { font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 5vw, 52px); font-weight: 700; color: #1b2a4a; line-height: 1; margin: 0 0 14px; }
.svc-item h3 { margin: 0 0 12px; font-size: clamp(18px, 2.2vw, 24px); color: #0b1020; }
.svc-item p { margin: 0; font-size: clamp(14px, 1.5vw, 16px); line-height: 2; color: #46506a; }
.subpage-back {
	display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(48px, 8vh, 80px);
	font-family: "Space Grotesk", sans-serif; font-size: 14px; letter-spacing: 0.06em;
	color: #3b9bd6; text-decoration: none; transition: opacity 0.2s;
}
.subpage-back:hover { opacity: 0.65; }

/* 下層ページ：遷移後にふわっと浮き出る（読み込み時に時間差で再生） */
@media (prefers-reduced-motion: no-preference) {
	@keyframes subpage-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
	.subpage-eyebrow, .subpage-title, .subpage-lead,
	.subpage-block, .svc-item, .subpage-back {
		animation: subpage-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.subpage-eyebrow { animation-delay: 0.08s; }
	.subpage-title  { animation-delay: 0.20s; }
	.subpage-lead   { animation-delay: 0.34s; }
	.subpage-block:nth-of-type(1), .svc-item:nth-child(1) { animation-delay: 0.50s; }
	.subpage-block:nth-of-type(2), .svc-item:nth-child(2) { animation-delay: 0.62s; }
	.subpage-block:nth-of-type(3), .svc-item:nth-child(3) { animation-delay: 0.74s; }
	.subpage-back { animation-delay: 0.86s; }
}

/* お問い合わせページ（フォーム＋連絡先） */
.contact-page-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.contact-form-card, .contact-aside {
	background: #ffffff; border-radius: 18px;
	padding: clamp(28px, 4vw, 48px);
	box-shadow: 0 20px 50px rgba(11, 16, 32, 0.05);
}
.contact-aside h2 { margin: 0 0 8px; font-size: clamp(15px, 1.8vw, 18px); color: #1b2a4a; }
.contact-aside h2:not(:first-child) { margin-top: clamp(24px, 4vh, 36px); }
.contact-aside p { margin: 0; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.9; color: #46506a; }
.contact-aside-tel { font-family: "Space Grotesk", sans-serif; font-size: clamp(22px, 3vw, 30px) !important; font-weight: 600; line-height: 1.2 !important; }
.contact-aside-tel a { color: #1b2a4a; text-decoration: none; }
.contact-aside-note { margin-top: 4px !important; font-size: 13px !important; color: #6b7488; }
@media (max-width: 820px) { .contact-page-grid { grid-template-columns: 1fr; } }

/* PCでは非表示・スマホ版のみ表示する改行 */
.br-sp { display: none; }
.hero-concept-deco { display: none; }   /* コンセプト風イラスト：PCでは非表示（スマホのみ） */
.sp-only { display: none; }              /* スマホのみ表示（PCでは非表示） */

/* ============================================================================
   スマホ版（モバイル）専用の調整　※PC版には影響させない
   ============================================================================ */
@media (max-width: 767px) {
	/* ヒーローのIMKロゴを少し小さく */
	.hero-logo-img { width: clamp(220px, 64vw, 320px); }
	/* ヒーローの中身（イラスト以外）を少し上へ */
	.hero-inner { transform: translateY(calc(-3vh + 4px)); }
	/* イラストを独立レイヤーで描画（変形の親内でも確実に表示・チラつき/未描画防止） */
	.va-svg, .hslide-photo { backface-visibility: hidden; transform: translateZ(0); }
	/* 横スライド：頻繁に変化する要素をレイヤー化して滑らかに */
	.hslide-intro { will-change: opacity; }
	.hslide-intro .va { will-change: transform; }

	/* フッター：Contactボタンを消す／ロゴを左に大きく／セクション4つを右に縦並び */
	.footer-top { flex-wrap: nowrap; align-items: center; }
	.footer-logo img { height: clamp(48px, 15vw, 84px); }
	.footer-nav { flex-direction: column; align-items: flex-end; gap: 12px; flex-wrap: nowrap; }
	.footer-nav__cta { display: none; }
	/* コピーライトを一番下へ（Privacyの下＝フッター最下部） */
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

	/* Topics：スマホは3件のみ表示（フロントのTopicsのみ。/news/ の一覧＝news-list は除外）。ボタンは「全て見る」（JP）に切替 */
	.topics-list:not(.news-list) .topic:nth-child(n+4) { display: none; }
	.topics-all__en { display: none; }
	.topics-all__jp { display: inline; }
	/* Topics見出しを横並び：タイトル左・「全て見る」を右のスペースに */
	.topics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.topics-title { margin-bottom: 0; }

	/* お問い合わせセクション上部の余分な余白を減らす */
	.contact-section { padding-top: clamp(28px, 5vh, 56px); }
	/* お問い合わせの見出し（ボックス背景）を他のボックス見出しと同条件に（太字＋字詰め） */
	.contact-jp-mark { font-weight: 700; letter-spacing: -0.03em; }
	/* お問い合わせ：丸ボタンを見出し（ボックス背景テキスト）と平行に（下端で揃える） */
	.contact-top { flex-wrap: nowrap; align-items: flex-end; gap: clamp(10px, 3vw, 20px); }
	.contact-circle { width: clamp(80px, 24vw, 112px); height: clamp(80px, 24vw, 112px); }

	/* キャッチ「集客の問いに、データで答えを。」少し大きく＋改行させない */
	.hero-eyebrow { font-size: clamp(16px, 5.4vw, 23px); white-space: nowrap; letter-spacing: -0.03em; font-weight: 700; color: #1b2a4a; position: relative; left: 4px; }
	/* スマホでは見出しのタップ発動ウェーブを無効化 */
	.hero-eyebrow.wave-text:hover .wave-char { transform: none; }
	/* ヒーロー本文（リード文）を少しだけ小さく */
	.hero-lead { font-size: clamp(14px, 3.6vw, 17px); }
	/* スマホでのみ「御社の…」の前で改行 */
	.br-sp { display: inline; }
	.br-pc { display: none; }   /* PC専用の改行：スマホでは無効 */
	/* スマホのみ表示する要素（見出し末尾の「。」など） */
	.sp-only { display: inline; }

	/* ヒーロー：コンセプトと同じイラスト（軌道線＋左下ギザギザ）をスマホのみ表示 */
	.hero-concept-deco { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
	.hc-orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
	.hc-orbits ellipse { fill: none; stroke: rgba(11, 16, 32, 0.08); stroke-width: 1.5; }
	.hc-spark {
		position: absolute;
		left: -50px; bottom: -50px;
		width: clamp(200px, 42vw, 320px);
		aspect-ratio: 1;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
	}

	/* コンセプト：要素サイズは元のまま。本文が長いので内部スクロール可能に */
	.concept-section { padding: 0; align-items: stretch; }
	.js .concept-section .concept-inner {
		max-height: 100vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		align-content: start;
		padding: 84px 22px clamp(200px, 36vh, 300px);  /* 最下部までスクロールするとイラストが迫り上がる */
	}
	/* イラストは静止表示（追従なし）だが、コンセプト表示時は opacity でふんわりフェードイン。
	   位置は translate(0) 固定。is-shown で opacity:1（フェード）＝戻り時もフェードインする。 */
	.js .concept-section .concept-bg { opacity: 0; transform: none; transition: opacity 0.7s ease; }
	/* is-shown 時に確実にフェードイン（後方の opacity:0 に負けないよう詳細度を上げる） */
	.js .concept-section.is-shown .concept-bg { opacity: 1; }
	/* 見出しを大きく（右端に余白が残る範囲で） */
	.concept-section .concept-title { font-size: clamp(24px, 7vw, 34px); line-height: 1.55; }
	/* 白マーカーの見出しを少し太く＋文字間隔を少し詰める */
	.concept-section .concept-mark { font-weight: 700; letter-spacing: -0.03em; }
	/* 見出し2行目「…ある。」の末尾「る。」の右上に、既存のギザギザ（concept-spark と同じ形・配色）を装飾 */
	.concept-section .concept-title .concept-mark:last-child { position: relative; }
	.concept-section .concept-title .concept-mark:last-child::after {
		content: "";
		position: absolute;
		top: -1.15em;
		right: -0.95em;
		width: 2.1em;
		height: 2.1em;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
		pointer-events: none;
	}

	/* サービス：PC用の本文の左右ずらしを解除（スマホは通常位置に） */
	.va--media > :not(.va-svg),
	.va--media-left > :not(.va-svg) { left: 0; }

	/* SERVICE見出し（service-head）を少し下げる／01ブロックとの間隔を詰める */
	.service-head { margin-top: clamp(12px, 3.5vh, 32px); margin-bottom: clamp(28px, 6vh, 56px); }

	/* 03：本文＋ほぼ全幅イラストを固定枠に収める。余白・番号は01/02と同じ、イラストは上限で調整 */
	.hslide-intro {
		padding-top: clamp(20px, 4vh, 48px);
		padding-bottom: clamp(24px, 6vh, 48px);
		overflow: hidden;   /* 内容の上送りはJSが制御（スクロール最初の区間で03を出し切る） */
	}
	.hslide-intro .va-no    { font-size: clamp(56px, 11vw, 120px); margin-bottom: 22px; }
	/* 01→02の間隔を02→03（hslide-introの上余白）と揃える（スマホで未調整だったため大きすぎた） */
	.va + .va { margin-top: clamp(40px, 6vh, 72px); }
	/* 01・03を02と同じ「丸（下端カット無し）」に。03のイラストも01/02と同じ全幅サイズに */
	.va-svg:not(.va-svg--left) { -webkit-clip-path: none; clip-path: none; }
	.hslide-intro .va-svg   { width: 100%; max-width: none; max-height: none; margin: 20px 0 0; }

	/* サービス 01/02/03 の要素・見出しを少し大きく */
	.va-label { font-size: 13px; }
	.va-head  { font-size: clamp(24px, 6.6vw, 32px); }
	/* 「IMKの３つのアプローチ」も同様に＋文字色をロゴの紺色に */
	.service-mark { font-weight: 700; letter-spacing: -0.03em; color: #1b2a4a; }
	/* 右上にギザギザ。service-mark は overflow:hidden なので、文字幅ぴったりにした親 service-title に付ける */
	.service-head .service-title { display: inline-block; position: relative; overflow: visible; }
	.service-head .service-title::after {
		content: "";
		position: absolute;
		top: -0.65em;
		right: -0.49em;
		width: 1.2em;
		height: 1.2em;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
		pointer-events: none;
		z-index: 2;
	}
	.va-quote { font-size: clamp(15px, 4.2vw, 19px); }
	/* 01/02の本文→イラストの距離を03（本文下余白12px）と揃える */
	.va-body  { font-size: clamp(14px, 3.8vw, 16px); margin-bottom: 12px; }
	/* 01/02/03 の見出し：タップでは動かさない。中央ラインに来たら .wave-on で自動ウェーブ */
	.va-mark.wave-text:hover .wave-char { transform: none; }
	.va-mark.wave-on .wave-char { transform: translateY(-4px) scale(1.2); }
}

/* ============================================================================
   PC専用（min-width:768px）の装飾追加。スマホ(max-width:767px)には影響しない。
   ① ヒーローにコンセプトと同じ軌道線＋ギザギザ
   ② お問い合わせ以外の白ボックス見出しの右上に青ギザギザ
   ③ 3つの「〜こと」見出し（hslide-title）に白ボックス＋青ギザギザ
   ============================================================================ */
@media (min-width: 768px) {
	/* ① ヒーロー装飾（コンセプトと同じ軌道線＋左下ギザギザ）を表示 */
	.hero-concept-deco { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
	.hc-orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
	.hc-orbits ellipse { fill: none; stroke: rgba(11, 16, 32, 0.07); stroke-width: 1.5; }
	.hc-spark {
		position: absolute;
		left: -60px; bottom: -60px;
		width: clamp(280px, 26vw, 480px);
		aspect-ratio: 1;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
	}
	.hero-inner { position: relative; z-index: 1; }   /* 中身をデコより前面に */

	/* 01/02/03 見出し：PCもホバー発火をやめ、スクロールで .wave-on 発火（JSが付与） */
	.va-mark.wave-text:hover .wave-char { transform: none; }
	.va-mark.wave-on .wave-char { transform: translateY(-4px) scale(1.2); }

	/* ② サービス見出しの右上に青ギザギザ（service-mark は overflow:hidden なので親 service-title に付与） */
	.service-head .service-title { display: inline-block; position: relative; overflow: visible; }
	.service-head .service-title::after {
		content: "";
		position: absolute;
		top: -0.5em; right: -0.5em;
		width: 1.05em; height: 1.05em;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
		pointer-events: none;
		z-index: 2;
	}

	/* ③ 3つの「〜こと」見出し：白ボックス＋紺文字＋太字＋字詰め＋右上ギザギザ（コンセプトと同条件） */
	.hslide-title {
		display: inline-block;
		position: relative;
		background: #ffffff;
		color: #1b2a4a;
		font-weight: 700;
		letter-spacing: -0.03em;
		padding: 0.1em 0.32em;
		border-radius: 2px;
	}
	.hslide-title::after {
		content: "";
		position: absolute;
		top: -0.5em; right: -0.45em;
		width: 1em; height: 1em;
		background: linear-gradient(135deg, #3b82f6, #0ea5e9);
		clip-path: polygon(
			50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%,
			100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
			50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%,
			0% 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%
		);
		pointer-events: none;
	}
}