html {
  font-size: 100%;
}

h1 {
  font-size: 2.25rem;
  letter-spacing: 0.3em;
}

h6 {
  font-size: 0.875rem;
}

span {
  font-size: 0.75rem;
  border: solid 1px #000000;
  background-color: #000000;
  color: #ffffff;
}

body {
  background-color: #f0f0f0;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, sans-serif;
}

header {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.header-logo {
  width: 100px;
  height: 26px;
  margin: 27px 0 27px 7.14%;
}

.logo {
  width: 100%;
  height: 100%;
}

nav {
  width: 23.86%;
  margin: auto 43.29% auto 4.29%;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav ul li {
  list-style: none;
  line-height: 80px;
  margin-right: 30px;
}

a {
  text-decoration: none;
  color: #000000;
  font-size: 0.875rem;
}

.contact {
  width: 200px;
  height: 80px;
  background-color: #000000;
  text-align: center;
  line-height: 80px;
}

.contact a {
  color: #ffffff;
  font-size: 0.75rem;
}

.main-visual {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
}

.section-title::after {
  content: "";
  width: 40px;
  height: 1px;
  background-color: #000;
  display: block;
  margin-top: 36px;
}

/* newsここから */
#news {
  margin: 120px 14.28%;
  width: 67.14%;
}

.news {
  display: flex;
  justify-content: space-between;
  margin: 60px 0 100px 0;
}

.news p {
  margin-top: 16px;
  font-size: 0.875rem;
}

.first,
.tail {
  width: 27.02%;
  height: 61px;
}

.first {
  margin-right: 79px;
}

.tail {
  margin-left: 20px;
}

.mid {
  border-right: solid 1px #000000;
  border-left: solid 1px #000000;
  padding: 0 59px 0 20px;
  width: 35.43%;
  height:61px;
}
/* newsここまで */

/* aboutここから */
#about {
  width: 100%;
  display: flex;
}

.about {
  width: 35%;
  height: 338px;
  margin: 180px 5% 0 5%;
}

.about p {
  line-height: 30px;
}

.section-title2 {
  margin-bottom: 50px;
}

.about-picture {
  width: 55%;
  height: 400px;
}

.about-visual {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
/* aboutここまで */

/* businessここから */
#business {
  margin-top: 120px;
}

.section-title3 {
  margin-left: 14.29%;
}

.business-left,
.business-right {
  width: 26.29%;
}

.business-right {
  margin-top: 50px;
}

.business-left {
  margin: 150px 3.86% 0 2.36%;
}

.business-img {
  width: 100%;
}

.business {
  display: flex;
  justify-content: center;
}

.business1,
.business3 {
  margin-bottom: 50px;
}
/* businessここまで */

/* companyここから */
#company {
  position: relative;
  margin: 120px auto 120px auto;
}

.section-title4,
.explain {
  margin-left: 10.93%;
}

.company {
  background-color: #ffffff;
  width: 40.5%;
  height: 622px;
  padding-top: 100px;
  margin-left: 13.14%;
}

.info {
  display: flex;
  font-size: 0.875rem;
  margin-bottom: 10px;
}

.info-last {
  line-height: 31px;
}

.info-title {
  width:56px;
  margin-right: 29px;
}

.explain {
  margin-top: 50px;
}

.company-img {
  height: 400px;
  width: 39.07%;
  position: absolute;
  left: 47.79%;
  bottom: 111px;
  object-fit: cover;
}
/* companyここまで */

/* footer ここから*/
footer {
  height: 220px;
  background-color: #ffffff;
}

#footer {
  position: relative;
  height: 100%;
}

.footer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

footer div ul {
  width: 16.79%;
  height: 47.73%;
  margin-top: 40px;
  margin-right: 14.29%;
}

li {
  list-style: none;
  font-size: 0.875rem;
}

.footer-logo {
  width: 100px;
  height: 25px;
  margin: 79.29px auto auto 14.29%;
}

#footer p {
  font-size: 0.625rem;
  margin-left: 14.29%;
}

.copy-right {
  position: absolute;
  bottom: 0;
}
/* footerここまで */

.contact-title {
  font-size: 2.25rem;
  margin-top: 80px;
  margin-left: 14.29%;
}

.contact-subtitle {
  font-size: 0.875rem;
  letter-spacing: 0;
  margin-top: 80px;
  margin-bottom: 60px;
}

.contact-name {
  font-size: 0.875rem;
  letter-spacing: 0rem;
}

.contact-email {
  font-size: 0.875rem;
  letter-spacing: 0rem;
}

.contact-message {
  font-size: 0.875rem;
  letter-spacing: 0rem;
}

.news-press {
  margin: 80px 0 100px 14.29%;
}

.tab-menu {
  border-bottom: solid 1px #000000;
  margin: 0 14.29% 0 14.29%;
}

.tab-menu li {
  display: inline-block;
  width: 24%;
  text-align: center;
  padding-bottom: 20px;
}

.tab-menu li.active {
  border-bottom: 3px solid #000;
}

.list {
  margin: 0 14.29% 120px 14.29%;
}

.list dt {
  padding-top: 50px;
  margin-bottom: 10px;
}

.list dd {
  border-bottom: solid 1px #cccccc;
  padding-bottom: 50px;
}

.wpcf7-form-control-wrap {
  background-color: #ffffff;
  border: none;
}

.wpcf7-submit {
  border: solid 1px #000000;
  font-size: 0.875rem;
  padding: 10px 33px 10px 33px;
  margin-top: 30px;
  margin-bottom: 120px;
}

@media screen and (max-width: 900px) {
  header {
    display: block;
  }

  .header-logo {
    width: 80px;
    height: 20px;
    margin: 0;
  }

  nav {
    width: 89%;
    height: 21px;
    margin: 0 4.27% 15px 4.27%;
  }

  nav ul li {
    height: 21px;
    line-height: 18px;
  }

  .logo {
   width: 80px;
   height: 20px;
   margin: 16px 0 0 4.27%;
  }

  .main-picture {
    width: 100%;
    height: 600px;
  }

  .main-visual,
  .about-visual {
    width: 100%;
    height: 100%;
  }

  .section-title::after {
    margin-top: 24px;
  }

  .contact {
    display: none;
  }

  #news {
    margin: 80px 0 90px 4.27%;
  }

  .news {
    flex-direction: column;
  }

  .news div {
    width: 100%;
  }

  .first {
    margin: 0;
  }

  .mid {
    border-right: none;
    border-left: none;
    padding: 0;
    margin: 40px 0;
  }

  .tail {
    margin: 0;
  }

  #about {
    flex-direction: column;
  }

  .about-picture {
    width: 100%;
    height: 300px;
  }

  .about {
    width: 91.46%;
    height: auto;
    margin: 30px 4.27% 0 4.27%;
  }

  .section-title2 {
    margin-bottom: 34px;
  }

  .about-visual {
    width: 100%;
    height: 300px;
  }

  #business {
    margin: 80px 4.27% 0 4.27%;
  }

  .section-title3 {
    margin: 0;
  }

  .business {
    flex-direction: column;
  }

  .business-left,
  .business-right {
    margin: 30px 0 0 0;
    width: 100%;
  }

  .business1,
  .business3 {
    margin-bottom: 30px;
  }

  #company {
    position: static;
    margin: 80px 4.27% 0 4.27%;
    width: 91.46%;
  }

  .company {
    width: 100%;
    height: 666px;
    padding: 0;
    margin:0 0 20px 0;
  }

  .section-title4 {
    margin-left: 5.83%;
    padding-top: 40px;
  }

  .explain {
    margin: 34px 0 0 5.83%;
  }

  .info {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .info-detail {
    margin-left: 4.32%;
  }

  .company-picture {
    width: 100%;
    height: 400px;
  }

  .company-img {
    position: static;
    width: 100%;
    height: 100%;
  }

  footer {
    width: 100%;
    height: 258px;
  }

  .footer {
    flex-direction: column;
  }

  .footer-logo {
    width: 80px;
    height: 20px;
    margin: 48px 0 10px 4.27%;
  }

  .footer ul {
    margin:0 0 40px 4.27%;
    width: 62.67%;
  }

  #footer p {
    margin: 0 0 20px 4.27%; 
  }

  .news-press,
  .tab-menu,
  .list {
    margin-left: 4.27%;
    margin-right: 4.27%;
  }

  .contact-title {
    margin: 40px 4.27% 0 4.27%;
  }

  .contact-subtitle {
    margin: 40px 0;
  }
}