html {
  font-size: 62.5%;
}

body {
  color: #000;
  background-color: #fff;
  line-height: 1;
  font-size: 1.6rem;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0 auto;
  font-family: Meiryo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
}

a {
  color: #000;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

button {
  font-family: Meiryo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
}

.container {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.page-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
}

.page {
  width: calc(100% - 200px);
  max-width: 1410px;
  aspect-ratio: 1 / 0.765;
  margin: 0 auto;
}

@media only screen and (min-width: 1610px) {
  .page {
    width: 1410px;
    height: 1080px;
  }
}

@media only screen and (max-height: 767px) {
  .page {
    margin: 0 auto;
  }
}

.main {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 10;
}

.main-box {
  position: relative;
  padding: 15vw 5vw;
  height: 100%;
}

@media only screen and (min-width: 1610px) {
  .main-box {
    padding: 170px;
  }
}

.card {
  position: relative;
  width: 80%;
  aspect-ratio: 1 / 0.471;
  margin: 0 auto;
}

@media only screen and (min-width: 1610px) {
  .card {
    width: 934px;
    height: 440px;
  }
}

.card__content {
  position: absolute;
  width: 100%;
  top: 15%;
  z-index: 20;
  pointer-events: none;
}

.card__calc, .card__calc--front, .card__calc--back {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  pointer-events: none;
}

.card__content .no, .card__content .no--null, .card__content .no--0, .card__content .no--1, .card__content .no--2, .card__content .no--3, .card__content .no--4, .card__content .no--5, .card__content .no--6, .card__content .no--7, .card__content .no--8, .card__content .no--9, .card__content .no--1-10,
.card__content .no--1-1 {
  display: inline-block;
  width: 20%;
  aspect-ratio: 1 / 1.428;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-image: url("../img/common/calc_card/calc_num.png");
  vertical-align: middle;
}

.card__content .no--null {
  width: 0;
  display: none;
}

.card__content .no--0 {
  background-position: 0% 0;
}

.card__content .no--1 {
  background-position: 11.2% 0;
}

.card__content .no--2 {
  background-position: 22.4% 0;
}

.card__content .no--3 {
  background-position: 33.6% 0;
}

.card__content .no--4 {
  background-position: 44.8% 0;
}

.card__content .no--5 {
  background-position: 56% 0;
}

.card__content .no--6 {
  background-position: 67.2% 0;
}

.card__content .no--7 {
  background-position: 78.4% 0;
}

.card__content .no--8 {
  background-position: 89.6% 0;
}

.card__content .no--9 {
  background-position: 100.8% 0;
}

.card__content .no--1-10,
.card__content .no--1-1 {
  background-position: 11.2% 0;
}

.card__content .symbol {
  display: inline-block;
  width: 22%;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.card__content .symbol--plus {
  background-image: url("../img/common/calc_card/calc_plus.png");
}

.card__content .symbol--minus {
  background-image: url("../img/common/calc_card/calc_minus.png");
}

.card__content .symbol--multi {
  background-image: url("../img/common/calc_card/calc_multi.png");
}

.card__base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  -webkit-transform-style: flat;
          transform-style: flat;
}

.card__base img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.card__base .card__paper {
  width: 98%;
}

.card__base.turn-up .card__paper {
  -webkit-transform: perspective(2000px) rotateY(0);
          transform: perspective(2000px) rotateY(0);
  -webkit-animation: turn-up-card-paper 0.5s ease 0.15s 1 normal forwards;
          animation: turn-up-card-paper 0.5s ease 0.15s 1 normal forwards;
}

.card__base.turn-up .card__shadow {
  -webkit-animation: turn-up-card-shadow 0.8s ease 0s 1 normal forwards;
          animation: turn-up-card-shadow 0.8s ease 0s 1 normal forwards;
}

.card__base.turn-over .card__paper {
  -webkit-transform: perspective(2000px) rotateY(180deg);
          transform: perspective(2000px) rotateY(180deg);
  -webkit-animation: turn-over-card-paper 0.5s ease 0.15s 1 normal forwards;
          animation: turn-over-card-paper 0.5s ease 0.15s 1 normal forwards;
}

.card__base.turn-over .card__shadow {
  -webkit-animation: turn-over-card-shadow 0.8s ease 0s 1 normal forwards;
          animation: turn-over-card-shadow 0.8s ease 0s 1 normal forwards;
}

.card__paper {
  z-index: 12;
}

.card__shadow {
  z-index: 10;
}

@-webkit-keyframes turn-up-card-paper {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0);
            transform: perspective(2000px) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(2000px) rotateY(90deg);
            transform: perspective(2000px) rotateY(90deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
            transform: perspective(2000px) rotateY(180deg);
  }
}

@keyframes turn-up-card-paper {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0);
            transform: perspective(2000px) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(2000px) rotateY(90deg);
            transform: perspective(2000px) rotateY(90deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
            transform: perspective(2000px) rotateY(180deg);
  }
}

@-webkit-keyframes turn-up-card-shadow {
  0% {
    opacity: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  20% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  80% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

@keyframes turn-up-card-shadow {
  0% {
    opacity: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  20% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  80% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

@-webkit-keyframes turn-over-card-paper {
  0% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
            transform: perspective(2000px) rotateY(180deg);
  }
  50% {
    -webkit-transform: perspective(2000px) rotateY(90deg);
            transform: perspective(2000px) rotateY(90deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0deg);
            transform: perspective(2000px) rotateY(0deg);
  }
}

@keyframes turn-over-card-paper {
  0% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
            transform: perspective(2000px) rotateY(180deg);
  }
  50% {
    -webkit-transform: perspective(2000px) rotateY(90deg);
            transform: perspective(2000px) rotateY(90deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0deg);
            transform: perspective(2000px) rotateY(0deg);
  }
}

@-webkit-keyframes turn-over-card-shadow {
  0% {
    opacity: 1;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
  20% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  80% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes turn-over-card-shadow {
  0% {
    opacity: 1;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
  20% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  80% {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

.control {
  padding-top: 5%;
  width: 100%;
}

.control .nav {
  width: 60%;
  max-width: 670px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  padding: 8px;
}

.control .nav__btn, .control .nav__btn--prev, .control .nav__btn--next, .control .nav__btn--turn {
  border: 0;
  outline: 0;
  cursor: pointer;
  background-color: transparent;
}

.control .nav__btn img, .control .nav__btn--prev img, .control .nav__btn--next img, .control .nav__btn--turn img {
  width: 100%;
}

.control .nav__btn--prev {
  width: 12%;
}

.control .nav__btn--next {
  width: 12%;
}

.control .nav__btn--turn {
  width: 36%;
  aspect-ratio: 1 / 0.3;
  font-size: 2vw;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb23f), to(#ff9335));
  background-image: linear-gradient(#ffb23f, #ff9335);
  border: solid 1px #ff9335;
  border-radius: 15% / 50%;
}

@media only screen and (min-width: 1610px) {
  .control .nav__btn--turn {
    font-size: 1.85em;
  }
}

.control .order {
  padding-top: 3%;
}

.control .order-box {
  position: relative;
  width: 20%;
  max-width: 300px;
  margin: 0 auto;
}

.control .order-box::before {
  content: '';
  position: absolute;
  display: block;
  width: 12%;
  aspect-ratio: 1 / 1;
  top: 25%;
  right: 5%;
  border-radius: 50%;
  background-color: #ff9636;
  background-image: url("../img/common/icon_arrow_down.png");
  background-repeat: no-repeat;
  background-position: 50% 60%;
  pointer-events: none;
}

.control .order__current,
.control .order__items {
  position: relative;
  color: #f87b28;
  background-color: #fff7ed;
  border: solid 2px #f87b28;
  font-size: 1.8vw;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
}

@media only screen and (min-width: 1610px) {
  .control .order__current,
  .control .order__items {
    font-size: 1.5em;
  }
}

.control .order__current {
  padding: 8% 5%;
  aspect-ratio: 1 / 0.25;
  border-radius: 14% / 50%;
}

.control .order__items {
  padding: 0 10%;
  aspect-ratio: 1 / 0.5;
  border-radius: 14% / 25%;
}

.control .order__item {
  padding: 8% 0;
}

.control .order__item:hover {
  background-color: #fff09e;
}
/*# sourceMappingURL=maps/01_02-05.css.map */