@charset "UTF-8";


/*  MV
==================== */
.cover_bg picture img {
  object-position: 50% 20%;
}

.key span._large {
  font-size: min(238.01%, 18vw);
}


/*  Separator
==================== */
.separator {
  width: 100%;
  aspect-ratio: 13 / 10;
  overflow: hidden;
  filter: grayscale(1);
}
.separator img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
@media(min-width: 992px){
  .separator {
    aspect-ratio: 72 / 25;
  }
}


/*  Background
==================== */
.bg-white-noise > div {
  position: relative;
}


.doughnut_chart {
  max-width: 320px;
  margin: 0 auto;
  position: relative;
}
.doughnut_chart i,
.doughnut_chart svg {
  width: 40px;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


/*  Animation Chart
==================== */
.countup {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}
.js-countup {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  gap: .25rem;
  background: var(--white);
  font-family: var(--font1);
  font-weight: 800;
  font-size: 67px;
  line-height: 1;
  letter-spacing: 0;
}
.js-countup::after {
  content: attr(data-unit);
  display: inline-block;
  font-family: var(--gothic);
  font-size: 1rem;
  font-weight: 900;
}
.js-countup._big::after {
  font-size: 1.313rem;
}
.js-countup._small {
  font-size: 1rem;
}
.js-countup + .v {
  display: block;
  width: 5.25em;
  text-align: center;
}


.bar_chart ul {
  list-style-type: none;
  padding: 14px 78px;
  overflow: hidden;
  background: url(img/data4.svg) no-repeat left center / 30px;
}
.bar_chart ul li {
  line-height: 1;
  height: 5px;
  background: #E5E5E5;
  margin: 53px 0;
  position: relative;
}
.bar_chart ul li:first-child {
  margin-top: 0;
}
.bar_chart ul li:last-child {
  margin-bottom: 0;
}
.bar_chart ul li::before {
  display: block;
  width: 3.5em;
  content: attr(data-label);
  text-align: right;
  font-weight: 900;
  padding-right: .75em;
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}
.bar_chart ul li .bar {
  width: 0;
  height: 100%;
  background: var(--black);
  position: relative;
  transition: width .4s ease-in-out;
}
.bar_chart ul li .js-countup {
  width: 78px;
  justify-content: flex-end;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}


.chart-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}


.doughnut_chart {
  width: 120px;
  height: 120px;
  position: relative;
}
.doughnut_txt {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.doughnut_txt span {
  display: block;
}
.doughnut_txt .countup {
  margin-bottom: 0;
}
.doughnut_txt .js-countup:not(._small) {
  font-size: 30px;
}
@media(min-width: 768px){
  .doughnut_chart {
    width: 135px;
    height: 135px;
  }
  .doughnut_txt .js-countup:not(._small) {
    font-size: 35px;
  }
}
@media(min-width: 1200px){
  .doughnut_chart {
    width: 150px;
    height: 150px;
  }
  .doughnut_txt .js-countup:not(._small) {
    font-size: 39px;
  }
}


.pie_chart {
  width: 122px;
  height: 122px;
}
@media(min-width: 1200px){
  .pie_chart {
    width: 180px;
    height: 180px;
  }
}



#data1 { order:1; }
#data2 { order:2; }
#data3 { order:3; }
#data4 { order:4; }
#data5 { order:5; }
#data6 { order:6; }
@media(min-width: 576px) and (max-width: 767px){
  #data4 { order:5; }
  #data5 { order:4; }
  #data5 figure img {
    width: 62px;
  }
  #data5 .pie_chart {
    width: 100px;
    height: 100px;
  }
}

@media(min-width: 576px){
  #data1 .panel-body,
  #data2 .panel-body {
    height: 240px;
  }
  #data3 .panel-body,
  #data5 .panel-body {
    height: 245px;
  }
}
@media(min-width: 576px){
  #data1 .panel-body,
  #data2 .panel-body,
  #data3 .panel-body {
    height: 245px;
  }
  #data4 .panel-body,
  #data5 .panel-body {
    height: 263px;
  }
}

#data1 .countup {
  margin-bottom: -40px;
}
#data1 .js-countup {
  width: 190px;
}
#data2 .js-countup {
  flex-direction: column;
  align-items: center;
}
@media(min-width: 1200px){
  #data5 .countup {
    width: calc(102px + 1.5rem + 180px);
    margin-right: auto;
    margin-left: auto;
    justify-content: flex-start;
    margin-bottom: -60px;
  }
}


/*  List
==================== */
.list .list-inner-row > .row {
  padding: 2rem 0;
}
@media (min-width: 768px) {

}
@media (min-width: 992px) {
  .list .list-inner-row > .row {
    padding: 3rem 0;
  }
}
@media (min-width: 1200px) {
  .list .list-inner-row > .row {
    padding: 3.5rem 0;
  }
  .list .list-inner-row > .row:nth-of-type(odd) {
    padding-right: 5%;
  }
  .list .list-inner-row > .row:nth-of-type(even) {
    padding-left: 5%;
  }
}