/* style.css */
html {}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: max(12px, 1.20vw);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 2;
}

.sp-only {
  display: none;
  visibility: hidden;
}

.container {
  width: 66%;
  min-width: 700px;
  /*max-width: 912px;*/
  margin: 0 auto;
  padding: 0;
}

/*-----------------
hero 
-----------------*/
.hero {
  margin: 20vw 0 30vw 0;
}

.hero-title {
  margin-bottom: 1.5vw;
  width: 57%;
  height: auto;
}

.hero-text {
  line-height: 1.8;
}

/*-----------------
company
-----------------*/
.company {
  padding-bottom: 10vw;
}

.company h2 {
  padding-bottom: 3vw;
}

.company-info {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.5vw 2vw;
}

.company-info dt {
  font-size: max(14px, 0.8vw);
  font-weight: normal;
}

.company-info dd {
  font-size: max(14px, 0.8vw);
}

.company-info dd ul {
  list-style: none;
  padding-left: 0;
}

/*-----------------
members
-----------------*/
.members {
  padding-bottom: 10vw;
}

.members h2 {
  padding-bottom: 3vw;
}

.members-info {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2vw;
}

.members-info dt {
  font-weight: normal;

}

.members-info dt span.role {
  display: block;
  font-size: max(10px, 0.5vw);
}

.members-info dd {
  font-size: max(14px, 0.8vw);
  padding-right: 30%;
  padding-bottom: 2vw;
}

footer p{
  text-align: center;
  font-size: max(14px, 0.8vw);
  padding-bottom: 2vw;

}

/* Responsive */
@media (max-width: 768px) {
  .sp-only {
    display: block;
    visibility: visible;
  }

  .container {
    display: block;
    width: 80%;
    min-width: auto;
    margin: 0 auto;
    padding: 0;
  }

  /*-----------------
  hero 
  -----------------*/
  .hero {
    margin: 50vw 0 60vw 0;
  }

  .hero-title {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto 5vw auto;
  }

  .hero-text {
    line-height: 2;
    text-align: center;
    font-size: max(10px, 1.20vw);

  }

  /*-----------------
  company
  -----------------*/


  .company h2 {
    padding-bottom: 3vw;
  }

  .company-info {
    display: block;
  }

  .company-info dt {
    padding-bottom: 1vw;
  }

  .company-info dd {
    padding-left: 1em;
    padding-bottom: 5vw;
    font-size: max(12px, 0.8vw);
  }

  .company-info dd ul {
    list-style: none;
  }


  /*-----------------
  members
  -----------------*/


  .members h2 {
    padding-bottom: 3vw;
  }

  .members-info {
    display: block;
  }

  .members-info dt {
    padding-bottom:3vw;
    font-size: max(16px, 0.8vw);
    line-height:1.5;
  }

  .members-info dt span.role {
    display: block;
    font-size: max(10px, 0.5vw);
  }

  .members-info dd {
    padding-bottom: 10vw;
    padding-right: 0;
    font-size: max(12px, 0.8vw);
    line-height:1.5;
  }
}