/* =========================================================================
 * TOPページ（index.php）専用のスタイル。index.php だけが読み込む。
 * クラスはすべて tp_ で始まり、他の画面（main.css）のクラスとは重ならない。
 * ページ内の画面の図（.tp_mock_*）は画像ではなく、実際の画面をHTML/CSSで再現したもの。
 * ========================================================================= */
html{
	scroll-behavior:smooth;
}
.tp_page{
	--tp-purple:#7c3aed;
	--tp-purple-dark:#6427cf;
	--tp-purple-soft:#f3ecfb;
	--tp-ink:#1f1a2e;
	--tp-text:#4a4458;
	--tp-muted:#8a8398;
	--tp-line:#e9e2f5;
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
	color:var(--tp-text);
	line-height:1.8;
	-webkit-font-smoothing:antialiased;
}
/* 画面下に固定表示のフッター（.site_footer）ぶんの余白は、最後の紫の帯（.tp_final）の内側で取る
   （.main_flow のスマホ用 padding-bottom:90px を打ち消し、帯の下に背景色のすき間を作らない） */
.main.main_flow.tp_page{
	padding-bottom:0;
}
.tp_page *,
.tp_page *::before,
.tp_page *::after{
	box-sizing:border-box;
}
.tp_page h1,
.tp_page h2,
.tp_page h3{
	color:var(--tp-ink);
	line-height:1.4;
	margin:0;
}
.tp_page p{
	margin:0;
}
.tp_container{
	width:100%;
	max-width:1120px;
	margin:0 auto;
	padding:0 24px;
}
.tp_page section{
	scroll-margin-top:72px;
}

/* ---------- ボタン ---------- */
.tp_page form{
	margin:0;
}
.tp_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:12px 22px;
	border-radius:999px;
	border:2px solid transparent;
	font-family:inherit;
	font-size:15px;
	font-weight:700;
	line-height:1.2;
	text-decoration:none;
	cursor:pointer;
	white-space:nowrap;
	transition:background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.tp_btn:hover{
	transform:translateY(-1px);
}
.tp_btn_sm{
	padding:8px 16px;
	font-size:13px;
}
.tp_btn_lg{
	padding:16px 30px;
	font-size:16px;
}
.tp_btn_block{
	width:100%;
}
.tp_btn_primary{
	background:var(--tp-purple);
	color:#fff;
	box-shadow:0 6px 18px rgba(124,58,237,0.28);
}
.tp_btn_primary:hover{
	background:var(--tp-purple-dark);
	box-shadow:0 8px 22px rgba(124,58,237,0.36);
}
.tp_btn_outline{
	background:#fff;
	color:var(--tp-purple);
	border-color:var(--tp-purple);
}
.tp_btn_outline:hover{
	background:var(--tp-purple-soft);
}
.tp_btn_ghost{
	background:transparent;
	color:var(--tp-ink);
}
.tp_btn_ghost:hover{
	color:var(--tp-purple);
}
.tp_btn_white{
	background:#fff;
	color:var(--tp-purple);
	box-shadow:0 6px 18px rgba(0,0,0,0.15);
}
.tp_btn_white:hover{
	background:#faf7ff;
}
.tp_btn_onpurple{
	background:transparent;
	color:#fff;
	border-color:rgba(255,255,255,0.75);
}
.tp_btn_onpurple:hover{
	background:rgba(255,255,255,0.12);
	border-color:#fff;
}

/* ---------- ヘッダー（スクロールしても上部に固定） ---------- */
/* ガイドなど、TOPページ以外にも同じバーを出すので、バー自体にも色の変数・フォントを持たせる */
.tp_header{
	--tp-purple:#7c3aed;
	--tp-purple-dark:#6427cf;
	--tp-purple-soft:#f3ecfb;
	--tp-ink:#1f1a2e;
	--tp-text:#4a4458;
	--tp-muted:#8a8398;
	--tp-line:#e9e2f5;
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
	line-height:1.8;
	-webkit-font-smoothing:antialiased;
}
.tp_header,
.tp_header *,
.tp_header *::before,
.tp_header *::after{
	box-sizing:border-box;
}
.tp_header{
	position:sticky;
	top:0;
	z-index:70;
	background:rgba(255,255,255,0.92);
	-webkit-backdrop-filter:saturate(1.4) blur(10px);
	backdrop-filter:saturate(1.4) blur(10px);
	border-bottom:1px solid var(--tp-line);
}
.tp_header_inner{
	max-width:1120px;
	margin:0 auto;
	padding:0 24px;
	height:64px;
	display:flex;
	align-items:center;
	gap:28px;
}
.tp_header_logo{
	text-decoration:none;
	display:flex;
	align-items:center;
	flex-shrink:0;
}
.tp_header_logo img{
	height:38px;
	display:block;
}
.tp_header_nav{
	display:flex;
	gap:24px;
	font-size:14px;
	font-weight:600;
}
.tp_header_nav a{
	color:var(--tp-text);
	text-decoration:none;
}
.tp_header_nav a:hover{
	color:var(--tp-purple);
}
.tp_header_actions{
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:6px;
}

/* ---------- ヒーロー ---------- */
.tp_hero{
	position:relative;
	overflow:hidden;
	padding:72px 0 88px;
	background:
		radial-gradient(900px 480px at 85% 10%, rgba(124,58,237,0.16), transparent 60%),
		radial-gradient(700px 420px at 0% 100%, rgba(255,149,0,0.08), transparent 60%),
		var(--tp-purple-soft);
}
.tp_hero_inner{
	display:grid;
	grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
	gap:56px;
	align-items:center;
}
.tp_eyebrow{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 14px;
	border-radius:999px;
	background:#fff;
	color:var(--tp-purple);
	font-size:13px;
	font-weight:700;
	box-shadow:0 2px 10px rgba(124,58,237,0.1);
}
.tp_page .tp_eyebrow{
	margin-bottom:20px;
}
.tp_hero_title{
	font-size:clamp(32px, 4.2vw, 52px);
	font-weight:800;
	line-height:1.3;
}
.tp_page .tp_hero_lead{
	margin-top:22px;
	font-size:17px;
	line-height:1.9;
}
.tp_hero_lead strong{
	color:var(--tp-purple);
}
.tp_hero_cta{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:12px;
	margin-top:32px;
}
/* 「登録不要で無料で使う」ボタンと、その下のチェック項目をひとまとまりにする */
.tp_hero_cta_main{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
.tp_hero_checks{
	list-style:none;
	margin:16px 0 0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:6px;
	font-size:14px;
	font-weight:700;
	color:var(--tp-ink);
}
.tp_hero_checks i{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	margin-right:6px;
	border-radius:50%;
	background:var(--tp-purple);
	color:#fff;
	font-size:10px;
}

/* ---------- 画面の図：ウィンドウ枠 ---------- */
.tp_mock_window{
	background:#fff;
	border-radius:14px;
	box-shadow:0 30px 60px rgba(60,30,120,0.18), 0 0 0 1px rgba(124,58,237,0.08);
	overflow:hidden;
}
.tp_mock_bar{
	display:flex;
	align-items:center;
	gap:6px;
	height:34px;
	padding:0 12px;
	background:#f6f3fb;
	border-bottom:1px solid var(--tp-line);
}
.tp_mock_bar > span{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#ff5f57;
}
.tp_mock_bar > span:nth-child(2){ background:#febc2e; }
.tp_mock_bar > span:nth-child(3){ background:#28c840; }
.tp_mock_url{
	margin-left:12px;
	flex:1;
	max-width:260px;
	height:20px;
	padding:0 10px;
	border-radius:6px;
	background:#fff;
	font-size:11px;
	line-height:20px;
	color:var(--tp-muted);
	overflow:hidden;
	white-space:nowrap;
}
.tp_mock_app{
	display:grid;
	grid-template-columns:38% 62%;
	height:320px;
}

/* タスク一覧（左側） */
.tp_mock_tasks{
	padding:14px 12px;
	border-right:1px solid var(--tp-line);
	background:#fcfbfe;
	overflow:hidden;
}
.tp_page .tp_mock_tasks_title{
	font-size:11px;
	font-weight:700;
	color:var(--tp-muted);
	margin-bottom:8px;
}
.tp_mock_task{
	display:flex;
	align-items:center;
	gap:6px;
	padding:8px;
	margin-bottom:6px;
	background:#fff;
	border:1px solid var(--tp-line);
	border-radius:8px;
	font-size:11px;
	line-height:1.4;
	color:var(--tp-ink);
}
.tp_dot{
	flex-shrink:0;
	width:8px;
	height:8px;
	border-radius:50%;
}
.tp_chk{
	position:relative;
	flex-shrink:0;
	width:14px;
	height:14px;
	border-radius:4px;
	border:1.5px solid #cfc6e0;
	background:#fff;
}
.tp_chk_on{
	background:var(--tp-purple);
	border-color:var(--tp-purple);
}
.tp_chk_on.tp_chk_conf{
	background:#34c759;
	border-color:#34c759;
}
.tp_chk_on::after{
	content:"";
	position:absolute;
	left:4px;
	top:1px;
	width:3px;
	height:7px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
.tp_mock_task_text{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* 画像エリア（右側）：架空のWebページ */
.tp_mock_canvas{
	position:relative;
	padding:14px;
	background:#eeeaf5;
	overflow:hidden;
}
.tp_site{
	position:relative;
	height:100%;
	background:#fff;
	border-radius:4px;
	box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.tp_mock_canvas .tp_site > *{
	position:absolute;
}
.tp_site_nav{
	left:7%;
	right:7%;
	top:6.5%;
	height:6%;
	display:flex;
	align-items:center;
	gap:6%;
}
.tp_site_nav i{
	width:22%;
	height:100%;
	border-radius:3px;
	background:#2b2340;
	margin-right:auto;
}
.tp_site_nav b{
	width:10%;
	height:40%;
	border-radius:3px;
	background:#d9d3e6;
}
.tp_site_hero{
	left:13%;
	right:7%;
	top:22%;
	height:44%;
}
.tp_site_hero > *{
	position:absolute;
	left:0;
	border-radius:3px;
}
.tp_site_hl{
	top:0;
	width:73%;
	height:18%;
	background:#2b2340;
}
.tp_site_line{
	top:28%;
	width:85%;
	height:8%;
	background:#ddd7e8;
}
.tp_site_line.tp_short{
	top:42%;
	width:60%;
}
.tp_site_btn{
	top:72%;
	width:25%;
	height:14%;
	border-radius:999px;
	background:var(--tp-purple);
}
.tp_site_cards{
	left:7%;
	right:7%;
	top:72%;
	bottom:7%;
	display:flex;
	gap:5%;
}
.tp_site_cards i{
	flex:1;
	border-radius:4px;
	background:linear-gradient(160deg, #e7e0f4, #f5f2fa);
}

/* 枠・メモ・カーソルを重ねる層。架空のWebページ（.tp_site）とぴったり同じ範囲に重ねるので、
   中の left/top/width/height の%はそのままページ上の位置になる */
.tp_overlay{
	position:absolute;
	inset:14px;
}

/* 枠（矩形）とメモ */
.tp_rect{
	position:absolute;
	border:2.5px solid #ff9500;
	border-radius:2px;
	background:rgba(255,255,255,0.08);
}
.tp_rect_label{
	position:absolute;
	left:-2px;
	top:-22px;
	padding:1px 8px;
	border-radius:4px 4px 4px 0;
	background:#af52de;
	color:#fff;
	font-size:11px;
	line-height:18px;
	white-space:nowrap;
}
.tp_memo{
	position:absolute;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px;
	padding:8px 10px;
	background:#fff;
	border-radius:8px;
	box-shadow:0 10px 24px rgba(40,20,80,0.18), 0 0 0 1px rgba(124,58,237,0.12);
	font-size:12px;
	line-height:1.4;
	color:var(--tp-ink);
	white-space:nowrap;
}
.tp_memo_swatches{
	display:flex;
	gap:4px;
	width:100%;
}
.tp_memo_swatches i{
	width:12px;
	height:12px;
	border-radius:50%;
}
.tp_memo_swatches i:nth-child(2){
	box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #ff9500;
}
.tp_caret{
	display:inline-block;
	width:1.5px;
	height:14px;
	margin-left:-4px;
	background:var(--tp-purple);
	animation:tp_blink 1s steps(1) infinite;
}
.tp_cursor{
	position:absolute;
	z-index:3;
	font-size:18px;
	color:#1f1a2e;
	filter:drop-shadow(0 1px 1px rgba(255,255,255,0.9)) drop-shadow(0 2px 3px rgba(0,0,0,0.25));
	pointer-events:none;
}

/* ---------- ヒーローのアニメーション（9秒で1周） ----------
   ① カーソルが見出しへ移動 → ② ドラッグで枠を描く → ③ メモ欄が開いて文字が入る
   → ④ 左のタスク一覧に新しい指示が追加される → ⑤ 消えて最初から */
.tp_anim_rect{
	left:11%;
	top:19.5%;
	width:0;
	height:0;
	border-color:#ff9500;
	opacity:0;
	animation:tp_rect 9s ease-in-out infinite;
}
.tp_anim_cursor{
	animation:tp_cursor 9s ease-in-out infinite;
}
.tp_anim_memo{
	left:11%;
	top:35%;
	opacity:0;
	transform:translateY(6px) scale(0.96);
	transform-origin:left top;
	animation:tp_memo 9s ease-out infinite;
}
.tp_anim_newtask{
	opacity:0;
	transform:translateY(-6px);
	animation:tp_newtask 9s ease-out infinite;
}
@keyframes tp_cursor{
	0%   { left:80%; top:88%; opacity:0; }
	6%   { left:80%; top:88%; opacity:1; }
	16%  { left:11%; top:19.5%; }
	20%  { left:11%; top:19.5%; }
	34%  { left:75%; top:32.5%; }
	40%  { left:75%; top:32.5%; opacity:1; }
	48%  { left:82%; top:60%; opacity:0; }
	100% { left:82%; top:60%; opacity:0; }
}
@keyframes tp_rect{
	0%, 19%  { width:0; height:0; opacity:0; }
	20%      { width:0; height:0; opacity:1; }
	34%      { width:64%; height:13%; opacity:1; }
	90%      { width:64%; height:13%; opacity:1; }
	96%,100% { width:64%; height:13%; opacity:0; }
}
@keyframes tp_memo{
	0%, 38%  { opacity:0; transform:translateY(6px) scale(0.96); }
	43%      { opacity:1; transform:none; }
	64%      { opacity:1; transform:none; }
	69%,100% { opacity:0; transform:translateY(-4px); }
}
@keyframes tp_newtask{
	0%, 62%  { opacity:0; transform:translateY(-6px); background:#fff; }
	67%      { opacity:1; transform:none; background:#f4ecff; border-color:var(--tp-purple); }
	82%      { opacity:1; background:#fff; border-color:var(--tp-line); }
	90%      { opacity:1; }
	96%,100% { opacity:0; }
}
@keyframes tp_blink{
	50% { opacity:0; }
}

/* ---------- セクション共通 ---------- */
.tp_section{
	padding:96px 0;
}
.tp_section_white{
	background:#fff;
}
.tp_page .tp_section_label{
	text-align:center;
	font-size:13px;
	font-weight:700;
	letter-spacing:0.12em;
	color:var(--tp-purple);
	margin-bottom:10px;
}
.tp_section_title{
	text-align:center;
	font-size:clamp(24px, 3vw, 34px);
	font-weight:800;
}
.tp_page .tp_section_lead{
	max-width:720px;
	margin:18px auto 0;
	text-align:center;
	font-size:15px;
}


/* ---------- 使い方（3ステップ） ---------- */
.tp_steps{
	list-style:none;
	margin:56px 0 0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:28px;
	counter-reset:none;
}
.tp_step{
	position:relative;
	padding:28px 26px 30px;
	background:#fff;
	border-radius:18px;
	box-shadow:0 10px 30px rgba(60,30,120,0.07);
}
.tp_step_num{
	position:absolute;
	top:-18px;
	left:26px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	background:var(--tp-purple);
	color:#fff;
	font-size:18px;
	font-weight:800;
	box-shadow:0 6px 14px rgba(124,58,237,0.32);
}
.tp_step_visual{
	height:170px;
	margin-bottom:22px;
	border-radius:12px;
	background:var(--tp-purple-soft);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	overflow:hidden;
}
.tp_step h3{
	font-size:19px;
	font-weight:800;
	margin-bottom:8px;
}
.tp_step p{
	font-size:14px;
}
.tp_mock_drop{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	border:2px dashed #b9a6e3;
	border-radius:10px;
	background:rgba(255,255,255,0.7);
	color:var(--tp-purple);
	text-align:center;
}
.tp_mock_drop > i{
	font-size:30px;
	animation:tp_float 2.6s ease-in-out infinite;
}
.tp_page .tp_mock_drop p{
	font-size:12px;
	color:var(--tp-text);
}
.tp_filetags{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:4px;
	margin-top:4px;
}
.tp_filetags span{
	padding:1px 7px;
	border-radius:4px;
	background:#fff;
	border:1px solid #d9cdf2;
	font-size:10px;
	font-weight:700;
	color:var(--tp-purple);
}
@keyframes tp_float{
	50% { transform:translateY(-5px); }
}
.tp_mock_mini{
	position:relative;
	width:100%;
	height:100%;
}
.tp_mini_img{
	position:relative;
	width:100%;
	height:100%;
	border-radius:8px;
	background:
		linear-gradient(#2b2340, #2b2340) 18% 30% / 50% 10% no-repeat,
		linear-gradient(#d8d1e6, #d8d1e6) 18% 47% / 64% 6% no-repeat,
		linear-gradient(#d8d1e6, #d8d1e6) 18% 58% / 44% 6% no-repeat,
		#fff;
	box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.tp_memo_static{
	right:6px;
	bottom:6px;
}
.tp_mock_share{
	width:100%;
	padding:14px;
	border-radius:10px;
	background:#fff;
	box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.tp_mock_share_flat{
	padding:0;
	box-shadow:none;
}
.tp_page .tp_share_label{
	font-size:12px;
	font-weight:700;
	color:var(--tp-ink);
	margin-bottom:6px;
}
.tp_page .tp_share_label i{
	color:var(--tp-purple);
}
.tp_share_row{
	display:flex;
	align-items:center;
	gap:6px;
	padding:4px 4px 4px 10px;
	border:1px solid var(--tp-line);
	border-radius:8px;
	font-size:11px;
	margin-bottom:12px;
}
.tp_share_row span{
	flex:1;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:var(--tp-muted);
}
.tp_share_row b{
	flex-shrink:0;
	padding:4px 10px;
	border-radius:6px;
	background:var(--tp-purple);
	color:#fff;
	font-size:11px;
}
.tp_page .tp_share_note{
	font-size:11px;
	color:#256a3e;
	background:#eefaf1;
	border-radius:6px;
	padding:4px 8px;
}

/* ---------- 主な機能（タブ） ---------- */
.tp_tabs{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
	margin:44px 0 36px;
}
.tp_tab{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:11px 20px;
	border-radius:999px;
	border:1.5px solid var(--tp-line);
	background:#fff;
	color:var(--tp-text);
	font-family:inherit;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	white-space:nowrap;
	transition:background .15s, color .15s, border-color .15s;
}
.tp_tab:hover{
	border-color:var(--tp-purple);
	color:var(--tp-purple);
}
.tp_tab.is-active{
	background:var(--tp-purple);
	border-color:var(--tp-purple);
	color:#fff;
	box-shadow:0 6px 16px rgba(124,58,237,0.25);
}
.tp_panel{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	gap:56px;
	align-items:center;
	padding:44px 48px;
	border-radius:22px;
	background:var(--tp-purple-soft);
}
.tp_panel[hidden]{
	display:none;
}
.tp_panel.is-active{
	animation:tp_fadein .35s ease-out;
}
@keyframes tp_fadein{
	from { opacity:0; transform:translateY(8px); }
	to   { opacity:1; transform:none; }
}
.tp_panel_text h3{
	font-size:24px;
	font-weight:800;
	margin-bottom:18px;
}
.tp_list{
	list-style:none;
	margin:0;
	padding:0;
}
.tp_list li{
	position:relative;
	padding:7px 0 7px 28px;
	font-size:14px;
}
.tp_list li::before{
	content:"\f00c";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	position:absolute;
	left:0;
	top:9px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:var(--tp-purple);
	color:#fff;
	font-size:9px;
	line-height:18px;
	text-align:center;
}
.tp_list b{
	color:var(--tp-ink);
}
.tp_panel_visual{
	display:flex;
	justify-content:center;
}
.tp_mock_card{
	width:100%;
	max-width:440px;
	padding:22px;
	border-radius:16px;
	background:#fff;
	box-shadow:0 20px 44px rgba(60,30,120,0.13);
}
.tp_page .tp_mock_card_title{
	font-size:14px;
	font-weight:800;
	color:var(--tp-ink);
	margin-bottom:12px;
}
.tp_page .tp_mock_card_title i{
	color:var(--tp-purple);
}
.tp_mock_input{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:5px 5px 5px 12px;
	border:1.5px solid var(--tp-purple);
	border-radius:8px;
	font-size:13px;
	color:var(--tp-ink);
}
.tp_mock_input_btn{
	padding:5px 12px;
	border-radius:6px;
	background:var(--tp-purple);
	color:#fff;
	font-size:12px;
	font-weight:700;
}
.tp_widths{
	display:flex;
	gap:6px;
	margin:12px 0 18px;
}
.tp_widths span{
	flex:1;
	padding:5px 0;
	border-radius:6px;
	border:1px solid var(--tp-line);
	text-align:center;
	font-size:11px;
	font-weight:700;
	color:var(--tp-muted);
}
.tp_widths span.is-on{
	border-color:var(--tp-purple);
	background:var(--tp-purple-soft);
	color:var(--tp-purple);
}
.tp_filegrid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:8px;
}
.tp_filegrid div{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
	padding:12px 4px;
	border-radius:10px;
	background:#faf8fd;
	font-size:11px;
	font-weight:700;
	color:var(--tp-ink);
}
.tp_filegrid i{
	font-size:20px;
	color:var(--tp-purple);
}
.tp_filegrid .fa-youtube{
	color:#ff0000;
}
.tp_mock_annotate{
	display:grid;
	gap:14px;
}
.tp_mini_img_lg{
	height:150px;
	background:#fff;
	border:1px solid var(--tp-line);
}
.tp_site_small{
	padding:30px 9% 0;
	height:100%;
	box-shadow:none;
}
.tp_site_small > *{
	border-radius:3px;
	margin-bottom:10px;
}
.tp_site_small .tp_site_hl{
	height:16px;
	width:60%;
}
.tp_site_small .tp_site_line{
	height:8px;
}
.tp_rectmenu{
	display:grid;
	gap:8px;
	padding:12px;
	border-radius:10px;
	border:1px solid var(--tp-line);
}
.tp_swatches_lg i{
	width:18px;
	height:18px;
	box-shadow:none !important;
}
.tp_swatches_lg i.is-on{
	box-shadow:0 0 0 2px #fff, 0 0 0 4px #af52de !important;
}
.tp_rectmenu_btn{
	display:flex;
	align-items:center;
	gap:6px;
	padding:6px 10px;
	border-radius:6px;
	background:#faf8fd;
	border:1px solid var(--tp-line);
	font-size:12px;
	color:var(--tp-ink);
}
.tp_rectmenu_btn i{
	color:var(--tp-purple);
}
.tp_rectmenu_text{
	padding:6px 10px;
	border-radius:6px;
	border:1.5px solid var(--tp-purple);
	font-size:12px;
	color:var(--tp-ink);
}
.tp_mock_task_lg{
	padding:12px;
	font-size:13px;
	gap:8px;
}
.tp_chklbl{
	flex-shrink:0;
	padding:2px 8px;
	border-radius:999px;
	border:1.5px solid #cfc6e0;
	font-size:11px;
	font-weight:700;
	color:var(--tp-muted);
}
.tp_chklbl.tp_work.is-on{
	background:var(--tp-purple);
	border-color:var(--tp-purple);
	color:#fff;
}
.tp_chklbl.tp_conf.is-on{
	background:#34c759;
	border-color:#34c759;
	color:#fff;
}
.tp_progress{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:14px;
	font-size:12px;
	font-weight:700;
	color:var(--tp-ink);
}
.tp_progress_bar{
	flex:1;
	height:8px;
	border-radius:999px;
	background:#eee8f7;
	overflow:hidden;
}
.tp_progress_bar i{
	display:block;
	height:100%;
	border-radius:999px;
	background:linear-gradient(90deg, var(--tp-purple), #a66bff);
}
.tp_progress_pct{
	color:var(--tp-purple);
}
.tp_lock{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	font-size:12px;
	color:var(--tp-ink);
}
.tp_lock_check{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:16px;
	height:16px;
	border-radius:4px;
	background:var(--tp-purple);
	color:#fff;
	font-size:9px;
}
.tp_lock_input{
	flex:1;
	min-width:100px;
	padding:4px 10px;
	border:1px solid var(--tp-line);
	border-radius:6px;
	letter-spacing:0.15em;
	color:var(--tp-muted);
}
.tp_shot{
	width:min(300px, 100%);
	margin:0;
	text-align:center;
}
.tp_shot img{
	display:block;
	width:100%;
	height:auto;
	border-radius:14px;
	box-shadow:0 20px 44px rgba(60,30,120,0.18);
	background:#fff;
}
.tp_shot figcaption{
	margin-top:10px;
	font-size:12px;
	color:var(--tp-muted);
}

/* ---------- メリット ---------- */
.tp_merits{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:20px;
	margin-top:48px;
}
.tp_merit{
	padding:30px 24px;
	border-radius:18px;
	background:#fff;
	box-shadow:0 10px 30px rgba(60,30,120,0.07);
	transition:transform .2s, box-shadow .2s;
}
.tp_merit:hover{
	transform:translateY(-4px);
	box-shadow:0 16px 36px rgba(60,30,120,0.12);
}
.tp_merit_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	margin-bottom:18px;
	border-radius:14px;
	background:var(--tp-purple-soft);
	color:var(--tp-purple);
	font-size:22px;
}
.tp_merit h3{
	font-size:17px;
	font-weight:800;
	margin-bottom:8px;
}
.tp_merit p{
	font-size:13px;
}

/* ---------- プラン ---------- */
/* カードのHTMLは _plan_cards.php（TOPページと新規登録ポップアップで共通） */
.tp_plans{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:20px;
	margin-top:44px;
	align-items:stretch;
}
.tp_plan{
	display:flex;
	flex-direction:column;
	padding:22px 22px 24px;
	border-radius:18px;
	border:1.5px solid var(--tp-line);
	background:#fff;
	text-align:left;
}
.tp_page .tp_plan_tag{
	padding:8px 12px;
	border-radius:6px;
	background:#ece4fb;
	color:#6a52a8;
	font-size:12px;
	line-height:1.4;
}
.tp_page .tp_plan_name{
	margin-top:18px;
	font-size:20px;
	font-weight:800;
	line-height:1.4;
	color:var(--tp-ink);
}
.tp_page .tp_plan_sub{
	margin-top:6px;
	font-size:12px;
	color:var(--tp-muted);
}
.tp_plan_term{
	margin-top:18px;
	padding:14px 12px;
	text-align:center;
	border:1px solid var(--tp-line);
	border-radius:12px;
	background:#faf8fd;
}
.tp_plan_term.is-main{
	background:#f0e9fc;
	border-color:#d4c4f5;
}
.tp_page .tp_plan_term_label{
	font-size:12px;
	color:var(--tp-muted);
}
.tp_plan_term_label i{
	margin-right:4px;
}
.tp_page .tp_plan_term_value{
	margin-top:4px;
	color:var(--tp-text);
}
.tp_plan_term_value b{
	font-size:28px;
	font-weight:700;
	line-height:1.3;
}
.tp_plan_term_value small{
	margin-left:4px;
	font-size:14px;
}
.tp_plan_term.is-main .tp_plan_term_value{
	color:var(--tp-purple-dark);
}
.tp_plan_feats{
	list-style:none;
	margin:18px 0;
	padding:0;
	font-size:13px;
	color:var(--tp-text);
}
.tp_plan_feats li{
	padding:4px 0;
}
.tp_plan_feats i{
	width:20px;
	font-size:11px;
	color:var(--tp-purple);
}
.tp_plan_pw{
	margin-top:auto;
	padding:12px 14px;
	border:1px solid var(--tp-line);
	border-radius:12px;
	background:#faf8fd;
}
.tp_plan_pw.is-on{
	background:#f7f2fe;
	border-color:#dccff7;
}
.tp_plan_pw_head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
}
.tp_plan_pw_title{
	font-size:13px;
	font-weight:700;
	color:var(--tp-muted);
}
.tp_plan_pw.is-on .tp_plan_pw_title{
	color:var(--tp-purple-dark);
}
.tp_plan_pw_title i{
	margin-right:4px;
}
.tp_plan_pw_tag{
	flex:0 0 auto;
	padding:2px 8px;
	border-radius:4px;
	background:#ebe8f0;
	color:var(--tp-muted);
	font-size:11px;
	font-weight:700;
	line-height:1.6;
}
.tp_plan_pw.is-on .tp_plan_pw_tag{
	background:#ece4fb;
	color:var(--tp-purple-dark);
}
.tp_page .tp_plan_pw_text{
	margin-top:8px;
	font-size:11px;
	line-height:1.6;
	color:var(--tp-muted);
}
.tp_page .tp_plan_form,
a.tp_plan_cta{
	margin-top:18px;
}
.tp_plan_cta{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	padding:15px 18px;
	border:1.5px solid transparent;
	border-radius:10px;
	font-family:inherit;
	font-size:14px;
	font-weight:700;
	line-height:1.2;
	text-decoration:none;
	cursor:pointer;
	transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tp_plan_cta i{
	font-size:12px;
}
.tp_plan_cta_primary{
	background:var(--tp-purple);
	color:#fff;
	box-shadow:0 6px 18px rgba(124,58,237,0.28);
}
.tp_plan_cta_primary:hover{
	background:var(--tp-purple-dark);
}
.tp_plan_cta_outline{
	background:#fff;
	color:var(--tp-purple);
	border-color:#cbb8f2;
}
.tp_plan_cta_outline:hover{
	background:var(--tp-purple-soft);
	border-color:var(--tp-purple);
}
.tp_page .tp_plan_note{
	margin-top:20px;
	text-align:center;
	font-size:12px;
	color:var(--tp-muted);
}

/* ---------- お知らせ（article_log.phpの.article_widgetをそのまま使う） ---------- */
.tp_news{
	padding:80px 0;
}
.tp_news .article_widget{
	margin:0 auto;
}

/* ---------- 最後のCTA ---------- */
.tp_final{
	padding:80px 0 calc(80px + 80px); /* 下の+80pxは固定フッター（.site_footer）に隠れるぶん */
	background:
		radial-gradient(600px 300px at 90% 0%, rgba(255,255,255,0.18), transparent 60%),
		linear-gradient(135deg, #7c3aed, #5b21b6);
	color:#fff;
	text-align:center;
}
.tp_final_inner h2{
	color:#fff;
	font-size:clamp(26px, 3.6vw, 40px);
	font-weight:800;
	line-height:1.5;
}
.tp_page .tp_final_inner > p.tp_final_eyebrow{
	margin:0 0 14px;
	font-size:13px;
	letter-spacing:0.06em;
	color:rgba(255,255,255,0.78);
}
.tp_page .tp_final_inner > p.tp_final_sub{
	margin-top:16px;
	font-size:14px;
	color:rgba(255,255,255,0.85);
}
.tp_page .tp_final_inner > p{
	margin-top:12px;
	font-size:15px;
	color:rgba(255,255,255,0.88);
}
.tp_final_cta{
	justify-content:center;
}
.tp_page .tp_final_login{
	margin-top:20px;
	font-size:13px;
}
.tp_final_login a{
	color:#fff;
	font-weight:700;
}

/* ---------- 画面幅ごとの調整 ---------- */
.tp_br_pc{
	display:inline;
}
@media (max-width:960px){
	.tp_hero{
		padding:48px 0 64px;
	}
	.tp_hero_inner{
		grid-template-columns:minmax(0, 1fr);
		gap:44px;
	}
	.tp_hero_text{
		text-align:center;
	}
	.tp_hero_cta{
		justify-content:center;
	}
	.tp_hero_visual{
		max-width:620px;
		width:100%;
		margin:0 auto;
	}
	.tp_steps{
		grid-template-columns:minmax(0, 1fr);
		max-width:520px;
		margin-left:auto;
		margin-right:auto;
		gap:40px;
	}
	.tp_panel{
		grid-template-columns:minmax(0, 1fr);
		gap:32px;
		padding:32px 28px;
	}
	.tp_merits,
	.tp_plans{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}
@media (max-width:760px){
	.tp_header_nav{
		display:none;
	}
	.tp_br_pc{
		display:none;
	}
}
@media (max-width:600px){
	.tp_container,
	.tp_header_inner{
		padding:0 16px;
	}
	.tp_header_inner{
		height:56px;
		gap:10px;
	}
	.tp_header_logo img{
		height:30px;
	}
	.tp_header_actions .tp_btn_sm{
		padding:7px 12px;
	}
	.tp_section{
		padding:64px 0;
	}
	.tp_page .tp_hero_lead{
		font-size:15px;
	}
	.tp_hero_cta .tp_btn_lg{
		padding:14px 22px;
		font-size:15px;
	}
	.tp_hero_cta form,
	.tp_hero_cta > a{
		width:100%;
	}
	.tp_hero_cta .tp_btn{
		width:100%;
	}
	.tp_mock_app{
		grid-template-columns:minmax(0, 1fr);
		height:auto;
	}
	.tp_mock_tasks{
		order:2;
		border-right:none;
		border-top:1px solid var(--tp-line);
	}
	.tp_mock_canvas{
		height:230px;
	}
	.tp_tabs{
		justify-content:flex-start;
		flex-wrap:nowrap;
		overflow-x:auto;
		margin:32px -16px 24px;
		padding:4px 16px 8px;
		scrollbar-width:none;
	}
	.tp_tabs::-webkit-scrollbar{
		display:none;
	}
	.tp_panel{
		padding:26px 18px;
		border-radius:16px;
	}
	.tp_panel_text h3{
		font-size:20px;
	}
	.tp_mock_card{
		padding:16px;
	}
	.tp_merits,
	.tp_plans{
		grid-template-columns:minmax(0, 1fr);
	}
	.tp_news{
		padding:56px 0;
	}
	.tp_final{
		padding-top:64px;
	}
}

/* ---------- 新規登録のプラン選択ポップアップ ---------- */
.tp_modal{
	position:fixed;
	inset:0;
	z-index:1500;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:32px 16px;
	background:rgba(31,26,46,0.55);
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
	animation:tp_fadein .2s ease-out;
}
.tp_modal[hidden]{
	display:none;
}
.tp_modal_panel{
	position:relative;
	width:100%;
	max-width:900px;
	margin:auto;
	padding:40px 36px 28px;
	border-radius:22px;
	background:#fff;
	box-shadow:0 30px 70px rgba(31,26,46,0.35);
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
	color:#4a4458;
	line-height:1.8;
	box-sizing:border-box;
}
.tp_modal_panel *,
.tp_modal_panel *::before,
.tp_modal_panel *::after{
	box-sizing:border-box;
}
.tp_modal_close{
	position:absolute;
	top:14px;
	right:14px;
	width:36px;
	height:36px;
	border:none;
	border-radius:50%;
	background:#f3ecfb;
	color:#7c3aed;
	font-size:15px;
	cursor:pointer;
}
.tp_modal_close:hover{
	background:#e6d9f8;
}
.tp_modal .tp_modal_title{
	margin:0;
	text-align:center;
	font-size:24px;
	font-weight:800;
	color:#1f1a2e;
	line-height:1.4;
}
.tp_modal .tp_modal_lead{
	margin:10px 0 0;
	text-align:center;
	font-size:14px;
}
/* 登録できるプランは3つなので、ポップアップでは3列 */
.tp_modal .tp_plans.tp_plans_signup{
	grid-template-columns:repeat(3, minmax(0, 1fr));
}
.tp_modal .tp_modal_login{
	margin:8px 0 0;
	text-align:center;
	font-size:13px;
}
.tp_modal .tp_modal_login a{
	color:#7c3aed;
	font-weight:700;
}
@media (max-width:760px){
	.tp_modal .tp_plans.tp_plans_signup{
		grid-template-columns:minmax(0, 1fr);
	}
	.tp_modal{
		padding:16px 12px;
	}
	.tp_modal_panel{
		padding:44px 18px 22px;
		border-radius:16px;
	}
	.tp_modal .tp_modal_title{
		font-size:20px;
	}
}

/* ポップアップでは、登録のボタンが唯一の操作なので、塗りのボタンにして目立たせる */
.tp_modal .tp_plan_cta_outline{
	background:var(--tp-purple);
	color:#fff;
	border-color:var(--tp-purple);
	box-shadow:0 6px 18px rgba(124,58,237,0.28);
}
.tp_modal .tp_plan_cta_outline:hover{
	background:var(--tp-purple-dark);
	border-color:var(--tp-purple-dark);
}
/* プランのカードが少ないとき（βテスト中は、新規登録で選べるのが無料プランだけ）は、
   空いた列を残さず、カードを中央にまとめる。.tp_plans_n{カードの数}。1列表示の幅（〜600px）では、元の指定のまま */
@media (min-width:601px){
	.tp_plans.tp_plans_n1{
		grid-template-columns:minmax(0, 460px);
		justify-content:center;
	}
	.tp_plans.tp_plans_n2{
		grid-template-columns:repeat(2, minmax(0, 460px));
		justify-content:center;
	}
	.tp_modal .tp_plans.tp_plans_signup.tp_plans_n1{
		grid-template-columns:minmax(0, 460px);
		justify-content:center;
	}
	.tp_modal .tp_plans.tp_plans_signup.tp_plans_n2{
		grid-template-columns:repeat(2, minmax(0, 460px));
		justify-content:center;
	}
}

/* ---------- 対応素材（ここまで対応している強み） ---------- */
.tp_support{
	border-top:1px solid var(--tp-line);
}
.tp_support_grid{
	display:grid;
	grid-template-columns:repeat(6, minmax(0, 1fr));
	gap:14px;
	margin-top:44px;
}
.tp_support_card{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:26px 10px 22px;
	border:1px solid var(--tp-line);
	border-radius:14px;
	background:#fff;
	text-align:center;
	transition:transform .2s, box-shadow .2s, border-color .2s;
}
.tp_support_card:hover{
	transform:translateY(-3px);
	border-color:#cdbbf0;
	box-shadow:0 10px 24px rgba(60,30,120,0.1);
}
.tp_support_card_accent{
	background:#f6f1ff;
	border-color:#ddd0f7;
}
.tp_support_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	height:40px;
	margin-bottom:12px;
}
.tp_support_icon svg{
	width:38px;
	height:38px;
	fill:none;
	stroke:var(--tp-purple);
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.tp_support_icon svg .dot{
	fill:var(--tp-purple);
	stroke:none;
}
.tp_support_icon_yt svg{
	width:44px;
	height:44px;
	stroke:none;
}
.tp_support_icon_yt .yt_bg{
	fill:#ff0000;
}
.tp_support_icon_yt .yt_play{
	fill:#fff;
}
.tp_support_icon_logos{
	gap:6px;
}
.tp_page .tp_support_name{
	font-size:15px;
	font-weight:700;
	color:var(--tp-ink);
	line-height:1.4;
}
.tp_page .tp_support_sub{
	margin-top:6px;
	font-size:11px;
	line-height:1.6;
	color:var(--tp-muted);
}

/* ---------- KokoFixとは（図で説明：ビフォー／アフター） ---------- */
.tp_cmp{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:24px;
	margin-top:48px;
}
.tp_cmp_card{
	display:flex;
	flex-direction:column;
	border:1px solid var(--tp-line);
	border-radius:18px;
	background:#fff;
	overflow:hidden;
}
.tp_cmp_card_after{
	border-color:#d9c9f6;
	background:#f9f6ff;
	box-shadow:0 14px 36px rgba(124,58,237,0.1);
}
.tp_cmp_head{
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px 22px;
	border-bottom:1px solid var(--tp-line);
	font-size:14px;
}
.tp_cmp_tag{
	padding:3px 10px;
	border-radius:5px;
	background:#ece9f1;
	color:#8a8398;
	font-size:11px;
	font-weight:700;
	letter-spacing:0.08em;
}
.tp_cmp_card_after .tp_cmp_tag{
	background:#e6dafc;
	color:var(--tp-purple);
}
.tp_cmp_card_after .tp_cmp_head_text{
	color:var(--tp-purple);
	font-weight:700;
}
.tp_cmp_body{
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:14px;
	min-height:280px;
	padding:26px 28px;
	background:#faf9fc;
}
.tp_cmp_card_after .tp_cmp_body{
	background:#f6f1ff;
}
.tp_cmp_demo{
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:14px;
}
.tp_page .tp_cmp_foot{
	padding:16px 22px;
	border-top:1px solid var(--tp-line);
	background:#fff;
	text-align:center;
	font-size:14px;
	color:var(--tp-muted);
}
.tp_page .tp_cmp_foot_after{
	background:#f9f6ff;
	border-top-color:#e6dafc;
	color:var(--tp-purple);
	font-weight:700;
}
/* BEFORE：チャットのやり取り */
.tp_chat_row{
	display:flex;
	align-items:center;
	gap:10px;
}
.tp_chat_row_right{
	justify-content:flex-end;
}
.tp_chat_avatar{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	width:30px;
	height:30px;
	border-radius:50%;
	background:#e6e3ee;
	color:#8a8398;
	font-size:11px;
}
.tp_chat_bubble{
	padding:11px 16px;
	border:1px solid var(--tp-line);
	border-radius:8px;
	background:#fff;
	font-size:13px;
	color:var(--tp-ink);
}
.tp_chat_bubble_alt{
	background:#ece9f5;
	border-color:#ece9f5;
}
/* AFTER：Webページの上の枠と、場所に紐づいた指示 */
.tp_demo_window{
	flex:1 1 0;
	min-width:0;
	max-width:250px;
	border:1px solid var(--tp-line);
	border-radius:8px;
	background:#fff;
	overflow:hidden;
	box-shadow:0 6px 18px rgba(60,30,120,0.1);
}
.tp_demo_bar{
	display:flex;
	align-items:center;
	gap:4px;
	padding:6px 8px;
	border-bottom:1px solid var(--tp-line);
	font-size:10px;
	color:var(--tp-muted);
}
.tp_demo_bar i{
	width:5px;
	height:5px;
	border-radius:50%;
	background:#d4cde3;
}
.tp_demo_bar span{
	margin-left:6px;
}
.tp_demo_page{
	position:relative;
	height:118px;
	background:linear-gradient(120deg,#f1eadb,#ede2cc);
	overflow:hidden;
}
.tp_demo_page > span{
	position:absolute;
	display:block;
}
.tp_demo_kicker{
	left:12px;
	top:9px;
	font-size:7px;
	letter-spacing:0.14em;
	color:#8c7f66;
}
.tp_demo_copy{
	left:14px;
	top:30px;
	font-size:14px;
	line-height:1.5;
	font-weight:600;
	color:#3b3326;
}
.tp_demo_btn{
	left:14px;
	bottom:12px;
	width:46px;
	height:12px;
	background:#4f6b57;
}
.tp_demo_pic{
	right:10px;
	top:18px;
	width:70px;
	height:82px;
	border-radius:34px 34px 8px 8px;
	background:linear-gradient(180deg,#e0cfae 0 40%,#b3a07e 40%);
}
.tp_demo_rect{
	left:8px;
	top:25px;
	width:122px;
	height:46px;
	border:2px solid var(--tp-purple);
	border-radius:2px;
}
.tp_demo_rect b{
	position:absolute;
	left:-9px;
	top:-9px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:16px;
	height:16px;
	border-radius:50%;
	background:var(--tp-purple);
	color:#fff;
	font-size:9px;
	font-weight:700;
}
.tp_demo_note{
	display:flex;
	align-items:center;
	gap:6px;
	padding:7px 9px;
	border-top:1px solid var(--tp-line);
	font-size:10px;
	color:var(--tp-text);
}
.tp_demo_note i{
	color:var(--tp-purple);
}
.tp_demo_task{
	flex:0 0 auto;
	width:150px;
	padding:12px 13px;
	border:1px solid var(--tp-line);
	border-radius:8px;
	background:#fff;
	box-shadow:0 6px 18px rgba(60,30,120,0.1);
}
.tp_demo_task_tag{
	display:inline-block;
	padding:1px 7px;
	border-radius:3px;
	background:#e9dffb;
	color:var(--tp-purple);
	font-size:9px;
}
.tp_page .tp_demo_task_text{
	margin-top:9px;
	font-size:12px;
	font-weight:600;
	line-height:1.6;
	color:var(--tp-ink);
}
.tp_page .tp_demo_task_sub{
	margin-top:7px;
	font-size:9px;
	color:var(--tp-muted);
}
.tp_demo_task_checks{
	display:flex;
	align-items:center;
	gap:4px;
	margin-top:8px;
	font-size:9px;
	color:var(--tp-text);
}
.tp_demo_task_checks span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:12px;
	height:12px;
	margin-left:4px;
	border:1.5px solid #cfc6e0;
	border-radius:3px;
	background:#fff;
	color:#fff;
	font-size:7px;
}
.tp_demo_task_checks span:first-child{
	margin-left:0;
}
.tp_demo_task_checks span.is-on{
	background:var(--tp-purple);
	border-color:var(--tp-purple);
}

/* ---------- よくある質問 ---------- */
.tp_faq_list{
	max-width:900px;
	margin:44px auto 0;
	border-top:1px solid var(--tp-line);
}
.tp_faq_item{
	border-bottom:1px solid var(--tp-line);
}
.tp_faq_item summary{
	position:relative;
	display:flex;
	align-items:center;
	gap:16px;
	padding:20px 44px 20px 4px;
	list-style:none;
	cursor:pointer;
	font-size:15px;
	font-weight:600;
	color:var(--tp-ink);
}
.tp_faq_item summary::-webkit-details-marker{
	display:none;
}
.tp_faq_item summary:hover{
	color:var(--tp-purple);
}
.tp_faq_q{
	flex:0 0 auto;
	width:24px;
	font-size:18px;
	font-weight:800;
	color:#b79ae6;
}
.tp_faq_icon{
	position:absolute;
	right:8px;
	top:50%;
	width:14px;
	height:14px;
	transform:translateY(-50%);
}
.tp_faq_icon::before,
.tp_faq_icon::after{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	height:2px;
	margin-top:-1px;
	border-radius:2px;
	background:var(--tp-purple);
	transition:transform .2s;
}
.tp_faq_icon::after{
	transform:rotate(90deg);
}
.tp_faq_item[open] .tp_faq_icon::after{
	transform:rotate(0deg);
}
.tp_page .tp_faq_a{
	padding:0 44px 22px 44px;
	font-size:14px;
	line-height:2;
	color:var(--tp-text);
}
.tp_page .tp_faq_more{
	margin-top:28px;
	text-align:center;
	font-size:13px;
	color:var(--tp-muted);
}
.tp_faq_more a{
	color:var(--tp-purple);
	font-weight:700;
}

@media (max-width:960px){
	.tp_support_grid{
		grid-template-columns:repeat(3, minmax(0, 1fr));
	}
	.tp_cmp{
		grid-template-columns:minmax(0, 1fr);
	}
}
@media (max-width:600px){
	.tp_support_grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:10px;
	}
	.tp_cmp_body{
		padding:20px 16px;
		min-height:0;
	}
	.tp_cmp_demo{
		flex-direction:column;
	}
	.tp_demo_window,
	.tp_demo_task{
		width:100%;
		max-width:none;
	}
	.tp_faq_item summary{
		padding:16px 36px 16px 0;
		font-size:14px;
	}
	.tp_page .tp_faq_a{
		padding:0 8px 18px 0;
	}
}

/* 4組のビフォー／アフターには、それぞれ見出しと一文を付ける */
.tp_item_head{
	margin-top:88px;
	text-align:center;
}
.tp_section_lead + .tp_item_head,
.tp_video + .tp_item_head{
	margin-top:56px;
}
/* 紹介動画（YouTubeの埋め込み）。16:9のまま、幅に合わせて縮む */
.tp_video{
	position:relative;
	max-width:880px;
	aspect-ratio:16 / 9;
	margin:40px auto 0;
	border:1px solid var(--tp-line);
	border-radius:16px;
	overflow:hidden;
	background:#000;
	box-shadow:0 12px 36px rgba(124,58,237,0.16);
}
.tp_video iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
}
.tp_page .tp_item_no{
	margin-bottom:8px;
	font-size:12px;
	font-weight:700;
	letter-spacing:0.14em;
	color:var(--tp-purple);
}
.tp_item_title{
	font-size:clamp(20px, 2.4vw, 26px);
	font-weight:500;
	letter-spacing:0.02em;
	line-height:1.6;
}
.tp_page .tp_item_lead{
	max-width:680px;
	margin:12px auto 0;
	font-size:14px;
	line-height:1.9;
	color:var(--tp-text);
}
.tp_item_head + .tp_cmp{
	margin-top:28px;
}
@media (max-width:600px){
	.tp_item_head{
		margin-top:64px;
	}
	.tp_section_lead + .tp_item_head,
	.tp_video + .tp_item_head{
		margin-top:40px;
	}
	.tp_video{
		margin-top:32px;
		border-radius:12px;
	}
}
/* 2〜4組目のビフォー／アフターの図（1組目と同じ枠の中に入れる） */
.tp_cmp_vis{
	align-items:center;
	justify-content:center;
	min-height:230px;
}
/* 2組目 BEFORE：ファイルが増えて、どれが最新か分からない */
.tp_files{
	width:100%;
	max-width:300px;
	display:flex;
	flex-direction:column;
	gap:7px;
}
.tp_file{
	display:flex;
	align-items:center;
	gap:10px;
	padding:7px 10px;
	border:1px solid var(--tp-line);
	border-radius:8px;
	background:#fff;
	font-size:12px;
	color:var(--tp-text);
}
.tp_file:nth-child(2){ margin-left:14px; }
.tp_file:nth-child(3){ margin-left:6px; }
.tp_file:nth-child(4){ margin-left:20px; }
.tp_file_thumb{
	flex:0 0 auto;
	width:26px;
	height:20px;
	border:2px solid #ff3b30;
	border-radius:3px;
	background:linear-gradient(#e7e3ef, #f5f3f9);
}
.tp_file_name{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.tp_file_q{
	flex:0 0 auto;
	margin-left:auto;
	padding:1px 8px;
	border-radius:999px;
	background:#fff1d6;
	color:#b86e00;
	font-size:10px;
	font-weight:700;
}
/* 2組目 AFTER：ひとつのプロジェクトにすべて集約 */
.tp_proj{
	width:100%;
	max-width:300px;
	padding:14px;
	border:1px solid var(--tp-line);
	border-radius:10px;
	background:#fff;
	box-shadow:0 6px 18px rgba(60,30,120,0.1);
}
.tp_proj_head{
	font-size:13px;
	font-weight:700;
	color:var(--tp-ink);
}
.tp_proj_head i{
	margin-right:6px;
	color:var(--tp-purple);
}
.tp_proj_thumbs{
	display:flex;
	gap:6px;
	margin:10px 0;
}
.tp_proj_thumbs span{
	flex:1;
	height:46px;
	border-radius:5px;
	background:linear-gradient(135deg, #e0efe5, #efe3c9);
}
.tp_proj_thumbs span:nth-child(2){ background:linear-gradient(135deg, #e3e8f5, #f1e6f7); }
.tp_proj_thumbs span:nth-child(3){ background:linear-gradient(135deg, #f7e6df, #efe3c9); }
.tp_proj_chips{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
}
.tp_proj_chips span{
	padding:2px 9px;
	border-radius:999px;
	background:#f3ecfb;
	color:var(--tp-purple);
	font-size:10px;
	font-weight:700;
}
.tp_page .tp_proj_note{
	margin-top:10px;
	font-size:11px;
	color:var(--tp-muted);
}
/* 3組目：対応状況 */
.tp_trk{
	width:100%;
	max-width:310px;
}
.tp_trk_row{
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:7px;
	padding:9px 10px;
	border:1px solid var(--tp-line);
	border-radius:8px;
	background:#fff;
	font-size:12px;
	color:var(--tp-ink);
}
.tp_trk_text{
	flex:1;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.tp_trk_q{
	flex:0 0 auto;
	padding:1px 8px;
	border-radius:999px;
	background:#ece9f5;
	color:#8a8398;
	font-size:10px;
	font-weight:700;
}
.tp_trk .tp_progress{
	margin-top:12px;
}
/* 4組目：アカウント登録 ⇒ リンクを開くだけ */
.tp_signup{
	width:100%;
	max-width:250px;
	padding:14px 16px;
	border:1px solid var(--tp-line);
	border-radius:10px;
	background:#fff;
}
.tp_page .tp_signup_title{
	margin-bottom:10px;
	font-size:13px;
	font-weight:700;
	color:var(--tp-ink);
}
.tp_signup_field{
	margin-bottom:8px;
	font-size:10px;
	color:var(--tp-muted);
}
.tp_signup_field b{
	display:block;
	height:24px;
	margin-top:3px;
	border:1px solid var(--tp-line);
	border-radius:5px;
	background:#faf9fc;
}
.tp_signup_btn{
	margin-top:10px;
	padding:7px 0;
	border-radius:6px;
	background:#c9c5d3;
	color:#fff;
	text-align:center;
	font-size:12px;
	font-weight:700;
}
.tp_page .tp_signup_voice{
	margin-top:10px;
	text-align:center;
	font-size:11px;
	color:#b86e00;
	font-weight:700;
}
.tp_link_card{
	width:100%;
	max-width:300px;
	box-shadow:0 6px 18px rgba(60,30,120,0.1);
}

/* ---------- 背景が白／薄紫のどちらのセクションでも、カードが背景に埋もれないようにする ---------- */
/* 白いセクションの上のカードは、ごく薄い紫の地＋枠線で区別する */
.tp_section_white .tp_step,
.tp_section_white .tp_merit{
	background:#faf8fd;
	border:1px solid var(--tp-line);
	box-shadow:none;
}
.tp_section_white .tp_merit:hover{
	box-shadow:0 12px 28px rgba(60,30,120,0.1);
}
/* 薄紫のセクションの上の機能パネルは、白地にする（以前は薄紫の地だった） */
.tp_section:not(.tp_section_white) .tp_panel{
	background:#fff;
	border:1px solid var(--tp-line);
}
.tp_section:not(.tp_section_white) .tp_mock_card{
	background:#faf8fd;
	border:1px solid var(--tp-line);
	box-shadow:none;
}

@media (max-width:960px){
	.tp_hero_cta_main{
		align-items:center;
	}
}
@media (max-width:600px){
	.tp_hero_cta_main{
		width:100%;
	}
}

/* ---------- PDF・Ps・Ai・動画・URLバナーのアイコン（<symbol>を呼び出す） ---------- */
.tp_support_icon svg.tp_ico{
	stroke:none;
	fill:none;
	color:var(--tp-purple);
}
.tp_ico_pdf{
	width:33px;
	height:40px;
}
.tp_ico_app{
	width:34px;
	height:34px;
}
.tp_support_icon svg.tp_ico_url{
	width:80px;
	height:40px;
}
.tp_support_icon svg.tp_ico_video{
	width:46px;
	height:40px;
}
.tp_support_icon svg.tp_ico_pdf{
	width:36px;
	height:43px;
}
.tp_support_icon svg.tp_ico_app{
	width:34px;
	height:34px;
}
/* 素材の取り込みタブ（ファイルの種類の一覧） */
.tp_filegrid svg.tp_ico_pdf{
	width:23px;
	height:28px;
}
.tp_filegrid svg.tp_ico_app{
	width:28px;
	height:28px;
}
/* ファイルの種類の一覧：アイコンの高さが違っても、下の文字の位置がそろうようにする */
.tp_filegrid i{
	display:flex;
	align-items:center;
	height:28px;
}
.tp_filegrid svg{
	flex:0 0 auto;
}
.tp_header_nav a.is-current{
	color:var(--tp-purple);
}