@charset "UTF-8";
/* css reset
------------------------ */

html,
body {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

@media screen and (max-width: 768px) {
  .wrap {
    min-width: 320px;
  }
}

main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main ul,
main ol,
main li,
main figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

main ul {
  list-style-type: none;
}

main p {
  line-height: 1.3;
}

main a {
  color: inherit;
  text-decoration: none;
}

main img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media screen and (max-width: 768px) {
  main img {
    width: 100%;
  }
}

main .pc-only {
  display: block !important;
}

@media screen and (max-width: 768px) {
  main .pc-only {
    display: none !important;
  }
}

main .sp-only {
  display: none !important;
}

@media screen and (max-width: 768px) {
  main .sp-only {
    display: block !important;
  }
}

/* main
-------------------------------------- */

main {
  color: #333333;
}

/* main-area
-------------------------------------- */

.main-area {
  width: 100%;
  max-width: 1170px;
  margin: 120px auto 60px;
  position: relative;
}

@media screen and (max-width: 1199px) {
  .main-area {
    min-height: auto;
    padding-top: 36.37%;
    margin-top: 10.26%;
    margin-bottom: 4.0%;
  }
}

.main-area .area-inner {
  max-width: 1170px;
  margin: 0 auto;
}

@media screen and (max-width: 1199px) {
  .main-area .area-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* text style
-------------------------------------- */

.ttl {
  line-height: 1;
  font-size: 80px;
  text-align: center;
  color: #2d78be;
  margin-bottom: 50px;
  margin-top: 300px;
  letter-spacing: 5px;
  text-transform: capitalize;
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

@media screen and (max-width: 1199px) {
  .ttl {
    margin-top: 25.64%;
    margin-bottom: 4.27%;
  }
}

@media screen and (max-width: 767px) {
  .ttl {
    font-size: 28px;
    margin-bottom: 6.0%;
    letter-spacing: 3px;
    margin-top: 34.19%;
  }
}

.main-ttl {
  font-size: 22px;
  text-align: center;
  letter-spacing: 3px;
  color: #231815;
  margin-bottom: 30px;
  line-height: 28.6px;
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

@media screen and (max-width: 1199px) {
  .main-ttl {
    margin-bottom: 2.56%;
  }
}

@media screen and (max-width: 767px) {
  .main-ttl {
    font-size: 18px;
    line-height: 160%;
    margin-bottom: 4.0%;
    letter-spacing: 1.5px;
  }
}

.main-txt {
  max-width: 900px;
  margin: auto;
  font-size: 16px;
  text-align: left;
  line-height: 1.6;
}

@media screen and (max-width: 1199px) {
  .main-txt {
    width: 96.0%;
  }
}

@media screen and (max-width: 767px) {
  .main-txt {
    width: 100%;
    font-size: 100%;
  }
}

.txt01 {
  font-size: 20px;
  color: #231815;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

@media screen and (max-width: 1199px) {
  .txt01 {
    width: 96.0%;
    margin: auto;
  }
}

@media screen and (max-width: 767px) {
  .txt01 {
    width: 100%;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0;
  }
}

/* sec-area01 (vision)
-------------------------------------- */

.sec-area01 {
  max-width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}

.sec-area01 .ttl {
  margin-top: 150px;
}

@media screen and (max-width: 1199px) {
  .sec-area01 .ttl {
    margin-top: 23.08%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area01 .ttl {
    margin-top: 30.77%;
  }
}

.sec-area01 .img01 {
  max-width: 969px;
  margin: 45px auto 55px;
}

@media screen and (max-width: 1199px) {
  .sec-area01 .img01 {
    width: 82.74%;
    margin: 6.85% auto 4.7%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area01 .img01 {
    width: 100%;
    margin: 10.0% auto 8.0%;
  }
}

.sec-area01 .txt01 {
  margin-top: 40px;
}

@media screen and (max-width: 1199px) {
  .sec-area01 .txt01 {
    margin-top: 3.42%;
  }
}

/* sec-area02 (Initiatives)
-------------------------------------- */

.sec-area02 {
  max-width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}

.sec-area02 .img01 {
  max-width: 1170px;
  margin: 50px auto 55px;
}

@media screen and (max-width: 1199px) {
  .sec-area02 .img01 {
    width: 96.0%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area02 .img01 {
    width: 100%;
  }
}

/* sec-area03 (Action)
-------------------------------------- */

.sec-area03 {
  max-width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}

.sec-area03 .img01 {
  width: 100%;
  margin: 65px auto 55px;
}

@media screen and (max-width: 1199px) {
  .sec-area03 .img01 {
    width: 96.0%;
    margin: 5.56% auto 4.7%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area03 .img01 {
    width: 100%;
  }
}

/* sec-area04 (Laboratory)
-------------------------------------- */

.sec-area04 {
  max-width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}

.sec-area04 .img01 {
  margin: 50px auto 55px;
}

@media screen and (max-width: 1199px) {
  .sec-area04 .img01 {
    width: 96.0%;
    margin: 4.27% auto 4.7%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area04 .img01 {
    width: 100%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl {
    width: 96.0%;
    margin: auto;
  }
}

@media screen and (max-width: 767px) {
  .sec-area04 dl {
    margin-top: 6.0%;
    margin-bottom: 4.0%;
  }
}

.sec-area04 dl dt {
  font-size: 16px;
  margin-bottom: 10px;
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dt {
    margin-bottom: 0.85%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area04 dl dt {
    font-size: 14px;
    margin-bottom: 3.0%;
  }
}

.sec-area04 dl dd {
  margin-left: 0;
  position: relative;
  margin-bottom: 40px;
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd {
    margin-bottom: 3.42%;
  }
}

.sec-area04 dl dd ul {
  font-size: 0;
  text-align: left;
}

.sec-area04 dl dd li {
  display: inline-block;
  vertical-align: middle;
  margin: 15px 38px;
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li {
    margin: 1.28% 3.25%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area04 dl dd li {
    margin: 2.2% 3.2%;
  }
}

.sec-area04 dl dd li img {
  max-width: 100%;
  width: auto;
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li img {
    width: 100%;
  }
}

.sec-area04 dl dd li:nth-child(1),
.sec-area04 dl dd li:nth-child(5),
.sec-area04 dl dd li:nth-child(10),
.sec-area04 dl dd li:nth-child(15) {
  margin-left: 0;
}

@media screen and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(10),
  .sec-area04 dl dd li:nth-child(15) {
    margin-left: 3.2%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(1) {
    width: 25.3%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(1) {
    width: 60%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(2) {
    width: 13.59%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(2) {
    width: 20%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(3) {
    width: 22.91%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(3) {
    width: 50%;
    margin-left: 0;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(4) {
    width: 15.13%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(4) {
    width: 24%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(5) {
    width: 19.66%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(5) {
    width: 45%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(6) {
    width: 20.94%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(6) {
    width: 40%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(7) {
    width: 8.38%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(7) {
    width: 14%;
    margin-left: 0;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(8) {
    width: 7.69%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(8) {
    width: 13%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(9) {
    width: 13.68%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(9) {
    width: 26%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(10) {
    width: 15.38%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(10) {
    width: 24%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(11) {
    width: 16.75%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(11) {
    width: 28%;
    margin-left: 0;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(12) {
    width: 16.67%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(12) {
    width: 28%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(13) {
    width: 12.82%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(13) {
    width: 22%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(14) {
    width: 8.46%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(14) {
    width: 16%;
    margin-left: 0;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(15) {
    width: 19.15%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(15) {
    width: 36%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(16) {
    width: 12.91%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(16) {
    width: 28%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area04 dl dd li:nth-child(17) {
    width: 18.89%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area04 dl dd li:nth-child(17) {
    width: 40%;
    margin-left: 0;
  }
}

.sec-area04 dl dd li:last-child {
  position: absolute;
  font-size: 12px;
  right: 0;
  bottom: 0;
}

.sec-area04 dl + .main-txt {
  text-align: center;
}

/* sec-area05 (Collaboration)
-------------------------------------- */

.sec-area05 {
  max-width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}

.sec-area05 ul {
  text-align: center;
  font-size: 0;
  margin: 50px auto 225px;
}

@media screen and (max-width: 1199px) {
  .sec-area05 ul {
    width: 96.0%;
    margin: 4.27% auto 19.23%;
  }
}

@media screen and (max-width: 767px) {
  .sec-area05 ul {
    width: 100%;
    margin: 8.0% auto 25.64%;
  }
}

.sec-area05 ul li {
  display: inline-block;
  margin: 0 30px;
  vertical-align: middle;
}

@media screen and (max-width: 1199px) {
  .sec-area05 ul li {
    margin: 0 2.56%;
  }
  .sec-area05 ul li:nth-child(1) {
    width: 32.14%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area05 ul li:nth-child(1) {
    width: 46.0%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area05 ul li:nth-child(2) {
    width: 23.25%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area05 ul li:nth-child(2) {
    width: 33.0%;
  }
}

@media screen and (max-width: 1199px) {
  .sec-area05 ul li:nth-child(3) {
    width: 25.13%;
  }
}

@media screen and (max-width: 1199px) and (max-width: 767px) {
  .sec-area05 ul li:nth-child(3) {
    width: 33.0%;
    margin-top: 6.0%;
  }
}

.sec-area05 ul li img {
  max-width: 100%;
  width: auto;
}

@media screen and (max-width: 1199px) {
  .sec-area05 ul li img {
    width: 100%;
  }
}

/* sec-area06
-------------------------------------- */

.sec-area06 {
  max-width: 1170px;
  margin: 0 auto 180px;
}

@media screen and (max-width: 1199px) {
  .sec-area06 {
    margin-bottom: 15.38%;
  }
}

.sec-area06 table {
  width: 100%;
  border-spacing: 15px;
}

@media screen and (max-width: 1199px) {
  .sec-area06 table {
    width: 96.0%;
    margin: auto;
    border-spacing: 10px;
  }
}

@media screen and (max-width: 767px) {
  .sec-area06 table {
    width: 100%;
  }
}

.sec-area06 table tr th,
.sec-area06 table tr td {
  font-size: 14px;
  border-bottom: solid .3px #231815;
  padding-bottom: 10px;
  border-left: solid .3px #231815;
  padding-left: 20px;
  text-align: left;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .sec-area06 table tr th,
  .sec-area06 table tr td {
    font-size: 100%;
    padding-left: 10px;
    line-height: 160%;
    padding-bottom: 5px;
  }
}

.sec-area06 table tr th {
  font-weight: normal;
}

@media screen and (max-width: 767px) {
  .sec-area06 table tr th {
    width: 25%;
  }
}
