@charset "UTF-8";
/* CSS Document */


/*-----------------
innovation
-----------------*/

#innovation {
  margin-top: 60px;
}

#innovation a{
  color: #000;
}

#innovation h1 {
  width: 1100px;
  margin: 0 auto 60px;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
  color: #1B365D;
}

#innovation p.inn_read{
  width: 1100px;
  margin: 0 auto 70px;
  font-size: 20px;
  text-align: center;
}

#innovation p.inn_read{
  width: 1100px;
  margin: 0 auto 70px;
  font-size: 20px;
  text-align: center;
}

#innovation p.inn_read .txt_kome {
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
}



/*--- article_list ---*/

#innovation .inn_article_list{
  width: 1100px;
  margin: 0 auto 160px;
  display: flex;
  align-items: flex-start;
  row-gap: 40px;
  column-gap: 40px;
  flex-wrap: wrap;
}

#innovation .inn_article_list li {
  width: calc((100% - 80px) / 3);
}

#innovation .inn_article_list li img {
  width: 100%;
  border-radius: 12px;
}

#innovation .inn_article_list li a {
  text-decoration: none;
}

#innovation .inn_article_list li h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}

#innovation .inn_article_list li p {
  padding-top: 8px;
  font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
  #innovation .inn_article_list li a:hover {
      opacity: 0.5;
  }
}



/*-----------------
innovation article
-----------------*/

/*--- inn_content ---*/

#innovation_article{
  width: 840px;
  margin: 0 auto;
  padding-bottom: 70px;
}

#innovation_article a {
  color: #000;
}

#innovation_article h1{
  font-size: 40px;
  font-weight: bold;
  line-height: 1.4;
  color: #1B365D;
  text-align: left;
  min-width: 100%;
  display: block;
}

#innovation_article p.date{
  font-size: 14px;
  margin-bottom: 40px;
}

#innovation_article .inn_content{
  padding-bottom: 60px;
  line-height: 2;
}

#innovation_article .inn_content p{
  margin-bottom: 40px;
}

#innovation_article .inn_content h2{
  font-size: 32px;
  line-height: 1.4;
  font-weight: bold;
  border-bottom: 1px solid #1B365D;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

#innovation_article .inn_content h3{
  font-size: 24px;
  line-height: 1.4;
  font-weight: bold;
  border-left: 6px solid #1B365D;
  padding-left: 12px;
  margin-bottom: 20px;
}

#innovation_article .inn_content h4{
  font-size: 18px;
  line-height: 2;
  font-weight: bold;
}

#innovation_article .inn_content h4.txt_center{
  text-align: center;
  padding:20px 0 10px;
}

#innovation_article .inn_content img{
  width: 100%;
  border-radius: 12px;
  margin-bottom: 40px;
}

#innovation_article .inn_content img.plr{
  padding: 0 30px;
  width: 100%;
  box-sizing: border-box;
}

#innovation_article .inn_content img.plr02{
  padding: 0 110px 0 90px;
  width: 100%;
  box-sizing: border-box;
}

#innovation_article .btn_b{
  width: 260px;
  line-height: 46px;
  font-size: 15px;
  display: block;
  color: #fff;
  background: #007096;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
  text-align: center;
  margin: 0 auto 70px;
}

.list_dot{
  margin-bottom: 40px;
}

.list_dot li{
  padding: 0 0 0 1.1em;
  position: relative;
}

.list_dot li:before{
  content: '・';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.dl_kome{
  margin: -35px 0 40px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}

.dl_kome dt{
  width: 2em;
}

.dl_kome dd{
  width: calc(100% - 2em);
}



/*
SP
---------------------------------------------------------------------*/

@media only screen and ( max-width : 768px ) {


  /*-----------------
  innovation
  -----------------*/

  #innovation {
    margin-top: 10%;
  }

  #innovation a{
    color: #000;
  }

  #innovation h1 {
    width: 92%;
    margin: 0 auto 12%;
    font-size: calc(100vw / ( 390 / 32 ));
    line-height: 54px;
    font-weight: bold;
    color: #1B365D;
    box-sizing: border-box;
  }

  #innovation p.inn_read{
    width: 92%;
    margin: 0 auto 12%;
    font-size: calc(100vw / ( 390 / 18 ));
    text-align: left;
  }

  #innovation p.inn_read .txt_kome {
    font-size: calc(100vw / ( 390 / 13 ));
    margin-top: 20px;
    display: inline-block;
  }



  /*--- article_list ---*/

  #innovation .inn_article_list{
    width: 92%;
    flex-direction: column;
    row-gap: 2.4em;
    margin: 0 auto 24%;
  }

  #innovation .inn_article_list li {
    width: 100%;
  }

  #innovation .inn_article_list li h2 {
    font-size: calc(100vw / ( 390 / 18 ));

  }

  #innovation .inn_article_list li p {
    font-size: calc(100vw / ( 390 / 12 ));
    padding-top: 12px;
  }




  /*-----------------
  innovation article
  -----------------*/

  /*--- inn_content ---*/

  #innovation_article{
    width: 92%;
  }

  #innovation_article h1{
    margin: 8% 0 0;
    font-size: calc(100vw / ( 390 / 32 ));
    min-width: 100%;
  }

  #innovation_article p.date{
    font-size: calc(100vw / ( 390 / 12 ));
    margin-bottom: 8%;
  }

  #innovation_article .inn_content{
    padding-bottom: 12%;
  }

  #innovation_article .inn_content p{
    margin-bottom: 8%;
  }


  #innovation_article .inn_content h2{
    font-size: calc(100vw / ( 390 / 28 ));
    padding-bottom: 3%;
    margin-bottom: 6%;
  }

  #innovation_article .inn_content h3{
    font-size: calc(100vw / ( 390 / 20 ));
    padding-left: 10px;
    margin-bottom: 1em;
  }

  #innovation_article .inn_content h4{
    font-size: calc(100vw / ( 390 / 17 ));
  }

  #innovation_article .inn_content h4.txt_center{
    padding:5% 0 3%;
    line-height: 1.4;
  }

  #innovation_article .inn_content img{
    margin-bottom: 8%;
  }

  #innovation_article .inn_content img.plr,
  #innovation_article .inn_content img.plr02{
    padding: 0;
  }

  #innovation_article .btn_b {
    width: 73%;
    line-height: 3.2;
    font-size: calc(100vw / (390 / 15));
    margin: 0 auto 5%;
  }

  .dl_kome{
    margin: -7% 0 8%;
    font-size: calc(100vw / (390 / 12));
  }

}