/* =========================================================================
   LocaLink インフルエンサーページ — フロント
   Figma「個人ページ」（1920 × 8389 / コンテンツ幅 1512）の実寸を基準に組んでいます。
   --u = Figma上の 1px。画面幅に応じて 1px → 0.6px まで縮小します。
   すべて .lkinf 配下にスコープしているのでテーマのCSSと衝突しません。
   ====================================================================== */

.lkinf {
	--lkinf-accent: #ff5800;
	--lkinf-ink: #1e1e1e;
	--lkinf-muted: #5a5a5a;
	--lkinf-line: #e4e4e4;
	--lkinf-surface: #efefef;
	--lkinf-badge: #ff5800;

	/* Figma 1px ぶんの実寸 */
	--u: clamp(0.6px, 0.05208vw, 1px);
	/* スマホモックの傾き（0deg で真っすぐ） */
	--lkinf-tilt: 6deg;

	color: var(--lkinf-ink);
	background: #fff;
	font-family: "Zen Kaku Gothic Antique", "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-feature-settings: "palt";
	font-size: calc(26 * var(--u));
	line-height: 1.9;
	overflow-x: clip;
}

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

.lkinf :where(img) {
	max-width: 100%;
	height: auto;
}

.lkinf :where(a) {
	color: inherit;
	text-decoration: none;
}

.lkinf :where(p, h1, h2, h3, figure, ul, ol) {
	margin: 0;
}

.lkinf-container {
	width: min( calc(1512 * var(--u)), calc(100% - 48px) );
	margin-inline: auto;
}

/* 左は本文と揃え、右は画面端まで抜ける（横スクロール用） */
.lkinf-container--bleed {
	width: 100%;
	margin-inline: 0;
	padding-left: max( 24px, calc( (100% - 1512 * var(--u)) / 2 ) );
	padding-right: 24px;
	scroll-padding-left: max( 24px, calc( (100% - 1512 * var(--u)) / 2 ) );
}

.lkinf-section {
	padding-block: calc(72 * var(--u));
}

/* --- 見出し ------------------------------------------------------------ */
.lkinf-heading,
.lkinf-eyebrow {
	display: flex;
	align-items: center;
	gap: calc(40 * var(--u));
	margin: 0 0 calc(40 * var(--u));
	font-size: calc(44 * var(--u));
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

.lkinf-heading::before,
.lkinf-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: calc(22 * var(--u));
	height: calc(95 * var(--u));
	border-radius: calc(4 * var(--u));
	background: var(--lkinf-accent);
}

.lkinf-heading--onaccent {
	color: #fff;
}

.lkinf-heading--onaccent::before {
	background: #fff;
}

.lkinf-eyebrow {
	margin-bottom: calc(56 * var(--u));
}

.lkinf-eyebrow i {
	font-style: normal;
	color: var(--lkinf-accent);
}

/* --- 画像プレースホルダー / 比率 ---------------------------------------- */
.lkinf-ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #d9d9d9;
}

.lkinf-ratio {
	position: relative;
	overflow: hidden;
	background: #d9d9d9;
}

.lkinf-ratio--card  { aspect-ratio: 45 / 70; }   /* ショート動画・PR実績 */
.lkinf-ratio--wide  { aspect-ratio: 187 / 100; } /* メディア出演 */

.lkinf-ratio img,
.lkinf-ratio .lkinf-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
}

/* =======================================================================
   ① ヒーロー
   ==================================================================== */
.lkinf-hero {
	position: relative;
	padding-block: calc(70 * var(--u)) calc(90 * var(--u));
	overflow: hidden;
}

.lkinf-hero__mark {
	display: none; /* テーマ側に背景ロゴがあるサイト向け。使う場合はこの行を削除 */
	position: absolute;
	right: -6%;
	top: 8%;
	width: min(62%, 780px);
	aspect-ratio: 3 / 2;
	background: #f4f4f4;
	border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%;
	transform: rotate(-8deg);
	z-index: 0;
	pointer-events: none;
}

.lkinf-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(560 * var(--u));
	gap: calc(40 * var(--u));
	align-items: center;
}

.lkinf-hero__concept {
	font-size: calc(26 * var(--u));
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--lkinf-accent);
	margin-bottom: calc(14 * var(--u));
}

.lkinf-hero__name {
	margin: 0;
	font-size: calc(64 * var(--u));
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.06em;
	color: var(--lkinf-ink);
}

.lkinf-hero__sub {
	margin-top: calc(12 * var(--u));
	font-size: calc(26 * var(--u));
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--lkinf-accent);
}

.lkinf-hero__followers {
	margin-top: calc(84 * var(--u));
}

.lkinf-hero__followers-label {
	font-size: calc(26 * var(--u));
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.6;
}

.lkinf-hero__followers-num {
	display: flex;
	align-items: baseline;
	gap: calc(4 * var(--u));
	margin-top: calc(6 * var(--u));
	font-size: calc(96 * var(--u));
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--lkinf-accent);
}

.lkinf-hero__followers-unit {
	font-size: calc(48 * var(--u));
	font-weight: 900;
}

.lkinf-hero__followers-box {
	display: inline-block;
}

.lkinf-hero__followers-note {
	margin-top: calc(4 * var(--u));
	text-align: right;
	font-size: calc(30 * var(--u));
	font-weight: 500;
	color: #6d6d6d;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.lkinf-hero__btns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(44 * var(--u));
	margin-top: calc(86 * var(--u));
}

/* SNSボタン：白地・黒の細い輪郭・アイコンは黒のグリフのみ */
.lkinf-snsbtn {
	display: inline-flex;
	align-items: center;
	gap: calc(26 * var(--u));
	width: calc(450 * var(--u));
	max-width: 100%;
	min-height: calc(100 * var(--u));
	padding-inline: calc(50 * var(--u)) calc(26 * var(--u));
	white-space: nowrap;
	background: #fff;
	border: calc(3 * var(--u)) solid var(--lkinf-ink);
	border-radius: 999px;
	color: var(--lkinf-ink);
	font-size: calc(34 * var(--u));
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	transition: background-color .2s ease, color .2s ease;
}

.lkinf-snsbtn:hover {
	background: var(--lkinf-ink);
	color: #fff;
}

.lkinf-snsbtn__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	color: currentColor;
}

.lkinf-snsbtn__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* --- スマホモックアップ（Figmaのモックに合わせた形） --------------------- */
.lkinf-hero__visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.lkinf .lkinf-hero__visual .lkinf-phone {
	position: relative;
	width: calc(460 * var(--u));
	max-width: 100%;
	padding: calc(11 * var(--u));
	background: linear-gradient(150deg, #4a4a4d 0%, #1a1a1c 18%, #141416 55%, #1a1a1c 82%, #4a4a4d 100%);
	border-radius: calc(66 * var(--u));
	transform: rotate(var(--lkinf-tilt));
	box-shadow:
		0 calc(34 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .22),
		0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .12);
}

/* 画像にすでにスマホ枠が入っている場合（Figmaのモックをそのまま使う） */
.lkinf .lkinf-hero__visual .lkinf-phone--raw {
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	width: calc(560 * var(--u));
	transform: none;
}

.lkinf-phone--raw::before,
.lkinf-phone--raw::after {
	display: none;
}

.lkinf .lkinf-phone--raw .lkinf-hero__img {
	position: static;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: contain;
}

/* 側面のボタン */
.lkinf-phone::before,
.lkinf-phone::after {
	content: "";
	position: absolute;
	width: calc(4 * var(--u));
	background: #2c2c2e;
	border-radius: calc(2 * var(--u));
}

.lkinf-phone::before {
	right: calc(-3 * var(--u));
	top: calc(230 * var(--u));
	height: calc(108 * var(--u));
}

.lkinf-phone::after {
	left: calc(-3 * var(--u));
	top: calc(196 * var(--u));
	height: calc(168 * var(--u));
}

/* ダイナミックアイランド（画面内に浮く黒い楕円） */
.lkinf-phone__notch {
	position: absolute;
	top: calc(34 * var(--u));
	left: 50%;
	transform: translateX(-50%);
	width: calc(122 * var(--u));
	height: calc(36 * var(--u));
	background: #08080a;
	border-radius: 999px;
	z-index: 2;
}

.lkinf-phone__screen {
	position: relative;
	overflow: hidden;
	border-radius: calc(56 * var(--u));
	background: #fff;
	aspect-ratio: 9 / 18.7;
	box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .1);
}

.lkinf .lkinf-phone__screen .lkinf-hero__img,
.lkinf .lkinf-phone__screen .lkinf-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: cover;
	object-position: top center;
	aspect-ratio: auto;
}

/* =======================================================================
   ② ABOUT / STORY
   ==================================================================== */
.lkinf-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(819 * var(--u));
	gap: calc(73 * var(--u));
	align-items: start;
}

.lkinf-about__grid--nophoto {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(1100 * var(--u));
}

.lkinf-about__catch {
	margin: 0 0 calc(60 * var(--u));
	font-size: calc(56 * var(--u));
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.1em;
}

.lkinf-about__body {
	font-size: calc(26 * var(--u));
	line-height: 1.95;
	color: #333;
}

/* 写真は Figma と同じ左右非対称の 2×2 */
.lkinf-about__photos {
	display: flex;
	flex-wrap: wrap;
	gap: calc(21 * var(--u));
}

.lkinf-about__photo {
	margin: 0;
	height: calc(330 * var(--u));
	overflow: hidden;
	border-radius: calc(24 * var(--u));
	background: #d9d9d9;
}

.lkinf-about__photo:nth-child(1) { flex: 0 0 calc(56.3% - 11 * var(--u)); }
.lkinf-about__photo:nth-child(2) { flex: 0 0 calc(43.7% - 11 * var(--u)); }
.lkinf-about__photo:nth-child(3) { flex: 0 0 calc(30.2% - 11 * var(--u)); }
.lkinf-about__photo:nth-child(4) { flex: 0 0 calc(69.8% - 11 * var(--u)); }
.lkinf-about__photo:nth-child(n + 5) { flex: 0 0 calc(50% - 11 * var(--u)); }

.lkinf-about__photo img,
.lkinf-about__photo .lkinf-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: auto;
}

/* =======================================================================
   ③④⑤ 横スクロールのカード
   ==================================================================== */
.lkinf-scroller {
	display: flex;
	gap: calc(60 * var(--u));
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: calc(20 * var(--u));
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.lkinf-scroller::-webkit-scrollbar { height: 6px; }
.lkinf-scroller::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 3px; }

.lkinf-card {
	flex: 0 0 calc(450 * var(--u));
	scroll-snap-align: start;
	display: block;
}

.lkinf-card__thumb { position: relative; }

/* ショート動画 */
.lkinf-card--short .lkinf-ratio { border-radius: calc(24 * var(--u)); }

.lkinf-card--short .lkinf-card__body { padding-top: calc(34 * var(--u)); }

/* 「再生数：〜」の行 */
.lkinf-card__views {
	margin-top: calc(6 * var(--u));
	font-size: calc(34 * var(--u));
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.lkinf-card__title {
	font-size: calc(34 * var(--u));
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.55;
}

.lkinf-card__tags {
	margin-top: calc(16 * var(--u));
	font-size: calc(26 * var(--u));
	font-weight: 500;
	color: var(--lkinf-ink);
	word-break: break-word;
}

/* PR実績：画像の角を丸めるだけ（白カードなし） */
.lkinf-card--pr .lkinf-ratio {
	border-radius: calc(24 * var(--u));
}

.lkinf-card--pr .lkinf-card__body {
	padding-top: calc(44 * var(--u));
}

/* メディア出演の白カード */
.lkinf-card--media {
	background: #fff;
	border-radius: calc(24 * var(--u));
	overflow: hidden;
}

.lkinf-card--media .lkinf-card__body {
	padding: calc(34 * var(--u)) calc(34 * var(--u)) calc(44 * var(--u));
}

/* 画像に重ねる「再生数：〜」 */
.lkinf-card__overlay {
	position: absolute;
	left: calc(38 * var(--u));
	right: calc(38 * var(--u));
	bottom: calc(26 * var(--u));
	z-index: 1;
	color: #fff;
	font-size: calc(34 * var(--u));
	font-weight: 700;
	letter-spacing: 0.06em;
	text-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .45);
}

.lkinf-card__thumb:has(.lkinf-card__overlay)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(180 * var(--u));
	background: linear-gradient(to top, rgba(0, 0, 0, .38), transparent);
	pointer-events: none;
}

.lkinf-card__body--center { text-align: center; }

.lkinf-card__name {
	font-size: calc(36 * var(--u));
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.lkinf-card__text {
	margin-top: calc(16 * var(--u));
	font-size: calc(26 * var(--u));
	line-height: 1.75;
	color: #333;
	text-align: left;
}

.lkinf-card__meta {
	margin-bottom: calc(8 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 500;
	color: var(--lkinf-ink);
	letter-spacing: 0.04em;
}

.lkinf-badge {
	position: absolute;
	z-index: 1;
	top: calc(40 * var(--u));
	left: calc(38 * var(--u));
	padding: calc(8 * var(--u)) calc(34 * var(--u));
	background: var(--lkinf-badge);
	color: #fff;
	border-radius: 999px;
	font-size: calc(28 * var(--u));
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* --- メディア出演実績（オレンジ帯） ------------------------------------- */
.lkinf-media {
	background: var(--lkinf-accent);
	padding-block: calc(90 * var(--u)) calc(100 * var(--u));
}

/* 旧フィールド（自由記入）をそのまま出すときの体裁 */
.lkinf-legacytext {
	max-width: calc(1100 * var(--u));
	font-size: calc(26 * var(--u));
	line-height: 1.95;
}

.lkinf-legacytext p {
	margin: 0 0 calc(24 * var(--u));
}

.lkinf-legacytext--onaccent {
	color: #fff;
}

/* =======================================================================
   ⑥ ご依頼いただけること
   ==================================================================== */
.lkinf-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(40 * var(--u));
}

.lkinf-servicecard {
	display: flex;
	flex-direction: column;
	min-height: calc(365 * var(--u));
	padding: calc(36 * var(--u)) calc(56 * var(--u)) calc(44 * var(--u));
	background: var(--lkinf-surface);
	border-radius: calc(20 * var(--u));
}

.lkinf-servicecard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(180 * var(--u));
	margin-bottom: calc(18 * var(--u));
}

.lkinf-servicecard__icon img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.lkinf-servicecard__icon .lkinf-ph {
	width: calc(240 * var(--u));
	height: 100%;
	background: #e2e2e2;
	border-radius: calc(12 * var(--u));
	aspect-ratio: auto;
}

.lkinf-servicecard__title {
	margin-bottom: calc(16 * var(--u));
	font-size: calc(36 * var(--u));
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
}

.lkinf-servicecard__text {
	font-size: calc(26 * var(--u));
	line-height: 1.75;
	color: #333;
}

.lkinf-services__note {
	margin-top: calc(56 * var(--u));
	text-align: center;
	font-size: calc(30 * var(--u));
	font-weight: 500;
}

/* =======================================================================
   ⑦ CONTACT
   ==================================================================== */
.lkinf-contact {
	position: relative;
	padding-top: calc(160 * var(--u));
	isolation: isolate;
}

.lkinf-contact__wave {
	position: absolute;
	inset: 0 0 auto 0;
	width: 100%;
	height: calc(160 * var(--u));
	fill: var(--lkinf-accent);
	z-index: -1;
}

.lkinf-contact::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(159 * var(--u));
	bottom: 0;
	background: var(--lkinf-accent);
	z-index: -1;
}

.lkinf-contact__inner {
	padding-block: calc(40 * var(--u)) calc(120 * var(--u));
	color: #fff;
}

.lkinf-contact__en {
	font-size: calc(62 * var(--u));
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
}

.lkinf-contact__lead {
	margin-top: calc(72 * var(--u));
	font-size: calc(30 * var(--u));
	font-weight: 700;
	letter-spacing: 0.08em;
}

.lkinf-contact__body {
	margin-top: calc(58 * var(--u));
	font-size: calc(34 * var(--u));
	font-weight: 700;
	line-height: 1.8;
}

.lkinf-contact__btnwrap {
	display: flex;
	justify-content: center;
	max-width: calc(1010 * var(--u));
	margin-top: calc(118 * var(--u));
}

.lkinf-contact__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(544 * var(--u));
	max-width: 100%;
	min-height: calc(136 * var(--u));
	padding-inline: calc(46 * var(--u)) calc(120 * var(--u));
	background: #fff;
	color: var(--lkinf-accent);
	border-radius: 0;
	font-size: calc(36 * var(--u));
	font-weight: 700;
	letter-spacing: 0.1em;
	transition: transform .2s ease, box-shadow .2s ease;
}

.lkinf-contact__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .2);
}

.lkinf-contact__arrow {
	position: absolute;
	right: calc(60 * var(--u));
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	border-radius: 50%;
	background: var(--lkinf-accent);
	color: #fff;
	font-style: normal;
	font-size: calc(20 * var(--u));
	line-height: 1;
}

/* =======================================================================
   一覧ページ
   ==================================================================== */
.lkinf-archive__title {
	margin: 0 0 calc(56 * var(--u));
	font-size: calc(50 * var(--u));
	font-weight: 700;
	letter-spacing: 0.2em;
	text-align: center;
}

.lkinf-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(40 * var(--u));
}

.lkinf-archive__card {
	display: block;
	background: #fff;
	border-radius: calc(20 * var(--u));
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}

.lkinf-archive__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .1);
}

.lkinf-archive__body { padding: calc(30 * var(--u)) calc(34 * var(--u)) calc(40 * var(--u)); }

.lkinf-archive__concept {
	font-size: calc(22 * var(--u));
	font-weight: 700;
	color: var(--lkinf-accent);
}

.lkinf-archive__name {
	margin-top: calc(6 * var(--u));
	font-size: calc(34 * var(--u));
	font-weight: 700;
}

.lkinf-archive__followers {
	margin-top: calc(12 * var(--u));
	font-size: calc(26 * var(--u));
	font-weight: 700;
	color: var(--lkinf-accent);
}

.lkinf-archive__empty { text-align: center; color: var(--lkinf-muted); }

/* =======================================================================
   レスポンシブ
   ==================================================================== */
@media (max-width: 1024px) {
	.lkinf { --u: clamp(0.62px, 0.075vw, 1px); }
}

@media (max-width: 900px) {
	.lkinf {
		--u: 0.62px;
		--lkinf-tilt: 0deg;
		font-size: 15px;
		line-height: 1.85;
	}

	.lkinf-hero__inner,
	.lkinf-about__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.lkinf-hero__visual { order: -1; }

	.lkinf .lkinf-hero__visual .lkinf-phone { width: 240px; }

	.lkinf-about__photo {
		height: 150px;
	}

	.lkinf-about__photo:nth-child(n) { flex: 0 0 calc(50% - 6px); }

	.lkinf-services__grid,
	.lkinf-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lkinf-hero__followers-note {
		display: block;
		margin-left: 0;
		margin-top: 4px;
	}
}

@media (max-width: 600px) {
	.lkinf-services__grid,
	.lkinf-archive__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lkinf-card { flex-basis: 68vw; }

	.lkinf-snsbtn { width: 100%; }

	.lkinf-contact__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.lkinf * { transition: none !important; }
}