@charset "UTF-8";

.head28,
.head32,
.head42{
  font-weight: 500;
}

/*--------------------------------------------------------#sec-b-intro-----*/

#sec-b-intro{
  padding: 90px 0 120px;
}

.flex-b-intro{
  justify-content: space-between;
  align-items: center;
}

.b-intro-ttl{
  width: 48%;
}

.b-intro-ttl .gra-head {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.b-intro-ttl .head42{
  margin-bottom: 20px;
}

.b-intro-ttl .head42 .head32{
  display: block;
}

.blue-border span{
  background: #e9f7ff;
  font-weight: 500;
  padding: 3px 10px 5px;
}

.b-intro-detail{
  width: 50%;
}

/*--------------------------------------------------------#sec-domain-----*/

#sec-domain{
  background: #f4f4f4;
  padding: 120px 0;
}

.flex-domain{
  justify-content: space-between;
  align-items: center;
}

.domain-img{
  width: 46%;
}

.domain-content{
  width: 50%;
}

.domain-content .gra-head{
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.domain-content .head32{
  margin-bottom: 25px;
}

.domain-text{
  margin-bottom: 40px;
}

.domain-list li{
  margin-bottom: 20px;
}

.domain-list li:last-child{
  margin-bottom: 0;
}

.domain-wrap{
  display: flex;
  justify-content: flex-start;
  align-content: center;
}

.energy{
  background: linear-gradient(90deg, rgba(5,137,230,1) 0%, rgba(36,184,252,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(5,137,230,1) 0%, rgba(36,184,252,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  line-height: 1.4 !important;
  display: block;  
  border-right: 1px solid #dddddd;
  padding-right: 25px;
  width: 90px;
}

.energy .text54{
  font-size: 54px;
  font-size: 5.4rem;
  line-height: 1 !important;
  font-weight: 100;
  text-align: center;
} 

.energy .text12{
  display: block;
  font-weight: 100;
  margin-top: 10px;  
} 

.domain-detail{
  padding-left: 25px;
  width: calc(100% - 90px);
}

.domain-detail .gra-head{
  margin-bottom: 5px;
}

/*--------------------------------------------------------#sec-service-----*/

#sec-service{
  padding: 120px 0;
}

.flex-ser{
  justify-content: space-between;
  align-items: center;
  margin-bottom: 70px;
}

.ser-ttl{
  width: 45%;
}

.ser-ttl .gra-head{
  margin-bottom: 20px;
}

.ser-text{
  width: 52%;
}

.ser-list{
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

.ser-list li{
  width: 24.25%;
}

.ser-wrap{
  background: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  -webkit-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  -moz-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
}

.ser-icon{
  margin-right: 15px;
  width: 65px;
}

.service-list-wrap{
  margin-bottom: 100px;
}

.flex-s{
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.s-img{
  position: relative;
  width: 50%;
}

.s-img .s-icon{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s-img .s-icon:after{
  content: "";
  position: absolute;
  box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  -webkit-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  -moz-box-shadow: 0px 0px 20px -1px rgba(35,156,236,0.3);
  border-radius: 90px;
  height: 90px !important;
  width: 90px !important;
  background: #fff;
}

.s-img .s-icon img {
    width: 45px;
    position: relative;
    z-index: 1;
}

.s-detail{
  width: 46%;
}

.s-ttl{
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 25px;
  padding-bottom: 15px;
}

.service-list-wrap .head21{
  margin-bottom: 20px;
}

.service-list-wrap .ft-c-blue{
  font-weight: 500;
  margin-bottom: 20px;
}

.service-list-wrap .ft-c-blue .text18{
  display: block;
  margin-bottom: 5px;
}

.flex-s01{
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.s01-wrap{
  width: 49%;
}

.s01-wrap .text15{
  text-align: center;
}

.dot{
  display: flex;
  font-weight: 500;
  margin-bottom: 10px;
  align-items: center;
}

.dot .gra-head{
  margin-right: 5px;
}

.flex-lineup{
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.flex-lineup li{
  margin-right: 0.75%;
  width: 19.25%;
}

.flex-lineup li .text15{
  line-height: 1.4 !important;
  margin-top: 5px;
  text-align: center;
}

.flex-brand{
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 120px;
}

.flex-brand li{
  margin-right: 2%;
}

.flex-brand li:last-child{
  margin-right: 0;
}

.flex-gray{
  justify-content: space-between;
}

.flex-gray li{
  background: #f8f8f8;
  padding: 30px 20px;
  width: 31%;
}

.flex-gray li .text16{
  line-height: 1.4 !important;
  margin-bottom: 10px;
  text-align: center;
}

.flex-main{
  align-items: center;
  justify-content: space-between;
}

.flex-main .main-img01{
  width: 58%;
}

.flex-main .main-img02{
  width: 39%;
}


@media only screen and (max-width: 1560px) {

}

@media only screen and (max-width: 1280px) {

.b-intro-ttl .head42 {
    font-size: 3.8rem;
}

.b-intro-ttl .head42 .head32 {
    font-size: 2.6rem;
}

.ser-icon {
    margin-right: 15px;
    width: 46px;
}
}

@media only screen and (max-width: 960px) {

}

@media only screen and (max-width: 768px) {

.head32{
    font-size: 2rem;
}

.head28 {
    font-size: 2.2rem;
}

#sec-b-intro {
    padding: 60px 0;
}

.b-intro-ttl .head42 {
    font-size: 2.6rem;
}

.b-intro-ttl .head42 .head32 {
    font-size: 1.7rem;
}

.blue-border span {
    font-size: 1.5rem;
}

.flex-b-intro {
    display: block;
}

.b-intro-ttl {
    width: 100%;
    margin-bottom: 30px;
}

.b-intro-detail {
    width: 100%;
}

#sec-domain{
    padding: 60px 0;
}

.flex-domain {
    display: block;
}

.domain-img {
    margin-bottom: 35px;
    width: 100%;
}

.domain-content {
    width: 100%;
}

.domain-detail .gra-head {
    font-size: 1.8rem;
}

#sec-service {
    padding: 60px 0;
}

.service-list-wrap {
    margin-bottom: 40px;
}

.flex-ser {
    margin-bottom: 30px;
    display: block;
}

.ser-ttl {
    margin-bottom: 25px;
    width: 100%;
}

.ser-text {
    width: 100%;
}

.ser-list {
    margin-bottom: 50px;
}

.ser-list li {
    width: 49%;
    margin-bottom: 2%;
}

.flex-s {
    display: block;
    margin-bottom: 30px;
}

.s-img {
    width: 100%;
    margin-bottom: 20px;
}

.s-img .s-icon {
    left: auto;
    top: auto;
    bottom: -10px;
    right: 40px;
}

.s-detail {
    width: 100%;
}

.s-ttl {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.ser-list .text15 {
    font-size: 1.3rem;
    line-height: 1.4 !important;
}

.flex-lineup {
    margin: 0 -1% 30px;
}

.flex-lineup li {
    width: 31%;
    margin: 0 1% 20px;
}

.flex-brand {
    margin: 10px 0 50px;
}

.flex-brand img{
  height: 30px;
}

.flex-gray{
  display: block;
}

.flex-gray li {
  margin-bottom: 25px;
  padding: 8% 5%;
  width: 100%;
}

.flex-gray li:last-child {
  margin-bottom: 0;
}

.flex-gray li .text16 {
    font-size: 1.7rem;
}

.flex-main {
    display: block;
}

.flex-main .main-img01 {
    overflow: scroll;
    width: 100%;
}

.flex-main .main-img01-note{
  color: #a5a5a5;
  font-size: 1.2rem;
}

.flex-main .main-img02 {
    width: 100%;
}

}

@media only screen and (max-width: 400px) {

.ser-list .text15 {
    font-size: 1.0rem;
    line-height: 1.4 !important;
}

.flex-lineup li {
    width: 48%;
}

.ser-list li {
    width: 100%;
    margin-bottom: 3%;
}

.ser-wrap {
    padding: 5% 8%;
}

.ser-list .text15 {
    font-size: 1.5rem;
}

.flex-main .main-img01 img {
    width: 580px;
    padding-bottom: 5px;
}

}