@charset "UTF-8";

/*First_viewエリア*/
.first_view_area {
  width: 100%;
  height: calc(70vw - 7vw);
  padding-top: 5vw;
  background-image: url(../img/top/firstview.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.first_view_letter {
  padding-top: 30vw;
  display: flex;
  align-items: center;
}

.first_line {
  width: 12vw;
  height: 1px;
  border: .1vw solid #fff;
}

.fv_let {
  margin: 10px 0 0 10px;
}

.fv_let p {
  font-family: 'Raleway-Italic';
  font-size: 6vw;
  color: #fff;
}

/*Aboutエリア*/
.about_area {
  width: 100%;
  padding-top: 20vw;
  padding-bottom: 6vw;
}

.title_words1 {
  width: 70vw;
  border-bottom: .2vw solid #c1c1c1;
  display: flex;
  align-items: center;
  padding-bottom: 1vw;
}

.title_words1 p {
  display: block;
  margin-left: 10vw;
  font-size: 4vw;
  font-family: 'Raleway-Italic';
  letter-spacing: .3vw;
}

.about_cont {
  width: 90%;
  height: 60vw;
  margin: 2vw 5% 5vw 5%;
  position: relative;
}

.left_box {
  width: 50%;
  position: absolute;
  margin-left: auto;
}

.left_box p {
  font-size: 2vw;
  margin-top: 2vw;
  margin-bottom: 5vw;
}

.left_box img {
  width: 100%;
}

.right_box {
  position: absolute;
  width: 50%;
  background-color: #F0F0F0;
  font-size: 1.3vw;
  padding-top: 3vw;
  padding-bottom: 4vw;
  top: 20vw;
  left: 45%;
}

.r_text {
  width: 85%;
  line-height: 2.5vw;
  margin: 3vw 7.5% 2vw 7.5%;
}

/*SERVICEエリア*/
.service_area {
  width: 100%;
  margin-top: 10vw;
  margin-bottom: 10vw;
}

.title_words2 {
  width: 70vw;
  display: block;
  text-align: center;
  margin: 0 auto 4vw auto;
}

.title_box {
  display: flex;
}

.line {
  border-top: .2vw solid #c1c1c1;
  margin: auto;
  width: 40vw;
}

.title_box p {
  font-family: 'Raleway-Italic';
  font-size: 4vw;
  letter-spacing: .3vw;
}

.service_letters {
  width: 100%;
}

.service_box1,
.service_box2 {
  display: flex;
  margin: 7vw 0 3vw 0;
}

.service_box1 img,
.service_box2 img {
  display: block;
  width: 100%;
  min-width: 100px;
  height: 100%;
}

/*各サービスエリア*/
.service_title1 {
  width: 100%;
  border-bottom: .2vw solid #c1c1c1;
  display: flex;
  align-items: center;
}

.num_box {
  display: inline-flex;
  font-style: italic;
  margin: 0 1vw -1vw 2vw;
  font-family: 'Marion';
  font-weight: lighter;
}

.num_box h4 {
  color: #9c9c9c;
  font-size: 4.5vw;
  padding-top: 3.5vw;
  font-weight: 100;
}

.num_box h5 {
  color: #9c9c9c;
  font-size: 7.5vw;
  padding-top: 1.5vw;
  padding-left: .5vw;
  font-weight: 100;
}

.ti_b {
  display: flex;
}

.service_title1 p {
  padding-top: 3.5vw;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  font-size: 1.8vw;
  font-family: 'FutoMinA';
  color: rgba(0, 0, 0, .9);
}

.service_title1 h6 {
  align-items: center;
  font-size: 2.8vw;
  font-weight: normal;
  padding-top: 3vw;
  padding-left: 2vw;
  font-family: 'Avenir-Light-Oblique';
  letter-spacing: .1vw;
  color: #000;
}

.service_text1 {
  margin-left: 1vw;
  margin-right: auto;
  text-align: left;
}

.service_text1 p {
  width: 100%;
  margin: 2.5vw 1vw 3vw 2vw;
  color: black;
  font-size: 1.8vw;
  line-height: 2.8vw;
}

.service_int p {
  font-size: 1.4vw;
  line-height: 2.6vw;
}

.service_about p {
  margin-top: -1vw;
  width: 100%;
  font-size: 1.3vw;
  line-height: 2.6vw;
}

/*SERVICEコンテンツ 右寄り表示*/
.service_title2 {
  width: 100%;
  border-bottom: .1vw solid #c1c1c1;
  display: flex;
  margin: 0 auto 0 auto;
}

.num_box2 {
  display: inline-flex;
  font-style: italic;
  margin: 0 1vw 0 auto;
  font-family: 'Marion';
}

.num_box2 h4 {
  color: #9c9c9c;
  font-size: 4.5vw;
  padding-top: 3.5vw;
  font-weight: 100;
}

.num_box2 h5 {
  color: #9c9c9c;
  font-size: 7.5vw;
  padding-top: 1.5vw;
  padding-left: .5vw;
  font-weight: 100;
}

.service_title2 h6 {
  align-items: center;
  font-size: 2.8vw;
  font-weight: normal;
  padding-top: 4vw;
  padding-left: 2vw;
  font-family: 'Avenir-Light-Oblique';
  letter-spacing: .1vw;
  color: #000;
}

.service_title2 p {
  padding-top: 4.5vw;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  font-size: 1.8vw;
  font-family: 'FutoMinA';
  color: rgba(0, 0, 0, .9);
}

.service_text2 {
  width: 100%;
  text-align: right;
  margin-right: -8vw;
}

.service_text2 p {
  width: 100%;
  margin: 6vw auto 0 -2vw;
  color: black;
  font-size: 1.8vw;
  line-height: 2.8vw;
}

.service_int p {
  font-size: 1.4vw;
  line-height: 2.5vw;
  margin-top: 3vw;
}
/*IE-NIWA 説明部分*/
.service_text3 {
  margin-left: 2vw;
  margin-right: auto;
  text-align: left;
}
.service_text3 p {
  width: 95%;
  margin: 6vw auto 0 0;
  color: black;
  font-size: 1.8vw;
  line-height: 2.8vw;
}

/*説明共通*/
.service_int p {
  font-size: 1.4vw;
  line-height: 2.5vw;
  margin-top: 3vw;
}

/*NIWA-MAINTENANCEタイトル部*/
.mente {
  display: block;
  margin-left: 1vw;
}

.mente h6 {
  align-items: center;
  font-size: 3vw;
  font-weight: normal;
  font-family: 'Avenir-Light-Oblique';
  letter-spacing: .1vw;
  color: #000;
  padding-top: 1vw;
  padding-right: 2vw;
}

.mente p {
  margin-top: -3.5vw;
  margin-left: 1vw;
  margin-right: auto;
  text-align: left;
  font-size: 2vw;
  color: #000;
}

/*SERVICE リンクエリア*/
.link_area {
  display: block;
  width: 15vw;
  height: 4vw;
  border: .1vw solid;
  text-align: center;
  margin: 5vw auto 10vw;
}

.link_area p {
  font-size: 2vw;
  display: block;
  padding-top: 1vw;
}

.link_area :hover {
  background-color: #000;
  color: #fff;
  height: 100%;
}

/*ブログエリア*/
.blog_area{
  width: 100%;
}
.title_words3 {
  width: 67vw;
  border-bottom: .2vw solid #c1c1c1;
  display: flex;
  align-items: center;
  margin: 5vw 0 2vw auto;
  padding-bottom: 2vw;
}

.title_words3 p {
  display: block;
  padding-left: 40vw;
  font-size: 4vw;
  font-family: 'Raleway-Italic';
  letter-spacing: .3vw;
}

.blog_area ul {
  width: 85%;
  margin: 5vw auto 7vw auto;
}

.blog_area ul li {
  margin-top: 4vw;
  margin-bottom: 4vw;
}

.blog_box {
  width: 100%;
  display: flex;
  margin: 5vw auto 5vw auto;
}

.blog_img {
  width: 30%;
  margin: 1vw auto 2vw 0;
}
.blog_img img{
  width: 80%;
  height: 41.8%;
  margin-left: auto;
  margin-right: auto;
}

.blog_letters {
  width: 70%;
  display: flex;
  flex-direction: column;
  margin-left: 1vw;
}

.blog_date {
  display: flex;
  margin: 1vw auto 2vw 0;
  font-size: 1.8vw;
}

.blog_line {
  border: 1px solid;
  margin-left: 2vw;
  margin-right: 2vw;
  font-size: 2vw;
}

.blog_title {
  margin-bottom: 30px;
  font-size: 2vw;
}

.blog_text {
  width: 90%;
  font-size: 1.4vw;
  line-height: 2.6vw;
}

/*ブログエリア リンク*/
.ichi_area {
  display: block;
  width: 15vw;
  height: 4vw;
  border: .1vw solid;
  text-align: center;
  margin: 7vw auto 10vw;
}

.ichi_area p {
  font-size: 2vw;
  display: block;
  padding-top: 1vw;
}
.ichi_area :hover {
  background-color: #000;
  color: #fff;
  height: 100%;
}

/*アクセスエリア*/
.access_area {
  width: 100%;
  margin-bottom: 15vw;
}

.access_area img {
  display: block;
  width: 45vw;
  margin: 4vw auto 1vw;
}

.info_box {
  margin-top: 3vw;
  margin-bottom: 5vw;
}

.info_box p {
  text-align: center;
  font-size: 1.4vw;
  line-height: 2.8vw;
}

.name p {
  font-size: 1.8vw;
  padding-bottom: 1.5vw;
}

.map_area {
  width: 55vw;
  height: 30vw;
  margin: 50px auto 70px ;
}


/*ここからレスポンシブルCSS*/
/*タブレット*/
@media(max-width: 1100px){

  
  .blog_letters {
    display: flex;
    flex-direction: column;
  }
  
  .blog_date {
    display: flex;
    margin: 1vw auto 2vw 0;
    font-size: 1.8vw;
  }
  
  .blog_line {
    border: 1px solid;
    margin-left: 2vw;
    margin-right: 2vw;
    font-size: 2vw;
  }
  
  .blog_title {
    margin-bottom: 30px;
    font-size: 2vw;
  }
  
  .blog_text {
    width: 90%;
    font-size: 1.4vw;
    line-height: 2.6vw;
  }
}
/*スマホ対応*/
@media (max-width: 768px) {
  .first_view_area {
    width: 100%;
    height: calc(90vw - 15vw);
  }

  .first_view_letter {
    padding-top: 40vw
  }

  .fv_let p {
    font-size: 8vw;
  }

  .title_words1 p {
    font-size: 7vw;
  }

  /*Aboutエリア*/
  .title_words1 {
    width: 70vw;
    border-bottom: .3vw solid #c1c1c1;
    display: flex;
    align-items: center;
    padding-bottom: 1vw;
  }

  .title_words1 p {
    display: block;
    font-size: 6vw;
  }

  .about_cont {
    width: 85%;
    height: 230vw;
    margin: 2vw 8% 10vw 8%;
    position: unset;
  }

  .left_box {
    width: 100%;
    position: unset;
    margin-left: auto;
  }

  .left_box p {
    font-size: 4vw;
    margin-top: 4vw;
    margin-bottom: 6vw;
  }

  .left_box img {
    width: 100%;
  }

  .right_box {
    position: unset;
    width: 100%;
    font-size: 4vw;
    padding-top: 6vw;
    padding-bottom: 2vw;
    top: 40%;
    left: 45%;
  }

  .r_text {
    width: 85%;
    line-height: 6vw;
    margin: 3vw 7.5% 4vw 7.5%;
  }

  /*SERVICEエリア*/
  .service_box1 {
    flex-direction: column-reverse;
  }

  .service_box2 {
    flex-direction: column;
  }

  .service_area {
    margin-top: 10vw;
    margin-bottom: 20vw;
  }

  .title_words2 {
    width: 80vw;
    margin-top: 20vw;
    margin-bottom: 10vw;
  }

  .line {
    border-top: .4vw solid #c1c1c1;
  }

  .title_box p {
    font-size: 6vw;
  }

  /*各サービスエリア*/
  .service_title1,
  .service_title2 {
    border-bottom: .4vw solid #c1c1c1;
  }

  .num_box,
  .num_box2 {
    margin: 0 1vw -1vw 10vw;
  }

  .num_box h4,
  .num_box2 h4 {
    font-size: 11vw;
    padding-top: 3vw;
  }

  .num_box h5,
  .num_box2 h5 {
    font-size: 14vw;
  }

  .ti_b {
    flex-direction: column;
    padding-left: 3vw;
  }

  .service_title1 p,
  .service_title2 p,
  .mente p {
    font-size: 4vw;
    padding-left: 4vw;
    padding-top: 1vw;
  }

  .service_title1 h6,
  .service_title2 h6,
  .mente h6 {
    font-size: 6vw;
    font-weight: normal;
    letter-spacing: .2vw;
    padding-top: 0;
  }

  .service_text1,
  .service_text2,
  .service_text3 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .service_box1 img,
  .service_box2 img {
    min-width: 340px;
    width: 100%;
    height: 100%;
  }
  .service_text1 p,
  .service_text2 p,
  .service_text3 p {
    margin-top: 8vw;
    font-size: 3vw;
    line-height: 7vw;
  }

  .service_int p {
    width: 80%;
    margin: 7vw auto 7vw auto;
    font-size: 3vw;
    line-height: 6vw;
  }

  .service_about p {
    margin-top: 6vw;
    font-size: 3vw;
    line-height: 5vw;
  }

  .service_title2 h6 {
    padding-top: 0;
    letter-spacing: .2vw;
  }

  .service_title2 p {
    padding-top: 1vw;
    padding-left: .8vw;
    padding-right: 0;
  }

  .br_n {
    display: none;
  }

  /*NIWA-MAINTENANCEタイトル部*/
  .mente {
    margin-left: 2vw;
  }
  .mente h6{
    font-size: 5.5vw;
  }
  .mente p {
    padding-top: 3vw;
  }

  /*SERVICE リンクエリア*/
  .link_area {
    width: 50vw;
    height: 15vw;
    border: .2vw solid;
    margin: 10vw auto 25vw auto;
  }

  .link_area p {
    font-size: 5vw;
    padding-top: 4vw;
  }

  /*ブログエリア*/
  .title_words3 {
    width: 67vw;
    border-bottom: .3vw solid #c1c1c1;
    margin: 20vw 0 1vw auto;
    padding-bottom: 1vw;
  }

  .title_words3 p {
    font-size: 6vw;
    padding-left: 40vw;
  }

  .blog_area ul {
    width: 90%;
    margin: 5vw auto 7vw auto;
  }

  .blog_area ul li {
    margin-top: 6vw;
    margin-bottom: 6vw;
  }

  .blog_box {
    width: 90%;
    margin: 5vw auto 5vw auto;
    flex-direction: column;
  }

  .blog_img {
    width: 100%;
  }
  .blog_img img{
    width: 100%;
  }

  .blog_letters {
    margin: 3vw 1vw 5vw 1vw;
  }

  .blog_date {
    margin: 1vw auto 2vw 0;
    font-size: 4vw;
  }

  .blog_line {
    border: 1px solid;
    margin-left: 2vw;
    margin-right: 2vw;
  }

  .blog_title {
    margin-bottom: 30px;
    font-size: 4vw;
  }

  .blog_text {
    width: 100%;
    font-size: 3vw;
    line-height: 5vw;
  }

  /*ブログエリア リンク*/
  .ichi_area {
    width: 15vw;
    height: 4vw;
    border: .1vw solid;
    text-align: center;
    margin: 7vw auto 10vw auto;
  }

  .ichi_area p {
    font-size: 2vw;
    display: block;
    padding-top: 1vw;
  }


  /*Accessエリア*/
  .access_area {
    margin-bottom: 15vw;
  }

  .access_area img {
    width: 80%;
    margin: 6vw auto 10vw auto;
  }

  .info_box {
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  .info_box p {
    text-align: center;
    font-size: 3vw;
    line-height: 5vw;
  }

  .name p {
    font-size: 5vw;
    padding-bottom: 4vw;
  }

  .map_area {
    width: 80%;
    height: 80%;
    margin: 7vw auto 70px auto;
  }
}