@charset "utf-8";

/* CSS Document */

/***********
flex
************/

.statistics {
  display: flex;
  flex-wrap: wrap;
  border-right: 8px solid var(--color-sub01);
}

.statistics-section {
  width: calc(100% / 3);
  position: relative;
  border: 8px solid var(--color-sub01);
  border-right: none;
  margin-bottom: -8px;
  font-size: clamp(124%,2.8vw, 254%);
}
.statistics-section.-full {
  width: 100%;
}
.statistics-section.-half {
  width: 50%;
}
.statistics-section.-x2 {
  width: 66.66%;
}

.statistics-container {
  padding: 1.2em;
  user-select: none;
}

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

  .statistics {
    border-width: 4px;
    margin-left: -4vw;
    margin-right: -4vw;

  }

  .statistics-section {
    width: 100%;
    border-width: 4px;
    margin-bottom: -4px;
  }
  .statistics-section.-full {
    width: 100%;
  }
  .statistics-section.-half {
    width: 100%;
  }
  .statistics-section.-x2 {
    width: 100%;
  }

  .statistics-container {
    padding: 1.2em;
    user-select: none;
  }
}


/***********
statistics
************/

.statistics-heading {
  position: relative;
}
.statistics-heading.-object {
  min-height: 3em;
}
.statistics-heading-object {
  position: absolute;
  right: -1em;
  top: -0.8em;
  width: 6.5em;
  pointer-events: none;
}

.statistics-title {
  line-height: 1.3;
  color: var(--color-brand01);
  position: relative;
  z-index: 2;
  font-size: 93%;
}


.statistics-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
.statistics-box {
}

.statistics-lower {
  padding-top: 1.5em;
}

/*
data
*/

.statistics-data {
  text-align: center;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  font-size: 300%;
  font-weight: 600;
}
.statistics-data-num {
  display: inline-block;
  font-family: var(--font-family-gothic-en);
  position: relative;
}
.statistics-data-num.-small {
  font-size: 80%;
}
.statistics-data-unit {
  font-size: 55%;
  font-weight: 700;
  padding-left: 0.1em;
}

.statistics-data-num::before {
  content: attr(data-text)"";
  position: absolute;
  right: 2em;
  top: 0;
  transform: scale(0.7);
  transform-origin: bottom;
  opacity: 0;
}

.is-show .statistics-data-num::before {
  opacity: 1;
  transition-delay: 0.5s;
}


.statistics-data-dot {
  font-style: normal;
}

.statistics-data-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 380%;
  min-height: 1.3em;
  white-space: nowrap;
}

.statistics-text {
  font-size: 124%;
  line-height: 1.6;
  min-height: calc(3em * 1.6);
}


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

  .statistics-title {
    font-size: 139%;
  }

}

/***********
円グラフ
************/

.pieChart {
  text-align: center;
  position: relative;
  width: 10em;
  margin: 0 auto;
  font-size: 31px;
  font-size: clamp(1.39rem,2.2vw, 2.54rem);
}

.pieChart-circle {
  fill: none;
  stroke-width: 32;
  stroke-dasharray: 100;
  stroke-dashoffset:100;
  transform-origin: center;
  transform: rotate(-90deg);
}

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

  .pieChart {
    width: 13em;
  }
}


.pieChart-circle.-red {
  stroke: #cb0333;
}
.pieChart-circle.-pink {
  stroke: #f5b39d;
}
.pieChart-circle.-yellow {
  stroke: #fde4a1;
}


.pieChart-text {
  position: absolute;
  line-height: 1.2;
  text-align: left;
  width: 2em;
  white-space: nowrap;
}
.pieChart-text.-white {
  color: white;
}
.pieChart-text.-small {
  font-size: 90%;
}
.pieChart-text.-flex {
  display: flex;
  align-items: end;
  width: auto;
}
.pieChart-text-title {
  font-size: 55%;
  font-weight: 600;
  font-feature-settings: "palt";
  white-space: nowrap;
}
.pieChart-text-num {
  display: inline-block;
  font-family: var(--font-family-gothic-en);
  font-weight: 600;
  font-size: 140%;
}
.pieChart-text-unit {
  display: inline-block;
  font-weight: 600;
  font-size: 80%;
}
.pieChart-text.-flex .pieChart-text-num {
  translate: 0 0.254em;
}
.pieChart-text.-flex .pieChart-text-unit{
  translate: 0 0.5em;
}



/*
男女比
*/

.statistics-section.is-inview .pieChart-svg.-no01 .-pie02 {
  animation: anim-pieChart01_pie02 1s ease-in-out forwards 0.2s;
}
.statistics-section.is-inview .pieChart-svg.-no01 .-pie01 {
  animation: anim-pieChart01_pie01 1s ease-in-out forwards 0.2s;
}

.pieChart-text.-no01_01 {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: 1em -40%;
}
.pieChart-text.-no01_02 {
  position: absolute;
  right: 50%;
  top: 50%;
  translate: -1em -100%;
}

.statistics-object {
  position: absolute;
  width: 4.5em;
  pointer-events: none;
}
.statistics-object.-men {
  left: 1em;
  bottom: 2em;
}
.statistics-object.-women {
  right: 1em;
  bottom: 2em;
}
.statistics-object.-award {
  right: 1em;
  top: 1em;
}

@keyframes anim-pieChart01_pie01 {
  to {
    stroke-dashoffset: 37;
  }
}
@keyframes anim-pieChart01_pie02 {
  to {
    stroke-dashoffset: 0;
  }
}


/*
採用区分
*/

.statistics-section.is-inview .pieChart-svg.-no02 .-pie03 {
  animation: anim-pieChart02_pie03 1s ease-in-out forwards 0.2s;
}
.statistics-section.is-inview .pieChart-svg.-no02 .-pie02 {
  animation: anim-pieChart02_pie02 1s ease-in-out forwards 0.2s;
}
.statistics-section.is-inview .pieChart-svg.-no02 .-pie01 {
  animation: anim-pieChart02_pie01 1s ease-in-out forwards 0.2s;
}


.pieChart-text.-no02_01 {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: 1em -40%;
}
.pieChart-text.-no02_02 {
  position: absolute;
  right: 50%;
  top: 50%;
  translate: -1.8em -70%;
}
.pieChart-text.-no02_03 {
  position: absolute;
  right: 50%;
  top: -0.5em;
  translate: 0.2em 0;
}

@keyframes anim-pieChart02_pie01 {
  to {
    stroke-dashoffset: 35;
  }
}
@keyframes anim-pieChart02_pie02 {
  to {
    stroke-dashoffset: 8;
  }
}
@keyframes anim-pieChart02_pie03 {
  to {
    stroke-dashoffset: 0;
  }
}


/*
雇用形態
*/

.statistics-section.is-inview .pieChart-svg.-no03 .-pie03 {
  animation: anim-pieChart03_pie03 1s ease-in-out forwards 0.2s;
}
.statistics-section.is-inview .pieChart-svg.-no03 .-pie02 {
  animation: anim-pieChart03_pie02 1s ease-in-out forwards 0.2s;
}
.statistics-section.is-inview .pieChart-svg.-no03 .-pie01 {
  animation: anim-pieChart03_pie01 1s ease-in-out forwards 0.2s;
}

.pieChart-text.-no03_01 {
  position: absolute;
  left: 40%;
  bottom: 2em;
  translate: -1em 0;
  text-align: center;
}
.pieChart-text.-no03_02 {
  position: absolute;
  right: 50%;
  top: -0.5em;
  translate: -1em 0;
}
.pieChart-text.-no03_03 {
  position: absolute;
  left: 50%;
  top: -1.5em;
  translate: -0.8em 0;
}

@keyframes anim-pieChart03_pie01 {
  to {
    stroke-dashoffset: 10;
  }
}
@keyframes anim-pieChart03_pie02 {
  to {
    stroke-dashoffset: 2;
  }
}
@keyframes anim-pieChart03_pie03 {
  to {
    stroke-dashoffset: 0;
  }
}

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


  .pieChart-text {
    font-size: 140%;
  }
  .pieChart-text.-small {
    font-size: 120%;
  }

  .statistics-object {
    width: 7em;
  }
  .statistics-object.-men {
    left: 0em;
    bottom: 1em;
  }
  .statistics-object.-women {
    right: 0em;
    bottom: 1em;
  }
  .statistics-object.-award {
    width: 5em;
    right: 15%;
    top: 1em;
  }
}

/***********
statistics
************/

.statistics-shops {
  padding-top: 1em;
  display: flex;
  flex-wrap: wrap;
  margin-left: -2%;
  margin-bottom: -1em;
}
.statistics-shops-item {
  width: 23%;
  margin-left: 2%;
  margin-bottom: 1em;
}
.statistics-shops-title {
  background-color: var(--color-sub01);
  padding: 0.4em 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 70%;
  line-height: 1.2;
  border-radius: 2em;
}

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

  .statistics-shops-title {
    font-size: 60%;
  }

}

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


  .statistics-shops-item {
    width: 48%;
  }
  .statistics-shops-title {
    font-size: 80%;
  }

}
/***********
barGraph
************/

.barGraph {
  position: relative;
}
.barGraph-base {
}
.barGraph-bar {
  position: absolute;
  left: 0;
  top: 0;
}


.barGraph.-job {
  max-width: 860px;
  margin: -1em auto;
  padding-bottom: 1.5em;
}
.barGraph.-grade {
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 0.5em;
}
.barGraph.-result {
  margin: 0 auto;
  padding-bottom: 0.5em;
}
.barGraph.-result .barGraph-arrow {
  width: 30%;
  position: absolute;
  left: 50%;
  top: -2%;
}

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

  .barGraph.-job {
    margin: 0.5em auto;
  }

}

/***********
mask
************/

.barGraph-mask {
  display: inline-block;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%);
  transition: 1.5s ease 0.4s;
  vertical-align: middle;
}
.is-show .barGraph-mask,
.is-show.barGraph-mask {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
}
.barGraph-mask.-full {
  width: 100%;
}

.barGraph-mask-up {
  display: inline-block;
  vertical-align: middle;
  transition: 1.5s ease 0.4s;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
.barGraph-mask-left {
  display: inline-block;
  vertical-align: middle;
  transition: 1.5s ease 0.4s;
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.is-show.barGraph-mask-left{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.is-show.barGraph-mask-up{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}