@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
/* ---------------------------------------
  font
-----------------------------------------*/
.font_notoserif {
  font-family: "Noto Serif JP", serif;
}

/* ---------------------------------------
  main.head_image
-----------------------------------------*/
main.head_image::before {
  background: url(../img/about/img_header_about.png) no-repeat center/cover;
}
@media screen and (max-width: 900px) {
  main.head_image::before {
    background-image: url(../img/about/img_header_about_sp.png);
  }
}

/* ---------------------------------------
  .anc_box
-----------------------------------------*/
.anc_box {
  margin-top: 9.5rem;
}
@media screen and (max-width: 900px) {
  .anc_box {
    margin-top: 6.9rem;
  }
}
.anc_box .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 1rem;
}
@media screen and (max-width: 900px) {
  .anc_box .list {
    gap: 1rem 0.8rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (min-width: 901px) {
  .anc_box .list li {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media screen and (max-width: 900px) {
  .anc_box .list li {
    width: 32rem;
  }
}
.anc_box .list li a {
  width: 100%;
  height: 15rem;
  line-height: 15rem;
  background-color: #33a2d8;
  display: block;
  border-radius: 1.2rem;
  text-align: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 900px) {
  .anc_box .list li a {
    height: 8.5rem;
    line-height: 8.5rem;
    border-radius: 1.7rem;
    font-size: 2.8rem;
  }
}
.anc_box .list li a::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #33a2d8;
  border-radius: 1.2rem;
}
.anc_box .list li a .inner {
  position: relative;
  z-index: 3;
}
@media (any-hover: hover) {
  .anc_box .list li a:hover {
    opacity: 1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .anc_box .list li a:hover::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 7.5rem solid #0b0e53;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
}

/* ---------------------------------------
  .sec_h2ttl
-----------------------------------------*/
.sec_h2ttl {
  width: 20rem;
  height: 8rem;
  line-height: 8rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #121111;
  font-size: 3.2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* ---------------------------------------
  #message
-----------------------------------------*/
#message {
  margin-top: 18.7rem;
}
@media screen and (max-width: 900px) {
  #message {
    margin-top: 13rem;
  }
}
@media screen and (min-width: 901px) {
  #message .wrap {
    padding: 0 3.5rem;
  }
}
#message .txt_message {
  margin-top: 6.7rem;
}
@media screen and (max-width: 900px) {
  #message .txt_message {
    margin-top: 7.9rem;
  }
}
#message .txt_message {
  font-size: 1.8rem;
  line-height: 1.7777777778;
}
@media screen and (max-width: 900px) {
  #message .txt_message {
    font-size: 2.8rem;
    line-height: 2;
  }
}
#message .txt_message + .txt_message {
  margin-top: 1.5em;
}
@media screen and (max-width: 900px) {
  #message .txt_message + .txt_message {
    margin-top: 2em;
  }
}
#message .member_list {
  margin-top: 9rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 0.7rem;
}
@media screen and (max-width: 900px) {
  #message .member_list {
    margin-top: 11.5rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4.6rem 0.7rem;
  }
}
#message .member_list li {
  text-align: center;
}
@media screen and (min-width: 901px) {
  #message .member_list li {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media screen and (max-width: 900px) {
  #message .member_list li {
    width: 21.1rem;
  }
}
#message .member_list li .position {
  font-size: 2rem;
  margin-top: 2rem;
}
@media screen and (max-width: 900px) {
  #message .member_list li .position {
    font-size: 2.4rem;
  }
}
#message .member_list li .name {
  font-size: 2.4rem;
  margin-top: 1.5rem;
}
@media screen and (max-width: 900px) {
  #message .member_list li .name {
    font-size: 2.8rem;
  }
}
#message .cicle_btn_box {
  margin-top: 9.4rem;
}
@media screen and (max-width: 900px) {
  #message .cicle_btn_box {
    margin-top: 10.4rem;
  }
}

/* ---------------------------------------
  #company
-----------------------------------------*/
#company {
  margin-top: 14rem;
}
@media screen and (max-width: 900px) {
  #company {
    margin-top: 17.2rem;
  }
}
@media screen and (min-width: 901px) {
  #company .wrap {
    padding: 0 3.5rem;
  }
}
#company .logo img {
  display: block;
  width: 66rem;
  margin: 0 auto;
}
@media screen and (max-width: 900px) {
  #company .logo img {
    width: 60rem;
  }
}
#company .ttl_company {
  width: 18rem;
  height: 5rem;
  line-height: 5rem;
  border-radius: 2.5rem;
  text-align: center;
  margin: 0 auto;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  background-color: #000;
}
@media screen and (max-width: 900px) {
  #company .ttl_company {
    font-size: 2.8rem;
  }
}
#company .company_name {
  margin-top: 2.3rem;
  padding-top: 7.8rem;
  border-top: solid 1px #d0d0d0;
}
@media screen and (max-width: 900px) {
  #company .company_name {
    margin-top: 3.7rem;
    padding-top: 10.5rem;
  }
}
#company .company_name .txt_ja {
  margin-top: 3.3rem;
  text-align: center;
  font-size: 3.4rem;
}
@media screen and (max-width: 900px) {
  #company .company_name .txt_ja {
    font-size: 3.6rem;
  }
}
#company .company_name .txt_en {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.8rem;
}
@media screen and (max-width: 900px) {
  #company .company_name .txt_en {
    font-size: 2.4rem;
  }
}
#company .company_office {
  margin-top: 8rem;
}
@media screen and (max-width: 900px) {
  #company .company_office {
    margin-top: 12.7rem;
  }
}
#company .company_office .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.3rem 4rem;
  width: 80.9rem;
  margin: 3.2rem auto 0;
}
@media screen and (max-width: 900px) {
  #company .company_office .list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
    margin-top: 3.1rem;
    gap: 0;
  }
}
#company .company_office .list dt {
  width: 20rem;
  height: 12rem;
  line-height: 12rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  background-color: #efefef;
}
@media screen and (max-width: 900px) {
  #company .company_office .list dt {
    width: 100%;
    height: 4.3rem;
    line-height: 4.3rem;
    font-size: 2.8rem;
  }
}
#company .company_office .list dt:nth-of-type(n+2) {
  margin-top: 2.8rem;
}
#company .company_office .list dd {
  font-size: 1.8rem;
  line-height: 1.7777777778;
  width: calc(100% - 20rem - 4rem);
}
@media screen and (max-width: 900px) {
  #company .company_office .list dd {
    font-size: 2.8rem;
    line-height: 1.4285714286;
    width: 100%;
    margin-top: 3.7rem;
  }
}

/* ---------------------------------------
  #history
-----------------------------------------*/
#history {
  margin-top: 14.2rem;
}
@media screen and (max-width: 900px) {
  #history {
    margin-top: 23.3rem;
  }
}
#history .history_box {
  margin-top: 5.6rem;
  background-color: #2387b5;
  padding: 5.9rem 0 5.5rem 18.8rem;
}
@media screen and (max-width: 900px) {
  #history .history_box {
    margin-top: 7.9rem;
    padding: 6.3rem 0 5rem;
  }
}
#history .list {
  border-left: solid 0.3rem #fff;
  padding: 3rem 0 5rem;
}
@media screen and (max-width: 900px) {
  #history .list {
    padding: 3rem 0;
    border-left-width: 0.3rem;
  }
}
#history .list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 4rem;
  color: #fff;
  padding-left: 4rem;
  position: relative;
}
@media screen and (max-width: 900px) {
  #history .list li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
  }
}
#history .list li::before {
  content: "";
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 0.75em;
  background-color: #fff;
  position: absolute;
  left: -0.75rem;
  top: 0.7rem;
}
@media screen and (max-width: 900px) {
  #history .list li::before {
    top: 0.9rem;
  }
}
#history .list li .year {
  font-size: 2.4rem;
}
@media screen and (max-width: 900px) {
  #history .list li .year {
    font-size: 2.8rem;
  }
}
#history .list li .history {
  font-size: 1.8rem;
  line-height: 2;
  margin-top: -0.5rem;
}
@media screen and (max-width: 900px) {
  #history .list li .history {
    font-size: 2.4rem;
    line-height: 1.5;
    margin-top: 0.5rem;
  }
}
#history .list li + li {
  margin-top: 4rem;
}

/* ---------------------------------------
  #chart
-----------------------------------------*/
#chart {
  margin-top: 11.8rem;
}
@media screen and (max-width: 900px) {
  #chart {
    margin-top: 20.8rem;
  }
}
#chart .chart_box {
  width: 95.4rem;
  margin: 3.6rem auto 0;
}
@media screen and (max-width: 900px) {
  #chart .chart_box {
    width: 100%;
    margin-top: 4.8rem;
  }
}

/* ---------------------------------------
  #about
-----------------------------------------*/
#about {
  margin-top: 14.6rem;
  padding: 9.1rem 0 12.6rem;
  background-color: #f6f6f6;
}
@media screen and (max-width: 900px) {
  #about {
    margin-top: 22rem;
    padding: 14.6rem 0 8.6rem;
  }
}
@media screen and (max-width: 900px) {
  #about .wrap {
    width: 68.4rem;
  }
}
#about .about_clm {
  margin-top: 8.1rem;
  padding: 5.3rem 4.5rem 5.3rem 5.9rem;
  background-color: #fff;
  border-radius: 2.7rem;
  position: relative;
}
@media screen and (max-width: 900px) {
  #about .about_clm {
    margin-top: 10.2rem;
    padding: 5rem;
  }
}
#about .about_clm::before {
  content: "";
  width: 9.5rem;
  height: 100%;
  border-top-left-radius: 2.7rem;
  border-bottom-left-radius: 2.7rem;
  background-color: #33a2d8;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
@media screen and (max-width: 900px) {
  #about .about_clm::before {
    width: 100%;
    height: 9.8rem;
    border-bottom-left-radius: 0;
    border-top-right-radius: 2.7rem;
  }
}
#about .about_clm .inner {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 6.2rem;
}
@media screen and (max-width: 900px) {
  #about .about_clm .inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3.7rem 0;
  }
}
#about .about_clm .img_box {
  width: 36.6rem;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
@media screen and (max-width: 900px) {
  #about .about_clm .img_box {
    width: 58.1rem;
  }
}
@media screen and (max-width: 900px) {
  #about .about_clm .ttl_clm {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 4rem;
    margin: 0 auto;
  }
}
@media screen and (max-width: 900px) {
  #about .about_clm .ttl_clm img {
    width: auto;
    height: 100%;
  }
}
#about .about_clm .ttl2_clm {
  font-size: 2.8rem;
  font-weight: 700;
  margin-top: 3.2rem;
}
@media screen and (max-width: 900px) {
  #about .about_clm .ttl2_clm {
    margin-top: 3.3rem;
    text-align: center;
  }
}
#about .about_clm .txt_clm {
  font-size: 1.6rem;
  line-height: 1.875;
  margin-top: 2.4rem;
}
@media screen and (max-width: 900px) {
  #about .about_clm .txt_clm {
    font-size: 2.4rem;
    line-height: 2;
  }
}
#about .about_clm .txt_clm a {
  font-weight: 700;
  color: #64a1d5;
  border-bottom: solid 3px #33a2d8;
  padding-bottom: 0.5rem;
}
@media screen and (max-width: 900px) {
  #about .about_clm .txt_clm a {
    padding-bottom: 0;
    border-bottom: none;
  }
}
#about .about_clm + .about_clm {
  margin-top: 6rem;
}
@media screen and (max-width: 900px) {
  #about .about_clm + .about_clm {
    margin-top: 4.3rem;
  }
}

/* ---------------------------------------
  #topics
-----------------------------------------*/
#topics {
  margin-top: 11.7rem;
}
@media screen and (max-width: 900px) {
  #topics {
    margin-top: 12.2rem;
  }
}
#topics .list {
  margin-top: 6.5rem;
}
#topics .list li {
  border-bottom: solid 1px #d0d0d0;
}
#topics .list li a {
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.6666666667;
  padding: 1.3rem 0 1rem;
  display: block;
}
@media screen and (max-width: 900px) {
  #topics .list li a {
    font-size: 2.4rem;
  }
}