@charset "UTF-8";
/* CSS Document */
#infographics .infographics-Box{
 width: 100%;
 max-width: 1240px;
 margin: -150px auto 0;
 background-color: #fff;
 padding: 80px 80px 112px;
 border-radius: 30px;
 position: relative;
 box-sizing: border-box;
 z-index: 1;
}
#infographics .infographics-Box .sub-title{
 font-size: 12px;
 font-weight: bold;
 letter-spacing: 0.05rem;
 line-height: 1.25;
 color: #F55723;
 padding: 0 0 0 22px;
 position: relative;
}
#infographics .infographics-Box .sub-title:before{
 position: absolute;
 content: "";
 width: 12px;
 height: 12px;
 border-radius: 100px;
 background-color: #F55723;
 left: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}
#infographics .infographics-Box h3{
 font-size: 30px;
 font-weight: bold;
 line-height: 1.8;
 margin: 30px 0 0;
 color: #F55723;
}
#infographics .infographics-Box .text{
 font-size: 16px;
 font-weight: 500;
 line-height: 2;
 margin: 50px 0 0;
}
#infographics .numbers-list{
 max-width: 1100px;
 margin: 70px auto 0;
 padding: 0 180px;
}
#infographics .numbers-list ul{
 display: flex;
 flex-wrap: wrap;
 gap: 30px;
}
#infographics .numbers-list ul li{
 width: calc((100% - 60px) / 3);
 background-color: #fff;
 border-radius: 15px;
 padding: 30px;
 box-sizing: border-box;
 text-align: center;
}
#infographics .numbers-list ul li div.title{
 display: flex;
 justify-content: space-between;
 align-items: center;
}
#infographics .numbers-list ul li div.title img{
 width: 50px;
}
#infographics .numbers-list ul li div.title p{
 color: #F55723;
 font-size: 20px;
 font-weight: bold;
 line-height: 1.45;
 text-align: left;
}
#infographics .numbers-list ul li div.title p span{
 color: #aaa;
 font-size: 12px;
 font-weight: 600;
 display: block;
 line-height: 1.25;
 margin: 0 0 5px;
}
#infographics .numbers-list ul li p.num{
 font-size: 120px;
 font-weight: 400;
 letter-spacing: -0.25rem;
 line-height: 1;
 margin: 76px 0 0;
 color: #F55723;
 font-family: "Bebas Neue", sans-serif;
}
#infographics .numbers-list ul li p span{
 font-size: 24px;
 font-weight: bold;
 line-height: 1.46;
 color: #222;
 padding: 0 0 0 10px;
 letter-spacing: 0;
 font-family: "Zen Kaku Gothic New", sans-serif;
}
#infographics .numbers-list ul li p.year{
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.05rem;
 line-height: 1.43;
 margin: 104px 0 0;
}
@media screen and (max-width:1000px) {
 #infographics .infographics-Box{
  width: 90%;
  padding: 20px;
  margin: 15px 20px 20px;
  border-radius: 15px;
 }
 #infographics .infographics-Box h3{
  font-size: 18px;
  margin: 10px 0 0;
 }
 #infographics .infographics-Box .text{
  font-size: 14px;
  margin: 10px 0 0;
 }
 #infographics .numbers-list{
  margin: 20px auto 0;
  padding: 0 20px;
 }
 #infographics .numbers-list ul{
  display: block
 }
 #infographics .numbers-list ul li{
  width: 100%;
  padding: 30px 20px 20px;
 }
 #infographics .numbers-list ul li:not(:first-child){
  margin: 15px 0 0;
 }
 #infographics .numbers-list ul li div.title p span{
  padding: 0;
 }
 #infographics .numbers-list ul li div.title{
  justify-content: center;
  gap: 10px;
 }
 #infographics .numbers-list ul li div.title p{
  text-align: center;
 }
 #infographics .numbers-list ul li div.title img{
  width: 40px;
 }
 #infographics .numbers-list ul li p.num{
  font-size: 100px;
  margin: 20px 0 0;
 }
 #infographics .numbers-list ul li p.year{
  margin: 20px 0 0;
 }
}