@charset "utf-8";
/* CSS Document */

/**===================================**/
/** for new Earth section 2025 (start)**/
/**===================================**/
/** for PC and smart phones (common) **/
#earth-menu-area{    
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    position:relative;
    max-width:900px;
    margin:0px auto;
    padding:0px 10px;
}
#earth-wrapper{
    width:53.5%;
}
#earth-image-area{
    width:100%;
    position:relative;
}
#earth-line-image{
    width:100%;
}
#earth-image{
    width:90%;
    height:auto;
    position:absolute;
    top:1.8%;
    right:6.3%;
}
#ip-entrance-image{
    position:absolute;
    width:70%;
    top:32%;
    left:12%;
    opacity:1!important;
}
#ip-entrance-link{
    opacity: 1!important;
}
#ip-entrance-link:hover #earth-image{
    object-fit: cover;
    transform:scale(1.07);
    transition: 0.5s;
    opacity: 1!important;
    
}
#earth-links-area{
    width:46.5%;
}
#earth-links-area-list{
    margin:0px;
    padding:0px;
    list-style:none;
}
#earth-links-area-list > li{
    margin-bottom:0.5em;
    padding:0px;
    display:flex;
    flex-wrap:nowrap;
}
#earth-links-area-list > li:nth-child(1){
    margin-left:0%;
    width:calc(100% - 27%);
}
#earth-links-area-list > li:nth-child(2){
    margin-left:4.5%;
    width:calc(100% - 27%);
}
#earth-links-area-list > li:nth-child(3){
    margin-left:9%;
    width:calc(100% - 27%);
}
#earth-links-area-list > li:nth-child(4){
    margin-left:13.5%;
    width:calc(100% - 27%);
}
#earth-links-area-list > li:nth-child(5){
    margin-left:18%;
    width:calc(100% - 27%);
}
#earth-links-area-list > li:nth-child(6){
    margin-left:22.5%;
    width:calc(100% - 27%);
}
#earth-links-area-list > li:nth-child(7){
    margin-left:27%;
    width:calc(100% - 27%);
}
.earth-links-link{
    opacity: 1!important;
}
.earth-links-link :hover{
    transform:scale(1.15);
    transition: 0.5s;
    opacity: 1!important;
}
.list-border{
    position:relative!important;
}
.earth-wire{
    position:absolute!important;
    top:calc(50% - 10px);
    right:0;
    max-width:none!important;
}
/** for PC **/
#ip-title{
    text-align:right;
    max-width:870px;
    margin:0px auto;
}
#ip-title > img{
    width:46.5%;
}
#earth-all-wrapper{
    position:static!important;
    height:auto!important;
    padding:45px 0px!important;
    background-image: url("https://www.marklines.com/images/portal_top/mv_back.jpg")!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-position: center center !important;
}
#earth-all-wrapper:before{
    height:auto!important;
}
.service-icon{
    display:inline-block;
    width:100%;
}
.service-icon-sm{
    display:none;
}
/** for smart phones **/
@media screen and (max-width: 780px) {
    #earth-all-wrapper{
    padding:25px 0px;
    background-image: url("https://www.marklines.com/images/portal_top/mv_back.jpg")!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-position:center bottom;
    }
    #earth-all-wrapper:before{
    padding:0px;
    }
    #earth-menu-area{
        gap:10px;
    }
    #earth-links-area-list > li{
        margin-left:0px !important;
        width:100%!important;
    }
    .earth-links-link :hover{
    transform:none;
    transition: 0s;
    }
    .earth-wire{
        display:none;
    }
    #ip-title{
    text-align:center;
    width:100%
    }
    #ip-title > img{
        width:70%;
        margin-bottom:20px;
    }
    .service-icon{
    display:none;
    }
    .service-icon-sm{
    display:inline-block;
    width:100%;
    }
    .products-visual#software {
	background-image: url("https://www.marklines.com/images/portal_top/bizscreen_matcha.png"), url("https://www.marklines.com/images/portal_top/bizimg_matcha.png"), none!important;
}
}



/*TOP MENU*/
#sp-global-nav{max-width:1280px!important;}
#sp-global-nav > h1.logo {margin:0px!important;}
#sp-global-nav > h1.logo > a {margin-left:10px!important;}
#global-nav > ul > li > a.nav-link.nav-software::after {background-color: #5B983A!important;}


/*NEW SECTION*/

#platform .platform-image > .platform-circle.platform-circle-pink {left: calc(45% + 8em)!important;}
#platform .platform-image > .platform-circle.platform-circle-red {left: calc(45% + 9.5em)!important;}
#platform .platform-image > .platform-circle.platform-circle-orange {left: calc(45% + 11em)!important;}
#platform .platform-image > .platform-circle.platform-circle-matcha {
	background-image: url("https://www.marklines.com/images/portal_top/cir_matcha.png")!important;
	left: calc(45% + 12.5em);
}
#platform .platform-image > .platform-circle.platform-circle-green {left: calc(45% + 14em)!important;}
#platform .platform-image > .platform-circle.platform-circle-blue {left: calc(45% + 15.5em)!important;}
#platform .platform-image > .platform-circle.platform-circle-purple {left: calc(45% + 17em)!important;}


.products-visual#software {
	background-image: url("https://www.marklines.com/images/portal_top/bizscreen_matcha.png"), url("https://www.marklines.com/images/portal_top/bizimg_matcha.png"), url("https://www.marklines.com/images/portal_top/bizback_matcha.png");
}

.products-visual#software > header{
    color:#5B983A;
}
.products-visual#software > header::before {
	background-image: url("https://www.marklines.com/images/portal_top/mrk_matcha.png");
}
.btn.btn-contact-software {
	border: 1px solid #5B983A;
	color: #5B983A;
	transition: 0.35s;
}
.btn.btn-contact-software::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background-color: #5B983A;
	transform-origin: center center;
	transform: scale(0, 1);
	transition: .3s;
}
.btn.btn-software::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background-color: #fff;
	transform-origin: center center;
	transform: scale(0, 1);
	transition: .3s;
}
.btn.btn-software {
	background-color: #5B983A;
	border: 1px solid #5B983A;
	font-weight: bold;
	color: #fff;
	text-align: left;
	padding: 1em;
	margin-left: 0;
	transition: .3s;
	position: relative;
	text-decoration: none;
	z-index: 1 !important;
}

@media screen and (min-width: 781px) {
/*NEW SECTION*/

#platform .platform-image > .platform-circle.platform-circle-pink {left: calc(45% + 8em)!important;}
#platform .platform-image > .platform-circle.platform-circle-red {left: calc(45% + 9.5em)!important;}
#platform .platform-image > .platform-circle.platform-circle-orange {left: calc(45% + 11em)!important;}
#platform .platform-image > .platform-circle.platform-circle-matcha {
	background-image: url("https://www.marklines.com/images/portal_top/cir_matcha.png")!important;
	left: calc(45% + 12.5em);
}
#platform .platform-image > .platform-circle.platform-circle-green {left: calc(45% + 14em)!important;}
#platform .platform-image > .platform-circle.platform-circle-blue {left: calc(45% + 15.5em)!important;}
#platform .platform-image > .platform-circle.platform-circle-purple {left: calc(45% + 17em)!important;}
    
    .btn.btn-contact-software:hover {
        background-color: #5B983A;
        color: #fff;
        opacity: 1;
        text-decoration: none;
        transition: 0.35s;
    }
    
    .btn.btn-software:hover {
        color: #5B983A;
        opacity: 1;
    }
    .btn.btn-software:hover::before {
        transform: scale(1, 1);
    }
    .btn.btn-contact-software:hover::before {
        transform: scale(1, 1);
    }
    
    .btn.inner-icon.btn-software > span {
        background-image: url("https://www.marklines.com/images/portal_top/right-chevron-white.png");
    }
    .btn.inner-icon.btn-software:hover > span {
        background-image: url("https://www.marklines.com/images/portal_top/right-chevron-software.png");
    }
    .btn.inner-icon.btn-contact.btn-contact-software > span {
        background-image: url("https://www.marklines.com/images/portal_top/right-chevron-software.png");
    }
    .btn.inner-icon.btn-contact.btn-contact-software:hover > span {
        background-image: url("https://www.marklines.com/images/portal_top/right-chevron-white.png");
    }
}
@media screen and (max-width: 780px) {
/*NEW SECTION*/

#platform .platform-image > .platform-circle.platform-circle-pink {left: calc(6% + 8em)!important;}
#platform .platform-image > .platform-circle.platform-circle-red {left: calc(6% + 9.5em)!important;}
#platform .platform-image > .platform-circle.platform-circle-orange {left: calc(6% + 11em)!important;}
#platform .platform-image > .platform-circle.platform-circle-matcha {
	background-image: url("https://www.marklines.com/images/portal_top/cir_matcha.png")!important;
	left: calc(6% + 12.5em);
}
#platform .platform-image > .platform-circle.platform-circle-green {left: calc(6% + 14em)!important;}
#platform .platform-image > .platform-circle.platform-circle-blue {left: calc(6% + 15.5em)!important;}
#platform .platform-image > .platform-circle.platform-circle-purple {left: calc(6% + 17em)!important;}    

    .btn.btn-software {
        padding: 1.4rem;
        font-size: 1.2rem;
    }
    .btn.inner-icon.btn-contact.btn-contact-software > span {
	background-image: url("https://www.marklines.com/images/portal_top/right-chevron-software.png");
    }
    .btn.inner-icon.btn-software > span {
	background-image: url("https://www.marklines.com/images/portal_top/right-chevron-white.png");
    }
}
/**===================================**/
/** for new Earth section 2025 (end)  **/
/**===================================**/