/* ===========================================================
hakuto AI — lab.html
テーマ：製図ノート風（クリーム × 黒 × 朱オレンジ）
=========================================================== */
/* ========== 全体トークン（b612.css の dark theme を強制上書き） ========== */
body.b612--lab {
/* tech theme tokens — ダーク × ネオンレッド */
--paper-bg: #0a0e1a;
--paper-card: #141828;
--paper-card-2: #1a1f33;
--paper-line: #e8eef7;
--paper-line-soft:#94a3b8;
--paper-line-faint:rgba(148, 163, 184, 0.18);
--paper-text: #e8eef7;
--paper-text-mid: #94a3b8;
--paper-text-low: #64748b;
--paper-accent: #06b6d4;
--paper-accent-d: #0891b2;
--paper-accent-l: #22d3ee;
--paper-stamp: #06b6d4;
/* b612.css 変数も上書き（safety） */
--text: #e8eef7 !important;
--text-mute: #94a3b8 !important;
--text-dim: #64748b !important;
--gold: #06b6d4 !important;
--gold-bright: #22d3ee !important;
--gold-soft: rgba(6, 182, 212, 0.25) !important;
--gold-glow: rgba(6, 182, 212, 0.55) !important;
--bg: #0a0e1a !important;
--bg-alt: #141828 !important;
--card: #141828 !important;
--card-2: #1a1f33 !important;
--card-featured: #141828 !important;
--border: rgba(26, 26, 26, 0.18) !important;
--border-strong: rgba(26, 26, 26, 0.3) !important;
--highlight: #0891b2 !important;
background: var(--paper-bg) !important;
background-attachment: scroll !important;
color: var(--paper-text) !important;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1.7;
overflow-x: clip;
}
/* 横スクロール（モバイルで右に出る変な隙間）の根絶 — clip は sticky を壊さない */
html { overflow-x: clip; }
body.b612--lab .lab-section,
body.b612--lab .lab-container { max-width: 100%; }
/* スワイプ誘導ヒント（モバイルのみ表示） */
body.b612--lab .lab-swipe-hint { display: none; }
@media (max-width: 720px) {
body.b612--lab .lab-swipe-hint {
display: block;
text-align: center;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--paper-accent);
margin: 0 0 12px;
opacity: 0.85;
animation: labSwipeHint 2.4s ease-in-out infinite;
}
@keyframes labSwipeHint {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
}
@media (prefers-reduced-motion: reduce) {
body.b612--lab .lab-swipe-hint { animation: none; }
}
/* イントロ演出は廃止（モバイルで終わらずヒーローを覆う不具合）。残骸を完全非表示 */
body.b612--lab .lab-intro { display: none !important; }
/* 既存の3D・ポップ装飾を全部消す（紙テーマには合わない） */
body.b612--lab .lab-bg,
body.b612--lab .lab-bg-canvas,
body.b612--lab .lab-bg-layer,
body.b612--lab .lab-bg-glow,
body.b612--lab .b612-lab-hero__pop,
body.b612--lab .b612-lab-hero__pop-cloud,
body.b612--lab .b612-lab-hero__pop-ring,
body.b612--lab .b612-lab-hero__pop-blob {
display: none !important;
}
/* ===========================================================
動く背景レイヤー（製図 × パララックス × 奥行き）
=========================================================== */
body.b612--lab .lab-paper-bg {
position: fixed !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
overflow: hidden !important;
color: #e8eef7 !important;
display: block !important;
}
/* レイヤー1：方眼グリッド（テック感・はっきり見える） */
body.b612--lab .lab-paper-bg__grid {
position: absolute !important;
inset: -200px 0 -200px 0 !important;
background-image:
linear-gradient(to right, rgba(6, 182, 212, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(6, 182, 212, 0.08) 1px, transparent 1px) !important;
background-size: 56px 56px !important;
will-change: transform;
mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 40%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 40%, transparent 100%);
}
/* レイヤー2：遠景の幾何学線画（drift + 微回転） */
body.b612--lab .lab-paper-bg__shapes {
position: absolute !important;
top: -200px !important;
left: 0 !important;
width: 100% !important;
height: calc(100% + 400px) !important;
will-change: transform;
animation: labPaperBgDrift 60s ease-in-out infinite;
display: block !important;
opacity: 1 !important;
}
body.b612--lab .lab-paper-bg__shapes line,
body.b612--lab .lab-paper-bg__shapes circle,
body.b612--lab .lab-paper-bg__shapes polygon,
body.b612--lab .lab-paper-bg__shapes rect,
body.b612--lab .lab-paper-bg__shapes path,
body.b612--lab .lab-paper-bg__shapes text {
stroke: #94a3b8 !important;
stroke-width: 1.3px;
}
body.b612--lab .lab-paper-bg__shapes circle[fill="currentColor"],
body.b612--lab .lab-paper-bg__shapes text { fill: #94a3b8 !important; }
@keyframes labPaperBgDrift {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-15px, -10px) rotate(0.3deg); }
50% { transform: translate(10px, -20px) rotate(-0.2deg); }
75% { transform: translate(-5px, 8px) rotate(0.2deg); }
}
/* レイヤー3：中景の浮かぶ図形（個別アニメ） */
body.b612--lab .lab-paper-bg__floaters {
position: absolute !important;
top: -150px !important;
left: 0 !important;
width: 100% !important;
height: calc(100% + 300px) !important;
will-change: transform;
display: block !important;
opacity: 1 !important;
}
body.b612--lab .lab-paper-bg__floaters * {
stroke: #06b6d4 !important;
stroke-width: 1.5px !important;
opacity: 0.5 !important;
}
body.b612--lab .lab-paper-bg__float {
transform-origin: center;
transform-box: fill-box;
animation: labPaperBgFloat 14s ease-in-out infinite;
}
body.b612--lab .lab-paper-bg__float--1 { animation-delay: 0s; animation-duration: 16s; }
body.b612--lab .lab-paper-bg__float--2 { animation-delay: 2s; animation-duration: 19s; }
body.b612--lab .lab-paper-bg__float--3 { animation-delay: 4s; animation-duration: 13s; }
body.b612--lab .lab-paper-bg__float--4 { animation-delay: 1s; animation-duration: 18s; animation-name: labPaperBgRotate; }
body.b612--lab .lab-paper-bg__float--5 { animation-delay: 5s; animation-duration: 15s; animation-name: labPaperBgRotate; }
body.b612--lab .lab-paper-bg__float--6 { animation-delay: 3s; animation-duration: 12s; }
body.b612--lab .lab-paper-bg__float--7 { animation-delay: 6s; animation-duration: 17s; }
@keyframes labPaperBgFloat {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(8px, -16px); }
}
@keyframes labPaperBgRotate {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(5px, -10px) rotate(180deg); }
}
/* レイヤー4：手前のオレンジドット（パルス） */
body.b612--lab .lab-paper-bg__dots {
position: absolute !important;
top: -100px !important;
left: 0 !important;
width: 100% !important;
height: calc(100% + 200px) !important;
will-change: transform;
display: block !important;
opacity: 1 !important;
}
body.b612--lab .lab-paper-bg__dots .lab-paper-bg__dot {
fill: #06b6d4 !important;
filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
}
body.b612--lab .lab-paper-bg__dot {
transform-origin: center;
transform-box: fill-box;
animation: labPaperBgPulse 4s ease-in-out infinite;
}
body.b612--lab .lab-paper-bg__dot--1 { animation-delay: 0s; }
body.b612--lab .lab-paper-bg__dot--2 { animation-delay: 0.5s; }
body.b612--lab .lab-paper-bg__dot--3 { animation-delay: 1s; }
body.b612--lab .lab-paper-bg__dot--4 { animation-delay: 1.5s; }
body.b612--lab .lab-paper-bg__dot--5 { animation-delay: 2s; }
body.b612--lab .lab-paper-bg__dot--6 { animation-delay: 2.5s; }
body.b612--lab .lab-paper-bg__dot--7 { animation-delay: 3s; }
body.b612--lab .lab-paper-bg__dot--8 { animation-delay: 3.5s; }
@keyframes labPaperBgPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.6); opacity: 0.9; }
}
/* コンテンツを背景より上に */
body.b612--lab > header,
body.b612--lab > section,
body.b612--lab > footer,
body.b612--lab > .mobile-menu {
position: relative;
z-index: 1;
}
body.b612--lab > header { z-index: 100; }
body.b612--lab > .mobile-menu { z-index: 200; }
/* prefers-reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce) {
body.b612--lab .lab-paper-bg__shapes,
body.b612--lab .lab-paper-bg__float,
body.b612--lab .lab-paper-bg__dot {
animation: none !important;
}
}
/* ===========================================================
動きアニメーション
=========================================================== */
/* HERO タイトル：1文字ずつフェードイン + 下から上がる */
body.b612--lab .lab-hero__title {
animation: labFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
body.b612--lab .lab-hero__title em {
display: inline-block;
animation: labGlow 2.4s ease-in-out 1.2s infinite;
}
body.b612--lab .lab-hero__badge {
animation: labFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}
body.b612--lab .lab-hero__lead {
animation: labFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
body.b612--lab .lab-hero__checklist {
animation: labFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
body.b612--lab .lab-hero__checklist li {
opacity: 0;
animation: labFadeUpLi 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.b612--lab .lab-hero__checklist li:nth-child(1) { animation-delay: 0.7s; }
body.b612--lab .lab-hero__checklist li:nth-child(2) { animation-delay: 0.85s; }
body.b612--lab .lab-hero__checklist li:nth-child(3) { animation-delay: 1.0s; }
body.b612--lab .lab-hero__cta {
animation: labFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}
body.b612--lab .lab-hero__blueprint {
animation: labFadeRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
body.b612--lab .lab-hero__blueprint-step {
opacity: 0;
animation: labFadeRightStep 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.b612--lab .lab-hero__blueprint-step:nth-child(1) { animation-delay: 0.8s; }
body.b612--lab .lab-hero__blueprint-step:nth-child(2) { animation-delay: 1.0s; }
body.b612--lab .lab-hero__blueprint-step:nth-child(3) { animation-delay: 1.2s; }
body.b612--lab .lab-hero__blueprint-step:nth-child(4) { animation-delay: 1.4s; }
@keyframes labFadeUp {
from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(4px); }
to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes labFadeUpLi {
from { opacity: 0; transform: translate3d(-12px, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes labFadeRight {
from { opacity: 0; transform: translate3d(40px, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes labFadeRightStep {
from { opacity: 0; transform: translate3d(20px, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes labGlow {
0%, 100% { text-shadow: 0 0 12px rgba(6, 182, 212, 0.6), 0 0 24px rgba(6, 182, 212, 0.3); }
50% { text-shadow: 0 0 24px rgba(6, 182, 212, 1.0), 0 0 48px rgba(6, 182, 212, 0.6), 0 0 72px rgba(6, 182, 212, 0.3); }
}
/* グリッチ：「カタチ」を hover でブルブル */
body.b612--lab .lab-hero__title em.is-glitching {
animation: labGlitch 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both, labGlow 2.4s ease-in-out infinite;
}
@keyframes labGlitch {
0%, 100% { transform: translate(0, 0); text-shadow: 0 0 12px rgba(6, 182, 212, 0.6); }
10% { transform: translate(-2px, 1px); text-shadow: 2px 0 #00fff9, -2px 0 #06b6d4; }
20% { transform: translate(2px, -1px); text-shadow: -2px 0 #00fff9, 2px 0 #06b6d4; }
30% { transform: translate(-1px, 2px); text-shadow: 0 0 12px rgba(6, 182, 212, 0.8); }
40% { transform: translate(1px, -2px); text-shadow: 3px 0 #00fff9, -3px 0 #06b6d4; }
50% { transform: translate(-2px, 0); text-shadow: 0 0 16px rgba(6, 182, 212, 1.0); }
60% { transform: translate(2px, 1px); text-shadow: -3px 0 #00fff9, 3px 0 #06b6d4; }
70% { transform: translate(0, -1px); text-shadow: 0 0 12px rgba(6, 182, 212, 0.6); }
80% { transform: translate(-1px, 0); text-shadow: 1px 0 #00fff9, -1px 0 #06b6d4; }
90% { transform: translate(1px, 0); }
}
/* スクロール時に出現する要素（JS で .is-visible を付与） */
body.b612--lab .lab-reveal {
opacity: 0;
transform: translate3d(0, 32px, 0);
transition:
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
body.b612--lab .lab-reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
body.b612--lab .lab-reveal[data-delay="1"] { transition-delay: 0.08s; }
body.b612--lab .lab-reveal[data-delay="2"] { transition-delay: 0.16s; }
body.b612--lab .lab-reveal[data-delay="3"] { transition-delay: 0.24s; }
body.b612--lab .lab-reveal[data-delay="4"] { transition-delay: 0.32s; }
body.b612--lab .lab-reveal[data-delay="5"] { transition-delay: 0.40s; }
/* カード hover：3D tilt + ネオン光 + 内部要素もアニメ */
body.b612--lab .lab-flow-step,
body.b612--lab .lab-pricing-card,
body.b612--lab .lab-works-item {
transition:
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s ease;
transform-style: preserve-3d;
will-change: transform;
}
/* === FLOW カード === */
body.b612--lab .lab-flow-step {
cursor: default;
overflow: hidden;
}
body.b612--lab .lab-flow-step::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%),
rgba(6, 182, 212, 0.2),
transparent 50%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 0;
}
body.b612--lab .lab-flow-step:hover::before {
opacity: 1;
}
body.b612--lab .lab-flow-step > * { position: relative; z-index: 1; }
body.b612--lab .lab-flow-step:hover {
border-color: var(--paper-accent) !important;
box-shadow:
0 20px 50px -14px rgba(6, 182, 212, 0.55),
0 0 0 1px rgba(6, 182, 212, 0.4),
inset 0 0 30px rgba(6, 182, 212, 0.06);
}
body.b612--lab .lab-flow-step__num {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}
body.b612--lab .lab-flow-step:hover .lab-flow-step__num {
transform: translateY(-4px) scale(1.15);
color: var(--paper-accent) !important;
}
body.b612--lab .lab-flow-step__name {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
body.b612--lab .lab-flow-step:hover .lab-flow-step__name {
transform: translateY(-2px);
}
body.b612--lab .lab-flow-step__tag {
transition: transform 0.3s, background 0.3s, color 0.3s;
}
body.b612--lab .lab-flow-step:hover .lab-flow-step__tag {
transform: scale(1.08);
background: var(--paper-accent);
color: #fff !important;
border-color: var(--paper-accent) !important;
}
/* === PRICING カード === */
body.b612--lab .lab-pricing-card {
position: relative;
overflow: hidden;
}
body.b612--lab .lab-pricing-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
rgba(6, 182, 212, 0.18),
transparent 55%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 0;
}
body.b612--lab .lab-pricing-card:hover::before {
opacity: 1;
}
body.b612--lab .lab-pricing-card > * { position: relative; z-index: 1; }
body.b612--lab .lab-pricing-card:hover {
border-color: var(--paper-accent) !important;
box-shadow:
0 30px 70px -16px rgba(6, 182, 212, 0.6),
0 0 0 1px rgba(6, 182, 212, 0.3),
inset 0 0 40px rgba(6, 182, 212, 0.06);
}
body.b612--lab .lab-pricing-card__price,
body.b612--lab .lab-pricing-card__name {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}
body.b612--lab .lab-pricing-card:hover .lab-pricing-card__price {
transform: scale(1.06);
color: var(--paper-accent);
}
body.b612--lab .lab-pricing-card:hover .lab-pricing-card__name {
letter-spacing: 0.12em;
color: var(--paper-accent) !important;
}
body.b612--lab .lab-pricing-card__features li {
transition: transform 0.3s, padding-left 0.3s;
}
body.b612--lab .lab-pricing-card:hover .lab-pricing-card__features li {
padding-left: 4px;
}
/* リボン・スタンプ：ホバーで大きく */
body.b612--lab .lab-pricing-card--featured:hover .lab-pricing-card__stamp {
animation-play-state: paused;
transform: rotate(0deg) scale(1.2);
box-shadow:
inset 0 0 0 5px var(--paper-card),
inset 0 0 0 6px var(--paper-stamp),
0 0 40px rgba(6, 182, 212, 1);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
}
/* === WORKS カード === */
body.b612--lab .lab-works-item {
position: relative;
overflow: hidden;
}
body.b612--lab .lab-works-item img {
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
body.b612--lab .lab-works-item:hover img {
transform: scale(1.1);
filter: brightness(1.1) saturate(1.2);
}
body.b612--lab .lab-works-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
transparent 30%,
rgba(6, 182, 212, 0.35) 50%,
transparent 70%);
transform: translateX(-100%);
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
body.b612--lab .lab-works-item:hover::after {
transform: translateX(100%);
}
body.b612--lab .lab-works-item:hover {
border-color: var(--paper-accent) !important;
box-shadow:
0 24px 50px -14px rgba(6, 182, 212, 0.6),
0 0 0 1px rgba(6, 182, 212, 0.4);
}
/* === ボタン強化 === */
body.b612--lab .lab-btn--primary,
body.b612--lab .header__cta,
body.b612--lab .lab-contact__btn--mail {
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.b612--lab .lab-btn--primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 0 32px rgba(6, 182, 212, 0.7),
0 12px 24px -6px rgba(6, 182, 212, 0.5) !important;
}
/* === FAQ アイテム === */
body.b612--lab .lab-faq-item {
transition: background 0.3s, padding-left 0.3s;
padding-left: 0;
}
body.b612--lab .lab-faq-item:hover {
padding-left: 8px;
background: linear-gradient(90deg, rgba(6, 182, 212, 0.04), transparent);
}
body.b612--lab .lab-faq-item summary::after {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s;
}
body.b612--lab .lab-faq-item:hover summary::after {
transform: rotate(90deg) scale(1.2);
}
/* CTA ボタン：パルスグロー */
body.b612--lab .lab-hero__cta .lab-btn--primary {
position: relative;
overflow: hidden;
}
body.b612--lab .lab-hero__cta .lab-btn--primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
transform: translateX(-100%);
animation: labBtnShine 3.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes labBtnShine {
0%, 70%, 100% { transform: translateX(-100%); }
85% { transform: translateX(100%); }
}
/* ヘッダーロゴ：脈動 */
body.b612--lab .header__logo::before {
animation: labLogoPulse 2s ease-in-out infinite;
}
@keyframes labLogoPulse {
0%, 100% { box-shadow: 0 0 12px rgba(6, 182, 212, 0.6); }
50% { box-shadow: 0 0 24px rgba(6, 182, 212, 1.0), 0 0 8px rgba(6, 182, 212, 0.6) inset; }
}
/* b612 method の矢印が下に流れる */
body.b612--lab .lab-hero__blueprint-step + .lab-hero__blueprint-step::after {
animation: labArrowDown 1.8s ease-in-out infinite;
}
@keyframes labArrowDown {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
50% { transform: translateX(-50%) translateY(3px); opacity: 1; }
}
/* 「おすすめ」スタンプ：ゆっくり回転 + 拍動 */
body.b612--lab .lab-pricing-card__stamp {
animation: labStampWiggle 4s ease-in-out infinite;
}
@keyframes labStampWiggle {
0%, 100% { transform: rotate(8deg) scale(1); }
50% { transform: rotate(-4deg) scale(1.06); }
}
/* セクション番号タグ：左から線が伸びる */
body.b612--lab .lab-section__corner::before {
content: '';
display: inline-block;
width: 24px;
height: 1.5px;
background: var(--paper-accent);
margin-right: 4px;
animation: labLineExpand 1.2s ease-out infinite alternate;
}
@keyframes labLineExpand {
from { width: 24px; opacity: 0.5; }
to { width: 40px; opacity: 1; }
}
/* グリッドの呼吸（背景全体がうっすら脈打つ） */
body.b612--lab .lab-paper-bg__grid {
animation: labGridBreath 8s ease-in-out infinite;
}
@keyframes labGridBreath {
0%, 100% { opacity: 0.8; }
50% { opacity: 1.2; }
}
/* SVG 図形の drift をもう少し速く・派手に */
body.b612--lab .lab-paper-bg__shapes {
animation-duration: 30s;
}
/* 中景フロート図形：scale も追加 */
body.b612--lab .lab-paper-bg__float--1,
body.b612--lab .lab-paper-bg__float--2,
body.b612--lab .lab-paper-bg__float--3 {
animation-name: labFloatScale !important;
}
@keyframes labFloatScale {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(8px, -12px) scale(1.1); }
50% { transform: translate(-6px, -20px) scale(0.95); }
75% { transform: translate(4px, -8px) scale(1.05); }
}
/* 全コンテンツを最前面に */
body.b612--lab > *:not(.lab-bg) {
position: relative;
z-index: 1;
}
/* テックフォント統一（明朝完全廃止） */
body.b612--lab *,
body.b612--lab *::before,
body.b612--lab *::after {
font-family: "Inter", "Noto Sans JP", system-ui, sans-serif !important;
}
/* 大見出しは Space Grotesk でテック感を出す */
body.b612--lab .lab-hero__title,
body.b612--lab .lab-flow__title,
body.b612--lab .lab-works__title,
body.b612--lab .lab-contact__title,
body.b612--lab .lab-pricing-card__name,
body.b612--lab .lab-pricing-card__price,
body.b612--lab .lab-hero__blueprint-title,
body.b612--lab .lab-flow-step__name {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", system-ui, sans-serif !important;
}
/* 数字・コード・モノスペース */
body.b612--lab .lab-section__corner-num,
body.b612--lab .lab-flow-step__num,
body.b612--lab .lab-hero__blueprint-step-num,
body.b612--lab .lab-hero__blueprint-margin,
body.b612--lab .lab-section__corner-name,
body.b612--lab .lab-hero__blueprint-step-name,
body.b612--lab .lab-hero__blueprint-tag,
body.b612--lab .lab-section__corner-desc {
font-family: "JetBrains Mono", "Inter", monospace !important;
}
/* ========== Container ========== */
body.b612--lab .lab-container {
max-width: 1180px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 640px) {
body.b612--lab .lab-container { padding: 0 20px; }
}
/* ========== Header ========== */
body.b612--lab .header {
position: sticky !important;
top: 0 !important;
z-index: 500 !important;
background: rgba(10, 14, 26, 0.85) !important;
backdrop-filter: blur(14px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
border-bottom: 1px solid var(--paper-line-faint) !important;
box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.4) !important;
transition: background 0.3s, box-shadow 0.3s;
}
body.b612--lab .header.is-scrolled {
background: rgba(6, 12, 20, 0.95) !important;
box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.6) !important;
}
/* sticky ヘッダー分のオフセットを anchor scroll に */
html:has(body.b612--lab) {
scroll-padding-top: 80px;
}
body.b612--lab .header__logo {
display: inline-flex !important;
align-items: center !important;
gap: 12px;
color: var(--paper-text) !important;
-webkit-text-fill-color: var(--paper-text) !important;
background: none !important;
font-family: "Inter", sans-serif !important;
font-weight: 800 !important;
font-size: 1.15rem !important;
letter-spacing: 0.02em;
}
body.b612--lab .header__logo::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background: var(--paper-accent) !important;
border-radius: 3px;
box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}
body.b612--lab .header__nav {
gap: 0 !important;
}
body.b612--lab .header__nav a {
display: inline-flex;
align-items: center;
color: var(--paper-text) !important;
-webkit-text-fill-color: var(--paper-text) !important;
background: none !important;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-weight: 500 !important;
font-size: 0.92rem !important;
padding: 8px 16px !important;
position: relative;
}
body.b612--lab .header__nav a + a::before {
content: '/';
position: absolute;
left: -3px;
color: var(--paper-text-low);
font-weight: 400;
}
body.b612--lab .header__nav a:hover {
color: var(--paper-accent) !important;
-webkit-text-fill-color: var(--paper-accent) !important;
background: none !important;
}
body.b612--lab .header__cta {
background: transparent !important;
color: var(--paper-accent) !important;
-webkit-text-fill-color: var(--paper-accent) !important;
border: 1.5px solid var(--paper-accent) !important;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-weight: 600 !important;
padding: 9px 20px !important;
border-radius: 6px !important;
font-size: 0.85rem !important;
box-shadow: none !important;
transition: all 0.2s !important;
}
body.b612--lab .header__cta:hover {
background: var(--paper-accent) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
transform: none;
}
body.b612--lab .header__cta::before { display: none !important; }
body.b612--lab .header__menu span { background: var(--paper-line) !important; }
body.b612--lab .mobile-menu {
background: var(--paper-bg) !important;
color: var(--paper-text) !important;
}
body.b612--lab .mobile-menu__nav a {
color: var(--paper-text) !important;
border-color: var(--paper-line-faint) !important;
}
body.b612--lab .mobile-menu__num { color: var(--paper-accent) !important; }
/* ========== セクション共通：番号タグ ========== */
body.b612--lab .lab-section {
position: relative;
padding: 60px 0;
border-bottom: 1px solid var(--paper-line-faint);
}
body.b612--lab .lab-section__corner {
display: flex;
align-items: baseline;
gap: 18px;
margin-bottom: 32px;
font-family: "Inter", sans-serif;
font-size: 0.82rem;
letter-spacing: 0.08em;
color: var(--paper-text-mid);
}
body.b612--lab .lab-section__corner-num {
font-family: "JetBrains Mono", "Inter", monospace;
color: var(--paper-text);
font-weight: 700;
}
body.b612--lab .lab-section__corner-name {
font-weight: 700;
color: var(--paper-text);
letter-spacing: 0.15em;
}
body.b612--lab .lab-section__corner-desc {
color: var(--paper-text-mid);
}
/* ========== HERO ========== */
body.b612--lab .lab-hero {
position: relative;
padding: 100px 0 60px;
border-bottom: 1px solid var(--paper-line-faint);
background: transparent;
}
body.b612--lab .lab-hero__grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 900px) {
body.b612--lab .lab-hero__grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
body.b612--lab .lab-hero__badge {
display: inline-block;
border: 1.5px solid var(--paper-accent);
color: var(--paper-accent);
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.84rem;
font-weight: 500;
padding: 8px 18px;
border-radius: 4px;
margin-bottom: 32px;
letter-spacing: 0.02em;
}
body.b612--lab .lab-hero__title {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: clamp(2.4rem, 5.5vw, 4.2rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--paper-text);
margin: 0 0 32px;
}
body.b612--lab .lab-hero__title em {
font-style: normal;
color: var(--paper-accent) !important;
-webkit-text-fill-color: var(--paper-accent) !important;
background: none !important;
filter: none !important;
}
body.b612--lab .lab-hero__lead {
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 1rem;
line-height: 1.85;
color: var(--paper-text-mid);
margin: 0 0 28px;
}
body.b612--lab .lab-hero__lead b {
color: var(--paper-text);
font-weight: 600;
}
body.b612--lab .lab-hero__checklist {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: flex;
flex-direction: column;
gap: 10px;
}
body.b612--lab .lab-hero__checklist li {
display: flex;
align-items: center;
gap: 12px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: var(--paper-text);
}
body.b612--lab .lab-hero__checklist li::before {
content: '';
width: 22px;
height: 22px;
background: var(--paper-accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center/65% no-repeat;
mask: url("data:image/svg+xml;utf8,") center/65% no-repeat;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--paper-accent);
background-color: transparent;
}
/* Hero CTA */
body.b612--lab .lab-hero__cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
body.b612--lab .lab-hero__cta .lab-btn--primary {
background: var(--paper-accent);
color: #fff;
border: none;
padding: 14px 28px;
border-radius: 4px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
box-shadow: 0 0 24px rgba(6, 182, 212, 0.4), 0 2px 0 var(--paper-accent-d);
}
body.b612--lab .lab-hero__cta .lab-btn--primary:hover {
background: var(--paper-accent-d);
transform: translateY(-1px);
}
body.b612--lab .lab-hero__cta .lab-btn--ghost {
background: transparent;
color: var(--paper-text);
border: 1.5px solid var(--paper-text);
padding: 14px 28px;
border-radius: 4px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.2s;
}
body.b612--lab .lab-hero__cta .lab-btn--ghost:hover {
background: var(--paper-text);
color: var(--paper-bg);
}
/* スマホ：ヒーロー CTA は縦積み・全幅で位置を整える */
@media (max-width: 560px) {
body.b612--lab .lab-hero__cta {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
body.b612--lab .lab-hero__cta .lab-btn--primary,
body.b612--lab .lab-hero__cta .lab-btn--ghost {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* Hero 右側：b612 method 製図 */
body.b612--lab .lab-hero__blueprint {
position: relative;
background: var(--paper-card);
border: 1px solid rgba(6, 182, 212, 0.4);
padding: 32px 28px 40px;
min-height: 480px;
font-family: "JetBrains Mono", "Inter", monospace;
box-shadow: 0 0 32px rgba(6, 182, 212, 0.1);
}
body.b612--lab .lab-hero__blueprint::before,
body.b612--lab .lab-hero__blueprint::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 1.5px solid var(--paper-line);
}
body.b612--lab .lab-hero__blueprint::before {
top: -1px; left: -1px;
border-right: none;
border-bottom: none;
}
body.b612--lab .lab-hero__blueprint::after {
top: -1px; right: -1px;
border-left: none;
border-bottom: none;
}
body.b612--lab .lab-hero__blueprint-tag {
display: inline-block;
font-family: "Inter", sans-serif;
font-size: 0.7rem;
font-weight: 700;
color: var(--paper-accent);
border: 1px solid var(--paper-accent);
padding: 3px 10px;
border-radius: 2px;
margin-bottom: 12px;
letter-spacing: 0.1em;
}
body.b612--lab .lab-hero__blueprint-title {
font-family: "Inter", sans-serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--paper-text);
margin: 0 0 24px;
letter-spacing: 0.04em;
}
body.b612--lab .lab-hero__blueprint-steps {
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
margin-bottom: 24px;
}
body.b612--lab .lab-hero__blueprint-step {
position: relative;
display: flex;
align-items: stretch;
border: 1px solid var(--paper-line-faint);
padding: 12px 16px;
background: var(--paper-card-2);
z-index: 1;
}
body.b612--lab .lab-hero__blueprint-step + .lab-hero__blueprint-step::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
width: 1.5px;
height: 14px;
background: var(--paper-line);
}
body.b612--lab .lab-hero__blueprint-step + .lab-hero__blueprint-step::after {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--paper-line);
}
body.b612--lab .lab-hero__blueprint-step-num {
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
font-weight: 700;
color: var(--paper-text);
width: 42px;
flex-shrink: 0;
}
body.b612--lab .lab-hero__blueprint-step-name {
font-family: "Inter", sans-serif;
font-size: 0.82rem;
font-weight: 700;
color: var(--paper-text);
margin-right: 12px;
flex-shrink: 0;
}
body.b612--lab .lab-hero__blueprint-step-desc {
font-family: "Noto Sans JP", sans-serif;
font-size: 0.78rem;
color: var(--paper-text-mid);
}
body.b612--lab .lab-hero__blueprint-margin {
position: absolute;
right: -28px;
top: 80px;
font-family: "Space Grotesk", "Inter", sans-serif;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 0.8rem;
color: var(--paper-text-low);
letter-spacing: 0.6em;
}
/* ========== FLOW ========== */
body.b612--lab .lab-flow__title {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
text-align: center;
color: var(--paper-text);
margin: 0 0 40px;
font-weight: 600;
letter-spacing: 0.04em;
}
body.b612--lab .lab-flow__title em {
font-style: normal;
color: var(--paper-accent);
font-size: 1.15em;
margin: 0 4px;
}
body.b612--lab .lab-flow-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 800px) {
body.b612--lab .lab-flow-grid {
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 6px;
align-items: stretch;
}
}
body.b612--lab .lab-flow-step {
position: relative;
background: var(--paper-card);
border: 1.5px solid var(--paper-line-faint);
padding: 24px 18px;
text-align: center;
}
body.b612--lab .lab-flow-step::before,
body.b612--lab .lab-flow-step::after {
border-color: var(--paper-accent) !important;
}
body.b612--lab .lab-flow-step::before,
body.b612--lab .lab-flow-step::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 1.5px solid var(--paper-line);
}
body.b612--lab .lab-flow-step::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
body.b612--lab .lab-flow-step::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
body.b612--lab .lab-flow-step__num {
font-family: "JetBrains Mono", "Inter", monospace;
font-size: 1.05rem;
font-weight: 700;
color: var(--paper-text);
margin-bottom: 6px;
}
body.b612--lab .lab-flow-step__name {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--paper-text);
margin-bottom: 14px;
letter-spacing: 0.04em;
}
body.b612--lab .lab-flow-step__tag {
display: inline-block;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.75rem;
font-weight: 700;
border: 1.5px solid var(--paper-text);
color: var(--paper-text);
padding: 4px 14px;
border-radius: 2px;
letter-spacing: 0.06em;
}
body.b612--lab .lab-flow-step__tag--free {
border-color: var(--paper-accent);
color: var(--paper-accent);
}
body.b612--lab .lab-flow-step__tag--contract {
background: var(--paper-accent);
color: #fff;
border-color: var(--paper-accent);
}
body.b612--lab .lab-flow-arrow {
font-family: "Inter", sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: var(--paper-text-low);
align-self: center;
text-align: center;
}
@media (max-width: 799px) {
body.b612--lab .lab-flow-arrow {
display: block;
width: 100%;
text-align: center;
line-height: 1;
transform: rotate(90deg);
margin: 2px auto;
}
}
/* ========== PRICING ========== */
body.b612--lab .lab-pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
max-width: 1100px;
margin: 40px auto 0;
}
@media (min-width: 800px) {
body.b612--lab .lab-pricing-grid {
grid-template-columns: 1fr 1.15fr 1fr;
gap: 22px;
}
}
body.b612--lab .lab-pricing-card {
position: relative;
background: var(--paper-card);
border: 1.5px solid var(--paper-line-faint);
padding: 32px 28px 36px;
text-align: center;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.4);
}
body.b612--lab .lab-pricing-card::before,
body.b612--lab .lab-pricing-card::after {
border-color: var(--paper-accent) !important;
}
body.b612--lab .lab-pricing-card::before,
body.b612--lab .lab-pricing-card::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border: 1.5px solid var(--paper-line);
}
body.b612--lab .lab-pricing-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
body.b612--lab .lab-pricing-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
body.b612--lab .lab-pricing-card--featured {
border: 2px solid var(--paper-accent);
background: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, var(--paper-card) 100%);
box-shadow: 0 12px 40px -10px rgba(6, 182, 212, 0.4);
}
body.b612--lab .lab-pricing-card--featured::before,
body.b612--lab .lab-pricing-card--featured::after {
border-color: var(--paper-accent);
}
body.b612--lab .lab-pricing-card__stamp {
position: absolute;
top: -20px;
right: -12px;
width: 72px;
height: 72px;
border-radius: 50%;
border: 2px solid var(--paper-stamp);
background: var(--paper-card);
color: var(--paper-stamp);
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: 0.9rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(8deg);
z-index: 2;
letter-spacing: 0.1em;
box-shadow:
inset 0 0 0 5px var(--paper-card),
inset 0 0 0 6px var(--paper-stamp),
0 0 20px rgba(6, 182, 212, 0.5);
}
body.b612--lab .lab-pricing-card__name {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--paper-text);
margin-bottom: 24px;
letter-spacing: 0.08em;
}
body.b612--lab .lab-pricing-card__price {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: 3rem;
font-weight: 700;
color: var(--paper-text);
line-height: 1;
margin-bottom: 4px;
letter-spacing: 0.02em;
}
body.b612--lab .lab-pricing-card--featured .lab-pricing-card__price {
color: var(--paper-accent);
}
body.b612--lab .lab-pricing-card__price-unit {
font-family: "Inter", sans-serif;
font-size: 1rem;
font-weight: 500;
color: var(--paper-text-mid);
margin-left: 4px;
}
body.b612--lab .lab-pricing-card__price-sub {
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.82rem;
color: var(--paper-text-mid);
margin-bottom: 24px;
}
body.b612--lab .lab-pricing-card__features {
list-style: none;
padding: 24px 0 0;
margin: 0;
border-top: 1px dashed var(--paper-line-faint);
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
flex: 1;
}
body.b612--lab .lab-pricing-card__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.88rem;
color: var(--paper-text);
line-height: 1.6;
/* 日本語の改行を文字単位で割らせない（「エンジニア」が途中で折れる事故を防止） */
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
}
body.b612--lab .lab-pricing-card__features li .nowrap-jp {
white-space: nowrap;
}
body.b612--lab .lab-pricing-card__features li::before {
content: '';
width: 14px;
height: 14px;
background: var(--paper-accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center/100% no-repeat;
mask: url("data:image/svg+xml;utf8,") center/100% no-repeat;
flex-shrink: 0;
margin-top: 4px;
}
/* ========== WORKS ========== */
body.b612--lab .lab-works__head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 28px;
}
body.b612--lab .lab-works__title {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 700;
color: var(--paper-text);
margin: 0;
letter-spacing: 0.04em;
}
body.b612--lab .lab-works__title em {
font-style: normal;
color: var(--paper-accent);
font-size: 1.25em;
margin: 0 4px;
}
body.b612--lab .lab-works__hint {
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.88rem;
color: var(--paper-accent);
font-weight: 500;
}
body.b612--lab .lab-works-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 640px) {
body.b612--lab .lab-works-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 980px) {
body.b612--lab .lab-works-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }
}
body.b612--lab .lab-works-item {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--paper-line-faint);
background: var(--paper-card-2);
display: block;
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
body.b612--lab .lab-works-item:hover {
border-color: var(--paper-accent);
box-shadow: 0 14px 28px -12px rgba(6, 182, 212, 0.5);
}
body.b612--lab .lab-works-item:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px -12px rgba(26, 26, 26, 0.4);
}
body.b612--lab .lab-works-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
body.b612--lab .lab-works-item__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-card);
border: 1.5px dashed var(--paper-line-faint);
color: var(--paper-text-low);
font-family: "Inter", sans-serif;
font-size: 2rem;
font-weight: 300;
}
/* ========== FAQ ========== */
body.b612--lab .lab-faq-list {
max-width: 980px;
margin: 0 auto;
}
body.b612--lab .lab-faq-item {
border-bottom: 1px solid var(--paper-line-faint);
padding: 0;
}
body.b612--lab .lab-faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 8px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 1.02rem;
font-weight: 500;
color: var(--paper-text);
transition: color 0.2s;
}
body.b612--lab .lab-faq-item summary::-webkit-details-marker { display: none; }
body.b612--lab .lab-faq-item summary::after {
content: '+';
font-family: "Inter", sans-serif;
font-size: 1.3rem;
font-weight: 400;
color: var(--paper-accent);
transition: transform 0.25s;
margin-left: 16px;
}
body.b612--lab .lab-faq-item[open] summary::after {
transform: rotate(45deg);
}
body.b612--lab .lab-faq-item summary:hover {
color: var(--paper-accent);
}
body.b612--lab .lab-faq-item__body {
padding: 0 8px 22px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.92rem;
color: var(--paper-text-mid);
line-height: 1.85;
}
body.b612--lab .lab-faq-item__body b {
color: var(--paper-text);
font-weight: 700;
}
/* ========== CONTACT ========== */
body.b612--lab .lab-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 900px) {
body.b612--lab .lab-contact-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
}
body.b612--lab .lab-contact__title {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 700;
color: var(--paper-text);
margin: 0 0 24px;
letter-spacing: 0.04em;
line-height: 1.4;
}
body.b612--lab .lab-contact__title em {
font-style: normal;
color: var(--paper-accent);
}
body.b612--lab .lab-contact__trust {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 24px;
margin-bottom: 32px;
max-width: 360px;
}
body.b612--lab .lab-contact__trust-item {
display: flex;
align-items: center;
gap: 10px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.86rem;
font-weight: 500;
color: var(--paper-text);
}
body.b612--lab .lab-contact__trust-item svg {
width: 18px;
height: 18px;
color: var(--paper-text-mid);
flex-shrink: 0;
}
body.b612--lab .lab-contact__actions {
display: flex;
flex-direction: column;
gap: 14px;
}
body.b612--lab .lab-contact__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
border-radius: 4px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
body.b612--lab .lab-contact__btn--mail {
background: var(--paper-accent);
color: #fff;
border: none;
box-shadow: 0 2px 0 var(--paper-accent-d);
}
body.b612--lab .lab-contact__btn--mail:hover {
background: var(--paper-accent-d);
transform: translateY(-1px);
}
body.b612--lab .lab-contact__btn--line {
background: #fff;
color: #06c755;
border: 1.5px solid #06c755;
}
body.b612--lab .lab-contact__btn--line:hover {
background: #06c755;
color: #fff;
}
body.b612--lab .lab-contact__btn-icon {
width: 18px;
height: 18px;
}
/* Referral banner */
body.b612--lab .lab-referral-banner {
margin-top: 28px;
background: var(--paper-card);
border: 1px dashed var(--paper-accent);
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-radius: 4px;
}
body.b612--lab .lab-referral-banner__icon {
width: 36px;
height: 36px;
color: var(--paper-accent);
flex-shrink: 0;
}
body.b612--lab .lab-referral-banner__text {
flex: 1;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.88rem;
color: var(--paper-text);
line-height: 1.6;
}
body.b612--lab .lab-referral-banner__text strong {
color: var(--paper-text);
font-weight: 700;
}
body.b612--lab .lab-referral-banner__text em {
font-style: normal;
color: var(--paper-accent);
font-weight: 700;
}
body.b612--lab .lab-referral-banner__arrow {
color: var(--paper-accent);
font-size: 1.4rem;
flex-shrink: 0;
}
/* ========== Footer ========== */
body.b612--lab .lab-footer {
background: transparent !important;
color: var(--paper-text) !important;
padding: 30px 0 0;
border-top: 1px solid var(--paper-line-faint);
position: relative;
z-index: 1;
}
body.b612--lab .lab-footer-line {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
padding: 18px 0;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.86rem;
color: var(--paper-text);
}
body.b612--lab .lab-footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 800;
color: var(--paper-text);
}
body.b612--lab .lab-footer-logo::before {
content: '';
width: 16px;
height: 16px;
background: var(--paper-accent);
border-radius: 2px;
box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
body.b612--lab .lab-footer__bottom {
background: var(--paper-accent);
color: #ffffff;
padding: 14px 0;
margin-top: 30px;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.15em;
}
/* Reset b612.css footer color override */
body.b612--lab .footer {
display: none !important;
}
/* ===========================================================
料金カードを白背景に（ダーク背景とのコントラスト）
=========================================================== */
body.b612--lab .lab-pricing-card {
background: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
box-shadow:
0 20px 60px -20px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
color: #0f172a;
}
body.b612--lab .lab-pricing-card::before,
body.b612--lab .lab-pricing-card::after {
border-color: var(--paper-accent) !important;
}
body.b612--lab .lab-pricing-card__name {
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
letter-spacing: 0.15em;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
}
body.b612--lab .lab-pricing-card__price {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-weight: 800;
}
body.b612--lab .lab-pricing-card__price-unit {
color: #64748b !important;
}
body.b612--lab .lab-pricing-card__price-sub {
color: #64748b !important;
font-size: 0.82rem;
}
body.b612--lab .lab-pricing-card__features {
border-top: 1px dashed #e2e8f0 !important;
}
body.b612--lab .lab-pricing-card__features li {
color: #334155 !important;
}
/* おすすめカード（featured）— 白背景 + シアン枠 + グロー */
body.b612--lab .lab-pricing-card--featured {
background: linear-gradient(180deg, #ffffff 0%, #f0fbfd 100%) !important;
border: 2px solid var(--paper-accent) !important;
box-shadow:
0 30px 80px -20px rgba(6, 182, 212, 0.55),
0 0 0 1px rgba(6, 182, 212, 0.15) inset;
/* おすすめスタンプを完全に見せる */
overflow: visible !important;
}
/* glow gradient だけはカード内部に収める */
body.b612--lab .lab-pricing-card--featured > .lab-pricing-card__stamp {
z-index: 5;
}
body.b612--lab .lab-pricing-card--featured .lab-pricing-card__price {
color: var(--paper-accent) !important;
-webkit-text-fill-color: var(--paper-accent) !important;
}
/* スタンプも白カードに合わせる */
body.b612--lab .lab-pricing-card__stamp {
background: #ffffff !important;
box-shadow:
inset 0 0 0 5px #ffffff,
inset 0 0 0 6px var(--paper-stamp),
0 0 24px rgba(6, 182, 212, 0.5) !important;
}
/* hover 時のグロー色も白カード用 */
body.b612--lab .lab-pricing-card:hover {
border-color: var(--paper-accent) !important;
box-shadow:
0 30px 80px -16px rgba(6, 182, 212, 0.6),
0 0 0 1px rgba(6, 182, 212, 0.3),
inset 0 0 40px rgba(6, 182, 212, 0.04) !important;
}
body.b612--lab .lab-pricing-card:hover .lab-pricing-card__name {
color: var(--paper-accent) !important;
-webkit-text-fill-color: var(--paper-accent) !important;
}
body.b612--lab .lab-pricing-card:hover .lab-pricing-card__price {
color: var(--paper-accent) !important;
-webkit-text-fill-color: var(--paper-accent) !important;
}
body.b612--lab .lab-pricing-card::before {
background:
radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
rgba(6, 182, 212, 0.12),
transparent 55%) !important;
}
/* CTA ボタン色を新アクセントに */
body.b612--lab .lab-contact__btn--mail {
background: var(--paper-accent) !important;
box-shadow: 0 2px 0 var(--paper-accent-d) !important;
}
body.b612--lab .lab-contact__btn--mail:hover {
background: var(--paper-accent-d) !important;
}
/* ===========================================================
カスタムカーソル（PC のみ）
=========================================================== */
/* body.b612--lab > *:not(.lab-bg) { z-index: 1 } の cascade に負けないよう
.lab-cursor 側の特異度を引き上げて確実に最前面に出す */
body.b612--lab .lab-cursor,
.lab-cursor {
position: fixed !important;
top: 0;
left: 0;
pointer-events: none;
z-index: 999999 !important;
display: block;
isolation: auto;
}
body.no-custom-cursor .lab-cursor { display: none !important; }
/* ネイティブカーソルは常時表示する（カスタムカーソルは装飾扱い）
どんな背景でも OS のカーソルは確実に見えるので、ユーザーの操作不能を防ぐ */
/* ===========================================================
カーソル：黒 + 白の二重リングで物理的にどこでも見える
背景の色に左右されない強い視認性を box-shadow で確保
=========================================================== */
.lab-cursor__dot {
position: fixed;
top: 0;
left: 0;
z-index: 100001;
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0);
transition: width 0.25s, height 0.25s, opacity 0.25s;
will-change: transform;
pointer-events: none;
/* 白 dot を黒で完全に囲って明背景でも視認 */
box-shadow:
0 0 0 2px #0f172a, /* 黒の太縁取り */
0 0 0 3px #ffffff, /* 白でさらに囲う */
0 0 0 4px rgba(15, 23, 42, 0.85), /* 最外周にもう一度黒 */
0 2px 6px rgba(0, 0, 0, 0.5);
}
.lab-cursor__ring {
position: fixed;
top: 0;
left: 0;
z-index: 100000;
width: 42px;
height: 42px;
border: 3px solid #ffffff; /* 白本体 */
border-radius: 50%;
background: transparent;
transform: translate3d(-50%, -50%, 0);
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.25s, border-color 0.25s, opacity 0.25s;
will-change: transform;
pointer-events: none;
/* 白リングを黒で挟んで、白カードでも黒カードでも必ず視認 */
box-shadow:
inset 0 0 0 2px #0f172a, /* 白の内側に黒 */
0 0 0 2.5px #0f172a, /* 白の外側に黒 */
0 0 0 4px rgba(255, 255, 255, 0.55), /* さらに薄白 */
0 0 0 5.5px rgba(15, 23, 42, 0.7), /* 最外で黒 */
0 6px 18px rgba(0, 0, 0, 0.45),
0 0 28px rgba(6, 182, 212, 0.5); /* シアンの大グロー */
}
/* 状態変化時：シアンに着替え（はっきりブランド色） */
.lab-cursor.is-link .lab-cursor__ring,
.lab-cursor.is-card .lab-cursor__ring,
.lab-cursor.is-works .lab-cursor__ring {
border-color: #06b6d4;
background: rgba(6, 182, 212, 0.18);
box-shadow:
inset 0 0 0 2px #0f172a,
0 0 0 2.5px #0f172a,
0 0 0 4px rgba(255, 255, 255, 0.55),
0 0 0 5.5px rgba(15, 23, 42, 0.7),
0 6px 18px rgba(0, 0, 0, 0.4),
0 0 32px rgba(6, 182, 212, 0.7);
}
.lab-cursor.is-link .lab-cursor__dot {
width: 0;
height: 0;
opacity: 0;
}
.lab-cursor__label {
position: fixed;
top: 0;
left: 0;
z-index: 100002;
transform: translate3d(-50%, calc(-50% + 50px), 0);
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
color: #ffffff;
background: rgba(15, 23, 42, 0.85);
padding: 3px 10px;
border-radius: 999px;
border: 1px solid rgba(6, 182, 212, 0.5);
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
text-transform: uppercase;
white-space: nowrap;
}
/* リンク・ボタン上：拡大 */
.lab-cursor.is-link .lab-cursor__ring {
width: 70px;
height: 70px;
background: rgba(6, 182, 212, 0.25);
border-color: #06b6d4;
}
.lab-cursor.is-link .lab-cursor__dot {
width: 0;
height: 0;
opacity: 0;
}
/* カード上：ラベル表示 */
.lab-cursor.is-card .lab-cursor__ring {
width: 90px;
height: 90px;
background: rgba(6, 182, 212, 0.3);
border-color: #06b6d4;
}
.lab-cursor.is-card .lab-cursor__dot {
width: 4px;
height: 4px;
background: #06b6d4;
}
.lab-cursor.is-card .lab-cursor__label {
opacity: 1;
}
/* WORKS カード上 */
.lab-cursor.is-works .lab-cursor__ring {
width: 110px;
height: 110px;
background: rgba(6, 182, 212, 0.35);
border-color: #06b6d4;
}
.lab-cursor.is-works .lab-cursor__dot {
width: 0;
height: 0;
}
.lab-cursor.is-works .lab-cursor__label {
opacity: 1;
color: #06b6d4;
background: rgba(15, 23, 42, 0.9);
}
/* マウスが画面外 */
.lab-cursor.is-hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
/* クリック中：縮小 */
.lab-cursor.is-down .lab-cursor__ring {
transform-origin: center;
animation: labCursorPulse 0.4s ease-out;
}
@keyframes labCursorPulse {
0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
100% { box-shadow: 0 0 0 24px rgba(6, 182, 212, 0); }
}
.lab-cursor.is-down .lab-cursor__dot {
width: 14px;
height: 14px;
}
/* ===========================================================
WORKS カードホバー時のオーバーレイ
=========================================================== */
body.b612--lab .lab-works-item__overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: 18px 16px 16px;
background: linear-gradient(
180deg,
transparent 0%,
transparent 30%,
rgba(6, 22, 30, 0.85) 65%,
rgba(6, 22, 30, 0.95) 100%
);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
body.b612--lab .lab-works-item:hover .lab-works-item__overlay {
opacity: 1;
}
body.b612--lab .lab-works-item__num {
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
color: #06b6d4;
margin-bottom: 6px;
transform: translateY(8px);
opacity: 0;
transition: transform 0.4s 0.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s 0.05s;
}
body.b612--lab .lab-works-item__name {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
line-height: 1.35;
margin-bottom: 4px;
transform: translateY(8px);
opacity: 0;
transition: transform 0.4s 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s 0.12s;
}
body.b612--lab .lab-works-item__cat {
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.72rem;
color: #94a3b8;
margin-bottom: 10px;
transform: translateY(8px);
opacity: 0;
transition: transform 0.4s 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s 0.18s;
}
body.b612--lab .lab-works-item__arrow {
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
color: #06b6d4;
padding-top: 8px;
border-top: 1px solid rgba(6, 182, 212, 0.3);
width: 100%;
transform: translateY(8px);
opacity: 0;
transition: transform 0.4s 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s 0.24s;
}
body.b612--lab .lab-works-item:hover .lab-works-item__num,
body.b612--lab .lab-works-item:hover .lab-works-item__name,
body.b612--lab .lab-works-item:hover .lab-works-item__cat,
body.b612--lab .lab-works-item:hover .lab-works-item__arrow {
opacity: 1;
transform: translateY(0);
}
/* ===========================================================
TRY DEMO セクション（白背景 / Claude 風シミュレーション）
=========================================================== */
body.b612--lab .lab-section.lab-section--light {
background:
radial-gradient(circle at 20% 10%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 55%),
#fafbfc !important;
color: #0f172a !important;
position: relative;
z-index: 2;
}
body.b612--lab .lab-section.lab-section--light::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(6, 22, 30, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(6, 22, 30, 0.045) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
body.b612--lab .lab-section.lab-section--light > .lab-container {
position: relative;
z-index: 1;
}
body.b612--lab .lab-section.lab-section--light .lab-section__corner-num,
body.b612--lab .lab-section.lab-section--light .lab-section__corner-name,
body.b612--lab .lab-section.lab-section--light .lab-section__corner-desc {
color: #0f172a !important;
}
body.b612--lab .lab-section.lab-section--light .lab-flow__title {
color: #0f172a !important;
}
body.b612--lab .lab-section.lab-section--light .lab-flow__title em {
color: #06b6d4 !important;
font-style: normal;
}
/* チャットウィンドウ */
body.b612--lab .lab-try__window {
max-width: 820px;
margin: 0 auto;
background: #ffffff;
border-radius: 14px;
box-shadow:
0 1px 0 rgba(15, 23, 42, 0.04),
0 30px 60px -20px rgba(15, 23, 42, 0.22),
0 14px 28px -14px rgba(15, 23, 42, 0.18);
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.08);
position: relative;
}
/* トップバー（Mac風） */
body.b612--lab .lab-try__topbar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(180deg, #f6f7f8 0%, #eceef1 100%);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body.b612--lab .lab-try__dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
body.b612--lab .lab-try__dot--red { background: #ff5f57; }
body.b612--lab .lab-try__dot--yellow { background: #ffbd2e; }
body.b612--lab .lab-try__dot--green { background: #28c840; }
body.b612--lab .lab-try__url {
margin-left: 18px;
display: inline-flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 999px;
padding: 4px 14px 4px 12px;
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
color: #475569;
letter-spacing: 0.04em;
}
body.b612--lab .lab-try__url svg { color: #06b6d4; flex-shrink: 0; }
body.b612--lab .lab-try__url-tag {
margin-left: auto;
font-family: "JetBrains Mono", monospace;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
padding: 4px 10px;
border-radius: 4px;
background: rgba(6, 182, 212, 0.1);
color: #0e7490;
border: 1px solid rgba(6, 182, 212, 0.25);
}
/* チャット領域 */
body.b612--lab .lab-try__chat {
min-height: 260px;
max-height: 460px;
overflow-y: auto;
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 18px;
background:
repeating-linear-gradient(transparent 0, transparent 31px, rgba(15, 23, 42, 0.025) 32px),
#ffffff;
scroll-behavior: smooth;
}
body.b612--lab .lab-try__chat::-webkit-scrollbar { width: 6px; }
body.b612--lab .lab-try__chat::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.18);
border-radius: 3px;
}
/* メッセージ */
body.b612--lab .lab-try__msg {
display: flex;
gap: 12px;
max-width: 92%;
animation: labTryMsgIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes labTryMsgIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
body.b612--lab .lab-try__msg--ai {
align-self: flex-start;
}
body.b612--lab .lab-try__msg--user {
align-self: flex-end;
flex-direction: row-reverse;
}
body.b612--lab .lab-try__avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, #d97706 0%, #c2410c 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: "JetBrains Mono", monospace;
font-weight: 700;
font-size: 0.78rem;
}
body.b612--lab .lab-try__msg--user .lab-try__avatar {
background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
}
body.b612--lab .lab-try__msg--user .lab-try__avatar::after {
content: "U";
font-family: "JetBrains Mono", monospace;
font-weight: 700;
}
body.b612--lab .lab-try__bubble {
background: #f6f7f8;
border: 1px solid rgba(15, 23, 42, 0.06);
padding: 12px 16px;
border-radius: 12px;
border-top-left-radius: 4px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.92rem;
line-height: 1.7;
color: #0f172a;
word-break: break-word;
}
body.b612--lab .lab-try__bubble b { color: #d97706; font-weight: 700; }
body.b612--lab .lab-try__hint {
display: block;
margin-top: 6px;
font-size: 0.78rem;
color: #64748b;
font-style: italic;
}
body.b612--lab .lab-try__msg--user .lab-try__bubble {
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
color: #ffffff;
border-color: transparent;
border-top-left-radius: 12px;
border-top-right-radius: 4px;
}
body.b612--lab .lab-try__msg--user .lab-try__bubble b { color: #ffffff; }
/* タイピングインジケータ */
body.b612--lab .lab-try__typing {
display: inline-flex;
gap: 4px;
padding: 4px 0;
}
body.b612--lab .lab-try__typing span {
width: 7px;
height: 7px;
background: #94a3b8;
border-radius: 50%;
animation: labTryTyping 1.2s infinite ease-in-out;
}
body.b612--lab .lab-try__typing span:nth-child(2) { animation-delay: 0.15s; }
body.b612--lab .lab-try__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes labTryTyping {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* 実績プレビューカード（AI応答に挿入） */
body.b612--lab .lab-try__preview {
margin-top: 12px;
display: block;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
}
body.b612--lab .lab-try__preview:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px -12px rgba(6, 182, 212, 0.35);
border-color: #06b6d4;
}
body.b612--lab .lab-try__preview-img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: #f6f7f8;
}
body.b612--lab .lab-try__preview-meta {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
body.b612--lab .lab-try__preview-num {
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.2em;
color: #06b6d4;
}
body.b612--lab .lab-try__preview-name {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
}
body.b612--lab .lab-try__preview-url {
margin-top: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
color: #64748b;
display: flex;
align-items: center;
gap: 6px;
}
body.b612--lab .lab-try__preview-url::after {
content: "→";
margin-left: auto;
color: #06b6d4;
font-weight: 700;
transition: transform 0.3s;
}
body.b612--lab .lab-try__preview:hover .lab-try__preview-url::after {
transform: translateX(4px);
}
/* フォーム */
body.b612--lab .lab-try__form {
display: flex;
gap: 10px;
padding: 14px 16px;
background: #f6f7f8;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
body.b612--lab .lab-try__select-wrap {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
body.b612--lab .lab-try__select {
width: 100%;
appearance: none;
-webkit-appearance: none;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 10px;
padding: 12px 36px 12px 14px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.9rem;
color: #0f172a;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
body.b612--lab .lab-try__select:hover {
border-color: rgba(6, 182, 212, 0.4);
}
body.b612--lab .lab-try__select:focus {
outline: none;
border-color: #06b6d4;
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}
body.b612--lab .lab-try__select-caret {
position: absolute;
right: 14px;
color: #64748b;
pointer-events: none;
}
body.b612--lab .lab-try__submit {
background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%);
color: #ffffff;
border: none;
border-radius: 10px;
padding: 0 26px;
min-height: 48px;
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.06em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
box-shadow:
0 6px 18px -4px rgba(6, 182, 212, 0.6),
0 0 0 1px rgba(6, 182, 212, 0.4) inset,
0 0 24px rgba(6, 182, 212, 0.35);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
body.b612--lab .lab-try__submit:hover {
background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%);
transform: translateY(-2px);
box-shadow:
0 10px 26px -4px rgba(6, 182, 212, 0.75),
0 0 0 1px rgba(255, 255, 255, 0.3) inset,
0 0 32px rgba(6, 182, 212, 0.6);
}
body.b612--lab .lab-try__submit:active {
transform: translateY(0);
}
body.b612--lab .lab-try__submit:disabled {
background: #cbd5e1;
color: #ffffff;
cursor: not-allowed;
transform: none;
box-shadow: none;
text-shadow: none;
}
body.b612--lab .lab-try__submit svg {
flex-shrink: 0;
}
/* フッターヒント */
body.b612--lab .lab-try__footer {
padding: 10px 16px 12px;
background: #f6f7f8;
border-top: 1px solid rgba(15, 23, 42, 0.06);
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.7rem;
color: #94a3b8;
text-align: center;
}
/* レスポンシブ */
@media (max-width: 720px) {
body.b612--lab .lab-try__window { border-radius: 10px; }
body.b612--lab .lab-try__topbar { padding: 10px 12px; }
body.b612--lab .lab-try__url { display: none; }
body.b612--lab .lab-try__url-tag { margin-left: auto; }
body.b612--lab .lab-try__chat { padding: 18px 14px; min-height: 220px; max-height: 380px; }
body.b612--lab .lab-try__msg { max-width: 100%; }
body.b612--lab .lab-try__form { flex-direction: column; padding: 12px; }
body.b612--lab .lab-try__submit { padding: 12px; justify-content: center; }
}
/* ===========================================================
TRY DEMO — 作業中演出（building animation）
=========================================================== */
/* ステータスチップ（ステップ） */
body.b612--lab .lab-try__steps {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
}
body.b612--lab .lab-try__step {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
background: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
color: #475569;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.3s, transform 0.3s, border-color 0.3s, background 0.3s;
}
body.b612--lab .lab-try__step.is-show {
opacity: 1;
transform: translateX(0);
}
body.b612--lab .lab-try__step-icon {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(15, 23, 42, 0.18);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
position: relative;
}
/* in-progress: 回転スピナー */
body.b612--lab .lab-try__step.is-running .lab-try__step-icon {
border-color: #06b6d4;
border-top-color: transparent;
animation: labTrySpin 0.8s linear infinite;
}
@keyframes labTrySpin {
to { transform: rotate(360deg); }
}
body.b612--lab .lab-try__step.is-running {
background: rgba(6, 182, 212, 0.05);
border-color: rgba(6, 182, 212, 0.3);
color: #0e7490;
}
/* done: チェックマーク */
body.b612--lab .lab-try__step.is-done .lab-try__step-icon {
border-color: #06b6d4;
background: #06b6d4;
}
body.b612--lab .lab-try__step.is-done .lab-try__step-icon::after {
content: "";
width: 9px;
height: 5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
display: block;
animation: labTryCheck 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes labTryCheck {
from { transform: rotate(-45deg) translate(-6px, 4px) scale(0.5); opacity: 0; }
to { transform: rotate(-45deg) translate(1px, -1px) scale(1); opacity: 1; }
}
body.b612--lab .lab-try__step.is-done {
color: #0f172a;
}
body.b612--lab .lab-try__step-label {
flex: 1;
}
body.b612--lab .lab-try__step-time {
font-size: 0.72rem;
color: #94a3b8;
letter-spacing: 0.05em;
}
/* 擬似コードストリーミング */
body.b612--lab .lab-try__code {
margin-top: 10px;
background: #0f172a;
color: #cbd5e1;
border-radius: 8px;
padding: 12px 14px;
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
line-height: 1.7;
max-height: 120px;
overflow: hidden;
position: relative;
border: 1px solid #1e293b;
}
body.b612--lab .lab-try__code::before {
content: "▸ generating...";
display: block;
color: #06b6d4;
font-weight: 700;
margin-bottom: 6px;
letter-spacing: 0.08em;
}
body.b612--lab .lab-try__code::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 32px;
background: linear-gradient(180deg, transparent, #0f172a);
pointer-events: none;
}
body.b612--lab .lab-try__code-line {
white-space: pre;
overflow: hidden;
animation: labTryCodeIn 0.2s ease-out both;
}
@keyframes labTryCodeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
body.b612--lab .lab-try__code-kw { color: #f472b6; }
body.b612--lab .lab-try__code-str { color: #fcd34d; }
body.b612--lab .lab-try__code-fn { color: #60a5fa; }
body.b612--lab .lab-try__code-com { color: #64748b; font-style: italic; }
body.b612--lab .lab-try__code-cur::after {
content: "▍";
color: #06b6d4;
animation: labTryBlink 0.9s steps(2) infinite;
}
@keyframes labTryBlink {
50% { opacity: 0; }
}
/* プログレスバー */
body.b612--lab .lab-try__progress {
height: 4px;
background: rgba(15, 23, 42, 0.08);
border-radius: 999px;
margin-top: 10px;
overflow: hidden;
position: relative;
}
body.b612--lab .lab-try__progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #06b6d4 0%, #67e8f9 100%);
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
body.b612--lab .lab-try__progress-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.5) 50%,
transparent 100%);
animation: labTryShine 1.4s infinite;
}
@keyframes labTryShine {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
body.b612--lab .lab-try__progress-meta {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
color: #64748b;
}
/* 完成バナー */
body.b612--lab .lab-try__done-banner {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.05) 100%);
border: 1px solid rgba(6, 182, 212, 0.3);
border-radius: 8px;
color: #0e7490;
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 0.92rem;
animation: labTryDoneIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.b612--lab .lab-try__done-banner svg {
flex-shrink: 0;
color: #06b6d4;
}
@keyframes labTryDoneIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
/* セレクト無効時 */
body.b612--lab .lab-try__select:disabled {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.7;
}
/* ===========================================================
CONTACT セクション — 派手な舞台装置（contact-stage）
=========================================================== */
body.b612--lab .lab-section.lab-section--contact-stage {
position: relative;
overflow: hidden;
padding-top: 90px;
padding-bottom: 110px;
/* グラデーション地 */
background:
radial-gradient(circle at 75% 55%, rgba(6, 182, 212, 0.18) 0%, transparent 55%),
radial-gradient(circle at 25% 110%, rgba(6, 182, 212, 0.10) 0%, transparent 50%),
linear-gradient(180deg, #060c14 0%, #07131b 50%, #050b13 100%) !important;
}
/* 上下のシアンライン */
body.b612--lab .lab-section.lab-section--contact-stage::before,
body.b612--lab .lab-section.lab-section--contact-stage::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5) 50%, transparent);
z-index: 1;
}
body.b612--lab .lab-section.lab-section--contact-stage::before { top: 0; }
body.b612--lab .lab-section.lab-section--contact-stage::after { bottom: 0; }
/* 背景演出レイヤー */
body.b612--lab .lab-contact-stage-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* 巨大な同心円（右半分、ボタンの背面） */
body.b612--lab .lab-contact-stage-bg__orbit {
position: absolute;
top: 50%;
right: -150px;
transform: translateY(-50%);
width: 1100px;
height: 1100px;
animation: labContactOrbitRot 60s linear infinite;
opacity: 0.95;
}
@keyframes labContactOrbitRot {
to { transform: translateY(-50%) rotate(360deg); }
}
@media (max-width: 900px) {
body.b612--lab .lab-contact-stage-bg__orbit {
right: -300px;
width: 800px;
height: 800px;
opacity: 0.5;
}
}
/* ターゲットレチクル（左下） */
body.b612--lab .lab-contact-stage-bg__reticle {
position: absolute;
left: 8%;
bottom: 12%;
width: 160px;
height: 160px;
animation: labContactReticlePulse 3s ease-in-out infinite;
}
@keyframes labContactReticlePulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.08); }
}
@media (max-width: 900px) {
body.b612--lab .lab-contact-stage-bg__reticle {
width: 110px;
height: 110px;
left: 4%;
bottom: 6%;
}
}
/* ブループリント crosshair（右上） */
body.b612--lab .lab-contact-stage-bg__cross {
position: absolute;
top: 14%;
right: 6%;
width: 70px;
height: 70px;
animation: labContactCrossSpin 18s linear infinite;
opacity: 0.6;
}
@keyframes labContactCrossSpin {
to { transform: rotate(360deg); }
}
/* スパークドット（散らばる星） */
body.b612--lab .lab-contact-stage-bg__sparks {
position: absolute;
inset: 0;
}
body.b612--lab .lab-contact-stage-bg__sparks span {
position: absolute;
left: var(--x);
top: var(--y);
width: 3px;
height: 3px;
background: #06b6d4;
border-radius: 50%;
box-shadow: 0 0 8px rgba(6, 182, 212, 0.8);
animation: labContactSparkBlink 2.8s ease-in-out infinite;
animation-delay: var(--d);
}
@keyframes labContactSparkBlink {
0%, 100% { opacity: 0.2; transform: scale(0.7); }
50% { opacity: 1; transform: scale(1.4); }
}
/* 水平スキャンライン（光が上下に走る） */
body.b612--lab .lab-contact-stage-bg__scanline {
position: absolute;
left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5) 30%, rgba(103, 232, 249, 0.7) 50%, rgba(6, 182, 212, 0.5) 70%, transparent);
box-shadow: 0 0 24px rgba(6, 182, 212, 0.4);
opacity: 0.6;
animation: labContactScan 8s linear infinite;
}
@keyframes labContactScan {
0% { top: -2px; }
100% { top: 100%; }
}
/* TRANSMIT バッジ */
body.b612--lab .lab-contact-stage__badge {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
margin: -8px 0 28px;
background: rgba(6, 182, 212, 0.08);
border: 1px solid rgba(6, 182, 212, 0.4);
border-radius: 999px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.74rem;
letter-spacing: 0.18em;
color: #06b6d4;
box-shadow:
0 0 32px rgba(6, 182, 212, 0.25),
inset 0 0 12px rgba(6, 182, 212, 0.06);
}
body.b612--lab .lab-contact-stage__badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #06b6d4;
box-shadow: 0 0 12px #06b6d4;
animation: labContactBadgeBlink 1.2s ease-in-out infinite;
}
@keyframes labContactBadgeBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
body.b612--lab .lab-contact-stage__badge-text {
font-weight: 700;
}
body.b612--lab .lab-contact-stage__badge-code {
color: rgba(103, 232, 249, 0.6);
font-size: 0.68rem;
letter-spacing: 0.15em;
}
@media (max-width: 540px) {
body.b612--lab .lab-contact-stage__badge-code { display: none; }
}
/* container を最前面に */
body.b612--lab .lab-section.lab-section--contact-stage > .lab-container {
position: relative;
z-index: 2;
}
/* タイトルとボタンを強化 */
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__title em {
position: relative;
display: inline-block;
}
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__title em::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 8px;
background: linear-gradient(90deg, rgba(6, 182, 212, 0.35), rgba(6, 182, 212, 0));
z-index: -1;
filter: blur(4px);
}
/* メール CTA に強いグロー */
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__btn--mail {
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.4),
0 12px 40px -8px rgba(6, 182, 212, 0.6),
0 0 60px -10px rgba(6, 182, 212, 0.5);
position: relative;
overflow: hidden;
}
/* CTA に「光が右へ走る」シャイン */
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__btn--mail::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 60%;
height: 100%;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
animation: labContactCtaShine 3.5s ease-in-out infinite;
}
@keyframes labContactCtaShine {
0% { left: -60%; }
60% { left: 120%; }
100% { left: 120%; }
}
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__btn--mail:hover {
transform: translateY(-2px) scale(1.01);
}
/* トラストアイテムにバッジ風枠 */
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__trust-item {
border: 1px solid rgba(6, 182, 212, 0.2);
background: rgba(6, 182, 212, 0.04);
border-radius: 8px;
padding: 8px 12px;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__trust-item:hover {
background: rgba(6, 182, 212, 0.1);
border-color: rgba(6, 182, 212, 0.5);
transform: translateY(-2px);
}
/* 紹介バナーを強調 */
body.b612--lab .lab-section.lab-section--contact-stage .lab-referral-banner {
background: rgba(6, 182, 212, 0.06);
border-color: rgba(6, 182, 212, 0.35);
box-shadow:
0 8px 32px -8px rgba(6, 182, 212, 0.3),
inset 0 0 20px rgba(6, 182, 212, 0.04);
}
body.b612--lab .lab-section.lab-section--contact-stage .lab-referral-banner:hover {
background: rgba(6, 182, 212, 0.12);
border-color: rgba(6, 182, 212, 0.6);
}
/* reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce) {
body.b612--lab .lab-contact-stage-bg__orbit,
body.b612--lab .lab-contact-stage-bg__cross,
body.b612--lab .lab-contact-stage-bg__scanline,
body.b612--lab .lab-contact-stage-bg__sparks span,
body.b612--lab .lab-contact-stage-bg__reticle,
body.b612--lab .lab-contact-stage__badge-dot,
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__btn--mail::after {
animation: none !important;
}
}
/* ===========================================================
VOICE / CASE STUDY セクション（OKURUN）
=========================================================== */
body.b612--lab .lab-section.lab-section--voice {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 20% 30%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
radial-gradient(circle at 85% 80%, rgba(251, 191, 36, 0.06) 0%, transparent 55%),
var(--paper-bg, #060c14) !important;
}
/* 背景：浮遊する封筒 */
body.b612--lab .lab-voice-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
body.b612--lab .lab-voice-bg__envelope {
position: absolute;
font-size: 28px;
color: rgba(6, 182, 212, 0.18);
animation: labVoiceEnvFloat 14s ease-in-out infinite;
user-select: none;
}
body.b612--lab .lab-voice-bg__envelope--1 { top: 12%; left: 8%; animation-delay: 0s; font-size: 22px; }
body.b612--lab .lab-voice-bg__envelope--2 { top: 68%; left: 14%; animation-delay: 2s; font-size: 30px; }
body.b612--lab .lab-voice-bg__envelope--3 { top: 22%; right: 12%; animation-delay: 4s; font-size: 26px; }
body.b612--lab .lab-voice-bg__envelope--4 { top: 78%; right: 18%; animation-delay: 6s; font-size: 20px; }
body.b612--lab .lab-voice-bg__envelope--5 { top: 44%; right: 6%; animation-delay: 1.5s; font-size: 24px; opacity: 0.6; }
@keyframes labVoiceEnvFloat {
0%, 100% { transform: translate(0, 0) rotate(-8deg); }
50% { transform: translate(20px, -30px) rotate(12deg); }
}
body.b612--lab .lab-section.lab-section--voice > .lab-container {
position: relative;
z-index: 1;
}
/* タイトルの em は強調色 */
body.b612--lab .lab-section.lab-section--voice .lab-flow__title em {
color: var(--paper-accent);
font-style: normal;
background: linear-gradient(180deg, transparent 70%, rgba(6, 182, 212, 0.25) 70%);
padding: 0 6px;
}
/* ===========================================================
ボイスカード本体
=========================================================== */
body.b612--lab .lab-voice-card {
position: relative;
max-width: 1100px;
margin: 24px auto 0;
background: linear-gradient(180deg, #fefdfb 0%, #f8f5ee 100%);
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 30px 80px -20px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(6, 182, 212, 0.15);
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
body.b612--lab .lab-voice-card {
grid-template-columns: 320px 1fr;
}
}
/* 「角」の罫線マーク（製図感） */
body.b612--lab .lab-voice-card::before,
body.b612--lab .lab-voice-card::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border: 2px solid var(--paper-accent);
pointer-events: none;
}
body.b612--lab .lab-voice-card::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
body.b612--lab .lab-voice-card::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
/* ===========================================================
左：ヤギビジュアル
=========================================================== */
body.b612--lab .lab-voice-card__visual {
position: relative;
padding: 36px 24px 28px;
background:
radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.16) 0%, transparent 60%),
linear-gradient(180deg, #f0fbfd 0%, #e6f7fa 60%, #d9f0f4 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 18px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
@media (min-width: 900px) {
body.b612--lab .lab-voice-card__visual {
border-bottom: none;
border-right: 1px dashed rgba(15, 23, 42, 0.12);
padding-top: 56px;
}
}
/* CASE バッジ */
body.b612--lab .lab-voice-card__badge {
position: absolute;
top: 16px;
left: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #0f172a;
color: #ffffff;
border-radius: 999px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.68rem;
letter-spacing: 0.18em;
font-weight: 700;
box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.45);
}
body.b612--lab .lab-voice-card__badge-num { color: var(--paper-accent); }
body.b612--lab .lab-voice-card__badge-name { color: #fcd34d; letter-spacing: 0.1em; }
body.b612--lab .lab-voice-card__badge-status {
color: #4ade80;
font-size: 0.62rem;
margin-left: 2px;
letter-spacing: 0.12em;
animation: labVoiceLive 1.6s ease-in-out infinite;
}
@keyframes labVoiceLive {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ヤギ画像ラッパー */
body.b612--lab .lab-voice-card__goat-wrap {
position: relative;
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
body.b612--lab .lab-voice-card__goat-glow {
position: absolute;
inset: 12% 12%;
background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, transparent 70%);
filter: blur(10px);
animation: labVoiceGoatGlow 3s ease-in-out infinite;
z-index: 0;
}
@keyframes labVoiceGoatGlow {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.12); opacity: 1; }
}
body.b612--lab .lab-voice-card__goat-img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
animation: labVoiceGoatBob 3.6s ease-in-out infinite;
transform-origin: 50% 95%;
filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.22));
}
@keyframes labVoiceGoatBob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(-1deg); }
}
/* 浮遊する封筒 */
body.b612--lab .lab-voice-card__goat-envelope {
position: absolute;
font-size: 22px;
color: rgba(6, 182, 212, 0.55);
filter: drop-shadow(0 2px 4px rgba(6, 182, 212, 0.3));
z-index: 2;
pointer-events: none;
animation: labVoiceEnvOrbit 5s ease-in-out infinite;
}
body.b612--lab .lab-voice-card__goat-envelope--1 { top: 14%; right: 4%; animation-delay: 0s; }
body.b612--lab .lab-voice-card__goat-envelope--2 { bottom: 22%; left: 0%; animation-delay: 1.4s; font-size: 18px; }
body.b612--lab .lab-voice-card__goat-envelope--3 { top: 40%; left: 2%; animation-delay: 2.8s; font-size: 16px; opacity: 0.6; }
@keyframes labVoiceEnvOrbit {
0%, 100% { transform: translate(0, 0) rotate(-8deg); }
50% { transform: translate(8px, -10px) rotate(12deg); }
}
/* KPI 3 連 */
body.b612--lab .lab-voice-card__kpi {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
max-width: 260px;
}
body.b612--lab .lab-voice-card__kpi-item {
background: #ffffff;
border: 1px solid rgba(6, 182, 212, 0.25);
border-radius: 10px;
padding: 10px 6px;
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: 0 4px 12px -6px rgba(6, 182, 212, 0.4);
}
body.b612--lab .lab-voice-card__kpi-num {
font-family: "Space Grotesk", "Inter", sans-serif !important;
font-size: 1.3rem;
font-weight: 800;
color: var(--paper-accent);
line-height: 1.1;
letter-spacing: -0.02em;
}
body.b612--lab .lab-voice-card__kpi-unit {
font-size: 0.72rem;
font-weight: 600;
color: #0e7490;
margin-left: 1px;
}
body.b612--lab .lab-voice-card__kpi-label {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.66rem;
font-weight: 600;
color: #475569;
letter-spacing: 0.04em;
}
/* ===========================================================
右：ストーリー
=========================================================== */
body.b612--lab .lab-voice-card__story {
padding: 32px 28px 36px;
color: #0f172a;
display: flex;
flex-direction: column;
gap: 18px;
}
@media (min-width: 900px) {
body.b612--lab .lab-voice-card__story {
padding: 40px 40px 44px;
}
}
/* クライアント表示 */
body.b612--lab .lab-voice-card__client {
display: flex;
flex-direction: column;
gap: 6px;
}
body.b612--lab .lab-voice-card__client-label {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.66rem;
letter-spacing: 0.22em;
color: var(--paper-accent);
font-weight: 700;
}
body.b612--lab .lab-voice-card__client-name {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 1rem;
color: #0f172a;
font-weight: 700;
}
body.b612--lab .lab-voice-card__client-name a {
color: #0f172a;
text-decoration: none;
border-bottom: 2px solid var(--paper-accent);
padding-bottom: 1px;
transition: color 0.2s;
}
body.b612--lab .lab-voice-card__client-name a:hover {
color: var(--paper-accent);
}
body.b612--lab .lab-voice-card__client-tagline {
font-size: 0.82rem;
font-weight: 500;
color: #64748b;
margin-left: 4px;
}
/* タグチップ */
body.b612--lab .lab-voice-card__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
body.b612--lab .lab-voice-card__tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: rgba(6, 182, 212, 0.08);
color: #0e7490;
border: 1px solid rgba(6, 182, 212, 0.2);
border-radius: 999px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.05em;
}
/* ヘッドライン */
body.b612--lab .lab-voice-card__headline {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.5;
color: #0f172a;
margin: 0;
}
@media (min-width: 900px) {
body.b612--lab .lab-voice-card__headline {
font-size: 1.85rem;
}
}
body.b612--lab .lab-voice-card__headline em {
font-style: normal;
color: var(--paper-accent);
font-weight: 800;
}
body.b612--lab .lab-voice-card__strike {
color: #94a3b8 !important;
font-weight: 700 !important;
text-decoration: line-through;
text-decoration-thickness: 3px;
text-decoration-color: #ef4444;
}
/* 比較ボックス */
body.b612--lab .lab-voice-card__compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 12px;
padding: 18px;
background: #ffffff;
border: 1px dashed rgba(15, 23, 42, 0.15);
border-radius: 12px;
}
body.b612--lab .lab-voice-card__compare-col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px 6px;
border-radius: 8px;
}
body.b612--lab .lab-voice-card__compare-col--before {
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.2);
}
body.b612--lab .lab-voice-card__compare-col--after {
background: rgba(6, 182, 212, 0.08);
border: 1px solid rgba(6, 182, 212, 0.35);
box-shadow: 0 6px 18px -8px rgba(6, 182, 212, 0.5);
}
body.b612--lab .lab-voice-card__compare-label {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.66rem;
letter-spacing: 0.15em;
color: #64748b;
font-weight: 700;
margin-bottom: 8px;
}
body.b612--lab .lab-voice-card__compare-col--before .lab-voice-card__compare-label { color: #ef4444; }
body.b612--lab .lab-voice-card__compare-col--after .lab-voice-card__compare-label { color: #0e7490; }
body.b612--lab .lab-voice-card__compare-price {
font-family: "Space Grotesk", "Inter", sans-serif !important;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.1;
color: #0f172a;
}
body.b612--lab .lab-voice-card__compare-col--before .lab-voice-card__compare-price {
color: #94a3b8;
text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: #ef4444;
}
body.b612--lab .lab-voice-card__compare-col--after .lab-voice-card__compare-price {
color: var(--paper-accent);
}
@media (min-width: 600px) {
body.b612--lab .lab-voice-card__compare-price { font-size: 1.85rem; }
}
body.b612--lab .lab-voice-card__compare-price-unit {
font-size: 0.78rem;
font-weight: 500;
color: #64748b;
margin-left: 2px;
}
body.b612--lab .lab-voice-card__compare-time {
margin-top: 6px;
font-size: 0.78rem;
color: #475569;
}
body.b612--lab .lab-voice-card__compare-time b {
color: var(--paper-accent);
}
body.b612--lab .lab-voice-card__compare-tag {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(15, 23, 42, 0.1);
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.7rem;
color: #94a3b8;
line-height: 1.5;
font-weight: 500;
}
body.b612--lab .lab-voice-card__compare-col--after .lab-voice-card__compare-tag {
color: #0e7490;
border-color: rgba(6, 182, 212, 0.2);
font-weight: 600;
}
/* ===========================================================
タイムライン
=========================================================== */
body.b612--lab .lab-voice-card__timeline {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
padding: 18px 20px;
}
body.b612--lab .lab-voice-card__timeline-label {
display: block;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.66rem;
letter-spacing: 0.18em;
color: var(--paper-accent);
font-weight: 700;
margin-bottom: 12px;
}
body.b612--lab .lab-voice-card__timeline-list {
position: relative;
list-style: none;
padding: 0 0 0 22px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
body.b612--lab .lab-voice-card__timeline-list::before {
content: "";
position: absolute;
left: 6px;
top: 6px;
bottom: 6px;
width: 2px;
background: linear-gradient(180deg,
rgba(6, 182, 212, 0.15) 0%,
rgba(6, 182, 212, 0.45) 50%,
var(--paper-accent) 100%);
}
body.b612--lab .lab-voice-card__timeline-list li {
position: relative;
display: flex;
align-items: baseline;
gap: 12px;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.85rem;
color: #334155;
}
body.b612--lab .lab-voice-card__timeline-list li::before {
content: "";
position: absolute;
left: -19px;
top: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffffff;
border: 2px solid var(--paper-accent);
}
body.b612--lab .lab-voice-card__timeline-list li.is-done::before {
background: var(--paper-accent);
box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.18);
}
body.b612--lab .lab-voice-card__timeline-day {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.72rem;
font-weight: 700;
color: var(--paper-accent);
letter-spacing: 0.05em;
flex-shrink: 0;
width: 56px;
}
body.b612--lab .lab-voice-card__timeline-event b {
color: #0f172a;
font-weight: 700;
}
body.b612--lab .lab-voice-card__compare-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--paper-accent);
animation: labVoiceArrow 1.4s ease-in-out infinite;
}
@keyframes labVoiceArrow {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
@media (max-width: 540px) {
body.b612--lab .lab-voice-card__compare {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
}
body.b612--lab .lab-voice-card__compare-arrow {
animation: none;
transform: rotate(90deg);
}
}
/* 引用ブロック — クリーム紙メモ風（AI 感のあるシアン左バー廃止） */
body.b612--lab .lab-voice-card__quote {
position: relative;
background:
/* 罫線（薄いノート風） */
repeating-linear-gradient(180deg,
transparent 0,
transparent 31px,
rgba(15, 23, 42, 0.05) 31px,
rgba(15, 23, 42, 0.05) 32px),
linear-gradient(180deg, #fefcf6 0%, #fbf7ec 100%);
border: 1px solid rgba(180, 150, 100, 0.22);
padding: 36px 28px 24px;
border-radius: 4px;
margin: 12px 0 0;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 12px 28px -16px rgba(15, 23, 42, 0.35);
transform: rotate(-0.4deg);
}
/* 紙のディスケや穴は不要、ただし右上にホッチキス風ピン */
body.b612--lab .lab-voice-card__quote::before {
content: "";
position: absolute;
top: 14px;
right: 18px;
width: 14px;
height: 14px;
border-radius: 50%;
background:
radial-gradient(circle at 40% 30%, #fde68a 0%, #d97706 70%, #92400e 100%);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}
/* マスキングテープ風デコ */
body.b612--lab .lab-voice-card__quote-tape {
position: absolute;
top: -10px;
width: 80px;
height: 22px;
background:
repeating-linear-gradient(135deg,
rgba(6, 182, 212, 0.28) 0,
rgba(6, 182, 212, 0.28) 4px,
rgba(6, 182, 212, 0.42) 4px,
rgba(6, 182, 212, 0.42) 8px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
pointer-events: none;
}
body.b612--lab .lab-voice-card__quote-tape--l {
left: 14%;
transform: rotate(-6deg);
}
body.b612--lab .lab-voice-card__quote-tape--r {
right: 14%;
transform: rotate(5deg);
}
/* ヒアリング録ヘッダ */
body.b612--lab .lab-voice-card__quote-meta-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(180, 150, 100, 0.4);
gap: 12px;
flex-wrap: wrap;
}
body.b612--lab .lab-voice-card__quote-kind {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.78rem;
font-weight: 700;
color: #92400e;
letter-spacing: 0.04em;
}
body.b612--lab .lab-voice-card__quote-date {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.7rem;
color: #a16207;
letter-spacing: 0.06em;
}
body.b612--lab .lab-voice-card__quote-lead {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.75 !important;
color: #0f172a !important;
margin: 0 0 16px !important;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(180, 150, 100, 0.4);
}
body.b612--lab .lab-voice-card__quote-lead b {
color: #b45309 !important;
}
body.b612--lab .lab-voice-card__quote p {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.92rem;
line-height: 2;
color: #3f3b32;
margin: 0 0 16px;
}
body.b612--lab .lab-voice-card__quote p b {
color: #b45309;
font-weight: 700;
background: linear-gradient(180deg, transparent 65%, rgba(251, 191, 36, 0.45) 65%);
padding: 0 2px;
}
body.b612--lab .lab-voice-card__quote-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px dashed rgba(180, 150, 100, 0.4);
flex-wrap: wrap;
}
body.b612--lab .lab-voice-card__quote-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: #6366f1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.5);
flex-shrink: 0;
}
body.b612--lab .lab-voice-card__quote-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.b612--lab .lab-voice-card__quote-meta {
display: flex;
flex-direction: column;
}
body.b612--lab .lab-voice-card__quote-name {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.9rem;
font-weight: 700;
color: #3f3b32;
}
body.b612--lab .lab-voice-card__quote-role {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.7rem;
color: #92400e;
letter-spacing: 0.05em;
}
body.b612--lab .lab-voice-card__quote-site {
margin-left: auto;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.72rem;
color: #b45309;
font-weight: 700;
text-decoration: none;
padding: 4px 10px;
border: 1px solid rgba(180, 150, 100, 0.5);
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
body.b612--lab .lab-voice-card__quote-site:hover {
background: #b45309;
border-color: #b45309;
color: #ffffff;
}
/* details / 折りたたみ */
body.b612--lab .lab-voice-card__details {
background: #fffbeb;
border: 1px dashed rgba(217, 119, 6, 0.35);
border-radius: 12px;
padding: 4px 0;
}
body.b612--lab .lab-voice-card__details summary {
cursor: pointer;
padding: 14px 20px;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.9rem;
font-weight: 700;
color: #92400e;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
}
body.b612--lab .lab-voice-card__details summary::-webkit-details-marker { display: none; }
body.b612--lab .lab-voice-card__details summary::before {
content: "▶";
font-size: 0.7rem;
color: #d97706;
transition: transform 0.2s;
}
body.b612--lab .lab-voice-card__details[open] summary::before {
transform: rotate(90deg);
}
body.b612--lab .lab-voice-card__details summary b {
color: #d97706;
font-weight: 800;
}
body.b612--lab .lab-voice-card__details-body {
padding: 0 20px 18px 38px;
}
body.b612--lab .lab-voice-card__details-body ul {
margin: 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
body.b612--lab .lab-voice-card__details-body li {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.86rem;
line-height: 1.75;
color: #475569;
}
body.b612--lab .lab-voice-card__details-body li b {
color: #0f172a;
font-weight: 700;
}
/* アクション行 */
body.b612--lab .lab-voice-card__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* リンクボタン */
body.b612--lab .lab-voice-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0f172a;
color: #ffffff !important;
padding: 12px 22px;
border-radius: 999px;
font-family: "Space Grotesk", "Inter", sans-serif !important;
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.05em;
text-decoration: none;
transition: background 0.25s, transform 0.25s, box-shadow 0.25s, color 0.25s;
box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.4);
}
body.b612--lab .lab-voice-card__link:hover {
background: var(--paper-accent);
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px -8px rgba(6, 182, 212, 0.55);
}
body.b612--lab .lab-voice-card__link--ghost {
background: transparent;
color: #0f172a !important;
border: 1.5px solid #0f172a;
box-shadow: none;
}
body.b612--lab .lab-voice-card__link--ghost:hover {
background: var(--paper-accent);
border-color: var(--paper-accent);
color: #ffffff !important;
}
body.b612--lab .lab-voice-card__link svg {
transition: transform 0.25s;
}
body.b612--lab .lab-voice-card__link:hover svg {
transform: translate(2px, -2px);
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
body.b612--lab .lab-voice-card__goat-img,
body.b612--lab .lab-voice-card__goat-glow,
body.b612--lab .lab-voice-card__goat-envelope,
body.b612--lab .lab-voice-card__badge-status,
body.b612--lab .lab-voice-bg__envelope,
body.b612--lab .lab-voice-card__compare-arrow {
animation: none !important;
}
}
/* ===========================================================
ドット絵チビキャラ — シンプル丸枠 + たまごっち風うさぎ
=========================================================== */
body.b612--lab .lab-mascot {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9000;
width: 96px;
height: 110px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
opacity: 0;
pointer-events: none;
transform: translateY(24px) scale(0.7);
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.b612--lab .lab-mascot.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* ===========================================================
シンプル円形 LCD 画面（枠＝これだけ）
=========================================================== */
body.b612--lab .lab-mascot__screen {
position: relative;
width: 88px;
height: 88px;
border-radius: 50%;
/* 初代たまごっち LCD らしいくすんだ緑 */
background: #a3c9a0;
/* 外側のシアンリング + 内側の影でレンズ感 */
box-shadow:
0 0 0 3px #0f172a,
0 0 0 5px #06b6d4,
0 0 18px 4px rgba(6, 182, 212, 0.55),
0 8px 20px -4px rgba(0, 0, 0, 0.45),
inset 0 4px 10px rgba(0, 0, 0, 0.35),
inset 0 -2px 6px rgba(255, 255, 255, 0.2);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
animation: labMascotDeviceBob 1.8s ease-in-out infinite;
transform-origin: 50% 100%;
}
@keyframes labMascotDeviceBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* LCD ドットマトリクス（横線で LCD 感） */
body.b612--lab .lab-mascot__lcd-grid {
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg,
transparent 0,
transparent 2px,
rgba(15, 23, 42, 0.06) 2px,
rgba(15, 23, 42, 0.06) 3px),
repeating-linear-gradient(90deg,
transparent 0,
transparent 2px,
rgba(15, 23, 42, 0.04) 2px,
rgba(15, 23, 42, 0.04) 3px);
pointer-events: none;
}
/* スキャンライン */
body.b612--lab .lab-mascot__scanline {
position: absolute;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
animation: labMascotScan 2.8s linear infinite;
pointer-events: none;
}
@keyframes labMascotScan {
0% { top: -6px; opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { top: 100%; opacity: 0; }
}
/* LCD のハイライト（左上の光沢） */
body.b612--lab .lab-mascot__lcd-shine {
position: absolute;
top: 8%;
left: 12%;
width: 38%;
height: 28%;
background: radial-gradient(ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* ===========================================================
うさぎ本体（チャンキー 12×12）
=========================================================== */
body.b612--lab .lab-mascot__char {
width: 42px;
height: 42px;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
display: block;
position: relative;
z-index: 1;
animation: labMascotBob 0.9s ease-in-out infinite;
transform-origin: 50% 100%;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}
@keyframes labMascotBob {
0%, 100% { transform: translateY(0) scaleY(1); }
50% { transform: translateY(-2px) scaleY(1.04); }
}
/* 耳ぴくぴく */
body.b612--lab .lab-mascot__ear {
transform-box: fill-box;
transform-origin: 50% 100%;
}
body.b612--lab .lab-mascot__ear--l { animation: labMascotEarL 3.2s ease-in-out infinite; }
body.b612--lab .lab-mascot__ear--r { animation: labMascotEarR 3.2s ease-in-out infinite; }
@keyframes labMascotEarL {
0%, 70%, 100% { transform: rotate(0deg); }
75% { transform: rotate(-12deg); }
82% { transform: rotate(-2deg); }
90% { transform: rotate(-8deg); }
}
@keyframes labMascotEarR {
0%, 80%, 100% { transform: rotate(0deg); }
85% { transform: rotate(12deg); }
92% { transform: rotate(2deg); }
}
/* 瞬き（rect の opacity を切替えて目の穴を一瞬塞ぐ） */
body.b612--lab .lab-mascot__eyes rect {
animation: labMascotBlink 4.5s steps(1) infinite;
}
@keyframes labMascotBlink {
0%, 92%, 100% { opacity: 0; }
94%, 98% { opacity: 1; }
}
/* ===========================================================
影（地面）
=========================================================== */
body.b612--lab .lab-mascot__shadow {
position: absolute;
bottom: 0;
left: 50%;
width: 64px;
height: 8px;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 70%);
transform: translateX(-50%);
animation: labMascotShadow 1.8s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
@keyframes labMascotShadow {
0%, 100% { transform: translateX(-50%) scaleX(1) scaleY(1); opacity: 0.55; }
50% { transform: translateX(-50%) scaleX(0.85) scaleY(0.7); opacity: 0.35; }
}
/* ===========================================================
吹き出し（hover で表示）
=========================================================== */
body.b612--lab .lab-mascot__bubble {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%) translateY(6px);
background: #ffffff;
color: #0f172a;
padding: 4px 10px;
border-radius: 8px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
box-shadow: 0 6px 18px -6px rgba(6, 182, 212, 0.6);
transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.b612--lab .lab-mascot__bubble::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 8px;
height: 8px;
background: #ffffff;
transform: translateX(-50%) rotate(45deg);
}
body.b612--lab .lab-mascot:hover .lab-mascot__bubble,
body.b612--lab .lab-mascot:focus-visible .lab-mascot__bubble {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
body.b612--lab .lab-mascot__bubble-text {
color: #06b6d4;
}
/* ===========================================================
インタラクション
=========================================================== */
/* hover：枠全体がプルプル */
body.b612--lab .lab-mascot:hover .lab-mascot__screen {
animation: labMascotDeviceShake 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes labMascotDeviceShake {
0%, 100% { transform: translateY(0) rotate(0deg); }
20% { transform: translateY(-6px) rotate(-3deg); }
40% { transform: translateY(-6px) rotate(3deg); }
60% { transform: translateY(-3px) rotate(-2deg); }
80% { transform: translateY(-1px) rotate(1deg); }
}
/* hover：うさぎはぴょん */
body.b612--lab .lab-mascot:hover .lab-mascot__char {
animation: labMascotHop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes labMascotHop {
0% { transform: translateY(0); }
40% { transform: translateY(-8px); }
60% { transform: translateY(-8px) rotate(-4deg); }
80% { transform: translateY(-2px) rotate(2deg); }
100% { transform: translateY(0) rotate(0); }
}
/* クリック中 */
body.b612--lab .lab-mascot:active .lab-mascot__screen {
transform: translateY(2px) scale(0.96);
transition: transform 0.1s;
}
/* クリック後：枠ごと飛んでいく */
body.b612--lab .lab-mascot.is-flying .lab-mascot__screen {
animation: labMascotFly 1s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
@keyframes labMascotFly {
0% { transform: translateY(0) scale(1) rotate(0deg); }
20% { transform: translateY(-40px) scale(1.05) rotate(-6deg); }
100% { transform: translateY(-800px) scale(0.3) rotate(-20deg); opacity: 0; }
}
/* フォーカスリング */
body.b612--lab .lab-mascot:focus-visible {
outline: 2px solid #06b6d4;
outline-offset: 6px;
border-radius: 50%;
}
/* ===========================================================
モバイル
=========================================================== */
@media (max-width: 540px) {
body.b612--lab .lab-mascot {
right: 16px;
bottom: 16px;
width: 78px;
height: 92px;
}
body.b612--lab .lab-mascot__screen {
width: 72px;
height: 72px;
}
body.b612--lab .lab-mascot__char {
width: 34px;
height: 34px;
}
body.b612--lab .lab-mascot__shadow {
width: 52px;
height: 6px;
}
}
/* カスタムカーソルとの整合 */
@media (hover: hover) and (pointer: fine) {
/* mascot もネイティブカーソル維持（cursor: pointer は別のボタンルールで担保） */
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
body.b612--lab .lab-mascot__screen,
body.b612--lab .lab-mascot__char,
body.b612--lab .lab-mascot__shadow,
body.b612--lab .lab-mascot__ear--l,
body.b612--lab .lab-mascot__ear--r,
body.b612--lab .lab-mascot__eyes,
body.b612--lab .lab-mascot__scanline {
animation: none !important;
}
}
/* ===========================================================
CONTACT 詳細問い合わせボタン + AI プロンプトパネル
=========================================================== */
/* 「詳しく書いて問い合わせる」ボタン */
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__btn--detailed {
background: rgba(15, 23, 42, 0.6) !important;
color: #ffffff !important;
border: 1.5px solid rgba(6, 182, 212, 0.5) !important;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 22px;
border-radius: 12px;
text-decoration: none;
transition: all 0.25s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.b612--lab .lab-section.lab-section--contact-stage .lab-contact__btn--detailed:hover {
background: rgba(6, 182, 212, 0.15) !important;
border-color: var(--paper-accent) !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px -8px rgba(6, 182, 212, 0.4);
}
body.b612--lab .lab-contact__btn-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1.3;
}
body.b612--lab .lab-contact__btn-main {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
}
body.b612--lab .lab-contact__btn-sub {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.72rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.02em;
}
body.b612--lab .lab-contact__btn--detailed:hover .lab-contact__btn-sub {
color: rgba(255, 255, 255, 0.85);
}
/* ===========================================================
AI プロンプトパネル
=========================================================== */
body.b612--lab .lab-ai-prompt-panel {
position: relative;
background:
radial-gradient(circle at 0% 0%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.4) 100%);
border: 1px solid rgba(6, 182, 212, 0.35);
border-radius: 16px;
padding: 24px 24px 22px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 18px 40px -16px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.b612--lab .lab-ai-prompt-panel__head {
margin-bottom: 16px;
}
body.b612--lab .lab-ai-prompt-panel__badge {
display: inline-block;
padding: 4px 10px;
background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
color: #ffffff;
border-radius: 999px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.2em;
margin-bottom: 12px;
box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.6);
}
body.b612--lab .lab-ai-prompt-panel__title {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
line-height: 1.55;
margin: 0 0 8px;
}
body.b612--lab .lab-ai-prompt-panel__title em {
color: var(--paper-accent);
font-style: normal;
background: linear-gradient(180deg, transparent 70%, rgba(6, 182, 212, 0.3) 70%);
padding: 0 4px;
}
body.b612--lab .lab-ai-prompt-panel__desc {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.84rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
body.b612--lab .lab-ai-prompt-panel__desc b {
color: var(--paper-accent);
font-weight: 700;
}
body.b612--lab .lab-ai-prompt-panel__nb {
display: block;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, 0.18);
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.6);
}
body.b612--lab .lab-ai-prompt-panel__nb b {
color: #fcd34d;
font-weight: 700;
}
/* プロンプトボックス */
body.b612--lab .lab-ai-prompt-panel__box {
position: relative;
background: #0a0f1a;
border: 1px solid rgba(6, 182, 212, 0.25);
border-radius: 10px;
overflow: hidden;
margin-bottom: 16px;
}
body.b612--lab .lab-ai-prompt-panel__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 8px 14px;
background: rgba(6, 182, 212, 0.08);
border-bottom: 1px solid rgba(6, 182, 212, 0.18);
}
body.b612--lab .lab-ai-prompt-panel__toolbar-label {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.05em;
}
body.b612--lab .lab-ai-prompt-panel__copy {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--paper-accent);
color: #ffffff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
body.b612--lab .lab-ai-prompt-panel__copy:hover {
background: #0e7490;
transform: translateY(-1px);
}
body.b612--lab .lab-ai-prompt-panel__copy.is-copied {
background: #16a34a;
}
body.b612--lab .lab-ai-prompt-panel__pre {
margin: 0;
padding: 16px 16px 18px;
max-height: 240px;
overflow-y: auto;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.78rem;
line-height: 1.7;
color: #cbd5e1;
white-space: pre-wrap;
word-break: break-word;
}
body.b612--lab .lab-ai-prompt-panel__pre::-webkit-scrollbar {
width: 8px;
}
body.b612--lab .lab-ai-prompt-panel__pre::-webkit-scrollbar-thumb {
background: rgba(6, 182, 212, 0.3);
border-radius: 4px;
}
/* 3 ステップ */
body.b612--lab .lab-ai-prompt-panel__steps {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
body.b612--lab .lab-ai-prompt-panel__step {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
background: rgba(6, 182, 212, 0.06);
border: 1px solid rgba(6, 182, 212, 0.2);
border-radius: 8px;
padding: 8px 10px;
}
body.b612--lab .lab-ai-prompt-panel__step-num {
width: 22px;
height: 22px;
flex-shrink: 0;
background: var(--paper-accent);
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.72rem;
font-weight: 800;
}
body.b612--lab .lab-ai-prompt-panel__step-text {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.74rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
font-weight: 500;
}
body.b612--lab .lab-ai-prompt-panel__step-arrow {
color: var(--paper-accent);
font-weight: 700;
flex-shrink: 0;
}
@media (max-width: 720px) {
body.b612--lab .lab-ai-prompt-panel__steps {
flex-direction: column;
align-items: stretch;
}
body.b612--lab .lab-ai-prompt-panel__step {
flex: 0 0 auto;
width: 100%;
}
body.b612--lab .lab-ai-prompt-panel__step-arrow {
display: block;
width: 100%;
text-align: center;
line-height: 1;
transform: rotate(90deg);
}
}
/* ===========================================================
COMPARE セクション（Claude を直接使う vs hakuto AI）
=========================================================== */
body.b612--lab .lab-section.lab-section--compare {
position: relative;
background:
radial-gradient(circle at 30% 20%, rgba(217, 119, 6, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 55%),
var(--paper-bg, #060c14) !important;
}
body.b612--lab .lab-section.lab-section--compare .lab-flow__title {
font-size: clamp(1.4rem, 3vw, 2rem);
line-height: 1.55;
}
body.b612--lab .lab-compare {
max-width: 1100px;
margin: 28px auto 0;
}
/* 列ヘッダー */
body.b612--lab .lab-compare__head {
display: grid;
grid-template-columns: 200px 1fr 1fr;
gap: 12px;
margin-bottom: 0;
align-items: stretch;
}
@media (max-width: 720px) {
/* 比較表：Claude / hakuto を1画面に左右で並べる（項目名は各行の上に全幅） */
body.b612--lab .lab-compare__head {
grid-template-columns: 1fr 1fr;
}
body.b612--lab .lab-compare__head-spacer { display: none; }
}
body.b612--lab .lab-compare__head-spacer { /* 左上の空セル */ }
body.b612--lab .lab-compare__head-col {
padding: 22px 18px;
border-radius: 14px 14px 0 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
}
body.b612--lab .lab-compare__head-col--claude {
background: linear-gradient(180deg, rgba(217, 119, 6, 0.18) 0%, rgba(217, 119, 6, 0.06) 100%);
border: 1px solid rgba(217, 119, 6, 0.4);
border-bottom: none;
}
body.b612--lab .lab-compare__head-col--hakuto {
background: linear-gradient(180deg, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0.08) 100%);
border: 1.5px solid var(--paper-accent);
border-bottom: none;
box-shadow: 0 -6px 24px -8px rgba(6, 182, 212, 0.4);
position: relative;
}
body.b612--lab .lab-compare__head-col--hakuto::before {
content: "✦ おすすめ";
position: absolute;
top: -12px;
right: 14px;
background: var(--paper-accent);
color: #050a12;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.12em;
padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 4px 14px -2px rgba(6, 182, 212, 0.6);
}
body.b612--lab .lab-compare__head-tag {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.62rem;
letter-spacing: 0.18em;
font-weight: 700;
color: var(--paper-text-low);
}
body.b612--lab .lab-compare__head-col--claude .lab-compare__head-tag { color: #fbbf24; }
body.b612--lab .lab-compare__head-col--hakuto .lab-compare__head-tag { color: #67e8f9; }
body.b612--lab .lab-compare__head-title {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: 1.05rem;
font-weight: 700;
color: var(--paper-text);
line-height: 1.4;
}
body.b612--lab .lab-compare__head-price {
font-family: "Space Grotesk", "Inter", sans-serif !important;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-top: 4px;
}
body.b612--lab .lab-compare__head-col--claude .lab-compare__head-price { color: #fbbf24; }
body.b612--lab .lab-compare__head-col--hakuto .lab-compare__head-price { color: var(--paper-accent); }
body.b612--lab .lab-compare__head-price small {
font-size: 0.78rem;
font-weight: 500;
color: var(--paper-text-mid);
margin-left: 2px;
}
/* 行 */
body.b612--lab .lab-compare__rows {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(148, 163, 184, 0.18);
border-top: none;
border-radius: 0 0 14px 14px;
overflow: hidden;
}
body.b612--lab .lab-compare__row {
display: grid;
grid-template-columns: 200px 1fr 1fr;
gap: 12px;
border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
}
body.b612--lab .lab-compare__row:last-child {
border-bottom: none;
}
@media (max-width: 720px) {
/* 比較表：項目名を行の上に全幅、その下に Claude / hakuto を左右で並べる（横スクロール無し） */
body.b612--lab .lab-compare__row {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
body.b612--lab .lab-compare__row-label {
grid-column: 1 / -1;
padding: 12px 16px 8px;
background: rgba(15, 23, 42, 0.42);
border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
}
body.b612--lab .lab-compare__row-cell {
padding: 14px 14px;
font-size: 0.8rem;
}
}
body.b612--lab .lab-compare__row-label {
padding: 18px 18px 18px 22px;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.85rem;
font-weight: 700;
color: var(--paper-text);
display: flex;
align-items: center;
background: rgba(15, 23, 42, 0.3);
}
body.b612--lab .lab-compare__row-cell {
padding: 18px 18px;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.84rem;
line-height: 1.7;
color: var(--paper-text-mid);
display: flex;
gap: 10px;
align-items: flex-start;
}
body.b612--lab .lab-compare__row-cell b {
color: var(--paper-text);
font-weight: 700;
}
body.b612--lab .lab-compare__row-cell--claude {
background: rgba(217, 119, 6, 0.04);
}
body.b612--lab .lab-compare__row-cell--hakuto {
background: rgba(6, 182, 212, 0.06);
border-left: 1px solid rgba(6, 182, 212, 0.18);
border-right: 1px solid rgba(6, 182, 212, 0.18);
}
body.b612--lab .lab-compare__row-cell--hakuto b {
color: #67e8f9;
}
body.b612--lab .lab-compare__x {
flex-shrink: 0;
font-size: 1.1rem;
font-weight: 800;
color: #ef4444;
line-height: 1.4;
}
body.b612--lab .lab-compare__o {
flex-shrink: 0;
font-size: 1.1rem;
font-weight: 800;
color: #4ade80;
line-height: 1.4;
}
body.b612--lab .lab-compare__triangle {
flex-shrink: 0;
font-size: 1.1rem;
font-weight: 800;
color: #fbbf24;
line-height: 1.4;
}
/* 向いている人セクション */
body.b612--lab .lab-compare__audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 28px auto 0;
max-width: 1100px;
}
@media (max-width: 720px) {
body.b612--lab .lab-compare__audience {
grid-template-columns: 1fr;
}
}
body.b612--lab .lab-compare__audience-col {
padding: 22px 24px 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
}
body.b612--lab .lab-compare__audience-col:nth-child(2) {
background: linear-gradient(180deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.03) 100%);
border-color: rgba(6, 182, 212, 0.4);
box-shadow: 0 12px 32px -16px rgba(6, 182, 212, 0.4);
}
body.b612--lab .lab-compare__audience-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
body.b612--lab .lab-compare__audience-tag {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.18em;
padding: 3px 9px;
border-radius: 999px;
}
body.b612--lab .lab-compare__audience-tag--claude {
color: #fbbf24;
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.4);
}
body.b612--lab .lab-compare__audience-tag--hakuto {
color: #050a12;
background: var(--paper-accent);
}
body.b612--lab .lab-compare__audience-col h4 {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: 1.05rem;
font-weight: 700;
color: var(--paper-text);
margin: 0;
}
body.b612--lab .lab-compare__audience-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
body.b612--lab .lab-compare__audience-col li {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.88rem;
line-height: 1.7;
color: var(--paper-text-mid);
}
body.b612--lab .lab-compare__audience-col li b {
color: #67e8f9;
font-weight: 700;
}
/* 最終行（hakuto 側に下角丸） */
body.b612--lab .lab-compare__row:last-child .lab-compare__row-cell--hakuto {
border-bottom: 1.5px solid var(--paper-accent);
border-radius: 0 0 13px 0;
}
body.b612--lab .lab-compare__row:last-child .lab-compare__row-cell--claude {
border-bottom: 1px solid rgba(217, 119, 6, 0.3);
border-radius: 0 0 0 0;
}
/* まとめ */
body.b612--lab .lab-compare__summary {
margin: 28px auto 0;
max-width: 720px;
display: flex;
align-items: center;
gap: 16px;
padding: 20px 26px;
background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.04) 100%);
border: 1px solid rgba(6, 182, 212, 0.4);
border-radius: 14px;
box-shadow: 0 12px 32px -16px rgba(6, 182, 212, 0.5);
}
body.b612--lab .lab-compare__summary-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
color: var(--paper-accent);
}
body.b612--lab .lab-compare__summary-text {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.92rem;
line-height: 1.7;
color: var(--paper-text);
}
body.b612--lab .lab-compare__summary-text b {
color: #67e8f9;
font-weight: 700;
font-size: 1.05em;
}
/* ===========================================================
CAPABILITIES：対応範囲セクション
=========================================================== */
body.b612--lab .lab-section--capabilities {
background:
radial-gradient(ellipse at 18% 0%, rgba(6, 182, 212, 0.06) 0%, transparent 55%),
radial-gradient(ellipse at 82% 100%, rgba(245, 158, 11, 0.04) 0%, transparent 55%),
var(--paper-bg);
position: relative;
}
body.b612--lab .lab-section--capabilities .lab-flow__title em {
color: var(--paper-accent);
font-style: normal;
}
body.b612--lab .lab-capabilities {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 1024px) {
body.b612--lab .lab-capabilities {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
/* CAPABILITIES：縦積みをやめ、横スワイプカルーセルに（1枚ずつ・左右ボタンでも操作可） */
body.b612--lab .lab-capabilities {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 14px;
padding: 4px 2px 16px;
scrollbar-width: none;
}
body.b612--lab .lab-capabilities::-webkit-scrollbar { display: none; }
body.b612--lab .lab-cap-card {
flex: 0 0 84%;
scroll-snap-align: center;
min-width: 0;
}
}
body.b612--lab .lab-cap-card {
position: relative;
background: #ffffff;
border: 1px solid var(--paper-border);
border-radius: 16px;
padding: 24px 22px 22px;
box-shadow:
0 1px 0 rgba(15, 23, 42, 0.04),
0 8px 24px -18px rgba(15, 23, 42, 0.18);
transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.32s ease;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
/* 白カード上の色を強制再定義（ダークテーマの --paper-text=#e8eef7 が悪さするため）*/
--paper-text: #0f172a;
--paper-text-mid: #475569;
--paper-text-low: #64748b;
color: #0f172a;
}
body.b612--lab .lab-cap-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.03) 100%);
opacity: 0;
transition: opacity 0.32s ease;
pointer-events: none;
}
body.b612--lab .lab-cap-card:hover {
transform: translateY(-3px);
border-color: rgba(6, 182, 212, 0.4);
box-shadow:
0 1px 0 rgba(15, 23, 42, 0.04),
0 24px 48px -24px rgba(15, 23, 42, 0.22);
}
body.b612--lab .lab-cap-card:hover::before {
opacity: 1;
}
/* 強調カード（ゲーム） */
body.b612--lab .lab-cap-card--emphasis {
border: 1.5px solid var(--paper-accent);
background:
linear-gradient(180deg, rgba(6, 182, 212, 0.05) 0%, #ffffff 60%);
box-shadow:
0 1px 0 rgba(15, 23, 42, 0.04),
0 12px 32px -16px rgba(6, 182, 212, 0.32);
}
body.b612--lab .lab-cap-card--emphasis:hover {
box-shadow:
0 1px 0 rgba(15, 23, 42, 0.04),
0 28px 56px -24px rgba(6, 182, 212, 0.45);
}
body.b612--lab .lab-cap-card__ribbon {
position: absolute;
top: 12px;
right: -32px;
transform: rotate(35deg);
background: var(--paper-accent);
color: #ffffff;
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.18em;
padding: 3px 36px;
text-align: center;
box-shadow: 0 6px 14px -6px rgba(6, 182, 212, 0.6);
pointer-events: none;
z-index: 1;
}
body.b612--lab .lab-cap-card__head {
display: flex;
flex-direction: column;
gap: 6px;
}
body.b612--lab .lab-cap-card__icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.04) 100%);
border: 1px solid rgba(6, 182, 212, 0.25);
border-radius: 10px;
color: var(--paper-accent);
margin-bottom: 4px;
}
body.b612--lab .lab-cap-card__icon svg {
width: 20px;
height: 20px;
}
body.b612--lab .lab-cap-card--emphasis .lab-cap-card__icon {
background: linear-gradient(135deg, var(--paper-accent) 0%, rgba(6, 182, 212, 0.75) 100%);
border-color: var(--paper-accent);
color: #ffffff;
}
body.b612--lab .lab-cap-card__title {
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 1.12rem;
font-weight: 800;
color: var(--paper-text);
margin: 0;
letter-spacing: 0.01em;
}
body.b612--lab .lab-cap-card__tag {
font-family: "JetBrains Mono", monospace;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--paper-text-low);
word-break: break-all;
line-height: 1.55;
}
body.b612--lab .lab-cap-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 1;
}
body.b612--lab .lab-cap-card__list li {
position: relative;
padding-left: 16px;
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.86rem;
line-height: 1.65;
color: var(--paper-text-mid);
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
}
body.b612--lab .lab-cap-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 8px;
height: 1.5px;
background: var(--paper-accent);
border-radius: 1px;
}
body.b612--lab .lab-cap-card__list li b {
color: var(--paper-text);
font-weight: 700;
}
body.b612--lab .lab-cap-card--emphasis .lab-cap-card__list li b {
color: #0e7490;
}
/* フッターキャプション */
body.b612--lab .lab-capabilities__foot {
margin: 36px auto 0;
max-width: 880px;
display: flex;
gap: 14px;
align-items: flex-start;
padding: 18px 22px;
background: rgba(15, 23, 42, 0.025);
border: 1px dashed var(--paper-border);
border-radius: 12px;
}
body.b612--lab .lab-capabilities__foot-mark {
font-family: "JetBrains Mono", monospace;
font-size: 1.4rem;
font-weight: 800;
color: var(--paper-accent);
line-height: 1;
margin-top: 2px;
}
body.b612--lab .lab-capabilities__foot-text {
font-family: "Inter", "Noto Sans JP", sans-serif;
font-size: 0.88rem;
line-height: 1.75;
color: var(--paper-text-mid);
}
body.b612--lab .lab-capabilities__foot-text b {
color: var(--paper-text);
font-weight: 700;
}
/* ===========================================================
月額プラン：追加 PC ブロック
=========================================================== */
body.b612--lab .lab-pricing-card__addon {
margin-top: 16px;
padding: 14px 14px 12px;
background: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, rgba(6, 182, 212, 0.03) 100%);
border: 1px dashed rgba(6, 182, 212, 0.45);
border-radius: 10px;
text-align: left;
}
body.b612--lab .lab-pricing-card__addon-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
body.b612--lab .lab-pricing-card__addon-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--paper-accent);
color: #ffffff;
border-radius: 999px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
}
body.b612--lab .lab-pricing-card__addon-price {
font-family: "Space Grotesk", "Inter", sans-serif !important;
font-size: 1.2rem;
font-weight: 800;
color: var(--paper-accent) !important;
-webkit-text-fill-color: var(--paper-accent) !important;
line-height: 1;
}
body.b612--lab .lab-pricing-card__addon-unit {
font-family: "Inter", sans-serif !important;
font-size: 0.7rem;
font-weight: 500;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
margin-left: 4px;
}
body.b612--lab .lab-pricing-card__addon-desc {
margin: 0 0 6px;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.82rem;
line-height: 1.65;
color: #334155;
}
body.b612--lab .lab-pricing-card__addon-desc b {
color: var(--paper-accent);
font-weight: 700;
}
body.b612--lab .lab-pricing-card__addon-note {
margin: 6px 0 0;
padding-top: 6px;
border-top: 1px dashed rgba(15, 23, 42, 0.1);
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.7rem;
line-height: 1.55;
color: #64748b;
}
/* ===========================================================
斜めライン装飾（OKURUN テイスト）
- セクション間のスラッシュ ////
- カードコーナーの斜めストライプ
=========================================================== */
/* セクション間のスラッシュバー（VOICE / PRICING の合間） */
body.b612--lab .lab-section.lab-section--voice,
body.b612--lab .lab-section.lab-section--contact-stage {
position: relative;
}
body.b612--lab .lab-section.lab-section--voice::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 14px;
background-image:
repeating-linear-gradient(135deg,
rgba(6, 182, 212, 0.18) 0,
rgba(6, 182, 212, 0.18) 6px,
transparent 6px,
transparent 14px);
pointer-events: none;
z-index: 2;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* VOICE カードのコーナー：斜めシアンストライプ */
body.b612--lab .lab-voice-card::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 90px;
height: 90px;
background-image:
repeating-linear-gradient(135deg,
rgba(6, 182, 212, 0.55) 0,
rgba(6, 182, 212, 0.55) 3px,
transparent 3px,
transparent 9px);
clip-path: polygon(100% 0, 0 0, 100% 100%);
-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
border: none;
pointer-events: none;
z-index: 3;
}
/* セクションコーナーの番号：左に // を追加 */
body.b612--lab .lab-section__corner-num::before {
content: "// ";
color: var(--paper-accent);
opacity: 0.6;
}
/* HERO の右上に斜めストライプアクセント */
body.b612--lab .lab-hero {
position: relative;
}
body.b612--lab .lab-hero::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-image:
repeating-linear-gradient(135deg,
rgba(6, 182, 212, 0.18) 0,
rgba(6, 182, 212, 0.18) 2px,
transparent 2px,
transparent 12px);
clip-path: polygon(100% 0, 0 0, 100% 100%);
-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
pointer-events: none;
z-index: 0;
}
/* CONTACT セクションの左下にも */
body.b612--lab .lab-section.lab-section--contact-stage > .lab-container::before {
content: "";
position: absolute;
bottom: -28px;
left: 0;
width: 160px;
height: 160px;
background-image:
repeating-linear-gradient(135deg,
rgba(6, 182, 212, 0.25) 0,
rgba(6, 182, 212, 0.25) 2px,
transparent 2px,
transparent 11px);
clip-path: polygon(0 0, 0 100%, 100% 100%);
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
pointer-events: none;
z-index: 0;
}
/* PRICING カードの右上 corner: 小さな斜めストライプ */
body.b612--lab .lab-pricing-card--featured::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-image:
repeating-linear-gradient(135deg,
rgba(6, 182, 212, 0.45) 0,
rgba(6, 182, 212, 0.45) 2.5px,
transparent 2.5px,
transparent 8px);
clip-path: polygon(0 0, 100% 0, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
border: none;
pointer-events: none;
z-index: 1;
}
/* セクションタイトル：左に斜めバー */
body.b612--lab .lab-flow__title {
position: relative;
}
/* FLOW arrow をスラッシュに */
body.b612--lab .lab-flow-arrow {
position: relative;
}
/* ===========================================================
イントロアニメーション（ページ開く前の Claude 風演出）
=========================================================== */
/* イントロ表示中はページのスクロールを完全に禁止 */
html.intro-active,
body.intro-active {
overflow: hidden !important;
height: 100% !important;
touch-action: none;
overscroll-behavior: none;
}
body.intro-active {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
/* イントロ自体が opaque + z-index 999999 でホームページ全体を覆うので、
visibility: hidden は不要。removeすることで intro フェード時にスムーズにクロスフェード */
body.b612--lab .lab-intro,
.lab-intro {
position: fixed !important;
inset: 0 !important;
z-index: 999999 !important;
background:
radial-gradient(ellipse at center, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
#050a12;
display: grid;
place-items: center;
padding: 24px;
opacity: 1;
transform: translateY(0) scale(1);
transition:
opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1),
transform 0.8s cubic-bezier(0.7, 0, 0.3, 1),
filter 0.8s ease-out;
overflow: hidden;
transform-origin: 50% 50%;
/* スクロール禁止保険 */
touch-action: none;
overscroll-behavior: contain;
}
/* ボタンクリック後 → シンプルに opacity フェードで消える */
.lab-intro.is-launching {
pointer-events: none;
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===========================================================
ホームページを開くボタン（DONE の後に出現）
=========================================================== */
.lab-intro__launch-btn {
align-self: center;
margin: 14px auto 4px;
padding: 13px 32px;
background: linear-gradient(180deg, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0.08) 100%);
border: 1.5px solid #06b6d4;
color: #67e8f9;
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.08em;
cursor: pointer;
border-radius: 8px;
text-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
box-shadow:
0 0 26px rgba(6, 182, 212, 0.32),
0 0 0 1px rgba(6, 182, 212, 0.18) inset,
0 6px 22px -6px rgba(6, 182, 212, 0.5);
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
opacity: 0;
transform: translateY(10px) scale(0.96);
animation: labLaunchBtnIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
display: inline-flex;
align-items: center;
gap: 8px;
}
.lab-intro__launch-btn:hover {
background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%);
color: #050a12;
text-shadow: none;
transform: translateY(-2px);
box-shadow:
0 0 36px rgba(6, 182, 212, 0.75),
0 0 0 2px rgba(6, 182, 212, 0.5) inset;
}
.lab-intro__launch-btn:active {
transform: translateY(0);
}
.lab-intro__launch-btn:focus-visible {
outline: 2px solid #67e8f9;
outline-offset: 4px;
}
.lab-intro__launch-prefix {
color: #06b6d4;
font-weight: 800;
font-size: 0.85em;
}
.lab-intro__launch-btn:hover .lab-intro__launch-prefix {
color: #050a12;
}
@keyframes labLaunchBtnIn {
0% {
opacity: 0;
transform: translateY(10px) scale(0.96);
box-shadow:
0 0 10px rgba(6, 182, 212, 0.1),
0 0 0 1px rgba(6, 182, 212, 0.1) inset;
}
60% {
opacity: 1;
transform: translateY(-2px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
box-shadow:
0 0 26px rgba(6, 182, 212, 0.32),
0 0 0 1px rgba(6, 182, 212, 0.18) inset,
0 6px 22px -6px rgba(6, 182, 212, 0.5);
}
}
/* フラッシュ核：完了時の小さな白いコア */
.lab-intro__flash {
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
background: radial-gradient(circle, #ffffff 0%, #67e8f9 60%, rgba(6, 182, 212, 0) 100%);
border-radius: 50%;
opacity: 0;
pointer-events: none;
z-index: 6;
filter: blur(2px);
}
.lab-intro.is-launching .lab-intro__flash {
animation: labIntroCore 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes labIntroCore {
0% { opacity: 0; transform: scale(0.2); }
25% { opacity: 1; transform: scale(1.4); }
100% { opacity: 0; transform: scale(6); filter: blur(20px); }
}
/* 粒子爆発：中央から放射状にシアン粒子が飛ぶ */
.lab-intro__particles {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
pointer-events: none;
z-index: 5;
}
.lab-intro__particles span {
position: absolute;
top: 0;
left: 0;
width: var(--s, 4px);
height: var(--s, 4px);
background: #06b6d4;
border-radius: 50%;
box-shadow:
0 0 8px rgba(103, 232, 249, 0.9),
0 0 16px rgba(6, 182, 212, 0.6);
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--a)) translateX(0);
}
.lab-intro__particles span.lab-intro__particles-small {
background: rgba(103, 232, 249, 0.95);
box-shadow:
0 0 4px rgba(103, 232, 249, 1),
0 0 10px rgba(103, 232, 249, 0.5);
}
.lab-intro.is-launching .lab-intro__particles span {
animation: labIntroParticle 1.05s cubic-bezier(0.18, 0.78, 0.32, 1) forwards;
animation-delay: var(--del, 0s);
}
@keyframes labIntroParticle {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(1);
}
12% {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--d) * 0.18)) scale(1.4);
}
60% {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--d) * 0.7)) scale(0.9);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--d)) scale(0.2);
}
}
body.intro-done .lab-intro {
opacity: 0;
pointer-events: none;
}
/* イントロが実際に再生中：HERO とヘッダを裏で控えさせる */
body.b612--lab.intro-active:not(.intro-done) .lab-hero {
opacity: 0;
transform: translateY(24px) scale(0.985);
}
body.b612--lab.intro-active:not(.intro-done) .header {
opacity: 0;
transform: translateY(-12px);
}
/* イントロ → 本ページ 遷移：もうクラッシュ事故ないので CSS は最小限に
実遷移はせず、同じページ上で intro が opacity フェードするだけ */
html.arriving-from-intro body.b612--lab {
filter: none !important;
}
@keyframes labHeroReveal {
0% {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes labHeaderReveal {
0% { opacity: 0; transform: translateY(-12px); }
100% { opacity: 1; transform: translateY(0); }
}
.lab-intro__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
animation: labIntroGridDrift 12s linear infinite;
}
@keyframes labIntroGridDrift {
from { background-position: 0 0, 0 0; }
to { background-position: 36px 36px, 36px 36px; }
}
.lab-intro__skip {
position: absolute;
top: 20px;
right: 20px;
z-index: 5;
background: rgba(6, 182, 212, 0.1);
color: #67e8f9;
border: 1px solid rgba(6, 182, 212, 0.5);
padding: 8px 16px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.lab-intro__skip:hover {
background: #06b6d4;
color: #050a12;
transform: translateY(-1px);
}
/* ===========================================================
PC ターミナル風イントロ
=========================================================== */
.lab-intro__terminal {
position: relative;
width: min(640px, calc(100vw - 48px));
max-width: 100%;
margin: 0 auto;
background: #0b0f17;
border: 1px solid rgba(6, 182, 212, 0.35);
border-radius: 10px;
box-shadow:
0 24px 60px -20px rgba(6, 182, 212, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 50px rgba(6, 182, 212, 0.12);
overflow: hidden;
animation: labIntroTermIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@keyframes labIntroTermIn {
from { opacity: 0; transform: scale(0.96) translateY(16px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* タイトルバー */
.lab-intro__term-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}
.lab-intro__term-dot {
width: 11px;
height: 11px;
border-radius: 50%;
display: inline-block;
}
.lab-intro__term-dot--red { background: #ff5f57; }
.lab-intro__term-dot--yellow { background: #ffbd2e; }
.lab-intro__term-dot--green { background: #28c840; }
.lab-intro__term-title {
margin-left: 12px;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.02em;
}
.lab-intro__term-status {
margin-left: auto;
font-size: 0.62rem;
letter-spacing: 0.2em;
color: #06b6d4;
padding: 2px 8px;
background: rgba(6, 182, 212, 0.1);
border: 1px solid rgba(6, 182, 212, 0.3);
border-radius: 3px;
}
/* 本体 */
.lab-intro__term-body {
padding: 18px 18px 22px;
background:
linear-gradient(transparent 50%, rgba(6, 182, 212, 0.015) 50%) 0 0 / 100% 4px,
#0b0f17;
font-size: 0.86rem;
line-height: 1.7;
color: #cbd5e1;
min-height: 220px;
}
/* 行 */
.lab-intro__term-row {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 6px;
word-break: break-word;
}
.lab-intro__term-row--system {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
}
.lab-intro__term-meta {
color: #94a3b8;
font-size: 0.74rem;
letter-spacing: 0.04em;
}
.lab-intro__term-msg {
color: rgba(203, 213, 225, 0.7);
font-size: 0.78rem;
}
/* プロンプト */
.lab-intro__term-prompt {
color: #06b6d4;
font-weight: 700;
flex-shrink: 0;
text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.lab-intro__term-type {
color: #ffffff;
white-space: pre-wrap;
}
/* ブロックカーソル */
.lab-intro__term-caret {
display: inline-block;
width: 0.6em;
margin-left: 2px;
color: #06b6d4;
font-weight: 700;
animation: labTermCaret 1s steps(2) infinite;
text-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
}
@keyframes labTermCaret {
50% { opacity: 0; }
}
.lab-intro__term-caret.is-hide { display: none; }
/* 出力エリア */
.lab-intro__term-output {
display: flex;
flex-direction: column;
margin-top: 10px;
gap: 4px;
}
.lab-intro__term-out {
display: flex;
align-items: baseline;
gap: 8px;
opacity: 0;
transform: translateX(-4px);
animation: labTermOut 0.3s ease-out forwards;
}
@keyframes labTermOut {
to { opacity: 1; transform: translateX(0); }
}
.lab-intro__term-out-prefix {
flex-shrink: 0;
font-size: 0.78rem;
color: #06b6d4;
font-weight: 700;
min-width: 22px;
}
.lab-intro__term-out-text {
color: #cbd5e1;
font-size: 0.84rem;
}
.lab-intro__term-out-text b {
color: #ffffff;
font-weight: 700;
}
.lab-intro__term-out--ok .lab-intro__term-out-prefix {
color: #4ade80;
}
.lab-intro__term-out--ok .lab-intro__term-out-text b {
color: #4ade80;
}
.lab-intro__term-out--done {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(6, 182, 212, 0.3);
}
.lab-intro__term-out--done .lab-intro__term-out-prefix {
color: #67e8f9;
}
.lab-intro__term-out--done .lab-intro__term-out-text {
color: #ffffff;
font-weight: 700;
letter-spacing: 0.04em;
}
/* モバイル */
@media (max-width: 540px) {
.lab-intro__term-title { display: none; }
.lab-intro__term-body { padding: 14px 14px 18px; font-size: 0.78rem; }
.lab-intro__term-out-text { font-size: 0.78rem; }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.lab-intro__grid,
.lab-intro__term-caret,
.lab-intro__terminal {
animation: none !important;
}
}
/* ===========================================================
フッタ法務ナビ
=========================================================== */
body.b612--lab .lab-footer-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 4px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(148, 163, 184, 0.18);
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.8rem;
}
body.b612--lab .lab-footer-nav a {
color: #94a3b8 !important;
text-decoration: none;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
body.b612--lab .lab-footer-nav a:hover {
color: #06b6d4 !important;
border-color: rgba(6, 182, 212, 0.4);
background: rgba(6, 182, 212, 0.06);
}
body.b612--lab .lab-footer-nav__sep {
color: rgba(148, 163, 184, 0.35);
}
@media (max-width: 540px) {
body.b612--lab .lab-footer-nav__sep { display: none; }
}
/* ===========================================================
TRY セクション内：スクショで修正デモ（Before / After）
=========================================================== */
body.b612--lab .lab-try-shot {
max-width: 820px;
margin: 40px auto 0;
padding: 28px 24px 24px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 14px;
box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18);
color: #0f172a;
}
@media (min-width: 720px) {
body.b612--lab .lab-try-shot {
padding: 34px 32px 30px;
}
}
body.b612--lab .lab-try-shot__head {
text-align: center;
margin-bottom: 22px;
}
body.b612--lab .lab-try-shot__badge {
display: inline-block;
padding: 4px 12px;
background: rgba(6, 182, 212, 0.1);
border: 1px solid rgba(6, 182, 212, 0.35);
border-radius: 999px;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.66rem;
letter-spacing: 0.18em;
font-weight: 700;
color: #0e7490;
margin-bottom: 12px;
}
body.b612--lab .lab-try-shot__title {
font-family: "Space Grotesk", "Inter", "Noto Sans JP", sans-serif !important;
font-size: 1.3rem;
font-weight: 700;
color: #0f172a !important;
line-height: 1.55;
margin: 0 0 10px;
}
@media (min-width: 720px) {
body.b612--lab .lab-try-shot__title { font-size: 1.55rem; }
}
body.b612--lab .lab-try-shot__title em {
font-style: normal;
color: #06b6d4;
background: linear-gradient(180deg, transparent 70%, rgba(6, 182, 212, 0.25) 70%);
padding: 0 4px;
}
body.b612--lab .lab-try-shot__desc {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.88rem;
line-height: 1.85;
color: #475569;
margin: 0;
}
body.b612--lab .lab-try-shot__desc b {
color: #0f172a;
font-weight: 700;
}
body.b612--lab .lab-try-shot__nb {
display: inline-block;
margin-top: 4px;
font-size: 0.78rem;
color: #94a3b8;
font-style: italic;
}
/* ステージ：Before → Arrow → After */
body.b612--lab .lab-try-shot__stage {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
padding: 6px 0 14px;
}
@media (min-width: 760px) {
body.b612--lab .lab-try-shot__stage {
grid-template-columns: 1fr 80px 1fr;
gap: 6px;
}
}
/* パネル共通 */
body.b612--lab .lab-try-shot__panel {
position: relative;
}
body.b612--lab .lab-try-shot__tag {
display: inline-block;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.2em;
color: #94a3b8;
margin-bottom: 8px;
}
body.b612--lab .lab-try-shot__tag--after { color: #06b6d4; }
/* ブラウザモック */
body.b612--lab .lab-try-shot__browser {
position: relative;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 10px;
overflow: hidden;
box-shadow:
0 14px 32px -16px rgba(15, 23, 42, 0.4),
0 2px 6px -2px rgba(15, 23, 42, 0.15);
}
body.b612--lab .lab-try-shot__browser-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
background: #f1f5f9;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body.b612--lab .lab-try-shot__browser-bar--after {
background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
}
body.b612--lab .lab-try-shot__browser-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
}
body.b612--lab .lab-try-shot__browser-bar--after .lab-try-shot__browser-dot {
background: #67e8f9;
}
body.b612--lab .lab-try-shot__browser-url {
margin-left: auto;
font-family: "JetBrains Mono", monospace !important;
font-size: 0.62rem;
color: #94a3b8;
}
/* BEFORE 本体 */
body.b612--lab .lab-try-shot__browser-body {
padding: 18px 18px 22px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 220px;
}
body.b612--lab .lab-try-shot__b-title {
height: 14px;
width: 50%;
background: #cbd5e1;
border-radius: 3px;
}
body.b612--lab .lab-try-shot__b-row {
height: 12px;
background: #e2e8f0;
border-radius: 3px;
}
body.b612--lab .lab-try-shot__b-row:nth-of-type(odd) { width: 92%; }
body.b612--lab .lab-try-shot__b-row:nth-of-type(even) { width: 78%; }
body.b612--lab .lab-try-shot__b-btn {
margin-top: 6px;
height: 28px;
width: 110px;
background: #94a3b8;
border-radius: 5px;
}
/* 選択枠（アニメで出現） */
body.b612--lab .lab-try-shot__select {
position: absolute;
left: 10%;
right: 8%;
top: 28%;
bottom: 20%;
border: 2px dashed #06b6d4;
background: rgba(6, 182, 212, 0.07);
border-radius: 4px;
opacity: 0;
animation: labShotSelect 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes labShotSelect {
0%, 6% { opacity: 0; transform: scale(0.96); }
10%, 38% { opacity: 1; transform: scale(1); }
42%, 100% { opacity: 0; transform: scale(1); }
}
/* フラッシュ */
body.b612--lab .lab-try-shot__flash {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.85);
pointer-events: none;
opacity: 0;
animation: labShotFlash 8s linear infinite;
}
@keyframes labShotFlash {
0%, 38% { opacity: 0; }
40% { opacity: 0.9; }
42%, 100% { opacity: 0; }
}
/* ふきだし */
body.b612--lab .lab-try-shot__bubble {
position: absolute;
right: -8px;
bottom: -42px;
max-width: 260px;
background: #0f172a;
color: #ffffff;
padding: 10px 14px;
border-radius: 12px;
border-top-right-radius: 4px;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.78rem;
line-height: 1.55;
box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.4);
opacity: 0;
transform: translateY(8px);
animation: labShotBubble 8s ease-in-out infinite;
z-index: 3;
}
body.b612--lab .lab-try-shot__bubble b {
color: #06b6d4;
}
body.b612--lab .lab-try-shot__bubble-arrow {
position: absolute;
top: -8px;
right: 18px;
width: 14px;
height: 14px;
background: #0f172a;
transform: rotate(45deg);
border-top-right-radius: 2px;
}
@keyframes labShotBubble {
0%, 42% { opacity: 0; transform: translateY(8px); }
46%, 70% { opacity: 1; transform: translateY(0); }
74%, 100% { opacity: 0; transform: translateY(8px); }
}
/* コネクター（矢印 + AI 処理中） */
body.b612--lab .lab-try-shot__connector {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
}
body.b612--lab .lab-try-shot__connector-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, #06b6d4, rgba(6,182,212,0.2));
position: relative;
overflow: hidden;
}
body.b612--lab .lab-try-shot__connector-line::after {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, #67e8f9 50%, transparent);
animation: labShotLineFlow 2s linear infinite;
}
@keyframes labShotLineFlow {
to { left: 100%; }
}
body.b612--lab .lab-try-shot__connector-icon {
color: #06b6d4;
animation: labShotConnSpin 4s linear infinite;
}
@keyframes labShotConnSpin {
to { transform: rotate(360deg); }
}
body.b612--lab .lab-try-shot__connector-label {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.62rem;
letter-spacing: 0.12em;
color: #06b6d4;
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 759px) {
body.b612--lab .lab-try-shot__connector {
flex-direction: row;
padding: 6px 0;
}
body.b612--lab .lab-try-shot__connector-line {
height: 2px;
flex: 1;
}
}
/* AFTER 本体（カードグリッド） */
body.b612--lab .lab-try-shot__browser-body--after {
background:
radial-gradient(circle at 80% 10%, rgba(6, 182, 212, 0.1) 0%, transparent 55%),
linear-gradient(180deg, #ffffff 0%, #ecfeff 100%);
padding: 18px 14px 20px;
min-height: 220px;
}
body.b612--lab .lab-try-shot__a-title {
width: 60%;
height: 14px;
background: linear-gradient(90deg, #06b6d4, #0e7490);
border-radius: 3px;
margin-bottom: 12px;
}
body.b612--lab .lab-try-shot__a-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
body.b612--lab .lab-try-shot__a-card {
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(6, 182, 212, 0.2);
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 4px 10px -4px rgba(6, 182, 212, 0.25);
opacity: 0;
transform: translateY(10px);
animation: labShotCardIn 8s ease-out infinite;
}
body.b612--lab .lab-try-shot__a-card--1 { animation-delay: 0s; }
body.b612--lab .lab-try-shot__a-card--2 { animation-delay: 0.15s; }
body.b612--lab .lab-try-shot__a-card--3 { animation-delay: 0.3s; }
@keyframes labShotCardIn {
0%, 60% { opacity: 0; transform: translateY(10px) scale(0.94); }
68%, 94% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(10px) scale(0.94); }
}
body.b612--lab .lab-try-shot__a-card-img {
height: 36px;
border-radius: 5px;
background: linear-gradient(135deg, #67e8f9 0%, #06b6d4 100%);
}
body.b612--lab .lab-try-shot__a-card--2 .lab-try-shot__a-card-img {
background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}
body.b612--lab .lab-try-shot__a-card--3 .lab-try-shot__a-card-img {
background: linear-gradient(135deg, #f472b6 0%, #be185d 100%);
}
body.b612--lab .lab-try-shot__a-card-text {
height: 8px;
width: 80%;
background: #cbd5e1;
border-radius: 2px;
margin-top: 2px;
}
body.b612--lab .lab-try-shot__a-card-cta {
height: 16px;
width: 100%;
background: #0f172a;
border-radius: 4px;
margin-top: auto;
}
/* キラキラ */
body.b612--lab .lab-try-shot__sparkle {
position: absolute;
color: #06b6d4;
font-size: 14px;
pointer-events: none;
animation: labShotSparkle 2.4s ease-in-out infinite;
}
body.b612--lab .lab-try-shot__sparkle--1 { top: -8px; right: 10%; animation-delay: 0s; }
body.b612--lab .lab-try-shot__sparkle--2 { top: 30%; right: -8px; animation-delay: 0.6s; font-size: 18px; }
body.b612--lab .lab-try-shot__sparkle--3 { bottom: 8%; left: -6px; animation-delay: 1.2s; }
@keyframes labShotSparkle {
0%, 100% { opacity: 0; transform: scale(0.7) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
/* Examples */
body.b612--lab .lab-try-shot__examples {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
@media (min-width: 720px) {
body.b612--lab .lab-try-shot__examples {
grid-template-columns: repeat(3, 1fr);
}
}
body.b612--lab .lab-try-shot__example {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(6, 182, 212, 0.05);
border: 1px solid rgba(6, 182, 212, 0.18);
border-radius: 8px;
}
body.b612--lab .lab-try-shot__example-icon {
font-size: 1rem;
flex-shrink: 0;
}
body.b612--lab .lab-try-shot__example-text {
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.78rem;
line-height: 1.55;
color: #334155;
}
body.b612--lab .lab-try-shot__example-text b {
color: #0e7490;
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
body.b612--lab .lab-try-shot__select,
body.b612--lab .lab-try-shot__flash,
body.b612--lab .lab-try-shot__bubble,
body.b612--lab .lab-try-shot__connector-icon,
body.b612--lab .lab-try-shot__connector-line::after,
body.b612--lab .lab-try-shot__a-card,
body.b612--lab .lab-try-shot__sparkle {
animation: none !important;
}
body.b612--lab .lab-try-shot__a-card {
opacity: 1;
transform: none;
}
body.b612--lab .lab-try-shot__bubble { opacity: 1; transform: none; }
}
/* ===========================================================
マスコットメニュー（TOP戻る / ガラケーモード）
=========================================================== */
body.b612--lab .lab-mascot-menu {
position: fixed;
right: 24px;
bottom: 130px;
z-index: 9100;
width: 240px;
background: linear-gradient(180deg, #0f172a 0%, #060c14 100%);
border: 1px solid rgba(6, 182, 212, 0.45);
border-radius: 14px;
box-shadow:
0 24px 48px -16px rgba(0, 0, 0, 0.6),
0 0 24px rgba(6, 182, 212, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
overflow: hidden;
opacity: 0;
transform: translateY(8px) scale(0.96);
transform-origin: bottom right;
pointer-events: none;
transition:
opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.b612--lab .lab-mascot-menu.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
body.b612--lab .lab-mascot-menu__head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 10px 14px;
background: rgba(6, 182, 212, 0.08);
border-bottom: 1px solid rgba(6, 182, 212, 0.18);
}
body.b612--lab .lab-mascot-menu__head-dot {
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
box-shadow: 0 0 8px #4ade80;
animation: labMascotMenuDot 1.4s ease-in-out infinite;
}
@keyframes labMascotMenuDot { 50% { opacity: 0.4; } }
body.b612--lab .lab-mascot-menu__head-title {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
color: #67e8f9;
flex: 1;
}
body.b612--lab .lab-mascot-menu__close {
background: none;
border: none;
color: #94a3b8;
font-size: 0.9rem;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
}
body.b612--lab .lab-mascot-menu__close:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
body.b612--lab .lab-mascot-menu__list {
list-style: none;
margin: 0;
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
body.b612--lab .lab-mascot-menu__item {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
background: transparent;
border: none;
color: #cbd5e1;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
font-size: 0.88rem;
font-weight: 600;
text-align: left;
cursor: pointer;
border-radius: 8px;
transition: background 0.18s, color 0.18s;
}
body.b612--lab .lab-mascot-menu__item:hover {
background: rgba(6, 182, 212, 0.12);
color: #ffffff;
}
body.b612--lab .lab-mascot-menu__item-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #06b6d4;
font-size: 1rem;
}
body.b612--lab .lab-mascot-menu__item-label { flex: 1; }
body.b612--lab .lab-mascot-menu__item-state {
font-family: "JetBrains Mono", monospace !important;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.15em;
padding: 3px 8px;
border-radius: 4px;
background: rgba(148, 163, 184, 0.2);
color: #94a3b8;
}
body.b612--lab .lab-mascot-menu__item[aria-checked="true"] .lab-mascot-menu__item-state {
background: var(--paper-accent);
color: #060c14;
}
body.b612--lab .lab-mascot-menu__foot {
padding: 8px 14px;
border-top: 1px dashed rgba(148, 163, 184, 0.15);
font-family: "JetBrains Mono", monospace !important;
font-size: 0.62rem;
color: rgba(148, 163, 184, 0.5);
letter-spacing: 0.08em;
text-align: center;
}
@media (max-width: 540px) {
body.b612--lab .lab-mascot-menu {
right: 14px;
bottom: 110px;
width: 220px;
}
}
/* ===========================================================
📱 ガラケーモード（デコログ / 前略プロフ 時代風）
=========================================================== */
html.is-keitai-mode {
background: #ffe4f1 !important;
}
body.is-keitai-mode {
background:
repeating-linear-gradient(45deg, rgba(255, 192, 203, 0.15) 0, rgba(255, 192, 203, 0.15) 10px, transparent 10px, transparent 20px),
linear-gradient(180deg, #ffe4f1 0%, #ffe4ed 40%, #fff0f6 100%) !important;
font-family: "Comic Sans MS", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif !important;
color: #c2185b !important;
}
/* キラキラ装飾文字を画面全体に */
body.is-keitai-mode::before {
content: "♡ ★ ☆ ♥ ✿ ♪ ⊂(´∀｀)⊃ ♡ ★ ☆ ✿ ♥ ♪ ヾ(＠⌒ー⌒＠)ノ ☆ ♡ ★ ✿ ♥ ♡ ★ ☆ ♥ ✿ ♪ ♡ ★ ☆";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
font-size: 22px;
line-height: 90px;
letter-spacing: 70px;
color: rgba(236, 64, 122, 0.22);
text-align: justify;
overflow: hidden;
font-family: "Comic Sans MS", sans-serif !important;
text-shadow: 0 0 4px rgba(255, 192, 203, 0.8);
animation: labKeitaiSparkle 8s ease-in-out infinite;
}
@keyframes labKeitaiSparkle {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
body.is-keitai-mode *,
body.is-keitai-mode *::before,
body.is-keitai-mode *::after {
font-family: "Comic Sans MS", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif !important;
}
/* セクション */
body.is-keitai-mode .lab-section {
background: rgba(255, 240, 246, 0.7) !important;
border-top: 3px dashed #ec407a !important;
border-bottom: 3px dashed #ec407a !important;
position: relative;
z-index: 2;
}
/* 見出し */
body.is-keitai-mode h1,
body.is-keitai-mode h2,
body.is-keitai-mode h3,
body.is-keitai-mode .lab-hero__title,
body.is-keitai-mode .lab-flow__title {
color: #d81b60 !important;
-webkit-text-fill-color: #d81b60 !important;
text-align: center !important;
text-shadow:
2px 2px 0 #fff,
3px 3px 0 #ffc1d8,
0 0 16px rgba(216, 27, 96, 0.4) !important;
font-weight: 900 !important;
background: none !important;
}
body.is-keitai-mode h1::before,
body.is-keitai-mode h2::before { content: "★ "; color: #ff9800; }
body.is-keitai-mode h1::after,
body.is-keitai-mode h2::after { content: " ★"; color: #ff9800; }
body.is-keitai-mode .lab-hero__title em,
body.is-keitai-mode .lab-flow__title em {
color: #ff6f91 !important;
-webkit-text-fill-color: #ff6f91 !important;
background: linear-gradient(transparent 60%, #fff59d 60%) !important;
font-style: italic !important;
}
/* 段落 */
body.is-keitai-mode p,
body.is-keitai-mode .lab-hero__lead,
body.is-keitai-mode .lab-hero__checklist li,
body.is-keitai-mode .lab-pricing-card__features li,
body.is-keitai-mode .lab-faq-item__body,
body.is-keitai-mode .lab-voice-card__quote p,
body.is-keitai-mode .lab-compare__row-cell,
body.is-keitai-mode .lab-compare__row-label {
color: #6a1b4a !important;
-webkit-text-fill-color: #6a1b4a !important;
text-align: center !important;
}
body.is-keitai-mode p b,
body.is-keitai-mode strong {
color: #e91e63 !important;
-webkit-text-fill-color: #e91e63 !important;
background: linear-gradient(transparent 60%, #fff59d 60%);
font-weight: 800 !important;
}
/* カード全般 */
body.is-keitai-mode .lab-pricing-card,
body.is-keitai-mode .lab-flow-step,
body.is-keitai-mode .lab-works-item,
body.is-keitai-mode .lab-voice-card,
body.is-keitai-mode .lab-try__window,
body.is-keitai-mode .lab-try-shot,
body.is-keitai-mode .lab-faq-item,
body.is-keitai-mode .lab-compare__rows,
body.is-keitai-mode .lab-mascot-menu {
background: #fff !important;
border: 3px solid #ec407a !important;
border-radius: 0 !important;
box-shadow:
6px 6px 0 #f8bbd0 !important,
0 0 0 1px #fff inset !important;
}
/* CTA ボタン */
body.is-keitai-mode .lab-btn--primary,
body.is-keitai-mode .lab-btn--ghost,
body.is-keitai-mode .lab-contact__btn,
body.is-keitai-mode .lab-contact__btn--mail,
body.is-keitai-mode .lab-try__submit,
body.is-keitai-mode .lab-voice-card__link {
background: linear-gradient(180deg, #ff80ab 0%, #ec407a 100%) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border: 3px solid #fff !important;
border-radius: 999px !important;
box-shadow:
0 0 0 3px #ec407a,
0 4px 0 #c2185b,
0 8px 16px rgba(216, 27, 96, 0.5) !important;
text-shadow: 1px 1px 0 #c2185b !important;
font-weight: 900 !important;
}
body.is-keitai-mode .lab-btn--primary::before { content: "♡ "; }
body.is-keitai-mode .lab-btn--primary::after { content: " ♡"; }
/* リンク */
body.is-keitai-mode a {
color: #c2185b !important;
text-decoration: underline !important;
text-decoration-style: wavy !important;
}
body.is-keitai-mode a:hover {
color: #e91e63 !important;
background: #fff59d !important;
}
/* ヘッダー */
body.is-keitai-mode .header {
background: linear-gradient(180deg, #ec407a 0%, #d81b60 100%) !important;
border-bottom: 4px solid #fff !important;
box-shadow: 0 4px 0 #c2185b !important;
}
body.is-keitai-mode .header__logo,
body.is-keitai-mode .header__nav a {
color: #fff !important;
text-shadow: 1px 1px 0 #c2185b !important;
font-weight: 800 !important;
}
body.is-keitai-mode .header__cta {
background: #fff59d !important;
color: #c2185b !important;
border: 2px solid #fff !important;
}
/* 背景レイヤーは隠す */
body.is-keitai-mode .lab-paper-bg {
display: none !important;
}
/* PRICING */
body.is-keitai-mode .lab-pricing-card__price,
body.is-keitai-mode .lab-pricing-card__name,
body.is-keitai-mode .lab-pricing-card__price-sub {
color: #d81b60 !important;
-webkit-text-fill-color: #d81b60 !important;
}
body.is-keitai-mode .lab-pricing-card--featured {
background: linear-gradient(180deg, #fff 0%, #fff0f6 100%) !important;
border-color: #ff80ab !important;
box-shadow:
8px 8px 0 #f8bbd0,
0 0 0 6px #ffc1d8 !important;
}
body.is-keitai-mode .lab-pricing-card__stamp {
background: #fff59d !important;
border-color: #d81b60 !important;
color: #d81b60 !important;
box-shadow: 0 0 12px #fff59d !important;
}
/* フッター */
body.is-keitai-mode .lab-footer {
background: linear-gradient(180deg, #ec407a 0%, #ad1457 100%) !important;
color: #fff !important;
border-top: 4px dashed #fff !important;
}
body.is-keitai-mode .lab-footer * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* たまごっち本体もピンク化 */
body.is-keitai-mode .lab-mascot__screen {
background: #fff0f6 !important;
box-shadow:
0 0 0 3px #fff,
0 0 0 6px #ec407a,
0 0 24px rgba(216, 27, 96, 0.6),
0 8px 20px -4px rgba(0, 0, 0, 0.3),
inset 0 4px 10px rgba(216, 27, 96, 0.2) !important;
}
/* セクションタグ */
body.is-keitai-mode .lab-section__corner-num,
body.is-keitai-mode .lab-section__corner-name,
body.is-keitai-mode .lab-section__corner-desc {
color: #d81b60 !important;
-webkit-text-fill-color: #d81b60 !important;
}
/* イントロは非表示 */
body.is-keitai-mode .lab-intro {
display: none !important;
}
/* キラキラ背景の上にコンテンツを浮かせる */
body.is-keitai-mode > * {
position: relative;
z-index: 2;
}
/* ガラケーモードのメニューチェック状態は黄 */
body.is-keitai-mode .lab-mascot-menu__item[aria-checked="true"] .lab-mascot-menu__item-state {
background: #fff59d !important;
color: #d81b60 !important;
}