*, *:after, *:before { box-sizing: border-box; }

.cardContainer { position: relative; width: 245px; height: 420px; min-width: 245px; min-height: 420px; margin: auto auto 30px; perspective: 1000px; }
@media print, screen and (min-width: 768px) { .cardContainer { width: 280px; height: 480px; min-width: 280px; min-height: 480px; } }

.active { transform: translateZ(0px) rotateY(180deg) !important; }

.card { display: inline-block; width: 100%; height: 100%; cursor: pointer; -moz-backface-visibility: hidden; transform-style: preserve-3d; transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1); }
.card:hover { transform: translateZ(0px); }
.card .side { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; width: 100%; height: 100%; background-color: white; }
.card .front { z-index: 2; }
.card .back { cursor: default; transform: rotateY(180deg); }
.card .card__predict { font-size: 50px; font-size: 5rem; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.back { position: relative; }

.tarot__toggle { display: none; }

.page-heading { display: flex; justify-content: center; align-items: center; }
.page-heading .page-heading__icon { margin-right: 18px; width: 23.65px; height: 33.17px; }
@media print, screen and (min-width: 768px) { .page-heading .page-heading__icon { margin-right: 25px; width: 28.52px; height: 40px; } }
.page-heading .page-heading__tarot--icon { width: 24px; height: 33px; background-image: url("../img/tarot/icon_tarot.svg"); background-repeat: no-repeat; background-size: contain; margin-right: 10px; }
@media print, screen and (min-width: 768px) { .page-heading .page-heading__tarot--icon { width: 29px; height: 40px; } }

.tarot .tarot__inner { max-width: 740px; margin-right: auto; margin-left: auto; }

.tarot__header { margin-bottom: 70px; }
.tarot__header .tarot__header--mv { margin-bottom: 30px; }
.tarot__header .tarot__header--desc { font-size: 16px; font-size: 1.6rem; line-height: 2; text-align: center; }
@media print, screen and (min-width: 768px) { .tarot__header .tarot__header--desc { font-size: 20px; font-size: 2rem; } }
.tarot__header .tarot__header--desc p + p { margin-top: 1em; }

.tarot__headline--primary, .tarot__headline--secondary { color: #3BA4EE; font-size: 20px; font-size: 2rem; text-align: center; border-top: 1px solid #3BA4EE; border-bottom: 1px solid #3BA4EE; padding: 10px; margin-bottom: 15px; }

.tarot__headline--secondary { color: #EA9B49; border-color: #EA9B49; }

.tarot__predict { margin-bottom: 65px; }
@media only screen and (max-width: 767px) { .tarot__predict .tarot__predict--list { margin: 0 -10px; } }
.tarot__predict .tarot__predict--item { text-align: center; padding: 0 10px; }
@media print, screen and (min-width: 768px) { .tarot__predict .tarot__predict--item { max-width: 240px; padding: 0 20px; } }
.tarot__predict .tarot__predict--link { display: block; }
@media print, screen and (min-width: 768px) { .tarot__predict .tarot__predict--link { transition-duration: 0.2s; } }
@media print, screen and (min-width: 768px) { .tarot__predict .tarot__predict--link:hover { opacity: 0.8; } }
.tarot__predict .tarot__predict--title { font-size: 16px; font-size: 1.6rem; margin-bottom: 8px; }
@media print, screen and (min-width: 768px) { .tarot__predict .tarot__predict--title { font-size: 20px; font-size: 2rem; } }
.tarot__predict .tarot__predict--img { box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.16); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
@media print, screen and (min-width: 768px) { .tarot__predict .tarot__predict--img { margin-bottom: 15px; } }
.tarot__predict .tarot__predict--txt { color: #3BA4EE; font-size: 14px; font-size: 1.4rem; text-decoration: underline; }

.tarot-prof { margin-bottom: 65px; }
.tarot-prof .tarot-prof__headline { font-size: 16px; font-size: 1.6rem; border-left: 5px solid #3BA4EE; padding-left: 10px; margin-bottom: 20px; }
@media print, screen and (min-width: 768px) { .tarot-prof .tarot-prof__headline { margin-bottom: 10px; } }
.tarot-prof .tarot-prof__inner { background-color: #fff; border: 1px solid #EDEDED; border-radius: 5px; padding: 20px; }
@media only screen and (max-width: 767px) { .tarot-prof .tarot-prof__header { margin-bottom: 20px; } }
@media print, screen and (min-width: 768px) { .tarot-prof .tarot-prof__header { margin-right: 20px; } }
.tarot-prof .tarot-prof__img { width: 81px; min-width: 81px; height: 81px; }
@media only screen and (max-width: 767px) { .tarot-prof .tarot-prof__img { margin-right: 15px; } }
@media print, screen and (min-width: 768px) { .tarot-prof .tarot-prof__img { width: 134px; min-width: 134px; height: 134px; } }
.tarot-prof .tarot-prof__name { color: #3BA4EE; font-size: 20px; font-size: 2rem; font-weight: 700; }
.tarot-prof .tarot-prof__body p + p { margin-top: 1em; }
.tarot-prof .tarot-prof__body a:not([class]) { color: #3BA4EE; text-decoration: underline; }
.tarot-prof .tarot-prof__body a:not([class]):hover { opacity: 0.8; }

.tarot__other { padding-bottom: 20px; }
.tarot__other .tarot__other--heading { font-size: 24px; font-size: 2.4rem; color: #000; }
@media print, screen and (min-width: 768px) { .tarot__other .tarot__other--heading { font-size: 32px; font-size: 3.2rem; } }
.tarot__other .tarot__other--heading::before { content: ""; width: 40px; height: 40px; display: inline-block; background-image: url("../img/tarot/icon_tarot_other.svg"); background-repeat: no-repeat; background-size: contain; margin-right: 10px; }
.tarot__other .tarot__other--heading__icon { margin-right: 10px; margin-bottom: auto; }
@media print, screen and (min-width: 768px) { .tarot__other .tarot__other--heading__icon { margin-right: 20px; } }
.tarot__other .tarot__other--link { transition-duration: 0.2s; }
.tarot__other .tarot__other--link:hover { opacity: 0.8; }

.tarot__other .tarot__other--bnr { text-align: center; padding: 0 23px; }
@media print, screen and (min-width: 768px) { .tarot__other .tarot__other--bnr { display: flex; } }
@media print, screen and (min-width: 768px) { .tarot__other .tarot__other--bnr img { max-width: 336px; } }
.tarot__other .tarot__other--link { display: block; }
@media only screen and (max-width: 767px) { .tarot__other .tarot__other--link + .tarot__other--link { margin-top: 30px; } }
@media print, screen and (min-width: 768px) { .tarot__other .tarot__other--link + .tarot__other--link { margin-left: 30px; } }

.card__header { text-align: center; height: 64px; margin-bottom: 20px; }
@media print, screen and (min-width: 768px) { .card__header { height: 80px; } }
.card__header .card__header--popup { font-size: 16px; font-size: 1.6rem; font-weight: 700; line-height: 2; display: inline-block; position: relative; }
@media print, screen and (min-width: 768px) { .card__header .card__header--popup { font-size: 20px; font-size: 2rem; } }
.card__header .card__header--popup::before, .card__header .card__header--popup::after { content: ""; width: 1px; height: 57px; display: inline-block; background-color: #000; position: absolute; bottom: 0; }
.card__header .card__header--popup::before { transform: rotate(-40deg); left: -20px; }
.card__header .card__header--popup::after { transform: rotate(40deg); right: -20px; }

.tarot__description { margin-bottom: 35px; }
.tarot__description .tarot__title { font-size: 16px; font-size: 1.6rem; text-align: center; font-weight: 700; margin-bottom: 15px; }
@media print, screen and (min-width: 768px) { .tarot__description .tarot__title { font-size: 20px; font-size: 2rem; } }
.tarot__description .tarot__comment { font-size: 16px; font-size: 1.6rem; line-height: 2; }

.tarot__interpretation { margin-bottom: 65px; }
.tarot__interpretation .tarot__interpretation--excerpt { font-size: 16px; font-size: 1.6rem; line-height: 2; }

.tarot__action { margin-bottom: 70px; }

.tarot-mean__link { border: 1px solid #3BA4EE; border-radius: 10px; padding: 15px; }
@media print, screen and (min-width: 768px) { .tarot-mean__link { transition-duration: 0.2s; padding: 20px; } }
@media print, screen and (min-width: 768px) { .tarot-mean__link:hover { opacity: 0.8; } }
.tarot-mean__link .tarot-mean__link--thumb { width: 80px; min-width: 80px; height: 80px; border-radius: 10px; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-right: 10px; }
@media print, screen and (min-width: 768px) { .tarot-mean__link .tarot-mean__link--thumb { width: 92px; min-width: 92px; height: 63px; margin-right: 24px; } }
.tarot-mean__link .tarot-mean__link--thumb img { max-width: auto; max-width: initial; max-height: 100%; }

.btn-tarot { color: #fff; font-size: 16px; font-size: 1.6rem; font-weight: 700; width: 280px; height: 70px; display: inline-flex; justify-content: center; align-items: center; border-radius: 100em; background-image: url("../img/icon_arrow_right.svg"); background-repeat: no-repeat; background-position: center right 25px; transition-duration: 0.2s; }
.btn-tarot:hover { color: #fff; opacity: 0.8; }
.btn-tarot.btn-tarot__primary { background-color: #3BA4EE; }
.btn-tarot.btn-tarot__secondary { background-color: #EA9B49; }

.breadcrumb .page-heading__icon { display: none; }