PageSourceSearch

https://skillhub.jp/premium_services

html skillhub.jp collected 2026-09-24 18:10:51 UTC 95,978 bytes, 3,122 lines download raw bytes

1<!DOCTYPE html>
2<html>
3  <head>
4        
5      
5<script>
6    window.dataLayer = window.dataLayer || [];
7    function gtag(){ dataLayer.push(arguments); }
8    gtag('js', new Date());
9  </script>
vendor: 66 bytes, lines 9-10
9
10  <script async src="https://www.googletagmanager.com/gtag/js?id=
10UA-174188571-1
vendor: 14 bytes, lines 10-11
10"></script>
11  
11<script>
12    gtag('config', 'UA-174188571-1', {
13      send_page_view: false,
14      page_location: window.location.href,
15      page_path: window.location.pathname
16    });
17    gtag('config', 'AW-979348047', {
18      send_page_view: false
19    });
20
21    function sendGAPageView() {
22      if (typeof gtag === 'function') {
23        gtag('event', 'page_view', {
24          page_title: document.title,
25          page_location: window.location.href,
26          page_path: window.location.pathname
27        });
28      }
29    }
30
31    if (document.readyState === 'loading') {
32      document.addEventListener('DOMContentLoaded', function() {
33        sendGAPageView();
34      });
35    } else {
36      sendGAPageView();
37    }
38
39    document.addEventListener('turbolinks:load', function() {
40      if (window._gaFirstLoadSent) {
41        sendGAPageView();
42      }
43      window._gaFirstLoadSent = true;
44    });
45
46    window.addEventListener('pageshow', function(event) {
47      if (event.persisted) {
48        sendGAPageView();
49      }
50    });
51  </script>
51
52
53
54<script
55  src="https://browser.sentry-cdn.com/10.53.1/bundle.min.js"
56  integrity="sha384-jbb7+utXq5l+9udWjHUovKZyfWANLtC8QnVwrXU9YoCcldAlU6XJFdTHWdn2wFjk"
57  crossorigin="anonymous"
58></script>
vendor: 1 bytes, line 58
58
59<script>
60  // browser.sentry-cdn.com is on EasyPrivacy and on corporate blocklists, and
61  // the SRI hash above has never been verified against a real production load.
62  // Either one leaves Sentry undefined, and an unguarded init would throw on
63  // every public page.
64  window.Sentry && Sentry.init({
65    dsn: "https://962adf2235fc614ee5627891c481cd4f@o4511394826551296.ingest.de.sentry.io/4511394832777296",
66    tracesSampleRate: 0.0,
67    ignoreErrors: [
68      /NavigationDuplicated/,
69      /sessionStorage/,
70      /ownerDocument/,
71      /document\.body\.scrollHeight/,
72      /module\.exports/,
73      /input is not defined/,
74      /backdrop/,
75      // Wallet extensions injected into the page, not our code.
76      /Failed to connect to MetaMask/,
77      /runtime\.sendMessage/,
78      /This script should only be loaded in a browser extension/,
79    ],
80    denyUrls: [
81      /code-prettify/,
82      /run_prettify/,
83      /cdn\.rawgit\.com/,
84      // Browser extensions run in our page but are not ours to fix.
85      /^chrome-extension:\/\//,
86      /^moz-extension:\/\//,
87      /^safari-extension:\/\//,
88      /^safari-web-extension:\/\//,
89    ],
90  });
91</script>
vendor: 1 bytes, line 91
91
92<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
vendor: 1 bytes, line 92
92
93<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
93
94
95<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" data-turbolinks-track="reload" defer="defer"></script>
vendor: 1 bytes, line 95
95
96<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" defer></script>
96
97
98<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
99
100<link rel="preload" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/fonts/materialdesignicons-webfont.woff2?v=7.4.47" as="font" type="font/woff2" crossorigin>
101<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
102
103  <link rel="shortcut icon" type="image/x-icon" href="https://popshub.s3.amazonaws.com/uploads/school_design/favicon-16x16.png">
104
105<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/xcode.min.css">
106
107
108  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
109  
109<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous" defer></script>
109
110  <link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
111  
111<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
111
112  <link rel="stylesheet" href="/assets/application-2491e415f524528edfbf7bd65141e96148c3c5e0e4cfeefdf0f589bc353a79ef.css" media="all" data-turbolinks-track="reload" />
113  
113<script src="/assets/application-a81d0f7350f6888c876a5acb6a4847adce3c63a3e790d0584c3aaddd2d01df7a.js" data-turbolinks-track="reload"></script>
113
114
115
116
117
118  <link rel='canonical' href='https://skillhub.jp/premium_services' >
119
120<meta name="action-cable-url" content="/cable" />
121<meta name="csrf-param" content="authenticity_token" />
122<meta name="csrf-token" content="zN9y15CG5Y4MPaSIEylvo4YXmPDabHfyMlkkUNNJzgyaA45bz2kITNSnGZShqU_czdDr3CfCEQ75VJsTatGZ0Q" />
123
124
125<meta name="viewport" content="width=device-width, initial-scale=1">
126<meta name="current-user" id="">
127
128  <link rel="shortcut icon" type="image/x-icon" href="https://popshub.s3.amazonaws.com/uploads/school_design/favicon-16x16.png">
129
130<!-- Facebook Pixel Code -->
131<script>
vendor: 417 bytes, lines 131-140
131
132  !function(f,b,e,v,n,t,s)
133  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
134  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
135  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version="2.0";
136  n.queue=[];t=b.createElement(e);t.async=!0;
137  t.src=v;s=b.getElementsByTagName(e)[0];
138  s.parentNode.insertBefore(t,s)}(window, document,"script",
139  "https://connect.facebook.net/en_US/fbevents.js");
140  fbq("init", "
1401694029527521000
vendor: 32 bytes, lines 140-141
140");
141  fbq("track", "PageView");
142</script>
142
143<noscript>
144  <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1694029527521000&ev=PageView&noscript=1"/>
145</noscript>
146<!-- End Facebook Pixel Code -->
vendor: 121 bytes, lines 146-152
146
147
148
149
150    
151    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
152      
152<style>
153                
154@charset "utf-8";
155/* ============================================== 
156/ setting
157/============================================== */
158:root{
159  /* color */
160  --color_ThemeMain: #AA3200; /* 赤 */
161  --color_ThemeAuxiliary: #333333; /* 濃灰 */
162  --color_ThemeAccent: #006837; /* 緑 */
163  --color_ThemeLight: #FEFDFC; /* 薄灰橙 */
164  --color_TextDefault: #212529; /* 炭黒 */
165  --color_ThemeGradient: linear-gradient(90deg, #AA3200 0%, #AA3200 50%, #333333 50%, #333332 100%);
166
167  /* space */
168  --space_lg: 4rem;
169  --space_xl: 6rem;
170  --space_xxl: 8rem;
171  --space_xxxl: 10rem;
172  --font_Themedefault: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
173}
174
175/* --- color class --- */
176.text-ThemeMain,
177.text-ThemeMain a{
178  color: var(--color_ThemeMain) !important;
179}
180
181.bg-ThemeMain{
182  background-color: var(--color_ThemeMain);
183}
184
185.bg-ThemeAuxiliary{
186  background-color: var(--color_ThemeAuxiliary);
187}
188
189.bg-ThemeLight{
190  background-color: var(--color_ThemeLight);
191}
192
193.bg-greige{
194  background-color: #EDEBE0;
195}
196
197/* --- base style --- */
198body{
199  background: url('https://dhswdprqs3xi.cloudfront.net/images/3349/original.png')!important;
200  color: var(--color_TextDefault);
201  font-family: var(--font_Themedefault);
202  font-weight: 400;
203  line-height: 1.75em;
204  letter-spacing: .02em;
205}
206
207#page-content aside {
208  background-color: transparent !important;
209}
210
211#contentsMain,
212#contentsMain p{
213  font-size: 16px;
214  line-height: 1.8;
215}
216
217h1, h2, h3, h4, h5, h6,
218strong, .strong, .font-weight-bold{
219  font-family: var(--font_Themedefault);
220  font-weight: bold;
221  line-height: 1.8;
222}
223
224#contentsMain .top-copy{
225  font-size: 2rem;
226  line-height: 1.5;
227  font-weight: 500;
228}
229
230/* --- space --- */
231.mt-lg{
232  margin-top: var(--space_lg) !important;
233}
234.mt-xl{
235  margin-top: var(--space_xl) !important;
236}
237.mt-xxl{
238  margin-top: var(--space_xxl) !important;
239}
240.mt-xxxl{
241  margin-top: var(--space_xxl) !important;
242}
243.mb-lg{
244  margin-bottom: var(--space_lg);
245}
246.mb-xl{
247  margin-bottom: var(--space_xl);
248}
249.mb-xxl{
250  margin-bottom: var(--space_xxl);
251}
252.mb-xxxl{
253  margin-bottom:  var(--space_xxxl);
254}
255
256/* --- Strong Number --- */
257#contentsMain .bignumber{
258  color: var(--color_ThemeAuxiliary);
259  font-size: 4em;
260  margin-right: .85rem;
261}
262#contentsMain .mednumber {
263  color: var(--color_ThemeAuxiliary);
264  font-size: 3em;
265  padding-top: 5px;
266  line-height: 0.5em;
267}
268
269/* --- Button Design --- */
270.btn-signup{
271  background-color: var(--color_ThemeAccent);
272  color: #fff;
273}
274
275.free-signup,
276.premium-signup,
277.inquiry-btn{
278  display: inline-block;
279  min-width: 240px;
280  max-width: 100%;
281  margin: auto;
282  border-radius: 40px;
283  color: #fff;
284  font-family: var(--font_Themedefault);
285  font-weight: 600;
286  font-size: 1.15em;
287  text-align: center;
288  padding: 1rem 1.2rem;
289  box-shadow: 0px 0px 0px 2px #FFF;
290  text-decoration: none;
291}
292
293.free-signup{
294  background-color: var(--color_ThemeAccent);
295}
296.premium-signup{
297  background-color: #0071BA;
298}
299
300.inquiry-btn{
301  background-color: var(--color_ThemeAuxiliary);
302}
303
304.btn:hover{
305  opacity: .8;
306  transition: 200ms;
307}
308
309a.free-signup:hover,
310a.premium-signup:hover,
311.inquiry-btn:hover{
312  color: #FFF;
313  text-decoration: none;
314  filter: brightness(1.25);
315}
316
317/* --- other --- */
318.w-750{
319  max-width: 750px;
320}
321
322.w-850{
323  max-width: 850px;
324}
325
326.w-1200{
327  max-width: 1200px;
328}
329
330ul.course-check{
331  margin: 3.5rem; 
332  max-width: 560px;
333  font-size: 1.4rem;
334}
335
336ul.course-check li{
337  background: url("https://dhswdprqs3xi.cloudfront.net/images/3358/original.svg") left 0px top 3px no-repeat;
338  background-size: 1.4rem auto;
339  margin-bottom: 1.5rem;
340  padding-left: 30px;
341  line-height: 1.2em;
342}
343
344/* ============================================== 
345/ 講座カルーセル表示
346/============================================== */
347.catalog-views .card{
348  border-radius: 10px;
349}
350
351.catalog-views .card a {
352  color: var(--color_ThemeMain);
353}
354
355.catalog-views .course-image,
356.catalog-views .card-title{
357  width: 80%;
358}
359
360.catalog-views  .course-image{
361  max-width: 200px;
362  height: 200px;
363  background-image: var(--course-images), url('https://dhswdprqs3xi.cloudfront.net/images/3365/original.png');
364  background-size: cover;
365  background-position: center;
366  margin: 40px auto 25px auto;
367}
368
369.catalog-views .card-title{
370  max-width: 320px;
371  overflow: hidden;
372  white-space: nowrap;
373  text-overflow: ellipsis;
374  margin: 0 auto;
375  text-decoration: none;
376}
377
378.catalog-views .card .btn-more {
379  background-color: #F6EAE5;
380}
381
382.swiper-pagination-bullet-active{
383  background-color: var(--color_ThemeMain);
384}
385
386/* 前後ボタン */
387.catalog-views .swiper-button-next,
388.catalog-views .swiper-button-prev{
389  position: absolute;
390  width: 48px;
391  height: 48px;
392  margin-top: calc(-40px - (var(--swiper-navigation-size)/ 2));
393  background-color: var(--color_ThemeLight);
394  border-radius: 50%;
395  box-shadow: 0 0 0 2px var(--color_ThemeMain);
396}
397
398.swiper-button-next::after,
399.swiper-button-prev::after{
400  --swiper-navigation-size: 21px;
401  color:  var(--color_ThemeMain);
402}
403
404.catalog-views .swiper-button-prev{
405  left: -1.25rem;
406}
407
408.catalog-views .swiper-button-next{
409  right: -1.25rem;
410}
411
412.catalog-views .color-ThemeAuxiliary.swiper-button-next,
413.catalog-views .color-ThemeAuxiliary.swiper-button-prev{
414  box-shadow: 0 0 0 2px var(--color_ThemeAuxiliary);
415}
416
417.color-ThemeAuxiliary.swiper-button-next::after,
418.color-ThemeAuxiliary.swiper-button-prev::after{
419  color:  var(--color_ThemeAuxiliary);
420}
421
422/* ============================================ 
423/ 枠線付きカードデザイン
424/============================================ */
425.card-color{
426  width: 100%;
427  border-radius: 10px;
428  border: none;
429}
430
431.card-color a{
432  color: #000;
433  text-decoration: none;
434}
435
436.card-color .mini-card-title{
437  font-size: 1rem;
438  width: 100%;
439  overflow: hidden;
440  display: -webkit-box;
441  text-overflow: ellipsis;
442  -webkit-box-orient: vertical;
443  -webkit-line-clamp: 2;
444}
445
446.card-color .card-footer{
447  border-top: none;
448  border-radius: 0 0 10px 10px;
449}
450
451.card-color hr{
452  position: relative;
453  margin-top: 0;
454  margin-bottom: -1px;
455}
456
457.card-color .card-footer-text{
458  font-size: 14px;
459}
460
461/* card 色分け */
462.card-ThemeMain{
463  box-shadow:0 0 0 3px var(--color_ThemeMain);
464}
465.card-ThemeMain .card-footer{
466  background: #F8EEEA;
467}
468.card-ThemeMain .card-footer-text,
469.card-ThemeMain .material-icons{
470  color: var(--color_ThemeMain);
471}
472.card-ThemeMain hr{
473  border-top: 1px solid var(--color_ThemeMain);
474}
475
476.card-ThemeAuxiliary{
477  box-shadow:0 0 0 3px var(--color_ThemeAuxiliary);
478}
479.card-ThemeAuxiliary .card-footer{
480  background: #E6E6E6;
481}
482.card-ThemeAuxiliary .card-footer-text,
483.card-ThemeAuxiliary .material-icons{
484  color: var(--color_ThemeAuxiliary);
485}
486.card-ThemeAuxiliary hr{
487  border-top: 1px solid var(--color_ThemeAuxiliary);
488}
489
490/* カード画像 */
491.courses-list .card-img,
492.blogs .card-img{
493  position: relative;
494  overflow: hidden;
495  height: auto;
496  width: 100%;
497  height:160px;
498}
499
500.courses-list .card-img img,
501.blogs .card-img img{
502  position: absolute;
503  top: 50%;
504  left: 50%;
505  transform: translate(-50%, -50%);
506  width: auto;
507  height: 100%;
508  object-fit: cover;
509}
510
511
512/* ============================================== 
513/ 固定表示
514/============================================== */
515/* top, offcanvas表示*/
516.sp-nav {
517  position: fixed;
518  color: #fff;
519  right: -0.5rem;
520  bottom: 75px;
521/*   visibility: hidden; */
522  transform: translateX(120px);
523  opacity: 0;
524  transition: all 0.6s ease-in-out;
525  z-index: 10;
526}
527
528.sp-nav.show {
529  transform: translateX(0);
530  opacity: 1;
531}
532
533.sp-nav .material-icons-outlined{
534  font-size: 28px;
535}
536
537/* ページ下部固定表示*/
538.bottomFixed{
539  position: fixed;
540  bottom: 0;
541  width: 100%;
542  background-color: rgba(255, 255, 255, .65);
543  backdrop-filter: blur(3px);
544  visibility: hidden;
545  opacity: 0;
546  transition: all 0.6s ease-in-out;
547  z-index: 9;
548}
549
550.bottomFixed.show {
551  visibility: visible;
552  opacity: 1;
553}
554
555
556
557
558/* =========================== 
559/ お客様の声カード
560/=========================== */
561.card-seito{
562  --seitoColor: #006837;
563  height: 100%;
564  box-shadow: 0px 5px 0px 0px var(--seitoColor) inset,
565              0px -5px 0px 0px var(--seitoColor) inset,
566              2px 5px 8px 2px rgb(0 0 0 / 15%);
567}
568
569.card-seito img{
570  width: 80%;
571  height: auto;
572}
573/* ============================================== 
574/ CTA, クロージング
575/============================================== */
576/* 吹き出し型 */
577.closing{
578  position: relative;
579  background-color: var(--color_ThemeMain);
580  padding: 0 5rem;
581}
582
583.closing::before{
584  content: '';
585  position: absolute;
586  top: -40px;
587  left: 50%;
588  display: block;
589  width: 0;
590  height: 0;
591  border-style: solid;
592  border-width:  0 25px 43.3px 25px;
593  border-color: transparent transparent var(--color_ThemeMain) transparent;
594  margin-left: -25px;
595}
596
597.closing-ThemeAuxiliary{
598  background-color: var(--color_ThemeAuxiliary);
599}
600
601.closing-ThemeAuxiliary::before{
602  border-color: transparent transparent var(--color_ThemeAuxiliary) transparent;
603}
604
605/*中身*/
606.closing p{
607  font-size: 0.9rem;
608  margin-bottom: 0;
609}
610
611.closing-img img{
612  max-width: 100%;
613  height: auto;
614}
615
616.closing-main{
617  position: relative;
618  display: inline-block;
619}
620
621.closing-deadline{
622  position: absolute;
623  top: 5px;
624  right: -192px;
625  border-radius: 50%;
626  width: 165px;
627  height: 165px;
628  padding: 10px;
629  box-shadow: 0px 0px 0px 2px #FFF;
630}
631
632.closing-deadline-inner{
633  width: calc(100% - 2px);
634  letter-spacing: 0;
635  line-height: 1.5;
636  transform: scale(0.9);
637}
638
639.closing-deadline-inner hr{
640  margin: .5rem 0;
641  border-color: #FFF;
642}
643
644.closing-deadline .col-4,
645.closing-deadline .col-8{
646  margin: 0;
647  padding: 0;
648}
649
650.closing-deadline .mini,
651.closing-deadline small,
652.closing-deadline .small{
653  font-size: .75rem;
654}
655
656
657/* グリッドの場合 */
658.cta-grid{
659  display: grid;
660  grid-template-columns: 240px auto 200px;
661  grid-template-rows: repeat(3, auto);
662}
663
664.cta-grid_title{
665  grid-column: 2 / 4;
666  grid-row: 1 / 2;
667}
668
669.cta-grid_img{
670  grid-column: 1 / 1;
671  grid-row: 1 / 4;
672}
673
674.cta-grid_text{
675  grid-column: 2 / 3;
676  grid-row: 2 / 3;
677}
678
679.cta-grid_btm{
680  grid-column: 2 / 3;
681  grid-row: 3 / 4;
682}
683
684.cta-grid_deadline{
685  grid-column: 3 / 4;
686  grid-row: 2 / 4;
687}
688
689.cta-grid_deadline .closing-deadline{
690  position: static;
691}
692.cta-grid_deadline .closing-deadline{
693  position: static;
694}
695
696/* ============================================== 
697/ footer
698/============================================== */
699.footer {
700  position: relative;
701  overflow: hidden;
702  width: 100%;
703  background-color: var(--color_ThemeAuxiliary);
704  padding: 60px 0;
705  color: white;
706  z-index: 11
707}
708
709.footer a{
710  color: white;
711  text-decoration: none;
712}
713
714
715/* ============================================== 
716/ 第2,第3階層共通
717/============================================== */
718.top-line{
719  background: var(--color_ThemeGradient);
720  width: 100%;
721  height: 1.2rem;
722}
723
724.sp-nav {
725  position: fixed;
726  visibility: hidden;
727  color: #fff;
728  right: -0.5rem;
729  bottom: 15px;
730  opacity: 0;
731  transition: all 0.6s ease-in-out;
732  z-index: 10;
733}
734
735.sp-nav.show {
736  visibility: visible;
737  opacity: 1;
738}
739
740.sp-nav .material-icons-outlined{
741  font-size: 28px;
742}
743
744/* ================================ 
745/ 角丸吹き出し
746/================================ */
747.comment{
748  position: relative;
749  width: 90%;
750  max-width: 660px;
751  margin-bottom: 7.5rem;
752  padding: 2rem 1rem;
753  color: white;
754  text-align: center;
755  border-radius: 40px;
756}
757
758.comment::before{
759  content: '';
760  position: absolute;
761  top: -29px;
762  left: 50%;
763  display: block;
764  width: 0;
765  height: 0;
766  border-style: solid;
767  border-width: 0 17.5px 30px 17.5px;
768  margin-left: -17.5px;
769}
770
771#contentsMain .comment h3{
772  color: #FFF;
773  font-size: 2rem;
774  font-weight: 500;
775}
776
777#contentsMain .comment-gray h3 span{
778  line-height: 1.5;
779  font-size: 1.7rem; 
780}
781
782.comment-ThemeMain{
783  background: var(--color_ThemeMain);
784}
785.comment-ThemeMain::before{
786  border-color: transparent transparent var(--color_ThemeMain) transparent;
787}
788
789.comment-gray{
790  background: var(--color_ThemeAuxiliary);
791}
792.comment-gray::before{
793  border-color: transparent transparent var(--color_ThemeAuxiliary) transparent;
794}
795
796/* ================================ 
797/ listページトップ
798/================================ */
799.list-top{
800  position: relative;
801  width: 85%;
802  background: #AA3200;
803  color: white;
804  text-align: center;
805  padding: 2.5rem 2rem;
806  margin: 0 auto;
807  word-break: break-all;
808}
809
810.courses-list h2,
811.blog-list h2{
812  font-size: 1.5rem;
813}
814.courses-list h3,
815.blog-list h3{
816  font-size: 1.38rem;
817}
818
819.list-top h1{
820  line-height: 1.5;
821}
822
823.list-top-gray{
824  background: var(--color_ThemeAuxiliary);
825}
826
827.list-top-back{
828  position: absolute;
829  content: "";
830  width: calc(100% + 2rem * 2);
831  height: 12rem;
832  left: -2rem;
833  z-index: -1;
834  padding: 0 15px;
835}
836
837.list-top-back div{
838  width: 100%;
839  height: 100%;
840}
841
842/* 二色吹き出し */
843.courses .features-about,
844.blogs .features-about{
845  position: relative;
846  background: var(--color_ThemeGradient);
847  display: flex;
848  justify-content: center;
849  align-items: center;
850  width: 100%;
851  min-height: 4rem;
852  margin-top: 50px;
853  padding: .5rem;
854}
855
856.courses .features-about::before,
857.blogs .features-about::before,
858.courses .features-about::after,
859.blogs .features-about::after{
860  content: '';
861  position: absolute;
862  bottom: -30px;
863  display: block;
864  width: 0;
865  height: 0;
866  border-top: 40px solid transparent;
867  border-bottom: 30px solid transparent;
868  z-index: -1;
869}
870.courses .features-about::before,
871.blogs .features-about::before{
872  right: 50%;
873  border-right: 30px solid var(--color_ThemeMain);
874}
875
876.courses .features-about::after,
877.blogs .features-about::after{
878  left: 50%;
879  border-left: 30px solid var(--color_ThemeAuxiliary);
880}
881
882/* ================================ 
883/ listページネーション
884/================================ */
885.courses .pagination,
886.blogs .pagination{
887--bs-pagination-color: var(--color_ThemeAuxiliary);
888--bs-pagination-hover-color: #923f1c;
889--bs-pagination-focus-color: #923f1c;
890--bs-pagination-active-bg: var(--color_ThemeMain);
891--bs-pagination-active-border-color:  var(--color_ThemeMain);
892}
893/* ============================================== 
894/ サイドバー
895/============================================== */
896#contentsMain aside{
897  background: none !important;
898}
899
900
901.side_ThemeMain h3{
902  color:#AA3200;
903  border-bottom: 1px solid var(--color_ThemeMain);
904  margin-bottom: 1rem;
905  padding-bottom: 1rem;
906}
907
908.side-black h3{
909  color: var(--color_TextDefault);
910  border-bottom: 1px solid var(--color_TextDefault);
911  margin-bottom: 1rem;
912  padding-bottom: 1rem;
913}
914
915aside .categories li{
916  margin-bottom: 0.4em;
917}
918
919aside .categories,
920aside .categories a{
921  font-size: .9rem;
922  letter-spacing: 0;
923  text-decoration: none;
924}
925
926.side_ThemeMain .categories,
927.side_ThemeMain .categories a{
928  color: var(--color_ThemeMain);
929}
930
931.side-black .categories,
932.side-black .categories a{
933  color: var(--color_TextDefault);
934}
935
936aside .categories .lessoncount{
937  padding-left: 0.2rem; 
938}
939
940
941/* ============================================== 
942/ コース (.courses)
943/============================================== */
944/* ================================ 
945/ コース一覧 courses-list
946/================================ */
947.courses-list .list-top h1{
948  font-size: 2rem;
949}
950
951.courses-list .features-about::after,
952.courses-list .features-about::before{
953  bottom: -25px;
954}
955
956.courses-list .features-h2{
957  top: -5px;
958}
959
960/* 大カードのみ */
961.courses .card-title{
962  position: relative;
963}
964
965.courses .card-icon{
966  position: absolute;
967  top: -0.5rem;
968  right: 1rem;
969  width: 2.5rem;
970  height: 2.5rem;
971  border-radius: 50%;
972  color: #FFF;
973  text-align: center;
974}
975
976.courses .card-icon-text{
977  position: absolute;
978  margin-top: 0.45rem;
979  margin-left: -0.75rem;
980}
981
982
983
984
985
986/* ============================================== 
987/ BLOG(.blog)
988/============================================== */
989/* ================================ 
990/ blog一覧 ( blog-list)
991/================================ */
992.blog-list{
993  word-break: break-all;
994}
995
996.blog-list h1{
997  font-size: 96px;
998  line-height: 1;
999  letter-spacing: .15em;
1000}
1001
1002.blog-list .features-h2{
1003  font-size: 1.5rem;
1004}
1005
1006.blog-list .features-icon{
1007  position: absolute;
1008  top: -10px;
1009  left: -40px;
1010  background: #006837;
1011  box-shadow: 0px 0px 0px 2px #fff;
1012  width: 80px;
1013  height: 80px;
1014  border-radius: 50%;
1015  color: #FFF;
1016  padding-top: 5px; 
1017}
1018
1019.blog-list .features-icon .mednumber{
1020  margin-right: 0;
1021}
1022
1023.more-blogs{
1024  padding: 0.7rem 1rem;
1025  border-radius: 0;
1026}
1027
1028.blog-list .comment{
1029  min-height: 17rem;
1030  margin-bottom: 3rem;
1031}
1032
1033.blog-list .comment::before{
1034  display: none;
1035}
1036
1037/* ================================ 
1038/ Blog記事 .blog-detail
1039/================================ */
1040.blog-detail .post-meta{
1041  color: var(--color_TextDefault);
1042  border-top: 1px solid var(--color_TextDefault);
1043  border-bottom: 1px solid var(--color_TextDefault);
1044  margin: 1.5rem 0;
1045  padding: 0.7rem 0.5rem;
1046}
1047
1048.blog-detail img{
1049  max-width: 100%;
1050  height: auto;
1051}
1052
1053.blog-detail .post-meta p{
1054  margin-bottom: 0;
1055}
1056
1057.post-meta a,
1058.post-meta a:hover{
1059  color: var(--color_ThemeMain);
1060  text-decoration: none;
1061}
1062
1063/* 記事内のスタイル */
1064.blog-detail .blog-body{
1065  font-size: 1rem;
1066}
1067
1068.blog-detail h1.blogtitle{
1069  margin-top: .75em;
1070  font-size: 2rem;
1071}
1072
1073.blog-detail .blog-body h2{
1074  color: var(--color_ThemeMain);
1075  margin: 3.8rem 0 1.5rem 0;
1076  font-size: 2.2rem;
1077  line-height: 1.55;
1078}
1079
1080.blog-detail .blog-body h3{
1081  font-size: 1.55rem;
1082  margin: 2.5rem 0 1rem 0;
1083}
1084
1085.blog-detail .blog-body h4{
1086  font-size: 1.35rem;
1087  color: var(--color_ThemeAuxiliary);
1088  margin: 2.5rem 0 1rem 0;
1089}
1090
1091.blog-detail .blog-body p{
1092  margin-bottom: 1.8em;
1093  line-height: 2;
1094}
1095
1096.blog-detail .blog-body ol,
1097.blog-detail .blog-body ul{
1098  padding-left: 2em;
1099}
1100
1101.blog-detail .blog-body li{
1102  list-style: inherit;
1103  margin-bottom: 0.5em;
1104  line-height: 1.6;
1105}
1106
1107.blog-detail .blog-body img{
1108  padding: 5px;
1109  box-shadow: 0 0 0 1px #f3f3f3;
1110  margin: 1em auto;
1111  max-width: 100%;
1112  height: auto;
1113}
1114
1115.blog-detail .blog-body img.no-border{
1116  box-shadow: none;
1117}
1118
1119/* ブログ下部 */
1120.blog-detail .comment{
1121  width: 100%;
1122  max-width: 100%;
1123  text-align: left;
1124  padding: 2rem 1.5rem;
1125  margin-top: 2.6rem;
1126}
1127
1128.blog-detail .comment::before{
1129  display: none;
1130}
1131
1132.blog-detail .closing-deadline{
1133  position: static;
1134  display: flex;
1135  flex-direction: column;
1136  align-items: center;
1137  justify-content: center;
1138  border-radius: 50%;
1139  width: 170px;
1140  height: 170px;
1141  margin: 0 auto;
1142  padding: 10px;
1143  box-shadow: 0px 0px 0px 2px #fff;
1144}
1145
1146/* 前後記事へ */
1147.blog-detail .pre-nex{
1148  border-top: 2px solid var(--color_ThemeAuxiliary);
1149  border-bottom: 2px solid var(--color_ThemeAuxiliary);
1150  margin: 4rem 1.5rem;
1151  padding: 0.7rem 0.5rem;
1152}
1153
1154.blog-detail .pre-nex .prev,
1155.blog-detail .pre-nex .next{
1156  display: flex;
1157  flex:  0 0 50%;
1158}
1159
1160.blog-detail .pre-nex .prev{
1161  border-right: 1px solid var(--color_ThemeAuxiliary);
1162}
1163
1164.blog-detail .pre-nex .next-mark,
1165.blog-detail .pre-nex .prev-mark {
1166  font-size: 2rem;
1167  font-family: monospace;
1168  font-weight: bold;
1169  color: var(--color_ThemeAuxiliary);
1170}
1171
1172/* サイド */
1173.blog-detail aside{
1174  order: 2;
1175}
1176
1177.blog-detail aside h2{
1178  font-size: 1.38rem;
1179  border-bottom: 1px solid var(--color_ThemeAuxiliary);
1180}
1181
1182.blog-detail aside .categories {
1183  list-style: none;
1184  padding-left: 0;
1185}
1186
1187.blog-detail aside .categories&gt;li {
1188  position: relative;
1189  padding: 5px 0;
1190  border-bottom: 1px dotted #d7d7d7;
1191}
1192
1193.blog-detail aside .categories&gt;li img{
1194  max-width: 100%;
1195}
1196
1197
1198
1199
1200/* ================================ 
1201/ Footer
1202/================================ */
1203#contentsMain .footer-hr{
1204  border-top: 1px solid #999;
1205  margin-top: 1.4rem;
1206  padding-top: 1em;
1207}
1208
1209.sns-circle {
1210  height: 1.5em;
1211  width: 1.5em;
1212  border-radius: 50%;
1213  background: #FFF;
1214  margin: 0 0.5em;
1215  text-align: center;
1216  display: block;
1217}
1218
1219/* =======================================================================
1220==========================================================================
1221                  992px以下(lg以下)の設定
1222==========================================================================
1223======================================================================= */
1224@media(max-width: 992px) {
1225
1226  .comment-ThemeMain,
1227  .comment-gray{
1228   padding: 1.5rem 1rem;
1229  }
1230
1231  .blog-list .blog-list-wrapper{
1232    margin-bottom: 8rem;
1233  }
1234
1235  .blog-list .features-about{
1236    height: 5rem;
1237    font-size: 1.1rem;
1238  }
1239
1240  .blog-list .features-icon{
1241    top: -100px;
1242    left: calc(50% - 40px);
1243  }
1244
1245  .blog-list .features-h2{
1246    font-size: 1.25rem;
1247  }
1248
1249  .blog-detail h1.blogtitle{
1250    font-size: 1.6rem
1251  }
1252
1253  .blog-detail .blog-body h2{
1254    font-size: 1.8rem;
1255  }
1256
1257  .blog-detail .blog-body h3{
1258    font-size: 1.5rem;
1259    line-height: 1.6;
1260    margin: 2.8rem 0 1rem 0;
1261  }
1262
1263  .blog-detail .blog-body h4{
1264    font-size: 1.25rem;
1265    color: #333;
1266    margin: 2.25rem 0 1rem 0;
1267  }
1268
1269  /* ================================ 
1270  / Closing, CTA
1271  /================================ */ 
1272  .cta-grid{
1273    grid-template-columns: 200px auto 200px;
1274  }
1275
1276  .cta-grid_title {
1277    grid-column: 1 / 5;
1278    grid-row: 1 / 1;
1279    text-align: center;
1280  }
1281
1282  .cta-grid_text {
1283    grid-column: 2 / 4;
1284  }
1285
1286  .cta-grid_img {
1287    grid-row: 2 / 4;
1288  }
1289
1290  .cta-grid_deadline{
1291    grid-row:  2 / 3;
1292    grid-column: 4 / 5;
1293  }
1294
1295  .cta-grid_btm{
1296    grid-column: 2 / 5;
1297    grid-row: 3 / 4;
1298  }
1299
1300
1301}/* @media */
1302
1303/* =======================================================================
1304==========================================================================
1305                  768以下(スマホ、小タブレット向け)の設定
1306==========================================================================
1307======================================================================= */
1308@media(max-width: 768px) {
1309
1310  #contentsMain h1{
1311    font-size: 1.2rem;
1312  }
1313
1314  #contentsMain .top-copy{
1315    font-size: 1.5rem;
1316  }
1317
1318  #contentsMain .trainer-name{
1319    font-size:1.25rem;
1320  }
1321
1322  .md-inline{
1323    display: block;
1324  }
1325
1326  .md-block{
1327    display: inline;
1328  }
1329
1330  .w-750,
1331  .w-850 {
1332    padding: 0 20px;
1333  }
1334  
1335  /* ================================ 
1336  / Closing, CTA
1337  /================================ */ 
1338  .closing {
1339    padding: 0 20px;
1340  }
1341
1342  .closing-deadline {
1343    position: inherit;
1344    top: 1.5rem;
1345    left: 0;
1346    margin:  0 auto;
1347  }
1348
1349  /* グリッドの場合 */
1350  .cta-grid{
1351    grid-template-columns: 160px auto;
1352  }
1353
1354  .cta-grid_title {
1355    grid-column: 1 / 4;
1356    grid-row: 1 / 2;
1357    text-align: left;
1358  }
1359
1360  .cta-grid_img {
1361    grid-column: 1 / 2;
1362    grid-row: 2 / 4;
1363  }
1364
1365  .cta-grid_text {
1366    grid-column: 2 / 3;
1367    grid-row:  2 / 3;
1368  }
1369  
1370  .cta-grid_deadline{
1371    grid-column: 3 / 4;
1372    grid-row: 2 / 4;
1373  }
1374
1375  .cta-grid_btm{
1376    grid-column: 2 / 3;
1377    grid-row: 3 / 4;
1378  }  
1379
1380  
1381/* =========================== 
1382/ お客様の声カード
1383/=========================== */
1384.card-seito{
1385  --seitoColor: #006837;
1386  height: 100%;
1387  box-shadow: 0px 5px 0px 0px var(--seitoColor) inset,
1388              0px -5px 0px 0px var(--seitoColor) inset,
1389              2px 5px 8px 2px rgb(0 0 0 / 15%);
1390}
1391
1392.card-seito img{
1393  width: 80%;
1394  height: auto;
1395}
1396
1397  .free-signup,
1398  .premium-signup{
1399    width: 90%;
1400    font-size: 1em;
1401  }
1402
1403  /* =========================== 
1404  / カルーセル
1405  /=========================== */
1406
1407  .catalog-views .course-image{
1408    width: 200px;
1409    height: 200px;
1410    margin: 40px auto 25px auto;
1411  }
1412
1413  .catalog-views .card-title{
1414    width: 80%;
1415    max-width: 250px;
1416    height: 3.5em;
1417    margin: 0 auto;
1418  }
1419
1420  .catalog-views .card{
1421    margin-right: 0;
1422  }
1423
1424  /* =========================== 
1425  / クロージング
1426  /=========================== */
1427  .closing {
1428    padding: 0 20px;
1429  }
1430
1431  .closing-deadline {
1432    position: inherit;
1433    top: 1.5rem;
1434    left: 0;
1435    margin:  0 auto;
1436  }
1437
1438  /* =========================== 
1439  / コース一覧
1440  /=========================== */
1441  .courses-list aside{
1442    order: 2;
1443  }
1444
1445  /* 大カードのみ */
1446  .courses .card-title{
1447    position: relative;
1448  }
1449  .courses .card-icon {
1450    top: -1.5rem;
1451    right: 1.2rem;
1452  }
1453  .courses .comment{
1454    width: 100%;
1455    padding: 2rem 1rem;
1456  }
1457
1458  .courses .comment h3{
1459    font-size: 1.6rem;
1460  }
1461
1462  .courses .comment-gray h3 span{
1463    font-size: 1.2rem;
1464  }
1465
1466  /* =========================== 
1467  / ブログ
1468  /=========================== */
1469  .blog-list h1 {
1470    font-size: 3rem;
1471  }
1472
1473  .blog-detail .blog-body ol,
1474  .blog-detail .blog-body ul {
1475      padding-left: 1.5em;
1476  }
1477
1478  .blog-detail .pre-nex .prev{
1479    margin: 0.5em 0 1em;
1480    padding-bottom: 1em;
1481    border-right: none;
1482    border-bottom: 1px solid #333;
1483  }
1484
1485  .blog-detail .comment {
1486    text-align: center;
1487    padding: 1.5rem 1rem;
1488  }
1489
1490}/* @media */
1491
1492/* =================================================================================
1493/* =================================================================================
1494/*                   576px 以下(スマホ)の設定
1495/* =================================================================================
1496/* ============================================================================== */
1497@media(max-width: 576px){
1498  /* ================================ 
1499  / Closing, CTA
1500  /================================ */ 
1501  .closing:has(.container){
1502    padding-left: 0;
1503    padding-right: 0;
1504  }
1505  
1506  
1507  .cta-grid{
1508    grid-template-columns: auto 180px;
1509  }
1510
1511  .cta-grid_title {
1512    grid-column: 1 / 3;
1513    grid-row: 1/2;
1514  }
1515
1516  .cta-grid_text {
1517    grid-column: 1 / 3;
1518    grid-row:  2 / 3;
1519  }
1520
1521  .cta-grid_img {
1522    grid-column: 1 / 2;
1523    grid-row: 3 / 4;
1524  }
1525
1526  .cta-grid_deadline{
1527    grid-column: 2 / 3;
1528    grid-row: 3 / 4;
1529    padding-bottom: 1.8rem;
1530  }
1531
1532  .cta-grid_btm{
1533    grid-column: 1 / 3;
1534    grid-row: 4 / 5;
1535  }
1536
1537}/* @media */
1538
1539
1540
1541:root{
1542  --color_PremiumPlan: #2AB800;
1543}
1544
1545.text-premiumplan,
1546.text-premiumplan a{
1547  color: var(--color_PremiumPlan);
1548  text-decoration: none;
1549}
1550
1551.bg-premiumplan{
1552  /*background-color: var(--color_PremiumPlan);*/
1553}
1554
1555/* プランごとの色 */
1556.premiumplan-freelance{
1557  --color_PremiumPlan: #2AB800;
1558}
1559
1560.premiumplan-startbusiness{
1561  --color_PremiumPlan: #0191D1;
1562}
1563
1564.premiumplan-employment{
1565  --color_PremiumPlan: #01D0B1;
1566}
1567
1568/* ================================ 
1569/ プレミアム一覧 .premiums-list
1570/================================ */
1571.premiums-list .list-top{
1572  max-width: 950px;
1573  background: var(--color_ThemeAuxiliary);
1574}
1575
1576.premiums-list .morepremiums{
1577  text-align: center;
1578  color: #FFF;
1579  border-radius: 10px;
1580  border: none;
1581  padding: 0.5rem 1rem;
1582}
1583
1584.flex-end{
1585  align-items: flex-end;
1586}
1587
1588.premiums-list ul.course-check{
1589  margin: 0;
1590  padding-left: 0;
1591  font-size: 1rem;
1592}
1593
1594.premiums-list ul.course-check li {
1595  margin-bottom: .5rem;
1596  padding-bottom: 4px;
1597} 
1598
1599
1600/* 下向き矢印 */
1601.premium-learn{
1602  position: relative;
1603}
1604
1605.premium-learn::after{
1606  position: absolute;
1607  content: "";
1608  top: auto;
1609  bottom: -1.5rem;
1610  left: calc( 50% - 10px);
1611  width: 20px;
1612  height: 20px;
1613  border-bottom: solid 1px #999;
1614  border-right: solid 1px #999;
1615  transform: rotate(45deg);
1616}
1617
1618.premium-learn:last-child::after{
1619  display: none;
1620}
1621
1622.question{
1623  display: block;
1624  margin-bottom: 1.2rem;
1625}
1626
1627#contentsMain .premiums-list-last .h4{
1628  font-size: 1.5rem;
1629  line-height: 1.3;
1630}
1631
1632.premiums-list-last .h5{
1633  font-size: 1.1rem;
1634  line-height: 1.5;
1635}
1636
1637/* ================================ 
1638/ プレミアムプラン詳細 .premiums-detail
1639/================================ */
1640.premiums-detail{
1641  margin-top: 56.96px;
1642}
1643
1644/* ====== 多分消える
1645/ クロージングはスタイルコピー済なので消してOK ===== */
1646.premiums-detail .features-about {
1647  position: relative;
1648  background: var(--color_ThemeGray);
1649  display: flex;
1650  justify-content: center;
1651  align-items: center;
1652  width: 100%;
1653  margin-bottom: 6rem;
1654  padding: 4rem 1rem;
1655}
1656
1657.premiums-detail .features-about-bg{
1658  position: absolute;
1659  bottom: 0;
1660  width: 100%;
1661  height: 100%;
1662  fill: #AA3200;
1663}
1664
1665.premiums-detail .features-about::before {
1666  content: '';
1667  position: absolute;
1668  right: calc( 50% - 30px);
1669  bottom: -30px;
1670  display: block;
1671  width: 0;
1672  height: 0;
1673  border-top: 50px solid var(--color_ThemeGray);
1674  border-left: 40px solid transparent;
1675  border-right: 40px solid transparent;
1676}
1677
1678.premiums-detail .features-inner{
1679  width: 100%;
1680  max-width: 1050px;
1681  margin: 0 auto;
1682  padding: 4% 6%;
1683}
1684
1685.premiums-detail .features-inner .feature-top-img {
1686  border-radius: 50%;
1687  width: 240px;
1688  height: auto;
1689  margin: 0 auto;
1690}
1691/**=============**/
1692img.recommend-img {
1693  width: 160px;
1694  background-color: var(--color_ThemeGray);
1695  border-radius: 50%;
1696  padding: 40px;
1697}
1698
1699.reasons-number{
1700  font-size: 1.1rem;
1701}
1702.reasons-number span{
1703  font-size: 3.8rem;
1704  margin: 1.4rem 0 2rem 0;
1705}
1706
1707.kiso, .kasegu, .shigoto{
1708  width: auto;
1709  max-height: 150px;
1710}
1711
1712.freevideo{
1713  background-color: #006837;
1714  border-radius: 25px;
1715  padding: 1rem 2rem;
1716}
1717
1718/* コースごとの色分け */
1719.freelance img.recommend-img{
1720  background-color: #2AB800;
1721}
1722
1723.freelance .kiso,
1724.freelance .kasegu,
1725.freelance .shigoto{
1726  fill: #2AB800;
1727}
1728
1729/* テーブル */
1730.premiums-detail .table-box{
1731  font-size: 1.2rem;
1732}
1733
1734.premiums-detail .table th,
1735.premiums-detail .table td {
1736    padding: 1.5rem;
1737}
1738
1739.premiums-detail .table .blank-cell{
1740  background: #E6E6E6;
1741}
1742
1743.premiums-detail .table .sh-item {
1744  background-color: #AA3200;
1745  color: #fff;
1746}
1747
1748.premiums-detail .table .item-name {
1749  background-color: #EDEBE0;
1750}
1751
1752.premiums-detail .table .sh-value {
1753  font-family: var(--font_Themedefault);
1754  font-weight: bold;
1755  color: #AA3200;
1756}
1757
1758#contentsMain .premiums-detail .reasons-h4{
1759  font-size: 1.3rem;
1760}
1761
1762img.point-img {
1763  height: 180px;
1764  -o-object-fit: cover;
1765  object-fit: cover;
1766  width: 100%;
1767  border-radius: 4px;
1768  padding: 15px 0;
1769}
1770
1771.premiums-detail .lesson-list{
1772  min-height: 5.5rem;
1773}
1774
1775
1776/* クロージング */
1777.premiums-detail-closing {
1778  position: relative;
1779  background: var(--color_ThemeGray);
1780  display: flex;
1781  justify-content: center;
1782  align-items: center;
1783  width: 100%;
1784  margin-bottom: 6rem;
1785  padding: 4rem 1rem;
1786}
1787
1788.premiums-detail-closing-bg{
1789  position: absolute;
1790  bottom: 0;
1791  width: 100%;
1792  height: 100%;
1793  fill: #AA3200;
1794}
1795
1796.premiums-detail .premiums-detail-closing-inner{
1797  width: 100%;
1798  max-width: 1050px;
1799  margin: 0 auto;
1800  padding: 2.5rem 2rem;
1801}
1802
1803.premiums-detail-closing .price{
1804  font-size: 5rem;
1805}
1806
1807.premiums-detail-closing .yen{
1808  font-size: 3.2rem;
1809}
1810
1811.premiums-detail-closing .tax{
1812  font-size: 1.1rem;
1813}
1814
1815.premiums-detail-closing form{
1816  max-width: 1000px;
1817}
1818
1819.premiums-detail .form-control{
1820  border: 1px solid var(--color_ThemeGray);
1821  border-radius: 0;
1822}
1823
1824.premiums-detail .form .btn{
1825  border-radius: 0;
1826}
1827
1828
1829
1830
1831
1832/* =======================================================================
1833==========================================================================
1834                  992px以下(lg以下)の設定
1835==========================================================================
1836======================================================================= */
1837@media(max-width: 992px) {
1838
1839  .premiums-detail .table-box{
1840    font-size: 1.1rem;
1841  }
1842
1843}/* @media */
1844
1845/* =======================================================================
1846==========================================================================
1847                  768以下(スマホ、小タブレット向け)の設定
1848==========================================================================
1849======================================================================= */
1850@media(max-width: 768px) {
1851
1852
1853
1854  /* =========================== 
1855  / プレミアムプラン一覧 .premiums-list
1856  /=========================== */
1857  #contentsMain .premium-features h3{
1858    font-size: 1.2rem;
1859  }
1860
1861  #contentsMain .premium-flow h3 {
1862    line-height: 2.2rem;
1863    font-size: 1.4rem;
1864  }
1865
1866  /* =========================== 
1867  / プレミアムプラン詳細 .premiums-detail
1868  /=========================== */
1869  #contentsMain .premiums-detail .features-about{
1870    margin-bottom: 4rem;
1871  }
1872
1873  #contentsMain .top-copy {
1874    font-size: 1.5rem;
1875  }
1876
1877
1878
1879}/* @media */
1880
1881
1882      </style>
1883
1884               <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
1885<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
vendor: 61 bytes, lines 1885-1887
1885
1886
1887<script src="https://www.googletagmanager.com/gtag/js?id=
1887G-2CQ9HLQRR9
vendor: 13 bytes, line 1887
1887"></script>
1888<script>
1889  
vendor: 138 bytes, lines 1889-1893
1889window.dataLayer = window.dataLayer || [];
1890  function gtag(){dataLayer.push(arguments);}
1891  gtag('js', new Date());
1892
1893  gtag('config', '
1893G-2CQ9HLQRR9
vendor: 5 bytes, line 1893
1893');
1894</script>
1894
1895
1896      <meta name="description" content="SkillhubAI(スキルハブエーアイ)のプレミアムサービス一覧です。">
1897    
1898    <meta name="user-signed-in" content="false">
1899  </head>
1900
1901  <body id="public">
1902    <div data-liquid="" class="liquid_data" id="liquid_data"></div>
1903      <style>
1904    .public_header_color {
1905      background-color: #eaede2
1906    }
1907    .public_header_color.scrolled {
1908      background-color: #ebede2 !important;
1909    }
1910    .public_header_color.scrolled .public_header_color {
1911      background-color: #ebede2 !important;
1912    }
1913  
1914    .header-navbar-toggler {
1915      background-color: #636363 !important;
1916    }
1917
1918  .dropdown-sub-content a:hover {opacity: 0.6;}
1919
1920  .menu-header .dropdown-toggle::after {
1921    display: inline-block !important;
1922  }
1923
1924  .cart-badge {
1925    position: absolute;
1926    top: -5px;
1927    right: -10px;
1928    font-size: 10px;
1929  }
1930
1931  .icon-cart.hidden {
1932    display: none !important;
1933  }
1934</style>
1935
1936<div class="navbar-container fixed-top">
1937  <nav class="navbar navbar-expand-lg navbar-dark bgr-nav public_header_color " data-sticky="top">
1938    <div class="container">
1939          <a class="navbar-brand" height="30" href="/"><img height="30" src="https://popshub.s3.amazonaws.com/uploads/school_design/logo-439545b6f2743b2374eec73f937ecc0bb53953ba6277eeb1d517d7e670c82090.png" /></a>
1940          <a class="school-nav-text-color" height="30" href="/"></a>
1941
1942      <div class="d-flex align-items-center gap-2">
1943        <a href="/purchase/cart" class="icon-cart position-relative d-lg-none">
1944          <i class="bi bi-cart fs-5"></i>
1945          <span id="" class="cart-mobie badge rounded-pill bg-primary cart-badge">
1946            0
1947          </span>
1948          <span id="product-number" data-value="0" class="d-none"></span>
1949        </a>
1950
1951        <button class="navbar-toggler header-navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
1952          <img class="icon navbar-toggler-open" src="/images/icons/interface/menu.svg" alt="menu interface icon" data-inject-svg />
1953        </button>
1954      </div>
1955
1956      <div class="collapse navbar-collapse justify-content-end">
1957        <div class="py-2 py-lg-0">
1958          <ul class="navbar-nav">
1959                  <li class="nav-item dropdown ">
1960                      <a class="nav-link school-nav-text-color" href="/premium_services">プレミアムサービス</a>
1961                  </li>
1962                  <li class="nav-item dropdown ">
1963                      <a class="nav-link school-nav-text-color" href="/courses">コース</a>
1964                  </li>
1965                  <li class="nav-item dropdown ">
1966                      <a class="nav-link school-nav-text-color" href="/blogs">ブログ</a>
1967                  </li>
1968                  <li class="nav-item dropdown ">
1969                      <a class="nav-link school-nav-text-color" href="/exams">Webスキル実力テスト</a>
1970                  </li>
1971                  <li class="nav-item dropdown ">
1972                      <a class="nav-link school-nav-text-color" href="/classroom/">マイクラス</a>
1973                  </li>
1974                  <li class="nav-item dropdown ">
1975                      <a class="nav-link school-nav-text-color" href="/inquiries/new">お問合わせ</a>
1976                  </li>
1977          </ul>
1978        </div>
1979      </div>
1980      <a href="/purchase/cart" class="icon-cart position-relative d-none d-lg-block">
1981        <i class="bi bi-cart fs-5"></i>
1982        <span id="" class="cart-web badge rounded-pill bg-primary cart-badge">
1983          0
1984        </span>
1985        <span id="product-number" data-value="0" class="d-none"></span>
1986      </a>
1987    </div>
1988  </nav>
1989</div>
1990<script type="text/javascript">
1991    $(".school-nav-text-color").css("color", "#000000");
1992    $(document).scroll(function () {
1993      var $nav = $(".public_header_color");
1994      $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
1995    });
1996
1997  // Ensure the cart counter is updated on page load
1998  window.addEventListener("pageshow", function (event) {
1999    const navType = performance.getEntriesByType("navigation")[0]?.type;
2000    if (event.persisted || navType === "back_forward") {
2001      location.reload();
2002    }
2003  });
2004
2005  // Run on page load
2006  document.addEventListener('DOMContentLoaded', function() {
2007    updateCartCounterID();
2008
2009    // Initialize cart visibility based on initial count from both sources
2010    const productNumber = document.getElementById('product-number');
2011    const mobileCartIcon = document.querySelector('.icon-cart.d-lg-none');
2012    const desktopCartIcon = document.querySelector('.icon-cart.d-none.d-lg-block');
2013
2014    // Get server-side cart count
2015    const serverCount = productNumber ? (parseInt(productNumber.dataset.value, 10) || 0) : 0;
2016
2017    // Get client-side cart count from sessionStorage
2018    let clientCart;
2019    try {
2020      clientCart = JSON.parse(sessionStorage.getItem('cart') || '{"items":[], "count":0, "total":0}');
2021    } catch (e) {
2022      clientCart = {items: [], count: 0, total: 0};
2023    }
2024
2025    const effectiveCount = Math.max(serverCount, clientCart.count);
2026
2027    if (effectiveCount <= 0) {
2028      if (mobileCartIcon) mobileCartIcon.classList.add('hidden');
2029      if (desktopCartIcon) desktopCartIcon.classList.add('hidden');
2030    } else {
2031      if (mobileCartIcon) mobileCartIcon.classList.remove('hidden');
2032      if (desktopCartIcon) desktopCartIcon.classList.remove('hidden');
2033    }
2034
2035    // Also run when window is resized
2036    window.addEventListener('resize', updateCartCounterID);
2037
2038    // Initialize cart synchronization
2039    syncCartWithServerData();
2040  });
2041
2042  // Function to sync cart from server with session storage
2043  function syncCartWithServerData() {
2044    const cartCounter = document.getElementById('cart-counter');
2045    const productNumber = document.getElementById('product-number');
2046
2047    if (!productNumber || !cartCounter) return;
2048
2049    // Get existing server cart count
2050    const serverCartCount = parseInt(productNumber.dataset.value, 10) || 0;
2051
2052    // Get existing session storage cart
2053    let sessionCart = JSON.parse(sessionStorage.getItem('cart') || '{"items":[], "count":0, "total":0}');
2054
2055      // If server has no cart items but we still have a product-number value
2056      if (serverCartCount === 0 && sessionCart.count > 0) {
2057        // Clear client-side cart to match server (which is empty)
2058        sessionCart = {items: [], count: 0, total: 0};
2059        sessionStorage.setItem('cart', JSON.stringify(sessionCart));
2060
2061        // Update UI
2062        cartCounter.textContent = '0';
2063        cartCounter.classList.add('d-none');
2064
2065        // Hide cart icons
2066        const mobileCartIcon = document.querySelector('.icon-cart.d-lg-none');
2067        const desktopCartIcon = document.querySelector('.icon-cart.d-none.d-lg-block');
2068
2069        if (mobileCartIcon) mobileCartIcon.classList.add('hidden');
2070        if (desktopCartIcon) desktopCartIcon.classList.add('hidden');
2071      }
2072  }
2073
2074  // Update cart counter to show total items
2075  function updateCartCounter() {
2076    const cartCounter = document.getElementById('cart-counter');
2077    if (!cartCounter) return;
2078
2079    // Get cart data from session storage
2080    const sessionCart = JSON.parse(sessionStorage.getItem('cart') || '{"items":[], "count":0, "total":0}');
2081
2082    // Update counter with session storage count
2083    cartCounter.textContent = sessionCart.count.toString();
2084
2085    // Hide/show the cart counter badge
2086    if (sessionCart.count > 0) {
2087      cartCounter.classList.remove('d-none');
2088    } else {
2089      cartCounter.classList.add('d-none');
2090    }
2091
2092    // Hide/show the entire cart icon based on count
2093    const mobileCartIcon = document.querySelector('.icon-cart.d-lg-none');
2094    const desktopCartIcon = document.querySelector('.icon-cart.d-none.d-lg-block');
2095
2096    if (sessionCart.count <= 0) {
2097      // Hide cart icons if count is zero or negative
2098      if (mobileCartIcon) mobileCartIcon.classList.add('hidden');
2099      if (desktopCartIcon) desktopCartIcon.classList.add('hidden');
2100    } else {
2101      // Show cart icons if there are items
2102      if (mobileCartIcon) mobileCartIcon.classList.remove('hidden');
2103      if (desktopCartIcon) desktopCartIcon.classList.remove('hidden');
2104    }
2105  }
2106
2107  // Update cart counter ID based on viewport width
2108  function updateCartCounterID() {
2109    // Remove existing cart-counter ID (if any)
2110    const existingCounter = document.getElementById('cart-counter');
2111    if (existingCounter) {
2112      existingCounter.removeAttribute('id');
2113    }
2114
2115    // Check if we're in mobile or desktop view
2116    const isMobileView = window.innerWidth < 992; // Bootstrap lg breakpoint is 992px
2117
2118    // Select the appropriate element to receive the cart-counter ID
2119    if (isMobileView) {
2120      // Mobile view - use the cart-mobie element
2121      const mobileCartBadge = document.querySelector('.cart-mobie');
2122      if (mobileCartBadge) {
2123        mobileCartBadge.id = 'cart-counter';
2124      }
2125    } else {
2126      // Desktop view - use the cart-web element
2127      const desktopCartBadge = document.querySelector('.cart-web');
2128      if (desktopCartBadge) {
2129        desktopCartBadge.id = 'cart-counter';
2130      }
2131    }
2132
2133    // After updating the ID, also update the cart counter
2134    updateCartCounter();
2135  }
2136</script>
2136
2137
2138    <div id="page-content">
2139      <div class="container-fruid">
2140        
2141          <div id="contentsMain">
2142  
2143  <div class="top-line"></div>
2144  
2145  <main class="container-fruid premiums-list mt-5">
2146    <div class="d-flex align-items-center">
2147      <div class="list-top list-top-gray">
2148        <h1 class="h1 mb-4">
2149          フリーランス・起業・就転職、<br>
2150          その夢かなえます!
2151        </h1>
2152        <!--<p class="mb-4">-->
2153        <!--  ハイクオリティな14講座/98レッスンが受け放題。<br>-->
2154        <!--  募集人数には制限があります。<br>-->
2155        <!--  サインアップはお早めに。-->
2156        <!--</p>-->
2157      </div>
2158      <div class="list-top-back">
2159        <div class="bg-ThemeMain"></div>
2160      </div>
2161    </div>
2162    <!-- ============================
2163    / プレミアムサービスのプラン
2164    /============================= -->     
2165    <section class="container mb-xl">
2166      <h2 class="text-ThemeMain text-center py-4">どの夢を叶えたいですか?</h2>
2167      
2168        <article class="row px-3 my-5 premiumplan premiumplan-freelance">
2169          <div class="col-lg-4 px-lg-0 bg-premiumplan premiumplan">
2170            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/72/hero_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-07-01_15.35.39.png">
2171          </div>
2172          <div class="col-lg-8 ps-lg-4">
2173            <!--<p class="text-premiumplan mb-0">月に20万~稼いで自由な生活を手に入れたい方は</p>-->
2174            <h3 class="text-premiumplan">
2175              <a href="/premium_services/72">10倍速 AIワークフロー マスタープラン</a>
2176            </h3>
2177            <div class="row flex-end">
2178              <div class="col-md-10">
2179                
2180                
2181<p>AIを使いこなし、労働集約型の働き方から脱出する。それが、最短で人生をリカバリーする「唯一の道」です。未経験・30代〜50代女性に大人気。今なら期間限定9,800円で人生を再起(リカバー)できます。</p>
2182
2183<ul class="course-check font-weight-bold">
2184    <li>低賃金の現状をAIの力で変えたい</li>
2185    <li>最短2週間で「実践的なAIスキル」を習得したい</li>
2186    <li>未経験からAI Webデザイナーとして逆転したい</li>
2187</ul>
2188              </div>
2189              <a href="/premium_services/72" class="btn btn-info  col-md-2 mt-4 morepremiums bg-premiumplan">
2190                <span class="md-block">プランの</span>詳細を見る
2191              </a>
2192            </div>
2193          </div>
2194        </article>
2195      
2196        <article class="row px-3 my-5 premiumplan premiumplan-freelance">
2197          <div class="col-lg-4 px-lg-0 bg-premiumplan premiumplan">
2198            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/96/hero_pasted-20260617-191208-447.jpg">
2199          </div>
2200          <div class="col-lg-8 ps-lg-4">
2201            <!--<p class="text-premiumplan mb-0">月に20万~稼いで自由な生活を手に入れたい方は</p>-->
2202            <h3 class="text-premiumplan">
2203              <a href="/premium_services/96">AI/Webフリーランス養成・伴走プラン</a>
2204            </h3>
2205            <div class="row flex-end">
2206              <div class="col-md-10">
2207                
2208                <p>初案件獲得まで伴走!仕事の取り方から学び、プロとしての制作スキルを習得します。</p>
2209<ul class="course-check font-weight-bold">
2210  <li>まずは月に20~30万くらい稼ぎたい</li>
2211  <li>案件獲得までサポートしてほしい</li>
2212  <li>副業・フリーランスとして自立したい</li>
2213</ul>
2214              </div>
2215              <a href="/premium_services/96" class="btn btn-info  col-md-2 mt-4 morepremiums bg-premiumplan">
2216                <span class="md-block">プランの</span>詳細を見る
2217              </a>
2218            </div>
2219          </div>
2220        </article>
2221      
2222        <article class="row px-3 my-5 premiumplan premiumplan-freelance">
2223          <div class="col-lg-4 px-lg-0 bg-premiumplan premiumplan">
2224            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/31/hero_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-06-25_19.51.58.png">
2225          </div>
2226          <div class="col-lg-8 ps-lg-4">
2227            <!--<p class="text-premiumplan mb-0">月に20万~稼いで自由な生活を手に入れたい方は</p>-->
2228            <h3 class="text-premiumplan">
2229              <a href="/premium_services/31">
2229Webスキル学び放題 Premium(月16,800円~) </a>
2230            </h3>
2231            <div class="row flex-end">
2232              <div class="col-md-10">
2233                
2234                <p>副業・フリーランス準備にも最適!574レッスンが質問し放題・学び放題。AI指導で効率学習しつつ、必要時はメンター相談。マイペースで実力を身につけたい人に最適。</p>
2235
2236<ul  class="course-check font-weight-bold">
2237<li>コストを抑えて幅広く学びたい</li>
2238<li>自分のペースで効率よくスキル習得したい</li>
2239<li>必要な時だけメンターに相談したい</li>
2240
2241</ul>
2242              </div>
2243              <a href="/premium_services/31" class="btn btn-info  col-md-2 mt-4 morepremiums bg-premiumplan">
2244                <span class="md-block">プランの</span>詳細を見る
2245              </a>
2246            </div>
2247          </div>
2248        </article>
2249      
2250      <!--      
2251      <article class="row px-3 my-5 premiumplan premiumplan-startbusiness">
2252        <div class="col-lg-4 px-lg-0 bg-premiumplan">
2253          <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/2/kigyou_normal.png">
2254        </div>
2255        <div class="col-lg-8 ps-lg-4">
2256          <p class="text-premiumplan mb-0">自分の作ったWebサイトで<br>年収1000万~を狙いたい方は</p>
2257          <h3 class="text-premiumplan"><a href="https://skillhub.jp/premium_services/2">WEB起業サポート・プラン</a></h3>
2258          <div class="row px-3 flex-end">
2259            <div class="col-md-10">
2260              <p class="font-weight-bold">
2261                429,800円~/期間:5ヶ月~
2262              </p>
2263              <ul class="course-check font-weight-bold">
2264                <li>デザイン力に自信が持てるようになる</li>
2265                <li>クライアントが喜ぶ提案ができる</li>
2266                <li>スピードが劇的に向上する</li>
2267              </ul>
2268            </div>
2269            <a href="https://skillhub.jp/premium_services/2" class="btn btn-info col-md-2 mt-4 morepremiums bg-premiumplan">
2270              <span class="md-block">プランの</span>詳細を見る
2271            </a>
2272          </div>
2273        </div>
2274      </article>
2275      <article class="row px-3 my-5 premiumplan premiumplan-employment">
2276        <div class="col-lg-4 px-lg-0 bg-premiumplan">
2277          <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/3/basic_normal.png">
2278        </div>
2279        <div class="col-lg-8 ps-lg-4">
2280          <p class="text-premiumplan mb-0">
2281            まずはWeb業界に転職してクリエイティブな仕事をしたい方は
2282          </p>
2283          <h3 class="text-premiumplan"><a href="https://skillhub.jp/premium_services/3">WEB起業サポート・プラン</a></h3>
2284          <div class="row flex-end">
2285            <div class="col-md-10">
2286              <p class="font-weight-bold">
2287                269,800円~/期間:3ヶ月~
2288              </p>
2289              <ul class="course-check font-weight-bold">
2290                <li>デザイン力に自信が持てるようになる</li>
2291                <li>クライアントが喜ぶ提案ができる</li>
2292                <li>スピードが劇的に向上する</li>
2293              </ul>
2294            </div>
2295            <a href="https://skillhub.jp/premium_services/3" class="btn btn-info col-md-2 mt-4 morepremiums bg-premiumplan">
2296              <span class="md-block">プランの</span>詳細を見る
2297            </a>
2298          </div>
2299        </div>
2300      </article>
2301      -->
2302    </section>
2303    <!-- ============================
2304    / プレミアムサービスの特徴
2305    /============================= --> 
2306    <article class="premium-features bg-ThemeLight py-5">
2307      <h2 class="text-ThemeMain text-center py-4">プレミアムサービスの特徴</h2>
2308      <div class="container">
2309        <section class="row my-5">
2310          <div class="col-lg-4 ps-lg-5">
2311            <img class="w-100 img-fluid" src="https://dhswdprqs3xi.cloudfront.net/images/3369/original.png">
2312          </div>
2313          <div class="col-lg-7 mt-4 mt-lg-0 d-flex">
2314            <span class="bignumber font-weight-bold pt-4 me-4">1</span>
2315            <div class="img-fluid">
2316              <h3 class="text-ThemeMain">
2317                一流のプロがパーソナルコーチ!<br>
2318                「担任制」であなたをゴールまで導きます
2319              </h3>
2320              <p class="mb-0">
2321                スキルハブでは担任制を採用しています。一人のコーチが最初から最後まで学習をサポート、あなたの力を最大限に伸ばします。
2322              </p>
2323              <p>
2324                「就転職のためには何が必要なのか?」「フリーランスとして仕事のとりかたは?」「成功する起業は?」など「結果を出すための超実践的なスキル」を直に教えてもらうことができます。
2325              </p>
2326            </div>
2327          </div>
2328          <div class="col-lg-1 order-3"></div>
2329        </section>
2330        <section class="row mt-xl">
2331          <div class="col-lg-2 order-0"></div>
2332          <div class="col-lg-4">
2333            <img class="w-100 img-fluid" src="https://dhswdprqs3xi.cloudfront.net/images/3371/original.png">
2334          </div>
2335          <div class="col-lg-6 mt-4 mt-lg-0 d-flex">
2336            <span class="bignumber font-weight-bold pt-4 me-4">2</span>
2337            <div class="img-fluid">
2338              <h3 class="text-ThemeMain">
2339                マンツーマンで挫折させません<br>
2340                目標達成をマネージメントします
2341              </h3>
2342              <p>
2343                担任コーチがあなただけの学習プランをつくり、目標達成のための学びをスケジューリングします。例えば、この日までに「デザインの基礎をマスターする」や「コードの基礎マスター」などあなたの目標・レベルに合った学習をつくり、マンツーマンで指導します。
2344              </p>
2345            </div>
2346          </div>
2347        </section>
2348        <section class="row mt-xl">
2349          <div class="col-lg-8 mt-4 mt-lg-0 d-flex order-2 order-lg-0">
2350            <span class="bignumber font-weight-bold pt-4 me-4 ps-lg-5">3</span>
2351            <div class="img-fluid">
2352              <h3 class="text-ThemeMain">
2353                詳細なスキルチェックで<br>
2354                あなたの成長をマネージメントします
2355              </h3>
2356              <p>
2357                提出していただく「企画」や「デザイン」、そして「コード」に関する課題を添削します。デザインの良し悪しやコードのレビューなどを専門家が行いますので、自分の「強み」そして「弱み」を知ることができます。そして、何度でも提出して、何度でも添削してもらえることも大きな特徴です。
2358              </p>
2359            </div>
2360          </div>
2361          <div class="col-lg-4 order-1">
2362            <img class="w-100 img-fluid" src="https://dhswdprqs3xi.cloudfront.net/images/3372/original.png">
2363          </div>
2364        </section>
2365        <section class="row mt-xl">
2366          <div class="col-lg-3 ps-lg-5 text-center">
2367            <img class="img-fluid ps-lg-5" src="https://dhswdprqs3xi.cloudfront.net/images/3348/original.png">
2368          </div>
2369          <div class="col-lg-8 mt-4 mt-lg-0 d-flex">
2370            <span class="bignumber font-weight-bold pt-4 me-4">4</span>
2371            <div class="img-fluid">
2372              <h3 class="text-ThemeMain">
2373                初心者を大歓迎します!<br>生徒の90%はまったくの初心者から始めています
2374              </h3>
2375              <p>
2376                提出していただく「企画」や「デザイン」、そして「コード」に関する課題を添削します。デザインの良し悪しやコードのレビューなどを専門家が行いますので、自分の「強み」そして「弱み」を知ることができます。そして、何度でも提出して、何度でも添削してもらえることも大きな特徴です。
2377              </p>
2378            </div>
2379          </div>
2380          <div class="col-lg-1 order-3"></div>
2381        </section>
2382        <section class="row mt-xl">
2383          <div class="col-lg-7 mt-4 mt-lg-0 d-flex order-2 order-lg-0">
2384            <span class="bignumber font-weight-bold pt-4 me-4 ps-lg-5">5</span>
2385            <div class="img-fluid">
2386              <h3 class="text-ThemeMain">
2387                わかりやすいオリジナルビデオレッスンが無制限に使用可能!
2388              </h3>
2389              <p>
2390                わかりやすさが自慢のスキルハブビデオを制限期間なしで閲覧することができます。今まで有料で見られなかったものもすべて閲覧可能になります。さらに後から追加される講座も無料で受講できるので、非常にお得です。
2391              </p>
2392              <p class="small">
2393                ※ 受講できるレッスンはプランごとに異なります(下の表を参考にしてください)
2394              </p>
2395            </div>
2396          </div>
2397          <div class="col-lg-4 order-1">
2398            <img class="w-100 img-fluid" src="https://dhswdprqs3xi.cloudfront.net/images/3373/original.png">
2399          </div>
2400          <div class="col-lg-1 order-3"></div>
2401        </section>
2402      </div><!-- /.container -->
2403      <div class="container text-center mt-xl mb-xl">
2404        <p class="text-ThemeMain font-weight-bold">
2405          自由な生き方をしたいあなたのためのSkillhubのプレミアムサービスで夢を実現させましょう!
2406        </p>
2407        <a href="https://skillhub.jp/inquiries/new">
2408          <button type="button" class="btn btn-secondary bg-gray py-2">
2409            まずは問い合わせてみる
2410          </button>
2411        </a>
2412      </div>
2413    </article>
2414    <!-- ============================
2415    / プレミアムサービスの特徴
2416    /============================= -->     
2417    <section class="premium-flow mt-xl mb-xl">
2418      <div class="text-center pt-4">
2419        <h2 class="text-ThemeMain ">学習の進め方</h2>
2420        <p class="font-weight-bold  text-center">Skillhubのオーダーメイド・ラーニング</p>
2421      </div>
2422      <div class="container w-850">
2423        <div class="premium-learn row my-5">
2424          <div class="col-md-4">
2425            <img class="w-100 " src="https://dhswdprqs3xi.cloudfront.net/images/3364/original.jpeg">
2426          </div>
2427          <div class="col-md-8">
2428            <div class="d-flex align-items-center mt-4 mt-md-0">
2429              <span class="bignumber">1</span>
2430              <h3 class="text-ThemeMain">目標を決めます</h3>
2431            </div>
2432            <p>
2433              「何を目標」にするのか、それは「いつまでに達成するのか」を決定します。例えば「6月までにフリーランスとしてデビューしたい」や「今年中に就職したい」「部署異動したので1ヶ月以内で基礎を知りたい」などなんでも構いません。
2434            </p>
2435          </div>
2436        </div>
2437        <div class="premium-learn row my-5 pt-3">
2438          <div class="col-md-4">
2439            <img class="w-100 " src="https://dhswdprqs3xi.cloudfront.net/images/3367/original.jpeg">
2440          </div>
2441          <div class="col-md-8">
2442            <div class="d-flex align-items-center mt-4 mt-md-0">
2443              <span class="bignumber">2</span>
2444              <h3 class="text-ThemeMain">カウンセリング</h3>
2445            </div>
2446            <p>
2447              Skillhubの専門家がWebカメラを通してカウンセリングします。設定した「目標」を達成するためには、どのような学習が必要か?どうすれば実現可能なのかをいっしょに考えます。そして、具体的なスケジュールに落とし込みます。
2448            </p>
2449          </div>
2450        </div>
2451        <div class="premium-learn row my-5 pt-3">
2452          <div class="col-md-4">
2453            <img class="w-100 " src="https://dhswdprqs3xi.cloudfront.net/images/3368/original.jpeg">
2454          </div>
2455          <div class="col-md-8">
2456            <div class="d-flex align-items-center mt-4 mt-md-0">
2457              <span class="bignumber">3</span>
2458              <h3 class="text-ThemeMain">ビデオレッスン開始</h3>
2459            </div>
2460            <p>
2461              Skillhubの専門家と決めたスケジュールにしたがってレッスンを進めます。トレーニング課題も用意されているので、それをひとつひとつこなしていきます。
2462            </p>
2463          </div>
2464        </div>
2465        <div class="premium-learn row my-5 pt-3">
2466          <div class="col-md-4">
2467            <img class="w-100 " src="https://dhswdprqs3xi.cloudfront.net/images/3366/original.jpeg">
2468          </div>
2469          <div class="col-md-8">
2470            <div class="d-flex align-items-center mt-4 mt-md-0">
2471              <span class="bignumber">4</span>
2472              <h3 class="text-ThemeMain">課題提出</h3>
2473            </div>
2474            <p>
2475              講座の最後には課題を提出していただきます。提出課題は「添削」され、点数がつきます。自分の強み弱みを知ることができます。
2476            </p>
2477          </div>
2478        </div>
2479        <div class="premium-learn row my-5 pt-3">
2480          <div class="col-md-4">
2481            <img class="w-100 " src="https://dhswdprqs3xi.cloudfront.net/images/3370/original.jpeg">
2482          </div>
2483          <div class="col-md-8">
2484            <div class="d-flex align-items-center mt-4 mt-md-0">
2485              <span class="bignumber">5</span>
2486              <h3 class="text-ThemeMain">コーチング</h3>
2487            </div>
2488            <p>
2489              ビデオ会議システムで、作成課題のコーチングをします。先生がデモや具体的な事例なども交えながらお教えいたします。コーチングの最後には「次回までにやっておくこと」の指示がでますので、ちょっとしたプレッシャーがかかり、学習ペースを作ることができます。
2490            </p>
2491          </div>
2492        </div>
2493      </div><!-- /.container -->
2494      <div class="container text-center mt-xl mb-xl">
2495        <p class="text-ThemeMain font-weight-bold">
2496          自由な生き方をしたいあなたのためのSkillhubのプレミアムサービスで夢を実現させましょう!
2497        </p>
2498        <a href="https://skillhub.jp/inquiries/new">
2499          <button type="button" class="btn btn-secondary bg-gray py-2">
2500            まずは問い合わせてみる
2501          </button>
2502        </a>
2503      </div>
2504    </section>
2505    <!-- ============================
2506    / FAQ
2507    /============================= -->
2508    <section class="bg-greige py-5">
2509      <div class="container">
2510        <h2 class="text-ThemeMain text-center py-4">よくある質問</h2>
2511        <div class="row">
2512          <div class="col-md-6">
2513            <p class="my-4 mx-md-5">
2514              <span class="question text-ThemeMain font-weight-bold">
2515                コーチングを受けるのには、PCとウェブカメラ・マイク以外に何が必要になりますか?
2516              </span>
2517              本講座で講師よりアサインされる課題をを完成させるには、Adobeが提供するillustratorが必要になってきます。(月々2180円になります。)こちらから体験版をダウンロードできます。
2518            </p>
2519          </div>
2520          <div class="col-md-6">
2521            <p class="my-4 mx-md-5">
2522              <span class="question text-ThemeMain font-weight-bold">
2523                コーチングを受けることができる時間帯は決まっているのですか?
2524              </span>
2525              平日 9:00−20:00<br>
2526              土日祝日 9:00−18:00<br>
2527              事前に予約が必要になってきます。(できるだけご希望の時間に添えるようにします)
2528            </p>
2529          </div>
2530          <div class="col-md-6">
2531            <p class="my-4 mx-md-5">
2532              <span class="question text-ThemeMain font-weight-bold">
2533                受講期間は延長できるのでしょうか?
2534              </span>
2535              はい、一ヶ月単位できます。その際には月々の79,800円の延長料金がかかります。(ただし、延長期間にはクーリングオフによる返金は適用しません)
2536            </p>
2537          </div>
2538          <div class="col-md-6">
2539            <p class="my-4 mx-md-5">
2540              <span class="question text-ThemeMain font-weight-bold">
2541                もっと詳しく聞いてみたいのですが
2542              </span>
2543              以下のメールアドレスにお問い合わせください。担当者より返信させて頂きます<br>
2544              [email protected]
2545            </p>
2546          </div>
2547        </div>
2548      </div><!-- /.container -->
2549      <div class="container text-center mt-xl mb-xl">
2550        <p class="text-ThemeMain font-weight-bold">
2551          自由な生き方をしたいあなたのためのSkillhubのプレミアムサービスで夢を実現させましょう!
2552        </p>
2553        <a href="https://skillhub.jp/inquiries/new">
2554          <button type="button" class="btn btn-secondary bg-gray py-2">
2555            まずは問い合わせてみる
2556          </button>
2557        </a>
2558      </div>
2559    </section>
2560    <!-- ============================
2561    / クロージング
2562    /============================= -->     
2563    <section class="container py-5 mt-xl mb-xl">
2564      <h2 class="text-ThemeMain text-center py-4">さぁ、あなたはどの夢を叶えたいですか?</h2>
2565      <div class="row premiums-list-last">
2566        
2567        <article class="col-md-6 col-lg-4 px-md-3 mb-5 premiumplan premiumplan-freelance">
2568          <div class="card">
2569            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/72/hero_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-07-01_15.35.39.png">
2570            <div class="card-body">
2571              <!--<p class="h5 text-premiumplan font-weight-bold">-->
2572              <!--  月に20万~稼いで自由な生活を<br>手に入れたい方は-->
2573              <!--</p>-->
2574              <h3 class="h4 text-premiumplan">
2575                <a href="/premium_services/72">10倍速 AIワークフロー マスタープラン</a>
2576              </h3>
2577              
2578              <p>
2579                
2580<p>AIを使いこなし、労働集約型の働き方から脱出する。それが、最短で人生をリカバリーする「唯一の道」です。未経験・30代〜50代女性に大人気。今なら期間限定9,800円で人生を再起(リカバー)できます。</p>
2581
2582<ul class="course-check font-weight-bold">
2583    <li>低賃金の現状をAIの力で変えたい</li>
2584    <li>最短2週間で「実践的なAIスキル」を習得したい</li>
2585    <li>未経験からAI Webデザイナーとして逆転したい</li>
2586</ul>
2587              </p>
2588              <a  href="/premium_services/72" class="btn btn-info morepremiums bg-premiumplan font-weight-bold">プランの詳細を見る</a>
2589            </div>
2590          </div>
2591        </article>
2592        
2593        <article class="col-md-6 col-lg-4 px-md-3 mb-5 premiumplan premiumplan-freelance">
2594          <div class="card">
2595            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/96/hero_pasted-20260617-191208-447.jpg">
2596            <div class="card-body">
2597              <!--<p class="h5 text-premiumplan font-weight-bold">-->
2598              <!--  月に20万~稼いで自由な生活を<br>手に入れたい方は-->
2599              <!--</p>-->
2600              <h3 class="h4 text-premiumplan">
2601                <a href="/premium_services/96">AI/Webフリーランス養成・伴走プラン</a>
2602              </h3>
2603              
2604              <p>
2605                <p>初案件獲得まで伴走!仕事の取り方から学び、プロとしての制作スキルを習得します。</p>
2606<ul class="course-check font-weight-bold">
2607  <li>まずは月に20~30万くらい稼ぎたい</li>
2608  <li>案件獲得までサポートしてほしい</li>
2609  <li>副業・フリーランスとして自立したい</li>
2610</ul>
2611              </p>
2612              <a  href="/premium_services/96" class="btn btn-info morepremiums bg-premiumplan font-weight-bold">プランの詳細を見る</a>
2613            </div>
2614          </div>
2615        </article>
2616        
2617        <article class="col-md-6 col-lg-4 px-md-3 mb-5 premiumplan premiumplan-freelance">
2618          <div class="card">
2619            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/31/hero_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2026-06-25_19.51.58.png">
2620            <div class="card-body">
2621              <!--<p class="h5 text-premiumplan font-weight-bold">-->
2622              <!--  月に20万~稼いで自由な生活を<br>手に入れたい方は-->
2623              <!--</p>-->
2624              <h3 class="h4 text-premiumplan">
2625                <a href="/premium_services/31">
2625Webスキル学び放題 Premium(月16,800円~) </a>
2626              </h3>
2627              
2628              <p>
2629                <p>副業・フリーランス準備にも最適!574レッスンが質問し放題・学び放題。AI指導で効率学習しつつ、必要時はメンター相談。マイペースで実力を身につけたい人に最適。</p>
2630
2631<ul  class="course-check font-weight-bold">
2632<li>コストを抑えて幅広く学びたい</li>
2633<li>自分のペースで効率よくスキル習得したい</li>
2634<li>必要な時だけメンターに相談したい</li>
2635
2636</ul>
2637              </p>
2638              <a  href="/premium_services/31" class="btn btn-info morepremiums bg-premiumplan font-weight-bold">プランの詳細を見る</a>
2639            </div>
2640          </div>
2641        </article>
2642      
2643      <!--
2644        <article class="col-md-6 col-lg-4 px-md-3 mb-5 premiumplan premiumplan-startbusiness">
2645          <div class="card">
2646            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/2/kigyou_normal.png">
2647            <div class="card-body">
2648              <p class="h5 text-premiumplan font-weight-bold">
2649                自分の作ったWebサイトで<br>年収1000万~を狙いたい方は</p>
2650              <h3 class="h4 text-premiumplan"><a href="https://skillhub.jp/premium_services/1">フリーランス・デビュー<br>支援プラン</a></h3>
2651              <p class="font-weight-bold">
2652                <span class="md-inline">269,800円~
2653                  /</span>期間:3ヶ月~
2654              </p>
2655              <p>
2656                自由な生活を手に入れたい人に最適なプランです。自分で時間を使えて、場所を選ばず、自分のペースで仕事ができるようになるためのプランです。
2657              </p>
2658              <a href="https://skillhub.jp/premium_services/1" class="btn btn-info morepremiums bg-premiumplan font-weight-bold">プランの詳細を見る</a>
2659            </div>
2660          </div>
2661        </article>
2662        <article class="col-md-6 col-lg-4 px-md-3 mb-5 premiumplan premiumplan-employment">
2663          <div class="card">
2664            <img class="img-fluid" src="https://dbgu4lsm8cewh.cloudfront.net/uploads/premium_service/image/3/basic_normal.png">
2665            <div class="card-body">
2666              <p class="h5 text-premiumplan font-weight-bold">まずはWeb業界に転職して<br>クリエイティブな仕事をしたい方は</p>
2667              <h3 class="h4 text-premiumplan"><a href="https://skillhub.jp/premium_services/1">フリーランス・デビュー<br>支援プラン</a></h3>
2668              <p class="font-weight-bold">
2669                <span class="md-inline">269,800円~
2670                  /</span>期間:3ヶ月~
2671              </p>
2672              <p>
2673                自由な生活を手に入れたい人に最適なプランです。自分で時間を使えて、場所を選ばず、自分のペースで仕事ができるようになるためのプランです。
2674              </p>
2675              <a href="https://skillhub.jp/premium_services/1" class="btn btn-info morepremiums bg-premiumplan font-weight-bold">プランの詳細を見る</a>
2676            </div>
2677          </div>
2678        </article>
2679      -->
2680      </div>
2681    </section>
2682  </main><!-- /.container-fruid premiums-list -->
2683</div><!-- /#contentsMain --> 
2684
2685
2686      </div>
2687    </div>
2688
2689    <div id="hightlight-preview" class="position-absolute border border-primary border-5 rounded" style="display: none;">
2690      <div id="hightlight-preview-label">ヘッダー</div>
2691    </div>
2692    <div id="hightlight-preview-hover" class="position-absolute border border-primary border-5 rounded" style="display: none;">
2693      <div id="hightlight-preview-label-hover">ヘッダー</div>
2694    </div>
2695                  <!-- 共通フッター -->
2696<footer id="footer" class="footer">
2697  <div class="container pb-4">
2698    <div class="row">
2699      <div class="col-md-4">
2700        <h4 class="mb-2">Skillhub [スキルハブ]</h4>
2701        <p>
2702          mail: <a href="mailto:[email protected]">[email protected]</a><br>
2703          <a href="/inquiries/new">■お問い合わせ</a><br>
2704          <!-- 
2705          <a href="/business/lp">■スキルハブの受託開発サービス</a><br>
2706          <span class="small">※開発のご依頼はここからお願いします。</span>
2707          -->
2708        </p>
2709      </div>
2710      <div class="col-md-7">
2711        <div class=" footer-hr"></div>
2712        <div class="row">
2713          <div class="col-md-5">
2714            <ul>
2715              <li class="small"><a href="https://skillhub.jp/pages/tokushohou">特定商取引に関する表示</a></li>
2716              <li class="small"><a href="https://skillhub.jp/pages/terms_of_use">利用規約</a></li>
2717              <li class="small"><a href="https://skillhub.jp/pages/privacy_policy">プライバシーポリシー</a></li>
2718            </ul>
2719          </div>
2720          <div class="col-md-7 d-flex flex-column justify-content-end">
2721            <!-- 
2722            <ul class="d-flex justify-content-end">
2723              <li class="sns-circle"><a href="/company_infos/1">/
2724                </a></li>
2725              <li class="sns-circle"><a href="/company_infos/2">/
2726                </a></li>
2727              <li class="sns-circle"><a href="/company_infos/3">/
2728                </a></li>
2729              <li class="sns-circle"><a href="/company_infos/3">/
2730                </a></li>
2731              <li class="sns-circle"><a href="/company_infos/3">/
2732                </a></li>
2733            </ul>
2734            -->
2735            <p class="small align-self-end">&copy; Skillhub 2024</p>
2736          </div>
2737        </div>
2738      </div>
2739    </div>
2740  </div>
2741</footer>
2742
2743<!-- Sticky ヘッダー用 -->
2744<script>
2745  window.addEventListener('scroll', function() {
2746    const targetElement = document.querySelector('#sticky-container .navbar');
2747    if (!targetElement) return; // fix targetElement can be null
2748    const rect = targetElement.getBoundingClientRect();
2749    
2750    if (rect.top <= 0) {
2751      targetElement.classList.add('public_header_color');
2752    } else {
2753      targetElement.classList.remove('public_header_color');
2754    }
2755  });
2756</script>
2756
2757
2758
2759<!-- 3桁区切りを行うJavaScript -->
2760<script>
2761  function formatPrices() {
2762    document.querySelectorAll('.formatted-price').forEach(function(priceElement) {
2763      let price = priceElement.textContent.replace(/[^\d]/g, ''); // 非数値部分を削除
2764      price = Number(price.trim());
2765      if (!isNaN(price)) {
2766        priceElement.textContent = price.toLocaleString();
2767      }
2768    });
2769  }
2770
2771  // ページ読み込み後にフォーマットを適用
2772  window.addEventListener('DOMContentLoaded', formatPrices);
2773</script>
vendor: 2 bytes, line 2773
2773
2774<script>
2775  $(function(){
2776    // Navber分の高さを余白追加
2777    let navHeight = $(".navbar-container>.navbar").height();
2778    $("#contentsMain").css("padding-top", `${navHeight}px`);
2779    // Footerを下部に
2780    let windowHeight = $(window).height();
2781    let footerheight = $("#footer").height();
2782    let contntheight = windowHeight - footerheight - navHeight;
2783    if($('#contentsMain').length){
2784      $("#contentsMain").css("min-height", `${contntheight}px`);
2785    }
2786  });
2787</script>
2787
2788
2789
2790    <style>
2791      
2792    </style>
2793
2794<script type="text/javascript">
2795  $(".alert").delay(4000).slideUp(200, function() {
2796    if (this.id && this.id.includes("coupon")) {
2797
2798    } else {
2799      bootstrap.Alert.getOrCreateInstance(this).close();
2800    }
2801  });
2802</script>
2802
2803
2804    
2804<script>
2805      document.addEventListener('DOMContentLoaded', function() {
2806        var btn = document.getElementById('menu-toggle');
2807        var wrapper = document.getElementById('wrapper');
2808        if (btn && wrapper) {
2809          btn.addEventListener('click', function(e) {
2810            e.preventDefault();
2811            wrapper.classList.toggle('toggled');
2812          });
2813        }
2814      });
2815    </script>
2815
2816      <template id="edb-signup-template"><div class="edb-signup" data-redirect-url="/" data-source="shortcode">
2817  <div class="edb-signup-google" hidden>
2818    <a class="edb-signup-google-button" href="/google_sign_in">
2819      <svg viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.205c0-.638-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.797 2.716v2.258h2.909c1.702-1.567 2.684-3.875 2.684-6.614Z"/><path fill="#34A853" d="M9 18c2.43 0 4.468-.806 5.956-2.181l-2.909-2.258c-.806.54-1.835.859-3.047.859-2.344 0-4.328-1.585-5.037-3.714H.956v2.332A9 9 0 0 0 9 18Z"/><path fill="#FBBC05" d="M3.963 10.706A5.41 5.41 0 0 1 3.682 9c0-.592.102-1.168.281-1.706V4.962H.956A9 9 0 0 0 0 9c0 1.452.347 2.827.956 4.038l3.007-2.332Z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.507.454 3.441 1.346l2.581-2.581C13.464.892 11.426 0 9 0A9 9 0 0 0 .956 4.962l3.007 2.332C4.672 5.165 6.656 3.58 9 3.58Z"/></svg>
2820      <span>Googleで続ける</span>
2821    </a>
2822    <div class="edb-signup-divider"><span>または</span></div>
2823  </div>
2824  <form class="edb-signup-step" data-step="email" novalidate>
2825    <input type="email" class="edb-signup-input edb-signup-email" name="email" placeholder="メールアドレス" autocomplete="email" required />
2826    <input type="text" class="edb-signup-hp" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" />
2827    <button type="submit" class="edb-signup-submit">メールで続ける</button>
2828  </form>
2829  <form class="edb-signup-step" data-step="code" novalidate hidden>
2830    <p class="edb-signup-sent"><strong class="edb-signup-target"></strong> に確認コードを送信しました</p>
2831    <input type="text" class="edb-signup-input edb-signup-code" name="code" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" maxlength="6" placeholder="000000" aria-label="確認コード" />
2832    <button type="submit" class="edb-signup-submit">ログイン</button>
2833    <div class="edb-signup-actions">
2834      <button type="button" class="edb-signup-resend">コードを再送信</button>
2835      <button type="button" class="edb-signup-back">メールアドレスを変更</button>
2836    </div>
2837  </form>
2838  <div class="edb-signup-error" role="alert" hidden></div>
2839  <p class="edb-signup-terms">続行することで利用規約とプライバシーポリシーに同意したものとみなされます。</p>
2840</div></template>
2841
2842  <div class="edb-signup-modal" id="edb-signup-modal" hidden>
2843    <div class="edb-signup-modal-backdrop" data-edb-close></div>
2844    <div class="edb-signup-modal-panel" role="dialog" aria-modal="true" aria-label="ログイン・新規登録">
2845      <button type="button" class="edb-signup-modal-close" data-edb-close aria-label="閉じる">&times;</button>
2846      <div class="edb-signup-modal-body"></div>
2847    </div>
2848  </div>
2849
2850<script>
2851(function() {
2852  var DEFAULT_RESEND_SECONDS = 30;
2853  var GOOGLE_SIGN_IN_ENABLED = false;
2854
2855  function csrfToken() {
2856    var meta = document.querySelector('meta[name="csrf-token"]');
2857    return meta ? meta.content : '';
2858  }
2859
2860  function track(name, params) {
2861    if (typeof window.gtag === 'function') { window.gtag('event', name, params || {}); }
2862  }
2863
2864  async function postJson(url, payload) {
2865    var res = await fetch(url, {
2866      method: 'POST',
2867      headers: {
2868        'Content-Type': 'application/json',
2869        'X-CSRF-Token': csrfToken(),
2870        'Accept': 'application/json'
2871      },
2872      body: JSON.stringify(payload)
2873    });
2874    var data = {};
2875    try { data = await res.json(); } catch (e) { data = {}; }
2876    return { ok: res.ok, status: res.status, data: data };
2877  }
2878
2879  function bindWidget(widget) {
2880    if (widget.dataset.edbBound) { return; }
2881    widget.dataset.edbBound = '1';
2882
2883    var emailForm = widget.querySelector('[data-step="email"]');
2884    var codeForm = widget.querySelector('[data-step="code"]');
2885    var emailInput = widget.querySelector('.edb-signup-email');
2886    var codeInput = widget.querySelector('.edb-signup-code');
2887    var honeypot = widget.querySelector('.edb-signup-hp');
2888    var targetLabel = widget.querySelector('.edb-signup-target');
2889    var resendBtn = widget.querySelector('.edb-signup-resend');
2890    var backBtn = widget.querySelector('.edb-signup-back');
2891    var errorBox = widget.querySelector('.edb-signup-error');
2892    var googleBlock = widget.querySelector('.edb-signup-google');
2893    var googleButton = widget.querySelector('.edb-signup-google-button');
2894    if (!emailForm || !codeForm) { return; }
2895
2896    if (GOOGLE_SIGN_IN_ENABLED && googleBlock && googleButton) {
2897      var googleParams = new URLSearchParams({
2898        redirect_url: widget.dataset.redirectUrl || '/',
2899        source: widget.dataset.source || 'shortcode'
2900      });
2901      googleButton.href = '/google_sign_in?' + googleParams.toString();
2902      googleBlock.hidden = false;
2903      googleButton.addEventListener('click', function() {
2904        track('google_sign_in_started', { source: source() });
2905      });
2906    }
2907
2908    var pendingEmail = '';
2909    var busy = false;
2910    var countdown = null;
2911
2912    function redirectUrl() { return widget.dataset.redirectUrl || '/'; }
2913    function source() { return widget.dataset.source || 'shortcode'; }
2914
2915    function showError(message) {
2916      errorBox.textContent = message;
2917      errorBox.hidden = false;
2918    }
2919
2920    function clearError() {
2921      errorBox.hidden = true;
2922      errorBox.textContent = '';
2923      widget.querySelectorAll('.edb-signup-input.is-error').forEach(function(el) {
2924        el.classList.remove('is-error');
2925      });
2926    }
2927
2928    function setBusy(state) {
2929      busy = state;
2930      widget.querySelectorAll('.edb-signup-submit').forEach(function(btn) { btn.disabled = state; });
2931    }
2932
2933    function startResendCountdown(seconds) {
2934      var left = seconds;
2935      window.clearInterval(countdown);
2936      function tick() {
2937        if (left > 0) {
2938          resendBtn.disabled = true;
2939          resendBtn.textContent = 'コードを再送信 (' + left + ')';
2940        } else {
2941          resendBtn.disabled = false;
2942          resendBtn.textContent = 'コードを再送信';
2943          window.clearInterval(countdown);
2944        }
2945        left = left - 1;
2946      }
2947      tick();
2948      countdown = window.setInterval(tick, 1000);
2949    }
2950
2951    async function requestCode(email) {
2952      if (busy) { return; }
2953      clearError();
2954      setBusy(true);
2955
2956      try {
2957        var result = await postJson('/login_codes', {
2958          email: email,
2959          website: honeypot ? honeypot.value : '',
2960          source: source(),
2961          redirect_url: redirectUrl()
2962        });
2963
2964        if (!result.ok) {
2965          showError(result.data.error || '送信に失敗しました');
2966          emailInput.classList.add('is-error');
2967          return;
2968        }
2969
2970        pendingEmail = email;
2971        targetLabel.textContent = email;
2972        emailForm.hidden = true;
2973        codeForm.hidden = false;
2974        codeInput.value = '';
2975        codeInput.focus();
2976        startResendCountdown(result.data.resend_after || DEFAULT_RESEND_SECONDS);
2977        track('login_code_sent', { source: source() });
2978      } catch (e) {
2979        showError('通信エラーが発生しました');
2980      } finally {
2981        setBusy(false);
2982      }
2983    }
2984
2985    async function verifyCode(code) {
2986      if (busy) { return; }
2987      clearError();
2988      setBusy(true);
2989
2990      try {
2991        var result = await postJson('/login_codes/verify', {
2992          email: pendingEmail,
2993          code: code,
2994          redirect_url: redirectUrl()
2995        });
2996
2997        if (!result.ok) {
2998          showError(result.data.error || 'ログインに失敗しました');
2999          codeInput.classList.add('is-error');
3000          codeInput.select();
3001          return;
3002        }
3003
3004        track('login_code_verified', { source: source() });
3005        window.location.href = result.data.redirect_url || redirectUrl();
3006      } catch (e) {
3007        showError('通信エラーが発生しました');
3008      } finally {
3009        setBusy(false);
3010      }
3011    }
3012
3013    emailForm.addEventListener('submit', function(e) {
3014      e.preventDefault();
3015      var email = (emailInput.value || '').trim();
3016      if (!email) {
3017        showError('メールアドレスを入力してください');
3018        emailInput.classList.add('is-error');
3019        return;
3020      }
3021      requestCode(email);
3022    });
3023
3024    codeForm.addEventListener('submit', function(e) {
3025      e.preventDefault();
3026      var code = (codeInput.value || '').replace(/\D/g, '');
3027      if (code.length !== 6) {
3028        showError('6桁のコードを入力してください');
3029        codeInput.classList.add('is-error');
3030        return;
3031      }
3032      verifyCode(code);
3033    });
3034
3035    // Submitting on the 6th digit removes the extra tap that a separate button
3036    // would cost, which is where OTP flows usually lose people.
3037    codeInput.addEventListener('input', function() {
3038      var digits = (codeInput.value || '').replace(/\D/g, '').slice(0, 6);
3039      if (codeInput.value !== digits) { codeInput.value = digits; }
3040      if (digits.length === 6 && !busy) { verifyCode(digits); }
3041    });
3042
3043    resendBtn.addEventListener('click', function() {
3044      if (resendBtn.disabled || !pendingEmail) { return; }
3045      requestCode(pendingEmail);
3046    });
3047
3048    backBtn.addEventListener('click', function() {
3049      window.clearInterval(countdown);
3050      clearError();
3051      codeForm.hidden = true;
3052      emailForm.hidden = false;
3053      emailInput.focus();
3054    });
3055
3056  }
3057
3058  var modal = document.getElementById('edb-signup-modal');
3059  var template = document.getElementById('edb-signup-template');
3060  var lastFocused = null;
3061
3062  function openModal(trigger) {
3063    if (!modal || !template) { return; }
3064
3065    var body = modal.querySelector('.edb-signup-modal-body');
3066    body.innerHTML = '';
3067    body.appendChild(template.content.cloneNode(true));
3068
3069    var widget = body.querySelector('.edb-signup');
3070    var redirect = (trigger && trigger.dataset.redirectUrl) || '/';
3071    widget.dataset.redirectUrl = redirect;
3072    widget.dataset.source = (trigger && trigger.dataset.source) || 'modal';
3073
3074    bindWidget(widget);
3075    lastFocused = document.activeElement;
3076    modal.hidden = false;
3077    document.body.classList.add('edb-signup-modal-open');
3078
3079    var emailInput = widget.querySelector('.edb-signup-email');
3080    if (emailInput) { emailInput.focus(); }
3081  }
3082
3083  function closeModal() {
3084    if (!modal || modal.hidden) { return; }
3085    modal.hidden = true;
3086    document.body.classList.remove('edb-signup-modal-open');
3087    if (lastFocused && lastFocused.focus) { lastFocused.focus(); }
3088  }
3089
3090  function init() {
3091    document.querySelectorAll('.edb-signup').forEach(bindWidget);
3092
3093    // Any element can open the modal, so an LP keeps its own designed CTA and
3094    // only needs `data-edbase-signup` (or href="#edbase-signup") added to it.
3095    document.addEventListener('click', function(e) {
3096      var trigger = e.target.closest('[data-edbase-signup], a[href="#edbase-signup"]');
3097      if (trigger) {
3098        e.preventDefault();
3099        openModal(trigger);
3100        return;
3101      }
3102      if (e.target.closest('[data-edb-close]')) {
3103        e.preventDefault();
3104        closeModal();
3105      }
3106    });
3107
3108    document.addEventListener('keydown', function(e) {
3109      if (e.key === 'Escape') { closeModal(); }
3110    });
3111  }
3112
3113  if (document.readyState === 'loading') {
3114    document.addEventListener('DOMContentLoaded', init);
3115  } else {
3116    init();
3117  }
3118})();
3119</script>
3119
3120
3121  </body>
3122</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.