@charset "utf-8";
/* CSS Document */
html {
  font-size: 100%;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 200;
  line-height: 1.7;
  height: 100%;
}
* {
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  margin-top: 1%;
}
h1 {
  font-size: 2.5rem;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 200;
  color: #5a5339;
}
h1.white {
  color: #FFFFFF;
}
h2 {
  font-size: 2rem;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
}
h3 {
  font-size: 1.5rem;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
}
p {
  font-family: 'Noto Sans JP', sans-serif;
}
/* header*/
.logo {
  width: 150px;
}
.gnavi {
  display: flex;
  font-size: 1.1rem;
  list-style: none;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
}
.gnavi li {
  margin-left: 70px;
}
.gnavi li:first-child {
  margin-left: 0px;
}
.gnavi a {
  color: #5a5339;
}
#gnavi-sns {
  display: flex;
}
#gnavi-sns li {
  margin: 0 10px;
}
/*===================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/
.gnavi li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
}
.gnavi li.current a, .gnavi li a:hover {
  color: #5a5339;
}
.gnavi li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background: #5a5339;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1); /*X方向0、Y方向1*/
  transform-origin: center top; /*上部中央基点*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after, .gnavi li a:hover::after {
  transform: scale(1, 1); /*X方向にスケール拡大*/
}
#header {
  position: fixed;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1% 4%;
  align-items: center;
  z-index: 2;
  background: #fff;
}
/*下の被さるエリアの指定*/
#container {
  position: relative;
  z-index: 1;
  padding: 30px 0 0;
  text-align: center;
  background-color: #fff;
}
#wrapper {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 4%;
}
#top-main {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}
#top-main:before {
  content: '';
  position: fixed;
  top: 8vh;
  left: 5%;
  z-index: -1;
  width: 90%;
  height: 85vh;
  background: url("../img/bg_intro.jpg") no-repeat center;
  background-size: cover;
}
.lead-text {
  color: #fff;
  font-size: 1.5rem;
  position: fixed;
  bottom: 15%;
  left: 10%;
  line-height: 1.5;
}
.box_intro img {
  text-align: center;
}
/* contents */
#about {
  margin: 100px auto 200px;
  padding: 0 4%;
}
#about h1 {
  text-align: center;
  padding-bottom: 90px;
}
.section_about {
  display: flex;
  justify-content: center;
}
.about_text {
  width: 600px;
  text-align: left;
  padding-left: 50px;
}
.about_text p {
  margin-top: 10px;
}
.container {
  display: flex;
}
.round {
  border-radius: 50%;
}
#service {
  background-image: url("../img/bg_black.jpg");
  color: #FFFFFF;
  padding-top: 180px;
  padding-bottom: 200px;
  background-attachment: fixed;
  background-size: 100% auto;
}
.item {
  display: inline-block;
}
.item p {
  margin: 30px auto 0;
  text-align: left;
}
.item ul {
  margin: 5em auto 0;
  width: 900px;
  display: flex;
  flex-wrap: wrap;
}
.item li {
  width: 250px;
  margin: 30px 20px;
}
#outline {
  margin-top: 180px;
  display: inline-block;
}
#outline dl {
  margin-top: 90px;
  display: flex;
  flex-wrap: wrap;
  width: 900px;
}
#outline dt {
  width: 35%;
  padding: 20px;
  background-color: #2E2E2E;
  margin: 0 0 10px 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
#outline dd {
  width: 65%;
  padding: 20px;
  background-color: #F3F3F3;
  margin: 0 0 10px 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
#contact {
  margin-top: 180px;
  padding: 200;
  text-align: center;
}
.green {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  font-size: 2em;
  color: #5a5339;
}
.green a {
  color: #5a5339;
}
.green a:hover {
  color: olive;
}
/* footer */
footer p {
  font-size: 0.7em;
  color: white;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 200;
}
footer {
  background: #e8e8e8;
}
footer a {
  color: #5a5339;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
}
footer a:hover {
  color: olive;
}
footer .nav {
  display: flex;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 4%;
  align-items: center;
  justify-content: space-between;
}
.footer_nav {
  display: flex;
  margin-left: 100px;
}
.footer_nav li {
  margin-left: 30px;
  align-items: center;
}
#sns {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  margin-bottom: 120px;
}
#sns ul {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .logo img, footer .logo {
  display: inline-block;
  width: 180px;
}
footer .copy {
  text-align: center;
  background: #2e2e2e;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
}
footer .copy p {
  vertical-align: middle;
}
.mt20 {
  margin-top: 20px;
}
.mt70 {
  margin-top: 70px;
}
.border {
  padding: 10px;
  border-bottom: 2px solid #333;
}
@media screen and (max-width:990px) {
  body {
    font-size: 0.8rem;
  }
  #header {
    height: 12vh;
    display: block;
  }
  .gnavi {
    display: none;
  }
  #gnavi-sns {
    display: none;
  }
  .lead-text {
    font-size: 1.5rem;
    bottom: 8%;
    left: 10%;
    line-height: 1.2;
  }
  #container {
    padding: 0;
  }
  #about {
    margin: 0 auto 10vh;
  }
  #about h1 {
    padding-top: 10vh;
    padding-bottom: 7vh;
  }
  h2 {
    font-size: 1.5rem;
  }
  .section_about {
    display: block;
  }
  .about_text {
    width: auto;
    margin-top: 5%;
    padding-left: 2%;
    text-align: center;
  }
  .about_text p {
    margin-top: 0;
  }
  #service {
    background: linear-gradient(-135deg, #1c1c1c, #5a5339);
    padding-top: 10vh;
    padding-bottom: 7vh;
  }
  .sec-serrvice {
    display: block;
    margin-top: 5%;
    padding-bottom: 10%;
  }
  .item {
    width: auto;
    margin-top: 10%;
    padding-left: auto;
    padding-right: auto;
  }
  #contact {
    margin-top: 10vh;
    padding: 7vh;
  }
  #sns {
    margin-top: 10%;
    margin-bottom: 10%;
  }
  footer .nav {
    display: none;
  }
  footer p {
    font-size: 1em;
  }
  #pagetop a {
    font-size: 1em;
  }
  #outline {
    margin-top: 10vh;
  }
  #outline dl {
    width: 300px;
    margin-top: 70px;
  }
  .item {
    margin-top: 0;
  }
  .item ul {
    width: 300px;
    margin: 1em auto 0
  }
  .item li {
    margin: 20px 20px;
  }
  .item p {
    width: 90%;
  }
  .green {
    font-size: 1.3em;
  }
}