@charset "UTF-8";
/*! ========================================
※※※※※※※※※※※※※※※※※※※※※※※※※※※
  このCSSファイルはSassから生成されていますので、
  編集しないようご注意ください。 by omukai
※※※※※※※※※※※※※※※※※※※※※※※※※※※
========================================= */
/*--------------------------------
reset
--------------------------------*/
html, body, div, p, img, iframe, a, span, blockquote, q, address, cite,
pre, code, em, small, strong, b, i,
header, article, section, nav, figure, figcaption, hgroup, menu, aside, footer, time,
h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
table, tbody, thead, tfoot, th, tr, td,
form, fieldset, legend, label, select, input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

header, article, section, nav, figure, figcaption, hgroup, menu, aside, footer {
  display: block;
}

ul li {
  list-style-type: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

body {
  line-height: 1;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

select, option, input:not([type=checkbox]):not([type=radio]), textarea, button {
  font-family: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: '';
  content: none;
}

[type=submit], [type=button], [type=reset], [type=file], button {
  cursor: pointer;
}

:focus {
  outline: none;
}

/*--------------------------------
common
--------------------------------*/
html {
  /* Prevent selection and 3D touch */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Lato", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #373531;
}

a {
  color: #4db6ac;
  text-decoration: none;
  transition: all 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  color: #757575;
}

button {
  transition: all 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}

strong {
  color: #ec407a;
  font-weight: inherit;
}

.scrolling-touch {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  height: 100%;
}

.btn {
  display: inline-block;
  background: #455a64;
  position: relative;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  z-index: 1;
}
.btn .fa,
.btn .flzi {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.btn .flzi {
  left: 10px;
}

.general-btn {
  padding: 6px 8px;
  min-width: 60px;
  background-color: transparent;
  color: #607d8b;
  border: 1px solid #90a4ae;
  border-radius: 40px;
}

.release-btn {
  white-space: nowrap;
}
.release-btn .fa,
.release-btn .flzi {
  position: relative;
  left: 0;
  top: 0;
  transform: translateY(0);
}

.is-all {
  color: #999;
  border-color: #bdbdbd;
}

.action-btn {
  padding: 0;
  width: 100%;
  max-width: 311px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  border-radius: 8px;
}
.action-btn:hover {
  color: #fff;
}
.modal .action-btn {
  height: 45px;
  line-height: 45px;
}
.modal .small-space .action-btn {
  height: 40px;
  line-height: 40px;
}
.small-space .action-btn {
  max-width: 240px;
  font-size: 15px;
}

.action-mini-btn {
  width: 100%;
  max-width: 280px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  border-radius: 8px;
}
.action-mini-btn:hover {
  color: #fff;
}

.common-btn {
  width: 220px;
  height: 42px;
  line-height: 42px;
  border-radius: 21px;
}
.emptystate .common-btn {
  background: #4db6ac;
}
.common-btn .flzi {
  font-size: 22px;
}
.common-btn:hover {
  color: #fff;
}
.common-btn + .common-btn {
  margin-top: 8px;
}
@media (min-width: 600px) {
  .common-btn + .common-btn {
    margin-top: 0;
    margin-left: 8px;
  }
}

.submit-btn {
  margin: 0 4px;
  padding: 0 10px;
  min-width: 90px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  letter-spacing: normal;
}
.submit-btn:hover {
  color: #fff;
}
.submit-btn:first-child {
  margin-left: 0;
}
.submit-btn:last-child {
  margin-right: 0;
}

.small-btn {
  font-size: 10px;
}

.large-btn {
  width: 120px;
}

.tapped {
  position: relative;
  overflow: hidden;
}
.tapped::after {
  margin: -15px 0 0 -15px;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(0, 0, 0, 0.3);
  content: "";
  border-radius: 50%;
  transform: scale(0);
  opacity: 1;
  animation: ripple 0.3s ease-in forwards;
  z-index: 1;
}
.thumbnail + .tapped::after {
  content: none;
}
.photo-list .thumbnail + .tapped::after {
  content: "";
}

input.tapped {
  animation: tapFadeBright 0.3s ease-in-out;
}

.tapped-box {
  animation: tapBounce 0.3s ease-in-out;
}

.tapped-list {
  animation: tapFade 0.8s ease-in-out;
}
.tapped-list.newlist {
  animation: tapFadeIsNew 0.8s ease-in-out;
}

.btn-loading {
  margin: -10px 0 0 -10px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(../images/loading.png) no-repeat center;
  background-size: contain;
  content: "";
  animation: spin 1s linear infinite;
}

.primary-heading {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.grid-wrapper .primary-heading {
  margin: 0 8px 16px;
}
.general-section .primary-heading {
  margin-bottom: 16px;
}
.primary-heading .flzi,
.primary-heading .fa {
  margin-right: 2px;
  font-size: 18px;
  font-weight: 500;
  color: #90a4ae;
  vertical-align: middle;
}
.primary-heading .emphasis {
  margin-right: 4px;
  font-size: 160%;
  font-weight: 500;
}

.secondary-heading {
  margin-bottom: 16px;
  padding-left: 8px;
  color: #455a64;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  border-left: 3px solid #cfd8dc;
}

.tertiary-heading {
  margin-bottom: 8px;
  color: #607d8b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.primary-lead {
  color: #455a64;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.secondary-lead {
  display: block;
  color: #999;
  font-size: 12px;
  line-height: 1.4;
}

.huge-heading {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
  color: #ec407a;
  line-height: 1.4;
  word-break: break-word;
}

.wide-heading {
  margin: 32px 16px;
  color: #455a64;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.entry-heading {
  margin: 54px 0;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
.entry-heading .secondary-lead {
  margin: 8px 0;
  font-weight: 500;
}
@media (max-width: 374px) {
  .entry-heading {
    margin: 32px 0;
  }
}

.general-parts {
  margin-bottom: 24px;
}

.general-parts-mini {
  margin-bottom: 16px;
}
.btn-checkbox + .general-parts-mini {
  margin-top: 16px;
}

.note {
  line-height: 1.6;
}
.note > li {
  margin: 16px 0;
  padding-left: 8px;
  font-size: 12px;
  border-left: 3px solid #eceff1;
}

.strong-text {
  color: #e91e63;
}

.emphasis-text {
  color: #0097a7;
}

ol.note > li {
  margin-left: 24px;
  position: relative;
  counter-increment: linum;
  list-style: none;
}
ol.note > li::before {
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  left: -24px;
  top: 2px;
  background: #90a4ae;
  color: #fff;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  border-radius: 50%;
  content: counter(linum);
}

.desc {
  margin-bottom: 15px;
  padding: 10px 13px;
  background: #eceff1;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.local-desc {
  margin: 8px 0;
  line-height: 1.4;
  font-size: 12px;
  color: #757575;
}

.local-note {
  margin-bottom: 16px;
  line-height: 1.6;
}

.general-section {
  margin: 16px 0;
  padding: 0 16px;
}
.general-section .note {
  margin-bottom: 32px;
}

.local-section {
  margin: 16px 0;
}

.basic_parts {
  margin-bottom: 48px;
}

.advice {
  margin-bottom: 32px;
  text-align: center;
  overflow: hidden;
}
.advice img {
  max-width: 100%;
  height: auto;
}

.img-wrapper {
  text-align: center;
}
.img-wrapper img {
  max-width: 100%;
  height: auto;
}

.screen-body {
  min-height: 100vh;
  position: relative;
  background: #eceff1;
  overflow: hidden;
}
.in-logout .screen-body {
  min-height: auto;
}
.thankyou .screen-body {
  background: #fff;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 6;
  -webkit-tap-highlight-color: transparent;
}
.overlay.transparent {
  opacity: 0;
}

.loading-circle {
  margin: 0 auto -15px;
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  background: url(../images/loading.png) no-repeat;
  background-size: 30px;
  animation: loading 1s infinite linear;
}

.general-table {
  width: 100%;
}
.general-table th,
.general-table td {
  padding: 16px;
  line-height: 1.6;
  border-bottom: 1px solid #fff;
}

.general-table-head {
  width: 120px;
  background: #eceff1;
  color: #757575;
  font-size: 12px;
}
.general-table-head.wide-th {
  width: 174px;
  vertical-align: middle;
}

.local-table {
  border-radius: 8px;
  overflow: hidden;
}
.local-table td {
  background: #eceff1;
  vertical-align: middle;
}
.local-table .general-table-head {
  width: 128px;
  background: #cfd8dc;
  color: #607d8b;
  vertical-align: middle;
}

.male {
  background: #e0f7fa;
  color: #0097a7;
}

.female {
  background: #fff4f8;
  color: #ec407a;
}

.parent-th {
  border-left: 4px solid;
  vertical-align: middle;
}
.parent-th.male {
  width: 54px;
  border-left-color: #b2ebf2;
}
.parent-th.female {
  border-left-color: #f8bbd0;
}

.child-th {
  width: 120px;
  font-size: 12px;
  vertical-align: middle;
}

.cell-center {
  text-align: center;
}

.huge-text {
  font-size: 200%;
}

.large-text {
  font-size: 180%;
}

.huge-text {
  font-size: 220%;
}

.middle-text {
  font-size: 140%;
}

.small-text {
  color: #999;
  font-size: 10px;
}

.address-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.new-sign {
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;
  background: #f06292;
  font-size: 10px;
  color: #fff;
  text-align: center;
  line-height: 12px;
  border-radius: 6px;
  z-index: 1;
}

.is-hidden {
  opacity: 0;
}

.is-none {
  display: none;
}

.required,
.optional,
.m-sign {
  margin-right: 4px;
  padding: 3px 0;
  width: 36px;
  display: inline-block;
  background: #373531;
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 5px;
}

.required {
  background-color: #f06292;
}

.optional {
  background-color: #80cbc4;
}

.unanswered {
  padding: 1px 2px;
  width: auto;
  font-size: 10px;
  border-radius: 3px;
}

.review {
  position: absolute;
  background: #f06292;
}
.thumbnail .review {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.option-btn-space .review {
  right: 0;
}
.push_head .review {
  margin: 0;
  right: -8px;
  bottom: 4px;
}
.set-label .review {
  position: relative;
}

.is-alert,
.error {
  color: #e53935;
}

.delete {
  padding: 0 8px;
  color: #607d8b;
  font-size: 16px;
  border-radius: 30px;
  z-index: 1;
}

.default {
  color: #bdbdbd;
}

.set-label {
  margin: 16px 0;
}

.icon-label {
  margin-right: 8px;
  display: inline-block;
  font-size: 16px;
  color: #90a4ae;
}
.icon-label.icon-like_active {
  color: #f06292;
}
.icon-label.icon-age {
  color: #80cbc4;
}
.icon-label.icon-fee_active {
  color: #f9a825;
}
.icon-label.icon-premium_active {
  color: #dac266;
}
.icon-label.unauthor {
  color: #cfd8dc;
}

.has-animation {
  transition: all 0.4s ease-in-out;
}

select,
input,
textarea {
  padding: 8px 4px;
  background-color: transparent;
  font-size: 14px;
  line-height: 1.3;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}

select,
[type=text],
[type=email],
[type=tel],
[type=date],
textarea {
  font-size: 18px;
  color: #373531;
}

select {
  padding-right: 35px;
  background: url(../images/select_arrow.png) no-repeat right center;
  background-size: auto 30px;
  text-indent: .01px;
  text-overflow: "";
}

textarea {
  resize: none;
  vertical-align: middle;
}

::-webkit-input-placeholder {
  font-size: 14px;
}

:-ms-input-placeholder {
  font-size: 14px;
}

::-moz-placeholder {
  font-size: 14px;
}

.txt-s {
  width: 40px;
}

[type=date] {
  height: 40px;
}

.txt-l {
  width: 100%;
}

.normal_label {
  font-size: 12px;
}

.floating_label {
  font-size: 12px;
  transition: color .3s ease;
}
.focus .floating_label {
  color: #4db6ac;
}
.in_entry .floating_label {
  color: #cfd8dc;
}

.fl-on {
  border-bottom: 1px solid #bdbdbd;
  vertical-align: bottom;
  transition: all .3s ease;
}
.focus .fl-on {
  padding: 8px 0;
}

.fc-item {
  position: relative;
}
.fc-item::after {
  height: 2px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background: #80cbc4;
  z-index: 1;
  transform: scaleX(0);
  transition: all .3s ease-in-out;
}
.focus .fc-item::after {
  transform: scaleX(1);
}

.box-textarea {
  padding-bottom: 32px;
  height: 300px;
  height: 35vh;
  border: 1px solid #bdbdbd;
}

.count {
  position: absolute;
  right: 0;
  bottom: -16px;
  font-size: 10px;
  color: #999;
}
.f_error + .count {
  color: #e53935;
}

.f_error {
  color: #e53935;
  border-color: #c62828;
}

.error {
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.4;
}

.datefit-select {
  padding: 8px 4px;
  width: 100%;
  border: none;
  background: none;
}
.focus .datefit-select {
  padding: 8px 4px;
}
.datefit-select:first-child {
  flex: 0 1 140%;
}

.date-group {
  border-bottom: 1px solid #bdbdbd;
}

.date-slash {
  margin: 0 16px;
}

.photo-list {
  padding-top: 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.photo-list .thumbnail {
  margin: 0 2px 4px;
  width: 100%;
  max-width: 120px;
  border-radius: 0;
  flex: 1 1 calc(100% / 3 - 4px);
}
.photo-list .delete {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

.photo-default {
  background: #eceff1;
}

.photo-selection input[type=file] {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
}

.photo-btn-icon {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.5);
  color: #455a64;
  font-size: 30px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.slider-outer {
  padding: 52px 0 18px;
  position: relative;
}

.vertical-slider-outer {
  padding: 8px 0 0 32px;
  width: 50%;
  position: relative;
  float: left;
}
.vertical-slider-outer + .col-1-btn {
  width: 50%;
  float: right;
}
@media (min-width: 768px) {
  .vertical-slider-outer {
    padding-left: 20%;
  }
}

.vheight-slider {
  height: 400px;
  height: 60vh;
}

.min,
.max {
  position: absolute;
  top: 0;
  font-size: 11px;
  color: #bdbdbd;
}

.min {
  left: 0;
}

.max {
  right: 0;
}

.slider-value {
  margin-right: 3px;
  padding: 4px;
  width: 44px;
  text-align: right;
  border: 1px solid #e0e0e0;
  vertical-align: bottom;
}

.vslider-value {
  padding: 0;
  width: 60px;
  display: inline-block;
  font-size: 30px;
}

.vslider-feedback {
  position: absolute;
  top: -24px;
  left: 30%;
}
@media (min-width: 768px) {
  .vslider-feedback {
    left: 45%;
  }
}

.btn-checkbox {
  margin-bottom: -4px;
  display: flex;
  flex-wrap: wrap;
}
.btn-checkbox [type=checkbox],
.btn-checkbox [type=radio] {
  display: none;
}
.btn-checkbox [type=checkbox] + label,
.btn-checkbox [type=radio] + label {
  margin: 0 4px 4px 0;
  padding: 4px 16px;
  min-width: 40px;
  display: inline-block;
  color: #bdbdbd;
  text-align: center;
  font-size: 18px;
  border: 1px solid #cfd8dc;
  border-radius: 30px;
  cursor: pointer;
  transition: color, background, border-color 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-checkbox [type=checkbox]:checked + label,
.btn-checkbox [type=radio]:checked + label {
  background: #f4fffe;
  color: #4db6ac;
  border-color: #80cbc4;
  font-weight: 600;
}
.btn-checkbox.col-1-btn {
  margin-bottom: -8px;
  display: block;
}
.btn-checkbox.col-1-btn [type=checkbox] + label,
.btn-checkbox.col-1-btn [type=radio] + label {
  margin: 0 auto 8px;
  padding: 15px 16px;
  max-width: 600px;
  display: block;
}
.btn-checkbox.col-2-btn {
  margin-bottom: -8px;
  justify-content: space-between;
}
.btn-checkbox.col-2-btn [type=checkbox] + label,
.btn-checkbox.col-2-btn [type=radio] + label {
  margin: 0 0 8px;
  padding: 15px 16px;
  width: calc(50% - 4px);
  max-width: 600px;
  display: block;
}

.normal-checkbox [type=checkbox] {
  display: none;
}
.normal-checkbox [type=checkbox] + label {
  padding: 8px 0 8px 24px;
  display: inline-block;
  position: relative;
  color: #bdbdbd;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.normal-checkbox [type=checkbox] + label::before {
  margin-top: -9px;
  width: 16px;
  height: 16px;
  display: block;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  border: 1px solid #e0e0e0;
  transition: all .2s ease;
}
.normal-checkbox [type=checkbox] + label::after {
  margin-top: -4px;
  width: 8px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 4px;
  content: "";
  border-left: 2px solid #4db6ac;
  border-bottom: 2px solid #4db6ac;
  transform: scale(0) rotate(0);
  opacity: 0;
  transition: all .2s ease-in-out;
}
.normal-checkbox [type=checkbox]:checked + label {
  color: #4db6ac;
  font-weight: 600;
}
.normal-checkbox [type=checkbox]:checked + label::before {
  background-color: #e0f7fa;
  border-color: #4db6ac;
}
.normal-checkbox [type=checkbox]:checked + label::after {
  transform: scale(1) rotate(-45deg);
  opacity: 1;
}
.normal-checkbox.style-dark [type=checkbox] + label {
  color: #757575;
}
.normal-checkbox.style-dark [type=checkbox]:checked + label {
  color: #4db6ac;
}

.radio-btn {
  margin: 8px 0;
}
.radio-btn [type=radio] {
  display: none;
}
.radio-btn [type=radio] + label {
  margin: 0;
  padding: 12px 5px;
  display: block;
  float: left;
  background: #fff;
  font-size: 16px;
  color: #4db6ac;
  text-align: center;
  border: 1px solid #4db6ac;
  border-right: none;
  transition: all 0.4s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.radio-btn [type=radio]:checked + label {
  background: #4db6ac;
  color: #fff;
}
.radio-btn label {
  width: calc(100% / 3);
}
.radio-btn label:first-of-type {
  border-radius: 8px 0 0 8px;
}
.radio-btn label:last-of-type {
  border-right: 1px solid;
  border-radius: 0 8px 8px 0;
}

.g-2 label {
  width: 50%;
}

#message-like {
  height: 44px;
}

.submit-error {
  animation: shakeX 0.4s;
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(10);
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes dropBounceFade {
  0% {
    transform: translateY(-16px);
    opacity: 0;
  }
  60% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(-4px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes tapBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tapFade {
  0% {
    background-color: #fff;
  }
  20% {
    background-color: #ebebeb;
  }
  100% {
    background-color: #fff;
  }
}
@keyframes tapFadeIsNew {
  0% {
    background-color: #e0f7fa;
  }
  20% {
    background-color: #bdeef4;
  }
  100% {
    background-color: #e0f7fa;
  }
}
@keyframes scaleUpFade {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tapFadeBright {
  0% {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }
  20% {
    -webkit-filter: brightness(90%);
    filter: brightness(90%);
  }
  100% {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }
}
@keyframes loading {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes shake {
  0%,20%,40%,60% {
    transform: translateY(0);
  }
  10%,30%,50% {
    transform: translateY(-8px);
  }
}
@keyframes scaleUpFadeDown {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-200px);
  }
  60% {
    transform: scale(1.1) translateY(16px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes shakeX {
  0%,100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(5px);
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*--------------------------------
header
--------------------------------*/
.logo {
  width: 170px;
  height: 50px;
  display: block;
  background: transparent url(../images/logo.png) no-repeat 0 0;
  background-size: auto 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.index .logo {
  display: none;
}
.license .logo {
  height: 70px;
  display: inline-block;
  background-position: center center;
}

.navigation-bar {
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
  z-index: 4;
}
.message .navigation-bar {
  border-color: #fff;
}
.in-logout .navigation-bar {
  position: relative;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .push-setting .navigation-bar {
    padding-top: 44px;
    height: 94px;
  }
}

.nav-menu,
.help-btn {
  position: absolute;
  bottom: 0;
}

.nav-menu {
  width: 50px;
  height: 50px;
  font-size: 10px;
  font-feature-settings: "palt";
}
.nav-menu a {
  height: 100%;
  display: block;
  color: #757575;
  overflow: visible;
}
.nav-menu .flzi {
  height: 35px;
  display: block;
  font-size: 24px;
  line-height: 42px;
  color: #999;
}

.search-menu {
  left: 0;
}
.search-menu .flzi {
  color: #cfd8dc;
}
.search-menu.filtering a {
  color: #4db6ac;
}
.search-menu.filtering .flzi {
  color: #80cbc4;
}

.mypage-menu {
  right: 0;
}
.mypage-menu .flzi {
  color: #999;
}
.mypage-menu .new-sign {
  top: 8px;
  right: 8px;
}

.help-btn {
  width: 22px;
  height: 22px;
  top: 50%;
  right: 58px;
  font-size: 18px;
  color: #999;
  border: 1px solid;
  border-radius: 50%;
  line-height: 20px;
  transform: translateY(-50%);
  /*@include media(iPhoneX){
  	margin-top: 4px;
  }*/
}

.view-switch {
  margin-top: 6.5px;
  display: inline-block !important;
  /*@include media(iPhoneX){
  	margin-top: 14.5px;
  }*/
}

.view-grid,
.view-card {
  display: block;
  float: left;
  vertical-align: middle;
}

.switch-btn {
  width: 36px;
  height: 36px;
  display: block;
  background: #eceff1;
  font-size: 18px;
  color: #fff;
  line-height: 36px;
  overflow: hidden;
  z-index: 1;
}
.view-grid .switch-btn {
  border-radius: 8px 0 0 8px;
}
.view-card .switch-btn {
  border-radius: 0 8px 8px 0;
}
.switch-btn.is-active {
  background-color: #373531;
}
.switch-btn:hover {
  color: #fff;
}

.page-title {
  padding: 0 50px;
  font-size: 18px;
  color: #373531;
  line-height: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /*@include media(iPhoneX){
  	margin-top: 8px;
  }*/
}

.tab-wrapper {
  height: 50px;
}

.tab {
  height: 50px;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 1px 0 #e0e0e0;
  z-index: 2;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .tab {
    top: 58px;
  }
}
.tab::before {
  height: 2px;
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  background: #80cbc4;
  transform: translateX(-50%) scaleX(0.7);
  transition: all .2s ease-in-out;
}
.credit-possible .tab {
  position: relative;
  top: 0;
}

.tab-1::before {
  transform: translateX(-50%) scaleX(0.8);
}

.tab-2::before {
  transform: translateX(50%) scaleX(0.8);
}

.tab-menu {
  width: 100%;
}
.tab-menu a {
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
  color: #999;
}
.tab-menu .flzi {
  margin-right: 4px;
  font-size: 16px;
  color: #e0e0e0;
  vertical-align: text-top;
}
.tab-menu.current a {
  color: #4db6ac;
}
.tab-menu.current .flzi {
  color: #4db6ac;
}

.new-sign-mini a::before {
  width: 5px;
  height: 5px;
  display: inline-block;
  position: relative;
  left: -10px;
  border-radius: 3px;
  background: #f06292;
  content: "";
}

/*--------------------------------
tabbar
--------------------------------*/
.tabmenu-bar {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  z-index: 5;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .s-filter .tabmenu-bar {
    height: 66px;
  }
}

.nav-wrapper {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.nav-list {
  position: relative;
  flex: 1 1 20%;
  text-align: center;
  font-size: 10px;
  font-feature-settings: "palt";
  overflow: hidden;
}
.nav-list a {
  height: 100%;
  display: block;
  color: #757575;
}
.nav-list .flzi {
  height: 32px;
  display: block;
  font-size: 23px;
  line-height: 32px;
  color: #999;
}
.nav-list .current,
.nav-list .current .flzi {
  color: #373531;
}
.nav-list .new-sign {
  top: 8px;
  left: 50%;
  transform: translateX(6px);
}

/*--------------------------------
slide menu
--------------------------------*/
.slide-menu {
  padding: 0 0 50px;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 4;
  /*@include media(iPhoneX){
  	padding-bottom: 82px;
  }*/
}

.top-fixed {
  padding-top: 205px;
  /*@include media(iPhoneX){
  	padding-top: 213px;
  }*/
}

.menu-close {
  top: 0;
  bottom: auto;
  left: 0;
  text-align: center;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  /*@include media(iPhoneX){
  	top: 8px;
  }*/
}

.mystatus-summary {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
  z-index: 4;
  /*@include media(iPhoneX){
  	padding-top: 8px;
  }*/
}

.my-name {
  color: #373531;
  font-size: 16px;
}

.mystatus-basic-section {
  margin: 16px 0 0;
  position: relative;
  text-align: center;
  transition: opacity 0.4s ease-in-out;
}
.mystatus-basic-section .thumbnail {
  margin: 0 auto 8px;
  width: 70px;
  height: 70px;
}
.mystatus-basic-section .my-name {
  margin-bottom: 38px;
  display: inline-block;
}
.mystatus-basic-section .general-btn {
  margin-left: 43px;
  position: absolute;
  top: 42px;
  left: 50%;
}

.mystatus-sub-section {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  transition: opacity 0.4s ease-in-out;
}

.mystatus-col {
  flex: 1 1 100%;
  text-align: center;
}
.mystatus-col .label {
  font-size: 10px;
  color: #bdbdbd;
  font-feature-settings: "palt";
}
.mystatus-col .value {
  margin-left: -16px;
  min-width: 60px;
  height: 38px;
  display: inline-block;
  font-size: 16px;
  line-height: 38px;
  white-space: nowrap;
}
.mystatus-col .value .js-tap-object {
  padding-left: 20px;
  display: block;
  position: relative;
  color: #373531;
  vertical-align: middle;
  overflow: visible;
}
.mystatus-col .value .flzi {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 18px;
  transform: translate(0, -50%);
}
.mystatus-col .rank-free .flzi {
  color: #cfd8dc;
}
.mystatus-col .rank-pay .flzi,
.mystatus-col .rank-premium .flzi {
  color: #c5ac84;
}
.mystatus-col .rank-premium {
  font-size: 14px;
  font-feature-settings: "palt";
  letter-spacing: -.08em;
}

.like-badge .value,
.point-badge .value {
  font-size: 24px;
}

.like-badge .flzi {
  color: #f06292;
}
.point-badge .flzi {
  color: #ffc107;
}

.rank-premium {
  font-size: 14px;
  font-feature-settings: "palt";
  letter-spacing: -.08em;
}

.is-fixed {
  height: 50px;
  position: fixed;
  top: 0;
  /*@include media(iPhoneX){
  	top: 8px;
  	&.mystatus-summary,
  	&.navigation-bar{
  		height: 58px;
  		top: 0;
  	}
  }*/
}
.is-fixed.mystatus-summary {
  left: 0;
  right: 0;
}
.in-logout .is-fixed {
  position: fixed;
}

.global-nav-wrapper {
  padding: 16px 0;
}

.global-nav {
  width: calc(100% / 3);
  height: 90px;
  float: left;
  text-align: center;
}

.global-nav-menu {
  margin: 8px auto 0;
  width: 68px;
  height: 66px;
  display: block;
  position: relative;
  font-size: 10px;
  color: #757575;
  overflow: visible;
}
.global-nav-menu .flzi {
  height: 50px;
  display: block;
  font-size: 38px;
  line-height: 50px;
  color: #999;
}
.global-nav-menu .new-sign {
  top: 8px;
  left: 50%;
  transform: translateX(10px);
}

@media (min-width: 600px) {
  .global-nav-wrapper {
    padding: 30px 0;
  }

  .global-nav {
    width: calc(100% / 4);
    height: 112px;
  }

  .global-nav-menu {
    margin-top: 16px;
    width: 80px;
    height: 75px;
    font-size: 12px;
  }
  .global-nav-menu .flzi {
    height: 60px;
    font-size: 48px;
    line-height: 60px;
  }
}
.pickup-wrapper {
  padding: 4px 8px 0;
}
@media (min-width: 600px) {
  .pickup-wrapper {
    padding: 40px 11px 0;
  }
}

.pickup-card {
  margin-bottom: 20px;
  width: calc(50% - 4px);
  float: left;
}
.pickup-card:nth-child(2n-1) {
  margin-right: 8px;
}
.pickup-card .js-tap-object {
  width: 100%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
@media (min-width: 600px) {
  .pickup-card {
    margin: 0 5px 30px;
    width: calc(100% / 3 - 10px);
  }
  .pickup-card:nth-child(2n-1) {
    margin-right: 5px;
  }
}

.card-thumbnail {
  position: relative;
  background: url(../images/thumb_bg.png) no-repeat center center #eceff1;
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
}
.card-thumbnail::before {
  padding-top: 50%;
  display: block;
  content: "";
}

.card-caption {
  padding: 4px;
  height: 38px;
  font-size: 12px;
  color: #373531;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .card-caption {
    font-size: 14px;
  }
}

/*--------------------------------
index
--------------------------------*/
.index-slick-wrapper {
  background: #373531;
}
.index-slick-wrapper .slick-dots {
  width: 100%;
  height: 6px;
  display: block;
  position: absolute;
  bottom: 16px;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .index-slick-wrapper .slick-dots {
    bottom: 72px;
  }
}
@media (min-width: 600px) {
  .index-slick-wrapper .slick-dots {
    bottom: 32px;
  }
}

.index-slick {
  height: 100vh;
  position: relative;
  opacity: 0;
  animation: fadeIn 0.8s ease-in forwards;
}

.slide-catch {
  position: absolute;
  top: 40vh;
  left: 32px;
  right: 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.75;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.index-slick-1 .slide-catch {
  top: 30vh;
  right: auto;
}
.index-slick-4 .slide-catch {
  left: auto;
}
@media (min-width: 768px) {
  .slide-catch {
    top: 32vh;
    font-size: 24px;
  }
  .index-slick-1 .slide-catch {
    left: 100px;
    right: auto;
  }
  .index-slick-2 .slide-catch {
    top: 38vh;
    left: auto;
    right: 100px;
  }
  .index-slick-3 .slide-catch {
    left: 100px;
    right: auto;
  }
  .index-slick-4 .slide-catch {
    top: 38vh;
    left: auto;
    right: 100px;
  }
}
@media (max-width: 374px) {
  .slide-catch {
    top: 37vh;
  }
}

.index-slick-1 {
  background: url(../images/index-slide-1@2x.jpg) no-repeat center center #373531;
  background-size: cover;
}

.index-slick-2 {
  background: url(../images/index-slide-2@2x.jpg) no-repeat center center #373531;
  background-size: cover;
}

.index-slick-3 {
  background: url(../images/index-slide-3@2x.jpg) no-repeat center center #373531;
  background-size: cover;
}
.index-slick-3 .slide-catch {
  color: #373531;
  text-shadow: none;
}

.index-slick-4 {
  background: url(../images/index-slide-4@2x.jpg) no-repeat center center #373531;
  background-size: cover;
}

@media (min-width: 413px) and (max-width: 767px) {
  .index-slick-1 {
    background-image: url(../images/index-slide-1@3x.jpg);
  }

  .index-slick-2 {
    background-image: url(../images/index-slide-2@3x.jpg);
  }

  .index-slick-3 {
    background-image: url(../images/index-slide-3@3x.jpg);
  }

  .index-slick-4 {
    background-image: url(../images/index-slide-4@3x.jpg);
  }
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .index-slick-1 {
    background-image: url(../images/index-slide-1@iPhoneX.jpg);
  }

  .index-slick-2 {
    background-image: url(../images/index-slide-2@iPhoneX.jpg);
  }

  .index-slick-3 {
    background-image: url(../images/index-slide-3@iPhoneX.jpg);
  }

  .index-slick-4 {
    background-image: url(../images/index-slide-4@iPhoneX.jpg);
  }
}
@media (min-width: 768px) {
  .index-slick-1 {
    background-image: url(../images/index-slide-1@tab.jpg);
  }

  .index-slick-2 {
    background-image: url(../images/index-slide-2@tab.jpg);
  }
  .index-slick-2 .slide-catch {
    color: #373531;
    text-shadow: none;
  }

  .index-slick-3 {
    background-image: url(../images/index-slide-3@tab.jpg);
  }

  .index-slick-4 {
    background-image: url(../images/index-slide-4@tab.jpg);
  }
}
.regist-parts {
  padding: 0 16px;
  position: absolute;
  bottom: 15%;
  bottom: 15vh;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .regist-parts {
    bottom: 20%;
    bottom: 20vh;
  }
}
@media (min-width: 768px) {
  .regist-parts {
    height: 16%;
    height: 16vh;
  }
}

.btn-note {
  line-height: 1.4;
}
.index .btn-note {
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
}
@media (min-width: 768px) {
  .btn-note {
    font-size: 16px;
  }
}

.fb-login-btn {
  width: 100%;
  max-width: 260px;
  height: 40px;
  background: #3b5999;
  line-height: 40px;
  font-size: 16px;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .fb-login-btn {
    max-width: 330px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 25px;
  }
}

.ak-btn {
  margin-top: 12px;
  width: 260px;
  height: 40px;
  background: #4f5357;
  line-height: 40px;
  font-size: 16px;
  border-radius: 20px;
}
.ak-btn:hover {
  color: #fff;
}
@media (min-width: 768px) {
  .ak-btn {
    width: 330px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 25px;
  }
}

.apple-btn {
  margin-top: 12px;
}
@media (min-width: 768px) {
  .apple-btn-img {
    width: 330px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 25px;
  }
}

.terms-link {
  display: inline-block;
  position: absolute;
  bottom: 36px;
  left: 50%;
  color: #fff;
  font-size: 12px;
  text-decoration: underline;
  transform: translateX(-50%);
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .terms-link {
    bottom: 110px;
  }
}
@media (min-width: 600px) {
  .terms-link {
    bottom: 58px;
    font-size: 14px;
  }
}

.update .slick-list {
  opacity: .4;
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
}
.update .regist-parts {
  bottom: 20vh;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .update .regist-parts {
    bottom: 30vh;
  }
}

.animate-bounce-fade {
  opacity: 0;
}
.animate-bounce-fade:nth-child(1) {
  animation: dropBounceFade 0.6s ease-in 0.4s forwards;
}
.animate-bounce-fade:nth-child(2) {
  animation: dropBounceFade 0.6s ease-in 0.8s forwards;
}
.animate-bounce-fade:nth-child(3) {
  animation: dropBounceFade 0.6s ease-in 1.2s forwards;
}
.animate-bounce-fade:nth-child(4) {
  animation: dropBounceFade 0.6s ease-in 1.6s forwards;
}

/*--------------------------------
thank you page
--------------------------------*/
.thanks-body {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: url(../images/thanks_bg@2x.jpg) no-repeat center center;
  background-size: cover;
}
@media (min-width: 413px) and (max-width: 767px) {
  .thanks-body {
    background-image: url(../images/thanks_bg@3x.jpg);
  }
}
@media (min-width: 768px) {
  .thanks-body {
    background-image: url(../images/thanks_bg@tab.jpg);
  }
}
@media (min-width: 1024px) {
  .thanks-body {
    background-image: url(../images/thanks_bg@tabpro.jpg);
  }
}

.fb-status {
  margin: 0 38px;
  height: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
}

.progress_bar {
  margin-top: 80px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

.fb_progress {
  width: 0;
  height: 100%;
  display: block;
  background: #fff;
  content: "";
}

.progress_text {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .fb-status {
    margin: 0 auto;
    width: 400px;
    height: 200px;
  }

  .progress_bar {
    margin-top: 130px;
  }

  .progress_text {
    font-size: 20px;
    line-height: 1.4;
  }
}
/*--------------------------------
general contents
--------------------------------*/
.content-body {
  padding: 50px 0;
  overflow: hidden;
}
.push-setting .content-body, .community-detail .content-body, .campaign .content-body, .in-logout .content-body, .auth .content-body, .in-logout .content-body, .pr-sample .content-body {
  padding-bottom: 0;
}
.entry .content-body {
  padding: 3px 0 60px;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .content-body {
    /*padding: 58px 0 82px;*/
  }
  .community-detail .content-body, .auth .content-body, .campaign .content-body, .in-logout .content-body, .pr-sample .content-body {
    padding-bottom: 32px;
  }
  .push-setting .content-body {
    padding-top: 94px;
  }
  .entry .content-body {
    padding-bottom: 92px;
  }
  .s-filter .content-body {
    padding-bottom: 66px;
  }
  .unsupported .content-body {
    padding-bottom: 0;
  }
}

.none-padding-top {
  padding-top: 0;
}

.none-padding-bottom {
  padding-bottom: 0;
}

.grid-wrapper {
  margin: 16px 0;
  padding: 0 8px;
  position: relative;
}

.card-wrapper {
  margin: 16px 0;
  padding: 0 16px;
}

.newface {
  width: 40px;
  height: 40px;
  position: absolute;
  background: rgba(69, 90, 100, 0.6);
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  z-index: 2;
}

.thumbnail {
  position: relative;
  background: url(../images/thumb_bg.png) no-repeat center center #eceff1;
  background-size: cover;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
.thumbnail::before {
  padding-top: 100%;
  display: block;
  content: "";
}

.thumbnail-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.online {
  text-indent: 22px;
  background: url(../images/icon_online.png) no-repeat left center;
  background-size: 18px auto;
  vertical-align: bottom;
}

.offline {
  position: relative;
  text-indent: 10px;
  vertical-align: bottom;
}
.offline::before {
  width: 6px;
  height: 6px;
  display: block;
  position: absolute;
  top: 50%;
  background: #999;
  content: "";
  border-radius: 3px;
  transform: translateY(-50%);
}
.offline.short-span::before {
  background-color: #9addb0;
}
.offline.long-span::before {
  background-color: #ffd54f;
}

.grid-wrapper .pr-banner {
  margin: 0 8px 20px;
}
.card-wrapper .pr-banner {
  margin-bottom: 16px;
}
.entry .pr-banner {
  position: relative;
}
.pr-banner a {
  display: inline-block;
  overflow: hidden;
}
.pr-banner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
}
@media (min-width: 600px) {
  .grid-wrapper .pr-banner, .entry .pr-banner {
    margin: 0 auto 40px;
    max-width: 450px;
  }
  .card-wrapper .pr-banner {
    margin: 0 auto 32px;
    max-width: 450px;
  }
}

.overscroll {
  padding: 32px 0;
  clear: both;
  text-align: center;
  color: #999;
}

.no-receive {
  margin: 16px;
  position: relative;
  background: url(../images/caution.png) no-repeat 14px center #c62828;
  background-size: 22px auto;
  font-size: 11px;
  line-height: 1.6;
  border-radius: 8px;
  overflow: hidden;
}
.no-receive a {
  padding: 14px 30px 14px 48px;
  display: block;
  color: #fff;
}
.no-receive .angle {
  position: absolute;
  top: 50%;
  right: 13px;
  font-size: 18px;
  transform: translateY(-50%);
}
@media (max-width: 374px) {
  .no-receive {
    font-size: 10px;
    background-position: 12px center;
    background-size: 16px auto;
  }
  .no-receive a {
    padding: 14px 16px 14px 32px;
  }
  .no-receive .angle {
    right: 8px;
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .no-receive {
    font-size: 12px;
  }
  .no-receive a {
    padding: 16px 30px 16px 48px;
  }
}

.warning-box {
  margin: 16px;
  padding: 14px 16px;
  background: #c62828;
  font-size: 12px;
  color: #fff;
  line-height: 1.6;
  border-radius: 8px;
  overflow: hidden;
}
.warning-box a {
  color: #fff;
  text-decoration: underline;
}
.warning-box .primary-heading {
  margin-bottom: 8px;
}
.warning-box .note > li {
  font-size: 11px;
  border-left-color: #e53935;
}
.warning-box ol.note > li::before {
  background: #fcc;
  color: #c62828;
}

.sub-prof {
  line-height: 1.4;
  letter-spacing: -0.4em;
}
.sub-prof .prof-list {
  display: inline-block;
  font-size: 10px;
  color: #999;
  white-space: nowrap;
  letter-spacing: normal;
  word-break: break-all;
}
.sub-prof .prof-list .value {
  font-size: 14px;
  color: #373531;
}
@media (min-width: 600px) {
  .sub-prof .prof-list {
    display: block;
  }
}
@media (min-width: 768px) {
  .sub-prof {
    line-height: 26px;
  }
  .sub-prof .prof-list {
    font-size: 14px;
  }
  .sub-prof .prof-list .value {
    font-size: 18px;
  }
}

.HN,
.tweet {
  word-break: break-all;
}

.btn-space {
  text-align: center;
}

.large-space {
  margin: 40px 0;
  padding: 0 16px;
}
.large-space .cancel {
  margin: 16px auto;
  padding: 0;
  width: 220px;
  display: block;
}
.large-space .cancel:hover {
  color: #757575;
}

.middle-space {
  margin: 32px 0;
  padding: 0 16px;
}

.align-right {
  text-align: right;
}

.btn-wrapper {
  margin: 0 auto;
  max-width: 311px;
  display: block;
  position: relative;
}

.inline-position {
  letter-spacing: -0.4em;
}
.tabmenu-bar .inline-position {
  padding-top: 4px;
}
@media (max-width: 374px) {
  .tabmenu-bar .inline-position .ok {
    min-width: 125px;
  }
}
.inline-position .like,
.inline-position .message-like,
.inline-position .ok {
  padding: 0 16px;
  min-width: 145px;
}

.like,
.ans-like,
.free-like,
.thanks {
  background: url(../images/btn_like.png) no-repeat 10px center #f06292;
  background-size: 27px;
}

.look {
  background: url(../images/btn_look.png) no-repeat 10px center #f9a825;
  background-size: 27px;
}

.to_message {
  background: url(../images/btn_msg_w.png) no-repeat 10px center #4db6ac;
  background-size: 24px;
}

.ok {
  background: #4db6ac;
}

.message-like {
  background: url(../images/btn_m-like.png) no-repeat 10px center #ff7b74;
  background-size: 27px;
}

.look-message {
  background: url(../images/btn_look_message.png) no-repeat 10px center #f9a825;
  background-size: 27px;
}
@media (max-width: 374px) {
  .look-message {
    font-size: 16px;
    text-indent: 14px;
  }
}

.check-prof {
  background-color: #607d8b;
}

.after-look {
  width: 100%;
  max-width: 311px;
  height: 40px;
  background: transparent;
  line-height: 36px;
  font-size: 18px;
  font-weight: 600;
  color: #f9a825;
  border: 2px solid #f9a825;
}

.buy {
  background: url(../images/btn_shop.png) no-repeat 10px center #4db6ac;
  background-size: 20px;
  text-indent: 12px;
}

.exchange-btn {
  background: url(../images/btn_exchange.png) no-repeat 10px center #4db6ac;
  background-size: 20px;
  text-indent: 12px;
}

.in-review {
  background: #eceff1;
  color: #bdbdbd;
  cursor: default;
  pointer-events: none;
}

.em-btn {
  background-color: #4db6ac;
}

.em-secondary-btn {
  background-color: #f06292;
}

.skip-btn,
.hide_btn,
.removeFav,
.exit,
.light-btn {
  background-color: #90a4ae;
}

.cancel {
  padding: 8px;
  width: 120px;
  background: transparent;
  font-size: 12px;
  color: #999;
}
.cancel.submit-btn {
  padding: 0 8px;
  width: auto;
  background: #90a4ae;
  font-size: 14px;
  color: #fff;
}

.clear {
  min-width: 65px;
}

.disabled,
[disabled] {
  background-color: #eceff1;
  pointer-events: none;
  cursor: default;
}

.consume-pt {
  padding: 0 8px;
  height: 18px;
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e91e63;
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  border-radius: 30px;
  z-index: 2;
}
.consume-pt small {
  font-size: 10px;
}

.msg-ok {
  padding: 1px 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 30px;
}
@media (max-width: 374px) {
  .msg-ok {
    padding: 1px 4px;
  }
}
@media (min-width: 600px) {
  .msg-ok {
    background: #373531;
    border-color: #373531;
    color: #fff;
  }
}

.toolbar {
  padding: 8px 0;
  position: relative;
  background: #fff;
}
.toolbar .no-receive {
  margin: 0 16px 8px;
}

.tool-lead {
  padding: 8px 10px;
  font-size: 14px;
}
.tool-lead span {
  font-size: 16px;
}

.tool-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.option-btn {
  position: absolute;
  right: 16px;
  top: 0;
}

.option-btn-space {
  margin-bottom: 16px;
  min-height: 28px;
  position: relative;
}
.option-btn-space .btn {
  position: absolute;
  right: 0;
  top: 0;
}

.caution {
  margin-bottom: 16px;
  padding: 12px 8px;
  background: #eceff1;
  line-height: 1.6;
  font-size: 11px;
}

.caution-content {
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 12px;
}
.caution-content p {
  margin-bottom: 32px;
}

.date {
  text-align: center;
}

.time {
  font-size: 10px;
}

.body-img {
  margin-bottom: 16px;
  max-width: 100%;
  height: auto;
}
@media (min-width: 600px) {
  .body-img {
    max-width: 60%;
    margin: 30px 20%;
  }
}
.img-card .body-img {
  border-radius: 8px;
}

.basic_section {
  margin: 16px 0;
  position: relative;
  right: -16px;
  margin-left: -16px;
  border-bottom: 1px solid #eceff1;
}
.note + .basic_section {
  padding-top: 16px;
  border-top: 1px solid #eceff1;
}

.basic_contents {
  margin-right: 16px;
  padding: 24px 16px;
  line-height: 1.6;
  word-break: break-word;
}

.basic-label {
  color: #999;
  font-size: 12px;
  line-height: 1.4;
}

.flex-item {
  display: flex;
  align-items: center;
}
.flex-item .fc-item {
  width: 100%;
  max-width: 400px;
}

.common-list {
  padding-bottom: 32px;
}
.common-list img {
  margin-right: 16px;
  width: 50%;
  max-width: 130px;
  float: left;
  overflow: hidden;
  border-radius: 8px;
}
@media (max-width: 374px) {
  .common-list img {
    margin-right: 8px;
  }
}

.notice-list {
  margin: 8px 0;
  font-size: 14px;
  color: #0097a7;
}
.notice-list a {
  color: #0097a7;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .common-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .common-list {
    width: calc(50% - 8px);
  }
}
/*--------------------------------
entry
--------------------------------*/
.flex-center {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-box {
  margin-top: -50px;
  width: 100%;
  max-width: 500px;
}
.flex-center-box .submit-btn {
  min-width: 150px;
  font-size: 18px;
}

.code-group {
  justify-content: center;
}
.code-group .txt-s {
  margin: 8px 4px 0;
  border: 1px solid #bdbdbd;
  text-align: center;
}

.progress-bg {
  height: 3px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #cfd8dc;
  overflow: hidden;
  z-index: 5;
}

.entry-nav {
  padding: 10px 16px;
  height: 60px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  z-index: 5;
}
.entry-nav .ok {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 14px;
}
.entry-nav .cancel {
  padding: 0 8px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
}
.entry-nav .cancel.submit-btn,
.entry-nav .input-switch {
  width: auto;
  position: absolute;
  top: 10px;
  left: 16px;
}
.entry-nav .input-switch {
  width: 120px;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .entry-nav {
    padding: 10px 16px 42px;
    height: 92px;
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

.tab-field {
  margin-bottom: 8px;
}

.tab-index {
  display: flex;
}

.tab-index-list {
  width: 100%;
  height: 40px;
  background: #eceff1;
  line-height: 40px;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-right: none;
  color: #999;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.tab-index-list.active {
  background: #fff;
  border-bottom: none;
  color: #373531;
}
.tab-index-list:last-child {
  border-right: 1px solid #e0e0e0;
}

.tab-desc {
  width: 100%;
  min-height: 150px;
  height: 320px;
  height: 54vh;
  border: 1px solid #e0e0e0;
  border-top: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 374px) {
  .tab-desc {
    height: 47vh;
  }
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .tab-desc {
    height: 57vh;
  }
}
@media (min-width: 768px) {
  .tab-desc {
    height: 64vh;
  }
}

.tab-iframe {
  width: 100%;
  height: 100%;
}

.plain-alert {
  padding: 8px 0 8px 40px;
  background: url(../images/emp_error.png) no-repeat left center;
  background-size: 32px;
  line-height: 1.6;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 374px) {
  .agree-check.normal-checkbox [type=checkbox] + label {
    font-size: 15px;
  }
}
.return-value .huge-text {
  margin-right: 4px;
}

.entry-photo-set {
  padding-top: 0;
}
.entry-photo-set .thumbnail {
  border-radius: 50%;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .entry-photo-set .thumbnail {
    max-width: 150px;
  }
}

.in-photo-set {
  -webkit-mask: url(../images/photo_mask.png) no-repeat center/120px 120px;
  mask: url(../images/photo_mask.png) no-repeat center/120px 120px;
}
.in-photo-set .thumbnail {
  border-radius: 0;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .in-photo-set {
    -webkit-mask: url(../images/photo_mask.png) no-repeat center/150px 150px;
    mask: url(../images/photo_mask.png) no-repeat center/150px 150px;
  }
}

.exsample-slick-wrapper li {
  display: none;
}
.exsample-slick-wrapper .thumbnail {
  margin: 0 auto;
  width: 80%;
  max-width: 100px;
  border-radius: 8px;
}

.img-caption {
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.animate-shake {
  animation: shake 1.5s ease-in-out infinite;
}

.do-1 {
  background-image: url(../images/do-1.jpg);
}

.do-2 {
  background-image: url(../images/do-2.jpg);
}

.do-3 {
  background-image: url(../images/do-3.jpg);
}

.do-4 {
  background-image: url(../images/do-4.jpg);
}

.do-5 {
  background-image: url(../images/do-5.jpg);
}

.do-6 {
  background-image: url(../images/do-6.jpg);
}

.do-7 {
  background-image: url(../images/do-7.jpg);
}

.do-8 {
  background-image: url(../images/do-8.jpg);
}

.ng-1 {
  background-image: url(../images/ng-1.jpg);
}

.ng-2 {
  background-image: url(../images/ng-2.jpg);
}

.ng-3 {
  background-image: url(../images/ng-3.jpg);
}

.ng-4 {
  background-image: url(../images/ng-4.jpg);
}

.ng-5 {
  background-image: url(../images/ng-5.jpg);
}

.ng-6 {
  background-image: url(../images/ng-6.jpg);
}

.ng-7 {
  background-image: url(../images/ng-7.jpg);
}

.ng-8 {
  background-image: url(../images/ng-8.jpg);
}

.ng-9 {
  background-image: url(../images/ng-9.jpg);
}

.conf-menu {
  padding: 16px;
  position: fixed;
  top: 40%;
  left: 0;
  right: 0;
  z-index: 7;
}

.list-btn {
  margin: 0 auto 8px;
  max-width: 500px;
  display: block;
}

.menu-btn {
  height: 50px;
  display: block;
  background: #fff;
  font-size: 16px;
  line-height: 50px;
  color: #373531;
  border-radius: 8px;
}

.animate-in {
  animation: scaleUpFadeDown 0.4s ease-out 1;
}

.check-btn {
  width: 53px;
  height: 53px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  background: url(../images/check.png) no-repeat center center;
  background-size: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: shake 1.5s ease-in-out infinite;
}

.pr-refresh {
  margin-top: 8px;
  padding-left: 20px;
  width: 130px;
  background-color: #90a4ae;
}

.howto-pr {
  padding: 8px;
  position: absolute;
  bottom: 1px;
  right: 1px;
  background: white;
  color: #757575;
  font-size: 14px;
  border-radius: 30px;
}
.howto-pr .help-btn {
  margin-right: 2px;
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  top: 0;
  right: 0;
  transform: translateY(0);
  text-align: center;
  line-height: 14px;
  font-size: 14px;
  color: #757575;
}

.tips-balloon {
  margin: 0 auto;
  padding: 16px;
  max-width: 250px;
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  background: rgba(37, 34, 33, 0.9);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  text-indent: 0;
  text-align: center;
  border-radius: 16px;
  box-sizing: border-box;
  opacity: 1;
  animation: shake 1.5s ease-in-out infinite 0.9s;
  transition: all 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 15;
}
.tips-balloon h3 {
  font-size: 16px;
  font-weight: 500;
}
.tips-balloon::before {
  margin-left: -5px;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  border-style: solid;
}
.entry-nav .tips-balloon {
  margin: 0 16px;
  bottom: 100%;
  left: auto;
}
.entry-nav .tips-balloon::before {
  left: auto;
  right: 50px;
}
.tips-balloon.colorpink {
  background: rgba(240, 98, 146, 0.9);
}
.learn_ani .tips-balloon, .learning .tips-balloon {
  animation: none;
}

.top-balloon::before {
  top: -10px;
  display: block;
  content: "";
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent rgba(37, 34, 33, 0.9) transparent;
}

.bottom-balloon::before {
  bottom: -10px;
  display: block;
  content: "";
  border-width: 10px 5px 0 5px;
  border-color: rgba(37, 34, 33, 0.9) transparent transparent transparent;
}

.top_balloon.colorpink::before {
  border-color: transparent transparent rgba(240, 98, 146, 0.9) transparent;
}

.bottom-balloon.colorpink::before {
  border-color: rgba(240, 98, 146, 0.9) transparent transparent transparent;
}

.display-toBottom {
  margin-bottom: -30px;
  opacity: 0;
}

.display-toTop {
  margin-bottom: 30px;
  opacity: 0;
}

/*--------------------------------
tutorial
--------------------------------*/
.transparency {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  z-index: 16;
}

.tips_like {
  max-width: 300px;
  bottom: 80px;
  animation: none;
}

.learn_top,
.learning,
.learn_last {
  position: fixed;
  content: "";
  z-index: 15;
}

.learning {
  display: none;
}

.learn_top,
.learn_last {
  top: 50%;
  left: 0;
  right: 0;
}

.learn_approach {
  width: 20%;
  height: 50px;
  bottom: 0;
  left: 60%;
  background: #fff;
  text-align: center;
  font-size: 10px;
  font-feature-settings: "palt";
  color: #757575;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .learn_approach {
    height: 80px;
  }
}
.learn_approach .flzi {
  height: 32px;
  display: block;
  font-size: 23px;
  line-height: 32px;
}
.learn_approach .tips-balloon {
  margin-top: 5px;
  width: 290px;
  max-width: none;
  top: auto;
  bottom: 54px;
  right: -60px;
  left: auto;
}
.learn_approach .tips-balloon::before {
  left: 190px;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .learn_approach .tips-balloon {
    bottom: 84px;
  }
}

.learn_ani {
  position: fixed;
  bottom: 15%;
  left: 0;
  right: 0;
  z-index: 19;
}

.learning .display-toBottom {
  margin-top: 10px;
  margin-bottom: -15px;
}
.learning .display-toTop {
  margin-top: -15px;
  margin-bottom: 10px;
}

#ani_tips4 {
  bottom: 35%;
}

#action_container {
  width: 250%;
  height: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  transition: transform 1.5s cubic-bezier(0.39, -0.21, 0.54, 1.18);
}

.device_container {
  margin-top: -186px;
  width: 184px;
  height: 372px;
  position: absolute;
  top: 50%;
  background: url(../images/device.svg) no-repeat;
  background-size: contain;
}

#my_device {
  margin-left: -92px;
  left: 20%;
  z-index: 18;
  transition: all .6s ease-in-out;
}

#the_other_device {
  margin-right: -92px;
  right: 20%;
  z-index: 16;
}

.device_display {
  width: 160px;
  height: 284px;
  position: absolute;
  left: 12px;
  top: 44px;
  background: #222;
  overflow: hidden;
}

.profile_view {
  height: 100%;
  position: relative;
  background: #fff;
  transition: transform .2s ease-in-out;
}

.main_photo_container {
  position: relative;
}
.main_photo_container .thumbnail {
  border-radius: 0;
}

.like_mark {
  width: 70px;
  height: 70px;
  position: absolute;
  background: #f06292;
  color: #fff;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
  border-radius: 50%;
  opacity: 0;
  z-index: 2;
}
.main_photo_container .like_mark {
  margin-top: -35px;
  margin-left: -35px;
  top: 50%;
  left: 50%;
}

.ripple {
  margin-top: -35px;
  margin-left: -35px;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: #f06292;
  content: "";
  border-radius: 50%;
}

#throw {
  margin-left: -35px;
  top: 40%;
  left: 20%;
  z-index: 17;
}
#throw .ripple {
  opacity: 0;
}

.sub_photo_container {
  padding: 8px;
}
.sub_photo_container .thumbnail {
  margin-right: 4px;
  width: 30%;
  float: left;
  border-radius: 0;
}

.profile_view .btn-space {
  padding: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.profile_view .btn-space .btn {
  height: 35px;
  line-height: 35px;
  text-indent: 8px;
  background-size: 20px;
}

.startup_view {
  height: 100%;
  position: relative;
  background: #2f3d41;
  color: #fff;
  opacity: 0;
  transition: opacity .4s ease;
}

.time_count {
  padding-top: 40px;
  font-family: 'Roboto',sans-serif;
  font-weight: 100;
  font-size: 35px;
  text-align: center;
  letter-spacing: .05em;
}

.date_count {
  padding: 2px 0 20px;
  font-family: 'Roboto',sans-serif;
  font-weight: 100;
  font-size: 10px;
  text-align: center;
  letter-spacing: .05em;
}

.push_list {
  padding-left: 8px;
}
.push_list li {
  border-top: 1px solid #365058;
  border-bottom: 1px solid #365058;
  padding: 8px 8px 8px 20px;
  font-size: 10px;
  line-height: 1.4;
  background: url(../images/push_icon.png) no-repeat left 10px;
  background-size: 16px;
  transform: translateX(10px);
  transition: transform .4s ease;
}

.heart_mark {
  width: 60px;
  height: 60px;
  position: absolute;
  top: -57px;
  background: url(../images/heart.png) no-repeat;
  background-size: contain;
  content: "";
  opacity: 0;
  transform-origin: 50% bottom;
}
#my_device .heart_mark {
  right: -30px;
  transform: rotate(20deg);
}
#the_other_device .heart_mark {
  left: -30px;
  transform: rotate(-20deg);
}

.hand {
  width: 90px;
  height: 90px;
  position: absolute;
  right: -30px;
  bottom: -5px;
  content: "";
  background: url(../images/hand.png) no-repeat;
  background-size: contain;
  opacity: 0;
  z-index: 19;
  transition: transform .05s ease-in-out;
}

.notify {
  width: 60px;
  height: 60px;
  position: absolute;
  left: -50px;
  top: -55px;
  background: url(../images/notify.png) no-repeat;
  background-size: contain;
  content: "";
  opacity: 0;
  transform-origin: right bottom;
}

#matching_container {
  display: none;
  position: fixed;
  top: 40%;
  left: 0;
  right: 0;
  z-index: 17;
  transform: translateY(-50%);
}
#matching_container .matching-title {
  font-size: 40px;
  line-height: 1.2;
}
#matching_container .matching-title,
#matching_container .matching-lead {
  color: #fff;
}
#matching_container .center-heart {
  background-size: 40px;
}
#matching_container .matching-pair .thumbnail {
  width: 80px;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

#guide .purchased {
  display: none;
}

.start_from_zoom {
  transform: scale(2);
}

.start_bounce {
  opacity: 1;
  animation: start-bounce 0.3s;
}

.start_bounce2 {
  opacity: 1;
  animation: start-bounce2 0.3s;
}

.start_hand {
  opacity: 1;
}

.start_click {
  transform: translate(-5px, 10px);
}

.start_like {
  animation: start-like 1.4s;
}
.start_like .ripple {
  opacity: 0;
  animation: slow-ripple 0.8s;
}

.throw_like {
  opacity: 1;
  transform: translateX(150vw);
  animation: throw-like 1.5s linear;
}

.slide_screen {
  transform: translateX(-60%);
}
.slide_screen #my_device {
  animation: acceleration 1.5s linear;
}
.slide_screen #the_other_device {
  animation: deceleration 1.5s linear;
}

.catch_push {
  opacity: 1;
}
.catch_push .push_list li {
  transform: translateX(0);
}

.start_notify {
  opacity: 1;
  animation: start-bounce3 0.3s;
}

.close_prof_view {
  transform: scale(0);
}

@keyframes start-bounce {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(10deg);
  }
  10% {
    opacity: 1;
    transform: scale(0.2, 0.1) rotate(14deg);
  }
  75% {
    transform: scale(1.5, 1.7) rotate(28deg);
  }
  100% {
    transform: scale(1, 1) rotate(20deg);
  }
}
@keyframes start-bounce2 {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(-10deg);
  }
  10% {
    opacity: 1;
    transform: scale(0.2, 0.1) rotate(-14deg);
  }
  75% {
    transform: scale(1.5, 1.7) rotate(-28deg);
  }
  100% {
    transform: scale(1, 1) rotate(-20deg);
  }
}
@keyframes start-bounce3 {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  75% {
    transform: scale(1.5, 1.6);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes slow-ripple {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(2.4, 2.4);
  }
}
@keyframes start-like {
  0% {
    opacity: 1;
    transform: scale(1.7, 1.7);
  }
  55% {
    transform: scale(0.7, 0.7);
  }
  58% {
    transform: scale(0.9, 0.8);
  }
  64% {
    transform: scale(1.05, 1.1);
  }
  67% {
    transform: scale(0.85, 0.95);
  }
  70% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1, 1);
  }
}
@keyframes throw-like {
  0% {
    transform: translate(0, 0) rotate(-20deg);
  }
  25% {
    transform: translate(37.5vw, -70px) rotate(-10deg);
  }
  50% {
    transform: translate(75vw, -100px) rotate(-5deg);
  }
  75% {
    transform: translate(112.5vw, -70px) rotate(0deg);
  }
  95% {
    transform: translate(142.5vw, -5.5px) rotate(10deg);
  }
  100% {
    transform: translate(150vw, 0) rotate(0deg);
  }
}
@keyframes acceleration {
  0% {
    transform: rotate(0deg);
    transform-origin: left bottom;
  }
  30% {
    transform: rotate(0.5deg);
    transform-origin: left bottom;
  }
  50% {
    transform: rotate(-1deg);
    transform-origin: left bottom;
  }
  60% {
    transform: rotate(0deg);
    transform-origin: left bottom;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: left bottom;
  }
}
@keyframes deceleration {
  0% {
    transform: rotate(0deg);
    transform-origin: right bottom;
  }
  40% {
    transform: rotate(-1deg);
    transform-origin: right bottom;
  }
  70% {
    transform: rotate(0.5deg);
    transform-origin: right bottom;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: right bottom;
  }
}
/*--------------------------------
search grid
--------------------------------*/
.chara-box {
  margin: 0 8px 20px;
  width: calc(50% - 16px);
  position: relative;
  float: left;
}
@media (min-width: 600px) {
  .chara-box {
    margin-bottom: 40px;
    width: calc(100% / 3 - 16px);
  }
  .fee-list .chara-box {
    margin: 0 8px 20px;
    width: calc(50% - 16px);
  }
}
.chara-box .btn-space {
  margin-top: 6px;
  margin-bottom: 32px;
  min-height: 40px;
}
.chara-box .btn {
  font-size: 16px;
}
.chara-box .look {
  padding-left: 8px;
}
.chara-box .to_message,
.chara-box .thanks {
  padding-left: 16px;
}
@media (max-width: 374px) {
  .chara-box .like,
  .chara-box .ans-like,
  .chara-box .thanks {
    padding-left: 8px;
  }
  .chara-box .look {
    padding-left: 16px;
  }
  .chara-box .to_message,
  .chara-box .thanks {
    padding-left: 24px;
  }
}

.grid-wrapper .thumbnail {
  margin-bottom: 6px;
}
.grid-wrapper .basic-prof {
  margin-bottom: 6px;
  position: relative;
  font-size: 12px;
  color: #373531;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.4em;
}
.grid-wrapper .online,
.grid-wrapper .offline,
.grid-wrapper .area,
.grid-wrapper .age,
.grid-wrapper .compa {
  padding: 2px 0;
  display: inline-block;
  letter-spacing: normal;
}
.grid-wrapper .online {
  margin-right: 4px;
  width: 18px;
  overflow: hidden;
}
.grid-wrapper .offline {
  margin-right: 6px;
  width: 6px;
  overflow: hidden;
}
.grid-wrapper .area,
.grid-wrapper .age {
  margin-right: 8px;
}
.grid-wrapper .compa {
  padding-left: 17px;
  background: url(../images/icon_compa_gray.png) no-repeat left center;
  background-size: 15px auto;
}
.grid-wrapper .like-get {
  padding: 4px 8px 4px 24px;
  position: absolute;
  bottom: 28px;
  right: 4px;
  background: url(../images/icon_like_get.png) no-repeat 6px center rgba(255, 255, 255, 0.9);
  background-size: 17px auto;
  color: #f06292;
  border: 1px solid #eceff1;
  border-radius: 13px;
  letter-spacing: normal;
  z-index: 2;
}
.grid-wrapper .tweet {
  padding: 0 8px;
  height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
  color: #757575;
  line-height: 1.4;
  overflow: hidden;
}
.grid-wrapper .newface {
  top: 8px;
  transform: rotate(-15deg);
}
@media (min-width: 600px) {
  .grid-wrapper .like-get {
    right: 20px;
  }
  .grid-wrapper .tweet {
    padding: 0 35px;
  }
  .grid-wrapper .newface {
    top: 20px;
    left: 8px;
  }
  .grid-wrapper .appeal,
  .grid-wrapper .to_message,
  .grid-wrapper .thanks {
    padding-left: 0;
  }
}

/*--------------------------------
search card
--------------------------------*/
.chara-list {
  margin: 0 0 16px;
  position: relative;
  background: #fff;
}
.chara-list a {
  color: #fff;
}
.chara-list a:hover {
  color: #fff;
}
.chara-list .in-review {
  color: #bdbdbd;
}
@media (min-width: 600px) {
  .chara-list {
    margin-bottom: 32px;
  }
}

.card-wrapper .thumbnail {
  border-radius: 0;
}
@media (max-width: 374px) {
  .card-wrapper .thumbnail::before {
    padding-top: calc(100% - 16px);
  }
}
@media (min-width: 600px) {
  .card-wrapper .thumbnail {
    margin-right: 20px;
    width: 48%;
    float: left;
    overflow: visible;
  }
}
.card-wrapper .basic-prof {
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.6)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
@media (min-width: 600px) {
  .card-wrapper .basic-prof {
    height: auto;
    position: relative;
    background: transparent;
    color: #373531;
  }
  .card-wrapper .basic-prof .HN,
  .card-wrapper .basic-prof .age,
  .card-wrapper .basic-prof .area {
    display: inline;
    line-height: 1.4;
  }
  .card-wrapper .basic-prof .HN {
    max-width: none;
    white-space: normal;
    text-overflow: inherit;
    overflow: visible;
  }
}
@media (min-width: 768px) {
  .card-wrapper .basic-prof .HN,
  .card-wrapper .basic-prof .age,
  .card-wrapper .basic-prof .area {
    font-size: 24px;
  }
}
.card-wrapper .sub-prof {
  margin: 12px 4px 12px 16px;
}
.card-wrapper .sub-prof .prof-list {
  margin-right: 12px;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-wrapper .tweet {
  margin: 12px 16px 16px;
  font-size: 12px;
  color: #373531;
}
.card-wrapper .tweet p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-wrapper .newface {
  top: -8px;
  right: -8px;
}
.card-wrapper .btn-space {
  margin-top: 12px;
  padding: 0 16px;
  height: 60px;
}
.card-wrapper .btn {
  margin-bottom: 20px;
}
@media (min-width: 600px) {
  .card-wrapper .sub-prof {
    margin: 0 0 16px;
  }
  .card-wrapper .sub-prof .prof-list {
    margin-right: 0;
  }
  .card-wrapper .sub-prof {
    padding-right: 20px;
  }
  .card-wrapper .tweet {
    margin: 0;
    padding-right: 20px;
    font-size: 14px;
  }
  .card-wrapper .newface {
    left: -8px;
    right: auto;
  }
  .card-wrapper .btn-space {
    margin-top: 0;
    padding: 0 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 48%;
  }
  .card-wrapper .action-btn {
    max-width: 400px;
  }
  .card-wrapper .sub-photo {
    padding: 2px 8px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 30px;
  }
  .card-wrapper .sub-photo .flzi {
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.7);
  }
}

.prof-line-wrapper {
  padding: 8px 4px 8px 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
@media (min-width: 600px) {
  .prof-line-wrapper {
    padding: 40px 20px 20px 0;
    position: relative;
  }
}

.prof-line {
  margin-bottom: 8px;
  letter-spacing: -0.4em;
}
.prof-line li {
  margin-right: 10px;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: normal;
  vertical-align: middle;
}
@media (max-width: 374px) {
  .prof-line li {
    margin-right: 7px;
  }
}
.prof-line .online,
.prof-line .offline,
.prof-line .msg-ok {
  font-size: 12px;
}
@media (max-width: 374px) {
  .prof-line .msg-ok {
    font-size: 11px;
  }
}
.prof-line .HN,
.prof-line .age,
.prof-line .area,
.prof-line .sub-photo {
  font-size: 16px;
}
.prof-line .HN {
  max-width: 160px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (max-width: 374px) {
  .prof-line .HN {
    max-width: 124px;
  }
}
.prof-line .flzi {
  margin-right: 2px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 600px) {
  .prof-line .msg-ok {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .prof-line .flzi {
    color: #cfd8dc;
  }
}
@media (min-width: 768px) {
  .prof-line {
    font-size: 18px;
  }
}

/*--------------------------------
recv like
--------------------------------*/
.overlap-layout {
  margin: 5vh 0 0;
  position: relative;
}
@media (max-width: 374px) {
  .overlap-layout {
    margin: 3vh 0 0;
  }
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .overlap-layout {
    margin: 10vh 0 0;
  }
}
@media (min-width: 600px) {
  .overlap-layout {
    margin: 200px 0 0;
  }
}
.recomme .overlap-layout, .newcomers-pickup .overlap-layout {
  margin: 8vh 0 0;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .recomme .overlap-layout, .newcomers-pickup .overlap-layout {
    margin: 13vh 0 0;
  }
}
@media (min-width: 600px) {
  .recomme .overlap-layout, .newcomers-pickup .overlap-layout {
    margin: 230px 0 0;
  }
}
.overlap-layout .chara-list {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  transform: translate(4px, 4px);
}
.overlap-layout .chara-list .newface {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.overlap-layout .chara-list:last-child .newface {
  opacity: 1;
}
.overlap-layout .above-list {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
}
.overlap-layout .isForward {
  transform: translate(0, 0);
}
.overlap-layout .sub-prof {
  height: 23px;
  white-space: nowrap;
}
.overlap-layout .sub-prof .prof-list {
  max-width: 70%;
}
@media (max-width: 374px) {
  .overlap-layout .sub-prof .prof-list {
    max-width: 60%;
  }
}
.overlap-layout .btn-space {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 374px) {
  .overlap-layout .btn-space {
    height: 53px;
  }
}
@media (max-width: 374px) {
  .overlap-layout .btn {
    margin-bottom: 13px;
  }
}
.overlap-layout .btn:first-child {
  flex: 0 0 calc(40% - 4px);
}
.overlap-layout .btn:last-child {
  flex: 0 0 calc(60% - 4px);
}
@media (max-width: 374px) {
  .overlap-layout .thanks {
    padding-left: 22px;
  }
  .overlap-layout .message-like {
    padding-left: 10px;
  }
  .overlap-layout .free-like {
    padding-left: 20px;
    font-size: 17px;
    letter-spacing: -.07em;
  }
}
.overlap-layout .toMatchingList {
  opacity: 0;
  transform: translate(80px, 50vh) scale(0.2);
  transition: all .6s ease-in-out;
  z-index: 6;
}
.overlap-layout .toSkipList {
  opacity: 0;
  transform: translate(-200px, 0) scale(0.8);
  transition: all 0.4s ease-in-out;
}
.overlap-layout .toLikeList {
  opacity: 0;
  transform: translate(200px, 0) scale(0.8);
  transition: all 0.4s ease-in-out;
}

.get-like-recomme {
  position: absolute;
  top: -5vh;
  left: 0;
  right: 0;
  background: #f9a825;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  z-index: 1;
}
@media (max-width: 374px) {
  .get-like-recomme {
    top: -3vh;
  }
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .get-like-recomme {
    top: -10vh;
  }
}
@media (min-width: 600px) {
  .get-like-recomme {
    top: -200px;
  }
}
.get-like-recomme::after {
  margin-left: -9px;
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  bottom: -10px;
  left: 50%;
  content: "";
  border-style: solid;
  border-width: 10px 9px 0 9px;
  border-color: #f9a825 transparent transparent transparent;
}

.toast {
  margin: -60px 0 0 -60px;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(55, 53, 49, 0.85);
  font-size: 16px;
  color: #fff;
  text-align: center;
  border-radius: 16px;
  animation: scaleUpFade 0.4s ease-in-out;
}
.toast .flzi {
  height: 90px;
  display: block;
  font-size: 52px;
  line-height: 90px;
}

/*--------------------------------
list
--------------------------------*/
.list {
  padding: 11px 10px;
  position: relative;
  background: #fff;
  border-bottom: 1px solid #eceff1;
  overflow: hidden;
}
.list-menu .list {
  padding: 0;
}
.list-menu .list a {
  padding: 10px;
  min-height: 30px;
  display: block;
  position: relative;
  color: #373531;
  line-height: 30px;
}
.list-menu .list a .fa-angle-right {
  position: absolute;
  right: 16px;
  top: 50%;
  color: #90a4ae;
  transform: translateY(-50%);
}
.list-menu .list.primary-heading {
  margin-top: 16px;
  padding: 16px;
}
.list-menu .list .add-btn {
  margin-left: auto;
  padding: 0;
  width: 60px;
  min-height: 0;
  text-align: right;
  color: #4db6ac;
  display: block;
  overflow: visible;
}
.list .prof-line {
  margin-right: 20px;
  color: #373531;
  white-space: nowrap;
}
.visitor .list .prof-line, .fav .list .prof-line, .give-like .list .prof-line {
  margin-right: 40px;
}
.list .prof-line .HN {
  max-width: 50%;
}
@media (max-width: 374px) {
  .list .prof-line .HN {
    max-width: 70px;
  }
}
.list .time {
  position: absolute;
  right: 10px;
  bottom: 8px;
  line-height: 1;
  opacity: .5;
}
.list .thumbnail {
  width: 64px;
  float: left;
}
.list .basic-prof {
  padding: 4px 0 0;
  width: calc(100% - 78px);
  min-height: 64px;
  float: right;
}
.list .online {
  margin-right: 4px;
  width: 18px;
  overflow: hidden;
}
.list .offline {
  margin-right: 6px;
  width: 6px;
  overflow: hidden;
}
.list .btn-space {
  text-align: left;
}
.list .action-btn {
  width: 68%;
  height: 28px;
  font-size: 15px;
  line-height: 28px;
  border-radius: 5px;
  background-size: 20px;
}
.list .after-look {
  width: 68%;
  height: 28px;
  font-size: 15px;
  line-height: 24px;
}
@media (min-width: 768px) {
  .list {
    padding: 11px 16px;
  }
  .list .thumbnail {
    width: 94px;
  }
  .list .basic-prof {
    padding-top: 8px;
    width: calc(100% - 120px);
    min-height: 94px;
  }
  .list .action-btn {
    width: 300px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    background-size: 27px;
  }
  .list .after-look {
    width: 300px;
    height: 40px;
    font-size: 18px;
    line-height: 36px;
  }
}

.toolbar + .list-wrapper {
  border-top: 1px solid #eceff1;
}
.list-wrapper .date {
  background: #eceff1;
  color: #607d8b;
}

.newlist {
  background: #e0f7fa;
}
.newlist::before {
  width: 0;
  height: 0;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #80cbc4 transparent transparent transparent;
}

.leave {
  background: #e0e0e0;
}
.leave .thumbnail-img {
  background-image: url(../images/leave.png);
}
.leave .prof-line {
  color: #757575;
}

.list-text {
  margin: 0 20px 8px 0;
  display: -webkit-box;
  font-size: 12px;
  color: rgba(117, 117, 117, 0.8);
  line-height: 1.1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.list-top-border {
  border-top: 1px solid #eceff1;
}

.matching {
  color: #ec407a;
}

.btn-group {
  position: absolute;
  top: 0;
  right: 0;
}

.btnFavorite,
.toHide {
  width: 28px;
  height: 30px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 30px;
  vertical-align: middle;
  overflow: visible;
}
.btnFavorite:hover,
.toHide:hover {
  color: rgba(0, 0, 0, 0.2);
}

.favorite-on {
  color: #ffc107;
}
.favorite-on:hover {
  color: #ffc107;
}

.list-bottom-btn {
  position: absolute;
  right: 10px;
  bottom: 8px;
}

.recommend {
  margin: -8px 0 8px;
  padding: 20px 0;
  background: #fff4d5;
}
.no-receive + .recommend {
  margin-top: 8px;
}
.recommend .grid-wrapper {
  margin-bottom: 0;
  display: flex;
}

.recommend-heading {
  margin-bottom: 20px;
  font-size: 16px;
  text-align: center;
}

.recommend-box {
  margin: 0 2%;
  width: 21%;
}
@media (min-width: 600px) {
  .recommend-box {
    margin: 0 5%;
    width: 15%;
  }
}

.menu-title {
  margin-bottom: 16px;
  height: 38px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  overflow: hidden;
}
.newlist .menu-title {
  font-weight: 600;
}

.linear-navigation {
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  line-height: 40px;
  overflow: hidden;
}
.linear-navigation + .list-menu {
  border-top: 1px solid #eceff1;
}
@media (min-width: 768px) {
  .linear-navigation {
    justify-content: space-around;
  }
}

.no-receive + .list-menu {
  border-top: 1px solid #eceff1;
}

.nav-link {
  width: 40%;
  font-size: 18px;
}
.nav-link a {
  display: block;
  color: #757575;
  overflow: visible;
}
.nav-link:last-child {
  text-align: right;
}
.nav-link .fa {
  margin: 0 16px;
}
@media (min-width: 768px) {
  .nav-link {
    text-align: center;
  }
  .nav-link:last-child {
    text-align: center;
  }
}

.fix-nav-link {
  margin-top: -30px;
  width: 40px;
  height: 60px;
  position: fixed;
  top: 50%;
  display: block;
  font-size: 18px;
  line-height: 60px;
}
.fix-nav-link a {
  height: 100%;
  display: block;
  color: #757575;
  overflow: visible;
}
.fix-nav-link:first-child {
  left: 0;
}
.fix-nav-link:last-child {
  right: 0;
  text-align: right;
}
.fix-nav-link .fa {
  margin: 0 8px;
}

.unactive {
  color: #cfd8dc;
}

.logout {
  margin-top: 32px;
  border-top: 1px solid #eceff1;
}
.list-menu .logout a {
  color: #e53935;
}

/*--------------------------------
my page
--------------------------------*/
.main-photo {
  width: 40%;
  max-width: 160px;
}
.main-photo .thumbnail-img {
  z-index: 2;
}

.property {
  margin-left: 16px;
  flex-grow: 1;
}

.prof-rate {
  color: #757575;
  font-size: 11px;
  text-align: center;
}

.meter {
  margin: 8px auto 0;
  max-width: 300px;
  height: 8px;
  background: #cfd8dc;
  border-radius: 30px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #f06292;
  text-indent: -9999px;
}

.photo-slick-wrapper li {
  display: none;
}
.photo-slick-wrapper .thumbnail {
  margin: 0 auto;
  width: 90%;
  max-width: 100px;
  border-radius: 0;
}

.text-setting {
  position: relative;
}
.text-setting .tweet {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #e0e0e0;
}
.text-setting .tweet::before, .text-setting .tweet::after {
  width: 0px;
  height: 0px;
  position: absolute;
  display: block;
  content: "";
  border-style: solid;
}
.text-setting .tweet::before {
  top: -5px;
  left: 53px;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #fff transparent;
  z-index: 1;
}
.text-setting .tweet::after {
  top: -6px;
  left: 54px;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #e0e0e0 transparent;
  z-index: -1;
}
.text-setting .local-desc {
  position: absolute;
  bottom: -28px;
}
.text-setting .error {
  position: absolute;
}

.review-thumb .thumbnail-img {
  opacity: .6;
}

.get-photo-req {
  color: #ec407a;
}
.get-photo-req::before {
  margin-right: 4px;
  width: 6px;
  height: 6px;
  position: relative;
  top: -2px;
  background: #f06292;
  content: "";
  display: inline-block;
  border-radius: 3px;
}

.edit-btn {
  margin: 0 auto;
  width: 90%;
  max-width: 100px;
  position: relative;
}
.edit-btn::before {
  padding-top: 100%;
  display: block;
  content: "";
}
.edit-btn .btn {
  padding-top: 64%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 11px;
  font-feature-settings: "palt";
  white-space: nowrap;
  border-radius: 0;
}
.edit-btn .btn .flzi {
  margin-top: -8px;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 26px;
}

.popform .error {
  position: absolute;
}

.detail_list {
  width: 100%;
  table-layout: fixed;
}
.detail_list th {
  padding: 16px 8px;
  width: 40%;
  font-size: 12px;
  color: #999;
  font-weight: 500;
  text-align: left;
}
.detail_list:last-of-type {
  margin-bottom: 40px;
}

.push_head {
  padding: 8px 0;
  width: 60%;
  position: relative;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.push_head > div + div {
  margin-top: 8px;
}
.push_head a {
  padding: 10px 8px;
  display: block;
  background: #cfd8dc;
  color: #607d8b;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
}
.push_head .unset {
  background: #4db6ac;
  color: #fff;
}

.ng-list {
  padding: 0 32px;
}
.ng-list img {
  margin-right: 16px;
  width: 90px;
  height: auto;
  float: left;
}

.ng-txt {
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.photo-advice {
  margin: 0 auto;
  padding: 16px;
  max-width: 500px;
  position: relative;
  background: #e0f7fa;
  color: #455a64;
  text-align: center;
  line-height: 1.4;
  border-radius: 16px;
}
.photo-advice::after {
  margin-left: -12px;
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  bottom: -8px;
  left: 50%;
  content: "";
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #e0f7fa transparent transparent transparent;
}

.photo-grid-wrapper {
  justify-content: left;
}
@media (min-width: 600px) {
  .photo-grid-wrapper .thumbnail {
    max-width: none;
    flex: 0 1 calc(100% / 6 - 4px);
  }
}

.theme {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 8px;
  font-size: 12px;
  color: #fff;
}

/*--------------------------------
age author
--------------------------------*/
.certification {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.document {
  margin: 16px 0;
  width: 46%;
  max-width: 150px;
  text-align: center;
}
.document img {
  margin-bottom: 8px;
  width: 80%;
  height: auto;
}

.age-step {
  margin: 16px 0;
  width: 30%;
  max-width: 150px;
  text-align: center;
  position: relative;
}
.age-step img {
  margin-bottom: 8px;
  width: auto;
  height: 50px;
}
.age-step:nth-child(2)::before, .age-step:nth-child(2)::after {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  display: block;
  background: url(../images/arrow_g_g.png) no-repeat center center;
  background-size: contain;
  content: "";
  transform: translateY(-50%);
}
.age-step:nth-child(2)::before {
  left: -16px;
}
.age-step:nth-child(2)::after {
  right: -16px;
}

.local-label {
  margin-bottom: 16px;
  font-size: 14px;
  text-align: center;
}
.local-label .fa {
  margin-right: 4px;
  color: #cfd8dc;
}

.small-list {
  font-size: 10px;
  text-align: left;
}
.small-list li {
  margin: 8px 0;
}

.rh-item {
  margin-bottom: 60px;
  width: 100%;
  table-layout: fixed;
}
.rh-item th,
.rh-item td {
  padding: 16px;
}

th.required-parts {
  background: #f06292;
  color: #fff;
}

td.required-parts {
  background: #f8bbd0;
}

th.hide-parts {
  background: #90a4ae;
  color: #fff;
}

td.hide-parts {
  background: #cfd8dc;
}

.rh-list {
  margin-bottom: 16px;
}
.rh-list li {
  margin-bottom: 8px;
}
.rh-list li::before {
  margin-right: 4px;
  font-family: 'felizIcon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.required-parts .rh-list li::before {
  content: "\e904";
  color: #ec407a;
}
.hide-parts .rh-list li::before {
  content: "×";
  color: #90a4ae;
}

.balloon {
  font-size: 13px;
  font-weight: 600;
  color: #455a64;
  text-align: center;
  line-height: 30px;
}

.img-preview {
  margin: 0 auto 32px;
  max-width: 200px;
  height: auto;
  display: block;
}

@media (max-width: 374px) {
  .age .modal-heading {
    font-size: 16px;
  }
}
.certificate-wrapper {
  padding: 0 16px;
}
.certificate-wrapper img {
  margin: 0 4% 16px;
  width: 40%;
}

.age-in-review {
  padding: 40px 0;
  color: #ec407a;
  line-height: 1.6;
  text-align: center;
}

/*--------------------------------
info detail
--------------------------------*/
.detail-wrapper {
  min-height: calc(100vh - 140px);
  /*@include media(iPhoneX){
  	min-height: calc(100vh - 180px);
  }*/
}

.info-detail-header {
  padding: 16px;
}
.info-detail-header .time {
  display: block;
  text-align: right;
  opacity: .5;
}

.detail-heading {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #373531;
  line-height: 1.4;
  word-break: break-word;
}
@media (min-width: 768px) {
  .detail-heading {
    font-size: 26px;
  }
}

.info-body {
  padding: 20px 16px 40px;
  line-height: 1.6;
  word-break: break-word;
}
@media (min-width: 768px) {
  .info-body {
    font-size: 18px;
  }
}

/*--------------------------------
help detail
--------------------------------*/
.help-title {
  padding: 13px 32px 13px 16px;
  font-size: 15px;
  line-height: 1.4;
}
.help-title.accordion-open {
  font-weight: 600;
}

.accordion-head {
  background: url(../images/plus.png) no-repeat right center;
  background-size: 24px 13px;
}

.accordion-open {
  background-image: url(../images/minus.png);
}

.accordion-body {
  padding: 8px 16px 16px;
}
.help-title + .accordion-body {
  line-height: 1.6;
}

/*--------------------------------
community
--------------------------------*/
.community-box {
  margin: 0 8px 20px;
  width: calc(100% / 3 - 16px);
  position: relative;
  float: left;
}
@media (min-width: 600px) {
  .community-box {
    margin: 0 12px 20px;
    width: calc(100% / 6 - 24px);
  }
}

.community-name {
  height: 32px;
  font-size: 12px;
  color: #373531;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
}

.commu_search input[type=text] {
  padding-right: 40px;
}

.searching {
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/search_mini.png) no-repeat center center;
  background-size: 40px;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}

.category-nav {
  margin-bottom: 60px;
}

.category-btn {
  height: 45px;
  position: relative;
  background: #fff;
  line-height: 43px;
  font-size: 18px;
  color: #607d8b;
  text-align: center;
  border: 1px solid #90a4ae;
  border-radius: 8px;
  transition: all 0.4s ease-in-out;
}
.category-btn .fa {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.category-btn.accordion-open {
  border-radius: 8px 8px 0 0;
  background: #373531;
  border-color: #373531;
  color: #fff;
}

.category-list {
  border: 1px solid #e0e0e0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
@media (min-width: 600px) {
  .category-list {
    display: flex;
    flex-wrap: wrap;
  }
  .category-list li {
    flex: 0 1 calc(100% / 3);
  }
}
.category-list li a {
  padding: 14px 16px 14px 40px;
  display: block;
  position: relative;
  font-size: 12px;
  color: #757575;
}
.category-list a::before {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  left: 16px;
  top: 50%;
  content: "";
  background: url(../images/icon_category.png) no-repeat;
  background-size: auto 16px;
  transform: translateY(-50%);
}
.category-list .tapped {
  animation: tapFade 0.8s ease-in-out;
}
.category-list .tapped::after {
  display: none;
}

.primary-heading[class*=cate] {
  padding-left: 24px;
  position: relative;
}
.primary-heading[class*=cate]::before {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  content: "";
  background: url(../images/icon_category.png) no-repeat;
  background-size: auto 16px;
  transform: translateY(-50%);
}

.cate01 a::before, .cate01.primary-heading::before {
  background-position: 0px 0;
}

.cate02 a::before, .cate02.primary-heading::before {
  background-position: -16px 0;
}

.cate03 a::before, .cate03.primary-heading::before {
  background-position: -32px 0;
}

.cate04 a::before, .cate04.primary-heading::before {
  background-position: -48px 0;
}

.cate05 a::before, .cate05.primary-heading::before {
  background-position: -64px 0;
}

.cate06 a::before, .cate06.primary-heading::before {
  background-position: -80px 0;
}

.cate07 a::before, .cate07.primary-heading::before {
  background-position: -96px 0;
}

.cate08 a::before, .cate08.primary-heading::before {
  background-position: -112px 0;
}

.cate09 a::before, .cate09.primary-heading::before {
  background-position: -128px 0;
}

.cate10 a::before, .cate10.primary-heading::before {
  background-position: -144px 0;
}

.cate11 a::before, .cate11.primary-heading::before {
  background-position: -160px 0;
}

.cate12 a::before, .cate12.primary-heading::before {
  background-position: -176px 0;
}

.cate13 a::before, .cate13.primary-heading::before {
  background-position: -192px 0;
}

.cate14 a::before, .cate14.primary-heading::before {
  background-position: -208px 0;
}

.cate15 a::before, .cate15.primary-heading::before {
  background-position: -224px 0;
}

.cate16 a::before, .cate16.primary-heading::before {
  background-position: -240px 0;
}

.cate17 a::before, .cate17.primary-heading::before {
  background-position: -256px 0;
}

.cate18 a::before, .cate18.primary-heading::before {
  background-position: -272px 0;
}

.cate19 a::before, .cate19.primary-heading::before {
  background-position: -288px 0;
}

.cate20 a::before, .cate20.primary-heading::before {
  background-position: -304px 0;
}

.cate21 a::before, .cate21.primary-heading::before {
  background-position: -320px 0;
}

.cate22 a::before, .cate22.primary-heading::before {
  background-position: -336px 0;
}

.cate23 a::before, .cate23.primary-heading::before {
  background-position: -352px 0;
}

.cate24 a::before, .cate24.primary-heading::before {
  background-position: -368px 0;
}

.cate25 a::before, .cate25.primary-heading::before {
  background-position: -384px 0;
}

.cate26 a::before, .cate26.primary-heading::before {
  background-position: -400px 0;
}

.cate27 a::before, .cate27.primary-heading::before {
  background-position: -416px 0;
}

.cate28 a::before, .cate28.primary-heading::before {
  background-position: -432px 0;
}

.cate29 a::before, .cate29.primary-heading::before {
  background-position: -448px 0;
}

.grid-desc {
  margin: 0 8px 16px;
  font-size: 10px;
  line-height: 1.6;
}
.grid-desc .is-join {
  color: #f8bbd0;
}
.grid-desc .is-create {
  color: #b2ebf2;
}

.is-join .thumbnail-img {
  box-shadow: inset 0 0 0 4px #f8bbd0;
  border-radius: 50%;
}
.is-create .thumbnail-img {
  box-shadow: inset 0 0 0 4px #b2ebf2;
  border-radius: 50%;
}

.community-header {
  margin-bottom: 32px;
  position: relative;
}
.community-header .basic-prof {
  position: relative;
  overflow: hidden;
  background: url(../images/thumb_bg.png) no-repeat center center #eceff1;
  background-size: cover;
}
.community-header .basic-prof::before, .community-header .basic-prof::after {
  display: block;
  content: "";
}
.community-header .basic-prof::before {
  padding-top: 65%;
}
@media (min-width: 600px) {
  .community-header .basic-prof::before {
    padding-top: 40%;
  }
}
.community-header .basic-prof::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.community-header .btn-space {
  padding: 16px 0;
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  z-index: 2;
}

.detail-prop {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  position: absolute;
  bottom: 56px;
  left: 0;
  top: 0;
  right: 0;
  color: #fff;
  z-index: 2;
}
.detail-prop .cate {
  margin-bottom: 8px;
  padding-bottom: 14px;
  position: relative;
}
.detail-prop .cate::after {
  width: 30px;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  background: #fff;
  content: "";
  transform: translateX(-50%);
}
.detail-prop .community-name {
  margin-bottom: 4px;
  width: 100%;
  height: auto;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.detail-prop .member {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.detail-prop .newface {
  width: 64px;
  top: -12px;
  left: -24px;
  background: #fff;
  color: #90a4ae;
  line-height: 64px;
  border-radius: 0;
  transform: rotate(-45deg);
}
.detail-prop .is-join,
.detail-prop .is-create {
  margin-left: 8px;
  width: 6px;
  position: relative;
  display: inline-block;
  text-indent: 10px;
  white-space: nowrap;
  vertical-align: bottom;
  overflow: hidden;
}
.detail-prop .is-join::before,
.detail-prop .is-create::before {
  width: 6px;
  height: 6px;
  display: block;
  position: absolute;
  top: 50%;
  content: "";
  border-radius: 3px;
  transform: translateY(-50%);
}
.detail-prop .is-join::before {
  background: #f8bbd0;
}
.detail-prop .is-create::before {
  background: #b2ebf2;
}

.commu_img {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  bottom: -50px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}

/*--------------------------------
setting
--------------------------------*/
.mail-address {
  padding: 16px;
  background: #eceff1;
}
.mail-address .address-text {
  margin: 16px 0;
}

.inline-input-wrapper {
  position: relative;
}
.inline-input-wrapper input[type=text] {
  padding-right: 54px;
}
.inline-input-wrapper .submit-btn {
  width: 50px;
  min-width: auto;
  height: 36px;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 36px;
  border-radius: 18px;
}

.fb-setting {
  padding-top: 16px;
  background: repeating-linear-gradient(-45deg, #f4feff, #f4feff 10px, #fff 10px, #fff 20px);
  border: 1px solid #80cbc4;
}

.switcher .general-parts {
  position: relative;
}

.switch-checkbox input[type=checkbox],
.switch-checkbox input[type=radio] {
  display: none;
}

.legend {
  padding: 0 112px 0 16px;
  height: 50px;
  color: #757575;
  line-height: 50px;
  white-space: pre-wrap;
  overflow: hidden;
}

.switch-label {
  padding: 0;
  width: 104px;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 25px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.switch-inner {
  margin-left: -100%;
  width: 200%;
  display: block;
  transition: margin .2s ease-in 0s;
}
.switch-checkbox:checked + .switch-label .switch-inner {
  margin-left: 0;
}
.switch-inner::before, .switch-inner::after {
  padding: 0;
  width: 50%;
  height: 50px;
  display: block;
  float: left;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
  box-sizing: border-box;
}
.switch-inner:before {
  padding-left: 16px;
  background-color: #4db6ac;
  content: "ON";
  color: #fff;
}
.switch-inner:after {
  padding-right: 16px;
  background-color: #e0e0e0;
  content: "OFF";
  color: #999;
  text-align: right;
}

.switch-switch {
  margin: 2px;
  width: 44px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  display: block;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 25px;
  transition: all .2s ease-in 0s;
}
.switch-checkbox:checked + .switch-label .switch-switch {
  right: 0;
}
.tapped .switch-switch {
  animation: tapBounce 0.3s ease-in-out;
}

.float-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.float-text .note {
  flex: 1 0 55%;
}
@media (min-width: 768px) {
  .float-text .note {
    font-size: 18px;
  }
}
@media (min-width: 600px) {
  .float-text {
    margin-bottom: 40px;
  }
  .general-section .float-text .note {
    margin-bottom: 0;
  }
}

.float-img-wrapper {
  text-align: center;
}
.float-img-wrapper img {
  margin-bottom: 16px;
  width: 100%;
  max-width: 200px;
}
@media (min-width: 600px) {
  .float-img-wrapper {
    width: 232px;
  }
}

/*--------------------------------
search setting
--------------------------------*/
#form_tr_link {
  padding: 4px 0;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vh - 50px);
  text-align: center;
  z-index: 7;
  letter-spacing: -0.4em;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  #form_tr_link {
    top: calc(100vh - 66px);
  }
}
#form_tr_link a,
#form_tr_link input {
  margin: 0 4px;
  height: 40px;
  display: inline-block;
  content: "";
  vertical-align: middle;
  border: 0;
  letter-spacing: normal;
  opacity: 0;
}
#form_tr_link a {
  margin-left: 0;
  width: 90px;
}
#form_tr_link input[type=submit] {
  width: 145px;
}
@media (max-width: 374px) {
  #form_tr_link input[type=submit] {
    width: 125px;
  }
}
#form_tr_link input[type=reset] {
  margin-right: 0;
  width: 65px;
}

/*--------------------------------
point fee exchange
--------------------------------*/
.flex-list {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-list .basic-label,
.flex-list .value {
  padding: 0 16px;
}
.flex-list .point-num {
  padding-left: 24px;
  background: url(../images/buy_point.png) no-repeat left center;
  background-size: 20px;
}
.flex-list .like-num {
  padding-left: 24px;
  background: url(../images/rest_like.png) no-repeat left center;
  background-size: 20px;
}

.stock {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.stock.rp_side {
  margin-top: 22px;
}

.product_img {
  position: relative;
  background: #b2ebf2;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b2ebf2), color-stop(100%, #e0f7fa));
  background: -webkit-linear-gradient(top, #b2ebf2 0%, #e0f7fa 100%);
  background: linear-gradient(to bottom, #b2ebf2 0%, #e0f7fa 100%);
}
.product_img::before {
  padding-top: 65%;
  content: "";
  display: block;
}
.recommend_plan .product_img {
  background: #f8bbd0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8bbd0), color-stop(100%, #fde9f0));
  background: -webkit-linear-gradient(top, #f8bbd0 0%, #fde9f0 100%);
  background: linear-gradient(to bottom, #f8bbd0 0%, #fde9f0 100%);
}
.recommend_plan .product_img::before {
  padding-top: calc(65% + 24px);
}
@media (min-width: 600px) {
  .fee-list .product_img::before {
    padding-top: 50%;
  }
  .fee-list .recommend_plan .product_img::before {
    padding-top: calc(50% + 24px);
  }
}

.product-icon {
  padding-top: 36px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #455a64;
  text-align: center;
  transform: translate(-50%, -50%);
}
.product-icon span {
  font-size: 18px;
}
.point-list .product-icon {
  background: url(../images/buy_point.png) no-repeat center top;
  background-size: 32px;
}
.exchange-list .product-icon {
  background: url(../images/exchange.png) no-repeat center top;
  background-size: auto 32px;
}
.fee-list .product-icon {
  background: url(../images/fee.png) no-repeat center top;
  background-size: 40px auto;
}
.product-icon .product_name {
  font-size: 10px;
}
.fee-list .product-icon {
  padding-top: 40px;
  font-weight: 600;
}
.fee-list .product-icon .product_name {
  font-weight: 500;
  line-height: 1.4;
}
.fee-list .stock:last-child .product-icon {
  top: calc(50% - 5px);
}
.recommend_plan .product-icon {
  top: calc(50% + 12px);
}

.product_status {
  padding: 4px 8px;
  height: 36px;
  position: relative;
  color: #373531;
  font-feature-settings: "palt";
}
.product_status .product_name,
.product_status .discount {
  color: #999;
  font-size: 10px;
  line-height: 1.4;
}
@media (max-width: 374px) {
  .product_status .product_name,
  .product_status .discount {
    margin-left: -4px;
    transform: scale(0.9);
  }
}
.product_status .discount {
  color: #ec407a;
}
.fee-list .product_status .discount {
  padding-top: 16px;
  width: 48px;
  height: 48px;
  position: absolute;
  top: -12px;
  left: -4px;
  background: url(../images/discount.png) no-repeat center center;
  background-size: 48px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  line-height: 1;
  transform: rotateZ(-5deg) scale(0.9);
}
.trial-plan .product_status {
  height: 48px;
}

.price {
  position: absolute;
  right: 8px;
  top: 50%;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  transform: translateY(-50%);
}
.price span {
  font-size: 22px;
}
.fee-list .price span {
  font-size: 24px;
}
@media (max-width: 374px) {
  .price {
    font-size: 10px;
  }
  .price span {
    font-size: 18px;
  }
  .exchange-list .stock:last-child .price span {
    font-size: 16px;
  }
}
.trial-plan .price {
  font-size: 16px;
}
.trial-plan .price span {
  font-size: 40px;
}

.confirmed {
  padding: 0 8px 8px;
  text-align: center;
}

.stock_odd .chara-box:first-child {
  width: calc(100% - 16px);
}
.stock_odd .chara-box:first-child .product_img::before {
  padding-top: 140px;
}

.recommend_plan .buy {
  background-color: #f06292;
}

.recommended {
  padding: 4px 8px;
  position: absolute;
  top: 0px;
  left: -4px;
  background: #e91e63;
  color: #fff;
  white-space: nowrap;
  font-size: 11px;
  font-feature-settings: "palt";
  transform: rotateZ(-3deg) skew(-3deg);
}

.lead-wrapper {
  padding: 16px;
  position: relative;
  background: -webkit-linear-gradient(bottom right, #b2ebf2 0%, #f9f4ff 50%, #ffdae5 100%);
  background: linear-gradient(to top left, #b2ebf2 0%, #f9f4ff 50%, #ffdae5 100%);
}

.campaign-paper::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(../images/campaign-paper.png) no-repeat center;
  background-size: contain;
  content: "";
}

.lead-card {
  margin-bottom: 16px;
  padding: 8px 16px;
  width: 100%;
  max-width: 500px;
  display: inline-block;
  background: #fff;
  border-radius: 12px;
}
.lead-card:last-child {
  margin-bottom: 0;
}

.lead-card-wrapper {
  padding: 16px;
  background: -webkit-linear-gradient(top, #a6f5ff 0%, #ffd2e8 100%);
  background: linear-gradient(to bottom, #a6f5ff 0%, #ffd2e8 100%);
  text-align: center;
}

/*--------------------------------
modal
--------------------------------*/
.modal {
  width: 88%;
  max-width: 470px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  z-index: 7;
}
.modal .close {
  position: absolute;
  top: -15px;
  right: -15px;
}
.modal .btn {
  margin-bottom: 10px;
}
.modal .common-btn {
  margin-left: 0;
}
.modal .btn-space {
  padding: 0 15px 10px;
}
.modal .btn-space .flzi {
  font-size: 130%;
}
.modal .small-space {
  margin: 0 auto;
  width: 270px;
}
.modal .desc {
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
}
.modal .desc::before {
  margin-left: -10px;
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  top: -10px;
  left: 50%;
  content: "";
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #eceff1 transparent;
}

.modal-inner {
  max-height: 80vh;
  position: relative;
  overflow-y: auto;
  border-radius: 8px;
}
.popform .modal-inner {
  max-height: calc(80vh - 60px);
}

.close {
  width: 30px;
  height: 30px;
  display: block;
  background: #90a4ae;
  font-size: 26px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.close:hover {
  color: #fff;
}

.modal-heading {
  margin: 20px 15px;
  color: #455a64;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.matching-title-wrapper {
  padding-top: 45px;
  text-align: center;
}

.matching-title {
  margin-bottom: 8px;
  position: relative;
  font-size: 34px;
  font-family: 'Amiri',serif;
  color: #455a64;
  letter-spacing: .1em;
  transition: all 1s ease;
  opacity: 0;
}
.matching-title::before, .matching-title::after {
  width: 82px;
  height: 66px;
  display: inline-block;
  position: absolute;
  top: -40px;
  background: url(../images/match_paper.png) no-repeat left center;
  background-size: auto 100%;
  content: "";
  transition: all 1s ease;
  opacity: 0;
}
.m_animation .matching-title::before, .m_animation .matching-title::after {
  transform: translateY(10px);
  opacity: 1;
}
.matching-title::before {
  left: -5px;
}
.matching-title::after {
  right: -5px;
  background-position: right center;
}
.m_animation .matching-title {
  opacity: 1;
}

.matching-lead {
  font-size: 17px;
}

.summary-group {
  padding: 35px 15px 25px;
  display: flex;
  align-items: center;
}
.rest + .summary-group {
  padding-top: 70px;
}
.summary-group .thumbnail {
  margin: 3px;
  flex: 0 0 25%;
}
.pr-sample .summary-group {
  padding: 0 16px;
}

.eye-catch {
  width: 40%;
}
.eye-catch img {
  width: 100%;
  height: auto;
}

.matching-pair {
  justify-content: center;
}

.center-heart {
  width: 80px;
  font-size: 22px;
  color: #f06292;
  text-align: center;
  transition: all 1.2s ease-out;
  opacity: 0;
}
.m_animation .center-heart {
  width: 42px;
  opacity: 1;
}

.modal-summary {
  margin: 0 8px;
  font-size: 13px;
  line-height: 1.4;
}
.thumbnail + .modal-summary {
  margin: 0 0 0 16px;
}
.modal-summary span {
  color: #4db6ac;
}
@media (min-width: 768px) {
  .modal-summary {
    font-size: 16px;
  }
}

.rest {
  padding: 8px 5px;
  position: absolute;
  top: 15px;
  right: 15px;
  letter-spacing: -0.4em;
}
.rest .value {
  margin-left: 16px;
  display: inline-block;
  font-size: 20px;
  letter-spacing: normal;
}
.rest .value a {
  color: #757575;
}
.rest .value .flzi {
  margin-right: 8px;
  color: #cfd8dc;
}
.rest .value .over {
  font-size: 14px;
}

.heading {
  height: 40px;
  background: #f06292;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 40px;
}

.heading-light {
  height: 40px;
  background: #eceff1;
  font-size: 13px;
  font-weight: 600;
  color: #607d8b;
  text-align: center;
  line-height: 40px;
}

.spot {
  height: 50px;
  font-size: 17px;
  color: #0097a7;
  line-height: 50px;
}

.visual {
  margin-bottom: 16px;
}
.visual img {
  width: 100%;
  height: auto;
}

.startup-member {
  padding: 10px 16px;
  min-height: 130px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.startup-member .thumbnail {
  margin: 4px;
  width: 25%;
  max-width: 120px;
}

.member-get-like {
  background: url(../images/startup_like.jpg) no-repeat center top;
  background-size: cover;
}

.member-get-msg {
  background: url(../images/startup_msg.jpg) no-repeat center top;
  background-size: cover;
}

.modal-content {
  margin: 16px 0;
  padding: 0 15px;
  text-align: center;
  line-height: 1.6;
}
.modal-content img {
  width: 100%;
  height: auto;
}

.modal-form {
  margin: 16px 0;
  padding: 0 15px;
}

.conf-prof {
  padding: 50px 15px;
  text-align: center;
}
.conf-prof .thumbnail {
  width: 25%;
  display: inline-block;
}
.conf-prof .caption {
  line-height: 1.7;
}

.msg-balloon {
  margin: 0 15px 30px;
  padding: 16px 20px;
  position: relative;
  background: #eceff1;
  line-height: 1.3;
  border-radius: 8px;
}
.msg-balloon::before {
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  top: -12px;
  left: 26px;
  content: "";
  border-style: solid;
  border-width: 0px 0px 14px 14px;
  border-color: transparent transparent #eceff1 transparent;
  transform: skewX(-20deg);
}

#set_prof .action-btn {
  padding-left: 10px;
}

.input-space {
  margin: 0 0 15px;
  padding: 0 15px;
}

.hints-wrapper {
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.hints-wrapper figure {
  margin-bottom: 16px;
  width: 50%;
}
.hints-wrapper figure img {
  margin: 0 auto;
  width: 100px;
  height: auto;
  display: block;
}
.hints-wrapper figcaption {
  margin: 8px auto 0;
  width: 100px;
  position: relative;
  color: #757575;
  font-size: 11px;
  line-height: 1.3;
}
.hints-wrapper figcaption span {
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}
.hints-wrapper figcaption .icon-nice {
  color: #4db6ac;
}
.hints-wrapper figcaption .icon-none {
  color: #c62828;
}

.dialog {
  width: calc(100% - 32px);
  max-width: 540px;
  display: none;
  position: fixed;
  top: 74px;
  left: 50%;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 8px;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, calc(-100% - 85px));
  transition: all 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
  z-index: 7;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .dialog {
    top: 82px;
    transform: translate(-50%, calc(-100% - 93px));
  }
}
.dialog .modal-inner {
  overflow: hidden;
}

.is-show {
  transform: translate(-50%, 0);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.47, 1.18);
}

.modal-lead {
  margin-top: -16px;
  font-size: 10px;
  text-align: center;
  color: #757575;
}

.bonus-wrapper {
  position: relative;
}
.bonus-wrapper .flex-item {
  padding: 24px 16px 24px 24px;
  justify-content: center;
  text-align: center;
  transition: all 270ms ease-in;
}
.bonus-wrapper .flex-item:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translate(20px, 0);
  transition: all 270ms ease-in 270ms;
  opacity: 0;
}
.bonus-wrapper.next-step .flex-item:nth-child(1) {
  position: relative;
  transform: translate(-30px, 0);
  opacity: 0;
}
.bonus-wrapper.next-step .flex-item:nth-child(2) {
  transform: translate(0, 0);
  opacity: 1;
}

.bonus-item {
  width: 50px;
}
.bonus-item .day {
  font-size: 10px;
  font-weight: 600;
}
.bonus-item .icon-space {
  padding-top: 12px;
  height: 44px;
  color: #f06292;
  font-size: 24px;
}
.bonus-item .value {
  position: relative;
  color: #ec407a;
  font-size: 10px;
  font-weight: 600;
}
.bonus-item .value.get-bonus {
  color: #cfd8dc;
  transition: all 0.4s ease;
}
.bonus-item .value.get-bonus .icon-space {
  color: #cfd8dc;
  transition: all 0.4s ease;
}

.step-arrow {
  padding-top: 10px;
  max-width: 40px;
  flex-grow: 1;
  color: #cfd8dc;
}
.step-arrow:last-child {
  flex-grow: 0.5;
}

.get-icon {
  margin-top: -22px;
  margin-left: -22px;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #607d8b;
  font-size: 16px;
  font-weight: 600;
  font-feature-settings: "palt";
  border: 2px solid;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  letter-spacing: -.05em;
  transform: rotate(-15deg);
  transition: all 320ms cubic-bezier(0.54, 0, 0.69, 1.43);
}

.before-animation {
  transform: rotate(-10deg) scale(3);
  opacity: 0;
}

/*--------------------------------
empty state
--------------------------------*/
.emptystate {
  margin: 0;
  width: 100%;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.emptystate .btn {
  margin: 0;
}
.recomme .emptystate, .newcomers-pickup .emptystate {
  margin: 0;
}

.emptycontent {
  padding: 32px 0;
}
.emptycontent::before {
  margin-bottom: 40px;
  height: 100px;
  display: block;
  display: block;
  background: no-repeat center center;
  background-size: contain;
  content: "";
}
.search .emptycontent::before {
  background-image: url(../images/emp_search.png);
}
.recv-like .emptycontent::before, .give-like .emptycontent::before, .guide .emptycontent::before {
  background-image: url(../images/emp_like.png);
}
.visitor .emptycontent::before {
  background-image: url(../images/emp_history.png);
}
.fav .emptycontent::before {
  background-image: url(../images/emp_favorite.png);
}
.approach .emptycontent::before, .recomme .emptycontent::before {
  background-image: url(../images/emp_matching.png);
}
.in-message .emptycontent::before {
  background-image: url(../images/emp_approach.png);
}
.skip-list .emptycontent::before {
  background-image: url(../images/emp_skip.png);
}
.hide-list .emptycontent::before {
  background-image: url(../images/emp_hidden.png);
}
.block-list .emptycontent::before {
  background-image: url(../images/emp_block.png);
}
.newcomers-pickup .emptycontent::before {
  background-image: url(../images/emp_newlist.png);
}
.fee .emptycontent::before {
  background-image: url(../images/emp_fee.png);
}
.exchange .emptycontent::before {
  background-image: url(../images/like_limit.png);
}
.error-page .emptycontent::before {
  background-image: url(../images/emp_error.png);
}
.unsupported .emptycontent::before {
  background-image: url(../images/emp_unsupported.png);
}
.identity .emptycontent::before {
  background-image: url(../images/emp_identity.png);
}
.not-found .emptycontent::before {
  width: 80vw;
  max-width: 500px;
  background-image: url(../images/not-found.png);
}

.text-group {
  margin-bottom: 40px;
}
.text-group p {
  margin-bottom: 16px;
  color: #999;
  font-size: 12px;
  line-height: 1.6;
}

.empty-heading {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.support-target {
  margin: 16px 0 40px;
  width: 280px;
  text-align: left;
}

/*--------------------------------
editor
--------------------------------*/
.editor-view {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: #252221;
}

.photo-edit-heading {
  height: 30px;
  position: relative;
  background: #373531;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
.photo-edit-heading .help-btn {
  margin-top: 0;
  width: 20px;
  height: 20px;
  right: 10px;
  bottom: auto;
  line-height: 18px;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .photo-edit-heading {
    padding-top: 8px;
    height: 38px;
  }
}

.edit-space {
  width: 100%;
  height: calc(100vh - 80px);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .edit-space {
    height: calc(100vh - 120px);
  }
}

.photo-edit-footer {
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #373531;
  color: #fff;
  line-height: 50px;
  text-align: center;
}
@media (min-width: 375px) and (max-width: 480px) and (device-height: 812px), (device-height: 896px) and (orientation: portrait) {
  .photo-edit-footer {
    height: 82px;
  }
}

.edit-clear,
.edit-submit {
  padding: 0 16px;
  height: 50px;
  display: block;
  position: absolute;
  top: 0;
  color: #fff;
}

.edit-clear {
  font-size: 14px;
  left: 0;
}

.edit-submit {
  font-size: 16px;
  right: 0;
}

/*--------------------------------
help menu
--------------------------------*/
.help-menu {
  display: none;
}

/*--------------------------------
slick theme
--------------------------------*/
.slick-list {
  overflow: visible;
}

.slick-box,
.ng-list {
  display: none;
}

.slick-dots {
  padding: 0;
  list-style: none;
  text-align: center;
  z-index: 5;
}

.slick-dots li {
  margin: 0 4px;
  padding: 0;
  width: 6px;
  height: 6px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.slick-dots li button {
  width: 6px;
  height: 6px;
  display: block;
  background: rgba(255, 255, 255, 0.3);
  border: 0;
  border-radius: 30px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  outline: none;
}
.slick-dots li.slick-active button {
  background: white;
}

.slick-prev,
.slick-next {
  padding: 0;
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  top: 50%;
  background: transparent;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  opacity: .8;
  outline: none;
  border: 0;
  cursor: pointer;
  z-index: 3;
  transform: translateY(-50%);
}

.slick-prev {
  width: 20px;
  height: 80px;
  left: 0;
  background: url(../images/arrow_b_l.png) no-repeat center center;
  background-size: 12px;
}

.slick-next {
  width: 20px;
  height: 80px;
  right: 0;
  background: url(../images/arrow_b_g.png) no-repeat center center;
  background-size: 12px;
}

/*--------------------------------
Tooltipster theme
--------------------------------*/
.tooltipster-default {
  border-radius: 5px;
  background: #fff;
  color: #757575;
  border: 1px solid #cfd8dc;
}
.tooltipster-default .tooltipster-content {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 10px;
  overflow: hidden;
}
.entry .tooltipster-default .tooltipster-content {
  font-size: 12px;
}
.entry .tooltipster-default {
  background: rgba(37, 34, 33, 0.9);
  color: #fff;
  border: none;
}

.tooltipster-base {
  padding: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  pointer-events: none;
  width: auto;
  overflow: visible;
}
.tooltipster-base .tooltipster-content {
  overflow: hidden;
}

.tooltipster-arrow {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.tooltipster-arrow span,
.tooltipster-arrow-border {
  display: block;
  width: 0;
  height: 0;
  position: absolute;
}

.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 8px solid;
  bottom: -7px;
}
.entry .tooltipster-arrow-top span,
.entry .tooltipster-arrow-top-right span,
.entry .tooltipster-arrow-top-left span {
  bottom: -8px;
}

.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-top-right .tooltipster-arrow-border,
.tooltipster-arrow-top-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-top: 9px solid;
  bottom: -8px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid;
  top: -7px;
}
.entry .tooltipster-arrow-bottom span,
.entry .tooltipster-arrow-bottom-right span,
.entry .tooltipster-arrow-bottom-left span {
  top: -8px;
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-bottom: 9px solid;
  top: -8px;
}

.tooltipster-arrow-top span,
.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom .tooltipster-arrow-border {
  left: 0;
  right: 0;
  margin: 0 auto;
}

.tooltipster-arrow-top-left span,
.tooltipster-arrow-bottom-left span {
  left: 6px;
}

.tooltipster-arrow-top-left .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  left: 5px;
}

.tooltipster-arrow-top-right span,
.tooltipster-arrow-bottom-right span {
  right: 6px;
}

.tooltipster-arrow-top-right .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border {
  right: 5px;
}

.tooltipster-arrow-left span,
.tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 8px solid;
  top: 50%;
  margin-top: -7px;
  right: -7px;
}

.tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 9px solid;
  margin-top: -8px;
}

.tooltipster-arrow-right span,
.tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 8px solid;
  top: 50%;
  margin-top: -7px;
  left: -7px;
}

.tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-right: 9px solid;
  margin-top: -8px;
}

.tooltipster-fade {
  opacity: 0;
  transition-property: opacity;
}

.tooltipster-fade-show {
  opacity: 1;
}

.tooltipster-grow {
  opacity: 0;
  transform: scale(0, 0);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
}

.tooltipster-grow-show {
  opacity: 1;
  transform: scale(1, 1);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

/*--------------------------------
nouislider
--------------------------------*/
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
  direction: ltr;
}

.noUi-base {
  margin: 0 12px;
  height: 100%;
  position: relative;
  z-index: 1;
}
.vertical-slider-outer .noUi-base {
  margin: 0;
}

.noUi-origin {
  position: absolute;
  right: -12px;
  top: 0;
  left: 0;
  bottom: 0;
}
.vertical-slider-outer .noUi-origin {
  right: 0;
}

.noUi-handle {
  position: relative;
  z-index: 1;
}

.noUi-stacking .noUi-handle {
  z-index: 10;
}

.noUi-state-tap .noUi-origin {
  transition: left .3s,top .3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

.noUi-base,
.noUi-handle {
  transform: translate3d(0, 0, 0);
}

.noUi-horizontal {
  height: 4px;
}
.noUi-horizontal .noUi-handle {
  width: 24px;
  height: 24px;
  left: -12px;
  top: -10px;
}

.noUi-vertical {
  width: 4px;
}
.noUi-vertical .noUi-handle {
  width: 24px;
  height: 24px;
  left: -10px;
  top: -12px;
}
.noUi-vertical .noUi-draggable {
  cursor: n-resize;
}

.noUi-background {
  background: #eceff1;
}

.noUi-connect {
  background: #80cbc4;
  border-radius: 30px;
  transition: background 450ms;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.noUi-target {
  border-radius: 30px;
}

.noUi-draggable {
  cursor: w-resize;
}

.noUi-handle {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
  cursor: default;
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #eceff1, 0 3px 6px -3px #cfd8dc;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.noUi-active {
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
}

[disabled] .noUi-connect,
[disabled].noUi-connect {
  background: #eceff1;
}

[disabled] .noUi-handle,
[disabled].noUi-origin {
  cursor: not-allowed;
}

.noUi-pips,
.noUi-pips * {
  box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: #999;
}

.noUi-value {
  position: absolute;
  text-align: center;
}

.noUi-value-sub {
  color: #bdbdbd;
  font-size: 10px;
}

.noUi-marker {
  position: absolute;
  background: #bdbdbd;
}

.noUi-marker-large,
.noUi-marker-sub {
  background: #aaa;
}

.noUi-pips-horizontal {
  padding: 10px 0;
  width: 100%;
  height: 80px;
  top: 100%;
  left: 0;
}

.noUi-value-horizontal {
  transform: translate3d(-50%, 50%, 0);
}
.noUi-value-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-value-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-value-horizontal.noUi-marker-large {
  height: 15px;
}

.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  padding-left: 25px;
  transform: translate3d(0, -50%, 0);
}
.noUi-value-vertical.noUi-marker {
  margin-top: -1px;
  width: 5px;
  height: 2px;
}
.noUi-value-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-value-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  padding: 5px;
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  text-align: center;
}
.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
  top: -32px;
}
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
  bottom: -32px;
}
.noUi-vertical .noUi-handle-lower .noUi-tooltip {
  left: 120%;
}
.noUi-vertical .noUi-handle-upper .noUi-tooltip {
  left: 120%;
  top: -32px;
}

/*--------------------------------
SweetAlert
--------------------------------*/
.sweet-alert {
  margin-left: -235px;
  margin-top: -200px;
  padding: 16px;
  width: 470px;
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #fff;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  z-index: 99999;
}
.sweet-alert h2 {
  margin: 24px 0;
  padding: 0;
  display: block;
  position: relative;
  color: #373531;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  text-transform: none;
  line-height: 1.4;
}
.sweet-alert p {
  margin: 0;
  padding: 0;
  position: relative;
  float: none;
  color: #999;
  font-size: 12px;
  text-align: inherit;
  line-height: 1.4;
}
.sweet-alert .confirm {
  margin: 16px auto 0;
  padding: 0 16px;
  min-width: 120px;
  height: 40px;
  display: block;
  background-color: #4db6ac !important;
  color: #fff;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}
.sweet-alert .confirm:focus {
  outline: 0;
  box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.sweet-alert .confirm:hover {
  background-color: #5fbdb4;
}
.sweet-alert .confirm:active {
  background-color: #3c948b;
}
.sweet-alert .confirm::-moz-focus-inner {
  border: 0;
}
.sweet-alert .cancel {
  margin: 16px auto 0;
  padding: 0;
  min-width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
}
.sweet-alert[data-has-cancel-button=false] button {
  box-shadow: none !important;
}
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
  padding-bottom: 40px;
}
.sweet-alert .sa-icon {
  margin: 20px auto;
  padding: 0;
  width: 80px;
  height: 80px;
  position: relative;
  box-sizing: content-box;
  border: 4px solid gray;
  border-radius: 50%;
}
.sweet-alert .sa-icon.sa-error {
  border-color: #e53935;
}
.sweet-alert .sa-icon.sa-error .sa-x-mark {
  position: relative;
  display: block;
}
.sweet-alert .sa-icon.sa-error .sa-line {
  height: 5px;
  width: 47px;
  display: block;
  position: absolute;
  top: 37px;
  background-color: #e53935;
  border-radius: 2px;
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  left: 17px;
  transform: rotate(45deg);
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  right: 16px;
  transform: rotate(-45deg);
}
.sweet-alert .sa-icon.sa-success {
  border-color: #80cbc4;
}
.sweet-alert .sa-icon.sa-success::after, .sweet-alert .sa-icon.sa-success::before {
  width: 60px;
  height: 120px;
  position: absolute;
  background: #fff;
  content: '';
  transform: rotate(45deg);
}
.sweet-alert .sa-icon.sa-success::before {
  top: -7px;
  left: -33px;
  border-radius: 120px 0 0 120px;
  transform: rotate(-45deg);
  transform-origin: 60px 60px;
}
.sweet-alert .sa-icon.sa-success::after {
  top: -11px;
  left: 30px;
  border-radius: 0 120px 120px 0;
  transform: rotate(-45deg);
  transform-origin: 0 60px;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder {
  width: 80px;
  height: 80px;
  position: absolute;
  left: -4px;
  top: -4px;
  box-sizing: content-box;
  border: 4px solid rgba(134, 220, 148, 0.2);
  border-radius: 50%;
  z-index: 2;
}
.sweet-alert .sa-icon.sa-success .sa-fix {
  width: 5px;
  height: 90px;
  position: absolute;
  left: 28px;
  top: 8px;
  background-color: #fff;
  transform: rotate(-45deg);
  z-index: 1;
}
.sweet-alert .sa-icon.sa-success .sa-line {
  height: 5px;
  display: block;
  position: absolute;
  background-color: #80cbc4;
  border-radius: 2px;
  z-index: 2;
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  width: 25px;
  left: 14px;
  top: 46px;
  transform: rotate(45deg);
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  width: 47px;
  right: 8px;
  top: 38px;
  transform: rotate(-45deg);
}
.sweet-alert .sa-icon.sa-custom {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
}

@media all and (max-width: 540px) {
  .sweet-alert {
    margin-left: 0;
    margin-right: 0;
    width: auto;
    left: 15px;
    right: 15px;
  }
}
.sweet-btn-space {
  margin: 16px auto 0;
  width: 240px;
}

@keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
  }
  45% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hideSweetAlert {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
.showSweetAlert {
  animation: showSweetAlert 0.3s;
}
.showSweetAlert[data-animation=none] {
  animation: none;
}

.hideSweetAlert {
  animation: hideSweetAlert 0.2s;
}
.hideSweetAlert[data-animation=none] {
  animation: none;
}

@keyframes animateSuccessTip {
  0%,54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animateSuccessLong {
  0%,65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@keyframes rotatePlaceholder {
  0%,5% {
    transform: rotate(-45deg);
  }
  100%,12% {
    transform: rotate(-405deg);
  }
}
.animateSuccessTip {
  animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
  animation: animateSuccessLong 0.75s;
}

.sa-icon.sa-success.animate::after {
  animation: rotatePlaceholder 4.25s ease-in;
}

@keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
.animateErrorIcon {
  animation: animateErrorIcon 0.5s;
}

@keyframes animateXMark {
  0%,50% {
    margin-top: 26px;
    transform: scale(0.4);
    opacity: 0;
  }
  80% {
    margin-top: -6px;
    transform: scale(1.15);
  }
  100% {
    margin-top: 0;
    transform: scale(1);
    opacity: 1;
  }
}
.animateXMark {
  animation: animateXMark 0.5s;
}

.clearfix {
  display: inline-table;
  min-height: 1%;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/* Hides from IE-mac \*/
.clearfix {
  display: block;
}

/* End hide from IE-mac */
/*--------------------------------
preload
--------------------------------*/
.preload * {
  transition: none !important;
}

/*--------------------------------
20210407
--------------------------------*/
.like-ct-label {
  width: 28px;
  line-height: 28px;
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  background: #fff;
  color: #f06292;
  border-radius: 7px;
  font-size: 12px;
  box-sizing: border-box;
}
.modal .like-ct-label {
  width: 33px;
  line-height: 33px;
}
.list .like-ct-label {
  width: 32px;
  line-height: 20px;
  top: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 4px;
}
.prof_body .like-ct-label {
  width: 42px;
  line-height: 42px;
  top: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .list .like-ct-label {
    width: 28px;
    line-height: 28px;
    top: 6px;
    right: 6px;
    bottom: 6px;
  }
}

.user-rank {
  padding: 0 0 0 16px;
  color: #f06292;
  background: url(../images/rest_like.png) no-repeat left;
  background-size: 14px;
  font-size: 14px;
}

.like {
  position: relative;
}

#message_entry textarea {
  padding: 4px;
}

.modal-summary-txt {
  margin: 0 8px 8px 8px;
  padding: 8px;
  line-height: 18px;
  flex-grow: 1;
  text-align: center;
  border: 1px solid #80cbc4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.summary-group .modal-summary-txt {
  margin: 0 0 -16px 0;
}
.modal-summary-txt span {
  color: #373531;
}

.required-like {
  padding: 0 4px;
  line-height: 20px;
  background: #f06292;
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  color: #fff;
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 12px;
}

.btn-label {
  padding: 0 0 8px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-label input[type="checkbox"] {
  margin: 0 4px 0 0;
  padding: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #757575;
  display: block;
  border-radius: 2px;
  box-sizing: border-box;
}
.btn-label input[type="checkbox"]:checked {
  border: 1px solid #455a64;
  background: #4db6ac;
}

.modal-summary-like {
  margin: 4px 0 0 0;
  padding: 0 16px;
  line-height: 20px;
  border-radius: 10px;
  background: #e0f7fa;
  font-size: 14px;
}
.modal-summary-txt .modal-summary-like {
  color: #455a64;
}
.modal-summary-like span {
  color: #455a64;
}