{"version":3,"sources":["_basic.scss","02_03.css","_setting.scss","_module.scss","_common.scss","02_03.scss"],"names":[],"mappings":"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","file":"02_03.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  position: relative;\n  width: 100%;\n  max-width: 1410px;\n  margin: 0 auto;\n}\n\n@media only screen and (min-width: 1024px) {\n  .page {\n    width: calc(100% - 100px);\n  }\n}\n\n@media only screen and (min-width: 1260px) {\n  .page {\n    width: calc(100% - 200px);\n  }\n}\n\n@media only screen and (min-width: 1610px) {\n  .page {\n    width: 1410px;\n  }\n}\n\n.main {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n}\n\n.main-box {\n  position: relative;\n  height: 100%;\n}\n\n.main-box {\n  padding: 0 5%;\n}\n\n@media screen and (max-width: 850px) and (min-aspect-ratio: 4 / 3) {\n  .main-box {\n    padding: 0 15%;\n    background-color: red;\n  }\n}\n\n@media screen and (max-width: 850px) and (min-aspect-ratio: 2 / 1) {\n  .main-box {\n    padding: 0 20%;\n    background-color: blue;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 4 / 3) {\n  .main-box {\n    padding: 0% 12%;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 2 / 1) {\n  .main-box {\n    padding: 0% 18%;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 5 / 2) {\n  .main-box {\n    padding: 0 25%;\n  }\n}\n\n.kuku-container {\n  display: flex;\n  justify-content: center;\n  max-width: 1260px;\n  margin: 0 auto;\n}\n\n@media screen and (max-width: 850px) and (orientation: portrait) {\n  .kuku-container {\n    flex-direction: column;\n  }\n}\n\n.kuku-box {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  padding-top: 2%;\n  padding-left: 2%;\n  background-color: #faf3d6;\n  border-radius: 10px;\n}\n\n.kuku-caption-box {\n  position: absolute;\n  top: 4%;\n  left: 4%;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.kuku-caption-box .caption, .kuku-caption-box .caption--cols, .kuku-caption-box .caption--rows, .kuku-caption-box .kuku-table .caption--col, .kuku-table .kuku-caption-box .caption--col, .kuku-caption-box .kuku-table .caption--row, .kuku-table .kuku-caption-box .caption--row {\n  position: absolute;\n  padding: 0.5%;\n  border-radius: 5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n@media only screen and (min-width: 768px) {\n  .kuku-caption-box .caption, .kuku-caption-box .caption--cols, .kuku-caption-box .caption--rows, .kuku-caption-box .kuku-table .caption--col, .kuku-table .kuku-caption-box .caption--col, .kuku-caption-box .kuku-table .caption--row, .kuku-table .kuku-caption-box .caption--row {\n    padding: 0.8%;\n  }\n}\n\n.kuku-caption-box .caption--cols {\n  width: 75.5%;\n  height: 5%;\n  left: 15.5%;\n  background-color: #fbd6a0;\n  text-align: center;\n}\n\n@media only screen and (min-width: 768px) {\n  .kuku-caption-box .caption--cols {\n    height: 4%;\n  }\n}\n\n.kuku-caption-box .caption--cols img {\n  width: auto;\n  height: 100%;\n}\n\n.kuku-caption-box .caption--rows {\n  height: 75.5%;\n  width: 5%;\n  top: 15.5%;\n  background-color: #cddef2;\n}\n\n@media only screen and (min-width: 768px) {\n  .kuku-caption-box .caption--rows {\n    width: 4%;\n  }\n}\n\n.kuku-caption-box .caption--rows img {\n  width: 100%;\n  height: auto;\n}\n\n.kuku-table-box {\n  position: absolute;\n  width: 86%;\n  aspect-ratio: 1 / 1;\n  top: 10%;\n  left: 10%;\n}\n\n.kuku-table {\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 2px;\n}\n\n@media only screen and (min-width: 768px) {\n  .kuku-table {\n    border-spacing: 5px;\n  }\n}\n\n.kuku-table .caption, .kuku-table .kuku-caption-box .caption--cols, .kuku-caption-box .kuku-table .caption--cols, .kuku-table .kuku-caption-box .caption--rows, .kuku-caption-box .kuku-table .caption--rows, .kuku-table .caption--col, .kuku-table .caption--row {\n  padding: 0.5%;\n  border: 0;\n  background-color: transparent;\n}\n\n.kuku-table .caption__box {\n  border: solid 1px #000;\n  border-radius: 5px;\n  background-color: currentColor;\n}\n\n.kuku-table .caption--col {\n  color: #f5ac3c;\n}\n\n.kuku-table .caption--col:nth-child(2n+1) {\n  color: #fbd6a0;\n}\n\n.kuku-table .caption--row {\n  color: #96bee5;\n}\n\n.kuku-table tr:nth-child(2n+1) .caption--row {\n  color: #cddef2;\n}\n\n.kuku-table th,\n.kuku-table td {\n  width: 10%;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\n.kuku-table td.blank {\n  border: 0;\n  background-color: transparent;\n}\n\n.kuku-table .data-no {\n  padding: 0.5%;\n}\n\n.kuku-table .data-no__box {\n  border: solid 1px #000;\n  border-radius: 5px;\n  background-color: #fff;\n}\n\n.kuku-table .no-box {\n  position: relative;\n  text-align: center;\n  padding: 16% 0 0;\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: pointer;\n  pointer-events: all;\n  text-align: center;\n}\n\n.kuku-table .no-val-box {\n  opacity: 0;\n}\n\n.kuku-table .no-val-box.show {\n  opacity: 1;\n}\n\n.kuku-table .no, .kuku-table .no--null, .kuku-table .no--0, .kuku-table .no--1, .kuku-table .no--2, .kuku-table .no--3, .kuku-table .no--4, .kuku-table .no--5, .kuku-table .no--6, .kuku-table .no--7, .kuku-table .no--8, .kuku-table .no--9, .kuku-table .no--1-10,\n.kuku-table .no--1-1 {\n  display: inline-block;\n  width: 48%;\n  aspect-ratio: 1 / 1.43478;\n  background-size: auto 100%;\n  background-repeat: no-repeat;\n  background-image: url(\"../img/02_03/kuku_num.png\");\n  vertical-align: middle;\n}\n\n.kuku-table .no--null {\n  width: 0;\n  display: none;\n}\n\n.kuku-table .no--0 {\n  background-position: 0% 0;\n}\n\n.kuku-table .no--1 {\n  background-position: 11.15% 0;\n}\n\n.kuku-table .no--2 {\n  background-position: 22.3% 0;\n}\n\n.kuku-table .no--3 {\n  background-position: 33.45% 0;\n}\n\n.kuku-table .no--4 {\n  background-position: 44.6% 0;\n}\n\n.kuku-table .no--5 {\n  background-position: 55.75% 0;\n}\n\n.kuku-table .no--6 {\n  background-position: 66.9% 0;\n}\n\n.kuku-table .no--7 {\n  background-position: 78.05% 0;\n}\n\n.kuku-table .no--8 {\n  background-position: 89.2% 0;\n}\n\n.kuku-table .no--9 {\n  background-position: 100.35% 0;\n}\n\n.kuku-table .no--1-10,\n.kuku-table .no--1-1 {\n  background-position: 11.8% 0;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n  padding-left: 3%;\n}\n\n@media screen and (max-width: 850px) and (orientation: portrait) {\n  .control {\n    justify-content: center;\n    align-items: flex-start;\n    padding: 0;\n    padding-top: 2%;\n  }\n}\n\n.control .nav {\n  margin-bottom: 40%;\n}\n\n@media screen and (max-width: 850px) and (orientation: portrait) {\n  .control .nav {\n    margin: 0;\n  }\n}\n\n.nav__btn {\n  width: 7.5em;\n  aspect-ratio: 1 / 0.3;\n  margin: 2em auto 0;\n  padding: 0.5em;\n  font-size: 3vw;\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  text-align: center;\n}\n\n@media only screen and (min-width: 768px) {\n  .nav__btn {\n    font-size: 2.5vw;\n  }\n}\n\n@media only screen and (min-width: 1024px) {\n  .nav__btn {\n    font-size: 1.5em;\n  }\n}\n\n@media only screen and (min-width: 1260px) {\n  .nav__btn {\n    font-size: 1.8em;\n  }\n}\n\n@media screen and (max-width: 850px) and (min-aspect-ratio: 2 / 1) {\n  .nav__btn {\n    font-size: 2vw;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 2 / 1) {\n  .nav__btn {\n    font-size: 1.6em;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 2 / 1) {\n  .nav__btn {\n    font-size: 1.5em;\n  }\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_sm {\r\n  @media only screen and (min-width: 560px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_md {\r\n  @media only screen and (min-width: 768px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_lg {\r\n  @media only screen and (min-width: 1024px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_xl {\r\n  @media only screen and (min-width: 1260px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_xxl {\r\n  @media only screen and (min-width: 1610px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_sp_portrait {\r\n  @media screen and (max-width: 850px) and (orientation: portrait) {\r\n    @content\r\n  }\r\n}\r\n\r\n\r\n@mixin mq_sp_landscape {\r\n  @media screen and (max-width: 850px) and (min-aspect-ratio: 4/3) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_sp_landscape_low_height {\r\n  @media screen and (max-width: 850px) and (min-aspect-ratio: 2/1) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_sp_landscape_xlow_height {\r\n  @media screen and (max-width: 850px) and (min-aspect-ratio: 5/2) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_low_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 4/3) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_xlow_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 2/1) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_xxlow_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 5/2) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_xxxlow_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 20/9) {\r\n    @content\r\n  }\r\n}\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  position: relative;\r\n  width: 100%;\r\n  max-width: 1410px;\r\n  margin: 0 auto;\r\n\r\n  @include mq_lg {\r\n    width: calc(100% - 100px);\r\n  }\r\n\r\n  @include mq_xl {\r\n    width: calc(100% - 200px);\r\n  }\r\n\r\n  @include mq_xxl {\r\n    width: 1410px;\r\n  }\r\n}\r\n\r\n.main {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 10;\r\n}\r\n\r\n.main-box {\r\n  position: relative;\r\n  height: 100%;\r\n}\r\n","@charset \"UTF-8\";\r\n\r\n@import 'setting';\r\n@import 'basic';\r\n@import 'module';\r\n@import 'common';\r\n\r\n// ==============================================================================\r\n// 2nen 99 table \r\n// ==============================================================================\r\n.main-box {\r\n  padding: 0 5%;\r\n\r\n  @include mq_sp_landscape {\r\n    padding: 0 15%;\r\n    background-color: red;\r\n  }\r\n  @include mq_sp_landscape_low_height {\r\n    padding: 0 20%;\r\n    background-color: blue;\r\n  }\r\n\r\n  @include mq_low_height {\r\n    padding: 0% 12%;\r\n  }\r\n\r\n  @include mq_xlow_height {\r\n    padding: 0% 18%;\r\n  }\r\n\r\n  @include mq_xxlow_height {\r\n    padding: 0 25%;\r\n  }\r\n}\r\n\r\n.kuku-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  max-width: 1260px;\r\n  margin: 0 auto;\r\n\r\n  @include mq_sp_portrait {\r\n    flex-direction: column;    \r\n  }\r\n}\r\n\r\n.kuku-box {\r\n  position: relative;\r\n  width: 100%;\r\n  aspect-ratio: 1 / 1;\r\n  padding-top: 2%;\r\n  padding-left: 2%;\r\n  background-color: #faf3d6;\r\n  border-radius: 10px;\r\n}\r\n\r\n.kuku-caption-box {\r\n  position: absolute;\r\n  top: 4%;\r\n  left: 4%;\r\n  width: 100%;\r\n  height: 100%;\r\n  pointer-events: none;\r\n\r\n  .caption {\r\n    position: absolute;\r\n    padding: 0.5%;\r\n    border-radius: 5px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    @include mq_md {\r\n      padding: 0.8%;\r\n    }\r\n  }\r\n\r\n  .caption--cols {\r\n    @extend .caption;\r\n\r\n    width: 75.5%;\r\n    height: 5%;\r\n    left: 15.5%;    \r\n    background-color: #fbd6a0;\r\n    text-align: center;\r\n\r\n    @include mq_md {\r\n      height: 4%;\r\n    }\r\n\r\n    img {\r\n      width: auto;\r\n      height: 100%;\r\n    }\r\n   }\r\n\r\n  .caption--rows {\r\n    @extend .caption;\r\n\r\n    height: 75.5%;\r\n    width: 5%;\r\n    top: 15.5%;\r\n    background-color: #cddef2;\r\n\r\n    @include mq_md {\r\n      width: 4%;\r\n    }\r\n\r\n    img {\r\n      width: 100%;\r\n      height: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.kuku-table-box {\r\n  position: absolute;\r\n\r\n  width: 86%;\r\n  aspect-ratio: 1 / 1;\r\n  top: 10%;\r\n  left: 10%;\r\n}\r\n\r\n.kuku-table {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  border-spacing: 2px;\r\n\r\n  @include mq_md {\r\n    border-spacing: 5px;\r\n  }\r\n\r\n  .caption {\r\n    padding: 0.5%;\r\n    border: 0;\r\n    background-color: transparent;\r\n\r\n    &__box {\r\n      border: solid 1px #000;\r\n      border-radius: 5px;\r\n      background-color: currentColor;\r\n    }\r\n  }\r\n\r\n  .caption--col {\r\n    @extend .caption;\r\n    \r\n    // padding: 0% 0.5% 1% 0.5%;\r\n    color: #f5ac3c;\r\n\r\n    &:nth-child(2n+1) {\r\n      color: #fbd6a0;\r\n    }\r\n  }\r\n\r\n  .caption--row {\r\n    @extend .caption;\r\n\r\n    // padding: 0.5% 1% 0.5% 0;\r\n   \r\n    color: #96bee5;\r\n  }\r\n\r\n  tr {\r\n\r\n    &:nth-child(2n+1) {\r\n      .caption--row {\r\n        color: #cddef2;\r\n      }\r\n    }   \r\n  }\r\n\r\n  th,\r\n  td {\r\n    width: 10%;\r\n    padding: 0;\r\n    margin: 0;\r\n    background-color: transparent;\r\n  }\r\n\r\n  td.blank {\r\n    border: 0;\r\n    background-color: transparent;\r\n  }\r\n\r\n  .data-no {\r\n    padding: 0.5%;\r\n\r\n    &__box {\r\n      border: solid 1px #000;\r\n      border-radius: 5px;\r\n      background-color: #fff;\r\n    }\r\n  }\r\n\r\n  .no-box {\r\n    position: relative;\r\n    text-align: center;\r\n    padding: 16% 0 0;\r\n    width: 100%;\r\n    aspect-ratio: 1 / 1;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    pointer-events: all;\r\n    text-align: center;\r\n  }\r\n\r\n  .no-val-box {\r\n    opacity: 0;\r\n\r\n    &.show {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  .no {\r\n    display: inline-block;\r\n    width: 48%;\r\n    aspect-ratio: 1 / 1.43478;\r\n    background-size: auto 100%;\r\n    background-repeat: no-repeat;\r\n    background-image: url('../img/02_03/kuku_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.15}% 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.8% 0;\r\n  }\r\n}\r\n\r\n.control {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: flex-end;\r\n  padding-left: 3%;\r\n\r\n  @include mq_sp_portrait {\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    padding: 0;\r\n    padding-top: 2%; \r\n  }\r\n\r\n  .nav {\r\n    margin-bottom: 40%;\r\n\r\n    @include mq_sp_portrait {\r\n      margin: 0;\r\n    }\r\n  }\r\n}\r\n\r\n.nav__btn {\r\n  width: 7.5em;\r\n  aspect-ratio: 1 / 0.3;\r\n  margin: 2em auto 0;\r\n  padding: 0.5em;\r\n  font-size: 3vw;\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  text-align: center;\r\n\r\n  @include mq_md {\r\n    font-size: 2.5vw;\r\n  }\r\n\r\n  @include mq_lg {\r\n    font-size: 1.5em;\r\n  }\r\n\r\n  @include mq_xl {\r\n    font-size: 1.8em;\r\n  }\r\n\r\n  @include mq_sp_landscape_low_height {\r\n    font-size: 2vw;\r\n  }\r\n\r\n  @include mq_xlow_height {\r\n    font-size: 1.6em;\r\n  }\r\n\r\n  @include mq_xlow_height {\r\n    font-size: 1.5em;\r\n  }\r\n}\r\n"]}