@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Crimson+Text);
html {
  overflow-y: auto; }

.ease {
  transition: all .25s ease; }

.flex {
  display: flex;
  flex: 1; }
  .flex.center {
    align-items: center;
    justify-content: center; }
  .flex.start {
    align-items: center;
    justify-content: flex-start; }
  .flex.end {
    align-items: center;
    justify-content: flex-end; }
  .flex.between {
    align-items: center;
    justify-content: space-between; }
  .flex.flex-column {
    flex-direction: column; }
  .flex.flex-row {
    flex-direction: row; }

hr.no-margin {
  margin: 0; }

hr.primary {
  margin: 0 0 16px;
  border-top: 4px solid #607D8B; }

.is-hide-right {
  transform: translateX(20px);
  -webkit-transform: translateX(20px);
  position: absolute;
  z-index: -1;
  opacity: 0;
  padding: 0;
  margin: 0;
  height: 1px; }

.padded {
  padding: 16px; }

.m-y-sm {
  margin: 8px 0; }

.m-y-md {
  margin: 16px 0; }

body.create, html.create {
  background-color: #fff; }

#app-createpayment {
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: "Crimson Text", "ryo-text-plusn", serif;
  color: #34495e; }
  #app-createpayment #app-header {
    width: 100%;
    height: 44px;
    padding: 0 16px; }
    #app-createpayment #app-header .button {
      border: none;
      height: 44px;
      width: 44px; }
  #app-createpayment #app-main {
    max-width: 600px;
    margin: 0 auto; }
  #app-createpayment input {
    text-align: center;
    background-color: transparent;
    box-shadow: none;
    border: none;
    font-family: "Crimson Text", "ryo-text-plusn", serif;
    color: #34495e; }
    #app-createpayment input:focus {
      -webkit-appearance: none; }
    #app-createpayment input::-webkit-input-placeholder {
      color: #b7c6cd; }
  #app-createpayment .button.is-link {
    text-decoration: none;
    color: #2196F3;
    -webkit-tap-highlight-color: transparent; }
    #app-createpayment .button.is-link:hover, #app-createpayment .button.is-link:focus {
      background-color: transparent;
      opacity: .8;
      box-shadow: none; }
    #app-createpayment .button.is-link:active {
      opacity: .5;
      box-shadow: none; }
    #app-createpayment .button.is-link span + i {
      margin-left: .25em; }
    #app-createpayment .button.is-link i + span {
      margin-left: .25em; }
    #app-createpayment .button.is-link.is-large {
      line-height: 64px;
      font-size: 24px;
      height: 64px; }
  #app-createpayment .is-block {
    display: block; }
  #app-createpayment #amount-box {
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
    #app-createpayment #amount-box #amount-wrap input {
      font-size: 54px;
      height: 64px;
      line-height: 64px;
      padding: 0;
      margin: 0;
      margin: 16px 0;
      overflow: visible; }
    #app-createpayment #amount-box.is-small #amount-wrap input {
      font-size: 24px;
      height: 32px;
      padding: 0;
      line-height: 32px;
      margin: 0; }
    #app-createpayment #amount-box.is-small #memo {
      height: 24px; }
    #app-createpayment #amount-box.is-small .button {
      height: 0;
      padding: 0;
      overflow: hidden;
      border: none;
      display: none; }
  #app-createpayment #input-box {
    text-align: center; }
    #app-createpayment #input-box input {
      box-shadow: none;
      border: none;
      text-align: center;
      border-radius: 0;
      background-color: transparent; }
    #app-createpayment #input-box input {
      font-size: 1.1em !important; }
  #app-createpayment #numpads {
    height: calc(75vh - 176px);
    display: flex;
    flex-direction: column; }
    #app-createpayment #numpads .num-row {
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      text-align: center; }
      #app-createpayment #numpads .num-row .button {
        flex: 1;
        box-shadow: none;
        border-radius: none;
        box-shadow: none;
        border: none;
        background-color: transparent;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100%;
        width: 100%;
        display: inline-block;
        font-size: 1.5em;
        font-family: 'Montserrat', sans-serif;
        color: rgba(255, 255, 255, 0.7); }

body {
  padding: 0;
  margin: 0; }
  body #payment-view.custom-serif {
    font-family: 'Crimson Text',"ryo-text-plusn", serif; }
  body.edit-mode #editor {
    left: 0; }
  body.edit-mode #payment-view {
    margin-left: 25%; }

#editor-button {
  position: fixed;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  z-index: 101;
  top: 15px;
  left: 15px;
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  opacity: .5; }

#editor {
  background-color: #37474F;
  padding: 60px 15px;
  position: fixed;
  width: 25%;
  left: -25%;
  height: 100%;
  box-shadow: inset -4px 0 4px rgba(0, 30, 60, 0.7);
  overflow: auto; }
  #editor .label {
    color: #fff;
    opacity: .7; }
  #editor .covers {
    display: block; }
    #editor .covers label {
      border: none;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
      background-size: cover;
      background-position: 50% 50%;
      float: left;
      color: transparent; }
    #editor .covers .column {
      display: inline-block; }
    #editor .covers input:checked + label {
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
      color: #fff; }
  #editor .swatches .swatch {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    margin: 0 4px 4px 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
    color: transparent; }
  #editor .swatches input:checked + label {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
    color: #fff; }
  #editor .button.is-ghost-white {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    margin-right: 8px; }
    #editor .button.is-ghost-white.is-active {
      background-color: rgba(255, 255, 255, 0.3); }

#cover {
  height: 200px;
  background-color: #000; }
  @media (max-width: 480px) {
    #cover {
      height: 150px; } }

.container {
  padding: 0 15px; }

.payment-card {
  background-color: #fff;
  max-width: 600px;
  margin: 0 auto 16px auto;
  margin-top: -80px; }
  .payment-card .card-logo {
    height: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd; }
  .payment-card .card-amount {
    margin-top: 20px; }
  .payment-card .card-body {
    padding: 0 4em 4em 4em; }
    .payment-card .card-body .label {
      color: #95A5A6; }
    @media (max-width: 480px) {
      .payment-card .card-body {
        padding: 0 15px 15px; } }

/* 常に表示 */
.expand-transition {
  transition: all .3s ease;
  opacity: 1;
  overflow: hidden; }

/* .expand-enter は entering に対する開始状態を定義 */
/* .expand-leave は leaving に対する終了状態を定義 */
.expand-enter {
  transform: translateX(20px);
  -webkit-transform: translateX(20px);
  opacity: 0; }

.expand-leave {
  display: none; }

.button.label-block {
  white-space: normal;
  flex-direction: column;
  height: auto;
  padding: 8px; }
  .button.label-block img {
    height: 32px;
    width: auto; }
  .button.label-block span {
    display: block;
    font-size: .6em;
    color: #808080; }