-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
547 lines (529 loc) · 37.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<!-- Link css -->
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<div class="wapper">
<!-- Menu -->
<div class="banner">
</div>
<div class="menu-bar">
<div class="menu-bar-inner">
<div class="logo">
<img src="img/logo1.png" alt="">
</div>
<!-- Navigation -->
<nav class="navbar-menu">
<ul class="navbar">
<li class="nav-item"><a href="#">お知らせ</a></li>
<li class="nav-item"><a href="#">altcircleとは</a></li>
<li class="nav-item"><a href="#">解決する課題</a></li>
<li class="nav-item"><a href="#">サービス</a></li>
<li class="nav-item"><a href="#">コラム</a></li>
<li class="nav-item"><a href="#"><i class="fa-regular fa-envelope"></i>お問い合わせ</a></li>
</ul>
</nav>
<!-- End Navigation -->
</div>
<div class="intro">
<br>BtoB SaaSに携わる人なら意識しておきたい、顧客のための「ライトサクセス／ディープサクセス」という新定説。３行以上になる場合は、最後「…」になるよう設定します。112文字を超えた場合に…に。
</div>
</div>
<!-- End Menu -->
<div class="cover">
<!-- Main Content -->
<div class="main-content">
<div class="content">
<!-- Breadcrumb -->
<div class="breadcrumbs">
<div class="top-new">
<div class="top-new-tab">
<a href="">TOP</a>
<span>/ <a href="#">コラム</a></span>
<span>/ <a href="#">BtoB SaaSに携わる人なら意識してお…</a></span>
</div>
<div class="l"></div>
<div class="top-new-date">
<div class="date">
<span class="post">2021/10/13 公開</span>
<span class="update">2022/4/13 更新</span>
</div>
<div class="author">作成者：山田 太郎</div>
</div>
<div class="top-new-content">
このブログの読者で、CSに関する方ならおなじみ、ALL STAR SAAS
FUNDメンターの山田ひさのりさん。今回は、山田さんが独自に考案したというカスタマーサクセスにおける観点から見た「ライトサクセス／ディープサクセス」について、寄稿してくださいました。
<br> この考えは、ALL STAR SAAS FUNDと山田さんで開講した「SaaS CS集中講座」でも取り上げています。以前の記事では、下記のように概念を説明しています。
</div>
<div class="g"></div>
</div>
</div>
<!-- End Breadcrumb -->
<!-- Banner -->
<div class="banner-support">
<img src="img/Banner2.png" alt="">
</div>
<!-- End Banner -->
<!-- Index -->
<div class="index">
<div class="index-item">
<p class="index-heading"><a href="#">Index</a></p>
<p class="index-title">「Sansanだから通じるメソッドだ」は、本当か？</p>
<p class="index-title">「2つのサクセス」という考え方</p>
<p class="index-span">ライトサクセスとディープサクセス</p>
<p class="index-span">Sansanにおける２種類のサクセス</p>
<p class="index-title">Sansanにおける２種類のサクセス</p>
<p class="index-span">ライトサクセスとディープサクセスの発生パターン</p>
</div>
</div>
<!-- End Index -->
<!-- News -->
<div class="news">
<div class="news-item-1">
<div class="news-title-1">「Sansanだから通じるメソッドだ」は、本当か？</div>
<div class="news-content-1">
<div class="news-1-span" style="margin-bottom: 50px">
<span>「ライトサクセス／ディープサクセス」の考え方は独自に考案したもので、国内外のSaaSやカスタマーサクセス界隈において一般的というわけではありません。<br></span>
</div>
<div class="news-1-span">
<span>私は長らくSansanのカスタマーサクセス部門で戦略立案に携わる傍ら、カスタマーサクセスの情報発信にも力を入れてきました。発信する情報はSansanで養われ、鍛えられたCSメソッドの数々です。すると、こんなご意見をいただくことがありました。<br></span>
</div>
<div class="news-1-span">
<span>最初は自社への不満を漏らしているだけかとも思いましたが、主張をされている方々のプロダクトをつぶさに見てみると、提供している価値とそのサクセスの対象がさまざまであることに気づきました。つまり、サクセスしにくいプロダクトとしての共通性があるのではなく、他の観点によってメソッドが通じるか否かが判断されるようです。<br></span>
</div>
<div class="news-1-span" style="margin-bottom: 40px"><img src="img/icon.png"
alt=""><span>
多くのSaaS関係者はこのことを体感していますが、明確に意識している人は少ないかもしれません。社内のビジネスサイドの方から「うちのプロダクトはROIを問われたときに弱い」といった会話が出てくるのであれば、この2つの概念を正しく理解していない可能性があります。</span>
</div>
</div>
</div>
<div class="news-item-2">
<div class="news-title-2">「2つのサクセス」という考え方</div>
<div class="news-content-2">
この記事では、SaaS業界の大きなテーマの一つであるこの問いについて、カスタマーサクセスの視点から考えていきます。
</div>
</div>
<div class="news-item-3">
<div class="news-title-3">ライトサクセスとディープサクセス</div>
<div class="news-content-3">
<div class="news-3-span" style="margin-bottom: 30px">
<span>ライトサクセスの定義は（顧客の）現場にサクセスをもたらしている状態です。そして、ディープサクセスとは（顧客の）経営にサクセスをもたらしている状態です。</span>
</div>
<div class="news-3-span" style="margin-bottom: 60px">
<span>多くのSaaS関係者はこのことを体感していますが、明確に意識している人は少ないかもしれません。社内のビジネスサイドの方から「うちのプロダクトはROIを問われたときに弱い」といった会話が出てくるのであれば、この2つの概念を正しく理解していない可能性があります。</span>
</div>
</div>
<div class="news-3-img">
<img src="img/new1.png" alt="">
<img src="img/new2.png" alt="">
</div>
<div class="news-3-img-tile">キャプション付きの場合下に表示されます。最大文字数で５６文字程度で２行に収まります。レスポンシブで最大８０文字です</div>
</div>
<div class="news-item-4">
<div class="news-title-4">Sansanにおける２種類のサクセス</div>
<div class="news-content-4">
典型的なSaaSプロダクトにおいては、ライトサクセスとディープサクセスが段階的に発生します。まずはライトサクセスで現場に業務改善効果を体感してもらい、それを増幅させて経営的な利益というディープサクセスへ繋げていくのです。言うは易しですが、実際には3年程度の時間をかけてジワジワと実現されます。
</div>
<div class="news-4-img">
<img src="img/new3.png" alt="">
<img src="img/new4.png" alt="">
<img src="img/new5.png" alt="">
</div>
<div class="news-4-img-tile">最大文字数で５６文字程度で２行に収まります。レスポンシブで最大８０文字です</div>
</div>
<div class="news-item-5">
<div class="news-title-5">ライトサクセスとディープサクセスは「段階的に」発生する</div>
<div class="news-content-5">
<div class="news-5-img">
<img src="img/new3.png" alt="">
</div>
<div class="news-5-span" style="margin-left: 20px">
標準本文フォントサイズ16px。Newsと同じフォント設定です。ｐブロックをわけるとマージンボトムに30pxはいります。太文字の設定はBoldの設定にしています。文字の大きさ、量、字間、行間などを確認するために入れています。これはダミーです。文字の大きさ、量、字間、行間などを確認するために入れています。文字の大きさ、量、字間、行間などを確認するために入れています。これはダミーです。文字の大きさ、量、字間、行間などを確認するために入れています。<br>
標準本文フォントサイズ16px。Newsと同じフォント設定です。ｐブロックをわけるとマージンボトムに30pxはいります。太文字の設定はBoldの設定にしています。
</div>
</div>
<div class="news-5-span">
文字の大きさ、量、字間、行間などを確認するために入れています。これはダミーです。文字の大きさ、量、字間、行間などを確認するために入れています。文字の大きさ、量、字間、行間などを確認するために入れています。これはダミーです。文字の大きさ、量、字間、行間などを確認するために入れています。
</div>
</div>
</div>
<!-- End News -->
<!-- Link YouTube -->
<div class="yt">
<iframe width="80%" height="450px" src="https://www.youtube.com/embed/gQlMMD8auMs"
title="BLACKPINK - ‘Pink Venom’ M/V" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<!-- Tables -->
<div class="table">
<div class="table-tile-1">Thあり 100%</div>
<div class="table-content-1">
<table class="table-item-1">
<thead>
<tr>
<th style="width: 132px; border-left:none; border-top-left-radius: 7px; ">
</th>
<th style="width: 283px; text-align: left">ThがあるVer 左寄せ</th>
<th style="width: 283px; text-align: center">ThがあるVer 左寄せ</th>
<th style="width: 283px; text-align: right; border-top-right-radius: 5px;">
ThがあるVer 左寄せ</th>
</tr>
</thead>
<tbody>
<tr>
<td
style="border-left:none; background-color: #ECF3FA; font-family: NotoSansJP-Regular">
見出し１</td>
<td>コンテンツ３の内容が入ります。 </td>
<td>コンテンツ３の内容が入ります。</td>
<td>コンテンツ３の内容が入ります。</td>
</tr>
<tr>
<td
style="border-left:none; background-color: #ECF3FA; font-family: NotoSansJP-Regular">
見出し2</td>
<td>コンテンツ３</td>
<td>コンテンツ３</td>
<td>コンテンツ３</td>
</tr>
</tbody>
</table>
</div>
<div class="table-tile-2">4列 20%20%20%40%</div>
<div class="table-content-2">
<table class="table-item-2">
<thead>
<tr>
<th style="width: 20%; border-left: none; background-color: #ECF3FA">width20%設定
</th>
<th style="width: 20%">width20%設定</th>
<th style="width: 20%">width20%設定</th>
<th style="width: 40%">width40%設定</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-left: none; background-color: #ECF3FA">基本は左揃え</td>
<td>マルチエクスペリエンスを向上するアバイアのコンタクトセンターソリューション</td>
<td>マルチエクスペリエンスを向上するアバイアのコンタクトセンターソリューション</td>
<td>マルチエクスペリエンスを向上するアバイアのコンタクトセンターソリューション</td>
</tr>
</tbody>
</table>
</div>
<div class="table-tile">
<img src="./img/icon.png">
<span>多くのSaaS関係者はこのことを体感していますが、明確に意識している人は少ないかもしれません。社内のビジネスサイドの方から「うちのプロダクトはROIを問われたときに弱い」といった会話が出てくるのであれば、この2つの概念を正しく理解していない可能性があります。</span>
</div>
<div class="table-tile-3">横スクロールあり</div>
<div class="table-content-3">
<table class="table-item-3">
<tbody>
<tr>
<td style="width: calc(40 / 140 * 100%);background-color: #ECF3FA">
width40%に設定することで見た目を整えることができます。左右パディング25pxあくように改行していきます。</td>
<td style="width: calc(20 / 140 * 100%)">width20%に設定。上下中央クラス設定</td>
<td style="width: calc(40 / 140 * 100%)">
width40%に設定することで見た目を整えることができます。左右パディング25pxあくように改行していきます。</td>
<td style="width: calc(40 / 140 * 100%)">
width40%に設定することで見た目を整えることができます。左右パディング25pxあくように改行していきます。</td>
</tr>
</tbody>
</table>
</div>
<div class="table-content-4">
<table class="table-item-4">
<thead>
<tr>
<th style="width: 132px; border-left:none; border-top-left-radius: 7px; ">
</th>
<th style="width: 283px; text-align: left">ThがあるVer 左寄せ</th>
<th style="width: 283px; text-align: center">ThがあるVer 左寄せ</th>
<th style="width: 283px; text-align: center">ThがあるVer 左寄せ</th>
<th style="width: 283px; text-align: right; border-top-right-radius: 5px;">
ThがあるVer 左寄せ</th>
</tr>
</thead>
<tbody>
<tr>
<td
style="border-left:none; background-color: #ECF3FA; font-family: NotoSansJP-Regular">
見出し１</td>
<td>コンテンツ３の内容が入ります。 </td>
<td>コンテンツ３の内容が入ります。</td>
<td>コンテンツ３の内容が入ります。</td>
<td>コンテンツ３の内容が入ります。</td>
</tr>
<tr>
<td
style="border-left:none; background-color: #ECF3FA; font-family: NotoSansJP-Regular">
見出し2</td>
<td>コンテンツ３</td>
<td>コンテンツ３</td>
<td>コンテンツ３</td>
<td>コンテンツ３</td>
</tr>
</tbody>
</table>
</div>
<!-- End Tables -->
<!-- Tab links -->
<div class="tabs">
<button class="tablinks active" data-electronic="allproducts">ライトサクセス（業務課題）</button>
<button class="tablinks"
data-electronic="Microcontrollers">ディープサクセス（経営課題）<br>２タブなら最大５８文字入る想定です。</button>
</div>
<!-- Tab content -->
<div class="wrapper_tabcontent">
<div id="allproducts" class="tabcontent active">
<p>多くのSaaS関係者はこのことを体感していますが、明確に意識している人は少ないかもしれません。社内のビジネスサイドの方から「うちのプロダクトはROIを問われたときに弱い」といった会話が出てくるのであれば、この2つの概念を正しく理解していない可能性があります。
</p>
</div>
<div id="Microcontrollers" class="tabcontent">
<p>blackpink in your area</p>
</div>
</div>
<!--next new-->
<div class="next-new">
<div class="news-item-6">
<div class="news-title-6">プロダクトの特徴と2つのサクセスの関係</div>
<div class="news-content-6">
<p style="margin-bottom: 60px">
「ライトサクセス／ディープサクセス」の考え方は独自に考案したもので、国内外のSaaSやカスタマーサクセス界隈において一般的というわけではありません。</p>
<p>私は長らくSansanのカスタマーサクセス部門で戦略立案に携わる傍ら、カスタマーサクセスの情報発信にも力を入れてきました。発信する情報はSansanで養われ、鍛えられたCSメソッドの数々です。すると、こんなご意見をいただくことがありました。
</p>
</div>
</div>
<div class="news-item-7">
<div class="news-title-7">ライトサクセスとディープサクセスの発生パターン</div>
<div class="news-content-7">ライトサクセス（現場が喜ぶ）</div>
<div class="news-7-li">名刺を持ち歩かなくてよくなる</div>
<div class="news-7-li">名刺フォルダーでデスク周りがかさばらない</div>
<div class="news-7-li">名刺をもらった相手の連絡先をクラウド上で管理し、スマホから閲覧できる</div>
<div class="news-7-span">
<img src="img/icon.png">
<span>また、SaaSというものは元来、特定業務の問題を解決するためにサービス化されているので、顧客が真に望むビジネスサクセスを一つのSaaSだけで達成するのは、そもそも無理があるのです。</span>
</div>
<div class="news-7-span">
<img src="img/icon1.png">
<span>先ほども書いたとおり、一つのSaaSで提供できるサクセスには限界があり、それがディープサクセス状態とまで言えないことは往々にしてあります。このような場合、プロダクトが解決すべき問題領域を広げることによってディープサクセスの「深さ」と「広さ」を向上させる手があります。</span>
</div>
</div>
<div class="news-item-8">
<div class="news-title-8">ディープサクセス（経営が喜ぶ）</div>
<div class="news-content-8">1. これはダミーです。文字の大きさ、量、字間、行間などを確認するために入れています。</div>
<div class="news-content-8">2. liとliの間は18px。フォントサイズ16pxが標準設定です。</div>
<div class="news-8-span" style="margin-bottom: 45px">
<img src="img/icon.png">
<span>また、SaaSというものは元来、特定業務の問題を解決するためにサービス化されているので、顧客が真に望むビジネスサクセスを一つのSaaSだけで達成するのは、そもそも無理があるのです。</span>
</div>
<div class="news-8-span" style="margin-bottom: 25px">
<img src="img/icon1.png">
<span>先ほども書いたとおり、一つのSaaSで提供できるサクセスには限界があり、それがディープサクセス状態とまで言えないことは往々にしてあります。このような場合、プロダクトが解決すべき問題領域を広げることによってディープサクセスの「深さ」と「広さ」を向上させる手があります。</span>
</div>
</div>
</div>
<div class="text-block">
<div class="text-block-content">
文章強調のブロック。このフォントは標準フォントサイズ16pxです。他にも用意したフォントサイズで使用できますが。背景色のグレーのマージンは40pxで変わりません。
</div>
</div>
<div class="img-new">
<img src="img/img1.png" alt="">
<img src="img/img2.png" alt="">
<img src="img/img3.png" alt="">
<img src="img/img4.png" alt="">
<div class="img-tile">
キャプション付きの場合下に表示されます。最大２行を超えない方が美しいかと思います。最大文字数で３９文字程度で２行に収まります。レスポンシブで最大８０文字です
</div>
</div>
<div class="quote">
<p class="quote-content">
標準本文フォントサイズ16px。Newsと同じフォント設定です。ｐブロックをわけるとマージンボトムに30pxはいります。文字の大きさ、量、字間、行間などを確認するために入れています。
</p>
</div>
<div class="quote-url">引用：<a class=""
href="https://www.youtube.com/watch?v=9jzugIzksag&ab_channel=%EC%8A%A4%EB%B8%8C%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%8C%9DXINKIGAYO">引用元の書籍の公式URLや、参考ページURLを記載。リンクあり</a>
</div>
<!--end next new-->
<!-- List new -->
<div class="list_new">
<div class="list_new_item">
<div class="item_icon">
<ion-icon name="arrow-back-outline"></ion-icon>
</div>
<div class="item_img">
<img src="img/list-new.png" alt="">
</div>
<div class="item_content">
SaaS企業の「最初の100人」をどう選ぶ？SaaS企業の「最初の100人」をどう選ぶ？SaaS企業の「最初…
</div>
</div>
<div class="list_new_item">
<div class="item_content">
SaaS企業の「最初の100人」をどう選ぶ？
</div>
<div class="item_img">
<img src="img/list-new.png" alt="">
</div>
<div class="item_icon">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</div>
</div>
<!-- End List new -->
<!-- Related posts -->
<div class="related_post">
<div class="related_post_tile">
<ion-icon name="remove-outline"></ion-icon>
<span> 関連記事</span>
<ion-icon name="remove-outline"></ion-icon>
</div>
<div class="related_post_item">
<div class="post_img">
<img src="img/related-post.png" alt="">
</div>
<div class="post_content">
<a href="#">米国SaaS上場企業58社から徹底分析！「成功する創業チーム」の6タイプ＆3つの要点が見えてきた</a>
</div>
</div>
<div class="related_post_item">
<div class="post_img">
<img src="img/related-post.png" alt="">
</div>
<div class="post_content">
<a href="#">未経験からCSへ挑戦！“SaaSの最重要課題”に取り組める環境はキャリアの可能性を広げる：ログラス・矢納弘貴の仕事。最大文字数６９文字で…</a>
</div>
</div>
<!-- End Related posts -->
</div>
<!-- Button -->
<div class="button_list">
<button class="button1">コラム一覧へ <ion-icon style="padding-left: 30px ;"
name="arrow-forward-outline">
</ion-icon></button>
</div>
<div class="scrollToTop">
<div class="scrollToTop_item top">
<span>お問い合わせ</span>
</div>
<button onclick="topFunction()" class="scrollToTop_item bottom">
<ion-icon class="button_icon" id="myBtn" name="chevron-up-outline"></ion-icon>
<span>TOP</span>
</button>
</div>
</div>
</div>
<!-- End Main Content -->
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer_item top">
<div class="item_img">
<img src="img/footer.png" alt="">
</div>
<div class="item_contact">
<p>Contact</p>
<span>altcircleに関連するお問い合わせはお気軽にご連絡ください。</span>
<button>
<ion-icon name="arrow-forward-outline"></ion-icon>
</button>
</div>
</div>
<div class="footer_item bottom">
<div class="item_row">
<img src="./img/logo1.png" alt="">
</div>
<div class="item_row list">
<div class="row_item">
<h3>お知らせ</h3>
<h3>altcircleとは</h3>
<h3>解決する課題</h3>
<h3>サービス</h3>
<ul>
<li>マーケティング戦略策定</li>
<li>デジタルコミュニケーション</li>
<li>デジタルコンテンツ</li>
<li>エンタープライズEC</li>
<li>コンタクトセンター</li>
<li>データプラットフォーム</li>
<li>ビジネスプロセスアウトソーシング</li>
</ul>
<h3>コラム</h3>
</div>
<div class="row_item">
<h2>お問い合わせ</h2>
<h2>会社情報</h2>
<h2>個人情報保護への取り組み</h2>
</div>
</div>
<div class="item_row">
<p>powered by SCSK</p>
</div>
<div class="item_row">
<p>※本WEBサイトに記載の社名および製品名は各社の商標または登録商標です。</p>
</div>
</div>
</footer>
<!-- End footer -->
</div>
</body>
</html>
<script>
// Get the button:
let mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
//
var tabLinks = document.querySelectorAll(".tablinks");
var tabContent = document.querySelectorAll(".tabcontent");
tabLinks.forEach(function (el) {
el.addEventListener("click", openTabs);
});
function openTabs(el) {
var btn = el.currentTarget; // lắng nghe sự kiện và hiển thị các element
var electronic = btn.dataset.electronic; // lấy giá trị trong data-electronic
tabContent.forEach(function (el) {
el.classList.remove("active");
});
tabLinks.forEach(function (el) {
el.classList.remove("active");
});
document.querySelector("#" + electronic).classList.add("active");
btn.classList.add("active");
}
</script>