@charset "UTF-8";

:root {
  --black: #2C2C2C;
  --brown: #4A3331;
  --white: #ffffff;
  --pink: #EA8085;
  --palepink: #fae5e6;
  --gray: #B5B5B5;
  --max-width: 390px;
}

html {
  font-size: clamp(0.1rem,calc(100vw * 11 / 390),11px);
  background-color: var(--palepink);
}
body {
  background: var(--white);
  color: var(--white);
  font-family: maru-maru-gothic-blr-stdn, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
body .wrapper .content {
  max-width: var(--max-width);
  margin-inline: auto;
  background-color: var(--pink);
  overflow: hidden;
}
@media (max-width: 1139px) {
  body .wrapper .content {
    margin-inline: auto;
  }
}
body > div {
  margin-inline: auto;
  background: var(--palepink);
}
* {
  box-sizing: border-box;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.swiper {
  overflow: visible;
}
.swiper-slide img {
  width: calc(258/11*1rem);
  height: auto;
  vertical-align: middle;
}
.swiper-wrapper .item_slide {
  width: calc(307/11*1rem);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
figure {
  margin: 0;
}
h1 {
  margin: 0;
}
h2 {
  margin: 0;
}
h3 {
  margin: 0;
}
p {
  font-size: clamp(0.1rem,calc(100vw * 11 / 390),11px);
  line-height: 1.9;
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  margin: 0;
  padding: 0;
}
.js-animation {
  opacity: 0;
}

/* ===============================================
# BUYボタン
=============================================== */
.buy-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  max-width: calc(82/11*1rem);
  transition: opacity 0.3s;
}
@media (any-hover: hover) {
  .buy-btn:hover {
    opacity: 0.9;
  }
}
.product-info-ph.ph01 .buy-btn {
  bottom: calc(5/11*1rem);
}
.product-info-ph.ph02 .buy-btn {
  bottom: calc(-5/11*1rem);
  right: calc(-15/11*1rem);
}


/* ===============================================
# header
=============================================== */
.header {
  min-width: 390px;
}
.header-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.header-text {
  position: absolute;
  top: calc(612/11*1rem);
  left: calc(24/11*1rem);
  width: calc(196/11*1rem);
}
.header-title {
  position: absolute;
  top: calc(18/11*1rem);
  left: calc(24/11*1rem);
}
.header-title h1 {
  width: calc(348/11*1rem);
}
.header-title h2 {
  width: calc(224/11*1rem);
  height: 30px;
}
.header-title h2 img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#h2_jp [id*=h2_jp_],
#h2_en [id*=h2_en_] {
  opacity: 0;
}
#h2_jp .cls-1,
#h2_en .cls-1 {
  fill: #fff;
}
#h2_jp .cls-2,
#h2_en .cls-2 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 1.84px;
}
.header-title h3 {
  display: flex;
  align-items: flex-end;
  width: calc(68/11*1rem);
  max-width: calc(68px*2);
  font-size: calc(10/11*1rem);
  margin-left: auto;
  margin-top: calc(-20/11*1rem);
  color: #fff;
}
.header-title h3 img {
  width: calc(53/11*1rem);
}
.header-inner .item_slide-wrapper {
  position: relative;
  margin-top: calc(140 / 11* 1rem);
  padding-bottom: calc(30 / 11* 1rem);
}
.header_copy {
  position: absolute;
  top: calc(121 / 11* 1rem);
  right: calc(15 / 11* 1rem);
  width: calc(127 / 11* 1rem);
  z-index: 10;
}
/* ===============================================
# headline
=============================================== */
.content-wrap {
  position: relative;
}
.headline {
  position: relative;
  top: calc(-78/11*1rem);
  margin-inline: calc(37 / 11* 1rem);
  margin-bottom: calc(-50 / 11* 1rem);
  text-align: center;
  z-index: 2;
}
.headline_copy {
  width: calc(196/11*1rem);
}
.headline_volume {
  margin-top: calc(6/11*1rem);
  width: calc(57/11*1rem);
}
.headline_text {
  margin-top: calc(20/11*1rem);
  font-weight: 300;
  font-size: clamp(0.1rem, calc(100vw* 13 / 390), 13px);
  line-height: calc(22/11);
  letter-spacing: -0.03em;
  text-align: left;
  width: fit-content;
  font-family: sweet-sans-pro, sans-serif;
}

/* ===============================================
# product
=============================================== */
section.product {
  position: relative;
  padding: calc(20/11*1rem) calc(10/11*1rem) calc(67/11*1rem);
  background-color: var(--pink);
  z-index: 0;
}
section#style7 {
  padding: calc(20 / 11* 1rem) calc(10 / 11* 1rem) 0;
}
.item_slide-inner {
  position: relative;
}
.product-head {
  position: absolute;
  top: 300px;
  left: 30px;
  z-index: 10;
  max-width: calc(25 / 11* 1rem);
}
.product-head-line {
  width: 100%;
  height: 1px;
  background-color: var(--brown);
}
.product-head-num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(38/11*1rem);
  height: calc(38/11*1rem);
  z-index: 0;
}
.product-head-num .num {
  width: auto;
  height: calc(15/11*1rem);
}
.product-head-num .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(38/11*1rem);
  z-index: -1;
  animation: rotation 15s linear infinite;
}  
.item_slide-wrapper {
  position: relative;
  margin-top: calc(10/11*1rem);
  padding-bottom: calc(25/11*1rem);
}
.swiper-slide.item_slide.swiper-slide-active img {
  scale: 1;
  transition-property: scale translateX;
  transition-duration: .7s;
  transition-delay: .2s;
  transition-timing-function: ease-out;
}
.swiper-slide.item_slide.swiper-slide-active.slide4 img ,
.swiper-slide.item_slide.swiper-slide-active.slide6 img {
  transform: translateX(20px);
  scale: 1;
  transition-property: scale translateX;
  transition-duration: .6s;
  transition-timing-function: ease-in-out linear;
}
.swiper-slide.item_slide.slide4 img,
.swiper-slide.item_slide.slide6 img {
  transform: translateX(20px);
  scale: .95;
  transition-property: scale translateX;
  transition-duration: .6s;
  transition-timing-function: ease-out linear;
}
.swiper-slide.item_slide img {
  scale: .95;
  transition-property: scale;
  transition-duration: 1.3s;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
}
.swiper-slide.item_slide.slide1 img {
  transform: translateX(20px);
  scale: 1;
  transition-property: scale translateX;
  transition-duration: 1.3s;
  transition-timing-function: ease ease;
}
.swiper-slide.item_slide.swiper-slide-duplicate.slide1 img {
  transform: translateX(20px);
  scale: .95;
  transition-property: scale translateX;
  transition-duration: 1.3s;
  transition-timing-function: ease ease;
}
.swiper-slide.item_slide.swiper-slide-duplicate.swiper-slide-active.slide1 img {
  scale: 1;
  transition-property: scale;
  transition-duration: .7s;
  transition-delay: .1s;
  transition-timing-function: linear;
}

/* swiper操作部 */
.swiper-option-box {
  position: relative;
  width: 100%;
  height: calc(15/11*1rem);
}
.swiper-option-box .swiper-pagination {
  top: 0;
  bottom: auto;
}
.swiper-option-box .swiper-pagination-bullet {
  width: calc(7/11*1rem);
  height: calc(7/11*1rem);
  background-color: var(--gray);
  opacity: 1;
}
.swiper-option-box .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: calc(9/11*1rem);
  height: calc(9/11*1rem);
  background-color: var(--white);
}
.swiper-option-box .swiper-button-prev,
.swiper-option-box .swiper-button-next {
  top: 54%;
  z-index: 11;
  /* pointer-events: none; */
}
.swiper-option-box .swiper-button-prev {
  left: calc(140/11*1rem);
}
.swiper-option-box .swiper-button-next {
  right: calc(140/11*1rem);
}
.swiper-option-box .swiper-button-prev:after,
.swiper-option-box .swiper-button-next:after {
  font-size: calc(12/11*1rem);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0.5px solid var(--white);
}

.item_slide-0 .swiper-slide.item_slide.slide1 img {
  rotate: -8deg;
}
.item_slide-0 .swiper-slide.item_slide.slide2 img {
  rotate: 6deg;
  transform: translateY(calc(-28/11*1rem));
}
.item_slide-0 .swiper-slide.item_slide.slide3 img {
  rotate: -8deg;
  transform: translateY(calc(-10/11*1rem));
}
.item_slide-0 .swiper-slide.item_slide.slide4 img {
  rotate: -9deg;
}
.item_slide-0 .swiper-slide.item_slide.slide5 img {
  rotate: 6deg;
  transform: translateY(calc(-28/11*1rem));
}
.item_slide-0 .swiper-slide.item_slide.slide6 img {
  rotate: -8deg;
}
.item_slide-0 .swiper-slide.item_slide.slide7 img {
  rotate: 6deg;
  transform: translateY(calc(-28/11*1rem));
}

.item_slide-1 .swiper-slide.item_slide.slide1 img {
  rotate: 7deg;
}
.item_slide-1 .swiper-slide.item_slide.slide2 img {
  rotate: 11deg;
  transform: translateY(calc(26/11*1rem));
}
.item_slide-1 .swiper-slide.item_slide.slide3 img {
  rotate: -6deg;
  transform: translateY(calc(35/11*1rem));
}

.item_slide-2 .swiper-slide.item_slide.slide1 img {
  rotate: -4deg;
}
.item_slide-2 .swiper-slide.item_slide.slide2 img {
  rotate: 11deg;
  transform: translateY(calc(-17/11*1rem));
}
.item_slide-2 .swiper-slide.item_slide.slide3 img {
  rotate: 8deg;
  transform: translateY(calc(-8/11*1rem));
}

.item_slide-3 .swiper-slide.item_slide.slide1 img {
  rotate: 6deg;
}
.item_slide-3 .swiper-slide.item_slide.slide2 img {
  rotate: 11deg;
  transform: translateY(calc(-13/11*1rem));
}
.item_slide-3 .swiper-slide.item_slide.slide3 img {
  rotate: -6deg;
  transform: translateY(calc(13/11*1rem));
}

.item_slide-4 .swiper-slide.item_slide.slide1 img {
  rotate: -4deg;
}
.item_slide-4 .swiper-slide.item_slide.slide2 img {
  rotate: 11deg;
  transform: translateY(calc(-17/11*1rem));
}
.item_slide-4 .swiper-slide.item_slide.slide3 img {
  rotate: 8deg;
  transform: translateY(calc(-7/11*1rem));
}

.item_slide-5 .swiper-slide.item_slide.slide1 img {
  rotate: 6deg;
}
.item_slide-5 .swiper-slide.item_slide.slide2 img {
  rotate: 11deg;
  transform: translateY(calc(-13/11*1rem));
}
.item_slide-5 .swiper-slide.item_slide.slide3 img {
  rotate: -6deg;
  transform: translateY(calc(13/11*1rem));
}

.item_slide-6 .swiper-slide.item_slide.slide1 img {
  rotate: -4deg;
}
.item_slide-6 .swiper-slide.item_slide.slide2 img {
  rotate: 11deg;
  transform: translateY(calc(-17/11*1rem));
}
.item_slide-6 .swiper-slide.item_slide.slide3 img {
  rotate: 8deg;
  transform: translateY(calc(-8/11*1rem));
}

.item_slide-7 .swiper-slide.item_slide.slide1 img {
  rotate: 6deg;
}
.item_slide-7 .swiper-slide.item_slide.slide2 img {
  rotate: 11deg;
  transform: translateY(calc(-13/11*1rem));
}
.item_slide-7 .swiper-slide.item_slide.slide3 img {
  rotate: -6deg;
  transform: translateY(calc(13/11*1rem));
}

.product-info {
  position: relative;
  max-width: calc(315 / 11* 1rem);
  margin-inline: auto;
  margin-top: calc(43 / 11* 1rem);
  margin-bottom: calc(30 / 11* 1rem);
  z-index: 2;
  /* ここで持たせる高さが画像によって異なる */
  padding-bottom: 235px;
}
#style1 .product-info {
  padding-bottom: 235px;
}
#style2 .product-info {
  padding-bottom: 235px;
}
#style3 .product-info {
  padding-bottom: 242px;
}
#style4 .product-info {
  padding-bottom: 260px;
}
#style5 .product-info {
  padding-bottom: 230px;
}
#style6 .product-info {
  padding-bottom: 230px;
}
#style7 .product-info {
  padding-bottom: 245px;
}
.product-info-title {
  font-size: calc(19/11*1rem);
  line-height: calc(25 / 19);
  text-align: left;
}
.product-info-inner {
  margin-top: calc(9 / 11* 1rem);
}
.product-info-text {
  /* font-family: "AP-OTF-A1GothicStd", sans-serif; */
  font-family: sweet-sans-pro, sans-serif;
  font-weight: lighter;
  text-align: justify;
  max-width: calc(145/11*1rem);
}
#style2 .product-info-text {
  max-width: calc(154 / 11* 1rem);
}
#style4 .product-info-text {
  max-width: calc(156 / 11* 1rem);
}
#style5 .product-info-text {
  max-width: calc(143 / 11* 1rem);
}

.product-info-ph-wrap {
  position: absolute;
  width: 100%;
}
#style1 .product-info-ph-wrap {
  padding-bottom: calc(494 / 11* 1rem); 
  top: calc(-18 / 11* 1rem);
  right: calc(-42 / 11* 1rem);
}
#style2 .product-info-ph-wrap {
  padding-bottom: calc(450 / 11* 1rem);
  width: calc(320 / 11* 1rem);
  top: calc(-10 / 11* 1rem);
  right: calc(-65 / 11* 1rem);
}
#style3 .product-info-ph-wrap {
  padding-bottom: calc(494 / 11* 1rem);
  width: calc(380 / 11* 1rem);
  top: calc(1 / 11* 1rem);
  right: calc(-60 / 11* 1rem);
}
#style4 .product-info-ph-wrap {
  padding-bottom: calc(448 / 11* 1rem);
  width: calc(415 / 11* 1rem);
  top: calc(-120 / 11* 1rem);
  right: calc(-120 / 11* 1rem);
}
#style5 .product-info-ph-wrap {
  padding-bottom: calc(494 / 11* 1rem);
  width: calc(329 / 11* 1rem);
  top: calc(30 / 11* 1rem);
  right: calc(-73 / 11* 1rem);
}
#style6 .product-info-ph-wrap {
  padding-bottom: calc(448 / 11* 1rem);
  width: calc(335 / 11* 1rem);
  top: calc(-35 / 11* 1rem);
  right: calc(-70 / 11* 1rem);
}
#style7 .product-info-ph-wrap {
  padding-bottom: calc(494 / 11* 1rem);
  width: calc(380 / 11* 1rem);
  top: calc(-95 / 11* 1rem);
  right: calc(-115 / 11* 1rem);
}
.product-info-ph {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.product-info-ph_deco {
  position: absolute;
}
.js-deco svg g[id*=deco_] {
  opacity: 0;
}
.product-info-ph_deco .st1 {
  fill: #fff;
}
.product-info-ph_deco .st2 {
  fill: none;
  stroke: #fff;
}
.product-info-ph_deco .cls-1 {
  isolation: isolate;
}
.product-info-ph_deco .cls-2 {
  fill: #fff;
}
.product-info-ph_deco .cls-3 {
  fill: none;
  stroke: #fff;
}
.product-info-ph_deco.ph01 {
  bottom: calc(55 / 11* 1rem);
  left: calc(0 / 11* 1rem);
  width: calc(170 / 11* 1rem);
}
.product-info-ph_deco.ph02 {
  bottom: calc(20 / 11* 1rem);
  left: calc(-35 / 11* 1rem);
  width: calc(223 / 11* 1rem);
}
.product-info-ph_deco.ph03 {
  bottom: calc(55 / 11* 1rem);
  left: calc(10 / 11* 1rem);
  width: calc(199 / 11* 1rem);
}
.product-info-ph_deco.ph04 {
  bottom: calc(-115 / 11* 1rem);
  left: calc(0 / 11* 1rem);
  width: calc(187 / 11* 1rem);
}
.product-info-ph_deco.ph05 {
  bottom: calc(120 / 11* 1rem);
  left: calc(-35 / 11* 1rem);
  width: calc(145 / 11* 1rem);
}
.product-info-ph_deco.ph06 {
  bottom: calc(5 / 11* 1rem);
  left: calc(-30 / 11* 1rem);
  width: calc(175 / 11* 1rem);
}
.product-info-ph_deco.ph07 {
  bottom: calc(-20 / 11* 1rem);
  left: calc(-55 / 11* 1rem);
  width: calc(161 / 11* 1rem);
}

.product-info-ph > img {
  position: absolute;
  top: 0;
  right: 0;
  max-width: none;
}
.loop-text-wrap {
  display: flex;
  align-items: center;
  overflow: auto;
  width: 110%;
  height: calc(15 / 11* 1rem);
  transform: translateX(-5%);
}
.loop-text-area {
  background: url(../img/text_slide.svg) repeat-x;
  background-size: calc(630 / 11* 1rem);
  width: 2000%;
  height: calc(15 / 11* 1rem);
  animation: loop-text-slide 100s infinite linear;
}

/* ===============================================
# store
=============================================== */
.store {
  position: relative;
  text-align: center;
  background-color: #fff;
  padding-top: calc(37/11*1rem);
}
.store img {
  width: calc(162/11*1rem);
  height: auto;
}

/* ===============================================
# footer
=============================================== */
footer {
  position: relative;
  padding: 5em 0 2.5em;
  background-color: #fff;
}
footer ul.sns {
  display:flex;
  justify-content: center;
  margin: 1em auto;
  list-style-type: none;
}
footer ul.sns li {
  width: 1.5em;
  margin: 1em;
}
footer ul.sns li a {
  display: block;
}
footer small {
  text-align:center;
  display: block;
}

/* ===============================================
# pc-contents
=============================================== */
.pc-contents {
  position: fixed;
  top: 0;
  left: 0;
  width: calc((100% - 390px) / 2);
  height: 100dvh;
  overflow: hidden;
}
@media (max-width: 1139px) {
  .pc-contents {
    display: none;
  }
}
.pc-contents::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100dvh;
  min-height: 1221px;
  background-color: var(--palepink);
}
.pc-contents-wrap {
  width: 100%;
  height: 100dvh;
  padding-top: calc(40/11*1rem);
  padding-bottom: calc(70/11*1rem);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  justify-content: flex-end;
}
.pc-contents-wrap::-webkit-scrollbar {
  display: none;
}
.pc-contents-inner {
  position: relative;
  max-width: 406px;
  margin-inline: 0 calc(240 / 11* 1rem);
  z-index: 1;
}
.pc-contents-logo {
  width: calc(242/11*1rem);
  margin-left: calc(30/11*1rem);
}
.pc-contents-tabio {
  display: flex;
  align-items: flex-end;
  width: calc(68/11*1rem);
  max-width: calc(68px*2);
  margin-left: calc(30/11*1rem);
  font-size: calc(10/11*1rem);
  margin-top: calc(15/11*1rem);
  color: var(--pink);
}
.pc-contents-ttl {
  width: calc(160 / 11* 1rem);
  margin-left: calc(30 / 11* 1rem);
  margin-top: calc(15 / 11* 1rem);
}
.pc-contents-images {
  position: relative;
  margin-top: calc(19/11*1rem);
  z-index: 0;
  margin-left: calc(30 / 11* 1rem);
}
.pc-contents-images-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-contents-images-item:nth-child(2n) + .pc-contents-images-item {
  margin-top: -15px;
  position: relative;
}
.pc-contents-images-item:nth-child(2n + 1) + .pc-contents-images-item {
  margin-left: calc(140 / 11* 1rem);
  margin-top: -55px;
  position: relative;
}
.pc-contents-images-item:nth-child(2n + 1) + .pc-contents-images-item::before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  background-image: url(../img/side_line.svg);
  background-repeat: no-repeat;
  width: 38px;
  height: 63px;
  top: 62px;
  left: -40px;
}
.style_ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.style_txt {
  mask-image: url(../img/style_txt.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--pink);
  display: inline-block;
  width: 7.5px;
  height: 53px;
}
.style_txt {
  display: inline-block;
  width:calc( 7.5/11*1rem);
}
.style_num {
  width: calc(17 / 11* 1rem);
  height: calc(17 / 11* 1rem);
}
.active .style_num img {
  display: none;
}
.active .style_num {
  border: none;
  background-repeat: no-repeat;
}
.w01.active .style_num {
  background-image: url(../img/style_num_1_a.svg);
}
.w02.active .style_num {
  background-image: url(../img/style_num_2_a.svg);
}
.w03.active .style_num {
  background-image: url(../img/style_num_3_a.svg);
}
.w04.active .style_num {
  background-image: url(../img/style_num_4_a.svg);
}
.w05.active .style_num {
  background-image: url(../img/style_num_5_a.svg);
}
.w06.active .style_num {
  background-image: url(../img/style_num_6_a.svg);
}
.w07.active .style_num {
  background-image: url(../img/style_num_7_a.svg);
}
.style_img {
  width: 90px;
  height: auto;
  position: relative;
}
.active .style_img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0px);
  background-color: var(--pink);
  z-index: -1;
  border-radius: 60px;
  padding: 2px;
  width: 90px;
  height: 126px;
}

/* ===============================================
# scroll
=============================================== */
/* .scroll {
  position: fixed;
  top: 0;
  right: 0;
  width: calc((100% - 390px) / 2);
  height: 100dvh;
  background-color: var(--white);
} */
.scroll {
  position: fixed;
  top: 0;
  right: 0;
  margin-right: calc((100% - 390px) / 2 - 163px);
  width: calc(163 / 11* 1rem);
  height: 100dvh;
  background-color: var(--palepink);
}
@media (max-width: 1139px) {
  .scroll {
    display: none;
  }
}
/* .scroll_inner {
  position: absolute;
  top: 50%;
  left: calc(83 / 11* 1rem);
  transform: translateY(-50%);
  margin: auto;
  width: calc(14 / 11* 1rem);
} */
.scroll_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  width: calc(14 / 11* 1rem);
}
.scroll_circle {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-block;
  width: calc(15/11*1rem);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--pink);
  transform: translateX(-50%);
}

/* ===============================================
# アニメーション
=============================================== */
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes catagoryPic {
	0%, 100% {
		transform: rotate(0)
	}
	50% {
		transform: rotate(5deg)
	}
}


@keyframes rattling1 {
  0% {
    -webkit-transform: translate(0, -2px) rotate(6deg);
    transform: translate(0, -2px) rotate(6deg)
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg)
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-6deg);
    transform: translate(0, 0) rotate(-6deg)
  }
  30% {
    -webkit-transform: translate(0, -2px) rotate(0deg);
    transform: translate(0, -2px) rotate(0deg)
  }
  40% {
    -webkit-transform: translate(0, -2px) rotate(-4deg);
    transform: translate(0, -2px) rotate(-4deg)
  }
  50% {
    -webkit-transform: translate(2px, 0) rotate(-2deg);
    transform: translate(2px, 0) rotate(-2deg)
  }
  60% {
    -webkit-transform: translate(0, 2px) rotate(0deg);
    transform: translate(0, 2px) rotate(0deg)
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(6deg);
    transform: translate(0, 0) rotate(6deg)
  }
  80% {
    -webkit-transform: translate(2px, 0) rotate(-2deg);
    transform: translate(2px, 0) rotate(-2deg)
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg)
  }
  100% {
    -webkit-transform: translate(0, -2px) rotate(6deg);
    transform: translate(0, -2px) rotate(6deg)
  }
}

@keyframes rattling2 {
  0% {
    transform: translate(1px, 1px) rotate(6deg)
  }
  10% {
    transform: translate(2px, -1px) rotate(0deg)
  }
  20% {
    transform: translate(1px, 0) rotate(-6deg)
  }
  30% {
    transform: translate(0, 0) rotate(0deg)
  }
  40% {
    transform: translate(2px, 0) rotate(6deg)
  }
  50% {
    transform: translate(0, -1px) rotate(-2deg)
  }
  60% {
    transform: translate(0, 0) rotate(0deg)
  }
  70% {
    transform: translate(1px, 0) rotate(2deg)
  }
  80% {
    transform: translate(1px, 3px) rotate(-2deg)
  }
  90% {
    transform: translate(1px, 0) rotate(1deg)
  }
  100% {
    transform: translate(0, 2px) rotate(-6deg)
  }
}

@keyframes rattling3 {
  0% {
    -webkit-transform: translate(0, 3px) rotate(4deg);
    transform: translate(0, 3px) rotate(4deg)
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg)
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(2deg);
    transform: translate(0, 0) rotate(2deg)
  }
  30% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
    transform: translate(0, 1px) rotate(0deg)
  }
  40% {
    -webkit-transform: translate(0, -2px) rotate(4deg);
    transform: translate(0, -2px) rotate(4deg)
  }
  50% {
    -webkit-transform: translate(2px, 0) rotate(2deg);
    transform: translate(2px, 0) rotate(2deg)
  }
  60% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg)
  }
  70% {
    -webkit-transform: translate(0, 2px) rotate(-4deg);
    transform: translate(0, 2px) rotate(-4deg)
  }
  80% {
    -webkit-transform: translate(-2px, 0) rotate(-2deg);
    transform: translate(-2px, 0) rotate(-2deg)
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg)
  }
  100% {
    -webkit-transform: translate(0, 2px) rotate(6deg);
    transform: translate(0, 2px) rotate(6deg)
  }
}

@keyframes rattling4 {
  0% {
    transform: translate(0, calc(1px + calc(32/11*1rem))) rotate(-2deg)
  }
  10% {
    transform: translate(-3px, calc(32/11*1rem)) rotate(0deg)
  }
  20% {
    transform: translate(0, calc(32/11*1rem)) rotate(-6deg)
  }
  30% {
    transform: translate(0, calc(32/11*1rem)) rotate(0deg)
  }
  40% {
    transform: translate(-2px, calc(32/11*1rem)) rotate(-4deg)
  }
  50% {
    transform: translate(0, calc(1px + calc(32/11*1rem))) rotate(6deg)
  }
  60% {
    transform: translate(0, calc(32/11*1rem)) rotate(0deg)
  }
  70% {
    transform: translate(-1px, calc(32/11*1rem)) rotate(-4deg)
  }
  80% {
    transform: translate(0, calc(2px + calc(32/11*1rem))) rotate(2deg)
  }
  90% {
    transform: translate(0, calc(32/11*1rem)) rotate(-1deg)
  }
  100% {
    transform: translate(0, calc(-2px + calc(32/11*1rem))) rotate(6deg)
  }
}

@keyframes rattling5 {
  0% {
    transform: translate(0, 1px) rotate(-7deg)
  }
  10% {
    transform: translate(0, 0) rotate(-2deg)
  }
  20% {
    transform: translate(-2px, 0px) rotate(6deg)
  }
  30% {
    transform: translate(0, 0) rotate(0deg)
  }
  40% {
    transform: translate(2px, 0) rotate(-6deg)
  }
  50% {
    transform: translate(0, 2px) rotate(4deg)
  }
  60% {
    transform: translate(0, 0) rotate(-4deg)
  }
  70% {
    transform: translate(-1px, 0) rotate(6deg)
  }
  80% {
    transform: translate(0, 2px) rotate(-2deg)
  }
  90% {
    transform: translate(0, 0) rotate(-6deg)
  }
  100% {
    transform: translate(0, 2px) rotate(4deg)
  }
}

@keyframes rattling6 {
  0% {
    transform: translate(0, 4px) rotate(-18deg)
  }
  10% {
    transform: translate(0, -4) rotate(7deg)
  }
  20% {
    transform: translate(0, 4px) rotate(-7deg)
  }
  30% {
    transform: translate(0, -4) rotate(7deg)
  }
  40% {
    transform: translate(0, 4px) rotate(-7deg)
  }
  50% {
    transform: translate(0, -4) rotate(7deg)
  }
  60% {
    transform: translate(0, 4px) rotate(-7deg)
  }
  70% {
    transform: translate(0, -4) rotate(7deg)
  }
  80% {
    transform: translate(0, 4px) rotate(-7deg)
  }
  90% {
    transform: translate(0, -4) rotate(7deg)
  }
  100% {
    transform: translate(0, -4) rotate(18deg)
  }
}

@keyframes asb {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(5deg);
  }
  100% {
	transform: rotate(0deg);
  }
}
@keyframes asb2 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(1deg);
  }
  100% {
	transform: rotate(0deg);
  }
}
@keyframes asb3 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(2deg);
  }
  100% {
	transform: rotate(0deg);
  }
}
@keyframes asb4 {
	0% {
		transform: rotate(-4deg);
		margin-left:-70px;
	}
  50% {
	transform: rotate(4deg);
	margin-left:30px;
  }
  100% {
	transform: rotate(-4deg);
	margin-left:-70px;
  }
}
@keyframes asb5 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
  }
  90% {
	transform: rotate(-1deg);
  }
  100% {
	transform: rotate(0deg);
  }
}
@keyframes tate2 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
	}
  100% {
	transform: translateY(0);
  }
}
@keyframes tate {
	0% {
		transform: translateY( calc(1100px * 0));
	}
	50% {
		transform: translateY( 3px);
  }
  100% {
	transform: translateY( calc(1100px * 0));
  }
}
@keyframes loop-text-slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2000% 0;
  }
}