@charset "utf-8";

body{font-size: 16px;}

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

#pc-head,.pc-only,.tb-only,.pc-tb-only{display: none;}
.sp-img100{width: 100%;}
.img100{width: 100%;}
.br-blook-sp{ display:block}
.img150{max-width: 150px;}

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


/*------------------------ベースレイアウト------------------------*/
.wrap1200{
  width: 100%;
  padding-right:25px;
  padding-left:25px;
  margin-right:auto;
  margin-left:auto;
}
/*------セクション------*/
.section-common{padding: 60px 0px;}
.section-aboutus{padding: 60px 0px 60px 0px; text-align: center;}
.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: 60px 0px; border-top: dashed 1px #153959;}


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

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:10vw;font-weight: 500;padding-top: 100px;}
#naka-page1 .jph1{font-size: 1em;font-weight: 700;margin-top: 10px;}

/*------h1文字のみh1------*/
#naka-page2 #h1box{background:linear-gradient(to right, rgba(57,93,170,1), rgba(0,160,233,1));
display: flex;
  width: 100%;
   height: 100px;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-top: 60px;
}

#naka-page2 .h1-sub{font-size: 0.6em;font-weight: 500;color: #FFF;width: 100%;}
#naka-page2 h1{width: 100%;font-size: 1.1em;font-weight: 500;}


/*------------------------ボタン------------------------*/
.btn-box1{text-align: center;margin-top: 30px;}
.btn-box2{text-align: center;margin-top: 30px;}
.btn-box3{text-align: center;}
.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: 100%; /* ボタン幅 */}


.kakomi2{text-align: left;}


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

/*---flex共通------*/
.flex-common1,.flex-common2{display: block;}
.flex-common1-l{width: 100%;}
.flex-common1-r{width: 100%;margin-top: 30px;}
.flex-common1-r img{width: 100%;}

.flex-common2-l{width: 80%;margin-top: 30px;margin-right: auto;margin-left: auto;}
.flex-common2-r{width: 100%;margin-top: 30px;}
.flex-common2-l img{width: 100%;}

/*------リスト-------*/
.flex-list{display: block;
 border-bottom: 1px solid #ccc;}
.flex-list-1{width: 100%; border-top: 1px solid #ccc;padding: 15px 15px 0px 15px; color:#153959;font-weight: 600; }
.flex-list-2{width: 100%; padding: 15px;}
/*------製品で使用-------*/
.flex-list-3{width: 100%; border-top: 1px solid #ccc;padding: 15px;color:#153959;font-weight: 600;}
#profile-page .flex-list-1{text-align: left;}
/*------------------------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: 450px;}

/*------------------------お問い合わせ------------------------*/
.flex-contact{display: block;
 border-bottom: 1px solid #ccc;}
.contents1{width: 100%;border-top: 1px solid #ccc;padding: 15px 10px 0px 10px;}
.contents2{width: 100%; padding: 10px;}


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

/*------------------------お知らせ------------------------*/
#flex-news-wrap{display: block;}
#flex-news-title{width:100%;text-align: left;}
#flex-news-box{width:100%;  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: block;
  width: 100%;
}
.flex-news-day{width: 100%;}
.flex-news-title{width: 100%;}
.flex-list-i{display: none;}

#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;
  width: 100%;
  }
.flex-top-aboutus-c1{width: 100%;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.2em;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: block;
  width: 100%;}
.flex-top-product-c1{display: block;
  width: 100%;}

.flex-top-product-c2{display: block;
  width: 100%;  margin-top: 30px;}


.flex-top-product-c-img {
  width: 100%;
}
.flex-top-product-c-text {
width: 100%;
  padding: 10px;
}
.flex-top-product-c-img img {
  width: 100%;
}


/*フッター上コンタクト*/
.freedial{font-size:1em;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;}

/*企業バナー*/
.flex-bnr{display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:stretch;}
.flex-bnr-c{width:45%} 
.flex-bnr-c img{width:100%} 

/*------------------------ヘッダー------------------------*/
#head-sp{ 
	background-color: #ffffff;
	height: 60px;
	width: 100vw;
	z-index: 5;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
#headlogosp{
	position: fixed;
	margin-top: 5px;
    	margin-bottom: 5px;
	left: 10px;
	height: 50px;
}
#headlogosp img{max-height:20px;  max-width: 250px; margin-top: 15px;}
#spbtn{
	position: fixed;
	height: 40px;
	margin-top: 10px;
	right: 10px;
width: 40px;
}
#spbtn img{
	float: right;
    height: 40px;
}
/*------spmenu------*/
#spmenu{
	font-size: 0.9em;
display: none;
	line-height: 250%;
	top:60px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	overflow: auto;
}
#spmenu a,#spmenu a:visited,#spmenu a:hover,#spmenu a:active, #spmenu i {
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	font-size: 1.2em;
}
#spmenu .spmenu1{
	padding: 10px 20px;
    border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ffffff;
    }

#spmenu a:last-child .spmenu1{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ffffff;
}
.spnavi-line{
    border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ffffff;
    }


/*------------------------メインイメージ動画------------------------*/

#topvideo{height: calc(56vw );   position: relative;  margin-top: 60px;background-image: url("../img/topimg.png");background-size:cover;}
.mainimg-text1{font-size:4vw;font-weight: 700; color: #FFF; padding-top: calc(0.56vw );}
#video{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.overlay-text{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 700;
  text-align: center;
  width: 100%;

  z-index: 3;
}



/*------------------------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: 100%;}
.flex-footer-c2{display: none;}
.flex-footer-c3{display: none;}
.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;
}
.flex-footer-c1 a{color: #FFF;text-decoration: underline;}

/*------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: 0px;
    margin-top: 0px;
}