#gs_news,#top_merit,#top_function,#top_products,#top_case{
    margin: 60px auto;
    padding: 40px 0;
     text-align: center;
}

#top_topix{
    margin: 0px auto 10px auto;
    padding: 20px 0;
     text-align: center;
    background: #eee;
}
#top_topix img{
    margin: 5px;
}

#top_customers h2,#gs_news h2,#top_merit h2,#top_function h2,#top_products h2,#top_case h2{
    text-align: center;
    margin: 0 0 30px 0;
    padding: 0;
  font-weight: bold;
}

#top_page main a.button {
display: block;
position: relative;
width: 300px;
height: 48px;
border-radius: 24px;
cursor:pointer;
text-align: center;
border: none;
background: #1571DA;
background-size:300px 300px;
color: #fff;
font-size: 1.125rem;
padding: 10px 12px 12px 12px;
margin: 0 auto;
overflow: hidden;
 transition: 1s;
text-decoration: none;
}

#top_page main a.button::after {
transform: rotate(45deg);
width: 8px;
height: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
content: '';
float: right;
margin-right: 12px;
margin-top: 8px;
}
/*文字中央用*/
#top_page main a.button::before {
width: 8px;
height: 8px;
content: '';
float: left;
margin-right: 12px;
}


#top_page main a.button:hover{
opacity: 1;
background-image:radial-gradient( circle at 20% 30%, rgba(255,255,255,0.9), transparent );
background-blend-mode:overlay;
background-position:50% 100%;
}

/*メイン*/
#top_main{
font-size: clamp(1.75rem, 1.659rem + 0.45vw, 2rem);
background: url(../images/topmain_bg01.png), url("../images/topmain_bg02.png"), linear-gradient(#EBF5FF 0%, #B4DFFF  100%);
background-position: left -5% top -100px, right 10% top 20%, right bottom;
background-size: 20% auto, 30%, 100%;
background-repeat: no-repeat, no-repeat, no-repeat;
padding: 40px 0 30px 0;
}

#top_main .container{
z-index: 10!important;
}

#top_main .top_main_ul{
display: flex;
}
#top_main .top_main_ul li{
padding: 0;
margin: 0;
 
}
#top_main .top_main_ul li:nth-child(1){
width: 45%;
}
#top_main .top_main_ul li:nth-child(2){
width: 55%;
text-align: center;
position: relative
}

#top_main .top_main_ul li .top_main_main{
width: 80%;
}

#top_main .top_main_graph{
position: absolute;
bottom: 10%;
right: 20px;
/*width: clamp(150px, 15vw, 220px);*/
}


#top_main h2{
font-size: 1.875rem;
  font-weight: bold;
}

#top_main p{
font-size: 1rem;
}

#top_main .top_main_ul .main_btn_box{
display: flex;
justify-content: space-around;
margin: 20px auto;
}
#top_main .top_main_ul .main_btn_box a{
text-decoration: none;
}
#top_main .top_main_dl,#top_main .top_main_trial{
border-radius: 30px;
padding: 8px 10px 8px 15px;
font-size: 1rem;
text-align: center;
font-weight: bold;
background: #fff;
}

#top_main .top_main_dl{
border: 3px solid #1571DA;
color: #1571DA;
}
#top_main .top_main_trial{
border: 3px solid #00B2C1;
color: #00B2C1;
}

#top_main .top_main_info{
width: 100%;
max-width: 540px;
border: 1px solid #ff5172;
border-radius: 10px;
padding: 0;
display: flex;
font-size:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
background: #fff;
margin-bottom: 5px;
}
#top_main .top_main_info p{
padding: 10px 8px;
margin: 0;
background: #fff;
display: inline-block;
font-size: 0.875rem;
}

#top_main .top_main_info .top_main_info_tit{
background: #ff5172;
color: #fff;
font-weight: bold;
border-radius: 10px 0 0 10px;
padding: 10px;
}


/*企業ロゴ*/
#top_customers{
margin: 40px auto -20px auto;
}

#top_customers .slider{
overflow: hidden;
display: flex;
}
#top_customers img{
margin: 10px 20px;
}
#top_customers ul{
display: flex;
align-items: center;
animation: slideShow 70s infinite linear;
}
#top_customers .h_img{
height: 40px;
width: auto;
}
#top_customers .h2_img{
height: 30px;
width: auto;
}
#top_customers .v_img{
height: 80px;
width: auto;
margin: 0 30px;
}
#top_customers .v2_img{
height: 60px;
width: auto;
}

#top_page .h_logo a:hover{
    opacity: 1!important;
    cursor: default!important;
}

@keyframes slideShow {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/*お知らせ*/

main a[href^="http://192.168.77.75/"]:after{
  margin: inherit;
  font-family: inherit;
  content: '';
  font-weight: inherit;
}

#gs_news{
background: #EDF2FF;
}

#gs_news .top_news_tit{
display: flex;
margin-bottom: 30px;
}

#gs_news .top_news_tit li,.cloud_news_tit li{
width: 33%;
margin-right: 1%;
text-align: left;
background: #fff;
border-radius: 18px;
padding:10px 15px 15px 20px;
}

#gs_news .top_news_tit li{
border: 1px #D1DEFF solid;
}
#gs_news .top_news_tit li .data,.cloud_news_tit .data{
display: inline-block;
    line-height: 120%;
    margin: 0 4px;
    font-size: 0.875rem;
    color: #777A80;
}

#gs_news .category{
border-radius: 12px;
width: 90px;
height: 20px;
display: inline-block;
padding: 0 3px 3px 3px;
text-align: center;
font-size: 0.75rem; 
background: #fff;
line-height: 160%;
margin: 5px 0;
}


#gs_news li .news_t{
display: block;
margin: 0;
font-size: 1rem;
}

#gs_news li .news_t a{
text-decoration: none;
color: #212531;
}
#gs_news li .news_t a:hover{
color: #11507f;
text-decoration: none;
}

/*お知らせ*/
/*消去用*/
.info-ticker{
	display: none!important;
}
.category:empty {
  display: none;
}

.category.info-bycloud{
display: inline-block!important;
    color: #47adc4!important;
    border: #47adc4 1px solid;
}
.info-maintenance{
    color: #c04860!important;
    border: #CF7385 1px solid;
}
.category.info-news{
    color: #78ac35!important;
    border: #9ac365 1px solid;
}
.info-failure{
border: 1px solid #e77d00;
color: #e77d00;
}
.category.info-release{
    color: #3a7fd5!important;
    border: #568fd5 1px solid;
}

/*脆弱性*/
.info-security{
    color: #f81354!important;
    border: #f81354 1px solid;
}

.wp_new{
background: #FF5D5D;
color: #fff;
border-radius: 12px;
width: 40px;
height: 20px;
display: inline-block;
padding: 3px;
text-align: center;
font-size: 0.625rem;
line-height: 160%;
margin: -100px 0 0 -25px;
}

/*導入メリット*/
#top_merit{

}

#top_merit h3 span{
font-size: 4rem;
    margin-right: -15px;
     background: linear-gradient(-25deg, #4fc0de 30%, #0B92C8 70%);
    -webkit-background-clip:  text;
    color:  transparent;
}

#top_merit ul li{
display: flex;
background: linear-gradient(180deg, transparent 0%, transparent 35%, #56bee4 35%, #56bee4 100%);
  justify-content: center;
  align-items: center;
margin-bottom: 40px;
}

#top_merit ul li:nth-child(odd){
flex-direction: row-reverse;
background: linear-gradient(-180deg, transparent 0%, transparent 35%, #56bee4 35%, #56bee4 100%);
}

#top_merit ul li div{
    width: 50%;
}
#top_merit ul li div.merit_img{
    width: 600px;
    height: 420px;
   position: relative;
}

#top_merit ul li div.merit_img img{
position: absolute;
left: 15px;
bottom: 0
}

#top_merit ul li .top_merit_txt{
    padding: 20px;
    text-align: left;
}

#top_merit ul li .top_merit_txt .top_merit_function{
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

#top_merit ul li .top_merit_txt p{
padding: 0 20px 10px 20px;
    border-radius: 10px;
    background: rgba(255,255,255,0.7);
    margin-top: -10px;
}


/*
#top_merit ul li .top_merit_txt .top_merit_function ol{
    border-left: solid 1px #4E95C1;
    border-radius: 0;
    font-size: 0.75rem;
    padding: 5px 10px;
    width: 100px;
    text-align: center;
    color: #4E95C1;
}
#top_merit ul li .top_merit_txt .top_merit_function ol:last-child{
    border-right: solid 1px #4E95C1;
}
*/

#top_merit ul li .top_merit_txt .top_merit_function ol{
border-left: solid 1px #fff;
border-radius: 0;
font-size: 0.75rem;
padding: 5px 10px;
width: 100px;
 text-align: center;
 color: #fff;
}
#top_merit ul li .top_merit_txt .top_merit_function ol:last-child{
border-right: solid 1px #fff;
}

#top_merit ul li .top_merit_txt .top_merit_function ol img{
width: 45px;
height: auto;
display: block;
margin: 0 auto;
filter: brightness(0) invert(1);
/*filter: invert(41%) sepia(89%) saturate(290%) hue-rotate(159deg) brightness(90%) contrast(95%);*/
 opacity: 0.8;
}
#top_merit ul li .top_merit_txt .top_merit_function .icon_s img{
width: 38px;
margin-bottom: 7px;
height: auto;
}


/*機能*/
#top_function{
    background: #F5F8FF;
}

#top_function ul{
display: flex;
 flex-wrap: wrap;
}
#top_function ul li{
    width: 170px;
  padding: 10px 12px 0px 12px;
  margin: 15px;
background: #fff;
border-radius: 10px;
position: relative;
 box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}
#top_function ul li img{
    height: 58px;
    width: auto;
}

#top_function ul li p{
display: block;
font-size: 0.9375rem;
line-height: 140%;
font-weight: bold;
margin: 10px 0 20px 0;
}
#top_function ul li span{
display: none;
font-size: 0.75rem;
line-height: 120%;
letter-spacing: -0.03rem;
color: #A3A3A3;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}


/*製品プラン*/
#top_products{
    
}

#top_products ul{
display: flex;
justify-content: space-between;
}
#top_products ul li{
 width: 32%;
text-align: center;
}

#top_products ul li div{
position: relative;
}

#top_products ul li img{
width: 100%;
}

#top_products ul li .top_products_logo{
position: absolute;
height: 46px;
width: auto;
left: 0;
bottom: 0;
background: #fff;
padding: 5px 15px;
border-radius: 0 10px 0 0;
}

#top_products ul li p {
font-weight: bold;
text-align: left;
}


/*導入事例*/
#top_case{
background: #F5F8FF;
}

#top_case ul{
display: flex;
margin-bottom: 30px;
flex-wrap: wrap;
justify-content: space-around;
}

#top_case li{
width: 30%;
border-radius: 10px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
margin: 0 10px;
padding-bottom: 20px;
line-height: 150%;
font-size: 1rem;
background: #fff;
}

#top_case li img{
width: 100%;
border-radius: 8px 10px 0  0;
}

#top_case li h3{
text-align: left;
font-size: 1.125rem;
margin: 10px 0 0 15px;
font-weight: bold;
}

#top_case li .com_txt{
text-align: left;
padding: 10px 15px;
}
#top_case li .com_txt p{
   margin: 0 0 15px 0;
}
#top_case li .com_txt dl{
 font-size: 0.875rem;
display: flex;
flex-wrap: wrap;
}

#top_case li .com_txt dt{
width: 30%;
height: 22px;
background: #3D7CA3;
color: #fff;
text-align: center;
margin-bottom: 5px;
font-size: 0.8125rem;
padding-top: 5px;
line-height: 100%;
}
#top_case li .com_txt dd{
width: 70%;
color: #3D7CA3;
font-weight: bold;
text-align: left;
margin: 0;
    padding: 0 0 0 10px;
}


/*メイン*/


/* 960以上 */
@media  (min-width: 960px) {

.wrapper{

    }
    
}


/* 960未満 */
@media (max-width: 959px) {

.wrapper{

    }
    
#top_main{
background-position: -5% -90%, right -150% top 10%, right bottom;
background-size: 20% auto, 80%,100%;
}

#top_main .top_main_ul li:nth-child(1){
    width: 100%;
    max-width: 550px;
}
#top_main .top_main_ul li:nth-child(2){
 display: none;
}
    
#top_main .top_main_dl,#top_main .top_main_trial{
border-radius: 10px;
padding: 6px 2px 6px 4px;
}
    
#gs_news .top_news_tit{
flex-wrap: wrap;
    }
#gs_news .top_news_tit li{
width: 100%;
margin-bottom: 5px
    }
    
#top_merit ul li{
flex-wrap: wrap;
    }  
    
#top_merit ul li:nth-child(even){
flex-direction: row;
}
    
#top_merit ul li div{
width: 100%;
}

#top_merit ul li div.merit_img{
    width: 100%;
    height: auto;
   position:inherit;
    margin-top: -20px
}
#top_merit ul li div.merit_img img{
   position:inherit;
    width: 70%;
    height: auto
}

#top_merit ul li{
background: linear-gradient(180deg, transparent 0%, transparent 20%, #56bee4 20%, #56bee4 100%);
margin-bottom: 40px;
}

#top_merit ul li:nth-child(odd){
background: linear-gradient(-180deg, transparent 0%, transparent 20%, #56bee4 20%, #56bee4 100%);
}
    
#top_function ul{
justify-content: space-around;
}
    
#top_products ul,#top_case ul{
flex-wrap: wrap;
}
#top_products ul li,#top_case ul li{
    width: 90%;
    margin: 20px auto;
}

#top_case li:nth-child(2){
        margin: 20px 0;
    }
    
    #top_topix img{
    max-width: clamp(300px, 80%, 420px);
}

}