/* JOHOKOBO HEADER */
header nav {
height: 3.5rem !important;
}
header img {
max-height: 30px;
object-fit: contain;
}
header .navbar-brand {
justify-self: center;
display: flex;
}
.nav-link.hlink {
white-space: nowrap;
}


/* MAIN */
main {
background-color: #EFF4F9 !important;
padding-top: 3.5rem;
}


/* NAVIGATION */
#nav {
font-family: 'Zen_Kaku_Gothic_New' !important;
}
.nav-org {
position: absolute;
z-index: 99;
display: flex;
flex-direction: column;
}
#nav.nc-nav-root {
display: flex;
flex-wrap: nowrap;
}
#nav.nc-nav {
background-color: rgba(2, 10, 28, 0.2);
padding: 5px 12px 5px 12px;
border-radius: 3px;
margin: 10px 0px 5px 10px;
}
#nav .nc-home-button {
position: relative;
display: flex;
align-items: center;
background: radial-gradient(ellipse at center, rgba(22, 40, 130, 0.3) 30%, rgba(2, 10, 28, 0) 80%);
}
#nav .nc-home-button img {
object-fit: contain;
max-height: 50%;
width: 150px;
min-width: 150px;
justify-items: center;
margin: 0 20px 0 0;
}
#nav .nc-nav-inner {
position: relative;
display: flex;
flex-direction: row;
}
#nav .nc-nav-item {
border-left: 1px solid #c4c4c4;
margin: 5px 0px;
padding: 5px 10px;
position: relative;
box-sizing: border-box;
white-space: nowrap;
}
#nav .nc-nav-item.nc-last-item {
border-right: 1px solid #c4c4c4;
}
#nav .nc-nav-divider {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
height: 2px;
background-color: #c4c4c4;
transform: scaleX(0%);
transition: transform 0.2s ease, opacity 0.3s ease;
}
#nav .nc-nav-item:hover .nc-nav-divider {
transform: scaleX(100%);
opacity: 0.3;
}
#nav .nc-nav-link {
color: #fff;
font-weight: 300;
border-radius: 4px;
padding: 2px 6px;
transition: 0.3s ease;
}
#nav .nc-nav-item:hover .nc-nav-link {
color: #fff;
text-decoration: none;
}
#nav svg {
margin-left: 3px;
}
#nav .nc-dropdown-wrapper {
all: unset;
position: absolute;
top: 35px;
left: 0;
min-width: 100%;
transform: translateY(-20px);
white-space: nowrap;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
width: fit-content;
}
#nav .nc-dropdown-arrow {
width: stretch;
height: 10px;
top: 20px;
background-color: blue;
visibility: hidden;
}
#nav .nc-dropdown-menu {
all: unset;
position: relative;
display: flex;
flex-direction: column;
height: auto;
width: 100%;
pointer-events: none;
padding: 0px 0px 0px 0px;
background-color: rgba(2, 10, 28, 0.4);
backdrop-filter: blur(10px);
list-style: none;
transform: translateY(-20px);
white-space: nowrap;
box-sizing: border-box;
border-radius: 0px 5px 5px 5px;
justify-self: center;
overflow: hidden;
z-index: 99;
opacity: 0;
visibility: hidden;
}
#nav .nc-nav-item:hover .nc-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(2px);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
pointer-events: auto;
}
#nav .nc-nav-item:hover .nc-dropdown-wrapper {
opacity: 1;
visibility: visible;
transform: translateY(0);
z-index: 10;
pointer-events: auto;
}
#nav .nc-dropdown-menu li {
border-bottom: 1px solid #c4c4c4;
box-sizing: border-box;
position: relative;
line-height: 2;
}
#nav .nc-dropdown-menu li.nc-last-item {
border-bottom: none;
}
#nav .nc-dropdown-menu li:hover {
background-color: rgba(2, 10, 28, 0.3);
}
#nav .nc-dropdown-menu img {
height: 15px;
width: auto;
object-fit: contain;
margin: 0 10px 4px 0;
}
#nav .nc-dropdown-menu img {
color: #fff;
}
#nav .nc-dropdown-menu a {
font-size: 14px;
font-weight: 200;
color: #fff;
border-radius: 4px;
transition: 0.3s ease;
display: block;
padding: 12px 20px 13px 20px;
}
#nav .nc-dropdown-menu a:hover {
text-decoration: unset;
}


/* NAVIGATION MOBILE */
#nav2.ncnav2 {
position: relative;
display: flex;
flex-direction: column;
background-color: rgba(2, 10, 28, 0.2);
width: 100%;
padding: 10px;
height: fit-content;
}
#nav2.ncnav2 .ncnav-homebutton img {
object-fit: contain;
width: 150px;
}
#nav2.ncnav2 a {
color: white;
font-weight: 300;
font-size: 16px;
}


/* -------------------- */
#nav2.ncnav2 .ncnav-hamburger {
filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(2010%) hue-rotate(287deg) brightness(118%) contrast(100%);
cursor: pointer;
}
#nav2.ncnav2 .ncnav-menu-container {
display: none;
}
#nav2.ncnav2 .ncnav-menu-container.active {
display: block;
}
#nav2.ncnav2 .ncnav-menu {
display: none;
}
#nav2.ncnav2 .ncnav-menu.active {
display: block;
}
#nav2.ncnav2 .ncnav-menu>* {
padding: 10px 0;
margin: 0 0 0 20px;
}
#nav2.ncnav2 .ncnav-menu>*:not(:last-child) {
border-bottom: 2px solid white;
}


/* BREAD LIST */
nav .breadcrumb {
font-family: 'Zen_Kaku_Gothic_New' !important;
margin: 0px 0px 0px 200px !important;
padding: 0;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
background-color: rgb(1, 1, 1, 0);
}
nav .breadcrumb-item {
font-size: 11px;
font-weight: 300;
}
nav .breadcrumb-item a {
color: #eee !important;
border-radius: 100px;
padding: 3px 10px;
position: relative;
display: inline-block;
}
nav .breadcrumb-item a:hover {
background-color: rgb(0, 0, 0, 0.2);
text-decoration: none;
}
.breadcrumb-item-last {
background-color: rgb(0, 0, 0, 0.2);
border-radius: 100px;
padding: 3px 10px;
color: rgb(255, 255, 255) !important;
position: relative;
display: inline-block;
}
.breadcrumb-item+.breadcrumb-item::before {
color: #fff;
}


/* PAGE NAME */
#page_name.container {
all: unset;
width: 100%;
position: relative;
height: 230px;
background: linear-gradient(to bottom, #3546C6, #17237e);
display: block;
align-content: end;
justify-content: center;
}
#page_name .background {
position: absolute;
background-image: url(../images/netcrunch/pj_background.png);
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.3;
}
#page_name .wrapper {
width: stretch;
height: auto;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0px;
}
#page_name .title {
width: auto;
font-size: 80px;
line-height: 80px;
font-weight: 200;
color: #fff;
margin-right: 15px;
padding: 0 0 15px 0;
}
#page_name img {
height: 100px;
max-height: 100px;
width: auto;
object-fit: contain;
}


/* GLOBAL */
#pj.container {
all: unset;
display: block;
padding: 20px 0 0 0;
position: relative;
height: 100%;
color: #222222;
font-size: 16px;
font-weight: 200;
margin-left: auto;
margin-right: auto;
padding: 0 30px;
}
@media (min-width: 1200px) {
#pj.container {
max-width: 1200px;
}
}
#pj .wrapper {
width: 100%;
height: auto;
margin-top: 50px;
line-height: 1.5;
}
#pj .heading {
width: 100%;
height: fit-content;
font-size: 28px;
font-weight: 300;
padding: 0 0 5px 0;
margin: 0 0 15px 0;
color: #222222;
background-image: linear-gradient(to right, #3546C6, #101B6D);
background-position: bottom;
background-size: 100% 3px;
background-repeat: no-repeat;
}
#pj .box {
position: relative;
height: 100%;
display: flex;
flex-direction: row;
padding: 10px 25px;
gap: 25px;
border-bottom: 1px solid #c4c4c4;
transition: transform 0.5s ease, opacity 0.2s ease, max-height 0.5s;
}
#pj .number-box {
display: grid;
user-select: none;
height: 100%;
align-self: center;
}
#pj .circle {
grid-area: 1/1;
justify-self: center;
align-self: center;
}
#pj .text {
grid-area: 1/1;
justify-self: center;
align-self: center;
color: white;
font-size: 20px;
font-weight: 300;
}
#pj .subtext {
margin-left: 1em;
font-size: 0.9em;
display: inline-block;
margin-bottom: 0.3em;
}


/* FAQ SECTION */
.faq-section {
font-size: 16px;
font-weight: 200;
color: #222222;
}
.faq-section.container {
width: 75%;
}
.faq-section .select_button {
margin: 15px 0 15px 0;
}
.faq-section .content {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: start;
padding: 20px 30px 20px 30px;
background-color: white;
border-radius: 5px;
}
.faq-section .content a {
font-size: 16px;
line-height: 30px;
color: #1E90FF;
}
.button_version {
position: relative;
display: inline-block;
box-sizing: border-box;
}
.button_menu {
outline: none !important;
font-size: 14px;
font-weight: 200;
background: #fff;
padding: 0 0 0 10px;
color: #222222;
border: 1px solid #535353;
cursor: pointer;
width: 160px;
text-align: left;
border-radius: 2px;
box-sizing: border-box;
}
.button_menu.active {
outline: none !important;
border: 1px solid #535353;
box-shadow: 0 0 0 3px rgb(75, 138, 255);
border-radius: 2px;
z-index: 10;
box-sizing: border-box;
}
.button_version svg {
right: 0;
z-index: 99;
transform: translateX(-20px);
}
.dropdown-content {
display: none;
position: absolute;
background: #fff;
min-width: 160px;
z-index: 1;
border: 1px solid #535353;
border-radius: 2px;
}
.dropdown-content a {
font-size: 14px;
color: black;
padding: 1px 10px 1px 10px;
text-decoration: none;
display: block;
cursor: pointer;
}
.dropdown-content a:hover {
background: blue;
color: white;
}
.button_version.active .dropdown-content {
display: block;
}


/* QUESTION SECTION */
.question-section .wrapper {
width: 100%;
}
#pj .question-section .heading {
margin: 0 0 0 0;
}
.faq.question-section .faq-item {
width: 100%;
height: 100%;
position: relative;
display: block;
overflow: hidden;
}
.question-section .question-box {
all: unset;
position: relative;
height: 100%;
display: flex;
flex-direction: row;
padding: 20px 25px;
gap: 25px;
transition: transform 0.5s ease, opacity 0.2s ease, max-height 0.5s;
background-color: #EFF4F9;
}
.question-box::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: thin solid #c4c4c4;
background-color: #c4c4c4;
transform-origin: bottom;
pointer-events: none;
}
.question-section .question-box.answer {
background-color: rgb(255, 255, 255);
color: #191919;
z-index: 2;
}
.question-section .question-box:hover:not(.answer) {
filter: brightness(0.95);
}
.question-section .question-box.answer {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
padding: 0px 25px;
}
.question-section .question-box.answer.active {
opacity: 1;
max-height: var(--dynamic-height);
padding: 10px 25px;
}
.question-section .content {
align-self: center;
font-size: 15px;
font-weight: 300;
}
.question-section .content.answer {
font-size: 15px;
font-weight: 300;
}
.question-section .number-box {
display: grid;
user-select: none;
height: 100%;
align-self: center;
}
.question-section .circle {
grid-area: 1/1;
justify-self: center;
align-self: center;
}
#pj .question-section .text {
grid-area: 1/1;
justify-self: center;
align-self: center;
color: white;
font-size: 16px;
font-weight: 500;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 4px;
margin-right: 1px;
}
#pj .question-section .answer .text {
color: white;
}
.question-section .button {
margin-left: auto;
align-self: center;
pointer-events: auto;
height: 100%;
display: grid;
}
.question-section .plus-button {
grid-area: 1/1;
justify-self: center;
align-self: center;
opacity: 1;
transform: rotate(0deg);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.question-section .plus-button.active {
opacity: 0;
transform: rotate(90deg);
}
.question-section .minus-button {
grid-area: 1/1;
justify-self: center;
align-self: center;
opacity: 0;
transform: rotate(-90deg);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.question-section .minus-button.active {
opacity: 1;
transform: rotate(0deg);
}


/* PROCESS SECTION */
.process-section .border {
position: absolute;
height: 80%;
top: 15%;
width: 2px;
left: 71px;
background-color: #3546C6;
z-index: 0;
}
.process-section .box-process {
display: flex;
gap: 20px;
padding: 0px 20px 0px 20px;
}
.process-section .stepbox {
display: grid;
user-select: none;
height: 100%;
align-self: center;
z-index: 1;
}
.process-section .stepbox-circle {
grid-area: 1/1;
justify-self: center;
align-self: center;
}
.process-section .stepbox-text {
grid-area: 1/1;
justify-self: center;
align-self: center;
color: white;
font-size: 20px;
font-weight: 300;
}
.process-section .box-wrapper {
display: flex;
border-bottom: 1px solid #c4c4c4;
gap: 30px;
padding: 20px 0 20px 0;
width: 100%;
}
.process-section .heading-proc {
font-size: 24px;
font-weight: 400;
}
.process-section .text-wrapper {
display: flex;
flex-direction: column;
gap: 0px;
}
.process-section .text-proc {
font-size: 16px;
font-weight: 300;
width: 100%;
}
.process-section .button-proc {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
margin-left: auto;
}
.process-section a:hover,
.process-section a:hover {
text-decoration: none;
}
.process-section .button1 {
background-color: rgb(255, 106, 0);
width: 100%;
max-width: 100%;
height: fit-content;
padding: 10px 15px;
color: white !important;
border-radius: 4px;
font-size: 18px;
font-weight: 200;
white-space: nowrap;
transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-align: center;
user-select: none;
}
.process-section .button2 {
background-color: white;
width: 100%;
max-width: 100%;
height: fit-content;
padding: 10px 15px;
color: rgb(255, 106, 0) !important;
border-radius: 4px;
font-size: 18px;
font-weight: 300;
border: 3px solid rgb(255, 106, 0);
white-space: nowrap;
transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-align: center;
user-select: none;
}
.process-section .button1:active,
.process-section .button2:active {
transform: translateY(5px);
}
.process-section .button1:hover {
color: rgb(255, 106, 0) !important;
background-color: white;
font-weight: 300;
outline: 3px solid rgb(255, 106, 0);
outline-offset: -3px;
}
.process-section .button2:hover {
color: #fff !important;
background-color: rgb(255, 106, 0);
font-weight: 200;
}
.process-section .nc-process-box {
width: 90%;
padding: 15px 10px;
background-color: #ffffff;
border-radius: 5px;
height: auto;
padding: 20px;
margin-top: 20px;
display: flex;
padding: 0;
margin-top: 100px;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.process-section .nc-process-heading {
font-size: 22px;
font-weight: 400;
}
.nc-process-wrapper {
width: 60%;
height: stretch;
}


/* SERVICE SECTION */
.service-section table {
border-collapse: collapse;
width: 100%;
background: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 300;
table-layout: auto;
}
.service-section table img {
width: 60%;
object-fit: contain;
display: flex;
margin: 20px 0 0px 0;
justify-self: center;
}
.service-section th,
.service-section td {
border: 1px solid #cbd1f0;
padding: 15px 20px;
}
.service-section tr:nth-child(even) {
background-color: #dbdff7;
}
.service-section td:first-child {
text-align: center;
font-size: 16px;
font-weight: 400;
white-space: nowrap;
width: auto;
border-right: 1px solid #cbd1f0;
}
.service-section tr:nth-child(n+3) td:not(:first-child) {
text-align: left;
vertical-align: top;
}
.service-section td:nth-child(2),
.service-section td:nth-child(3),
.service-section td:nth-child(4) {
width: 33.33%;
}
.service-section tr:first-child td:not(:first-child) {
font-size: 24px;
font-weight: 400;
}
.br {
display: inline-block;
height: 24px;
line-height: 100px;
}


/* SEMINER SECTION */
#pj .seminar-section {
line-height: 1.5;
font-size: 16px;
font-weight: 300;
}
.seminar-section .nc-seminar-box {
width: 100%;
padding: 15px 10px;
background-color: #ffffff;
border-radius: 5px;
width: 100%;
height: auto;
padding: 20px;
margin-top: 20px;
}
.seminar-section .nc-seminar-heading {
font-size: 22px;
font-weight: 400;
}
.nc-seminar-course-box {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
}
.nc-seminar-course-heading {
font-size: 18px;
font-weight: 400;
margin-bottom: 8px;
}
.nc-seminar-course-body {
font-size: 15px;
line-height: 1.6;
}
.nc-seminar-wrapper {
width: 50%;
height: stretch;
padding: 20px;
}
.seminar-section .nc-seminar-card {
display: flex;
margin: 20px;
gap: 20px;
background-color: #EFF4F9;
border-radius: 5px;
width: fit-content;
height: auto;
padding: 20px;
display: flex;
margin-top: 20px;
}
.seminar-section .nc-seminar-contact-row {
display: flex;
}
.seminar-section .nc-seminar-label {
text-align: right;
}
.seminar-section .nc-seminar-value {
text-align: left;
}
.seminar-section .nc-seminar-button {
background-color: rgb(255, 106, 0);
width: fit-content;
max-width: 100%;
height: fit-content;
padding: 10px 15px;
color: white !important;
border-radius: 4px;
font-size: 18px;
font-weight: 200;
white-space: nowrap;
transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-align: center;
user-select: none;
}
.seminar-section .nc-seminar-button:active {
transform: translateY(5px);
}
.seminar-section .nc-seminar-button:hover {
color: rgb(255, 106, 0) !important;
background-color: white;
font-weight: 300;
outline: 3px solid rgb(255, 106, 0);
outline-offset: -3px;
}

/* table */
.table-container-info {
  width: 100%;
  overflow-x: auto;
  margin: 30px 0;
  overflow: hidden;
  border: 2px solid #dfdfdf;
}

.table-info-course {
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 16px;
  table-layout: fixed;
  overflow: hidden;
}

.table-info-course th,
.table-info-course td {
  padding: 10px;
  vertical-align: top;
  word-wrap: break-word;
  font-weight: 400;
}

.cell-title-empty {
  width: 120px;
}

.cell-title-label {
  width: 120px;
}

.cell-title-course,
.cell-title-webinar {
  text-align: center;
  width: 50%;
}

.cell-body-course,
.cell-body-webinar {
}

.text-note-course {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #666;
}

.table-info-course tr:not(:first-child) td:not(:first-child) {
  font-weight: 200;
}

.table-info-course tr:first-child,
.table-info-course td:first-child {
  font-size: 18px;
  color: rgb(59, 59, 59);
}

.table-container-info tr:first-child {
  background-color: #F3F4F5 !important;
}

.table-container-info tr:first-child {
  border-bottom: 3px solid #0A7D91;
}

.table-container-info th:nth-child(1),
.table-container-info th:nth-child(2),
.table-container-info td:nth-child(2) {
  border-right: 2px solid #dfdfdf;
}

.table-info-course tr:nth-child(odd) {
  background: #fff;
}

.table-info-course tr:nth-child(even) {
  background: #F3F4F5;
}


/* PARTNER SECTION */
#pj .nc-partner-section {
line-height: 1.5;
font-size: 16px;
font-weight: 300;
margin-top: 50px;
}
.nc-partner-section .nc-partner-box {
width: 100%;
border-bottom: 1px solid #c4c4c4;
padding: 15px 0px;
}
.nc-partner-section .nc-partner-heading {
font-size: 22px;
font-weight: 400;
}
.nc-partner-section .nc-partner-card {
display: flex;
background-color: white;
border-radius: 5px;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
padding: 15px 20px 20px 20px;
}
.nc-partner-section .nc-partner-info-group {
display: flex;
gap: 20px;
}
.nc-partner-section .nc-partner-info-row {
display: flex;
}
.nc-partner-section .nc-partner-label {
text-align: right;
}
.nc-partner-section .nc-partner-value {
text-align: left;
}
.nc-partner-section .nc-partner-button {
font-size: 18px;
line-height: 18px;
align-self: center;
font-weight: 300;
color: white;
background-color: rgb(255, 106, 0);
padding: 10px 15px;
border-radius: 5px;
white-space: nowrap;
}
.nc-partner-section .nc-partner-button {
background-color: rgb(255, 106, 0);
width: fit-content;
max-width: 100%;
height: fit-content;
padding: 10px 15px;
color: white !important;
border-radius: 4px;
font-size: 18px;
font-weight: 200;
white-space: nowrap;
transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-align: center;
user-select: none;
}
.nc-partner-section .nc-partner-button:active {
transform: translateY(5px);
}
.nc-partner-section .nc-partner-button:hover {
color: rgb(255, 106, 0) !important;
background-color: white;
font-weight: 300;
outline: 3px solid rgb(255, 106, 0);
outline-offset: -3px;
}


/* DOCUMENT SECTION */
.documents-section.container {
width: 75%;
}
.documents-section .select_button {
margin: 15px 0 15px 0;
}
.documents-section .content {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: start;
padding: 20px 30px 20px 30px;
background-color: white;
border-radius: 5px;
}
.documents-section .content a {
font-size: 16px;
line-height: 30px;
color: #1E90FF;
}
.documents-section img {
height: 12px;
object-fit: contain;
filter: brightness(0) saturate(100%) invert(46%) sepia(84%) saturate(3145%) hue-rotate(193deg) brightness(120%) contrast(101%);
width: auto;
margin: 0 10px 4px 0;
}


/* SUPPORT SECTION */
#pj .support-section {
line-height: 1.5;
font-size: 16px;
font-weight: 300;
color: #222222;
}
.support-section .nc-support-card {
background-color: white;
border-radius: 5px;
width: 100%;
height: auto;
padding: 20px;
display: flex;
margin-top: 20px;
}
.support-section .nc-support-date {
padding: 0 15px 0 0;
border-right: 1px solid #c4c4c4;
font-size: 16px;
font-weight: 400;
min-width: 230px;
width: fit-content;
}
.support-section .nc-support-content {
padding: 0 0 0 15px;
}
.support-section .nc-support-title {
font-size: 18px;
font-weight: 400;
}
.support-section .nc-support-body {
font-size: 16px;
font-weight: 200;
}
.support-section .latest_version {
background-color: #fff;
padding: 15px 20px;
width: 100%;
height: fit-content;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
color: #191919;
}
.support-section table {
width: 100%;
border-collapse: collapse;
background-color: white;
font-size: 20px;
font-weight: 400;
color: #222222;
margin-top: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.support-section th,
.support-section td {
border: 1px solid #b1b1b1;
padding: 5px 10px;
text-align: left;
vertical-align: top;
}
.support-section th {
background-color: #3644ae;
color: white;
font-size: 20px;
font-weight: 300;
font-family: 'Zen_Kaku_Gothic_New';
}
.support-section .expired {
background-color: #e7e7ea;
color: #424242;
}
.support-section .accordion {
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
text-align: left;
outline: none;
width: auto;
padding: 5px 10px;
color: #222222;
font-weight: 500;
font-size: 15px;
transition: transform 0.3s ease;
}
.support-section .accordion svg {
margin: 6px 0 0 5px;
}
.support-section .accordion:hover {
opacity: 0.8;
}
.support-section .panel {
max-height: 0;
overflow: hidden;
padding: 0 10px;
background-color: rgba(255, 255, 255, 0);
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
font-size: 20px;
font-weight: 400;
}


/* MOVIE SECTION */
.movie-section .section {
display: flex;
justify-content: space-between;
gap: 20px;
margin: 20px 0 0 0;
}
.movie-section .video-container {
width: 100%;
height: 100%;
}
.movie-section .video-container.active {
width: 100%;
z-index: 10;
background-color: white;
height: 100%;
}
.movie-section video {
width: auto;
max-width: 100%;
vertical-align: top;
}
.movie-section .button-group {
display: flex;
flex-direction: column;
width: max-content;
gap: 10px;
}
.movie-section .btn {
width: stretch;
border: 2px solid #3546C6;
background-color: transparent;
color: #3546C6;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border 0.3s, transform 0.1s ease-in-out;
white-space: nowrap;
box-shadow: none;
}
.movie-section .btn.active {
background-color: #3546C6;
color: white;
white-space: nowrap;
box-shadow: none;
}
.movie-section .btn:active {
transform: translateY(5px);
}
.movie-section .btn:hover {
background-color: #111c63;
color: white;
border: 2px solid #111c63;
}


/* CASE STUDY SECTION */
#pj .case_study-section {
line-height: 1.5;
font-size: 16px;
font-weight: 300;
color: #222222;
}
.case_study-section .section1 .card-wrapper {
display: flex;
justify-content: center;
gap: 20px;
}
.case_study-section .section1 .card-case {
background-color: white;
border-radius: 5px;
width: 35%;
height: 220px;
padding: 20px;
display: flex;
margin-top: 20px;
position: relative;
display: flex;
justify-content: space-between;
line-height: 1;
}
.case_study-section .section1 .left-case {
width: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1;
}
.case_study-section .section1 .top-case {
font-size: 40px;
font-weight: 100;
width: auto;
height: fit-content;
}
.case_study-section .section1 .bottom-case {
font-size: 18px;
width: auto;
height: fit-content;
white-space: nowrap;
}
.case_study-section .section1 .bottom-case span {
font-size: 50px;
font-weight: 500;
color: #3546C6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.case_study-section .section1 .right-case {
min-width: 60%;
position: absolute;
right: 20px;
top: 20px;
}
.case_study-section .section1 .img-case {
width: 100%;
height: 80%;
object-fit: contain;
z-index: -10;
}
.case_study-section .section1 .見出し {
font-size: 18px;
font-weight: 400;
}
.case_study-section .section1 .text-case {
font-size: 16px;
font-weight: 200;
}
.case_study-section .section2 .card-outer-case {
display: flex;
gap: 20px;
}
.case_study-section .section2 .card-wrapper-case {
width: 60%;
}
.case_study-section .section2 .card-case {
background-color: white;
border-radius: 5px;
height: auto;
padding: 20px;
margin-top: 20px;
position: relative;
}
.case_study-section .section2 .case-feedback-card {
background-color: white;
border-radius: 5px;
width: 40%;
height: auto;
padding: 20px;
margin-top: 20px;
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
}
.case_study-section .section2 .case-feedback-card .feedback-header {
display: flex;
width: 100%;
gap: 20px;
}
.case_study-section .section2 .feedback-photo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.case_study-section .section2 .feedback-name {
font-size: 16px;
white-space: nowrap;
}
.case_study-section .section2 .feedback-name span {
font-size: 18px;
font-weight: 300;
}
.case_study-section .section2 .case-study-heading {
font-size: 18px;
font-weight: 400;
}
.case_study-section .section2 .text-case {
font-size: 16px;
font-weight: 200;
}
.case_study-section .section2 .text-case span {
font-size: 24px;
font-weight: 300;
}
.case_study-section .section2 .case-study-operation {
display: flex;
align-items: start;
justify-content: space-between;
gap: 20px;
position: relative;
}
.case_study-section .section2 .case-study-operation img {
object-fit: contain;
flex-shrink: 1;
min-width: 0;
width: auto;
}
.case_study-section .section2 .case-study-operation .case-img-summary {
max-width: 35%;
}
.case_study-section .section2 .case-study-operation .case-img-map {
max-width: 45%;
}
.case_study-section .section2 .case-summary-texts {
display: flex;
flex-direction: column;
gap: 10px;
}
.case_study-section .section2 .case-summary-functions {
border: 1px solid #c4c4c4;
border-radius: 5px;
padding: 10px 14px;
font-size: 14px;
width: 200px;
height: auto;
}
.case_study-section .section2 .case-summary-snmp {
background-color: #1E90FF;
border-radius: 5px;
padding: 10px 14px;
font-size: 14px;
width: 200px;
height: auto;
}
.case_study-section .section2 .case-summary-wmi {
background-color: #1E90FF;
border-radius: 5px;
padding: 10px 14px;
font-size: 14px;
width: 200px;
height: auto;
}


/* FORM SECTION */
.form_box {
width: 90%;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
border-radius: 4px;
background-color: #fff;
background-image: url(../images/netcrunch/form_bg.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
  .form_wrapper_head {
  width: 60%;
  padding: 60px 0 30px 0;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  gap: 20px;
  }
    .form_left_box {
    flex: 3;
    }
      .form_title {
      font-size: 28px;
      font-weight: 400;
      color: #fff;
      }
      .form_description {
      font-size: 13px;
      font-weight: 400;
      color: #fff;
      }
    .form_right_box {
    flex: 1;
    }
      #form a {
      text-decoration: none;
      }
      #form .btn-contact {
      padding: 0 20px;
      border-radius: 4px;
      font-weight: 700;
      width: fit-content;
      font-size: 16px;
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      height: 45px;
      white-space: nowrap;
      }
      #form .btn-contact:active {
      transform: translateY(5px);
      }
      #form .btn-contact {
      color: #fff;
      border: #fff 3px solid;
      border-radius: 100px;
      padding: 10px 32px 10px 25px;
      transition: 0.1s ease-in-out;
      margin-left: auto;
      margin-right: auto;
      }
      #form .btn-contact:hover {
      background: #fff;
      color: #3546C6;
      }
      #form .btn-contact:hover img {
      filter: brightness(0) saturate(100%) invert(20%) sepia(67%) saturate(3239%) hue-rotate(228deg) brightness(90%) contrast(85%);
      }
      #form .btn-contact::after {
      content: '';
      width: 10px;
      height: 10px;
      border-top: 3px solid #fff;
      border-right: 3px solid #fff;
      transform: rotate(45deg) translateY(-50%);
      position: absolute;
      top: 47%;
      right: 20px;
      border-radius: 1px;
      transition: 0.1s ease-in-out;
      }
      #form .btn-contact:hover:after {
      border-color: #3546C6;
      }
      #form .btn-contact img {
      width: 28px;
      object-fit: contain;
      margin: 0 10px 0 0;
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7454%) hue-rotate(187deg) brightness(115%) contrast(104%);
      transition: 0.1s ease-in-out;
      }
      #form .contact {
      max-width: 350px;
      white-space: nowrap;
      color: #fff;
      padding-top: 10px;
      }
      #form .phone {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 30px;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin: 5px 0 0 0;
      }
      #form .phone img {
      width: 25px;
      object-fit: contain;
      margin: 2px 0 0 0;
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7454%) hue-rotate(187deg) brightness(115%) contrast(104%);
      }
      #form .business-hours {
      font-size: 14px;
      margin: 0 0 0 30px;
      }
      #form .hours {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: 400;
      }
  .form_wrapper {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 4px;
  }
    .formrun-embed {
    z-index: 2;
    /* clip-path: inset(70px 0 0 0); */
    /* transform: translateY(-70px); */
    }