@charset "utf-8";

body{font-size: 16px;}

.respo-mt1{margin-top: 60px;}
.respo-mt2{margin-top: 30px;}
.respo-mt3{margin-top: 15px;}
.respo-mt10{margin-top: 10px;}



#head-sp,#spmenu,.sp-only,.tb-only,.sp-tb-only,#sp-tb-navi{display: none;}
.br-blook-pc{ display:block}
.img100{width: 100%;}
.img150{max-width: 150px;}
.img50{width: 50%!important;margin: 0 auto;}
.pc-center{text-align: center;}


/*page　ID*/
#top-page　#pc-head{}
#top-page{}
#naka-page1{}
#profile-page{}
#products-page{}


/*------------------------ベースレイアウト------------------------*/
.wrap1200{
  max-width:1250px;
  width: 100%;
  padding-right:25px;
  padding-left:25px;
  margin-right:auto;
  margin-left:auto;
}
/*------セクション------*/
.section-common{padding: 100px 0px;}
.section-aboutus{padding: 100px 0px 0px 0px; text-align: center;background-image:url("../img/topaboutus/bg.png");background-repeat: repeat-x;background-position: bottom;}
.section-contactbox{padding: 60px 0px;text-align: center;color: #FFF!important; background-image: url("../img/contactbg.png") ;background-repeat: no-repeat;background-position: bottom center;}
.section-bnr{padding: 30px 0px;}
#section-pankuzu{padding: 20px 0px 0px 0px; font-size:0.8em;}
.section-common2{padding: 100px 0px; border-top: dashed 1px #153959;}

/*------------------------ヘッダー------------------------*/ 
.overlay-image-pc{
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url("../img/topmainbg.png");
  background-repeat: repeat;
  z-index: 3;
}
@media (max-width: 1200px) { 
.overlay-image-pc{
  display: none;
}
}

header{
  z-index: 1000;
  position: sticky;
  top: 0;
}
#top-page #pc-head {height: 100px; position: relative;}
#top-page #pc-head .flex-head-logo{
  height:24px;margin-top: 20px;
}
#top-page #pc-head.onScroll .flex-head-logo{
}
#pc-head .flex-head-logo:hover{
  opacity: 0.5;
}
#naka-page2 #pc-head {
  height: 100px; background-color: aqua;position: relative;
}
#naka-page1 #pc-head .flex-head-logo, #naka-page2 #pc-head .flex-head-logo{
  height:24px;margin-top: 20px;

}
#naka-page1 #pc-head ,#naka-page2 #pc-head , #top-page #pc-head.onScroll {
  height: 100px; background-color:#FFF!important;position: relative;background:none;
}

.link-form{}
.link-form,.link-form:visited{
display: inline-block;
  width: 100%;
  height: 100%;
  color: #fff; /* 文字色 */
 padding: 5px 10px 5px 10px;
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
  border-radius: 0px;
}
/* マウスオーバーした際のデザイン */
.link-form:hover {
  color: #FFF; /* 文字色 */
  text-decoration: none;
}
#flex-head{display: flex;
  width: 100%; 
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items:center;
  padding:10px 0px;}
  
.flex-head-logo{width:300px;margin-right: 200px;}
.flex-head-logo img{width:100%; max-width: 300px; }
.flex-head-navi{width: calc(100% - 500px);}

.flex-navi-box{width:100%;background-color: 333;
display: flex;
 justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items:center;
  margin-top: 20px;}
.flex-navi-box-c1{width: 18%;}
.flex-navi-box-c2{width: 28%;padding-left: 5%;}
@media (max-width: 1200px) { .flex-navi-box{
font-size: 1.3vw;
}
.flex-head-navi{width: calc(100% - 320px);padding-left: 20px;}
.flex-head-logo{width:300px; margin-right: 20px;}
.flex-head-logo img{width:100%; }
}
@media (max-width: 1000px) { .flex-navi-box{
font-size: 1.2vw;}
.flex-head-navi{width: calc(100% - 270px);padding-left: 0px;}
.flex-head-logo{width:250px;margin-right: 20px;}
.flex-head-logo img{width:100%; }
}

.main-navi,.main-navi:visited{
display: inline-block;
  width: 100%;
  height: 100%;
  color: #fff; /* 文字色 */
 padding: 3px 10px 6px 10px;
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
  border-radius: 0px;
}
#naka-page1 .main-navi, #naka-page2 .main-navi,#naka-page2 .main-navi:visited, #pc-head.onScroll .main-navi
{
  color: #153959; /* 文字色 */
}

/* マウスオーバーした際のデザイン */
.main-navi:hover {
  color: #FFF !important; /* 文字色 */
  background: #153959; /* 背景色 */
  text-decoration: none;
}

/*------------------------h1------------------------*/
h2{text-align: center;margin-bottom: 60px;}
#top-page h2{font-size: 3em;font-weight: 500;}
#naka-page1 h2{font-size: 3em;font-weight: 500;}
#naka-page1 h2 .jph2{font-size: 16px;font-weight: 500;margin-top: 20px;}

h3{font-weight: 700;font-size: 1.2em;
margin-bottom: 20px;
margin-top:40px;}

h4{font-weight: 500;font-size: 1em;
padding: 20px 0px 5px 0px;}

/*------h1広いh1------*/
#naka-page1 #h1box{height:200px;background-size: cover;background-position: center center;}
#naka-page1 h1{text-align: left;
}
#naka-page1 .engh1{font-size: 4em;font-weight: 500;padding-top: 70px;}
#naka-page1 .jph1{font-size: 20px!important;font-weight: 700;margin-top: 20px;}


/*------------------------ボタン------------------------*/
.btn-box1{text-align: right;margin-top: 30px;}
.btn-box2{text-align: center;margin-top: 30px;}
.btn-box3{text-align: right;}
.btn-box4{text-align: center;margin-top: 30px;}
.btn-box1 .common-btn01,.btn-box1 .common-btn01:visited{max-width: 200px; /* ボタン幅 */}
.btn-box2 .common-btn01,.btn-box2 .common-btn01:visited{max-width: 200px; /* ボタン幅 */}
.btn-box4 .common-btn02,.btn-box4 .common-btn02:visited{max-width: 50%; /* ボタン幅 */}


.kakomi2{text-align: center}

/*------------------------中ページ------------------------------------------------------------*/
/*------共通------*/
.read-text-center{font-size: 1.3em;font-weight: 700;text-align: center;line-height: 180%;}
.read-text{font-size: 1.3em;font-weight: 700;line-height: 180%;}

/*---flex共通------*/
.flex-common1,.flex-common2{display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:stretch;}
.flex-common1-l{width: 55%;}
.flex-common1-r{width: 35%;}
.flex-common1-r img{width: 100%;}

.flex-common2-l{width: 35%;}
.flex-common2-r{width: 55%;}
.flex-common2-l img{width: 100%;}

/*------リスト-------*/
.flex-list{display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:stretch;
 border-bottom: 1px solid #ccc;}
.flex-list-1{width: 25%; border-top: 1px solid #ccc;padding: 15px;}
.flex-list-2{width: 75%; border-top: 1px solid #ccc;padding: 15px;}
/*------製品で使用-------*/
.flex-list-3{width: 100%; border-top: 1px solid #ccc;padding: 15px;}
#profile-page .flex-list-1{text-align: center;}

/*------------------------pdf------------------------*/
.flex-pdf-box{width:100%;  border-bottom:1px solid #ccc;}
.flex-pdf-title{width: 100%;}
.flex-pdf{display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:flex-start;
}
/*リストボックス*/
.btn-color-pdflist{background-color: #Fff;padding: 15px;border-top:1px solid #ccc;}
a .btn-color-pdflist{background-color: #Fff;color: #000;transition: 0.3s;}
a:hover .btn-color-pdflist{background-color:#F8F8F8;color: #000;transition: 0.3s;}

/*------------------------会社概要------------------------*/
.googlemap{margin-top: 20px;}
.googlemap iframe{height: 400px;}

/*------------------------会社概要------------------------*/
#news-page #flex-news-box{width:100%;  border-top:1px solid #e6e6e6;}


/*------------------------トップページ--------------------------------------------*/

/*------------------------お知らせ------------------------*/
#flex-news-wrap{display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items:stretch;}
#flex-news-title{width:20%;text-align: left;}
#flex-news-box{width:80%;  border-top:1px solid #e6e6e6;}

/*リストボックス*/
.btn-color-list{background-color: #Fff;padding: 10px;border-bottom:1px solid #e6e6e6;}
a .btn-color-list{background-color: #Fff;color: #000;transition: 0.3s;}
a:hover .btn-color-list{background-color:#F8F8F8;color: #000;transition: 0.3s;}

.flex-list{display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:flex-start;
}
.flex-news-day{width: calc((100% - 30px) *0.15);}
.flex-news-title{width: calc((100% - 30px) *0.85);}
.flex-list-i{width: 30px;}

#flex-news-box-navi{width:70px;text-align: center;color: #666;}
#flex-news-box-navi a{
  display: flex;
  justify-content: center;
  align-items: center;
}
#flex-news-box-navi a:hover{
text-decoration: none;
}

/*2ブロック*/
.flex-top-aboutus{display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;
  max-width: 1000px;
  margin-left: auto;margin-right: auto;
  }
.flex-top-aboutus-c1{width: 30%;max-width: 300px; background-color: aliceblue;aspect-ratio: 4 / 3;  position:relative;}
.flex-top-aboutus-textwrap{ position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index: 5;}

.aboutustext1{font-size: 1.4em;font-weight: 500;}
.aboutustext2{font-size: 1em;font-weight: 500;}

a .flex-top-aboutus-textwrap{color: #fff;opacity: 100;transition: all .3s ease-out;}
a:hover .flex-top-aboutus-textwrap{color: #153959;opacity: 100;transition: all .3s ease-out;}

.banner1:after{background:url("../img/topaboutus/img1.png") no-repeat center center;}
.banner2:after{background:url("../img/topaboutus/img2.png") no-repeat center center;}
.banner3:after{background:url("../img/topaboutus/img3.png") no-repeat center center;}
.banner4:after{background:url("../img/topaboutus/img4.png") no-repeat center center;}
.banner5:after{background:url("../img/topaboutus/img5.png") no-repeat center center;}


.banner {
position: relative;
overflow: hidden;
}
.banner:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.banner:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.banner a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100%;
text-decoration: none;
color: #fff
}

/*3ブロック製品*/
.flex-top-product{display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:stretch;
  width: 100%;}
.flex-top-product-c1,.flex-top-product-c2{width: 49%;
display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:stretch;
}
.flex-top-product-c-img {
  width: 49%;
}
.flex-top-product-c-text {
width: 49%;
  padding: 10px 20px 20px 20px;
}
.flex-top-product-c-img img {
  width: 100%;
}

/*フッター上コンタクト*/
.freedial{font-size:2em;margin-top: 0px;font-weight: 500;}
.freedial span{font-size: 2em;}
.freedial a,.freedial a:visited{color: #FFF;text-decoration: none;}
.freedial a:hover{color: #FFF;text-decoration: underline;}

.contactfax{font-size:2em;margin-top: 10px;font-weight: 500;}


/*企業バナー*/
.flex-bnr{display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:stretch;}
.flex-bnr-c{width:18%} 
.flex-bnr-c img{width:100%} 
/*------------------------メインイメージ動画------------------------*/
#topvideo{margin-top: -100px; height: 700px; background-image: url("../img/topimg.png");background-size:cover;position: relative;}

.mainimg-text1{line-height: 100%;padding-top: calc(0.56vw );  z-index: 1000;
}

#top-news{
  margin-top: -30px;
  position: relative;
  background-color:rgba(57,93,170,0.05); 
  z-index: 4;
}

#video{
  width: 100%;
  height: 700px;
  object-fit: cover;
}

.overlay-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  font-weight: 700;
 text-align: left;
  width: 100%;
  z-index: 5;
}


/*------------------------footer------------------------*/
#footer{padding: 60px 0px;
}
.flex-footer{display: flex;
  width: 100%; 
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:stretch;}
.flex-footer-c1{width: 50%;}
.flex-footer-c2{width: 20%;}
.flex-footer-c3{width: 30%;}
.flex-footer-c1 img{width: 100%;max-width: 300px;}

.fotnavi2{margin-left: 1em;}

.fotnavi1 a,.fotnavi2 a{
position: relative; /*アンダーラインの位置を決めるための基準 */
color:#fff;
text-decoration: none;
}
.fotnavi1 a:hover,.fotnavi2 a:hover{color:#fff;}

.fotnavi1 a::after,.fotnavi2 a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #fff;
bottom: 10px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.fotnavi1 a:hover::after,.fotnavi2 a:hover::after  {
visibility: visible;
bottom: -2px; /*アニメーションが止まる位置*/
opacity: 1;
}
/*------copy　審査------*/
.copy{text-align: center;
font-size: 0.8em;
  margin-top: 30px;}


/*------gotop------*/
.gotop{
	height: 40px;
	width: 40px;
	position: fixed;
	right: 0px;
	bottom: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.gotop img{	width: 100%;}


a.anchor
{display: block;
    padding-top: 150px;
    margin-top: -150px;
}