@charset "utf-8";

.sub_head_visual {height: 350px; position: relative; text-align:center; background-size: cover; background-position: center; width: 100% !important;}
.sub_head_visual .sub_page_title {font-size: 5rem; margin-bottom: 15px; line-height: 1em; padding-top:170px; color: #fff;}
.sub_head_visual .sub_page_breadcrumb {font-size: 1.5rem; line-height: 1em; color: #fff;}
.sub_head_visual.about {background-image: url(../images/sub/subvisual_bg_about.jpg);}
.sub_head_visual.business {background-image: url(../images/sub/subvisual_bg_business.jpg);}
.sub_head_visual.news {background-image: url(../images/sub/subvisual_bg_news.jpg);}
.sub_head_visual.platforms {background-image: url(../images/sub/subvisual_bg_platforms.jpg);}
.sub_head_visual.products {background-image: url(../images/sub/subvisual_bg_about.jpg);}

#subnavi {position:relative; z-index:10; height:70px;  text-align:center; background:#fff; margin-top: -35px;}
#subnavi .home {overflow:hidden; position:relative; float:left; width:70px; height:70px; text-indent:-999px; background:url(../images/sub/ico_home.png) no-repeat center var(--color-blue);}
#subnavi .inbox {display:flex; width:100%; background: #000; max-height: 70px;}
#subnavi .inbox > div { position:relative; width:100%;  max-width:200px;}
#subnavi .inbox > div::after {content:''; position:absolute; top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,0.5); }
#subnavi .inbox > div > a {display:block; overflow:hidden; position:relative; color:#fff; line-height:70px; white-space:nowrap; text-overflow:ellipsis;}
#subnavi .inbox > div > a span {font-size: 1.7rem; color:inherit; font-family: inherit; position: relative;  padding-right:25px; display: inline-block;}
#subnavi .inbox > div > a span::after {position:absolute; top:50%; right:0; width:11px; height:7px; margin-top:-4px; background:url(../images/sub/ico_lnb_arr.png) no-repeat center; background-size:contain; content:''; transition:all 0.4s;}
#subnavi .inbox > div.on > a span::after {transform:rotate(180deg);}
#subnavi ul {display:none; position:absolute; top:70px; left:0; right:0; border:1px solid #eaeaea; border-top:0; border-bottom:0; background:#fff;}
#subnavi ul li {border-bottom:1px solid #eaeaea;}
#subnavi ul a {display: block;   position: relative;   padding-left: 0;   font-size: 1.7rem;   color: #222222;   line-height: 5.5rem;   text-align: center;   background: #fff;  transition: all 0.4s;}
#subnavi ul .on a, #subnavi ul a:hover {background:#f6f6f6;}
#subnavi ul .on a:after , #subnavi ul a:hover:after {background-position:0 0;}
#subnavi ul a img {display: none;}


@media (max-width:1024px) {
    .sub_head_visual { height: 280px;}
    .sub_head_visual .sub_page_title {padding-top: 120px; font-size: 3.8rem;}
    .sub_head_visual .sub_page_breadcrumb {  font-size: 1.3rem;}
    #subnavi {height: 50px; margin-top: -25px;}
    #subnavi .home {width: 50px; height: 50px;}
    #subnavi .inbox > div > a {line-height: 50px;}
    #subnavi .inbox > div > a span {  font-size: 1.4rem;}
    #subnavi ul {top: 50px}
    #subnavi ul a {font-size: 1.6rem; line-height: 5rem;}
}

@media (max-width:480px) {
    .sub_head_visual {  height: 200px; }
    .sub_head_visual .sub_page_title {  padding-top: 100px;  font-size: 2.8rem; }
    .sub_page_mid_menu .container_inner {width: 100%;}
    #subnavi .inbox > div { width: 50%;}
    #subnavi .inbox > div > a span::after {width: 8px; height: 7px;}
    #subnavi .inbox.element_3 > div { width: 30%;}
    #subnavi .inbox.element_3 > div > a span {padding-right: 15px;}
}