@charset "UTF-8";
.js-scale-content {
  transform-origin: 0 0;
}

.fade-in-up.js-inview {
  opacity: 0;
  transform: translate(0, 100px);
  transition: opacity 0.5s, transform 0.5s;
}

.fade-in-up.js-inview.js-inview-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.income-circle {
  position: relative;
  border-radius: 50%;
}

.income-circle .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.income-circle .inner .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 0.3em;
}

.income-circle .inner .result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.income-circle .inner .result .number {
  font-size: 5.4rem;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
}

.income-circle .inner .result .period {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0.1em;
}

.donuts {
  position: relative;
  width: 580px;
  height: 580px;
  margin: 0 auto;
}

.donuts svg {
  transform: rotate(-90deg);
  border-radius: 50%;
}

.donuts svg circle {
  fill: transparent;
  cx: 16;
  cy: 16;
  r: 16;
  stroke-width: 16;
  transition: all 1.5s;
}

.donuts svg circle.ratio {
  stroke-width: 8.2;
  transition-duration: 1s;
  transition-delay: 1.5s;
}

@media (-ms-high-contrast:none) {
  .donuts svg {
    transition: opacity 1.5s
  }
}

.donuts .income-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: #FFF;
  transform: translate(-50%, -50%);
}

.donuts.js-inview:not(.js-inview-visible) svg circle {
  stroke-dasharray: 0 0 0 100;
}

@media (-ms-high-contrast:none) {
  .donuts.js-inview:not(.js-inview-visible) svg {
    opacity: 0;
  }
}

@media (-ms-high-contrast:none) {
  .donuts.js-inview-visible {
    opacity: 1;
  }
}

.donuts-image .js-inview {
  opacity: 0;
}

.donuts-image .js-inview.js-inview-visible {
  opacity: 1;
  transition: all 0.5s;
}

.donuts-image .js-inview.js-inview-visible:first-of-type {
  transition-delay: 0.8s;
}

.donuts-image .js-inview.js-inview-visible:nth-of-type(2) {
  transition-delay: 1.3s;
}

.donuts-image .js-inview.js-inview-visible:nth-of-type(3) {
  transition-delay: 1.8s;
}

.donuts-image .js-inview.js-inview-visible:nth-of-type(4) {
  transition-delay: 2.3s;
}
.donuts-image .js-inview.js-inview-visible:nth-of-type(5) {
  transition-delay: 2.8s;
}
.donuts-label .text {
  font-size: 2rem;
  font-weight: bold;
  transition: opacity 0.5s, transform 0.5s;
}

.donuts-label .text.js-inview:not(.js-inview-visible) {
  opacity: 0;
  transform: translate(0, 30px);
}

.donuts-label .text.js-inview-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.donuts-label .text.js-inview-visible:first-of-type {
  transition-delay: 0.5s;
}

.donuts-label .text.js-inview-visible:nth-of-type(2) {
  transition-delay: 1s;
}

.donuts-legend {
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.donuts-legend .title {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 0.1em;
}

.donuts-legend .percentage {
  margin-bottom: 0.3em;
}

.donuts-legend .percentage .number {
  font-size: 6.6rem;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
}

.donuts-legend .percentage .number small {
  font-size: 3.6rem;
}

.donuts-legend .percentage .period {
  font-size: 2.4rem;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  margin-left: 0.2em;
}

.donuts-legend .breakdown {
  position: relative;
  padding: 1em 1em 0;
}

.donuts-legend .breakdown .number {
  font-size: 2.8rem;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.donuts-legend .breakdown .period {
  font-size: 1.6rem;
  vertical-align: middle;
  margin-left: 0.2em;
}

.donuts-legend .breakdown:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: #CCD2D5;
  transition: width 0.5s;
}

.donuts-legend .breakdown:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 60px;
  background: #CCD2D5;
  transition: height 0.5s;
}

.donuts-legend.-other .title {
  font-size: 2rem;
}

.donuts-legend.-other .percentage .number {
  font-size: 2.8rem;
}

.donuts-legend.-other .percentage .period {
  font-size: 1.6rem;
}

.donuts-legend.js-inview:not(.js-inview-visible) .breakdown, .donuts-legend.js-inview:not(.js-inview-visible) .percentage, .donuts-legend.js-inview:not(.js-inview-visible) .title {
  opacity: 0;
  transform: translate(0, 30px);
}

.donuts-legend.js-inview:not(.js-inview-visible) .breakdown:before {
  width: 0;
}

.donuts-legend.js-inview:not(.js-inview-visible) .breakdown:after {
  height: 0!important;
}

.donuts-legend.js-inview-visible .breakdown, .donuts-legend.js-inview-visible .percentage, .donuts-legend.js-inview-visible .title {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.5s, transform 0.7s;
}

.donuts-legend.js-inview-visible:first-of-type .breakdown, .donuts-legend.js-inview-visible:first-of-type .percentage, .donuts-legend.js-inview-visible:first-of-type .title {
  transition-delay: 1.8s;
}

.donuts-legend.js-inview-visible:first-of-type .breakdown:before {
  transition-delay: 1.8s;
}

.donuts-legend.js-inview-visible:first-of-type .breakdown:after {
  transition-delay: 2.3s;
}

.donuts-legend.js-inview-visible:nth-of-type(2) .breakdown, .donuts-legend.js-inview-visible:nth-of-type(2) .percentage, .donuts-legend.js-inview-visible:nth-of-type(2) .title {
  transition-delay: 2.1s;
}

.donuts-legend.js-inview-visible:nth-of-type(2) .breakdown:before {
  transition-delay: 2.1s;
}

.donuts-legend.js-inview-visible:nth-of-type(2) .breakdown:after {
  transition-delay: 2.6s;
}

.donuts-legend.js-inview-visible:nth-of-type(3) .breakdown, .donuts-legend.js-inview-visible:nth-of-type(3) .percentage, .donuts-legend.js-inview-visible:nth-of-type(3) .title {
  transition-delay: 2.4s;
}

.donuts-legend.js-inview-visible:nth-of-type(3) .breakdown:before {
  transition-delay: 2.4s;
}

.donuts-legend.js-inview-visible:nth-of-type(3) .breakdown:after {
  transition-delay: 2.9s;
}

.donuts-legend.js-inview-visible:nth-of-type(4) .breakdown, .donuts-legend.js-inview-visible:nth-of-type(4) .percentage, .donuts-legend.js-inview-visible:nth-of-type(4) .title {
  transition-delay: 2.7s;
}

.donuts-legend.js-inview-visible:nth-of-type(4) .breakdown:before {
  transition-delay: 2.7s;
}

.donuts-legend.js-inview-visible:nth-of-type(4) .breakdown:after {
  transition-delay: 3.2s;
}

.donuts-legend.js-inview-visible:nth-of-type(5) .breakdown, .donuts-legend.js-inview-visible:nth-of-type(5) .percentage, .donuts-legend.js-inview-visible:nth-of-type(5) .title {
  transition-delay: 3s;
}

.donuts-legend.js-inview-visible:nth-of-type(5) .breakdown:before {
  transition-delay: 3s;
}

.donuts-legend.js-inview-visible:nth-of-type(5) .breakdown:after {
  transition-delay: 3.5s;
}

.donuts-legend.js-inview-visible:nth-of-type(6) .breakdown, .donuts-legend.js-inview-visible:nth-of-type(6) .percentage, .donuts-legend.js-inview-visible:nth-of-type(6) .title {
  transition-delay: 3.3s;
}

.donuts-legend.js-inview-visible:nth-of-type(5) .breakdown:before {
  transition-delay: 3.3s;
}

.donuts-legend.js-inview-visible:nth-of-type(5) .breakdown:after {
  transition-delay: 3.8s;
}
.sales-products-donuts {
  position: relative;
  width: 954px;
  margin: 0 auto;
  padding-top: 110px;
}

.sales-products-donuts .donuts-image .production {
  display: block;
  position: absolute;
  top: 242px;
  left: 400px;
  width: 148px;
  height: 215px;
  background: url(/themes/yamazen/images/about/know/sales_products_img1.svg) no-repeat;
}

.sales-products-donuts .donuts-image .consumption {
  display: block;
  position: absolute;
  top: 64px;
  left: 37px;
  width: 184px;
  height: 162px;
  background: url(/themes/yamazen/images/about/know/sales_products_img2.svg) no-repeat;
}

.sales-products-donuts .donuts-legend {}

.sales-products-donuts .donuts-legend.-production {
  position: absolute;
  top: 100px;
  right: 0;
}

.sales-products-donuts .donuts-legend.-production .percentage, .sales-products-donuts .donuts-legend.-production .title {
  padding-left: 10px;
}

.sales-products-donuts .donuts-legend.-production .breakdown {
  border-color: #64A9C6;
}

.sales-products-donuts .donuts-legend.-production .breakdown:before {
  background: #64A9C6;
}

.sales-products-donuts .donuts-legend.-production .breakdown:after {
  background: #64A9C6;
  left: -1px;
  height: 80px;
  transform: skew(-34deg);
  transform-origin: 0 0;
}

.sales-products-donuts .donuts-legend.-consumption {
  position: absolute;
  top: 100px;
  left: 0;
}

.sales-products-donuts .donuts-legend.-consumption .percentage, .sales-products-donuts .donuts-legend.-consumption .title {
  padding-left: 10px;
}

.sales-products-donuts .donuts-legend.-consumption .breakdown {
  border-color: #E89696;
}

.sales-products-donuts .donuts-legend.-consumption .breakdown:before {
  right: auto;
  left: 0;
  background: #E89696;
}

.sales-products-donuts .donuts-legend.-consumption .breakdown:after {
  background: #E89696;
  left: auto;
  right: -1px;
  height: 80px;
  transform: skew(34deg);
  transform-origin: 0 0;
}

.sales-products-donuts .donuts-legend.-other {
  position: absolute;
  top: 0;
  left: 48%;
}

.sales-division-donuts {
  position: relative;
  width: 1150px;
  margin: 0 auto;
  padding-top: 110px;
  padding-bottom: 100px;
}

.sales-division-donuts .donuts-image .machine {
  display: block;
  position: absolute;
  top: 90px;
  left: 385px;
  width: 120px;
  height: 75px;
  background: url(/themes/yamazen/images/about/know/sales_division_img1.svg) no-repeat;
}

.sales-division-donuts .donuts-image .industrial {
  display: block;
  position: absolute;
  top: 390px;
  right: 80px;
  width: 77px;
  height: 78px;
  background: url(/themes/yamazen/images/about/know/sales_division_img2-2.svg) no-repeat;
}
.sales-division-donuts .donuts-image .tool {
  display: block;
  position: absolute;
  top: 480px;
  left: 200px;
  width: 91px;
  height: 68px;
  background: url(/themes/yamazen/images/about/know/sales_division_img2-1.svg) no-repeat;
}

.sales-division-donuts .donuts-image .materials {
  display: block;
  position: absolute;
  top: 300px;
  left: 30px;
  width: 110px;
  height: 116px;
  background: url(/themes/yamazen/images/about/know/sales_division_img3.svg) no-repeat;
}

.sales-division-donuts .donuts-image .home {
  display: block;
  position: absolute;
  top: 80px;
  left: 70px;
  width: 100px;
  height: 105px;
  background: url(/themes/yamazen/images/about/know/sales_division_img4.svg) no-repeat;
}

.sales-division-donuts .donuts-legend {}

.sales-division-donuts .donuts-legend.-machine {
  position: absolute;
  top: 60px;
  right: 0px;
}

.sales-division-donuts .donuts-legend.-machine .percentage, .sales-division-donuts .donuts-legend.-machine .title {
  padding-left: 10px;
}

.sales-division-donuts .donuts-legend.-machine .breakdown {
  border-color: #64A9C6;
  width: 32em;
}

.sales-division-donuts .donuts-legend.-machine .breakdown:before {
  background: #64A9C6;
}

.sales-division-donuts .donuts-legend.-machine .breakdown:after {
  background: #64A9C6;
  left: -1px;
  height: 45px;
  transform: skew(-45deg);
  transform-origin: 0 0;
}

.sales-division-donuts .donuts-legend.-industrial {
  position: absolute;
  bottom: 100px;
  right: 0;
}


.sales-division-donuts .donuts-legend.-industrial .percentage, .sales-division-donuts .donuts-legend.-industrial .title {
  padding-left: 10px;
}
.sales-division-donuts .donuts-legend.-industrial .title {
  font-size: 2.4rem;
}
.sales-division-donuts .donuts-legend.-industrial .breakdown {
  border-color: #1E5E79;
  width: 29em;
}

.sales-division-donuts .donuts-legend.-industrial .breakdown:before {
  background: #1E5E79;
}

.sales-division-donuts .donuts-legend.-industrial .breakdown:after {
  background: #1E5E79;
  left: 0;
  top: auto;
  bottom: 0.8em;
  height: 76px;
  transform: skew(45deg);
  transform-origin: 0 100%;
}

.sales-division-donuts .donuts-legend.-tool .percentage, .sales-division-donuts .donuts-legend.-tool .title {
  padding-right: 10px;
}
.sales-division-donuts .donuts-legend.-tool .title {
  font-size: 2.4rem;
}
.sales-division-donuts .donuts-legend.-tool {
  position: absolute;
  bottom: 50px;
  left: 0;
  align-items: flex-end;
}
.sales-division-donuts .donuts-legend.-tool .breakdown {
  border-color: #6f90c1;
  width: 31em;
}

.sales-division-donuts .donuts-legend.-tool .breakdown:before {
  background: #6f90c1;
}

.sales-division-donuts .donuts-legend.-tool .breakdown:after {
  background: #6f90c1;
  right:0;
  left: auto;
  top: auto;
  bottom: 0.8em;
  height: 84px;
  transform: skew(-34deg);
  transform-origin: 0 100%;
}


.sales-division-donuts .donuts-legend.-materials {
  position: absolute;
  top: 430px;
  left: 0;
}

.sales-division-donuts .donuts-legend.-materials .breakdown {
  border-color: #E89696;
  width: 32em;
}

.sales-division-donuts .donuts-legend.-materials .breakdown:before {
  right: auto;
  left: 0;
  background: #E89696;
}

.sales-division-donuts .donuts-legend.-materials .breakdown:after {
/*  background: #E89696;
  left: auto;
  right: 0;
  top: auto;
  bottom: 3.5em;
  height: 120px;
  transform: skew(-45deg);
  transform-origin: 0 100%;*/
  display: none;
}

.sales-division-donuts .donuts-legend.-home {
  position: absolute;
  top: 80px;
  left: 50px;
}


.sales-division-donuts .donuts-legend.-home .breakdown {
  border-color: #A83B3B;
  width: 20em;
}

.sales-division-donuts .donuts-legend.-home .breakdown:before {
  right: auto;
  left: 0;
  background: #A83B3B;
}

.sales-division-donuts .donuts-legend.-home .breakdown:after {
  display: none;
}

.sales-division-donuts .donuts-legend.-home.js-inview-visible .breakdown:before {
  width: 170%;
  transition-duration: 2s;
}

.sales-division-donuts .donuts-legend.-other {
  position: absolute;
  top: 0;
  left: 48%;
}

.sales-division-donuts .donuts-legend.-other .breakdown {
  width: 12em;
}
.sales-global-donuts {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

@media (min-width:769px) {
  .sales-global-donuts {
    transform: translateX(-13%);
  }
}

.sales-global-donuts .donuts-label .machine {
  position: absolute;
  top: 120px;
  left: 400px;
}

.sales-global-donuts .donuts-label .industrial {
  position: absolute;
  top: 485px;
  left: 240px;
}

.sales-global-donuts .donuts-legend {}

.sales-global-donuts .donuts-legend.-overseas {
  position: absolute;
  top: 300px;
  right: 100px;
}

.sales-global-donuts .donuts-legend.-overseas:before {
  position: absolute;
  top: -160px;
  left: -60px;
  content: "";
  display: block;
  width: 311px;
  height: 199px;
  background: url(/themes/yamazen/images/about/know/sales_global_img1.png);
  transition: opacity 0.5s, transform 0.5s;
  transition-delay: 2s;
}

.sales-global-donuts .donuts-legend.-overseas .percentage, .sales-global-donuts .donuts-legend.-overseas .title {
  padding-left: 10px;
}

.sales-global-donuts .donuts-legend.-overseas .breakdown {
  width: 14em;
  border-color: #098CA3;
}

.sales-global-donuts .donuts-legend.-overseas .breakdown:before {
  background: #098CA3;
}

.sales-global-donuts .donuts-legend.-overseas .breakdown:after {
  background: #098CA3;
  left: 0;
  top: auto;
  bottom: 8px;
  width: 5px;
  height: 80px;
  transform: skew(55deg);
  transform-origin: 0 100%;
}

.sales-global-donuts .donuts-legend.-overseas.js-inview:before {
  opacity: 0;
  transform: translate(0, 30px);
}

.sales-global-donuts .donuts-legend.-overseas.js-inview.js-inview-visible:before {
  opacity: 1;
  transform: translate(0, 0);
}

.performance {
  width: 1053px;
}

@media (max-width:767px) {
  .performance {
    width: 1053px!important;
  }
}

.performance>.item {
  padding: 0 20px;
}

.performance>.item:first-of-type {
  transition-delay: 0s;
}

.performance>.item:nth-of-type(2) {
  transition-delay: 0.25s;
}

.performance>.item:nth-of-type(3) {
  transition-delay: 0.5s;
}

.performance>.item .income-circle {
  color: #FFF;
  background: #666666;
  height: 0;
  padding-bottom: 100%;
}

.performance>.item .income-circle .inner .title {
  font-size: 3rem;
  height: 2em;
}

.performance>.item .income-circle .inner .title small {
  white-space: nowrap;
}

.performance>.item .income-circle .inner .result .number {
  font-size: 7.2rem;
}