.show {
	display: block !important;
}
.result_type span,
.coffee_approach span,
.coffee_preference span,
.coffee_recommended > div,
.coffee_variation span,
.taste_matrix #imgContainer > div {
  display: none;
}

.result_type span.show {
	display: inline-block;
}
html {
  font-size: 62.5%;
  background: rgba(247, 240, 229, 1);
}
body {
  overflow-x: hidden;
}
body * {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
  color: #343231;
  font-feature-settings: "palt";
  
}
section {
  margin: 0 auto;
}
.sp {
  display: inline-block;
}
.pc {
  display: none;
}
.progress_bar {
  position: absolute;
  top: -62px;
  right: 21px;
  width: 123px;
  height: 123px;
  background-size: contain;
  background-repeat: no-repeat;
}
#q_01 .progress_bar {
  background-image: url(../img/progress_img01.png);
}
#q_02 .progress_bar {
  background-image: url(../img/progress_img02.png);
}
#q_03 .progress_bar {
  background-image: url(../img/progress_img03.png);
}
#q_04 .progress_bar {
  background-image: url(../img/progress_img04.png);
}
#q_05 .progress_bar {
  background-image: url(../img/progress_img05.png);
}
#q_06 .progress_bar,
.result .progress_bar {
  background-image: url(../img/progress_img06.png);
}
.result .progress_bar {
  top: -113px;
  right: -1px;
}

.progress_bar .circle-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #BFBFBF;
  font-weight: bold;
  font-size: 2rem;
}
.result .progress_bar .circle-inner {
  color: #E58707;
  font-size: 1.5rem;
}
.container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 61px 16px 0;
}
.container > div {
  background-position: top -100px left -100px;
  background-size: 115.94%;
  background-repeat: no-repeat;
}
.container ~ div:not(.fit) .img_wrapper {
  display: none;
}
.img_wrapper {
  max-width: 751px;
  position: absolute;
  width: 67.63vw;
  top: -6.28vw;
  left: -6.28vw;
}
#answer .img_wrapper {
  width: 108.45vw;
  top: -15.46vw;
  left: 50%;
  transform: translateX(-50%);
}
.ans_window {
  position: relative;
}
#q_01 .progress_bar .circle::after {
  transform: rotate(51.42857142857143deg);
}
#q_02 .progress_bar .circle::after {
  transform: rotate(102.8571428571429deg);
}
#q_03 .progress_bar .circle::after {
  transform: rotate(154.2857142857143deg);
}
#q_04 .progress_bar .circle::after {
  transform: rotate(25.7142857142857deg);
}
#q_04 .progress_bar .circle::before {
  transform: rotate(180deg);
}

.choose_box {
  position: relative;
  width: 100%;
}
.enter_window {
  max-width: 386px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(70.5vh - 60px) auto 2vh;
  background-color: #F4F4F7;
  border-radius: 20px;
  box-shadow: 0 0 20px rgb(0 0 0 / 7%);
  padding: 36px 29px 36px 25px;
}
.header_logo {
  position: absolute;
  top: 24px;
  left: 16px;
  z-index: 1;
}
.enter_window .header_logo {
  position: absolute;
  top: 33px;
  left: 50%;
  transform: translateX(-50%);
}
.ques_window {
  height: calc(100vh - 125px);
  margin: 90px auto 54px;
  background-color: #F4F4F7;
  border-radius: 20px;
  box-shadow: 0 0 20px rgb(0 0 0 / 7%);
  padding: 37px 20px 48px;
  position: relative;
}

.choose_box ul.check_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 17px;
  justify-content: center;
}
.choose_box .check_wrap {
  height: 246px;
}
.choose_box #q_04 ul {
  flex-wrap: wrap;
  flex-direction: row;
}
.choose_box #q_04 li {
  width: calc(50% - 16px);
}
.choose_box #q_04 li label {
  min-height: 57px;
}
.choose_box li {
  list-style: none;
  
}
.choose_box li.list {
  margin: 10px 8px;
}
.ques_num {
  display: inline-block;
  color: rgba(134, 129, 126, 1);
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 5px;
}
.question_sholder {
  font-weight: bold;
  margin-bottom: 14px;
  font-size: 1.6rem;
  line-height: 1.5;
}
.question_sholder .message {
  display: block;
  color: #E58707;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.714285714285714;
}
h2 {
  font-size: 1.6rem;
  line-height: 1.333333333333333;
  font-weight: bold;
}

.choose_box .btn {
  display: flex;
  max-width: 332px;
  min-height: 50px;
  justify-content: center;
  align-items: center;
  background-color: #F4F4F7;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.333333333333333;
  text-decoration: none;
  transition: .3s;
  box-shadow: -4px -4px 4px #fff, 4px 4px 4px #d4d4db;
  text-align: center;
  outline: solid transparent;
  margin: 0 auto;
  padding: 13px;
}

.choose_box .next_btn {
  width: 80px;
  height: 80px;
  margin: 24px auto 0;
  border-radius: 50%;
  pointer-events: none;
  color: #a9a9a9;
  position: absolute;
  left: 50%;
  margin-top: calc((100vh - 510px - 80px - 40px) / 2);
  transform: translateX(-50%);
}
.choose_box .next_btn.clicked {
  pointer-events: auto;
  color: initial;
}
.prev_btn {
  font-size: 1.6rem;
  font-weight: 600;
  position: absolute;
  left: 24px;
  color:#808080;
  margin-top: calc((100vh - 510px + 80px - 35px - 40px) / 2);
}
.prev_btn::before {
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.689%22%20height%3D%2213.169%22%20viewBox%3D%220%200%207.689%2013.169%22%3E%3Cpath%20d%3D%22M13.529%2C3.277%2C12.357%2C2.1%2C5.84%2C8.685l6.523%2C6.585%2C1.166-1.177L8.173%2C8.685Z%22%20transform%3D%22translate(-5.84%20-2.1)%22%20fill%3D%22gray%22%2F%3E%3C%2Fsvg%3E%0A');
  width: 8px;
  height: 13px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}

.check_wrap {
  width: 100%;
  display:inline-block;
  position: relative;
}
.check_wrap .checkbox {
  opacity: 0;
  position: absolute;
  left: 0;
}
.check_wrap .checkbox + label {
  display: flex;
  max-width: 332px;
  min-height: 62px;
  
  justify-content: center;
  align-items: center;
  background-color: #F4F4F7;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.6rem;
  text-decoration: none;
  transition: .3s;
  box-shadow: -4px -4px 4px #fff, 4px 4px 4px #d4d4db;
  text-align: center;
  margin: 0 auto;
  padding: 10px;
}
.check_wrap .checkbox:checked + label {
  background: rgba(237, 237, 242, 1);
  box-shadow: -4px -3px 6px rgba(255, 255, 255, 0.9) inset;
}
.check_wrap .checkbox:checked + label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_3%22%20data-name%3D%22%E3%83%91%E3%82%B9%203%22%20d%3D%22M13.672%2C6.464%2C8.4%2C11.736%2C5.528%2C8.872%2C4.4%2C10l4%2C4%2C6.4-6.4ZM10%2C2a8%2C8%2C0%2C1%2C0%2C8%2C8A8%2C8%2C0%2C0%2C0%2C10%2C2Zm0%2C14.4A6.4%2C6.4%2C0%2C1%2C1%2C16.4%2C10%2C6.4%2C6.4%2C0%2C0%2C1%2C10%2C16.4Z%22%20transform%3D%22translate(-2%20-2)%22%20fill%3D%22%23575656%22%2F%3E%3C%2Fsvg%3E%0A');
  margin-right: 4px;
  background-size: contain;
  background-repeat: no-repeat;
}
.check_wrap .checkbox:focus + label {
  box-shadow: 0 0 4px #af975e;
}
.enter_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.enter_wrapper .img_wrapper {
  width: 100%;
  max-width: initial;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
}
.enter_wrapper .img_wrapper img {
  height: 100vh;
  object-fit: cover;
  object-position: top center;
}
.enter_wrapper .btn {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  margin: 0;
}
.enter_text {
  color: #343231;
  font-size: 2rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.2;
}
#answer {
  margin: 55.5vw 0 0;
}
.result {
  background-color: #F4F4F7;
  border-radius: 16px;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, .07));
  padding: 52px 21px 46px;
}
#answer .result:first-of-type {
  margin-bottom: 15vw;
  box-shadow: none;
  border-radius: initial;
  filter: initial;
  padding: 27px 27px 0 27px;
}
#answer .ans_window {
  position: relative;
}
#answer .ans_window::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -8.95vw;
  border-top: 8.95vw solid #F4F4F7;
  border-right: 46vw solid transparent;
  border-left: 46vw solid transparent;
  border-radius: 16px;
  width: calc(100% + 77px);
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, .07));
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}


#answer .result:nth-of-type(2) {
  margin-top: 33px;
  padding-top: 29px;
  padding-bottom: 24px;
}
#answer .result:nth-of-type(3) {
  margin-top: 24px;
  margin-bottom: 80px;
  padding-top: 20px;
}
.result_theme p,
.result_discription p {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.714285714285714;
}
.result_theme p {
  margin-bottom: 9px;
}
.result_type h4 {
  margin-bottom: 25px;
}
.result_type h4 span {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.333333333333333;
}
.result_h3 {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.333333333333333;
  border-left: 7px solid #E58707;
  margin-top: 20px;
  margin-bottom: 18px;
  padding-left: 6px;
}
.result_discription span {
  font-size: 1.4rem;
  font-weight: bold;
}
.result_discription .coffee_variation {
  margin-top: 1em;
}
.coffee_recommended {
  margin-bottom: 21px;
}
.coffee_preference {
  margin-bottom: 25px;
}
.coffee_variation {
  margin-bottom: 23px;
}

.taste_matrix h3 {
  margin-bottom: 10px;
}
.recommended_item_wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  overflow: hidden;
}
.recommended_item {
  width: calc(50% - 20px);
  margin: 8px 10px;
  background: #fff;
  border-radius: 16px;
  position: relative;
  text-align: center;
  padding: 24px 0 45px;
}
.recommended_item img {
  width: 100%;
  max-width: 53.7%;
}
.recommended_item p {
  margin-top: 11px;
  margin-bottom: 19px;
  padding: 0 10px;
  font-weight: bold;
}
.recommended_item a {
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #F4F4F7;
  border-radius: 9px;
  padding: 7px 21px;
  box-shadow: -3px -3px 3px #fff, 3px 3px 3px #e2e2e8;
  position: absolute;
  bottom: 22px;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  width: 59.51%;
  min-width: 101px;
}

/* .taste_matrix .recommended_bright_fruity {
  background-image: url(../img/matrix_bright_fruity.png)
} */
.coffee_kind_drink span {
  display: inline-block;
  margin-bottom: 16px;
  line-height: 1.714285714285714;
  font-weight: bold;
}
.yoridori_banner {
  margin-top: 24px;
  margin-bottom: 25px;
}
.yoridori_banner p {
  line-height: 1.714285714285714;
  font-weight: bold;
  margin-bottom: 20px;
}
.return-btn {
  background-color: #F4F4F7;
  border-radius: 9px;
  box-shadow: 0 3px 0 rgb(0 0 0 / 16%);
  width: 100%;
  max-width: 329px;
  margin: 0 auto;
  text-align: center;
}
.return-btn a {
  width: 100%;
  font-size: 2rem;
  font-weight: bold;
  padding: 26px 10px;
  display: inline-block;
  background-color: #F4F4F7;
  box-shadow: -9px -9px 9px #fff, 9px 9px 9px #E2E2E8;
  border-radius: 9px;
}
.again-btn {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 37px;
  text-align: center;
}

/* matrix */
.matrix_wrapper {
  max-width: 626px;
  width: 100%;
  background-color: #fff;
  border-radius: 17px;
}
.matrix_outer {
  overflow: hidden;
  width: 100%;
  max-width: 626px;
  height: 488px;
  position: relative;
  border-top: 6px solid #fff;
  border-bottom: 6px solid #fff;
  border-left: 9px solid #fff;
  border-right: 9px solid #fff;
  border-radius: 14px;
}
.zoomableContainer {
  width: 960px !important;
  height: 392px !important;
  top: 0 !important;
}
.matrix_scrollwrapper {
  position: relative;
  background-color: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  border-top: 6px solid #fff;
  border-bottom: 6px solid #fff;
  border-left: 9px solid #fff;
  border-right: 9px solid #fff;
}
#matrix_wrapper {
  padding: 5px;
  margin: 0;
  border-style: dashed;
  border-radius: 10px;
  
  touch-action: auto !important;
}
#matrix_item {
  width: 100%;
  max-width: 626px;
  height: 560px;
  margin: 0;
  border-radius: 10px;
  font-size: 13px;
  touch-action: auto !important;
}
#imgContainer {
  padding: 28px 32px;
}
.imageFullScreen {
width: 672px !important;
height: 392px !important;
margin-top: 0 !important;
margin-bottom: 0;
}

.matrix_type > div {
font-size: 1.2rem;
background-color: #353638;
border-radius: 21px;
color: #fff;
font-weight: bold;
line-height: 2;
position: absolute;

}
.matrix_type .matrix_type_light {
top: 0;
left: 50%;
transform: translateX(-50%);
padding: 2px 16px;
}
.matrix_type .matrix_type_acidity {
top: 50%;
left: 0;
transform: translateY(-50%);
padding: 12px 8px;
}
.matrix_type .matrix_type_bitter {
top: 50%;
right: 0;
transform: translateY(-50%);
padding: 12px 8px;
}
.matrix_type .matrix_type_strong {
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding: 2px 16px;
}
.matrix_scrollwrapper + p {
  font-size: 1.4rem;
  line-height: 1.714285714285714;
  font-weight: bold;
  text-align: center;
  margin: 16px 0;
}
.matrix_scroll_inner {
  display: none;
	max-width: 278px;
	width: 100%;
	height: 392px;
  height: 268px;
	overflow-x: scroll;
	overflow-y: hidden;
	/* position: relative; */
  margin: 0 auto;
}
.matrix_scroll_inner img {
	/* position: absolute; */
  width: initial;
  height: 100%;
  max-width: initial;
	/* zoom: 0.8; */
	
}
/* .matrix_scroll_inner .matrix_bright_fruity {
	left: -3%;
}
.matrix_scroll_inner .matrix_mild_acidity {
	left: -8%;
}
.matrix_scroll_inner .matrix_regular {
	left: -28%;
}
.matrix_scroll_inner .matrix_tasty_balance {
	left: 37%;
}
.matrix_scroll_inner .matrix_roast_bitter {
	left: -80%;
}

.matrix_scroll_inner .matrix_deep_bitter {
	left: -90%;
} */
@media screen and (min-width: 780px) {
	.matrix_scroll_inner {
		max-width: 626px;
		height: 560px;
	}
	.matrix_scroll_inner img {
		zoom: 1;
	}
	/* .matrix_scroll_inner > div {
		zoom: 1;
	} */
	/* .matrix_scroll_inner .matrix_bright_fruity {
		left: -3%;
	}
	.matrix_scroll_inner .matrix_mild_acidity {
		left: -8%;
	}
	.matrix_scroll_inner .matrix_regular {
		left: -28%;
	}
	.matrix_scroll_inner .matrix_tasty_balance {
		left: 37%;
	}
	.matrix_scroll_inner .matrix_roast_bitter {
		left: -80%;
	}

	.matrix_scroll_inner .matrix_deep_bitter {
		left: -90%;
	} */
}

/* 診断中rotateCSS */
.during_test {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F7F0E5;
  
}
.during_test h2 {
  font-size: 4.8rem;
  margin-top: 99px;
  margin-left: 42px
}
h2 + .multi_select_annotation {
  font-size: 1.2rem;
  line-height: 2;
  color: #343231;
  font-weight: 500;
  text-align: center;
  margin: 4px 0 -12px;
}
.during_test .rotate_items_outer {
  width: 139vw;
}
.rotate_items_wrapper {
  background-image: url(../img/bg_during_test.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  top: -55px;
  right: -4px;
  padding-top: 123.42995169082126%;
}
.rotate_items {
  width: 100%;
  position: absolute;
  top: 50%;
  padding-top: 100%;
  overflow: hidden;
  transform: translateY(-50%);
}
.rotate_items::after {
	content: '';
	display: block;
	width: 85%;
	padding-top: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.rotate {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.rotate .rotate-ctn{
	position: relative;
  width: 80%;
  height: 80%;
	animation: 100s linear big-circle infinite;	/* 大枠を回転させているアニメーション */
  margin: 10%;
}
.rotate .box {
	position: absolute;
	width: 100px;
  height: 50%;
	transform-origin: 50% 100%;
}
/* 各コンテンツの文字を上向きにする */
.rotate .box.box-1 { left: 50%; transform: translate(-50%, 0);}
.rotate .box.box-2 { left: 50%; transform: translate(-50%, 0) rotate(30deg);}
.rotate .box.box-3 { left: 50%; transform: translate(-50%, 0) rotate(60deg);}
.rotate .box.box-4 { left: 50%; transform: translate(-50%, 0) rotate(90deg);}
.rotate .box.box-5 { left: 50%; transform: translate(-50%, 0) rotate(120deg);}
.rotate .box.box-6 { left: 50%; transform: translate(-50%, 0) rotate(150deg);}
.rotate .box.box-7 { left: 50%; transform: translate(-50%, 0) rotate(180deg);}
.rotate .box.box-8 { left: 50%; transform: translate(-50%, 0) rotate(210deg);}
.rotate .box.box-9 { left: 50%; transform: translate(-50%, 0) rotate(240deg);}
.rotate .box.box-10 { left: 50%; transform: translate(-50%, 0) rotate(270deg);}
.rotate .box.box-11 { left: 50%; transform: translate(-50%, 0) rotate(300deg);}
.rotate .box.box-12 { left: 50%; transform: translate(-50%, 0) rotate(330deg);}
.rotate .box .parts {
	position: relative;
	width: 67%;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
}
/* 各コンテンツを回転させるアニメーション */
.rotate .box.box-1 .parts { animation: 100.0s linear circle1 infinite;}
.rotate .box.box-2 .parts { animation: 100.0s linear circle2 infinite;}
.rotate .box.box-3 .parts { animation: 100.0s linear circle3 infinite;}
.rotate .box.box-4 .parts { animation: 100.0s linear circle4 infinite;}
.rotate .box.box-5 .parts { animation: 100.0s linear circle5 infinite;}
.rotate .box.box-6 .parts { animation: 100.0s linear circle6 infinite;}
.rotate .box.box-7 .parts { animation: 100.0s linear circle7 infinite;}
.rotate .box.box-8 .parts { animation: 100.0s linear circle8 infinite;}
.rotate .box.box-9 .parts { animation: 100.0s linear circle9 infinite;}
.rotate .box.box-10 .parts { animation: 100.0s linear circle10 infinite;}
.rotate .box.box-11 .parts { animation: 100.0s linear circle11 infinite;}
.rotate .box.box-12 .parts { animation: 100.0s linear circle12 infinite;}
@media screen and (min-width:415px) {
  .sp {
    display: none;
  }
  .pc {
    display: inline-block;
  }
  h2 {
    font-size: 2.4rem;
    line-height: 1.333333333333333;
  }
  .img_wrapper {
    max-width: 751px;
    top: -110px;
    left: -110px;
  }
  
  .enter_wrapper .btn {
    margin: 0 auto;
  }
  .question_sholder {
    font-size: 1.4rem;
    line-height: 1.714285714285714;
  }

  #answer .img_wrapper {
    top: -121px;
  }
  .result {
    padding: 27px 27px 46px 27px;
  }
  .during_test h2,
  .rotate_items_outer {
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
  }
  .during_test h2 {
    margin: 117px 42px;
  }
  .rotate_items_wrapper {
    position: relative;
    top: -250px;
  }
  .rotate {
    left: 49%;
    top: 49%;
  }
}
@media screen and (min-width:704px) {
  .enter_window {
    margin: calc(75vh - 61px) auto 0;
  }
  .choose_box .next_btn {
    position: static;
    left: initial;
    top: initial;
    bottom: 90px;
    transform: translateX(0%);
  }
  .choose_box ul.check_wrap {
    flex-direction: column;
  }
  .enter_text {
    font-size: 2rem;
  }
  .prev_btn {
    bottom: 30px;
  }
  #answer {
    margin: 0 28px;
  }
  .result {
    margin: 354px 0 100px;
  }
  
  #answer .result:first-of-type {
    margin-bottom: 100px;
  }
  .check_wrap .checkbox + label {
    font-size: 1.8rem;
  }
  .choose_box li.list {
    margin: 15px 8px;
  }
  .ques_window {
    height: initial;
    margin: 103px auto 0;
  }
  .rotate .box .parts {
    width: 80%;
  }
  .rotate .rotate-ctn {
    width: 72%;
    height: 72%;
    margin: 15%;
  }
  
}
@media screen and (min-width:780px) {
  
  .result {
    margin: 354px 0 0;
  }
  #answer .ans_window::after {
    bottom: -59px;
    border-top: 60px solid #F4F4F7;
    border-right: 343px solid transparent;
    border-left: 343px solid transparent;
  }
}
@media screen and (min-width:960px) {
  .img_wrapper {
    width: 54vw;
  }
  
  #answer .img_wrapper {
    top: -123px;
  }
}


@keyframes big-circle {
  0% { transform: rotate(0deg);}
  100% { transform:rotate(360deg);}
}
@keyframes circle1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(-360deg);}
}
@keyframes circle2 {
0% { transform: rotate(330deg);}
100% { transform: rotate(-30deg);}
}
@keyframes circle3 {
0% { transform: rotate(300deg);}
100% { transform: rotate(-60deg);}
}
@keyframes circle4 {
0% { transform: rotate(270deg);}
100% { transform: rotate(-90deg);}
}
@keyframes circle5 {
0% { transform: rotate(240deg);}
100% { transform: rotate(-120deg);}
}
@keyframes circle6 {
0% { transform: rotate(210deg);}
100% { transform: rotate(-150deg);}
}
@keyframes circle7 {
0% { transform: rotate(180deg);}
100% { transform: rotate(-180deg);}
}
@keyframes circle8 {
0% { transform: rotate(150deg);}
100% { transform: rotate(-210deg);}
}
@keyframes circle9 {
0% { transform: rotate(120deg);}
100% { transform: rotate(-240deg);}
}
@keyframes circle10 {
0% { transform: rotate(90deg);}
100% { transform: rotate(-270deg);}
}
@keyframes circle11 {
0% { transform: rotate(60deg);}
100% { transform: rotate(-300deg);}
}
@keyframes circle12 {
0% { transform: rotate(30deg);}
100% { transform: rotate(-330deg);}
}