@charset "utf-8";
/* CSS Document */
    figure {
        margin: 0 auto;
        width: 100%;
    }
img {
    max-width: 100%;
    height: auto
}
 .pc{
display: none;

}
body {
font-family: 'Noto Sans JP', sans-serif;
margin: 0 auto;
padding: 0;
font-weight: 300;
    color: #333333
}
            .op {
               font-family: 'Open Sans', sans-serif;
            }
a {
color: #333333;
text-decoration: none;
}
a:hover img {
opacity: 0.5;
}
ul,li {
list-style: none;
margin: 0 auto;
padding: 0;
}
.fadein {
position: fixed;
    width: 100%;
    z-index: 100;
}
            h1,h2,h3,h4,h5,p {
                margin: 0 auto;
            }
header {
position: relative;
color: #FFF;
    padding: 10px 0 0;
    z-index: 9999
}
header.fadein {
    background: #FFF;
        padding: 10px 0;
}


.wrap {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
}

.hlogo {
    padding-left: 20px;
}

            header ul li,footer ul li { 
                margin: 0;
    font-size: 0.9rem;
            }
            header ul li a,footer ul li a {
display: block;
                    padding: 5px 10px;
    position: relative;
    font-weight: 500;
            }
           
            header ul li a:hover:after {
    background: #0c6eb9;
    width: 80%;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -40%;
    content: "";
            }

.hide{display:none;}
                    .topjump a{
                    padding: 10px 13px 50px;
    display: block;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: -60px;
    background: #000;
                    }
                    footer {
                        background: #e9f6ff;
                       padding: 30px 0 0 ;
                        overflow: hidden
                    }
                    footer ul {
                       width: 100%;
    text-align: center;
                    }
                  
                    footer .foottext {
                        font-size: 0.8rem;
    text-align: center;
    padding-left: 10px;
    font-style: normal;
    line-height: 1.6rem;
                    }
                    .copy {
                     color: #fff;
    font-size: 0.7rem;
    font-style: normal;
    padding: 10px 0;
    text-align: center;
    background: #0c6eb9;
    bottom: 0;
                        margin: 0 auto 0
                    }
                   

.footmenu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.5);
    margin: 20px auto 0;
    border-bottom: 1px dashed #0c6eb9;
    border-top: 1px dashed #0c6eb9;
}
.footmenu li {
    width: 49.5%;
border-bottom: 1px dashed #e8e8e8;
}
footer ul.footmenu li a {
    padding: 9px 0;
    font-size: 0.8rem;
}
footer li ul li a:before {
    content: "";
    position: relative;
    background: url(/img/common/moreb.png);
    width: 11px;
    height: 17px;
    left: -10px;
    font-weight: bold;
    font-style: normal;
    top: 3px;
    display: inline-block;
                    }
footer li ul ul li a:before {
    background: none;
    content: "";
}
.footmenu li li,
.footmenu li:nth-child(3),
.footmenu li:nth-child(4){
    width: 100%;
}
.footmenu ul {
  display: flex;
    background: rgba(255,255,255,0.5);
    border-top: 1px dashed #e8e8e8;
}
.footmenu li:nth-child(4) ul {
    flex-wrap: wrap;
}
.footmenu li:nth-child(4) ul li {
  width: 49.5%;
}
.footmenu li:nth-child(3),
.footmenu li:nth-child(4) li:last-child {
    border-bottom: none
}
.footmenu li:nth-child(3) li:last-child {
    border-right: none;
border-left: 1px dashed #e8e8e8;
}
.footmenu li:nth-child(odd) {
    border-right: 1px dashed #e8e8e8;
}
            .top #fv {
                height: 510px;
                overflow: hidden;
            }
           .top #fv .fvimg {
                  position: absolute;
    z-index: 11;
    top: 345px;
    width: 80%;
    margin: 0 10%;
            }
            .top #fv h1 {
         text-align: center;
    position: absolute;
    z-index: 11;
    top: 435px;
    font-size: 0.9rem;
    font-weight: 500;
    width: 90%;
    margin: 0 5%;
    line-height: 1.2rem;
            }
            .top .lSSlideOuter .lSPager.lSpg {
                   text-align: left;
    position: absolute;
    top: 295px;
    left: 43%;
            }
            .top .lSSlideOuter .lSPager.lSpg > li a {
                background: none;
                border: 1px solid #0c6eb9;
            }
            .top .lSSlideOuter .lSPager.lSpg > li:hover a,.top  .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #0c6eb9;
}
        

            #news {
                background: #0c6eb9;
                padding: 20px 0;
                color: #FFF;
            }
            #news a {
                color: #FFF;
            }
            #news .wrap ul li a {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
            }
            .h2ttl {
                font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 1.2rem;
    text-align: center;
            }
            .h2ttl span {
                   font-weight: 300;
    font-size: 0.7rem;
    padding-left: 5px;
            }
            #news .wrap .h2ttl {
              width: 100%;
    text-align: center;
            }
            #news .wrap ul {
                  width: 95%;
    overflow-y: scroll;
    height: 5rem;
    margin: 10px auto 0;
            }
            #news .wrap ul li p.date {
                    width: 25%;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
            }
            #news .wrap ul li p.newstext {
                width: 75%;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.03rem;
            }
               
            #news .wrap ul li a {
                margin: 8px auto;
            }
             #news ul::-webkit-scrollbar{
  width: 8px;
}
#news ul::-webkit-scrollbar-track{
  background: #bed6e9;
  border: none;
}
#news ul::-webkit-scrollbar-thumb{
  background: #00599d;
  box-shadow: none;
}

                #about {
                    margin: 60px auto -5px;
                    position: relative;
                }

                #about .wrap {
                    width: 90%;
                    margin: 0 auto 50px;
                    display: flex;
    flex-direction: column-reverse;
}
                .abtextleft {
                    width: 100%;
                }
                .engttl {
              color: #0c6eb9;
    font-size: 2.2rem;
    font-weight: 600;
    border-bottom: 2px solid #FFF100;
    line-height: 2rem;
    padding: 15px 0 0;
    display: table;
    margin-bottom: 30px;
    text-align: center;
                }
                .engttl span{
                        font-size: 1.2rem;
    font-weight: 100;
    letter-spacing: 0.2rem;
                }
                #about .ntext {
                   width: 100%;
    margin: 20px auto;
                }
               p.ntext {
                   font-size: 0.9rem;
                   line-height: 1.8rem;
                }
.abimright img {
    display: none;
}
                .abimright img.abimright1 {
                   width: 70%;
                    display: block;
    margin: 0 15%;
                }
                .blinkbtn a {
                        background: #0c6eb9;
    border-bottom: 5px solid #005799;
    box-shadow: 0px 8px 16px -6px rgb(0 0 0 / 60%);
    color: #FFF;
    text-align: center;
    position: relative;
    display: block;
    padding: 20px 0;
    width: 90%;
    margin: 0 auto;
    font-size: 0.9rem;
                }
                .blinkbtn a:before {
                    background: url("/img/common/more.png") no-repeat;
    width: 12px;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 38%;
    content: "";
                }
                 .blinkbtn a:hover {
                        background: #005799;
                }
                .abimright .blinkbtn a {
                    margin: 80px auto 0;
                }


                #products {
                    background: url("/img/common/bgridbg.png")   repeat;
                width: 100%;
                 padding: 80px 0 ;
                }
                 #products ul{
                   display: flex;
    justify-content: space-between;
    align-items: self-end;
    flex-wrap: wrap;
    width: 95%;
                }
                
                #products .prottlarea {
                        position: relative;
    margin-bottom: 10px;
                }
                #products .prottlarea .h2ttl {
                     position: absolute;
    top: -20px;
    left: 145px;
                }
                #products .prottlarea   .engttl{
                      line-height: 0.8em;
   margin: 0 auto;
                    padding: 0
                }
                #products .prottlarea ul {
                       width: 95%;
    margin:25px auto 20px;
    flex-wrap: wrap;
    justify-content: center;
                                } 
                #products .prottlarea ul li{
                    width: 33%;
                    margin: 4px 0;
                    text-align: center
                }
  #products .prottlarea ul.productmenu li a{
      color: #FFF;
      display: block
}
                #products .prottlarea ul li{
       position: relative;
    color: #FFF;
    padding: 13px 0 13px 10px;
    width: 45%;
    margin: 0 auto 10px;
    border-radius: 5px;
    display: flow-root;
    font-size: 0.9rem;
    text-align: left;
                }
                #products .prottlarea ul li:first-child  {
                    background: #45c4ae;
                    border-bottom: 3px solid #00a689;
                }
                #products .prottlarea ul li:nth-child(2)  {
                    background: #ec6d74;
                    border-bottom: 3px solid #e13841;
                }
                #products .prottlarea ul li:nth-child(3)  {
                    background: #f08300;
                    border-bottom: 3px solid #ba6500;
                }
                #products .prottlarea ul li:nth-child(4)  {
                    background: #00a0e9;
                    border-bottom: 3px solid #0075ab;
                }
                #products .prottlarea ul li:last-child  {
                    background: #41b532;
                    border-bottom: 3px solid #0f7f00;
                }
                #products .prottlarea ul li:before{
     background: url("/img/common/more.png") no-repeat;
   width: 12px;
    height: 16px;
    position: absolute;
    right: 4px;
    top: 35%;
    content: "";
                }
                #products p.ntext { 
                  text-align: center;
    margin-bottom: 40px;
    width: 95%;
                }
                .prottl {
                position: relative;
    font-weight: 600;
    padding-left: 20px;
                    margin-top: 0;
    height: 1.5rem;
    overflow: hidden;
                }
                    .prottl:before {
                        background: url("/img/common/moreb.png") no-repeat;
                        width: 11px;
                        height: 17px;
                        content: "";
                        position: absolute;
                        left: 0;
                            top: 5px;
                }
                .prottlunder {
                font-size: 0.8rem;
    font-weight: 400;
    padding: 4px 0;
                }
                .prolist li {
                    width: 49%;
    margin: 0;
                }
                .prolist li .proicon li {
                        width: 44%;
    margin: 0 auto;
    font-size: 0.9rem;
    color: #FFF;
    border-radius: 5px;
    text-align: center;
    line-height: 1.5rem;
                }
                .prolist li .proicon li.icon_b {
                    background: #00a0e9;
                }
                .prolist li .proicon li.icon_gr {
                    background: #41b532;
                }
                .proicon {
                    margin: 5px auto 50px
                }
         
ul.productmenu li:hover:after, ul.productmenu li.selected:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #FFF100;
}

                .complrbox {
                   margin: 40px auto 10px;
    display: flex;
    flex-direction: column-reverse;
                }
                .complist {
                    width: 95%;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    border-left: 2px solid #0c6eb9;
                    text-align: left;         
                    margin: 20px auto;
                        font-size: 0.9rem;
    line-height: 1.2rem;
                }
                .complist li:nth-child(odd) {
                    width: 21%;
    margin-left: 3%;
                    margin-bottom: 20px;
                }
                .complist li:nth-child(even) {
                    width: 75%;
                    margin-bottom: 20px;
                }
                .accessrightmap  {
    height: 250px;
    width: 100%;
    right: 0;
                }
                .accessrightmap iframe {
       height: 250px;
    width: 100%;
                }
                .accessleft p.ntext{
                 margin-top: 20px;
                }
                #company {
                    padding: 60px 0 ;
                    position: relative;
                }
#company img {
    display: none;
}
#company .complrbox img,
#company .accessmap img{
    display: block;
}
                .accessleft {
                    width: 90%;
                    margin: 0 auto;
                    
                }
                #company  .engttl {
                    margin: 0 auto 30px;
    display: table;
    line-height: 0.8em;
    position: relative;
                }
                
                #company .engttl span.h2ttl {
                   position: absolute;
    right: 63px;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    color: #333;
                    margin: 0 auto;
    top: -5px;
                }
                .accessmap {
                margin: 80px auto 30px ;
                    width:100%;                    
                    position: relative;
                }
                .accessmap:before {
                       height: 2px;
    background: #FFF100;
    content: "";
    width: 100%;
    left: 0;
    top: 42%;
    position: absolute;
    z-index: -1;
                }
                .accessttl {
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
    color: #333;
                        margin-bottom: 5px;
                }



                #contact {
                    background: url("/img/common/wgridbg.png") repeat;
                   padding: 60px 0;
    margin: 0 auto;
    text-align: center;
                }
                #contact .wrap {
                  width: 90%;
    margin: 0 auto;
                }
                #contact .wrap .contarealeft {
                    width: 100%;
                    margin: 0 auto;
                }
                #contact .wrap .contarearight {
                    width: 100%;
                    text-align: center;
                    margin: 30px auto 0;
                }
                #contact .engttl {
                        line-height: 0.75em;
                    position: relative
                }
                #contact .engttl span.h2ttl {
                        position: absolute;
    right: 18px;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
                    margin: 0 auto;
    color: #333;
    top: -16px;
                }


/*****************************open menu**********************/
header nav {
	margin-right: -16px;
	margin-top: -30px;
	    padding: 50px 0;
}
header nav ul{
	display: flex;
	align-items: center;
	
}
header nav ul li a{
        color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    padding: 15px 0;
}
#nav_toggle{
	display: none;
}
	nav{
		display: none;
		position: absolute;
		top:0;
		width: 100%;
   background: rgba(12,110,185,0.95);
		left: 0;
		z-index:99999;
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
	}
	header nav ul{
		display: block;
		margin: 0 auto;
		width: 90%;
	}
	header nav ul li{
		margin: 0 auto;
		text-align: center;
		border-bottom: 1px solid #fff;
	}
header nav ul li:first-child a {
	width:100%;
	text-align:center;
}
header nav ul li:first-child img {
	width:35%;
}
	header nav ul li:last-child{
		border: none;
	}
	header nav ul li a{
		display: block; 
	}
	/*開閉ボタン*/
	#nav_toggle{
       display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -10px;
    right: 0;
    z-index: 999999;
    background: #0c6eb9;
	}



	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 2px;
		background: #fff;
		position:absolute;
		    width: 60%;
    left: 20%;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:15px;
	}
	#nav_toggle span:nth-child(2){
		top:24px;
	}
	#nav_toggle span:nth-child(3){
    top: 33px;
	}

	
	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
		   -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.open #nav_toggle span:nth-child(2),.open #nav_toggle span:nth-child(3) {
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
.open #nav_toggle span:nth-child(1),
.open #nav_toggle span:nth-child(2),
.open #nav_toggle span:nth-child(3){
	background:#fff;
	top: 24px;
    width: 40px;
	left:5px;
}
 .oopen label p {
 color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    padding: 17px 0;
                    position: relative
  }
                .oopen label p:before {
                    content: "〉";
                    position: absolute;
                    right: 20px;
                    transform: rotate(90deg);
                        line-height: 2.5rem;
                        font-style: normal;
                }


#products .prottlarea ul.pc{
display: none;

}
  .oopen input {
    display: none;
  }
  .oopen .accshow {
    height: 0;
    overflow: hidden;
      opacity: 0
  }
  .oopen .accshow p {
    padding: 1.5rem;
  }
  .oopen .cssacc:checked + .accshow {
   animation: fadeIn 0.5s ease 0s 1 normal;
    height: auto;
          background: rgba(0,0,0,0.1);
      color: #fff;
    text-decoration: none;
    font-weight: bold;
       font-size: 1rem;
      opacity: 1
  }
   @keyframes fadeIn { /*animation-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}
      .oopen .cssacc:checked + .accshow li {           
          padding: 5px 0
                }
                .oopen .cssacc:checked + .accshow ul {
                    width: 100%;
                }