@charset "utf-8";
@import url("https://use.typekit.net/erg0suh.css");
/* CSS Document */

#hubcharge .gs21-MainContents {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
#hubcharge .gs21-ContentsContainer .mel25-contents-width__1400 { max-width: 100%;}
#hubcharge .cmp-text p{	font-size: 0.9rem;}

/* ----------------------------

mv

---------------------------- */
#mv{
	position: relative;
	max-width: 2000px;
	margin: 0 auto;
}
#mv .image {margin-top: 0;}
#mv-pc__image{	display: block;}
#mv-sp__image{	display: none;}
#mv .title {
	position: absolute;
	top: 30%;
	left: 8%;
	width: 35%;
}
#mv .title .cmp-title__text{
	color: #ffffff;
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
  font-size: clamp(2.2rem, 4vw, 6rem);
	line-height: 1.2;
}

/* ----------------------------

inner

---------------------------- */
#sec-green__inner,
#sec-solutions__inner,
#faq,
#contact,
#page__inner{
	max-width: 1382px;
	margin: 0 auto;
	padding: 80px 0;
	width: 90%;
}
#page__inner{
	padding: 0;
}
/* ----------------------------

introduction

---------------------------- */
#sec-introduction{}
#sec-introduction__inner {
    max-width: 1150px;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 80px 0;
}
#introduction__text-area{
	width: 690px;
	margin: 0 auto;
	text-align: center;
}
#sec-introduction .title .cmp-title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 2.8rem;
	line-height: 1.1;
	line-height: 1.2;
}
#sec-introduction .freehtml{
	margin: auto;
}

/* ----------------------------

movie

---------------------------- */
#movie iframe {
    border-radius: 16px;
    border: 1px solid #08CFC8;
}



/* ----------------------------

sec-green

---------------------------- */
#sec-green{	background: #EFFEFC;}
#sec-green__inner .cmp-container--2col {
    margin-top: 0;
}
#green__2col {
	max-width: 1148px;
	margin: auto;
	justify-content: space-between;
}
#green__2col .container:nth-of-type(1) {
	width: calc(55% - 15px);
	display: flex;
	align-items: center;
}
#green__2col .container:nth-of-type(2) {
	width: calc(40% - 15px);
}
#green__2col--left .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 2.2rem;
	line-height: 1.2;
}
#green__2col--right .image {
	width: 60px;
	margin-bottom: 16px;
}
#green__2col--right .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.2;
	font-size: 1.6rem;
}

/* ----------------------------

solutions

---------------------------- */
#sec-solutions .cmp-container--2col .image{
	margin-top: 0;
}
#sec-solutions .cmp-title__text,
#sec-solutions .cmp-text p,
#sec-solutions li{
    color: #ffffff;
}
#sec-solutions .cmp-text p,
#sec-solutions li{
    font-size: 0.9rem;
}
#sec-solutions ul {    padding-left: 0;}
#sec-solutions li {
    list-style: none;
    position: relative;
    border-top: 1px solid #918f96;
    padding: 16px 0 7px 20px;
}
#sec-solutions li::after {
    content: "";
    display: block;
    width: 10px;
    height: calc(100% - 20px);
    background: #08CFC8;
    position: absolute;
    top: 16px;
    left: 0;
}
#sec-solutions .cmp-container--2col .cmp-container--2col > .cmp-container{
	gap:20px;
}
#sec-solutions .cmp-container--2col .cmp-container--2col  .image{
	width: 60px;
}
#sec-solutions .cmp-container--2col .cmp-container--2col .title {
    display: flex;
    align-items: center;
}
#sec-solutions .cmp-container--2col .cmp-container--2col .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 2rem;
}
#sec-solutions .text p b {
	font-size: 1rem;
	font-weight: 400;
}
#solutions__plan .container,
#solutions__deploy .container:nth-of-type(1),
#solutions__operate .container {
    background: #242021;
    border-radius: 16px;
    margin-top: 0;
}
#solutions__plan > .image,
#solutions__deploy > .image,
#solutions__operate > .image{
    position: relative;
    overflow: hidden;
}
#solutions__plan > .image img,
#solutions__deploy > .image img,
#solutions__operate > .image img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
#solutions__plan--text-area,
#solutions__deploy--text-area,
#solutions__operate--text-area{
	padding: 32px 64px;
}
#solutions__deploy .container:nth-of-type(1) {order: 2;}
#solutions__deploy .container:nth-of-type(2) {order: 1;}
#solutions__deploy--img .image:nth-of-type(1) {margin-bottom: 16px;}
#solutions__deploy--img { height: 100%;}
#solutions__deploy--img .image{
	height: calc(50% - 8px);
}
#solutions__deploy--img .image{
	overflow: hidden;
	position: relative;
}
#solutions__deploy--img .image img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

/* button */
#sec-solutions .cmp-container .cmp-button--icon-arrow-w .cmp-button{
	position: relative;
	width: 120px;
	display: block;
	
}
#sec-solutions .cmp-container .cmp-button--icon-arrow-w .cmp-button:after {
	width: 20px;
	height: 2px;
	background: #ffffff;
	display: block;
	position: absolute;
	top: calc(50% + 2px);
	right: 11px;
	transition: 0.3s all;
}
#sec-solutions .cmp-container .cmp-button--icon-arrow-w .cmp-button:before {
	content: "";
	width: 10px;
	height: 10px;
	display: block;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	position: absolute;
	top: calc(50% - 4px);
	right: 11px;
	transform: rotate(45deg);
	transition: 0.3s all;
}
#sec-solutions .cmp-container .cmp-button--icon-arrow-w .cmp-button:hover .cmp-button__text{
	color: #ffffff;
}
#sec-solutions .cmp-container .cmp-button--icon-arrow-w .cmp-button:hover:after {
	background: #08CFC8;
}
#sec-solutions .cmp-container .cmp-button--icon-arrow-w .cmp-button:hover:before {
	border-top: 2px solid #08CFC8;
	border-right: 2px solid #08CFC8;
}






/* ----------------------------

faq

---------------------------- */
#sec-faq {padding: 0 0 80px 0;}
#faq{
	background: #0A6776;
	padding: 48px;
	box-sizing: border-box;
	border-radius: 16px;
}
#faq .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #ffffff;
	padding-bottom: 32px;
	font-size: 2.2rem;
	line-height: 1.2;
}
#faq .cmp-accordion__title {
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #ffffff;
	padding: 32px 24px 32px 0;
}
#faq .cmp-accordion__button:after {
    background: url(/hubcharge/common/img/round-button.png) no-repeat 0 / contain;
    content: "";
}
#faq .cmp-accordion__button--expanded:after {
    background: url(/hubcharge/common/img/round-button-on.png) no-repeat 0 / contain;
}
#faq .cmp-accordion__button {border-top: 1px solid #84b3bb;}
#faq .cmp-accordion__item:nth-of-type(1) .cmp-accordion__button {border-top: none;}
#faq .cmp-accordion {border-bottom: 1px solid #84b3bb;}
#faq .cmp-accordion__button {
    padding: 0 30px 0 0;
}
#faq .cmp-accordion__panel--expanded {
    padding: 0 0 35px 0;
}
#faq .cmp-accordion__panel--expanded:before{
	display: none;
}
#faq__accordion .cmp-accordion__panel p {
	margin-top: 0;
	color: #ffffff;
}
#faq__accordion .cmp-accordion__panel a {	color: #ffffff;}


/* ----------------------------

contact

---------------------------- */
#contact{
	border: 1px solid #c7c8c6;
	border-radius: 16px;
	padding: 0;
	background: #F9FAF7 url(/hubcharge/common/img/graphic-dark.png) no-repeat;
	background-size: auto 100%;
	margin-bottom: 80px;
}
#contact .container:nth-of-type(1){
	display: flex;
	align-self: center;
}
#contact__text-area {
	padding: 48px 0 48px 150px;
}
#contact__text-area .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.2;
	font-size: 2rem;
}
#contact__text-area .cmp-text p {
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: 24px;
}
#contact .button a.cmp-button{
	background: #08CFC8;
	border-radius: 4px;
	transition: 0.3s all;
}
#contact .button a.cmp-button:hover{background: #0A6776;}
#contact .button a.cmp-button:hover .cmp-button__text{color: #ffffff;}
#contact .image{
	display: flex;
  align-items: end;
}
#contact .image img {	border-radius: 16px;}

#page__inner #contact{width: 100%;}






/* ----------------------------

pagetitle

---------------------------- */
#hubcharge .gs21-PageTitleUnit__Inner {padding: 80px 40px 100px 40px;}
#hubcharge .gs21-PageTitleUnit__Inner img {height: 100%;}
#hubcharge .gs21-PageTitleUnit__TitleCol {
	gap: 4px;
	margin-top: 85px;
	min-height: 134px;
}
#hubcharge .gs21-PageTitle {
	font-family: "industry", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	font-size: 3rem;
	width: 50%;
	color: #FFFFFF;
	line-height: 1.2;
}
#hubcharge .gs21-PageTitle__Shoulder {
    text-align: left;
}

#hubcharge .gs21-PageTitleUnit{
	background: #0A6776 url(/hubcharge/common/img/graphic-light.png)  top right no-repeat;
	background-size: auto 100%;
}









/* ----------------------------

overview

---------------------------- */
#sec-overview,
#sec-overview-maintenance{margin-bottom: 80px;}
#sec-overview > .container:nth-of-type(1) {margin-top: 0;}
#overview .container:nth-of-type(1) ,
#overview-maintenance .container:nth-of-type(2) {
	display: flex;
	align-self: center;
}
#overview__text-area,
#overview-maintenance__text-area{ width: 98%;}
#overview__text-area .title .cmp-title__text,
#overview-maintenance__text-area .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 2.8rem;
	line-height: 1.2;
}
#overview__image img,
#overview-maintenance__image img{
    border-radius: 16px;
}
#overview__text-area--logo {
	width: 310px;
	margin-bottom: 24px;
}
#sec-back-image {position: relative; margin-bottom: 80px;min-height: 600px;}
#sec-back-image::after {
	content: "";
	display: block;
	width: 70%;
	height: 600px;
	background: url(/hubcharge/operate/img/laptop.png) center right no-repeat;
	position: absolute;
	right: -14%;
	top: -50px;
	background-size: contain;
}

@media screen and (min-width: 1600px) {
#sec-back-image::after {right: -27%;}
}

/* ----------------------------

card

---------------------------- */
#sec-card{margin-bottom: 80px;}
#card .text u {
	text-decoration: none;
	font-size: 2.2rem;
	letter-spacing: 5px;
	padding-bottom: 16px;
	display: inline-block;
}
#card .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.6rem;
	line-height: 1.2;
}

#card__left .container:has(#card__01),
#card__left .container:has(#card__02),
#card .container:has(#card__03):not(.cmp-container--3col),
#card__3col .container:has(#card__01),
#card__3col .container:has(#card__02),
#card__2col .container:has(#card__04),
#card__2col .container:has(#card__05){
	background: #f0f0f0;
	padding: 24px 48px 56px 48px;
	border-radius: 16px;
	box-sizing: border-box;
}
#card .container:has(#card__03):not(.cmp-container--3col){
	position: relative;
}
#card__03 .text {
	position: relative;
	z-index: 1;
}
#card .container:has(#card__03):not(.cmp-container--3col) .image {
	position: absolute;
	bottom: 0;
	z-index: 0;
	max-width: 500px;
}
#card__left .container:has(#card__01){	background: #E6E6E6;	margin-bottom: 32px;}
#card__3col .container:has(#card__01),
#card__2col .container:has(#card__05){	background: #E6E6E6;	margin-bottom: 0;}
#card__left .container:has(#card__02),
#card__3col .container:has(#card__02),
#card__2col .container:has(#card__04){	background: #C8FFF7;}
#card .container:has(#card__03):not(.cmp-container--3col){
	background: #242021;
}
#card__01 .text u,
#card__02 .text u,
#card__04 .text u,
#card__05 .text u{color: #0A6776;}
#card__03 .text u{color: #08CFC8;}
#card__03 .title .cmp-title__text,
#card__03 .text p{
	color: #ffffff;
}

/* 3col */
#card__3col #card01{}


/* ----------------------------

sec-deploy

---------------------------- */
#sec-deploy{
	margin-bottom: 80px;
}
#sec-deploy .tile .gs21-TileItem {
    padding: 32px 16px 0 16px;
}
#sec-deploy .tile .gs21-TileItem__Media{
	border-top: 1px solid #08CFC8;
	padding-top: 32px;
}
#sec-deploy .tile .gs21-ImageUnit__ImageCol-Frame {
    width: 60px;
}
#sec-deploy .tile .gs21-TileItem__Head{
	padding: 16px 0 0 0;
	font-family: "industry", sans-serif;
	font-style: normal;
}
#sec-deploy .tile .gs21-TileItem__Head h3 {
	font-weight: 500;
	font-size: 1.4rem;
	margin-bottom: 8px;
}
#sec-deploy .tile .gs21-TileItem__Body{padding: 0 0 0 0;}
#sec-deploy .tile .gs21-TileItem__Body p {font-weight: 300;}
#sec-deploy .tile .gs21-TileItem{
	
}


/* ----------------------------

sec-process

---------------------------- */
#sec-process {margin-bottom: 80px;}
#sec-process > .title, #sec-process > .text {max-width: 1100px;}
#sec-process > .title .cmp-title__text{
	font-family: "industry", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 2.8rem;
	line-height: 1.2;
}

/* ----------------------------

sec-essential
sec-coming-soon

---------------------------- */
#sec-essential, #sec-coming-soon {
    display: none;
}

@media screen and (max-width: 980px) {
/* ----------------------------

sec-green 980px

---------------------------- */
#green__2col .container:nth-of-type(1) { width: 100%;}
#green__2col .container:nth-of-type(2) { width: 100%;}
#green__2col {   gap: 0;}

/* ----------------------------

solutions 980px

---------------------------- */
#solutions__plan--text-area,
#solutions__deploy--text-area,
#solutions__operate--text-area {
    padding: 32px 7%;
}

/* ----------------------------

contact 980px

---------------------------- */
#contact__text-area {
	padding: 24px 0 24px 100px;
}

	
/* ----------------------------

pagetitle 980px

---------------------------- */
#hubcharge .gs21-PageTitle {
	width: 70%;
}

/* ----------------------------

card 980px

---------------------------- */
#card__left .container:has(#card__01), 
#card__left .container:has(#card__02), 
#card .container:has(#card__03):not(.cmp-container--3col), 
#card__3col .container:has(#card__01), 
#card__3col .container:has(#card__02), 
#card__2col .container:has(#card__04), 
#card__2col .container:has(#card__05) {
    padding: 16px 24px 32px;
}



}/* end980 */

@media screen and (max-width: 767px) {
#hubcharge .cmp-text p {font-size: 1rem;}

/* ----------------------------

inner 767px

---------------------------- */
#sec-green__inner, 
#sec-solutions__inner, 
#faq{padding: 60px 0;}
#page__inner{padding: 0;}



/* ----------------------------

mv 767px

---------------------------- */
#mv {padding-top: 23px;}
#mv-pc__image{	display: none;}
#mv-sp__image{	display: block;}
	
#mv .title {
    top: auto;
    left: 50%;
    width: 90%;
    bottom: 10%;
    transform: translateX(-50%);
    text-align: center;
}
#mv .title .cmp-title__text {
	font-size: clamp(2.5rem, 10vw, 6rem);
}

/* ----------------------------

introduction 767px

---------------------------- */
#sec-introduction__inner{padding: 0 0 60px 0;}
#introduction__text-area { width: 100%;}
#sec-introduction .title .cmp-title .cmp-title__text {font-size: 2rem;}
#sec-introduction .text{text-align: left;}


/* ----------------------------

sec-green 767px

---------------------------- */	
#green__2col--left .title .cmp-title__text {
    font-size: 2rem;
}
#green__2col--right .title .cmp-title__text {
    font-size: 1.8rem;
}

/* ----------------------------

solutions 767px

---------------------------- */
#sec-solutions .container:nth-of-type(1) {margin-top: 0;}
#solutions__plan--text-area,
#solutions__deploy--text-area,
#solutions__operate--text-area {
	padding: 32px 5%;
}
#sec-solutions .cmp-container--2col .cmp-container--2col .title .cmp-title__text{	font-size: 1.8rem;}
#sec-solutions .cmp-container--2col .cmp-container--2col > .cmp-container{
	flex-direction: row;
}
#sec-solutions .cmp-container--2col .cmp-container--2col > .cmp-container .title{width: calc(100% - 120px);}
#solutions__plan > .image::before,
#solutions__deploy > .image::before,
#solutions__operate > .image::before {
	content: "";
	display: block;
	padding-top: 100%;
}
#solutions__deploy .container:nth-of-type(1) {order: 1;}
#solutions__deploy .container:nth-of-type(2) {order: 2;}
#solutions__deploy--img .image {
	width: 100%;
	overflow: hidden;
}
#solutions__deploy--img .image::before {
	content: "";
	display: block;
	padding-top: 50%;
}


/* ----------------------------

faq 767px

---------------------------- */
#faq {	padding: 48px 16px;}
#faq .title .cmp-title__text{	font-size: 2rem; padding-bottom: 0;}
	
/* ----------------------------

contact 767px

---------------------------- */
#contact {
	background-size: auto 60%;
	margin-bottom: 50px;
	background-position: bottom left;
	gap: 0;
}
#contact__text-area {	padding: 32px 24px 0 24px;}
#contact__text-area .title .cmp-title__text{font-size: 2rem;}
#contact .image {margin-top: 0;}	
	
/* ----------------------------

pagetitle 767px

---------------------------- */	
#hubcharge .gs21-PageTitle {	width: 90%;}
#hubcharge .gs21-PageTitleUnit__TitleCol {margin-top: 0;}
#hubcharge .gs21-PageTitleUnit__Inner {padding: 60px 24px;}
#hubcharge .gs21-PageTitle { font-size: 2rem;}
#hubcharge .gs21-PageTitleUnit {
	background: #0A6776 url(/hubcharge/common/img/graphic-light.png) center right no-repeat;
	background-size: 50% auto;
}
	
/* ----------------------------

overview 767px

---------------------------- */	
#sec-overview .container{margin-top: 0;}
#overview__text-area--logo {
	width: 250px;
	margin-bottom: 24px;
}
#overview__text-area .title .cmp-title__text,
#overview-maintenance__text-area .title .cmp-title__text {font-size: 2rem;}
#overview .image,
#overview-maintenance .image {margin-top: 0;}
#sec-back-image {margin-bottom: 150px; min-height: auto;}
#sec-back-image::after {
	width: 100%;
	height: 150px;
	background: url(/hubcharge/operate/img/laptop.png) bottom center no-repeat;
	position: absolute;
	right: auto;
	top: auto;
	background-size: contain;
	transform: translateX(-50%);
	bottom: -140px;
	left: 50%;
}
#overview-maintenance .container{order: 1;}
#overview-maintenance .image{order: 2;}





	
/* ----------------------------

card 767px

---------------------------- */
#card .container:has(#card__03):not(.cmp-container--3col){padding-bottom: 160px;}
#card #card__3col .container:nth-of-type(3){padding-bottom: 32px;}
	

/* ----------------------------

sec-process 767px

---------------------------- */
#sec-process > .title .cmp-title__text {font-size: 2rem;}





	
	
	
	
	
	
	
	
	
	
} /* end767 */