{"version":3,"sources":["_basic.scss","01_02-05.css","_setting.scss","_module.scss","_common.scss","_calc_card.scss"],"names":[],"mappings":"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","file":"01_02-05.css","sourcesContent":["@charset \"UTF-8\";\r\n\r\n// =======================================\r\n// basic\r\n// =======================================\r\n\r\nhtml {\r\n  font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n  color: #000;\r\n  background-color: #fff;\r\n  line-height: 1;\r\n  font-size: 1.6rem;\r\n  -webkit-text-size-adjust: 100%;\r\n  -webkit-font-smoothing: antialiased;\r\n  width: 100%;\r\n  height: 100%;\r\n  min-width: 320px;\r\n  // min-width: 1024px;\r\n  // min-height: 768px;\r\n  margin: 0 auto;\r\n  font-family: $font-base;\r\n}\r\n\r\na {\r\n  color: #000;\r\n  transition: 0.5s;\r\n}\r\n\r\nbutton {\r\n  font-family: $font-base;\r\n}\r\n","html {\n  font-size: 62.5%;\n}\n\nbody {\n  color: #000;\n  background-color: #fff;\n  line-height: 1;\n  font-size: 1.6rem;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n  width: 100%;\n  height: 100%;\n  min-width: 320px;\n  margin: 0 auto;\n  font-family: Meiryo, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Hiragino Kaku Gothic ProN\", sans-serif;\n}\n\na {\n  color: #000;\n  transition: 0.5s;\n}\n\nbutton {\n  font-family: Meiryo, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Hiragino Kaku Gothic ProN\", sans-serif;\n}\n\n.container {\n  display: block;\n  position: relative;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.page-container {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n}\n\n.page {\n  width: calc(100% - 200px);\n  max-width: 1410px;\n  aspect-ratio: 1 / 0.765;\n  margin: 0 auto;\n}\n\n@media only screen and (min-width: 1610px) {\n  .page {\n    width: 1410px;\n    height: 1080px;\n  }\n}\n\n@media only screen and (max-height: 767px) {\n  .page {\n    margin: 0 auto;\n  }\n}\n\n.main {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n  z-index: 10;\n}\n\n.main-box {\n  position: relative;\n  padding: 15vw 5vw;\n  height: 100%;\n}\n\n@media only screen and (min-width: 1610px) {\n  .main-box {\n    padding: 170px;\n  }\n}\n\n.card {\n  position: relative;\n  width: 80%;\n  aspect-ratio: 1 / 0.471;\n  margin: 0 auto;\n}\n\n@media only screen and (min-width: 1610px) {\n  .card {\n    width: 934px;\n    height: 440px;\n  }\n}\n\n.card__content {\n  position: absolute;\n  width: 100%;\n  top: 15%;\n  z-index: 20;\n  pointer-events: none;\n}\n\n.card__calc, .card__calc--front, .card__calc--back {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  pointer-events: none;\n}\n\n.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,\n.card__content .no--1-1 {\n  display: inline-block;\n  width: 20%;\n  aspect-ratio: 1 / 1.428;\n  background-size: auto 100%;\n  background-repeat: no-repeat;\n  background-image: url(\"../img/common/calc_card/calc_num.png\");\n  vertical-align: middle;\n}\n\n.card__content .no--null {\n  width: 0;\n  display: none;\n}\n\n.card__content .no--0 {\n  background-position: 0% 0;\n}\n\n.card__content .no--1 {\n  background-position: 11.2% 0;\n}\n\n.card__content .no--2 {\n  background-position: 22.4% 0;\n}\n\n.card__content .no--3 {\n  background-position: 33.6% 0;\n}\n\n.card__content .no--4 {\n  background-position: 44.8% 0;\n}\n\n.card__content .no--5 {\n  background-position: 56% 0;\n}\n\n.card__content .no--6 {\n  background-position: 67.2% 0;\n}\n\n.card__content .no--7 {\n  background-position: 78.4% 0;\n}\n\n.card__content .no--8 {\n  background-position: 89.6% 0;\n}\n\n.card__content .no--9 {\n  background-position: 100.8% 0;\n}\n\n.card__content .no--1-10,\n.card__content .no--1-1 {\n  background-position: 11.2% 0;\n}\n\n.card__content .symbol {\n  display: inline-block;\n  width: 22%;\n  aspect-ratio: 1 / 1;\n  background-size: contain;\n  background-repeat: no-repeat;\n  vertical-align: middle;\n}\n\n.card__content .symbol--plus {\n  background-image: url(\"../img/common/calc_card/calc_plus.png\");\n}\n\n.card__content .symbol--minus {\n  background-image: url(\"../img/common/calc_card/calc_minus.png\");\n}\n\n.card__content .symbol--multi {\n  background-image: url(\"../img/common/calc_card/calc_multi.png\");\n}\n\n.card__base {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n  pointer-events: none;\n  transform-style: flat;\n}\n\n.card__base img {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n\n.card__base .card__paper {\n  width: 98%;\n}\n\n.card__base.turn-up .card__paper {\n  transform: perspective(2000px) rotateY(0);\n  animation: turn-up-card-paper 0.5s ease 0.15s 1 normal forwards;\n}\n\n.card__base.turn-up .card__shadow {\n  animation: turn-up-card-shadow 0.8s ease 0s 1 normal forwards;\n}\n\n.card__base.turn-over .card__paper {\n  transform: perspective(2000px) rotateY(180deg);\n  animation: turn-over-card-paper 0.5s ease 0.15s 1 normal forwards;\n}\n\n.card__base.turn-over .card__shadow {\n  animation: turn-over-card-shadow 0.8s ease 0s 1 normal forwards;\n}\n\n.card__paper {\n  z-index: 12;\n}\n\n.card__shadow {\n  z-index: 10;\n}\n\n@keyframes turn-up-card-paper {\n  0% {\n    transform: perspective(2000px) rotateY(0);\n  }\n  50% {\n    transform: perspective(2000px) rotateY(90deg);\n  }\n  100% {\n    transform: perspective(2000px) rotateY(180deg);\n  }\n}\n\n@keyframes turn-up-card-shadow {\n  0% {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n  20% {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n  80% {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n  100% {\n    opacity: 1;\n    transform: scaleX(-1);\n  }\n}\n\n@keyframes turn-over-card-paper {\n  0% {\n    transform: perspective(2000px) rotateY(180deg);\n  }\n  50% {\n    transform: perspective(2000px) rotateY(90deg);\n  }\n  100% {\n    transform: perspective(2000px) rotateY(0deg);\n  }\n}\n\n@keyframes turn-over-card-shadow {\n  0% {\n    opacity: 1;\n    transform: scaleX(-1);\n  }\n  20% {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n  80% {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n  100% {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n}\n\n.control {\n  padding-top: 5%;\n  width: 100%;\n}\n\n.control .nav {\n  width: 60%;\n  max-width: 670px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 auto;\n  padding: 8px;\n}\n\n.control .nav__btn, .control .nav__btn--prev, .control .nav__btn--next, .control .nav__btn--turn {\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n  background-color: transparent;\n}\n\n.control .nav__btn img, .control .nav__btn--prev img, .control .nav__btn--next img, .control .nav__btn--turn img {\n  width: 100%;\n}\n\n.control .nav__btn--prev {\n  width: 12%;\n}\n\n.control .nav__btn--next {\n  width: 12%;\n}\n\n.control .nav__btn--turn {\n  width: 36%;\n  aspect-ratio: 1 / 0.3;\n  font-size: 2vw;\n  font-weight: 700;\n  letter-spacing: 0.01em;\n  color: #fff;\n  background-image: linear-gradient(#ffb23f, #ff9335);\n  border: solid 1px #ff9335;\n  border-radius: 15% / 50%;\n}\n\n@media only screen and (min-width: 1610px) {\n  .control .nav__btn--turn {\n    font-size: 1.85em;\n  }\n}\n\n.control .order {\n  padding-top: 3%;\n}\n\n.control .order-box {\n  position: relative;\n  width: 20%;\n  max-width: 300px;\n  margin: 0 auto;\n}\n\n.control .order-box::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 12%;\n  aspect-ratio: 1 / 1;\n  top: 25%;\n  right: 5%;\n  border-radius: 50%;\n  background-color: #ff9636;\n  background-image: url(\"../img/common/icon_arrow_down.png\");\n  background-repeat: no-repeat;\n  background-position: 50% 60%;\n  pointer-events: none;\n}\n\n.control .order__current,\n.control .order__items {\n  position: relative;\n  color: #f87b28;\n  background-color: #fff7ed;\n  border: solid 2px #f87b28;\n  font-size: 1.8vw;\n  font-weight: 700;\n  letter-spacing: 0.01em;\n  text-align: center;\n  cursor: pointer;\n}\n\n@media only screen and (min-width: 1610px) {\n  .control .order__current,\n  .control .order__items {\n    font-size: 1.5em;\n  }\n}\n\n.control .order__current {\n  padding: 8% 5%;\n  aspect-ratio: 1 / 0.25;\n  border-radius: 14% / 50%;\n}\n\n.control .order__items {\n  padding: 0 10%;\n  aspect-ratio: 1 / 0.5;\n  border-radius: 14% / 25%;\n}\n\n.control .order__item {\n  padding: 8% 0;\n}\n\n.control .order__item:hover {\n  background-color: #fff09e;\n}\n","@charset \"UTF-8\";\r\n\r\n// =======================================\r\n// setting\r\n// =======================================\r\n\r\n// color\r\n$col-red: #f42733;\r\n$col-cyan: #03b8df;\r\n\r\n// font\r\n$font-base: Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif;\r\n\r\n\r\n// media query\r\n\r\n@mixin mq_h_max {\r\n  @media only screen and (max-height: 767px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_w_max {\r\n  @media only screen and (max-height: 1023px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_wide {\r\n  @media only screen and (min-width: 1610px) {\r\n    @content\r\n  }\r\n};","@charset \"UTF-8\";\r\n\r\n// ==============================================================================\r\n// module\r\n// ==============================================================================\r\n\r\n// ------------------------------------------------------------------------------\r\n// container\r\n// ------------------------------------------------------------------------------\r\n.container {\r\n  display: block;\r\n  position: relative;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n}\r\n\r\n","@charset \"UTF-8\";\r\n\r\n.page-container {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 100vh;\r\n}\r\n\r\n.page {\r\n  width: calc(100% - 200px);\r\n  max-width: 1410px;\r\n  aspect-ratio: 1 / 0.765;\r\n  margin: 0 auto;\r\n\r\n  @include mq_wide {\r\n    width: 1410px;\r\n    height: 1080px;\r\n  }\r\n\r\n  @include mq_h_max {\r\n    margin: 0 auto;\r\n  };\r\n}\r\n\r\n.main {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: #fff;\r\n  z-index: 10;\r\n}\r\n\r\n.main-box {\r\n  position: relative;\r\n  padding: 15vw 5vw;\r\n  height: 100%;\r\n\r\n  @include mq_wide {\r\n    padding: 170px;\r\n  }\r\n}\r\n","@charset \"UTF-8\";\r\n\r\n// ==============================================================================\r\n// calc card\r\n// ==============================================================================\r\n\r\n\r\n// ------------------------------------------------------------------------------\r\n// card\r\n// ------------------------------------------------------------------------------\r\n.card {\r\n  position: relative;\r\n  width: 80%;\r\n  aspect-ratio: 1 / 0.471;\r\n  margin: 0 auto;\r\n\r\n  @include mq_wide {\r\n    width: 934px;\r\n    height: 440px;  \r\n  }\r\n}\r\n\r\n.card__content {\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 15%;\r\n  // right: 20px;\r\n  // bottom: 45px;\r\n  z-index: 20;\r\n  pointer-events: none;\r\n}\r\n\r\n.card__calc {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.card__calc--front {\r\n  @extend .card__calc;\r\n\r\n}\r\n\r\n.card__calc--back {\r\n  @extend .card__calc;\r\n\r\n}\r\n\r\n.card__content {\r\n\r\n  .no {\r\n    display: inline-block;\r\n    // width: 196px;\r\n    width: 20%;\r\n    aspect-ratio: 1 / 1.428;\r\n    background-size: auto 100%;\r\n    background-repeat: no-repeat;\r\n    background-image: url('../img/common/calc_card/calc_num.png');\r\n    vertical-align: middle;\r\n  }\r\n\r\n  .no--null {\r\n    @extend .no;\r\n\r\n    width: 0;\r\n    display: none;\r\n  }\r\n\r\n  @for $i from 0 through 9 {\r\n    .no--#{$i} {\r\n      @extend .no;\r\n\r\n      background-position: #{$i * 11.2}% 0;\r\n    }\r\n  }\r\n\r\n  // 2桁の場合\r\n  .no--1-10,\r\n  .no--1-1 {\r\n    @extend .no;\r\n\r\n    background-position: 11.2% 0;\r\n  }\r\n\r\n  .symbol {\r\n    display: inline-block;\r\n    // width: 252px;\r\n    width: 22%;\r\n    aspect-ratio: 1 / 1;\r\n    background-size: contain;\r\n    background-repeat: no-repeat;\r\n    vertical-align: middle;\r\n  }\r\n\r\n  .symbol--plus {\r\n    background-image: url('../img/common/calc_card/calc_plus.png');\r\n  }\r\n\r\n  .symbol--minus {\r\n    background-image: url('../img/common/calc_card/calc_minus.png');\r\n  }\r\n\r\n  .symbol--multi {\r\n    background-image: url('../img/common/calc_card/calc_multi.png');\r\n  }\r\n}\r\n\r\n.card__base {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 10;\r\n  pointer-events: none;\r\n  transform-style: flat;\r\n\r\n  img {\r\n    display: block;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n  }\r\n\r\n  .card__paper {\r\n    width: 98%;\r\n  }\r\n  \r\n  &.turn-up {\r\n\r\n    .card__paper {\r\n      transform: perspective(2000px) rotateY(0);\r\n      animation: turn-up-card-paper 0.5s ease 0.15s 1 normal forwards;\r\n    }\r\n    \r\n    .card__shadow {\r\n      animation: turn-up-card-shadow 0.8s ease 0s 1 normal forwards;\r\n    }\r\n  }\r\n\r\n  &.turn-over {\r\n    .card__paper {\r\n      transform: perspective(2000px) rotateY(180deg);\r\n      animation: turn-over-card-paper 0.5s ease 0.15s 1 normal forwards;\r\n    }\r\n    \r\n    .card__shadow {\r\n      animation: turn-over-card-shadow 0.8s ease 0s 1 normal forwards;\r\n    }\r\n  }\r\n}\r\n\r\n.card__paper {\r\n  z-index: 12;\r\n}\r\n\r\n.card__shadow {\r\n  z-index: 10;\r\n}\r\n\r\n@keyframes turn-up-card-paper {\r\n  0% {\r\n    transform: perspective(2000px) rotateY(0);\r\n  }\r\n  50% {\r\n    transform: perspective(2000px) rotateY(90deg);\r\n  }\r\n  100% {\r\n    transform: perspective(2000px) rotateY(180deg);\r\n  }\r\n\r\n  // 0% {\r\n  //   transform: scaleX(1) skewY(0);\r\n  // }\r\n  // 50% {\r\n  //   transform: scaleX(0) skewY(-20deg);\r\n  // }\r\n  // 100% {\r\n  //   transform: scaleX(-1) skewY(0);\r\n  // }\r\n}\r\n\r\n@keyframes turn-up-card-shadow {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n  20% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  80% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scaleX(-1);\r\n  }\r\n}\r\n\r\n@keyframes turn-over-card-paper {\r\n  0% {\r\n    transform: perspective(2000px) rotateY(180deg);\r\n  }\r\n  50% {\r\n    transform: perspective(2000px) rotateY(90deg);\r\n  }\r\n  100% {\r\n    transform: perspective(2000px) rotateY(0deg);\r\n  }\r\n\r\n  // 0% {\r\n  //   transform: scaleX(-1) skewY(0);\r\n  // }\r\n  // 50% {\r\n  //   transform: scaleX(0) skewY(-20deg);\r\n  // }\r\n  // 100% {\r\n  //   transform: scaleX(1) skewY(0);\r\n  // }\r\n}\r\n\r\n@keyframes turn-over-card-shadow {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scaleX(-1);\r\n  }\r\n  20% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  80% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n\r\n\r\n// ------------------------------------------------------------------------------\r\n// control\r\n// ------------------------------------------------------------------------------\r\n.control {\r\n  // padding-top: 30px;\r\n  padding-top: 5%;\r\n  width: 100%;\r\n  \r\n  .nav {\r\n    width: 60%;\r\n    max-width: 670px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin: 0 auto;\r\n    padding: 8px;\r\n  }\r\n\r\n  .nav__btn {\r\n    border: 0;\r\n    outline: 0;\r\n    cursor: pointer;\r\n    background-color: transparent;\r\n\r\n    img {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  .nav__btn--prev {\r\n    @extend .nav__btn;\r\n\r\n    width: 12%;\r\n  }\r\n\r\n  .nav__btn--next {\r\n    @extend .nav__btn;\r\n\r\n    width: 12%;\r\n  }\r\n\r\n  .nav__btn--turn {\r\n    @extend .nav__btn;\r\n\r\n    width: 36%;\r\n    aspect-ratio: 1 / 0.3;\r\n    // padding: 16px 20px;\r\n    font-size: 2vw;\r\n    font-weight: 700;\r\n    letter-spacing: 0.01em;\r\n    color: #fff;\r\n    background-image: linear-gradient(#ffb23f, #ff9335);\r\n    border: solid 1px #ff9335;\r\n    border-radius: 15% / 50%;\r\n    // border-radius: 30px;\r\n\r\n    @include mq_wide {\r\n      font-size: 1.85em;\r\n    }\r\n  }\r\n\r\n  .order {\r\n    padding-top: 3%;\r\n  }\r\n\r\n  .order-box {\r\n    position: relative;\r\n    width: 20%;\r\n    max-width: 300px;\r\n    margin: 0 auto;\r\n\r\n    &::before {\r\n      content: '';\r\n      position: absolute;\r\n      display: block;\r\n      width: 12%;\r\n      aspect-ratio: 1 / 1;\r\n      top: 25%;\r\n      right: 5%;\r\n      border-radius: 50%;\r\n      background-color: #ff9636;\r\n      background-image: url('../img/common/icon_arrow_down.png');\r\n      background-repeat: no-repeat;\r\n      background-position: 50% 60%;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  .order__current,\r\n  .order__items {\r\n    position: relative;\r\n    color: #f87b28;\r\n    background-color: #fff7ed;\r\n    border: solid 2px #f87b28;\r\n    font-size: 1.8vw;\r\n    font-weight: 700;\r\n    letter-spacing: 0.01em;\r\n    text-align: center;\r\n    cursor: pointer;\r\n\r\n    @include mq_wide {\r\n      font-size: 1.5em;\r\n    }\r\n  }\r\n\r\n  .order__current {\r\n    // padding: 20px 10px 18px;\r\n    padding: 8% 5%;\r\n    aspect-ratio: 1 / 0.25;\r\n    border-radius: 14% / 50%;\r\n  }\r\n\r\n  .order__items {\r\n    // padding: 10px 10px 8px;\r\n    // padding-top: 8%;\r\n    padding: 0 10%;\r\n    aspect-ratio: 1 / 0.5;\r\n    border-radius: 14% / 25%;\r\n  }\r\n\r\n  .order__item {\r\n    // padding: 10px 10px 10px;\r\n    padding: 8% 0;\r\n\r\n    &:hover {\r\n      background-color: #fff09e;\r\n    }\r\n  }\r\n}\r\n"]}