@charset "UTF-8";

/* INTERFACE */


/* INDEX */

#fact_index_area{
  padding: 0 4%;
  background: linear-gradient(120deg, #00d176 5%, #00baba 20%);
}

#fact_faq {
  max-width: 1500px;
  margin: 0 auto;
  padding: 130px 0;
  background-color: #fff;
}

#fact_index_area h1 {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 15px;
}

#fact_index_area h1 img {
  width: 100%;
  vertical-align: bottom;
}

#fact_index_area p{
  max-width: 1000px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  margin: 2em auto;
  padding: 0 50px;
}

#fact_index_area p span{
  color: #00adad;
}

#fact_faq ul {
  max-width: 1000px;
  margin: 30px auto 0 ;
  padding: 0 50px;
  list-style-type: none;
}

#fact_faq ul li {
  margin: 0 0 1em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

#fact_faq ul li span{
  font-family: "Jost", sans-serif;
  font-size: 50px;
  color: #00adad;
}

#fact_faq ul li a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1em 1.5em;
  background-color: #fffaf0;
  border: 3px solid #00adad;
  border-radius: 15px;
  color: #333;
}


/* DETAIL */

#fact_detail_area {
  max-width: 1000px;
  margin: 100px auto 0;
  padding: 5%;
  background-color: #fff;
  border-radius: 10px;
}

#fact_detail_area p{
  font-size: 18px;
  line-height: 1.8;
  margin: 1em 0;
}

#fact_detail_area p strong{
  font-size: 22px;
}

#fact_detail_area p.attention{
  padding: 0 0 0 2em;
  font-weight: 500;
  background-image: url(../../img/interface/ico_star.svg);
  background-repeat: no-repeat;
  background-size: 1.5em;
  background-position: left top;
}

#fact_detail_area p.answer{
  display: inline;
  font-size: 20px;
  margin: 0 0 1em;
  padding: 0 0.2em;
  background: linear-gradient(transparent 75%, #fff58b 25%);
}

#fact_detail_area p.answer span{
  font-family: "Jost", sans-serif;
  font-size: 28px;
}

#fact_detail_area p:not(.answer) span{
  display: inline;
  background: linear-gradient(transparent 75%, #fff58b 25%);
}

#fact_detail_area li{
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 0.5em;
}

#fact_detail_area ul.outline{
  display: inline-block;
  list-style-type: none;
  margin: 2em 0 0;
  padding: 0;
  font-weight: 600;
}

#fact_detail_area ul.outline li span{
  font-family: "Jost", sans-serif;
  font-size: 20px;
  color: #00adad;
  padding: 0 0.3em 0 0 ;
}

#fact_detail_area ul li a{
  color: #000;
}

#fact_detail_area h1{
  margin: 0 0 1em;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: #00adad;
}

#fact_detail_area h1 span{
  font-family: "Jost", sans-serif;
  font-size: 55px;
}

#fact_detail_area img{
  display: block;
  max-width: 800px;
  width: 100%;
  margin: 50px auto 30px;
}

#fact_detail_area time{
  display: block;
  margin: 0 0 30px;
}

#fact_detail_area section,
#fact_detail_area>div{
  margin: 8% 0;
}

#fact_detail_area section h2{
  font-size: 25px;
  font-weight: 600;
  margin: 0 0 1em;
  padding: 0 0 0 0.5em;
  border-left: 8px solid #00adad;
}

#fact_detail_area section h2 span{
  font-family: "Jost", sans-serif;
  font-size: 34px;
  color: #00adad;
  padding: 0 0.3em 0 0 ;
}

#fact_detail_area a{
  overflow-wrap: anywhere;
}

#fact_detail_area>a{
  margin: 50px auto 0;
}

#fact_detail_link ul{
  padding: 0 0 0 1em;
}

#fact_detail_link ul li::marker{
  color: #00adad;
}

#fact_detail_link a{
  display: block;
}


@media screen and (max-width:767px) {
  #fact_faq {
    padding: 110px 0;
  }
  #fact_faq ul {
    padding: 0 15px;
  }
  #fact_faq ul li {
    font-size: 4vw;
  }
  #fact_faq ul li span {
    font-size: 8vw;
  }
  #fact_faq ul li a {
    padding: 0.7em 0.5em;
  }
  #fact_index_area p{
    font-size: 4vw;
    padding: 0 15px;
  }
  #fact_detail_area p{
    font-size: 4vw;
  }
  #fact_detail_area li{
    font-size: 4vw;
  }
  #fact_detail_area h1{
    font-size: 6.5vw;
  }
  #fact_detail_area h1 span{
    font-size: 7vw;
  }
  #fact_detail_area #answer{
    font-size: 4.3vw;
  }
  #fact_detail_area #answer span{
    font-size: 5.5vw;
  }
  #fact_detail_area img{
    margin: 10px auto 10px;
  }
  #fact_detail_area section,
  #fact_detail_area>div{
    margin: 10% 0;
  }
  #fact_detail_area section h2{
    font-size: 5.1vw;
  }
}