@charset "UTF-8";
/* =========================================================================
   HEART CREATION
   黒を基調にしたクリエイティブスタジオ用スタイル。

   1.  変数・リセット
   2.  タイポグラフィ／共通パーツ
   3.  ヘッダー・ドロワー
   4.  ヒーロー
   5.  マーキー・数値
   6.  サービス
   7.  実績
   8.  Method / Format / KPI
   9.  About / Stance / Reason
   10. Flow / Price
   11. コラム / FAQ
   12. 下層ページ共通
   13. フォーム
   14. CTA・フッター
   15. 記事本文・その他
   16. 表示アニメーション
   ====================================================================== */

/* =========================================================================
   1. 変数・リセット
   ====================================================================== */

:root {
	/* 背景 */
	--bk:        #08090a;
	--bk-2:      #0d0e10;
	--bk-3:      #131416;
	--bk-4:      #1a1c1f;

	/* 罫線 */
	--line:      rgba(255, 255, 255, .13);
	--line-2:    rgba(255, 255, 255, .07);
	--line-3:    rgba(255, 255, 255, .22);

	/* 文字 */
	--wh:        #f2f2f0;
	--gray:      #9aa0a8;
	--gray-2:    #6b7076;

	/* アクセント。ここだけ変えれば、色の出る場所すべてが一度に変わる。
	   --acid  … 押させたい場所だけに使う一点の色
	   --label … 見出しラベル・数字・記号など、以前アクセント色だった箇所 */
	--acid:      #f2f2f0;
	--acid-rgb:  255, 255, 255;
	--acid-dark: #ffffff;
	--label:     #f2f2f0;
	--label-rgb: 255, 255, 255;

	/* 書体 */
	--en:  "Anton", "Archivo", sans-serif;
	--en2: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--ja:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;

	/* 余白 */
	--pad:      clamp(20px, 5vw, 48px);
	--sec:      clamp(72px, 10vw, 152px);
	--header-h: 76px;
}

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

html {
	scroll-behavior: smooth;
	/* 固定ヘッダーの下にアンカー先が潜らないように */
	scroll-padding-top: calc(var(--header-h) + 20px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bk);
	color: var(--wh);
	font-family: var(--ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.95;
	letter-spacing: .02em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* 全面にごく薄い粒子を敷いて、黒ベタの平坦さを消す */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.nav-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color .3s ease, opacity .3s ease, border-color .3s ease;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

dl, dd {
	margin: 0;
}

h1, h2, h3, h4, p, figure {
	margin: 0;
}

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

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--acid);
	color: #000;
}

:focus-visible {
	outline: 2px solid var(--acid);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--acid);
	color: #000;
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
}

/* =========================================================================
   2. タイポグラフィ／共通パーツ
   ====================================================================== */

.container {
	width: min(100% - var(--pad) * 2, 1240px);
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - var(--pad) * 2, 820px);
}

.section {
	padding-block: var(--sec);
	position: relative;
}

/* セクション見出し */
.sec-head {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.sec-head__en {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--en2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--label);
	margin-bottom: 14px;
}

.sec-head__en::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--label);
}

.sec-head__ja {
	font-size: clamp(28px, 4.4vw, 48px);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.sec-head--center {
	text-align: center;
}

.sec-head--center .sec-head__en::before {
	display: none;
}

.lead-text {
	max-width: 760px;
	color: var(--gray);
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 2.1;
	margin-bottom: clamp(32px, 4vw, 52px);
}

/* ボタン */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 30px;
	border: 1px solid var(--line-3);
	color: var(--wh);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-align: center;
	transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.btn:hover {
	background: var(--wh);
	border-color: var(--wh);
	color: #000;
}

.btn--solid {
	background: var(--acid);
	border-color: var(--acid);
	color: #000;
}

.btn--solid:hover {
	background: var(--wh);
	border-color: var(--wh);
	color: #000;
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	border-color: var(--line-3);
}

.btn--lg {
	min-height: 62px;
	padding: 0 40px;
	font-size: 15px;
}

.btn--block {
	display: flex;
	width: 100%;
}

/* 矢印つきリンク */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line-3);
}

.link-arrow::after {
	content: "";
	width: 20px;
	height: 1px;
	background: currentColor;
	position: relative;
	transition: width .3s ease;
}

.link-arrow:hover {
	color: var(--label);
	border-color: var(--label);
}

.link-arrow:hover::after {
	width: 32px;
}

.link-arrow--up::after {
	transform: rotate(-90deg);
}

.section__more {
	margin-top: clamp(32px, 4vw, 52px);
}

/* 画像がないときの代替背景 */
.ph {
	width: 100%;
	height: 100%;
	min-height: 180px;
	background:
		linear-gradient(135deg, rgba(var(--label-rgb), .06), transparent 55%),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 9px),
		var(--bk-3);
}

.ph--tall {
	aspect-ratio: 3 / 4;
}

.ph--reel {
	aspect-ratio: 9 / 16;
	min-height: 0;
}

/* =========================================================================
   3. ヘッダー・ドロワー
   ====================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 200;
	height: var(--header-h);
	background: rgba(8, 9, 10, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line-2);
	transition: background .4s ease, border-color .4s ease;
}

/* トップページはヒーローの上に透明で重ねる */
.is-front .site-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-color: transparent;
}

.is-front .site-header.is-stuck {
	background: rgba(8, 9, 10, .86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: var(--line-2);
}

.site-header__inner {
	height: 100%;
	width: min(100% - 32px, 1560px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
}

/* ブランド */
.brand {
	flex-shrink: 0;
	line-height: 1;
}

.brand__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.brand__en {
	font-family: var(--en);
	font-size: 21px;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
}

.brand__sub {
	font-family: var(--en2);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--gray-2);
	text-transform: uppercase;
}

.custom-logo-link {
	display: block;
}

.custom-logo {
	width: auto;
	max-height: 34px;
}

/* メインメニュー */
.site-nav {
	margin-left: auto;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
}

.site-nav__list a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--wh);
}

.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--label);
	transition: width .3s ease;
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after {
	width: 100%;
}

.site-nav__list .sub-menu {
	display: none;
}

/* ヘッダー右 */
.header-cta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.header-tel {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.header-tel__label {
	font-size: 9.5px;
	letter-spacing: .12em;
	color: var(--gray-2);
}

.header-tel__num {
	font-family: var(--en2);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .02em;
}

.header-cta__btn {
	min-height: 42px;
	padding: 0 22px;
	font-size: 13px;
}

/* ハンバーガー */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-left: auto;
	position: relative;
	flex-shrink: 0;
}

.nav-toggle span {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 1.5px;
	background: var(--wh);
	transition: transform .35s ease, opacity .25s ease;
}

.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(3.5px) rotate(38deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	transform: translateY(-3.5px) rotate(-38deg);
}

/* ドロワー */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: var(--bk);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity .35s ease, transform .35s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.drawer.is-open {
	opacity: 1;
	transform: none;
}

.drawer__inner {
	min-height: 100%;
	padding: calc(var(--header-h) + 28px) var(--pad) 48px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.drawer__list {
	border-top: 1px solid var(--line-2);
}

.drawer__list li {
	border-bottom: 1px solid var(--line-2);
}

.drawer__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 2px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .02em;
}

.drawer__list a::after {
	content: "→";
	color: var(--label);
	font-size: 14px;
}

.drawer__list .sub-menu a {
	font-size: 14px;
	font-weight: 500;
	padding-left: 16px;
	color: var(--gray);
}

.drawer__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.drawer__tel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 0;
	border-block: 1px solid var(--line-2);
}

.drawer__tel span {
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--gray-2);
}

.drawer__tel strong {
	font-family: var(--en2);
	font-size: 27px;
	font-weight: 700;
}

.drawer__sns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-family: var(--en2);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--gray);
	text-transform: uppercase;
}

.drawer__sns a:hover {
	color: var(--label);
}

/* =========================================================================
   4. ヒーロー
   ====================================================================== */

.hero {
	position: relative;
	min-height: min(100svh, 940px);
	padding-top: calc(var(--header-h) + clamp(40px, 7vw, 90px));
	padding-bottom: clamp(56px, 8vw, 110px);
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__img,
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 濃さはカスタマイザーから --hero-opacity で渡ってくる */
	opacity: var(--hero-opacity, .34);
	filter: grayscale(.4) contrast(1.05);
}

/* 動画は素材が既にモノクロなことが多いので、彩度を落としすぎない */
.hero__video {
	filter: contrast(1.06) brightness(.96);
	pointer-events: none;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(80% 60% at 78% 18%, rgba(var(--label-rgb), .09), transparent 60%),
		radial-gradient(70% 70% at 8% 90%, rgba(255, 255, 255, .05), transparent 62%),
		linear-gradient(180deg, transparent 50%, var(--bk) 100%);
}

/* 背景の細い縦罫 */
.hero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: min(100% - var(--pad) * 2, 1240px);
	margin-inline: auto;
	pointer-events: none;
}

.hero__grid span {
	border-left: 1px solid var(--line-2);
}

.hero__inner {
	width: min(100% - var(--pad) * 2, 1240px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.hero__text {
	position: relative;
}

/* --------------------------------------------------------------
 * メインコピーの背面に薄く敷くロゴ
 *
 * ロゴ画像はマスクとして使い、そこへグラデーションを流し込んでいる。
 * ゆっくり漂う動き（float）と、横に光が抜ける動き（shine）の2つ。
 * ------------------------------------------------------------ */
.hero__mark {
	position: absolute;
	left: -5%;
	top: clamp(-96px, -6vw, -24px);
	width: min(920px, 108%);
	z-index: -1;
	pointer-events: none;
	user-select: none;
	opacity: .065;
	will-change: transform, background-position;
}

.hero__mark--img {
	aspect-ratio: 5 / 4;
	-webkit-mask-image: var(--hc-logo);
	mask-image: var(--hc-logo);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background: linear-gradient(100deg,
		#ffffff 0%,
		#ffffff 34%,
		var(--label) 50%,
		#ffffff 66%,
		#ffffff 100%);
	background-size: 320% 100%;
	animation:
		hc-mark-float 22s ease-in-out infinite alternate,
		hc-mark-shine 11s linear infinite;
}

/* ロゴ画像が未設定のときの代替（文字で同じ効果を出す） */
.hero__mark--text {
	font-family: var(--en);
	font-size: clamp(58px, 12.5vw, 172px);
	line-height: .84;
	letter-spacing: -.02em;
	text-transform: uppercase;
	background: linear-gradient(100deg,
		#ffffff 0%,
		#ffffff 34%,
		var(--label) 50%,
		#ffffff 66%,
		#ffffff 100%);
	background-size: 320% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation:
		hc-mark-float 22s ease-in-out infinite alternate,
		hc-mark-shine 11s linear infinite;
}

.hero__mark--text span {
	display: block;
	max-width: 6em;
}

@keyframes hc-mark-float {
	0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
	100% { transform: translate3d(2.5%, -3.5%, 0) scale(1.07) rotate(-1.2deg); }
}

@keyframes hc-mark-shine {
	0%   { background-position: 150% 0; }
	100% { background-position: -150% 0; }
}

.hero__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--en2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--label);
	margin-bottom: 22px;
}

.hero__label::before {
	content: "";
	width: 30px;
	height: 1px;
	background: var(--label);
}

/* --------------------------------------------------------------
 * メインコピー（グリッチ）
 *
 * data-text 属性に同じ文言を持たせ、::before / ::after で
 * ライムとシアンにずらした複製を重ねている。
 * 常時揺らすと安っぽくなるため、3.4秒に一度だけ短く走らせる。
 * 改行は white-space: pre-line で、属性内の改行をそのまま活かす。
 * ------------------------------------------------------------ */
.hero__copy {
	position: relative;
	font-size: clamp(38px, 7.2vw, 92px);
	font-weight: 900;
	line-height: 1.14;
	letter-spacing: -.025em;
	margin-bottom: 26px;
	white-space: pre-line;
	animation: hc-glitch-shift 3.4s steps(1) infinite;
	animation-delay: -2.9s;
}

.hero__copy::before,
.hero__copy::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	white-space: pre-line;
	pointer-events: none;
	user-select: none;
}

/* 打ち込み中はグリッチを止める（複製が先に全文を出してしまうため） */
.hero__copy.is-typing {
	animation: none;
}

.hero__copy.is-typing::before,
.hero__copy.is-typing::after {
	display: none;
}

/* 打ち込み位置のカーソル */
.hero__copy .caret {
	display: inline-block;
	width: .055em;
	height: .84em;
	margin-left: .08em;
	background: var(--label);
	vertical-align: -.06em;
	animation: hc-caret .9s steps(1) infinite;
}

@keyframes hc-caret {
	0%, 50%      { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

.hero__copy::before {
	color: var(--label);
	animation: hc-glitch-a 3.4s steps(1) infinite;
	animation-delay: -2.9s;
}

.hero__copy::after {
	color: #47dcff;
	animation: hc-glitch-b 3.4s steps(1) infinite;
	animation-delay: -2.9s;
}

/* ライム側：上下の帯を切り出して左右にずらす */
@keyframes hc-glitch-a {
	0%, 86%    { clip-path: inset(100% 0 0 0); transform: none; }
	87%        { clip-path: inset(10% 0 76% 0); transform: translate3d(-7px, -2px, 0); }
	88.5%      { clip-path: inset(56% 0 28% 0); transform: translate3d(6px, 1px, 0); }
	90%        { clip-path: inset(31% 0 53% 0); transform: translate3d(-5px, 2px, 0); }
	91.5%      { clip-path: inset(74% 0 8% 0);  transform: translate3d(7px, -1px, 0); }
	93%, 100%  { clip-path: inset(100% 0 0 0); transform: none; }
}

/* シアン側：ライムと逆方向に、別の帯を切り出す */
@keyframes hc-glitch-b {
	0%, 86%    { clip-path: inset(100% 0 0 0); transform: none; }
	87.5%      { clip-path: inset(44% 0 42% 0); transform: translate3d(6px, 2px, 0); }
	89%        { clip-path: inset(18% 0 64% 0); transform: translate3d(-6px, -1px, 0); }
	90.5%      { clip-path: inset(66% 0 18% 0); transform: translate3d(4px, -2px, 0); }
	92%        { clip-path: inset(6% 0 82% 0);  transform: translate3d(-7px, 1px, 0); }
	93.5%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
}

/* 本体もわずかに歪ませる */
@keyframes hc-glitch-shift {
	0%, 86%     { transform: none; }
	87.5%       { transform: translate3d(2px, 0, 0) skewX(-1.1deg); }
	89.5%       { transform: translate3d(-3px, 0, 0) skewX(.9deg); }
	91%         { transform: translate3d(1px, 0, 0); }
	92.5%, 100% { transform: none; }
}

.hero__sub {
	max-width: 42em;
	color: var(--gray);
	font-size: clamp(13px, 1.5vw, 15.5px);
	line-height: 2;
	letter-spacing: .04em;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 38px;
}

/* 縦型フレーム3枚 */
.reels {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 18px);
	flex-shrink: 0;
}

.reel {
	width: clamp(96px, 11vw, 168px);
}

.reel__frame {
	position: relative;
	aspect-ratio: 9 / 16;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bk-2);
}

.reel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .9;
	transition: opacity .5s ease;
}

.reel__frame:hover .reel__img {
	opacity: 1;
}

.reel__ui {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.reel__play {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(var(--label-rgb), .5);
	border-radius: 50%;
	position: relative;
	backdrop-filter: blur(3px);
}

.reel__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--wh);
}

.reel__ratio {
	position: absolute;
	left: 8px;
	bottom: 8px;
	font-family: var(--en2);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .55);
}

/* 写真の下だけ暗くして、再生時間を読めるようにする */
.reel__frame::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 40%;
	background: linear-gradient(transparent, rgba(6, 7, 8, .78));
	pointer-events: none;
	z-index: 1;
}

/* 再生時間 */
.reel__time {
	position: absolute;
	right: 7px;
	bottom: 7px;
	z-index: 2;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(6, 7, 8, .74);
	font-family: var(--en2);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .94);
}

/* 再生ボタンから外へ広がる輪 */
.reel__ui {
	z-index: 2;
}

.reel__play::before {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid rgba(var(--label-rgb), .5);
	border-radius: 50%;
	animation: hc-pulse 3.4s ease-out infinite;
}

.reel--2 .reel__play::before { animation-delay: .6s; }
.reel--3 .reel__play::before { animation-delay: 1.3s; }

@keyframes hc-pulse {
	0%        { transform: scale(1);   opacity: .85; }
	70%, 100% { transform: scale(1.9); opacity: 0; }
}

/* 中央を持ち上げ、両脇は奥へ向ける */
.reel--1 { transform: translateY(22px); }
.reel--2 { transform: translateY(-14px); }
.reel--3 { transform: translateY(30px); }

/* 3枚を、奥行きのある空間に置く */
.reels {
	perspective: 1500px;
	perspective-origin: 50% 45%;
}

.reel__frame {
	transform-style: preserve-3d;
	transition:
		transform .9s cubic-bezier(.2, .7, .3, 1),
		filter .9s ease,
		border-color .5s ease,
		box-shadow .5s ease;
}

/* 両脇は内側を向く。中央は正面で、少し手前に出る。 */
.reel--1 .reel__frame { transform: rotateY(19deg)  translateZ(-40px); }
.reel--2 .reel__frame { transform: rotateY(0deg)   translateZ(30px); }
.reel--3 .reel__frame { transform: rotateY(-19deg) translateZ(-40px); }

/* 再生中の1枚だけが正面に立ち、手前へ出る */
.reel.is-playing .reel__frame {
	transform: rotateY(0deg) translateZ(90px) scale(1.03);
}

/* 待機中は、ピントを外して奥に沈める */
.reels.is-cycling .reel:not(.is-playing) .reel__frame {
	filter: blur(1.6px) brightness(.62) saturate(.8);
}

/* 再生中の枠を、光が一周する */
.reel.is-playing .reel__frame::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 4;
	border-radius: 15px;
	padding: 1px;
	background: conic-gradient(
		from var(--edge, 0deg),
		transparent 0deg,
		rgba(255, 255, 255, .9) 26deg,
		transparent 60deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: hc-edge 4.2s linear infinite;
	pointer-events: none;
}

@property --edge {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes hc-edge {
	to { --edge: 360deg; }
}

/* 床の映り込み。奥行きの手がかりになる。 */
.reels::after {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -26px;
	height: 60px;
	background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, .07), transparent 72%);
	filter: blur(6px);
	pointer-events: none;
}

.reels {
	position: relative;
}

.reel--2 .reel__frame {
	border-color: rgba(var(--label-rgb), .38);
	box-shadow: 0 0 0 1px rgba(var(--label-rgb), .08), 0 24px 60px rgba(0, 0, 0, .6);
}

/* 画像がイメージであることの注記
   .hero は flex なので、通常の要素にすると横に並んでしまう。絶対配置で下に置く。 */
.hero__note {
	position: absolute;
	left: 50%;
	bottom: clamp(10px, 1.6vw, 20px);
	max-width: 22em;
	transform: translateX(-50%);
	z-index: 2;
	width: min(100% - var(--pad) * 2, 1240px);
	margin: 0;
	font-size: 10.5px;
	letter-spacing: .04em;
	line-height: 1.6;
	color: var(--gray-2);
	pointer-events: none;
}

/* 縦型フレームの写真を、ゆっくり寄り引きさせる */
.reel__img {
	animation: hc-reel-zoom 15s ease-in-out infinite alternate;
	transform-origin: center 42%;
}

.reel--2 .reel__img {
	animation-duration: 19s;
	animation-delay: -5s;
}

.reel--3 .reel__img {
	animation-duration: 13s;
	animation-delay: -8s;
}

@keyframes hc-reel-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* --------------------------------------------------------------
 * 3枚が順番に再生されているように見せる
 * JSが .is-playing を送っていく。付いた枠だけが「再生中」。
 * ------------------------------------------------------------ */
.reel__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 2px;
	background: rgba(255, 255, 255, .16);
	opacity: 0;
	transition: opacity .4s ease;
}

.reel__bar i {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--acid);
	transform: scaleX(0);
	transform-origin: left center;
}

.reel.is-playing .reel__bar {
	opacity: 1;
}

.reel.is-playing .reel__bar i {
	animation: hc-bar 4.2s linear forwards;
}

@keyframes hc-bar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* 再生中は明るく、枠が光る */
.reel .reel__frame {
	transition: border-color .5s ease, box-shadow .5s ease;
}

.reel.is-playing .reel__frame {
	border-color: rgba(var(--acid-rgb), .62);
	box-shadow: 0 0 0 1px rgba(var(--acid-rgb), .12), 0 22px 60px rgba(0, 0, 0, .6);
}

.reel.is-playing .reel__img {
	opacity: 1;
}

/* 待機中は少し沈ませる */
.reels.is-cycling .reel:not(.is-playing) .reel__img {
	opacity: .85;
}

/* 再生中は再生ボタンを消す */
.reel__ui {
	transition: opacity .4s ease;
}

.reel.is-playing .reel__ui {
	opacity: 0;
}

/* カーソルを追う淡い光（PCのみ・JSが座標を渡す） */
.hero__spot {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
	background: radial-gradient(
		340px circle at var(--mx, 50%) var(--my, 40%),
		rgba(var(--label-rgb), .13),
		transparent 68%
	);
}

.hero__spot.is-on {
	opacity: 1;
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gray-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.hero__scroll::after {
	content: "";
	width: 1px;
	height: 44px;
	background: linear-gradient(var(--line-3), transparent);
	animation: hc-scroll 2.4s ease-in-out infinite;
}

@keyframes hc-scroll {
	0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
	50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* =========================================================================
   5. マーキー・数値
   ====================================================================== */

.marquee {
	border-block: 1px solid var(--line-2);
	padding-block: 18px;
	overflow: hidden;
	background: var(--bk-2);
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: hc-marquee 46s linear infinite;
}

.marquee__list {
	display: flex;
	align-items: center;
	gap: 44px;
	padding-right: 44px;
}

.marquee__list li {
	font-family: var(--en);
	font-size: clamp(20px, 2.6vw, 34px);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .3);
	white-space: nowrap;
}

.marquee__list li:nth-child(3n) {
	color: var(--label);
	-webkit-text-stroke: 0;
}

@keyframes hc-marquee {
	to { transform: translateX(-50%); }
}

/* 数値 */
.section--numbers {
	padding-block: clamp(56px, 7vw, 96px);
}

.numbers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line-2);
	border-left: 1px solid var(--line-2);
}

.number {
	padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px);
	border-right: 1px solid var(--line-2);
	border-bottom: 1px solid var(--line-2);
}

.number__en {
	display: block;
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gray-2);
	margin-bottom: 12px;
}

.number__value {
	font-family: var(--en);
	font-size: clamp(38px, 5.6vw, 68px);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--label);
}

.number__unit {
	font-family: var(--ja);
	font-size: clamp(13px, 1.4vw, 16px);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wh);
	margin-left: 4px;
}

.number__label {
	margin-top: 10px;
	font-size: 13px;
	color: var(--gray);
	letter-spacing: .04em;
}

.numbers__note {
	margin-top: 16px;
	font-size: 11.5px;
	color: var(--gray-2);
	letter-spacing: .04em;
}

/* =========================================================================
   6. サービス
   ====================================================================== */

.service-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.service-card {
	background: var(--bk);
	transition: background .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
	transform-style: preserve-3d;
}

/* カーソルの位置に合わせてわずかに傾く（PCのみ・JSが角度を渡す） */
@media (hover: hover) and (min-width: 1025px) {
	.service-card.is-tilting {
		transform:
			perspective(1000px)
			rotateX(var(--tilt-x, 0deg))
			rotateY(var(--tilt-y, 0deg))
			translateZ(6px);
	}
}

.service-card:hover {
	background: var(--bk-2);
}

.service-card__link {
	display: block;
	position: relative;
	height: 100%;
	padding: clamp(22px, 2.4vw, 34px);
}

.service-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	margin-bottom: 24px;
	background: var(--bk-3);
}

.service-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .75;
	transition: transform .7s cubic-bezier(.2, .7, .3, 1), opacity .5s ease;
}

.service-card:hover .service-card__img {
	transform: scale(1.06);
	opacity: 1;
}

.service-card__no {
	font-family: var(--en);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--label);
	margin-right: 12px;
}

.service-card__en {
	font-family: var(--en2);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.service-card__title {
	margin-top: 12px;
	font-size: clamp(17px, 1.9vw, 21px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
}

.service-card__lead {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--gray);
}

.service-card__arrow {
	display: block;
	width: 28px;
	height: 1px;
	background: var(--line-3);
	margin-top: 24px;
	transition: width .35s ease, background .35s ease;
}

.service-card:hover .service-card__arrow {
	width: 52px;
	background: var(--label);
}

/* =========================================================================
   7. 実績
   ====================================================================== */

.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
	align-items: start;
}

.work-card__link {
	display: block;
}

.work-card__media {
	position: relative;
	overflow: hidden;
	background: var(--bk-3);
	border: 1px solid var(--line-2);
	transition: border-color .35s ease;
}

.work-card--v .work-card__media { aspect-ratio: 9 / 16; }
.work-card--w .work-card__media { aspect-ratio: 16 / 9; }

.work-card__media .ph { min-height: 0; }

.work-card:hover .work-card__media {
	border-color: var(--line-3);
}

.work-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .85;
	transition: transform .8s cubic-bezier(.2, .7, .3, 1), opacity .5s ease;
}

.work-card:hover .work-card__img {
	transform: scale(1.05);
	opacity: 1;
}

.work-card__cat {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	background: rgba(8, 9, 10, .8);
	backdrop-filter: blur(6px);
	border: 1px solid var(--line);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
}

.work-card__ratio {
	position: absolute;
	right: 12px;
	bottom: 12px;
	font-family: var(--en2);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .5);
}

/* 再生ボタン。押せることが分かればいいので、控えめに。 */
.work-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 62px;
	height: 62px;
	transform: translate(-50%, -50%) scale(.92);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: rgba(8, 9, 10, .42);
	backdrop-filter: blur(3px);
	opacity: .82;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .35s ease, background-color .35s ease;
}

.work-card__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

.work-card:hover .work-card__play {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	background: rgba(8, 9, 10, .2);
}

.work-card__body {
	padding-top: 18px;
}

.work-card__client {
	display: block;
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--gray-2);
	margin-bottom: 8px;
}

.work-card__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	transition: color .3s ease;
}

.work-card:hover .work-card__title {
	color: var(--label);
}

.work-card__result {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line-2);
	font-size: 12.5px;
	letter-spacing: .03em;
	color: var(--label);
}

.work-card__excerpt {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--gray);
}

/* --- エンドロールと同じ組みで、1本分のクレジットを出す --------------- */

.work-card__no {
	display: block;
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	color: var(--gray-2);
	margin-bottom: 10px;
}

.work-card__sub {
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.8;
	letter-spacing: .02em;
	color: var(--gray);
}

.work-credits {
	display: grid;
	gap: 7px;
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px solid var(--line-2);
}

.work-credits > div {
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: 14px;
	align-items: baseline;
}

.work-credits dt {
	text-align: right;
	font-family: var(--en2);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.work-credits dd {
	font-size: 12.5px;
	line-height: 1.65;
	letter-spacing: .02em;
	color: #cfcfcd;
}

/* 自社の担当を書いた行。ここだけ少し起こす。 */
.work-credits__ours dt {
	color: var(--label);
}

.work-credits__ours dd {
	font-family: var(--en2);
	font-size: 12px;
	color: #fff;
	font-weight: 600;
	letter-spacing: .13em;
}

/* 担当が和文のとき。欧文の字間だと間延びする。 */
.work-credits__ours--ja dd {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
}

/* 最後の一行。クレジットの締めに置く。 */
.work-card__watch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 16px;
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gray-2);
	transition: color .3s ease;
}

.work-card__watch::after {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: width .4s cubic-bezier(.2, .7, .3, 1);
}

.work-card:hover .work-card__watch {
	color: var(--label);
}

.work-card:hover .work-card__watch::after {
	width: 38px;
}

@media (max-width: 760px) {
	.work-credits > div {
		grid-template-columns: 58px 1fr;
		gap: 12px;
	}
}

/* 絞り込み */
.work-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(28px, 3vw, 44px);
}

.work-filters a {
	padding: 9px 20px;
	border: 1px solid var(--line);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
}

.work-filters a:hover {
	border-color: var(--wh);
}

.work-filters a.is-current {
	background: var(--label);
	border-color: var(--label);
	color: #000;
	font-weight: 700;
}

/* 実績詳細 */
.work-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.work-thumb {
	margin-bottom: 40px;
	border: 1px solid var(--line-2);
	overflow: hidden;
}

.work-thumb--v {
	max-width: 420px;
}

.work-video {
	margin-bottom: 40px;
}

.work-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

.work-video--v {
	max-width: 420px;
}

.work-video--v iframe {
	aspect-ratio: 9 / 16;
}

.work-video__link a {
	color: var(--label);
	text-decoration: underline;
}

.work-meta {
	border-top: 1px solid var(--line);
}

.work-meta__row {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 14px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line-2);
	font-size: 13px;
	line-height: 1.85;
}

.work-meta__row dt {
	color: var(--gray-2);
	letter-spacing: .04em;
}

.work-single__cta {
	margin-top: 28px;
}

/* =========================================================================
   8. Method / Format / KPI
   ====================================================================== */

.section--method {
	position: relative;
	isolation: isolate;
	background: var(--bk-2);
	background-size: cover;
	background-position: center;
	border-block: 1px solid var(--line-2);
}

/* 背景写真を敷いた場合、文字が読めるところまで沈ませる */
.section--method::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(8, 9, 10, .9), rgba(8, 9, 10, .95));
}

.method-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.method {
	background: var(--bk-2);
	padding: clamp(26px, 3vw, 44px);
}

.method__no {
	font-family: var(--en);
	font-size: 40px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(var(--label-rgb), .6);
	display: block;
	margin-bottom: 18px;
}

.method__title {
	font-size: clamp(16px, 1.9vw, 20px);
	font-weight: 700;
	line-height: 1.65;
	margin-bottom: 14px;
}

.method__body {
	font-size: 13.5px;
	line-height: 2.05;
	color: var(--gray);
}

/* 詳細ページの縦並び */
.method-list {
	border-top: 1px solid var(--line-2);
}

.method-row {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(28px, 3.4vw, 48px) 0;
	border-bottom: 1px solid var(--line-2);
}

.method-row__no {
	font-family: var(--en);
	font-size: clamp(40px, 5vw, 62px);
	line-height: .9;
	color: transparent;
	-webkit-text-stroke: 1px rgba(var(--label-rgb), .55);
}

.method-row__title {
	font-size: clamp(17px, 2.2vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 14px;
}

.method-row__body {
	font-size: 14.5px;
	line-height: 2.1;
	color: var(--gray);
}

/* 尺 */
.section--formats {
	background: var(--bk-2);
	border-block: 1px solid var(--line-2);
}

.format-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.format {
	background: var(--bk-2);
	padding: clamp(22px, 2.4vw, 32px);
}

.format__en {
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.format__len {
	margin-top: 10px;
	font-family: var(--en);
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	color: var(--label);
}

.format__use {
	margin-top: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line-2);
	font-size: 13px;
	font-weight: 700;
}

.format__body {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--gray);
}

/* KPI */
.kpi-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(18px, 2vw, 28px);
}

.kpi {
	position: relative;
	padding: clamp(24px, 2.6vw, 36px);
	border: 1px solid var(--line-2);
	background: var(--bk-2);
	transition: border-color .35s ease;
}

.kpi:hover {
	border-color: var(--line);
}

.kpi__no {
	position: absolute;
	top: 18px;
	right: 20px;
	font-family: var(--en);
	font-size: 28px;
	color: rgba(255, 255, 255, .07);
}

.kpi__head {
	margin-bottom: 14px;
}

.kpi__name {
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 700;
}

.kpi__en {
	font-family: var(--en2);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.kpi__body {
	font-size: 13.5px;
	line-height: 2;
	color: var(--gray);
}

.kpi__target {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--line-2);
	font-size: 13px;
	font-weight: 700;
	color: var(--label);
	display: flex;
	align-items: center;
	gap: 12px;
}

.kpi__target span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--gray-2);
	border: 1px solid var(--line);
	padding: 2px 8px;
}

.kpi__note {
	margin-top: 20px;
	font-size: 11.5px;
	color: var(--gray-2);
}

/* =========================================================================
   9. About / Stance / Reason
   ====================================================================== */

.about {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.about__lead {
	font-size: clamp(20px, 2.8vw, 30px);
	font-weight: 900;
	line-height: 1.6;
	letter-spacing: -.01em;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line-2);
}

.about__body p {
	font-size: 14.5px;
	line-height: 2.15;
	color: var(--gray);
	margin-bottom: 1.6em;
}

.about__body p:last-child {
	margin-bottom: 0;
}

.about__note {
	margin-top: 8px;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: var(--gray-2);
}

.about__media img,
.about__media .ph {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--line-2);
}

/* 姿勢 */
.section--stance {
	background: var(--bk-2);
	border-block: 1px solid var(--line-2);
}

.stance-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 36px);
}

.stance {
	padding-top: 26px;
	border-top: 2px solid var(--label);
}

.stance__en {
	font-family: var(--en2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--label);
	text-transform: uppercase;
}

.stance__title {
	margin: 14px 0 14px;
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 700;
	line-height: 1.65;
}

.stance__body {
	font-size: 13.5px;
	line-height: 2.05;
	color: var(--gray);
}

/* 理由 */
.reason-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.reason {
	background: var(--bk);
	padding: clamp(26px, 3vw, 46px);
	position: relative;
}

.reason__no {
	font-family: var(--en);
	font-size: clamp(48px, 6vw, 76px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .16);
	position: absolute;
	top: 22px;
	right: 26px;
}

.reason__en {
	font-family: var(--en2);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--label);
}

.reason__title {
	margin: 12px 0 14px;
	font-size: clamp(17px, 2.1vw, 22px);
	font-weight: 700;
	line-height: 1.6;
	max-width: 88%;
}

.reason__body {
	font-size: 13.5px;
	line-height: 2.05;
	color: var(--gray);
}

/* =========================================================================
   10. Flow / Price
   ====================================================================== */

.flow-brief {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.flow-brief__item {
	background: var(--bk);
	padding: clamp(20px, 2.2vw, 30px) clamp(14px, 1.6vw, 22px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.flow-brief__no {
	font-family: var(--en);
	font-size: 22px;
	line-height: 1;
	color: var(--label);
}

.flow-brief__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.flow-brief__note {
	margin-top: auto;
	font-size: 11px;
	line-height: 1.7;
	color: var(--gray-2);
}

/* 詳細 */
.flow-steps {
	border-top: 1px solid var(--line-2);
}

.flow-step {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(28px, 3.4vw, 44px) 0;
	border-bottom: 1px solid var(--line-2);
}

.flow-step__no {
	font-family: var(--en2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--label);
	display: block;
	margin-bottom: 10px;
}

.flow-step__title {
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 700;
	line-height: 1.55;
}

.flow-step__body p {
	font-size: 14.5px;
	line-height: 2.1;
	color: var(--gray);
}

.flow-step__note {
	display: inline-block;
	margin-top: 16px;
	padding: 5px 14px;
	border: 1px solid var(--line);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--wh);
}

/* 料金（トップの抜粋） */
.price-brief {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.price-brief__col {
	background: var(--bk);
	padding: clamp(22px, 2.4vw, 32px);
}

.price-brief__en {
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.price-brief__title {
	margin: 8px 0 18px;
	font-size: clamp(16px, 1.8vw, 19px);
	font-weight: 700;
}

.price-list {
	border-top: 1px solid var(--line-2);
}

.price-list__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line-2);
}

.price-list__row dt {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--gray);
}

.price-list__row dd {
	font-family: var(--en2);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--wh);
}

.price-list--full .price-list__row dt {
	font-size: 14px;
	color: var(--wh);
}

.price-list--full .price-list__row dd {
	font-size: 15px;
	color: var(--label);
}

.price-blocks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(28px, 3.4vw, 56px);
}

.price-block__head {
	margin-bottom: 18px;
}

.price-block__en {
	font-family: var(--en2);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--label);
}

.price-block__title {
	margin-top: 6px;
	font-size: clamp(19px, 2.2vw, 25px);
	font-weight: 900;
}

.price-block__note {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--gray-2);
}

/* 注記ボックス */
.notebox {
	margin-top: clamp(40px, 5vw, 72px);
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--line-2);
	background: var(--bk-2);
}

.notebox__title {
	font-size: clamp(16px, 1.9vw, 19px);
	font-weight: 700;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line-2);
}

.notebox__list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 12px;
	font-size: 13.5px;
	line-height: 2;
	color: var(--gray);
}

.notebox__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .95em;
	width: 8px;
	height: 1px;
	background: var(--label);
}

.notebox__body,
.notebox__note {
	font-size: 13.5px;
	line-height: 2;
	color: var(--gray);
}

.notebox__note {
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--gray-2);
}

/* =========================================================================
   11. コラム / FAQ
   ====================================================================== */

.post-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.post-list--archive {
	grid-template-columns: 1fr;
}

.post-item {
	background: var(--bk);
	transition: background .3s ease;
}

.post-item:hover {
	background: var(--bk-2);
}

.post-item__link {
	display: block;
	padding: clamp(22px, 2.4vw, 32px);
	height: 100%;
}

.post-item__date {
	font-family: var(--en2);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--label);
}

.post-item__title {
	margin: 10px 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

.post-item__excerpt {
	font-size: 13px;
	line-height: 1.9;
	color: var(--gray);
}

/* FAQ */
.faq {
	border-top: 1px solid var(--line-2);
}

.faq__item {
	border-bottom: 1px solid var(--line-2);
}

.faq__q {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 44px 22px 0;
	font-size: clamp(14.5px, 1.7vw, 16.5px);
	font-weight: 700;
	line-height: 1.75;
	cursor: pointer;
	list-style: none;
	transition: color .3s ease;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::before {
	content: "Q";
	font-family: var(--en2);
	font-size: 13px;
	font-weight: 700;
	color: var(--label);
	flex-shrink: 0;
	padding-top: .18em;
}

.faq__q:hover {
	color: var(--label);
}

/* 開閉マークはJSで挿入 */
.faq__q .mark {
	position: absolute;
	right: 4px;
	top: 30px;
	width: 14px;
	height: 14px;
}

.faq__q .mark::before,
.faq__q .mark::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px;
	height: 1px;
	background: var(--wh);
	transition: transform .3s ease;
}

.faq__q .mark::after {
	transform: rotate(90deg);
}

.faq__item[open] .faq__q .mark::after {
	transform: rotate(0);
}

.faq__a {
	padding: 0 44px 26px 29px;
	font-size: 13.5px;
	line-height: 2.15;
	color: var(--gray);
}

/* =========================================================================
   12. 下層ページ共通
   ====================================================================== */

.page-hero {
	position: relative;
	padding-top: calc(var(--header-h) + clamp(48px, 7vw, 96px));
	padding-bottom: clamp(36px, 5vw, 64px);
	border-bottom: 1px solid var(--line-2);
	overflow: hidden;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 100% at 82% 0%, rgba(var(--label-rgb), .07), transparent 62%);
	pointer-events: none;
}

.page-hero__inner {
	position: relative;
}

.page-hero__en {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--en2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--label);
	margin-bottom: 16px;
}

.page-hero__en::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--label);
}

.page-hero__title {
	font-size: clamp(28px, 5vw, 56px);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -.02em;
}

.page-hero__desc {
	margin-top: 22px;
	max-width: 720px;
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 2.1;
	color: var(--gray);
}

.breadcrumb {
	padding-block: 16px;
	border-bottom: 1px solid var(--line-2);
	font-size: 11.5px;
	color: var(--gray-2);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.breadcrumb li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--line-3);
}

.breadcrumb a:hover {
	color: var(--label);
}

/* サービス一覧の索引 */
.service-index {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.service-index a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 20px 22px;
	background: var(--bk);
	height: 100%;
	transition: background .3s ease;
}

.service-index a:hover {
	background: var(--bk-3);
}

.service-index__no {
	font-family: var(--en);
	font-size: 14px;
	color: var(--label);
}

.service-index__title {
	font-size: 14.5px;
	font-weight: 700;
}

.service-index__en {
	margin-left: auto;
	font-family: var(--en2);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gray-2);
}

/* サービス詳細 */
.service-detail {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: clamp(28px, 4vw, 68px);
	align-items: center;
	padding-block: clamp(40px, 5vw, 76px);
	border-bottom: 1px solid var(--line-2);
	scroll-margin-top: calc(var(--header-h) + 24px);
}

.service-detail:last-child {
	border-bottom: 0;
}

.service-detail:nth-child(even) .service-detail__media {
	order: 2;
}

.service-detail__media img,
.service-detail__media .ph {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border: 1px solid var(--line-2);
}

.service-detail__no {
	font-family: var(--en2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--label);
}

.service-detail__title {
	margin: 12px 0 16px;
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.service-detail__lead {
	font-size: clamp(15px, 1.8vw, 17px);
	font-weight: 700;
	line-height: 1.85;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--line-2);
}

.service-detail__body {
	font-size: 14px;
	line-height: 2.15;
	color: var(--gray);
}

.service-detail__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.service-detail__items li {
	padding: 7px 14px;
	border: 1px solid var(--line);
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--wh);
}

.service-detail__more {
	margin-top: 26px;
}

/* 会社概要の表 */
.company-table {
	border-top: 1px solid var(--line);
}

.company-table__row {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line-2);
}

.company-table__row dt {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--gray-2);
}

.company-table__row dd {
	font-size: 14px;
	line-height: 2;
}

.office {
	display: block;
	margin-bottom: 8px;
}

.office:last-child {
	margin-bottom: 0;
}

.office__name {
	display: inline-block;
	min-width: 92px;
	margin-right: 10px;
	padding: 2px 10px;
	border: 1px solid var(--line);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--label);
	text-align: center;
}

/* お問い合わせページの2枚 */
.contact-methods {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 2vw, 24px);
	margin-bottom: clamp(48px, 6vw, 80px);
}

.contact-method {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--line-2);
	background: var(--bk-2);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.contact-method__label {
	font-family: var(--en2);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--label);
}

.contact-method__title {
	margin: 10px 0 14px;
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 700;
}

.contact-method__num {
	font-family: var(--en2);
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
}

.contact-method__num:hover {
	color: var(--label);
}

.contact-method__note {
	margin: 14px 0 20px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--gray);
}

.contact-method .btn {
	margin-top: auto;
}

.contact-privacy {
	margin-top: 22px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--gray-2);
}

.contact-privacy a {
	color: var(--gray);
	text-decoration: underline;
}

/* =========================================================================
   13. フォーム
   ====================================================================== */

.form-wrap {
	padding: clamp(24px, 3vw, 44px);
	border: 1px solid var(--line-2);
	background: var(--bk-2);
}

.hc-form-row {
	margin-bottom: 26px;
}

.hc-form-row > label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 8px;
}

.hc-form-row .req {
	padding: 2px 8px;
	background: var(--acid);
	color: #000;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
}

.hc-form-note {
	display: block;
	margin-bottom: 10px;
	font-size: 11.5px;
	line-height: 1.85;
	color: var(--gray-2);
}

.hc-form input,
.hc-form select,
.hc-form textarea {
	width: 100%;
	padding: 14px 16px;
	background: var(--bk);
	border: 1px solid var(--line);
	color: var(--wh);
	font-size: 15px;
	line-height: 1.7;
	transition: border-color .3s ease, background .3s ease;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.hc-form textarea {
	resize: vertical;
}

.hc-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
	cursor: pointer;
}

.hc-form input::placeholder,
.hc-form textarea::placeholder {
	color: #4d5158;
}

.hc-form input:focus,
.hc-form select:focus,
.hc-form textarea:focus {
	border-color: var(--label);
	outline: none;
	background: var(--bk-3);
}

.hc-form-row.is-error input,
.hc-form-row.is-error select,
.hc-form-row.is-error textarea {
	border-color: #ff5a5a;
}

/* ロボット対策の隠し項目 */
.hc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hc-form-privacy {
	margin: 28px 0 22px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--gray-2);
}

.hc-form-privacy a {
	color: var(--gray);
	text-decoration: underline;
}

.hc-form-submit {
	width: 100%;
	min-height: 62px;
	background: var(--acid);
	color: #000;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	transition: background .3s ease, transform .3s ease;
}

.hc-form-submit:hover {
	background: var(--wh);
	transform: translateY(-2px);
}

.form-notice {
	padding: 20px 24px;
	margin-bottom: 28px;
	border: 1px solid var(--line);
	background: var(--bk-3);
	font-size: 13.5px;
	line-height: 1.95;
}

.form-notice strong {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
}

.form-notice--ok {
	border-color: var(--label);
}

.form-notice--ok strong {
	color: var(--label);
}

.form-notice--ng {
	border-color: #ff5a5a;
}

.form-notice--ng strong {
	color: #ff8a8a;
}

.form-notice a {
	color: var(--label);
	text-decoration: underline;
}

.form-notice ul {
	list-style: disc;
	padding-left: 20px;
	color: var(--gray);
}

/* 検索フォーム */
.search-form__inner {
	display: flex;
	border: 1px solid var(--line);
}

.search-form__input {
	flex: 1;
	padding: 13px 16px;
	background: var(--bk);
	border: 0;
	font-size: 14px;
}

.search-form__input:focus {
	outline: none;
}

.search-form__submit {
	padding: 0 22px;
	background: var(--acid);
	color: #000;
	font-size: 13px;
	font-weight: 700;
}

/* =========================================================================
   14. CTA・フッター
   ====================================================================== */

.cta-band {
	position: relative;
	padding-block: clamp(56px, 8vw, 108px);
	border-top: 1px solid var(--line-2);
	background:
		radial-gradient(60% 120% at 85% 20%, rgba(var(--label-rgb), .1), transparent 60%),
		var(--bk-2);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.cta-band--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 9, 10, .94), rgba(8, 9, 10, .72));
}

.cta-band__inner {
	position: relative;
	width: min(100% - var(--pad) * 2, 1240px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.cta-band__title {
	margin: 14px 0 20px;
	font-size: clamp(30px, 5vw, 58px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.cta-band__body {
	max-width: 34em;
	font-size: 14px;
	line-height: 2.1;
	color: var(--gray);
}

.cta-band__actions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: stretch;
}

.cta-tel {
	display: flex;
	flex-direction: column;
	padding: 20px 24px;
	border: 1px solid var(--line);
	background: rgba(8, 9, 10, .5);
	transition: border-color .3s ease;
}

.cta-tel:hover {
	border-color: var(--label);
}

.cta-tel__label {
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--label);
}

.cta-tel__num {
	font-family: var(--en2);
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 700;
	line-height: 1.3;
}

.cta-tel__note {
	font-size: 11.5px;
	color: var(--gray-2);
}

/* フッター */
.site-footer {
	border-top: 1px solid var(--line-2);
	background: var(--bk);
	padding-top: clamp(48px, 6vw, 80px);
}

.site-footer__inner {
	width: min(100% - var(--pad) * 2, 1240px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: clamp(32px, 5vw, 72px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.footer-logo {
	margin-bottom: 22px;
}

.footer-logo .brand__en {
	font-size: 26px;
}

/* フッターは会社名（和文）が入るため、大文字変換をかけない */
.footer-logo .brand__sub {
	text-transform: none;
	letter-spacing: .08em;
	font-size: 11px;
	color: var(--gray);
}

.footer-address {
	font-style: normal;
	font-size: 13px;
	line-height: 2.05;
	color: var(--gray);
}

.footer-address a:hover {
	color: var(--label);
}

.footer-meta {
	margin-top: 20px;
	display: grid;
	gap: 6px;
}

.footer-meta > div {
	display: flex;
	gap: 14px;
	font-size: 12.5px;
	line-height: 1.9;
}

.footer-meta dt {
	flex-shrink: 0;
	width: 78px;
	color: var(--gray-2);
}

.footer-meta dd {
	color: var(--gray);
}

.footer-sns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 22px;
	font-family: var(--en2);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gray);
}

.footer-sns a:hover {
	color: var(--label);
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.footer-menu {
	display: grid;
	gap: 12px;
	font-size: 13px;
	align-content: start;
}

.footer-menu a:hover {
	color: var(--label);
}

.footer-menu--sub {
	color: var(--gray-2);
	font-size: 12px;
}

.site-footer__bottom {
	border-top: 1px solid var(--line-2);
}

.site-footer__bottom > * {
	width: min(100% - var(--pad) * 2, 1240px);
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	width: min(100% - var(--pad) * 2, 1240px);
	margin-inline: auto;
	padding-block: 22px;
}

.copyright {
	font-family: var(--en2);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--gray-2);
}

.footer-back .link-arrow {
	font-size: 11.5px;
	border-bottom: 0;
	color: var(--gray-2);
}

/* スマホ固定バー */
.sp-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 180;
	border-top: 1px solid var(--line);
	background: rgba(8, 9, 10, .92);
	backdrop-filter: blur(12px);
}

.sp-bar__item {
	flex: 1;
	display: grid;
	place-items: center;
	min-height: 58px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
}

.sp-bar__item--tel,
.sp-bar__item--line {
	border-right: 1px solid var(--line);
}

/* LINE は緑を1点だけ入れて、他の2つと役割を分ける */
.sp-bar__item--line {
	color: #06c755;
	font-size: 12.5px;
	letter-spacing: .12em;
}

.sp-bar__item--form {
	background: var(--acid);
	color: #000;
}

/* =========================================================================
   15. 記事本文・その他
   ====================================================================== */

.entry-content {
	font-size: 15px;
	line-height: 2.15;
	color: #dcdcda;
}

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

.entry-content h2 {
	margin-top: 2.4em;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--line-2);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 900;
	line-height: 1.5;
	color: var(--wh);
}

.entry-content h3 {
	margin-top: 2em;
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	color: var(--wh);
}

.entry-content a {
	color: var(--label);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li {
	margin-bottom: .5em;
}

.entry-content blockquote {
	margin-inline: 0;
	padding: 18px 24px;
	border-left: 2px solid var(--label);
	background: var(--bk-2);
	color: var(--gray);
}

.entry-content img {
	border: 1px solid var(--line-2);
}

.entry-content code {
	padding: 2px 6px;
	background: var(--bk-3);
	font-size: .9em;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.entry-content th,
.entry-content td {
	padding: 12px 14px;
	border: 1px solid var(--line-2);
	text-align: left;
}

.entry-content th {
	background: var(--bk-2);
}

/* ページネーション */
.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(40px, 5vw, 64px);
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line-2);
	font-family: var(--en2);
	font-size: 13px;
	font-weight: 600;
}

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

.pagination .current {
	background: var(--label);
	border-color: var(--label);
	color: #000;
}

/* 前後リンク */
.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 24px;
	border-top: 1px solid var(--line-2);
	font-size: 13px;
	color: var(--gray);
}

.post-nav a:hover {
	color: var(--label);
}

.section--other-works {
	background: var(--bk-2);
	border-top: 1px solid var(--line-2);
}

/* =========================================================================
   16. 軌跡（ポインタ・指）と、スクロールの引きずり
   ====================================================================== */

/* 指やカーソルの通ったあとに残る光。JSでcanvasを差し込む。 */
.trail-canvas {
	position: fixed;
	inset: 0;
	z-index: 150;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: .62;
}

/* スクロールの速さに応じて本文をわずかに傾ける（引きずられる感じ） */
.site-main {
	transform-origin: center top;
}

.site-main.is-dragging {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.trail-canvas {
		display: none;
	}

	.site-main {
		transform: none !important;
	}
}

/* =========================================================================
   17. 表示アニメーション
   ====================================================================== */

/* スクロール量を示す細い線（JSで差し込む） */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	z-index: 210;
	background: var(--label);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* ふつうの表示（下からふわりと） */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform .8s cubic-bezier(.2, .7, .3, 1);
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* 見出しと写真は、下から捲り上がるように出す */
.reveal-mask {
	clip-path: inset(0 0 100% 0);
	transform: translateY(16px);
	transition:
		clip-path .95s cubic-bezier(.16, .84, .24, 1),
		transform .95s cubic-bezier(.16, .84, .24, 1);
	will-change: clip-path, transform;
}

.reveal-mask.is-visible {
	clip-path: inset(0 0 0 0);
	transform: none;
}

/* 欧文ラベルの文字が乱れてから定まる（JSが文字を差し替える） */
.sec-head__en.is-scrambling,
.page-hero__en.is-scrambling {
	color: var(--label);
}

/* ヒーローの縦型フレームを、ゆっくり上下させる
   （.reel 側はJSの視差で使うため、内側の枠に当てる） */
.reel__frame {
	animation: hc-reel-float 7s ease-in-out infinite alternate;
}

.reel--2 .reel__frame {
	animation-duration: 8.6s;
	animation-delay: -2.2s;
}

.reel--3 .reel__frame {
	animation-duration: 6.2s;
	animation-delay: -3.6s;
}

@keyframes hc-reel-float {
	to { transform: translateY(-11px); }
}

/* JSがマーキーを動かすときは、CSSのアニメーションを止める */
.marquee__track.is-js {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.reveal-mask {
		clip-path: none;
		transform: none;
		transition: none;
	}

	.scroll-progress,
	.reel__frame,
	.reel__img {
		animation: none;
	}

	.hero__spot {
		display: none;
	}

	.service-card.is-tilting {
		transform: none;
	}

	.scroll-progress {
		display: none;
	}

	.marquee__track,
	.hero__scroll::after,
	.hero__mark,
	.hero__copy,
	.hero__copy::before,
	.hero__copy::after {
		animation: none;
	}

	.hero__copy::before,
	.hero__copy::after {
		display: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* =========================================================================
   レスポンシブ
   ====================================================================== */

@media (max-width: 1180px) {
	.service-list,
	.works-grid,
	.post-list,
	.service-index {
		grid-template-columns: repeat(2, 1fr);
	}

	.format-grid,
	.price-brief {
		grid-template-columns: repeat(2, 1fr);
	}

	.flow-brief {
		grid-template-columns: repeat(3, 1fr);
	}

	.work-single {
		grid-template-columns: 1fr;
	}

	.flow-step {
		grid-template-columns: 200px 1fr;
	}
}

@media (max-width: 1024px) {
	:root {
		--header-h: 64px;
	}

	.site-nav,
	.header-cta {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

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

	.reels {
		justify-content: center;
		margin-top: 8px;
	}

	.reel {
		width: clamp(88px, 22vw, 140px);
	}

	.about,
	.cta-band__inner,
	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.about__media {
		max-width: 420px;
	}

	.service-detail {
		grid-template-columns: 1fr;
	}

	.service-detail:nth-child(even) .service-detail__media {
		order: 0;
	}

	.sp-bar {
		display: flex;
	}

	body {
		padding-bottom: 58px;
	}

	.numbers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 760px) {
	body {
		font-size: 15px;
	}

	.service-list,
	.works-grid,
	.post-list,
	.method-grid,
	.reason-grid,
	.stance-grid,
	.kpi-list,
	.price-blocks,
	.contact-methods,
	.format-grid,
	.price-brief,
	.service-index {
		grid-template-columns: 1fr;
	}

	.flow-brief {
		grid-template-columns: repeat(2, 1fr);
	}

	.flow-step,
	.method-row,
	.company-table__row,
	.work-meta__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.reason__title {
		max-width: 100%;
		padding-right: 60px;
	}

	.reason__no {
		font-size: 46px;
		top: 18px;
		right: 20px;
	}

	.hero {
		min-height: 0;
		padding-bottom: 64px;
	}

	.hero__mark {
		left: -8%;
		width: 130%;
		opacity: .07;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .btn {
		width: 100%;
	}

	.hero__scroll {
		display: none;
	}


	.hero__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.work-thumb--v,
	.work-video--v,
	.about__media {
		max-width: 100%;
	}

	.faq__a {
		padding-left: 0;
		padding-right: 0;
	}

	.site-footer__nav {
		gap: 28px;
	}

	.cta-band__actions {
		gap: 14px;
	}
}

/* =========================================================================
   18. クリエイター募集
   ====================================================================== */

.job {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(24px, 4vw, 60px);
	align-items: start;
	padding-block: clamp(36px, 5vw, 72px);
	border-bottom: 1px solid var(--line-2);
	scroll-margin-top: calc(var(--header-h) + 24px);
}

.job:last-child {
	border-bottom: 0;
}

.job__media {
	overflow: hidden;
	border: 1px solid var(--line-2);
	position: sticky;
	top: calc(var(--header-h) + 32px);
}

.job__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	opacity: .8;
	transition: opacity .5s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}

.job:hover .job__media img {
	opacity: 1;
	transform: scale(1.04);
}

.job__no {
	font-family: var(--en2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--label);
}

.job__title {
	margin: 12px 0 14px;
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.job__lead {
	font-size: clamp(15px, 1.8vw, 17px);
	font-weight: 700;
	line-height: 1.85;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line-2);
}

.job__sub {
	margin: 26px 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--label);
}

.job__tasks li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.95;
	color: var(--gray);
}

.job__tasks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .95em;
	width: 8px;
	height: 1px;
	background: var(--label);
}

.job__want {
	font-size: 14px;
	line-height: 2.1;
	color: var(--gray);
}

.job__meta {
	margin-top: 26px;
	border-top: 1px solid var(--line-2);
}

.job__meta > div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line-2);
	font-size: 13.5px;
	line-height: 1.85;
}

.job__meta dt {
	color: var(--gray-2);
	letter-spacing: .04em;
}

.section--jobs {
	background: var(--bk-2);
	border-block: 1px solid var(--line-2);
}

.section--apply {
	background: var(--bk-2);
	border-top: 1px solid var(--line-2);
}

@media (max-width: 1024px) {
	.job {
		grid-template-columns: 1fr;
	}

	.job__media {
		position: static;
		max-width: 520px;
	}
}

/* =========================================================================
   19. ロゴ画像を入れた場合の見え方
   ====================================================================== */

/* フッターのロゴ（画像） */
.footer-logo .brand__logo {
	display: block;
	max-width: 240px;
}

.footer-logo .brand__logo img {
	width: 100%;
	height: auto;
}

.footer-legal {
	margin-top: 12px;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--gray);
}

/* ヘッダーのロゴ（画像・任意） */
.brand__logo--header img {
	max-height: 30px;
	width: auto;
}

/* =========================================================================
   20. メインコピーのサブタイトル
   ====================================================================== */

.hero__tagline {
	margin-top: 18px;
	font-size: clamp(15px, 2vw, 22px);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .08em;
	color: var(--label);
	opacity: 1;
	transform: none;
	transition: opacity .9s ease .2s, transform .9s cubic-bezier(.2, .7, .3, 1) .2s;
}

/* 本文を打ち込んでいる間は伏せておき、打ち終わってから浮かび上がる */
.hero__copy.is-typing + .hero__tagline {
	opacity: 0;
	transform: translateY(10px);
	transition: none;
}

@media (max-width: 760px) {
	.hero__tagline {
		margin-top: 14px;
	}
}

/* =========================================================================
   21. メインコピー背面のカウントダウンリーダー
   （映写前に回る、あの照準）
   ====================================================================== */

.hero__leader {
	position: absolute;
	left: clamp(-120px, -6vw, -40px);
	top: 50%;
	width: clamp(320px, 42vw, 660px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
	overflow: hidden;
}

.hero__leader__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: rgba(255, 255, 255, .16);
	stroke-width: 1;
	animation: hc-leader-spin 60s linear infinite;
}

.hero__leader__tick {
	stroke: rgba(var(--label-rgb), .5);
	stroke-width: 2;
}

/* 一定の速さで回る掃き取り線 */
.hero__leader__sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		rgba(var(--label-rgb), .16) 0deg,
		rgba(var(--label-rgb), .04) 26deg,
		transparent 62deg,
		transparent 360deg
	);
	animation: hc-leader-sweep 4.6s linear infinite;
}

@keyframes hc-leader-sweep {
	to { transform: rotate(360deg); }
}

@keyframes hc-leader-spin {
	to { transform: rotate(-360deg); }
}

@media (max-width: 760px) {
	.hero__leader {
		left: -22%;
		width: 96%;
		opacity: .8;
	}
}

/* 動きを減らす設定では、カウントダウンリーダーも止める */
@media (prefers-reduced-motion: reduce) {
	.hero__leader__sweep,
	.hero__leader__svg {
		animation: none;
	}
}

/* =========================================================================
   22. 音楽の再生ボタン
   ====================================================================== */

.sound-toggle {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	height: 38px;
	padding: 0 14px;
	margin-left: 14px;
	border: 1px solid var(--line);
	color: var(--gray);
	transition: border-color .3s ease, color .3s ease;
}

.sound-toggle:hover {
	border-color: var(--label);
	color: var(--label);
}

.sound-toggle[aria-pressed="true"] {
	border-color: var(--label);
	color: var(--label);
}

.sound-toggle__label {
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* 音の波を模した4本のバー */
.sound-toggle__bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 13px;
}

.sound-toggle__bars i {
	display: block;
	width: 2px;
	height: 3px;
	background: currentColor;
	transition: height .3s ease;
}

/* 停止中は低いまま。再生中だけ動く */
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i {
	animation: hc-eq .9s ease-in-out infinite alternate;
}

.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2) { animation-delay: .18s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3) { animation-delay: .36s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4) { animation-delay: .09s; }

@keyframes hc-eq {
	from { height: 3px; }
	to   { height: 13px; }
}

/* スマホではハンバーガーの隣に、文字を省いて丸く置く */
@media (max-width: 1024px) {
	.sound-toggle {
		margin-left: auto;
		margin-right: 4px;
		padding: 0 12px;
	}

	.sound-toggle__label {
		display: none;
	}

	.nav-toggle {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sound-toggle__bars i {
		animation: none !important;
		height: 8px;
	}
}

/* =========================================================================
   23. オープニング（黒×白）
   ====================================================================== */

.loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow: hidden;
	color: #fff;
}

/* 上下に割れて開く黒幕 */
.loader__panel {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.2%;
	background: #000;
	transition: transform 1.05s cubic-bezier(.76, 0, .24, 1);
}

.loader__panel--t { top: 0; }
.loader__panel--b { bottom: 0; }

.loader.is-done .loader__panel--t { transform: translateY(-100%); }
.loader.is-done .loader__panel--b { transform: translateY(100%); }

/* 上から下へ抜ける走査線 */
.loader__scan {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 28vh;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .045));
	animation: hc-scan 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
	pointer-events: none;
}

@keyframes hc-scan {
	0%   { transform: translateY(-30vh); opacity: 0; }
	18%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { transform: translateY(105vh); opacity: 0; }
}

/* 四辺の枠。中央から引かれていく */
.loader__frame {
	position: absolute;
	inset: clamp(14px, 2.2vw, 30px);
	pointer-events: none;
}

.loader__line {
	position: absolute;
	background: rgba(255, 255, 255, .55);
}

.loader__line--t,
.loader__line--b {
	left: 0;
	right: 0;
	height: 1px;
	transform: scaleX(0);
	animation: hc-line-x .9s cubic-bezier(.76, 0, .24, 1) .1s forwards;
}

.loader__line--l,
.loader__line--r {
	top: 0;
	bottom: 0;
	width: 1px;
	transform: scaleY(0);
	animation: hc-line-y .9s cubic-bezier(.76, 0, .24, 1) .3s forwards;
}

.loader__line--t { top: 0; }
.loader__line--b { bottom: 0; }
.loader__line--l { left: 0; }
.loader__line--r { right: 0; }

@keyframes hc-line-x { to { transform: scaleX(1); } }
@keyframes hc-line-y { to { transform: scaleY(1); } }

.loader.is-done .loader__line--t { transform: translateY(-40px); opacity: 0; transition: all .7s ease; }
.loader.is-done .loader__line--b { transform: translateY(40px);  opacity: 0; transition: all .7s ease; }
.loader.is-done .loader__line--l { transform: translateX(-40px); opacity: 0; transition: all .7s ease; }
.loader.is-done .loader__line--r { transform: translateX(40px);  opacity: 0; transition: all .7s ease; }

/* 中身 */
.loader__inner {
	position: absolute;
	inset: clamp(28px, 4vw, 56px);
	display: grid;
	place-items: center;
	transition: opacity .45s ease;
}

.loader.is-done .loader__inner {
	opacity: 0;
}

/* 四隅の小さな文字 */
.loader__meta {
	position: absolute;
	font-family: var(--en2);
	font-size: clamp(9px, 1.1vw, 11px);
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	opacity: 0;
	animation: hc-meta-in .8s ease .55s forwards;
}

.loader__meta--tl { top: 0; left: 0; }
.loader__meta--tr { top: 0; right: 0; }
.loader__meta--bl { bottom: 0; left: 0; }
.loader__meta--br { bottom: 0; right: 0; }

.loader__meta--br::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 8px;
	border-radius: 50%;
	background: #fff;
	vertical-align: middle;
	animation: hc-rec 1.1s steps(1) infinite;
}

@keyframes hc-meta-in { to { opacity: 1; } }
@keyframes hc-rec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .12; } }

/* 中央のロゴと数字 */
/* 数字は中央を空けて左下へ。動画の最後に出るロゴと重ならないようにする。 */
.loader__center {
	position: absolute;
	left: 0;
	bottom: clamp(18px, 3vw, 30px);
	display: grid;
	justify-items: start;
}

.loader__mark {
	opacity: 0;
	animation: hc-mark-in 1s cubic-bezier(.2, .7, .3, 1) .35s forwards;
}

.loader__mark--text span {
	display: block;
	font-family: var(--en);
	font-size: clamp(34px, 8vw, 96px);
	line-height: .94;
	letter-spacing: .02em;
	text-align: center;
	color: #fff;
}

/* ロゴ画像を入れた場合 */
.loader__mark--img {
	width: clamp(220px, 42vw, 560px);
	aspect-ratio: 5 / 4;
	-webkit-mask-image: var(--hc-logo);
	mask-image: var(--hc-logo);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background: #fff;
}

@keyframes hc-mark-in {
	from { opacity: 0; transform: scale(1.06); filter: blur(6px); }
	to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

.loader__count {
	font-family: var(--en);
	font-size: clamp(38px, 7vw, 84px);
	line-height: .9;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	display: flex;
	align-items: baseline;
	gap: .06em;
}

.loader__count i {
	font-size: .32em;
	font-style: normal;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .6);
}

/* 下の進行バー */
.loader__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(26px, 4vw, 44px);
	height: 1px;
	background: rgba(255, 255, 255, .18);
}

.loader__bar i {
	display: block;
	height: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s linear;
}

/* 読み込み中はページを動かさない */
html.is-loading,
body.is-loading {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.loader__scan,
	.loader__meta--br::after {
		animation: none;
	}

	.loader__line,
	.loader__meta,
	.loader__mark {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   24. 追いかけるカーソル・慣性スクロール
   （桜みゆサイトと同じ設計。輪が写真の上で「VIEW」を出す）
   ====================================================================== */

.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
	.cursor {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1200;
		display: block;
		pointer-events: none;
		opacity: 0;
		transition: opacity .3s ease;
	}

	.cursor.is-awake { opacity: 1; }

	.cursor__dot,
	.cursor__ring {
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		will-change: transform;
	}

	.cursor__dot {
		width: 6px;
		height: 6px;
		background: var(--label);
		transition: width .3s ease, height .3s ease, opacity .3s ease;
	}

	.cursor__ring {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border: 1px solid rgba(255, 255, 255, .5);
		transition: width .38s cubic-bezier(.2, .7, .3, 1),
		            height .38s cubic-bezier(.2, .7, .3, 1),
		            background-color .38s ease, border-color .38s ease;
	}

	/* リンク・ボタンの上 */
	.cursor.is-on .cursor__ring {
		width: 62px;
		height: 62px;
		border-color: var(--label);
		background: rgba(var(--label-rgb), .12);
	}

	.cursor.is-on .cursor__dot { opacity: 0; }

	/* 写真・動画の上 */
	.cursor.is-view .cursor__ring {
		width: 88px;
		height: 88px;
		border-color: transparent;
		background: var(--label);
	}

	.cursor.is-view .cursor__dot { opacity: 0; }

	.cursor__label {
		font-family: var(--en2);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .18em;
		text-indent: .18em;
		color: #000;
		opacity: 0;
		transform: scale(.8);
		transition: opacity .3s ease, transform .3s ease;
	}

	.cursor.is-view .cursor__label { opacity: 1; transform: none; }

	/* 押している間は少し縮む */
	.cursor.is-down .cursor__ring { transform: translate(-50%, -50%) scale(.86); }

	/* 既定のカーソルは消す。ただし文字を打つところは残す */
	html.has-cursor,
	html.has-cursor a,
	html.has-cursor button,
	html.has-cursor summary { cursor: none; }

	html.has-cursor input,
	html.has-cursor textarea,
	html.has-cursor select { cursor: auto; }

	[data-magnet] { will-change: transform; }
}

/* 慣性スクロール中の指定 */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }

.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.cursor { display: none !important; }
	html.has-cursor, html.has-cursor * { cursor: auto !important; }
}

/* メインビジュアル奥のWebGL層（PCのみ・JSが差し込む） */
.hero__gl {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: .55;
}

/* オープニングの奥で流れる動画 */
.loader__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .95;
	filter: grayscale(1) contrast(1.05);
}

/* 動画の上に薄い黒をかけて、数字とロゴを読ませる */
/* 動画を隠さないよう、四隅だけ軽く落とす。中央はほぼ素通し。 */
.loader__veil {
	position: absolute;
	inset: 0;
	background: radial-gradient(78% 70% at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, .62));
	pointer-events: none;
}

/* 動画の上で文字が沈まないよう、影を敷く */
.loader__center,
.loader__meta,
.loader__count {
	text-shadow: 0 2px 24px rgba(0, 0, 0, .85), 0 0 60px rgba(0, 0, 0, .6);
}

.loader__mark--img {
	filter: drop-shadow(0 2px 24px rgba(0, 0, 0, .8));
}

/* 黒幕が割れるときは、動画も一緒に消える */
.loader.is-done .loader__video,
.loader.is-done .loader__veil {
	opacity: 0;
	transition: opacity .5s ease;
}

/* =========================================================================
   25. チャット（自動応答）
   ====================================================================== */

.chat-launch {
	position: fixed;
	right: clamp(14px, 2vw, 26px);
	bottom: clamp(14px, 2vw, 26px);
	z-index: 400;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 20px 0 16px;
	border-radius: 999px;
	background: var(--acid);
	color: #000;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
}

.chat-launch:hover {
	transform: translateY(-3px);
	background: var(--acid);
	color: #000;
}

.chat-launch__icon {
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.chat-launch.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: scale(.85);
}

/* 未読の丸 */
.chat-launch__dot {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ff4d4d;
	animation: hc-rec 1.6s steps(1) infinite;
}

/* 本体 */
.chat {
	position: fixed;
	right: clamp(14px, 2vw, 26px);
	bottom: clamp(14px, 2vw, 26px);
	z-index: 401;
	width: min(380px, calc(100vw - 28px));
	height: min(560px, calc(100vh - 120px));
	display: flex;
	flex-direction: column;
	background: var(--bk-2);
	border: 1px solid var(--line);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
	opacity: 0;
	transform: translateY(16px) scale(.98);
	pointer-events: none;
	transition: opacity .35s ease, transform .4s cubic-bezier(.2, .7, .3, 1);
}

.chat.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.chat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 14px;
	border-bottom: 1px solid var(--line-2);
	flex-shrink: 0;
}

.chat__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
}

.chat__sub {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	letter-spacing: .06em;
	color: var(--gray-2);
}

.chat__close {
	margin-left: auto;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	color: var(--gray);
	font-size: 16px;
	line-height: 1;
	transition: border-color .3s ease, color .3s ease;
}

.chat__close:hover {
	border-color: var(--label);
	color: var(--label);
}

/* やり取り */
.chat__log {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.chat__msg {
	max-width: 86%;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.85;
	white-space: pre-wrap;
	animation: hc-msg-in .4s cubic-bezier(.2, .7, .3, 1) both;
}

.chat__msg--bot {
	align-self: flex-start;
	background: var(--bk-3);
	border: 1px solid var(--line-2);
	color: #dcdcda;
}

.chat__msg--me {
	align-self: flex-end;
	background: var(--acid);
	color: #000;
	font-weight: 500;
}

.chat__msg a {
	color: var(--label);
	text-decoration: underline;
}

.chat__msg--me a { color: #000; }

@keyframes hc-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* 入力中の点 */
.chat__typing {
	align-self: flex-start;
	display: flex;
	gap: 5px;
	padding: 14px;
	background: var(--bk-3);
	border: 1px solid var(--line-2);
}

.chat__typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gray);
	animation: hc-typing 1.2s ease-in-out infinite;
}

.chat__typing i:nth-child(2) { animation-delay: .18s; }
.chat__typing i:nth-child(3) { animation-delay: .36s; }

@keyframes hc-typing {
	0%, 60%, 100% { opacity: .25; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-4px); }
}

/* 質問の候補 */
.chat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0 16px 12px;
	flex-shrink: 0;
}

.chat__chip {
	padding: 7px 13px;
	border: 1px solid var(--line);
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--wh);
	transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.chat__chip:hover {
	border-color: var(--label);
	color: var(--label);
}

/* 入力欄 */
.chat__form {
	display: flex;
	gap: 8px;
	padding: 12px 12px 14px;
	border-top: 1px solid var(--line-2);
	flex-shrink: 0;
}

.chat__input {
	flex: 1;
	min-width: 0;
	padding: 11px 13px;
	background: var(--bk);
	border: 1px solid var(--line);
	color: var(--wh);
	font-size: 14px;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.chat__input:focus {
	outline: none;
	border-color: var(--label);
}

.chat__send {
	flex-shrink: 0;
	padding: 0 18px;
	background: var(--acid);
	color: #000;
	font-size: 13px;
	font-weight: 700;
	transition: opacity .3s ease;
}

.chat__send:disabled {
	opacity: .35;
}

/* スマホは下の固定バーの上に出す */
@media (max-width: 1024px) {
	.chat-launch {
		bottom: 72px;
		height: 48px;
		padding: 0 17px 0 14px;
		font-size: 12.5px;
	}

	.chat {
		bottom: 72px;
		height: min(70vh, calc(100vh - 180px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.chat,
	.chat-launch,
	.chat__msg {
		transition: none;
		animation: none;
	}

	.chat__typing i,
	.chat-launch__dot {
		animation: none;
	}
}

/* =========================================================================
   26. 一本の作品として見せるための仕掛け
       ・画面の隅に常駐する撮影機材の表示（HUD）
       ・各セクションの入口に置くスレート
       ・エンドロール
   ====================================================================== */

/* --------------------------------------------------------------
 * HUD：REC・タイムコード・現在のSCENE
 * 画面の四隅に薄く常駐する。読む物ではなく、居場所を示す物。
 * ------------------------------------------------------------ */
.hud {
	position: fixed;
	inset: 0;
	z-index: 170;
	pointer-events: none;
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
	opacity: 0;
	transition: opacity .8s ease;
	mix-blend-mode: difference;
}

.hud.is-on { opacity: 1; }

.hud > * {
	position: absolute;
	white-space: nowrap;
}

.hud__rec    { top: 14px; left: 16px; display: flex; align-items: center; gap: 7px; }
.hud__time   { top: 14px; right: 16px; font-variant-numeric: tabular-nums; }
.hud__scene  { bottom: 14px; left: 16px; }
.hud__title  { bottom: 14px; right: 16px; }

.hud__rec::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff3b3b;
	animation: hc-rec 1.4s steps(1) infinite;
}

.hud__scene b {
	color: rgba(255, 255, 255, .82);
	font-weight: 700;
}

/* ヘッダーとぶつかる位置なので、上段はヘッダーの下へ逃がす */
@media (max-width: 1024px) {
	.hud { font-size: 9px; letter-spacing: .14em; }
	.hud__rec, .hud__time { top: calc(var(--header-h) + 8px); }
	.hud__scene, .hud__title { bottom: 66px; }
	.hud__title { display: none; }
}

/* --------------------------------------------------------------
 * スレート：各場面の入口に置く、カチンコの情報
 * ------------------------------------------------------------ */
.slate {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(20px, 3vw, 34px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line-2);
	font-family: var(--en2);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.slate__no {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 11px;
	border: 1px solid var(--label);
	color: var(--label);
	letter-spacing: .16em;
}

.slate__ja {
	font-family: var(--ja);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wh);
}

.slate__take {
	margin-left: auto;
}

/* 斜めの縞。カチンコの上辺を思わせる細い帯 */
.slate::after {
	content: "";
	flex: 0 1 90px;
	height: 9px;
	background: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, .5) 0 6px,
		transparent 6px 12px
	);
}

@media (max-width: 760px) {
	.slate__take { display: none; }
	.slate::after { flex-basis: 44px; }
}

/* --------------------------------------------------------------
 * カット：場面が切り替わる瞬間の、ごく短い黒
 * ------------------------------------------------------------ */
.cut {
	position: fixed;
	inset: 0;
	z-index: 165;
	background: #000;
	opacity: 0;
	pointer-events: none;
}

.cut.is-cut {
	animation: hc-cut .34s steps(2, end);
}

@keyframes hc-cut {
	0%   { opacity: 0; }
	40%  { opacity: .82; }
	100% { opacity: 0; }
}

/* --------------------------------------------------------------
 * エンドロール
 * ------------------------------------------------------------ */
.endroll {
	position: relative;
	padding-block: clamp(90px, 16vw, 220px);
	border-top: 1px solid var(--line-2);
	background: #000;
	overflow: hidden;
}

.endroll__inner {
	width: min(100% - var(--pad) * 2, 760px);
	margin-inline: auto;
	text-align: center;
}

.endroll__label {
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gray-2);
	margin-bottom: clamp(36px, 6vw, 64px);
}

/* 役割と担当。エンドロールの体裁で、中央の線を挟んで左右に置く */
.endroll__credits {
	display: grid;
	gap: 13px;
	margin-bottom: clamp(56px, 9vw, 110px);
}

.endroll__credits > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 4vw, 46px);
	align-items: baseline;
}

.endroll__credits dt {
	text-align: right;
	font-family: var(--en2);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.endroll__credits dd {
	text-align: left;
	font-size: 13.5px;
	letter-spacing: .04em;
	color: #cfcfcd;
}

/* 最後に残す一行 */
.endroll__line {
	font-size: clamp(24px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.55;
	letter-spacing: -.01em;
	color: var(--wh);
	margin-bottom: clamp(48px, 8vw, 96px);
}

.endroll__brand {
	font-family: var(--en);
	font-size: clamp(28px, 6.5vw, 76px);
	letter-spacing: .08em;
	line-height: 1;
	color: var(--wh);
}

/* 上下を黒でぼかし、暗闇から浮かんで暗闇へ戻る */
.endroll::before,
.endroll::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 22%;
	pointer-events: none;
}

.endroll::before { top: 0;    background: linear-gradient(#000, transparent); }
.endroll::after  { bottom: 0; background: linear-gradient(transparent, #000); }

/* CTAボタンに添える英字 */
.btn__en {
	display: block;
	margin-top: 3px;
	font-family: var(--en2);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .6;
}

.btn--lg:has(.btn__en) {
	flex-direction: column;
	gap: 0;
	padding-block: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.hud__rec::before,
	.cut {
		animation: none !important;
	}
}

/* =========================================================================
   27. 画面全体にかける、フィルムの質感
       ・光の漏れ（ライトリーク）
       ・場面の終わりの暗転
   ====================================================================== */

/* 斜めに走る光。ときどき、ゆっくり通り過ぎる。 */
.leak {
	position: fixed;
	inset: -30% -60%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		108deg,
		transparent 42%,
		rgba(255, 255, 255, .05) 48%,
		rgba(var(--label-rgb), .04) 51%,
		rgba(255, 255, 255, .05) 54%,
		transparent 60%
	);
	mix-blend-mode: screen;
	opacity: 0;
	animation: hc-leak 26s ease-in-out infinite;
}

@keyframes hc-leak {
	0%, 74%   { opacity: 0; transform: translateX(-14%) rotate(0deg); }
	80%       { opacity: 1; }
	86%       { opacity: 1; }
	100%      { opacity: 0; transform: translateX(14%) rotate(0deg); }
}

/* エンドロールへ入る手前の暗転 */
.fadeout {
	height: clamp(120px, 22vw, 260px);
	background: linear-gradient(var(--bk), #000);
	position: relative;
}

.fadeout__label {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	font-family: var(--en2);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gray-2);
	opacity: .55;
}

/* エンドロールの一行は、近づくほど浮かび上がる */
.endroll__line {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.2, .7, .3, 1);
}

.endroll.is-visible .endroll__line {
	opacity: 1;
	transform: none;
}

.endroll__brand {
	opacity: 0;
	transition: opacity 2s ease .6s;
}

.endroll.is-visible .endroll__brand {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.leak { animation: none; opacity: 0; }

	.endroll__line,
	.endroll__brand {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   28. 代表挨拶
   ====================================================================== */

.msg__inner {
	width: min(100% - var(--pad) * 2, 880px);
	margin-inline: auto;
}

.msg__photo {
	margin: 0 0 clamp(48px, 8vw, 96px);
	border: 1px solid var(--line-2);
	overflow: hidden;
}

.msg__photo img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(1) contrast(1.04);
	animation: hc-kenburns 40s ease-in-out infinite alternate;
}

/* 本文。行間を広く取り、読ませるより「聞かせる」組みにする。 */
.msg__p {
	font-size: clamp(15px, 1.9vw, 18px);
	line-height: 2.5;
	letter-spacing: .04em;
	color: #d4d4d2;
	margin-bottom: clamp(34px, 5vw, 56px);
}

/* 言い切りの行は、大きく、白く */
.msg__p--lead {
	font-size: clamp(19px, 3vw, 30px);
	font-weight: 700;
	line-height: 1.95;
	letter-spacing: 0;
	color: var(--wh);
}

/* 手段の羅列。1行ずつ、間を置いて置く。 */
.msg__p--list {
	font-family: var(--en2);
	font-size: clamp(17px, 2.4vw, 24px);
	font-weight: 600;
	line-height: 2.2;
	letter-spacing: .1em;
	color: var(--wh);
	padding-left: 1.1em;
	border-left: 1px solid var(--line);
}

/* 問いの3行 */
.msg__p--q {
	font-size: clamp(17px, 2.4vw, 25px);
	font-weight: 700;
	line-height: 2.2;
	color: var(--wh);
	padding: clamp(24px, 4vw, 40px) 0;
	border-block: 1px solid var(--line-2);
}

/* 考える・つくる・試す・壊す */
.msg__p--steps {
	font-size: clamp(17px, 2.6vw, 27px);
	font-weight: 700;
	line-height: 2.1;
	color: var(--wh);
}

/* 最後にもう一度、同じ問いを置く */
.msg__close {
	margin: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 72px);
	padding-top: clamp(40px, 6vw, 72px);
	border-top: 1px solid var(--line-2);
	font-size: clamp(22px, 4.4vw, 44px);
	font-weight: 900;
	line-height: 1.7;
	letter-spacing: -.01em;
	color: var(--wh);
}

/* 署名 */
.msg__sign {
	display: grid;
	gap: 5px;
	padding-top: clamp(24px, 4vw, 40px);
	border-top: 1px solid var(--line-2);
}

.msg__name {
	font-family: var(--en);
	font-size: clamp(20px, 3.4vw, 32px);
	letter-spacing: .04em;
	color: var(--wh);
}

.msg__role {
	font-family: var(--en2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gray-2);
}

.msg__ja {
	margin-top: 6px;
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--gray);
}

@media (prefers-reduced-motion: reduce) {
	.msg__photo img { animation: none; }
}

/* 代表挨拶の署名（手書き） */
.msg__sig {
	display: block;
	width: min(320px, 68%);
	height: auto;
	margin-bottom: 10px;
}

@media (max-width: 760px) {
	.msg__sig { width: min(260px, 78%); }
}

/* =========================================================================
   29. 写真をフィルムに寄せる
       ・全体を沈める
       ・四隅を落とす（周辺光量落ち）
       ・粒子をのせる
   ====================================================================== */

/* 代表写真。白壁で明るいので、いちばん強く沈める。 */
.msg__photo {
	position: relative;
	background: #000;
}

.msg__photo img {
	filter: grayscale(1) brightness(.62) contrast(1.28);
}

/* 四隅を落とす */
.msg__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(78% 68% at 50% 42%, transparent 30%, rgba(0, 0, 0, .72) 100%),
		linear-gradient(transparent 55%, rgba(0, 0, 0, .55));
}

/* サイト全体の写真も、ひと段沈める */
.service-card__img,
.about__img,
.job__media img,
.reel__img,
.work-card__img {
	filter: brightness(.82) contrast(1.12);
}

.service-card:hover .service-card__img,
.reel.is-playing .reel__img {
	filter: brightness(1) contrast(1.06);
}

/* 写真の枠に、うっすら周辺光量落ちをかける */
.service-card__media,
.about__media,
.job__media,
.reel__frame,
.work-card__media {
	position: relative;
}

.service-card__media::after,
.about__media::after,
.job__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(82% 74% at 50% 46%, transparent 42%, rgba(0, 0, 0, .5) 100%);
}

/* 粒子。写真の上にだけ、ごく薄く。 */
.msg__photo::before,
.about__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: .12;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* =========================================================================
   30. 写真の持ち出しを、やりにくくする
       完全には防げない。あくまで「うっかり保存」を減らすための措置。
   ====================================================================== */

img {
	/* iPhoneの長押しで出る「イメージを保存」を出さない */
	-webkit-touch-callout: none;
	/* 画像をつまんでデスクトップへ引っぱれないようにする */
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

/* 文章は普通に選べるようにしておく（引用や電話番号のコピーを妨げない） */
p, li, dd, dt, h1, h2, h3, address, .entry-content {
	user-select: text;
	-webkit-user-select: text;
}

/* 会社概要の補足行と、事業内容の箇条書き */
.company-table__sub {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--gray-2);
}

.company-list li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 8px;
	font-size: 13.5px;
	line-height: 1.9;
}

.company-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .92em;
	width: 7px;
	height: 1px;
	background: var(--label);
}

.company-note {
	margin-top: clamp(28px, 4vw, 44px);
	font-size: 13px;
	line-height: 1.95;
	color: var(--gray);
}

.company-note a {
	color: var(--wh);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* 打ち込み中の見出し。カーソルを点滅させる。 */
.sec-head__ja.is-typing,
.page-hero__title.is-typing,
.cta-band__title.is-typing,
.endroll__line.is-typing {
	white-space: pre-wrap;
}

.sec-head__ja .caret,
.page-hero__title .caret,
.cta-band__title .caret,
.endroll__line .caret {
	display: inline-block;
	width: .06em;
	min-width: 2px;
	height: .82em;
	margin-left: .06em;
	background: var(--label);
	vertical-align: -.06em;
	animation: hc-caret .9s steps(1) infinite;
}

@keyframes hc-caret {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sec-head__ja .caret,
	.page-hero__title .caret,
	.cta-band__title .caret,
	.endroll__line .caret {
		display: none;
	}
}

/* =========================================================================
   31. オープニングのカチンコ
       数字が100になった瞬間にカチンと閉じ、その勢いでサイトが開く。
   ====================================================================== */

.slate-board {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	/* PCとスマホで、画面に対する占有率を変える */
	width: clamp(300px, 38vw, 580px);
	/* 腕が上へ張り出すぶん、少し下へずらして重心を画面中央に合わせる */
	transform: translate(-50%, -44%) scale(.88);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

/* 画面に出す */
.slate-board.is-in {
	opacity: 1;
	transform: translate(-50%, -44%) scale(1);
}

/* 打ち終わったあと、勢いよく引く */
.slate-board.is-out {
	opacity: 0;
	transform: translate(-50%, -44%) scale(1.5);
	transition: opacity .5s ease .1s, transform .8s cubic-bezier(.6, 0, .8, .2);
}

/* 上の腕。左下を軸に、開いた状態から閉じる。 */
.slate-board__arm {
	height: 13%;
	min-height: 22px;
	background: #0a0a0c;
	border: 1px solid rgba(255, 255, 255, .5);
	transform-origin: left bottom;
	transform: rotate(-26deg);
	overflow: hidden;
}

/* 閉じる瞬間。速く、硬く。 */
.slate-board.is-clap .slate-board__arm {
	transform: rotate(0deg);
	transition: transform .14s cubic-bezier(.7, 0, .9, .3);
}

.slate-board__body {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #0a0a0c;
	border: 1px solid rgba(255, 255, 255, .5);
	border-top: 0;
	padding: 6% 6% 5%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

/* 斜めの縞 */
.slate-board__stripes {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		108deg,
		#f2f2f0 0 11%,
		#0a0a0c 11% 22%
	);
}

.slate-board__stripes--btm {
	inset: auto 0 0;
	height: 11%;
}

/* 記入欄 */
.slate-board__rows {
	position: relative;
	display: grid;
	gap: 4%;
	margin-bottom: 13%;
}

.slate-board__rows > div {
	display: grid;
	grid-template-columns: 34% 1fr;
	align-items: baseline;
	gap: 6%;
	padding-bottom: 3%;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.slate-board__rows dt {
	font-family: var(--en2);
	font-size: clamp(7px, .95vw, 11px);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.slate-board__rows dd {
	margin: 0;
	font-family: var(--en);
	font-size: clamp(10px, 1.5vw, 19px);
	letter-spacing: .04em;
	line-height: 1;
	color: #f2f2f0;
}

/* 閉じた瞬間の白い一撃 */
.loader__flash {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: #fff;
	opacity: 0;
	pointer-events: none;
}

.loader__flash.is-hit {
	animation: hc-flash .3s ease-out;
}

@keyframes hc-flash {
	0%   { opacity: 0; }
	8%   { opacity: .92; }
	100% { opacity: 0; }
}

/* スマホは画面に対して大きく出す（小さいと文字が読めない） */
@media (max-width: 760px) {
	.slate-board {
		width: min(84vw, 380px);
	}

	.slate-board__rows dt { font-size: 8px; }
	.slate-board__rows dd { font-size: 13px; }
}

/* 横に寝かせた小さい画面では、はみ出さないよう高さ基準にする */
@media (max-height: 480px) {
	.slate-board { width: min(46vh, 300px); }
}

@media (prefers-reduced-motion: reduce) {
	.slate-board,
	.loader__flash {
		display: none;
	}
}

/* メールアドレスは桁数が多いので、電話番号より小さく組む */
.contact-method__num--mail,
.cta-tel__num--mail {
	font-size: clamp(15px, 2.1vw, 22px);
	letter-spacing: 0;
	word-break: break-all;
}

/* LINE。緑は1点だけ。使いすぎると黒基調が崩れる。 */
/* ここだけ和文が入る。欧文用の字送りのままだと大きすぎる。 */
.contact-method__num--line,
.cta-tel__num--line {
	font-family: inherit;
	font-size: clamp(19px, 2.4vw, 26px);
	letter-spacing: .04em;
	color: #06c755;
}

.cta-tel--line .cta-tel__label,
.contact-method--line .contact-method__label {
	color: #06c755;
}