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>li { 1188 position: relative; 1189 padding: 5px 0; 1190 border-bottom: 1px dotted #d7d7d7; 1191} 1192 1193.blog-detail aside .categories>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ãå¿ è¦ã«ãªã£ã¦ãã¾ããï¼æã ï¼ï¼ï¼ï¼åã«ãªãã¾ããï¼ãã¡ãããä½é¨çããã¦ã³ãã¼ãã§ãã¾ãã 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 å¹³æ¥ ï¼ï¼ï¼ï¼âï¼ï¼ï¼ï¼ï¼<br> 2526 åæ¥ç¥æ¥ ï¼ï¼ï¼ï¼âï¼ï¼ï¼ï¼ï¼<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">© 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="éãã">×</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.