@charset "UTF-8";

.fadeIn {
  opacity: 0
}

.fadeIn.inview {
  transition: opacity .5s ease-in-out .1s;
  opacity: 1
}

.fadeInUp {
  opacity: 0;
  transform: translateY(30px)
}

.fadeInUp.inview {
  transition: transform 1.5s cubic-bezier(.215, .61, .355, 1), opacity .5s ease-in-out;
  opacity: 1;
  transform: translateY(0)
}

@keyframes maniStamp {
  0% {
    opacity: 0;
    transform: rotate(-10deg) translate(30px, -30px) scale(1.1)
  }

  40% {
    opacity: 1;
    transform: rotate(0) translate(30px, -30px) scale(1.2)
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes prdTextAnimation {
  0% {
    opacity: 0;
    transform: rotate(0) translate(30px, 30px) scale(1.1)
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes clipTpRight {
  0% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%)
  }

  to {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
  }
}

@keyframes clipTpLeft {
  0% {
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
  }

  to {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
  }
}

@keyframes clipToBottom {
  0% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%)
  }

  to {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
  }
}

@keyframes clipTpRightScale {
  0% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
    transform: scale(1.3)
  }

  to {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform: scale(1)
  }
}

@keyframes arrowBottom {
  0% {
    transform: translateY(-2px)
  }

  50% {
    transform: translateY(4px)
  }

  to {
    transform: translateY(-2px)
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.1)
  }

  to {
    transform: scale(1)
  }
}

@keyframes scaleUpLg {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.25)
  }

  to {
    transform: scale(1)
  }
}

@keyframes shineAnimation {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(1)
  }

  50% {
    opacity: 1;
    transform: translateZ(0) scale(1.2)
  }

  to {
    opacity: 0;
    transform: translateZ(0) scale(1)
  }
}

@keyframes shineAnimationSmall {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(1)
  }

  50% {
    opacity: 1;
    transform: translateZ(0) scale(1)
  }

  to {
    opacity: 0;
    transform: translateZ(0) scale(1)
  }
}

@keyframes maniStamp {
  0% {
    opacity: 0;
    transform: rotate(-10deg) translate(30px, -30px) scale(1)
  }

  40% {
    opacity: 1;
    transform: rotate(0) translate(30px, -30px) scale(1.05)
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes maniStampRev {
  0% {
    opacity: 0;
    transform: rotate(10deg) translate(-30px, -30px) scale(1.1)
  }

  40% {
    opacity: 1;
    transform: rotate(0) translate(-30px, -30px) scale(1.2)
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes storeBound {
  0% {
    transform: scale(1)
  }

  20% {
    transform: scale(1)
  }

  65% {
    transform: scale(1.05)
  }

  95% {
    transform: scale(1)
  }

  to {
    transform: scale(1)
  }
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10
}

.header__bg {
  position: relative;
  z-index: 1
}

.header__bg img {
  width: 100%
}

@media screen and (max-width: 768px) and (min-width: 769px) {
  .header__bg {
    height: 0vw
  }
}

@media screen and (max-width: 768px) and (min-width: 1280px) {
  .header__bg {
    height: 0px
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .header__bg {
    height: 0vw
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .header__bg {
    height: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .header__bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
}

.header__humb {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 44%;
  z-index: 2;
  cursor: pointer
}

@media screen and (min-width: 769px) {
  .header__humb {
    width: 4.6875vw
  }
}

@media screen and (min-width: 1280px) {
  .header__humb {
    width: 60px
  }
}

@media screen and (max-width: 768px) {
  .header__humb {
    width: 16vw
  }
}

@media screen and (max-width: 768px) {
  .header__humb {
    width: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .header__humb {
    height: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .header__humb {
    height: 30px
  }
}

@media screen and (max-width: 768px) {
  .header__humb {
    height: 8vw
  }
}

@media screen and (max-width: 768px) {
  .header__humb {
    top: 40%
  }
}

.header__humb.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.header__humb.open span:nth-child(2) {
  opacity: 0
}

.header__humb.open span:nth-child(3) {
  transform: translateY(7px) rotate(-45deg)
}

.header__humb span {
  background-color: #876437;
  position: absolute;
  width: 100%;
  left: 0
}

@media screen and (min-width: 769px) {
  .header__humb span {
    height: .234375vw
  }
}

@media screen and (min-width: 1280px) {
  .header__humb span {
    height: 3px
  }
}

@media screen and (max-width: 768px) {
  .header__humb span {
    height: .8vw
  }
}

@media screen and (max-width: 768px) {
  .header__humb span {
    height: 1.0666666667vw
  }
}

@media screen and (min-width: 769px) {
  .header__humb span {
    top: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .header__humb span {
    top: 0px
  }
}

@media screen and (max-width: 768px) {
  .header__humb span {
    top: 0vw
  }
}

.header__humb span:nth-child(1) {
  transform: translateY(0)
}

.header__humb span:nth-child(2) {
  transform: translateY(7px)
}

.header__humb span:nth-child(3) {
  transform: translateY(15px)
}

.menu-modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  background-color: #520909;
  height: 100%;
  width: 100%;
  color: #876437;
  opacity: 0;
  transition: all .3s;
  pointer-events: none
}

@media screen and (min-width: 769px) {
  .menu-modal {
    padding-top: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .menu-modal {
    padding-top: 100px
  }
}

@media screen and (max-width: 768px) {
  .menu-modal {
    padding-top: 26.6666666667vw
  }
}

.menu-modal.open {
  opacity: 1;
  pointer-events: all
}

.menu-modal__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center
}

@media screen and (min-width: 769px) {
  .menu-modal__inner {
    font-size: 4.21875vw
  }
}

@media screen and (min-width: 1280px) {
  .menu-modal__inner {
    font-size: 54px
  }
}

@media screen and (max-width: 768px) {
  .menu-modal__inner {
    font-size: 14.4vw
  }
}

.menu-modal__list {
  display: flex;
  flex-direction: column
}

@media screen and (min-width: 769px) {
  .menu-modal__list {
    gap: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .menu-modal__list {
    gap: 30px
  }
}

@media screen and (max-width: 768px) {
  .menu-modal__list {
    gap: 8vw
  }
}

body {
  background-color: #d22820 !important
}

main {
  font-family: Shippori Mincho, serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75;
  color: #ffe6c8;
  padding-top: 0 !important
}

main img {
  display: block;
  max-width: 100%
}

@media screen and (max-width: 768px) {
  main .pc_only {
    display: none !important
  }
}

@media screen and (min-width: 769px) {
  main .sp_only {
    display: none !important
  }
}

.st-PageTop,
.st-Footer_Upper {
  display: none !important
}

.movie-modal {
  display: none;
  z-index: 500;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.movie-modal__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #00000080
}

.movie-modal__iframe-wrap {
  position: relative;
  max-width: 95vw;
  width: 960px
}

.movie-modal__iframe-wrap svg {
  position: absolute;
  cursor: pointer;
  transition: transform .2s;
  width: 24px;
  right: 0;
  top: -38px
}

@media (hover: hover) and (min-width: 769px) {
  .movie-modal__iframe-wrap svg:hover {
    transform: scale(1.1)
  }
}

.movie-modal__iframe {
  aspect-ratio: 16/9;
  height: 100%;
  width: 100%;
  background: #000;
  position: relative
}

.movie-modal__iframe video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
*,
:before,
:after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}

body {
  margin: 0
}

main {
  display: block
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none
}

dt {
  font-weight: 700
}

dd {
  margin-left: 0
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit
}

pre {
  font-family: monospace, monospace;
  font-size: inherit
}

address {
  font-style: inherit
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit
}

[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default
}

:-moz-focusring {
  outline: auto
}

select:disabled {
  opacity: inherit
}

option {
  padding: 0
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0
}

legend {
  padding: 0
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

label[for] {
  cursor: pointer
}

details {
  display: block
}

summary {
  display: list-item
}

[contenteditable]:focus {
  outline: auto
}

table {
  border-color: inherit;
  border-collapse: collapse
}

caption {
  text-align: left
}

td,
th {
  vertical-align: top;
  padding: 0
}

th {
  text-align: left;
  font-weight: 700
}

.app-loadig {
  position: fixed;
  left: 0;
  top: 0;
  top: 0px;
  height: calc(var(--rvh, 1vh) * 100);
  width: 100%;
  background-color: #d22820;
  z-index: 8;
  pointer-events: none
}

@media screen and (max-width: 768px) {
  .app-loadig {
    height: calc(var(--vh, 1vh) * 100);
    height: 100svh
  }
}

.app-loadig__inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  height: 100%;
  width: 70%
}

@media screen and (max-width: 768px) {
  .app-loadig__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(0)
  }
}

.app-fv {
  position: relative;
  overflow: hidden
}

.app-fv-flower {
  position: absolute;
  z-index: 3;
  will-change: transform
}

@media screen and (min-width: 769px) {
  .app-fv-flower {
    width: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-fv-flower {
    width: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-fv-flower {
    width: 8vw
  }
}

@media screen and (min-width: 769px) {
  .app-fv-flower {
    top: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-fv-flower {
    top: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-fv-flower {
    top: 26.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-fv-flower {
    left: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .app-fv-flower {
    left: 0px
  }
}

@media screen and (max-width: 768px) {
  .app-fv-flower {
    left: 0vw
  }
}

.app-fv-flower.base {
  opacity: 0
}

.app-fv-logos {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  top: 92px;
  z-index: 5
}

@media screen and (min-width: 769px) {
  .app-fv-logos {
    top: 40%;
    left: 0;
    width: 42%;
    transform: translateY(-50%)
  }
}

.app-fv-logos img {
  opacity: 0;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .app-fv-logos img {
    width: 23.59375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-fv-logos img {
    width: 302px
  }
}

@media screen and (max-width: 768px) {
  .app-fv-logos img {
    width: 80.5333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-fv-logos img {
    width: 100%
  }
}

.app-fv-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 59%;
  z-index: 6
}

@media screen and (min-width: 769px) {
  .app-fv-copy {
    transform: translateY(-50%);
    top: 40%;
    right: 7%;
    left: auto;
    width: 36%
  }
}

.app-fv-copy img {
  opacity: 0;
  will-change: transform
}

@media screen and (min-width: 769px) {
  .app-fv-copy img {
    width: 100%
  }
}

.app-fv-kvs {
  padding-top: 62px;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 6
}

@media screen and (min-width: 769px) {
  .app-fv-kvs {
    padding-top: 0
  }
}

.app-fv-kv {
  transform: translate(0);
  width: 100%;
  position: relative
}

.app-fv-kv img {
  width: 100%
}

.app-fv-kv__btn {
  position: absolute;
  width: 31%;
  z-index: 3;
  top: 45.5%;
  left: 1%
}

@media screen and (max-width: 768px) {
  .app-fv-kv__btn {
    left: auto;
    right: 1%;
    top: 67%;
    width: 50%
  }
}

.app-fv-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 6
}

@media screen and (min-width: 769px) {
  .app-fv-bottom {
    bottom: 4%
  }
}

.app-fv-bottom__chara {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
  width: 92%
}

@media screen and (min-width: 769px) {
  .app-fv-bottom__chara {
    width: 55%;
    bottom: 26%
  }
}

.app-fv-bottom__chara img {
  opacity: 0
}

.app-fv-bottom__line {
  opacity: 0;
  position: relative;
  z-index: 1
}

@media screen and (min-width: 769px) {
  .app-fv-bottom__line {
    height: 5.46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-fv-bottom__line {
    height: 70px
  }
}

@media screen and (max-width: 768px) {
  .app-fv-bottom__line {
    height: 18.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-fv-bottom__line {
    height: 9.6vw
  }
}

.app-fv-bottom__line img {
  width: 100%;
  height: 100%
}

.app-state {
  text-align: center
}

@media screen and (min-width: 769px) {
  .app-state {
    padding-top: 7.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-state {
    padding-top: 90px
  }
}

@media screen and (max-width: 768px) {
  .app-state {
    padding-top: 24vw
  }
}

@media screen and (max-width: 768px) {
  .app-state {
    padding-top: 16vw
  }
}

.app-state__head {
  transform: scaleX(.9);
  line-height: 1.43;
  transform: scaleX(.85)
}

@media screen and (min-width: 769px) {
  .app-state__head {
    font-size: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-state__head {
    font-size: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-state__head {
    font-size: 8vw
  }
}

@media screen and (max-width: 768px) {
  .app-state__head {
    font-size: 6.1333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-state__head {
    letter-spacing: -.078125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-state__head {
    letter-spacing: -1px
  }
}

@media screen and (max-width: 768px) {
  .app-state__head {
    letter-spacing: -.2666666667vw
  }
}

.app-state__copy {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .app-state__copy {
    width: 31.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-state__copy {
    width: 400px
  }
}

@media screen and (max-width: 768px) {
  .app-state__copy {
    width: 106.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-state__copy {
    width: 76.2666666667vw
  }
}

.app-vis {
  overflow: hidden
}

@media screen and (min-width: 769px) {
  .app-vis {
    margin-top: 6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis {
    margin-top: 80px
  }
}

@media screen and (max-width: 768px) {
  .app-vis {
    margin-top: 21.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis {
    margin-top: 16vw
  }
}

@media screen and (min-width: 769px) {
  .app-vis {
    padding-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis {
    padding-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-vis {
    padding-top: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-vis {
    padding-bottom: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis {
    padding-bottom: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-vis {
    padding-bottom: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis {
    padding-bottom: 21.3333333333vw
  }
}

.app-vis .splide {
  margin: 0;
  padding: 0
}

@media screen and (min-width: 769px) {
  .app-vis__head {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis__head {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-vis__head {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis__head {
    font-size: 5.0666666667vw
  }
}

.app-vis-wrap {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .app-vis-wrap {
    margin-top: 7.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis-wrap {
    margin-top: 90px
  }
}

@media screen and (max-width: 768px) {
  .app-vis-wrap {
    margin-top: 24vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis-wrap {
    margin-top: 16vw
  }
}

@media screen and (min-width: 769px) {
  .app-vis-wrap {
    width: 53.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis-wrap {
    width: 690px
  }
}

@media screen and (max-width: 768px) {
  .app-vis-wrap {
    width: 184vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis-wrap {
    width: 100vw
  }
}

.app-vis-wrap .app-slide-control {
  filter: drop-shadow(0px 1px 0px rgb(0, 0, 0))
}

@media screen and (min-width: 769px) {
  .app-vis-wrap .app-slide-control {
    filter: drop-shadow(0px 2px 0px rgb(0, 0, 0))
  }
}

.app-vis .splide__track {
  overflow: visible
}

.app-vis .splide__slide {
  position: relative;
  cursor: pointer;
  opacity: .6
}

.app-vis .splide__slide:hover .app-vis__img img {
  transform: scale(1.05)
}

.app-vis .splide__slide.is-active.is-visible {
  opacity: 1
}

.app-vis .splide__slide.is-active.is-visible .app-vis__img {
  border: 5px solid #a9804c;
  overflow: hidden;
  transform: scale(1.1)
}

@media screen and (min-width: 769px) {
  .app-vis .splide__slide.is-active.is-visible .app-vis__img {
    border: 7px solid #a9804c
  }
}

.app-vis .splide__slide.is-active.is-visible .app-vis__icon {
  opacity: 1;
  transform: scale(1)
}

.app-vis .splide__slide .app-vis__img {
  border: 5px solid transparent;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1)
}

.app-vis .splide__slide .app-vis__img img {
  transition: transform .8s cubic-bezier(.23, 1, .32, 1)
}

.app-vis__img {
  position: relative;
  z-index: 1
}

.app-vis__icon {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: scale(0);
  transition: all .5s cubic-bezier(.23, 1, .32, 1)
}

@media screen and (min-width: 769px) {
  .app-vis__icon {
    width: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis__icon {
    width: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-vis__icon {
    width: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis__icon {
    width: 21.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-vis__icon {
    bottom: -3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis__icon {
    bottom: -50px
  }
}

@media screen and (max-width: 768px) {
  .app-vis__icon {
    bottom: -13.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis__icon {
    bottom: -10.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-vis__icon {
    right: -3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-vis__icon {
    right: -50px
  }
}

@media screen and (max-width: 768px) {
  .app-vis__icon {
    right: -13.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-vis__icon {
    right: -10.6666666667vw
  }
}

main .splide {
  padding: 0;
  margin: 0
}

main .app-slide-control {
  position: absolute;
  left: 50%;
  display: flex;
  transform: translate(-50%);
  z-index: 4
}

@media screen and (min-width: 769px) {
  main .app-slide-control {
    bottom: -6.25vw
  }
}

@media screen and (min-width: 1280px) {
  main .app-slide-control {
    bottom: -80px
  }
}

@media screen and (max-width: 768px) {
  main .app-slide-control {
    bottom: -21.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  main .app-slide-control {
    bottom: -12.2666666667vw
  }
}

main .splide__pagination {
  position: relative;
  bottom: 0;
  left: 0
}

main .splide__pagination button {
  opacity: 1;
  border-radius: 100%;
  background: transparent;
  border: 2px solid #beaa5f
}

@media screen and (min-width: 769px) {
  main .splide__pagination button {
    margin-top: 0vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__pagination button {
    margin-top: 0
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    margin-top: 0vw
  }
}

@media screen and (min-width: 769px) {
  main .splide__pagination button {
    margin-bottom: 0vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__pagination button {
    margin-bottom: 0
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    margin-bottom: 0vw
  }
}

@media screen and (min-width: 769px) {
  main .splide__pagination button {
    margin-left: 1.171875vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__pagination button {
    margin-left: 15px
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    margin-left: 4vw
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    margin-left: 1.6vw
  }
}

@media screen and (min-width: 769px) {
  main .splide__pagination button {
    margin-right: 1.171875vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__pagination button {
    margin-right: 15px
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    margin-right: 4vw
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    margin-right: 1.6vw
  }
}

@media screen and (min-width: 769px) {
  main .splide__pagination button {
    width: 1.328125vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__pagination button {
    width: 17px
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    width: 4.5333333333vw
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    width: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  main .splide__pagination button {
    height: 1.328125vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__pagination button {
    height: 17px
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    height: 4.5333333333vw
  }
}

@media screen and (max-width: 768px) {
  main .splide__pagination button {
    height: 2.6666666667vw
  }
}

main .splide__pagination button:hover {
  background: #beaa5f
}

main .splide__pagination__page.is-active {
  background: #beaa5f;
  transform: scale(1) !important
}

main .splide__arrows {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 100%;
  align-items: center
}

main .splide__arrow {
  left: 0;
  top: 10%;
  position: relative;
  background-image: url(/products/brand/ghana/tenipuri2026/assets/images/arrow_right.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1
}

@media screen and (min-width: 769px) {
  main .splide__arrow {
    width: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__arrow {
    width: 30px
  }
}

@media screen and (max-width: 768px) {
  main .splide__arrow {
    width: 8vw
  }
}

@media screen and (max-width: 768px) {
  main .splide__arrow {
    width: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  main .splide__arrow {
    height: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  main .splide__arrow {
    height: 30px
  }
}

@media screen and (max-width: 768px) {
  main .splide__arrow {
    height: 8vw
  }
}

@media screen and (max-width: 768px) {
  main .splide__arrow {
    height: 5.3333333333vw
  }
}

main .splide__arrow svg {
  display: none
}

main .splide__arrow.splide__arrow--prev {
  transform: translate(-120%) rotate(180deg)
}

main .splide__arrow.splide__arrow--next {
  transform: translate(120%)
}

.vis-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: all .3s
}

.vis-modal.open {
  opacity: 1;
  pointer-events: all
}

.vis-modal.open .vis-modal__pic {
  transform: scale(1)
}

.vis-modal.open .vis-modal__close img {
  opacity: 1;
  transform: scale(1);
  transition: transform 1s cubic-bezier(.23, 1, .32, 1) .5s, opacity .3s ease .5s
}

.vis-modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0007
}

.vis-modal__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%
}

.vis-modal__content {
  position: relative
}

@media screen and (min-width: 769px) {
  .vis-modal__content {
    max-width: 1280px;
    width: 60%
  }
}

.vis-modal__pic {
  transform: scale(1.2);
  transition: transform 1s cubic-bezier(.23, 1, .32, 1)
}

@media screen and (min-width: 769px) {
  .vis-modal__pic {
    transform: scale(1.04)
  }
}

.vis-modal__pic img {
  width: 100%
}

.vis-modal__close {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 98%;
  cursor: pointer
}

@media screen and (min-width: 769px) {
  .vis-modal__close {
    width: 7.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .vis-modal__close {
    width: 90px
  }
}

@media screen and (max-width: 768px) {
  .vis-modal__close {
    width: 24vw
  }
}

.vis-modal__close img {
  transform: scale(.3);
  opacity: 0;
  transition: transform 1s cubic-bezier(.23, 1, .32, 1) 0s, opacity .3s ease 0s
}

@media screen and (min-width: 769px) {
  .app-family {
    padding-bottom: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family {
    padding-bottom: 50px
  }
}

@media screen and (max-width: 768px) {
  .app-family {
    padding-bottom: 13.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-family {
    padding-bottom: 32vw
  }
}

@media screen and (min-width: 769px) {
  .app-family {
    margin-top: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family {
    margin-top: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-family {
    margin-top: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-family {
    margin-top: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family {
    padding-top: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family {
    padding-top: 50px
  }
}

@media screen and (max-width: 768px) {
  .app-family {
    padding-top: 13.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-family {
    padding-top: 8vw
  }
}

.app-family__desc {
  transform: scaleX(.85);
  text-align: center;
  line-height: 1.4
}

@media screen and (min-width: 769px) {
  .app-family__desc {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__desc {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-family__desc {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-family__desc {
    font-size: 4.5333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__desc {
    letter-spacing: .078125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__desc {
    letter-spacing: 1px
  }
}

@media screen and (max-width: 768px) {
  .app-family__desc {
    letter-spacing: .2666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__desc {
    margin-top: 4.6875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__desc {
    margin-top: 60px
  }
}

@media screen and (max-width: 768px) {
  .app-family__desc {
    margin-top: 16vw
  }
}

@media screen and (max-width: 768px) {
  .app-family__desc {
    margin-top: 9.0666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6%;
    margin-left: auto;
    margin-right: auto
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-family__list {
    width: 64.0625vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-family__list {
    width: 820px
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-family__list {
    width: 218.6666666667vw
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-family__list {
    margin-top: 4.6875vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-family__list {
    margin-top: 60px
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-family__list {
    margin-top: 16vw
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-family__list {
    row-gap: 4.6875vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-family__list {
    row-gap: 60px
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-family__list {
    row-gap: 16vw
  }
}

@media screen and (max-width: 768px) {
  .app-family__list {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .app-family__item {
    width: 47%
  }
}

.app-family__item a:hover .app-family__pic img {
  transform: scale(1.05)
}

.app-family__pic {
  overflow: hidden
}

.app-family__nameList {
  text-align: center;
  position: relative;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  white-space: nowrap
}

@media screen and (min-width: 769px) {
  .app-family__nameList {
    margin-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__nameList {
    margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList {
    margin-top: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__nameList {
    font-size: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__nameList {
    font-size: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList {
    font-size: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__nameList {
    padding-top: .234375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__nameList {
    padding-top: 3px
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList {
    padding-top: .8vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__nameList {
    padding-bottom: .234375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__nameList {
    padding-bottom: 3px
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList {
    padding-bottom: .8vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__nameList {
    padding-right: 1.015625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__nameList {
    padding-right: 13px
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList {
    padding-right: 3.4666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__nameList {
    padding-left: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__nameList {
    padding-left: 10px
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList {
    padding-left: 2.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList {
    padding-left: 0vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__nameList .icon {
    width: 1.484375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__nameList .icon {
    width: 19px
  }
}

@media screen and (max-width: 768px) {
  .app-family__nameList .icon {
    width: 5.0666666667vw
  }
}

.app-family__nameList span {
  display: inline-block;
  transform-origin: center;
  transform: scaleX(.85)
}

.app-family__nameList .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.app-family__head {
  position: relative;
  z-index: 2
}

@media screen and (min-width: 769px) {
  .app-family__head {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__head {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-family__head {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-family__head {
    font-size: 5.4666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__head {
    letter-spacing: -.1171875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__head {
    letter-spacing: -1.5px
  }
}

@media screen and (max-width: 768px) {
  .app-family__head {
    letter-spacing: -.4vw
  }
}

.app-family-coming {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1
}

@media screen and (min-width: 769px) {
  .app-family-coming {
    width: 65.546875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family-coming {
    width: 839px
  }
}

@media screen and (max-width: 768px) {
  .app-family-coming {
    width: 223.7333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-family-coming {
    width: 84.2666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-family-coming {
    margin-top: -8.59375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family-coming {
    margin-top: -110px
  }
}

@media screen and (max-width: 768px) {
  .app-family-coming {
    margin-top: -29.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-family-coming {
    margin-top: 10.6666666667vw
  }
}

.app-family-coming img {
  width: 100%
}

.app-family-wrap {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .app-family-wrap {
    margin-top: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family-wrap {
    margin-top: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-family-wrap {
    margin-top: 8vw
  }
}

@media screen and (min-width: 769px) {
  .app-family-wrap {
    width: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family-wrap {
    width: 0px
  }
}

@media screen and (max-width: 768px) {
  .app-family-wrap {
    width: 0vw
  }
}

@media screen and (max-width: 768px) {
  .app-family-wrap {
    width: 100vw
  }
}

@media screen and (min-width: 769px) {
  .app-family-wrap {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .app-family-wrap .app-slide-control {
    bottom: -2.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family-wrap .app-slide-control {
    bottom: -36px
  }
}

@media screen and (max-width: 768px) {
  .app-family-wrap .app-slide-control {
    bottom: -9.6vw
  }
}

.app-family-wrap .splide__track {
  overflow: visible
}

.app-family-wrap .splide__arrow {
  background-image: url(/products/brand/ghana/familyday2025/assets/images/arrow_right_prd.png)
}

.app-family-wrap .splide__pagination__page.is-active {
  background: #e6d2b4
}

.app-family-wrap .splide__pagination button {
  border: 2px solid #e6d2b4
}

.app-family-wrap .splide__slide {
  position: relative
}

.app-family-wrap .splide__slide:hover .app-family__pic img,
.app-family-wrap .splide__slide.is-active .app-family__pic {
  transform: scale(1.05)
}

.app-family-wrap .splide__slide.is-active .app-family__name {
  opacity: 1;
  transform: translateY(0)
}

.app-family-wrap .splide__slide.is-active .app-family__icon {
  opacity: 1;
  transform: scale(1)
}

.app-family__pic {
  transition: transform .5s cubic-bezier(.23, 1, .32, 1)
}

.app-family__pic img {
  transition: transform .8s cubic-bezier(.23, 1, .32, 1);
  box-shadow: 2px 2px 30px #0003
}

.app-family__name {
  position: relative;
  text-align: center;
  opacity: 0;
  transition: all .5s ease, transform .5s cubic-bezier(.23, 1, .32, 1);
  transform: translateY(10px)
}

@media screen and (min-width: 769px) {
  .app-family__name {
    margin-top: 2.265625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name {
    margin-top: 29px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name {
    margin-top: 7.7333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-family__name {
    margin-top: 5.3333333333vw
  }
}

.app-family__name-inner {
  position: relative;
  display: inline-block;
  align-items: center
}

.app-family__name-txt {
  display: block;
  border-top: 1px solid #e6d2b4;
  border-bottom: 1px solid #e6d2b4;
  margin-right: 10px;
  margin-left: 10px;
  white-space: nowrap
}

@media screen and (min-width: 769px) {
  .app-family__name-txt {
    padding-left: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-txt {
    padding-left: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-txt {
    padding-left: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__name-txt {
    padding-right: .9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-txt {
    padding-right: 12px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-txt {
    padding-right: 3.2vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__name-txt {
    padding-top: .15625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-txt {
    padding-top: 2px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-txt {
    padding-top: .5333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__name-txt {
    padding-bottom: .15625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-txt {
    padding-bottom: 2px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-txt {
    padding-bottom: .5333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__name-txt {
    font-size: 1.328125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-txt {
    font-size: 17px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-txt {
    font-size: 4.5333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__name-txt {
    min-width: 12.5vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-txt {
    min-width: 160px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-txt {
    min-width: 42.6666666667vw
  }
}

.app-family__name-txt span {
  display: inline-block;
  transform: scaleX(.85)
}

@media screen and (min-width: 769px) {
  .app-family__name-txt span {
    margin-left: -1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-txt span {
    margin-left: -20px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-txt span {
    margin-left: -5.3333333333vw
  }
}

.app-family__name-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

@media screen and (min-width: 769px) {
  .app-family__name-icon {
    width: 1.09375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-icon {
    width: 14px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-icon {
    width: 3.7333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-family__name-icon {
    right: 1.09375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-family__name-icon {
    right: 14px
  }
}

@media screen and (max-width: 768px) {
  .app-family__name-icon {
    right: 3.7333333333vw
  }
}

.app-family__name-bg {
  position: absolute;
  height: 100%;
  width: 10px;
  top: 0
}

.app-family__name-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.app-family__name-bg-left {
  left: 0px
}

.app-family__name-bg-right {
  right: 0px
}

.app-coming__coming {
  position: relative;
  z-index: 1
}

.app-coming__mugi {
  position: absolute;
  z-index: 2;
  opacity: 0
}

@media screen and (min-width: 769px) {
  .app-coming__mugi {
    width: 12.5vw
  }
}

@media screen and (min-width: 1280px) {
  .app-coming__mugi {
    width: 160px
  }
}

@media screen and (max-width: 768px) {
  .app-coming__mugi {
    width: 42.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-coming__mugi {
    width: 20vw
  }
}

@media screen and (min-width: 769px) {
  .app-coming__mugi {
    top: -3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-coming__mugi {
    top: -40px
  }
}

@media screen and (max-width: 768px) {
  .app-coming__mugi {
    top: -10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-coming__mugi {
    top: -5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-coming__mugi {
    right: -3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-coming__mugi {
    right: -40px
  }
}

@media screen and (max-width: 768px) {
  .app-coming__mugi {
    right: -10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-coming__mugi {
    right: -5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker {
    padding-bottom: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker {
    padding-bottom: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-maker {
    padding-bottom: 8vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker {
    margin-top: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker {
    margin-top: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-maker {
    margin-top: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker {
    margin-top: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker {
    padding-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker {
    padding-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-maker {
    padding-top: 5.3333333333vw
  }
}

.app-maker__head {
  position: relative;
  z-index: 2
}

@media screen and (min-width: 769px) {
  .app-maker__head {
    font-size: 1.40625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker__head {
    font-size: 18px
  }
}

@media screen and (max-width: 768px) {
  .app-maker__head {
    font-size: 4.8vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker__head {
    font-size: 4.1333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker__head .sm {
    font-size: 1.328125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker__head .sm {
    font-size: 17px
  }
}

@media screen and (max-width: 768px) {
  .app-maker__head .sm {
    font-size: 4.5333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker__head .sm {
    font-size: 3.4666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker__head .app-head__bg {
    width: 17.96875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker__head .app-head__bg {
    width: 230px
  }
}

@media screen and (max-width: 768px) {
  .app-maker__head .app-head__bg {
    width: 61.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker__head .app-head__bg {
    width: 54.9333333333vw
  }
}

.app-maker-content {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1
}

@media screen and (min-width: 769px) {
  .app-maker-content {
    width: 65.546875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker-content {
    width: 839px
  }
}

@media screen and (max-width: 768px) {
  .app-maker-content {
    width: 223.7333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker-content {
    width: 84.2666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker-content {
    margin-top: -8.59375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker-content {
    margin-top: -110px
  }
}

@media screen and (max-width: 768px) {
  .app-maker-content {
    margin-top: -29.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker-content {
    margin-top: 10.6666666667vw
  }
}

.app-maker-content img {
  width: 100%
}

.app-maker__info {
  position: relative
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-maker__info {
    width: 23.4375vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-maker__info {
    width: 300px
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-maker__info {
    width: 80vw
  }
}

.app-maker__charas {
  position: absolute;
  width: 116%;
  left: -4.4%;
  z-index: 2;
  top: 4%;
  margin-top: 0%;
  pointer-events: none
}

@media screen and (max-width: 768px) {
  .app-maker__charas {
    width: 107%;
    left: -3%;
    top: 4%
  }
}

.app-maker.app-maker-prd .app-maker__inner {
  background-image: url(/products/brand/ghana/familyday2025/assets/images/maker_bg_pc.png);
  background-size: 100% 100%;
  margin-left: auto;
  position: relative;
  margin-right: auto
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    background-image: url(/products/brand/ghana/familyday2025/assets/images/maker_bg.png)
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__inner {
    width: 62.5vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__inner {
    width: 800px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    width: 213.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    width: 96vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-top: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-top: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-top: 8vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-top: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-bottom: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-bottom: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-bottom: 8vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-bottom: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__inner {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__inner {
    gap: 0vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__inner {
    gap: 0px
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    gap: 0vw
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-left: 0vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-left: 0
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-left: 0vw
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-right: 0vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-right: 0
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__inner {
    padding-right: 0vw
  }
}

.app-maker.app-maker-prd .app-maker__desc {
  transform: scaleX(.85);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__desc {
    font-size: 1.796875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__desc {
    font-size: 23px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__desc {
    font-size: 6.1333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__desc {
    font-size: 4.64vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__desc {
    margin-top: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__desc {
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__desc {
    margin-top: 10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__desc {
    margin-top: 6.1333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__desc {
    width: 110%;
    margin-left: -5%
  }
}

.app-maker.app-maker-prd .app-maker__start {
  margin-left: auto;
  margin-right: auto;
  transition: all .3s
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__start {
    width: 20.3125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__start {
    width: 260px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__start {
    width: 69.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__start {
    width: 54.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__start {
    margin-top: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__start {
    margin-top: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__start {
    margin-top: 8vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__start {
    margin-top: 5.3333333333vw
  }
}

.app-maker.app-maker-prd .app-maker__start:hover {
  opacity: .7
}

.app-maker.app-maker-prd .app-maker__sho {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__sho {
    margin-top: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__sho {
    margin-top: 0
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__sho {
    margin-top: 0vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__sho {
    margin-top: 1.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__sho {
    margin-right: 0;
    margin-left: 0
  }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__sho {
    width: 34.375vw
  }
}

@media screen and (min-width: 769px) and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker__sho {
    width: 440px
  }
}

@media screen and (min-width: 769px) and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker__sho {
    width: 117.3333333333vw
  }
}

.app-maker.app-maker-prd .app-maker__tehai {
  transform: scale(1.15)
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker__tehai {
    transform: scale(1.23)
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-btn {
    display: block;
    transform: scale(1.03) translate(-2%)
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-btn {
    width: 80%
  }
}

.app-maker.app-maker-prd .app-maker-btn__bg {
  opacity: 0
}

.app-maker.app-maker-prd .app-maker-btn__txt {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -67%);
  top: 55%;
  font-weight: 600
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-btn__txt {
    font-size: 1.875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-btn__txt {
    font-size: 24px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-btn__txt {
    font-size: 6.4vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-btn__txt {
    font-size: 4vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-btn__txt {
    letter-spacing: -.078125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-btn__txt {
    letter-spacing: -1px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-btn__txt {
    letter-spacing: -.2666666667vw
  }
}

.app-maker.app-maker-prd .app-maker-btn__txt img {
  display: inline-block;
  width: auto
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-btn__txt img {
    height: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-btn__txt img {
    height: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-btn__txt img {
    height: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-btn__txt img {
    height: 5.3333333333vw
  }
}

.app-maker.app-maker-prd .app-maker-chara {
  position: absolute;
  z-index: 2;
  opacity: 0
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara {
    width: 11.71875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara {
    width: 150px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara {
    width: 40vw
  }
}

.app-maker.app-maker-prd .app-maker-chara.inview {
  transform: none;
  opacity: 1;
  transition: opacity .4s ease, transform 1.2s cubic-bezier(.23, 1, .32, 1)
}

.app-maker.app-maker-prd .app-maker-chara__1 {
  transform: translate(30%, 10%) rotate(20deg)
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    width: 15.625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    width: 200px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    width: 53.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    right: -11.71875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    right: -150px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    right: -40vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    top: -4.6875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    top: -60px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__1 {
    top: -16vw
  }
}

.app-maker.app-maker-prd .app-maker-chara__2 {
  transform: translate(-30%, 10%) rotate(-20deg)
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    width: 11.71875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    width: 150px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    width: 40vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    left: -9.375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    left: -120px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    left: -32vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    top: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    top: 0px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__2 {
    top: 0vw
  }
}

.app-maker.app-maker-prd .app-maker-chara__3 {
  transform: translate(-10%, 40%) rotate(0)
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    width: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    width: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    width: 26.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    left: -6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    left: -80px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    left: -21.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    bottom: -1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    bottom: -20px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__3 {
    bottom: -5.3333333333vw
  }
}

.app-maker.app-maker-prd .app-maker-chara__4 {
  transform: translate(10%, 40%) rotate(0)
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    width: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    width: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    width: 26.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    right: -6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    right: -80px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    right: -21.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    bottom: -1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    bottom: -20px
  }
}

@media screen and (max-width: 768px) {
  .app-maker.app-maker-prd .app-maker-chara__4 {
    bottom: -5.3333333333vw
  }
}

.app-cp.app-cp-prd {
  display: block
}

@media screen and (min-width: 769px) {
  .app-cp.app-cp-prd {
    padding-bottom: 10.9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp.app-cp-prd {
    padding-bottom: 140px
  }
}

@media screen and (max-width: 768px) {
  .app-cp.app-cp-prd {
    padding-bottom: 37.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp {
    margin-top: 6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp {
    margin-top: 80px
  }
}

@media screen and (max-width: 768px) {
  .app-cp {
    margin-top: 21.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp {
    margin-top: 0vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp {
    padding-bottom: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp {
    padding-bottom: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-cp {
    padding-bottom: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp {
    padding-bottom: 10.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp__head {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp__head {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-cp__head {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp__head {
    font-size: 5.4666666667vw
  }
}

.app-cp-desc {
  color: #780000;
  position: relative;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .app-cp-desc {
    margin-top: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-desc {
    margin-top: 50px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-desc {
    margin-top: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-desc {
    width: 24.21875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-desc {
    width: 310px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-desc {
    width: 82.6666666667vw
  }
}

.app-cp-desc__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}

.app-cp-desc__bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.app-cp-desc__inner {
  position: relative;
  z-index: 2
}

@media screen and (min-width: 769px) {
  .app-cp-desc__inner {
    padding-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-desc__inner {
    padding-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-desc__inner {
    padding-top: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-desc__inner {
    padding-bottom: 15.625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-desc__inner {
    padding-bottom: 200px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-desc__inner {
    padding-bottom: 53.3333333333vw
  }
}

.app-cp-desc__head {
  text-align: center
}

@media screen and (min-width: 769px) {
  .app-cp-desc__head {
    font-size: 1.6015625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-desc__head {
    font-size: 20.5px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-desc__head {
    font-size: 5.4666666667vw
  }
}

.app-cp-chara {
  position: absolute;
  z-index: 2;
  opacity: 0
}

@media screen and (min-width: 769px) {
  .app-cp-chara {
    width: 11.71875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara {
    width: 150px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara {
    width: 40vw
  }
}

.app-cp-chara.inview {
  transform: none;
  opacity: 1;
  transition: opacity .4s ease, transform 1.2s cubic-bezier(.23, 1, .32, 1)
}

.app-cp-chara__1 {
  transform: translate(30%, 10%) rotate(20deg)
}

@media screen and (min-width: 769px) {
  .app-cp-chara__1 {
    width: 12.5vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__1 {
    width: 160px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__1 {
    width: 42.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__1 {
    right: -5.46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__1 {
    right: -70px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__1 {
    right: -18.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__1 {
    top: -5.078125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__1 {
    top: -65px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__1 {
    top: -17.3333333333vw
  }
}

.app-cp-chara__2 {
  transform: translate(-30%, 10%) rotate(-20deg)
}

@media screen and (min-width: 769px) {
  .app-cp-chara__2 {
    width: 15.625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__2 {
    width: 200px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__2 {
    width: 53.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__2 {
    left: -7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__2 {
    left: -100px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__2 {
    left: -26.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__2 {
    top: -4.6875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__2 {
    top: -60px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__2 {
    top: -16vw
  }
}

.app-cp-chara__3 {
  transform: translate(-10%, 40%) rotate(0)
}

@media screen and (min-width: 769px) {
  .app-cp-chara__3 {
    width: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__3 {
    width: 50px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__3 {
    width: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__3 {
    left: -1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__3 {
    left: -20px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__3 {
    left: -5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__3 {
    bottom: -5.46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__3 {
    bottom: -70px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__3 {
    bottom: -18.6666666667vw
  }
}

.app-cp-chara__4 {
  transform: translate(10%, 40%) rotate(0)
}

@media screen and (min-width: 769px) {
  .app-cp-chara__4 {
    width: 10.9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__4 {
    width: 140px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__4 {
    width: 37.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__4 {
    right: -1.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__4 {
    right: -16px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__4 {
    right: -4.2666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-chara__4 {
    bottom: -5.46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-chara__4 {
    bottom: -70px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-chara__4 {
    bottom: -18.6666666667vw
  }
}

.app-cp__check {
  text-align: center
}

@media screen and (min-width: 769px) {
  .app-cp__check {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp__check {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-cp__check {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp__check {
    font-size: 4.8vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp__check {
    margin-top: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp__check {
    margin-top: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-cp__check {
    margin-top: 8vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp__check {
    margin-top: 5.3333333333vw
  }
}

.app-cp__check span {
  display: inline-block;
  transform: scaleX(.85)
}

.app-cp-top {
  display: flex;
  justify-content: center;
  align-items: center
}

@media screen and (min-width: 769px) {
  .app-cp-top {
    gap: 6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-top {
    gap: 80px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top {
    gap: 21.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-top {
    padding-top: 3.515625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-top {
    padding-top: 45px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top {
    padding-top: 12vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top {
    padding-top: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top {
    display: block
  }
}

@media screen and (min-width: 769px) {
  .app-cp-top__head {
    width: 31.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-top__head {
    width: 400px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top__head {
    width: 106.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top__head {
    width: 77.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top__head {
    margin-left: auto;
    margin-right: auto
  }
}

.app-cp-top__bnr {
  border: 6px solid #beaa5f
}

@media screen and (min-width: 769px) {
  .app-cp-top__bnr {
    width: 31.25vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-top__bnr {
    width: 400px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top__bnr {
    width: 106.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top__bnr {
    width: 81.8666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-top__bnr {
    margin-left: auto;
    margin-right: auto
  }
}

@media screen and (max-width: 768px) and (min-width: 769px) {
  .app-cp-top__bnr {
    margin-top: 0vw
  }
}

@media screen and (max-width: 768px) and (min-width: 1280px) {
  .app-cp-top__bnr {
    margin-top: 0
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .app-cp-top__bnr {
    margin-top: 0vw
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .app-cp-top__bnr {
    margin-top: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-step1 {
    margin-top: 3.515625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step1 {
    margin-top: 45px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step1 {
    margin-top: 12vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step1 {
    margin-top: 6.6666666667vw
  }
}

.app-cp-step1__content {
  text-align: center;
  transform-origin: center;
  transform: scaleX(.85)
}

@media screen and (min-width: 769px) {
  .app-cp-step1__content {
    margin-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step1__content {
    margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step1__content {
    margin-top: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step1__content {
    margin-top: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-step1__content {
    font-size: 2.734375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step1__content {
    font-size: 35px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step1__content {
    font-size: 9.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step1__content {
    font-size: 6.1333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step1__content {
    line-height: 1.3
  }
}

.app-cp-step1__content .sm {
  font-size: 50%
}

@media screen and (max-width: 768px) {
  .app-cp-step1__content .sm {
    vertical-align: middle
  }
}

@media screen and (min-width: 769px) {
  .app-cp-step2 {
    margin-top: 3.515625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step2 {
    margin-top: 45px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2 {
    margin-top: 12vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2 {
    margin-top: 6.6666666667vw
  }
}

.app-cp-step2__content {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  text-align: center;
  transform: scaleX(.85)
}

@media screen and (min-width: 769px) {
  .app-cp-step2__content {
    margin-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step2__content {
    margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2__content {
    margin-top: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2__content {
    margin-top: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-step2__content {
    width: 82.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step2__content {
    width: 1050px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2__content {
    width: 280vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2__content {
    width: 93.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.4
  }
}

@media screen and (max-width: 768px) and (min-width: 769px) {
  .app-cp-step2__content {
    gap: .78125vw
  }
}

@media screen and (max-width: 768px) and (min-width: 1280px) {
  .app-cp-step2__content {
    gap: 10px
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .app-cp-step2__content {
    gap: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-step2-item__head {
    font-size: 2.1875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step2-item__head {
    font-size: 28px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2-item__head {
    font-size: 7.4666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2-item__head {
    font-size: 4.5333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp-step2-item__desc {
    font-size: 1.875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp-step2-item__desc {
    font-size: 24px
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2-item__desc {
    font-size: 6.4vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp-step2-item__desc {
    font-size: 4vw
  }
}

.app-cp__chara {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .app-cp__chara {
    width: 46.875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp__chara {
    width: 600px
  }
}

@media screen and (max-width: 768px) {
  .app-cp__chara {
    width: 160vw
  }
}

@media screen and (max-width: 768px) {
  .app-cp__chara {
    width: 85.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-cp__chara {
    margin-top: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-cp__chara {
    margin-top: 50px
  }
}

@media screen and (max-width: 768px) {
  .app-cp__chara {
    margin-top: 13.3333333333vw
  }
}

.step-head {
  position: relative;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .step-head {
    width: 17.1875vw
  }
}

@media screen and (min-width: 1280px) {
  .step-head {
    width: 220px
  }
}

@media screen and (max-width: 768px) {
  .step-head {
    width: 58.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .step-head {
    width: 42.6666666667vw
  }
}

.step-head__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(.8);
  display: inline-block
}

@media screen and (min-width: 769px) {
  .step-head__txt {
    font-size: 1.875vw
  }
}

@media screen and (min-width: 1280px) {
  .step-head__txt {
    font-size: 24px
  }
}

@media screen and (max-width: 768px) {
  .step-head__txt {
    font-size: 6.4vw
  }
}

@media screen and (max-width: 768px) {
  .step-head__txt {
    font-size: 4.5333333333vw
  }
}

.main-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  background: rgba(50, 10, 0, .6)
}

@media screen and (min-width: 769px) {
  .main-nav {
    padding-right: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .main-nav {
    padding-right: 10px
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-right: 2.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-right: 0vw
  }
}

@media screen and (min-width: 769px) {
  .main-nav {
    padding-left: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .main-nav {
    padding-left: 10px
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-left: 2.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-left: 0vw
  }
}

@media screen and (min-width: 769px) {
  .main-nav {
    padding-top: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .main-nav {
    padding-top: 0
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-top: 0vw
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-top: 1.0666666667vw
  }
}

@media screen and (min-width: 769px) {
  .main-nav {
    padding-bottom: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .main-nav {
    padding-bottom: 0
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-bottom: 0vw
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    padding-bottom: 1.0666666667vw
  }
}

@media screen and (min-width: 769px) {
  .main-nav {
    gap: 2.109375vw
  }
}

@media screen and (min-width: 1280px) {
  .main-nav {
    gap: 27px
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    gap: 7.2vw
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    gap: 0vw
  }
}

@media screen and (max-width: 768px) {
  .main-nav {
    bottom: 0;
    height: auto;
    width: 100%;
    flex-direction: row
  }
}

.main-nav-item {
  position: relative;
  z-index: 2;
  height: 20vh;
  transition: all .3s ease
}

@media screen and (max-width: 768px) {
  .main-nav-item {
    height: auto;
    width: 33.333%
  }

  .main-nav-item:nth-child(2) {
    width: 33%;
    margin-top: -.2%
  }
}

@media screen and (min-width: 769px) {
  .main-nav-item:hover {
    opacity: .5
  }
}

.main-nav-item img {
  height: 100%
}

@media screen and (max-width: 768px) {
  .main-nav-item img {
    height: auto
  }
}

.app-prd {
  border-bottom: 1px solid white;
  background-color: #320a00
}

@media screen and (min-width: 769px) {
  .app-prd {
    padding-bottom: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd {
    padding-bottom: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-prd {
    padding-bottom: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd {
    padding-bottom: 10.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-line {
    height: 4.6875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-line {
    height: 60px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-line {
    height: 16vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-line {
    height: 9.6vw
  }
}

.app-prd-line img {
  width: 100%;
  height: 100%
}

@media screen and (min-width: 769px) {
  .app-prd__head {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__head {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__head {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd__head {
    font-size: 5.4666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd__head {
    margin-top: 7.8125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__head {
    margin-top: 100px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__head {
    margin-top: 26.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd__head {
    margin-top: 12vw
  }
}

.app-prd-wrap {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .app-prd-wrap {
    margin-top: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-wrap {
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap {
    margin-top: 10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap {
    margin-top: 8vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-wrap {
    width: 46.875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-wrap {
    width: 600px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap {
    width: 160vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap {
    width: 100vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-wrap .app-slide-control {
    bottom: -3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-wrap .app-slide-control {
    bottom: -40px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .app-slide-control {
    bottom: -10.6666666667vw
  }
}

.app-prd-wrap .splide__arrow {
  background-image: url(/products/brand/ghana/familyday2025/assets/images/arrow_right_prd.png)
}

.app-prd-wrap .splide__pagination__page.is-active {
  background: #e6d2b4
}

.app-prd-wrap .splide__track {
  background: #d5b699
}

.app-prd-wrap .splide__pagination button {
  border: 2px solid #e6d2b4
}

@media screen and (min-width: 769px) {
  .app-prd-wrap .splide__pagination button {
    width: .9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-wrap .splide__pagination button {
    width: 12px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    width: 3.2vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    width: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-wrap .splide__pagination button {
    height: .9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-wrap .splide__pagination button {
    height: 12px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    height: 3.2vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    height: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-wrap .splide__pagination button {
    margin-left: .9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-wrap .splide__pagination button {
    margin-left: 12px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    margin-left: 3.2vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    margin-left: 1.6vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-wrap .splide__pagination button {
    margin-right: .9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-wrap .splide__pagination button {
    margin-right: 12px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    margin-right: 3.2vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-wrap .splide__pagination button {
    margin-right: 1.6vw
  }
}

.app-prd-wrap .splide__pagination button:hover {
  background: #e6d2b4
}

@media screen and (max-width: 768px) {
  .app-prd .app-prd__item-1 .app-prd__pic {
    padding-top: 0
  }
}

.app-prd__pic {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
  position: relative
}

@media screen and (max-width: 768px) {
  .app-prd__pic {
    padding-top: 4%
  }
}

.app-prd__pic>span {
  position: absolute;
  top: 10%;
  left: 50%;
  line-height: 1;
  transform: translate(-50%);
  border: 1px solid #320a00;
  color: #320a00
}

.app-prd__pic>span.to-top {
  top: 15%
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span.to-top {
    top: 12%
  }
}

.app-prd__pic>span.to-top-2 {
  top: 22%
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span.to-top-2 {
    top: 18%
  }
}

@media screen and (min-width: 769px) {
  .app-prd__pic>span {
    padding-left: 1.171875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__pic>span {
    padding-left: 15px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span {
    padding-left: 4vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd__pic>span {
    padding-right: 1.171875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__pic>span {
    padding-right: 15px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span {
    padding-right: 4vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd__pic>span {
    padding-top: .3125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__pic>span {
    padding-top: 4px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span {
    padding-top: 1.0666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd__pic>span {
    padding-bottom: .3125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__pic>span {
    padding-bottom: 4px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span {
    padding-bottom: 1.0666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd__pic>span {
    font-size: .9375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__pic>span {
    font-size: 12px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span {
    font-size: 3.2vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd__pic>span {
    font-size: 1.09375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd__pic>span {
    font-size: 14px
  }
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span {
    font-size: 3.7333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd__pic>span {
    top: 6%
  }
}

.app-prd__pic>span span {
  transform: scaleX(.85);
  display: inline-block
}

.app-prd-info {
  text-align: center
}

@media screen and (min-width: 769px) {
  .app-prd-info {
    margin-top: 5.46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info {
    margin-top: 70px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info {
    margin-top: 18.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info {
    padding-bottom: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info {
    padding-bottom: 40px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info {
    padding-bottom: 10.6666666667vw
  }
}

.app-prd-info__list,
.app-prd-info__item {
  position: relative
}

.app-prd-info__item:not(:first-child) {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0
}

.app-prd-info__item.active .app-prd-info__desc {
  opacity: 1
}

.app-prd-info__item.active .app-prd-info__name .txt {
  opacity: 1;
  transition: opacity 0s .5s;
  animation: TextEnter 1s forwards .5s cubic-bezier(.23, 1, .32, 1)
}

.app-prd-info__item.active .app-prd-info__name .wrap:before {
  opacity: 1;
  transition: opacity 0s .5s;
  animation: LineEnter 1s forwards .5s cubic-bezier(.23, 1, .32, 1)
}

.app-prd-info__name {
  transform: scaleX(.85);
  line-height: 1.2;
  white-space: nowrap
}

@media screen and (min-width: 769px) {
  .app-prd-info__name {
    font-size: 2.65625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__name {
    font-size: 34px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name {
    font-size: 9.0666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name {
    font-size: 5.6vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info__name {
    letter-spacing: -.078125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__name {
    letter-spacing: -1px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name {
    letter-spacing: -.2666666667vw
  }
}

.app-prd-info__name .txt {
  position: relative;
  display: inline-block;
  opacity: 0;
  animation: TextLeave 1s forwards cubic-bezier(.23, 1, .32, 1);
  transition: opacity 0s 1s
}

.app-prd-info__name .wrap {
  position: relative;
  display: inline-block;
  z-index: 1;
  overflow: hidden
}

@media screen and (min-width: 769px) {
  .app-prd-info__name .wrap {
    padding-left: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__name .wrap {
    padding-left: 10px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name .wrap {
    padding-left: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info__name .wrap {
    padding-right: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__name .wrap {
    padding-right: 10px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name .wrap {
    padding-right: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info__name .wrap {
    padding-bottom: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__name .wrap {
    padding-bottom: 10px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name .wrap {
    padding-bottom: 2.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name .wrap {
    padding-bottom: 1.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info__name .wrap {
    min-width: 24.21875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__name .wrap {
    min-width: 310px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name .wrap {
    min-width: 82.6666666667vw
  }
}

.app-prd-info__name .wrap:before {
  opacity: 0;
  animation: LineLeave 1s forwards cubic-bezier(.23, 1, .32, 1);
  transition: opacity 0s 1s;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #e6d2b4;
  width: 100%
}

@media screen and (min-width: 769px) {
  .app-prd-info__name .wrap:before {
    height: .09375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__name .wrap:before {
    height: 1.2px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__name .wrap:before {
    height: .32vw
  }
}

.app-prd-info__desc {
  transform: scaleX(.85);
  line-height: 1.4;
  opacity: 0;
  transition: all .3s
}

@media screen and (min-width: 769px) {
  .app-prd-info__desc {
    font-size: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__desc {
    font-size: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__desc {
    font-size: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__desc {
    font-size: 3.4666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info__desc {
    margin-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__desc {
    margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__desc {
    margin-top: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__desc {
    margin-top: 2.6666666667vw
  }
}

.app-prd-info__desc span {
  font-size: 120%;
  display: inline-block;
  color: #320a00;
  background-color: #e6d2b4
}

@media screen and (min-width: 769px) {
  .app-prd-info__desc span {
    margin-top: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__desc span {
    margin-top: 10px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__desc span {
    margin-top: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info__desc span {
    padding-left: .46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__desc span {
    padding-left: 6px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__desc span {
    padding-left: 1.6vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-info__desc span {
    padding-right: .46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-info__desc span {
    padding-right: 6px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-info__desc span {
    padding-right: 1.6vw
  }
}

.app-prd-msg {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid currentColor;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center
}

@media screen and (min-width: 769px) {
  .app-prd-msg {
    font-size: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg {
    font-size: 20px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    font-size: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    font-size: 3.4666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-msg {
    width: 62.5vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg {
    width: 800px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    width: 213.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    width: 82.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-msg {
    padding-top: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg {
    padding-top: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-top: 8vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-top: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-msg {
    padding-bottom: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg {
    padding-bottom: 30px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-bottom: 8vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-bottom: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-msg {
    padding-right: 5.46875vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg {
    padding-right: 70px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-right: 18.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-right: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-msg {
    padding-left: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg {
    padding-left: 0
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-left: 0vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    padding-left: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .app-prd-msg {
    margin-top: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg {
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    margin-top: 10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    margin-top: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg {
    display: block
  }
}

.app-prd-msg__desc {
  transform: scaleX(.85);
  line-height: 1.6;
  text-align: center;
  white-space: nowrap
}

@media screen and (min-width: 769px) {
  .app-prd-msg__desc {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg__desc {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg__desc {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg__desc {
    font-size: 4.8vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg__desc {
    line-height: 1.3
  }
}

@media screen and (min-width: 769px) {
  .app-prd-msg__pic {
    width: 18.75vw
  }
}

@media screen and (min-width: 1280px) {
  .app-prd-msg__pic {
    width: 240px
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg__pic {
    width: 64vw
  }
}

@media screen and (max-width: 768px) {
  .app-prd-msg__pic {
    margin-left: auto;
    margin-right: auto
  }
}

@media screen and (max-width: 768px) and (min-width: 769px) {
  .app-prd-msg__pic {
    margin-top: 0vw
  }
}

@media screen and (max-width: 768px) and (min-width: 1280px) {
  .app-prd-msg__pic {
    margin-top: 0
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .app-prd-msg__pic {
    margin-top: 0vw
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .app-prd-msg__pic {
    margin-top: 5.3333333333vw
  }
}

@keyframes LineLeave {
  0% {
    transform: translate(0)
  }

  to {
    transform: translate(100%)
  }
}

@keyframes TextLeave {
  0% {
    transform: translate(0)
  }

  to {
    transform: translateY(-100%)
  }
}

@keyframes TextEnter {
  0% {
    transform: translateY(100%)
  }

  to {
    transform: translate(0)
  }
}

@keyframes LineEnter {
  0% {
    transform: translate(-100%)
  }

  to {
    transform: translate(0)
  }
}

.app-head {
  text-align: center;
  position: relative;
  opacity: 0;
  transform: scale(1.5) rotate(5deg) translateY(-50%)
}

.app-head__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

@media screen and (min-width: 769px) {
  .app-head__bg {
    width: 22.734375vw
  }
}

@media screen and (min-width: 1280px) {
  .app-head__bg {
    width: 291px
  }
}

@media screen and (max-width: 768px) {
  .app-head__bg {
    width: 77.6vw
  }
}

@media screen and (max-width: 768px) {
  .app-head__bg {
    width: 54.9333333333vw
  }
}

.app-head__bg img {
  display: block
}

.app-head__txt {
  position: relative;
  transform: scaleX(.85);
  display: inline-block
}

.app-head.inview {
  transform: none;
  opacity: 1;
  transition: opacity .4s ease .3s, transform 1.2s cubic-bezier(.86, 0, .07, 1)
}

@media screen and (min-width: 769px) {
  .fammily-content {
    padding-top: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-content {
    padding-top: 0
  }
}

@media screen and (max-width: 768px) {
  .fammily-content {
    padding-top: 0vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-content {
    padding-top: 16vw
  }
}

.fammily,
.fammily-top {
  position: relative
}

.fammily-top__pic {
  min-height: 42vw
}

@media screen and (max-width: 768px) {
  .fammily-top__pic {
    min-height: 83vw
  }
}

@media screen and (min-width: 769px) {

  .fammily-top.rufi .fammily-top-head,
  .fammily-top.cho .fammily-top-head {
    left: auto;
    right: 10%
  }
}

.fammily-top-head {
  position: absolute;
  top: 45%;
  left: 10%;
  z-index: 2
}

@media screen and (min-width: 769px) {
  .fammily-top-head {
    font-size: 2.03125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-top-head {
    font-size: 26px
  }
}

@media screen and (max-width: 768px) {
  .fammily-top-head {
    font-size: 6.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-top-head {
    font-size: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-top-head {
    letter-spacing: -.1171875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-top-head {
    letter-spacing: -1.5px
  }
}

@media screen and (max-width: 768px) {
  .fammily-top-head {
    letter-spacing: -.4vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-top-head {
    white-space: nowrap;
    transform: translate(-50%);
    left: 50%;
    top: 13.1%
  }
}

@media screen and (max-width: 768px) and (min-width: 769px) {
  .fammily-top-head .app-head__bg {
    width: 0vw
  }
}

@media screen and (max-width: 768px) and (min-width: 1280px) {
  .fammily-top-head .app-head__bg {
    width: 0px
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .fammily-top-head .app-head__bg {
    width: 0vw
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .fammily-top-head .app-head__bg {
    width: 53.3333333333vw
  }
}

@media screen and (max-width: 768px) and (min-width: 769px) {
  .fammily-top-line img {
    height: 0vw
  }
}

@media screen and (max-width: 768px) and (min-width: 1280px) {
  .fammily-top-line img {
    height: 0px
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .fammily-top-line img {
    height: 0vw
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .fammily-top-line img {
    height: 8vw
  }
}

.fammily-desc {
  text-align: center
}

@media screen and (min-width: 769px) {
  .fammily-desc {
    padding-top: 4.6875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc {
    padding-top: 60px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc {
    padding-top: 16vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc {
    padding-top: 10.6666666667vw
  }
}

.fammily-desc.cho .fammily-desc__item:nth-child(3) {
  align-items: flex-start
}

@media screen and (min-width: 769px) {
  .fammily-desc__head {
    font-size: 1.875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__head {
    font-size: 24px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__head {
    font-size: 6.4vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__head {
    font-size: 5.3333333333vw
  }
}

.fammily-desc__head-inner {
  position: relative;
  display: inline-block
}

@media screen and (min-width: 769px) {
  .fammily-desc__head-inner {
    min-width: 17.96875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__head-inner {
    min-width: 230px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__head-inner {
    min-width: 61.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__head-inner {
    min-width: 45.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-desc__head-inner {
    padding-left: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__head-inner {
    padding-left: 20px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__head-inner {
    padding-left: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-desc__head-inner {
    padding-right: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__head-inner {
    padding-right: 20px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__head-inner {
    padding-right: 5.3333333333vw
  }
}

.fammily-desc__head .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.fammily-desc__head span {
  display: inline-block;
  transform-origin: center;
  transform: scaleX(.85)
}

.fammily-desc__list {
  text-align: left;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .fammily-desc__list {
    gap: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__list {
    gap: 40px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__list {
    gap: 10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__list {
    gap: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-desc__list {
    width: 78.125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__list {
    width: 1000px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__list {
    width: 266.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__list {
    width: 100vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-desc__list {
    margin-top: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__list {
    margin-top: 50px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__list {
    margin-top: 13.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__list {
    margin-top: 5.3333333333vw
  }
}

.fammily-desc__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center
}

@media screen and (min-width: 769px) {
  .fammily-desc__item {
    font-size: 1.875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__item {
    font-size: 24px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__item {
    font-size: 6.4vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-desc__item {
    gap: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__item {
    gap: 0px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__item {
    gap: 0vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__item {
    gap: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__item {
    display: flex;
    flex-direction: column-reverse
  }
}

@media screen and (min-width: 769px) {
  .fammily-desc__pic {
    width: 34.375vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__pic {
    width: 440px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__pic {
    width: 117.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__pic {
    width: 80vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__pic {
    margin-left: auto;
    margin-right: auto
  }
}

.fammily-desc__desc {
  width: 109%
}

@media screen and (min-width: 769px) {
  .fammily-desc__desc {
    font-size: 1.875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__desc {
    font-size: 24px
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__desc {
    font-size: 6.4vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__desc {
    font-size: 4vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-desc__desc {
    margin-top: 0vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-desc__desc {
    margin-top: 0
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__desc {
    margin-top: 0vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-desc__desc {
    width: 100%;
    text-align: center
  }
}

.fammily-desc__desc span {
  display: inline-block;
  transform-origin: center;
  transform: scaleX(.85)
}

@media screen and (max-width: 768px) {
  .fammily-desc__desc span {
    width: 110%;
    margin-left: -5%
  }
}

.fammily-vis {
  position: relative;
  text-align: center
}

@media screen and (min-width: 769px) {
  .fammily-vis {
    padding-top: 5.46875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis {
    padding-top: 70px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis {
    padding-top: 18.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis {
    padding-top: 8vw
  }
}

.fammily-vis:before,
.fammily-vis:after {
  content: "";
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: currentColor
}

@media screen and (min-width: 769px) {

  .fammily-vis:before,
  .fammily-vis:after {
    width: 68.75vw
  }
}

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

  .fammily-vis:before,
  .fammily-vis:after {
    width: 880px
  }
}

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

  .fammily-vis:before,
  .fammily-vis:after {
    width: 234.6666666667vw
  }
}

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

  .fammily-vis:before,
  .fammily-vis:after {
    width: 80vw
  }
}

@media screen and (min-width: 769px) {

  .fammily-vis:before,
  .fammily-vis:after {
    height: .078125vw
  }
}

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

  .fammily-vis:before,
  .fammily-vis:after {
    height: 1px
  }
}

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

  .fammily-vis:before,
  .fammily-vis:after {
    height: .2666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-vis:after {
    margin-top: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis:after {
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis:after {
    margin-top: 10.6666666667vw
  }
}

.fammily-vis__head {
  line-height: 1.2
}

@media screen and (min-width: 769px) {
  .fammily-vis__head {
    margin-top: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis__head {
    margin-top: 30px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__head {
    margin-top: 8vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-vis__head {
    font-size: 2.1875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis__head {
    font-size: 28px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__head {
    font-size: 7.4666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__head {
    font-size: 4.8vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__head {
    line-height: 1.5
  }
}

.fammily-vis__head span {
  display: inline-block;
  transform-origin: center;
  transform: scaleX(.85)
}

.fammily-vis__content {
  display: flex;
  justify-content: center;
  align-items: center
}

@media screen and (min-width: 769px) {
  .fammily-vis__content {
    gap: 6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis__content {
    gap: 80px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__content {
    gap: 21.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__content {
    gap: 10.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-vis__content {
    margin-top: 2.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis__content {
    margin-top: 30px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__content {
    margin-top: 8vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__content {
    flex-direction: column
  }
}

.fammily-vis__pic {
  border: 5px solid #a9804c
}

@media screen and (min-width: 769px) {
  .fammily-vis__pic {
    width: 37.34375vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis__pic {
    width: 478px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__pic {
    width: 127.4666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis__pic {
    width: 80vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-vis__pic {
    border: 7px solid #a9804c
  }
}

@media screen and (min-width: 769px) {
  .fammily-vis-share {
    width: 26.171875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis-share {
    width: 335px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share {
    width: 89.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share {
    width: 74.6666666667vw
  }
}

.fammily-vis-share__head {
  position: relative
}

@media screen and (min-width: 769px) {
  .fammily-vis-share__head {
    font-size: 1.71875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis-share__head {
    font-size: 22px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__head {
    font-size: 5.8666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__head {
    font-size: 4.5333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__head {
    width: 80%;
    margin-left: auto;
    margin-right: auto
  }
}

.fammily-vis-share__head .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.fammily-vis-share__head span {
  display: inline-block;
  transform-origin: center;
  transform: scaleX(.85)
}

.fammily-vis-share__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

@media screen and (min-width: 769px) {
  .fammily-vis-share__list {
    margin-top: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis-share__list {
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__list {
    margin-top: 10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__list {
    margin-top: 5.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-vis-share__list {
    gap: 4.6875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-vis-share__list {
    gap: 60px
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__list {
    gap: 16vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__list {
    gap: 11.7333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-vis-share__list {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center
  }
}

@media screen and (max-width: 768px) and (min-width: 769px) {
  .fammily-vis-share__list {
    width: 0vw
  }
}

@media screen and (max-width: 768px) and (min-width: 1280px) {
  .fammily-vis-share__list {
    width: 0px
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .fammily-vis-share__list {
    width: 0vw
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .fammily-vis-share__list {
    width: 72vw
  }
}

.fammily-vis-share__item a {
  transition: all .3s ease
}

.fammily-vis-share__item a:hover {
  opacity: .5
}

.fammily-links {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .fammily-links {
    width: 68.75vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links {
    width: 880px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links {
    width: 234.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links {
    width: 100vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links {
    padding-top: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links {
    padding-top: 50px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links {
    padding-top: 13.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links {
    padding-bottom: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links {
    padding-bottom: 50px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links {
    padding-bottom: 13.3333333333vw
  }
}

.fammily-links__head {
  line-height: 1.8;
  text-align: center
}

@media screen and (min-width: 769px) {
  .fammily-links__head {
    font-size: 1.40625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__head {
    font-size: 18px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__head {
    font-size: 4.8vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__head {
    font-size: 4vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__head {
    white-space: nowrap
  }
}

.fammily-links__head span {
  display: inline-block;
  transform-origin: center;
  transform: scaleX(.85)
}

.fammily-links__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .fammily-links__list {
    gap: 3.90625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__list {
    gap: 50px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__list {
    gap: 13.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__list {
    gap: 6.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links__list {
    margin-top: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__list {
    margin-top: 40px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__list {
    margin-top: 10.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links__list {
    width: 70.3125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__list {
    width: 900px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__list {
    width: 240vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__list {
    width: 80vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__list {
    display: flex;
    flex-direction: column
  }
}

.fammily-links__item a {
  transition: all .3s ease
}

.fammily-links__item a:hover {
  opacity: .5
}

.fammily-links__item a {
  border: 1px solid currentColor;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center
}

@media screen and (min-width: 769px) {
  .fammily-links__item a {
    padding-top: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__item a {
    padding-top: 10px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__item a {
    padding-top: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links__item a {
    padding-bottom: .78125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__item a {
    padding-bottom: 10px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__item a {
    padding-bottom: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links__item a {
    gap: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__item a {
    gap: 20px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__item a {
    gap: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__item a {
    gap: 2.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links__item a {
    font-size: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__item a {
    font-size: 20px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__item a {
    font-size: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__item a {
    font-size: 4vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-links__icon {
    width: 3.125vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-links__icon {
    width: 40px
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__icon {
    width: 10.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-links__icon {
    width: 5.3333333333vw
  }
}

.fammily-links__txt {
  transform: scaleX(.85)
}

.fammily-bottom {
  border-bottom: 1px solid white
}

.fammily-bottom__inner {
  border-top: 1px solid currentColor;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .fammily-bottom__inner {
    padding-top: 6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-bottom__inner {
    padding-top: 80px
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__inner {
    padding-top: 21.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__inner {
    padding-top: 10.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-bottom__inner {
    padding-bottom: 6.25vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-bottom__inner {
    padding-bottom: 80px
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__inner {
    padding-bottom: 21.3333333333vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-bottom__inner {
    width: 68.75vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-bottom__inner {
    width: 880px
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__inner {
    width: 234.6666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__inner {
    width: 80vw
  }
}

.fammily-bottom__copy {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .fammily-bottom__copy {
    width: 30.546875vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-bottom__copy {
    width: 391px
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__copy {
    width: 104.2666666667vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__copy {
    width: 72.8vw
  }
}

.fammily-bottom__logo {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 769px) {
  .fammily-bottom__logo {
    width: 16.09375vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-bottom__logo {
    width: 206px
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__logo {
    width: 54.9333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__logo {
    width: 42.6666666667vw
  }
}

@media screen and (min-width: 769px) {
  .fammily-bottom__logo {
    margin-top: 1.5625vw
  }
}

@media screen and (min-width: 1280px) {
  .fammily-bottom__logo {
    margin-top: 20px
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__logo {
    margin-top: 5.3333333333vw
  }
}

@media screen and (max-width: 768px) {
  .fammily-bottom__logo {
    margin-top: 6.6666666667vw
  }
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: .7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 1
}

.splide__arrow svg {
  fill: #000;
  height: 1.2em;
  width: 1.2em
}

.splide__arrow:hover:not(:disabled) {
  opacity: .9
}

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: .7;
  padding: 0;
  position: relative;
  transition: transform .2s linear;
  width: 8px
}

.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
  z-index: 1
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: .9
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

@supports (outline-offset:-3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf
  }
}

@supports (outline-offset:-3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf
  }

  .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
    border-color: #0bf
  }
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__track--nav>.splide__list>.splide__slide {
  border: 3px solid transparent;
  cursor: pointer
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  border: 3px solid #000
}

.splide__track--nav>.splide__list>.splide__slide {
  border: 3px solid transparent;
  cursor: pointer;
  opacity: .7
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  border: 3px solid #00bfff;
  opacity: 1
}

.splide__arrow svg {
  fill: #00bfff;
  height: 2.5em;
  transition: fill .2s linear;
  width: 2.5em
}

.splide__arrow:hover:not(:disabled) svg {
  fill: #66d9ff
}

.splide__arrow:focus-visible {
  outline: 3px solid #00bfff;
  outline-offset: 3px
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #00bfff;
  outline-offset: 3px
}

.splide__pagination {
  bottom: .5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin: 3px;
  padding: 0;
  position: relative;
  transition: background-color .2s linear, transform .2s linear;
  width: 10px
}

.splide__pagination__page.is-active {
  background: #00bfff;
  transform: scale(1.4);
  z-index: 1
}

.splide__pagination__page:hover {
  background: #66d9ff;
  cursor: pointer;
  opacity: .9
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #00bfff;
  outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #00bfff;
  outline-offset: 3px
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #00bfff;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

@supports (outline-offset:-3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #00bfff;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide__slide:focus-visible {
    border: 3px solid #00bfff
  }
}

@supports (outline-offset:-3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #00bfff;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #00bfff
  }

  .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
    border-color: #00bfff
  }
}

.splide__toggle:focus-visible {
  outline: 3px solid #00bfff;
  outline-offset: 3px
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #00bfff;
  outline-offset: 3px
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: .5em;
  top: 0
}

.splide__track--nav>.splide__list>.splide__slide {
  border: 3px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: .7
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  border: 3px solid #20b2aa;
  opacity: 1
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%)
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg)
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg)
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 1em;
  top: 0
}

.splide__pagination--ttb .splide__pagination__page {
  height: 20px;
  width: 5px
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2.5em;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5em;
  z-index: 1
}

.splide__arrow svg {
  fill: #20b2aa;
  height: 2.5em;
  transition: fill .2s linear;
  width: 2.5em
}

.splide__arrow:hover:not(:disabled) svg {
  fill: #57e1d9
}

.splide__arrow:disabled {
  opacity: .3
}

.splide__arrow:focus-visible {
  outline: 3px solid #20b2aa;
  outline-offset: 3px
}

.splide__arrow--prev {
  left: 1em
}

.splide__arrow--prev svg {
  transform: scaleX(-1)
}

.splide__arrow--next {
  right: 1em
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #20b2aa;
  outline-offset: 3px
}

.splide__pagination {
  bottom: 1em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 2.5px;
  display: inline-block;
  height: 5px;
  margin: 3px;
  padding: 0;
  position: relative;
  transition: background-color .2s linear;
  width: 20px
}

.splide__pagination__page.is-active {
  background: #20b2aa;
  z-index: 1
}

.splide__pagination__page:hover {
  background: #57e1d9;
  cursor: pointer;
  opacity: .9
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #20b2aa;
  outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #20b2aa;
  outline-offset: 3px
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-radius: 4px
}

.splide__slide:focus {
  outline: 0
}

@supports (outline-offset:-3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #20b2aa;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide__slide:focus-visible {
    border: 3px solid #20b2aa
  }
}

@supports (outline-offset:-3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #20b2aa;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #20b2aa
  }

  .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
    border-color: #20b2aa
  }
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #20b2aa;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px
}

.splide__progress__bar {
  background: #ccc;
  height: 3px
}

.splide__toggle {
  cursor: pointer
}

.splide__toggle:focus-visible {
  outline: 3px solid #20b2aa;
  outline-offset: 3px
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #20b2aa;
  outline-offset: 3px
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1)
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1)
}

.splide__slider>.splide__arrows .splide__arrow--prev {
  left: -2.5em
}

.splide__slider>.splide__arrows .splide__arrow--next {
  right: -2.5em
}

.splide {
  padding: 3em
}

@keyframes splide-loading {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.splide__track--fade>.splide__list>.splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
  opacity: 1;
  z-index: 1
}

.splide--rtl {
  direction: rtl
}

.splide__track--ttb>.splide__list {
  display: block
}

.splide__container {
  box-sizing: border-box;
  position: relative
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
  display: none
}

.splide__progress__bar {
  width: 0
}

.splide {
  position: relative;
  visibility: hidden
}

.splide.is-initialized,
.splide.is-rendered {
  visibility: visible
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative
}

.splide__slide img {
  vertical-align: bottom
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0
}