@charset "UTF-8";
/* CSS Document */
h1 {
  font-size: 60px;
}
.first-viwe-img {
  background-image: url("../images/index/firstview1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: calc(100vh - 110px);
  position: relative;
}
.first-view-text {
  width: 100%;
  line-height: 2;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 40%;
  text-shadow: 1px 1px 10px #000;
}
.text{
	margin-top: 30px;
	width: 70vw;
	margin-right: auto;
	margin-left: auto;
	line-height: 1.5;
}
.about-area{
    margin-top: 50px;
    line-height: 1.5;
      display: flex;
    flex-direction: column;
    align-items: center;
    
}
.tartan{
    background-image: url("../images/index/firstview2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 60vw;
    aspect-ratio:16/9;
}
.tartan-text{
    margin-top: 50px;
    border-bottom: 1px solid #000;
    padding-bottom: 30px;
    width:50vw
}
.tartan-text h2{
   text-align: center;
}
.tartan-text h3{
    text-align: center;
    margin-top: 20px;
}
.tartan-text p{
    margin-top: 30px;
}
.element{
    border-bottom: 1px solid #000;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 50vw;
    text-align: center;
}
.element h2{
    margin-top: 10px;
    margin-bottom: 10px;
}
#white{
    color: #fff;
}
#blue{
    color: #3d64af;
}
#green{
    color: #487718;
}
#red{
    color: #b42f0f;
}
#black{
    color: #434343;
}
.main{
    background-color: #eee;
    padding-bottom: 100px;
}
@media(max-width:800px) {
  h1 {
    font-size: 30px;
  }
  .first-viwe-img {
    height: 50vh;
  }
  .first-view-text {
    position: static;
    color: #000;
    margin-top: 20px;
    text-shadow: none;
  }
    .tartan{
        width: 80vw
    }
    .tartan-text{
        width: 80vw;
    }
    .element{
        width: 80vw
    }
}