/* GLOBAL */
html, body {
overflow-x: hidden;
}
#index.outer {
display: flex;
width: 100%;
height: fit-content;
justify-content: center;
position: relative;
}
#index .container {
all: unset;
justify-self: center;
padding: 20px 0 0 0;
position: relative;
width: 100%;
height: 100%;
color: #222222;
font-size: 16px;
font-weight: 200;
max-width: 1080px;
}
#index .wrapper {
width: 100%;
height: auto;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
}
#index .heading {
position: relative;
}
#index .heading .sub::before {
content: '';
width: 5px;
height: 65px;
border-radius: 4px;
background-color: #3546C6;
position: absolute;
top: 0;
left: 0;
}
#index .heading .main {
font-size: 35px;
font-weight: 300;
white-space: nowrap;
padding: 0 0 0 17px;
}
#index .heading .sub {
font-size: 20px;
font-weight: 500;
font-family: 'Noto Sans JP', sans-serif;
color: #3546C6;
white-space: nowrap;
line-height: 18px;
font-size: 20px;
font-weight: 400;
padding: 0 0 0 20px;
padding: 0 0 0 17px;
}
#index .nw {
white-space: nowrap;
}


/* CTA */
#index.CTA-section.outer {
background-color: #3546C6;
width: 100%;
background-image: url(../images/netcrunch/layered-waves-haikei.svg);
background-repeat: no-repeat;
background-size: 100% auto;
overflow: hidden;
background-position: 0% 46%;
}
#index.CTA-section .container {
padding: 0;
color: white;
font-size: 16px;
padding: 20px 0;
}
#index.CTA-section .wrapper {
margin-top: 0;
display: flex;
gap: 15px;
justify-content: space-around;
justify-content: center;
}
#index.CTA-section a {
text-decoration: none;
}
#index.CTA-section .btn-download,
#index.CTA-section .btn-catalog,
#index.CTA-section .btn-contact {
padding: 0 20px;
border-radius: 4px;
font-weight: 400;
width: fit-content;
font-size: 16px;
display: flex;
position: relative;
justify-content: center;
align-items: center;
height: 45px;
white-space: nowrap;
}
#index.CTA-section .btn-download:active,
#index.CTA-section .btn-catalog:active,
#index.CTA-section .btn-contact:active {
transform: translateY(5px);
}
#index.CTA-section .btn-download,
#index.CTA-section .btn-catalog {
color: #3546C6;
background: #fff;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: fit-content;
padding: 9px 32px 10px 17px;
transition: 0.1s ease-in-out;
position: relative;
border: #fff 3px solid;
}
#index.CTA-section .btn-contact {
color: #fff;
border: #fff 3px solid;
border-radius: 100px;
padding: 10px 32px 10px 25px;
transition: 0.1s ease-in-out;
}
#index.CTA-section .btn-download:hover,
#index.CTA-section .btn-catalog:hover {
background: rgba(0, 0, 0, 0);
color: #FFF;
outline: 2px solid #fff;
outline-offset: -2px;
}
#index.CTA-section .btn-contact:hover {
background: #fff;
color: #3546C6;
}
#index.CTA-section .btn-download:hover img,
#index.CTA-section .btn-catalog:hover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(174deg) brightness(102%) contrast(102%);
}
#index.CTA-section .btn-contact:hover img {
filter: brightness(0) saturate(100%) invert(20%) sepia(67%) saturate(3239%) hue-rotate(228deg) brightness(90%) contrast(85%);
}
#index.CTA-section .btn-download::after,
#index.CTA-section .btn-catalog::after {
content: '';
width: 10px;
height: 10px;
border-top: 3px solid #3546C6;
border-right: 3px solid #3546C6;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 47%;
right: 20px;
border-radius: 1px;
transition: 0.1s ease-in-out;
}
#index.CTA-section .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;
}
#index.CTA-section .btn-download:hover:after,
#index.CTA-section .btn-catalog:hover:after {
border-color: #FFF;
}
#index.CTA-section .btn-contact:hover:after {
border-color: #3546C6;
}
#index.CTA-section .btn-download img,
#index.CTA-section .btn-catalog img {
width: 28px;
object-fit: contain;
margin: 0 10px 0 0;
filter: brightness(0) saturate(100%) invert(20%) sepia(67%) saturate(3239%) hue-rotate(228deg) brightness(90%) contrast(85%);
transition: 0.1s ease-in-out;
}
#index.CTA-section .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;
}
#index.CTA-section .outer {
display: flex;
gap: 15px;
}
#index.CTA-section .trial-version,
#index.CTA-section .catalog,
#index.CTA-section .contact {
max-width: 400px;
width: fit-content;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px;
gap: 20px;
padding: 20px 20px;
}
#index.CTA-section .contact {
white-space: nowrap;
}
#index.CTA-section .headline {
font-size: 18px;
font-weight: 300;
margin: 9px 0 5px 0;
width: fit-content;
}
#index.CTA-section .description {
font-size: 13px;
font-weight: 200;
}
#index.CTA-section .image-box {
display: flex;
}
#index.CTA-section .divider {
min-height: 100%;
background-color: white;
min-width: 1px;
}
#index.CTA-section .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;
}
#index.CTA-section .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%);
}
#index.CTA-section .business-hours {
font-size: 14px;
margin: 0 0 0 30px;
}
#index.CTA-section .hours {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400;
}
#index.CTA-section . {}


/* COVER SECTION */
#index.cover-section.container {
width: 100%;
max-width: 100%;
height: fit-content;
margin-top: 0px;
position: relative;
display: flex;
justify-content: center;
background-image: url("../images/netcrunch/Group\ 322.svg");
background-size: cover;
background-position: right top;
padding: 100px 0 50px 0;
}
#index.cover-section .wrapper {
width: 1400px;
height: 100%;
padding: 50px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
flex: 1;
}
@media (max-width: 1023px) {
#index.cover-section .wrapper {
flex-direction: column;
}
}
#index.cover-section .text-container.FV {
display: flex;
flex-direction: column;
gap: 1.2rem;
width: fit-content;
}
#index.cover-section .text1 {
width: fit-content;
line-height: 1.2;
font-size: 3vw;
font-weight: 300;
text-align: left;
color: white;
}
#index.cover-section .text2 {
width: fit-content;
line-height: 1.2;
font-size: 2vw;
font-weight: 400;
text-align: left;
color: white;
font-family: 'Noto Sans JP', sans-serif;
}
#index.cover-section .text3 {
width: fit-content;
line-height: 1.7;
font-size: 1.4vw;
font-weight: 300;
text-align: left;
color: white;
max-width: 610px;
}
#index.cover-section .text4 {
background-color: white;
color: #3546C6;
font-weight: 400;
padding: 0 8px 3px 8px;
border-radius: 1px;
position: relative;
}
#index.cover-section .text4::after {
background-color: white;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
content: "";
}
#index.cover-section .button-container {
width: fit-content;
height: auto;
left: 0;
display: flex;
gap: 30px;
margin: 10px 0 0 0;
}
#index.cover-section .button-container a {
text-decoration: none;
}
#index.cover-section .button1,
#index.cover-section .button2 {
padding: 12px 20px 12px 15px;
background-color: white;
border-radius: 4px;
width: fit-content;
height: fit-content;
color: #3546C6;
font-weight: 300;
font-size: 12px;
line-height: 1.2;
display: flex;
align-items: center;
box-sizing: border-box;
outline: 3px solid #fff;
outline-offset: -3px;
transition: background-color 0.08s ease;
}
#index.cover-section .button2 {
color: white;
background-color: transparent;
}
#index.cover-section .button2 .img2 {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(349deg) brightness(101%) contrast(101%);
}
#index.cover-section .img1 {
width: 50px;
object-fit: contain;
}
#index.cover-section .img2 {
width: 50px;
object-fit: contain;
}
#index.cover-section .button-container .text-container {
display: flex;
flex-direction: column;
align-items: center;
white-space: nowrap;
width: 100%;
height: fit-content;
position: relative;
}
#index.cover-section .button-container .main {
font-size: 20px;
font-weight: 400;
}
#index.cover-section .button-container .sub {}
#index.cover-section .button-container a:hover .img2 {
transform: translateX(6px);
}
#index.cover-section .button-container .button1:hover .text-container {
color: #fff;
}
#index.cover-section .button-container .button2:hover .text-container {
color: #3546C6;
}
#index.cover-section .button-container .button1:hover {
background-color: #3546C6;
}
#index.cover-section .button-container .button2:hover {
background-color: #fff;
}
#index.cover-section .button-container .button1:hover .img1,
#index.cover-section .button-container .button1:hover .img2 {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(349deg) brightness(101%) contrast(101%);
}
#index.cover-section .button-container .button2:hover .img1,
#index.cover-section .button-container .button2:hover .img2 {
filter: brightness(0) saturate(100%) invert(32%) sepia(43%) saturate(2757%) hue-rotate(219deg) brightness(77%) contrast(104%);
}
#index.cover-section .button-container .button1:active,
#index.cover-section .button-container .button2:active {
transform: translateY(5px);
}
#index.cover-section .video-container {
height: max-content;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 1;
width: 100%;
flex: 1;
}
#index.cover-section .video {
width: 100%;
height: fit-content;
top: 0;
left: 0;
border-radius: 0px;
overflow: hidden;
}


/* CONCERN SECTION */
#index.concern-section.outer {
background-color: #fff;
width: 100%;
padding: 30px 0 0px 0;
}
#index.concern-section .wrapper {
width: fit-content;
justify-self: center;
}
#index.concern-section .inner {
width: 100%;
display: flex;
justify-content: center;
}
#index.concern-section .inner .box {
padding: 40px 0px;
justify-self: center;
width: fit-content;
display: flex;
flex-direction: column;
gap: 7px;
}
#index.concern-section .inner .box div {
font-size: 20px;
font-weight: 300;
line-height: 1.7;
color: #222222;
position: relative;
padding: 0 0 0 30px;
}
#index.concern-section .inner .box div::before {
content: "✔";
position: absolute;
left: 0;
top: 0.45em;
width: 1.4em;
height: 1.4em;
background-color: #3546C6;
color: white;
font-size: 0.8em;
font-weight: bold;
border-radius: 50%;
text-align: center;
line-height: 1.5em;
}
#index.concern-section .inner .img-wrapper {
width: 350px;
height: 230px;
overflow: hidden;
position: relative;
margin: 0 0 0 50px;
}
#index.concern-section .inner .img {
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1.4);
transform-origin: top center;
}


/* KEY POINTS SECTION */
#index.merit-section.outer {
background-color: #EFF4F9;
}
#index.merit-section .wrapper {
display: flex;
padding: 40px 0;
justify-content: center;
gap: 30px;
}
#index.merit-section .heading img {
margin: 20px 0 0 0;
object-fit: contain;
width: 100%;
max-height: 350px;
}
#index.merit-section .inner {
display: flex;
flex-direction: column;
gap: 20px;
}
#index.merit-section .inner .box {
line-height: 1.4;
display: flex;
gap: 20px;
}
#index.merit-section .inner .left {
border-radius: 4px;
border: black 1px solid;
padding: 11px;
width: 70px;
height: 70px;
}
#index.merit-section .inner img {
width: 100%;
height: 100%;
object-fit: contain;
}
#index.merit-section .inner .main {
font-size: 20px;
font-weight: 600;
font-family: 'Noto Sans JP', sans-serif;
}
#index.merit-section .inner .text {
font-size: 14px;
font-weight: 400;
font-family: 'Noto Sans JP', sans-serif;
}
#index.merit-section .inner .text::before {
content: "・";
}


/* FUNCTIONS SECTION */
#index.main_feature-section.outer {
background-color: #fff;
}
#index.main_feature-section .wrapper {
padding: 50px 0;
width: fit-content;
justify-self: center;
}
#index.main_feature-section .inner {
display: flex;
justify-content: center;
gap: 15px;
}
#index.main_feature-section .box {
padding: 20px 20px;
border-radius: 4px;
margin-top: 40px;
background-size: cover;
background-image: url(../images/netcrunch/blob-scene-haikei.svg);
color: white;
min-width: 250px;
}
#index.main_feature-section .title {
text-align: left;
color: white;
font-weight: 600;
font-family: 'Noto Sans JP', sans-serif;
font-size: 30px;
}
#index.main_feature-section .text {
margin: 10px 0 0 4px;
font-weight: 400;
line-height: 1.6;
font-family: 'Noto Sans JP', sans-serif;
}
#index.main_feature-section .text div {
display: flex;
flex-direction: row;
align-items: center;
}
#index.main_feature-section .text div::before {
content: "●";
font-size: 0.3em;
height: 100%;
margin: 0.2em 1em 0 0;
}


/* FEATURE SECTION */
#index.key_feature-section {}
#index.key_feature-section.outer {
background-color: #fff;
width: 100%;
padding: 30px 0 100px 0;
}
#index.key_feature-section .wrapper {
width: 80%;
justify-self: center;
}
#index.key_feature-section .inner {
width: 100%;
position: relative;
overflow: hidden;
}
#index.key_feature-section .tab-container {
display: flex;
border-bottom: #222222 2px solid;
}
#index.key_feature-section .tab {
cursor: pointer;
padding: 8px 20px;
margin: 30px 8px 0 1px;
pointer-events: auto;
cursor: pointer;
font-size: 22px;
font-weight: 400;
color: #8e8e8e;
position: relative;
overflow: hidden;
user-select: none;
border-radius: 4px 4px 0 0;
background-color: rgb(243, 239, 239);
box-sizing: border-box;
}
#index.key_feature-section .tab:hover {
filter: brightness(1.03);
}
#index.key_feature-section .tab.active .border {
position: absolute;
width: 100%;
height: 3px;
background-color: rgb(255, 100, 0);
z-index: 99;
bottom: 0;
left: 0;
transform: translateX(0);
transition: transform 0.3s;
border: none !important;
}
#index.key_feature-section .tab .border {
position: absolute;
width: 100%;
height: 3px;
z-index: 99;
bottom: 0;
left: 0;
transform: translateX(-101%);
}
#index.key_feature-section .tab.active {
font-weight: bold;
color: #222222;
color: rgb(255, 100, 0);
font-weight: 400;
position: relative;
transform: translateX(0px);
background-color: rgb(255, 255, 255);
outline: thin solid rgb(255, 100, 0);
outline-offset: -1px;
box-sizing: border-box;
}
#index.key_feature-section .card-container {
width: 100%;
display: none;
}
#index.key_feature-section .card-container.active {
display: flex;
flex-direction: column;
width: 100%;
}
#index.key_feature-section .card {
all: unset;
display: flex;
flex-direction: row;
border-radius: 4px;
gap: 4%;
width: 100%;
margin: 30px 0 0 0;
padding: 25px 40px;
background-color: #EFF4F9;
box-sizing: border-box;
}
#index.key_feature-section .card .text-container {
width: 48%;
}
#index.key_feature-section .text-container .heading {
font-size: 22px;
font-weight: 400;
padding: 0 0 7px 0;
margin: 0 0 7px 0;
background-image: linear-gradient(to right, #3546C6, #101B6D);
background-position: bottom;
background-size: 100% 3px;
background-repeat: no-repeat;
}
#index.key_feature-section .text-container .body {
font-size: 16px;
font-weight: 200;
}
#index.key_feature-section .card img {
object-fit: contain;
width: 100%;
}
#index.key_feature-section .card a {
width: 48%;
}