@charset "utf-8";

/* scrollHeader
--------------------------------------------------*/
#scrollHeader{
 width: 100% ;
 background: #ffffff ;
 position: fixed ;
 z-index: 9999 ;
 top: -200px ;
 left: 0 ;}

@media screen and (min-width:1250px) {
 #scrollHeader.fixed{
  top: 0 ;
  -webkit-transition: top .4s ease-out;
  -o-transition: top .4s ease-out;
  transition: top .4s ease-out;}
}

#scrollHeader .sH-wrap{
 width: 100% ;
 min-width: 1250px ;
 margin: 0 auto ;}

#scrollHeader .sH-wrap .sH-wrap-inner{
 width: 95% ;
 display: flex ;
 justify-content: space-between ;
 margin: 0 auto ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo{
 flex-basis: 600px ;
 margin:0 5px 0 0;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo p{
 margin:5px 0 ;}

/*
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type1,
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type2{
 display: none ;}
*/

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type1 p,
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type2 h1,
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 h1,
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 h1{
 margin: 0;
 color: #565656;
 line-height: 2;
 font-size: 0.9rem;
 font-weight: 700;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type2 h1{
 margin-top: 5px ;
 margin-bottom: 5px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .research{
 display: flex ;
 align-items: center ;
 margin: 5px 5px 0 5px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .research p.research img{
 max-width: 145px;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 h1{
 max-width: 250px ;
 margin-top: 5px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 + div.research{
 width: 180px;
 margin-top: 5px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 h1{
 margin-top: 10px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 p{
 margin-top: 10px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type1 h1 img,
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 h1 img,
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 h1 img{
 max-width: 100% ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 h1 img{
 max-width: 250px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 p img{
 max-width: 87px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type2 ul{
 width: 782px ;
 display: flex ;
 margin: 0 ;
 padding: 0 ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type2 ul li{
 list-style: none ;
 margin: 0 10px 0 0 ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type2 ul li img{
 max-width: 100% ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul{
 width: 100% ;
 display: flex ;
 margin: 9px 0 0 0 ;
 padding: 0 ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu{
 list-style: none ;
 margin: 0 2px 0 0  ;
 padding: 0 ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu > a{
 position: relative ;
 display: block ;
 padding: 3px 0 1px 0;
 background: #cccccc ;
 border: 1px solid #cccccc ;
 color: #004098 ;
 text-decoration: none ;
 font-size: 1.1rem ;
 font-size: 15px ;
 text-align: center ;
 box-sizing: border-box ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu:hover > a{
 border: 1px solid #cccccc ;
 background: #ffffff ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu:hover > a::before{
 content: '';
 display: block;
 position: absolute;
 background: #fdd300;
 top: -1px;
 left: 0;
 width: 100% ;
 height: 2px;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu:hover > a::after{
 content: '';
 display: block;
 position: absolute;
 top: 2px;
 left: 0;
 right: 0;
 margin: auto;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 4px 3px 0 3px;
 border-color: #fdd300 transparent transparent transparent;}


#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu:nth-child(2) a{
 min-width: 119px ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu .subMenu{
 position: absolute;
 z-index: 10000;
 top: 111px;
 left: 0;
 visibility: hidden;
 width: 100%;
 max-height: 80vh ;
 overflow-y: auto ;
 -webkit-transition: .3s;
 -o-transition: .3s;
 transition: .3s;
 opacity: 0;
 color: #fff;
 background: #0f2356;}


#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu:hover .subMenu{
 opacity: 1 ;
 visibility: visible ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu .subMenu p{
 max-width: 95% ;
 margin: 15px auto ;
 font-size: 1.4rem ;
 color: #ffffff ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu .subMenu .contLinkBoxWrap{
 width: 95% ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type3 ul li.mainMenu .subMenu .contLinkBox:nth-child(3n+1){
 clear: none ;
 margin: 0 0 15px 8px;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul{
 width: 100% ;
 display: flex ;
 margin: 5px 0 0 0 ;
 padding: 0 ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu{
 list-style: none ;
 margin: 0 10px 0 0  ;
 padding: 0 ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu a{
 position: relative ;
 display: block ;
 padding: 5px 10px 5px 15px;
 text-decoration: none ;
 font-size: 16px ;
 box-sizing: border-box ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu a::before{
 display: block ;
 content: '' ;
 position: absolute ;
 left: 0;
 top: 15px ;
 width: 4px;
 height: 4px;
 border-top: 2px solid #0f2356;
 border-right: 2px solid #0f2356;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu .subMenu{
 position: absolute;
 z-index: 10000;
 top: 113px;
 left: 0;
 visibility: hidden;
 width: 100%;
 -webkit-transition: .3s;
 -o-transition: .3s;
 transition: .3s;
 opacity: 0;
 padding-top: 10px ;
 color: #fff;
 background: #0f2356;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu:hover .subMenu{
 opacity: 1 ;
 visibility: visible ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu:hover .subMenu dl{
 max-width: 1250px ;
 margin: 15px auto 15px auto ;
 display: flex ;
 justify-content: space-between ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu:hover .subMenu dl dt{
 color: #ffffff ;
 flex-basis: 150px ;
 font-size: 16px ;}
 
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu:hover .subMenu dl dd{
 flex-basis: calc( 100% - 170px) ;}
 
#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu .subMenu ul{
 width: 100% ;
 display: flex ;
 flex-wrap: wrap ;
 justify-content:flex-start ;
 margin: 0;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu .subMenu ul li{
 list-style: none ;
 margin: 0 20px 10px 0 ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu .subMenu ul li a{
 position: relative ;
 color: #ffffff ;
 display: block ;
 font-size: 16px ;
 margin: 0 ;
 padding: 2px 0 2px 15px;
 box-sizing: border-box ;}

#scrollHeader .sH-wrap .sH-wrap-inner .logo.sH-type4 ul li.mainMenu .subMenu ul li a::before{
 display: block ;
 content: '' ;
 position: absolute ;
 left: 0;
 top: 12px ;
 width: 4px;
 height: 4px;
 border-top: 2px solid #ffffff;
 border-right: 2px solid #ffffff;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);}

#scrollHeader .sH-wrap .sH-wrap-inner .right_top{
 align-items: flex-start;
 margin: 10px 0 10px;}

#scrollHeader .sH-wrap .sH-wrap-inner .right .headerBtn {
 border-bottom: 1px solid #003194;
 list-style: none;
 margin: 0 10px 0 0;
 padding: 0 0 10px}

#scrollHeader .sH-wrap .sH-wrap-inner .right .headerBtn a {
 background: #fdd100;
 display: block;}

#scrollHeader .sH-wrap .sH-wrap-inner .right .headerBtn li:not(:last-child) a {
 margin: 0 10px 0 0;}

#scrollHeader .sH-wrap .sH-wrap-inner .right .headerBtn a:hover {
 background: #fdb300;}

#scrollHeader .sH-wrap .sH-wrap-inner .right .right_bottom {
 font-size: 16px;
 margin: 0;}

#scrollHeader .sH-wrap .sH-wrap-inner .right .right_bottom img {
 vertical-align: sub;
 margin: 0 10px;}

#scrollHeader .sH-wrap .sH-wrap-inner .right .right_bottom span {
 color: red;
 font-weight: bold;
 font-size: 20px;}



/* SP header
--------------------------------------------------*/
body.fixed{
 /*position: fixed ;*/}

.spMode .skinBody #HeadPortal.fixed{
 position:fixed ;
 width: 100% ;
 max-height: 100vh ;
 background: #ffffff ;}

.spMode .skinBody #headBody .HeadBottomWrapper{
 position: fixed ;
 top: 65px ;
 overflow-y: auto ;}

.spMode .skinBody #headBody .HeadBottomWrapper.open{
 height: calc(100vh - 65px) ;}