#mv {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 100vh;
}

.mv-bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
#mv01 {
  z-index: 20;
  animation: anime 20s 0s 1;
}
#mv02 {
  z-index: 18;
  animation: anime2 45s 0s 1;
}
#mv03 {
  z-index: 16;
  animation: anime3 70s 0s 1;
}
#mv04 {
  z-index: 14;
  animation-delay: 95s;
  opacity: 1;
}

@keyframes anime {
  0% { opacity: 1; }
  20% { opacity: 1; }
  50% { opacity: 0; }
  /*100% { transform: scale(1.2); }*/
}
@keyframes anime2 {
  0% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 0; }
  /*100% { transform: scale(1.2); }*/
}
@keyframes anime3 {
  0% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 0; }
  /*100% { transform: scale(1.2); }*/
}
#news header{
  background-color: #397aae;
}
#news a:hover{
  text-decoration: none;
}
#greeting{
  height: 50vw;
}
.greeting{
  position: relative;
}
#greeting header{
  width: 50%;
  background-color:#deba8c;
  border-radius: 0 50px 50px 0;
}
/*#greeting h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em;
}*/
#greeting .greeting-img{
  position: absolute;
  width: 100%;
  top: 5%;
  right: 5%;
  height: 30vw;
  background-size: cover;
  background-position: center;
  border-radius:15px;
}
#greeting .greeting-txt{
  position:absolute;
  top:0;
  left:0;
}
#greeting .greeting-txt div{
  border-radius:0 15px 15px 0;
}
#greeting .greeting-txt p{
  line-height: 1.8;
}
#greeting .greeting-txt header{
  position:absolute;
    top: -3vw;
}
#top-recruit{
  background-position:center top;  
  background-size:cover;
}
#top-recruit .top-recruit-txt{
  background-color: rgb(255,255,255,75%);
  border-radius: 15px;
}
#top-recruit .top-recruit-txt h1{
    display: inline-block;
    position: relative;
    color: #333;
}
#top-recruit .top-recruit-txt h1:before {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color:#deba8c;
}
#top-recruit .top-recruit-txt p{
  line-height: 1.8;
}
#banner{
  background-size: cover;
  background-position: top;
  position: relative;
}
/*#banner a div:before{
  content: "";
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0,40%);
  overflow: hidden;
  transition: 0.2s ease-out;
}*/
#banner a{
  transition: 0.2s ease-out;
}
#banner a:hover div:before{
  background-color: rgb(0,0,0,0%);
}
/*#banner .contents_bar{
  padding: 15px;
  border: solid 1px #fff;
  background-color: rgb(255,255,255,75%);
  border-radius: 10px;
}*/
.banner_img {
  color: #6f532a;
  height: 26vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 10px #deba8c;
  padding: 5px;
  border-radius: 15px;
  border: solid 7px #fff;
}

#banner h1,
#banner h2 {
  /*position: absolute;
  width: 100%;
  left: 0;*/
}
#banner h1 {
  color: #deba8c;
  position: relative;
  font-size: 160%;
  transition: 0.2s ease-out;
  /*background-color: rgb(222,186,140,25%);*/
}
/* 上下に横線 */
#banner h1::before,
#banner h1::after {
  background-image: linear-gradient(to right, transparent, #deba8c 50%, transparent); /* 線の両端を透過 */
  background-repeat: no-repeat;
  content: "";
  height: 2px; /* 横線の高さ */
  left: 0; /* 線を中央寄せ */
  margin-inline: auto; /* 線を中央寄せ */
  max-width: 800px; /* 横線の最大の長さ */
  position: absolute;
  right: 0; /* 線を中央寄せ */
  width: 100%; /* 横線の長さの割合 */
}
/* 下の線 */
#banner h1::before {
  bottom: 0; /* タイトルの下に配置 */
}
/* 上の線 */
#banner h1::after {
  top: 0; /* タイトルの上に配置 */
}

#banner h1 span {
  border-radius: .3vw;
  /*color: #fff;*/
  transition: 0.2s ease-out;
}
#banner h2 {
  font-size: 100%;
  bottom: 0;
  transition: 0.2s ease-out;
}
/*#banner a:hover h1 {
  top: -1.3vw;
  color: #FFDD01;
}*/
#banner a:hover h1 span {
  color: #FFDD01;
}
#banner a:hover h2 {
  bottom: .5vw;
}

.bnr-line {
  content: "";
  position: absolute;
  z-index: 123;
  border: solid 1px #666;
  display: block;
  transition: 0.2s ease-out;
}
.vt,
.vb {
  border-width: 0 0 0 1px;
  height: 19vw;
}
.hr,
.hl {
  border-width: 1px 0 0 0;
  width: 33vw;
}
.vt {
  right: 6%;
  bottom: -20vw;
}
.bnr-link:hover .vt {
  right: 6%;
  bottom: 17%;
}
.vb {
  left: 36%;
  top: 20vw;
}
.bnr-link:hover .vb {
  left: 36%;
  top: 55%;
}
.hl {
  right: -33vw;
  bottom: 17%;
}
.bnr-link:hover .hl {
  right: 6%;
  bottom: 17%;
}
.hr {
  left: -33vw;
  top: 55%;
}
.bnr-link:hover .hr {
  left: 36%;
  top: 55%;
}
a.btn-fullhouse:hover{
  color: #fff;
}
/*#news ul {
  height: 20vw;
  overflow: auto;
}*/
@media (min-width: 1300px){
  #greeting{
    height:40vw;
  }
  #greeting .greeting-txt p{
    font-size:1.1rem;
  }
}
@media (max-width: 1299px){
  #greeting{
    height:45vw;
  }
}
@media (max-width: 1199px){
  
}

@media (max-width: 991px){
  
}
@media (min-width: 768px){
}
@media (max-width: 767px){
  #mv {
    height: 30vh;
  }
  #greeting header {
      font-size: 2vw;
  }
  #greeting ul li,
  #greeting p{
    font-size: 2.6vw;
  }
  #greeting {
    height: auto;
  }
  #greeting .greeting-txt header {
    top: -7vw;
  }
  #greeting .greeting-txt {
    position:static;
  }
  #greeting .greeting-img{
    position:static;
    height: 50vw;
  }
  #banner > div {
    margin-bottom: 10vw;
  }
  #banner img {
    height: 55vw;
  }
  .banner_img{
    height: 30vh;
  }
  .btn-fullhouse {
    width: 60vw;
  }
  /*#news ul {
    height: 40vw;
  }*/
}

@media (max-width: 575px){
  #greeting header{
    font-size:2.8vw;
  }
  #vision h1{
    font-size:6vw;
  }
  #greeting ul li,
  #greeting p{
    font-size: 3.5vw;
  }
}