@charset "UTF-8";

/* CSS Document */

body{
font-family: "M PLUS 1p";
/* font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; */
font-size: 12px;
letter-spacing: 1px;
color: #2b2b2b;
}

/* header */
header{
  width: 100%;
}

header #headerBox{width: 100%;position: relative;}
header #headerBox h1{}
header #headerNav{position: absolute;top: 0;right: 10px;}
header #headerNav ul{
  width: 300px;
  display: -webkit-flex;
  display: flex;
}
header #headerNav ul li{
  width: 150px;
  height: 100px;
  text-align: center;
  font-size: 18px;
  line-height: 120px;
}

header #headerNav ul li a{color: #2b2b2b;}

/* スライドバナー */
#topbana{
width: 100%;
height: 600px;
margin: 0 auto;
overflow: hidden;
text-align: center;
font-weight: bold;
animation-name: anime0;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-delay: 0s;
opacity: 0.9;
}

#top-slide{
min-height: 200%;
overflow: hidden;
}

#topbana img{
width: 100%;
height: 600px;
object-fit: cover;
}

/* ナビゲーション */
nav{margin-top: 20px;margin-bottom: 100px;}
.nav1 ul {
	font-size: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	list-style: none;
	text-align: center;
}
.nav1 li {
	font-size: 18px;
  line-height: 40px;
	margin: 0 35px;
	display: inline-block;
}
.nav1 li a {
	text-decoration: none;
	padding-bottom: 5px; /* 文字と下線に隙間を作る */
	color: #000;
	display: block;
}
.nav1 li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 3px solid #859194;
	display: block;
}
.nav1 li a:hover:after {
	width: 100%;
	border-bottom: 3px solid #859194;
}

/*
nav ul{
  width: 100%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

nav ul li{
  width:14%;
  height:120px;
  text-align: center;
  font-size: 1.5em;
}

nav ul li img{
  margin: 0 auto;
  border: 1px solid black;
}

nav ul li a{color: #696969;}
*/

/* main */
main h2{text-align: center;font-size: 2em;margin-bottom: 50px;}

/* トピックス */
main #topics{width: 100%;margin-bottom: 100px;}
main #topics div{
  width: 70%;
  margin: 0 auto;
}

main #topics ul{
margin-left: 10px;
margin-bottom: 10px;
font-size: 15px;
}

main #topics ul li{
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;}

main #topics ul li a{
    color: #333;
  }

.date{
  background-color: #e9e9e9;
  padding:2px;
  margin-right: 10px;
}

/* メニュー */
main #Menu{width: 60%;margin: 0 auto;margin-bottom: 100px;}
main #MenuBn{
  width: 100%;
  height: 200px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;

  margin-bottom: 50px;
}
main #MenuBn li{width: 48%;height: 100%;}
.MenuBnBox {
  position: relative;
}
.MenuBnBox p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.MenuBnBox img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.MenuBnBox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

/* ビジネス */
main #business{width: 100%;margin-bottom: 100px;}
main #businessNav{
  width: 100%;
  height: 200px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
main #businessNav li{width: 25%;height: 100%;}
.businessNavContents {
  position: relative;
}
.businessNavContents p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.businessNavContents img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.businessNavContents::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

/* 会社概要 */
main #company{width: 100%; margin-bottom: 100px;}
main #companyNav{
  width: 70%;
  height: 200px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
main #companyNav li{width: 48%;height: 100%;}
.companyNavContents {
  position: relative;
}
.companyNavContents img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.companyNavContents::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.companyNavContents p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

/* お問い合わせ */
#contact{
  width: 100%;
  padding-top: 50px;
  background-color: #e9e9e9;
}
.contactBox{
  position: relative;
  width: 100%;
  height: 300px;
  background-image: url(../images/slide02.jpg);
  background-size: cover;
}
.contactBox::before {
  content: '';
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.contactBox p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  border-radius: 40px;
  padding: 20px 70px;
}
.contactBox p a{
  color: #2b2b2b;
}

/* プロモーションビデオ */
#promotion{
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #e9e9e9;
}
#promotionBox{
text-align: center;
}

/* footer */
footer{width: 100%;}

#footerNav{
  height: 40px;
  background-color: #859194;
  padding-top: 30px;
}

#footerNav ul{
  padding-left: 30px;
  padding-top: 10px;
  display: -webkit-flex;
  display: flex;
}

#footerNav ul li{
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid white;
}

#footerNav ul li:last-of-type{
  border: none;
}

#footerNav ul li a{
    color: white;
    font-size: 1em;
    letter-spacing: 3px;
}

address{
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
  padding-left: 40px;
  background-color: #859194;
}

#name{
  font-size: 1.2em;
  letter-spacing: 3px;
}

#address, #tel{
  font-size: 0.9em;
  letter-spacing: 2px;
}

#copyright{
  width: 100%;
  height: 20px;
  color: white;
  font-size: 0.8em;
  letter-spacing: 1px;
  text-align: center;
  background: #2c3242;
  padding-top: 10px;
}