@charset "UTF-8";
/* ==============================
リセットcss
============================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  text-align: left;
}

main {
  display: block;
}

@font-face {
  font-family: "Avenir Next";
  src: url("../font/avenir_next.woff2") format("woff2"), url("../font/avenir_next.woff") format("woff");
}

body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  font-family: "Avenir Next", sans-serif;
  font-style: italic;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ul, ol, dl {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

table {
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
}

input, select {
  vertical-align: middle;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* 大枠 */
html {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}

body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  line-height: 1.8;
  word-wrap: break-word;
}

#wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

body > #wrapper {
  height: auto;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  content: " ";
  clear: both;
  height: 0;
}

@media print {
  html {
    overflow: visible !important;
  }
  html body {
    overflow: visible !important;
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  vertical-align: bottom;
  box-shadow: #000 0 0 0;
  /* ロールオーバー対応 */
  box-shadow: #000 0 0 0;
}

/* レスポンシブ対応 */
x:-moz-any-link, x:default {
  box-shadow: #000 0 0 0;
  /* IE7対応 */
}

/* リンク */
a:link, a:visited {
  color: #0066FF;
  text-decoration: none;
}

a:hover, a:active {
  color: #0066FF;
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.flex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

#main {
  width: 1920px;
  height: 1080px;
}

.wrap {
  width: 1920px;
  height: 1080px;
  background: url(../img/bg.jpg) no-repeat scroll left top;
  background-size: 1920 1080;
}

.wrap .logo {
  width: 160px;
  position: absolute;
  left: 75px;
  top: 75px;
}

/* ==============================
	
　表示1

============================== */
.wrap {
  width: 1920px;
  height: 1080px;
  /*　====================
		緑枠
	====================　*/
  /*　====================
		ヤンマービル　使用電力
	====================　*/
  /*　====================
		青枠
	====================　*/
}

.wrap .catch {
  position: absolute;
  left: 311px;
  top: 75px;
  width: 1518px;
}

.wrap .top_wrap {
  width: 1525px;
  height: 310px;
  border-radius: 5px;
  background-color: #EAF3F0;
  position: absolute;
  left: 300px;
  top: 165px;
}

.wrap .top_wrap .renewal_energy {
  width: 231px;
  position: absolute;
  left: 540px;
  top: 21px;
}

.wrap .top_wrap .gas_system {
  width: 277px;
  position: absolute;
  left: 65px;
  top: 21px;
}

.wrap .top_wrap .value {
  font-size: 90px;
  font-weight: 600;
  line-height: 1;
  width: 330px;
  position: absolute;
  text-align: center;
}

.wrap .top_wrap .value::after {
  margin: 0 0 0 5px;
  content: " ";
  display: inline-block;
  width: 74px;
  height: 34px;
  background: url(../img/unit_kw_gr.svg) no-repeat;
  background-size: contain;
}

.wrap .top_wrap .value.sunlight {
  top: 220px;
  left: 493px;
  color: #007346;
}

.wrap .top_wrap .value.gas {
  top: 220px;
  left: 37px;
  color: #007346;
}

.wrap .top_wrap .in_house_power {
  width: 450px;
  height: 270px;
  border-radius: 8px;
  border: 5px solid #007346;
  background-color: #fff;
  position: absolute;
  top: 20px;
  right: 20px;
  color: #007346;
  transition: background-color 0.5s linear, color 0.5s linear;
}

.wrap .top_wrap .in_house_power .rate {
  display: none;
}

.wrap .top_wrap .in_house_power .title {
  text-align: center;
  margin: 30px auto 35px;
}

.wrap .top_wrap .in_house_power .value {
  font-size: 154px;
  font-weight: 600;
  line-height: 1;
  width: 100%;
  letter-spacing: -0.05em;
}

.wrap .top_wrap .in_house_power .value::after {
  margin: 0 0 0 20px;
  content: " ";
  display: inline-block;
  width: 130px;
  height: 62px;
  background: url(../img/unit_kw_gr.svg) no-repeat;
  background-size: contain;
}

.wrap .top_wrap .in_house_power.on {
  background-color: #007346;
  color: #fff;
  transition: background-color 1.25s linear, color 1.25s linear;
}

.wrap .top_wrap .in_house_power.on .quantity {
  display: none;
}

.wrap .top_wrap .in_house_power.on .rate {
  display: block;
}

.wrap .top_wrap .in_house_power.on .value {
  color: #fff;
  transition: color 1s linear;
  letter-spacing: normal;
}

.wrap .top_wrap .in_house_power.on .value span + span {
  font-size: 100px;
}

.wrap .top_wrap .in_house_power.on .value::after {
  content: none;
  display: none;
}

.wrap .top_wrap .in_house_power.on .value .icon_percent {
  display: inline-block;
  margin: 0 0 0 20px;
  width: 60px;
  height: 62px;
  background: url(../img/percent.svg) no-repeat;
  background-size: contain;
}

.wrap .building {
  width: 299px;
  position: absolute;
  left: 1430px;
  top: 499px;
}

.wrap .usage_wrap {
  width: 330px;
  height: 175px;
  border: 2px solid #221815;
  position: absolute;
  left: 1415px;
  top: 775px;
}

.wrap .usage_wrap .usage_title {
  margin: 23px 0;
  text-align: center;
}

.wrap .usage_wrap .value {
  font-size: 90px;
  font-weight: 600;
  line-height: 1;
  width: 330px;
  position: absolute;
  text-align: center;
  color: #231815;
}

.wrap .usage_wrap .value::after {
  margin: 0 0 0 5px;
  content: " ";
  display: inline-block;
  width: 74px;
  height: 34px;
  background: url(../img/unit_kw_bk.svg) no-repeat;
  background-size: contain;
}

.wrap .bottomm_wrap {
  width: 1030px;
  height: 310px;
  border-radius: 5px;
  background-color: #EEF2F9;
  position: absolute;
  left: 300px;
  top: 720px;
}

.wrap .bottomm_wrap .carbon_offset {
  position: absolute;
  top: 27px;
  right: 80px;
}

.wrap .bottomm_wrap .value {
  font-size: 90px;
  font-weight: 600;
  line-height: 1;
  width: 330px;
  position: absolute;
  text-align: center;
  color: #16559A;
}

.wrap .bottomm_wrap .value::after {
  margin: 0 0 0 5px;
  content: " ";
  display: inline-block;
  width: 74px;
  height: 34px;
  background: url(../img/unit_kw_bl.svg) no-repeat;
  background-size: contain;
}

.wrap .bottomm_wrap .value.purchase_green {
  top: 177px;
  left: 37px;
}

.wrap .power {
  position: absolute;
  left: 481px;
  top: 194px;
  width: 1363px;
}

.wrap .power_value {
  z-index: 100;
  position: absolute;
  left: 1395px;
  top: 189px;
  width: 450px;
  height: 816px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.wrap .power_value .bg_col {
  color: #fff;
  width: 450px;
  height: 260px;
  border-radius: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.wrap .power_value .bg_col .title {
  margin: 10px 0 15px;
}

.wrap .power_value .in_house {
  background-color: #007346;
}

.wrap .power_value .co2 {
  width: 427px;
}

.wrap .power_value .carbon_offset {
  background-color: #0045A0;
}

/* ==============================
円　ベース
============================== */
.swiper-slide-active {
  /* ==============================
	円アニメーション　緑
	============================== */
  /* ==============================
	円アニメーション　青
	============================== */
}

.swiper-slide-active .circlelist .circle {
  width: 12px;
  height: 8px;
  animation-duration: 0.3s;
  transform-origin: center;
}

.swiper-slide-active .circlelist .circle.c1,
.swiper-slide-active .circlelist .arrow.c1 {
  animation-delay: 1.5s;
}

.swiper-slide-active .circlelist .circle.c2,
.swiper-slide-active .circlelist .arrow.c2 {
  animation-delay: 1.52s;
}

.swiper-slide-active .circlelist .circle.c3,
.swiper-slide-active .circlelist .arrow.c3 {
  animation-delay: 1.54s;
}

.swiper-slide-active .circlelist .circle.c4,
.swiper-slide-active .circlelist .arrow.c4 {
  animation-delay: 1.56s;
}

.swiper-slide-active .circlelist .circle.c5,
.swiper-slide-active .circlelist .arrow.c5 {
  animation-delay: 1.58s;
}

.swiper-slide-active .circlelist .circle.c6,
.swiper-slide-active .circlelist .arrow.c6 {
  animation-delay: 1.6s;
}

.swiper-slide-active .circlelist .circle.c7,
.swiper-slide-active .circlelist .arrow.c7 {
  animation-delay: 1.62s;
}

.swiper-slide-active .circlelist .circle.c8,
.swiper-slide-active .circlelist .arrow.c8 {
  animation-delay: 1.64s;
}

.swiper-slide-active .circlelist .circle.c9,
.swiper-slide-active .circlelist .arrow.c9 {
  animation-delay: 1.66s;
}

.swiper-slide-active .circlelist .circle.c10,
.swiper-slide-active .circlelist .arrow.c10 {
  animation-delay: 1.68s;
}

.swiper-slide-active .circlelist .circle.c11,
.swiper-slide-active .circlelist .arrow.c11 {
  animation-delay: 1.7s;
}

.swiper-slide-active .circlelist .circle.c12,
.swiper-slide-active .circlelist .arrow.c12 {
  animation-delay: 1.72s;
}

.swiper-slide-active .circlelist .circle.c13,
.swiper-slide-active .circlelist .arrow.c13 {
  animation-delay: 1.74s;
}

.swiper-slide-active .circlelist .circle.c14,
.swiper-slide-active .circlelist .arrow.c14 {
  animation-delay: 1.76s;
}

.swiper-slide-active .circlelist .circle.c15,
.swiper-slide-active .circlelist .arrow.c15 {
  animation-delay: 1.78s;
}

.swiper-slide-active .circlelist .circle.c16,
.swiper-slide-active .circlelist .arrow.c16 {
  animation-delay: 1.8s;
}

.swiper-slide-active .circlelist .circle.c17,
.swiper-slide-active .circlelist .arrow.c17 {
  animation-delay: 1.82s;
}

.swiper-slide-active .circlelist .circle.c18,
.swiper-slide-active .circlelist .arrow.c18 {
  animation-delay: 1.84s;
}

.swiper-slide-active .circlelist .circle.c19,
.swiper-slide-active .circlelist .arrow.c19 {
  animation-delay: 1.86s;
}

.swiper-slide-active .circlelist .circle.c20,
.swiper-slide-active .circlelist .arrow.c20 {
  animation-delay: 1.88s;
}

.swiper-slide-active .circlelist .circle.c21,
.swiper-slide-active .circlelist .arrow.c21 {
  animation-delay: 1.9s;
}

.swiper-slide-active .circlelist .circle.c22,
.swiper-slide-active .circlelist .arrow.c22 {
  animation-delay: 1.92s;
}

.swiper-slide-active .circlelist .circle.c23,
.swiper-slide-active .circlelist .arrow.c23 {
  animation-delay: 1.94s;
}

.swiper-slide-active .circlelist .circle.c24,
.swiper-slide-active .circlelist .arrow.c24 {
  animation-delay: 1.96s;
}

.swiper-slide-active .circlelist .circle.c25,
.swiper-slide-active .circlelist .arrow.c25 {
  animation-delay: 1.98s;
}

.swiper-slide-active .circlelist .circle.c26,
.swiper-slide-active .circlelist .arrow.c26 {
  animation-delay: 2.0s;
}

.swiper-slide-active .circlelist .circle.c27,
.swiper-slide-active .circlelist .arrow.c27 {
  animation-delay: 2.02s;
}

.swiper-slide-active .circlelist .circle.c28,
.swiper-slide-active .circlelist .arrow.c28 {
  animation-delay: 2.04s;
}

.swiper-slide-active .circlelist .circle.c29,
.swiper-slide-active .circlelist .arrow.c29 {
  animation-delay: 2.06s;
}

.swiper-slide-active .circlelist .circle.c30,
.swiper-slide-active .circlelist .arrow.c30 {
  animation-delay: 2.08s;
}

.swiper-slide-active .circlelist .circle.c31,
.swiper-slide-active .circlelist .arrow.c31 {
  animation-delay: 2.1s;
}

.swiper-slide-active .circlelist .circle.c32,
.swiper-slide-active .circlelist .arrow.c32 {
  animation-delay: 2.12s;
}

.swiper-slide-active .circlelist .circle.c33,
.swiper-slide-active .circlelist .arrow.c33 {
  animation-delay: 2.14s;
}

.swiper-slide-active .circlelist .circle.c34,
.swiper-slide-active .circlelist .arrow.c34 {
  animation-delay: 2.16s;
}

.swiper-slide-active .circlelist .circle.c35,
.swiper-slide-active .circlelist .arrow.c35 {
  animation-delay: 2.18s;
}

.swiper-slide-active .circlelist .circle.c36,
.swiper-slide-active .circlelist .arrow.c36 {
  animation-delay: 2.2s;
}

.swiper-slide-active .circlelist .circle.c37,
.swiper-slide-active .circlelist .arrow.c37 {
  animation-delay: 2.22s;
}

.swiper-slide-active .circlelist .circle.c38,
.swiper-slide-active .circlelist .arrow.c38 {
  animation-delay: 2.24s;
}

.swiper-slide-active .circlelist .circle.c39,
.swiper-slide-active .circlelist .arrow.c39 {
  animation-delay: 2.26s;
}

.swiper-slide-active .circlelist .circle.c40,
.swiper-slide-active .circlelist .arrow.c40 {
  animation-delay: 2.28s;
}

.swiper-slide-active .circlelist .circle.c41,
.swiper-slide-active .circlelist .arrow.c41 {
  animation-delay: 2.3s;
}

.swiper-slide-active .circlelist .circle.c42,
.swiper-slide-active .circlelist .arrow.c42 {
  animation-delay: 2.32s;
}

.swiper-slide-active .circlelist .circle.c43,
.swiper-slide-active .circlelist .arrow.c43 {
  animation-delay: 2.34s;
}

.swiper-slide-active .circlelist .circle.c44,
.swiper-slide-active .circlelist .arrow.c44 {
  animation-delay: 2.36s;
}

.swiper-slide-active .circlelist .circle.c45,
.swiper-slide-active .circlelist .arrow.c45 {
  animation-delay: 2.38s;
}

.swiper-slide-active .circlelist .circle.c46,
.swiper-slide-active .circlelist .arrow.c46 {
  animation-delay: 2.4s;
}

.swiper-slide-active .circlelist .circle.c47,
.swiper-slide-active .circlelist .arrow.c47 {
  animation-delay: 2.42s;
}

.swiper-slide-active .circlelist .circle.c48,
.swiper-slide-active .circlelist .arrow.c48 {
  animation-delay: 2.44s;
}

.swiper-slide-active .circlelist .circle.c49,
.swiper-slide-active .circlelist .arrow.c49 {
  animation-delay: 2.46s;
}

.swiper-slide-active .circlelist .circle.c50,
.swiper-slide-active .circlelist .arrow.c50 {
  animation-delay: 2.48s;
}

.swiper-slide-active .circlelist .circle.c51,
.swiper-slide-active .circlelist .arrow.c51 {
  animation-delay: 2.5s;
}

.swiper-slide-active .circlelist .circle.c52,
.swiper-slide-active .circlelist .arrow.c52 {
  animation-delay: 2.52s;
}

.swiper-slide-active .circlelist .circle.c53,
.swiper-slide-active .circlelist .arrow.c53 {
  animation-delay: 2.54s;
}

.swiper-slide-active .circlelist .circle.c54,
.swiper-slide-active .circlelist .arrow.c54 {
  animation-delay: 2.56s;
}

.swiper-slide-active .circlelist .circle.c55,
.swiper-slide-active .circlelist .arrow.c55 {
  animation-delay: 2.58s;
}

.swiper-slide-active .circlelist .circle.c56,
.swiper-slide-active .circlelist .arrow.c56 {
  animation-delay: 2.6s;
}

.swiper-slide-active .circlelist .circle.c57,
.swiper-slide-active .circlelist .arrow.c57 {
  animation-delay: 2.62s;
}

.swiper-slide-active .circlelist .circle.c58,
.swiper-slide-active .circlelist .arrow.c58 {
  animation-delay: 2.64s;
}

.swiper-slide-active .circlelist .circle.c59,
.swiper-slide-active .circlelist .arrow.c59 {
  animation-delay: 2.66s;
}

.swiper-slide-active .circlelist .circle.c60,
.swiper-slide-active .circlelist .arrow.c60 {
  animation-delay: 2.68s;
}

.swiper-slide-active .circlelist .circle.c61,
.swiper-slide-active .circlelist .arrow.c61 {
  animation-delay: 2.7s;
}

.swiper-slide-active .circlelist .circle.c62,
.swiper-slide-active .circlelist .arrow.c62 {
  animation-delay: 2.72s;
}

.swiper-slide-active .circlelist .circle.c63,
.swiper-slide-active .circlelist .arrow.c63 {
  animation-delay: 2.74s;
}

.swiper-slide-active .circlelist .circle.c64,
.swiper-slide-active .circlelist .arrow.c64 {
  animation-delay: 2.76s;
}

.swiper-slide-active .circlelist .circle.c65,
.swiper-slide-active .circlelist .arrow.c65 {
  animation-delay: 2.78s;
}

.swiper-slide-active .circlelist .circle.c66,
.swiper-slide-active .circlelist .arrow.c66 {
  animation-delay: 2.8s;
}

.swiper-slide-active .circlelist .circle.c67,
.swiper-slide-active .circlelist .arrow.c67 {
  animation-delay: 2.82s;
}

.swiper-slide-active .circlelist .circle.c68,
.swiper-slide-active .circlelist .arrow.c68 {
  animation-delay: 2.84s;
}

.swiper-slide-active .circlelist .circle.c69,
.swiper-slide-active .circlelist .arrow.c69 {
  animation-delay: 2.86s;
}

.swiper-slide-active .circlelist .circle.c70,
.swiper-slide-active .circlelist .arrow.c70 {
  animation-delay: 2.88s;
}

.swiper-slide-active .circlelist .circle.c71,
.swiper-slide-active .circlelist .arrow.c71 {
  animation-delay: 2.9s;
}

.swiper-slide-active .circlelist .circle.c72,
.swiper-slide-active .circlelist .arrow.c72 {
  animation-delay: 2.92s;
}

.swiper-slide-active .circlelist .circle.c73,
.swiper-slide-active .circlelist .arrow.c73 {
  animation-delay: 2.94s;
}

.swiper-slide-active .circlelist .circle.c74,
.swiper-slide-active .circlelist .arrow.c74 {
  animation-delay: 2.96s;
}

.swiper-slide-active .circlelist .circle.c75,
.swiper-slide-active .circlelist .arrow.c75 {
  animation-delay: 2.98s;
}

.swiper-slide-active .circlelist .circle.c76,
.swiper-slide-active .circlelist .arrow.c76 {
  animation-delay: 3.0s;
}

.swiper-slide-active .circlelist .circle.c77,
.swiper-slide-active .circlelist .arrow.c77 {
  animation-delay: 3.02s;
}

.swiper-slide-active .circlelist .circle.c78,
.swiper-slide-active .circlelist .arrow.c78 {
  animation-delay: 3.04s;
}

.swiper-slide-active .circlelist .circle.c79,
.swiper-slide-active .circlelist .arrow.c79 {
  animation-delay: 3.06s;
}

.swiper-slide-active .circlelist .circle.c80,
.swiper-slide-active .circlelist .arrow.c80 {
  animation-delay: 3.08s;
}

.swiper-slide-active .circlelist .circle.c81,
.swiper-slide-active .circlelist .arrow.c81 {
  animation-delay: 3.1s;
}

.swiper-slide-active .circlelist .circle.c82,
.swiper-slide-active .circlelist .arrow.c82 {
  animation-delay: 3.12s;
}

.swiper-slide-active .circlelist .circle.c83,
.swiper-slide-active .circlelist .arrow.c83 {
  animation-delay: 3.14s;
}

.swiper-slide-active .circlelist .circle.c84,
.swiper-slide-active .circlelist .arrow.c84 {
  animation-delay: 3.16s;
}

.swiper-slide-active .circlelist .circle.c85,
.swiper-slide-active .circlelist .arrow.c85 {
  animation-delay: 3.18s;
}

.swiper-slide-active .circlelist .circle.c86,
.swiper-slide-active .circlelist .arrow.c86 {
  animation-delay: 3.2s;
}

.swiper-slide-active .circlelist .circle.c87,
.swiper-slide-active .circlelist .arrow.c87 {
  animation-delay: 3.22s;
}

.swiper-slide-active .circlelist .circle.c88,
.swiper-slide-active .circlelist .arrow.c88 {
  animation-delay: 3.24s;
}

.swiper-slide-active .circlelist .circle.c89,
.swiper-slide-active .circlelist .arrow.c89 {
  animation-delay: 3.26s;
}

.swiper-slide-active .circlelist .circle.c90,
.swiper-slide-active .circlelist .arrow.c90 {
  animation-delay: 3.28s;
}

.swiper-slide-active .circlelist .circle.c91,
.swiper-slide-active .circlelist .arrow.c91 {
  animation-delay: 3.3s;
}

.swiper-slide-active .circlelist .circle.c92,
.swiper-slide-active .circlelist .arrow.c92 {
  animation-delay: 3.32s;
}

.swiper-slide-active .circlelist .circle.c93,
.swiper-slide-active .circlelist .arrow.c93 {
  animation-delay: 3.34s;
}

.swiper-slide-active .circlelist .circle.c94,
.swiper-slide-active .circlelist .arrow.c94 {
  animation-delay: 3.36s;
}

.swiper-slide-active .circlelist .circle.c95,
.swiper-slide-active .circlelist .arrow.c95 {
  animation-delay: 3.38s;
}

.swiper-slide-active .circlelist .circle.c96,
.swiper-slide-active .circlelist .arrow.c96 {
  animation-delay: 3.4s;
}

.swiper-slide-active .circlelist .circle.c97,
.swiper-slide-active .circlelist .arrow.c97 {
  animation-delay: 3.42s;
}

.swiper-slide-active .circlelist .circle.c98,
.swiper-slide-active .circlelist .arrow.c98 {
  animation-delay: 3.44s;
}

.swiper-slide-active .circlelist .circle.c99,
.swiper-slide-active .circlelist .arrow.c99 {
  animation-delay: 3.46s;
}

.swiper-slide-active .circlelist .circle.c100,
.swiper-slide-active .circlelist .arrow.c100 {
  animation-delay: 3.48s;
}

.swiper-slide-active .circlelist .circle.c101,
.swiper-slide-active .circlelist .arrow.c101 {
  animation-delay: 3.5s;
}

.swiper-slide-active .circlelist .circle.c102,
.swiper-slide-active .circlelist .arrow.c102 {
  animation-delay: 3.52s;
}

.swiper-slide-active .circlelist .circle.c103,
.swiper-slide-active .circlelist .arrow.c103 {
  animation-delay: 3.54s;
}

.swiper-slide-active .circlelist .circle.c104,
.swiper-slide-active .circlelist .arrow.c104 {
  animation-delay: 3.56s;
}

.swiper-slide-active .circlelist .circle.c105,
.swiper-slide-active .circlelist .arrow.c105 {
  animation-delay: 3.58s;
}

.swiper-slide-active .circlelist .circle.c106,
.swiper-slide-active .circlelist .arrow.c106 {
  animation-delay: 3.6s;
}

.swiper-slide-active .circlelist .circle.c107,
.swiper-slide-active .circlelist .arrow.c107 {
  animation-delay: 3.62s;
}

.swiper-slide-active .circlelist .circle.c108,
.swiper-slide-active .circlelist .arrow.c108 {
  animation-delay: 3.64s;
}

.swiper-slide-active .circlelist .circle.c109,
.swiper-slide-active .circlelist .arrow.c109 {
  animation-delay: 3.66s;
}

.swiper-slide-active .circlelist .circle.c110,
.swiper-slide-active .circlelist .arrow.c110 {
  animation-delay: 3.68s;
}

.swiper-slide-active .circlelist .circle.c111,
.swiper-slide-active .circlelist .arrow.c111 {
  animation-delay: 3.7s;
}

.swiper-slide-active .circlelist .circle.c112,
.swiper-slide-active .circlelist .arrow.c112 {
  animation-delay: 3.72s;
}

.swiper-slide-active .circlelist .circle.c113,
.swiper-slide-active .circlelist .arrow.c113 {
  animation-delay: 3.74s;
}

.swiper-slide-active .circlelist .circle.c114,
.swiper-slide-active .circlelist .arrow.c114 {
  animation-delay: 3.76s;
}

.swiper-slide-active .circlelist .circle.c115,
.swiper-slide-active .circlelist .arrow.c115 {
  animation-delay: 3.78s;
}

.swiper-slide-active .circlelist .circle.c116,
.swiper-slide-active .circlelist .arrow.c116 {
  animation-delay: 3.8s;
}

.swiper-slide-active .circlelist .circle.c117,
.swiper-slide-active .circlelist .arrow.c117 {
  animation-delay: 3.82s;
}

.swiper-slide-active .circlelist .circle.c118,
.swiper-slide-active .circlelist .arrow.c118 {
  animation-delay: 3.84s;
}

.swiper-slide-active .circlelist .circle.c119,
.swiper-slide-active .circlelist .arrow.c119 {
  animation-delay: 3.86s;
}

.swiper-slide-active .circlelist .circle.c120,
.swiper-slide-active .circlelist .arrow.c120 {
  animation-delay: 3.88s;
}

.swiper-slide-active .circlelist .circle.c121,
.swiper-slide-active .circlelist .arrow.c121 {
  animation-delay: 3.9s;
}

.swiper-slide-active .circlelist .circle.c122,
.swiper-slide-active .circlelist .arrow.c122 {
  animation-delay: 3.92s;
}

.swiper-slide-active .circlelist .circle.c123,
.swiper-slide-active .circlelist .arrow.c123 {
  animation-delay: 3.94s;
}

.swiper-slide-active .circlelist .circle.c124,
.swiper-slide-active .circlelist .arrow.c124 {
  animation-delay: 3.96s;
}

.swiper-slide-active .circlelist .circle.c125,
.swiper-slide-active .circlelist .arrow.c125 {
  animation-delay: 3.98s;
}

.swiper-slide-active .circlelist .circle.c126,
.swiper-slide-active .circlelist .arrow.c126 {
  animation-delay: 4s;
}

.swiper-slide-active .circlelist .circle.c127,
.swiper-slide-active .circlelist .arrow.c127 {
  animation-delay: 4.02s;
}

.swiper-slide-active .circlelist .circle.c128,
.swiper-slide-active .circlelist .arrow.c128 {
  animation-delay: 4.04s;
}

.swiper-slide-active .circlelist .circle.c129,
.swiper-slide-active .circlelist .arrow.c129 {
  animation-delay: 4.06s;
}

.swiper-slide-active .circlelist .circle.c130,
.swiper-slide-active .circlelist .arrow.c130 {
  animation-delay: 4.08s;
}

.swiper-slide-active .circlelist .circle.c131,
.swiper-slide-active .circlelist .arrow.c131 {
  animation-delay: 4.1s;
}

.swiper-slide-active .circlelist .circle.c132,
.swiper-slide-active .circlelist .arrow.c132 {
  animation-delay: 4.12s;
}

.swiper-slide-active .circlelist .circle.c133,
.swiper-slide-active .circlelist .arrow.c133 {
  animation-delay: 4.14s;
}

.swiper-slide-active .circlelist .circle.c134,
.swiper-slide-active .circlelist .arrow.c134 {
  animation-delay: 4.16s;
}

.swiper-slide-active .circlelist .circle.c135,
.swiper-slide-active .circlelist .arrow.c135 {
  animation-delay: 4.18s;
}

.swiper-slide-active .circlelist .circle.c136,
.swiper-slide-active .circlelist .arrow.c136 {
  animation-delay: 4.2s;
}

.swiper-slide-active .circlelist .circle.c137,
.swiper-slide-active .circlelist .arrow.c137 {
  animation-delay: 4.22s;
}

.swiper-slide-active .circlelist .circle.c138,
.swiper-slide-active .circlelist .arrow.c138 {
  animation-delay: 4.24s;
}

.swiper-slide-active .circlelist .circle.c139,
.swiper-slide-active .circlelist .arrow.c139 {
  animation-delay: 4.26s;
}

.swiper-slide-active .circlelist .circle.c140,
.swiper-slide-active .circlelist .arrow.c140 {
  animation-delay: 4.28s;
}

.swiper-slide-active .circlelist .circle.c141,
.swiper-slide-active .circlelist .arrow.c141 {
  animation-delay: 4.3s;
}

.swiper-slide-active .circlelist .circle.c142,
.swiper-slide-active .circlelist .arrow.c142 {
  animation-delay: 4.32s;
}

.swiper-slide-active .circlelist .circle.c143,
.swiper-slide-active .circlelist .arrow.c143 {
  animation-delay: 4.34s;
}

.swiper-slide-active .circlelist .circle.c144,
.swiper-slide-active .circlelist .arrow.c144 {
  animation-delay: 4.36s;
}

.swiper-slide-active .circlelist .circle.c145,
.swiper-slide-active .circlelist .arrow.c145 {
  animation-delay: 4.38s;
}

.swiper-slide-active .circlelist .circle.c146,
.swiper-slide-active .circlelist .arrow.c146 {
  animation-delay: 4.4s;
}

.swiper-slide-active .circlelist .circle.c147,
.swiper-slide-active .circlelist .arrow.c147 {
  animation-delay: 4.42s;
}

.swiper-slide-active .circlelist .circle.c148,
.swiper-slide-active .circlelist .arrow.c148 {
  animation-delay: 4.44s;
}

.swiper-slide-active .circlelist .circle.c149,
.swiper-slide-active .circlelist .arrow.c149 {
  animation-delay: 4.46s;
}

.swiper-slide-active .circlelist .circle.c150,
.swiper-slide-active .circlelist .arrow.c150 {
  animation-delay: 4.48s;
}

.swiper-slide-active .circlelist .circle.c151,
.swiper-slide-active .circlelist .arrow.c151 {
  animation-delay: 4.5s;
}

.swiper-slide-active .circlelist .circle.c152,
.swiper-slide-active .circlelist .arrow.c152 {
  animation-delay: 4.52s;
}

.swiper-slide-active .circlelist .circle.c153,
.swiper-slide-active .circlelist .arrow.c153 {
  animation-delay: 4.54s;
}

.swiper-slide-active .circlelist .circle.c154,
.swiper-slide-active .circlelist .arrow.c154 {
  animation-delay: 4.56s;
}

.swiper-slide-active .circlelist .circle.c155,
.swiper-slide-active .circlelist .arrow.c155 {
  animation-delay: 4.58s;
}

.swiper-slide-active .circlelist .circle.c156,
.swiper-slide-active .circlelist .arrow.c156 {
  animation-delay: 4.6s;
}

.swiper-slide-active .circlelist .circle.c157,
.swiper-slide-active .circlelist .arrow.c157 {
  animation-delay: 4.62s;
}

.swiper-slide-active .circlelist .circle.c158,
.swiper-slide-active .circlelist .arrow.c158 {
  animation-delay: 4.64s;
}

.swiper-slide-active .circlelist .circle.c159,
.swiper-slide-active .circlelist .arrow.c159 {
  animation-delay: 4.68s;
}

.swiper-slide-active .circlelist .circle.c160,
.swiper-slide-active .circlelist .arrow.c160 {
  animation-delay: 4.7s;
}

.swiper-slide-active .circlelist_top {
  position: absolute;
  left: 493px;
  top: 566px;
}

.swiper-slide-active .circlelist_top .circle {
  animation-name: circle_green;
  background-color: #D9D9D9;
}

.swiper-slide-active .circlelist_top p {
  margin: 0;
}

.swiper-slide-active .circlelist_top .arrow {
  animation-name: arrow_green;
  animation-duration: 0.5s;
  transform-origin: left center;
  margin: -12px 0 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 0 17px 30px;
  border-color: transparent transparent transparent #D9D9D9;
}

.swiper-slide-active .circlelist_top_vertical {
  position: absolute;
}

.swiper-slide-active .circlelist_top_vertical.line1 {
  left: 493px;
  top: 494px;
}

.swiper-slide-active .circlelist_top_vertical.line2 {
  left: 949px;
  top: 490px;
}

.swiper-slide-active .circlelist_top_vertical .circle {
  width: 8px;
  height: 12px;
  animation-name: circle_green;
  background-color: #D9D9D9;
}

.swiper-slide-active .circlelist_top_vertical p {
  margin: 0;
}

.swiper-slide-active .circlelist_bottom {
  position: absolute;
  left: 493px;
  top: 621px;
}

.swiper-slide-active .circlelist_bottom .circle {
  width: 12px;
  height: 8px;
  animation-duration: 0.3s;
  transform-origin: center;
  animation-name: circle_blue;
  background-color: #D9D9D9;
}

.swiper-slide-active .circlelist_bottom .arrow {
  animation-name: arrow_blue;
  animation-duration: 0.5s;
  transform-origin: left center;
  margin: -12px 0 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 0 17px 30px;
  border-color: transparent transparent transparent #D9D9D9;
}

.swiper-slide-active .circlelist_bottom p {
  margin: 0;
}

.swiper-slide-active .circlelist_bottom_vertical {
  position: absolute;
  left: 493px;
  top: 629px;
}

.swiper-slide-active .circlelist_bottom_vertical .circle {
  width: 8px;
  height: 12px;
  animation-name: circle_blue;
  background-color: #D9D9D9;
}

.swiper-slide-active .circlelist_bottom_vertical p {
  margin: 0;
}

/* ==============================
円アニメーション　緑 キーフレーム
============================== */
@keyframes circle_green {
  0% {
    background-color: #DEDEDE;
  }
  4% {
    background-color: #DEE1DF;
  }
  8% {
    background-color: #D4DFD8;
  }
  12% {
    background-color: #C4D9CB;
  }
  16% {
    background-color: #ADD0BA;
  }
  20% {
    background-color: #8FC5A1;
  }
  24% {
    background-color: #71B786;
  }
  28% {
    background-color: #4FA25D;
  }
  32% {
    background-color: #009744;
  }
  72% {
    background-color: #4FA25D;
  }
  76% {
    background-color: #71B786;
  }
  80% {
    background-color: #8FC5A1;
  }
  84% {
    background-color: #ADD0BA;
  }
  88% {
    background-color: #C4D9CB;
  }
  92% {
    background-color: #D4DFD8;
  }
  96% {
    background-color: #DEE1DF;
  }
  100% {
    background-color: #DEDEDE;
  }
}

/* ==============================
矢印アニメーション　緑 キーフレーム
============================== */
@keyframes arrow_green {
  0% {
    transform: scale(1.1);
    border-color: transparent transparent transparent #DEDEDE;
  }
  4% {
    border-color: transparent transparent transparent #DEE1DF;
  }
  8% {
    border-color: transparent transparent transparent #D4DFD8;
  }
  12% {
    border-color: transparent transparent transparent #C4D9CB;
  }
  16% {
    border-color: transparent transparent transparent #ADD0BA;
  }
  20% {
    border-color: transparent transparent transparent #8FC5A1;
  }
  24% {
    transform: scale(1.2, 1.2);
    border-color: transparent transparent transparent #71B786;
  }
  28% {
    border-color: transparent transparent transparent #4FA25D;
  }
  32% {
    border-color: transparent transparent transparent #009744;
  }
  50% {
    transform: scale(1.4, 1.4);
  }
  72% {
    border-color: transparent transparent transparent #4FA25D;
  }
  76% {
    transform: scale(1.2, 1.2);
    border-color: transparent transparent transparent #71B786;
  }
  80% {
    border-color: transparent transparent transparent #8FC5A1;
  }
  84% {
    border-color: transparent transparent transparent #ADD0BA;
  }
  88% {
    border-color: transparent transparent transparent #C4D9CB;
  }
  92% {
    border-color: transparent transparent transparent #D4DFD8;
  }
  96% {
    border-color: transparent transparent transparent #DEE1DF;
  }
  100% {
    transform: scale(1.1);
    border-color: transparent transparent transparent #DEDEDE;
  }
}

/* ==============================
円アニメーション　青 キーフレーム
============================== */
@keyframes circle_blue {
  0% {
    background-color: #DEDEDE;
  }
  4% {
    background-color: #DCDEE1;
  }
  8% {
    background-color: #D1D8E1;
  }
  12% {
    background-color: #C1CCDE;
  }
  16% {
    background-color: #A6BBD9;
  }
  20% {
    background-color: #7CA2D1;
  }
  24% {
    background-color: #4886C7;
  }
  28% {
    background-color: #2465BC;
  }
  32% {
    background-color: #2160BA;
  }
  72% {
    background-color: #2465BC;
  }
  76% {
    background-color: #4886C7;
  }
  80% {
    background-color: #7CA2D1;
  }
  84% {
    background-color: #A6BBD9;
  }
  88% {
    background-color: #C1CCDE;
  }
  92% {
    background-color: #D1D8E1;
  }
  96% {
    background-color: #DCDEE1;
  }
  100% {
    background-color: #DEDEDE;
  }
}

/* ==============================
矢印アニメーション　青 キーフレーム
============================== */
@keyframes arrow_blue {
  0% {
    transform: scale(1.1);
    border-color: transparent transparent transparent #DEDEDE;
  }
  4% {
    border-color: transparent transparent transparent #DCDEE1;
  }
  8% {
    border-color: transparent transparent transparent #D1D8E1;
  }
  12% {
    border-color: transparent transparent transparent #C1CCDE;
  }
  16% {
    border-color: transparent transparent transparent #A6BBD9;
  }
  20% {
    border-color: transparent transparent transparent #7CA2D1;
  }
  24% {
    transform: scale(1.2, 1.2);
    border-color: transparent transparent transparent #4886C7;
  }
  28% {
    border-color: transparent transparent transparent #2465BC;
  }
  32% {
    border-color: transparent transparent transparent #2160BA;
  }
  50% {
    transform: scale(1.4, 1.4);
  }
  72% {
    border-color: transparent transparent transparent #2465BC;
  }
  76% {
    transform: scale(1.2, 1.2);
    border-color: transparent transparent transparent #4886C7;
  }
  80% {
    border-color: transparent transparent transparent #7CA2D1;
  }
  84% {
    border-color: transparent transparent transparent #A6BBD9;
  }
  88% {
    border-color: transparent transparent transparent #C1CCDE;
  }
  92% {
    border-color: transparent transparent transparent #D1D8E1;
  }
  96% {
    border-color: transparent transparent transparent #DCDEE1;
  }
  100% {
    transform: scale(1.1);
    border-color: transparent transparent transparent #DEDEDE;
  }
}

/* ==============================
	
　表示2

============================== */
.slide2 .catch {
  position: absolute;
  left: 311px;
  top: 75px;
  width: 1518px;
}

.slide2 .co2 {
  color: #007346;
  line-height: 1;
}

.slide2 .co2 .title {
  position: absolute;
  left: 122px;
  top: 372px;
}

.slide2 .co2 .value {
  position: absolute;
  left: -20px;
  top: 502px;
  width: 600px;
  text-align: center;
}

.slide2 .co2 .value span {
  font-size: 210px;
  font-weight: 600;
  display: inline-block;
}

.slide2 .co2 .value span + span {
  font-size: 150px;
}

.slide2 .co2 .value .icon_percent {
  margin: 0 0 0 10px;
  width: 63px;
  height: 58px;
  background: url(../img/percent_gr.svg) no-repeat;
}

.slide2 .carbon_offset {
  color: #0045A0;
  line-height: 1;
}

.slide2 .carbon_offset .title {
  position: absolute;
  left: 1370px;
  top: 372px;
}

.slide2 .carbon_offset .value {
  position: absolute;
  left: 1320px;
  top: 502px;
  width: 600px;
  text-align: center;
}

.slide2 .carbon_offset .value span {
  font-size: 210px;
  font-weight: 600;
  display: inline-block;
}

.slide2 .carbon_offset .value span + span {
  font-size: 150px;
}

.slide2 .carbon_offset .value .icon_percent {
  margin: 0 0 0 10px;
  width: 63px;
  height: 58px;
  background: url(../img/percent_bl.svg) no-repeat;
}

.slide2 .text {
  position: absolute;
  left: 1370px;
  top: 770px;
}

.slide2 .graph {
  width: 780px;
  height: 780px;
  position: absolute;
  left: 570px;
  top: 210px;
}

.slide2 .graph .circle_base {
  position: absolute;
  left: 6px;
  top: 10px;
  width: 768px;
  height: 768px;
  border-radius: 50%;
  border: 20px solid #ccc;
  z-index: 0;
}

.slide2 .graph #sushi_circle {
  position: relative;
  z-index: 1;
}

.slide2 .graph .title {
  z-index: 1000;
  position: absolute;
  left: 207px;
  top: 125px;
}

.slide2 .graph .zero {
  position: absolute;
  top: 300px;
  font-size: 420px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  z-index: 1000;
  width: 100%;
  color: #007346;
  margin-left: -0.13em;
}

.slide2 .graph .zero_count {
  position: absolute;
  top: 300px;
  font-size: 360px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  z-index: 1000;
  width: 100%;
  color: #007346;
  margin-left: -0.13em;
  letter-spacing: -0.05em;
}

.swiper-slide-active.slide2 .zero {
  animation-delay: 0.5s;
  animation-name: zero;
  animation-duration: 3s;
}

@keyframes zero {
  0% {
  }
  50% {
    transform: scale(1.2, 1.2) skew(2deg, 2deg);
  }
  100% {
  }
}

/* ==============================
	
　osによる調整

============================== */
.judgement {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 1000;
}

.win {
  /* Windows（全バージョン） */
}

.win .font_point {
  margin-top: -12px;
}

.win .font_point2 {
  margin-top: -20px;
}

.win .font_point3 {
  margin-top: -40px;
}

.win .judgement {
  background-color: #eee;
}

.mac {
  /* Mac OS */
}

.mac .judgement {
  background-color: #FFE5E5;
}

.linux {
  /* Linux（x11とlinux）*/
}

.linux .judgement {
  background-color: #E5F8FF;
}

.iphone {
  /* iPhone */
}

.ipad {
  /* iPad */
}

.android {
  /* Android */
}

.android .judgement {
  background-color: #B4D3C2;
}

.mobile {
  /* 全てのモバイルデバイス */
}