@charset "UTF-8";
/* ----- 背景用の動画ファイル ----- */
body {
  margin: 0;
  padding: 0;
}

.bg-video-wrap {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: url(../../video/poster.jpg) no-repeat center center/cover;
}
video {
/*  position: fixed;
  top: 0;
  left: 0;*/
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
   position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.3) ;
  /*background-image: linear-gradient(45deg, rgba(255,255,255,.3) 50%, rgba(255,255,255,.7) 50%);*/
  /*background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);*/
  background-size: 3px 3px;
  z-index: 2;
}
.overlay2 {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.7) ;
  /*background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);*/
  background-size: 3px 3px;
  z-index: 2;
}
h1 {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 400px;
  width: 100%;
  height: 50px;
}
@media only screen and (max-width: 768px) {
video {
	display:none;
}
}

.contents{
	position:relative;
	z-index: 999;
}

#nav{
	background-color:rgba(255,255,255,.6);
}


#visual{
	height:200px;
display: flex;
  justify-content: center;
  align-items: center;
  color:#FFF;
  margin-top:10px;
	min-height:200px;
	background-size:cover;
}
#visual h2{
	font-size:16px;
	text-shadow: 3px 3px 3px #000;
	line-height:1.4;
	text-align:left;
	font-family: serif;
}
#visual h2 strong{
	font-size:20px;
}
@media only screen and (min-width: 768px) {
#visual{
	height:450px;
}
#visual h2{
	font-size:28px;
}
#visual h2 strong{
	font-size:40px;
}
}

.block{
clear:both;
padding:20px;
background-color:#FFF;
margin-bottom:30px;
}

@media only screen and (min-width: 768px) {
.block{
padding:60px 20px;
margin-bottom:60px;
}
}

#wrap h2{
font-size:24px;
font-weight:bold;
line-height:1.2em;
color:#0851A0;
margin-bottom:20px;
position: relative;
text-align:center
}
#wrap h3{
font-size:20px;
font-weight:bold;
line-height:1.2em;
color:#0851A0;
margin-bottom:20px;
position: relative;
}

.bt a{
	display:block;
	background:#0851A0;
	border-radius:10px;
	padding:16px;
	color:#FFF;
	text-align:center;
	margin:0 auto;
}

@media only screen and (min-width: 768px) {
#wrap h2{
font-size:32px;
margin-bottom:30px;
}
#wrap h3{
font-size:24px;
margin-bottom:20px;
}
.bt a{
	width:300px;
	margin:0 auto;
}
}

#news{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
}
#news .bt a{
	width:90%;
}

@media only screen and (min-width: 768px) {
#news{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
  justify-content: center;
  align-items: center;
}
#wrap #news h2{
	margin-bottom:0;
}
#wrap #news iframe{
	height:40px;
}
#news .bt a{
	width:90%;
	margin-top:20px;
}
#news  div.titBox {
	flex: 0 0 160px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 1;/* 回り込みを右へ */
}
#news div.cBox {
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 2;/* 回り込みを右へ */
	padding-left:30px;
	margin-bottom:0;
}
#news  div.btBox {
	flex: 0 0 160px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 3;/* 回り込みを右へ */
}
#news.block{
padding:20px 20px;
margin-bottom:60px;
}
}

#products .productsBox{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
	list-style-type: none;
}
.pBox{
	list-style-type: none;
	margin-bottom:30px;
	padding:0 1%;
	width:100%;
	text-align:center;
}
.p_bt{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
	list-style-type: none;
}
.p_bt p{
	width:48%;
	padding:0px;
	margin:0 1% 60px;
	overflow: hidden;
	text-align:center;
	font-size:12px;
}
.p_bt p a{
	display:block;
	border:1px solid #0851A0;
	border-radius:10px;
	padding:16px;
	color:#0851A0;
	text-align:center;
}
.p_bt p a:hover,
.pBox.pro_item .link:hover {
	background:#0851A0;
	color:#FFF;
}
.pBox.pro_item .link_box {
	display: block;
    padding: 20px;
    border: 2px solid #f3f3f3;
	box-shadow: 0 0.5rem 0.6rem rgb(0 0 0 / 13%);
    border-radius: 10px;
	color: #222;
}
.pBox.pro_item .link_box:hover {
	color: #222;
	text-decoration: none;
	opacity: 0.6;
}
.pBox.pro_item .link {
	display: block;
    position: relative;
    border: 1px solid #0851A0;
    border-radius: 10px;
    padding: 16px;
    color: #0851A0;
    text-align: center;
    margin: 30px 0 0;
}
.pBox.pro_item .link:after {
	display: inline-block;
    position: absolute;
    content: ">";
    right: 30px;
}
@media only screen and (min-width: 768px) {
#products .productsBox{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
}
.pBox{
	width:31%;
	padding:0px;
	margin:0 1.1% 60px;
	overflow: hidden;
	text-align:left;
}
#wrap .pBox h3{
min-height:65px;
}
.p_bt p{
	font-size:14px;
}
#wrap .pBox p.read{
min-height:130px;
}
#wrap .pBox.pro_item h3 {
	min-height: 60px;
}
#wrap .pBox.pro_item .read {
	min-height: 120px;
    margin: 10px 0 0;
}
}


#company .companyBox{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
	list-style-type: none;
}
.cBox{
	list-style-type: none;
	margin-bottom:30px;
	padding:0 1%;
	width:100%;
	text-align:center;
}
#company .p_bt p{
	width:98%;
	margin:0 auto 10px;
}
@media only screen and (min-width: 768px) {
#company .companyBox{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
}
.cBox{
	width:31%;
	padding:0px;
	margin:0 1.1% 60px;
	overflow: hidden;
	text-align:left;
}
#wrap .cBox p.read{
min-height:130px;
}
}

#recruit .recruitBox{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
	list-style-type: none;
}
.rBox{
	list-style-type: none;
	margin-bottom:30px;
	padding:0 1%;
	width:100%;
	text-align:center;
}
#recruit .p_bt p{
	width:98%;
	margin:0 auto 10px;
}
@media only screen and (min-width: 768px) {
#recruit .recruitBox{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
}
.rBox{
	width:31%;
	padding:0px;
	margin:0 1.1% 60px;
	overflow: hidden;
	text-align:left;
}
#wrap .rBox p.read{
min-height:130px;
}
}
.center {
	text-align: center;
}

#anniversary{
clear:both;
margin-bottom:30px;
text-align:center;
}

@media only screen and (min-width: 768px) {
#anniversary{
margin-bottom:60px;
}
}