/*
 * common
 */
html {
  font-size: 100%;
  background-color: #FCFAF6;
}
body {
  font-family: YakuHanJP, "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  line-height: 1.0625rem;
  color: #3d3d3d;
}
button, input, select, textarea {
  font-family: YakuHanJP, "Noto Sans", "Noto Sans JP", sans-serif;
}
em {
  font-style: normal;
}
.none {
  display: none;
}
.fixed {
  position: fixed !important;
  padding-top: 3rem;
}
.column {
  flex-direction: column;
}
.cancel-events {
  pointer-events: none;
}
.wrapper {
  padding-bottom: 6rem;
}
.is-cs-0 {
  font-size: 1.375rem !important;
  line-height: 1.5625rem;
}
.is-cs-1 {
  font-size: 1.25rem !important;
  line-height: 1.4375rem;
}
.is-cs-2 {
  font-size: 1.125rem !important;
  line-height: 1.3125rem;
}
.is-cs-3 {
  font-size: 1rem !important;
  line-height: 1.1875rem;
}
.is-cs-4 {
  font-size: 0.875rem !important;
  line-height: 1.0625rem;
}
.is-cs-5 {
  font-size: 0.75rem !important;
  line-height: 0.9375rem;
}
.is-cs-6 {
  font-size: 0.625rem !important;
  line-height: 0.8125rem;
}
hr.line {
  width: 3rem;
  height: 1px;
  background-color: #028AC5;
  margin: 1rem auto 0;
}
.image .background-image {
  background-color: #dadada;
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}
.image .no-image {
  background-size: contain;
  background-repeat: no-repeat;
}
.tabs {
  background: #fff;
}
.tabs ul {
  border: none;
}
.tabs li a {
  border-bottom: none;
}
.tabs li.is-active {
  font-weight: bold;
}
.tabs li.is-active a {
  border-bottom: solid 2px #028AC5;
  color: #3d3d3d;
  padding: 0.5rem;
}
.button {
  border: none;
}
.button.is-small {
  width: 4rem;
  height: 2.25rem;
  color: #028AC5;
  border: 2px solid #028AC5;
}
.button.is-large {
  width: 18.75rem;
  height: 3rem;
  position: relative;
  font-size: 0.875rem;
}
.button.is-large .icon {
  position: absolute;
  top: 11px;
  right: 26px;
  width: 28px;
  height: 28px;
  color: #fff;
}
.button[disabled] {
  border: 1px solid #999999;
}
.is-c-primary {
  background-color: #04E0EE;
  font-weight: bold;
}
.is-c-operation {
  background-color: #028AC5;
  color: #fff;
  font-weight: bold;
}
.is-c-alert {
  color: #FF5252;
  font-weight: bold;
  border: solid 2px #FF5252;
}
.is-c-text {
  color: #028AC5;
}
.is-c-alert-text {
  color: #FF5252;
}
.is-c-normal-text {
  color: #3d3d3d;
}
input[type=text],
input[type=url],
input[type=number],
input[type=date] {
  height: 2rem;
  border: 1px solid #028AC5;
  border-radius: .375rem;
  padding-left: .5rem;
  background-color: #fff;
  font-size: 1rem;
  outline: 0;
}
textarea {
  border: 1px solid #028AC5;
  border-radius: .375rem;
  padding: .5rem;
  background-color: #fff;
  font-size: 1rem;
  outline: 0;
}
.switch {
  position: relative;
}
.switch input[type="checkbox"] {
  outline: 0;
  user-select: none;
  display: inline-block;
  position: absolute;
  opacity: 0;
}
.switch input[type="checkbox"]+label {
  position: relative;
  display: initial;
  font-size: 1rem;
  line-height: initial;
  padding-left: 4rem;
  cursor: pointer;
}
.switch input[type="checkbox"]+label:before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 4.25rem;
  height: 1.75rem;
  border-radius: 1rem;
  background: #FF5252;
  content: "";
}
.switch input[type="checkbox"]+label:after {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.375rem;
  height: 1.375rem;
  transform: translate3d(0, 0, 0);
  border-radius: 50%;
  background: #fff;
  transition: all .25s ease-out;
  content: "";
}
.switch input[type="checkbox"]:checked+label:before {
  background: #40DD7F;
}
.switch input[type="checkbox"]:checked+label:after {
  left: 43px;
}
.switch input[type="checkbox"]+label span {
  position: absolute;
  font-weight: bold;
  color: #fff;
  left: 27px;
  top: 6px;
  width: 40px;
}
.switch input[type="checkbox"]:checked+label span {
  left: 11px;
}
/*.is-margin-16px {
  margin: 16px;
}*/
.c-icon.cachalog-next.enable span:first-child:before,
.c-icon.cachalog-prev.enable span:first-child:before {
  color: #028ac5;
}
.c-icon.cachalog-next.disable span:first-child:before,
.c-icon.cachalog-prev.disable span:first-child:before {
  color: #a7a7a7;
}
.icon .google,
.icon .twitter,
.icon .facebook {
  background: 50% 50% no-repeat;
  width: 1rem;
  height: 1rem;
}
.icon .google {
  background-image: url(google-brands.svg);
}
.icon .twitter {
  background-image: url(twitter-brands.svg);
}
.icon .facebook {
  background-image: url(facebook-f-brands.svg);
}

#app {
  padding-top: 3rem;
}
.image .camera-icon {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 2rem;
  margin: -1rem 0 0 -1rem;
  cursor: pointer;
  color: #3273dc;
}
.edit-icon {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: 1.875rem;
}
/*time:last-child::before {
  content: '〜';
}*/
#image-capture {
  display: none;
}
.close-icon {
  color: #fff;
  position: absolute;
  right: 2rem;
  top: 2rem;
  cursor: pointer;
}
.close-icon .c-icon {
  font-size: 2rem;
}
.sub-page {
  position: relative;
  top: 0;
  width: 100vw;
  min-height: calc(100vh - 3rem);
  background: #fff;
  z-index: 20;
}
.sub-page-nav {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 3rem;
  background: #fff;
  display: flex;
  align-items: center;
  z-index: 20;
}
.sub-page-nav:after {
  width: 2rem;
  content: "";
}
.sub-page-nav h1 {
  font-weight: bold;
  flex-grow: 1;
}
.sub-page-nav .chevron-left {
  width: auto;
  margin-left: 1.25rem;
}
.page-status {
  font-weight: bold;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  width: 100%;
  color: #000;
  background-color: #FF5252;
}
.page-status.publish {
  background-color: #40DD7F;
}

/*
 * item-list
 */
 .item-list-tile {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 .125rem 7rem;
}
.item-list-tile .item {
  max-width: 15rem;
  width: calc(50% - .25rem);
  height: auto;
  background-color: #fff;
  margin: .125rem;
  position: relative;
  padding-bottom: 4rem;
}
.item-list-tile .item .properties {
  padding: 0.5rem;
}
.item-list-tile .item .quantity {
  position: absolute;
  bottom: 1.5rem;
  width: 100%;
}
.item-list {
  padding: 0;
  margin-bottom: 3rem;
}
.item-list .item {
  height: 8rem;
  max-width: 30rem;
  width: 100%;
  margin: 2px 4px;
  display: flex;
}
.item-list .item .quantity {
  right: .5rem;
  width: auto;
}
.item-list .item figure {
  width: 8rem;
  height: 8rem;
}

/*
 * sold-out
 */
.item.sold-out-order figure,
.item.sold-out figure {
  display: flex;
  align-items: center;
}
.item.sold-out-order figure img,
.item.sold-out figure img {
  opacity: .3;
}
.item.sold-out-order figure:after,
.item.sold-out figure:after {
  content: 'SOLD OUT';
  color: #ff5252;
  font-size: 1.25rem;
  font-weight: bold;
  width: 100%;
  text-align: center;
  position: absolute;
}
.item.sold-out .quantity select {
  display: none;
}
.item.sold-out .quantity i:before {
  color: #d6d6d6;
}
.item.sold-out .quantity .select .quantity-value {
  color: #d6d6d6;
  border-bottom-color: #d6d6d6;
}

/*
 * R18対応
 */
.item.r18 .item-name:before {
  content: 'R18';
  font-weight: bold;
  color: #ff5252;
  text-decoration: underline;
  padding-right: .125rem;
}

/*
 * item
 */
.item a {
  color: #3d3d3d;
}
.item .price {
  margin-top: .5rem;
}
.item .quantity {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.item .quantity .select {
  height: 1.75rem;
  margin: 0 .5rem;
  width: 4.5rem;
}
.item .quantity select {
  width: 4.5rem;
  height: 1.75rem;
  font-size: 1rem;
  padding: 0;
  opacity: 0;
}
.item .quantity .select::after {
  content: none;
}
.item .quantity .select .quantity-value {
  width: 4.5rem;
  height: 1.75rem;
  line-height: 1.75rem;
  border-bottom: 1px solid #028AC5;
  text-align: center;
  padding: 0;
  position: absolute;
  top: 0;
}
.item .quantity i {
  font-size: 1.75rem;
  color: #028AC5;
}

/*
 * global nav
 */
#global-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  overflow: hidden;
  min-height: auto;
  display: flex;
  align-items: center;
  z-index: 10;
}
#account-icon {
  position: absolute;
  top: .5rem;
  right: 1rem;
}
#account-icon > span {
  display: block;
}
#account-icon .image img {
  width: 100%;
  height: 100%;
}
#account-icon i {
  font-size: 2rem;
}
#global-nav .logo {
  margin-left: 1rem;
}
#global-nav .logo i {
  display: flex;
  align-items: flex-end;
}
#global-nav .logo i:after {
  content: '';
  background: url(beta.svg) no-repeat;
  background-size: 100% 100%;
  width: 1.25rem;
  height: 1rem;
  margin-left: .5rem;
}

/*
 * page-list
 */
.page-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.page-list ul li:last-child{
  margin-bottom: 1rem;
}
.page-list ul li {
  max-width: 15rem;
  position: relative;
  margin: .25rem;
  width: calc(50% - .5rem);
  background-color: #fff;
}
.page-list ul li .rectangle {
  height: 90px;
}
.page-list ul li .circle {
  position: absolute;
  top: 58px;
  left: 50%;
  margin-left: -32px;
}
.page-list ul li p {
  margin: 2.5rem .5rem 1rem;
}

/*
 * main-page
 */
.main-page {
  min-height: calc(100vh - 3rem);
}

/*
 * page
 */
#page-container {
  background: #F0EEE7;
}
#page-container header {
  position: relative;
  background-color: #fff;
}
#top-image {
  height: calc(100vw / 8 * 3);
  max-height: 12rem;
}
#page-container header .detail {
  padding: .5rem .75rem;
  display: flex;
}
#page-container header .detail > div {
  flex-grow: 1;
}
#page-container header .detail > div > *:not(figure) {
  margin: .5rem 0;
}
#page-container header .detail > div > .buttons {
  margin: 1rem 0 .5rem;
}
#page-container header .detail p {
  clear: both;
}
#page-container header .description {
  padding: 0 .75rem 1rem;
}
#top-circle {
  width: 4.5rem;
  min-width: 4.5rem;
  height: 4.5rem;
  margin: .25rem .75rem .75rem 0;
}
#page-container header .buttons {
  justify-content: flex-end;
}
#page-container header .buttons .button {
  border: solid 2px #028AC5;
  border-radius: 2rem;
  margin: 0 0 0 .75rem;
}
#page-container header .show-qrcode .button i {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  background: url(qrcode.svg);
}
#page-container .boot-qrcode-reader {
  padding: 1rem 0;
  line-height: 3rem;
}

#page-container .tabs li {
  width: 50%;
}
#page-container .add-item {
  background: none;
  border: dashed 2px #028AC5;
  line-height: 275px;
  text-align: center;
  font-size: 2rem;
  padding-bottom: 0;
}
#page-container .add-item-button {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
}
#page-container .add-item-button a {
  border-radius: 50%;
  display: block;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
}
/*
 * todo fontにする
 */
#page-container .add-item-button a i {
  /*font-size: 3.5rem;*/
  width: 3.5rem;
  height: 3.5rem;
  display: block;
  background: url(additem.svg);
}

#page-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 4rem;
  background-color: #fff;
  box-shadow: 0px -3px 9px rgba(0, 0, 0, 0.3);
  padding: .5rem 0;
  z-index: 10;
}
#page-nav .tabs li {
  width: 34%;
}
#page-nav .tabs .is-active {
}
#page-nav .tabs .is-active a {
  border-bottom: none;
}

/*
 * page-creator
 */
#page-creator > div:first-child {
  margin: 1rem auto 2rem;
}
#page-creator .input-page-id {
  margin: 0 .75rem;
}
#page-creator .input-page-id > div {
  margin: 2rem;
}
#page-creator .input-page-id input {
  width: 100%;
  max-width: 24rem;
  margin-top: .5rem;
  font-size: 1rem;
}
#page-creator p {
  margin: .5rem 0;
}

#page-editor header {
  position: relative;
}
#page-editor #top-circle {
  float: none;
  margin-top: .75rem;
  margin-left: .75rem;
}

/*
 * form
 */
.editor .properties {
  margin: 0 1.5rem;
}
.editor .properties > div {
  margin: 1rem 0;
  display: flex;
  align-items: center;
}
.editor .properties input:not([type=radio]),
.editor .properties textarea,
.editor .properties .link > div {
  width: calc(100% - 4.5rem);
}
.editor .properties .link > div input {
  width: 100%;
}
.editor .properties textarea {
  height: 8rem;
}
.editor .properties label:not(.radio) {
  font-weight: bold;
  width: 4.5rem;
}
.editor .properties .description,
.editor .properties .period {
  align-items: unset;
}
.editor .properties .description label {
  padding-top: .5rem;
}
.editor .properties .period {
  display: flex;
}
.editor .properties .period .column {
  padding: 0;
}
.editor .properties .period .column > div:not(:first-child) {
  margin: .5rem 0;
}
.editor .properties .period .column span {
  margin-right: .5rem;
}
.editor .properties .period input:not([type=radio]) {
  width: 12rem;
}
.editor .properties .publish label:last-child {
  height: 1.75rem;
}
.editor .button.is-large {
  margin: 1rem auto;
}

/*
 * item
 */
#item header {
  position: relative;
}
#item nav p {
  flex-grow: 1;
}
#item .item {
  background-color: #fcfaf6;
}
#item .main-image .image {
  width: 100%;
  height: 100vmin;
  max-width: 30rem;
  max-height: 30rem;
  margin: 0 auto;
}
#item .detail {
  padding: 1rem;
}
#item .detail > .level{
  margin: 1.5rem 1rem 0;
}
#item .page-info.level {
  justify-content: normal;
  padding: 1rem;
}
#item .page-info figure {
  margin-right: 1rem;
}

/*
 * item-editor
 */
#page-editor .wrapper,
#item-editor .wrapper {
  max-width: 480px;
  margin: auto;
}
#item-editor .main-image > div {
  padding: 1rem 0 .5rem 0;
  margin: 0 1.5rem;
}
#item-editor .properties .price input {
  width: calc(100% - 10rem);
}
#item-editor .properties .price span {
  width: 5rem;
  text-align: center;
}
#item-editor .properties .sold-out {
  margin-top: -.5rem;
}
#item-editor .properties .sold-out input,
#item-editor .properties .r18 input {
  width: 1rem;
}
#item-editor .properties .sold-out label:first-child,
#item-editor .properties .r18 label:first-child {
  width: 4.5rem;
}
#item-editor .properties .sold-out label:last-child,
#item-editor .properties .r18 label:last-child {
  width: 12rem;
}
.main-image .image {
  margin: auto;
}

/*
 * sign-in
 */
#sign-in > div {
  padding-top: 5rem;
}
#sign-in > div div {
  margin: 2rem auto;
}

/*
 * .modal .qrcode
 */
.modal .qrcode {
  margin: 0 auto;
  width: 16rem;
  height: 16rem;
  background-color: #fff;
}
.modal p {
  margin: 1rem;
}

/*
 * user
 * account
 */
#user > section > h1 {
  margin: 1rem;
}
#user .user-circle {
  margin: 0 auto;
}
#user div {
  margin: 1rem auto;
}
#user .form {
  margin: 0 1rem 3rem;
}
#user .form > div {
  display: flex;
  align-items: center;
}
#user .form > div label {
  width: 4rem;
}
#user .form input {
  width: calc(100% - 4rem);
  padding-left: .5rem;
  padding-right: .5rem;
}
#user .account {
  line-height: 2rem;
}
#user .page-list h2 {
  margin-bottom: .75rem;
}
#user .howto {
  margin: 1rem auto 3rem;
}
#user .howto p {
  margin: 3rem 0 1rem;
}
#user .howto .button {
  background-color: transparent;
  border: solid 2px #028AC5;
  color: #028AC5;
}
#user .modal.is-active,
#user .modal.is-active div {
  margin: 0;
}
#user .modal.is-active {
  margin: 0;
  display: flex;
  align-items: center;
}
#user .modal .modal-content {
  background-color: #fff;
  border-radius: 1rem;
  height: 8rem;
  width: 20rem;
  padding: 1rem;
}
#user .modal .modal-content p {
  margin: .5rem 0;
}
#user .modal .modal-content form {
  display: flex;
  align-items: center;
}
#user .modal .modal-content input {
  border: 2px solid #aaa;
  border-radius: .25rem;
}
#user .modal .modal-content input[type="password"] {
  width: 12rem;
}
#user .modal .modal-content input[type="submit"] {
  width: 4rem;
}

/*
 * order
 */
#order header {
  position: fixed;
}
#order .order-amount {
  padding-top: 1rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
#order .order-amount > div {
  display: flex;
  flex-direction: column;
}
#order .order-amount > div span {
  margin: .5rem;
}
#order .order-amount em {
  font-size: 2.5rem;
}
#order h1 {
  margin: 1rem;
}

.item.sales .quantity > span {
  display: none;
}
.item.sales .quantity select {
  display: none;
}

/*
 * page-sales-index
 */
#page-sales-index {
  background-color: #FCFAF6;
}
#page-sales-index > header > div {
  text-align: center;
}
#page-sales-index > header > div .sales-amount em {
  font-size: 2.5rem;
  line-height: 3rem;
  padding-right: .25rem;
}
#page-sales-index > header > nav {
  justify-content: center;
}
#page-sales-index > header > nav .level-item {
  flex-grow: unset;
  margin: 1rem 1.5rem;
}
#page-sales-index > header > nav .c-icon {
  font-size: 1.5rem;
}
.sales-histories {
  padding: 0 .75rem 5rem;
}
.sales-histories > .level {
  margin: 0;
  padding: 1rem 0;
  border-bottom: solid 1px #d6d6d6;
}
.sales-histories > .level > div {
  display: flex;
  flex-direction: column;
}
.sales-histories > .level > span {
  flex-grow: 1;
  text-align: right;
  padding-right: 1rem;
}
.sales-histories > .level > span em {
  padding-right: .25rem;
}
.sales-histories .button {
  border: solid 2px #028ac5;
  border-radius: 2rem;
  background: none;
  width: 4rem;
  height: 1.75rem;
}

/*
 * transition
 */
.slide-enter-active, .slide-leave-active {
  transition: transform .2s ease-out;
}
.slide-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(100%);
}

.slide-up-enter-active, .slide-up-leave-active {
  transition: transform .2s ease-out;
}
.slide-up-enter, .slide-up-leave-to {
  transform: translateY(100%);
}

.scroll-enter-active, .scroll-leave-active {
  transition: transform .2s ease-out;
  position: absolute;
  left: 0; top: 3rem;
  width: 100vw;
  /*height: calc(100vh - 200px);*/
}
.scroll-enter {
  transform: translateX(100%);
}
.scroll-leave-to {
  transform: translateX(-100%);
}

/*.expansion-enter-active, .expansion-leave-active {
  transition: transform .2s ease-in, left 5s ease-in, top 5s ease-in;
}
.expansion-enter, .expansion-leave-to {
  position: absolute;
  left: 0vw;
  top: 0vh;
  transform: scale(0, 0);
}*/

.screen {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 100;
}
.screen .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
}
.screen p {
  position: absolute;
  line-height: 100vh;
  width: 100%;
  text-align: center;
}

.notfound i {
  display: block;
  font-size: 9.25rem;
  margin: 2.5rem;
}
.notfound p {
  margin: .5rem;
}

/*
 * r18
 */
#r18-screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 90;
  display: flex;
  align-items: center;
}
#r18-screen > div {
  margin: 0 auto 3rem;
  padding: 2rem;
}
#r18-screen > div p {
  margin: 1rem 0;
  line-height: 1.5rem;
}

/*
 * footer
 */
.footer {
  position: relative;
  background-color: #028AC5;
  text-align: left;
}
.footer h1 i:before {
  color: #fff;
}
.footer li {
  margin: 1rem 0;
}
.footer small {
  position: absolute;
  bottom: 1rem;
  width: calc(100% - 3rem);
}

.debug {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  background-color: #000000;
  z-index: 100;
}
.debug-order {
  position: fixed;
  bottom: 0;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  background-color: #0000FF;
  z-index: 100;
}