@charset "UTF-8";
.counter{
  .number{
    font-size:clamp( 32px, 3vw, 50px);
  }
  .unit{
    margin-left: 8px;
    font-weight: bold;
  }
#mns  {
    font-size: 8rem;
    font-weight: 600;
}
}
#pls ,#mns02{
    font-size: 5rem;
    font-weight: 600;
}
#kinzoku {
    font-size: 1.4rem;
}
.counter .number {
    font-family: oswald;
    /* [disabled]font-weight: 600; */
    /* [disabled]font-size: 9rem; */
}
.counter.p01  {
    font-size: 3rem;
    top: 30%;
    position: absolute;
    left: 10%;
}
.counter.p01 .number {
    font-size: 8rem;
}
.counter.p02    {
    position: absolute;
    font-size: 4rem;
    top: 60%;
    left: 8%;
}
.counter.p02.p002 {
    left: 11%;
}
.counter.p02 .number {
    font-size: 4.5rem;
}
.counter.p03    {
    position: absolute;
    font-size: 5rem;
    font-weight: bold;
    top: 30%;
    left: 18%;
}
.counter.p03.p003 {
    top: 69%;
    font-size: 1.6rem;
    left: 15%;
}
.counter.p03 .number {
    font-size: 10rem;
    font-weight: 500;
}
.counter.p03.p003 .number {
    font-size: 3.6rem;
}
hr.line {
    position: absolute;
    bottom: 6.2%;
    width: 80%;
    border-bottom: 4px solid #00b9e2;
    left: 0px;
    margin-right: auto;
    margin-left: auto;
    right: 0px;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    -webkit-box-shadow: inset 0px 0px 0px 0px;
    box-shadow: inset 0px 0px 0px 0px;
}
@container (min-width: 840px) {
  .item{
    flex-basis: 0%;
  }
}

@keyframes scrolldown {
  0%{
    opacity:1;
    transform: translateY(0);
  }
  100%{
    opacity:0;
    transform: translateY(22px);
  }
}
.graph_con {
    width: 25%;
    margin: 0 auto;
    position: absolute;
    top: 27%;
    right: 11%;
}

.graph-section {
    text-align: center;
}

.graph {
    display: flex;
    align-items: flex-end;
    height: 165px;
    justify-content: space-between;
    padding-bottom: 5px;
    gap: 10px;
}

.bar {
    width: 40%; /* バーの幅 */
    background-color: #00B8E3;
    height: 0; /* アニメーションの初期状態 */
    transition: height 2.5s ease-out; /* アニメーションの設定 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    position: relative;
}

.bar span {
    position: absolute;
    top: -30px;
}

/* アニメーション発火時のクラス */
.bar.is-active {
    /* JavaScriptでデータ値を取得して高さを設定 */
}

@media screen and (max-width:768px){
.unit {
    margin-left: 8px;
    font-weight: bold;
  }
.unit#mns {
    font-size: 6rem;
    font-weight: 600;
}
#pls, #mns02 {
    font-size: 2rem;
    font-weight: 600;
}
#kinzoku {
    font-size: 1.4rem;
}
.counter.p01 {
    font-size: 2rem;
    top: 22%;
    position: absolute;
    left: 10%;
}
.counter.p01 .number {
    font-size: 5rem;
}
.counter.p02 {
    position: absolute;
    font-size: 2rem;
    top: 60%;
    left: 8%;
}
.counter.p02.p002 {
    left: 11%;
}
.counter.p02 .number {
    font-size: 2.5rem;
}
.counter.p03 {
    position: absolute;
    font-size: 3rem;
    font-weight: bold;
    top: 30%;
    left: 18%;
}
.counter.p03.p003 {
    top: 69%;
    font-size: 1.6rem;
    left: 15%;
}
.counter.p03 .number {
    font-size: 7rem;
    font-weight: 500;
}
.counter.p03.p003 .number {
    font-size: 2.6rem;
}
.graph_con {
    width: 25%;
    margin: 0 auto;
    position: absolute;
    top: 16%;
    right: 11%;
}
.graph {
    display: flex;
    align-items: flex-end;
    height: 125px;
    justify-content: space-between;
    padding-bottom: 5px;
    gap: 10px;
}
}

@media screen and (max-width:480px){
#pls  {
    font-size: 6vw;
    font-weight: 600;
}
.unit#mns02  {
    font-size: 18vw;
    font-weight: 600;
}
.unit#mns {
    font-size: 24vw;
    font-weight: 600;
}
.counter.p01 {
    font-size: 11vw;
    top: 22%;
    position: absolute;
    left: 7%;
}
.counter.p01 .number {
    font-size: 30vw;
    margin-right: -5px;
}
.counter.p02.p002.co2 {
    font-size: 10vw;
    left: 8%;
}
.counter.p02.p002.co2 .number {
    left: 11%;
    font-size: 13vw;
}
.counter.p02 {
    position: absolute;
    font-size: 4vw;
    top: 58%;
    left: 8%;
}
.counter.p02.p002 {
    left: 11%;
}
.counter.p02 .number {
    font-size: 5.5vw;
    margin-right: -5px;
}
.counter.p03 {
    position: absolute;
    font-size: 6vw;
    font-weight: bold;
    top: 22%;
    left: 18%;
}
.counter.p03.p003 {
    top: 69%;
    font-size: 3.6vw;
    left: auto;
    right: 5%;
}
.counter.p03 .number {
    font-size: 15vw;
    font-weight: 500;
    margin-right: -5px;
}
.counter.p03.p003 .number {
    font-size: 5vw;
}
hr.line {
    position: absolute;
    width: 80%;
    border-bottom: 4px solid #00b9e2;
    left: 0px;
    margin-right: auto;
    margin-left: auto;
    right: 0px;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    -webkit-box-shadow: inset 0px 0px 0px 0px;
    box-shadow: inset 0px 0px 0px 0px;
    top: 62%;
}
.s_graph .g_parts:first-child hr.line{
    position: absolute;
    width: 80%;
    border-bottom: 4px solid #00b9e2;
    left: 0px;
    margin-right: auto;
    margin-left: auto;
    right: 0px;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    -webkit-box-shadow: inset 0px 0px 0px 0px;
    box-shadow: inset 0px 0px 0px 0px;
    top: 77%;
}
.graph_con {
    width: 25%;
    margin: 0 auto;
    position: absolute;
    top: 14%;
    right: 11%;
}
.s_graph .g_parts:first-child .graph_con {
    width: 25%;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    right: 11%;
}
.graph {
    display: flex;
    align-items: flex-end;
    height: 26vw;
    justify-content: space-between;
    padding-bottom: 5px;
    gap: 10px;
}
.s_graph .g_parts:first-child .graph {
    display: flex;
    align-items: flex-end;
    height: 56vw;
    justify-content: space-between;
    padding-bottom: 5px;
    gap: 10px;
}
}