:root {
  --outer-space: 15px
}

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgb(239 239 239 / 0%);
  -webkit-touch-callout: none;
  /* -webkit-user-select: none; */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  margin: 0;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
}

input, button {
  border: 0
}

label {
  margin: 20px;
  font-weight: normal
}

input[type="text"], textarea {
  -webkit-appearance: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text
}

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

table, tr {
  width: 100%
}

th {
  text-align: left
}

td, th {
  padding: 0
}

ul {
  list-style: none;
  margin: 0;
  padding: 0
}

li {
  margin: .2em 0;
  padding: 0
}

img {
  vertical-align: middle;
  border: 0
}

p {
  word-break: break-word
}

textarea {
  resize: none
}

.sp-container {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  *zoom: 1;
  max-width: 700px
}

.sp-container.with-header {
  padding: 50px 0 0 0
}

.sp-container.without-footer {
  padding: 0
}

.sp-container.with-header-label {
  padding: 80px 0 0 0
}

.copyright {
  margin-top: 1em;
  text-align: center;
  color: #555
}

.footer_back-to-top {
  display: block;
  padding: 6px 10px;
  width: 100%;
  height: 30px;
  text-align: right;
  font-size: 13px;
  background-color: #555
}

.footer_back-to-top>a {
  display: inline-block;
  width: 100%;
  height: 100%
}

.footer_back-to-top>a:link, .footer_back-to-top a:visited, .footer_back-to-top a:hover, .footer_back-to-top a:active {
  color: #fff;
  text-decoration: none
}

.footer_back-to-top>span:after {
  content: '';
  display: inline-block;
  position: relative;
  top: 3px;
  margin-left: 2px;
  width: 14px;
  height: 14px;
  background-image: url(//cdn.with.is/assets/footer/footer_back_to_top-ac4c36e7ea19af91a5f3171752c9bc5cf8623e019644c4608b648a8d2df92a7b.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.footer_nav {
  padding: 10px 10px 0 10px;
  width: 100%;
  background-color: #eaeaea;
  overflow: hidden;
  *zoom: 1
}

.footer_nav li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  height: 40px;
  line-height: 1;
  font-size: 12px;
  color: #898989;
  background-color: #fff
}

.footer_nav li>a {
  display: inline-block;
  width: 100%;
  height: 100%
}

.footer_nav li>a:link, .footer_nav li a:visited, .footer_nav li a:hover, .footer_nav li a:active {
  color: #898989;
  text-decoration: none
}

.footer_nav li.full-column {
  width: 100%;
  text-align: center
}

.footer_nav li.full-column>a {
  padding: 14px 10px
}

.footer_nav li.full-column>a>span {
  position: relative
}

.footer_nav li.full-column>a>span:after {
  content: '';
  position: absolute;
  top: 0;
  right: -15px;
  width: 6px;
  height: 10px;
  background-image: url(//cdn.with.is/assets/footer/footer_right_arrow-22ac30e9a5f0347ffe96e0407faf96f80a4f475e78307dff72da5b7542e9cd81.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.footer_nav li.full-column>a>span:after {
  bottom: 0;
  margin: auto
}

.footer_nav li.full-column:first-child {
  border-radius: 4px 4px 0 0
}

.footer_nav li.full-column:nth-child(2) {
  border-top: 1px solid #eaeaea
}

.footer_nav li.half-column {
  width: 50%;
  border-top: 1px solid #eaeaea
}

.footer_nav li.half-column>a {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 7px 20px 7px 10px
}

.footer_nav li.half-column:after {
  content: '';
  position: absolute;
  top: 14px;
  right: 10px;
  width: 6px;
  height: 10px;
  background-image: url(//cdn.with.is/assets/footer/footer_right_arrow-22ac30e9a5f0347ffe96e0407faf96f80a4f475e78307dff72da5b7542e9cd81.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.footer_nav li:nth-last-child(2) {
  border-radius: 0 0 0 4px
}

.footer_nav li:last-child {
  border-radius: 0 0 4px 0
}

.footer_nav.has-plan-link li.half-column:nth-child(even) {
  border-left: 1px solid #eaeaea
}

.footer_nav.has-default-columns li.half-column:nth-child(odd) {
  border-left: 1px solid #eaeaea
}

.footer_nav.has-half-columns li.half-column:nth-child(even) {
  border-left: 1px solid #eaeaea
}

.footer_nav.has-half-columns li.half-column:first-child {
  border-radius: 4px 0 0 0
}

.footer_nav.has-half-columns li.half-column:nth-child(2) {
  border-radius: 0 4px 0 0
}

.footer_links {
  padding: 10px;
  background-color: #eaeaea
}

.footer_links ul {
  line-height: 2.5;
  color: #b2b2b2;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  *zoom: 1
}

.footer_links ul>a:link, .footer_links ul a:visited, .footer_links ul a:hover, .footer_links ul a:active {
  display: inline-block;
  margin: 0 10px;
  color: #b2b2b2;
  text-wrap: suppress
}

.footer_copyright {
  padding: 10px;
  color: #d1d1d1;
  text-align: center
}

.footer_copyright.is-search-page {
  margin-bottom: 73px
}

.footer_logo {
  width: 113px;
  height: 46px
}

.header {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 700px
}

#navigation {
  display: -webkit-box;
  display: flex;
  opacity: 0.95;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1)
}

.navigation_item.is-active, .navigation_item:active, body.desktop .navigation_item:hover, body.mobile .navigation_item.is-touching {
  text-decoration: none;
  background-color: #f9fafc;
  opacity: 1
}

.navigation_item {
  position: relative;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  width: 20%;
  height: 50px;
  background-color: #ffffff;
  text-decoration: none
}

.navigation_item:link, .navigation_item:visited {
  color: #9D9D9D;
  text-decoration: none
}

.navigation_item.is-active, .navigation_item:active {
  color: #606060
}

.navigation_item>.navigation_icon {
  position: relative
}

.navigation_item-label {
  position: absolute;
  top: 65%;
  left: 0;
  display: block;
  width: 100%;
  text-align: center
}

.icn-search {
  margin-top: 5px;
  width: 29px;
  height: 25px;
  background-image: url(../img/ser.png);
  background-position: 0% 0;
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.navigation_item.is-active .icn-search, .navigation_item:active .icn-search {
  background-position: 0% 100%
}

.icn-thumbs-up {
  margin-top: 5px;
  width: 29px;
  height: 25px;
  background-image: url(../img/good.png);
  background-position: 25% 0;
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.navigation_item.is-active .icn-thumbs-up, .navigation_item:active .icn-thumbs-up {
  background-position: 25% 100%
}

.icn-messages {
  margin-top: 5px;
  width: 29px;
  height: 25px;
  background-image: url(../img/talk.png);
  background-position: 50% 0;
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.navigation_item.is-active .icn-messages, .navigation_item:active .icn-messages {
  background-position: 50% 100%
}

.icn-community {
  margin-top: 5px;
  width: 29px;
  height: 25px;
  background-image: url(../img/hert.png);
  background-position: 75% 0;
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.navigation_item.is-active .icn-community, .navigation_item:active .icn-community {
  background-position: 75% 100%
}

.icn-mypage {
  margin-top: 5px;
  width: 29px;
  height: 25px;
  background-image: url(../img/sun.png);
  background-position: 100% 0;
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.navigation_item.is-active .icn-mypage, .navigation_item:active .icn-mypage {
  background-position: 100% 100%
}

.header-label {
  height: 30px;
  width: 100%
}

#navigation+.header-label {
  margin-top: -1px
}

.header-label_right {
  position: absolute;
  right: 15px
}

.header-label_private-mode {
  padding: 6px 0 0 15px;
  background: #00C9B5
}

.header-label_private-mode>a:link, .header-label_private-mode a:visited, .header-label_private-mode a:hover, .header-label_private-mode a:active {
  color: #fff;
  text-decoration: none
}

.header-label_like-chance-time {
  padding: 4px 0 0 15px;
  background: #606060;
  font-size: 13px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .header-label_like-chance-time {
    padding-left: 5px;
    font-size: 11px
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .header-label_like-chance-time>.header-label_right {
    right: 5px
  }
}

.section-border {
  border-top: 1px solid #eaeaea;
  margin: 0 15px
}

.section-border-full {
  border-top: 1px solid #eaeaea
}

.border-top {
  border-top: 1px solid #ececeb
}

.icon-arrow-left {
  display: inline-block;
  width: 11px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icn_arrow-e084cc154994d640d945aa021d8ede153e0d45f87953cb233068e708bb66293c.png);
  background-size: 22px 30px;
  background-repeat: no-repeat;
  background-position: 0 0
}

.icon-arrow-left.is-enabled {
  background-position: 0px -15px
}

.icon-arrow-right {
  display: inline-block;
  width: 11px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icn_arrow-e084cc154994d640d945aa021d8ede153e0d45f87953cb233068e708bb66293c.png);
  background-size: 22px 30px;
  background-repeat: no-repeat;
  background-position: -11px 0
}

.icon-arrow-right.is-enabled {
  background-position: -11px -15px
}

.parallel-buttons {
  width: 100%;
  padding-right: 10px
}

.parallel-buttons>div:last-child, .parallel-buttons>a:last-child, .parallel-buttons>button:last-child, .parallel-buttons>form:last-child {
  float: right;
  margin-right: -10px
}

.parallel-images {
  width: 100%;
  padding-right: 10px
}

.parallel-images>img {
  width: 50%
}

.parallel-images>img:last-child {
  float: right;
  margin-right: -10px
}

.mypage-profile .mypage-profile_check-button:before, .mypage-statuses .has-like>.mypage-status-header:before, .mypage-statuses .has-point>.mypage-status-header:before, .my-profile-edit-button:before, .my-profile-sample-button:after, .otameshi-talk-lp_calendar-link:after, .received-cards .received-card .received-card_panel-ui .received-card_tweet:before, .my-profile-other-sample-button:after, .like-with-answers_question:before {
  content: '';
  display: inline-block;
  background-size: 100%;
  background-repeat: no-repeat
}

.mbs {
  margin-bottom: 10px
}

.mbm {
  margin-bottom: 15px
}

.mbl {
  margin-bottom: 20px
}

.padding-x {
  padding-left: var(--outer-space);
  padding-right: var(--outer-space)
}

.padding-y {
  padding-top: var(--outer-space);
  padding-bottom: var(--outer-space)
}

.margin-x {
  margin-left: var(--outer-space);
  margin-right: var(--outer-space)
}

.size1 {
  font-size: 18px
}

.size2, .toast {
  font-size: 15px
}

.size3 {
  font-size: 13px
}

.size4, .error-headings, .error-description {
  font-size: 12px
}

.size5 {
  font-size: 10px
}

.size6 {
  font-size: 9px
}

.size24 {
  font-size: 24px
}

.size22 {
  font-size: 22px
}

.size20 {
  font-size: 20px
}

.size18 {
  font-size: 18px
}

.size16 {
  font-size: 16px
}

.size15 {
  font-size: 15px
}

.size14 {
  font-size: 14px
}

.size13 {
  font-size: 13px
}

.size12 {
  font-size: 12px
}

.size11 {
  font-size: 11px
}

.size10 {
  font-size: 10px
}

.text-strong {
  color: rgba(0, 0, 0, 0.87)
}

.text-weak {
  color: rgba(0, 0, 0, 0.28)
}

.text-primary {
  color: #000000;
}

.text-thank {
  color: #2cc4cb
}

.text-white {
  color: #fff
}

.text-white70 {
  color: rgba(255, 255, 255, 0.7)
}

.text-white70:link, .text-white70:active, .text-white70:visited {
  color: rgba(255, 255, 255, 0.7)
}

.text-black87 {
  color: rgba(0, 0, 0, 0.87)
}

.text-black87:link, .text-black87:active, .text-black87:visited {
  color: rgba(0, 0, 0, 0.87)
}

.text-black60 {
  color: rgba(0, 0, 0, 0.6)
}

.text-black60:link, .text-black60:active, .text-black60:visited {
  color: rgba(0, 0, 0, 0.6)
}

.text-black40 {
  color: rgb(255 255 255);}

.text-black40:link, .text-black40:active, .text-black40:visited {
  color: rgba(0, 0, 0, 0.4)
}

.text-black28 {
  color: rgba(0, 0, 0, 0.28)
}

.text-black28:link, .text-black28:active, .text-black28:visited {
  color: rgba(0, 0, 0, 0.28)
}

.text-vip {
  color: #C8944E
}

.text-error {
  color: #d50000
}

.text-center {
  text-align: center
}

.text-right {
  text-align: right
}

.text-left {
  text-align: left
}

.text-bold {
  font-weight: bold
}

.text-ellipsis, .footprint-route_title-ellipsis, .konomi-best-users_header .konomi-best-users_header_title-container .konomi-best-users_header_title, .notification_title, .received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_profiles_names-wrap .received-card_profiles_nickname, .like-route_title-ellipsis, .strip-user-card_body_tweet, .user-card-with-recommend-reason_reason-text, .user-cards-konomi-best .user-card-container .user-card-inner-container .user-konomi-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

@-webkit-keyframes sheet-appear {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px)
  }
}

@keyframes sheet-appear {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px)
  }
}

@-webkit-keyframes sheet-disappear {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px)
  }
}

@keyframes sheet-disappear {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px)
  }
}

.action-sheet-overlay {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1)
}

.action-sheet {
  display: none;
  z-index: 80;
  -webkit-animation: sheet-disappear 0.4s ease-out 0s;
  animation: sheet-disappear 0.4s ease-out 0s;
  background-color: #fff;
  border-top: 2px solid #f3f3f3;
  padding: 10px;
  width: 100%
}

.action-sheet.is-active {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  -webkit-animation: sheet-appear 0.4s ease-out 0s;
  animation: sheet-appear 0.4s ease-out 0s
}

.action-sheet_item {
  width: 100%;
  display: block;
  margin-bottom: 10px
}

.action-sheet_item:last-child {
  margin-bottom: 0
}

.align-center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fade-in {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes fade-in-visible {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    visibility: visible
  }
}

@keyframes fade-in-visible {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    visibility: visible
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes fade-out {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes fade-out-hidden {
  from {
    opacity: 1
  }

  to {
    opacity: 0;
    visibility: hidden
  }
}

@keyframes fade-out-hidden {
  from {
    opacity: 1
  }

  to {
    opacity: 0;
    visibility: hidden
  }
}

.anim-bounce-in {
  -webkit-animation: bounce-in 0.5s forwards;
  animation: bounce-in 0.5s forwards
}

.anim-bounce-out {
  -webkit-animation: bounce-out 0.5s forwards;
  animation: bounce-out 0.5s forwards
}

@-webkit-keyframes bounce-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3)
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3)
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes bounce-out {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3)
  }
}

@keyframes bounce-out {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3)
  }
}

@-webkit-keyframes push-in {
  100% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97)
  }
}

@keyframes push-in {
  100% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97)
  }
}

.autopager_loading {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #fff
}

.autopager_loading:after {
  content: '読み込み中...';
  height: 50px;
  width: 100%;
  background-image: url(//cdn.with.is/assets/lazyload/86-01ed7f2a16f8434709765581588aa7e4c138f244f0fd914ee4ed1d4717c70c92.gif);
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 45px;
  color: rgba(0, 0, 0, 0.28)
}

.autopager_paging-marker {
  display: none;
  text-align: center;
  background-color: #fff;
  padding: 5px 0;
  margin-top: 5px
}

.autopager_paging-marker a {
  margin-left: 5px
}

.autopager_paging-marker.is-border {
  border-bottom: 1px solid white;
  margin-top: 0
}

.badge_wrap {
  position: absolute;
  top: -1px;
  left: 0;
  width: 39px
}

.badge {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 6px;
  min-width: 10px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  background-color: #606060
}

.badge:empty {
  width: 8px;
  height: 8px;
  padding: 0;
  min-width: 0;
  display: block;
  top: 2px;
  right: 4px
}

#navigation .badge:empty {
  width: 6px;
  height: 6px;
  right: 7px
}

.balloon {
  position: relative;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  clear: both;
  background-color: #fff;
  border-radius: 10px
}

.balloon:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 47%;
  border-left: 15px solid #fff;
  border-bottom: 15px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.balloon-primary {
  background-color: #ffdcdc
}

.balloon-primary:after {
  border-left: 15px solid #ffdcdc;
  border-bottom: 15px solid #ffdcdc
}

.balloon-primary.is-rev:after {
  top: -5px;
  left: 47%;
  height: 0;
  border-top: 15px solid #ffdcdc;
  border-bottom: none;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.header_banner, .footer_banner {
  width: 100%;
  position: relative
}

.header_banner img, .footer_banner img {
  width: 100%
}

.search_header_banner {
  width: 100%;
  position: relative;
  margin: 3px 0 10px
}

.search_header_banner img {
  width: 100%
}

.half-banners {
  display: -webkit-box;
  display: flex;
  overflow-x: auto;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch
}

.half-banners::-webkit-scrollbar {
  display: none
}

.half-banners .half-banner {
  margin: 0 5px
}

.half-banners .half-banner img {
  height: 50px;
  border-radius: 5px
}

.box {
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.07)
}

.box+.box {
  margin-top: 10px
}

.box_title {
  margin-bottom: 5px
}

.box-padding {
  padding: 20px 15px
}

.is-separated {
  border-top: 1px solid #ececeb;
  border-bottom: 1px solid #ececeb
}

.is-separated+.is-separated {
  margin: 0;
  border-top: none
}

.box.is-inset {
  margin: 26px
}

.plain {
  overflow: hidden;
  background-color: #fff
}

.plain.is-attention {
  background-color: #fce6e8
}

.plain+.plain {
  border-top: 1px solid #ececeb
}

.plain.with-bottom-shadow {
  margin-bottom: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
}

.detail-box {
  background-color: #fff
}

.detail-box.is-top {
  border-radius: 15px 15px 0 0;
  border-bottom: 1px solid #ececeb
}

.detail-box>.box_title {
  padding-bottom: 10px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
  font-weight: bold
}

.media {
  overflow: hidden;
  *zoom: 1
}

.media_image {
  float: left;
  margin-right: 10px
}

.media_image.is-rev {
  float: right;
  margin-right: 0;
  margin-left: 10px
}

.media_body {
  overflow: hidden
}

.media_body_title {
  line-height: 1.2
}

.media-middle {
  display: table
}

.media-middle_image {
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px
}

.media-middle_image.is-rev {
  padding-right: 0;
  padding-left: 10px
}

.media-middle_body {
  display: table-cell;
  vertical-align: middle
}

.topic {
  color: rgba(0, 0, 0, 0.6)
}

.column-box {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex
}

.column-box_item {
  display: -webkit-inline-box;
  display: inline-flex;
  display: -webkit-inline-flex
}

.column-box_item.is-half {
  width: 50%
}

.button {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  color: #000;
  background-color: lightgray;
  border: none;
  cursor: pointer;
  border-radius: 30px
}

.button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  pointer-events: none
}

.button:link, .button:visited, .button:hover, .button:active {
  color: #000;
  text-decoration: none
}

.button:disabled, .button.is-disabled {
  color: #B8B8B8;
  background-color: #f5f5f5;
  pointer-events: none
}

.button:disabled:after, .button.is-disabled:after {
  content: none
}

.button:hover:after, .button:active:after {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s
}

.material-button {
  border-radius: 2px;
  background-color: rgba(158, 158, 158, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
}

.large-button {
  width: 100%
}

.large-button+.large-button {
  margin-top: 15px
}

.large-button+form {
  margin-top: 14px
}

.half-button {
  width: 50%
}

.quarter-button, a.quarter-button {
  width: 25%
}

.flat-button, a.flat-button {
  height: 40px;
  font-size: 16px;
  line-height: 2.5
}

button.flat-button {
  height: 40px;
  font-size: 15px;
  line-height: 2.5
}

.button-xl, .user-timeline-posts-like .list-view-button {
  height: 55px;
  line-height: 55px;
  font-size: 20px
}

.button-l {
  height: 45px;
  line-height: 45px;
  font-size: 18px
}

.button-m {
  height: 40px;
  line-height: 40px;
  font-size: 15px
}

.button-s {
  height: 35px;
  line-height: 35px;
  font-size: 14px
}

.button-xs {
  height: 30px;
  line-height: 30px;
  font-size: 14px
}

.minimum-button {
  min-width: 55px;
  width: 100%;
  height: 23px;
  font-size: 12px;
  line-height: 2
}

.cram-letters {
  letter-spacing: -0.1em
}

.clickable {
  cursor: pointer
}

.button-with-border {
  position: relative;
  display: -webkit-inline-box;
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 5px 10px;
  width: 100%;
  height: 48px;
  line-height: 1;
  font-size: 15px;
  color: #fff;
  background-color: #606060;
  border: 4px solid #fff;
  border-radius: 24px;
  box-shadow: 0px 1px 0px #d1d1d1
}

.button-with-border:link {
  color: #fff;
  text-decoration: none
}

.button-with-border:visited {
  color: #fff;
  text-decoration: none
}

.button-with-border_icon-arrow {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 7px;
  width: 8px;
  height: 13px;
  background-image: url(//cdn.with.is/assets/shared/icn_arrow_right_white-45c5fd2120ac8c3a2b32db5ee515dae00a1fdf6245f86d357a883b417db43bd0.png);
  background-size: 100%
}

.button-with-border.is-white {
  color: #9b9b9b;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1)
}

.button.is-disabled {
  color: #B8B8B8;
  background-color: #f5f5f5
}

.button.is-disabled:active {
  background-color: #f5f5f5
}

.button.is-block {
  display: block;
  margin-left: auto;
  margin-right: auto
}

body.desktop .button.is-disabled:hover {
  color: #B8B8B8
}

.has-shadow-action, .user-timeline-posts-like .list-view-button {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25)
}

.has-shadow-action:active, .user-timeline-posts-like .list-view-button:active {
  -webkit-animation: tap-button 0.2s ease-in-out 0s;
  animation: tap-button 0.2s ease-in-out 0s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.single-fixed-bottom-button, .parallel-fixed-bottom-buttons {
  z-index: 20;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  max-width: 700px;
  padding: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9;
  color: #fff;
  text-align: center
}

.single-fixed-bottom-button:link, .parallel-fixed-bottom-buttons:link, .single-fixed-bottom-button:visited, .parallel-fixed-bottom-buttons:visited, .single-fixed-bottom-button:hover, .parallel-fixed-bottom-buttons:hover {
  color: #fff;
  text-decoration: none
}

.single-fixed-bottom-button {
  font-size: 20px;
  background-color: #606060
}

.parallel-fixed-bottom-buttons {
  font-size: 1em
}

.parallel-fixed-bottom-buttons>a:last-child, .parallel-fixed-bottom-buttons>button:last-child {
  float: right
}

.parallel-fixed-bottom-buttons>.square-flat-button {
  border-radius: 0;
  padding: 0;
  height: 100%;
  line-height: 58px;
  font-size: 16px
}

.fixed-bottom-margin {
  margin-bottom: 80px
}

.button.size1 {
  font-size: 18px
}

.button.size15 {
  font-size: 15px
}

.button.size18 {
  font-size: 18px
}

.button40 {
  height: 40px;
  font-size: 15px;
  line-height: 40px
}

.button45 {
  height: 45px;
  font-size: 18px;
  line-height: 45px
}

.button-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto
}

@-webkit-keyframes tap-button {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }
}

@keyframes tap-button {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }
}

.toggle-checkbox {
  display: none
}

.toggle-checkbox+label {
  width: 25px;
  height: 25px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/check_off-93cef08190e65316984476dca382ad8e08ab7f7b29445b7a156bec426906f26e.svg);
  background-size: 100% 100%
}

.toggle-checkbox:checked+label {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/check_on-59fb2c5d633be46a8cce2b0a7789bfb3439c60d03ef5605c1fed79f49e11eeb7.svg)
}

.dialog-overlay {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6)
}

.dialog-overlay.is-like-message {
  background-color: rgba(254, 105, 112, 0.9)
}

.dialog-overlay.is-christmas {
  background-color: rgba(211, 45, 38, 0.9)
}

@-webkit-keyframes dialog-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
  }
}

@keyframes dialog-appear {
  from {
    opacity: 0;
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
  }
}

.centerbtn{
  text-align: center;
  margin-bottom: 10px;
}

.dialog {
  position: absolute;
  display: none;
  z-index: 80;
  padding: 15px;
  width: 290px;
  background-color: #d8d8d8;
  border-radius: 20px
}

.dialog.is-active {
  display: block
}

.dialog.is-animating {
  -webkit-animation: dialog-appear 0.2s linear 0s;
  animation: dialog-appear 0.2s linear 0s
}

.dialog.without-padding {
  padding: 0
}

.dialog.without-animation.is-animating {
  -webkit-animation: none;
  animation: none
}

.dialog.padding-y {
  padding: var(--outer-space) 0
}

.cross-button {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/web_dialog_close-2a1cac889fb2d4ae1acdadfa14bea910e1fbbd77229953f35032028fa2f9c04d.svg);
  background-size: 100%;
  z-index: 1
}

.dialog_title {
  margin-bottom: 15px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
  text-align: center;
  font-weight: bold
}

.dialog_title.with-exclamation-mark {
  position: relative
}

.dialog_title.with-exclamation-mark:before {
  content: '';
  display: inline-block;
  margin-right: 1px;
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/attention-674978df18b64600100df5e4289746ccbb86879252ea1a47527fb8d4acfc2786.svg);
  background-repeat: no-repeat;
  background-size: 100%
}

.dialog_desc {
  padding: 0 15px 0;
  color: #555;
  font-size: 13px
}

.dialog_help-balloon {
  margin: 0 15px 15px;
  padding: 20px 5px 10px;
  height: 60px;
  color: rgba(0, 0, 0, 0.54);
  font-size: 10px;
  background-image: url(//cdn.with.is/assets/mypages/help/balloon_frame-c2b0a27ae5356da48c2724e5db76c6d187e58e9e8e3aeead4fc6467aa749b55e.png);
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: contain
}

.dialog_submit {
  padding: 0 15px 15px
}

.dialog_thumb-large {
  text-align: center
}

.dialog_thumb-large img {
  margin-top: -40px;
  width: 90px;
  border-radius: 45px;
  border: 5px solid #fff
}

.dialog_thumb-large.is-christmas {
  margin-bottom: 80px
}

.dialog_thumb-large.is-christmas img {
  width: 76px;
  border: 5px solid #F5EAC1
}

.dialog_thumb-small img {
  width: 90px;
  border-radius: 45px
}

.dialog_textarea {
  height: 200px;
  font-size: 13px
}

.dialog_textarea.is-narrow {
  height: 60px
}

.dialog .form-input {
  margin-bottom: 15px
}

.dialog .field_with_errors>.form-input {
  margin-bottom: 0
}

.dialog .field_with_errors>div {
  margin-bottom: 5px
}

.icon-dialog-button {
  width: 36px;
  vertical-align: -6px
}

.dialog_header-img {
  width: 100%;
  height: auto;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px
}

.error-headings {
  padding: 10px;
  background-color: #fce6e8;
  color: #f93253;
  border-top: 1px solid #ffe4d7;
  border-bottom: 1px solid #ffe4d7
}

.error-description {
  display: inline-block;
  margin-top: 5px;
  background-color: #f93253;
  color: #ffffff;
  line-height: 1.5;
  border-radius: 9px;
  padding: 0 5px 0 5px;
  text-indent: 13px;
  position: relative
}

.error-description:before {
  display: block;
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icn_error-4a654580f125ab1f0e09a31f5ad2f99bdefaaa8ec58140be0636ec54ffca2faa.png);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 3px 3px
}

.flex {
  display: -webkit-box;
  display: flex
}

.flex.is-item-center {
  -webkit-box-align: center;
  align-items: center
}

.flex-shrink-0 {
  flex-shrink: 0
}

.flex-auto {
  -webkit-box-flex: 1;
  flex: auto
}

.form-radio>label, .form-checkbox>label {
  position: relative;
  width: 100%;
  height: 40px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 13px;
  border-radius: 10px
}

.form-radio>label, .form-checkbox>label {
  padding-left: 35px
}

.form-radio>label:before, .form-checkbox>label:before {
  content: '';
  position: absolute;
  top: 9px;
  left: 10px;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 200% 100%;
  background-position: 100%
}

.group-search-header_input:after {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  display: block;
  width: 22px;
  height: 29px;
  background-image: url(//cdn.with.is/assets/shared/icn_search-0e512311c13195c6404fba6f9a2a5c6b29aed2e083402b39dbf52dd2392c7a9e.png);
  background-size: 22px 58px;
  background-repeat: no-repeat;
  background-position: 0 0
}

.form-text-field>span.form-delete-text-button {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  cursor: pointer;
  width: 42px;
  height: 40px;
  background-image: url(//cdn.with.is/assets/shared/icn_remove_m-612c03161609610e2090a5d6d1d852a8c7ac060a6458e7160a4ae9147aad8074.png);
  background-size: 21px;
  background-position: 10px;
  background-repeat: no-repeat;
  border-radius: 0 10px 10px 0
}

.group-search-header_input>span.form-delete-text-button {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  cursor: pointer;
  width: 39px;
  height: 29px;
  background-image: url(//cdn.with.is/assets/shared/icn_remove_m-612c03161609610e2090a5d6d1d852a8c7ac060a6458e7160a4ae9147aad8074.png);
  background-size: 19px;
  background-position: 9px;
  background-repeat: no-repeat;
  border-radius: 0 10px 10px 0
}

.form-select-ranges .range_val, .form-select-column>div {
  color: #606060;
  background-color: #fff;
  border: 1px solid #eaeaea
}

.form-select-column.info-color>div {
  color: #2cc4cb;
  background-color: #fff;
  border: 1px solid #2cc4cb
}

.form-radio>label, .form-checkbox>label {
  color: #999999;
  background-color: #f1f1f1;
  border: 1px solid #eaeaea
}

.form-radio>input[type="radio"]:checked+label, .form-checkbox>input[type="checkbox"]:checked+label {
  color: #606060;
  background-color: #ffeded;
  border: 1px solid #ffeded
}

.form-radio {
  position: relative
}

.form-radio>input[type="radio"] {
  display: none
}

.form-radio>label:before {
  background-image: url(//cdn.with.is/assets/shared/icn_radiobutton-27a5ba3aaf972ad0adaee0aef59b6d81f81d01cd591dd7d41e1814a6952a2345.svg)
}

.form-radio>label:active {
  opacity: 0.8
}

.form-radio>input[type="radio"]:checked+label:before {
  background-position: 0
}

.form-checkbox>input[type="checkbox"] {
  display: none
}

.form-checkbox>label:before {
  background-image: url(//cdn.with.is/assets/shared/icn_checkbox-7c72592e2cee307efe98b4bd7074a55426c4c68201136c121c18300626856bfc.png)
}

.form-checkbox>label:active {
  opacity: 0.8
}

.form-checkbox>input[type="checkbox"]:checked+label:before {
  background-position: 0
}

.form-toggle>input[type="checkbox"] {
  display: none
}

.form-toggle>label {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 28px;
  color: transparent;
  background-color: #eaeaea;
  border: 1px solid #fff;
  border-radius: 15px
}

.form-toggle>label:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  display: block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 10px;
  -webkit-transition: 0.4s;
  transition: 0.4s
}

.form-toggle>label:active {
  opacity: 0.8
}

.form-toggle>input[type="checkbox"]:checked+label {
  background-color: #606060
}

.form-toggle>input[type="checkbox"]:checked+label:before {
  left: 25px
}

.form-affinity-checkbox {
  position: relative
}

.form-affinity-checkbox>input[type="checkbox"] {
  display: none
}

.form-affinity-checkbox label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding: 5px;
  width: 100%;
  font-size: 13px;
  color: #fff;
  text-align: center
}

.form-affinity-checkbox label:active {
  opacity: 0.8
}

.form-affinity-checkbox>input[type="checkbox"]:checked+.form-affinity-bg .form-affinity-bg_cover {
  border: 3px solid #606060;
  -webkit-transition: border 0.2s linear 0s;
  transition: border 0.2s linear 0s
}

.form-affinity-checkbox>input[type="checkbox"]:checked+.form-affinity-bg:after {
  content: '';
  position: absolute;
  bottom: 7%;
  right: 7%;
  width: 25%;
  height: 25%;
  max-width: 24px;
  max-height: 24px;
  background-image: url(//cdn.with.is/assets/shared/icn_checked-3c93721a07a067ab7fca66785cdfbddf3bf800d932eda9b7226585eaf5682690.png);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-animation: select-affinity-card 0.2s ease-out 0s forwards;
  animation: select-affinity-card 0.2s ease-out 0s forwards
}

.form-affinity-bg {
  position: relative
}

.form-affinity-bg .konomi-best-icon {
  position: absolute;
  top: 3px;
  left: 10px;
  width: 24px;
  height: 29px;
  background-image: url(//cdn.with.is/assets/konomi_comments/icon_on_img-4d006163e52027f5ebb7588512cec8ae8df9f171b2276cdfe3a3e15f404f61d3.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.form-affinity-bg img {
  width: 100%;
  border: 3px solid #fff;
  border-radius: 15px
}

.form-affinity-bg_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border: 3px solid #fff;
  border-radius: 15px
}

.form-affinity-selected {
  position: relative;
  width: 100%;
  border-radius: 15px
}

.form-affinity-selected_text {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: -10px;
  width: 90%;
  height: 40px;
  color: white;
  text-align: center
}

@-webkit-keyframes select-affinity-card {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  80% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes select-affinity-card {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  80% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.form-textarea {
  padding: 10px;
  width: 100%;
  border: 1px solid #d1d1d1;
  border-radius: 10px
}

.textarea-height-m {
  height: 125px
}

.form-text-cell {
  color: #606060
}

.form-text-field {
  position: relative
}

.form-input {
  padding: 0 10px;
  width: 100%;
  height: 40px;
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  -webkit-appearance: none
}

.input-hint {
  float: right
}

.input-note {
  margin-bottom: 4px
}

.form-input-cell {
  display: table-cell;
  width: 78%;
  vertical-align: middle
}

.sm-placeholder :placeholder-shown {
  font-size: 0.8em
}

input::-ms-clear {
  visibility: hidden
}

.form-select-ranges select, .form-select-column select, .form-select-cell select, .identification-birthday>div select {
  color: #606060;
  font-size: 13px;
  border: none;
  background: none transparent;
  -webkit-appearance: listbox;
  -moz-appearance: listbox;
  appearance: listbox;
  padding-left: 10px
}

.form-select-ranges {
  height: 100%;
  text-align: center
}

.form-select-ranges .range_val {
  float: left;
  overflow: hidden;
  width: 45%;
  border-radius: 10px
}

.form-select-ranges .range_space {
  height: 40px;
  line-height: 3;
  color: #999999
}

.form-select-ranges .range_val:last-child {
  float: right
}

.form-select-ranges select {
  width: 130%;
  height: 40px;
  padding-left: 10px;
  background-position: 68% center;
  cursor: pointer
}

.form-select-column {
  height: 42px
}

.form-select-column>div {
  float: left;
  overflow: hidden;
  width: 100%;
  border-radius: 10px
}

.form-select-column select {
  width: 130%;
  height: 40px;
  padding-left: 10px;
  background-position: 73% center;
  cursor: pointer
}



.form-select-column.info-color {
  height: 42px
}

.form-select-column.info-color select {
  color: #2cc4cb
}



.form-select-cell {
  position: relative;
  overflow: hidden;
  height: 36px
}

.form-select-cell select {
  position: relative;
  padding-right: 20px;
  width: 100%;
  height: 100%;
  background-position: right center;
  direction: rtl;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: block
}

.form-select-cell select option {
  direction: ltr
}

.form-select-cell select::-ms-expand {
  display: none
}


.form-select-cell .error-description {
  float: right;
  overflow: hidden;
  *zoom: 1
}

.form-link-cell {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: left;
  margin: 5px 10px 5px 0;
  padding: 10px 30px 10px 1em;
  border: 1px solid #ececeb;
  border-radius: 10px
}

.form-link-cell:link {
  text-decoration: none
}

.form-link-cell:visited {
  color: #606060
}

.form-link-cell:before {
  right: 10px;
  content: '';
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icn_edit_s-642dfdb2ac74a15dfde483371a8ad32120adce55d34c5ca9a449414806b52798.png);
  background-size: 15px 15px;
  background-repeat: no-repeat
}

#nickname .form-link-cell {
  width: 100%
}

.form-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis
}

.large-columns-box>div {
  margin-top: 10px
}

.large-column {
  width: 100%
}

.half-columns-box, .trisect-columns-box, .quater-columns-box, .quint-columns-box {
  margin-left: -5px;
  margin-right: -5px;
  width: auto;
  overflow: hidden;
  *zoom: 1
}

.half-column {
  width: 50%;
  padding: 10px 5px 0;
  float: left
}

.trisect-column {
  width: calc(100% / 3);
  padding: 0 5px 10px;
  float: left
}

.quater-column {
  width: 25%;
  padding: 10px 5px 0;
  float: left
}

.quint-column {
  width: 20%;
  padding: 10px 5px 0;
  float: left
}

.break-line {
  width: 100%;
  height: 10px;
  border-bottom: 1px dashed #ececeb
}

.profile-item {
  background-color: #bbb;
}

.profile-item+.profile-item {
  border-top: 1px solid #ececeb
}

.profile-item+.profile-item.no-border {
  border-top: 0px
}

.profile-item+.profile-item.no-border>div {
  height: 36px
}

.profile-item+.profile-detail_heading {
  border-top: 1px solid #ececeb
}

.profile-item+.box {
  border-top: 1px solid #ececeb
}

.profile-item_content {
  position: relative;
  display: table;
  width: 100%;
  height: 50px
}

.type-table {
  display: table;
  width: 100%
}

.type-table>div {
  display: table-row;
  height: 55px
}

.type-table>.error-description {
  display: inline-block;
  margin: 0 0 20px 20px;
  height: 16px
}

.type-table_heading {
  padding-left: 20px
}

.type-table_body {
  padding-right: 20px
}

.type-table .form-select-cell {
  padding-right: 20px
}

.type-table .form-input-cell {
  padding-right: 20px
}

.half-cell {
  display: table-cell;
  width: 50%;
  vertical-align: middle
}

.narrow-cell {
  display: table-cell;
  width: 30%;
  vertical-align: middle;
  overflow: visible
}

.wide-cell {
  display: table-cell;
  width: 70%;
  vertical-align: middle
}

.profile-heading-cell {
  display: table-cell;
  width: 45%;
  vertical-align: middle
}

.profile-body-cell {
  display: table-cell;
  width: 55%;
  vertical-align: middle;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: right
}

.type-block {
  padding: 15px
}

.type-block_heading {
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 10px
}

.type-block_link {
  display: block;
  float: right
}

.type-block_link:link {
  color: #555;
  text-decoration: none
}

.type-block_link.is-active:link {
  color: #606060
}

.type-block_link.is-active:visited {
  color: #606060
}

.type-block_link>.icon-arrow-right {
  vertical-align: -3px
}

.type-block_selected {
  display: table-cell;
  width: 70%;
  text-align: right;
  vertical-align: middle
}

.type-block_selected>.selected-by-dialog {
  display: block;
  max-height: 45px;
  padding: 5px 15px 5px 0
}

.type-block_selected>.icon-arrow-right {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0
}

.type-block_selected select {
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-appearance: listbox;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px
}

.type-block_selected select.is-active {
  color: #606060
}

.type-block_selected span {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px
}

.type-block_selected span.is-active {
  color: #606060
}

.table-column {
  display: table;
  width: 100%
}

.type-multiple_body+.type-block_heading {
  margin-top: 20px
}

.type-tap-area {
  padding: 0 15px
}

.type-tap-area:hover {
  background-color: #eaeaea
}

.type-tap-area+.type-tap-area .profile-item_content, .type-tap-area+.form-search-accordion+.type-tap-area, .form-search-accordion {
  border-top: 1px solid #ececeb
}

.type-tap-area_margin {
  padding: 0 15px
}

.type-tap-area_margin>div {
  height: 30px;
  border-top: 1px solid #ececeb
}

.type-multiple_line {
  height: 20px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.4);
  background-color: #f3f3f3;
  font-size: 10px;
  text-align: right;
  padding-right: 10px;
  border-top: 1px solid #ececeb
}

.form-heading-with-tag>span {
  display: inline-block;
  max-width: 85%
}

.form-heading-with-tag .form-tag-notice {
  vertical-align: top
}

.form-tag-notice {
  display: inline-block;
  margin-left: 5px;
  padding: 0 7px;
  width: auto;
  height: 18px;
  line-height: 1.8;
  color: #fff;
  font-size: 10px;
  background-color: #606060;
  border-radius: 10px
}

.form-check-inline>input[type="checkbox"] {
  display: none
}

.form-check-inline>label {
  display: inline-block
}

.form-check-inline>label:before {
  display: inline-block;
  content: '';
  width: 20px;
  height: 20px;
  background-size: 200% 100%;
  background-position: 100%;
  background-image: url(//cdn.with.is/assets/shared/icn_checkbox-7c72592e2cee307efe98b4bd7074a55426c4c68201136c121c18300626856bfc.png);
  margin-right: 10px;
  vertical-align: -5px
}

.form-check-inline>label:active {
  opacity: 0.8
}

.form-check-inline>input[type="checkbox"]:checked+label:before {
  background-position: 0
}

.form-textarea-with-counter {
  position: relative
}

.notice-next-to-counter {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.28);
  font-size: 11px
}

.clickable-label img {
  pointer-events: none
}

.global-nav_header {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 700px;
  height: 60px;
  background-color: #9d9d9d;
  z-index: 5;
  -webkit-transition: background-color 1s 0s ease;
  transition: background-color 1s 0s ease
}

.global-nav_header.is-modest {
  background-color: transparent
}

.global-nav_header.is-modest .global-nav_header_logo {
  visibility: hidden
}

.global-nav_header.is-modest .global-nav_header_login {
  background-image: url(//cdn.with.is/assets/global_nav/btn_login_white-9193c1d793fd7d8cae5ddb52cf8b8bfca7bf3d65203fd4f0ed5165595350053e.png)
}

.global-nav_header.is-modest .global-nav_open-drawer {
  background-image: url(//cdn.with.is/assets/global_nav/btn_open_drawer_white-930e38cc424e6e6ebb91cef0546cd440e65ab4619f73e769f3e335d638f8a28c.png)
}

.global-nav_header_logo {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 74px
}

.global-nav_header_login {
  position: absolute;
  top: -5px;
  right: 60px;
  width: 85px;
  height: 44px;
  background-image: url(../login.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.global-nav_open-drawer {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 50px;
  height: 44px;
  background-image: url(//cdn.with.is/assets/global_nav/btn_open_drawer-23ee8f1c7bde5f449e357d0e09de4c40fa53a3dfcb40049106dc39187c94b2d8.png);
  background-size: 20px 14px;
  background-position: center center;
  background-repeat: no-repeat
}

.global-nav_drawer_bg {
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 1s 0s ease;
  transition: opacity 1s 0s ease
}

.global-nav_drawer_bg.is-show {
  pointer-events: auto;
  opacity: 1
}

.global-nav_drawer_frame {
  display: none;
  position: absolute;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100%;
  min-height: 660px;
  background-color: #a9a9a9;
  -webkit-transition: right 0.5s 0s ease-in-out;
  transition: right 0.5s 0s ease-in-out;
  z-index: 11
}

.global-nav_drawer_close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px
}

.global-nav_drawer_close-button img {
  width: 55px
}

.global-nav_drawer_service {
  padding: 15px 20px;
  color: #606060
}

.global-nav_drawer_service img {
  margin-right: 10px;
  width: 58px
}

.global-nav_drawer_service_title {
  display: inline-block;
  vertical-align: bottom;
  line-height: 11px;
  font-size: 11px
}

ul.global-nav_drawer_nav li {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 15px;
  width: 100%;
  height: 50px
}

ul.global-nav_drawer_nav li a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 50px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid #ececeb
}

ul.global-nav_drawer_nav li:before {
  content: '';
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 11px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icn_arrow-e084cc154994d640d945aa021d8ede153e0d45f87953cb233068e708bb66293c.png);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% 200%
}

.global-nav_submit-area {
  padding: 30px var(--outer-space);
  max-width: 350px;
  margin: auto
}

.global-nav_submit-area_heading {
  margin-bottom: 15px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 18px;
  font-weight: bold;
  text-align: center
}

.global-nav_submit-area_notice {
  margin: 0 auto;
  width: 250px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 10px;
  line-height: 18px
}

.global-nav_margin {
  width: 100%;
  height: 60px
}

.input-birthday input {
  width: 80%;
  height: 40px;
  font-size: 15px;
  color: #606060;
  text-align: center;
  border-bottom: 1px solid #ececeb;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text
}

.input-birthday_items {
  display: -webkit-box;
  display: flex
}

.input-birthday_items div {
  align-self: center
}

.input-birthday_items input {
  display: block;
  margin-right: 1%
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit
}

a.is-no-decoration:link {
  text-decoration: none
}

.text-link:hover {
  opacity: 0.8
}

.text-underline {
  text-decoration: underline
}

.block-link {
  position: relative;
  display: block;
  margin-top: 13px;
  margin-bottom: 13px;
  padding-right: 30px;
  height: 26px;
  line-height: 2;
  font-size: 13px;
  text-align: right
}

.block-link:link {
  text-decoration: none
}

.block-link:visited {
  color: #606060
}

.block-link:before {
  right: 15px;
  background-position: -11px -15px
}

.block-link>.icon-search {
  margin-top: -2px
}

.block-link.with-box-padding {
  padding-right: 15px
}

.block-link.with-box-padding:before {
  right: 0
}

.block-link.no-margin {
  margin-top: 0;
  margin-bottom: 0
}

a.disabled {
  pointer-events: none
}

.block-link:before, .konomi-comment_item.arrow-right:before, .mypage_edit-timeline_links_block-link:before, .profile-settings_lists>li:before {
  content: '';
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 11px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icn_arrow-e084cc154994d640d945aa021d8ede153e0d45f87953cb233068e708bb66293c.png);
  background-size: 22px 30px;
  background-repeat: no-repeat
}

@-webkit-keyframes toast-appear {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes toast-appear {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes toast-disappear {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes toast-disappear {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.toast_background, .loading_background {
  position: fixed;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  background-color: transparent
}

.toast, .loading {
  position: relative;
  -webkit-animation: toast-disappear 0.2s linear 0s forwards;
  animation: toast-disappear 0.2s linear 0s forwards;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.is-active.toast, .is-active.loading {
  -webkit-animation: toast-appear 0.2s linear 0s backwards;
  animation: toast-appear 0.2s linear 0s backwards
}

.is-primary.toast, .is-primary.loading {
  background-color: rgba(254, 105, 112, 0.9);
  border-radius: 10px
}

.area140.toast, .area140.loading {
  padding: 5px;
  width: 140px;
  height: 140px
}

.toast {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  padding: 5px;
  width: 130px;
  height: 130px;
  background-color: rgba(64, 64, 64, 0.9);
  color: #fff;
  border-radius: 10px
}

.toast .use-point {
  padding: 0 10px;
  background-position: center;
  background-repeat: no-repeat;
  height: 20px;
  min-width: 85px;
  line-height: 20px;
  font-size: 10px
}

.toast .use-point.is-size-s {
  background-image: url(//cdn.with.is/assets/dialogs/border_s-8a12f939cdb440be9dd9cb50e29d748494417e7910286a75216f474c93b2a1d5.svg)
}

.toast .use-point.is-size-m {
  background-image: url(//cdn.with.is/assets/dialogs/border_m-61af6a2e0ae293ce0391bd5cd73de2a0bc8444cdcf7eeb6a6a3a54fd71faef6f.svg)
}

.loading {
  background-color: #fff;
  background-image: url(//cdn.with.is/assets/shared/loading-4cad3056ae62f47deb07061cb8256ba9e3ad08a1b86d869b0779a02c569c4180.gif);
  background-repeat: no-repeat;
  background-position: 7px 24px;
  background-size: 60px 26px;
  width: 75px;
  height: 75px;
  border-radius: 10px;
  border: 1px solid #ececeb;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.toast_image {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-bottom: 10px
}

.toast_animation-container {
  width: 52px;
  height: 52px
}

.toast_body {
  max-width: 100%;
  text-align: center
}

.toast-message {
  display: none
}

.online-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  margin-right: 5px
}

.online-badge.is-online {
  background-color: #64C800
}

.online-badge.is-in-24h {
  background-color: #F8B62D
}

.overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9)
}

.overlay_title {
  text-align: center;
  padding-bottom: 1.5em
}

.overlay_message {
  text-align: center;
  padding-bottom: 3em
}

.overlay_button {
  text-align: center;
  width: 70%;
  display: block;
  font-size: 18px;
  line-height: 2.8;
  border-radius: 0px
}

.scrollable-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 30;
  background: #fff
}

.paging {
  text-align: center;
  padding: 10px 10px 20px 10px;
  background-color: #f1f1f1;
  overflow: hidden;
  *zoom: 1
}

.paging>div {
  position: relative
}

.paging_bg-white {
  text-align: center;
  padding: 10px 10px 20px 10px;
  background-color: #fff;
  overflow: hidden;
  *zoom: 1
}

.paging_bg-white>div {
  position: relative
}

.paging_prev-button, .paging_next-button {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0px 1px 0px #d1d1d1
}

.paging_prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 44px
}

.paging_prev>a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none
}

.paging_prev-button>span {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px;
  height: 20px
}

.paging_prev-button>.icon-arrow-left {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 10px
}

.paging_prev-button.is-disabled {
  box-shadow: none
}

.paging_prev-button.is-disabled>div, .paging_prev-button.is-disabled>span {
  opacity: 0.5
}

.paging_prev-button.no-shadow {
  box-shadow: none
}

.paging_current {
  height: 44px;
  line-height: 44px
}

.paging_next {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 44px
}

.paging_next>a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none
}

.paging_next-button>span {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 15px;
  height: 20px
}

.paging_next-button>.icon-arrow-right {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 10px
}

.paging_next-button.is-disabled {
  box-shadow: none
}

.paging_next-button.is-disabled>div, .paging_next-button.is-disabled>span {
  opacity: 0.5
}

.paging_next-button.no-shadow {
  box-shadow: none
}

body.desktop .paging_prev-button:hover, body.desktop .paging_next-button:hover {
  background-color: #eaeaea
}

body.desktop .paging_prev-button.is-disabled:hover, body.desktop .paging_next-button.is-disabled:hover {
  background-color: #fff
}

body.mobile .paging_prev-button.is-touching, body.mobile .paging_next-button.is-touching {
  background-color: #eaeaea
}

body.mobile .paging_prev-button.is-disabled.is-touching, body.mobile .paging_next-button.is-disabled.is-touching {
  background-color: #fff
}

.paging-single {
  text-align: center;
  padding: 15px 15px 20px;
  background-color: #fff;
  overflow: hidden;
  *zoom: 1
}

.paging-single>div {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center
}

.paging-single .paging-single_prev>a, .paging-single .paging-single_center>a, .paging-single .paging-single_next>a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none
}

.paging-single .paging-single_prev>a:active div, .paging-single .paging-single_center>a:active div, .paging-single .paging-single_next>a:active div {
  background-color: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.15)
}

.paging-single .paging-single_center {
  margin: 0 15px
}

.paging-single_prev-button, .paging-single_next-button, .paging-single_center-button {
  position: relative;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weight: bold;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.07)
}

.paging-single_prev-button>span, .paging-single_next-button>span, .paging-single_center-button>span {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 20px
}

.paging-single_prev-button, .paging-single_next-button {
  width: 75px;
  height: 40px
}

.paging-single_prev-button.is-disabled, .paging-single_next-button.is-disabled {
  color: #cbcbcb;
  background-color: #f6f6f6;
  border: none
}

.paging-single_center-button {
  width: 85px;
  height: 40px
}

.paging-plural {
  text-align: center;
  padding: 0 15px 20px;
  background-color: #fff;
  overflow: hidden;
  *zoom: 1
}

.paging-plural>div {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center
}

.paging-plural .paging-plural_prev>a, .paging-plural .paging-plural_number>a, .paging-plural .paging-plural_next>a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none
}

.paging-plural .paging-plural_prev>a:active div, .paging-plural .paging-plural_number>a:active div, .paging-plural .paging-plural_next>a:active div {
  background-color: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.15)
}

.paging-plural .paging-plural_prev, .paging-plural .paging-plural_number {
  margin-right: 15px
}

.paging-plural .paging-plural_number:last-child {
  margin-right: 0
}

.paging-plural_prev-button, .paging-plural_next-button, .paging-plural_number-button {
  position: relative;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weight: bold;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.07)
}

.paging-plural_prev-button, .paging-plural_next-button, .paging-plural_number-button {
  width: 35px;
  height: 35px
}

.paging-plural_prev-button>span, .paging-plural_next-button>span, .paging-plural_number-button>span {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 20px
}

.paging-plural_number-button.is-current {
  color: #fff;
  background-color: #ff999e;
  border: none
}

.message-panel {
  padding: 0 10px
}

.message-panel_frame {
  border: none;
  background-color: #fff;
  padding: .5em .8em;
  margin-bottom: 10px;
  border-radius: 12px;
  box-shadow: 0px 1px 0px #d1d1d1 inset
}

.message-panel li:before {
  content: '・';
  color: #606060
}

.illust-full {
  width: 100%
}

.illust-max {
  max-width: 100%
}

.illust-block {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.photo-list.slick-slider {
  margin-top: 34px
}

.photo-list .photo-list_item>img {
  width: 100%;
  height: auto
}

.photo-list .slick-dots {
  top: -29px;
  bottom: auto;
  height: 24px
}

.photo-list .slick-dots li button:before {
  color: #999999
}

.photo-list .slick-dots li.slick-active button:before {
  color: #606060
}

.photo-uploader_file-field {
  width: 60px;
  height: 60px;
  position: relative;
  float: right;
  background-color: #f1f1f1;
  background-image: url(//cdn.with.is/assets/shared/icn_add_l-300ee680c9639a08900ec4fb1ed95a0a086a6759ff57ba77388099ff90dce13e.png);
  background-size: 20px;
  background-position: 20px;
  background-repeat: no-repeat;
  border-radius: 4px
}

.photo-uploader_file-field.is-hidden {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

.photo-uploader_file-field.is-hidden>.photo-uploader_add {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 500%
}

.photo-uploader.field_with_errors>div {
  border: 1px solid red;
  box-sizing: content-box
}

.photo-uploader_source {
  display: none;
  width: 60px;
  height: 60px;
  border-radius: 10px
}

.photo-uploader_canvas {
  display: none;
  margin: 0 auto
}

.photo-uploader_add {
  width: 60px;
  height: 60px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer
}

.photo-uploader.is-fallback .photo-uploader_file-field {
  background-color: transparent;
  background-image: none;
  width: auto;
  height: auto
}

.photo-uploader.is-fallback .photo-uploader_add {
  position: relative;
  text-align: right;
  width: auto;
  height: auto;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1
}

.photos {
  background-color: #fff;
  border-top: 1px solid #ececeb
}

.photos_album {
  border-bottom: 1px solid #ececeb;
  width: 100%
}

.photos_photo {
  width: 49%;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
  display: inline-block
}

.photos_image {
  max-width: 100%;
  max-height: 300px;
  padding-bottom: 10px
}

.progress-bar {
  width: 40%;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 15px
}

.progress-bar div {
  width: 0;
  height: 5px;
  background: #fff;
  border-radius: 15px;
  -webkit-animation: progress-bar 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards;
  animation: progress-bar 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards
}

@-webkit-keyframes progress-bar {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes progress-bar {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

.segmented-list {
  overflow: hidden;
  *zoom: 1;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1)
}

.segmented-list>li {
  margin: 0;
  float: left;
  text-align: center;
  height: 100%
}

.segmented-list>li>a {
  width: 100%;
  height: 100%;
  display: block
}

.segmented-list>li+li {
  border-left: 1px solid rgba(0, 0, 0, 0.1)
}

.slide-dialog {
  display: none
}

.slide-dialog_overlay {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: rgba(255, 255, 255, 0.95)
}

.slide-dialog_container {
  margin: auto;
  max-width: 700px;
  position: relative
}

.slide-dialog_body {
  padding: 40px 20px 20px
}

.slide-dialog_close {
  position: absolute;
  top: 18px;
  right: 0;
  width: 36px;
  height: 36px;
  background-size: 100%;
  z-index: 1
}

.slide-dialog.is-opening {
  -webkit-animation: slide-dialog-is-opening 0.25s ease-in-out forwards;
  animation: slide-dialog-is-opening 0.25s ease-in-out forwards
}

.slide-dialog.is-closing {
  -webkit-animation: slide-dialog-is-closing 0.25s ease-in-out forwards;
  animation: slide-dialog-is-closing 0.25s ease-in-out forwards
}

@-webkit-keyframes slide-dialog-is-closing {
  from {
    top: 0
  }

  to {
    top: 100%;
    opacity: 1
  }
}

@keyframes slide-dialog-is-closing {
  from {
    top: 0
  }

  to {
    top: 100%;
    opacity: 1
  }
}

@-webkit-keyframes slide-dialog-is-opening {
  from {
    top: 100%
  }

  to {
    top: 0
  }
}

@keyframes slide-dialog-is-opening {
  from {
    top: 100%
  }

  to {
    top: 0
  }
}

.table {
  display: table;
  border: 1px solid #dadada;
  width: 100%;
  background-color: #fff
}

.table.has-border-radius {
  border-radius: 10px
}

.table.has-border-radius .table_row:first-child:not(.one-row) .table_heading:first-child {
  border-radius: 10px 0 0 0
}

.table.has-border-radius .table_row:first-child:not(.one-row) .table_heading:last-child {
  border-top-right-radius: 10px
}

.table.has-border-radius .table_row:last-child:not(.one-row) .table_heading:first-child {
  border-radius: 0 0 0 10px
}

.table.has-border-radius .table_row.one-row .table_heading {
  border-radius: 10px 0 0 10px
}

.table.has-border-radius.no-border {
  border: none
}

.table_row {
  display: table-row;
  height: 46px
}

.table_row+.table_row .table_heading, .table_row+.table_row .table_body {
  border-top: 1px solid #dadada
}

.table_heading {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  background-color: #f1f1f1
}

.table_heading.is-size-half {
  width: 50%
}

.table_heading.is-size-forty {
  width: 40%
}

.table_heading.is-primary {
  color: #fff;
  background-color: #606060;
}

.table_heading.is-platinum {
  color: #fff;
  background-color: #d0c19b
}

.table_body {
  display: table-cell;
  vertical-align: middle;
  padding: 10px
}

.table_heading+.table_body {
  border-left: 1px solid #dadada
}

.table_heading+.table_heading {
  border-left: 1px solid #dadada
}

.table_body+.table_body {
  border-left: 1px solid #dadada
}

.has-ff-edge-border {
  border-left: 1px solid #dadada
}

.title-area {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  height: 60px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6);
  background-color: #fff;
  border-bottom: 1px solid #eaeaea
}

.title-area_icon-back {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 15px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/back-60d2e00a4d61034f7994ded42e7d6c414f1ffba6ee1e958a18790ba399044996.svg);
  background-size: 15px 20px;
  background-repeat: no-repeat
}

.title-area .icon-arrow-left {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 15px;
  height: 20px;
  background-size: 30px 40px
}

.title-area .icon-arrow-left.is-enabled {
  background-position: 0px -20px
}

.title-area .icon-info {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px
}

.title-area.is-fixed {
  width: 100%;
  max-width: 700px;
  position: fixed;
  z-index: 10;
  opacity: 0.95;
  top: 50px
}

.title-area.is-fixed+.box {
  margin-top: 60px
}

.title-area.no-border {
  border-bottom: none
}

.title-area_back-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px
}

.title-area_info-link {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px
}

.title-area_thumb {
  margin-right: 10px;
  width: 36px;
  border-radius: 18px
}

.title-area_actions {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 10px;
  display: block;
  padding: 0 7px;
  height: 28px;
  line-height: 2.4;
  text-align: center;
  color: #999999;
  font-size: 12px;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0px 1px 0px #d1d1d1
}

.title-area.is-with-color {
  color: #fff;
  background-color: #606060;
  border-bottom: none
}

.title-area.is-with-color .icon-arrow-left {
  background-image: url(//cdn.with.is/assets/shared/icn_arrow_right_white-45c5fd2120ac8c3a2b32db5ee515dae00a1fdf6245f86d357a883b417db43bd0.png);
  background-position: 0 0;
  background-size: 15px 20px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.title-area-namewrap {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  max-width: 60%
}

.title-area-nickname {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis
}

.title-area-title {
  white-space: nowrap
}

.icon-info {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/icn_info-879d18258333ac241e2a9249ba9c39dbb6abccfc2573fb9c5cc62b37b4d423e6.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.toast-bar {
  position: fixed;
  right: 50%;
  bottom: 15px;
  -webkit-transform: translate(50%, 0%);
  transform: translate(50%, 0%);
  z-index: 25;
  width: 95%;
  max-width: 400px;
  height: 85px;
  padding: 7px 10px;
  background: rgba(77, 58, 55, 0.9) -webkit-radial-gradient(rgba(102, 77, 77, 0.6) 0%, rgba(51, 51, 51, 0.7) 100%);
  background: rgba(77, 58, 55, 0.9) radial-gradient(rgba(102, 77, 77, 0.6) 0%, rgba(51, 51, 51, 0.7) 100%);
  border-radius: 10px;
  box-shadow: 0 6px 11px 0 rgba(0, 0, 0, 0.3)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .toast-bar {
    height: 75px
  }
}

.toast-bar a {
  text-decoration: none
}

.toast-bar_cross-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background: no-repeat center/15px 15px url(//cdn.with.is/assets/shared/icons/close_gray_opaque-53c7b4bd590b65cf4ea0e7af3f42a1dbeadb6a3593e861a75740afdc8690f2c9.svg)
}

.color-sample {
  float: left;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 20px
}

.color-desc {
  float: left;
  display: inline-block;
  margin-left: 10px;
  height: 40px;
  line-height: 40px;
  font-size: 18px
}

.identification-choices .button {
  font-size: 18px;
  height: 55px;
  line-height: 3
}

.identification-choices .button-with-border_icon-arrow {
  margin-right: 26px
}

.identification-choices .identification-choice-icon {
  position: absolute;
  width: 60px;
  left: 30px;
  top: 8px
}

.identification-choices .note {
  position: absolute;
  right: 15px;
  top: 11px
}

.identification-other-samples {
  background-color: rgba(254, 105, 112, 0.1);
  border-radius: 8px;
  color: #333333;
  font-size: 14px
}

.identification-other-samples li {
  margin-bottom: 4px;
  margin-left: 20px
}

.identification-other-samples li::before {
  content: '';
  display: inline-block;
  margin-left: -20px;
  width: 20px;
  height: 8px;
  background: url(//cdn.with.is/assets/age_auth/list_check_mark-2aa003a1bf0d1d4084b1b4bb32018eeee48156dbc67b1611005ecdbb1cc9e240.png) no-repeat;
  background-size: 11px 8px
}

.identification-screen-image {
  display: block;
  margin: 0 auto 20px;
  width: 80%
}

.identification-screen-image.is-insurance, .identification-screen-image.is-pension {
  width: 100%
}

.identification-disabled-step-button {
  color: #fff;
  background-color: #fed2d4
}

.identification-disabled-step-button:link, .identification-disabled-step-button:hover, .identification-disabled-step-button:visited {
  color: #fff;
  text-decoration: none
}

.identification-disabled-step-button:active {
  top: 0
}

.identification-disabled-step-button>div {
  color: #FFCCCC
}

.identification-finished-step-button {
  color: #B8B8B8;
  background-color: #F0F0F0
}

.identification-finished-step-button:link, .identification-finished-step-button:hover, .identification-finished-step-button:visited {
  color: #B8B8B8;
  text-decoration: none
}

.identification-finished-step-button:active {
  top: 0
}

.identification-finished-step-button>div {
  color: #fff
}

.identification-contact-button {
  height: 50px;
  font-size: 15px
}

.identification-contact-button:link, .identification-contact-button:hover, .identification-contact-button:visited {
  color: #fff
}

.identification-contact-button:active {
  color: #fff
}

.japhic {
  height: 90px
}

.require-identification-dialog .dialog_title {
  margin-top: 15px
}

.identification-step {
  position: absolute;
  top: 12px;
  left: 10px;
  color: #606060;
  background-color: rgba(255, 255, 255, 0.8);
  height: 25px;
  width: 70px;
  line-height: 2;
  border-radius: 15px
}

.identification-step_finish {
  position: absolute;
  top: 14px;
  left: 10px;
  color: #fff;
  background-color: #B8B8B8;
  height: 25px;
  width: 70px;
  line-height: 2;
  border-radius: 15px
}

.dots-arrow {
  width: 20px;
  margin: auto;
  line-height: 0.7
}

.identification-photo {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0
}

.identification.is-edited {
  display: none
}

.identification-birthday {
  position: relative;
  border-bottom: solid 1px #f1f1f1;
  padding-bottom: 20px
}

.identification-birthday>div {
  float: right
}

.identification-birthday>div select {
  position: relative;
  padding-right: 20px;
  background-position: right center;
  direction: rtl;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  vertical-align: middle;
  top: -2px
}

.identification-birthday>div select option {
  direction: ltr
}

.identification-birthday>div select::-ms-expand {
  display: none
}



.identification-masking-note {
  color: rgba(0, 0, 0, 0.87);
  margin-top: 40px
}

.identification-masking-note_header {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px
}

.mynumber-caption-note {
  position: absolute;
  top: 11px;
  right: 15px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mynumber-caption-note {
    top: 30px;
    right: 30px
  }
}

.age-confirm_bg.is-daigo {
  position: relative;
  padding-top: 10px;
  background-image: url(//cdn.with.is/assets/age_confirm/daigo_bg-5ffee09d4418fba3783e1eaf48b58862f29aa92b0213fd4a187ae661db19840a.png);
  background-repeat: no-repeat;
  background-size: 100% 100%
}

.age-confirm_daigo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 588px;
  height: auto
}

.age-confirm_bg.is-girl {
  height: 480px;
  position: relative;
  background-image: url(//cdn.with.is/assets/age_confirm/girl_bg-4c0309eca111ddc399b189afa53b1d7dfd5ff7c6794355d02b2527c2a81c1d19.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: top center
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .age-confirm_bg.is-girl {
    height: 460px;
    background-position: -210px 0
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .age-confirm_bg.is-girl {
    height: 420px;
    background-position: -190px 0
  }
}

.age-confirm_logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 50px;
  background-image: url(//cdn.with.is/assets/age_confirm/with_logo-c87692e280e8dfed70939b5018a57b42b5a03ea5695469a4580284284d694165.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.age-confirm_daigo-circle {
  position: absolute;
  top: 15px;
  right: 10px;
  width: auto;
  line-height: 16px;
  color: #a35a3d;
  text-align: center
}

.age-confirm_daigo-circle>img {
  display: block;
  margin: 0 auto 10px;
  width: 50px;
  height: 50px
}

.age-confirm_submit-area {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px 15px 0;
  width: 100%;
  height: 195px;
  background-color: rgba(254, 105, 112, 0.75)
}

.age-confirm_copy {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
  width: 235px;
  height: 50px;
  background-image: url(//cdn.with.is/assets/age_confirm/with_copy-2c6c329cc1eb45a37b247feb32a57930c576d820f63924a79b90605ab8733ac9.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.age-confirm_submit {
  display: block;
  position: relative;
  margin-bottom: 6px;
  width: 100%;
  height: 10px;
  border-style: solid;
  border-width: 35px 35px 37px;
  -webkit-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg-7630652298803de8bad49790b29f214e7f3a6bbeda6ea5a43e37d64d4a35d467.png) 70 69 72 69 round;
  -o-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg-7630652298803de8bad49790b29f214e7f3a6bbeda6ea5a43e37d64d4a35d467.png) 70 69 72 69 round;
  border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg-7630652298803de8bad49790b29f214e7f3a6bbeda6ea5a43e37d64d4a35d467.png) 70 69 72 69 round
}

.age-confirm_submit:hover {
  opacity: 1 !important;
  -webkit-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg_hover-483df37952d49f12f5a7739a0862401e0d99cf0e6fa8b10133d696986977e011.png) 70 69 72 69 round;
  -o-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg_hover-483df37952d49f12f5a7739a0862401e0d99cf0e6fa8b10133d696986977e011.png) 70 69 72 69 round;
  border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg_hover-483df37952d49f12f5a7739a0862401e0d99cf0e6fa8b10133d696986977e011.png) 70 69 72 69 round
}

.age-confirm_submit:active {
  opacity: 1 !important;
  -webkit-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg_active-a15456d056861d02d8aefc347cea476dd52f602fa81bc865f3ea309eae8a49fd.png) 70 69 72 69 round;
  -o-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg_active-a15456d056861d02d8aefc347cea476dd52f602fa81bc865f3ea309eae8a49fd.png) 70 69 72 69 round;
  border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg_active-a15456d056861d02d8aefc347cea476dd52f602fa81bc865f3ea309eae8a49fd.png) 70 69 72 69 round
}

.age-confirm_submit:visited {
  -webkit-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg-7630652298803de8bad49790b29f214e7f3a6bbeda6ea5a43e37d64d4a35d467.png) 70 69 72 69 round;
  -o-border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg-7630652298803de8bad49790b29f214e7f3a6bbeda6ea5a43e37d64d4a35d467.png) 70 69 72 69 round;
  border-image: url(//cdn.with.is/assets/age_confirm/btn_border_bg-7630652298803de8bad49790b29f214e7f3a6bbeda6ea5a43e37d64d4a35d467.png) 70 69 72 69 round
}

.age-confirm_submit_txt {
  position: absolute;
  top: -11px;
  left: 0;
  right: 0;
  margin: auto;
  width: 220px;
  height: 21px
}

.age-confirm_under-18 {
  color: #fff;
  text-decoration: none
}

.age-confirm_under-18:link, .age-confirm_under-18:visited {
  color: #fff;
  text-decoration: none
}

.appeal-vip-option-for-you_dialog {
  background-image: url(//cdn.with.is/assets/dialogs/appeal_vip_option_for_you/bg-2f8dfcd6830df08fb34767ee635e21e973f18a5af82ba217f0726a8ac7903443.png);
  background-size: cover
}

.appeal-vip-option-for-you_illust {
  padding: 5px 0;
  margin-bottom: 15px
}

.appeal-vip-option-like-filter_dialog-title {
  margin-bottom: 0
}

.appeal-vip-option-like-filter_illust {
  margin-bottom: 20px
}

#back-to-top {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  position: absolute;
  bottom: 88px;
  right: 20px;
  z-index: 20
}

#back-to-top:active {
  opacity: 0.8
}

#back-to-top>img {
  width: 42px;
  height: 42px
}

.timer-banner>a {
  display: block;
  position: relative
}

.timer-banner .timer-area {
  position: absolute;
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 27%;
  bottom: 0;
  text-align: center;
  color: #fff;
  border-top: 1px solid #d8d8d8
}

.timer-banner .timer-text {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  align-content: center;
  -webkit-box-pack: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  font-size: 12px
}

.timer-banner .timer-text>span {
  line-height: 1em
}

.timer-banner .timer-text>span:not(.timer-title-text) {
  letter-spacing: 0.1em
}

.timer-banner .timer-text>span.timer-end-text {
  font-size: 1.3em;
  line-height: 1.3em
}

.timer-banner .timer-title-text {
  flex-basis: 100%;
  font-size: 1em;
  margin-bottom: 3px
}

.timer-banner .timer-text-day {
  font-size: 2.4em;
  font-weight: bold
}

.timer-banner .timer-text-day-unit {
  align-self: flex-end;
  font-size: 1em;
  margin-bottom: 0.2em
}

.timer-banner .timer-text-time {
  font-size: 2em;
  font-weight: 300
}

.timer-banner .timer-text-time-unit {
  font-size: 1em
}

.banner-point-refund-remaining-time {
  position: absolute;
  bottom: 10px;
  width: 300px;
  height: 18px;
  z-index: 1;
  color: #fff;
  border-radius: 0 0 12px 12px;
  text-align: center
}

.button-like, .button-primary {
  color: #fff;
  background-color: #606060;
}

.button-like:link, .button-like:visited, .button-primary:link, .button-primary:visited {
  color: #fff
}

.button-like:hover, .button-like:active, .button-primary:hover, .button-primary:active {
  color: #fff
}

.button-primary_invert {
  color: #606060;
  background-color: #fff
}

.button-primary_invert:link, .button-primary_invert:visited, .button-primary_invert:hover, .button-primary_invert:active {
  color: #606060
}

.button-thank {
  color: #fff;
  background-color: #2cc4cb
}

.button-thank:link, .button-thank:visited {
  color: #fff
}

.button-thank:hover, .button-thank:active {
  color: #fff
}

.button-sent-like.with-message.is-theme-grid {
  font-size: 11px;
  line-height: 1
}

.button-gray {
  color: #fff;
  background-color: #999999
}

.button-gray:link, .button-gray:visited {
  color: #fff
}

.button-gray:hover, .button-gray:active {
  color: #fff
}

.button-vip {
  color: #fff;
  background-color: #C8944E
}

.button-vip:link, .button-vip:visited {
  color: #fff
}

.button-vip:hover, .button-vip:active {
  color: #fff
}

.button-vip_invert {
  color: #C8944E;
  background-color: #fff
}

.button-vip_invert:link, .button-vip_invert:visited {
  color: #C8944E
}

.button-vip_invert:hover, .button-vip_invert:active {
  color: #C8944E
}

.button-white {
  color: #757575;
  background-color: #fff
}

.button-white:link, .button-white:visited {
  color: #757575
}

.button-white:hover, .button-white:active {
  color: #757575
}

.button-fb {
  color: #fff;
  background: #0e73ad
}

.button-fb:link, .button-fb:visited, .button-fb:hover, .button-fb:active {
  color: #fff
}

.button-error {
  color: #fff;
  background: #d50000
}

.button-error:link, .button-error:visited, .button-error:hover, .button-error:active {
  color: #fff
}

.button-disabled {
  color: #B8B8B8;
  background: #f5f5f5;
  cursor: initial
}

.button-disabled:link, .button-disabled:visited, .button-disabled:hover, .button-disabled:active {
  color: #B8B8B8;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  pointer-events: none
}

.button-disabled:link:after, .button-disabled:visited:after, .button-disabled:hover:after, .button-disabled:active:after {
  content: none
}

.button-christmas {
  color: #FFE7A7;
  background-color: #D32D26
}

.button-christmas:link, .button-christmas:visited {
  color: #FFE7A7
}

.button-christmas:hover, .button-christmas:active {
  color: #FFE7A7
}

.button-fb-exchange {
  color: #fff;
  background: #0e73ad
}

.button-fb-exchange:link, .button-fb-exchange:visited, .button-fb-exchange:hover, .button-fb-exchange:active {
  color: #fff
}

.button-fb-exchange input {
  width: 100%;
  background-color: transparent
}

.list-view-button {
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  font-size: 12px;
  line-height: 2.7;
  text-align: center;
  letter-spacing: -1px;
  border: none;
  border-radius: 16px;
  cursor: pointer
}

.list-view-button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  pointer-events: none
}

.list-view-button:hover:after, .list-view-button:active:after {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s
}

.list-view-button.is-disabled {
  cursor: initial;
  pointer-events: none
}

.list-view-button.is-disabled:hover:after, .list-view-button.is-disabled:active:after {
  content: none
}

.icon-like, .icon-thank {
  position: absolute;
  left: 20px;
  top: 17px;
  width: 20px
}

.icon-like {
  height: 22px;
  width: 18px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/like-7c9ae049784748327a7dc3536a4928e5970f38d9f8921e3e487acdc31e3610a2.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.icon-talk {
  position: absolute;
  left: 20px;
  top: 12px;
  width: 30px
}

.icon-message {
  position: absolute;
  left: 20px;
  top: 6px;
  width: 22px
}

.icon-free-like {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 28px;
  height: 28px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/like_free-0bc620f5d5bbec5860b2b8ebdf6cd718fc4f05c37e7e34c584dd17ddfc53ae4a.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.icon-free-message {
  position: absolute;
  left: 20px;
  top: 6px;
  width: 26px
}

.like-message_button_container {
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  -webkit-box-align: center;
  align-items: center;
  pointer-events: none
}

.icon-message_prefer-like-message {
  width: 25px;
  margin-left: 14px
}

.icon-free-message_prefer-like-message {
  width: 21px;
  margin-left: 12px;
  margin-bottom: 3px
}

.like-text_prefer-like-message {
  margin: 0 auto;
  letter-spacing: 0
}

a.button-motesha {
  line-height: 40px;
  color: #00D0A5;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #00D0A5;
  background-color: #fff
}

a.button-motesha:link, a.button-motesha:visited, a.button-motesha:hover, a.button-motesha:active {
  color: #00D0A5
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  a.button-motesha {
    font-size: 13px
  }
}

.sort-dialog-button {
  height: 36px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  background-color: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: -webkit-box;
  display: flex
}

.sort-dialog-button:active {
  background-color: #d9d9d9
}

.sort-dialog-button.is-active {
  background-color: #fce6e8;
  color: #606060;
  border-color: rgba(254, 105, 112, 0.3)
}

.sort-dialog-button>span {
  margin: 0 5px;
  line-height: 30px
}

.sort-dialog-button>span.selected-mark {
  width: 16px;
  height: 14px;
  margin-top: 8px;
  background-image: url(//cdn.with.is/assets/shared/sort-selected-mark-8a7379d069ba8d854c9dc8406eb45d4649ac200f8ad675d50b4645025d248d75.png);
  background-size: 16px 14px;
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-left: auto
}

.sort-dialog-button .vip-tag {
  margin: 7px 0 0 5px
}

.grid-like-button .list-view-button, .grid-like-button-white .list-view-button {
  font-size: 14px;
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-weight: bold
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .grid-like-button .list-view-button, .grid-like-button-white .list-view-button {
    font-size: 12px
  }
}

.grid-like-button .icon-thank, .grid-like-button-white .icon-thank {
  display: none
}

.grid-like-button .icon-like, .grid-like-button .icon-free-like, .grid-like-button-white .icon-like, .grid-like-button-white .icon-free-like {
  width: 20px;
  height: 18px;
  position: inherit;
  display: inline-block;
  margin-right: 5px;
  vertical-align: text-top
}

.grid-like-button-white .list-view-button {
  border: 1px solid rgba(0, 0, 0, 0.1)
}

.grid-like-button-white .list-view-button.is-disabled {
  border: none
}

.grid-like-button-white .button-like-action {
  background: #fff;
  color: #606060
}

.grid-like-button-white .button-thank {
  color: #2cc4cb
}

.grid-like-button-white .icon-like {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/like_primary-6934daf1e0863bcf5fabcd036306771b0b2fec4a9d18f80ee4395d41c6b9af1e.svg)
}

.grid-like-button-white .icon-free-like {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/like_free_primary-55c0ee624335f725b8125f5e2f2b7daff7a0b695056c5e5bc88c5b5a4eee05c7.svg)
}

.campaign-list_today-matching {
  position: fixed;
  top: 50px;
  padding: 3px 0;
  width: 100%;
  max-width: 700px;
  line-height: 19px;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  z-index: 10
}

.campaign-list_daigo-advice {
  position: relative;
  height: 100px;
  background-image: url(//cdn.with.is/assets/campaigns/common/daigo_advice_bg-64e86fd2ffaa65eae02a87760ec6ed6f533db6e326281ffa1f3f6e5903331bae.jpg);
  background-repeat: no-repeat;
  background-size: 100%
}

.campaign-list_daigo-advice_contents {
  font-size: 12px;
  padding: 10px var(--outer-space)
}

.introduction-loading {
  position: absolute;
  top: 30%;
  width: 100%;
  color: #fff;
  font-size: 15px;
  text-align: center
}

.campaign-list_daigo-advice_comment {
  margin-bottom: 5px;
  line-height: 15px
}

.campaign-list_daigo-advice_progress {
  position: relative;
  width: 80%;
  background-color: #b8b8b8;
  border-radius: 15px
}

.campaign-list_daigo-advice_progress .progress-bar {
  background: transparent
}

.campaign-list_daigo-advice_progress .progress-bar div {
  background-color: #606060;
  -webkit-animation: progress-bar 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards;
  animation: progress-bar 2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards
}

.progress-balloon {
  position: absolute;
  top: -6px;
  right: -55px;
  width: 45px;
  height: 18px;
  color: #fff;
  text-align: center;
  background-color: #606060;
  border-radius: 5px
}

.progress-balloon:after {
  content: '';
  position: absolute;
  top: 4px;
  left: -5%;
  border-top: 10px solid transparent;
  border-left: 10px solid #606060;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.campaign-list_daigo-advice_notice {
  margin-top: 5px;
  font-size: 10px
}

.campaign-list_daigo-advice_participants-count {
  margin-top: 5px;
  font-weight: bold
}

.campaign-list_daigo-advice_participants-count img {
  margin-top: -2px;
  width: 14px
}

.campaign-list_heading {
  padding-left: 10px;
  height: 45px;
  line-height: 45px;
  color: #606060;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid #ececeb
}

.campaign-list_limited-icon {
  margin: -3px 7px 0 0;
  width: 22px;
  height: 23px
}

.campaign-list_term {
  margin-left: 5px;
  padding: 3px 10px;
  color: #fff;
  font-size: 13px;
  font-weight: normal;
  background-color: #606060;
  border-radius: 10px
}

.campaign-list_contents {
  padding: 10px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px
}

.campaign-list_contents_frame {
  position: relative;
  display: block
}

.campaign-list_contents_banner {
  width: 100%;
  border-radius: 10px
}

.campaign-list_contents_participants {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 0 10px;
  font-size: 10px;
  color: #606060;
  background-color: #fff;
  border-radius: 10px
}

.campaign-list_participating-icon {
  position: absolute;
  top: -4%;
  right: 1%;
  width: 16%
}

.campaign-list_10like-free-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 60px;
  height: 60px
}

.campaign-list_end-at {
  font-size: 12px;
  background-color: #606060;
  color: #fff;
  line-height: 12px;
  display: inline-block;
  padding: 4px 7px;
  border-radius: 35px;
  vertical-align: text-top
}

.campaign-detail_banner-frame {
  position: relative
}

.campaign-detail_banner {
  width: 100%
}

.campaign-detail_subtitle {
  padding: 20px 0 10px 20px;
  line-height: 15px;
  color: #606060;
  font-size: 15px;
  font-weight: bold
}

.campaign-detail_name {
  padding: 0 20px 10px;
  color: #000;
  line-height: 25px;
  font-size: 18px;
  font-weight: bold
}

.campaign-detail_desc {
  padding: 20px;
  color: #4c4c4c;
  font-size: 13px
}

.campaign-detail_heading {
  padding-left: 20px;
  height: 45px;
  line-height: 45px;
  color: #606060;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid #ececeb
}

.campaign-detail_list {
  padding: 0 20px
}

.campaign-detail_user-type {
  position: relative;
  padding: 20px 0
}

.campaign-detail_user-type+.campaign-detail_user-type {
  border-top: 1px solid #ececeb
}

.campaign-detail_user-type_thumb {
  position: relative;
  width: 100%
}

.campaign-detail_user-type_thumb img {
  width: 50px;
  border-radius: 25px
}

.campaign-detail_user-type_content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50px;
  margin: auto;
  padding-left: 10px;
  height: 40px
}

.campaign-detail_user-type_desc {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px
}

.campaign-detail_user-type_name {
  color: rgba(0, 0, 0, 0.6);
  font-size: 15px;
  font-weight: bold
}

.campaign-detail_user-type_count {
  position: absolute;
  right: 0;
  bottom: 10px;
  color: #999999;
  font-size: 12px
}

.campaign-detail_user-type_good-match {
  position: absolute;
  right: 20px;
  bottom: 30px
}

.campaign-detail_user-type_good-match img {
  width: 70px
}

.campaign-detail_diagnose {
  position: fixed;
  bottom: 20px;
  bottom: calc(20px + constant(safe-area-inset-bottom));
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 700px
}

.campaign-detail_diagnose a {
  margin: 0 auto;
  display: block;
  width: 95%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  line-height: 2.8;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: rgba(255, 25, 25, 0.8);
  border-radius: 10px;
  cursor: pointer
}

.join-event_match-image {
  width: 100%;
  border-radius: 15px 15px 0 0
}

.join-event_contents {
  padding: 20px
}

.campaign-room {
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px
}

.body-campaign-room .footer_copyright {
  display: none
}

.diagnostic-result {
  position: relative
}

.diagnostic-result_choices {
  display: -webkit-box;
  display: flex;
  padding: 0 10px
}

.diagnostic-result_user-type {
  color: #fff;
  font-weight: bold;
  font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif
}

.diagnostic-result_user-type-desc {
  font-size: 4.0625vw;
  margin: 0 3% 0
}

@media only screen and (min-width: 700px) {
  .diagnostic-result_user-type-desc {
    font-size: 28px
  }
}

.diagnostic-result_user-type-name {
  font-size: 8.125vw;
  margin: 0 3% 20px
}

@media only screen and (min-width: 700px) {
  .diagnostic-result_user-type-name {
    font-size: 56px
  }
}

.diagnostic-result.is-choice1 .diagnostic-result_user-type-name {
  margin-bottom: 15px
}

.diagnostic-result_detail-result-button:after {
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  content: '';
  display: inline-block;
  width: 8px;
  height: 14px;
  vertical-align: middle;
  background: url(//cdn.with.is/assets/campaigns/icon_arrow-2686e899f03480e252fc34dd0b2f2c059d55a939d32ef21aaa4e8635aeb3da7d.svg);
  background-size: 8px 14px
}

.diagnostic-result_content {
  padding-top: 23%;
  position: relative
}

.diagnostic-result_gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 68.75vw;
  max-height: 482px
}

.diagnostic-result_choice1 {
  display: -webkit-box;
  display: flex;
  margin: 0
}

.diagnostic-result_choice1-image .choice-image {
  width: 20.3125vw;
  max-width: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8)
}

.diagnostic-result_choice1-desc {
  margin-left: 15px;
  color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif
}

.diagnostic-result_choice1-caption {
  font-size: 3.125vw
}

@media only screen and (min-width: 700px) {
  .diagnostic-result_choice1-caption {
    font-size: 18px
  }
}

.diagnostic-result_choice1-answer {
  font-weight: bold;
  font-size: 15px
}

.campaign-room_empty {
  position: relative;
  color: #fff;
  padding: 20px 15px;
  overflow: hidden
}

.diagnostic-result_detail-result-button {
  position: relative;
  border-radius: 80px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  height: 45px;
  line-height: 45px;
  display: block;
  margin: 10px 10px 0
}

.diagnostic-result_detail-result-button:link, .diagnostic-result_detail-result-button:visited, .diagnostic-result_detail-result-button:active {
  color: #fff;
  text-decoration: none
}

.diagnostic-result_border {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  margin: 20px 10px 0
}

.campaign-room .free-like-banner {
  position: relative;
  padding: 20px 10px 10px
}

.diagnostic-result_title {
  margin: 5% 0;
  width: 100%
}

.diagnostic-result_body {
  position: absolute;
  bottom: 30%;
  width: 100%
}

.detail-matching_choice1 {
  margin-top: 10px
}

.detail-matching_choice3 {
  position: relative;
  display: -webkit-box;
  display: flex;
  margin: 10px auto 0;
  max-width: 370px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .detail-matching_choice3 .plan-scene-balloon {
    width: 75px
  }
}

.selected-date-plan {
  float: left;
  width: 33%
}

.selected-date-plan .plan-scene {
  position: relative;
  width: 100%;
  text-align: center
}

.selected-date-plan .plan-scene>span {
  position: absolute;
  top: 13%;
  left: 0;
  width: 100%;
  height: 13px;
  font-weight: bold
}

.selected-date-plan .plan-image {
  position: relative
}

.selected-date-plan .plan-image .plan-image-wrapper {
  background-color: black;
  margin: 10px auto;
  width: 80%;
  border: 3px solid #fff;
  border-radius: 50%
}

.selected-date-plan .plan-image .plan-image-wrapper>img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  width: 100%;
  border-radius: 50%
}

.selected-date-plan .plan-name {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 0 20px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .selected-date-plan .plan-name {
    padding: 0 10px
  }
}

.selected-date-plan .plan-snap-decision {
  position: absolute;
  top: 0;
  right: 15px;
  width: 25%;
  height: 100%;
  background-image: url(//cdn.with.is/assets/campaigns/common/icn_w-4ac8fabb7bc60b3bc01c12f2c0bf0c4c5e1bfa942545910865737e757b580962.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.plan-scene-balloon {
  width: 100px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .selected-date-plan .plan-scene>img {
    width: 90px
  }
}

.date-plan-banner {
  position: absolute;
  bottom: 0;
  display: block;
  margin: 0 auto;
  padding: 20px;
  width: 100%
}

.check-detail-banner {
  bottom: 3%;
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: 100%
}

.btn-reverse-type.is-oval, .btn-reverse-type.is-square {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  background-image: url(//cdn.with.is/assets/campaigns/common/icn_wedge-4001aa303d1e4bf31b67fe5d2f232558d6e90202b1350ea0f01c3e93cf95ee73.png);
  background-size: 8px 12px;
  background-position: 95%;
  background-repeat: no-repeat
}

.btn-reverse-type.is-oval {
  height: 45px;
  line-height: 45px;
  border-radius: 23px
}

.btn-reverse-type.is-oval.has-same-color {
  background-color: #e4c093
}

.btn-reverse-type.is-oval.has-reverse-color {
  background-color: #e4c093
}

.btn-reverse-type.is-square {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 60px;
  line-height: 60px;
  opacity: 0
}

.btn-reverse-type.is-square.has-same-color {
  background-color: rgba(228, 192, 147, 0.7)
}

.btn-reverse-type.is-square.has-reverse-color {
  background-color: rgba(228, 192, 147, 0.7)
}

.btn-reverse-type.is-square.is-visible {
  opacity: 1;
  -webkit-transition: opacity 0.5s linear 0.1s;
  transition: opacity 0.5s linear 0.1s
}

.campaign_same-choice-line {
  position: relative;
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: rgba(142, 160, 217, 0.9)
}

.campaign_same-choice {
  position: absolute;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  background-color: rgba(142, 160, 217, 0.9)
}

.user-detail-campaign {
  display: block
}

.free-like-banner {
  display: block
}

.free-like-banner+.user-detail-campaign {
  margin-top: 5px
}

.detail-campaign-bg {
  position: relative;
  display: block;
  border-radius: 10px;
  min-height: 150px;
  max-height: 350px;
  height: auto
}

.detail-campaign-bg.is-empty {
  height: auto;
  max-height: 275px
}

.detail-campaign-bg.is-choice3 {
  height: auto;
  max-height: 275px
}

.detail-campaign-bg:link, .detail-campaign-bg:visited, .detail-campaign-bg:hover, .detail-campaign-bg:active {
  text-decoration: none
}

.detail-campaign-user-type {
  position: relative;
  padding: 10px;
  width: 100%;
  font-weight: bold;
  color: #fff;
  font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif
}

.detail-campaign-user-type_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  opacity: 0.3
}

.detail-campaign-bg.is-choice3 .detail-campaign-user-type_bg {
  background-position: top
}

.detail-campaign-user-type_thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(3px) opacity(0.25);
  filter: blur(3px) opacity(0.25);
  border-radius: 10px
}

.detail-campaign-user-type-title {
  margin-bottom: 15px;
  font-size: 12px
}

.detail-campaign-user-type-title img {
  margin-right: 7px;
  width: 30px;
  border-radius: 7.5px
}

.detail-campaign-user-type-desc {
  font-size: 11px
}

@media only screen and (min-width: 700px) {
  .detail-campaign-user-type-desc {
    font-size: 13px
  }
}

.detail-campaign-user-type-name {
  font-size: 24px
}

@media only screen and (min-width: 700px) {
  .detail-campaign-user-type-name {
    font-size: 26px
  }
}

.detail-campaign_no-join_limited {
  clear: both;
  margin-top: 15px;
  font-size: 12px;
  text-align: center
}

@media only screen and (min-width: 700px) {
  .detail-campaign_no-join_limited {
    font-size: 14px
  }
}

.perfect-partner {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 42px;
  min-width: 42px
}

.profile-event_no-join_balloon {
  padding: 15px 15px 0
}

.profile-event_user-type {
  margin-left: -7.5px;
  margin-right: -7.5px;
  width: auto;
  overflow: hidden;
  *zoom: 1
}

.profile-event_user-type_frame {
  position: relative;
  margin-bottom: 15px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  width: 50%;
  float: left;
  padding: 0 7.5px
}

.profile-event_user-type_contents {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 150px;
  border-radius: 10px
}

.profile-event_user-type_bg {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 120%;
  background-repeat: no-repeat;
  border-radius: 10px;
  opacity: 0.1
}

.profile-event_user-type_main {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  padding: 10px;
  color: #fff
}

.profile-event_user-type_thumb {
  display: block;
  width: 30px;
  border-radius: 7.5px
}

.profile-event_user-type_headline {
  display: inline-block;
  margin-top: 5px;
  height: 15px;
  color: #fff;
  font-size: 11px;
  letter-spacing: -1px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-event_user-type_headline {
    font-size: 10px
  }
}

.profile-event_user-type_character, .profile-event_no-join_headline {
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3em
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-event_user-type_character, .profile-event_no-join_headline {
    font-size: 10px
  }
}

.profile-event_no-join_headline {
  margin-top: 34px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-event_no-join_headline {
    margin-top: 30px
  }
}

.profile-event_user-type_good-match {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60%;
  max-width: 90px
}

.profile-event_no-join_frame {
  display: block
}

.profile-event_no-join_frame:link, .profile-event_no-join_frame:visited, .profile-event_no-join_frame:hover, .profile-event_no-join_frame:active {
  text-decoration: none
}

.detail-campaign-bg+.profile-event_user-type {
  margin-top: 20px
}

.profile-event_no-join_frame+.profile-event_user-type {
  margin-top: 20px
}

.profile-event_no-join_bg {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 150px;
  border-radius: 10px;
  opacity: 0.8
}

.profile-event_no-join_gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
  border: 3px #f81e27 solid;
  border-radius: 10px
}

.profile-event_no-join_thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(3px) opacity(0.25);
  filter: blur(3px) opacity(0.25);
  border-radius: 10px
}

.profile-event_no-join_content {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  color: #fff;
  text-align: center;
  border: 3px solid #f81e27;
  border-radius: 10px
}

.profile-event_no-join_permanent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 7px
}

.profile-event_no-join_submit {
  position: relative;
  margin: 10px auto 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 25px
}

.profile-event_no-join_submit.is-limited {
  width: 62%
}

.profile-event_no-join_submit svg {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-event_no-join_submit {
    margin: 5px auto 0;
    height: 30px;
    line-height: 30px;
    font-size: 13px
  }

  .profile-event_no-join_submit svg {
    top: 5px;
    left: 8px
  }
}

.profile-event_participating-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50%;
  max-width: 80px
}

.profile-event_no-join_free-like {
  margin: 7px auto 0;
  display: block;
  width: 50%;
  max-width: 156px
}

.dateplan-overlay, .dateplan-overlay>.is-iphone, .dateplan-overlay>.is-android {
  visibility: hidden
}

.is-visible.dateplan-overlay, .dateplan-overlay>.is-visible.is-iphone, .dateplan-overlay>.is-visible.is-android {
  visibility: visible
}

.dateplan-overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  z-index: 30;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff
}

.dateplan-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.dateplan-container_frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-image: url(//cdn.with.is/assets/campaigns/dateplan_201711/start_dialog/frame-8ffbff922ebf5ce40aee0e01472ed35310aa7ea778c662673158b5c1d8d2a143.png) 190 round;
  -o-border-image: url(//cdn.with.is/assets/campaigns/dateplan_201711/start_dialog/frame-8ffbff922ebf5ce40aee0e01472ed35310aa7ea778c662673158b5c1d8d2a143.png) 190 round;
  border-image: url(//cdn.with.is/assets/campaigns/dateplan_201711/start_dialog/frame-8ffbff922ebf5ce40aee0e01472ed35310aa7ea778c662673158b5c1d8d2a143.png) 190 round;
  border-style: solid;
  border-width: 100px
}

.dateplan_close-button {
  position: absolute;
  right: 10px;
  top: 10px
}

.dateplan_close-button>img {
  width: 30px
}

.campaign-cover_accessory {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 30%;
  max-width: 140px;
  text-align: center;
  pointer-events: none
}

.campaign-cover_title {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 78%;
  text-align: center
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .campaign-cover_title {
    height: 85%
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .campaign-cover_title {
    height: 85%
  }
}

.campaign-cover_balloon {
  width: 100%;
  max-width: 420px;
  height: auto
}

.campaign-participants {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #bf0600;
  font-size: 15px;
  line-height: 30px
}

.campaign-participants>span {
  font-size: 18px;
  font-weight: bold
}

.campaign-cover_logo {
  position: absolute;
  top: -35px;
  bottom: 0;
  left: -40px;
  right: 0;
  margin: auto;
  width: 60%;
  max-width: 255px;
  max-height: 205px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .campaign-cover_logo {
    width: 229.5px;
    height: 184.5px
  }
}

.campaign-cover_content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  max-width: 450px;
  height: auto
}

.campaign-cover_submit {
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 285px;
  max-height: 42px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .campaign-cover_submit {
    bottom: 5%;
    max-width: 253.3333333333px;
    max-height: 37.3333333333px
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .campaign-cover_submit {
    bottom: 5%;
    max-width: 253.3333333333px;
    max-height: 37.3333333333px
  }
}

.campaign-cover_content_img {
  width: 100%;
  height: auto;
  max-width: 720px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .campaign-cover_content_img {
    width: 90%
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .campaign-cover_content_img {
    width: 90%
  }
}

.campaign-cover_title_img {
  position: absolute;
  margin: auto;
  top: 9%;
  left: 0;
  right: 0;
  width: 80%;
  max-width: 600px;
  height: auto
}

.campaign-cover_start {
  width: 100%;
  text-align: center
}

.campaign-cover_start_button {
  display: block;
  margin: 5px auto 5px auto;
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #bf0600;
  border-radius: 23px;
  opacity: 0;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-name: start-button;
  animation-name: start-button;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.campaign-cover_start_button:link, .campaign-cover_start_button:active, .campaign-cover_start_button:visited {
  color: #fff;
  text-decoration: none
}

.campaign-cover_disappear {
  margin-top: 15px;
  width: 100%;
  color: #fff;
  text-align: center
}

.campaign-cover_disappear_button:link, .campaign-cover_disappear_button:active, .campaign-cover_disappear_button:visited {
  color: #fff
}

.camp-mark_caption {
  width: 100%;
  height: 50px;
  padding: 7px 0;
  background-color: #606060
}

.camp-mark_sample {
  margin: 0 auto;
  width: 240px;
  color: #fff
}

.camp-mark_sample:before {
  content: '';
  display: block;
  float: left;
  margin-right: 10px;
  width: 35px;
  height: 35px;
  background-image: url(//cdn.with.is/assets/campaigns/common/icn_w_sample-1d2e3a33b96dfc1f7fc0c9e548683eba856189d85585a46167037409184a305a.png);
  background-repeat: no-repeat;
  background-size: 100%
}

#reverse_show_tutorial0, #reverse_show_tutorial1 {
  background-color: transparent
}

.cafe-header {
  position: relative
}

.cafe-header_text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  width: 100%;
  color: #fff;
  font-size: 13px;
  background-color: rgba(93, 41, 21, 0.5);
  border-bottom: 1px solid #5d2915
}

.cafe-title {
  padding: 10px 0;
  width: 100%;
  color: #5d2915;
  font-size: 20px;
  text-align: center;
  background-color: #fff;
  border-bottom: 2px solid #5d2915
}

.cafe-text {
  position: relative;
  padding: 20px 20px 0;
  width: 100%;
  color: #5d2915;
  font-size: 13px
}

.cafe-text.is-narrow {
  width: 75%
}

.cafe-text_img {
  position: absolute;
  width: 108px;
  bottom: -20px;
  right: -100px
}

.cafe-info {
  padding: 20px;
  margin-left: -5px;
  margin-right: -5px;
  overflow: hidden
}

.cafe-info_button_box {
  float: left;
  padding: 0 5px;
  width: 50%
}

.cafe-info_button {
  display: block;
  padding: 10px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #5d2915;
  border-radius: 20px
}

.cafe-info_button:link, .cafe-info_button:active, .cafe-info_button:visited {
  color: #fff;
  text-decoration: none
}

.like-message-lp_headline {
  padding: 15px 0;
  font-size: 16px;
  text-align: center
}

.like-message-lp_heading {
  margin: 0 0 25px;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5
}

.like-message-lp_heading>img {
  float: left
}

.like-message-lp_title {
  margin-left: 40px;
  display: block;
  color: #ff636e;
  font-size: 21px;
  line-height: 25px
}

.like-message-lp_illust {
  display: block;
  margin-left: auto;
  margin-right: auto;
  min-width: 280px;
  max-width: 80%
}

.like-message-lp_illust.has-margin {
  margin-top: 25px;
  margin-bottom: 25px
}

.like-message-lp_text {
  padding: 0 20px;
  font-size: 15px;
  color: #555;
  line-height: 20px
}

.like-message-lp_bg {
  width: 100%;
  background-color: #ffdcdc;
  padding: 0 0 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.8)
}

.like-message-lp_step {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8)
}

.like-message-lp_step_no {
  position: absolute;
  top: -10px;
  left: 5%;
  width: 15%
}

.like-message-lp_user-voice {
  margin: 25px 10% 20px;
  padding: 15px;
  background-color: #fef0f0;
  border-radius: 5px
}

.like-message-lp_user-voice>.media_image {
  width: 70px
}

.like-message-lp_user-voice .media_body_title {
  margin-bottom: 15px;
  color: #ff636e;
  font-size: 16px;
  font-weight: bold
}

.like-message-lp_user-voice>.media_body {
  color: #9a9a9a;
  font-size: 12px;
  font-weight: bold
}

.like-message-lp_banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 700px;
  padding: 5px;
  opacity: 0;
  -webkit-animation: banner-hide 0.3s ease-out 0s forwards;
  animation: banner-hide 0.3s ease-out 0s forwards
}

.like-message-lp_banner img {
  border-radius: 10px
}

.like-message-lp_banner.is-visible {
  opacity: 1;
  -webkit-animation: banner-appear 0.3s ease-out 0s forwards;
  animation: banner-appear 0.3s ease-out 0s forwards
}

.like-message-lp_start-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 700px
}

.like-message-lp_start-button a {
  border: 2px white solid;
  box-shadow: 0 2px 6px 3px #d1d1d1
}

.christmas-talk-lp_card1 {
  padding: 0 10px;
  background-image: url(//cdn.with.is/assets/campaigns/common/christmas_talk_lp/content_bg-19f76081066d1e9d9ffe3f6dd6216aac31197fa80c1846d33fea0a1cc3b9964c.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #EE435E
}

.christmas-talk-lp_card2 {
  padding: 10px;
  background-color: #EE435E
}

.christmas-talk-lp_notice {
  padding: 20px;
  background-color: #fff
}

.campaign-talk-event_banner {
  padding: 15px
}

.campaign-talk-event_banner img {
  max-width: 100%;
  border-radius: 10px
}

.good-match-balloon {
  position: relative;
  color: #FF6269;
  background-color: #fff;
  height: 35px;
  width: 90%;
  margin: 10px auto;
  border: 2px solid #FF6873;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  line-height: 2;
  font-weight: 600
}

.good-match-balloon:after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  content: ' ';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #FF6873
}

.messages.camp-talk-event_bg-christmas {
  height: auto;
  min-height: 90vh;
  background-image: url(//cdn.with.is/assets/campaigns/talk_event/christmas/message_bg-e203e20ff8251b71b5661df72f7b8fd224169ff4b77bf9a2e980ea27b5c1ee3a.jpg);
  background-repeat: no-repeat;
  background-position: 0 50px;
  background-size: 100% 100%
}

.messages.camp-talk-event_bg-christmas .message_balloon[data-sender="partner"] {
  background-color: #fff
}

.messages.camp-talk-event_bg-christmas .message_balloon[data-sender="partner"]::after {
  background-image: url(//cdn.with.is/assets/messages/tail_white-3e3a7397ada818bc90f35f6c4aa289598ea0e73df75f9e67e856c0355a36739c.svg)
}

.messages.camp-talk-event_bg-christmas .message_sent-at {
  color: rgba(255, 255, 255, 0.4)
}

@-webkit-keyframes start-button {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 0
  }

  35% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  80% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  89% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }
}

@keyframes start-button {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 0
  }

  35% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  80% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  89% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }
}

@-webkit-keyframes banner-appear {
  0% {
    -webkit-transform: translate(0, 140px);
    transform: translate(0, 140px);
    opacity: 0
  }

  100% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 1
  }
}

@keyframes banner-appear {
  0% {
    -webkit-transform: translate(0, 140px);
    transform: translate(0, 140px);
    opacity: 0
  }

  100% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 1
  }
}

@-webkit-keyframes banner-hide {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 1
  }

  100% {
    -webkit-transform: translate(0, 140px);
    transform: translate(0, 140px);
    opacity: 0
  }
}

@keyframes banner-hide {
  0% {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 1
  }

  100% {
    -webkit-transform: translate(0, 140px);
    transform: translate(0, 140px);
    opacity: 0
  }
}

.messages.camp-talk-event_bg-fireworks {
  position: relative;
  height: auto;
  min-height: 90vh;
  background-color: #2D1368;
  background-image: url(//cdn.with.is/assets/campaigns/talk_event/fireworks/message_bg-15ffb3d3c6ce2c33b310fde27260f2a1b54c34af7bbad0965e8de4c841d59835.jpg);
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat
}

.messages.camp-talk-event_bg-fireworks #fireworks {
  position: absolute;
  margin: auto;
  bottom: 72vw;
  left: 0;
  right: 0;
  width: 500px;
  height: 400px
}

@media only screen and (min-width: 700px) {
  .messages.camp-talk-event_bg-fireworks #fireworks {
    bottom: 36vw
  }
}

.messages.camp-talk-event_bg-fireworks .message_sent-at {
  color: #fff
}

.campaign-tutorial {
  position: relative;
  background: url(//cdn.with.is/assets/campaign_tutorials/tutorial_header_bg-f64c7120234e905f819b3caf3eb6e3aed6432e66d28e33c312d605e9de4606be.png) top center/100% 20% no-repeat
}

.campaign-tutorial-container {
  position: relative;
  margin: auto;
  padding-bottom: 40px
}

.campaign-tutorial_walk-through.slick-slider {
  margin-bottom: 0
}

.campaign-tutorial .cross-button {
  top: 10px;
  right: 10px
}

.slick-dots.campaign-tutorial_slide-dots {
  bottom: -30px
}

.slick-dots.campaign-tutorial_slide-dots li {
  width: 12px
}

.slick-dots.campaign-tutorial_slide-dots li button:before {
  width: 12px;
  font-size: 12px;
  color: #ffdcdc;
  opacity: 1
}

.slick-dots.campaign-tutorial_slide-dots li.slick-active button:before {
  color: #606060
}

.campaign-tutorial .button {
  margin-top: 15px;
  width: 84%;
  height: 45px;
  line-height: 45px
}

.campaign-tutorial_arrow {
  position: absolute;
  width: 30px;
  bottom: 8px
}

.campaign-tutorial_male .campaign-tutorial_arrow {
  left: calc(50% + 60px)
}

.campaign-tutorial_female .campaign-tutorial_arrow {
  left: calc(50% + 70px)
}

.lp-christmas {
  color: #fff;
  background-color: #F4FDFF
}

.lp-christmas_header {
  position: relative
}

.lp-christmas_period {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%
}

.lp-christmas_keywords {
  padding: 0 15px
}

.lp-christmas_notice {
  padding: 0 15px 60px
}

.lp-christmas_notice_heading {
  padding: 30px 0 20px;
  color: #606060;
  font-size: 20px;
  font-weight: bold;
  text-align: center
}

.lp-christmas_notice_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-weight: bold
}

.lp-christmas_notice_text {
  margin-bottom: 40px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px
}

.lp-christmas_link {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 15px;
  width: 100%;
  max-width: 700px;
  background-color: transparent
}

.camp-thumb-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px 10px 0 0
}

.camp-thumb-cover>span {
  position: absolute;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 110px;
  height: 25px;
  line-height: 25px;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 13px
}

.camp-thumb-cover>span img {
  width: 17px;
  height: 17px
}

.camp-thumb-cover.is-matching>span img {
  margin-top: -2px;
  margin-right: -2px
}

.camp-member-badge, .user-card-small.is-group .time-limit-event-member-badge, .user-card-small.is-basic .time-limit-event-member-badge {
  position: relative;
  color: #fff;
  line-height: 1;
  text-align: center;
  background-image: url(//cdn.with.is/assets/campaigns/common/icn_member-b536ee8ce0558dcb7663030f2bc109093a3dfa64afa7b85e89bed6d3771a0322.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.fireworks-lp_header {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top)
}

.fireworks-lp_title {
  padding: 35px 10% 25px;
  background-color: #2E1269
}

.fireworks-lp_footer {
  height: 210vw;
  max-height: 1000px;
  position: relative;
  padding-top: 15px;
  background-color: #2E1269;
  background-image: url(//cdn.with.is/assets/campaigns/lp/fireworks/footer-15ffb3d3c6ce2c33b310fde27260f2a1b54c34af7bbad0965e8de4c841d59835.jpg);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat
}

@media only screen and (min-width: 700px) {
  .fireworks-lp_footer {
    height: 235vw
  }
}

.fireworks-lp_footer_contents {
  padding: 20px;
  width: 100%
}

.fireworks-lp_footer_submit {
  position: fixed;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px;
  max-width: 700px
}

.fireworks-lp_footer_notice {
  color: #fff;
  font-size: 10px
}

.fireworks-lp_footer_notice li {
  margin: 0 0 10px
}

.lp-hajikoi {
  background-color: #e4007f
}

.lp-hajikoi_story {
  margin-bottom: -2px;
  background-color: #f62998
}

.lp-hajikoi_movie {
  padding: 0 20px
}

.lp-hajikoi_movie iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 335px;
  height: 188px
}

.lp-hajikoi_story_text {
  margin-bottom: 25px;
  padding: 20px;
  line-height: 24px;
  color: #fff;
  font-size: 14px
}

.lp-hajikoi_event {
  position: relative;
  margin-top: -2px;
  margin-bottom: -2px;
  background-color: #FF6068
}

.lp-hajikoi_event_like {
  position: absolute;
  top: -12%;
  left: 5%;
  width: 85px;
  height: 85px
}

.lp-hajikoi_event_text {
  padding: 0 20px;
  line-height: 24px;
  color: #fff;
  font-size: 14px;
  font-weight: bold
}

.lp-hajikoi_event_notice {
  margin-bottom: 25px;
  padding: 0 20px;
  color: #fff;
  font-size: 12px
}

.lp-hajikoi_campaign_submit {
  padding: 40px 20px 33px;
  text-align: center
}

.lp-hajikoi_comic {
  padding-top: 35px
}

.lp-hajikoi_link {
  padding: 0 20px 35px;
  text-align: center
}

.lp-hajikoi_footer {
  padding: 35px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.3)
}

.lp-hajikoi_footer_copyright {
  margin-top: 30px;
  color: #fff;
  font-size: 12px;
  text-align: center
}

.lp-hajikoi_submit {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 350px;
  height: 70px;
  line-height: 60px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% auto
}

.lp-hajikoi_submit.is-event {
  color: #FF6068
}

.lp-hajikoi_submit.is-comic {
  color: #e4007f
}

.lp-hajikoi_submit span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  pointer-events: none
}

.lp-ifeelpretty {
  background-color: #F3F3F5
}

.lp-ifeelpretty_heading {
  color: #EA4D6E;
  font-weight: bold
}

.lp-ifeelpretty_text {
  color: rgba(0, 0, 0, 0.87)
}

.lp-ifeelpretty_introduction {
  padding: 20px;
  background-color: #F3F3F5
}

.lp-ifeelpretty_introduction_heading {
  padding: 20px;
  text-align: center
}

.lp-ifeelpretty_introduction_heading img {
  width: 160px
}

.lp-ifeelpretty_photos {
  clear: both;
  height: auto;
  padding-right: 20px
}

.lp-ifeelpretty_photos_left {
  width: 50%
}

.lp-ifeelpretty_photos_right {
  margin-right: -20px;
  float: right;
  width: 50%
}

.lp-ifeelpretty_campaign {
  padding: 20px;
  background-color: #fff
}

.lp-ifeelpretty_submit {
  color: #fff;
  font-weight: bold;
  background-color: #EA4D6E
}

.lp-ifeelpretty_present_title {
  position: relative;
  padding: 20px;
  text-align: center;
  background-color: #EA4D6E
}

.lp-ifeelpretty_present_title img {
  width: 80%;
  max-width: 350px
}

.lp-ifeelpretty_present_title:after {
  content: '';
  position: absolute;
  margin: auto;
  bottom: -10px;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-left: 20px solid #EA4D6E;
  border-bottom: 20px solid #EA4D6E;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.lp-ifeelpretty_present {
  padding: 20px
}

.lp-ifeelpretty_present_contents {
  clear: both;
  height: 260px
}

.lp-ifeelpretty_present_detail {
  float: left;
  width: 50%;
  text-align: center
}

.lp-ifeelpretty_present_detail img {
  margin-bottom: 10px;
  width: 80%;
  max-width: 150px
}

.lp-ifeelpretty_present_detail div {
  font-size: 12px
}

.lp-ifeelpretty_present_desc {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px
}

.lp-ifeelpretty_present_step {
  padding: 0 15px;
  width: 70px;
  height: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  background-color: #EA4D6E;
  border-radius: 10px
}

.lp-ifeelpretty_present_konomi {
  position: absolute;
  top: 20px;
  right: 20px
}

.lp-ifeelpretty_present_limit {
  width: 100%;
  height: 20px;
  color: #fff;
  text-align: center;
  font-size: 13px;
  background-color: #000;
  border-radius: 10px
}

.lp-ifeelpretty_present_agreement label {
  color: rgba(0, 0, 0, 0.87)
}

.lp-ifeelpretty_present_agreement label:before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  border: 1px solid #EA4D6E;
  border-radius: 3px
}

.lp-ifeelpretty_present_agreement>input[type="checkbox"]:checked+label:before {
  background-image: url(//cdn.with.is/assets/shared/icn_checkbox-7c72592e2cee307efe98b4bd7074a55426c4c68201136c121c18300626856bfc.png);
  background-size: 200% 100%;
  background-position: 0 100%
}

#lp-ifeelpretty_entry_present.is-active {
  color: #fff;
  font-weight: bold;
  background-color: #EA4D6E
}

.lp-ifeelpretty_cinema {
  padding: 20px;
  background-color: #fff
}

.lp-ifeelpretty_link {
  padding: 5px
}

.lovedoc-lp_button-large, .lovedoc-lp_start-button, a.lovedoc-lp_button-large, a.lovedoc-lp_start-button {
  font-size: 18px;
  border-radius: 25px;
  height: 45px;
  line-height: 45px
}

.lovedoc-lp_button-large.is-disabled, .is-disabled.lovedoc-lp_start-button, a.lovedoc-lp_button-large.is-disabled, a.is-disabled.lovedoc-lp_start-button {
  background-color: #CECECE;
  color: #fff
}

.lovedoc-lp_button-primary, .lovedoc-lp_start-button {
  background: #FA2F85;
  color: #fff
}

.lovedoc-lp_button-primary:link, .lovedoc-lp_start-button:link, .lovedoc-lp_button-primary:active, .lovedoc-lp_start-button:active, .lovedoc-lp_button-primary:hover, .lovedoc-lp_start-button:hover, .lovedoc-lp_button-primary:visited, .lovedoc-lp_start-button:visited {
  color: #fff
}

.lovedoc-lp_start-button {
  box-shadow: 0 3px 10px 0 rgba(250, 47, 133, 0.6);
  font-weight: 600
}

.lovedoc-lp_section-head-img {
  position: relative;
  z-index: 1
}

.lovedoc-lp_card {
  position: relative;
  z-index: 2;
  margin: -10% 5% 5%;
  border-radius: 5px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff
}

.lovedoc-lp_ul {
  padding-left: 1em;
  text-indent: -1em
}

.lovedoc-lp_ul li:before {
  content: "• ";
  color: #FA2F85
}

.lovedoc-lp_box {
  font-weight: 300;
  padding: 5%
}

.lovedoc-lp_box.has-border {
  border-bottom: 1px solid rgba(251, 53, 137, 0.3)
}

.lovedoc-lp_medicine-icon {
  position: absolute;
  top: -30px;
  width: 100%;
  text-align: center
}

.lovedoc-lp_medicine-icon div {
  display: inline-block;
  background-color: white;
  border-radius: 30px;
  padding: 10px;
  width: 60px;
  height: 60px
}

.lovedoc-lp_text-note {
  font-weight: 600;
  color: #FA2F85
}

.lovedoc-lp_text-note:link, .lovedoc-lp_text-note:active, .lovedoc-lp_text-note:hover, .lovedoc-lp_text-note:visited {
  color: #FA2F85
}

.lovedoc-lp_text-note:link {
  text-decoration: underline
}

.lovedoc-lp_patient {
  width: 90%;
  margin: 0 auto 10px;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  line-height: 22px;
  background: url("//cdn.with.is/assets/campaigns/lp/lovedoc_201804/LD_bg-d8206f63daa34d8bbc85dfcdc8469ca07620b22e858f18eea2813bf98898d3e7.png") right center no-repeat;
  background-size: 32% auto
}

.lovedoc-lp_analytics-bg {
  padding-top: 30px;
  background: url("//cdn.with.is/assets/campaigns/lp/lovedoc_201804/kikagaku_bg-b6095d585ac705c6fcdfde24b60acb3e3a3cd7542ec92c8adba3e8c0cdc278aa.png") no-repeat;
  background-size: 100%
}

.lovedoc-lp_lovecase-chara {
  position: relative;
  z-index: 1
}

.lovedoc-lp_lovecase-text {
  font-weight: 300;
  position: relative;
  z-index: 2;
  color: white;
  margin-top: -10%;
  padding: 10% 5% 5% 5%
}

.lovedoc-lp_lovecase-text.is-case1 {
  background: url("//cdn.with.is/assets/campaigns/lp/lovedoc_201804/lovecase1_bg-9afec5497a05c2d30ac348eb575571da8a6dff319df855facddfe70ffcf09388.svg") no-repeat;
  background-size: 100%
}

.lovedoc-lp_lovecase-text.is-case2 {
  background: url("//cdn.with.is/assets/campaigns/lp/lovedoc_201804/lovecase2_bg-8d6bbe15a19b80dde8796e5fbc2376f50c8dd4e5e4f759744dc92901fb688787.svg") no-repeat;
  background-size: 100%
}

.lovedoc-lp_lovecase-text.is-case3 {
  background: url("//cdn.with.is/assets/campaigns/lp/lovedoc_201804/lovecase3_bg-914f10281e1bca2525f8df7cd4c3f2073bb04f889fe3ba0e08e7cfac49a5a645.svg") no-repeat;
  background-size: 100%
}

.lovedoc-lp_anata-area {
  background: url("//cdn.with.is/assets/campaigns/lp/lovedoc_201804/anata_bg-92e090d48af2acb58436fc5fe08b3a967ba923a2d88ea70760ca4ccd7f063033.jpg") no-repeat;
  background-size: 100%;
  padding: 3%
}

.lovedoc-lp_soudan-head {
  background-image: -webkit-linear-gradient(top, #FF4895 0%, #FA257F 100%);
  background-image: linear-gradient(-180deg, #FF4895 0%, #FA257F 100%);
  text-align: center;
  font-size: 13px;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  padding: 5%
}

.lovedoc-lp_soudan-detail {
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 0 0 5px 5px;
  background-color: white
}

.lovedoc-lp_app-deadline {
  background: url("//cdn.with.is/assets/campaigns/lp/lovedoc_201804/app_deadline-17946920886d9b21fecdca82122d2553f386038b0db85ed784fb4ee509773286.svg") no-repeat center;
  background-size: contain;
  text-align: center;
  color: #fff;
  height: 30px;
  line-height: 30px;
  letter-spacing: 1px
}

.lovedoc-lp_about-preview-dt {
  display: inline-block;
  vertical-align: top
}

.lovedoc-lp_about-preview-dd {
  display: inline-block
}

.lovedoc-lp_checkbox-agree {
  display: none
}

.lovedoc-lp_checkbox-agree-parts {
  padding-left: 20px;
  position: relative;
  margin-right: 20px
}

.lovedoc-lp_checkbox-agree-parts::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px
}

.lovedoc-lp_checkbox-agree:checked+.lovedoc-lp_checkbox-agree-parts::after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  border-bottom: 3px solid #FA2F84;
  border-right: 3px solid #FA2F84
}

.lovedoc-lp_counseling_text {
  font-size: 12px;
  font-weight: 300;
  color: #000000;
  letter-spacing: 0;
  line-height: 21px
}

.lovedoc-lp_counseling_box {
  padding: 3%;
  margin-bottom: 3%;
  background: #F3F3F3;
  border-radius: 5px
}

.lovedoc-lp_counseling_head {
  margin-bottom: 4%
}

.lovedoc-lp_counseling_head span:first-child {
  display: inline-block;
  width: 40%
}

.lovedoc-lp_counseling_head span:nth-child(2) {
  display: inline-block;
  font-size: 15px;
  color: #FA2F85;
  letter-spacing: 0;
  margin-left: 2%
}

.lovedoc-lp_counseling-answer_box {
  padding: 3%;
  margin-bottom: 3%;
  background: rgba(250, 47, 133, 0.08);
  border-radius: 5px
}

.lovedoc-lp_counseling-answer_head {
  margin-bottom: 4%
}

.lovedoc-lp_counseling-answer_head span:first-child {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #FA2F85;
  letter-spacing: 0;
  line-height: 20px;
  width: 58%;
  vertical-align: middle
}

.lovedoc-lp_counseling-answer_head span:nth-child(2) {
  display: inline-block;
  width: 40%
}

.lp-vip-privilege {
  background-color: #fff
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .lp-vip-privilege .size20 {
    font-size: 18px
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .lp-vip-privilege .size18 {
    font-size: 16px
  }
}

.lp-vip-privilege-term {
  background: #606060;
  border-radius: 18px;
  margin: 20px auto;
  text-align: center;
  width: 88%;
  height: 30px;
  line-height: 30px
}

.lp-vip-privilege-steps {
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0 20px 35px
}

.lp-vip-how-to-send-like {
  display: block;
  margin: 35px auto;
  width: 270px
}

.lp-vip-privilege-step {
  display: block;
  margin: 40px auto 0;
  width: 75px
}

.lp-vip-privilege-step-text {
  margin: 15px auto 25px
}

.lp-vip-privilege-about-campaign li {
  margin-bottom: 15px;
  list-style-type: disc;
  margin-left: 1em
}

.lp-vip-privilege-about-vip-footer {
  background: url(//cdn.with.is/assets/campaigns/lp/vip_privilege/about_vip_footer-29e736ed56e1573ad5dd559a651770463b9748c9208428f56f8c6e60cd96dc5c.png) no-repeat center;
  background-size: cover
}

.lp-vip-privilege .vip-option_description-bg {
  vertical-align: middle
}

.confirm-upload-photo_canvas {
  text-align: center;
  margin-bottom: 15px
}

.confirm-upload-photo_canvas canvas {
  display: block;
  max-width: 100%;
  border-radius: 10px
}

.contacts-textarea {
  height: 110px
}

.contract pre {
  white-space: pre-wrap
}

.daigo-lp_header {
  position: relative;
  height: 440px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden
}

.daigo-lp_header.is-male {
  background-image: url(//cdn.with.is/assets/welcome/daigo_male/header_bg-4b2889b1ad8ad5cb892320c2a5e9562c7e2f371d445bd715f4a52d7ce11230b9.jpg)
}

.daigo-lp_header.is-female {
  background-image: url(//cdn.with.is/assets/welcome/daigo_female/header_bg-fe9f50572c0d8a021e6547a022dfac70d8d64d888f70241e9ba299df8793df7e.jpg)
}

.daigo-lp_header_gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 239px
}

.daigo-lp_header_daigo {
  position: absolute;
  top: 0;
  right: 25%;
  width: 77%;
  height: auto;
  min-width: 305px;
  min-height: 446px
}

.daigo-lp_header_title {
  position: absolute;
  top: 5px;
  right: 7%;
  margin: 0
}

.daigo-lp_header_title>img {
  width: 65px;
  height: 31px
}

.daigo-lp_header_iphone {
  position: absolute;
  top: 50px;
  right: 3%;
  width: 20%;
  height: auto;
  min-width: 128px;
  min-height: 244px;
  max-width: 167px;
  max-height: 318px
}

.daigo-lp_header_bottom {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%
}

.daigo-lp_header_copy {
  display: block;
  margin: 0 auto;
  width: 309px
}

.daigo-lp_header_attention {
  display: block;
  margin: 7px auto 0
}

.daigo-lp_mentalism-1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto
}

.daigo-lp_mentalism-1.is-male {
  background-image: url(//cdn.with.is/assets/welcome/daigo_male/mentalism_1_bg-f78dfce6d6aa844523e4e3099c763de5d8607d8e8a610db80e2739366f89974a.jpg)
}

.daigo-lp_mentalism-1.is-female {
  background-image: url(//cdn.with.is/assets/welcome/daigo_female/mentalism_1_bg-375486d02a48fb9af6d2adab81f259b9333df8abc666c80b947e69ce7fa7c23b.jpg)
}

.mentalism-1_top {
  position: relative;
  padding-top: 20px;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center
}

.mentalism-1_top.is-male {
  background-image: url(//cdn.with.is/assets/welcome/daigo_male/mentalism_1_top_bg-f4e6533be17a8e693cb756281adcd88334b4bc5aaa030e80bf79f4dac4fc47d5.jpg);
  background-color: #5eafda
}

.mentalism-1_top.is-female {
  background-image: url(//cdn.with.is/assets/welcome/daigo_female/mentalism_1_top_bg-8732d3daab0c721c4224f21f53792421ca8f067df82198decabdc64ef8d2e060.jpg);
  background-color: #fe686e
}

.daigo-lp_mentalism-1_txt {
  display: block;
  margin: 0 auto;
  width: 80%;
  height: auto
}

.mentalism-1_btm {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left bottom
}

.mentalism-1_btm.is-male {
  background-image: url(//cdn.with.is/assets/welcome/daigo_male/mentalism_1_btm_bg-5d26609a48e5880cc5696f48ef9d3013c58c533dea40eff85cc0221ebedc6360.jpg);
  background-color: #5eafda
}

.mentalism-1_btm.is-female {
  background-image: url(//cdn.with.is/assets/welcome/daigo_female/mentalism_1_btm_bg-e2fc93f9d915c665a2d4d6a27a38ceab62878e85827368d81aab60f9d21ff360.jpg);
  background-color: #fe686e
}

.daigo-lp_mentalism-1_daigo {
  width: 100%;
  height: auto
}

.mentalism-1_title, .mentalism-2_title {
  margin: 0 auto 15px;
  display: block;
  width: 50%
}

.mentalism-1_illust {
  margin: 0 auto -20px;
  display: block;
  width: 87%
}

.mentalism-2_illust {
  margin: 0 auto -60px;
  display: block;
  width: 90%
}

.daigo-lp_mentalism-2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left bottom
}

.daigo-lp_mentalism-2.is-male {
  background-image: url(//cdn.with.is/assets/welcome/daigo_male/mentalism_2_bg-69eb145bb8bfeedb4617d0f0c9a6c310036c26ada41398b70a0d52611f49b205.jpg)
}

.daigo-lp_mentalism-2.is-female {
  background-image: url(//cdn.with.is/assets/welcome/daigo_female/mentalism_2_bg-d2d67e27b68f3da1c94d7b02634878c6313663f0bf5fe513dd9f94062f51d194.jpg)
}

.daigo-lp_footer {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left bottom
}

.daigo-lp_footer.is-male {
  background-image: url(//cdn.with.is/assets/welcome/daigo_male/footer_bg-3b62c25625618dd5d13042550828680eb8083ace476e1065331d0b76f5f0c37b.jpg)
}

.daigo-lp_footer.is-female {
  background-image: url(//cdn.with.is/assets/welcome/daigo_female/footer_bg-536be569ba2fbe85c07be25a6c262a3c216a37dcb179625fa5f206e4c20079c5.jpg)
}

.daigo-lp_safety_list li {
  padding: 20px;
  width: 100%;
  color: #999999;
  text-align: center
}

.daigo-lp_safety_list li+li {
  border-top: 1px solid #ececeb
}

.dialog_banner>img {
  width: 100%
}

.dialog_banner.with-round-img>img {
  border-radius: 15px 15px 0 0
}

.dialog_matching {
  width: 100%;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 45px
}

.maching-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  border-radius: 15px 15px 0 0
}

.dialog_matching-left, .dialog_matching-right {
  position: relative;
  display: inline-block
}

.dialog_matching-left:after, .dialog_matching-right:after {
  content: '';
  position: absolute;
  bottom: -19px;
  width: 48px;
  height: 48px;
  background-size: 100%
}

.dialog_matching-left {
  margin-right: 75px
}

.dialog_matching-left:after {
  right: 0;
  background-image: url(//cdn.with.is/assets/matching/icn_like_left-1da0d0ae0518108aefb1bb512efb49b909e2eff3759b7792a2f59101f809e4ba.png)
}

.dialog_matching-right:after {
  left: 0;
  background-image: url(//cdn.with.is/assets/matching/icn_like_right-eba90683e5a1813b175d6a470f2666f60d5c48c93c15fd15c7ac19e4c0899cb9.png)
}

.person-thumb-illust {
  width: 80px;
  height: auto
}

.person-thumb-illust.is-left {
  float: left
}

.person-thumb-illust.is-right {
  float: right
}

.thank_explain {
  width: 100%;
  text-align: center
}

.thank_explain>img {
  width: 260px;
  height: auto
}

.age-authentication_illust {
  width: 100%;
  text-align: center
}

.age-authentication_illust>img {
  width: 260px;
  height: auto
}

.points {
  display: table;
  width: 100%
}

.points_heading {
  display: table-cell;
  padding: 8px 0;
  width: 40%;
  text-align: center;
  vertical-align: middle;
  color: rgba(0, 0, 0, 0.87);
  border: 2px solid #606060;
  border-right: none;
  border-radius: 10px 0 0 10px
}

.points_body {
  display: table-cell;
  padding: 8px 0;
  width: 50%;
  text-align: center;
  border: 2px solid #606060;
  border-left: 2px dotted #606060;
  border-radius: 0 10px 10px 0
}

.point-icon {
  width: 25px;
  height: 25px;
  margin-top: -5px
}

.points_row {
  display: table-row
}

.points_row .points_heading, .points_row .points_body {
  border-radius: 0 0 0 0;
  border-bottom: none
}

.points_row:first-of-type .points_heading {
  border-right: none;
  border-radius: 10px 0 0 0
}

.points_row:first-of-type .points_body {
  border-left: 2px dotted #606060;
  border-radius: 0 10px 0 0
}

.points_row:last-of-type .points_heading, .points_row:last-of-type .points_body {
  border: 2px solid #606060
}

.points_row:last-of-type .points_heading {
  border-right: none;
  border-radius: 0 0 0 10px
}

.points_row:last-of-type .points_body {
  border-left: 2px dotted #606060;
  border-radius: 0 0 10px 0
}

.point-explain {
  overflow: hidden;
  *zoom: 1
}

.dialog_scroll-heading {
  position: relative;
  border-bottom: 1px solid #ececeb;
  padding-top: 25px
}

.dialog_scroll-body {
  padding-top: 10px;
  max-height: 320px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .dialog_scroll-body {
    max-height: 220px
  }
}

.dialog_scroll-body>div {
  word-break: break-word
}

.dialog_scroll-heading>.notification_category {
  top: 0;
  left: 0
}

.dialog_scroll-heading>.notification_label {
  top: 0;
  right: 50px
}

.dialog_scroll-heading>.notification_time {
  top: 0;
  right: 0
}

.media-with-border {
  position: relative;
  height: 90px;
  margin-bottom: 20px
}

.media-with-border_image {
  position: absolute;
  top: 0;
  left: 0
}

.media-with-border_body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 90px;
  width: 260px;
  z-index: -1
}

.media-with-border_text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto auto auto 30px;
  padding: 10px 10px 10px 70px;
  line-height: 20px;
  height: 60px;
  width: 230px;
  border-radius: 15px;
  border: 2px solid #b8b8b8
}

.start-profile-mission>.dialog_title {
  position: absolute;
  text-align: center;
  width: 100%;
  top: -20px
}

.start-profile-mission>.dialog_title img {
  width: 85%
}

.start-profile-mission>.parallel-buttons {
  padding: 20px
}

.start-profile-mission>.parallel-buttons>.button-primary {
  width: 70%
}

.start-profile-mission>.parallel-buttons>.button-gray {
  width: 30%
}

#start-profile-mission .dialog_banner img {
  border-radius: 15px 15px 0 0
}

.profile-mission-completion>.dialog_title {
  position: absolute;
  text-align: center;
  width: 100%;
  top: -20px
}

.profile-mission-completion>.dialog_title img {
  width: 85%
}

.profile-mission-completion>.parallel-buttons {
  padding: 10px 20px 20px 20px
}

.profile-mission-completion>.parallel-buttons>.button-primary {
  width: 70%
}

.profile-mission-completion>.parallel-buttons>.button-gray {
  width: 30%
}

.like-message {
  background-image: url(//cdn.with.is/assets/like_message/bg-2b9fd796cc9cc347a646d6129c6fe660f35e4a89e063858d78ff3b512b63a6d8.png);
  background-top: 0;
  background-repeat: no-repeat;
  background-size: 300px 364px;
  padding: 15px
}

.like-message .dialog_title img {
  width: 28px;
  height: auto;
  margin-top: -8px
}

.like-message .target-thumbnail img {
  max-width: none;
  width: 90px;
  border-radius: 45px;
  border: 3px solid white
}

.like-message_balloon {
  padding-bottom: 5px
}

.like-message_balloon img {
  width: 100%
}

.like-message .button {
  font-size: 13px;
  letter-spacing: -1px;
  height: 40px;
  line-height: 40px;
  width: 70px;
  margin-right: 10px;
  border-radius: 20px
}

.like-message .button.button-primary {
  width: 100%
}

.like-message .button .icon-free-like {
  display: inline
}

.like-message .button .icon-free-like.is-disabled {
  display: none
}

.like-message .button.is-disabled .icon-free-like {
  display: none
}

.like-message .button.is-disabled .icon-free-like.is-disabled {
  display: inline
}

.dialog_balloon {
  position: relative;
  width: 100%;
  height: 157px;
  padding: 0 10px
}

.dialog_balloon>img {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: -1
}

.dialog_balloon .description {
  padding: 42px 0 10px 0
}

.dialog_recommend-3months_header {
  border-radius: 15px 15px 0 0
}

.dialog_recommend-3months_description_normal {
  position: relative;
  height: 116px;
  margin-bottom: 2px
}

.dialog_recommend-3months_description_normal>img {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0 10px;
  z-index: -1
}

.dialog_recommend-3months_description_platinum_plan_refund, .dialog_recommend-3months_description_full_refund {
  position: relative;
  height: 151px
}

.dialog_recommend-3months_description_platinum_plan_refund>img, .dialog_recommend-3months_description_full_refund>img {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0 10px;
  z-index: -1
}

.dialog_recommend-3months_text_normal {
  padding-top: 15px
}

.dialog_recommend-3months_text_platinum_plan_refund {
  padding-top: 50px
}

.dialog_recommend-3months_text_full_refund {
  padding-top: 100px
}

.dialog_recommend-3months_cancel-button {
  margin: 6px 25px
}

#help-about-talk-disposition {
  padding: 20px 0
}

.main-photo-notification-dialog_header {
  text-align: center;
  padding: 5px 0 20px
}

.main-photo-notification-dialog_button {
  position: absolute;
  bottom: 25px;
  width: 80%;
  left: 0;
  right: 0;
  margin: auto;
  background: #FFF
}

.main-photo-notification-dialog_button:link, .main-photo-notification-dialog_button:visited, .main-photo-notification-dialog_button:hover, .main-photo-notification-dialog_button:active {
  color: #00C9B5
}

.main-photo-notification-dialog_button:hover {
  background: #F0F0F0
}

.fullscreen_modal.doctor-mission-start-dialog {
  background: url(//cdn.with.is/assets/dialogs/doctor_mission/start_dialog_bg-a78f663056e0682015244d0953ac8222ef58d867b19cb2f3fbfb3dc488bcc0cd.jpg);
  background-size: cover;
  max-width: 700px;
  margin: auto;
  display: grid;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding: 15px 0
}

.doctor-mission-start-dialog_close {
  position: absolute;
  right: 15px;
  top: 15px
}

.doctor-mission-start-dialog_main {
  margin: auto;
  max-width: 414px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .doctor-mission-start-dialog_main {
    width: 90%
  }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) {
  .doctor-mission-start-dialog_main {
    width: 90%
  }
}

.button.doctor-mission-start-dialog_start-button {
  background: #fff;
  font-weight: bold;
  font-size: 20px;
  color: #00C9B5;
  text-align: center
}

.doctor-mission-complete-dialog {
  background: url(//cdn.with.is/assets/dialogs/doctor_mission/complete_bg-7904a6761fdc454dcf821c97ab5789550b3c2efd88542af4d42a14257f9ab6fe.jpg);
  background-size: cover;
  overflow: hidden
}

#easy-konomi-register {
  padding-top: env(safe-area-inset-top)
}

#easy-konomi-register .easy-konomi-register_header {
  z-index: 1;
  position: fixed;
  top: env(safe-area-inset-top);
  width: 100%;
  max-width: 700px;
  height: 82px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-overflow-scrolling: touch;
  white-space: nowrap
}

#easy-konomi-register .easy-konomi-register_header-inner {
  overflow: scroll
}

#easy-konomi-register .easy-konomi-register_header-item {
  display: inline-block;
  position: relative;
  width: 104px;
  margin: 14px 0 14px 12px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background-size: cover;
  background-position: center
}

#easy-konomi-register .easy-konomi-register_header-item:first-child {
  margin-left: 16px
}

#easy-konomi-register .easy-konomi-register_header-item:last-child {
  margin-right: 16px
}

#easy-konomi-register .easy-konomi-register_header-item.is-selected:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #606060;
  border-radius: 2px
}

#easy-konomi-register .easy-konomi-register_tab {
  display: none;
  margin: 80px 0 0;
  clear: both
}

#easy-konomi-register .easy-konomi-register_tab.is-selected {
  display: block
}

#easy-konomi-register .easy-konomi-register_tab-intro {
  height: 100px;
  text-align: center;
  padding-top: 18px;
  letter-spacing: -0.5px
}

#easy-konomi-register .easy-konomi-register_tab-intro div:nth-child(1) {
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.87);
  line-height: 22px
}

#easy-konomi-register .easy-konomi-register_tab-intro div:nth-child(2) {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.54)
}

@-webkit-keyframes easy-konomi-register-item-is-touching {
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }
}

@keyframes easy-konomi-register-item-is-touching {
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }
}

@-webkit-keyframes easy-konomi-register-item-is-touchend {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes easy-konomi-register-item-is-touchend {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes easy-konomi-register-item-is-added {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.2);
    transform: scale(0.2)
  }

  80% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }

  100% {
    opacity: 1
  }
}

@keyframes easy-konomi-register-item-is-added {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.2);
    transform: scale(0.2)
  }

  80% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }

  100% {
    opacity: 1
  }
}

#easy-konomi-register .easy-konomi-register_item.is-touching {
  -webkit-animation: easy-konomi-register-item-is-touching 0.3s ease-in-out forwards;
  animation: easy-konomi-register-item-is-touching 0.3s ease-in-out forwards
}

#easy-konomi-register .easy-konomi-register_item.is-touchend {
  -webkit-animation: easy-konomi-register-item-is-touchend 0.2s ease-in-out;
  animation: easy-konomi-register-item-is-touchend 0.2s ease-in-out
}

#easy-konomi-register .easy-konomi-register_item.is-added {
  -webkit-animation: easy-konomi-register-item-is-added 0.5s ease;
  animation: easy-konomi-register-item-is-added 0.5s ease
}

#easy-konomi-register .easy-konomi-register_item.is-participating .tag {
  display: none
}

#easy-konomi-register .easy-konomi-register_item.is-participating .easy-konomi-register_items-participating-cover {
  display: block
}

#easy-konomi-register .easy-konomi-register_item.is-participating.is-animating .easy-konomi-register_items-participating-cover {
  opacity: 0;
  -webkit-animation: easy-konomi-register-items-participating ease-in-out 0.3s forwards;
  animation: easy-konomi-register-items-participating ease-in-out 0.3s forwards
}

#easy-konomi-register .easy-konomi-register_item.is-participating.is-animating .easy-konomi-register_items-participating-cover img {
  opacity: 0
}

#easy-konomi-register .easy-konomi-register_item.is-participating.is-animating .easy-konomi-register_items-participating-cover img {
  -webkit-animation: easy-konomi-register-items-participating-img cubic-bezier(1, 0, 0, 1) 0.3s 0.1s forwards;
  animation: easy-konomi-register-items-participating-img cubic-bezier(1, 0, 0, 1) 0.3s 0.1s forwards
}

#easy-konomi-register .easy-konomi-register_items-participating-cover {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(254, 105, 112, 0.9);
  border-radius: 10px
}

#easy-konomi-register .easy-konomi-register_items-participating-cover img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  margin: auto
}

@-webkit-keyframes easy-konomi-register-items-participating {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes easy-konomi-register-items-participating {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes easy-konomi-register-items-participating-img {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes easy-konomi-register-items-participating-img {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

#easy-konomi-register .easy-konomi-register_item {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 10px;
  display: inline-block;
  margin: 12px 6px 0 6px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  #easy-konomi-register .easy-konomi-register_item {
    width: 98px;
    height: 98px;
    margin: 8px 4px 0 4px
  }
}

#easy-konomi-register .easy-konomi-register_item.is-large {
  width: 220px;
  height: 220px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  #easy-konomi-register .easy-konomi-register_item.is-large {
    width: 204px;
    height: 204px
  }
}

#easy-konomi-register .easy-konomi-register_item.is-large .easy-konomi-register-item_thumb {
  width: 220px;
  height: 220px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  #easy-konomi-register .easy-konomi-register_item.is-large .easy-konomi-register-item_thumb {
    width: 204px;
    height: 204px
  }
}

#easy-konomi-register .easy-konomi-register_item.is-large .easy-konomi-register_item-name {
  font-size: 18px
}

#easy-konomi-register .easy-konomi-register_item.is-large-left {
  float: left
}

#easy-konomi-register .easy-konomi-register_item.is-large-right {
  float: right
}

#easy-konomi-register .easy-konomi-register-item_thumb {
  width: 104px;
  height: 104px;
  border-radius: 10px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  #easy-konomi-register .easy-konomi-register-item_thumb {
    width: 98px;
    height: 98px
  }
}

#easy-konomi-register .easy-konomi-register_item-name {
  display: -webkit-box;
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: white;
  padding: 0 4px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center
}

#easy-konomi-register .easy-konomi-register_item-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: rgba(76, 76, 76, 0.4)
}

#easy-konomi-register .easy-konomi-register_item-tag {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100px;
  position: absolute;
  bottom: 4%;
  left: 4%;
  font-size: 11px;
  padding: 2px 6px;
  font-weight: 600
}

#easy-konomi-register .easy-konomi-register_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  height: calc(55px + env(safe-area-inset-bottom));
  color: black;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 700px
}

#easy-konomi-register .easy-konomi-register_footer.is-complete {
  background: #ffeded
}

#easy-konomi-register .easy-konomi-register_footer .finish-button {
  width: 20%
}

#easy-konomi-register .easy-konomi-register_footer-progress-step {
  display: none;
  width: 100%;
  text-align: center;
  height: 55px
}

#easy-konomi-register .easy-konomi-register_footer-progress-step.is-step1 {
  display: inherit;
  padding: 0 20px;
  color: #606060;
  font-size: 18px;
  font-weight: 600;
  line-height: 55px
}

#easy-konomi-register .easy-konomi-register_footer-progress-step.is-step2 {
  font-size: 12px;
  display: -webkit-box;
  display: flex
}

#easy-konomi-register .easy-konomi-register_footer-progress {
  color: rgba(0, 0, 0, 0.54);
  width: 105px;
  line-height: 1.6;
  align-self: center
}

#easy-konomi-register .easy-konomi-register_footer-progress_complete div {
  background: #606060;
  border-radius: 8px;
  width: 80px;
  line-height: 32px;
  margin: auto;
  color: white;
  font-size: 15px
}

#easy-konomi-register .easy-konomi-register_footer-items {
  overflow: scroll;
  width: calc(100% - 105px);
  text-align: left;
  display: -webkit-box;
  display: flex
}

#easy-konomi-register .easy-konomi-register_footer-items-inner {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

#easy-konomi-register .easy-konomi-register_footer-item {
  padding: 4px
}

#easy-konomi-register .easy-konomi-register_footer-item img {
  width: 32px;
  max-height: 100%;
  border-radius: 8px
}

#easy-konomi-register .easy-konomi-register_footer-item.is-animating {
  -webkit-animation: easy-konomi-register-footer-item-is-animating 0.1s ease-in-out;
  animation: easy-konomi-register-footer-item-is-animating 0.1s ease-in-out
}

@-webkit-keyframes easy-konomi-register-footer-item-is-animating {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  80% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes easy-konomi-register-footer-item-is-animating {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  80% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.embed .title-area {
  display: none
}

.embed .title-area.embed-show {
  display: -webkit-box;
  display: flex
}

.embed .title-area.is-fixed {
  position: fixed;
  display: -webkit-box;
  display: flex;
  z-index: 10;
  top: 0;
  background: #FFF;
  width: 100%;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
  font-size: 18px;
  left: 0;
  right: 0;
  margin: auto
}

.list.empty {
  padding: 10px 10px 20px;
  background-color: #f1f1f1;
  overflow: hidden;
  *zoom: 1
}

.list.empty.likes {
  background-color: #fff
}

.empty_title {
  margin: 20px auto
}

.empty_illust {
  position: relative;
  padding: 20px 0;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%
}

.empty_illust>.person-thumb-illust {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  margin-top: 10px;
  height: auto
}

.person-thumb-illust+.person-thumb-illust {
  margin-left: 100px
}

.empty_like-illust {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 125px;
  height: auto
}

.empty_talk_illust {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 125px;
  height: auto
}

.empty_message {
  margin: 20px auto
}

.empty_frame {
  padding: 10px 10px 13px 10px;
  width: 100%;
  background-color: #fff;
  border-radius: 15px
}

.empty_my-thumbnail {
  border-radius: 40px
}

.facebook-error {
  padding: 10px;
  background: #eaeaea
}

.facebook-error>div {
  margin: 0 auto;
  padding: 20px 10px 10px;
  max-width: 380px;
  background-color: #fff;
  border-radius: 10px
}

.unknown-user-thumb {
  position: relative
}

.unknown-user-thumb>img {
  width: 90px
}

.unknown-user-thumb_status {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 20px;
  color: #fff;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15)
}

.account-suspended .contact-button {
  color: #fff;
  background-color: #9B9B9B
}

.account-suspended .contact-button:link, .account-suspended .contact-button:visited {
  background-color: #9B9B9B
}

.account-suspended .contact-button:hover, .account-suspended .contact-button:active {
  background-color: #757575;
  opacity: 1
}

.account-suspended .title-icon {
  width: 48px;
  color: #fff;
  padding: 0 10px;
  height: 20px;
  border-radius: 20px;
  line-height: 1.5;
  background-color: #B8B8B8;
  border: 1px solid #B8B8B8
}

.overseas-user-error_title-frame {
  text-align: center;
  padding: 40px 0px;
  height: 180px
}

.overseas-user-error_title-logo {
  width: 35%
}

.overseas-user-error_mblx2 {
  margin-bottom: 40px
}

.overseas-user-error_overseas-title-text {
  color: rgba(0, 0, 0, 0.87);
  font-size: 18px;
  text-align: center
}

.overseas-user-error_overseas-body-text {
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
  text-align: center
}

.overseas-user-error_overseas-anchor-text {
  text-decoration: underline;
  color: #606060
}

.overseas-user-error_overseas-info-text {
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  text-align: center
}

.floating-event-wrapper {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 700px;
  z-index: 20
}

.floating-event-wrapper .floating-event-button {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25px;
  width: 145px;
  height: 50px
}

.floating-event-wrapper .floating-event-button.is-limited {
  padding: 7px 8px;
  width: 230px;
  color: #fff;
  border-radius: 25px
}

.floating-event-wrapper .floating-limited-thumb {
  width: 36px;
  height: 36px;
  border-radius: 18px
}

.footprints .list-view-button {
  width: 100%;
  height: 40px;
  font-size: 18px;
  position: relative;
  line-height: normal;
  border-radius: 20px
}

.footprints .list-view-button .icon-like, .footprints .list-view-button .icon-thank {
  top: 10px;
  width: 22px
}

.footprints .list-view-button .icon-talk {
  top: 4px;
  width: 30px
}

.footprints .list-view-button .icon-free-like {
  top: 9px;
  width: 26px
}

.footprint {
  background-color: #fff;
  margin: 0;
  padding: 15px 10px 12px
}

.footprint .media_body {
  padding-bottom: 2px
}

.footprint>a:link, .footprint>a:active, .footprint>a:hover, .footprint>a:visited {
  text-decoration: none
}

.footprint .common-profile-item_frame:after {
  content: '';
  display: block;
  clear: both
}

.footprint .common-profile-item {
  background-color: #ffdcdc;
  height: 20px;
  line-height: 1.6;
  border-radius: 10px;
  float: left;
  margin-right: 3px;
  margin-bottom: 10px;
  padding: 0 8px;
  color: #606060;
  font-size: 12px
}

.footprint .common-profile-item.is-active {
  color: #fff;
  background-color: #606060
}

.footprint a.button-like-action {
  padding-top: 7px
}

.footprint+.footprint {
  border-top: 1px solid #ececeb
}

.footprint_profile-thumb {
  width: 90px;
  border-radius: 50%
}

.footprint_photo-thumb {
  width: 60px;
  border-radius: 50%
}

.footprint_primary-info {
  line-height: 1;
  display: -webkit-box;
  display: flex
}

.footprint_primary-info .footprint_characteristic-info {
  width: 80%;
  margin-right: auto;
  text-overflow: ellipsis
}

.footprint_created-at {
  float: right
}

.button-edit-footprint {
  font-size: 20px
}

.button-edit-footprint>.icon-arrow-right {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px
}

.footprint_lp-title {
  padding-top: 25px
}

.footprint_lp-description {
  padding: 0 15px
}

.footprint-route_balloon {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 100%;
  padding: 5px;
  margin-bottom: 15px;
  position: relative
}

.footprint-route_balloon:before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 40px;
  margin-left: -15px;
  border: 4px solid transparent;
  border-top: 4px solid #FFF;
  z-index: 2
}

.footprint-route_balloon:after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 41px;
  margin-left: -17px;
  border: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.1);
  z-index: 1
}

.footprint-route_balloon img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-right: 5px
}

.footprint-route_balloon span {
  vertical-align: middle
}

.footprint-route_title-ellipsis {
  max-width: 47%;
  display: inline-block;
  vertical-align: middle
}

.footprint-free-like_timer {
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-color: #FE5960;
  color: #fff;
  font-size: 14px;
  padding: 0 15px
}

.footprint-free-like_timer_count {
  margin-left: auto;
  font-size: 14px
}

.footprint-free-like_banner {
  width: 100%;
  height: 115px;
  background-image: url(//cdn.with.is/assets/footprints/free_like/bnr_bg-02995732b9db322511ee0730cc15f41340c6d93f21230bd596ba0f911a2ae76a.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px 15px;
  color: #fff
}

.footprint-free-like_banner_header {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 5px
}

.footprint-free-like_banner_header_icon {
  width: 38px;
  height: 33px
}

.footprint-free-like_banner_header_text {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px
}

.body-for-you-lp {
  background: #000
}

.for-you-lp {
  background: #fff;
  max-width: 500px;
  margin: auto
}

.for-you-lp_close-button-button-box {
  position: fixed;
  width: 100%;
  max-width: 500px
}

.for-you-lp_close-button img {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 25px
}

.for-you-lp_next-button {
  margin: 0 20px 30px;
  height: 55px;
  line-height: 55px
}

.search-for-you-tabs {
  width: 65%;
  margin: 0 auto;
  padding-top: 10px
}

.search-for-you-tabs .search-for-you-button {
  width: 48%;
  height: 35px;
  line-height: 32px;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #999;
  font-weight: bold
}

.search-for-you-tabs .search-for-you-button.is-touching {
  background-color: #f2f2f2
}

.search-for-you-tabs .search-for-you-button.with-badge {
  border: 1px solid #606060
}

.search-for-you-tabs .search-for-you-button.is-active {
  line-height: 36px;
  background-color: #606060;
  border: none;
  font-size: 16px;
  color: #fff
}

.search-for-you-tabs .search-for-you-button.is-active.is-touching {
  background-color: #e55e65;
  color: #d8d8d8
}

.for-you-badge .badge {
  top: -4px;
  right: -2px;
  border: 4px solid #fff;
  box-sizing: content-box
}

.user-pickup-notification {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 37px;
  margin: 15px 0;
  padding: 3px 15px
}

.user-pickup-notification:link, .user-pickup-notification:visited, .user-pickup-notification:hover, .user-pickup-notification:active {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none
}

.user-pickup-notification.is-touching {
  opacity: .75
}

.user-pickup-notification-icon {
  width: 35px;
  height: 35px
}

.user-pickup-notification-text {
  font-size: 14px;
  font-weight: bold;
  margin-left: 10px;
  margin-top: 1px;
  line-height: 1.3em
}

.user-pickup-notification-subtext {
  font-size: 11px;
  color: #606060
}

.user-pickup-notification-arrow {
  width: 9px;
  height: 13px;
  margin-left: auto
}

.for-you-container {
  background-color: #fff
}

.for-you-container a {
  text-decoration: none
}

.for-you-part-container {
  padding-top: 20px
}

.for-you-title {
  margin: 0 auto;
  padding: 0 15px;
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .for-you-title {
    font-size: 16px
  }
}

.for-you-caption {
  line-height: 1;
  font-size: 12px;
  font-weight: bold
}

.for-you-day-mix_users .user-card-simple, .for-you-day-mix_users .user-card-with-recommend-reason, .new-konomi-users .user-card-with-recommend-reason, .regular-contents-users .user-card-simple {
  display: inline-block;
  vertical-align: top;
  margin: 0 2px
}

.for-you-day-mix_users .user-card-simple:first-child, .for-you-day-mix_users .user-card-with-recommend-reason:first-child, .new-konomi-users .user-card-with-recommend-reason:first-child, .regular-contents-users .user-card-simple:first-child {
  margin-left: 10px
}

.for-you-day-mix_users .user-card-simple:last-child, .for-you-day-mix_users .user-card-with-recommend-reason:last-child, .new-konomi-users .user-card-with-recommend-reason:last-child, .regular-contents-users .user-card-simple:last-child {
  margin-right: 10px
}

.slick-dots.for-you-page-control>li {
  width: 4px
}

.slick-dots.for-you-page-control>li>button:before {
  content: ' ';
  background-color: #000;
  border-radius: 3px;
  width: 5px;
  height: 5px;
  opacity: .1
}

.slick-dots.for-you-page-control>li>button:hover:before {
  opacity: .1
}

.slick-dots.for-you-page-control>li.slick-active>button:before, .slick-dots.for-you-page-control>li.slick-active>button:hover:before {
  opacity: .35
}

.for-you-empty-container {
  position: relative;
  width: 100%;
  height: 375px;
  padding: 20px;
  text-align: center
}

.for-you-empty-container .for-you-empty-contents {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.for-you-empty-container .for-you-empty-contents .for-you-lock-icon {
  height: 90px
}

#for-you-vip {
  text-align: center;
  background: -webkit-linear-gradient(135deg, #be8142, #e8ddae);
  background: linear-gradient(-45deg, #be8142, #e8ddae)
}

#for-you-vip .for-you-vip-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px
}

#for-you-vip .for-you-vip-header {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 15px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(135deg, #d2a95c, #f3e6be);
  background: linear-gradient(-45deg, #d2a95c, #f3e6be);
  border-radius: 40px
}

#for-you-vip .for-you-vip-header-img {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 37px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

#for-you-vip .for-you-vip-body {
  color: #fff;
  margin: 50px 0 20px
}

#for-you-pickup-user {
  margin-top: 10px;
  padding: 20px 0 10px;
  background: top left/ 100% 30% no-repeat
}

#for-you-pickup-user.for-male {
  background-image: -webkit-linear-gradient(107deg, #fff 46%, #FFEED5 77%, #FFC3C3 100%);
  background-image: linear-gradient(-17deg, #fff 46%, #FFEED5 77%, #FFC3C3 100%)
}

#for-you-pickup-user.for-female {
  background-image: -webkit-linear-gradient(107deg, #fff 26%, #FCFCE6 62%, #D1FDFF 100%);
  background-image: linear-gradient(-17deg, #fff 26%, #FCFCE6 62%, #D1FDFF 100%)
}

.for-you-pickup-users {
  padding: 0 8px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between
}

.for-you-pickup-users .user-card-with-recommend-reason {
  padding: 8px;
  margin-bottom: 25px;
  width: 50%;
  max-width: 200px
}

#for-you-pickup-user+.for-you-part-container {
  background: -webkit-linear-gradient(290deg, #F0F0F0 0%, rgba(240, 240, 240, 0) 54%);
  background: linear-gradient(160deg, #F0F0F0 0%, rgba(240, 240, 240, 0) 54%)
}

#for-you-only-you-mixes .only-you-mix-title-area {
  display: -webkit-box;
  display: flex;
  width: 89%;
  margin: 0 auto
}

#for-you-only-you-mixes .only-you-mix-title-area .only-you-mix-theme-icon {
  width: 35px;
  height: 35px
}

#for-you-only-you-mixes .only-you-mix-title-area .only-you-mix-theme-icon.icon-konomi {
  border-radius: 8px
}

#for-you-only-you-mixes .only-you-mix-title-area .only-you-mix-theme-icon.icon-campaign {
  border-radius: 18px
}

#for-you-only-you-mixes .only-you-mix-title-area .only-you-mix-title {
  height: 35px;
  margin-left: 10px;
  line-height: 1.4em
}

#for-you-only-you-mixes .only-you-mix-carousel {
  width: 100%;
  margin-bottom: 20px
}

#for-you-only-you-mixes .only-you-mix-carousel .only-you-mix-user {
  width: 90vw;
  max-width: 500px;
  margin: 20px 6px
}

#for-you-only-you-mixes .for-you-page-control {
  bottom: -20px
}

.for-you-day-mix_title {
  font-size: 18px
}

.for-you-day-mix_users {
  margin: 10px 0 30px;
  overflow: auto;
  white-space: nowrap
}

.for-you-day-mix_users .user-card-with-recommend-reason {
  width: 165px;
  padding: 5px
}

.for-you-day-mix_users:last-child {
  margin-bottom: 25px
}

#for-you-day-mix-24hour-limited {
  padding: 20px 0 10px;
  margin-bottom: 15px;
  background: url(//cdn.with.is/assets/for_you/24hour_limited_day_mix_bg-2ec80acb9313eb865c3229ebb4bf9b8b39fdf8633313a7491969e8912e4d1ab9.svg) top left/cover no-repeat !important
}

#for-you-day-mix-24hour-limited .for-you-day-mix_users {
  margin-bottom: 0
}

#for-you-day-mix-24hour-limited .user-card-simple .user-card_transition-bg {
  display: none !important
}

#for-you-day-mix-24hour-limited .user-card-simple .user-profile-age-address, #for-you-day-mix-24hour-limited .user-card-simple .user-profile-tweet {
  color: #fff
}

#for-you-day-mix-24hour-limited .user-card-simple .online-badge.is-online {
  background-color: #8FF3A8
}

#for-you-day-mix-24hour-limited .user-card-simple .online-badge.is-in-24h {
  background-color: #fff57d
}

#for-you-day-mix-24hour-limited .user-card-simple .user-profile-tweet-icon {
  background: url(//cdn.with.is/assets/shared/atoms/icons_white/tweet-a94e8be47edb2a2df340781fa8282366188cbe866e758e0e065b637b9eb10d88.svg) no-repeat center
}

.for-you-day-mix-24hour-limited_caption {
  color: #FFEC13
}

.for-you-day-mix-24hour-limited_title {
  font-size: 20px;
  color: #FFF
}

.for-you-day-mix_countdown {
  padding: 0 15px;
  font-weight: normal;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px
}

.for-you-day-mix_countdown #countdown_remaining-time-label {
  font-weight: normal
}

.for-you-day-mix_countdown .unit {
  color: #FFF;
  font-weight: bold
}

.for-you-day-mix_countdown .val {
  margin: 0 3px;
  color: #FFEC13;
  font-size: 28px;
  font-weight: bold
}

.new-konomi-users {
  width: 100%;
  margin: 10px 0 30px;
  overflow: auto;
  white-space: nowrap
}

.new-konomi-users .user-card-with-recommend-reason {
  width: 165px;
  padding: 5px
}

.new-konomi-users .user-main-area {
  width: 155px
}

#for-you-new-konomi-best-users .for-you-page-control {
  bottom: -30px
}

.regular-contents-title {
  padding: 0 15px;
  margin: 15px auto 0;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold
}

.regular-contents-title .vip-tag {
  margin: 0 0 4px 2px
}

.regular-contents-users {
  width: 100%;
  margin-top: 10px;
  overflow: auto;
  white-space: nowrap
}

.regular-contents-users:last-child {
  padding-bottom: 15px
}

.for-you-banners {
  margin-top: 10px;
  padding-bottom: 30px;
  overflow: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch
}

.for-you-banner {
  position: relative;
  display: inline-block;
  width: 165px;
  height: 225px;
  margin-left: 10px
}

.for-you-banner:first-child {
  margin-left: 15px
}

.for-you-banner:last-child {
  margin-right: 15px
}

.for-you-banner img {
  width: 100%
}

.fullscreen_modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: none;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6)
}

.girl-lp_header {
  position: relative;
  height: 440px;
  box-sizing: border-box;
  background-image: url(//cdn.with.is/assets/welcome/girl/header_bg-acb9aa8af71d7af1e40793352f829c67c37880f66e7bd6749ba4ce25425f414b.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden
}

.girl-lp_header_gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 239px
}

.girl-lp_header_title {
  position: absolute;
  top: 0;
  left: 10px;
  margin: 0
}

.girl-lp_header_title>img {
  width: 65px;
  height: 31px
}

.girl-lp_header_iphone {
  position: absolute;
  top: 30px;
  right: 7%;
  width: 23%;
  height: auto;
  min-width: 120px;
  min-height: 247px;
  max-width: 150px;
  max-height: 308px
}

.girl-lp_header_bottom {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%
}

.girl-lp_header_copy {
  display: block;
  margin: 5px auto;
  width: 260px
}

.girl-lp_header_attention {
  display: block;
  margin: 7px auto 0
}

.group-card {
  width: 100%;
  height: 100%
}

.group-card a {
  text-decoration: none
}

.group-card .group-card_image {
  position: relative
}

.group-card .group-card_image>img {
  width: 100%;
  height: 100%;
  border-radius: 10px
}

.group-card .group-card_image:before {
  content: '';
  display: block;
  position: absolute;
  top: 65.5%;
  left: 0;
  width: 100%;
  height: 35%;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
  border-radius: 0 0 10px 10px
}

.group-card .group-card_title {
  padding: 0 3px
}

.group-card .group-card_title {
  margin-top: 7px;
  color: rgba(0, 0, 0, 0.87);
  word-break: break-word
}

.participating-mark {
  position: relative
}

.participating-mark:after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 33px;
  height: 29px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/active_konomi-f55bfd86aef57ea49f3b01e8e7874e94c54edbbf863309035bce650352c46173.svg);
  background-repeat: no-repeat
}

.group-members_header {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.group-members_header .group-members_search-controller {
  margin-bottom: 5px
}

.group-members_header .group-members_search-controller .search-controller_oval-type {
  position: relative;
  margin-left: auto
}

.group-members_header .group-members_header_contents {
  height: 105px;
  display: -webkit-box;
  display: flex
}

.group-members_header .group-members_header_contents .group-members_header_image {
  position: relative
}

.group-members_header .group-members_header_contents .group-members_header_image:before {
  content: '';
  display: block;
  position: absolute;
  top: 65.5%;
  left: 0;
  width: 100%;
  height: 35%;
  border-radius: 0 0 10px 10px;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5))
}

.group-members_header .group-members_header_contents .group-members_header_image>img {
  width: 105px;
  height: 100%;
  border-radius: 10px
}

.group-members_header .group-members_header_contents .group-members_header_detail {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-left: 20px;
  padding: 5px 0
}

.group-members_header .group-members_header_contents .group-members_header_detail p {
  margin: 0
}

.group_actions_floating {
  position: fixed;
  z-index: 20;
  width: 90%;
  max-width: 650px;
  left: 50%;
  bottom: 20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  text-align: center
}

.group_actions_floating .group_actions_floating-button {
  position: relative;
  width: 100%;
  height: 55px;
  line-height: 55px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  border-radius: 30px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2)
}

.group_actions_floating .group_actions_floating-button.is-touching {
  -webkit-animation: floating-card-button-transition 0.2s ease-out forwards;
  animation: floating-card-button-transition 0.2s ease-out forwards
}

.group_actions_floating .join-card-button:before, .group_actions_floating .remove-card-button:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 21px;
  top: 17px;
  left: 23px;
  background-repeat: no-repeat;
  background-size: 100%
}

.group_actions_floating .join-card-button {
  background-color: #606060
}

.group_actions_floating .join-card-button.is-touching {
  background-color: #e55e65
}

.group_actions_floating .join-card-button:before {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/add_konomi-0368be4fefaf8847db1060aead1b07eba591aef97da06b9201eb2331e7dbeedf.svg)
}

.group_actions_floating .remove-card-button {
  background-color: #999999
}

.group_actions_floating .remove-card-button.is-touching {
  background-color: #8c8c8c
}

.group_actions_floating .remove-card-button:before {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/passive_konomi-d2d56dc71149f644fcc99e41c4d930a714955f66af1735c073437289b780fe7a.svg)
}

@-webkit-keyframes floating-card-button-transition {
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }
}

@keyframes floating-card-button-transition {
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }
}

.group-konomi-best_container {
  background-color: #fff;
  padding: 15px 0
}

.group-konomi-best_container a {
  text-decoration: none;
  color: inherit
}

.group-konomi-best_container .group-konomi-best-users_title-area {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin: 0 15px 10px
}

.group-konomi-best_container .group-konomi-best-users_title-area .group-konomi-best-users_title {
  position: relative;
  margin-left: 23px;
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87)
}

.group-konomi-best_container .group-konomi-best-users_title-area .group-konomi-best-users_title:before {
  content: '';
  position: absolute;
  top: 4px;
  left: -22px;
  width: 15px;
  height: 17px;
  background-image: url(//cdn.with.is/assets/shared/icons/konomi_best-6a1a291d15da5f79fc1f47251f0266043dd0cc0ad30bdd94ad0577d2b2944214.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.group-konomi-best_container .group-konomi-best-users_title-area .group-konomi-best-users_how-to {
  margin-left: auto;
  font-size: 12px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6)
}

.group-konomi-best_container .group-konomi-best-users_title-area .group-konomi-best-users_how-to>a {
  position: relative
}

.group-konomi-best_container .group-konomi-best-users_title-area .group-konomi-best-users_how-to>a:before {
  content: '';
  position: absolute;
  top: 1px;
  left: -20px;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icons/help_gray-2f315b5d64176f4fa700e4f8b238d91e3f4aa780a3f55ddaa59fb52f7f05171b.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.group-konomi-best_container .group-konomi-best-users_container {
  margin-bottom: 10px
}

.group-konomi-best_container .group-konomi-best-users_container .user-card-group-konomi-best:last-child .user-card-inner-container {
  border-bottom: none
}

.group-konomi-best_container .group-konomi-best-users_more {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 55px;
  margin: 0 15px;
  padding: 0 10px;
  background-color: #fff1f1;
  border-radius: 10px
}

.group-konomi-best_container .group-konomi-best-users_more.is-touching {
  background-color: #ffdcdc
}

.group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_images {
  position: relative;
  height: 38px
}

.group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_images .group-konomi-best-users_image {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 3px solid #fff1f1;
  border-radius: 22px
}

.group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_total {
  margin-left: 7px;
  font-size: 12px;
  font-weight: bold;
  color: #606060
}

.group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_label {
  margin-left: auto;
  font-size: 12px;
  font-weight: bold
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_label {
    font-size: 10px
  }
}

.group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_icon {
  margin-left: 5px
}

.group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_icon .icon_arrow-gray {
  width: 8px
}

.group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_icon .icon_vip-tag {
  width: 30px;
  margin-bottom: 3px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .group-konomi-best_container .group-konomi-best-users_more .group-konomi-best-users_icon .icon_vip-tag {
    width: 22px
  }
}

.group-members_container {
  background-color: #fff;
  padding: 15px 10px 0
}

.group-members_container .group-members_title {
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  margin-left: 5px;
  margin-bottom: 15px
}

.group-members_container .group-members_cards {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  overflow: auto
}

.group-members_container .group-members_cards .user-card-with-affinities {
  width: calc((100% - 10px) / 3);
  margin-bottom: 20px
}

.group-members_container .group-members_cards .user-card-with-affinities:nth-child(3n+2) {
  margin: 0 5px
}

.group-members_container .group-members_empty-container {
  position: relative;
  width: 100%;
  height: 400px
}

.group-members_container .group-members_empty-container .group-members_empty {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center
}

.group-members_container .group-members_empty-container .group-members_empty .group-members_empty-icon {
  width: 105px;
  height: 110px;
  margin-bottom: 18px
}

.konomi-best-users_header {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 55px;
  line-height: 55px;
  background-color: #fff;
  padding: 0 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.konomi-best-users_header .icon_arrow-gray {
  width: 12px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.konomi-best-users_header .konomi-best-users_header_title-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin: auto
}

.konomi-best-users_header .konomi-best-users_header_title-container .konomi-best-users_header_title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6);
  margin-right: 20px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .konomi-best-users_header .konomi-best-users_header_title-container .konomi-best-users_header_title {
    width: 78%
  }
}

.konomi-best-users_header .konomi-best-users_header_title-container .konomi-best-users_header_image {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  margin: 0 8px
}

.recommend-groups_container {
  position: fixed;
  width: 100%;
  max-width: 700px;
  bottom: -300px;
  background-color: #fff;
  z-index: 26;
  box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out
}

.recommend-groups_container.is-visible {
  -webkit-transform: translateY(-300px);
  transform: translateY(-300px)
}

.recommend-groups_container .recommend-groups_close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/web_dialog_close-2a1cac889fb2d4ae1acdadfa14bea910e1fbbd77229953f35032028fa2f9c04d.svg);
  background-size: 100%
}

.recommend-groups_container .recommend-groups_title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  margin: 15px;
  line-height: 1.3em
}

.recommend-groups_container .recommend-groups_group-list {
  margin-bottom: 5px;
  overflow: auto;
  white-space: nowrap;
  padding: 0 15px 10px;
  -webkit-overflow-scrolling: touch
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .recommend-groups_container .recommend-groups_group-list {
    padding: 0 10px 10px
  }
}

.recommend-groups_container .group-card {
  display: inline-block;
  width: 80px;
  vertical-align: top;
  margin: 0 5px;
  white-space: normal
}

.recommend-groups_container .group-card_title {
  font-size: 10px
}

.recommend-groups_container .group-card_title {
  line-height: 1.4em;
  max-height: 2.8em;
  overflow: hidden
}

.konomi-best-users_total {
  background-color: #fff;
  padding: 10px 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center
}

.konomi-best-users_container {
  background-color: #fff;
  padding-bottom: 15px
}

.konomi-best-users_container a {
  text-decoration: none;
  color: inherit
}

.how-to-use-konomi-best {
  background-color: #fff;
  padding: 20px 0
}

.how-to-use-konomi-best .how-to-use-konomi-best_contents {
  max-width: 600px;
  padding: 20px;
  text-align: center
}

.how-to-use-konomi-best .how-to-use-konomi-best_contents .how-to-use-konomi-best_description {
  margin: 20px 0;
  text-align: left;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87)
}

.group-talk-lp_heading {
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
  position: relative;
  width: 100%
}

.group-talk-lp_desc {
  padding: 40px var(--outer-space);
  text-align: center
}

.group-talk-lp_heading_term {
  position: absolute;
  top: 33%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 5px var(--outer-space);
  width: 70%;
  max-width: 400px;
  color: #FF4850;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border-radius: 80px;
  opacity: 0.6
}

.group-talk-lp_empty {
  padding: 40px 0;
  width: 100%;
  height: 290px;
  background-image: -webkit-linear-gradient(#fff 0%, #F1F1F1 100%);
  background-image: linear-gradient(#fff 0%, #F1F1F1 100%)
}

.group-talk-lp_empty_text {
  color: rgba(0, 0, 0, 0.4);
  font-size: 15px;
  font-weight: bold;
  text-align: center
}

.group-talk-lp_category {
  margin: 0 auto 40px;
  max-width: 380px
}

.group-talk-lp_category_heading {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 15px 15px 0 0;
  overflow: hidden
}

.group-talk-lp_category_title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7%;
  margin: auto 0;
  height: 30px;
  font-size: 22px;
  font-weight: bold
}

.group-talk-lp_category_room {
  position: relative;
  display: block;
  padding: 16px 15px 20px;
  height: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.group-talk-lp_category_room:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  pointer-events: none
}

.group-talk-lp_category_room:hover:after, .group-talk-lp_category_room:active:after {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s
}

.group-talk-lp_category_room:last-child {
  border-radius: 0 0 15px 15px
}

.group-talk-lp_category_room_name {
  width: calc(100% - 70px);
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-weight: bold
}

.group-talk-lp_category_room_member {
  margin-top: 9px;
  min-height: 32px
}

.group-talk-lp_room_user-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%
}

.group-talk-lp_room_user-thumb+.group-talk-lp_room_user-thumb {
  margin-left: 5px
}

.group-talk-lp_category_room_participating {
  position: absolute;
  top: 20px;
  right: 15px;
  font-weight: bold
}

.group-talk-lp_category_room_num {
  position: absolute;
  bottom: 20px;
  right: 15px;
  padding: 5px 10px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 13px;
  border-radius: 15px
}

.group-talk-lp_share {
  position: relative;
  width: 100%
}

.group-talk-lp_share_link {
  position: absolute;
  bottom: 16%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px 0;
  width: calc(100% - 90px);
  color: #606060;
  font-size: 15px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  text-align: center
}

.group-talk-lp_share_link:before {
  display: block;
  position: absolute;
  content: '';
  top: 11px;
  left: 15px;
  width: 18px;
  height: 18px;
  background-image: url(//cdn.with.is/assets/group_talk/lp/icn_link-a69e902034aeb78953a42abba96b2fecd3a4660c78496fefd3706e24e228d2d2.svg);
  background-repeat: no-repeat
}

.group-talk-lp_procedure {
  padding: 30px var(--outer-space);
  width: 100%
}

.group-talk-lp_procedure_step {
  margin: 50px auto 0;
  max-width: 320px
}

.group-talk-lp_procedure_heading {
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
  font-size: 21px;
  font-weight: bold
}

.group-talk-lp_notice {
  padding: 20px var(--outer-space);
  background-color: #F5F5F5
}

ul.group-talk-lp_notice_list {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6)
}

ul.group-talk-lp_notice_list li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 15px
}

ul.group-talk-lp_notice_list li:before {
  display: block;
  position: absolute;
  content: '・';
  top: 0;
  left: 0
}

.group-card-list {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 20px 20px
}

.group-card-list .group-card {
  width: calc((100% - 30px) / 3);
  margin-bottom: 20px
}

.group-card-list .group-card:nth-child(3n+2) {
  margin: 0 15px 20px
}

.group-card-list-row {
  width: 100%;
  margin-bottom: 20px;
  overflow: auto;
  white-space: nowrap;
  padding: 0 15px
}

.group-card-list-row .group-card {
  display: inline-block;
  width: 96px;
  vertical-align: top;
  margin: 0 5px;
  white-space: normal
}

.group-card-list-row .group-card_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px
}

.group-search-header {
  padding: 10px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background: #eaeaea
}

.group-search-header_input {
  position: relative;
  margin-right: 10px;
  width: 77%
}

.group-search-header_input>.form-input {
  padding-left: 40px;
  height: 29px;
  border: none;
  box-shadow: 0px -0.66px 0px #d1d1d1
}

.group-search-header_submit {
  padding: 0;
  width: 61px;
  height: 29px;
  line-height: 2.2;
  font-size: 14px;
  box-shadow: 0px 0.91px 0px #d15d66
}

.group_cards_list_box {
  position: relative;
  margin-bottom: 10px;
  height: auto
}

.group-list_container {
  position: relative
}

.group-list_heading {
  padding: 10px 20px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  justify-content: space-between
}

.group-list-title {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center
}

.group-list-title-m {
  padding: 10px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center
}

.group-list-title_icon {
  width: 16px;
  height: 16px;
  margin-right: 5px
}

.group-list_link {
  display: block;
  height: 18px;
  line-height: 18px;
  font-size: 13px
}

.group-list_link:link {
  text-decoration: none
}

.group-list_link:visited {
  color: #606060
}

.group-list_link>.icon-arrow-right {
  vertical-align: -3px
}

.create-liking-icon, .register-liking-icon {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 22px;
  width: 24px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100%
}

.create-liking-icon {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/add_konomi-0de0cfb6463a5797bcf6a185fb431dce9932db77656f88b1257ef7262bac61b7.svg)
}

.register-liking-icon {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/add_konomi-0368be4fefaf8847db1060aead1b07eba591aef97da06b9201eb2331e7dbeedf.svg)
}

.register-photo-button {
  position: relative
}

q .register-photo-button:after {
  content: '';
  position: absolute;
  top: 21px;
  right: 21px;
  width: 20px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/icn_add_l-300ee680c9639a08900ec4fb1ed95a0a086a6759ff57ba77388099ff90dce13e.png);
  background-size: 100%
}

.register-photo-button>input {
  float: right;
  padding-left: 60px;
  width: 60px;
  height: 60px;
  background-color: #f1f1f1;
  border-radius: 10px
}

.register-group-name {
  margin-bottom: 5px
}

.group_thumb-large {
  width: 138px;
  height: 138px
}

.group_thumb-midium {
  width: 121px;
  height: 121px
}

.group-members {
  padding-bottom: 20px
}

.checked-icon {
  width: 16px;
  vertical-align: -2px
}

.sort-category-card {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 110px;
  height: 39px;
  color: #B8B8B8;
  font-size: 13px;
  font-weight: bold;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1), 0px 10px 10px 0px rgba(0, 0, 0, 0.2);
  z-index: 20
}

.category-sort-icon {
  margin-top: -2px;
  margin-left: 5px;
  width: 20px;
  height: 20px
}

.group-sort-button.form-radio label {
  padding-left: 15px
}

.group-sort-button.form-radio>input[type="radio"]+label:before {
  content: none
}

.group-sort-button.form-radio>input[type="radio"]:checked+label:before {
  content: '';
  left: auto;
  right: 10px;
  width: 16px;
  height: 16px;
  background-image: url(//cdn.with.is/assets/groups/icn_selected-ac764f018f7450f0c5ace0b546a9e2a53885e72d3a79ed3e37d2475f83e86697.png);
  background-size: 100%
}

.group-participate {
  width: 100%;
  display: none
}

.group-participate.is-active {
  display: block
}

.groups-banner-space {
  position: relative;
  padding: 10px 10px 30px 10px;
  background-color: #fff
}

.groups-carousel-banners.slick-slider {
  position: relative;
  margin-bottom: 0;
  border-radius: 5px
}

.groups-carousel-banners.slick-slider .slick-dots {
  bottom: -30px
}

.groups-carousel-banners.slick-slider .slick-dots li {
  margin: 0
}

.carousel-banners_img {
  width: 100%;
  border-radius: 5px
}

.latest-konomi-best-users-container {
  margin-top: 20px
}

.latest-konomi-best-users-container a {
  text-decoration: none
}

.latest-konomi-best-users-container .title {
  padding-left: 20px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: bold
}

.new-konomi-best-users-carousel {
  width: 100%;
  margin: 10px 0
}

.new-konomi-best-users-carousel .user-cards-konomi-best {
  margin: 0 7px
}

.recommend-register-konomi-best {
  display: -webkit-box;
  display: flex;
  height: 50px;
  margin: 40px auto 20px;
  text-align: center;
  max-width: 335px;
  width: auto
}

.recommend-register-konomi-best .recommend-register-contents {
  position: relative;
  width: 100%;
  line-height: 50px;
  background-color: #ffeded;
  font-size: 15px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  padding-left: 35px
}

.recommend-register-konomi-best .recommend-register-contents:link, .recommend-register-konomi-best .recommend-register-contents:hover, .recommend-register-konomi-best .recommend-register-contents:active {
  background-color: #ffdcdc
}

.recommend-register-konomi-best .recommend-register-contents:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  width: 36px;
  height: 36px;
  background-image: url(//cdn.with.is/assets/shared/icons/plus_red-70a64c88b24b558ad22748c1dc0edd19a2a04c8aaf82a1bd342762f98f15fbaa.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.recommend-register-konomi-best .recommend-register-contents img {
  width: 17px;
  height: 24px;
  position: relative;
  bottom: 4px
}

.recommend-register-konomi-best.is-touching>.recommend-register-contents {
  background-color: #ffcccc
}

.slick-dots.latest-konomi-best-users {
  bottom: -30px
}

.slick-dots.latest-konomi-best-users>li {
  width: 4px
}

.slick-dots.latest-konomi-best-users>li>button:before {
  content: ' ';
  background-color: #000;
  border-radius: 3px;
  width: 5px;
  height: 5px;
  opacity: .1
}

.slick-dots.latest-konomi-best-users>li>button:hover:before {
  opacity: .1
}

.slick-dots.latest-konomi-best-users>li.slick-active>button:before, .slick-dots.latest-konomi-best-users>li.slick-active>button:hover:before {
  opacity: .35
}

.category-nav {
  position: initial;
  top: 50px;
  width: 100%;
  max-width: 700px;
  height: 75px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  border-top: 1px solid #ececeb;
  z-index: 10
}

.category-nav_list {
  width: 1550px;
  height: 70px
}

.category-nav_label {
  position: relative;
  padding: 5px 0;
  width: 70px;
  height: 70px;
  text-align: center;
  float: left;
  opacity: 0.8
}

.category-nav_label.is-active {
  opacity: 1
}

.category-nav_label.is-active .category-nav_label_circle {
  -webkit-animation: category-icon-pop 0.25s ease-in-out forwards;
  animation: category-icon-pop 0.25s ease-in-out forwards
}

.category-nav_label_circle {
  margin: 0 auto;
  width: 45px;
  height: 45px;
  border-radius: 25px;
  background-color: #fff
}

.category-nav_label_icon {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  margin: auto;
  width: 45px;
  height: 45px;
  background-image: url(//cdn.with.is/assets/groups/icon_group_categories-60e06093feea366354d9ac3a46630533bdd7598137e93c198bb07b50b90b6723.png);
  background-size: 3000% 200%;
  background-position: 0 0;
  background-repeat: no-repeat
}

.category-nav_label_icon[data-category-id="0"] {
  background-position: 0px 0
}

.category-nav_label_icon.is-active[data-category-id="0"] {
  background-position: 0px -45px
}

.category-nav_label_icon[data-category-id="1"] {
  background-position: -45px 0
}

.category-nav_label_icon.is-active[data-category-id="1"] {
  background-position: -45px -45px
}

.category-nav_label_icon[data-category-id="2"] {
  background-position: -90px 0
}

.category-nav_label_icon.is-active[data-category-id="2"] {
  background-position: -90px -45px
}

.category-nav_label_icon[data-category-id="3"] {
  background-position: -135px 0
}

.category-nav_label_icon.is-active[data-category-id="3"] {
  background-position: -135px -45px
}

.category-nav_label_icon[data-category-id="4"] {
  background-position: -180px 0
}

.category-nav_label_icon.is-active[data-category-id="4"] {
  background-position: -180px -45px
}

.category-nav_label_icon[data-category-id="5"] {
  background-position: -225px 0
}

.category-nav_label_icon.is-active[data-category-id="5"] {
  background-position: -225px -45px
}

.category-nav_label_icon[data-category-id="6"] {
  background-position: -270px 0
}

.category-nav_label_icon.is-active[data-category-id="6"] {
  background-position: -270px -45px
}

.category-nav_label_icon[data-category-id="7"] {
  background-position: -315px 0
}

.category-nav_label_icon.is-active[data-category-id="7"] {
  background-position: -315px -45px
}

.category-nav_label_icon[data-category-id="8"] {
  background-position: -360px 0
}

.category-nav_label_icon.is-active[data-category-id="8"] {
  background-position: -360px -45px
}

.category-nav_label_icon[data-category-id="9"] {
  background-position: -405px 0
}

.category-nav_label_icon.is-active[data-category-id="9"] {
  background-position: -405px -45px
}

.category-nav_label_icon[data-category-id="10"] {
  background-position: -450px 0
}

.category-nav_label_icon.is-active[data-category-id="10"] {
  background-position: -450px -45px
}

.category-nav_label_icon[data-category-id="11"] {
  background-position: -495px 0
}

.category-nav_label_icon.is-active[data-category-id="11"] {
  background-position: -495px -45px
}

.category-nav_label_icon[data-category-id="12"] {
  background-position: -540px 0
}

.category-nav_label_icon.is-active[data-category-id="12"] {
  background-position: -540px -45px
}

.category-nav_label_icon[data-category-id="13"] {
  background-position: -585px 0
}

.category-nav_label_icon.is-active[data-category-id="13"] {
  background-position: -585px -45px
}

.category-nav_label_icon[data-category-id="14"] {
  background-position: -630px 0
}

.category-nav_label_icon.is-active[data-category-id="14"] {
  background-position: -630px -45px
}

.category-nav_label_icon[data-category-id="15"] {
  background-position: -675px 0
}

.category-nav_label_icon.is-active[data-category-id="15"] {
  background-position: -675px -45px
}

.category-nav_label_icon[data-category-id="16"] {
  background-position: -720px 0
}

.category-nav_label_icon.is-active[data-category-id="16"] {
  background-position: -720px -45px
}

.category-nav_label_icon[data-category-id="17"] {
  background-position: -765px 0
}

.category-nav_label_icon.is-active[data-category-id="17"] {
  background-position: -765px -45px
}

.category-nav_label_icon[data-category-id="18"] {
  background-position: -810px 0
}

.category-nav_label_icon.is-active[data-category-id="18"] {
  background-position: -810px -45px
}

.category-nav_label_icon[data-category-id="19"] {
  background-position: -855px 0
}

.category-nav_label_icon.is-active[data-category-id="19"] {
  background-position: -855px -45px
}

.category-nav_label_icon[data-category-id="20"] {
  background-position: -900px 0
}

.category-nav_label_icon.is-active[data-category-id="20"] {
  background-position: -900px -45px
}

.category-nav_label_icon[data-category-id="21"] {
  background-position: -945px 0
}

.category-nav_label_icon.is-active[data-category-id="21"] {
  background-position: -945px -45px
}

.category-nav_label_icon[data-category-id="22"] {
  background-position: -990px 0
}

.category-nav_label_icon.is-active[data-category-id="22"] {
  background-position: -990px -45px
}

.category-nav_label_icon[data-category-id="23"] {
  background-position: -1035px 0
}

.category-nav_label_icon.is-active[data-category-id="23"] {
  background-position: -1035px -45px
}

.category-nav_label_icon[data-category-id="24"] {
  background-position: -1080px 0
}

.category-nav_label_icon.is-active[data-category-id="24"] {
  background-position: -1080px -45px
}

.category-nav_label_icon[data-category-id="25"] {
  background-position: -1125px 0
}

.category-nav_label_icon.is-active[data-category-id="25"] {
  background-position: -1125px -45px
}

.category-nav_label_icon[data-category-id="26"] {
  background-position: -1170px 0
}

.category-nav_label_icon.is-active[data-category-id="26"] {
  background-position: -1170px -45px
}

.category-nav_label_icon[data-category-id="27"] {
  background-position: -1215px 0
}

.category-nav_label_icon.is-active[data-category-id="27"] {
  background-position: -1215px -45px
}

.category-nav_label_icon[data-category-id="28"] {
  background-position: -1260px 0
}

.category-nav_label_icon.is-active[data-category-id="28"] {
  background-position: -1260px -45px
}

.category-nav_label_icon[data-category-id="29"] {
  background-position: -1305px 0
}

.category-nav_label_icon.is-active[data-category-id="29"] {
  background-position: -1305px -45px
}

.category-nav_label_title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  color: #FF5C63;
  text-align: center;
  font-size: 10px;
  font-weight: bold
}

.category-nav_fixed-space {
  width: 100%;
  height: 0;
  background-color: #fff
}

@-webkit-keyframes category-icon-pop {
  from {
    -webkit-transform: scale(0.1);
    transform: scale(0.1)
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  95% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes category-icon-pop {
  from {
    -webkit-transform: scale(0.1);
    transform: scale(0.1)
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  95% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.category-nav-slim {
  padding: 10px 0;
  width: 100%;
  max-width: 700px;
  height: 50px;
  overflow: hidden;
  background-color: #fff
}

.category-nav-slim.is-fixed {
  position: fixed;
  top: 60px;
  z-index: 80
}

.category-nav-slim_list {
  padding: 0 15px;
  width: 100%;
  height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap
}

.category-nav-slim_label {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border-radius: 15px
}

.category-nav-slim_label.is-selected {
  color: #fff;
  background-color: #FF999E
}

.group-tab-lp_illust {
  width: 100%;
  padding: 0 20px
}

.guidance, .first-like-guidance, .daigo-choice-users-guidance {
  position: fixed;
  top: 0;
  margin: 0;
  width: 100%;
  max-width: 700px;
  height: 100%;
  z-index: 30
}

.guidance {
  display: none;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 48%, #fff 77%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 48%, #fff 77%)
}

.guidance .daigo-guidance-close {
  position: absolute;
  top: 6%;
  left: 5%;
  z-index: 60
}

.guidance .daigo-guidance-close>img {
  width: 20px;
  height: 20px
}

.guidance .daigo-guidance-event-area .register-prof-guidance, .guidance .daigo-guidance-event-area .user-recommend-guidance {
  display: none;
  position: absolute;
  top: 32%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 75%;
  max-width: 400px
}

.guidance .daigo-guidance-event-area .register-prof-guidance>img, .guidance .daigo-guidance-event-area .user-recommend-guidance>img {
  width: 100%;
  height: 100%
}

.guidance .daigo-guidance-msgbox {
  position: absolute;
  bottom: 3%;
  left: 5%;
  width: 90%;
  height: 72px;
  background: #FFEDED;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05), 0 15px 20px 0 rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  z-index: 50
}

.guidance .daigo-guidance-msgbox .daigo-guidance-msg {
  margin: 10px 12px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87)
}

.guidance .daigo-guidance-msgbox .daigo-guidance-text {
  display: none
}

.guidance .daigo-guidance-msgbox .daigo-guidance-next {
  position: absolute;
  bottom: 10%;
  right: 2%;
  -webkit-animation: guidance-next-flash 1s infinite;
  animation: guidance-next-flash 1s infinite
}

.guidance .daigo-guidance-msgbox .daigo-guidance-next>img {
  width: 18px;
  height: 18px
}

.guidance-first-balloon {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 105px;
  height: 25px
}

@-webkit-keyframes guidance-message-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes guidance-message-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes guidance-next-flash {
  50% {
    opacity: 0
  }
}

@keyframes guidance-next-flash {
  50% {
    opacity: 0
  }
}

.first-like-guidance {
  display: none;
  background: rgba(0, 0, 0, 0.6)
}

.first-like-guidance .first-like-guidance-container .first-like-guidance-close {
  position: absolute;
  top: 9%;
  right: 5%;
  z-index: 60
}

.first-like-guidance .first-like-guidance-container .first-like-guidance-close>img {
  width: 20px;
  height: 20px
}

.first-like-guidance .first-like-guidance-container .first-like-guidance-tap {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center
}

.first-like-guidance .first-like-guidance-container .first-like-guidance-tap .guide_balloon_tap {
  width: 160px;
  height: 66px;
  margin-bottom: 20px
}

.first-like-guidance .first-like-guidance-container .first-like-guidance-tap .guide_gesture_tap {
  width: 50px;
  height: 64px
}

.first-like-guidance .first-like-guidance-container .first-like-guidance-footer {
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  bottom: 100px
}

.first-like-guidance .first-like-guidance-container .first-like-guidance-footer .first-like-guidance-skip, .first-like-guidance .first-like-guidance-container .first-like-guidance-footer .first-like-guidance-thanks {
  width: 140px;
  height: 58px;
  margin: 0 14px
}

.first-like-guidance .guidance-dummy .received-like-action.not-good, .first-like-guidance .guidance-dummy .received-like-action.thankyou {
  box-shadow: none
}

@-webkit-keyframes guidance-first-like-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes guidance-first-like-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes guidance-first-like-balloon-popup {
  0% {
    opacity: 0;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes guidance-first-like-balloon-popup {
  0% {
    opacity: 0;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes guidance-simple-popup {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes guidance-simple-popup {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.daigo-choice-users-guidance {
  display: none;
  background: rgba(0, 0, 0, 0.6)
}

.daigo-choice-users-guidance .daigo-choice-users-guidance-container .daigo-choice-users-guidance-footer {
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  bottom: 90px;
  z-index: 1
}

.daigo-choice-users-guidance .daigo-choice-users-guidance-container .daigo-choice-users-guidance-footer .daigo-choice-users-guidance-skip, .daigo-choice-users-guidance .daigo-choice-users-guidance-container .daigo-choice-users-guidance-footer .daigo-choice-users-guidance-like {
  width: 41%;
  height: 75%;
  margin: 0 15px;
  max-width: 155px
}

.daigo-choice-users-guidance .guidance-dummy button {
  box-shadow: none
}

@-webkit-keyframes guidance-daigo-choice-users-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes guidance-daigo-choice-users-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes guidance-daigo-choice-users-balloon-popup {
  0% {
    opacity: 0;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes guidance-daigo-choice-users-balloon-popup {
  0% {
    opacity: 0;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  70% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.homeicon-overlay, .homeicon-overlay>.is-iphone, .homeicon-overlay>.is-android {
  visibility: hidden
}

.is-visible.homeicon-overlay, .homeicon-overlay>.is-visible.is-iphone, .homeicon-overlay>.is-visible.is-android {
  visibility: visible
}

.homeicon-overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #2fcdd4;
  background-image: url(//cdn.with.is/assets/tutorial/homeicon/bg-c957d5b2b0e8652f678e0a5b5a2767042eb864e3a373fb4b4627134e8590612d.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%
}

.homeicon_close-button {
  position: fixed;
  right: 10px;
  top: 10px
}

.homeicon_close-button>img {
  width: 30px
}

.homeicon_likes-frame {
  position: absolute;
  top: 108px;
  left: 12px;
  width: 100%
}

.homeicon_likes-frame>.homeicon_thumbs {
  display: block;
  margin: 0 auto;
  width: 286px
}

.homeicon_thumb-left, .homeicon_thumb-right {
  position: relative;
  display: inline-block
}

.homeicon_thumb-left img, .homeicon_thumb-right img {
  width: 70px;
  border-radius: 35px
}

.homeicon_thumb-left {
  margin-right: 120px
}

.homeicon_main {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: -1
}

.homeicon_main>img {
  display: block;
  margin: 0 auto;
  width: 286px
}

.homeicon_balloon {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%
}

.homeicon_balloon>img {
  display: block;
  margin: 0 auto;
  width: 320px
}

.how-to-use-with img {
  width: 100%
}

.how-to-use-with section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center
}

.how-to-use-with .header-description {
  text-align: left;
  padding: 20px 15px
}

.how-to-use-with .header-4step>img {
  width: 45%;
  max-width: 250px
}

.how-to-use-with .steps {
  text-align: center
}

.how-to-use-with .steps>.step-title {
  width: 35%;
  max-width: 150px;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #606060;
  color: #fff;
  border-radius: 20px
}

.how-to-use-with .steps>h2 {
  margin-top: 10px;
  margin-bottom: 20px
}

.how-to-use-with .more-header {
  background-color: #fd696f;
  padding: 20px 15px
}

.how-to-use-with .more-header a {
  text-decoration: none;
  color: #fd696f
}

.how-to-use-with .more-header .more-create-profile {
  max-width: 400px;
  height: 50px;
  line-height: 50px;
  margin: 5px auto 20px;
  position: relative;
  background-color: #fff;
  border-radius: 25px
}

.how-to-use-with .more-header .more-create-profile img {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 20px
}

.how-to-use-with .more-header .more1-profile {
  max-width: 400px
}

.how-to-use-with .more-infos {
  margin: 10px 0;
  border: none
}

.how-to-use-with .more-infos-border {
  margin: 0 15px;
  padding: 0
}

.how-to-use-with .more-infos+.header-banners {
  border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.how-to-use-with .more-info-buttons {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin: 30px 7px 10px
}

.how-to-use-with .more-info-buttons .more-info-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 0 8px;
  background-color: #ff6873;
  border-radius: 25px;
  font-size: 14px;
  text-decoration: none;
  color: #fff
}

.how-to-use-with .header-banners>img {
  width: 70%;
  max-width: 350px
}

.how-to-use-with .banners {
  text-align: left;
  padding: 20px 15px
}

.how-to-use-with .banners .banner-img {
  margin-bottom: 15px
}

.how-to-use-with .banners>a {
  color: #ff6873
}

.how-to-use-with .banners>p {
  margin: 10px 0
}

.icon-message-read-receipt {
  display: inline-block;
  width: 23px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/icn_alreadyread-7c0b3e80e81b9dc20a7881056a2b2b8499b17536d889ff7d3589945fde700b34.svg);
  vertical-align: -3px
}

.icon-left {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  margin: auto
}

.identity-confirmations_body {
  padding: 20px 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  height: 100%;
  position: fixed;
  max-width: 700px
}

.identity-confirmations_main {
  -webkit-box-flex: 1;
  flex: 1
}

.identity-confirmations_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 24px;
  font-weight: bold;
  margin-top: 30px
}

.identity-confirmations_subtitle {
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
  margin-top: 10px
}

.identity-confirmations_name {
  color: #606060;
  font-size: 15px
}

.identity-confirmations_explanation {
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  margin-top: 40px
}

.identity-confirmations_input {
  margin-top: 40px
}

.identity-confirmations_last-access {
  color: rgba(0, 0, 0, 0.87);
  font-size: 11px;
  margin-top: 20px
}

.identity-confirmations_help {
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  text-decoration: underline;
  margin-top: 20px
}

.identity-confirmations_buttons {
  text-align: center
}

.identity-confirmations_deny {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
  display: block;
  margin: 20px 0 10px
}

.sub-photo_item-l {
  float: left
}

.sub-photo_item-l:link {
  text-decoration: none
}

.profile-konomi-empty_img {
  display: block;
  margin: 15px auto;
  width: 94px
}

.profile-konomi-empty_text {
  color: #999999
}

.profile-konomi-empty_link {
  padding: 0 15px
}

.profile-konomi-comments {
  position: relative;
  padding-bottom: 20px;
  border-bottom: 1px solid #ececeb
}

.konomi-comment-list {
  padding: 0 15px 15px
}

a.konomi-comment_item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none
}

.konomi-comment_item.arrow-right {
  padding-right: 15px
}

.konomi-comment_item.arrow-right:before {
  right: 0;
  background-position: -11px 0
}

.konomi-comment_item+.konomi-comment_item {
  margin-top: 20px
}

.konomi-comment_item_image {
  float: left;
  margin-right: 15px;
  width: 20%;
  min-width: 70px;
  max-width: 100px;
  border-radius: 10px
}

.konomi-comment_group_icon {
  width: 100%;
  height: 100%;
  border-radius: 10px
}

.konomi-comment_item_image.is-blank {
  position: relative;
  background-color: #b8b8b8
}

.konomi-comment_item_image.is-blank:before {
  content: "";
  display: block;
  padding-top: 100%
}

.konomi-comment_plus-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 24px;
  height: 24px
}

.konomi-comment_item_frame {
  overflow: hidden
}

.konomi-comment_name {
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
  font-weight: bold
}

.konomi-comment_text {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px
}

.konomi-comment_icon {
  width: 15px;
  height: 18px
}

.dialog-konomi {
  width: 100%;
  height: 170px
}

.dialog-konomi>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  border-radius: 15px 15px 0 0
}

.dialog-konomi-comment {
  width: 100%;
  height: 200px
}

.dialog-konomi-comment>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 220px;
  border-radius: 15px 15px 0 0
}

.konomi-comment_balloon {
  text-align: center;
  background-color: rgba(255, 72, 80, 0.8);
  position: relative;
  margin: 0 15px 20px;
  padding: 10px;
  width: auto;
  border-radius: 10px
}

.konomi-comment_balloon:after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 48%;
  width: 15px;
  height: 6px;
  background-image: url(//cdn.with.is/assets/shared/mouth_of_the_balloon-92d7a0eb62ce688053d31012ddef9776820c223ba4e53c65bca5e8dd18822357.png);
  background-repeat: no-repeat;
  background-size: 100% 100%
}

.konomi-comment_list_title {
  height: 50px;
  line-height: 50px
}

.konomi-comment_list_box {
  overflow: hidden;
  *zoom: 1;
  padding-left: 2.5%;
  width: 100%
}

.konomi-comment_bg_frame {
  display: block;
  position: relative
}

.konomi-comment_bg_img {
  width: 100%;
  border-radius: 5px
}

.konomi-comment_bg_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px
}

.konomi-comment_item_label {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: #fff;
  text-align: center
}

.konomi-comment_thumb {
  position: relative;
  margin: 0 auto 15px;
  width: 100px
}

.konomi-comment_thumb:before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  width: 24px;
  height: 29px;
  background-image: url(//cdn.with.is/assets/konomi_comments/icon_on_img-4d006163e52027f5ebb7588512cec8ae8df9f171b2276cdfe3a3e15f404f61d3.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.konomi-comment_thumb_img {
  width: 100px;
  border-radius: 10px
}

.konomi-comment_textarea {
  height: 80px;
  overflow: scroll
}

.konomi-pack_list-area {
  margin: 10px 0 20px
}

.konomi-pack_list-area .konomi-pack_list-title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
  align-items: flex-start;
  margin: 0 20px
}

.konomi-pack_list-area .konomi-pack_list-title .konomi-pack_list-balloon {
  margin: 2px 3px 0 0
}

.konomi-pack_list-area .konomi-pack_list-title .konomi-pack_list-balloon path {
  fill: inherit
}

.konomi-pack_list-area .konomi-pack_list-title .konomi-pack_list-link {
  margin-left: auto;
  position: relative
}

.konomi-pack_list-area .konomi-pack_list-title .konomi-pack_list-link:link {
  text-decoration: none
}

.konomi-pack_list-area .konomi-pack_list-title .konomi-pack_list-link .konomi-pack_list-arrow {
  width: 6px;
  height: 10px;
  margin-bottom: 3px
}

.konomi-pack_list-area .konomi-pack_list {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow: scroll
}

.konomi-pack_list-area .konomi-pack_list .konomi-pack {
  display: inline-block;
  vertical-align: top;
  width: 160px;
  height: 222px;
  margin: 5px 5px 10px
}

.konomi-pack_list-area .konomi-pack_list .konomi-pack:first-child {
  margin-left: 15px
}

.konomi-pack_list-area .konomi-pack_list .konomi-pack:last-child {
  margin-right: 15px
}

.konomi-pack_grid {
  display: -webkit-box;
  display: flex;
  padding: 20px 20px 10px;
  flex-wrap: wrap;
  overflow: auto
}

.konomi-pack_grid .konomi-pack {
  width: calc((100% - 20px) / 2);
  height: 100%;
  margin-bottom: 20px
}

.konomi-pack_grid .konomi-pack:nth-child(2n-1) {
  margin-right: 20px
}

.konomi-pack_detail_header {
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 30px 10px 20px;
  border-bottom: 1px solid #eaeaea
}

.konomi-pack_detail_header .konomi-pack_thumb-area {
  width: 150px;
  min-width: 150px;
  margin-right: 15px;
  background-color: #fff;
  border-radius: 15px
}

.konomi-pack_detail_header_contents {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center
}

.konomi-pack_detail_header_contents_group-count {
  position: relative;
  color: #999;
  margin-top: 15px;
  padding-left: 15px
}

.konomi-pack_detail_groups {
  padding: 20px 15px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap
}

.konomi-pack_detail_groups .group-card {
  width: calc((100% - 30px) / 3);
  margin-bottom: 20px
}

.konomi-pack_detail_groups .group-card:nth-child(3n+2) {
  margin: 0 15px 20px
}

.konomi-pack_action_button_join:before, .konomi-pack_action_button_leave:before {
  content: '';
  position: absolute;
  width: 37px;
  height: 21px;
  top: 17px;
  left: 18px;
  background-repeat: no-repeat;
  background-size: 100%
}

.konomi-pack_action_floating {
  position: fixed;
  z-index: 20;
  width: 90%;
  max-width: 650px;
  left: 50%;
  bottom: 20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  text-align: center;
  color: #fff
}

.konomi-pack_action {
  display: none
}

.konomi-pack_action.is-active {
  display: block
}

.konomi-pack_action>button {
  position: relative;
  width: 100%;
  height: 55px;
  line-height: 55px;
  font-size: 18px;
  font-weight: bold;
  color: inherit;
  border-radius: 30px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2)
}

.konomi-pack_action>button:link, .konomi-pack_action>button:visited, .konomi-pack_action>button:hover, .konomi-pack_action>button:active {
  color: inherit
}

.konomi-pack_action>button.is-touching {
  -webkit-animation: floating-card-button-transition 0.2s ease-out forwards;
  animation: floating-card-button-transition 0.2s ease-out forwards
}

.konomi-pack_action_button_join {
  background-color: #606060
}

.konomi-pack_action_button_join.is-touching {
  background-color: #e55e65
}

.konomi-pack_action_button_join:before {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/konomipack_on-814c8fb285929ab9477345379d775d16408181ec92043a9e24b367be0a1d0461.svg)
}

.konomi-pack_action_button_leave {
  background-color: #999999
}

.konomi-pack_action_button_leave.is-touching {
  background-color: #8c8c8c
}

.konomi-pack_action_button_leave:before {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/konomipack_off-65259a5607571dc04535dcea9cdb4e6903e2b3c632a7ab394e52915ff541b36c.svg)
}

.join-konomi_toast {
  width: 63px;
  height: 52px
}

.leave-konomi_toast {
  width: 55px;
  height: 40px
}

.leave-konomi_toast {
  margin: 10px 0 10px 15px
}

.konomi-pack {
  width: 100%
}

.konomi-pack a {
  text-decoration: none
}

.konomi-pack .konomi-pack_thumb-area {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.12)
}

.konomi-pack_thumb-area {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 15px;
  padding: 4px;
  border-radius: 15px
}

.konomi-pack_thumb-area .konomi-pack_thumb-img, .konomi-pack_thumb-area .konomi-pack_empty-img {
  width: calc((100% - 2px) / 2);
  border-radius: 10px
}

.konomi-pack_thumb-area .konomi-pack_thumb-img:nth-child(1), .konomi-pack_thumb-area .konomi-pack_empty-img:nth-child(1) {
  margin: 0 1px 1px 0
}

.konomi-pack_thumb-area .konomi-pack_thumb-img:nth-child(2), .konomi-pack_thumb-area .konomi-pack_empty-img:nth-child(2) {
  margin: 0 0 1px 1px
}

.konomi-pack_thumb-area .konomi-pack_thumb-img:nth-child(3), .konomi-pack_thumb-area .konomi-pack_empty-img:nth-child(3) {
  margin: 1px 1px 0 0
}

.konomi-pack_thumb-area .konomi-pack_thumb-img:nth-child(4), .konomi-pack_thumb-area .konomi-pack_empty-img:nth-child(4) {
  margin: 1px 0 0 1px
}

.konomi-pack_thumb-img {
  height: calc((100% - 2px) / 2)
}

.konomi-pack_empty-img {
  padding-top: calc((100% - 2px) / 2)
}

.konomi-pack_name, .konomi-pack_group-count {
  margin: 0 5px
}

.konomi-pack_name {
  margin-bottom: 3px;
  line-height: 1.4em;
  white-space: normal
}

.konomi-pack_detail_header_contents_group-count:before, .konomi-pack_group-count:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/konomipack_card_count-43c7a23b988c3e50a1a380053c57b0d0116fd7ad4cac49fadba9836d1376179f.svg);
  background-repeat: no-repeat
}

.konomi-pack_group-count {
  position: relative;
  color: #999999;
  padding-left: 15px
}

.like-chance-time-users-container {
  position: relative;
  overflow: auto;
  padding-top: 20px;
  padding-bottom: 80px;
  background: -webkit-linear-gradient(305deg, #ffc382 0%, #606060 10%);
  background: linear-gradient(145deg, #ffc382 0%, #606060 10%)
}

.like-chance-time-users-container_cross-button {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 20px;
  height: 20px
}

.like-chance-time-users-content {
  width: 92%;
  margin: auto;
  max-width: 500px
}

.like-chance-time-users-content .strip-user-card {
  border: 2px #fff solid
}

.like-chance-time-users-header {
  position: relative;
  height: 130px;
  background: url(//cdn.with.is/assets/like_chance_time/chance_time_header-f7d4671fab8e77a204477e0939494089f05b1721103e96b96a34ebde0857af6e.png) center/100% no-repeat
}

.like-chance-time-users-header_description {
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.like-chance-time-users-header_like-icon {
  width: 70px;
  height: 70px
}

.like-chance-time-users-header_description_large-text {
  font-size: 20px;
  font-weight: bold;
  color: #fff
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .like-chance-time-users-header_description_large-text {
    font-size: 18px
  }
}

.like-chance-time-users-header_info {
  display: -webkit-box;
  display: flex;
  background-color: #fff;
  color: #606060;
  border-radius: 15px;
  padding: 5px 15px;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 5px 0 15px
}

.like-chance-time-users-container .list-view-button {
  display: none
}

.likes-container-grid {
  background-color: #fff
}

.nav-likes {
  margin-left: auto;
  margin-right: auto;
  padding: 15px 15px 10px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  *zoom: 1
}

.nav-likes_item {
  display: inline-block;
  float: left;
  width: 50%;
  height: 30px;
  line-height: 2;
  color: #606060;
  font-size: 1.1em;
  background-color: rgba(0, 0, 0, 0.05)
}

.nav-likes_item:first-child {
  border-radius: 6px 0 0 6px
}

.nav-likes_item:last-child {
  border-radius: 0 6px 6px 0
}

.nav-likes_link {
  display: block;
  width: 100%
}

.nav-likes_link:link {
  text-decoration: none
}

.nav-likes_link:visited {
  color: #606060
}

.nav-likes_item.is-active {
  color: #fff;
  background-color: #606060
}

.nav-likes_item.is-active>.nav-likes_link:link {
  color: #fff
}

.nav-likes_item.is-active>.nav-likes_link:visited {
  color: #fff
}

.like-questions_illust {
  padding: 10px
}

.like-questions_sub-title {
  border-bottom: 1px solid #ececeb
}

.like-questions_sub-title_text {
  margin-bottom: 5px
}

.like-questions_actions {
  padding: 20px
}

.balloon-like {
  border-width: 1px
}

.balloon-like:after {
  bottom: -5px
}

.like-message_fullscreen {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  max-width: 700px;
  background: #fff
}

.like-message_fullscreen .container {
  height: 100%
}

.like-message_fullscreen .title {
  position: relative;
  top: 0;
  height: 55px;
  padding-top: 20px;
  padding-bottom: 20px
}

.like-message_fullscreen .title .close-button {
  background-image: url(//cdn.with.is/assets/like_message/close_button-f11af060aa694d80796a0c96ca6767b7ad7aab50c70990001ed8cacc095d971f.svg);
  background-size: contain;
  position: absolute;
  top: 20px;
  right: 15px;
  height: 20px;
  width: 20px
}

.like-message_fullscreen .target-header {
  top: 50px;
  width: 100%;
  max-width: 700px
}

.like-message_fullscreen .target-header .target-profiles .target-thumb {
  float: left;
  margin: 15px;
  width: 43px;
  height: 43px;
  border-radius: 50%
}

.like-message_fullscreen .target-header .target-profiles .target-profiles_detail {
  color: #606060;
  position: relative;
  display: block;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 10px
}

.like-message_fullscreen .target-header .target-profiles .target-profiles_detail .target-nickname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85px
}

.like-message_fullscreen .target-header .target-profiles .like-message-tips {
  color: #999999;
  position: absolute;
  right: 10px;
  top: 75px;
  border-radius: 30px;
  border: 1px solid #ececeb;
  padding: 10px 15px
}

.like-message_fullscreen .target-header .target-profiles .like-message-tips>img {
  width: 17px;
  height: 17px;
  margin-bottom: 2px
}

.like-message_fullscreen .target-header .target-profiles .like-message-tips.is-touching {
  background-color: #F2F2F2
}

.like-message_fullscreen .target-header .target-profiles a:link, .like-message_fullscreen .target-header .target-profiles a:visited, .like-message_fullscreen .target-header .target-profiles a:hover, .like-message_fullscreen .target-header .target-profiles a:active {
  color: #999999;
  text-decoration: none
}

.like-message_fullscreen .target-header .target-affinities_title {
  margin-left: 15px
}

.like-message_fullscreen .target-header .target-affinities {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0 15px;
  margin: 5px 0px 10px 0
}

.like-message_fullscreen .target-header .target-affinities ul {
  display: -webkit-box;
  display: flex;
  white-space: nowrap
}

.like-message_fullscreen .target-header .target-affinities ul li {
  display: inline-block;
  color: #f1f1f1;
  background-color: #FF999E;
  border: 1px solid #FF999E;
  border-radius: 30px;
  padding: 0 10px;
  margin-right: 5px
}

.like-message_fullscreen .create_like_message .like-message_textarea {
  height: 100%;
  width: 100%;
  padding: 10px;
  border: 1px solid #ececeb;
  border-width: 1px 0 1px 0
}

.like-message_fullscreen .counter {
  margin-right: 10px
}

.like-message_fullscreen .footer {
  position: absolute;
  bottom: 0;
  height: 190px;
  width: 100%;
  padding: 0 10px
}

.like-message-lp .message-note {
  padding: 0 20px 20px 20px
}

.like-message-lp .point-title {
  margin-top: 20px
}

.free-like-remain-count {
  font-size: 35px
}

.free-like-text {
  font-size: 13px;
  margin-top: 4px
}

.like-filter-toast {
  visibility: hidden
}

.like-filter-toast img {
  width: 48px;
  padding-bottom: 30px
}

#like-filter-wizard {
  display: none;
  position: absolute;
  right: 12px;
  top: 50px;
  width: 120px;
  padding: 5px 10px;
  z-index: 1;
  background: #606060;
  border-radius: 10px;
  color: #FFFFFF;
  line-height: 16px
}

#like-filter-wizard:after {
  content: '';
  position: absolute;
  top: -4px;
  right: 16px;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #606060;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  border-radius: 2px
}

.like-filter_vip-promote {
  z-index: 11;
  background: rgba(255, 255, 255, 0.8);
  height: 100%;
  width: 100%;
  max-width: 700px;
  position: absolute;
  padding-top: 150px
}

.like-filter_search-buttons button:first-child {
  width: 40%
}

.like-filter_search-buttons button:last-child {
  width: 60%
}

.like-filter_conditions {
  position: relative
}

.like-filter_conditions .like-filter_disabled-cover {
  background-color: #FFF;
  z-index: 1;
  height: 100%;
  position: absolute;
  top: 0px;
  width: 100%;
  opacity: 0.7
}

.dialog-like-chance {
  background-image: url(//cdn.with.is/assets/dialogs/like_chance/bg-049f44326eee513a1882342f6364b9629047cdefd509182afc922bd838fe04f7.png);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 300px;
  z-index: 100
}

.dialog-like-chance_img {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 310px
}

.dialog-like-chance_description {
  margin-top: 160px
}

.balloon-primary_img {
  background-image: url(//cdn.with.is/assets/dialogs/likes/balloon-675db66bc2dd877a05bb5bb1384d70448a43538d40bb2247cb73ae030c3aac65.svg);
  background-repeat: no-repeat;
  background-position: 12px 5px;
  padding-top: 10px;
  height: 60px
}

.like-dialog_balloon {
  position: relative;
  background: #ffdcdc;
  border-radius: 15px;
  padding: 8px;
  margin-top: 13px
}

.like-dialog_balloon:before {
  background-image: url(//cdn.with.is/assets/dialogs/likes/balloon_tail-b0d5fbd3cc1b8cb73ec039b79c2fb53855ec2c6fbeb4f450bbc381ea95d32cdd.svg);
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -15px;
  width: 15px;
  height: 6px
}

.like-dialog_promote-like-message {
  margin: 3px 0 5px;
  font-size: 13px;
  font-weight: bold;
  color: #606060
}

.like-dialog_promote-like-message_subtext {
  margin: 4px 0;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4)
}

.dialog_title.like-dialog_title {
  margin-bottom: 8px
}

#login-bonus {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 400px;
  width: 90%;
  z-index: 90;
  background-color: white;
  border-radius: 25px;
  box-shadow: 0px 0px 50px 1px #d9e6d7;
  display: none
}

.love-techniques_bg {
  position: relative;
  background-color: #182433;
  background-image: url(//cdn.with.is/assets/love_techniques/bg_top-6c634ff3e03f33a69e390926f6a13497b105a41ba3b7cf588662a163587d6674.jpg), url(//cdn.with.is/assets/love_techniques/bg_btm-5f5c2d6b07fc3e12e881329f541bf3d9f4d424a679e78743076a176ce4056321.png);
  background-size: 100%, 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 100%
}

.love-techniques_container {
  margin-left: auto;
  margin-right: auto;
  width: 320px
}

.love-techniques_title {
  width: 100%
}

ul.love-techniques_movies {
  padding-bottom: 40px
}

ul.love-techniques_movies li {
  margin: 0;
  padding: 0 10px
}

ul.love-techniques_movies li+li {
  margin-top: 20px
}

ul.love-techniques_movies iframe {
  width: 300px
}

.daigo-banner {
  padding: 10px
}

.lp-heading {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 64px;
  text-align: center;
  background-color: #FF999E;
  box-shadow: inset 0 1px 0 rgba(192, 192, 192, 0.3)
}

.text-lp-white {
  width: 100%;
  color: #fefefe;
  line-height: 1.2;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15)
}

.fb-login-action {
  width: 100%;
  height: 115;
  text-align: center;
  background-color: #FF999E;
  box-shadow: inset 0 1px 0 rgba(192, 192, 192, 0.3)
}

.fb-purpose-illust {
  width: 100%
}

.has-fb-icon:before {
  content: '';
  position: relative;
  display: inline-block;
  top: 9px;
  margin-right: 5px;
  width: 30px;
  height: 31px;
  background-image: url(//cdn.with.is/assets/fb_login/icn_fb_circle-d4289c2ebcc7b3f971ccfd317ace4f1f9e4abc7fc3a8bba83ff2784e2a7b1777.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.deprecated-page {
  position: relative;
  height: 100%;
  width: 100%
}

.deprecated-page .title-area {
  background-color: #ECECEC
}

.deprecated-page_title-area_icon {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 10px;
  display: inline-block;
  width: 11px;
  height: 18px;
  background-image: url(//cdn.with.is/assets/products/icn_arrow_primary-d9eff3b7a5ca3d29b22ba54232c8e079f93e5515c700075b95e36d2f6babe868.svg);
  background-repeat: no-repeat
}

.deprecated-page_body {
  position: absolute;
  opacity: 0.9;
  height: 100%;
  width: 100%;
  background-color: #5E5E5E
}

.deprecated-page_body_text-box {
  background: rgba(0, 0, 0, 0.4);
  height: 90px;
  width: 92%;
  margin: 50% auto;
  border-radius: 10px
}

.deprecated-page_body_text-box>p {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
  padding: 20px 0
}

.matchmaking-party_header {
  padding: 15vw 20px 20px;
  background-color: #FF767C;
  background-image: url(//cdn.with.is/assets/with_parties/header_bg_top-e8cf853a53d8317d5beef5e5758b6a4a6b03f3caf46890bc4f91ab227fbc97a6.png);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat
}

.matchmaking-party_header>img {
  display: block;
  margin: 0 auto 10px;
  width: 85%;
  max-width: 420px
}

.matchmaking-party_header_title_daigo {
  margin-bottom: 15px;
  color: #fff;
  text-align: center;
  font-size: 15px
}

.matchmaking-party_header_title_digest {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: bold
}

.matchmaking-party_outline {
  padding: 10px 5vw 50px;
  background-color: #FF767C;
  background-image: url(//cdn.with.is/assets/with_parties/header_bg_bottom-60a7ac8f33623147dbaf12ccb34e8ee8281216eb3d9757add70ec5bffc528237.jpg);
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat
}

.matchmaking-party_outline_frame {
  padding: 20px;
  width: 100%;
  color: #fff;
  font-size: 13px;
  text-align: center;
  -webkit-border-image: url(//cdn.with.is/assets/with_parties/frame-ef9c0e0a00fbcb8d70b2142a0ee5ac5bba0d5de3c5fe9c157ad561ddea8ee74b.png) 30 round;
  -o-border-image: url(//cdn.with.is/assets/with_parties/frame-ef9c0e0a00fbcb8d70b2142a0ee5ac5bba0d5de3c5fe9c157ad561ddea8ee74b.png) 30 round;
  border-image: url(//cdn.with.is/assets/with_parties/frame-ef9c0e0a00fbcb8d70b2142a0ee5ac5bba0d5de3c5fe9c157ad561ddea8ee74b.png) 30 round;
  border-style: solid;
  border-width: 15px
}

.matchmaking-party_outline_frame>.outline-label {
  font-size: 14px;
  font-weight: bold
}

.matchmaking-party_outline_frame>.outline-border {
  margin: 20px auto;
  width: 60px;
  border: 1px solid #d8d8d8;
  border-top: 0
}

.matchmaking-party_outline_heading {
  display: block;
  margin: 0 auto 30px;
  width: 200px
}

.matchmaking-party_sequence {
  background-color: #fff
}

.matchmaking-party_sequence_heading {
  padding: 10vw 15vw
}

.matchmaking-party_sequence_point {
  padding: 20px 12vw 50px;
  font-size: 14px
}

.matchmaking-party_notice {
  padding: 30px 20px;
  line-height: 1.8
}

.matchmaking-party_privacy-policy {
  width: 100%;
  height: 350px;
  overflow: scroll;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  background-color: #F2F2F2;
  border-radius: 10px
}

.matchmaking-party_privacy-policy>.contract {
  background-color: #F2F2F2
}

.matchmaking-party_agree {
  position: relative;
  margin-bottom: 30px;
  padding-left: 30px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px
}

.matchmaking-party_agree>input {
  display: none
}

.matchmaking-party_agree>label:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  background-size: 200% 100%;
  background-position: 100%;
  background-image: url(//cdn.with.is/assets/shared/icn_checkbox-7c72592e2cee307efe98b4bd7074a55426c4c68201136c121c18300626856bfc.png)
}

.matchmaking-party_agree>input[type="checkbox"]:checked+label:before {
  background-position: 0
}

.meet-up-item {
  height: 65px;
  position: relative;
  border-top: 1px solid #b8b8b8;
  border-bottom: 1px solid #b8b8b8
}

.meet-up-item>img {
  position: absolute;
  top: 6px;
  left: 5px;
  width: 44px;
  height: 50px
}

.meet-up-item>div {
  margin-top: 18px
}

dl.meet-up-event-description {
  padding: 0 20px
}

dl.meet-up-event-description>dt {
  font-size: 16px;
  margin-bottom: 5px;
  color: #606060;
  font-weight: bold
}

dl.meet-up-event-description>dd {
  margin-bottom: 5px
}

dl.meet-up-event-description>dd>p {
  margin: 0 0 0 10px
}

dl.meet-up-event-description .text-note {
  color: #707070
}

dl.meet-up-event-description .text-underline {
  text-decoration: underline
}

.entry-item {
  position: relative
}

.entry-item .partner-link {
  position: absolute;
  top: 6px;
  right: 0
}

.entry-item .partner-link a {
  text-decoration: none
}

.entry-item .partner-link a:visited {
  color: #606060
}

.entry-item+.entry-item {
  border-top: 1px solid #b8b8b8
}

.message_analysis-title-area {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  position: relative;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 60px;
  font-size: 15px;
  font-weight: bold;
  background-color: white;
  color: rgba(0, 0, 0, 0.87)
}

.message_analysis-note_head {
  color: rgba(0, 0, 0, 0.54);
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 14px
}

.message_analysis-note_item {
  color: rgba(0, 0, 0, 0.4);
  font-size: 11px
}

.message_analysis-note_item ul {
  width: 100%
}

.message_analysis-note_item li {
  background: url("//cdn.with.is/assets/mypages/message_analysis_agreement/note-list-style-10681e7ecd684c9ca9c2ccacd345d369f3d4dcae943a844933f0f7b014ffe9da.jpg") no-repeat left top 4px;
  background-size: 7px;
  padding-left: 10px
}

.message_analysis-note.has-border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 20px;
  padding-bottom: 20px
}

.message_analysis-how {
  background-color: #FF8D93;
  color: white;
  padding: 10px
}

.message_analysis-how dt {
  margin-top: 10px;
  font-weight: bold
}

.message_analysis-how dd {
  margin: 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7)
}

.message_analysis-use_title {
  font-size: 18px;
  font-weight: bold;
  color: #606060;
  margin-top: 25px
}

.message_analysis-agree {
  height: 50px
}

.message_analysis-disagree {
  border: none;
  background-color: transparent;
  text-decoration: underline;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.54)
}

.message_analysis-fixed-agree-area {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 700px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07)
}

.message-read-receipt-appeal {
  position: relative;
  float: left;
  clear: both;
  margin-left: 15px;
  width: 90%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 5px
}

.message-read-receipt-appeal_left {
  position: absolute;
  height: 85px;
  width: 5px;
  background: #FE787E;
  border-radius: 2.5px
}

.message-read-receipt-appeal_note {
  position: absolute;
  top: 5px;
  left: 15px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4)
}

.message-read-receipt-appeal_icon {
  width: 32px;
  height: auto;
  margin-right: 10px
}

.message-read-receipt-appeal_msg-box {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 20px 15px 0
}

.message-read-receipt-appeal_close {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center
}

.message-read-receipt-appeal_detail-link {
  display: inline-block;
  padding: 2px 10px 2px 0;
  font-size: 11px;
  color: #606060;
  font-weight: bold
}

.message-read-receipt-explanation-dialog_balloon {
  position: absolute;
  left: -30px;
  bottom: 10px;
  width: 100px
}

.message-read-receipt-explanation-dialog_menu {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 103px;
  right: 54px
}

.message-read-receipt-toast {
  background: #FF4850
}

.message-read-receipt-toast .toast_animation-container {
  margin-left: -10px;
  margin-bottom: 5px
}

.message-read-receipt-toast .toast_body {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px
}

.message-read-receipt-toast_points {
  font-size: 12px;
  padding: 2px 10px;
  border: 1px solid #fff;
  border-radius: 20px
}

.message_balloon.has-message[data-sender="me"]::after, .message_balloon.has-message[data-sender="partner"]::after {
  content: '';
  position: absolute;
  top: -6px;
  height: 16px;
  width: 13px;
  background-size: 100%
}

#topic-header {
  position: fixed;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  z-index: 10;
  height: 53px;
  width: 100%;
  max-width: 700px;
  padding: 13px 13px 10px 15px;
  border-bottom: 1px solid #ececeb
}

.topic-header_back-link {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 35px
}

.topic-header_back-link:before {
  content: '';
  position: absolute;
  top: 3px;
  width: 12px;
  height: 20px;
  left: 0;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/back-60d2e00a4d61034f7994ded42e7d6c414f1ffba6ee1e958a18790ba399044996.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.topic-header_config-btn {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 30px
}

.topic-header_config-btn:before {
  content: '';
  position: absolute;
  top: 4px;
  width: 4px;
  height: 18px;
  right: 5px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/more-2089555fe8a0ecf75d238abebd92cdca4a7c802071bd0681487fc4f620919d31.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.topic-header_contents {
  display: -webkit-box;
  display: flex;
  -webkit-box-flex: 1;
  flex: auto;
  width: 70%;
  padding-right: 10px
}

.topic-header_contents_thumb {
  margin-top: -3px;
  width: 30px;
  border-radius: 20px
}

.topic-header_contents_user-link {
  display: -webkit-box;
  display: flex;
  max-width: calc(100% - 35px)
}

.topic-header_contents_name {
  font-size: 15px;
  font-weight: bold;
  margin-left: 7px
}

.topic-header_contents_nickname-alias-icon {
  width: 35px;
  display: inline-block;
  text-align: center
}

.topic-body {
  width: 100%;
  padding-top: 55px
}

.topic-body_info {
  width: 92%;
  margin: auto;
  padding: 10px 0
}

.topic-body_info_each-photo {
  position: relative;
  height: 40px;
  width: 75px;
  margin: auto
}

.topic-body_info_each-photo_me {
  position: absolute;
  border-radius: 50%;
  top: -5px;
  height: 50px;
  width: 50px;
  left: -5px;
  border: 5px solid #fff
}

.topic-body_info_each-photo_other {
  position: absolute;
  border-radius: 50%;
  top: 0;
  height: 40px;
  width: 40px;
  left: 35px;
  -o-object-fit: cover;
  object-fit: cover
}

.topic-body_info_affinities_title {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: bold
}

.topic-body_info_affinities_area {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap
}

.affinities_badge {
  height: 30px;
  color: #606060;
  background-color: #ffeded;
  padding: 0 10px;
  line-height: 30px;
  border-radius: 17.5px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-right: 5px
}

.topic-body_info_affinities_area_more-btn {
  display: block;
  background-color: #f1f1f1;
  height: 35px;
  width: 105px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 35px;
  border-radius: 17.5px;
  margin: 15px auto 0
}

.topic-body_info_affinities_area_more-btn:link, .topic-body_info_affinities_area_more-btn:visited, .topic-body_info_affinities_area_more-btn:hover, .topic-body_info_affinities_area_more-btn:active {
  color: #999999;
  text-decoration: none
}

.messages {
  position: relative;
  padding: 65px 5px 0;
  height: auto
}

.messages .actions {
  width: 100%
}

.messages .actions.is-has-image {
  width: 86%
}

.messages .actions>button {
  width: 100%;
  line-height: 1.5;
  background-color: #606060
}

.messages .message_thumb {
  position: absolute;
  top: -15px;
  left: -35px;
  width: 30px;
  border-radius: 50%
}

.message_date-separator {
  clear: both;
  margin: 0 auto 20px;
  padding-left: 12px;
  padding-top: 1px;
  width: 90px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  border-radius: 10px;
  color: #fff
}

@media only screen and (min-width: 700px) {
  .message_date-separator {
    padding-top: 0
  }
}

.message_balloon {
  clear: both;
  position: relative;
  margin-bottom: 15px;
  width: auto;
  border-radius: 15px;
  font-size: 14px
}

.message_balloon[data-sender="me"] {
  margin-right: 10px;
  max-width: 87%;
  float: right
}

.message_balloon[data-sender="partner"] {
  margin-left: 35px;
  max-width: 68%;
  float: left
}

.message_balloon[data-sender="me"]+[data-sender="partner"] {
  margin-top: 15px
}

:not(.message_balloon)+.message_balloon[data-sender="partner"] {
  margin-top: 15px
}

.message_balloon.has-message[data-sender="me"] {
  position: relative;
  color: #fff;
  background-color: #606060;
  opacity: 0.9;
  margin-right: 10px;
}

.message_balloon.has-message[data-sender="me"]::before {


}

.message_balloon.has-message[data-sender="partner"] {
  background-color: #f1f1f1
}

.message_balloon.has-message[data-sender="partner"]::after {
  left: 2px;
  background-image: url(//cdn.with.is/assets/messages/tail_lightgray-6f14112ab98910d6036715c1760eae89f36e5a32e4e06d9ba1a7bd55273ae492.svg)
}

.message_balloon.has-message>p {
  padding: 5px 15px
}

.message_balloon.has-message strong {
  color: #606060;
  font-weight: bold
}

.message_balloon>p {
  margin: 0;
  line-height: 1.5;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text
}

.message_balloon a {
  color: inherit;
  text-decoration: underline
}

.message_balloon_photo {
  width: 100%;
  max-width: 256px;
  border-radius: 10px
}

.message_confirm_photo {
  margin: 0 auto;
  display: inherit;
  max-width: 256px;
  max-height: 256px;
  border-radius: 10px
}

.message_confirm_photo {
  margin: 0 auto;
  display: inherit;
  max-width: 256px;
  max-height: 256px;
  border-radius: 10px
}

.message_sent-at {
  clear: both;
  position: absolute;
  bottom: 0px;
  width: 30px;
  color: #b8b8b8;
  font-size: 11px
}

.message_sent-at.is-left {
  left: -37px;
  text-align: right
}

.message_sent-at.is-right {
  right: -37px
}

.message_mosaic {
  width: 215px;
  height: 75px
}

.message_check-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 42px
}

.message_touch-callout {
  -webkit-touch-callout: default
}

.topic-footer {
  position: fixed;
  height: 55px;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  max-width: 700px;
  max-height: 155px
}

.topic-footer_message-form {
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 10px 15px;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  background-color: #fff
}

.topic-footer_message-form_photo {
  display: inline-block;
  position: relative;
  height: 21px;
  width: 25px;
  background-color: #fff;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/camera-cd455d60cc88283ea3b2b7510de8cef2667c450a405202962efe0380dbc1eee2.svg)
}

.topic-footer_message-form_photo.is-disabled {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/camera_disable-a76022578426c35eb34b8c64e8343a9c9122155005d0f0f8c5882059942cc556.svg)
}

#message_form_photo, input[type=file]::-webkit-file-upload-button {
  width: 25px
}

.topic-footer_message-form_body {
  height: 35px;
  width: 80%;
  border-radius: 17.5px;
  background-color: #f1f1f1;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  caret-color: #606060;
  max-height: 135px
}

.topic-footer_message-form_submit {
  height: 23px;
  width: 25px;
  background-color: #fff
}



.topic-footer_message-form_submit.is-active {
  background-image: url('../img/ic.png')
}

.show-like-message.is-christmas {
  min-height: 280px;
  color: #fff;
  background-image: url(//cdn.with.is/assets/like_message/christmas_bg-b6aeccceed14fe84ce95745469c25f9c6f23c21e300af4b44c16a0f23b23d1f8.png);
  background-repeat: no-repeat;
  background-size: 100% 100%
}

.show-like-message_title {
  padding-bottom: 15px;
  color: #606060;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #606060
}

.show-like-message_scroll {
  padding-top: 10px;
  height: 100px;
  max-height: 320px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  font-size: 12px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .show-like-message_scroll {
    max-height: 220px
  }
}

.show-like-message_scroll>div {
  word-break: break-word
}

.topic_thumb {
  border-radius: 50%
}

.topic_thumb.is-list {
  width: 56px;
  height: 56px;
  margin-right: 10px
}

.topic {
  position: relative;
  margin: 0;
  width: 100%;
  background-color: #fff
}

.topic.is-new {
  background-color: #f0ffff
}

.topic_contents {
  display: -webkit-box;
  display: flex;
  padding: 10px 15px;
  width: 100%;
  height: 100%
}

.topic_contents:link {
  text-decoration: none
}

.topic-list:first-child {
  padding-top: 10px
}

.topic_names-wrap {
  display: -webkit-box;
  display: flex;
  font-size: 14px;
  margin-bottom: 5px;
  color: #606060
}

.topic_names-wrap .topic_nickname {
  margin-right: 3px
}

.topic_names-wrap .topic_age-address {
  white-space: nowrap;
  margin-right: 3px
}

.topic_message {
  font-size: 12px;
  height: 27px;
  line-height: 1;
  overflow: hidden
}

.topic_message .text-info {
  color: #37CBD2
}

.official-badge {
  width: 16px;
  height: 16px
}

.official-badge.is-recommend {
  position: absolute;
  bottom: 5px;
  right: 4px
}

.badge.has-noreply {
  font-size: 12px;
  padding: 0;
  color: #2cc4cb;
  background-color: transparent
}

.topic_partner {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 1;
  flex-grow: 1;
  width: 60%
}

.topic_partner .text-info {
  color: #2cc4cb
}

.topic_info-right {
  width: 50px;
  text-align: right
}

.topic_info-right .badge {
  right: 15px;
  bottom: 15px;
  top: auto
}

.head-missing-topics-list {
  padding: 0 15px 10px;
  border-bottom: 1px solid #eaeaea
}

.missing-topics_header {
  padding: 10px 0 5px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.87)
}

.missing-topics-list {
  display: -webkit-box;
  display: flex
}

.missing-topics_item {
  position: relative;
  margin-right: 20px;
  text-align: center
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .missing-topics_item {
    margin-right: 10px
  }
}

.missing-topics_item:link {
  text-decoration: none
}

.missing-topics_image {
  display: block;
  margin: 4px;
  width: 56px;
  height: 56px;
  border-radius: 50%
}

.missing-topics_image-hot {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px
}

.missing-topics_primary-info {
  font-size: 10px;
  color: #606060
}

.missing-topics_primary-info .online-badge {
  width: 7px;
  height: 7px;
  margin-right: 4px
}

.missing-topics_hour {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.87);
  letter-spacing: -0.5px
}

.mypage-container {
  position: relative;
  background-color: #fff
}

.mypage-container a:link, .mypage-container a:visited, .mypage-container a:hover, .mypage-container a:active {
  text-decoration: none
}

.mypage-profiles {
  width: 100%;
  padding: 25px 10px 0
}

.mypage-profile-container {
  width: 100%;
  border-bottom: 1px solid #eee
}

.mypage-profile {
  width: 100%;
  margin-bottom: 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.mypage-profile .mypage-profile_photo {
  margin-right: 20px;
  position: relative
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mypage-profile .mypage-profile_photo {
    margin-right: 7px
  }
}

.mypage-profile .mypage-profile_photo .mypage-profile_thumb {
  width: 80px;
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-radius: 40px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mypage-profile .mypage-profile_photo .mypage-profile_thumb {
    width: 70px
  }
}

.mypage-profile .mypage-profile_check-button {
  position: relative;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  padding: 0 15px;
  height: 45px;
  line-height: 45px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 35px;
  background-color: #fff
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mypage-profile .mypage-profile_check-button {
    font-size: 12px;
    min-width: 200px
  }
}

.mypage-profile .mypage-profile_check-button:before {
  vertical-align: -2px;
  margin-right: 10px;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icons/edit-980503dcb9813b4e2d2da6c9e0a088704f12cca061e962cd5d1dd312f72aee65.svg)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mypage-profile .mypage-profile_check-button:before {
    margin-right: 7px
  }
}

.mypage-profile .mypage-profile_check-button:active {
  background: #F2F2F2;
  border: 1px solid rgba(0, 0, 0, 0.2)
}

.mypage-profile .mypage-profile_check-button_badge {
  position: absolute;
  width: 40px;
  height: 40px;
  top: -15px;
  right: -15px
}

.mypage-statuses {
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 15px
}

.mypage-statuses .mypage-status {
  height: 70px;
  padding: 10px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px
}

.mypage-statuses .mypage-status .mypage-status-header {
  color: rgba(0, 0, 0, 0.6)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mypage-statuses .mypage-status .mypage-status-header {
    font-size: 10px
  }
}

.mypage-statuses .has-like>.mypage-status-header:before {
  vertical-align: -1px;
  width: 15px;
  height: 12px;
  margin-right: 1px;
  background-image: url(//cdn.with.is/assets/shared/icons/likes-de9b9fb534bf691c0c83125f41233ef1ce02531aeb1fda1101c7aab1568165e5.svg)
}

.mypage-statuses .has-point>.mypage-status-header:before {
  vertical-align: -3px;
  width: 15px;
  height: 15px;
  margin-right: 1px;
  background-image: url(//cdn.with.is/assets/shared/icons/point-13022b529ea3220c018a44897946eab5913d018375c5f482c11452b24a92b2bc.svg)
}

.mypage-statuses .has-like .mypage-status-contents, .mypage-statuses .has-point .mypage-status-contents {
  color: #000;
  font-size: 24px
}

.mypage-statuses .has-status .mypage-status-contents {
  font-weight: 600
}

.mypage-statuses .has-status .status-male-free-vip_false, .mypage-statuses .has-status .status-male-free-vip_true, .mypage-statuses .has-status .status-male-regular-vip_false, .mypage-statuses .has-status .status-male-regular-vip_true, .mypage-statuses .has-status .status-female-free-vip_false, .mypage-statuses .has-status .status-female-free-vip_true, .mypage-statuses .has-status .status-female-regular-vip_false, .mypage-statuses .has-status .status-female-regular-vip_true {
  width: 95px;
  height: 40px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0 1px
}

.mypage-statuses .has-status .status-male-free-vip_false {
  background-image: url(//cdn.with.is/assets/shared/icons/status/free-25bf20ee3f7d3d8a1c386393cad5c6cc9244880f4615f8d3cc666ad00e3d5699.png)
}

.mypage-statuses .has-status .status-male-free-vip_true {
  background-image: url(//cdn.with.is/assets/shared/icons/status/free_vip-4c9b6b010787ceddf5bc4066cacefed74367c333ad03c2016a300cfd39c55047.png)
}

.mypage-statuses .has-status .status-male-regular-vip_false {
  background-image: url(//cdn.with.is/assets/shared/icons/status/regular-7876d71c8ae6667548d1c304bfc5dac8a62a86f71badba2b3be8746a0696a54b.png)
}

.mypage-statuses .has-status .status-male-regular-vip_true {
  background-image: url(//cdn.with.is/assets/shared/icons/status/regular_vip-ccaf171dbb2420d4b4de6cf736b1a9003f6cde5f6e7568353610b5b82de1db9b.png)
}

.mypage-statuses .has-status .status-female-free-vip_false {
  background-image: url(//cdn.with.is/assets/shared/icons/status/unauthorized-961c50aa1e7fd78bd600599f2917fb66754524b5723e62cfc69b2265961bf060.png)
}

.mypage-statuses .has-status .status-female-free-vip_true {
  background-image: url(//cdn.with.is/assets/shared/icons/status/unauthorized_vip-de73ab7549e47f61666fe1f76f5cf0228b7463c9f6c5198a401e5af0d31948c8.png)
}

.mypage-statuses .has-status .status-female-regular-vip_false {
  background-image: url(//cdn.with.is/assets/shared/icons/status/authorized-a2bb927df79048f3dd683f5fed5297641e7b1cd79196714f095f78ae3474dad2.png)
}

.mypage-statuses .has-status .status-female-regular-vip_true {
  background-image: url(//cdn.with.is/assets/shared/icons/status/authorized_vip-3790b6d99d5bd44e53165395c5edfe970460f8e052c5c601ed517182dd48365e.png)
}

.mypage-menus {
  width: 100%;
  padding: 10px 10px 0
}

.mypage-menu-container {
  width: 100%;
  border-bottom: 1px solid #eee;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap
}

.mypage-menu-container a:link, .mypage-menu-container a:visited, .mypage-menu-container a:hover, .mypage-menu-container a:active {
  color: #999
}

.mypage-menu-contents {
  width: calc(100% / 3);
  max-width: 226px;
  height: 100%;
  padding: 10px 0;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center
}

.mypage-menu-contents .mypage-menu-label {
  margin-top: 12px
}

.mypage-menu-contents .mypage-badge_wrap {
  position: absolute;
  margin-left: 33px;
  top: 5px
}

.mypage-menu-contents .mypage-badge_wrap .badge {
  background-color: #606060;
  background-clip: padding-box;
  font-size: 10px;
  padding: 3px 5px;
  box-sizing: content-box
}

.mypage-menu-contents .mypage-badge_wrap.mypage-notification .badge {
  border: 3px solid #FFF;
  padding: 0
}

.mypage-menu-contents.is-touching {
  -webkit-animation: mypage-menu-transition-contents 0.2s ease-out forwards;
  animation: mypage-menu-transition-contents 0.2s ease-out forwards;
  border-radius: 5px
}

@-webkit-keyframes mypage-menu-transition-contents {
  100% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    background-color: rgba(0, 0, 0, 0.05)
  }
}

@keyframes mypage-menu-transition-contents {
  100% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    background-color: rgba(0, 0, 0, 0.05)
  }
}

.mypage-banners {
  padding: 10px
}

.my-profiles-buttons {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 600px;
  margin: 0px auto 20px;
  text-align: center
}

.my-profiles-buttons .my-profiles-edit {
  width: 90%;
  margin-bottom: 15px
}

.my-profiles-buttons .my-profiles-sample {
  width: 70%
}

.my-profile-bottom-wrap {
  position: fixed;
  height: 115px;
  max-width: 700px;
  width: 100%;
  /* background: #f7ffff; */
  bottom: 0;
  z-index: 20;
  padding: 15px;
  font-weight: bold
}

.my-profile-edit-button {
  position: relative;
  display: block;
  margin: auto;
  width: 92%;
  padding: 0 20px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-radius: 23px
}

.my-profile-edit-button:link, .my-profile-edit-button:hover, .my-profile-edit-button:visited {
  color: #fff;
  text-decoration: none
}

.my-profile-edit-button:before {
  position: absolute;
  left: 20px;
  top: 25%;
  width: 20px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/edit_white-273cba75397b3189439c02e73c7fe1b722729aff98fd18ed1e6b78205842afef.svg)
}

.my-profile-sample-button {
  position: relative;
  display: block;
  margin: auto;
  top: 15px;
  text-align: center;
  width: 90%
}

.my-profile-sample-button:link, .my-profile-sample-button:hover, .my-profile-sample-button:visited {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6)
}

.my-profile-sample-button:after {
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/arrow_gray-c67213b4846383a5852c2dfc7b73f738a859e1aaf9d46489af34988a717bc68d.svg);
  top: 1px;
  margin-left: 5px
}

.my-profile-mission-balloon {
  position: absolute;
  width: 92%;
  bottom: 70px;
  left: 0;
  right: 0;
  margin: auto
}

.status_heading {
  text-align: center
}

.subscription_heading {
  color: #fff
}

.free_heading {
  color: #fff;
  background-color: #B8B8B8
}

.subscription_heading {
  background-color: #ff9797
}

.platinum_heading {
  background-color: #F4E4CE
}

.vip_heading {
  color: #fff;
  background-image: -webkit-linear-gradient(left top, #EBDDAE 0%, #D8B463 30%, #BE8142 100%);
  background-image: linear-gradient(to right bottom, #EBDDAE 0%, #D8B463 30%, #BE8142 100%)
}

.table_body.free_body {
  border: 1px solid #B8B8B8;
  border-radius: 0 10px 10px 0
}

.table_body.regular_body {
  border: 1px solid #ff9797;
  border-radius: 0 10px 10px 0
}

.vip_body, .table_body.vip_body {
  border: 1px solid #C6904C;
  border-radius: 0 10px 10px 0
}

span.rm_days {
  font-weight: 600
}

.like-primary {
  width: 18px;
  height: 14px;
  margin-bottom: 4px
}

.favorite-controller {
  background-color: #fff
}

.favorite-controller_summary {
  padding-top: 10px;
  text-align: center
}

.campaign-illust {
  width: 100%
}

.point-uses-illust {
  width: 100%
}

.product-point-usage-title {
  height: 45px;
  line-height: 45px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  background-color: #FFA4A4
}

.product-point-usage {
  background-color: #ffe0e0
}

.with-heading-icon {
  position: relative;
  padding-left: 35px;
  line-height: 1.2
}

.with-heading-icon:before {
  content: '';
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  bottom: 2px;
  left: 0;
  display: inline-block;
  width: 30px;
  height: 31px;
  background-repeat: no-repeat;
  background-size: 100%
}

.with-heading-icon[data-icon-num="1"]:before {
  background-image: url(//cdn.with.is/assets/shared/icn_heading_1-2a785cb63f53b854cfbc1670df8e86646a781df35cd6f6659eab7aa94348c6bb.png)
}

.with-heading-icon[data-icon-num="2"]:before {
  background-image: url(//cdn.with.is/assets/shared/icn_heading_2-f8cda3fa3ac6876d566086b24fc5f6407245190f4598d5879a09fc52ad9f5711.png)
}

.with-heading-icon[data-icon-num="3"]:before {
  background-image: url(//cdn.with.is/assets/shared/icn_heading_3-ec3c419154e0c9fd44af84a43fd053e6f10abc67a7fe445accd58e88c159de8e.png)
}

.auth-status_step {
  text-align: center
}

.auth-status_step img {
  width: 100%
}

.auth-status_title {
  text-align: center;
  color: #606060;
  font-weight: bold;
  font-size: 16pt
}

.auth-status_illusts {
  background-color: #ff8b90;
  border-radius: 5px;
  padding: 15px 0;
  text-align: center
}

.auth-status_illusts>img {
  height: 78px;
  width: auto;
  margin: 0 3px
}

.auth-status_wrapper {
  background-color: #ff8b90;
  padding: 15px 0 10px 0
}

.auth-status_wrapper>.auth-status_title {
  font-size: 11pt;
  color: #ffffff
}

.auth-status_wrapper>.auth-status_illusts {
  background-color: transparent
}

.auth-status_wrapper>.auth-status_illusts>img {
  margin: 0 6px
}

.auth-status_body {
  text-align: left;
  color: #4c4c4c
}

.auth-status_merits {
  position: relative;
  width: 100%
}

.auth-status_merits-background {
  position: relative
}

.auth-status_merits-background>img {
  width: 100%;
  height: auto
}

.auth-status_merits-content {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 0 10px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  max-width: 100%
}

.auth-status_merits-content .auth-status_merit-items>img {
  display: inline-block;
  width: 100%;
  margin: 5px 0
}

.auth-status_merit-title {
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 14pt;
  text-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
  margin: 0 0 5px 0
}

.downgrade-notice {
  font-size: 13px;
  padding: 10px 10px;
  background-color: rgba(213, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.87);
  border-radius: 10px;
  list-style: disc
}

.downgrade-notice li {
  margin-left: 1.5em
}

.mypage_footprint-free-like_container {
  width: 100%;
  height: 50px;
  background: -webkit-linear-gradient(left, #FFEDED, #FFD3D3);
  background: linear-gradient(to right, #FFEDED, #FFD3D3);
  position: relative
}

.mypage_footprint-free-like_contents {
  display: -webkit-box;
  display: flex;
  max-width: 550px;
  height: 100%;
  margin: auto;
  padding: 0 10px;
  -webkit-box-align: center;
  align-items: center
}

.mypage_footprint-free-like_icon {
  width: 23px;
  height: 20px
}

.mypage_footprint-free-like_text {
  margin-left: 10px;
  font-size: 11px;
  color: #606060
}

.mypage_footprint-free-like_button {
  margin-left: auto;
  width: 70px;
  height: 30px;
  line-height: 30px;
  font-size: 11px;
  font-weight: bold;
  color: #606060 !important
}

.mypage_footprint-free-like_balloon {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto
}

.mypage_doctor-notification-container {
  position: relative;
  display: block;
  height: 50px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  opacity: 1 !important
}

.mypage_doctor-notification-container:hover:after, .mypage_doctor-notification-container:active:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1)
}

.mypage_doctor-notification-container.is-first-visit {
  font-size: 14px
}

.mypage_doctor-notification-container.is-first-visit, .mypage_doctor-notification-container.is-need-improve, .mypage_doctor-notification-container.is-mission-open {
  background-image: -webkit-linear-gradient(left, #FF757B 0%, #FE636B 100%);
  background-image: linear-gradient(90deg, #5c5c5c 0%, #ffffff 100%);
}

.mypage_doctor-notification-container.is-improved {
  background-image: -webkit-linear-gradient(left, #3BE4A1 0%, #00C9B5 100%);
  background-image: linear-gradient(90deg, #3BE4A1 0%, #00C9B5 100%)
}

.mypage_doctor-notification_contents {
  position: relative;
  max-width: 550px;
  display: -webkit-box;
  display: flex;
  margin: auto;
  padding: 0 10px;
  text-align: left;
  -webkit-box-align: center;
  align-items: center;
  height: 100%;
  color: #FFF
}

.mypage_doctor-notification_icon {
  width: 22px;
  vertical-align: -5px;
  margin-right: 5px
}

.mypage_doctor-notification_message {
  -webkit-box-flex: 1;
  flex: 1
}

.mypage_doctor-notification_button {
  padding: 0 10px;
  line-height: 30px;
  height: 30px;
  font-size: 11px;
  border-radius: 15px;
  border: 1px solid #FFF;
  background: transparent
}

.mypage_doctor-notification_balloon {
  position: absolute;
  right: 15.5%
}

.mypage_edit-top {
  position: relative;
  background-color: #fff
}

.mypage_edit-top .mypage_edit_thumb {
  width: 130px;
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-radius: 65px
}

.mypage_edit-main_photo {
  position: absolute;
  margin: auto;
  top: 45px;
  left: 0;
  right: 0;
  width: 130px
}

body.desktop .mypage_edit-main_photo:hover .select-main-photos {
  opacity: 0.8
}

body.mobile .mypage_edit-main_photo.is-touching .select-main-photos {
  opacity: 0.8
}

.select-main-photos {
  position: absolute;
  top: 130px;
  left: calc(50% + 25px)
}

.select-main-photos>img {
  width: 40px;
  height: 40px
}

.select-main-photos label {
  display: inline-block
}

.main-photo-notification {
  position: absolute;
  top: 8px;
  left: 8px
}

.main-photo-notification>img {
  width: 20px;
  height: 20px
}

.mypage_edit-cover {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%
}

.mypage_edit-cover:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%)
}

.mypage_edit-edit-cover {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 110px;
  color: #fff;
  text-align: right
}

.mypage_edit-edit-cover:link, .mypage_edit-edit-cover:visited {
  color: #fff
}

.mypage_edit-edit-cover>span {
  position: absolute;
  top: 16px;
  right: 20px;
  line-height: 1
}

.mypage_edit-cover-icon {
  width: 15px;
  height: 12px;
  margin-bottom: 1px
}

.mypage_edit-tweet {
  padding: 80px 15px 20px
}

.mypage_edit-tweet-balloon {
  position: relative;
  width: 100%
}

.mypage_edit-tweet-balloon:after {
  content: '';
  display: block;
  position: absolute;
  margin: auto;
  top: -9px;
  left: 0;
  right: 0;
  width: 20px;
  height: 12px;
  background-image: url(//cdn.with.is/assets/shared/balloon_tail_gray-e69c466846dad38b268e6337465f333f489e4bfa0e582a06ce33bc9ba5dff480.png);
  background-repeat: no-repeat;
  background-size: 100% 100%
}

.mypage_edit-tweet-balloon>a {
  display: block;
  padding: 0 30px 0 20px;
  width: 100%;
  height: 38px;
  line-height: 2.2;
  text-overflow: ellipsis;
  background-color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px
}

.mypage_edit-tweet-balloon>a:link, .mypage_edit-tweet-balloon>a:visited {
  color: #606060;
  text-decoration: none
}

.mypage_edit-tweet-balloon .mypage_edit-tweet-content {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.mypage_edit-tweet-balloon_icon {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 15px;
  opacity: 0.6
}

body.desktop .mypage_edit-tweet-balloon:hover {
  opacity: 1.0
}

body.mobile .mypage_edit-tweet-balloon.is-touching {
  opacity: 1.0
}

.mypage_open-photo-advice-lp {
  padding: 0 15px 20px
}

.mission-area {
  background-image: -webkit-linear-gradient(315deg, #fff, rgba(255, 104, 115, 0.53));
  background-image: linear-gradient(135deg, #fff, rgba(255, 104, 115, 0.53));
  border-radius: 10px
}

.mission-area_title {
  padding: 10px 15px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  font-weight: bold;
  text-align: center
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mission-area_title {
    padding: 10px
  }
}

.mission-area_contents {
  clear: both;
  margin: 0 auto;
  width: 316px;
  height: 234px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mission-area_contents {
    width: 270px;
    height: 200px
  }
}

.mission-area_item {
  margin: 0 5px;
  width: 94px;
  height: 120px;
  float: left
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mission-area_item {
    width: 80px;
    height: 100px
  }
}

.mission-area_item_profit {
  display: -webkit-box;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-bottom: 5px;
  width: 94px;
  height: 70px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mission-area_item_profit {
    width: 80px;
    height: 60px
  }
}

.mission-area_item_profit.is-clear {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: none
}

.mission-area_icn-clear {
  width: 52px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mission-area_icn-clear {
    width: 44px
  }
}

.mission-area_icn-point {
  width: 46px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mission-area_icn-point {
    width: 40px
  }
}

.mission-area_item_profit .mission-no {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 18px;
  height: 18px;
  color: #fff;
  font-size: 10px;
  text-align: center
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mission-area_item_profit .mission-no {
    width: 15px;
    height: 15px;
    line-height: 15px
  }
}

.mission-area_item_profit .mission-no span {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 15px
}

.mission-area_item_profit .mission-no.is-bg {
  border-radius: 10px;
  background-color: #FF6873
}

.mission-area_item_profit .mission-no.is-bg1 {
  -webkit-animation: mission-area-mission-no-bg1 2s ease-in-out infinite;
  animation: mission-area-mission-no-bg1 2s ease-in-out infinite
}

.mission-area_item_profit .mission-no.is-bg2 {
  opacity: 0;
  -webkit-animation: mission-area-mission-no-bg2 2s ease-in-out infinite;
  animation: mission-area-mission-no-bg2 2s ease-in-out infinite
}

@-webkit-keyframes mission-area-mission-no-bg1 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  30% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  40% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes mission-area-mission-no-bg1 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  30% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  40% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes mission-area-mission-no-bg2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  40% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0
  }

  50% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 0.3
  }

  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0
  }
}

@keyframes mission-area-mission-no-bg2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  40% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0
  }

  50% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 0.3
  }

  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0
  }
}

.mission-area_item_category {
  color: rgba(0, 0, 0, 0.7);
  font-size: 11px;
  font-weight: bold;
  text-align: center
}

.mission-area_item_category span {
  font-size: 10px;
  font-weight: normal
}

.mission-area_item_achievement {
  width: 100%;
  height: 5px;
  background-color: #fff;
  border-radius: 3px
}

.mission-area_item_achievement .progress-bar {
  float: left
}

.mission-area_item_achievement .progress-bar div {
  -webkit-animation: progress-bar 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards;
  animation: progress-bar 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards;
  background-color: #FF6873;
  border-radius: 3px
}

.profile-sub-photo-list {
  overflow-x: scroll;
  white-space: nowrap;
  margin-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100px
}

.sub-photo-list-box {
  overflow: hidden;
  padding: 15px;
  width: 100%
}

.sub-photo_item-l {
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 105px;
  height: 105px
}

.sub-photo_item-m {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  width: 80px;
  height: 80px;
  background-color: #b8b8b8;
  border-radius: 40px
}

.sub-photo_item-m:link {
  text-decoration: none
}

.sub-photo_item-m>a {
  display: block;
  width: 100%;
  height: 100%
}

.sub-photo_item_label {
  position: absolute;
  bottom: 5px;
  text-align: center;
  font-size: 12px;
  width: 100%;
  color: white
}

.sub-photo_item_label:hover {
  color: white
}

.sub-photo_item_label:active {
  color: white
}

.user-photos_image {
  width: 100%;
  border-radius: 40px
}

.user-photos_image_l {
  width: 100%;
  border-radius: 55px
}

.sub-photo-empty-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 35px;
  height: 35px
}

.sub-photo-sample-link-right {
  float: right;
  margin-right: 20px
}

.sub-photo-sample-link-right span {
  vertical-align: middle
}

.profile-sub-photo_count, .profile-introduction_count {
  float: right;
  padding-right: 15px;
  height: 50px;
  line-height: 50px;
  color: #999999;
  font-size: 10px
}

.form-link-cell.is-blank {
  color: #999999
}

select.is-blank {
  color: #000000;
}

.profile-introduction_empty-link {
  padding: 15px
}

.profile-introduction_edit-link {
  position: relative;
  display: block;
  padding: 15px 30px 15px 15px;
  line-height: 20px;
  color: #999999;
  text-decoration: none
}

.profile-introduction_edit-link:link, .profile-introduction_edit-link:visited {
  color: #999999;
  text-decoration: none
}

.profile-introduction_edit-link .icon-arrow-right {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px
}

.profile-introduction_edit-link_shading {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%
}

.profile-edit, .profile-event {
  position: relative
}

.profile-edit>.text-primary, .profile-event>.text-primary {
  padding-left: 15px;
  height: 50px;
  line-height: 3.5
}

.profile-help-link {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 22px
}

.profile-edit_lists {
  padding: 0 15px
}

.profile-edit_lists .profile-item.type-table .form-select-cell {
  padding-right: 0
}

.mypage_profile-status {
  position: absolute;
  right: 40px;
  text-align: right
}

.mypage_profile-status.is-blank {
  color: #999999
}

.large-photo-image {
  width: 100%
}

.nickname-edit-note {
  padding-top: 10px
}

.nickname-edit-note ul {
  padding-left: 15px;
  list-style: disc
}

.profile_introduction-textarea_square {
  padding: 15px;
  height: 255px;
  overflow: scroll;
  border: none;
  border-bottom: 1px solid #ececeb;
  border-radius: 0
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .profile_introduction-textarea_square {
    height: 150px
  }
}

.profile_introduction-textarea {
  height: 255px;
  overflow: scroll
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .profile_introduction-textarea {
    height: 150px
  }
}

.profile_multi-columns {
  margin-top: -10px
}

.introduction-samples {
  margin-top: 10px
}

.introduction-samples.slick-slider {
  margin-bottom: 44px
}

.introduction-samples .slick-prev, .introduction-samples .slick-next {
  top: auto;
  bottom: -31px;
  z-index: 1
}

.introduction-samples .slick-prev:before, .introduction-samples .slick-next:before {
  color: #999999
}

.introduction-samples .slick-prev {
  left: 0
}

.introduction-samples .slick-next {
  right: 0
}

.introduction-samples .slick-dots {
  bottom: -31px
}

.introduction-samples .slick-dots li.slick-active button:before {
  color: #606060
}

.introduction-samples_item {
  height: 255px;
  overflow: scroll;
  text-align: left
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .introduction-samples_item {
    height: 150px
  }
}

.introduction-samples_list {
  position: relative;
  display: block;
  margin-top: -20px;
  padding-left: 15px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1.2;
  font-size: 12px;
  font-weight: bold
}

.introduction-samples_button {
  position: relative;
  padding-right: 10px;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer
}

.introduction-samples_button:link, .introduction-samples_button:hover, .introduction-samples_button:visited {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none
}

.introduction-samples_button:after {
  content: '';
  display: inline-block;
  margin-top: -3px;
  width: 11px;
  height: 15px;
  vertical-align: middle;
  background-image: url(//cdn.with.is/assets/shared/icn_arrow-e084cc154994d640d945aa021d8ede153e0d45f87953cb233068e708bb66293c.png);
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: 100% 0
}

.auto-introduction-banner {
  display: block
}

.auto-introduction-banner:hover {
  opacity: 0.8
}

.introduction-title-area {
  position: fixed;
  top: 50px;
  width: 100%;
  max-width: 700px;
  z-index: 10;
  border-top: 1px solid #eaeaea
}

.introduction-progress {
  width: 100%;
  border-bottom: 1px solid #eaeaea
}

.introduction-progress img {
  width: 100%
}

.introduction-progress.has-header-space {
  margin-top: 60px
}

.introduction-select-cell {
  height: 40px
}

.introduction-select-cell select {
  direction: ltr;
  padding-left: 15px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: bold;
  background-color: #eaeaea;
  border-radius: 20px;
  background-image: url(//cdn.with.is/assets/shared/icn_select_arrow-2ffe324deb866a423c0b99520bc935669d0405223c6fec499aa28d69bcb800eb.png);
  background-size: 15px 9px;
  background-position: 95% center
}

.introduction-select-cell select:hover {
  background-color: #b8b8b8
}

.introduction-select-cell select:focus {
  background-image: url(//cdn.with.is/assets/shared/icn_select_arrow-2ffe324deb866a423c0b99520bc935669d0405223c6fec499aa28d69bcb800eb.png)
}

.introduction-auto-submit {
  -webkit-appearance: none
}

.introduction-step4-box {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff
}

.introduction-step4-box.is-filled {
  background-color: #fff
}

.introduction-step4-textarea.form-text-field textarea {
  width: 100%;
  border: none;
  background-color: transparent
}

.introduction-scroll {
  max-height: 255px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #ececeb;
  border-bottom: 1px solid #ececeb
}

.introduction-scroll-button.form-radio label {
  padding: 15px 15px 15px 45px;
  height: auto;
  line-height: 18px;
  color: #555;
  text-align: left;
  background-color: #fff;
  border: none;
  border-top: 1px solid #ececeb;
  border-radius: 0
}

.introduction-scroll-button.form-radio>input[type="radio"]+label {
  border: none;
  border-color: #ececeb
}

.introduction-scroll-button.form-radio>input[type="radio"]+label:before {
  content: '';
  margin: auto;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 20px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/mypages/introduction/icn_radio-622aebd9b65ee636310069866af47535f9facc5150a6a818197c78fbecff945f.png);
  background-size: 200%;
  background-position: 0 0
}

.introduction-scroll-button.form-radio>input[type="radio"]:checked+label:before {
  background-position: 20px 0
}

.introduction-submit-area {
  background-color: #fff
}

.introduction-submit-area.parallel-buttons {
  padding: 15px 25px 15px 15px
}

.introduction-completion {
  position: relative
}

.introduction-loading {
  position: absolute;
  top: 30%;
  width: 100%;
  color: #fff;
  font-size: 15px;
  text-align: center
}

.introduction-loading .progress-bar div {
  -webkit-animation: progress-bar 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards;
  animation: progress-bar 5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards
}

.introduction-advice {
  position: absolute;
  bottom: 20%;
  left: 5%;
  width: 90%
}

.introduction-dialog {
  padding: 0
}

.introduction-dialog>.submit-area {
  padding: 20px
}

.introduction-dialog_button {
  padding: 20px
}

.introduction_scroll-body {
  position: relative;
  z-index: -1
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .introduction_scroll-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: 245px
  }
}

.sample-intro_guide {
  display: block;
  margin: 0 auto;
  width: 320px
}

.sample-intro_example {
  display: block;
  margin: 0 auto;
  width: 290px
}

.sample-intro_form {
  display: block;
  padding: 0 20px 20px
}

.sub-photo-examples-overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: none
}

.sub-photo-male-background {
  background: -webkit-linear-gradient(top, #b1d9e0, #fff);
  background: linear-gradient(to bottom, #b1d9e0, #fff);
  width: 100%;
  height: 100%
}

.sub-photo-female-background {
  background: -webkit-linear-gradient(top, #f0cfaa, #fff);
  background: linear-gradient(to bottom, #f0cfaa, #fff);
  width: 100%;
  height: 100%
}

.sub-photo-examples-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.sub-photo-examples_close-button {
  position: fixed;
  right: 10px;
  top: 10px
}

.sub-photo-examples_close-button>img {
  width: 30px
}

.sub-photo-examples-container {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  max-width: 360px;
  max-height: 350px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .sub-photo-examples-container {
    top: 40%;
    max-width: 320px;
    max-height: 340px
  }
}

.sub-photo-examples-title_img {
  width: 90%;
  height: auto;
  max-width: 720px
}

.sub-photo-examples-header {
  text-align: center
}

.sub-photo-examples-header_img {
  width: 100%;
  height: auto;
  max-width: 720px
}

.sub-photo-examples_ok {
  width: 100%;
  text-align: center
}

.sub-photo-examples_ok_button {
  display: block;
  margin: 5px auto 5px auto;
  width: 90%;
  height: 46px;
  line-height: 46px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  background-color: #606060;
  border-radius: 23px
}

.sub-photo-examples_ok_button:link, .sub-photo-examples_ok_button:active, .sub-photo-examples_ok_button:visited {
  color: #fff;
  text-decoration: none
}

.sub-photo-male-example-items {
  position: relative;
  top: -90px
}

.sub-photo-female-example-items {
  position: relative
}

.sub-photo-example-item {
  width: 90px;
  margin: 0 5px
}

.mypage_edit-timeline_header {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.mypage_edit-timeline_header_tag {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 10px
}

.mypage_edit-timeline_header_tag>img {
  height: 13px;
  width: 13px;
  margin-right: 3px
}

.mypage_edit-timeline_body {
  padding: 10px 0 45px
}

.mypage_edit-timeline_links {
  color: #606060;
  font-size: 13px;
  text-align: right;
  padding-top: 5px
}

.mypage_edit-timeline_links_post-link {
  margin-right: 30px
}

.mypage_edit-timeline_post-icon {
  display: inline-block;
  background-color: #606060;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  text-align: center
}

.mypage_edit-timeline_post-icon>img {
  height: 8px;
  width: 8px;
  vertical-align: 1px
}

.mypage_edit-timeline_links_block-link {
  position: relative;
  padding-right: 30px;
  text-align: right
}

.mypage_edit-timeline_links_block-link:before {
  right: 15px;
  background-position: -11px -15px
}

.mypage_edit-timeline_empty-card-wrapper {
  padding: 0 15px
}

.mypage_edit-timeline_empty-card-wrapper .timeline-post-empty-card {
  background-color: #f5f5f5
}

.profile-settings {
  position: relative
}

.profile-settings>.text-primary {
  padding-left: 15px;
  height: 50px;
  line-height: 3.5
}

.profile-settings_lists {
  padding: 0 15px
}

.profile-settings_lists li {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  height: 55px;
  line-height: 4
}

.profile-settings_lists a {
  display: block;
  padding-right: 40px;
  color: #5c5d5d
}

.profile-settings_lists a:link, .profile-settings_lists a:visited {
  color: #5c5d5d;
  text-decoration: none
}

.profile-settings_lists li+li {
  border-top: 1px solid #ececeb
}

.profile-settings_lists>li:before {
  right: 0;
  background-position: -11px 0
}

.profile-settings_lists>li:last-child {
  border-bottom: 1px solid #ececeb
}

.profile-settings_lists .vip-tag {
  margin: 0 0 4px 10px
}

div+.profile-settings_lists {
  margin-bottom: 10px
}

.private-mode-title {
  margin: 50px 0;
  width: 70%
}

.private-mode-banner {
  border-radius: 15px;
  background-image: url(//cdn.with.is/assets/mypages/settings/private_modes/banner-1051823097061c97650e63d71c4e1313fdd7e4822c7369f2fdeea1c7cea822e1.png);
  width: 100%;
  height: 0;
  padding-top: 61%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover
}

.private-mode-banner:active {
  background-image: url(//cdn.with.is/assets/mypages/settings/private_modes/banner_active-7c67fcd7f936318382eb109a3e97d5d4657d6df06560ed31a5f55877b610da26.png)
}

.nickname-alias-form_label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 5px
}

.nickname-alias-dialog_counter {
  margin-bottom: 5px
}

#nickname-alias-dialog .form-input {
  margin-bottom: 5px
}

.notification {
  display: block;
  position: relative;
  height: 115px;
  width: 100%
}

.notification:link, .notification:active, .notification:hover, .notification:visited {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none
}

.notification.is-unread {
  background-color: #EDFFFF
}

.notification_category {
  position: absolute;
  top: 22px;
  left: 105px;
  padding: 2px 5px;
  height: 24px;
  width: 100px;
  line-height: 1.7;
  font-size: 13px;
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 13px
}

.notification_category.is-important {
  background-color: #606060;
  color: #fff
}

.notification_label {
  position: absolute;
  top: 10px;
  right: 60px;
  left: initial;
  font-size: 11px;
  color: #2cc4cb
}

.notification_time {
  position: absolute;
  top: 22px;
  right: 10px;
  font-size: 13px
}

.notification_title {
  position: absolute;
  top: 54px;
  left: 105px;
  right: 20px;
  font-size: 13px;
  height: 40px;
  font-weight: bold
}

.notifications_date {
  width: 100%;
  height: 20px;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  background-color: #f1f1f1
}

.notifications_thumbnail_image {
  position: absolute;
  top: 22px;
  left: 20px
}

.notification_thumbnail_image_style {
  border-radius: 15px;
  width: 70px;
  height: 70px
}

.notification_fb_email {
  word-break: break-all
}

.dialog.notification-dialog {
  width: 85%;
  max-width: 520px
}

.notification_body a {
  color: #606060;
  text-decoration: underline
}

.individual-notification_category {
  display: inline-block;
  margin: 15px 20px 0;
  top: 10px;
  left: 10px;
  padding: 2px 10px;
  height: 24px;
  line-height: 1.7;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 13px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.08)
}

.individual-notification_category.is-important {
  color: #fff;
  background-color: #606060
}

.individual-notification_title {
  margin: 10px 20px 0;
  font-size: 19px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87)
}

.individual-notification_time {
  margin: 10px 20px 0;
  color: rgba(0, 0, 0, 0.4)
}

.individual-notification_dialog-img {
  margin: 15px 20px 0
}

.individual-notification_dialog-img_image {
  border-radius: 15px;
  width: 100%
}

.individual-notification_body {
  margin: 30px 20px 20px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
  line-height: 25px
}

.individual-notification_body .message_touch-callout {
  color: #2F56FF
}

.individual-notification_button_frame {
  margin: 40px 0 10px;
  padding: 0px 20px
}

.otameshi-talk-lp_heading {
  position: relative;
  width: 100%;
  padding: 20px 0 5px;
  background-color: #FFF8DF
}

.otameshi-talk-lp_heading>img {
  margin-bottom: 16px
}

.otameshi-talk-lp_heading_balloon {
  position: absolute;
  width: 80%;
  bottom: -20px;
  max-width: 450px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1
}

.otameshi-talk-lp_catchphrase {
  position: relative;
  width: 100%;
  background: -webkit-linear-gradient(right, #f5c460 0%, #f39e44 50%, #f5c460 100%);
  background: linear-gradient(270deg, #f5c460 0%, #f39e44 50%, #f5c460 100%);
  padding: 40px 0 30px;
  text-align: center
}

.otameshi-talk-lp_catchphrase>img {
  width: 60%
}

.otameshi-talk-lp_theme {
  position: relative;
  padding: 25px 15px 15px;
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 10px 0 rgba(123, 98, 52, 0.15)
}

.otameshi-talk-lp_theme_heading {
  width: 32%;
  max-width: 150px;
  margin-bottom: 20px
}

.otameshi-talk-lp_theme_top-back {
  position: absolute;
  left: 0;
  height: 15px;
  width: 100%;
  z-index: -1
}

.otameshi-talk-lp_theme_top-back {
  top: 0;
  background: -webkit-linear-gradient(right, #f5c460 0%, #f39e44 50%, #f5c460 100%);
  background: linear-gradient(270deg, #f5c460 0%, #f39e44 50%, #f5c460 100%)
}

.otameshi-talk-lp_theme_image {
  position: relative;
  width: 89%;
  max-width: 305px;
  margin: 0 auto 20px
}

.otameshi-talk-lp_theme_image>img {
  width: 100%;
  border-radius: 15px
}

.otameshi-talk-lp_theme_open-time {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 15px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .otameshi-talk-lp_theme_open-time {
    bottom: 8px
  }
}

.otameshi-talk-lp_user-voices {
  padding: 40px 20px 30px;
  text-align: center
}

.otameshi-talk-lp_user-voices_heading {
  width: 47%;
  margin-bottom: 25px
}

.otameshi-talk-lp_user-voice {
  max-width: 500px;
  margin: 0 auto 12px
}

.otameshi-talk-lp_user-voice>img {
  width: 100%
}

.otameshi-talk-lp_steps {
  background-color: #FFF8DF;
  text-align: center;
  padding: 40px 0 20px
}

.otameshi-talk-lp_steps_heading {
  width: 126px;
  margin-bottom: 25px
}

.otameshi-talk-lp_step_description {
  padding: 10px 15px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: bold;
  text-align: left
}

.otameshi-talk-lp_step_line {
  display: block;
  width: 92%;
  height: 1px;
  background-color: #FFD888;
  border: 0;
  margin-bottom: 12px
}

.otameshi-talk-lp_about {
  text-align: center;
  padding: 30px 0 20px
}

.otameshi-talk-lp_about_heading {
  width: 69%;
  margin-bottom: 40px
}

.otameshi-talk-lp_feature {
  width: 90%;
  margin: auto
}

.otameshi-talk-lp_feature_description {
  text-align: left;
  margin-bottom: 60px;
  font-size: 14px
}

.otameshi-talk-lp_line {
  display: block;
  height: 1px;
  background-color: #D8D8D8;
  border: 0
}

.otameshi-talk-lp_notes {
  padding: 20px 15px;
  margin-bottom: 60px
}

.otameshi-talk-lp_note {
  margin-bottom: 30px
}

.otameshi-talk-lp_note>p, .otameshi-talk-lp_note li {
  font-size: 12px;
  line-height: 170%
}

.otameshi-talk-lp_list {
  list-style: disc;
  margin-left: 15px
}

.otameshi-talk-lp_info {
  width: 89%;
  max-width: 305px;
  margin: auto
}

.otameshi-talk-lp_info_button {
  display: block;
  height: 50px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0;
  border-radius: 25px;
  margin-bottom: 30px
}

.otameshi-talk-lp_info_button:link, .otameshi-talk-lp_info_button:visited {
  text-decoration: none;
  background-color: #606060;
  color: #fff
}

.otameshi-talk-lp_info_button:hover, .otameshi-talk-lp_info_button:active {
  background-color: #d15d66
}

.otameshi-talk-start-at-info {
  width: 100%;
  margin-bottom: 30px
}

.otameshi-talk-start-at-info_clock {
  margin: 0 auto 15px
}

.otameshi-talk-start-at-info_text {
  color: rgba(0, 0, 0, 0.87);
  font-size: 18px;
  font-weight: bold
}

.otameshi-talk-lp_calendar-link {
  position: relative;
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px
}

.otameshi-talk-lp_calendar-link:link, .otameshi-talk-lp_calendar-link:hover, .otameshi-talk-lp_calendar-link:visited {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6)
}

.otameshi-talk-lp_calendar-link:after {
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/arrow_gray-c67213b4846383a5852c2dfc7b73f738a859e1aaf9d46489af34988a717bc68d.svg);
  top: 1px;
  margin-left: 5px
}

.otameshi-talk-lp_attend-button-wrapper {
  position: fixed;
  width: 92%;
  max-width: 670px;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto
}

.otameshi-talk-lp_attend-button, .otameshi-talk-lp_disabled-button {
  display: block;
  height: 60px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
  border-radius: 35px;
  text-align: center
}

.otameshi-talk-lp_attend-button {
  padding: 15px 0;
  border-radius: 30px;
  margin: 0 auto;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25)
}

.otameshi-talk-lp_attend-button:link, .otameshi-talk-lp_attend-button:visited {
  text-decoration: none;
  background-color: #606060;
  color: #fff
}

.otameshi-talk-lp_attend-button:hover, .otameshi-talk-lp_attend-button:active {
  background-color: #d15d66
}

.otameshi-talk-lp_disabled-button {
  background-color: #f5f5f5;
  color: #B8B8B8;
  opacity: 0.9;
  outline: none
}

.otameshi-talk-calendar_body {
  padding: 25px 20px
}

.photo-advice-lp.has-title-area {
  padding-top: 50px
}

.photo-advice-lp_topic+.photo-advice-lp_topic {
  border-top: 1px solid #ececeb
}

.photo-advice-lp_topic_heading {
  display: block;
  margin: 0 auto;
  width: 60%;
  max-width: 280px
}

.photo-advice-lp_topic_frame {
  margin: 0 auto;
  padding: 30px 20px;
  width: 100%;
  max-width: 380px
}

.photo-advice-lp_point+.photo-advice-lp_point {
  margin-top: 20px
}

.photo-advice-lp_point_thumb {
  width: 65px
}

.photo-advice-lp_point_heading {
  margin-bottom: 5px;
  color: #00D0A5;
  font-size: 17px;
  font-weight: bold
}

.photo-advice-lp_popular+.photo-advice-lp_popular {
  margin-top: 20px
}

.photo-advice-lp_popular_thumb {
  width: 105px
}

.photo-advice-lp_popular_heading {
  margin-bottom: 5px;
  color: #000;
  font-size: 16px;
  font-weight: bold
}

.photo-advice-lp_parallel-box {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between
}

.photo-advice-lp_ng {
  width: 50%;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
  font-weight: bold;
  text-align: center
}

.photo-advice-lp_ng>p {
  margin-top: 10px
}

.photo-advice-lp_ng_thumb {
  width: 90%;
  max-width: 140px
}

.photo-advice-lp_recommend {
  width: 50%;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
  font-weight: bold;
  text-align: center
}

.photo-advice-lp_recommend>p {
  margin-top: 10px
}

.photo-advice-lp_recommend_thumb {
  width: 90%;
  max-width: 140px
}

.photo-advice-lp_daigo_frame {
  position: relative;
  margin: 0 auto;
  padding: 0 20px 30px;
  width: 100%;
  max-width: 380px
}

.photo-advice-lp_daigo_link {
  position: absolute;
  bottom: 25%;
  left: 15%;
  width: 70%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.15)
}

.photo-advice-lp_close {
  margin: 0 auto 30px;
  width: 100%;
  max-width: 180px
}

.campaign-illust {
  width: 100%
}

.point-uses-illust {
  width: 100%
}

.with-heading-icon {
  position: relative;
  padding-left: 35px;
  line-height: 1.2
}

.with-heading-icon:before {
  content: '';
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  bottom: 2px;
  left: 0;
  display: inline-block;
  width: 30px;
  height: 31px;
  background-repeat: no-repeat;
  background-size: 100%
}

.with-heading-icon[data-icon-num="1"]:before {
  background-image: url(//cdn.with.is/assets/shared/icn_heading_1-2a785cb63f53b854cfbc1670df8e86646a781df35cd6f6659eab7aa94348c6bb.png)
}

.with-heading-icon[data-icon-num="2"]:before {
  background-image: url(//cdn.with.is/assets/shared/icn_heading_2-f8cda3fa3ac6876d566086b24fc5f6407245190f4598d5879a09fc52ad9f5711.png)
}

.with-heading-icon[data-icon-num="3"]:before {
  background-image: url(//cdn.with.is/assets/shared/icn_heading_3-ec3c419154e0c9fd44af84a43fd053e6f10abc67a7fe445accd58e88c159de8e.png)
}

.button-points-frame {
  margin: 0 auto;
  max-width: 350px
}

.button-points {
  cursor: pointer;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08), 0 15px 15px rgba(0, 0, 0, 0.1)
}

.button-points:active {
  -webkit-animation: tap-button 0.2s ease-in-out 0s;
  animation: tap-button 0.2s ease-in-out 0s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.button-points:after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px
}

.button-points:active::after {
  opacity: 1
}

.button-points[data-id="401"] .button-points_left, .button-points[data-dialog-id="point-purchase-401"] .button-points_left {
  background: #B8B8B8 -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
  background: #B8B8B8 linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%)
}

.button-points[data-id="401"] .button-points_right, .button-points[data-dialog-id="point-purchase-401"] .button-points_right {
  color: rgba(0, 0, 0, 0.4)
}

.button-points[disabled="disabled"] {
  cursor: initial;
  opacity: 0.3;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.08)
}

.button-points[disabled="disabled"]:active {
  -webkit-animation: none;
  animation: none
}

.button-points_left {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  min-width: 35%;
  height: 100px;
  color: #fff;
  background: #8ed5ff -webkit-linear-gradient(315deg, #9cf6ff 0%, rgba(255, 188, 156, 0) 50%);
  background: #8ec6ff linear-gradient(135deg, #9ce8ff 0%, rgba(255, 188, 156, 0) 50%);
  border-radius: 20px 0 0 20px
}

.button-points_point {
  line-height: 0.6;
  font-size: 30px;
  font-weight: bold
}

.button-points_right {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: end;
  justify-content: flex-end;
  padding: 10px 15px;
  height: 100%;
  color: #606060
}

.button-points_right_above {
  position: relative;
  margin-bottom: 10px;
  padding-right: 35px;
  width: 100%
}

.button-points_value {
  text-align: right;
  font-size: 30px;
  font-weight: bold
}

.button-points_value_unit {
  position: absolute;
  top: 2px;
  right: 20px;
  font-size: 12px;
  font-weight: bold
}

.button-points_value_tax {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 10px
}

.button-points_balloon {
  position: relative;
  padding: 3px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 140px;
  font-weight: bold;
  background-color: #edf9ff;
  border-radius: 30px
}

.button-points_balloon:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  /* background-image: url(//cdn.with.is/assets/products/point_balloon_tail-7c31bae0206c95b2ddad329b40d51075e85e2ff5feb8d66e2fb13efd5bf01d20.svg); */
  background-size: 100%;
  background-repeat: no-repeat
}

.has-like-icon:before {
  content: '';
  display: inline-block;
  margin-right: 3px;
  width: 16px;
  height: 13px;
  vertical-align: -1px;
  background-image: url(//cdn.with.is/assets/shared/icn_like_small-2323afeb22b1730975ca8c257b68b939812fdf55b3958326181502bee4be258c.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.platinum-plan-illust {
  background-color: #fff;
  position: relative
}

.platinum-plan-illust:active>a>img {
  content: url(//cdn.with.is/assets/mypage_status/platinum_plan_illust_active-6ccc5a5cea3a0b1fbe7aea9a2879978ca72af1c3f5b1b267bc1d35b8c2cfdf29.png)
}

.platinum-plan_note {
  background-color: #40dae0;
  color: #fff;
  padding: 0 5px 10px 10px
}

.platinum-plan_note>a:link, .platinum-plan_note>a:hover, .platinum-plan_note>a:active, .platinum-plan_note>a:visited {
  color: #fff
}

.mypage-status-lp {
  padding: 0 20px 30px;
  background-color: #40dae0
}

#settings {
  margin-top: -80px;
  padding-top: 80px
}

.point-exchange-figure {
  position: relative;
  margin-top: 20px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center
}

.point-exchange-figure .table_row {
  height: 32px
}

.point-exchange-figure_left {
  padding-right: 50px;
  width: 50%
}

.point-exchange-figure_right {
  padding-left: 50px;
  width: 50%
}

.point-exchange-balloon {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -37px;
  width: 75px
}

.point-exchange-arrow {
  position: absolute;
  top: 36px;
  left: 50%;
  margin-left: -44px;
  width: 88px
}

.price-list_item {
  margin-bottom: 15px
}

.price-list_item>.lp-btn {
  margin: 0;
  width: 100%
}

.lp-btn {
  position: relative;
  display: block;
  margin: 0 20px;
  text-align: center;
  border-radius: 10px;
  box-sizing: border-box
}

.lp-btn.guarantee-btn {
  padding: 10px;
  font-size: 18px;
  font-weight: normal;
  color: #ffffff !important;
  text-decoration: none !important
}

.lp-btn.guarantee-btn:hover {
  top: 2px;
  opacity: 1;
  border-bottom-color: rgba(0, 0, 0, 0)
}

.lp-btn.guarantee-btn {
  margin: 0 auto;
  width: 90%;
  background-color: #e5e5e5;
  border-bottom: 4px solid #bfbebe
}

.lp-btn.guarantee-btn:hover {
  background-color: #bfbebe
}

.lp-btn.guarantee-btn.is-recommend {
  margin: 0;
  width: 100%;
  background-color: #606060;
  border-bottom: 4px solid #d3575d
}

.lp-btn.guarantee-btn.is-recommend:hover {
  background-color: #d3575d
}

.plan-img-btn {
  font-size: 18px;
  font-weight: normal;
  text-decoration: none;
  padding: 7px 0
}

.plan-212-btn, .plan-211-btn {
  background-color: #fff;
  margin-top: 15px
}

.plan-img-btn.plan-213-btn {
  color: #FF8E94;
  border-bottom: 2px solid #d3575d;
  background-color: #FF8E94
}

.plan-img-btn.plan-213-btn>img {
  width: 280px
}

.plan-img-btn.plan-213-btn:active {
  background-color: #E57F84
}

.recommend-plan {
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #26C6DA;
  position: relative;
  height: 110px;
  margin: 0 -5px;
  padding: 0 5px;
  border-bottom: solid 2px #008899
}

.recommend-plan>img {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 5px;
  width: 276px;
  height: 19px;
  margin: 5px auto;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #26C6DA
}

.plan-img-btn.plan-214-btn {
  left: -20px;
  width: 100%;
  top: 5px;
  color: #FF5252;
  background-color: #FF5252;
  border-radius: 10px 10px 0 0
}

.plan-img-btn.plan-214-btn>img {
  width: 280px;
  height: 55px
}

.plan-img-btn.plan-214-btn:active {
  background-color: #E64949
}

.plan-img-btn.plan-215-btn {
  color: #FF8E94;
  border-bottom: 2px solid #d3575d;
  background-color: #FF8E94
}

.plan-img-btn.plan-215-btn>img {
  width: 280px;
  height: 55px
}

.plan-img-btn.plan-215-btn:active {
  background-color: #E57F84
}

.lp-btn.credit-btn {
  margin: 0;
  width: 100%
}

.lower-lines {
  padding-left: 15px;
  word-break: break-word
}

.point-restore_button {
  width: 260px;
  height: 45px;
  margin: auto;
  padding-top: 10px
}

.point-restore_bg {
  background-color: #ff5569
}

.lp-ttl3_no-broder {
  margin: 0 0 15px;
  padding: 16px 18px;
  font-weight: normal;
  text-align: center
}

.point-restore_description {
  padding: 0 20px 20px 20px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .lp-btn-wrap li.price-list_item {
    padding: 0 10px
  }
}

.new-year2022 {
  position: relative
}

.new-year2022_body-image {
  width: 100%
}

.new-year2022_middle {
  width: 100%;
  height: 100%
}

.new-year2022_middle-banner_button-container {
  position: relative;
  width: 100%;
  margin: 0px auto;
  background-color: #FFE39B
}

.new-year2022_middle-banner_button-container_button {
  margin: 0 20px
}

.new-year2022_body-container {
  margin: 20px 16px 50px
}

.new-year2022_body-container_title {
  margin: 20px 0 0;
  font-weight: bold;
  font-size: 16px;
  color: #606060
}

.new-year2022_body-container_body {
  margin: 13px 0 0;
  font-size: 13px
}

.new-year2022_notice-container {
  margin-top: 30px;
  padding: 30px 20px;
  background-color: rgba(0, 0, 0, 0.09)
}

.new-year2022_notice-container_title {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 18px
}

.new-year2022_notice-container_body {
  font-size: 11px
}

.new-year2022_notice-container_body_link {
  color: #F32828
}

.newcomer-ttl-main {
  position: relative
}

.newcomer-countdown {
  position: absolute;
  font-size: 4vh;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  bottom: 7px
}

.newcomer .plan-212-btn>img, .full_refund .plan-212-btn>img, .platinum_and_point_refund .plan-212-btn>img {
  width: 260px
}

.newcomer .plan-214-btn>img, .newcomer .plan-215-btn>img, .platinum_and_point_refund .plan-214-btn>img, .platinum_and_point_refund .plan-215-btn>img {
  height: 100px
}

.newcomer .recommend-plan, .platinum_and_point_refund .recommend-plan {
  height: 160px
}

.product-title {
  border-top: 1px solid #e5e5e5
}

.subscription-description {
  padding: 0 10px;
  width: 100%
}

.telecom_contact {
  margin: 0 0 20px;
  padding: 0 15px 9px;
  border: 1px solid #b2b2b2
}

.telecom_contact>dt {
  margin: 0 -15px 12px;
  padding: 8px 5px;
  text-align: center;
  font-size: 13px;
  line-height: 1.54;
  font-weight: normal;
  color: #ffffff;
  background: #b2b2b2
}

.telecom_contact>dd {
  margin: 0 0 3px;
  padding: 0
}

.telecom_contact>.name {
  font-size: 15px;
  line-height: 1.33
}

.telecom_contact>.date {
  font-size: 11px;
  line-height: 1.36
}

.telecom_contact>.detail {
  font-size: 13px;
  line-height: 1.54
}

.vip-option_btn {
  width: 100%;
  padding: 15px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.2)
}

.vip-option_btn:active {
  background-color: #FFF8E7
}

.vip-option_description-title {
  background-color: #BE8142;
  font-size: 25px
}

.vip-option_description-bg {
  background-color: #BE8142;
  padding: 0 5px 20px 5px;
  vertical-align: top
}

.vip-option_button-bg {
  background: url(//cdn.with.is/assets/products/vip/bg-5d376b3f7dce97d72008386e7c627c538042320ffeef122d2cd9d2c3c166e10f.jpg) no-repeat 0 0;
  background-size: 100% 100%;
  padding: 0 15px 10px
}

.vip-option_note {
  margin: 0 10px
}

.vip-option_newcomer-campaign {
  background-image: url(//cdn.with.is/assets/products/vip/newcomer_campaign-fdb0ab9cfda93e3d01bedd98c9dfc496d406c67c7603e022a4258e0be3704c6d.png);
  margin: auto;
  width: 100%;
  max-width: 300px;
  height: 164px;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 12.5px
}

.vip-option_newcomer-campaign:active {
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(//cdn.with.is/assets/products/vip/newcomer_campaign-fdb0ab9cfda93e3d01bedd98c9dfc496d406c67c7603e022a4258e0be3704c6d.png);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(//cdn.with.is/assets/products/vip/newcomer_campaign-fdb0ab9cfda93e3d01bedd98c9dfc496d406c67c7603e022a4258e0be3704c6d.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.plan-img-btn.plan-302-btn, .plan-img-btn.plan-353-btn {
  padding: 8% 20px 5%
}

.plan-img-btn_img {
  width: 100%
}

.vip-option_banner {
  width: 100%;
  -webkit-filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.25))
}

.comeback-purchase-campaign_header {
  position: relative
}

.comeback-purchase-campaign_countdown {
  position: absolute;
  font-size: 6.5vh;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: #fff;
  letter-spacing: 0.2vh
}

.comeback-purchase-campaign_countdown .unit {
  font-size: 2.5vh;
  margin: 0 2px
}

.plan-img-btn.plan-218-btn, .plan-img-btn.plan-220-btn {
  padding: 15px;
  border-bottom: 2px solid #d3575d;
  background-color: #FF8E94
}

.plan-img-btn.plan-218-btn>img, .plan-img-btn.plan-220-btn>img {
  width: 297px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .plan-img-btn.plan-218-btn>img, .plan-img-btn.plan-220-btn>img {
    width: 275px
  }
}

.plan-img-btn.plan-218-btn:active, .plan-img-btn.plan-220-btn:active {
  background-color: #E57F84
}

.plan-img-btn.plan-219-btn {
  left: -20px;
  width: 100%;
  top: 5px;
  background-color: #FF5252;
  border-radius: 10px 10px 0 0
}

.plan-img-btn.plan-219-btn>img {
  width: 297px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .plan-img-btn.plan-219-btn>img {
    width: 275px
  }
}

.plan-img-btn.plan-219-btn:active {
  background-color: #E64949
}

.adjust-anchor {
  padding-top: 70px !important;
  margin-top: -70px !important
}

.subscription-footer-banner {
  margin-bottom: 25px;
  padding: 0 20px
}

.ca-reward_require-auth-bg {
  width: 100%;
  -webkit-filter: blur(10px);
  filter: blur(10px)
}

.products-list {
  background: #fff;
  max-width: 700px;
  overflow: hidden
}

.products-list_header {
  display: -webkit-box;
  display: flex
}

.products-list_header .header-item {
  position: relative
}

.products-list_header .header-item a {
  display: block
}

.products-list_header .header-item .cover {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.products-list_header .header-item.is-active .cover {
  display: none
}

.products-list_header .header-item.male .cover {
  background: rgba(0, 203, 230, 0.8)
}

.products-list_header .header-item.female .cover {
  background: rgba(254, 105, 112, 0.8)
}

.products-list_header .header-item .guide {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center
}

.products-list_header .header-item .guide img {
  width: 50%
}

.products-list_contents {
  display: none
}

.products-list_contents.is-active {
  display: block
}

.products-list_content:not(:first-child):not(.no-header-space):not(.is-with-report) {
  border-top: 1px solid rgba(0, 0, 0, 0.07)
}

.products-list_content {
  text-align: center;
  overflow: hidden;
  padding: 50px 0
}

.products-list_content h2 {
  margin: 0
}

.products-list_content .title-memo {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.53px;
  text-align: center
}

.products-list_content .feature-memo {
  margin: 14px auto 50px;
  font-weight: 300;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.61px;
  line-height: 22px;
  text-align: left
}

.products-list_content.no-header-space {
  padding: 0
}

.products-list_content-body {
  padding: 0 20px
}

.products-list_content.is-pricing h2 {
  margin-bottom: 40px
}

.products-list_content.is-pricing .platform-price img {
  margin-bottom: 70px
}

.products-list_content.is-pricing .platform-price img:last-child {
  margin-bottom: 0
}

.products-list_content.is-pricing li {
  text-align: left;
  font-weight: 200;
  font-size: 11px;
  color: #000000;
  letter-spacing: -0.45px;
  line-height: 25px;
  margin: 0
}

.products-list_content.is-newcomer-campaign .text-note {
  margin: 15px auto 0;
  font-weight: 300;
  font-size: 11px;
  color: #000000;
  letter-spacing: -0.41px;
  text-align: justify;
  line-height: 18px
}

.products-list_sign-up {
  position: relative
}

.products-list_sign-up .sign-up-button {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 15%;
  text-align: center
}

.products-list_sign-up .sign-up-button a {
  width: 90%
}

.products-list_sign-up .stores {
  position: absolute;
  left: 0;
  bottom: 5%;
  width: 100%;
  padding: 0 5%;
  display: -webkit-box;
  display: flex;
  justify-content: space-around
}

.products-list_sign-up .stores .store {
  width: 45%
}

.products-list_japhic {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
  align-items: flex-start;
  margin: 30px auto 0
}

.products-list_japhic .text-note {
  font-weight: 300;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.54);
  letter-spacing: -0.41px;
  text-align: justify;
  line-height: 18px;
  margin-left: 10px;
  align-self: center
}

.products-list_content.is-with-report a.report {
  display: inline-block;
  margin-top: 40px;
  width: 48%;
  text-decoration: none;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 18px;
  vertical-align: top
}

.products-list_content.is-with-report a.report:nth-child(odd) {
  margin-right: 4%
}

.products-list_content.is-with-report a.report .report-thumb img {
  width: 100%;
  max-width: 100%;
  border-radius: 8px
}

.products-list_content.is-with-report a.report .report-title {
  font-weight: 300;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.72px;
  line-height: 18px
}

.products-list_content.is-with-report a.report .report-status {
  text-align: left;
  padding: 5px 0 5px 0
}

.products-list_content.is-with-report a.report .report-status img {
  width: 30%;
  max-width: 60px
}

.products-list_content.is-with-report a.report .report-text {
  text-align: left;
  height: 40px
}

.products-list_content.is-with-report a.read-more {
  margin: 50px auto 0;
  width: 50%;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 26.5px;
  font-weight: bold;
  font-size: 16px;
  color: #757575;
  letter-spacing: -1px;
  text-align: center;
  line-height: 50px;
  display: block;
  text-decoration: none
}

.products-list_content.is-with-report a.read-more:hover {
  background: #F2F2F2
}

.products-list_identification-text {
  margin: 40px auto 20px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.4px;
  text-align: center;
  line-height: 20px
}

.profile-mission-v201810-complete-dialog canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: transparent;
  width: 100%;
  height: 100%
}

.profile-mission-v201810-complete-dialog .confetti-area {
  position: relative;
  padding: 20px 0 0;
  margin: 0 auto 20px
}

.profile-mission-v201810-complete-dialog .my-profile {
  position: relative;
  z-index: 2;
  width: 75%;
  margin: auto;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background: url("//cdn.with.is/assets/missions/profile_mission_v201810/mask-c9315296594416aded9487eba7ac0334feeb3a7a14078b9aa472b6b49a6034af.png") no-repeat center;
  background-size: contain;
  padding: 45px 30px 0
}

.profile-mission-v201810-complete-dialog .cover-image {
  padding: 20px 10px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px
}

.profile-mission-v201810-complete-dialog .main-photo {
  width: 90%;
  margin: auto
}

.profile-mission-v201810-complete-dialog .main-photo img {
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.7)
}

.profile-mission-v201810-complete-dialog .dialog_desc {
  position: relative
}

.profile-mission-v201810-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  max-width: 700px;
  height: 100%;
  z-index: 80
}

.profile-mission-v201810-dialog.is-active {
  display: block
}

.profile-mission-v201810-dialog .text-note {
  color: #FF6873;
  font-weight: bold
}

.profile-mission-v201810-dialog .graph {
  margin: auto;
  max-width: 400px
}

.profile-mission-v201810-dialog .graph.is-active {
  -webkit-animation: fade-in 0.5s;
  animation: fade-in 0.5s;
  visibility: visible
}

.sp-container.has-profile-mission-v201810-dialog {
  overflow: hidden;
  position: fixed;
  margin: auto;
  width: 100%;
  -webkit-animation: has-profile-mission-v201810-dialog 0.7s ease-out forwards;
  animation: has-profile-mission-v201810-dialog 0.7s ease-out forwards
}

.profile-mission-v201810-dialog_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-animation: fade-in 0.5s linear forwards;
  animation: fade-in 0.5s linear forwards
}

@media all and (-ms-high-contrast: none) {
  .profile-mission-v201810-dialog_overlay {
    background-color: rgba(255, 255, 255, 0.9)
  }
}

.profile-mission-v201810-dialog_page {
  display: none
}

.profile-mission-v201810-dialog_main {
  width: 100%;
  height: calc(100% - 70px);
  text-align: center;
  padding-top: 40px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.87);
  letter-spacing: -0.44px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-mission-v201810-dialog_main {
    padding-top: 30px;
    line-height: 20px
  }
}

.profile-mission-v201810-dialog_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 700px;
  padding: 0 5% 15px
}

.profile-mission-v201810-dialog_close {
  visibility: visible;
  position: absolute;
  top: 20px;
  right: 20px;
  background-image: url("//cdn.with.is/assets/missions/profile_mission_v201810/close_dialog-a585447033b10d1f86390780bbfc78d0e21899a85253d722728bc59ef0f63436.svg");
  width: 20px;
  height: 20px
}

.profile-mission-v201810-dialog_daigo {
  position: absolute;
  bottom: 0;
  width: 32vw;
  max-width: 150px;
  right: 10px;
  visibility: visible
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-mission-v201810-dialog_daigo {
    width: 30vw
  }
}

.profile-mission-v201810-dialog_action-button {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
  font-weight: bold
}

.profile-mission-v201810-dialog.is-mindset-dialog {
  visibility: hidden
}

.profile-mission-v201810-dialog.is-mindset-dialog .step1 {
  -webkit-animation: fade-in-visible 0.4s ease 1s forwards;
  animation: fade-in-visible 0.4s ease 1s forwards
}

.profile-mission-v201810-dialog.is-mindset-dialog .step2 {
  -webkit-animation: fade-in-visible 0.5s ease 3.5s forwards;
  animation: fade-in-visible 0.5s ease 3.5s forwards
}

.profile-mission-v201810-dialog.is-mindset-dialog .profile-mission-v201810-dialog_action-button {
  -webkit-animation: profile-mission-v201810-dialog-action-button 0.4s linear 4.5s forwards;
  animation: profile-mission-v201810-dialog-action-button 0.4s linear 4.5s forwards
}

.profile-mission-v201810-dialog.is-mindset-dialog .step-point {
  margin-left: -2%;
  width: 40%;
  max-width: 200px;
  -webkit-animation: profile-mission-v201810-dialog-point-balloon 1s ease-in-out 5s infinite;
  animation: profile-mission-v201810-dialog-point-balloon 1s ease-in-out 5s infinite
}

.profile-mission-v201810-dialog.is-mindset-dialog .step-point img {
  width: 100%;
  max-width: 100%
}

.mindset-sub-photo .graph {
  width: 80%;
  margin: 30px auto
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .mindset-sub-photo .graph {
    margin: 20px auto
  }
}

.profile-mission-v201810-dialog.is-return-info-dialog {
  visibility: hidden
}

.profile-mission-v201810-dialog.is-return-info-dialog .profile-mission-v201810-dialog_main {
  padding-top: 20px
}

.profile-mission-v201810-dialog.is-return-info-dialog .gave-present {
  width: 70%;
  max-width: 250px;
  margin: auto
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-mission-v201810-dialog.is-return-info-dialog .gave-present {
    width: 60%
  }
}

.profile-mission-v201810-dialog.is-return-info-dialog .step1 {
  -webkit-animation: fade-in-visible 0.4s ease 1s forwards;
  animation: fade-in-visible 0.4s ease 1s forwards
}

.profile-mission-v201810-dialog.is-return-info-dialog .step2 {
  -webkit-animation: fade-in-visible 0.4s ease 2s forwards;
  animation: fade-in-visible 0.4s ease 2s forwards
}

.profile-mission-v201810-dialog.is-return-info-dialog .step2.gave-present {
  -webkit-animation: fade-in-visible 0.4s ease 2s forwards, profile-mission-v201810-dialog-give-point-balloon 0.5s ease-in-out 2s forwards;
  animation: fade-in-visible 0.4s ease 2s forwards, profile-mission-v201810-dialog-give-point-balloon 0.5s ease-in-out 2s forwards
}

.profile-mission-v201810-dialog.is-return-info-dialog .step3 {
  -webkit-animation: fade-in-visible 0.4s ease 3s forwards;
  animation: fade-in-visible 0.4s ease 3s forwards
}

.profile-mission-v201810-dialog.is-return-info-dialog .step4 {
  -webkit-animation: fade-in-visible 0.4s ease 4.5s forwards;
  animation: fade-in-visible 0.4s ease 4.5s forwards
}

.profile-mission-v201810-dialog.is-return-info-dialog .step5 {
  -webkit-animation: fade-in-visible 0.4s ease 5.5s forwards;
  animation: fade-in-visible 0.4s ease 5.5s forwards
}

.return-info-introduction .p1 {
  margin: 10px 0
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .return-info-introduction .p1 {
    margin: 5px 0
  }
}

.profile-mission-v201810-dialog.is-first .profile-mission-v201810-dialog_daigo {
  visibility: hidden;
  -webkit-animation: fade-in-visible 0.5s linear 0.5s forwards;
  animation: fade-in-visible 0.5s linear 0.5s forwards
}

@-webkit-keyframes has-profile-mission-v201810-dialog {
  0% {
    -webkit-filter: blur(0);
    filter: blur(0)
  }

  100% {
    -webkit-filter: blur(10px);
    filter: blur(10px)
  }
}

@keyframes has-profile-mission-v201810-dialog {
  0% {
    -webkit-filter: blur(0);
    filter: blur(0)
  }

  100% {
    -webkit-filter: blur(10px);
    filter: blur(10px)
  }
}

@-webkit-keyframes profile-mission-v201810-dialog-give-point-balloon {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
  }

  33% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  66% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes profile-mission-v201810-dialog-give-point-balloon {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
  }

  33% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  66% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes profile-mission-v201810-dialog-point-balloon {
  0% {
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes profile-mission-v201810-dialog-point-balloon {
  0% {
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes profile-mission-v201810-dialog-action-button {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }

  80% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99)
  }

  100% {
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes profile-mission-v201810-dialog-action-button {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }

  80% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99)
  }

  100% {
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

#profile-mission-v202012-mission-area {
  padding: 0 15px 10px
}

.profile-mission-v202012_mission-status {
  background: #FFE7E8;
  border-radius: 10px;
  max-width: 414px;
  padding: 15px;
  margin: auto
}

.profile-mission-v202012_mission-status_items {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between
}

.profile-mission-v202012_mission-status_items>div {
  width: 30%;
  height: 30vw;
  max-height: 126px
}

.profile-mission-v202012_mission-status_desc {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.profile-mission-v202012_mission-status_item:nth-child(1), .profile-mission-v202012_mission-status_item:nth-child(2), .profile-mission-v202012_mission-status_item:nth-child(3) {
  margin-bottom: 10px
}

.profile-mission-v202012_mission-status_mission {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 12px 0 rgba(255, 72, 43, 0.18);
  border-radius: 10px;
  padding: 10px 0
}

.profile-mission-v202012_mission-status_badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 25px;
  height: 25px
}

.profile-mission-v202012_mission-status_condition {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.1;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 5px
}

.profile-mission-v202012_mission-status_point {
  display: inline-block;
  background: #606060;
  border-radius: 7.5px;
  color: #fff;
  padding: 0 10px;
  line-height: 15px;
  height: 15px;
  font-size: 12px;
  font-weight: bold
}

.profile-mission-v202012_mission-status_progress {
  font-size: 10px;
  font-weight: bold
}

.profile-mission-v202012_mission-status_progress span.is-running {
  color: #606060
}

.profile-mission-v202012_mission-status_achieved {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(255, 136, 141, 0.9);
  border-radius: 10px
}

.profile-mission-v202012-complete-dialog canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: transparent;
  width: 100%;
  height: 100%
}

.profile-mission-v202012-complete-dialog .confetti-area {
  position: relative;
  padding: 20px 0 0;
  margin: 0 auto 20px
}

.profile-mission-v202012-complete-dialog .my-profile {
  position: relative;
  z-index: 2;
  width: 75%;
  margin: auto;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background: url("//cdn.with.is/assets/missions/profile_mission_v202012/mask-c9315296594416aded9487eba7ac0334feeb3a7a14078b9aa472b6b49a6034af.png") no-repeat center;
  background-size: contain;
  padding: 45px 30px 0
}

.profile-mission-v202012-complete-dialog .cover-image {
  padding: 20px 10px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px
}

.profile-mission-v202012-complete-dialog .main-photo {
  width: 90%;
  margin: auto
}

.profile-mission-v202012-complete-dialog .main-photo img {
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.7)
}

.profile-mission-v202012-complete-dialog .dialog_desc {
  position: relative
}

.profile-mission-v202012-dialog_overlay.has-login-dialog {
  z-index: 110
}

#profile-mission-v202012-login-dialog {
  position: relative;
  padding: 40px 15px 0;
  color: rgba(0, 0, 0, 0.87);
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  height: 100%;
  max-width: 700px;
  margin: 0 auto
}

#profile-mission-v202012-login-dialog .balloon-from-partner {
  position: relative;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: #00C9B5;
  border-radius: 15px;
  line-height: 25px
}

#profile-mission-v202012-login-dialog .balloon-from-partner:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 15px;
  height: 5px;
  background: url(//cdn.with.is/assets/missions/profile_mission_v202012/login_dialog_balloon_tail-b6e85535e4f787a01cc6bc019b3c6a416a2a03b9230c951e66f92500ec6ef707.svg) no-repeat center
}

#profile-mission-v202012-login-dialog .user-card {
  width: 170px;
  margin: 0 auto 40px
}

#profile-mission-v202012-login-dialog .main-photo {
  display: block;
  border-radius: 15px;
  max-width: 100%
}

#profile-mission-v202012-login-dialog .profile {
  padding: 8px 8px 0
}

#profile-mission-v202012-login-dialog .register-main-photo-button {
  display: block;
  max-width: 400px;
  margin: 0 auto;
  font-size: 15px;
  height: 40px;
  line-height: 40px
}

.profile-mission-v202012-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  max-width: 700px;
  height: 100%;
  z-index: 80
}

.profile-mission-v202012-dialog.is-active {
  display: block
}

.profile-mission-v202012-dialog .mission-dialog_rows {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  height: 100%
}

.profile-mission-v202012-dialog .mission-dialog_main {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: -0.44px;
  -webkit-box-flex: 1;
  flex: 1;
  margin-bottom: 50vw
}

@media only screen and (min-width: 700px) {
  .profile-mission-v202012-dialog .mission-dialog_main {
    margin-bottom: 200px
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-mission-v202012-dialog .mission-dialog_main {
    line-height: 20px
  }
}

.profile-mission-v202012-dialog .mission-dialog_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 700px;
  padding: 0 15px 15px
}

.profile-mission-v202012-dialog .mission-dialog_action-button {
  display: block;
  height: 45px;
  margin: auto;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2);
  font-weight: bold;
  font-size: 15px;
  line-height: 45px
}

.profile-mission-v202012-dialog .graph {
  margin: auto;
  max-width: 400px
}

.profile-mission-v202012-dialog .graph.is-active {
  -webkit-animation: fade-in 0.5s;
  animation: fade-in 0.5s;
  visibility: visible
}

.profile-mission-v202012-dialog .daigo-word-title {
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-mission-v202012-dialog .daigo-word-title {
    font-size: 15px
  }
}

.profile-mission-v202012-dialog .daigo-word-body {
  font-size: 15px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-mission-v202012-dialog .daigo-word-body {
    font-size: 13px
  }
}

.profile-mission-v202012-dialog_close {
  visibility: visible;
  position: absolute;
  top: 15px;
  right: 15px;
  background-image: url("//cdn.with.is/assets/missions/profile_mission_v202012/close_dialog-a585447033b10d1f86390780bbfc78d0e21899a85253d722728bc59ef0f63436.svg");
  width: 20px;
  height: 20px
}

.profile-mission-v202012-dialog_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  background: snow -webkit-linear-gradient(144deg, rgba(255, 153, 153, 0) 76%, rgba(255, 162, 77, 0.17) 90%, rgba(255, 79, 79, 0.5) 100%);
  background: snow linear-gradient(-54deg, rgba(255, 153, 153, 0) 76%, rgba(255, 162, 77, 0.17) 90%, rgba(255, 79, 79, 0.5) 100%)
}

.profile-mission-v202012-dialog_page {
  display: none;
  height: 100%
}

.profile-mission-v202012-dialog.is-mindset-dialog {
  visibility: hidden
}

.profile-mission-v202012-dialog.is-mindset-dialog .step1 {
  -webkit-animation: fade-in-visible 0.4s ease 1s forwards;
  animation: fade-in-visible 0.4s ease 1s forwards
}

.profile-mission-v202012-dialog.is-mindset-dialog .step2 {
  -webkit-animation: fade-in-visible 0.5s ease 3.5s forwards;
  animation: fade-in-visible 0.5s ease 3.5s forwards
}

.profile-mission-v202012-dialog.is-mindset-dialog .mission-dialog_action-button {
  -webkit-animation: profile-mission-v202012-dialog-action-button 0.4s linear 4.5s forwards;
  animation: profile-mission-v202012-dialog-action-button 0.4s linear 4.5s forwards
}

.profile-mission-v202012-dialog.is-mindset-dialog .step-point {
  margin-left: -2%;
  width: 36%;
  max-width: 200px;
  -webkit-animation: profile-mission-v202012-dialog-point-balloon 1s ease-in-out 5s infinite;
  animation: profile-mission-v202012-dialog-point-balloon 1s ease-in-out 5s infinite
}

.profile-mission-v202012-dialog.is-mindset-dialog .step-point img {
  width: 100%;
  max-width: 100%
}

.profile-mission-v202012-dialog.is-return-info-dialog {
  visibility: hidden
}

.profile-mission-v202012-dialog.is-return-info-dialog .gave-present {
  height: 70px;
  max-width: 400px;
  margin: 45px auto 0
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile-mission-v202012-dialog.is-return-info-dialog .gave-present {
    height: 50px;
    margin: 35px auto 0
  }
}

.profile-mission-v202012-dialog.is-return-info-dialog .step1 {
  -webkit-animation: fade-in-visible 0.4s ease 1s forwards;
  animation: fade-in-visible 0.4s ease 1s forwards
}

.profile-mission-v202012-dialog.is-return-info-dialog .step2 {
  -webkit-animation: fade-in-visible 0.4s ease 2s forwards;
  animation: fade-in-visible 0.4s ease 2s forwards
}

.profile-mission-v202012-dialog.is-return-info-dialog .step2.gave-present {
  -webkit-animation: fade-in-visible 0.4s ease 2s forwards, profile-mission-v202012-dialog-give-point-balloon 0.5s ease-in-out 2s forwards;
  animation: fade-in-visible 0.4s ease 2s forwards, profile-mission-v202012-dialog-give-point-balloon 0.5s ease-in-out 2s forwards
}

.profile-mission-v202012-dialog.is-return-info-dialog .step3 {
  -webkit-animation: fade-in-visible 0.4s ease 3.5s forwards;
  animation: fade-in-visible 0.4s ease 3.5s forwards
}

.profile-mission-v202012-dialog.is-return-info-dialog .step4 {
  -webkit-animation: fade-in-visible 0.4s ease 4.5s forwards;
  animation: fade-in-visible 0.4s ease 4.5s forwards
}

.profile-mission-v202012-dialog.is-return-info-dialog .step5 {
  -webkit-animation: fade-in-visible 0.4s ease 5.5s forwards;
  animation: fade-in-visible 0.4s ease 5.5s forwards
}

.return-info-introduction .daigo-word-title {
  margin: 30px auto
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .return-info-introduction .daigo-word-title {
    margin: 15px auto
  }
}

.return-info-introduction .graph {
  width: 80%;
  margin: 0 auto 15px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .return-info-introduction .graph {
    width: 60%;
    margin: 0 auto 10px
  }
}

@-webkit-keyframes profile-mission-v202012-dialog-give-point-balloon {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
  }

  33% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  66% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes profile-mission-v202012-dialog-give-point-balloon {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
  }

  33% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  66% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes profile-mission-v202012-dialog-point-balloon {
  0% {
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes profile-mission-v202012-dialog-point-balloon {
  0% {
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes profile-mission-v202012-dialog-action-button {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }

  80% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99)
  }

  100% {
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes profile-mission-v202012-dialog-action-button {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }

  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }

  80% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99)
  }

  100% {
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.profile-photo-checker {
  padding-top: 60px;
  margin: auto;
  max-width: 480px
}

.profile-photo-checker_header {
  position: relative;
  display: -webkit-box;
  display: flex;
  height: 155vw;
  max-height: 744px
}

.profile-photo-checker_header_animation {
  width: 100%
}

.profile-photo-checker_header_note {
  position: absolute;
  left: 0;
  bottom: 40px;
  font-weight: bold;
  font-size: 12px;
  width: 100%;
  text-align: center
}

.profile-photo-checker_header_note a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.87)
}

.profile-photo-checker .title-area {
  max-width: 480px
}

.profile-photo-checker_color-ok {
  color: #00C9B5
}

.profile-photo-checker_upload-area {
  position: fixed;
  bottom: 0;
  padding: 15px;
  width: 100%;
  max-width: 480px;
  text-align: center;
  background: rgba(255, 255, 255, 0.95)
}

.profile-photo-checker_upload-button input[type=file] {
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.profile-photo-checker_contents {
  padding: 0 15px 150px;
  background: #F7F7F7
}

.profile-photo-checker_contents-head {
  display: -webkit-box;
  display: flex;
  padding: 25px 15px;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold
}

.profile-photo-checker_card {
  position: relative;
  padding: 10px 0;
  background: #FFF;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  margin: 0 auto 20px
}

.profile-photo-checker_card.is-assigned {
  border: 4px solid #00C9B5;
  padding-bottom: 0
}

.profile-photo-checker_delete {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px
}

.profile-photo-checker_card-row {
  display: -webkit-box;
  display: flex;
  padding: 0 15px
}

.profile-photo-checker_card-col {
  flex-basis: 50%
}

.profile-photo-checker_card-col:first-child {
  margin-right: 8px
}

.profile-photo-checker_card-col:last-child {
  margin-left: 8px
}

.profile-photo-checker_card-col.is-thumb img {
  width: 100%;
  border-radius: 10px
}

.profile-photo-checker_card-col.is-total-score {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.profile-photo-checker_card_total-score_caption {
  border-radius: 15px;
  font-size: 20px;
  color: #FFF;
  letter-spacing: 0;
  display: inline-block;
  padding: 0 15px
}

.profile-photo-checker_card_total-score_caption.is-ok {
  background-image: -webkit-linear-gradient(left, #00C9B5, #3BE4A1);
  background-image: linear-gradient(90deg, #00C9B5, #3BE4A1)
}

.profile-photo-checker_card_total-score_caption.is-ng {
  background: rgba(0, 0, 0, 0.6);
  background-image: -webkit-linear-gradient(116deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 95%);
  background-image: linear-gradient(-26deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 95%)
}

.profile-photo-checker_card_total-score_val {
  font-size: 60px;
  font-weight: bold
}

.profile-photo-checker_card-col.is-detail-score {
  padding: 5px 0
}

.profile-photo-checker_score-bar_bg {
  height: 8px;
  background: whitesmoke;
  border-radius: 4px
}

.profile-photo-checker_score-bar_rate {
  height: 8px;
  border-radius: 4px
}

.profile-photo-checker_score-bar_rate.is-ok {
  background: -webkit-linear-gradient(right, rgba(145, 249, 113, 0.3) 0%, rgba(145, 249, 113, 0) 100%) #00c9b5;
  background: linear-gradient(-90deg, rgba(145, 249, 113, 0.3) 0%, rgba(145, 249, 113, 0) 100%) #00c9b5
}

.profile-photo-checker_score-bar_rate.is-ng {
  background: #8C8C8C
}

.profile-photo-checker_set-button {
  width: 90%;
  font-size: 13px;
  font-weight: bold;
  height: 40px;
  line-height: 40px
}

.profile-photo-checker_card_assigned-mark {
  padding: 5px;
  background-color: #00C9B5;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: #FFF
}

.profile-photo-checker_sort-dialog form:not(:last-child) {
  margin-bottom: 10px
}

.profile-photo-checker_overlay {
  display: none;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10
}

.profile-photo-checker_overlay.is-active {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center
}

.profile-photo-checker_overlay.is-upload img {
  margin-bottom: 10px
}

.profile-photo-checker_overlay.is-error.is-active {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column
}

.profile-photo-checker_sub-photos {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 45px;
  margin: auto;
  justify-content: space-around
}

.profile-photo-checker_sub-photos input[type=radio] {
  display: none
}

.profile-photo-checker_sub-photos label {
  position: relative;
  cursor: pointer
}

.profile-photo-checker_sub-photos label img {
  pointer-events: none
}

.profile-photo-checker_sub-photos input:checked+label:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border: 4px solid #606060;
  border-radius: 50%;
  top: 0;
  left: 0
}

.profile-photo-checker_sub-photos .sub-photo_item-m {
  margin-bottom: 15px
}

.profile-photo-checker_sub-photo {
  width: calc(100% / 3);
  text-align: center
}

#promote-profile-fill {
  height: 80px
}

.promote-profile-fill_container {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 100%
}

.promote-profile-fill_icon {
  margin-right: 10px
}

.promote-profile-fill_title {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .promote-profile-fill_title {
    font-size: 15px
  }
}

.promote-profile-fill_promote {
  font-size: 12px;
  color: #fff;
  line-height: 1.4em
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .promote-profile-fill_promote {
    font-size: 10px
  }
}

.promote-profile-fill_promote-first-line {
  margin-left: -5px
}

.promote-profile-fill_register-button {
  position: absolute;
  bottom: 10px;
  right: 10px
}

.promote-profile-fill_register-button>.button {
  font-size: 12px;
  font-weight: bold;
  width: 80px;
  height: 35px;
  line-height: 35px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .promote-profile-fill_register-button>.button {
    font-size: 10px;
    width: 72px;
    height: 25px;
    line-height: 25px
  }
}

.user-detail-toast-bar>.toast-bar {
  bottom: 105px
}

#promote-register-konomi {
  height: 95px;
  padding: 13px 10px
}

.promote-register-konomi_container {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 100%
}

.promote-register-konomi_title {
  font-size: 16px;
  font-weight: bold;
  color: #fff
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .promote-register-konomi_title {
    font-size: 15px
  }
}

.promote-register-konomi_title:before {
  content: '';
  display: inline-block;
  margin-right: 2px;
  width: 21px;
  height: 18px;
  vertical-align: -3px;
  background-image: url(//cdn.with.is/assets/shared/icons/exclamation_yellow-124fd59e5c76e906ffd302528fde7bacd9a11538a62f1e32f4a7616d490205a9.svg);
  background-repeat: no-repeat;
  background-size: 100%
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .promote-register-konomi_title:before {
    width: 18px;
    height: 15px;
    vertical-align: -2px
  }
}

.promote-register-konomi_body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
  font-size: 12px;
  color: #fff;
  line-height: 1.5
}

.promote-register-konomi_body>p {
  margin: 0
}

.promote-register-konomi_body_remaining {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 18px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  width: 85px;
  height: 35px;
  line-height: 1.5;
  margin-left: auto
}

.remaining-number {
  display: inline-block;
  width: 30px;
  font-size: 21px
}

.promote_app-overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%
}

.promote_app-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(//cdn.with.is/assets/promote_app/bg-42f40a3579a88fd43102c5aff7a5525886cd552e7218fa5a04f46c9c36631ffe.jpg)
}

.promote_app_close-button {
  z-index: 1;
  position: fixed;
  right: 10px;
  top: 10px
}

.promote_app_close-button>img {
  width: 30px
}

.promote_app-title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  max-width: 318.5px;
  max-height: 408.5px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .promote_app-title {
    max-width: 254.8px;
    max-height: 326.8px
  }
}

.promote_app-title_img {
  width: 90%;
  height: auto;
  max-width: 637px
}

.promote_app_start {
  width: 100%;
  text-align: center
}

.promote_app_start_button {
  display: block;
  margin: 5px auto 5px auto;
  width: 200px;
  height: 46px;
  line-height: 46px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  background-color: #606060;
  border-radius: 23px
}

.promote_app_start_button:link, .promote_app_start_button:active, .promote_app_start_button:visited {
  color: #fff;
  text-decoration: none
}

.promote-line-friend_title {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
  margin: 0 15px 10px
}

.promote-line-friend_title_line-color {
  color: #00b700
}

.promote-line-friend_contents {
  position: relative
}

.promote-line-friend_button {
  position: absolute;
  width: calc(100% - var(--outer-space) * 2);
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto
}

.promote-main-photo-face_header {
  text-align: center
}

.promote-main-photo-face_header>img {
  margin-top: -40px;
  width: 70px
}

.promote-main-photo-face_image {
  text-align: center;
  margin-bottom: 15px
}

.promote-main-photo-face_image>img {
  width: 202px
}

.camp-type-label {
  display: inline-block;
  line-height: 1.4;
  font-weight: bold;
  padding: 0 15px;
  color: #fff;
  background-color: #eee;
  border-radius: 40px
}

.promotion-campaign_type {
  padding: 20px 15px
}

.promotion-campaign_type_img {
  width: 100%;
  border-radius: 10px
}

.promotion-campaign_desc {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  padding: 0 15px;
  line-height: 1.8
}

.promotion-campaign_desc .camp-type-label {
  font-size: 16px
}

.promotion-campaign_participants {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center
}

.promotion-campaign_sns {
  padding: 0 15px 20px
}

.promotion-campaign_sns_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 17px;
  font-weight: bold;
  text-align: center
}

.promotion-campaign_sns_body {
  padding: 10px;
  width: 100%;
  height: 100px;
  color: #888;
  font-size: 12px;
  background-color: #F5F5F5;
  border: none;
  border-radius: 10px
}

.button-lovestyle {
  color: #fff;
  background: #FE6C07 -webkit-linear-gradient(330deg, #FFC700, #FE6C07 15%);
  background: #FE6C07 linear-gradient(120deg, #FFC700, #FE6C07 15%);
  box-shadow: 0 10px 15px rgba(254, 81, 7, 0.3)
}

.button-lovestyle:link, .button-lovestyle:visited {
  color: #fff
}

.button-lovestyle:hover, .button-lovestyle:active {
  color: #fff;
  background-color: #D73900
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .button-lovestyle {
    font-size: 15px
  }
}

.icon-lovestyle {
  position: absolute;
  top: 13px;
  left: 20px
}

.promotion-campaign_with-ad {
  position: relative
}

.promotion-campaign_with-ad_submit {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  margin: auto;
  width: 75%
}

body.desktop .received-cards a:hover {
  opacity: 1
}

.received-card_header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  font-size: 11px;
  border: none;
  z-index: 1
}

.received-card_header .received-card_num-main {
  width: 50%;
  height: 25px;
  line-height: 25px;
  margin: auto;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 13px
}

.received-card_header #received-card_num-label {
  vertical-align: middle;
  font-weight: bold
}

.received-card_header #received-card_num {
  vertical-align: middle;
  margin-left: 6px;
  font-size: 16px
}

.received-card_header .received-card_skip-info {
  margin-top: 10px
}

.received-card_header .received-card_filter {
  position: absolute;
  top: 13px;
  right: 15px;
  width: 35px;
  height: 29px;
  z-index: 1
}

.received-card_header .received-card_filter.on {
  background-image: url(//cdn.with.is/assets/like_filter/icon_on-196810521bf3377d4dcdae99429e544181ebe321941597dcaa0595e17531548f.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.received-card_header .received-card_filter.off {
  background-image: url(//cdn.with.is/assets/like_filter/icon_off-02e7def10b9221f30b54791965501a91e260cb535777381138e186924b2d4e04.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.received-cards {
  position: relative;
  padding-bottom: 30px;
  width: 100%;
  max-width: 700px
}

.received-cards .empty-card {
  padding: 20px;
  text-align: center
}

.received-cards .empty-card p {
  margin: 10px 0
}

.received-cards .empty-card .link-button {
  margin-top: 30px
}

.received-cards .received-card-floating {
  position: relative;
  padding: 20px 25px 10px;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15)
}

.received-cards .received-card {
  padding: 15px 25px;
  height: inherit;
  width: 100%;
  display: none;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.received-cards .received-card .received-card_panel-ui {
  margin: 10px 0 0;
  width: 100%;
  overflow: visible;
  position: relative;
  border-radius: 15px
}

.received-cards .received-card .received-card_panel-ui .received-card_recommend-tag {
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-top: 1px solid #fff;
  border-radius: 0 0 15px 15px
}

.received-cards .received-card .received-card_panel-ui .received-card_sub-photo:first-child {
  border-radius: 0 10px 0 0
}

.received-cards .received-card .received-card_panel-ui .photos-only .received-card_main-photo {
  border-radius: 10px 0 0 10px
}

.received-cards .received-card .received-card_panel-ui .photos-only .received-card_sub-photo:last-child {
  border-radius: 0 0 10px 0
}

.received-cards .received-card .received-card_panel-ui .with-recommend-tag .received-card_main-photo {
  border-radius: 10px 0 0 0
}

.received-cards .received-card .received-card_panel-ui .received-card_sub-area {
  padding-bottom: 20px;
  margin-top: 16px
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles {
  line-height: 1.2;
  padding: 5px 0;
  margin-bottom: 3px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_online {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 6px
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_online.is-online {
  background-color: #64C800
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_online.is-in-24h {
  background-color: #F8B62D
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_profiles_names-wrap {
  display: -webkit-box;
  display: flex;
  max-width: 55%;
  font-size: 14px
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_profiles_names-wrap .received-card_profiles_nickname {
  width: 50%
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_profiles_names-wrap .received-card_profiles_age-address {
  white-space: nowrap;
  margin-left: 5px
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_sub-photos-count {
  margin-left: auto;
  color: rgba(0, 0, 0, 0.28)
}

.received-cards .received-card .received-card_panel-ui .received-card_profiles .received-card_sub-photos-count>img {
  width: 15px;
  height: 15px;
  margin-top: -2px
}

.received-cards .received-card .received-card_panel-ui .received-card_tweet {
  color: #555
}

.received-cards .received-card .received-card_panel-ui .received-card_tweet:before {
  margin-right: 3px;
  width: 15px;
  height: 15px;
  vertical-align: -4px;
  background-image: url(//cdn.with.is/assets/user_frame/icn_tweet-ad991e77cb632ff70b7227c1840a3caf2c121ac65bad69024df5e04a86016b85.png)
}

.received-cards .received-card .received-card_panel-ui .received-card_like-answers {
  padding: 20px 0 25px
}

.received-cards .received-card .received-card_panel-ui .received-card_footer {
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  text-align: center;
  color: #999999
}

.no-card {
  margin: 5vh 0 15px;
  width: 200px
}

.received-card_photos {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  position: relative
}

.received-card_photos.with-newface-1day-round:after, .received-card_photos.with-newface-round:after {
  content: '';
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100%
}

.received-card_photos.with-newface-1day-round:after {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/today_user_round-6647af5f160a57d3a6bf750e78d3bbc0d2f2996abcb7f9e0ea02d8de2fe84ff6.png)
}

.received-card_photos.with-newface-round:after {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/new_user_round-e63e293f8c8e85fce8f62a9570ac17ad342f4677934d28ba6741d2c11869f8ef.png)
}

.received-card_main-photo {
  width: 66%;
  height: 100%;
  -webkit-box-flex: 2;
  flex-grow: 2;
  border-right: 1px solid #fff
}

.received-card_sub-photos {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 33%;
  height: auto
}

.received-card_sub-photo {
  width: 100%;
  height: 50%;
  -webkit-box-flex: 1;
  flex-grow: 1;
  position: relative
}

.received-card_sub-photo:first-child {
  border-bottom: 1px solid #fff
}

.received-card_camera-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%
}

.received-card_konomi-tags {
  max-height: 78px;
  overflow: hidden
}

.received-card_konomi-tag {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  margin: 3px 3px 3px 0;
  padding: 0 10px;
  background-color: #fff1f1;
  color: #606060;
  font-size: 11px;
  border-radius: 12px
}

.received-card_konomi-tag.affinity-tag {
  background-color: #ffdcdc;
  font-weight: bold
}

.received-card-floating.is-touching {
  -webkit-animation: user-card-transition-content 0.2s ease-out forwards;
  animation: user-card-transition-content 0.2s ease-out forwards;
  background-color: rgba(0, 0, 0, 0.1)
}

.received-like-actions {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  padding-bottom: 10px;
  height: 90px;
  width: 220px;
  max-width: 700px;
  text-align: center;
  color: #fff;
  display: -webkit-box;
  display: flex
}

.received-like-action {
  position: absolute;
  width: 80px;
  height: 80px;
  font-size: 10px;
  text-align: center;
  color: #fff
}

.received-like-action.is-animating {
  -webkit-animation: tap-button 0.2s ease-in-out 0s;
  animation: tap-button 0.2s ease-in-out 0s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate
}

.not-good:after, .thankyou:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s
}

.not-good:hover:after, .thankyou:hover:after, .not-good:active:after, .thankyou:active:after {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s
}

.not-good {
  left: 0;
  background-color: #B4B4B4;
  border-radius: 40px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15)
}

.not-good img {
  display: block;
  margin: 15px auto 5px;
  width: 25px
}

.thankyou {
  right: 0;
  background-color: #1EBEC6;
  border-radius: 40px;
  box-shadow: 0 10px 10px rgba(30, 190, 198, 0.15)
}

.thankyou img {
  display: block;
  margin: 12px auto 5px;
  width: 25px
}

.thankyou span {
  padding-left: 2px
}

.received-cards .not-good-filter {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background: url(//cdn.with.is/assets/received_card/icn_skip_large-8d5474f400db17cf9b5a23e2f489815fdb848c03ea1feea81735e6a488f98b5d.png), -webkit-linear-gradient(top, #000, #4c5153);
  background: url(//cdn.with.is/assets/received_card/icn_skip_large-8d5474f400db17cf9b5a23e2f489815fdb848c03ea1feea81735e6a488f98b5d.png), linear-gradient(to bottom, #000, #4c5153);
  background-position: center 40%;
  background-repeat: no-repeat;
  border-radius: 15px
}

.received-cards .not-good-filter:before {
  content: 'スキップしました！';
  color: #fff;
  font-size: 19px;
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  text-align: center
}

.received-cards .rotate-left {
  -webkit-transform: translateX(400px) rotate(30deg);
  transform: translateX(400px) rotate(30deg);
  -webkit-transition: 2s;
  transition: 2s;
  opacity: 0
}

.received-cards .thankyou-filter {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  background: url(//cdn.with.is/assets/received_card/icn_arigato-54b6a59262541b3363136f1451e30080f15958506e151857a526f0a77e6c1859.png), -webkit-linear-gradient(top, #b1fddb, #35bec3);
  background: url(//cdn.with.is/assets/received_card/icn_arigato-54b6a59262541b3363136f1451e30080f15958506e151857a526f0a77e6c1859.png), linear-gradient(to bottom, #b1fddb, #35bec3);
  background-position: center 40%;
  background-repeat: no-repeat;
  border-radius: 15px
}

.received-cards .thankyou-filter:before {
  content: 'マッチング成立！';
  color: #fff;
  font-size: 19px;
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  text-align: center
}

.received-cards .rotate-right {
  -webkit-transform: translateX(-400px) rotate(-30deg);
  transform: translateX(-400px) rotate(-30deg);
  -webkit-transition: 2s;
  transition: 2s;
  opacity: 0
}

.like-route {
  position: relative;
  height: 50px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.like-route_icon {
  margin-right: 15px
}

.like-route_icon-img {
  width: 50px;
  border-radius: 50px
}

.like-route.is-konomi .like-route_icon-img {
  border-radius: 8px
}

.like-route_title {
  min-width: 0;
  -webkit-box-flex: 1;
  flex: 1;
  line-height: 20px
}

.like-route_title-ellipsis {
  display: inline-block;
  vertical-align: top
}

.like-route_title-ellipsis.is-konomi {
  max-width: 80%
}

.like-route_title-ellipsis.is-campaign {
  max-width: 65%
}

.like-route_title-ellipsis.is-group-talk {
  max-width: 80%
}

.like-route_title .fit-vertical {
  margin-left: -8px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .like-route .size13 {
    font-size: 12px
  }

  .like-route .size16 {
    font-size: 15px
  }

  .like-route .like-route_icon {
    margin-right: 5px
  }
}

.recommend-plan_content {
  padding: 15px
}

.recommend-plan_content.is-1month {
  background-color: #DEFEFF
}

.recommend-plan_content.is-3months {
  background-color: #ffeded
}

.recommend-plan_heading {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px
}

.recommend-plan_graphs {
  padding: 25px 0
}

.recommend-plan_graph_frame {
  margin: 0 auto;
  padding: 15px;
  max-width: 400px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.04)
}

.recommend-plan_graph_frame+.recommend-plan_graph_frame {
  margin-top: 15px
}

.recommend-plan_graph_heading {
  margin-bottom: 10px;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  text-align: center
}

.recommend-plan_graph_img {
  display: block;
  margin: 0 auto 15px;
  width: 80%
}

.recommend-plan_graph_sample {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  clear: both
}

.recommend-plan_graph_sample .graph-sample_long-plan, .recommend-plan_graph_sample .graph-sample_short-plan {
  position: relative;
  display: block;
  padding-left: 50px;
  width: 140px;
  float: left
}

.recommend-plan_graph_sample .graph-sample_color {
  position: absolute;
  top: 8px;
  left: 20px;
  width: 20px;
  height: 20px;
  border-radius: 5px
}

.recommend-plan_graph_sample .graph-sample_plan-name span {
  display: block;
  font-size: 10px
}

.recommend-plan_advice {
  padding: 25px 0
}

.recommend-plan_advice>img {
  display: block;
  margin: 0 auto 15px;
  max-width: 400px
}

.recommend-plan_advice>p {
  margin: 0 auto;
  max-width: 400px;
  line-height: 25px
}

.recommend-plan_benefit {
  padding: 30px 15px 15px;
  background-color: #fff
}

.recommend-plan_benefit>img {
  display: block;
  margin: 0 auto;
  max-width: 400px
}

.recommend-plan_links {
  padding: 15px 15px 100px;
  background-color: #fff
}

.recommend-plan_links a {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center
}

.recommend-plan_links a:link, .recommend-plan_links a:visited, .recommend-plan_links a:hover, .recommend-plan_links a:active {
  color: rgba(0, 0, 0, 0.6)
}

.recommend-plan_contract {
  position: fixed;
  margin: 0 auto;
  padding: 12px 10px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 700px;
  height: 75px
}

.recommend-plan_contract:link, .recommend-plan_contract:visited, .recommend-plan_contract:hover, .recommend-plan_contract:active {
  color: #fff;
  text-decoration: none
}

.recommend-plan_contract:hover, .recommend-plan_contract:active {
  opacity: 0.8
}

.recommend-plan_contract.is-1month {
  background-color: rgba(0, 172, 183, 0.9)
}

.recommend-plan_contract.is-1month .recommend-plan_contract_desc {
  color: #00ACB7
}

.recommend-plan_contract.is-3months {
  background-color: rgba(254, 105, 112, 0.9)
}

.recommend-plan_contract.is-3months .recommend-plan_contract_desc {
  color: #606060
}

.recommend-plan_contract .recommend-plan_contract_img {
  width: auto;
  height: 51px
}

.recommend-plan_contract .recommend-plan_contract_desc {
  position: absolute;
  top: 12px;
  right: 10px;
  padding: 8px 5px 5px;
  width: 30%;
  max-width: 130px;
  height: 50px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  line-height: 17px
}

.recommend-plan_contract .recommend-plan_contract_price {
  display: inline-block;
  font-size: 30px;
  line-height: 1
}

.recommend-plan_contract .recommend-plan_contract_price-detail {
  display: inline-block;
  line-height: 1
}

.recommend-plan_loading-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff
}

.recommend-plan_loading_content {
  margin: 20vh auto 0;
  width: 80vw;
  max-width: 300px;
  font-size: 15px;
  font-weight: bold;
  text-align: center
}

.recommend-plan_loading_img {
  display: block;
  margin: 0 auto 15px;
  width: 80%
}

.recommend-plan_loading_graph {
  margin: 0 auto 15px;
  width: 100%
}

.recommend-plan_loading_graph .progress-bar {
  height: 10px;
  background-color: #ffeded
}

.recommend-plan_loading_graph .progress-bar div {
  height: 10px;
  background-color: #606060;
  -webkit-animation: progress-bar 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards;
  animation: progress-bar 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards
}

.referral-container {
  background-color: #fff
}

.referral-header {
  background-image: url(//cdn.with.is/assets/referral_code/header_bg-563ee3167b2bb616e29f71917a5a668fd142fe13815c30b8f2c6a9b9bbbbb486.jpg);
  background-position: center;
  text-align: center
}

.referral-header>img {
  width: 100%
}

span.referral-text-strong {
  font-weight: bold
}

.referral-banner {
  padding: 10px;
  background-color: #fff
}

.referral-banner img {
  width: 100%;
  border-radius: 10px
}

.refer-need-matching {
  width: 85%;
  margin: 30px auto 0;
  padding-bottom: 30px;
  text-align: center
}

.refer-need-matching .refer-need-matching-img {
  margin-top: 15px;
  margin-bottom: 30px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  align-items: flex-start
}

.refer-need-matching .refer-need-matching-img .matching-user-thumb {
  width: 70px;
  border-radius: 50%;
  margin-right: 5px
}

.refer-need-matching .refer-need-matching-img .matching-heart {
  width: 155px;
  margin: 0 8px
}

.refer-need-matching .refer-need-matching-img .matching-other {
  width: 70px
}

.refer-steps {
  background-color: #ffeb80;
  text-align: center
}

.refer-steps .img-step-title {
  padding-bottom: 10px
}

.refer-steps .img-step, .refer-steps .img-step-arrow {
  padding: 10px 0
}

.refer-steps .img-step:last-child {
  padding-bottom: 30px
}

.refer-steps .img-step-title>img {
  width: 90%
}

.refer-steps .img-step>img {
  width: 88%
}

.refer-steps .img-step-arrow>img {
  width: 10%
}

.refer-code {
  margin: 25px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  text-align: center
}

.refer-code .refer-user {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.refer-code .refer-user .refer-user-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 5px
}

.refer-code .refer-user .refer-user-name {
  max-width: 35%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.refer-code .referral-code-box {
  width: 80%;
  margin: 12px auto;
  padding-bottom: 10px
}

.refer-code .referral-code-box a {
  text-decoration: none
}

.refer-code .referral-code-box .referral-code-display {
  font-size: 26px;
  color: #606060;
  letter-spacing: 15px;
  text-indent: 15px;
  font-weight: bold;
  border-bottom: 3px solid #606060;
  margin-bottom: 10px
}

.refer-code .icn-refer-by {
  width: 120px;
  margin: 20px auto
}

.refer-code .icn-refer-by img {
  width: 120px
}

.refer-description {
  margin: 0px 25px;
  padding-bottom: 25px;
  font-size: 11px
}

.refer-description ul {
  list-style-type: disc;
  list-style-position: inside;
  line-height: 1.6em
}

.refer-description ul li {
  padding-bottom: 10px
}

#referred-steps {
  background-color: #ffeb80;
  text-align: center
}

#referred-steps>img {
  width: 90%;
  padding-bottom: 30px
}

.referred-form {
  width: 80%;
  margin: 20px auto;
  text-align: center
}

.referred-form .form-group {
  margin-top: 10px
}

.referred-form .form-group .referred-input-code, .referred-form .form-group .referred-input-error {
  width: 80%;
  max-width: 330px;
  height: 50px;
  border-radius: 10px;
  font-size: 26px;
  text-align: center;
  letter-spacing: 12px;
  text-indent: 12px
}

.referred-form .form-group .referred-input-code {
  background-color: #e4e4e4
}

.referred-form .form-group .referred-input-error {
  background-color: #ffe3e4;
  color: #d0021b
}

.referred-form .referred-remaining-time {
  margin-top: 10px;
  margin-bottom: 15px
}

.referred-form .err-msg {
  color: #d0021b;
  margin-bottom: 10px
}

.referred-description {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 25px;
  font-size: 11px
}

.referred-complete {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: 20px
}

.referred-complete>h4 {
  margin-top: 30px
}

.referred-complete>img {
  width: 95%;
  margin-top: 10px;
  margin-bottom: 25px
}

.referred-complete>a {
  margin-bottom: 30px
}

.rest-mode_describe-image img {
  width: 100%;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0 2px
}

.rest-mode_icon {
  text-align: center
}

.rest-mode_icon img {
  width: 80px;
  height: 80px
}

.rest-mode_container {
  position: relative;
  overflow: hidden
}

.rest-mode_contents {
  -webkit-filter: blur(30px);
  -moz-filter: blur(30px);
  filter: blur(30px);
  -webkit-transform: translate(0);
  transform: translate(0);
  height: 500px
}

@media all and (-ms-high-contrast: none) {
  .rest-mode_contents {
    visibility: hidden
  }
}

.rest-mode_overlay {
  text-shadow: rgba(0, 0, 0, 0.15) 0 0 1px;
  height: 100%;
  width: 100%;
  padding: 50px 25px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 5
}

.rest-mode_status {
  text-align: center;
  color: #6d6d6d
}

label.is-reviewing:after {
  content: '審査中';
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  background-color: #b8b8b8;
  padding: 3px 6px;
  color: #fff
}

.mypage_edit-tweet-balloon>a.is-reviewing {
  padding: 0 30px 0 65px
}

.mypage_edit-tweet-balloon>a.is-reviewing:before {
  content: '審査中';
  display: inline-block;
  position: absolute;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  background-color: #b8b8b8;
  padding: 3px 6px;
  top: 10px;
  left: 15px;
  color: #fff
}

.mypage-profile_photo.is-reviewing:after, .mypage_edit-main_photo.is-reviewing:after, .sub-photo_item-m.is-reviewing:after, .konomi-comment_item.is-reviewing:after, .group-card_image.is-reviewing:after {
  content: '審査中';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff
}

.mypage-profile_photo.is-reviewing:after {
  font-size: 11px;
  width: 59px;
  height: 21px;
  line-height: 21px
}

.mypage_edit-main_photo.is-reviewing:after {
  font-size: 12px;
  width: 82px;
  height: 26px;
  line-height: 26px
}

.sub-photo_item-m.is-reviewing:after {
  font-size: 10px;
  width: 40px;
  height: 16px;
  line-height: 16px
}

.konomi-comment_item.is-reviewing:after {
  font-size: 12px;
  width: 50px;
  height: 20px;
  line-height: 20px
}

.group-card_image.is-reviewing {
  position: relative
}

.group-card_image.is-reviewing:after {
  font-size: 10px;
  width: 40px;
  height: 16px;
  line-height: 16px
}

.sandglass {
  margin-top: 20px;
  margin-bottom: 80px;
  padding: 0 114px
}

.sandglass>img {
  width: 32px
}

.reward-campaign-lp_closed {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 15px;
  background-color: #9c9c9c;
  padding: 15px 0
}

.reward-campaign-lp_missions {
  background-color: #ffd800;
  padding: 0 20px 20px
}

.reward-campaign-lp_desc {
  padding: 20px;
  font-size: 13px
}

.reward-campaign-lp_desc-title {
  color: #606060;
  font-size: 20px;
  font-weight: bold
}

.reward-campaign-lp_desc-topic {
  padding-top: 20px
}

.reward-campaign-lp_desc-topic-title {
  color: #606060;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px
}

.reward-campaign-lp_notes {
  font-size: 11px;
  padding: 30px 20px;
  background-color: #f5f5f5
}

.reward-campaign-lp_notes-list {
  font-size: 11px;
  margin-top: 11px
}

.reward-campaign-lp_note {
  margin-bottom: 11px
}

.reward-campaign-lp_link {
  color: #606060;
  text-decoration: underline
}

.reward-campaign-lp_link:hover {
  opacity: 0.8
}

.ryoenshoten-lp {
  font-size: 15px
}

.ryoenshoten-lp_section {
  padding: 50px 15px;
  background-color: #f4f1f0
}

.ryoenshoten-lp_section.has-partition {
  background-image: url(//cdn.with.is/assets/pages/ryoenshoten/partition-4a0eee101a7ea76a6b32eab9e378b232c59be87da507299b10f5973b08ce6bc1.png);
  background-position: bottom;
  background-repeat: no-repeat
}

.ryoenshoten-lp_frame {
  margin: 0 auto;
  max-width: 380px;
  line-height: 1.7
}

.ryoenshoten-lp_step {
  padding: 80px 15px;
  background-color: #f4f1f0
}

.ryoenshoten-lp_step_img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 380px
}

.ryoenshoten-lp_detail {
  background-color: #f4f1f0
}

.ryoenshoten-lp_table tr:nth-child(odd) {
  background-color: #EDE5E2
}

.ryoenshoten-lp_table th {
  padding: 20px 10px;
  width: 25%;
  text-align: right;
  vertical-align: top;
  font-size: 13px;
  font-weight: bold
}

.ryoenshoten-lp_table td {
  padding: 20px 30px 20px 10px;
  font-size: 14px
}

.ryoenshoten-lp_map {
  padding: 20px 15px;
  width: 100%;
  background-color: #EDE5E2
}

.ryoenshoten-lp_map_img {
  display: block;
  margin: 0 auto 20px;
  width: 100%;
  max-width: 380px
}

.ryoenshoten-lp_ul li {
  margin-bottom: 20px
}

.my-profile-other-sample-button, .my-profile-return-sample-button {
  position: fixed;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  text-align: center
}

.my-profile-other-sample-button {
  width: 85%;
  max-width: 650px;
  bottom: 75px;
  height: 45px;
  line-height: 45px;
  background-color: #fff;
  color: #606060;
  border: 2px solid #606060;
  border-radius: 23px;
  z-index: 5
}

.my-profile-other-sample-button:link, .my-profile-other-sample-button:hover, .my-profile-other-sample-button:visited {
  color: #606060;
  text-decoration: none
}

.my-profile-other-sample-button:after {
  width: 22px;
  height: 20px;
  vertical-align: -3px;
  margin-left: 2px;
  background-image: url(//cdn.with.is/assets/shared/icons/shuffle-cacecbda50f5361d0a3ecadeb868dd15860fb48b5fefe65c66c90a71a65eeada.svg)
}

.my-profile-return-sample-button {
  width: 70%;
  max-width: 650px;
  bottom: 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  z-index: 5
}

.my-profile-return-sample-button:link, .my-profile-return-sample-button:hover, .my-profile-return-sample-button:visited {
  color: #fff;
  text-decoration: none
}

.search-lp_matching {
  padding: 20px 0
}

.search-lp_matching_title {
  font-size: 23px
}

.search-lp_search-field {
  padding: 20px 20px 0;
  background-repeat: no-repeat;
  background-size: 100%
}

.search-lp_search-field.is-pink {
  background-image: url(//cdn.with.is/assets/welcome/search_lp/search_bg_pink-902c0e8b58efe15fe3fc971f693b597af33212fd7f2aa0e1ead40983de42495b.png)
}

.search-lp_search-field.is-blue {
  background-image: url(//cdn.with.is/assets/welcome/search_lp/search_bg_blue-e9a9475ec24a3f9021db47994ad4f9d84fc1b3ba5debc810f0c3739122e83655.png)
}

.search-lp_search-field_title {
  margin-bottom: 20px;
  font-size: 16px
}

.search-lp_search-form {
  margin: 0 auto;
  max-width: 400px
}

.search-lp_select-gender input[type="radio"] {
  display: none
}

.search-lp_select-gender label {
  display: inline-block;
  height: 100%
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .search-lp_select-gender label {
    height: 85%
  }
}

.search-lp_select-gender img {
  height: 100%;
  pointer-events: none
}

.search-lp_search-buttons {
  margin-bottom: 15px;
  height: 50px
}

.search-lp_search-buttons .half-button {
  display: inline-block;
  height: 50px
}

.search-lp_introduction {
  font-size: 14px
}

.search-lp_result {
  margin-bottom: 15px
}

.search-lp_result.is-blue {
  color: #2cc4cb
}

.search-lp_result_num {
  display: inline-block;
  font-size: 36px
}

.search-lp_result_unit {
  display: inline-block;
  font-size: 20px
}

.search-lp_result_20s {
  display: inline-block;
  font-size: 14px
}

.search-lp_sample-profile {
  width: 100%
}

.search-lp_login {
  padding: 0 20px 40px
}

.search-lp_attention {
  margin-top: 10px;
  width: 100%;
  color: #555;
  font-size: 10px;
  text-align: center
}

.search-lp_form-select select {
  height: 45px
}

.search-lp_form-select select:disabled {
  background-color: #efefef;
  color: #888888
}

.form-select-column .form-select-border {
  border-color: #555555
}

.form-select-column .form-select-border.is-active {
  border: 1px #FF6A70 solid
}

.form-select-column.info-color .form-select-border {
  border-color: #555555
}

.form-select-column.info-color .form-select-border.is-active {
  border: 1px #2cc4cb solid
}

.search-controller {
  padding: 0 10px;
  border-bottom: 1px solid #ececeb
}

.search-controller_frame {
  height: 42px;
  position: relative;
  background-color: #fff;
  border-bottom: none;
  text-align: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center
}

.search-controller_search-link, .search-controller_view-mode-link {
  width: 30%;
  display: block;
  overflow: hidden;
  white-space: nowrap
}

.search-controller_search-link:link, .search-controller_view-mode-link:link {
  text-decoration: none
}

.search-controller_search-link:visited, .search-controller_view-mode-link:visited {
  color: #606060
}

.search-controller_search {
  float: left;
  width: 100%
}

.search-controller_search>.icon-arrow-left {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 10px
}

.search-controller_search>.size3 {
  vertical-align: middle
}

.search-controller_sort>.size3 {
  vertical-align: middle
}

.search-controller_summary {
  height: 100%;
  width: 40%;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center
}

.icon-search {
  display: inline-block;
  vertical-align: middle;
  width: 22.5px;
  height: 30px;
  background-image: url(//cdn.with.is/assets/shared/icn_search-0e512311c13195c6404fba6f9a2a5c6b29aed2e083402b39dbf52dd2392c7a9e.png);
  background-size: 22.5px 60px;
  background-repeat: no-repeat;
  background-position: 0 0
}

.icon-search.is-enabled {
  background-position: 0px -30px
}

#search-navigation {
  padding: 15px 20px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 700px;
  z-index: 10;
  background-color: rgba(255, 247, 247, 0.95)
}

#search-navigation input[type="submit"] {
  padding: 0;
  background-color: transparent
}

#search-navigation .search-reset-button {
  width: 30%
}

#search-navigation .search-submit-button {
  width: 70%
}

#search-navigation .search-submit-button>img {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 18px;
  height: 18px
}

.search-empty {
  padding: 50px 20px
}

.search-empty_illust {
  width: 123px
}

.search-form-history-list {
  background-color: #fff
}

.search-form-history-link {
  display: block;
  padding: 0 15px;
  background-color: #fff
}

.search-form-history-link:link, .search-form-history-link:active, .search-form-history-link:visited {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none
}

.search-form-history-link:hover {
  background-color: #eaeaea
}

.search-form-history-content {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 30px;
  width: 100%;
  height: 50px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px
}

.search-form-history-content:before {
  content: '';
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  width: 13px;
  height: 13px;
  background-image: url(//cdn.with.is/assets/searches/icon_search-813b6ce5f938821080a42ca66397eb8749ac9234c3bb811036e2db359b574153.png);
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.search-form-history-link+.search-form-history-link .search-form-history-content {
  border-top: 1px solid #ececeb
}

.search-dialog-overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 700px;
  height: 100%;
  display: none
}

.search-dialog_contents, .select-affinities_contents {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: #fff
}

.select-affinities_contents .title-area {
  position: fixed;
  width: 100%;
  max-width: 700px;
  z-index: 10
}

.select-conditions_clear {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 20%;
  display: block;
  overflow: hidden;
  white-space: nowrap
}

.select-conditions_clear_button {
  width: 100%;
  padding: 5px 0;
  text-align: right;
  color: #606060
}

.affinities_count {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px
}

.affinities_count.is-active {
  color: #606060
}

.affinity_empty {
  padding: 50% 20px
}

.confirm-affinity-image {
  margin-bottom: 15px;
  width: 75px;
  border-radius: 10px
}

.select-affinities_categories-tab {
  padding: 5px 0;
  background-color: #fff;
  width: 100%;
  max-width: 700px
}

.select-affinities_categories-tab.is-fixed {
  position: fixed;
  top: 60px;
  z-index: 80
}

.select-affinities_categories-list {
  padding: 0 15px;
  width: 100%;
  height: 45px;
  overflow-x: auto;
  white-space: nowrap
}

.search-container {
  background-color: #fff
}

.search-category_heading {
  display: inline-block;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-weight: bold
}

#platinum-sort-order .platinum_title {
  color: #b79c64
}

#platinum-sort-order .platinum-button {
  background-color: #b79c64;
  color: #fff
}

#platinum-sort-order .platinum-button:active {
  background-color: #cbb687
}

.title-area_info-link .icon-close-dialog {
  position: absolute;
  top: 20px;
  right: 15px;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/searches/icon_close-d9e8dd8787d45f2c04cd7edbe17b6f745e22e2052e60420e7fcf47754bc8564b.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.form-search-checkbox>input[type="checkbox"] {
  display: none
}

.form-search-checkbox>label {
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  background-color: none;
  border: none
}

.form-search-checkbox>label:before {
  display: block;
  content: '';
  position: absolute;
  top: 14px;
  right: 0;
  width: 20px;
  height: 20px;
  background-size: 200% 100%;
  background-position: 100%;
  background-image: url(//cdn.with.is/assets/shared/icn_checkbox-7c72592e2cee307efe98b4bd7074a55426c4c68201136c121c18300626856bfc.png)
}

.form-search-checkbox>label:active {
  opacity: 0.8
}

.form-search-checkbox>input[type="checkbox"]:checked+label {
  color: #606060;
  background-color: none;
  border: none
}

.form-search-checkbox>input[type="checkbox"]:checked+label:before {
  background-position: 0
}

.accordion-item {
  margin-left: 10px
}

.has-accordion-link>label:before {
  right: 50px
}

.form-search-accordion-link {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: -15px;
  width: 50px;
  height: 50px;
  border-left: 1px solid #ececeb
}

.form-search-accordion-link_icon {
  display: inline-block;
  background-image: url(//cdn.with.is/assets/shared/icn_arrow-e084cc154994d640d945aa021d8ede153e0d45f87953cb233068e708bb66293c.png);
  background-repeat: no-repeat;
  width: 10px;
  height: 12px;
  background-size: 19px 25px;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  top: 17px;
  position: absolute;
  right: 20px
}

.form-search-accordion-link_icon.is-close {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.form-search-accordion {
  display: none
}

.search-prefecture-city .form-search-checkbox>label:before {
  background-size: 100%;
  background-image: url(//cdn.with.is/assets/searches/icon_blank-8a8001cd440d6c41b9ccffdc8fb03d36a8848fd1a7e9cd5958e5afebfec4290a.svg)
}

.search-prefecture-city .form-search-checkbox>input[type="checkbox"]:checked+label:before {
  background-image: url(//cdn.with.is/assets/searches/icon_checked-82a6ec181410f443c6c0371983522b8e3d4a8278d6802fc05a09964465d9d291.svg)
}

.search-prefecture-city .form-search-checkbox>input.is-selected-icon[type="checkbox"]:checked+label:before {
  background-size: 100%;
  background-image: url(//cdn.with.is/assets/searches/icon_selected-4a7a6798ebac4856bad03ac113618b49006f999d43a57516d741784c6de792e5.svg)
}

.search-newcomers-container .grid .user-card-small {
  margin-top: 0
}

.search-newcomers-container .newcomers-grid-top {
  position: absolute;
  top: 405px;
  background-color: #fff;
  max-width: 700px;
  width: 100%;
  height: 20px;
  border-radius: 15px
}

.search-newcomers-container .newcomers-header {
  width: 100%;
  height: 365px;
  position: relative;
  background-image: url(//cdn.with.is/assets/searches/newcomers_header-956830338042484820200c14ec165c44ccec5e7a79e3649fb062cfebfa3cba07.png);
  background-position: center;
  background-size: cover;
  color: #606060
}

.search-newcomers-container .newcomers-header_close-button {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 15px;
  right: 15px;
  background-image: url(//cdn.with.is/assets/shared/icons/close_gray_light-b58f83a4a19a3104023d2304482a95c56180a15298c3f7d950071199853264d0.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.search-newcomers-container .newcomers-header_contents {
  position: absolute;
  width: 100%;
  height: 180px;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center
}

.search-newcomers-container .newcomers-header_contents>img {
  margin-bottom: 20px
}

.search-newcomers-container .newcomers-header_contents .end-at-notification {
  background-color: #fff;
  width: 185px;
  font-size: 14px;
  height: 25px;
  font-weight: bold;
  text-align: center;
  border-radius: 15px;
  margin: auto;
  vertical-align: bottom
}

.search-newcomers-container .newcomers-header_contents .end-at-notification>span.slash {
  font-weight: normal
}

.search-newcomers-container .newcomers-header_contents .end-at-notification>span.number {
  font-size: 16px
}

.search-newcomers-container .newcomers-header_contents .end-at-notification>span.wday {
  vertical-align: 1px
}

.head-accessories_solid-type-search {
  padding-top: 10px
}

.head-accessories_solid-type-search .search-controller_frame_solid-type {
  padding: 0 17px;
  height: 42px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center
}

.head-accessories_solid-type-search .search-controller_conditions-wrap {
  text-decoration: none;
  width: 100%
}

.head-accessories_solid-type-search .search-controller_conditions-wrap .search-controller_conditions {
  background-color: #f1f1f1;
  height: 30px;
  border-radius: 15px;
  text-align: left;
  margin-right: 10px;
  padding-left: 10px
}

.head-accessories_solid-type-search .search-controller_conditions-wrap .search-controller_conditions:active {
  background-color: #dddddd
}

.head-accessories_solid-type-search .search-controller_conditions-wrap .search-controller_conditions.is-enabled {
  background-color: #ffeded
}

.head-accessories_solid-type-search .search-controller_conditions-wrap .search-controller_conditions.is-enabled:active {
  background-color: #ffdbdb
}

.head-accessories_solid-type-search .search-controller_conditions-wrap .search-controller_conditions>span {
  line-height: 30px;
  vertical-align: middle
}

.head-accessories_solid-type-search .search-controller_conditions-wrap .search-controller_conditions>span.icon-search {
  width: 17px;
  height: 17px;
  background-image: url(//cdn.with.is/assets/shared/icn_search_solid-9ec62b13a292304ae7ec3ca16c3713edeaca9d1e70218374fa45846d64f3c68d.png);
  background-size: 40px 17px;
  background-position: -23px 0;
  margin-right: 5px
}

.head-accessories_solid-type-search .search-controller_conditions-wrap .search-controller_conditions>span.icon-search.is-enabled {
  background-position: 0 0
}

.head-accessories_solid-type-search .search-controller_sort {
  width: 20px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/icons/wire/order-8cdddebe576239b75d8bb3352f23bcffe5a83c296d087540d718f35233dc7a10.svg);
  margin-left: 7px
}

.head-accessories_solid-type-search .search-controller_sort.is-touching {
  background-image: url(//cdn.with.is/assets/shared/icons/wire/order_touching-73518061ec0aba64653c8cdeaa64771ec627f3ad57f7e341498e4f6bab3a7fc5.svg)
}

.head-accessories_solid-type-search .search-controller_summary {
  width: 100%
}

.head-accessories_solid-type-gray {
  padding-top: 10px
}

.head-accessories_solid-type-gray .search-controller_frame_solid-type {
  height: 42px;
  position: relative;
  border-bottom: none;
  text-align: center;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center
}

.head-accessories_solid-type-gray .search-controller_search-link {
  width: 30%;
  display: block;
  overflow: hidden;
  white-space: nowrap
}

.head-accessories_solid-type-gray .search-controller_search-link:link {
  text-decoration: none
}

.head-accessories_solid-type-gray .search-controller_search-link:visited {
  color: #606060
}

.head-accessories_solid-type-gray .search-controller_search {
  float: left;
  width: 90px;
  height: 30px;
  background-color: white;
  border-radius: 30px;
  padding: 3px 5px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border: 1px solid #d8d8d8
}

.head-accessories_solid-type-gray .search-controller_search-enabled {
  float: left;
  width: 90px;
  height: 30px;
  background-color: white;
  border-radius: 30px;
  padding: 3px 5px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border: 1px solid #606060
}

.head-accessories_solid-type-gray .search-controller_sort {
  float: right;
  width: 90px;
  height: 30px;
  background-color: white;
  border-radius: 30px;
  padding: 3px 5px;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border: 1px solid #d8d8d8
}

.head-accessories_solid-type-gray .icon-search {
  width: 16px;
  height: 16px;
  background-image: url(//cdn.with.is/assets/shared/icn_search_solid-9ec62b13a292304ae7ec3ca16c3713edeaca9d1e70218374fa45846d64f3c68d.png);
  background-size: 38px 16px;
  background-position: -22px 0;
  margin-right: 2px
}

.head-accessories_solid-type-gray .icon-search.is-enabled {
  background-position: 0 0
}

.head-accessories_solid-type-gray .icon-sort {
  width: 16px;
  height: 16px;
  background-image: url(//cdn.with.is/assets/shared/icons/wire/order-8cdddebe576239b75d8bb3352f23bcffe5a83c296d087540d718f35233dc7a10.svg);
  background-size: cover;
  margin-left: 2px
}

.head-accessories_solid-type-gray .search-controller_solid-type {
  padding: 0 16px
}

.head-accessories_solid-type-gray .span-text {
  vertical-align: middle
}

.head-accessories_solid-type-gray .icon-span-text {
  font-size: 10px
}

.head-accessories_solid-type-gray .icon-span-text.is-enabled {
  color: #606060
}

.search-controller_oval-type {
  background-color: #f0f0f0;
  width: 105px;
  height: 30px;
  border-radius: 15px;
  text-align: left
}

.search-controller_oval-type.is-touching {
  background-color: #e5e5e5
}

.search-controller_oval-type.is-enabled {
  background-color: #fff1f1
}

.search-controller_oval-type.is-enabled.is-touching {
  background-color: #ffdcdc
}

.search-controller_oval-type a {
  text-decoration: none
}

.search-controller_oval-type .search-controller_conditions {
  position: relative;
  margin-left: 12px;
  line-height: 30px
}

.search-controller_oval-type .search-controller_conditions:before {
  content: '';
  position: absolute;
  top: 7px;
  width: 17px;
  height: 17px;
  background-image: url(//cdn.with.is/assets/shared/icons/search-22b12f910929564eef1c7d427a94bfea72d53493169c8ba575526528b8e4ee38.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.search-controller_oval-type .search-controller_conditions.is-enabled:before {
  background-image: url(//cdn.with.is/assets/shared/icons/search_enabled-7c4e99f604f45fea50bd5d95e19b7883291a810f3b866fa0d5afedd2fa6a9dab.svg)
}

.search-controller_oval-type .search-controller_conditions>span {
  margin-left: 25px
}

.search-controller_oval-type.search-tutorial .search-controller_conditions {
  margin-left: 10px;
  line-height: 26px
}

.search-controller_oval-type.search-tutorial .search-controller_conditions:before {
  top: 5px
}

.secret-questions_content {
  position: fixed;
  height: 58px;
  bottom: 65px
}

.secret-questions_main-link {
  position: fixed;
  display: block;
  width: 58px;
  height: 58px
}

.secret-questions_daigo-balloon {
  position: relative;
  right: 150px;
  width: 142px
}

.secret-questions_unread-balloon {
  position: relative;
  padding: 10px;
  width: 170px;
  height: 55px;
  right: 180px;
  background-color: #ffeded;
  border-radius: 10px
}

.secret-questions_unread-balloon::after {
  content: '';
  position: absolute;
  height: 16px;
  width: 8px;
  top: 20px;
  right: -7px;
  background-image: url(//cdn.with.is/assets/secret_questions/balloon_tail_pink-2c7c5d9545ee3250da3898fd63aa4134bbc9de2216f33a9cc16a21455411749a.svg);
  background-repeat: no-repeat
}

.secret-questions_unread-badge {
  position: absolute;
  top: 5px;
  right: 0px;
  display: block;
  width: 12px;
  height: 12px;
  background-color: red;
  border: 2px solid white;
  border-radius: 10px
}

.secret-questions_thumb {
  width: 35px;
  border-radius: 50%
}

.secret-questions_unread-message {
  width: 105px;
  float: right
}

.secret-questions_unread-message>p {
  font-size: 13px;
  margin: 0
}

.secret-questions_unread-message>p>span.secret_questions_nickname {
  color: #606060;
  font-weight: bold;
  display: inline-block;
  max-width: 70%;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis
}

.secret-questions_link-space {
  float: right;
  right: 15px;
  margin-top: 10px;
  margin-bottom: 20px;
  height: 58px;
  width: 58px
}

.secret-question_help-link:link, .secret-question_help-link:visited {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 10px;
  width: 80px;
  height: 60px;
  line-height: 60px;
  color: #999999;
  font-size: 13px;
  text-align: right;
  text-decoration: none
}

.secret-question_help-link img {
  margin-top: -2px;
  width: 15px
}

.secret-question_frame {
  position: relative
}

.secret-question_heading {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding: 20px;
  height: 150px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.secret-question_no {
  margin-bottom: 10px;
  width: 40px
}

.secret-question_title {
  color: #fff;
  font-size: 15px;
  font-weight: bold
}

.secret-question_answers {
  position: relative;
  padding: 20px 10px
}

.secret-question_heading_me {
  width: 100%;
  font-size: 13px;
  text-align: right;
  font-weight: bold
}

.secret-question_edit {
  position: absolute;
  top: 20px;
  left: 10px;
  font-size: 13px;
  font-weight: bold
}

.secret-question_edit:link, .secret-question_edit:visited {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.secret-question_edit img {
  margin-top: -3px;
  width: 15px
}

.secret-question_enter-button {
  position: relative;
  display: block;
  margin-top: 15px;
  width: 100%;
  line-height: 45px;
  color: #606060;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #606060;
  border-radius: 5px
}

.secret-question_enter-button:before {
  content: '';
  position: absolute;
  top: -10px;
  right: 10px;
  width: 12px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(//cdn.with.is/assets/secret_questions/balloon_tail_enter-23ce6c917fae8c1ec489561ac4666ac6963054ba3a0d8f77610452a115476429.png)
}

.secret-question_enter-button:hover {
  background-color: #FFF1F1
}

.secret-question_enter-button:hover:before {
  background-image: url(//cdn.with.is/assets/secret_questions/balloon_tail_enter_hover-e6577cdd6c449e8f7d403a6df4c284f58493170b69ef43ea761a5840f3a8b3ae.png)
}

.secret-question_enter-button:link, .secret-question_enter-button:visited {
  color: #606060;
  text-decoration: none
}

.secret-question_enter-button img {
  margin-top: -3px;
  width: 15px
}

.secret-question_answers_me {
  position: relative;
  display: block;
  margin-top: 15px;
  padding: 10px;
  width: 100%;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 13px;
  word-wrap: break-word;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px
}

.secret-question_answers_me:before {
  content: '';
  position: absolute;
  top: -10px;
  right: 10px;
  width: 12px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(//cdn.with.is/assets/secret_questions/balloon_tail_white-d353fd6c57257848fc2b1e5fa0885b83a2bb343e39a1e520644cd5b06f4a0750.png)
}

.secret-question_answers_me:hover {
  background-color: #F1F1F1
}

.secret-question_answers_me:hover:before {
  background-image: url(//cdn.with.is/assets/secret_questions/balloon_tail_white_hover-4619f5bad1bfe55ebaf2b6bfa20c12c9b341c448a3d0fef703f85afac63eed61.png)
}

.secret-question_answers_me:link, .secret-question_answers_me:visited {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none
}

.secret-question_heading_partner {
  margin-top: 15px;
  line-height: 30px;
  color: #606060;
  font-weight: bold
}

.secret-question_heading_partner img {
  margin-right: 10px;
  width: 30px;
  border-radius: 15px
}

.secret-question_waiting {
  position: relative;
  margin-top: 15px;
  width: 100%;
  line-height: 45px;
  color: #999999;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  background-color: #ffeded;
  border-radius: 5px
}

.secret-question_waiting:before {
  content: '';
  position: absolute;
  top: -10px;
  left: 10px;
  width: 12px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(//cdn.with.is/assets/secret_questions/balloon_tail_partner-d2b3b5e5b7f4ba7c8fd7e5e26074edc4ea98953b2eb78e869e396a406e770477.png)
}

.secret-question_answers_partner {
  position: relative;
  margin-top: 15px;
  padding: 10px;
  width: 100%;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 13px;
  background-color: #ffeded;
  border-radius: 5px
}

.secret-question_answers_partner:before {
  content: '';
  position: absolute;
  top: -10px;
  left: 10px;
  width: 12px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(//cdn.with.is/assets/secret_questions/balloon_tail_partner-d2b3b5e5b7f4ba7c8fd7e5e26074edc4ea98953b2eb78e869e396a406e770477.png)
}

.secret-question_unlock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
  -webkit-transition: opacity 1s 0s;
  -webkit-transition-delay: ease;
  -webkit-transition: opacity 1s 0s ease;
  transition: opacity 1s 0s ease
}

.secret-question_unlock_bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(//cdn.with.is/assets/secret_questions/question_unlock-e6841abd7a242045212fc5dc683e4daacdc95563688e2742edd88c4a3464b59b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  border: 2px solid #fff
}

.secret-question_unlock_contents, .secret-question_lock_contents {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  text-align: center
}

.secret-question_unlock_contents {
  height: 70px
}

.secret-question_lock_contents {
  height: 140px
}

.secret-question_lock {
  height: 320px;
  background-color: #fff
}

.secret-question_lock_bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(//cdn.with.is/assets/secret_questions/question_lock-ddf9cfd81defbf69cd21111407d72c834556ba971cb62a105273bee4d649feef.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid #fff;
  border-radius: 10px
}

.secret-question_unlock_no {
  margin-bottom: 15px;
  width: 70px
}

.secret-question_lock_no {
  margin-bottom: 15px;
  width: 65px
}

.secret-question_gesture-tap {
  margin-top: -10px;
  width: 30px
}

.secret-question_unlock_text, .secret-question_lock_text {
  color: #fff;
  font-size: 15px;
  font-weight: bold
}

.secret-question_completed {
  width: 100%;
  height: 75px;
  line-height: 75px;
  color: rgba(0, 0, 0, 0.28);
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.secret-question_dialog_form {
  position: relative;
  background-color: #fff;
  padding: 0 5px
}

.secret-question_answer-textarea {
  padding: 15px;
  height: 250px
}

textarea.secret-question_answer-textarea::-webkit-input-placeholder {
  color: #999
}

textarea.secret-question_answer-textarea::-moz-placeholder {
  color: #999
}

.secret-question_dialog_submit {
  padding: 30px 20px
}

.secret-question_dialog_submit input {
  -webkit-appearance: none;
  display: block;
  margin: 0 auto
}

.secret-question_start_frame, .secret-question_complete_frame {
  position: relative
}

.secret-question_start_bg {
  width: 100%
}

.secret-question_start_me {
  position: absolute;
  top: 25px;
  left: 40px
}

.secret-question_start_other {
  position: absolute;
  top: 25px;
  right: 40px
}

.secret-question_start_heading {
  position: absolute;
  bottom: 10px;
  width: 100%;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center
}

.secret-question_complete_me {
  position: absolute;
  top: 30px;
  left: 65px
}

.secret-question_complete_other {
  position: absolute;
  top: 30px;
  right: 65px
}

.secret-question_dialog_thumb {
  width: 60px;
  border-radius: 50%
}

.secret-question_complete_heading {
  position: absolute;
  top: 105px;
  width: 100%;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center
}

.secret-question_complete_text {
  position: absolute;
  top: 140px;
  left: 15px;
  width: 265px;
  color: #fff
}

.secret-question_complete_text span {
  font-weight: bold
}

.secret-question-help_title {
  margin-bottom: 15px;
  color: #606060;
  font-size: 20px;
  font-weight: bold
}

.secret-question-help_desc {
  font-size: 14px;
  line-height: 22px
}

.secret-question-help_desc span {
  margin-left: -5px;
  margin-right: -5px;
  color: #606060;
  font-weight: bold
}

.secret-question-help_link {
  margin-top: 30px;
  margin-bottom: 30px;
  height: 50px;
  line-height: 2.8;
  font-size: 18px;
  font-weight: bold
}

.secret-question-cover_container {
  position: relative;
  max-width: 700px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.secret-question-cover_bg img {
  width: 100%
}

.campaign-cover_bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: auto;
  text-align: center;
  pointer-events: none
}

.secret-question-cover_title {
  position: fixed;
  width: 100%;
  max-width: 700px
}

.secret-question-cover_main {
  width: 100%
}

.secret-question-cover_submit {
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%
}

.secret-question-cover_start {
  width: 100%;
  text-align: center
}

.secret-question-cover_start_button {
  display: block;
  margin: 5px auto 5px auto;
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #ff5569;
  border-radius: 23px;
  box-shadow: 0 30px 35px rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-name: start-button;
  animation-name: start-button;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.secret-question-cover_start_button:link, .secret-question-cover_start_button:active, .secret-question-cover_start_button:visited {
  color: #fff;
  text-decoration: none
}

.secret-question_close-button {
  position: absolute;
  right: 10px;
  top: 10px
}

.secret-question_close-button>img {
  width: 30px
}

@-webkit-keyframes start-button {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 0
  }

  35% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  80% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  89% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }
}

@keyframes start-button {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 0
  }

  35% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  80% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }

  89% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
  }
}

.security-lp_header_txt {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 30%;
  padding: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-color: rgba(254, 105, 112, 0.8)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .security-lp_header_txt {
    font-size: 16px
  }
}

.security-lp_point2_list-of-risks {
  padding: 0 20px
}

.security-lp_point2_risk {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 340px
}

.security-lp_point2_risk+.security-lp_point2_risk {
  margin-top: 20px
}

.security-lp_point2_caution {
  padding: 20px;
  width: 100%;
  color: #E51C2A;
  font-size: 15px;
  text-align: center
}

.security-lp_description {
  color: #555656;
  font-size: 15px;
  line-height: 1.8
}

.security-lp_description span {
  color: #606060
}

.security-lp_description.with-color {
  color: #606060
}

.security-lp_heading {
  color: #606060;
  font-size: 20px
}

.security-lp_attention-balloon {
  margin-bottom: 30px;
  position: relative;
  padding: 10px 20px 20px;
  color: #555656;
  font-size: 15px;
  text-align: center;
  background-color: #E8E8E8;
  border-radius: 10px
}

.security-lp_attention-balloon span {
  color: #606060
}

.security-lp_attention-balloon:after {
  content: '';
  display: block;
  position: absolute;
  margin: auto;
  bottom: -10px;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-right: 15px solid #E8E8E8;
  border-top: 25px solid #E8E8E8;
  border-left: 15px solid #E8E8E8;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.security-lp_attention-frame {
  padding: 15px 20px;
  color: #fff;
  font-size: 15px;
  text-align: center;
  background-color: #FF9494;
  border-radius: 10px
}

ul.security-lp_list-form {
  list-style-type: disc;
  padding-left: 20px
}

ul.security-lp_list-form li {
  color: #555656;
  font-size: 15px;
  line-height: 1.3
}

ul.security-lp_list-form li+li {
  margin-top: 15px
}

ul.security-lp_list-form li.emphasis {
  color: #606060;
  font-weight: bold
}

.security-lp_link-area {
  width: 100%;
  clear: both
}

.security-lp_link-area_block {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  line-height: 30px;
  color: #606060;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none
}

.security-lp_link-area_block+.security-lp_link-area_block {
  border-left: 1px solid #606060
}

.security-system .lp-sec3 {
  margin-bottom: 35px
}

.security-system .lp-sec3+.lp-sec3 {
  border-top: 1px solid #ededed
}

.security-system_title {
  margin: 30px 0 20px;
  font-size: 20px;
  color: #1278C8;
  text-align: center
}

.security-system_illust img {
  width: 80%;
  max-width: 100%
}

.security-system_txt {
  margin-bottom: 22px;
  line-height: 22.5px
}

.security-system_notes {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.54);
  letter-spacing: -0.5px;
  text-align: justify;
  line-height: 22px
}

.security-system_notes li {
  margin: 0
}

#send-like-mission-v201810 {
  position: relative;
  visibility: hidden;
  background-color: #fff;
  max-width: 700px;
  padding: 10px 0
}

#send-like-mission-v201810 .banner-image {
  width: 375px
}

#send-like-mission-v201810.is-male .remaining-likes {
  position: absolute;
  font-weight: bold;
  font-size: 54px;
  color: #FF6873;
  letter-spacing: -2px;
  text-align: right;
  top: 47px;
  left: 0;
  width: 70px
}

#send-like-mission-v201810.is-male .remaining-time {
  position: absolute;
  font-size: 32px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center
}

#send-like-mission-v201810.is-male .remaining-time_minutes {
  top: 95px;
  left: 256px
}

#send-like-mission-v201810.is-male .remaining-time_seconds {
  top: 95px;
  left: 315px
}

#send-like-mission-v201810.is-female .remaining-likes {
  position: absolute;
  font-size: 26px;
  color: #FFF;
  letter-spacing: -2px;
  text-align: center;
  top: 92px;
  left: 248px;
  width: 40px
}

#send-like-mission-v201810.is-female .remaining-time {
  position: absolute;
  font-size: 26px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center
}

#send-like-mission-v201810.is-female .remaining-time_minutes {
  top: 92px;
  left: 124px
}

#send-like-mission-v201810.is-female .remaining-time_seconds {
  top: 92px;
  left: 179px
}

.send-like-mission-female-dialog-bg {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column
}

.send-like-mission-female-dialog-bg.is-exit {
  -webkit-animation: fade-out 0.3s forwards;
  animation: fade-out 0.3s forwards
}

.send-like-mission-female-dialog_body {
  width: 290px;
  height: 500px
}

.send-like-mission-female-dialog_image {
  width: 100%;
  margin-bottom: 50px
}

.send-like-mission-female-dialog_button {
  height: 45px;
  line-height: 45px;
  font-size: 15px
}

.send-like-mission-female-dialog-bg .page1.is-idle .send-like-mission-female-dialog_image {
  visibility: hidden
}

.send-like-mission-female-dialog-bg .page1.is-idle .send-like-mission-female-dialog_button {
  visibility: hidden
}

.send-like-mission-female-dialog-bg .page1.is-enter .send-like-mission-female-dialog_image {
  -webkit-animation: send-like-mission-female-dialog-image-appear ease 0.5s forwards;
  animation: send-like-mission-female-dialog-image-appear ease 0.5s forwards
}

.send-like-mission-female-dialog-bg .page1.is-enter .send-like-mission-female-dialog_button {
  visibility: hidden;
  -webkit-animation: fade-in-visible 0.5s 0.2s ease-in-out forwards;
  animation: fade-in-visible 0.5s 0.2s ease-in-out forwards
}

.send-like-mission-female-dialog-bg .page1.is-exit .send-like-mission-female-dialog_image {
  -webkit-animation: send-like-mission-female-dialog-image-slide-out ease-in-out 0.5s forwards, fade-out 0.5s ease-in forwards;
  animation: send-like-mission-female-dialog-image-slide-out ease-in-out 0.5s forwards, fade-out 0.5s ease-in forwards
}

.send-like-mission-female-dialog-bg .page1.is-exit .send-like-mission-female-dialog_button {
  -webkit-animation: send-like-mission-female-dialog-button-tap 0.5s, fade-out 0.5s forwards;
  animation: send-like-mission-female-dialog-button-tap 0.5s, fade-out 0.5s forwards
}

.send-like-mission-female-dialog-bg .page2.is-idle {
  display: none
}

.send-like-mission-female-dialog-bg .page2.is-enter .send-like-mission-female-dialog_image {
  -webkit-animation: send-like-mission-female-dialog-image-slide-in ease-in-out 0.5s forwards, fade-in 0.5s ease-out forwards;
  animation: send-like-mission-female-dialog-image-slide-in ease-in-out 0.5s forwards, fade-in 0.5s ease-out forwards
}

.send-like-mission-female-dialog-bg .page2.is-enter .send-like-mission-female-dialog_button {
  visibility: hidden;
  -webkit-animation: fade-in-visible 0.5s 0.2s ease-in-out forwards;
  animation: fade-in-visible 0.5s 0.2s ease-in-out forwards
}

.send-like-mission-female-dialog-bg .page2.is-exit .send-like-mission-female-dialog_image {
  -webkit-animation: send-like-mission-female-dialog-image-exiting ease 0.5s forwards;
  animation: send-like-mission-female-dialog-image-exiting ease 0.5s forwards
}

.send-like-mission-female-dialog-bg .page2.is-exit .send-like-mission-female-dialog_button {
  -webkit-animation: send-like-mission-female-dialog-button-tap 0.5s ease-in-out, fade-out 0.5s forwards;
  animation: send-like-mission-female-dialog-button-tap 0.5s ease-in-out, fade-out 0.5s forwards
}

@-webkit-keyframes send-like-mission-female-dialog-image-appear {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3)
  }

  70% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  100% {
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes send-like-mission-female-dialog-image-appear {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3)
  }

  70% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  100% {
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes send-like-mission-female-dialog-image-slide-in {
  0% {
    -webkit-transform: translateX(150%);
    transform: translateX(150%)
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes send-like-mission-female-dialog-image-slide-in {
  0% {
    -webkit-transform: translateX(150%);
    transform: translateX(150%)
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@-webkit-keyframes send-like-mission-female-dialog-image-slide-out {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%)
  }
}

@keyframes send-like-mission-female-dialog-image-slide-out {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%)
  }
}

@-webkit-keyframes send-like-mission-female-dialog-image-exiting {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.2);
    transform: scale(0.2)
  }
}

@keyframes send-like-mission-female-dialog-image-exiting {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.2);
    transform: scale(0.2)
  }
}

@-webkit-keyframes send-like-mission-female-dialog-button-tap {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  80% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes send-like-mission-female-dialog-button-tap {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  80% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.layers {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  top: 0;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  height: 100%;
  z-index: 5
}

.layers_layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  z-index: 10
}

.layers_layer.index-0 {
  z-index: 11
}

.layers_layer.index-1 {
  z-index: 12
}

.layers_layer.index-2 {
  z-index: 13
}

.layers_layer.index-3 {
  z-index: 14
}

@-webkit-keyframes moving-background-image {
  from {
    background-position: 0px center
  }

  to {
    background-position: -100px center
  }
}

@keyframes moving-background-image {
  from {
    background-position: 0px center
  }

  to {
    background-position: -100px center
  }
}

.layers_layer.with-background {
  background-image: url(//cdn.with.is/assets/setup_flow/instruction_background-13327a1a41e7d5c840480fe7c35952784d52d4486dc4311b889dcbeabf39186c.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  -webkit-animation-name: moving-background-image;
  animation-name: moving-background-image;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes fade-appear_in {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@keyframes fade-appear_in {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
  }
}

.slides {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 1.2em;
  line-height: 1.8
}

.slides_text {
  -webkit-box-flex: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.slides_item {
  visibility: hidden
}

.slides_item.is-visible {
  visibility: visible;
  -webkit-animation-name: fade-appear_in;
  animation-name: fade-appear_in;
  -webkit-animation-duration: 1s;
  animation-duration: 1s
}

.slides_page {
  text-align: center;
  display: none
}

.slides_page.is-visible {
  display: block
}

.slides_page.with-shadow {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2)
}

.slides_image {
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 25px
}

.slides_image>img {
  width: 100%;
  height: auto
}

.question_area {
  -webkit-text-size-adjust: 100%;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: rgba(64, 218, 224, 0.9);
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2)
}

.question_description {
  font-size: 1.2em;
  line-height: 1.6;
  color: #fff;
  padding: 30px 0
}

.question_button>a {
  display: inline-block;
  font-size: 1.4em;
  color: #fff;
  background-color: transparent;
  width: 220px;
  line-height: 60px;
  border: 2px solid #fff;
  text-decoration: none
}

.question_button>a:link, .question_button>a:active, .question_button>a:visited, .question_button>a:hover {
  color: #fff
}

.question_button>a:link.is-touching, .question_button>a:active.is-touching, .question_button>a:visited.is-touching, .question_button>a:hover.is-touching {
  color: rgba(64, 218, 224, 0.9);
  background-color: #fff
}

.sign-up-photo {
  background: -webkit-linear-gradient(300deg, rgb(105 232 254 / 60%) 0%, rgba(254, 105, 112, 0) 25%);
  background: linear-gradient(150deg, rgb(164 164 164 / 60%) 0%, rgb(0 0 0 / 0%) 25%);
  overflow: hidden;
}

.sign-up-photo-state.is-edited {
  display: none
}

.sign-up-photo_head {
  margin-top: 20px;
  font-weight: 600;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: -0.91px;
  text-align: center;
  line-height: 26px
}

.sign-up-photo_photo {
  text-align: center;
  margin: 20px 0
}

.sign-up-photo_photo canvas {
  width: 210px;
  height: 210px;
  border-radius: 50%
}

.sign-up-photo_photo img {
  width: 210px;
  height: 210px
}

.sign-up-photo_photo img.is-facebook {
  border-radius: 50%
}

.sign-up-photo_main-photo {
  height: 210px;
  width: 210px;
  margin: 20px auto
}

.sign-up-photo_actions {
  text-align: center
}

.sign-up-photo_actions .sign-up-photo_action-note {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.54);
  letter-spacing: -0.5px;
  line-height: 15px
}

.sign-up-photo_actions input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.sign-up-photo_caution {
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 13px
}

.sign-up-photo_caution>img {
  height: 15px;
  width: 15px;
  vertical-align: -4px
}

.sign-up-photo_preview-button {
  margin: 0 15px 5px
}

.sign-up-photo_half-button {
  height: 45px;
  width: 43%;
  font-size: 13px;
  font-weight: bold;
  line-height: 45px;
  border-radius: 22px
}

.sign-up-photo_input-box {
  position: relative;
  display: inline-block
}

.sign-up-photo_input-box.is-touching {
  opacity: 0.8
}

.sign-up-photo_input {
  opacity: 0;
  position: absolute;
  top: 7%;
  left: 7%;
  width: 86%;
  height: 86%
}

.sign-up-photo_footer {
  position: fixed;
  bottom: 0;
  max-width: 700px
}

.sign-up-photo_sub-photos {
  width: 70%;
  margin: 20px auto
}

.sign-up-photo_action-note_later {
  margin-top: 10px
}

.sign-up-photo_action-note_later>a:link, .sign-up-photo_action-note_later a:visited, .sign-up-photo_action-note_later a:hover, .sign-up-photo_action-note_later a:active {
  color: rgba(0, 0, 0, 0.6)
}

body.sign-up-profile .sp-container {
  background: #9f9f9f;
}

#sign-up-profile .narrow-cell {
  width: 35%
}

#sign-up-profile .wide-cell {
  width: 65%
}

.sign-up-profile_footer {
  padding: 15px
}

.sign-up-profile_save {
  font-size: 18px
}

body.sign-up {
  background-color: #bbb;
}

body.sign-up .sp-container {
  background-color: #bbb;
}

.sign-up_head {
  text-align: center
}

.sign-up_head img {
  width: 43%;
  margin: 60px auto
}

.sign-up_head.is-long img {
  margin: 20% auto
}

.sign-up_form {
  padding: 0 15px
}

.sign-up_form .form-input {
  padding: 10px;
  border: none;
  border-radius: 0;
  color: #ffffff;
  font-size: 13px;
  background-color: #606060;
}

.sign-up_form .type-table_heading {
  padding: 0
}

.sign-up_form .form-text-field-sign-up {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.sign-up_form .form-input-nickname-count {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.28);
  letter-spacing: -0.46px;
  text-align: right
}

.sign-up_form .form-select-cell {
  padding: 0
}


.sign-up_form select.is-prompt-selected {
  color: rgb(0 0 0 / 90%);
}

.sign-up_form .profile-item {
  margin-top: 15px;
  border-top: none;
  border-bottom: 1px solid #bbbbbb;
}

.sign-up_form .profile-item.type-table {
  margin-top: 0
}

.sign-up-profile-item_type-2column {
  display: -webkit-box;
  display: flex
}

.sign-up-profile-item_type-2column select {
  direction: ltr;
  padding: 0
}

.sign-up-profile-item_type-2column .profile-item {
  -webkit-box-flex: 1;
  flex-grow: 1
}

.sign-up-profile-item_type-2column .profile-item:nth-child(1) {
  margin-right: 10px
}

.sign-up_birthday input {
  width: 80%;
  height: 40px;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  border-bottom: 1px solid #ececeb;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  background-color: #606060;
}

.sign-up_birthday_input-items {
  display: -webkit-box;
  display: flex
}

.sign-up_birthday_input-items div {
  align-self: center
}

.sign-up_birthday_input-items input {
  display: block;
  margin-right: 1%
}

.sign-up_profile-note {
  padding-top: 10px;
  color: rgba(0, 0, 0, 0.54);
  letter-spacing: -0.5px;
  line-height: 15px
}

.sign-up_agree {
  margin: 25px 0 0
}

.sign-up_agree-text {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 10px
}

.sign-up_agree-text>label {
  flex-shrink: 0
}

.sign-up_checked-text {
  margin-left: 10px;
  line-height: 1.3em;
  color: rgba(0, 0, 0, 0.87)
}

.sign-up_checked-text a {
  font-weight: bold
}

.sign-up_agree-text-sub-container {
  margin-top: 10px
}

.sign-up_agree-text-sub {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 5px
}

.sign-up_start-button {
  margin: 20px 0;
  font-weight: bold;
  font-size: 18px
}

.sign-up_start-button.is-disabled {
  background: rgba(0, 0, 0, 0.05);
  color: #CCCCCC
}

body.sign-up-guide_with-slides {
  background-image: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0) 0%, rgba(247, 122, 0, 0.15) 56%, rgba(255, 95, 95, 0.43) 100%);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(247, 122, 0, 0.15) 56%, rgba(255, 95, 95, 0.43) 100%)
}

.sign-up-guide {
  position: relative;
  height: 100%
}

.sign-up-guide_slide-container {
  position: absolute;
  height: 667px;
  width: 375px;
  text-align: center;
  margin: auto
}

.sign-up-guide_slide {
  display: none;
  padding-top: 255px;
  font-size: 20px;
  text-align: center;
  color: rgba(85, 36, 11, 0.87);
  line-height: 40px
}

.sign-up-guide_slide.with-anim {
  padding-top: 145px
}

.sign-up-guide-outro .sign-up-guide_slide-text {
  height: 100px
}

.sign-up-guide_slide-anim {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  height: 200px
}

.sign-up-guide_slide-anim.is-send-like, .sign-up-guide_slide-anim.is-thanks {
  width: 140px;
  top: 250px
}

.sign-up-guide_slide-anim.is-match {
  width: 187px;
  top: 215px
}

.sign-up-guide_slide-user-img {
  position: absolute;
  top: 353px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: 3px solid #FFF
}

.sign-up-guide_slide-user-img.is-me {
  left: 15px
}

.sign-up-guide_slide-user-img.is-partner {
  right: 15px
}

.sign-up-guide_slide-match-text {
  position: absolute;
  top: 380px;
  left: 0;
  right: 0;
  margin: auto
}

.sign-up-guide-search {
  padding-top: 90px
}

.sign-up-guide-search_head {
  z-index: 1;
  position: fixed;
  top: 0;
  padding: 30px 0 0;
  width: 100%;
  max-width: 700px;
  height: 100px;
  background-image: -webkit-linear-gradient(top, #fff 75%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(180deg, #fff 75%, rgba(255, 255, 255, 0) 100%)
}

.sign-up-guide-user_overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  max-width: 700px;
  background-color: rgba(0, 0, 0, 0.3)
}

.sign-up-guide-user_gradient {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
  position: absolute;
  bottom: 0;
  height: 20%;
  min-height: 160px;
  width: 100%
}

.sign-up-guide-user_submit {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 700px;
  padding: 0 15px 15px
}

.sign-up-guide-user_submit .button-like {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25)
}

.sign-up-guide-user_like-balloon {
  width: 65%;
  max-width: 225px;
  margin-bottom: 20px;
  -webkit-animation: sign-up-guide-user-like-balloon-floating 1s ease-in-out infinite alternate;
  animation: sign-up-guide-user-like-balloon-floating 1s ease-in-out infinite alternate
}

@-webkit-keyframes sign-up-guide-user-like-balloon-floating {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }
}

@keyframes sign-up-guide-user-like-balloon-floating {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }
}

.daigo-choice-users-container {
  position: relative;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 25px;
  margin-bottom: 80px
}

.daigo-choice-users-container_cross-button {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/close-887208242de73c1b46d3fc7fe8c21a7e43947dc690a07d77137eb6e0b4364945.svg);
  background-size: 100%;
  z-index: 1
}

.daigo-choice-users-container_header_number {
  margin: auto;
  background-color: #000000;
  opacity: 0.2;
  width: 65px;
  height: 25px;
  border-radius: 13px;
  color: #fff;
  text-align: center;
  line-height: 25px
}

.daigo-choice-users-content {
  width: 92%;
  margin: auto;
  max-width: 500px
}

#similar-users_container {
  background: -webkit-linear-gradient(290deg, #F0F0F0 0%, rgba(240, 240, 240, 0) 20%);
  background: linear-gradient(160deg, #F0F0F0 0%, rgba(240, 240, 240, 0) 20%)
}

.similar-users {
  padding: 0 8px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between
}

.similar-users a {
  text-decoration: none
}

.similar-users .user-card-with-recommend-reason {
  padding: 10px 8px;
  width: 50%
}

.similar-users .user-card-with-recommend-reason_reason-text {
  max-height: 38px
}

.similar-users .user-sub-area {
  height: 55px
}

.similar-users_title {
  padding: 25px 15px 10px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87)
}

.simple-lp {
  position: relative
}

.free_badge {
  position: absolute;
  top: 70px;
  right: 4%;
  width: 15%;
  min-width: 67px;
  max-width: 135px
}

.simple-lp_button {
  position: relative
}

.simple-lp_button>.login-button {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto 20px;
  height: 50px
}

.simple-lp_attention {
  display: block;
  position: absolute;
  top: 70px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 10px;
  color: #999999;
  font-size: 10px;
  text-align: center
}

.sns-share_text {
  padding: 10px;
  width: 100%;
  height: 100px;
  color: #888;
  font-size: 12px;
  background-color: #F5F5F5;
  border: none;
  border-radius: 10px
}

.sns-share_icon-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  padding: 15px 0;
  max-width: 320px
}

.sns-share_icon-list.is-quint {
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 15px;
  max-width: 414px
}

.sns-share_icon {
  width: 50px;
  height: 50px;
  background-image: url(//cdn.with.is/assets/shared/icons/sns_icon_stripe-4b2f382b1e7a72f62cfa849517b4ef352b44c2d3a7738aa6bf0551bb30614e2c.svg);
  background-size: 500% 100%;
  background-position: 0 0;
  background-repeat: no-repeat
}

.sns-share_icon[data-sns="0"] {
  background-position: 0px 0
}

.sns-share_icon[data-sns="1"] {
  background-position: -50px 0
}

.sns-share_icon[data-sns="2"] {
  background-position: -100px 0
}

.sns-share_icon[data-sns="3"] {
  background-position: -150px 0
}

.sns-share_icon[data-sns="4"] {
  background-position: -200px 0
}

.startup-pickup-users_cross-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1
}

.startup-pickup-users_cross-button-image {
  width: 20px;
  height: 20px
}

.startup-pickup-users_container {
  position: relative;
  overflow: auto;
  padding-top: 20px;
  padding-bottom: 80px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  -webkit-transition: background 200ms linear;
  transition: background 200ms linear
}

.startup-pickup-users_container.is-bigfive {
  background-image: url(//cdn.with.is/assets/startup_pickup_users/bg_bigfive-4ffe7fcf65fc5d231d667bd65371c04e3e749abe5ec25d39d2a847d3fd31d68d.jpg);
  background-color: #E1C9EC
}

.startup-pickup-users_container.is-regular {
  background-image: url(//cdn.with.is/assets/startup_pickup_users/bg_regular-5ef606160f8c3f7ab7bdf92ef1116851742ed6161a5cb197a97dc42adc09e8e2.jpg);
  background-color: #BFEDE9
}

.startup-pickup-users_container.is-newcomer {
  background-image: url(//cdn.with.is/assets/startup_pickup_users/bg_newcomer-3c199e27da10c53a34dd429dc17dd3d192515378b035be8953e3de05773ee730.jpg);
  background-color: #FAE4B0
}

.startup-pickup-users_container.is-konomi {
  background-image: url(//cdn.with.is/assets/startup_pickup_users/bg_konomi-4005633ed8df07906f32dff66d84c280995bf8327a20156bd95be859dd351602.jpg);
  background-color: #FCD8D8
}

.startup-pickup-users_container.is-campaign {
  background-image: url(//cdn.with.is/assets/startup_pickup_users/bg_campaign-b3b1607e4b2b5bf195b9b1acdc05e5319a85cc2dc22948657a8ca479bdd216e3.jpg);
  background-color: #CBE7FA
}

.startup-pickup-users_content {
  width: 92%;
  margin: auto;
  max-width: 500px
}

.startup-pickup-users_content .strip-user-card {
  border: 2px #fff solid
}

.startup-pickup-users_title {
  font-size: 20px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  margin-bottom: 20px
}

.startup-pickup-users_header-like-icon {
  height: 13px;
  margin-bottom: 4px
}

.startup-pickup-users_header-info {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  background-color: #fff;
  color: #606060;
  border-radius: 15px;
  padding: 5px 15px;
  margin: 0 auto 15px auto;
  width: 200px
}

.startup-pickup-users_header-balloon-space {
  height: 60px;
  margin-bottom: 15px
}

.startup-pickup-users_header-balloon {
  height: 100%;
  position: relative;
  background: #fff;
  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 15px
}

.startup-pickup-users_header-balloon::after {
  content: "";
  position: absolute;
  width: 0;
  margin: auto;
  top: 58px;
  left: 0;
  right: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #fff transparent transparent transparent
}

.startup-pickup-users_header-balloon_contents {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  height: 100%;
  width: 100%
}

.startup-pickup-users_header-image {
  position: absolute;
  left: 15px;
  height: 40px;
  width: 40px
}

.startup-pickup-users_header-image.is-bigfive {
  border-radius: 50%
}

.startup-pickup-users_header-image.is-regular {
  border-radius: 50%
}

.startup-pickup-users_header-image.is-newcomer {
  border-radius: 50%
}

.startup-pickup-users_header-image.is-konomi {
  border-radius: 10px
}

.startup-pickup-users_header-image.is-campaign {
  border-radius: 50%
}

.startup-pickup-users_header-text {
  width: 55vw;
  text-align: center;
  font-size: 18px;
  font-weight: bold
}

.startup-pickup-users_header-text.is-bigfive {
  color: #9F52C6
}

.startup-pickup-users_header-text.is-regular {
  color: #33CEBF
}

.startup-pickup-users_header-text.is-newcomer {
  color: #FDB100
}

.startup-pickup-users_header-text.is-konomi {
  color: #FF8585
}

.startup-pickup-users_header-text.is-campaign {
  color: #53B3F3
}

.startup-pickup-users_container .list-view-button {
  display: none
}

.startup-pickup-finished_container {
  display: none;
  position: relative
}

.startup-pickup-finished_view {
  -webkit-transition: background 200ms linear;
  transition: background 200ms linear;
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.startup-pickup-finished_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 20px;
  font-weight: bold
}

.startup-pickup-finished_animation {
  width: 200px;
  height: 200px;
  margin: 20px 0
}

.startup-pickup-finished_message {
  color: rgba(0, 0, 0, 0.87);
  font-size: 18px;
  text-align: center;
  line-height: 22px;
  margin-bottom: 10px
}

.startup-pickup-finished_sub-message {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.4)
}

.contract ul {
  list-style: circle;
  margin-left: 20px
}

.privacy-policy-table {
  border: 1px solid #999999
}

.privacy-policy-table th, .privacy-policy-table td {
  padding: 5px 10px
}

.privacy-policy-table tr+tr {
  border-top: 1px solid #999999
}

.privacy-policy-table th+th {
  border-left: 1px solid #999999
}

.privacy-policy-table td+td {
  border-left: 1px solid #999999
}

.strip-user-card {
  position: relative;
  display: none;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  padding-bottom: 15px
}

.strip-user-card .received-card_main-photo {
  border-top-left-radius: 15px
}

.strip-user-card .received-card_sub-photo:first-child {
  border-top-right-radius: 15px
}

.strip-user-card_body_sub-area {
  padding: 12px 12px 15px
}

.strip-user-card_main-photo {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px
}

.strip-user-card_body {
  background-color: #fff
}

.strip-user-card_body_photos {
  padding: 12px 0 5px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center
}

.strip-user-card_body_photo-wrapper {
  height: 56px;
  width: 56px;
  border-radius: 50%;
  text-align: center
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .strip-user-card_body_photo-wrapper {
    height: 46px;
    width: 46px
  }
}

.strip-user-card_body_photo-wrapper.is-selected {
  background-color: #606060
}

.strip-user-card_body_photo-wrapper:not(:last-child) {
  margin-right: 10px
}

.strip-user-card_body_photo {
  position: relative;
  top: 3px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .strip-user-card_body_photo {
    top: 2px;
    height: 42px;
    width: 42px
  }
}

.strip-user-card_body_main-profile {
  color: #606060;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px
}

.strip-user-card_body_tweet {
  position: relative;
  padding-left: 20px;
  width: 100%
}

.strip-user-card_body_tweet:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  display: inline-block;
  width: 15px;
  height: 16px;
  background-image: url(//cdn.with.is/assets/user_frame/icn_tweet-ad991e77cb632ff70b7227c1840a3caf2c121ac65bad69024df5e04a86016b85.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.strip-user-card_body_title {
  font-size: 15px;
  color: #000000;
  font-weight: bold;
  margin-top: 35px;
  margin-bottom: 20px
}

.swipe-user-cards .not-good-filter:after, .swipe-user-cards .like-filter:after {
  color: #fff;
  font-size: 19px;
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  text-align: center
}

.swipe-user-cards .not-good-filter, .swipe-user-cards .like-filter {
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0
}

.swipe-user-cards .not-good-filter:before, .swipe-user-cards .like-filter:before {
  content: '';
  position: absolute;
  top: 110px;
  left: 30%;
  height: 135px;
  width: 52%;
  background-repeat: no-repeat;
  background-size: 100% 135px
}

.swipe-user-cards .not-good-filter {
  opacity: 0.7;
  background: -webkit-linear-gradient(top, #000, #4c5153);
  background: linear-gradient(to bottom, #000, #4c5153);
  background-repeat: no-repeat;
  border-radius: 15px
}

.swipe-user-cards .not-good-filter:before {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/skip-9d892cb79e929bb76899eb0a42f897a32ee13b9126eafaefdd8fedc75e533191.svg)
}

.swipe-user-cards .not-good-filter:after {
  content: 'スキップしました！'
}

.swipe-user-cards .rotate-left {
  -webkit-transform: translateX(400px) rotate(30deg);
  transform: translateX(400px) rotate(30deg);
  -webkit-transition: 2s;
  transition: 2s;
  opacity: 0
}

.swipe-user-cards .like-filter {
  opacity: 0.9;
  background: -webkit-linear-gradient(top, #FF8E96, #FF5961);
  background: linear-gradient(to bottom, #FF8E96, #FF5961);
  background-repeat: no-repeat;
  border-radius: 15px
}

.swipe-user-cards .like-filter:before {
  background-image: url(//cdn.with.is/assets/shared/atoms/icons_white/like_star-88fff9379301f958f6009e6d2283174180a311340cfeb0fc800d8c01b322aaba.svg)
}

.swipe-user-cards .like-filter:after {
  content: 'いいね！しました'
}

.swipe-user-cards .rotate-right {
  -webkit-transform: translateX(-400px) rotate(-30deg);
  transform: translateX(-400px) rotate(-30deg);
  -webkit-transition: 2s;
  transition: 2s;
  opacity: 0
}

.swipe-user-cards-actions {
  position: fixed;
  bottom: 10px;
  right: 0;
  left: 0;
  height: 80px;
  width: 223px;
  text-align: center;
  margin: auto
}

.swipe-user-cards-actions_not-good, .swipe-user-cards-actions_like {
  position: absolute;
  width: 80px;
  height: 80px;
  font-size: 11px;
  text-align: center;
  color: #fff;
  font-weight: bold
}

.is-animating.swipe-user-cards-actions_not-good, .is-animating.swipe-user-cards-actions_like {
  -webkit-animation: tap-button 0.2s ease-in-out 0s;
  animation: tap-button 0.2s ease-in-out 0s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate
}

.swipe-user-cards-actions_not-good {
  left: 12px;
  background-color: #C1C1C1;
  border-radius: 40px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15)
}

.swipe-user-cards-actions_not-good img {
  display: block;
  margin: 0 auto 5px;
  width: 25px;
  height: 18px
}

.swipe-user-cards-actions_not-good:hover, .swipe-user-cards-actions_not-good:active {
  background-color: #8C8C8C
}

.swipe-user-cards-actions_like {
  right: 12px;
  background-color: #FF5B62;
  border-radius: 40px;
  box-shadow: 0 10px 10px rgba(254, 105, 112, 0.4)
}

.swipe-user-cards-actions_like img {
  display: block;
  margin: 0 auto 5px;
  width: 26px;
  height: 21px
}

.swipe-user-cards-actions_like:hover, .swipe-user-cards-actions_like:active {
  background-color: #d15d66
}

.talk-advice {
  padding-top: 55px
}

.talk-advice_title-area {
  position: fixed;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 55px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  font-weight: bold;
  max-width: 700px;
  z-index: 10
}

.talk-advice_help-link:link, .talk-advice_help-link:visited {
  display: block;
  position: absolute;
  top: 18px;
  right: 55px;
  text-decoration: none
}

.talk-advice_help-link_img {
  display: block;
  width: 20px
}

.talk-advice_close-button {
  position: absolute;
  right: 15px;
  display: block;
  width: 20px;
  height: 20px;
  top: 15px
}

.talk-advice_config-link {
  display: block;
  margin: 30px 0;
  font-size: 13px;
  font-weight: bold;
  text-align: center
}

.talk-advice_config-link:link, .talk-advice_config-link:visited {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.talk-advice-frame {
  position: relative;
  margin-top: 20px;
  padding: 20px 15px 15px;
  background-color: #FFEDED;
  border-radius: 0 30px 30px 30px
}

.talk-advice-frame:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -19px;
  left: 0;
  width: 32px;
  height: 20px;
  background-image: url(//cdn.with.is/assets/talk_advices/balloon_tail-ee4509dded8b4649d08c1e32bfcc9be3ea281093df7ddcca32f8d7b567748a7e.svg);
  background-repeat: no-repeat;
  background-size: 100%
}

.talk-advice-frame.is-positive {
  background-color: #E1F9F6
}

.talk-advice-frame.is-positive:before {
  background-image: url(//cdn.with.is/assets/talk_advices/balloon_tail_positive-7028b76719dbcfdf8fdee9e05948b3fba4256d5f0e73a5456671bf1b436fac39.svg)
}

.talk-advice-frame.is-negative {
  background-color: #FFEDED
}

.talk-advice-frame.is-negative:before {
  background-image: url(//cdn.with.is/assets/talk_advices/balloon_tail-ee4509dded8b4649d08c1e32bfcc9be3ea281093df7ddcca32f8d7b567748a7e.svg)
}

.talk-advice-frame+.talk-advice-frame {
  margin-top: 40px
}

.talk-advice-frame_kind {
  position: relative;
  padding-left: 30px;
  font-size: 13px;
  font-weight: bold
}

.talk-advice-frame_kind:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: 100%
}

.talk-advice-frame.is-positive .talk-advice-frame_kind {
  color: #00C9B5
}

.talk-advice-frame.is-positive .talk-advice-frame_kind:after {
  background-image: url(//cdn.with.is/assets/talk_advices/icn_talk_advice_positive-03d1a335e1009de5e8f977537b413e112bd32eb0cbe58b84bf7b8bfd5a21245b.svg)
}

.talk-advice-frame.is-negative .talk-advice-frame_kind {
  color: #606060
}

.talk-advice-frame.is-negative .talk-advice-frame_kind:after {
  background-image: url(//cdn.with.is/assets/talk_advices/icn_talk_advice-64c1bfe6fa6a40521d11b297f0a3ca151479272b3405658c5b85dbf21e75a017.svg)
}

.talk-advice-frame_new {
  position: absolute;
  top: 20px;
  right: 15px;
  width: 45px;
  height: 22px
}

.talk-advice-frame_heading {
  margin: 25px 0;
  line-height: 29px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 22px;
  font-weight: bold
}

.talk-advice-point {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-radius: 20px
}

.talk-advice-point:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 20px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 100%
}

.talk-advice-point:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 20px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 100%
}

.talk-advice-frame.is-positive .talk-advice-point:before {
  background-image: url(//cdn.with.is/assets/talk_advices/quotes_start_positive-dee0080bd85fac84ebf088f8e3e52534e7e7fb28b549c5b18345d5030579a593.svg)
}

.talk-advice-frame.is-positive .talk-advice-point:after {
  background-image: url(//cdn.with.is/assets/talk_advices/quotes_end_positive-2193bf306273b8dd2592f660979e74e35fceaf3122bc6d35fba9ef888bacdbab.svg)
}

.talk-advice-frame.is-negative .talk-advice-point:before {
  background-image: url(//cdn.with.is/assets/talk_advices/quotes_start-d831c5e1289539f4db337fbb32b310af07aaa0d1643340a21a2a13f1a3250718.svg)
}

.talk-advice-frame.is-negative .talk-advice-point:after {
  background-image: url(//cdn.with.is/assets/talk_advices/quotes_end-49747119afb2608491c59886e63ed5314c04708704ccb38416bbbe545c256a18.svg)
}

.talk-advice-frame_main-image {
  width: 68%;
  margin: 0 auto 25px
}

.talk-advice-frame_main-image>img {
  width: 100%
}

.talk-advice-point_logo {
  margin-bottom: 5px;
  text-align: center
}

.talk-advice-point_heading {
  margin-bottom: 23px;
  text-align: center;
  font-size: 16px;
  font-weight: bold
}

.talk-advice-frame.is-positive .talk-advice-point_heading {
  color: #00C9B5
}

.talk-advice-frame.is-negative .talk-advice-point_heading {
  color: #606060
}

.media.talk-advice-point_media {
  margin: 0 auto 30px;
  max-width: 320px
}

.talk-advice-point_list {
  margin: 0 auto 25px;
  max-width: 320px
}

.talk-advice-point_list_title {
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-weight: bold
}

.talk-advice-point_title {
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
  font-weight: bold
}

.talk-advice-point_title:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100%
}

.talk-advice-point_title.is-bad:before {
  background-image: url(//cdn.with.is/assets/talk_advices/icn_bad_sample-07e01ff632efebe25c0deec5c16b78dda7458380638c9d66d4d5f3c278ac7636.svg)
}

.talk-advice-point_title.is-positive:before {
  background-image: url(//cdn.with.is/assets/talk_advices/icn_good_sample-d506eea8c839a1ab625d43d5269801ea7db71e9d2caf46528828a60bc6930cfe.svg)
}

.talk-advice-point_balloon {
  position: relative;
  display: inline-block;
  max-width: 270px;
  text-align: left;
  background-image: url(//cdn.with.is/assets/talk_advices/balloon_bg-ab2dd4b91e481ab99786043082744eec82f20389af0f1fc5a3aceb14298f5fda.png);
  background-size: 105% 105%;
  background-position: 10% 10%;
  background-repeat: no-repeat;
  -webkit-border-image: url(//cdn.with.is/assets/talk_advices/balloon_frame-920f4fbbaab06ed85ad94f1fa6ca39ccc7dc3ae4b2e16023a5cf251de520595e.png) 40 30 30 40 round;
  -o-border-image: url(//cdn.with.is/assets/talk_advices/balloon_frame-920f4fbbaab06ed85ad94f1fa6ca39ccc7dc3ae4b2e16023a5cf251de520595e.png) 40 30 30 40 round;
  border-image: url(//cdn.with.is/assets/talk_advices/balloon_frame-920f4fbbaab06ed85ad94f1fa6ca39ccc7dc3ae4b2e16023a5cf251de520595e.png) 40 30 30 40 round;
  border-style: solid;
  border-width: 15px 15px 12px
}

.talk-advice-point_balloon.is-positive {
  background-image: url(//cdn.with.is/assets/talk_advices/balloon_bg_positive-ad2df03380273d14a454c06b910fd9f9d48b89977842d46d98e3d99b25424211.png);
  -webkit-border-image: url(//cdn.with.is/assets/talk_advices/balloon_frame_positive-352293949854d5122869e48719cba8a04a3eb680b5b89775e1b4c30b37152d26.png) 40 30 30 40 round;
  -o-border-image: url(//cdn.with.is/assets/talk_advices/balloon_frame_positive-352293949854d5122869e48719cba8a04a3eb680b5b89775e1b4c30b37152d26.png) 40 30 30 40 round;
  border-image: url(//cdn.with.is/assets/talk_advices/balloon_frame_positive-352293949854d5122869e48719cba8a04a3eb680b5b89775e1b4c30b37152d26.png) 40 30 30 40 round
}

.talk-advice-point_conclusion {
  margin-top: 10px
}

.talk-advice-point_talk-disposition {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 265px
}

.talk-advice-frame_sub-title {
  position: relative;
  height: 30px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: bold
}

.talk-advice-affinities_thumb {
  position: absolute;
  top: -3px;
  right: 0
}

.talk-advice-affinities_thumb_overlap {
  position: absolute;
  top: 0;
  right: 27px
}

.talk-advice-affinities_area {
  margin: 0 auto 20px;
  max-width: 320px
}

.affinities_badge.in-talk-advice {
  display: inline-block;
  background-color: #fff
}

.talk-advice-konomi {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 0 auto 30px;
  max-width: 320px
}

.talk-advice-konomi>a {
  text-decoration: none
}

.talk-advice-konomi_item {
  width: 70px;
  max-width: 19vw
}

.talk-advice-konomi_img {
  margin-bottom: 10px;
  width: 100%;
  border-radius: 10px
}

.talk-advice-konomi_label {
  max-height: 33px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  overflow: hidden
}

.talk-advice-konomi_submit {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  background-color: #fff;
  border-radius: 25px
}

.talk-advice-konomi_submit:link, .talk-advice-konomi_submit:visited {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.talk-advice-konomi_submit:hover, .talk-advice-konomi_submit:active {
  background-color: #F5F5F5
}

.talk-advice-time-box {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 20px
}

.talk-advice-time-box_heading {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 40px;
  color: #606060;
  text-align: left;
  font-weight: bold;
  margin-bottom: 15px
}

.talk-advice-time-box_body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.talk-advice-time-box_heading_clock-icon {
  height: 31px;
  width: 29px
}

.talk-advice-time-box_heading_text {
  font-size: 14px;
  padding-left: 10px;
  font-weight: bold
}

.talk-advice-need-improvement-tag {
  height: 25px;
  width: 64px
}

.talk-advice-elapsed-time {
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
  margin: auto
}

.talk-advice-elapsed-time_number {
  font-size: 32px;
  padding-left: 7px;
  letter-spacing: 3px
}

.talk-advice-icon:before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url(//cdn.with.is/assets/talk_advices/icn_talk_advice_off-3a8d260e2097509bf3d177e9130a878abbdd7aeba63566cb1186816c49fdea26.svg);
  background-repeat: no-repeat;
  background-size: 100%
}

.talk-advice-icon.is-on:before {
  background-image: url(//cdn.with.is/assets/talk_advices/icn_talk_advice_on-1fee6348a33ed638851cd20a3bf0e4d65444807bf3d5f746914b440f341b71d6.svg)
}

.talk-advice-icon_wizard {
  display: inline-block;
  position: absolute;
  bottom: -46px;
  right: 30px;
  padding: 15px 10px 10px;
  width: 145px;
  height: 56px;
  color: #fff;
  font-size: 11px;
  background-image: url(//cdn.with.is/assets/talk_advices/wizard_bg-a91aa54769b8031dae0fce6db58ac903f97fab4fd898f28ca168336ac6d80123.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.talk-advice-banner {
  display: block;
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 15px 30px 15px 65px;
  width: 92vw;
  max-width: 670px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  z-index: 20
}

.talk-advice-banner:link, .talk-advice-banner:visited {
  text-decoration: none
}

.talk-advice-banner:active, .talk-advice-banner.is-touching {
  -webkit-animation: talk-advice-banner-active 0.3s ease-out 0s forwards;
  animation: talk-advice-banner-active 0.3s ease-out 0s forwards
}

.talk-advice-banner.is-positive:after {
  background-image: url(//cdn.with.is/assets/talk_advices/icn_talk_advice_positive-03d1a335e1009de5e8f977537b413e112bd32eb0cbe58b84bf7b8bfd5a21245b.svg)
}

.talk-advice-banner_animation {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 60px
}

.talk-advice-banner_arrow {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px
}

.talk-advice-banner_kind {
  font-size: 10px;
  font-weight: bold
}

.talk-advice-banner.is-positive .talk-advice-banner_kind {
  color: #00C9B5
}

.talk-advice-banner.is-negative .talk-advice-banner_kind {
  color: #606060
}

.talk-advice-banner_heading {
  margin-bottom: 6px;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
  font-weight: bold
}

.talk-advice-banner_attention {
  color: rgba(0, 0, 0, 0.4);
  font-size: 10px
}

.talk-advice-banner_attention_img {
  width: 14px;
  height: 10px
}

@-webkit-keyframes talk-advice-banner-active {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  50% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes talk-advice-banner-active {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  50% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.talk-disposition {
  margin-top: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ececeb
}

.talk-disposition.is-locked {
  height: 160px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background: url(//cdn.with.is/assets/talk_disposition/bg_masked-01862ee6774599bf3fbcca16ef9e53f9869a2450792799907ea12ac055cdfb78.png) no-repeat center;
  background-size: contain;
  margin-bottom: 0
}

.talk-disposition.is-locked .button {
  width: 250px;
  margin-top: 35px
}

.talk-disposition_items {
  display: -webkit-box;
  display: flex
}

.talk-disposition_item {
  -webkit-box-flex: 1;
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: bold
}

.talk-disposition_item img {
  width: 16vw;
  max-width: 112px;
  display: block;
  margin: 0 auto 10px
}

.talk-disposition_item-title {
  margin: 10px 0;
  color: rgba(0, 0, 0, 0.87)
}

.talk-disposition_item.is-word-count {
  color: #73C33F
}

.talk-disposition_item.is-interval {
  color: #606060
}

.terms-of-agreement_title {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  margin: 15px 0 30px
}

.terms-of-agreement_check {
  margin: 30px 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.terms-of-agreement_check>label {
  flex-shrink: 0
}

.terms-of-agreement_checked-text {
  line-height: 1.3em;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.87);
  margin-left: 10px
}

.terms-of-agreement_checked-text a {
  font-weight: bold
}

.terms-of-agreement_text-sub {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 5px
}

.terms-of-agreement_button {
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  font-size: 15px
}

.terms-of-agreement_deny_link {
  display: block;
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  margin-top: 12px
}

#terms-of-agreement_deny {
  text-align: center
}

.terms-of-agreement_deny_text {
  font-size: 15px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  margin: 15px 0 30px
}

.terms-of-agreement_deny_contact {
  display: block;
  font-size: 12px;
  text-decoration: underline;
  margin-top: 15px
}

.time-limit-users-list-background {
  background-color: #161e51
}

.time-limit-header-image {
  width: 100%;
  min-height: 300px;
  background-image: url(//cdn.with.is/assets/time_limit_events/common/rooms/bg-c9cfdc63d2d4b55c8e00dbd187742698891b41650ba4ab73a873a83c6cadaa85.png);
  background-size: 100% 100%
}

.time-limit-room-title {
  position: absolute;
  top: 5px;
  right: 60px;
  left: 0;
  margin: 0 auto;
  width: 228px
}

.time-limit_content {
  position: absolute;
  width: 320px;
  height: 210px;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto
}

.time-limit-result_title {
  position: absolute;
  top: 10%;
  width: 100%
}

.time-limit-profile {
  width: 40%;
  position: absolute;
  top: 0%;
  left: 0%
}

.time-limit-profile-thumb {
  width: 80%;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  right: 0
}

.time-limit-remaining-time-wrapper {
  width: 67%;
  top: 5px;
  right: 0px;
  position: absolute;
  color: white
}

.time-limit-remaining-time-wrapper .time-limit-slide_title {
  position: relative;
  left: 22px;
  font-size: 45px
}

.time-limit-remaining-time-wrapper .time-limit-slide_title .time-limit-count-down-hm {
  margin-left: 15px;
  margin-right: -10px
}

.time-limit-remaining-time-wrapper .time-limit-slide_title .time-limit-count-down-s {
  font-size: 35px
}

.time-limit-remaining-time-title {
  position: relative;
  left: 35px;
  padding: 5px 15px;
  font-size: 15px;
  border-radius: 25px;
  border: solid 1px white
}

.time-limit_comment-balloon {
  position: absolute;
  bottom: 12%;
  left: 0;
  padding: 0 16px;
  width: 100%
}

.time-limit_comment-balloon:after {
  content: '';
  display: block;
  position: absolute;
  top: -6px;
  left: 22%;
  width: 15px;
  height: 15px;
  background-color: #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.time-limit_comment-balloon>div {
  display: block;
  padding: 4px 30px 0 20px;
  width: 100%;
  height: 44px;
  line-height: 2.1;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background-color: #fff;
  border-radius: 20px
}

.time-limit-head-accessories {
  background-color: #f3f3f3;
  position: relative
}

.time-limit-head-accessories:after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 48.3%;
  border-left: 15px solid transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-bottom: 15px solid #F3F3F2
}

.time-limit-head-accessories .recommend-user-list {
  height: 85px
}

.time-limit-head-accessories .recommend-user-list>div {
  display: -webkit-box;
  display: flex
}

.time-limit-total-count {
  height: 50px;
  min-width: 320px;
  max-width: 700px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background: no-repeat center 0;
  color: #fff;
  font-size: 15px
}

.time-limit-total-count>div {
  width: 50%;
  float: left;
  text-align: center
}

.time-limit-total-count-title {
  position: relative;
  top: 15px;
  right: 10px
}

.time-limit-total-count-up {
  position: relative;
  top: 2px;
  left: 10px
}

.time-limit-total-count-up>span {
  font-size: 30px
}

.time-limit-new-face-title {
  text-align: center;
  line-height: 1;
  margin: 10px 0
}

.time-limit-new-face-title>span {
  color: red;
  font-size: 30px
}

.time-limit-new-face-user-images {
  display: none
}

.time-limit-new-face-user-images>a {
  position: relative
}

.time-limit-balloon-badge-icn {
  width: 33px;
  height: 33px;
  position: absolute;
  top: 1px;
  right: 1px;
  border: 2px solid #d2d1d1;
  background-color: #fff;
  border-radius: 50%
}

.time-limit-balloon-badge-icn:after {
  content: '';
  display: block;
  position: absolute;
  top: 23px;
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-left: 2px solid #d2d1d1;
  border-bottom: 2px solid #d2d1d1
}

.time-limit-balloon-badge-icn img {
  position: relative;
  left: 2px;
  top: 1px
}

.time-limit-new-face-user-image {
  float: left;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  margin-right: 15px;
  margin-top: 12px
}

.time-limit-badge-note {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  width: 100%
}

.time-limit-badge-note:after {
  content: '';
  display: block;
  position: absolute;
  top: 23px;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.time-limit-badge-note>div {
  text-align: center;
  display: block;
  width: 100%;
  height: 28px;
  line-height: 2.1;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background-color: #fff;
  border-radius: 20px
}

.time-limit-match {
  color: #5d2915;
  font-weight: bold
}

.time-limit-unmatch {
  color: #a1afaf
}

.time-limit-badge-icn {
  width: 27px;
  margin-bottom: 5px
}

.topic>.time-limit-topic-contents {
  background-image: url(//cdn.with.is/assets/time_limit_events/common/list_bg-a3612f1bcc44b3b7dda632a377393fe8b4315522198d61986dc1a0c726efb43a.jpg);
  display: block;
  padding: 10px 15px 10px 70px;
  width: 100%;
  height: 100%
}

.topic>.time-limit-topic-contents:link {
  text-decoration: none
}

.topic>.time-limit-topic-contents span {
  color: #fff
}

.time-limit-topic-header {
  background-image: url(//cdn.with.is/assets/time_limit_events/common/list_bg-a3612f1bcc44b3b7dda632a377393fe8b4315522198d61986dc1a0c726efb43a.jpg)
}

.time-limit-topic-header .sub-profile {
  color: #fff
}

.topic-time-limit-event-icn {
  position: absolute;
  top: 53px;
  left: 63px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8)
}

.topic-time-limit-event-icn::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  border-top: 7px solid #fff;
  border-right: 7px solid transparent;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8
}

.topic-time-limit-event-icn>img {
  position: relative;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px
}

.time-limit-message-template-link {
  width: 100%
}

.time-limit-message-template-overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #282828
}

.time-limit-message-template-background {
  background-image: url(//cdn.with.is/assets/time_limit_events/common/template_message/bg-4d8dfee406c04b43deac0ef338da7368be552a77ffb09443c32f01312bd2d291.jpg);
  background-size: cover;
  background-repeat: no-repeat, no-repeat;
  width: 100%;
  max-width: 720px;
  height: 100%;
  margin: auto
}

.time-limit-message-template_close-button {
  position: fixed;
  right: 10px;
  top: 10px
}

.time-limit-message-template_close-button>img {
  width: 30px
}

.time-limit-message-template-container {
  position: absolute;
  top: 37%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  height: 100%;
  max-width: 360px;
  max-height: 350px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: white
}

.time-limit-message-header_img {
  width: 100%;
  height: auto;
  max-width: 720px;
  margin-bottom: 15px
}

.time-limit-message-template-item {
  padding: 0 10px;
  margin: 20px 5px 0 5px;
  border-radius: 5px;
  color: #555656;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.9);
  text-align: left;
  position: relative
}

.time-limit-message-template-item pre {
  margin: 5px 0;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word
}

.time-limit-message-template-item:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 47%;
  border-left: 15px solid transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-bottom: 15px solid #F3F3F2
}

.time-limit-event-matching-dialog {
  padding-top: 48px
}

.time-limit-join-line {
  position: absolute;
  bottom: 95px;
  width: 100%;
  line-height: 25px;
  text-align: center;
  color: #fff;
  background-color: rgba(73, 70, 174, 0.9)
}

.time-limit-join-line img {
  height: 25px
}

.time-limit-event-support-overlay {
  position: fixed;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  z-index: 30;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%
}

.time-limit-event-support-background {
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%
}

.time-limit-event-support_close-button {
  position: fixed;
  right: 10px;
  top: 10px
}

.time-limit-event-support_close-button>img {
  width: 30px
}

.time-limit-event-support-container {
  margin: auto;
  height: 100%;
  width: 100%;
  max-width: 720px;
  text-align: center
}

.time-limit-event-support-limit-balloon {
  margin-top: 25%;
  width: 30%;
  height: auto
}

.time-limit-event-support-desc {
  margin-top: 20px;
  font-size: 19px;
  color: #555656
}

.time-limit-event-support-desc>p {
  margin-bottom: -15px
}

.time-limit-event-support-desc>p>span {
  color: #606060
}

.time-limit-event-support-daigo {
  max-width: 180px;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  margin: 0 auto
}

.time-limit-event .time-limit-event-container {
  z-index: 0;
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 100%;
  overflow: hidden
}

@media screen and (min-width: 720px) and (max-height: 1023px) {
  .time-limit-event .time-limit-event-container {
    max-width: 480px
  }
}

.time-limit-event .time-limit-event-container .time-limit-event-bg {
  z-index: 10;
  position: absolute;
  height: 100%
}

@media only screen and (orientation: portrait) {
  .time-limit-event .time-limit-event-container .time-limit-event-bg .time-limit-event-scroll-bg {
    height: 100%;
    -webkit-animation: time-limit-event-scroll-bg 10s linear 1s;
    animation: time-limit-event-scroll-bg 10s linear 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
  }
}

.time-limit-event .time-limit-event-container .time-limit-event-frame {
  z-index: 20;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 0 0 1rem rgba(53, 169, 195, 0.4) inset;
  overflow-x: hidden;
  overflow-y: scroll
}

.time-limit-event .splash_close-button {
  position: absolute;
  right: 10px;
  top: 10px
}

.time-limit-event .splash_close-button>img {
  width: 30px
}

.time-limit-event .time-limit-event-main {
  z-index: 30;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  position: relative;
  padding: 20px 10% 0;
  text-align: center
}

.time-limit-event .time-limit-event-time-end {
  width: 70%;
  margin: 10px auto 20px;
  padding: 5px 0;
  background-color: rgba(53, 169, 195, 0.4);
  border-radius: 20px
}

.time-limit-event .time-limit-event-time-end.animate {
  -webkit-animation: time-limit-event-fadein 1s linear 3s;
  animation: time-limit-event-fadein 1s linear 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.time-limit-event .time-limit-event-time-end_text {
  font-size: 20px;
  color: #fff
}

.time-limit-event .time-limit-event-title {
  margin: 0 15%
}

.time-limit-event .time-limit-event-title_img {
  max-width: 100%;
  height: auto;
  margin: 0 auto
}

.time-limit-event .time-limit-event-title_img.animate {
  -webkit-animation: time-limit-event-fadein 1.5s linear 0.5s;
  animation: time-limit-event-fadein 1.5s linear 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.time-limit-event .time-limit-event-start-button {
  position: relative;
  z-index: 20
}

.time-limit-event .time-limit-event-start-button.animate {
  -webkit-animation: start_circle 0.3s linear 2s;
  animation: start_circle 0.3s linear 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.time-limit-event .time-limit-event-start-button a {
  display: block;
  position: relative;
  width: 35%;
  margin: 0 auto
}

.time-limit-event .time-limit-event-start-button_img {
  width: 100%;
  max-width: 100%
}

.time-limit-event .time-limit-event-start-button_text {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  top: 50%;
  width: 80%;
  max-width: 100%
}

.time-limit-event .time-limit-event-daigo_balloon {
  z-index: 20;
  padding: 10px
}

.time-limit-event .time-limit-event-daigo_balloon img {
  max-width: 100%
}

.time-limit-event .time-limit-event-daigo_balloon img.animate {
  -webkit-animation: time-limit-event-fadein 0.3s linear 2.5s;
  animation: time-limit-event-fadein 0.3s linear 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.time-limit-event .time-limit-event-effect-bg {
  z-index: 10;
  position: absolute;
  max-width: 100%
}

.time-limit-event .time-limit-event-effect-bg_left {
  bottom: 25%;
  left: -50%;
  width: 70%
}

.time-limit-event .time-limit-event-effect-bg_left.animate {
  -webkit-animation: time-limit-event-scroll-bg-effect_left 10s linear;
  animation: time-limit-event-scroll-bg-effect_left 10s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.time-limit-event .time-limit-event-effect-bg_right {
  bottom: 35%;
  right: -10%;
  width: 30%
}

.time-limit-event .time-limit-event-effect-bg_right.animate {
  -webkit-animation: time-limit-event-scroll_bg_effect_right 10s linear;
  animation: time-limit-event-scroll_bg_effect_right 10s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

@-webkit-keyframes time-limit-event-scroll-bg {
  to {
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%)
  }
}

@keyframes time-limit-event-scroll-bg {
  to {
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%)
  }
}

@-webkit-keyframes time-limit-event-scroll-bg-effect_left {
  to {
    -webkit-transform: translate(150%, 50%);
    transform: translate(150%, 50%)
  }
}

@keyframes time-limit-event-scroll-bg-effect_left {
  to {
    -webkit-transform: translate(150%, 50%);
    transform: translate(150%, 50%)
  }
}

@-webkit-keyframes time-limit-event-scroll_bg_effect_right {
  to {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%)
  }
}

@keyframes time-limit-event-scroll_bg_effect_right {
  to {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%)
  }
}

@-webkit-keyframes start_circle {
  from {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes start_circle {
  from {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes time-limit-event-fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes time-limit-event-fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.timeline {
  --timeline-title-area-height: 60px;
  --timeline-bg-max-height: 500px
}

.timeline .autopager_paging-marker {
  margin: 0
}

.timeline-bg {
  position: fixed;
  top: 0;
  max-height: var(--timeline-bg-max-height);
  max-width: 700px;
  padding-top: var(--timeline-title-area-height)
}

.timeline-bg_image {
  width: 100%;
  height: auto
}

.timeline-bg_gradient {
  position: absolute;
  bottom: 0;
  height: var(--timeline-title-area-height);
  width: 100%
}

.timeline-bg_spacer {
  height: calc(100vw + var(--timeline-title-area-height));
  max-height: var(--timeline-bg-max-height)
}

.timeline_contents {
  margin-bottom: 60px;
  position: relative
}

.timeline-header {
  position: relative;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #fff;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 20px
}

.timeline-header_icon {
  position: absolute;
  top: -25px;
  right: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 25px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin: auto
}

.timeline-header_icon-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  font-size: 11px;
  font-weight: bold
}

.timeline-header_title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 5px
}

.timeline-header_desc {
  font-size: 13px;
  margin-bottom: 10px
}

.timeline-header_terms {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 20px
}

.timeline-post {
  position: relative;
  padding: 0 var(--outer-space) 40px;
  background: #fff
}

.timeline-post_content-wrapper {
  position: relative
}

.timeline-post_content-wrapper.reviewing {
  opacity: 0.5
}

.timeline-post_reviewing-label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 60px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  z-index: 1
}

.timeline-post_user-info {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 15px
}

.timeline-post_user-thumb-image {
  border-radius: 15px;
  margin-right: 10px
}

.timeline-post_user-profile {
  font-size: 14px;
  font-weight: bold;
  color: #606060;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-right: 5px
}

.timeline-post_affinity-count {
  background: rgba(44, 196, 203, 0.1);
  border-radius: 79px;
  color: #2CC4CB;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 2px 10px;
  flex-shrink: 0
}

.timeline-post_config {
  padding: 0 10px 0 15px
}

.timeline-post_text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7)
}

.timeline-post_image {
  width: 100%;
  height: auto;
  border-radius: 15px
}

.timeline-post_footer {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.timeline-post_posted-at {
  -webkit-box-flex: 1;
  flex: auto
}

.timeline-post_like .list-view-button {
  border-radius: 20px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  width: 160px
}

.timeline_footer-button {
  position: fixed;
  width: 100%;
  max-width: 700px;
  bottom: 0
}

.timeline_post-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.25)
}

.timeline_post-notification-container {
  position: fixed;
  bottom: 10px;
  width: 100%;
  max-width: 700px;
  padding: 0 var(--outer-space);
  opacity: 0;
  -webkit-animation: fade-in 0.5s 0.5s ease forwards, fade-out-hidden 0.5s 8.5s ease forwards;
  animation: fade-in 0.5s 0.5s ease forwards, fade-out-hidden 0.5s 8.5s ease forwards
}

.timeline_post-notification {
  background-color: #404040;
  border-radius: 10px;
  height: 90px;
  padding: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15), 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.timeline_post-notification:active {
  -webkit-animation: push-in 0.2s ease-out forwards;
  animation: push-in 0.2s ease-out forwards
}

.timeline_post-notification_title {
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .timeline_post-notification_title {
    font-size: 13px
  }
}

.timeline_post-notification_body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .timeline_post-notification_body {
    font-size: 11px
  }
}

.timeline_no-content {
  background-color: #fff;
  text-align: center;
  padding-top: 20px
}

.timeline_no-content>img {
  display: block;
  margin: 0 auto 15px
}

.timeline-entrance-container {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 50px;
  max-width: 700px
}

@media only screen and (min-width: 700px) {
  .timeline-entrance-container {
    margin: 0 0 50px
  }
}

.timeline-entrance-container_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 20px;
  font-weight: bold;
  padding: 15px
}

.timeline-entrance-contents {
  padding: 15px 0;
  position: relative
}

.timeline-card_post-contents_text {
  position: relative
}

.timeline-entrance-header {
  position: relative;
  width: 72%;
  padding: 40px var(--outer-space)
}

.grid .timeline-entrance-bg_theme-image, .grid .timeline-entrance-bg_gradient {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 45vw;
  max-width: 245px;
  max-height: 245px
}

.timeline-entrance-title {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px
}

.timeline-entrance-title>img {
  vertical-align: 0
}

.timeline-entrance-description {
  color: #fff;
  font-size: 13px;
  font-weight: bold
}

.timeline-entrance-cards {
  position: relative;
  height: 200px;
  padding: 0 var(--outer-space);
  overflow-x: scroll;
  white-space: nowrap
}

.timeline-card {
  display: inline-block;
  flex-shrink: 0;
  height: 100%;
  width: 145px;
  padding: 7px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.9);
  white-space: normal;
  vertical-align: top
}

.timeline-card:not(:first-child) {
  margin-left: 10px
}

.timeline-card:active {
  -webkit-animation: timeline-card-transition 0.2s ease-out forwards;
  animation: timeline-card-transition 0.2s ease-out forwards
}

.timeline-card-first {
  padding: 35px 15px 30px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6);
  text-align: center
}

.timeline-card-first-icon {
  border-radius: 50%;
  width: 55px;
  height: 55px;
  margin: 30px auto 0;
  display: grid;
  place-items: center
}

.timeline-card-first-icon>img {
  width: 12px;
  height: 18px
}

.timeline-card_post-contents {
  position: relative;
  padding: 10px;
  height: 130px;
  width: 130px;
  background-size: auto 100%;
  background-position: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  display: grid;
  place-items: center;
  border-radius: 10px
}

.timeline-card_post-contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(85, 85, 85, 0.3);
  border-radius: 10px
}

.timeline-card_post-user_thumb {
  height: 35px;
  width: 35px;
  border-radius: 18px
}

.timeline-card_post-user {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 8px
}

.timeline-card_post-user-info {
  text-align: right
}

.timeline-card_post-user_age-address {
  color: #606060;
  font-size: 12px;
  font-weight: bold
}

.timeline-card_post-user_posted-at {
  color: rgba(0, 0, 0, 0.4);
  font-size: 11px
}

.timeline-entrance-empty-card-wrapper {
  padding: 0 15px
}

.timeline-entrance-empty-card-wrapper .timeline-post-empty-card {
  background-color: rgba(255, 255, 255, 0.9)
}

.timeline-post-form_post-button {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  width: 65px;
  height: 30px;
  line-height: 30px;
  font-size: 14px
}

.timeline-post-form_user-thumb {
  width: 30px;
  border-radius: 50%;
  margin-right: 5px
}

.timeline-post-form_header-event-title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 20px;
  color: #fff;
  font-weight: bold
}

.timeline-post-form_header-event-title-icon {
  width: 13px;
  vertical-align: -2px;
  margin-right: 5px
}

.timeline-post-form_header {
  padding: 10px var(--outer-space);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.timeline-post-form_input-area {
  position: relative;
  -webkit-box-flex: 1;
  flex: auto;
  padding: 0 var(--outer-space)
}

.timeline-post-form_photo {
  margin-bottom: 15px
}

.timeline-post-form_photo canvas {
  display: block;
  margin: auto;
  width: 100%;
  border-radius: 20px
}

.timeline-post-form_photo.has-photo .timeline-post-form_remove-photo {
  visibility: visible
}

.timeline-post-form_remove-photo {
  visibility: hidden;
  width: 25px;
  position: absolute;
  top: 10px;
  right: 25px
}

.timeline-post-form_text {
  width: 100%;
  border: none;
  font-size: 14px;
  line-height: 1.5
}

.timeline-post-form_notes {
  padding: 0 var(--outer-space);
  font-size: 11px
}

.timeline-post-form_input-menu {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 0 var(--outer-space);
  margin-bottom: 20px
}

.timeline-post-balloons-row {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  padding: 0 var(--outer-space) var(--outer-space)
}

.timeline-post-balloons-row a:not(:last-child) {
  margin-right: 5px
}

.timeline-post-balloon-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 162px;
  width: 86.6vw;
  max-width: 606px
}

.timeline-post-balloon {
  position: relative;
  display: -webkit-box;
  display: flex;
  height: 100%;
  white-space: normal;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 15px;
  padding: 10px;
  scroll-snap-align: center
}

.timeline-post-balloon:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 25px;
  height: 15px;
  width: 30px;
  background-image: url(//cdn.with.is/assets/timeline/balloon_tail-58187df6ad31849a82c4eff66548be2bb3a15065e857008191b8d8a9260dcbc0.svg);
  background-repeat: no-repeat
}

.timeline-post-balloon:active {
  background-color: rgba(0, 0, 0, 0.05)
}

.timeline-post-balloon:active:after {
  background-image: url(//cdn.with.is/assets/timeline/balloon_tail_active-91d6869d268df004b4358909ec37cc1ca5cd07e44837e9361526fa45788536e0.svg)
}

.timeline-post-balloon.reviewing {
  opacity: 0.5
}

.timeline-post-balloon_reviewing-label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 60px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  padding: 6px 10px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  z-index: 1
}

.timeline-post-balloon_image-block {
  margin-right: 15px
}

.timeline-post-balloon_image-block>img {
  -o-object-fit: cover;
  object-fit: cover;
  height: 140px;
  width: 140px;
  border-radius: 10px
}

.timeline-post-balloon_text-block {
  position: relative;
  height: 100%;
  width: 100%;
  padding-top: 5px;
  font-size: 14px;
  font-weight: bold
}

.timeline-post-balloon_text-block_timeline-text {
  height: 90px;
  word-break: break-all
}

.timeline-post-balloon_text-block_timeline-text>p {
  margin-top: 0
}

.timeline-post-balloon_text-block_timeline-text>p:last-child {
  margin-bottom: 0
}

.timeline-post-balloon_text-block_no-text {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.28);
  font-weight: bold
}

.timeline-post-balloon_text-block_no-text>img {
  height: 15px;
  width: 18px;
  margin-right: 8px
}

.timeline-post-balloon_text-block_posted-at {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4)
}

.timeline-post-empty-card {
  position: relative;
  height: 80px;
  padding: 20px 15px;
  border-radius: 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.timeline-post-empty-card:active {
  -webkit-animation: push-in 0.2s ease-out forwards;
  animation: push-in 0.2s ease-out forwards
}

.timeline-post-empty-card_user-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%
}

.timeline-post-empty-card_icon {
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  display: grid;
  place-items: center
}

.timeline-post-empty-card_icon>img {
  width: 16px;
  height: 16px
}

.timeline-post-empty-card_title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: bold;
  margin-left: 15px
}

.touchable-group-card {
  display: inline-block;
  position: relative;
  width: 100px;
  margin: 0 5px
}

.touchable-group-card_cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: rgba(76, 76, 76, 0.4)
}

.touchable-group-card_title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  padding: 0 4px;
  font-size: 11px;
  font-weight: bold;
  white-space: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 100%
}

.touchable-group-card_img {
  width: 100%;
  border-radius: 10px
}

.touchable-group-card_cover.is-join {
  background: rgba(254, 105, 112, 0.9);
  visibility: hidden
}

.touchable-group-card.is-join .touchable-group-card_cover.is-join {
  -webkit-animation: fade-in-visible 0.3s forwards;
  animation: fade-in-visible 0.3s forwards
}

.touchable-group-card.is-join .touchable-group-card_title {
  display: none
}

.touchable-group-card.is-join:after {
  content: '';
  background: url(//cdn.with.is/assets/missions/easy_konomi_register/icon_heart-181c5d949d085334f0c05113e5e60c93f276d14648e6ac4b0c1d83d04d5c4b5c.png) no-repeat center/100%;
  width: 40%;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  visibility: hidden;
  -webkit-animation: touchable-group-card-heart cubic-bezier(1, 0, 0, 1) 0.3s 0.1s forwards;
  animation: touchable-group-card-heart cubic-bezier(1, 0, 0, 1) 0.3s 0.1s forwards
}

.touchable-group-card.is-touching {
  -webkit-animation: touchable-group-card-is-touching 0.3s ease-in-out forwards;
  animation: touchable-group-card-is-touching 0.3s ease-in-out forwards
}

.touchable-group-card.is-touchend {
  -webkit-animation: touchable-group-card-is-touchend 0.2s ease-in-out;
  animation: touchable-group-card-is-touchend 0.2s ease-in-out
}

@-webkit-keyframes touchable-group-card-heart {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible
  }
}

@keyframes touchable-group-card-heart {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible
  }
}

@-webkit-keyframes touchable-group-card-is-touching {
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }
}

@keyframes touchable-group-card-is-touching {
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }
}

@-webkit-keyframes touchable-group-card-is-touchend {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes touchable-group-card-is-touchend {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .tutorial_scroll-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: 320px
  }
}

.media-middle_image {
  position: relative
}

.list-box {
  padding: 5px 20px;
  width: 100%
}

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
  .list-box {
    padding: 10px 20px
  }
}

.notice-primary {
  padding: 3px 8px;
  color: #fff;
  background-color: #606060;
  border-radius: 10px
}

.search-tutorial {
  border: 2px solid #606060
}

.search-tutorial-balloon {
  position: absolute;
  left: 0;
  z-index: 1;
  opacity: 0
}

.is-animating.search-tutorial-balloon {
  -webkit-animation: search-tutorial-balloon-fade-in .3s ease-out 0s forwards;
  animation: search-tutorial-balloon-fade-in .3s ease-out 0s forwards
}

.search-tutorial-balloon {
  width: 30%;
  top: 44px
}

@-webkit-keyframes search-tutorial-balloon-fade-in {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
  }

  70% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1
  }
}

@keyframes search-tutorial-balloon-fade-in {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
  }

  70% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1
  }
}

.user-card-group-konomi-best {
  width: 100%;
  height: 101px
}

.user-card-group-konomi-best .user-card-container {
  width: 100%;
  height: 100%;
  padding: 15px 15px 0
}

.user-card-group-konomi-best .user-card-container.is-touching {
  background-color: #f0f0f0
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container {
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07)
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container .user-card-main-photo {
  position: relative
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container .user-card-main-photo>img {
  width: 60px;
  height: 60px;
  border-radius: 30px
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container .user-card-main-photo .user-card-newface {
  position: absolute;
  left: 4px;
  bottom: 23px;
  width: 50px;
  height: 15px;
  line-height: 15px;
  border-radius: 8px;
  background-color: #606060;
  color: #fff;
  text-align: center;
  font-size: 9px
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container .user-contents {
  width: 100%;
  margin-left: 15px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .user-card-group-konomi-best .user-card-container .user-card-inner-container .user-contents {
    margin-left: 9px;
    margin-right: 5px
  }
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container .user-profile-age-address {
  position: relative;
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
  color: #606060
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container .user-profile-age-address:before {
  content: '';
  position: absolute;
  margin: auto;
  top: 2px;
  left: -20px;
  width: 13px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icons/konomi_best-6a1a291d15da5f79fc1f47251f0266043dd0cc0ad30bdd94ad0577d2b2944214.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.user-card-group-konomi-best .user-card-container .user-card-inner-container .user-konomi-comment {
  color: rgba(0, 0, 0, 0.6);
  font-size: 11px;
  word-break: break-word
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .user-card-group-konomi-best .user-card-container .user-card-inner-container .user-konomi-comment {
    font-size: 10px
  }
}

.user-card-simple {
  width: 165px;
  padding: 5px
}

.user-card-simple a {
  text-decoration: none
}

.user-card-simple .user-main-area {
  position: relative;
  width: 155px;
  height: 155px
}

.user-card-simple .user-main-area .main-photo {
  width: 100%;
  height: 100%;
  border-radius: 10px
}

.user-card-simple .user-main-area .user-profile-sub_photos {
  position: absolute;
  bottom: 5px;
  right: 10px;
  color: #fff
}

.user-card-simple .user-profiles {
  height: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 7px;
  padding: 0 5px
}

.user-card-simple .user-profile-age-address {
  font-weight: bold;
  color: #606060
}

.user-card-simple .user-profile-tweet-area {
  padding: 0 5px;
  line-height: 1.3
}

.user-card-simple .user-profile-tweet-icon {
  display: inline-block;
  background: url(//cdn.with.is/assets/shared/icons/tweet_gray_light-879783681eb6a31807b460fb4a1636439bd372c81617a0d945d466d5c2a98852.svg) no-repeat center;
  vertical-align: text-bottom;
  width: 13px;
  height: 13px
}

.user-card-simple .user-profile-tweet {
  font-size: 11px;
  line-height: 1.3em;
  color: rgba(0, 0, 0, 0.6);
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal
}

@-webkit-keyframes pulsate {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes pulsate {
  from {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.grid {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  margin: 0 8px
}

.grid img {
  max-width: 100%
}

.newface-icon {
  position: absolute;
  line-height: 1.2;
  color: #fff
}

.newface-icon span {
  display: block
}

.user-card-small {
  padding: 8px;
  width: 50%
}
.user-fri-small {
  padding: 8px;
}

.user-card-small_main-area {
  position: relative
}

.user-card-small_main-area:before {
  content: '';
  display: block;
  position: absolute;
  top: 75.5%;
  left: 0;
  width: 100%;
  height: 24.5%;
  background: -owg-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
  background: -webkit-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5))
}

.user-card-small_main-photo {
  border-radius: 10px 10px 0 0;
  min-width: 100%
}

.user-card-small_sub-area {
  position: relative;
  width: 100%;
  padding: 8px
}

.user-card-small_profiles {
  -webkit-box-flex: 8;
  flex: 8
}

.user-card-small_sub-photos {
  position: relative;
  color: #fff;
  width: 19px;
  line-height: 15px
}

.user-card-small_sub-photos:after {
  content: '';
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: -15px;
  width: 11px;
  height: 10px;
  background-image: url(//cdn.with.is/assets/shared/icn_photo_s-ea6d41838d1dc0474cdd862afffcdc1ff8f86fbc6efbedbe387cc8aad46bb49f.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.user-card-small .message-icon {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-animation-name: pulsate;
  animation-name: pulsate;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}

.user-card-small .user-card-small_upper-right-icons {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  text-align: right
}

.user-card-small .user-card-small_lower-area {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column
}

.user-card-small .user-card-small_lower-area .user-card-small_lower-icons {
  height: 23px
}

.user-card-small .user-card-small_lower-area .user-card-small_lower-icons .user-card-small_lower-right-icons {
  position: absolute;
  top: 3px;
  right: 0;
  width: 19px;
  height: 15px
}

.user-card-small .affinities-count {
  color: #fff;
  text-align: center;
  font-size: 11px;
  opacity: 1.0
}

.user-card-small .affinities-count .affinities-label {
  float: left;
  padding-top: 3px;
  padding-right: 3px
}

.user-card-small .affinities-count .affinities-num {
  float: right;
  width: 24px;
  height: 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 12px;
  background-color: rgba(38, 198, 218, 0.75)
}

.user-card-small.is-group .newface-icon {
  top: 5%;
  left: 5%;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background-color: rgba(254, 105, 112, 0.9)
}

.user-card-small.is-group .newface-icon span {
  margin: 8px
}

.user-card-small.is-group .like-icons {
  position: absolute;
  height: 21px;
  left: 5px;
  bottom: 22px;
  width: 100%
}

.user-card-small.is-group .message-icon {
  display: inline-block;
  width: 23px;
  height: 21px;
  background-image: url(//cdn.with.is/assets/shared/icn_message_l-17e7f3a896a6ba996ae7187fac21192fe09af6855f2072429b606c7c412ab744.png);
  background-size: 100%
}

.user-card-small.is-group .user-card-small_overlay-profiles {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 24px;
  line-height: 22px
}

.user-card-small.is-group .user-card-small_tweet {
  position: absolute;
  left: 6px;
  top: 0;
  margin-right: .3em;
  width: 70%;
  color: #fff;
  font-size: 1.3em;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis
}

.user-card-small.is-group .user-card-small_photo-num {
  position: absolute;
  top: 0;
  right: 6px;
  width: 32px;
  color: #fff;
  text-align: right
}

.user-card-small.is-group .user-card-small_photo-num:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  background-image: url(//cdn.with.is/assets/shared/icn_photo_l-ff1dbcc98dccfd4c542639192ab370d4b8c841d5d25764beb97d2c9f1d92ec70.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 2px 0
}

.user-card-small.is-group .user-card-small_sub-area {
  font-size: 13px;
  background-color: #fff;
  border-radius: 0 0 10px 10px
}

.user-card-small.is-group .user-card-small_sub-area .submit-area {
  margin-top: 5px
}

.user-card-small.is-group .user-card-small_sub-area .list-view-button {
  width: 100%;
  height: 40px;
  font-size: 13px;
  border-radius: 20px
}

.user-card-small.is-group .user-card-small_profile-area {
  width: 100%;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center
}

.user-card-small.is-group .join-event-badges {
  position: absolute;
  left: 15px;
  bottom: 5px
}

.user-card-small.is-group .camp-member-badge, .user-card-small.is-group .time-limit-event-member-badge {
  padding: 8px 0;
  bottom: 45px;
  right: 10px;
  width: 40px;
  height: 45px;
  letter-spacing: -1px;
  margin-top: 5px
}

.user-card-small.is-group .campaign_same-choice {
  top: 5px;
  right: 5px;
  padding: 9px 5px;
  width: 45px;
  height: 45px;
  border-radius: 23px
}

.user-card-small.is-group .time-limit-event-member-badge {
  position: relative;
  width: 53px;
  height: 31px;
  left: -5px;
  color: #fff;
  line-height: 1;
  text-align: center;
  background-image: url(//cdn.with.is/assets/time_limit_events/common/users/icn_message-c380f7c38d7c2d0d6117ea106e95630fb7fb1644b9295cb39753ac083db4ca26.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.user-card-small.is-group .good-match-badge {
  color: #fff;
  text-align: center;
  font-size: 8px;
  width: 40px;
  height: 40px;
  padding-top: 6px;
  margin-top: 3px;
  border-radius: 22px;
  background-color: rgba(38, 198, 218, 0.75)
}

.user-card-small.is-basic {
  vertical-align: top
}

.user-card-small.is-basic .user-card-small_main-area:before {
  border-radius: 0 0 10px 10px
}

.user-card-small.is-basic .user-card-small_main-area.newface_1day-frame:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 3px solid #696969;
  border-radius: 10px
}

.user-card-small.is-basic .user-card-small_main-area.matched-frame:after {
  content: '';
  display: block;
  position: absolute;
  background-image: url(//cdn.with.is/assets/likes/matched-8a0946e28730cace0d681212cfb2beb7aedd76c82d77546c3c9b162f24adaa82.png);
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px
}

.user-card-small.is-basic .user-card-small_main-photo {
  border-radius: 10px
}

.user-card-small.is-basic .user-card-small_sub-area {
  box-shadow: none
}

.user-card-small.is-basic .user-card-small_lower-area .lower-line {
  margin-bottom: -1px;
  border-radius: 0 0 10px 10px
}

.user-card-small.is-basic .user-card-small_lower-area .campaign_same-choice-line {
  height: 20px;
  line-height: 20px
}

.user-card-small.is-basic .user-card-small_lower-area .newface_1day-line {
  height: 23px;
  line-height: 23px;
  text-align: center;
  color: #fff;
  background-color: rgba(58, 213, 154, 0.8)
}

.user-card-small.is-basic .likes-count-question {
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: #fff
}

.user-card-small.is-basic .message-icon {
  position: relative;
  width: 44px;
  height: 44px;
  line-height: 14px;
  padding-top: 8px;
  border-radius: 22px;
  margin-bottom: 2px;
  background-image: url(//cdn.with.is/assets/shared/icn_message_like_look-ed42b212519505351459def6028509f5adfe787dfa2bf709c179addcae8d9401.png);
  background-size: 30px 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(254, 105, 112, 0.9)
}

.user-card-small.is-basic .user-card-small_profiles {
  display: inline-block;
  font-weight: bold;
  color: #606060
}

.user-card-small.is-basic .user-card-small_tweet {
  position: relative;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  min-height: 40px;
  line-height: 1.2;
  color: #555
}

.user-card-small.is-basic .user-card-small_tweet:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  display: inline-block;
  width: 12px;
  height: 11px;
  background-image: url(//cdn.with.is/assets/user_frame/icn_tweet-ad991e77cb632ff70b7227c1840a3caf2c121ac65bad69024df5e04a86016b85.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.user-card-small.is-basic .join-event-badges {
  position: absolute;
  left: 15px;
  bottom: 5px
}

.user-card-small.is-basic .camp-member-badge, .user-card-small.is-basic .time-limit-event-member-badge {
  padding: 8px 0;
  bottom: 5px;
  width: 40px;
  height: 45px;
  letter-spacing: -1px;
  margin-top: 5px
}

.user-card-small.is-basic .time-limit-event-member-badge {
  position: relative;
  width: 53px;
  height: 31px;
  left: -5px;
  color: #fff;
  line-height: 1;
  text-align: center;
  background-image: url(//cdn.with.is/assets/time_limit_events/common/users/icn_message-c380f7c38d7c2d0d6117ea106e95630fb7fb1644b9295cb39753ac083db4ca26.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.user-card-small_meatpatty {
  width: 100%;
  border-radius: 10px
}

.user-card-wide {
  width: 100%;
  height: 100%
}

.user-card-wide a {
  text-decoration: none
}

.user-card-wide .user-photos {
  width: 100%;
  display: -webkit-box;
  display: flex;
  position: relative
}

.user-card-wide .user-photos .main-photo {
  width: 50%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 10px 0 0 10px
}

.user-card-wide .user-photos .sub-photos {
  width: 50%;
  flex-wrap: wrap;
  display: -webkit-box;
  display: flex
}

.user-card-wide .user-photos .sub-photo {
  position: relative;
  width: 50%;
  height: 50%;
  border: 1px solid #fff
}

.user-card-wide .user-photos .sub-photo:nth-child(2) {
  border-radius: 0 10px 0 0
}

.user-card-wide .user-photos .sub-photo:nth-child(4) {
  border-radius: 0 0 10px 0
}

.user-card-wide .user-photos .sub-photo-no-image {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 35%;
  height: 35%
}

.user-card-wide .user-photos .user-card-newface-flag {
  top: 1px
}

.user-card-wide .user-profiles {
  height: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin: 10px 0;
  padding: 0 5px;
  font-weight: bold;
  color: #606060
}

.user-card-wide .user-profiles .user-profile-sub_photos {
  margin-left: auto
}

.user-card-wide .user-profiles .user-profile-sub_photos:before {
  background-image: url(//cdn.with.is/assets/shared/icons/camera_gray_light-55b39cbac0fe4fc30064c4b37be9f341f46476c81ff11a5653f6a1c86b069e89.svg)
}

.user-card-wide .user-profile-konomi-best {
  position: relative;
  background-color: #fff1f1;
  margin: 0 5px 10px;
  padding: 10px;
  border-radius: 12px
}

.user-card-wide .user-profile-konomi-best:before {
  content: '';
  position: absolute;
  top: -23px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #fff1f1
}

.user-card-wide .user-profile-konomi-best .user-profile-konomi-best-title {
  position: relative;
  color: #606060;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 18px
}

.user-card-wide .user-profile-konomi-best .user-profile-konomi-best-title:before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 13px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icons/konomi_best-6a1a291d15da5f79fc1f47251f0266043dd0cc0ad30bdd94ad0577d2b2944214.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.user-card-wide .user-profile-konomi-best .user-profile-konomi-best-comment {
  color: rgba(0, 0, 0, 0.6);
  font-size: 11px
}

.user-card-wide .user-profile-tags {
  max-height: 78px;
  overflow: hidden
}

.user-card-wide .user-profile-tags.after-konomi-best {
  max-height: 52px
}

.user-card-wide .user-profile-tags .profile-tag {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  margin: 3px 3px;
  padding: 0 5px;
  background-color: #fff1f1;
  color: #606060;
  font-size: 11px;
  border-radius: 12px
}

.user-card-wide .user-profile-tags .profile-tag.affinity-tag {
  background-color: #ffdcdc;
  font-weight: bold
}

.user-card-with-affinities {
  width: 100%;
  height: 100%;
  padding: 5px
}

.user-card-with-affinities a {
  text-decoration: none
}

.user-card-with-affinities .user-main-area {
  position: relative;
  color: #fff
}

.user-card-with-affinities .user-main-area:before {
  content: '';
  display: block;
  position: absolute;
  top: 65.5%;
  left: 0;
  width: 100%;
  height: 35%;
  border-radius: 0 0 10px 10px;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5))
}

.user-card-with-affinities .user-main-area .main-photo {
  width: 100%;
  height: 100%;
  border-radius: 10px
}

.user-card-with-affinities .user-main-area .user-card-newface-flag {
  width: 25px;
  height: 32px;
  left: 9px
}

.user-card-with-affinities .user-main-area .user-profile-sub_photos {
  position: absolute;
  bottom: 4px;
  right: 7px;
  font-size: 13px
}

.user-card-with-affinities .user-profiles {
  height: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin: 7px 0;
  padding: 0 5px;
  font-size: 11px
}

.user-card-with-affinities .user-profiles .user-profile-age-address {
  font-weight: bold;
  color: #606060
}

.user-card-with-affinities .user-affinities-area {
  position: relative;
  width: 100%;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  background-color: #2cc4cb;
  color: #fff;
  font-size: 11px;
  text-align: center
}

.user-card-with-affinities .user-affinities-area>span {
  vertical-align: top
}

.user-card-with-affinities .user-affinities-area>span.user-affinities-count {
  font-size: 14px;
  font-weight: bold;
  margin-left: 4px
}

.user-card-with-recommend-reason .user-main-area {
  position: relative
}

.user-card-with-recommend-reason .main-photo {
  width: 100%;
  height: 100%;
  border-radius: 10px
}

.user-card-with-recommend-reason .user-profile-sub_photos {
  position: absolute;
  bottom: 5px;
  right: 10px;
  color: #FFF
}

.user-card-with-recommend-reason .user-sub-area {
  margin-top: 15px
}

.user-card-with-recommend-reason .user-profile-age-address {
  font-size: 11px;
  color: #606060
}

.user-card-with-recommend-reason_reason-icon {
  position: absolute;
  bottom: -12px;
  left: 7px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-sizing: content-box
}

.user-card-with-recommend-reason_reason-icon.is-konomi {
  border-radius: 8px
}

.user-card-with-recommend-reason_reason-text {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3em;
  color: rgba(0, 0, 0, 0.87)
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .user-card-with-recommend-reason_reason-text {
    font-size: 12px
  }
}

.user-card-with-recommend-reason_like-button {
  padding: 5px 0
}

.user-cards-konomi-best {
  width: 90vw;
  max-width: 500px
}

.user-cards-konomi-best>a:not(:last-child) .user-card-inner-container {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.user-cards-konomi-best .user-card-container {
  height: 110px;
  padding: 0 7px
}

.user-cards-konomi-best .user-card-container.is-touching {
  background-color: #efefef
}

.user-cards-konomi-best .user-card-container .user-card-inner-container {
  width: 100%;
  height: 100%;
  padding: 15px 0;
  display: -webkit-box;
  display: flex
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-card-main-photo {
  position: relative
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-card-main-photo>img {
  width: 60px;
  height: 60px;
  border-radius: 30px
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-card-main-photo .user-card-newface {
  position: absolute;
  left: 4px;
  bottom: 17px;
  width: 50px;
  height: 15px;
  line-height: 15px;
  border-radius: 8px;
  background-color: #606060;
  color: #fff;
  text-align: center;
  font-size: 9px
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-contents {
  width: 100%;
  margin-left: 20px;
  margin-right: 10px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .user-cards-konomi-best .user-card-container .user-card-inner-container .user-contents {
    margin-left: 9px;
    margin-right: 5px
  }
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-konomi-comment-header {
  display: -webkit-box;
  display: flex;
  position: relative
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-konomi-comment-header:before {
  content: '';
  position: absolute;
  margin: auto;
  top: 1px;
  left: 0;
  width: 13px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/shared/icons/konomi_best-6a1a291d15da5f79fc1f47251f0266043dd0cc0ad30bdd94ad0577d2b2944214.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-konomi-name {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  margin-left: 18px
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-profile-age-address {
  margin-left: auto
}

.user-cards-konomi-best .user-card-container .user-card-inner-container .user-konomi-comment {
  padding: 10px 0;
  word-break: break-word
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .user-cards-konomi-best .user-card-container .user-card-inner-container .user-konomi-comment {
    font-size: 10px
  }
}

.user-detail-container {
  margin-bottom: 20px
}

.profile-thumb {
  position: relative
}

.profile-thumb_cover {
  position: relative;
  display: block;
  width: 100%;
  height: auto
}

.profile-thumb_gradient {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 30%
}

.profile-thumb_cover_img {
  display: block;
  max-width: 100%;
  min-width: 100%
}

.profile-thumb_nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)
}

.profile-thumb_nav_back {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 12px 0;
  width: 45px;
  height: 45px
}

.profile-thumb_nav_back img {
  display: block;
  margin: 0 auto;
  width: 30px;
}

.profile-thumb_nav_config {
  position: absolute;
  top: 10px;
  right: 0;
  padding: 11px 0;
  width: 45px;
  height: 45px
}

.profile-thumb_nav_config img {
  display: block;
  margin: 0 auto;
  width: 25px;
  /* height: 22px */
}

.profile-thumb_photo {
  position: absolute;
  top: 7.5%;
  left: 10%;
  width: 78%;
  height: 78%;
  border: 3px solid #fff;
  border-radius: 50%
}

.profile-thumb_photo_img {
  display: block;
  max-width: 100%;
  min-width: 100%;
  border-radius: 50%
}

.profile-sub-thumbs {
  position: relative;
  margin-top: -35px;
  padding: 10px 5px 30px 10px
}

.profile-photos {
  margin: 0 auto;
  width: 100%;
  max-width: 310px;
  height: auto;
  text-align: center;
  overflow: auto
}

.profile-photos.is-wide {
  max-width: 380px
}

.profile-photos.is-scroll>div {
  min-width: 100%;
  width: 250%
}

.profile-photos.is-scroll>div:after {
  content: '';
  width: 5px;
  height: 64px;
  float: left
}

.profile-photos_item {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 10px;
  width: 64px;
  height: 64px;
  text-align: center;
  border-radius: 32px
}

.profile-photos_item.is-selected {
  background-color: #fff;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2)
}

.profile-photos_image {
  position: relative;
  top: 3px;
  width: 58px;
  height: 58px;
  border-radius: 29px
}

.profile_main {
  display: block;
  color: #606060;
  font-size: 15px;
  font-weight: bold
}

.profile_main-nickname {
  margin-right: 5px;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .profile_main-nickname {
    max-width: 110px
  }
}

.profile_main-age-address {
  white-space: nowrap
}

.newface_1day_balloon {
  width: 100%;
  margin-bottom: -11px
}

.profile-tweet {
  padding: 10px 0 20px;
  color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  *zoom: 1
}

.profile-tweet>span {
  position: relative;
  padding-left: 20px
}

.profile-tweet>span:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 15px;
  height: 14px;
  background-image: url(//cdn.with.is/assets/user_frame/icn_tweet-ad991e77cb632ff70b7227c1840a3caf2c121ac65bad69024df5e04a86016b85.png);
  background-size: 100%;
  background-repeat: no-repeat
}

.profile_last-online {
  position: relative;
  width: 60%;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1;
  margin-left: 13px
}

.profile_last-online:before {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: -13px;
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #E5E5E5
}

.profile_last-online.is-online:before {
  background-color: #64C800
}

.profile_last-online.is-in-24h:before {
  background-color: #F8B62D
}

.user-likes-count {
  position: absolute;
  bottom: 15px;
  right: 15px;
  height: 16px;
  color: rgba(0, 0, 0, 0.4)
}

.user-likes-count>img {
  width: 14px;
  height: 11px;
  margin-top: -3px
}

.profile-newface {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 75px
}

.request-button {
  display: table;
  height: 62px;
  background-color: #606060;
  box-shadow: 0px 2px 0px #d15d66
}

.request-button:link {
  color: #fff;
  text-decoration: none
}

.request-button>span {
  display: table-row
}

.request-button.is-active, .request-button:active {
  margin-top: 2px;
  height: 64px;
  color: #fff;
  opacity: 1;
  background-color: #d15d66;
  box-shadow: none
}

.request-button.is-disabled {
  height: 64px;
  background-color: #d7d7d7;
  box-shadow: none
}

.request-button.is-disabled:active {
  margin-top: 0
}

.request-button.is-disabled>span {
  display: table-cell;
  vertical-align: middle
}

.profile-detail_vip-tag {
  display: inline-block;
  line-height: 22px;
  vertical-align: -3px
}

.profile-detail_title {
  position: relative;
  margin-bottom: 15px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
  font-weight: bold
}

.profile-detail_title.has-margin {
  margin: 0 15px 15px
}

.profile-help {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 5px;
  width: 30px;
  height: 30px
}

.profile-help_img {
  width: 20px;
  vertical-align: top
}

.dialog#help-about-konomi {
  padding: 10px 0 20px;
  text-align: center
}

.dialog#help-about-konomi .help-about-konomi-head {
  width: 159px;
  height: 18px;
  margin-bottom: 15px;
  margin-top: 10px
}

.dialog#help-about-konomi .help-about-konomi-bottom {
  margin: 0 20px;
  font-size: 11px
}

.dialog#help-about-konomi .help-about-konomi-bottom p {
  margin: 15px 0;
  text-align: left
}

.profile-introduction {
  padding-top: 15px
}

.profile-introduction_content {
  padding-bottom: 15px;
  font-size: 13px;
  border-bottom: 1px solid #ececeb
}

.profile-diagnoses {
  background-position: top center;
  background-size: 320px;
  background-repeat: no-repeat
}

.profile-diagnoses_lock-text {
  padding: 45px 0 30px;
  text-align: center;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold
}

.profile-diagnoses_lock-button {
  padding-bottom: 30px;
  border-bottom: 1px solid #ececeb
}

.profile-diagnoses_lock-button .button {
  display: block;
  margin: 0 auto;
  width: 73.33vw;
  max-width: 275px
}

.profile-detail {
  padding-top: 20px
}

.profile-detail+.detail-box {
  border-top: 1px solid #ececeb
}

.profile-detail>.text-primary {
  padding-left: 20px
}

.profile-detail_heading {
  padding-left: 20px;
  height: 56px;
  line-height: 6.5;
  border-bottom: 1px solid #ececeb
}

.profile-detail_lists tr {
  height: 50px
}

.profile-detail_lists th {
  padding-left: 20px;
  font-weight: normal
}

.profile-detail_lists td {
  width: 50%;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #606060
}

.profile-detail_lists+.profile-detail_heading {
  border-top: 1px solid #ececeb
}

.profile-received-message, .profile-answers, .profile-affinities, .profile-introduction, .profile-konomi-best, .profile-talk-disposition {
  position: relative;
  padding: 20px 15px 0
}

.profile-affinities_title {
  position: relative;
  width: 195px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 20px;
  font-weight: bold
}

.profile-affinities_sum {
  color: rgba(0, 0, 0, 0.87);
  font-size: 32px;
  font-weight: bold;
  line-height: 32px
}

.title-affinities_thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  height: 36px
}

.profile-affinities_thumb {
  position: absolute;
  top: 15px;
  right: 15px
}

.profile-affinities_thumb_overlap {
  position: absolute;
  top: 0;
  right: 27px
}

.profile-affinities_list {
  width: 100%
}

.profile-affinities_list.on-user-detail {
  padding: 10px 0
}

.profile-affinity {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 5px 10px;
  min-width: 14px;
  color: #606060;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background-color: #ffeded;
  border-radius: 15px
}

.profile-link-frame {
  padding-bottom: 10px;
  border-bottom: 1px solid #ececeb
}

.profile-link-frame.has-margin {
  margin: 0 15px
}

.profile-link-bar {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px
}

.profile-link-bar:link, .profile-link-bar:visited, .profile-link-bar:hover, .profile-link-bar:active {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none
}

.profile-link-bar:hover, .profile-link-bar:active {
  background-color: #f0f0f0
}

.profile-detail-border {
  border-bottom: 1px solid #ececeb
}

.profile-detail-border.has-margin {
  margin: 0 15px
}

.dialog#help-about-affinity {
  padding: 10px 0;
  text-align: center
}

.dialog#help-about-affinity .help-about-affinity-head .help-about-affinity-title {
  margin: 10px 0;
  font-size: 20px
}

.dialog#help-about-affinity .help-about-affinity-head img {
  width: 100%
}

.dialog#help-about-affinity .help-about-affinity-bottom {
  margin: 10px 15px;
  text-align: left
}

.profile-groups {
  padding-top: 20px
}

.profile-groups_tendency {
  margin-bottom: 15px;
  padding: 0 15px
}

.profile-groups_tendency_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px
}

.profile-groups_tendency_graph {
  padding: 15px 0
}

.profile-groups_tendency_graph_frame {
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 12px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden
}

.profile-groups_tendency_graph_item {
  position: relative;
  height: 100%;
  float: left
}

.profile-groups_tendency_graph_item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)
}

.profile-groups_tendency_graph_item:last-child {
  -webkit-box-flex: 1;
  flex-grow: 1
}

.profile-groups_tendency_graph_item+.profile-groups_tendency_graph_item {
  margin-left: 1px
}

.profile-groups_tendency_list {
  margin-left: -10px;
  margin-right: -10px;
  width: auto;
  overflow: hidden
}

.profile-groups_tendency_item {
  position: relative;
  margin-bottom: 10px;
  padding: 0 10px;
  float: left;
  width: 50%;
  height: 25px
}

.profile-groups_tendency_label_circle {
  float: left;
  margin-right: 10px;
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background-color: #fff
}

.profile-groups_tendency_label_icon {
  width: 25px;
  height: 25px;
  background-image: url(//cdn.with.is/assets/groups/icon_group_categories-60e06093feea366354d9ac3a46630533bdd7598137e93c198bb07b50b90b6723.png);
  background-size: 3000% 200%;
  background-position: 0 0;
  background-repeat: no-repeat
}

.profile-groups_tendency_label_icon[data-category-id="0"] {
  background-position: 0px -25px
}

.profile-groups_tendency_label_icon[data-category-id="1"] {
  background-position: -25px -25px
}

.profile-groups_tendency_label_icon[data-category-id="2"] {
  background-position: -50px -25px
}

.profile-groups_tendency_label_icon[data-category-id="3"] {
  background-position: -75px -25px
}

.profile-groups_tendency_label_icon[data-category-id="4"] {
  background-position: -100px -25px
}

.profile-groups_tendency_label_icon[data-category-id="5"] {
  background-position: -125px -25px
}

.profile-groups_tendency_label_icon[data-category-id="6"] {
  background-position: -150px -25px
}

.profile-groups_tendency_label_icon[data-category-id="7"] {
  background-position: -175px -25px
}

.profile-groups_tendency_label_icon[data-category-id="8"] {
  background-position: -200px -25px
}

.profile-groups_tendency_label_icon[data-category-id="9"] {
  background-position: -225px -25px
}

.profile-groups_tendency_label_icon[data-category-id="10"] {
  background-position: -250px -25px
}

.profile-groups_tendency_label_icon[data-category-id="11"] {
  background-position: -275px -25px
}

.profile-groups_tendency_label_icon[data-category-id="12"] {
  background-position: -300px -25px
}

.profile-groups_tendency_label_icon[data-category-id="13"] {
  background-position: -325px -25px
}

.profile-groups_tendency_label_icon[data-category-id="14"] {
  background-position: -350px -25px
}

.profile-groups_tendency_label_icon[data-category-id="15"] {
  background-position: -375px -25px
}

.profile-groups_tendency_label_icon[data-category-id="16"] {
  background-position: -400px -25px
}

.profile-groups_tendency_label_icon[data-category-id="17"] {
  background-position: -425px -25px
}

.profile-groups_tendency_label_icon[data-category-id="18"] {
  background-position: -450px -25px
}

.profile-groups_tendency_label_icon[data-category-id="19"] {
  background-position: -475px -25px
}

.profile-groups_tendency_label_icon[data-category-id="20"] {
  background-position: -500px -25px
}

.profile-groups_tendency_label_icon[data-category-id="21"] {
  background-position: -525px -25px
}

.profile-groups_tendency_label_icon[data-category-id="22"] {
  background-position: -550px -25px
}

.profile-groups_tendency_label_icon[data-category-id="23"] {
  background-position: -575px -25px
}

.profile-groups_tendency_label_icon[data-category-id="24"] {
  background-position: -600px -25px
}

.profile-groups_tendency_label_icon[data-category-id="25"] {
  background-position: -625px -25px
}

.profile-groups_tendency_label_icon[data-category-id="26"] {
  background-position: -650px -25px
}

.profile-groups_tendency_label_icon[data-category-id="27"] {
  background-position: -675px -25px
}

.profile-groups_tendency_label_icon[data-category-id="28"] {
  background-position: -700px -25px
}

.profile-groups_tendency_label_icon[data-category-id="29"] {
  background-position: -725px -25px
}

.profile-groups_tendency_label_icon[data-category-id='99'] {
  background-position: 0 -25px
}

.profile-groups_tendency_name {
  line-height: 25px;
  font-size: 12px
}

.profile-groups_tendency_rate {
  float: right;
  width: 45px;
  font-size: 17px;
  font-weight: bold;
  text-align: right
}

.profile-groups_tendency_unit {
  margin-left: -2px;
  font-size: 10px
}

.user-groups_list {
  padding-top: 10px
}

.profile-answers_thumb {
  margin-right: 5px
}

.user-profile_thumb {
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 18px;
  -o-object-fit: cover;
  object-fit: cover
}

.like-with-answers_list {
  padding-bottom: 15px;
  border-bottom: 1px solid #ececeb
}

.profile-timeline {
  padding: 20px 0
}

.profile-detail_timeline-header {
  display: -webkit-box;
  display: flex;
  padding-left: 15px
}

.profile-detail_timeline-header_title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
  font-weight: bold;
  margin-right: 10px
}

.profile-detail_timeline-header_tag {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 10px
}

.profile-detail_timeline-header_tag>img {
  height: 13px;
  width: 13px;
  margin-right: 3px
}

.icon-favorite:before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  width: 17px;
  height: 17px;
  background-size: 100%;
  vertical-align: -2px
}

.icon-favorite.is-on:before {
  background-image: url(//cdn.with.is/assets/shared/icn_favorite_on-4b92650e23fe870c714fe46902c3d352f6af74bb94865bb9fdcf9c57849ce1db.png)
}

.icon-favorite.is-off:before {
  background-image: url(//cdn.with.is/assets/shared/icn_favorite_off-6964e6392b905285e1251359951cd401d02192bb537f2642cb0ea6219ef46eda.png)
}

.hiding-and-blocking-illusts>img {
  min-width: 130px;
  width: 45%
}

.hiding-and-blocking-illusts>img:last-child {
  float: right
}

.hiding-and-blocking-form>.half-column {
  padding: 10px 0;
  width: 47%
}

.balloon.with-hiding:after {
  top: -5px;
  bottom: initial;
  left: 25%;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg)
}

.balloon.with-blocking:after {
  top: -5px;
  bottom: initial;
  left: 75%;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg)
}

.user-detail-submit .list-view-button {
  z-index: 20;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 670px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  border-radius: 30px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25)
}

.user-detail-submit .list-view-button .icon-like-action {
  top: 20px
}

.user-detail-submit .list-view-button .icon-thank-action {
  top: 20px;
  vertical-align: -1.8px
}

.user-detail-submit .list-view-button .icon-free-like {
  top: 17px;
  width: 30px
}

.user-detail-submit .list-view-button .icon-talk {
  top: 12px;
  width: 35px
}

.user-detail-submit .list-view-button:active {
  -webkit-animation: tap-button 0.2s ease-in-out 0s;
  animation: tap-button 0.2s ease-in-out 0s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.user-detail-submit .button-sent-like {
  opacity: 0.9;
  box-shadow: none
}

.profile-thumb-small {
  width: 70px;
  height: 70px;
  border-radius: 35px
}

.link-area {
  display: block
}

.link-area:link, .link-area:active, .link-area:visited, .link-area:hover {
  text-decoration: none;
  color: inherit
}

.likes-count-question {
  font-size: 12px;
  font-weight: bold;
  text-decoration: none
}

.likes-count-question:link, .likes-count-question:visited, .likes-count-question:active {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.button-like-action {
  height: 47px;
  padding: 0px;
  font-family: "Hiragino Kaku Gothic Pro";
  font-size: 18px;
  font-weight: bold;
  border-radius: 24px
}

.icon-like-action {
  width: 25px
}

.icon-thank-action {
  width: 25px
}

.icon-like-dialog {
  top: 11px;
  width: 22px
}

.icon-free-like-dialog {
  top: 9px;
  width: 26px
}

.like-with-message {
  border-bottom: 1px solid #ececeb
}

.like-with-message_title {
  color: #606060;
  font-weight: bold
}

.like-with-message_content {
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px
}

.like-with-answers_question {
  margin: 0 0 10px;
  color: #2cc4cb;
  font-size: 13px
}

.like-with-answers_question:before {
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url(//cdn.with.is/assets/shared/atoms/icons/like_question-71a3c76497941d63230cb87b4dddb2d2ce6ee86dbb58c73565437e08aa123c01.svg)
}

.like-with-answers_title {
  color: #2CC4CB;
  font-weight: bold
}

.like-with-answers_answer {
  margin: 0;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px
}

.like-with-answers_answer+.like-with-answers_question {
  margin-top: 15px
}

.like-with-answers_item+.like-with-answers_item {
  margin-top: 15px
}

#likes-count-question {
  text-align: center
}

#likes-count-question .dialog-header {
  position: relative;
  margin-bottom: 10px
}

#likes-count-question .dialog-header .dialog-header-photo {
  width: 135px;
  height: 135px;
  margin: auto
}

#likes-count-question .dialog-header .dialog-header-balloon {
  position: absolute;
  top: 48px;
  left: 25px;
  width: 80px;
  height: 66px
}

#likes-count-question .dialog-header img {
  width: 100%
}

#likes-count-question .dialog-footer .dialog-footer-description {
  text-align: left;
  margin: 15px 0
}

#likes-count-question .dialog-footer span {
  font-weight: bold
}

.user-card-newface-flag {
  position: absolute;
  top: 0;
  left: 12px;
  width: 32px;
  height: 42px
}

.user-profile-sub_photos:before {
  content: '';
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: -18px;
  width: 13px;
  height: 13px;
  background-size: 100%;
  background-repeat: no-repeat
}

.user-profile-sub_photos {
  position: relative
}

.user-profile-sub_photos:before {
  background-image: url(//cdn.with.is/assets/shared/icons/camera_white_opaque-e883691eaf7c33b3865115b1b4e34b070fa77a858160b03e9802e59061870859.svg)
}

.user-card_transition-bg {
  display: none;
  position: absolute;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #efefef;
  z-index: -1
}

.touching-effect-user-card.is-touching {
  -webkit-animation: user-card-transition-content 0.2s ease-out forwards;
  animation: user-card-transition-content 0.2s ease-out forwards
}

.touching-effect-user-card.is-touching .user-card_transition-bg {
  display: block;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-animation: user-card-transition-bg 0.1s ease-out forwards;
  animation: user-card-transition-bg 0.1s ease-out forwards
}

.touching-effect-user-card-wide.is-touching {
  -webkit-animation: user-card-transition-content 0.2s ease-out forwards;
  animation: user-card-transition-content 0.2s ease-out forwards
}

.touching-effect-user-card-wide.is-touching .user-card_transition-bg {
  display: block;
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  -webkit-animation: user-card-wide-transition-bg 0.1s ease-out forwards;
  animation: user-card-wide-transition-bg 0.1s ease-out forwards
}

@-webkit-keyframes user-card-transition-content {
  100% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97)
  }
}

@keyframes user-card-transition-content {
  100% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97)
  }
}

@-webkit-keyframes user-card-transition-bg {
  100% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }
}

@keyframes user-card-transition-bg {
  100% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }
}

@-webkit-keyframes user-card-wide-transition-bg {
  100% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06)
  }
}

@keyframes user-card-wide-transition-bg {
  100% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06)
  }
}

.tab-area {
  background-color: #fff;
  width: 100%;
  height: 65px;
  line-height: 65px;
  display: -webkit-box;
  display: flex;
  text-align: center
}

.tab-area .tab-half {
  width: 50%;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.tab-area .tab-half.is-active {
  color: #606060;
  border-bottom: 2px solid #606060
}

.profile-s .media {
  background-color: #fff;
  margin: 0;
  padding: 10px 10px 12px;
  height: 110px
}

.profile-s .media+.media {
  border-top: 1px solid #ececeb
}

.profile-s .media_image>img {
  width: 90px;
  border-radius: 50%
}

.profile-s .media_body {
  height: 90px;
  position: relative
}

.profile-s .media_body .media_body-names-wrap {
  display: -webkit-box;
  display: flex;
  width: 80%
}

.profile-s .media_body .media_body-names-wrap .media_body-nickname {
  text-overflow: ellipsis;
  margin-right: 5px
}

.profile-s .media_body .media_body-names-wrap .media_body-age-address {
  white-space: nowrap
}

.profile-s .media_button {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 95%
}

.dialog#blocking>.button {
  display: block;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.6)
}

.user-timeline-posts {
  padding: 20px 0
}

.user-timeline-posts .timeline-posts {
  margin-bottom: 55px
}

.user-timeline-posts-like {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  max-width: 700px;
  padding: 0 var(--outer-space) 45px
}

.variety-lp_extra-nav {
  text-align: center;
  font-size: 14px
}

.variety-lp_footer_nav {
  padding: 0 20px 20px
}

ul.variety-lp_footer_nav_list li {
  position: relative;
  display: block;
  padding: 15px;
  color: #606060;
  font-size: 14px;
  background-color: #F2F2F2;
  border-radius: 10px;
  text-align: center;
}

ul.variety-lp_footer_nav_list li a:link, ul.variety-lp_footer_nav_list li a:visited, ul.variety-lp_footer_nav_list li a:active {
  color: #606060;
  text-decoration: none;
  text-align: center;
}

ul.variety-lp_footer_nav_list li:before {
  /* content: ''; */
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 14px;
  width: 8px;
  height: 14px;
  background-image: url(//cdn.with.is/assets/welcome/arrow_right-5cf061bb98024710be2b294e12739b4f78d95930968667a0a58c446b022da59e.png);
  background-repeat: no-repeat;
  background-size: 100%
}

ul.variety-lp_footer_nav_list li+li {
  margin-top: 10px
}

.variety-lp_footer_links {
  padding: 20px;
  background-color: #4c4c4c;
}

ul.variety-lp_footer_links_list li {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 30px
}

ul.variety-lp_footer_links_list li a:link, ul.variety-lp_footer_links_list li a:visited, ul.variety-lp_footer_links_list li a:active {
  color: #fff
}

.variety-lp_footer_copyright {
  padding: 30px 20px;
  color: #d1d1d1;
  text-align: center
}

.variety-lp_footer_copyright img {
  width: 58px
}

.video-chat-ad_container {
  position: relative;
  background: url(//cdn.with.is/assets/video_chats/ad/bg-571bf3fa647f56a104304c84c078afa819f40e4c2fc1ea41b79f7d5940fff063.png);
  background-size: 100%;
  background-position: center;
  height: 100vh
}

.video-chat-ad_contents {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px
}

.video-chat-ad_close-button-button-box {
  position: fixed;
  width: 100%
}

.video-chat-ad_close-button img {
  position: absolute;
  right: 15px;
  top: 15px;
  top: calc(15px + constant(safe-area-inset-top));
  top: calc(15px + env(safe-area-inset-top));
  width: 25px
}

.video-chat-ad_button {
  background-color: #fff
}

.video-chat-ad_button:link, .video-chat-ad_button:active, .video-chat-ad_button:hover, .video-chat-ad_button:visited {
  color: #978def
}

.video-chat-ad_next-button {
  margin: 20px 15px 0;
  height: 55px;
  line-height: 55px
}

.video-chat-lp_merits {
  width: 100%;
  padding: 10px 0
}

.video-chat-lp_merit {
  width: 100%;
  padding: 20px 50px
}

.video-chat-lp_merit-line {
  height: 2px;
  background-color: #ededed;
  border: none;
  width: 90%
}

.video-chat-lp_steps {
  background-color: #A49AfA;
  padding: 0 15px;
  width: 100%
}

.video-chat-lp_how-to-use {
  background-image: url(//cdn.with.is/assets/video_chats/bg-bb484e06a69eb946d3fdd717b12a4e5d0daa29da0e2d3e693cc9853fdf41f7fb.png);
  background-color: #a49afa;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 50px 50px 0 50px
}

.video-chat-lp_how-to-use_detail {
  text-align: center;
  font-size: 16px;
  padding: 30px 0 10px 0
}

.video-chat-lp_how-to-use_link:link, .video-chat-lp_how-to-use_link:visited, .video-chat-lp_how-to-use_link:hover, .video-chat-lp_how-to-use_link:active {
  color: #fff
}

.video-chat-lp_step {
  padding: 30px 0;
  width: 100%
}

.video-chat-lp_camera-on {
  padding: 15px 15px;
  width: 100%
}

.video-chat-lp_point {
  margin-top: 15px;
  padding: 0 60px;
  width: 100%
}

.video-chat-lp_points {
  padding: 15px 15px;
  width: 100%
}

.video-chat-lp_kashikois {
  padding: 15px 0
}

.video-chat-lp_kashikoi {
  padding: 5px 30px;
  width: 100%
}

.video-chat-lp_manual {
  width: 100%;
  padding: 10px 15px
}

.video-chat-lp_manual-link {
  position: relative;
  display: block;
  opacity: 1 !important
}

.video-chat-lp_manual-link:hover:after, .video-chat-lp_manual-link:active:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20px
}

.video-chat-lp_manual-image {
  width: 100%;
  border-radius: 20px
}

.video-chat-lp_line {
  height: 2px;
  background-color: #ededed;
  border: none;
  width: 100%
}

.video-chat-lp_notes {
  padding: 15px 15px
}

.video-chat-lp_note {
  line-height: 170%
}

.video-chat-lp_list {
  list-style: disc;
  margin-left: 15px
}

.login-header {
  width: 100%;
  height: 50px;
  background: -owg-linear-gradient(to right, #606060, #ffb1b1);
  background: -webkit-linear-gradient(to right, #606060, #ffb1b1);
  background: -webkit-linear-gradient(left, #606060, #ffb1b1);
  background: linear-gradient(to right, #606060, #ffb1b1)
}

.login-header_logo {
  margin: 11px 10px;
  width: 65px;
  height: 26px
}

.login-header_copy {
  margin: 24px 0 12px;
  width: 96px;
  height: 11px
}

.login-header_submit {
  float: right;
  margin: 10px 10px;
  width: 98px;
  height: 30px;
  padding: 5px 10px;
  color: #ff9c9a;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  border-radius: 15px
}

.login-header_submit:link, .login-header_submit:hover, .login-header_submit:visited {
  color: #ff9c9a;
  text-decoration: none
}

.login-header.is-navy {
  background: #004384
}

.login-header.is-navy>.login-header_submit {
  color: #004384
}

.login-header.is-navy>.login-header_submit:link, .login-header.is-navy>.login-header_submit:hover, .login-header.is-navy>.login-header_submit:visited {
  color: #004384
}

.today-matching {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background-color: #606060
}

.today-matching span {
  font-weight: bold
}

.today-matching.is-simple {
  background-color: #004384
}

.login-help {
  margin: 20px auto;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
  letter-spacing: -0.5px;
  text-align: center;
  text-decoration: underline
}

.login-help img {
  margin-left: 5px;
  vertical-align: text-top
}

.fb-login-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px
}

.fb-login-button:hover {
  opacity: 0.9
}

.sign-in-button {
  line-height: 46px;
  background-color: #fff;
  color: #606060;
  border: 2px solid #606060;
}

.sign-in-button:link, .sign-in-button:visited, .sign-in-button:hover, .sign-in-button:active {
  color: #606060
}

.fb-button {
  position: relative;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  color: #fff;
  background-color: #1877F2
}

.fb-button:link, .fb-button:visited, .fb-button:hover, .fb-button:active {
  color: #fff
}

.fb-button:before {
  display: block;
  position: absolute;
  content: '';
  top: 11px;
  left: 20px;
  width: 23px;
  height: 23px;
  background-image: url(//cdn.with.is/assets/welcome/icon_facebook-e254ffc1a8137cb9b3a72c741d2acdbb12b52f68d95d8db4eceddc858e422cc6.svg);
  background-repeat: no-repeat
}

.sms-button {
  position: relative;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  color: #fff;
  background-color: #606060
}

.sms-button:link, .sms-button:visited, .sms-button:hover, .sms-button:active {
  color: #fff
}

.sms-button:before {
  display: block;
  position: absolute;
  content: '';
  top: 11px;
  left: 23px;
  width: 17px;
  height: 25px;
  background-image: url(//cdn.with.is/assets/welcome/icon_phone-2a7764f0111f5598edda6c440d1457c25455a0885ee530c6030f1f732c207cd5.svg);
  background-repeat: no-repeat
}

.apple-button {
  position: relative;
  height: 45px;
  line-height: 40px;
  font-size: 15px;
  background-color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.1)
}

.apple-button:before {
  display: block;
  position: absolute;
  content: '';
  top: 11px;
  left: 23px;
  width: 15px;
  height: 19px;
  background-image: url(//cdn.with.is/assets/welcome/icon_apple-b74a3c304052bc79cab56ce386b313ef8f8518bf6871a75e8dabc3aa316041f7.svg);
  background-repeat: no-repeat
}

.line-button {
  position: relative;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  background-color: #00B700
}

.line-button:link, .line-button:visited, .line-button:hover, .line-button:active {
  color: #fff
}

.line-button:before {
  display: block;
  position: absolute;
  content: '';
  top: 11px;
  left: 20px;
  width: 24px;
  height: 24px;
  background-image: url(//cdn.with.is/assets/welcome/icon_line-5fdfe3597214d442660c0054896e6d912208c816605ce1660ff7df34e2b3070f.svg);
  background-repeat: no-repeat
}

.welcome-dialog {
  padding: 30px 15px 15px
}

.welcome-dialog_title {
  text-align: center;
  margin-bottom: 30px
}

.welcome-dialog_title>img {
  width: 120px
}

.welcome-dialog_attention {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  padding: 5px 0 0 5px
}

.button-no-fb {
  font-weight: 300;
  color: #FFFFFF;
  background: #9B9B9B;
  font-size: 15px
}

.button-no-fb:defined {
  color: #FFFFFF
}

.welcome-lp_main {
  position: relative
}

.welcome-lp_main.on-welcome-top {
  padding-bottom: 18vh
}

.welcome-lp_main-logo {
  position: absolute;
  top: 2%;
  left: 5%;
  width: 25%;
  text-align: center
}

.welcome-lp_main-logo img {
  width: 100%
}

.welcome-lp_main_login {
  padding: 0 20px 40px
}

.welcome-lp_main_login.on-welcome-top {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-bottom: 11%;
  width: 100%;
  text-align: center
}

.welcome-lp_attention {
  margin: 5px 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.6);
  font-size: 10px;
  text-align: center
}

.welcome-lp_movie {
  width: 100%;
  padding-bottom: 30px;
  background: #FF999E -webkit-linear-gradient(315deg, rgba(255, 229, 232, 0.5), rgba(255, 229, 232, 0));
  background: #FF999E linear-gradient(135deg, rgba(255, 229, 232, 0.5), rgba(255, 229, 232, 0))
}

.welcome-lp_movie_title {
  padding: 3.5vh;
  color: #fff;
  font-size: 4vh;
  font-weight: bold;
  text-align: center
}

.welcome-lp_movie_frame {
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  color: #fff;
  font-size: 15px;
  font-weight: bold
}

.welcome-lp_with-report_title {
  padding: 3vh;
  width: 100%;
  color: #606060;
  font-size: 4vh;
  font-weight: bold;
  text-align: center
}

.welcome-lp_with-report_desc {
  margin-bottom: 3vh;
  padding: 0 20px;
  width: 100%;
  color: rgba(0, 0, 0, 0.87);
  font-size: 2.5vh
}

.welcome-lp_with-report_flow {
  padding: 0 20px 40px
}

.welcome-lp_with-feature {
  padding: 0 10px 20px;
  background: #99c7ff -webkit-linear-gradient(315deg, rgb(229 243 255 / 50%), rgba(255, 229, 232, 0));
  background: #606060 linear-gradient(135deg, rgb(255 255 255 / 50%), rgb(255 255 255 / 0%));
}

.welcome-lp_with-feature_title {
  padding: 3.5vh;
  color: #fff;
  font-size: 4vh;
  font-weight: bold;
  text-align: center
}

.welcome-lp_with-feature_frame {
  position: relative;
  padding-bottom: 20px;
  background-color: #fff;
  border-radius: 15px;
  text-align: center
}

.welcome-lp_with-feature_frame+.welcome-lp_with-feature_frame {
  margin-top: 20px
}

.welcome-lp_with-feature_bg {
  position: absolute;
  top: 0;
  right: 0
}

.welcome-lp_with-feature_num {
  margin: 3.5vh auto;
  width: 20%;
  max-width: 80px
}

.welcome-lp_with-feature_heading {
  margin: 0 auto 2vh;
  padding: 0 20px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 3vh;
  font-weight: bold
}

.welcome-lp_with-feature_desc {
  margin: 0 auto 3vh;
  padding: 0 20px;
  max-width: 420px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 15px;
  font-weight: bold;
  text-align: left
}

.welcome-lp_with-feature_link {
  margin: 3vh auto 2vh;
  padding: 0 20px;
  width: 100%;
  max-width: 400px
}

.welcome-lp_security {
  width: 100%
}

.welcome-lp_security_title {
  padding: 3vh;
  width: 100%;
  color: #606060;
  font-size: 4.5vh;
  font-weight: bold;
  text-align: center
}

.welcome-lp_security_list {
  margin: 0 auto 30px;
  padding: 0 20px;
  max-width: 370px
}

.welcome-lp_security_item {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  overflow: hidden
}

.welcome-lp_security_item+.welcome-lp_security_item {
  margin-top: 20px
}

.welcome-lp_security_icon {
  display: block;
  float: left;
  margin-right: 10px;
  width: 15%;
  max-width: 40px
}

.welcome-lp_security_desc {
  color: rgba(0, 0, 0, 0.7);
  font-size: 2vh;
  font-weight: bold
}

.welcome-lp_security_bg {
  width: 100%
}

.welcome-lp_with-comics {
  width: 100%;
  background: #FF999E -webkit-linear-gradient(315deg, rgba(255, 229, 232, 0.5), rgba(255, 229, 232, 0));
  background: #FF999E linear-gradient(135deg, rgba(255, 229, 232, 0.5), rgba(255, 229, 232, 0))
}

.welcome-lp_with-comics_title {
  padding: 3.5vh;
  color: #fff;
  font-size: 4vh;
  font-weight: bold;
  text-align: center
}

.welcome-lp_with-comics_desc {
  margin-bottom: 3vh;
  padding: 0 20px;
  width: 100%;
  color: rgba(0, 0, 0, 0.87);
  font-size: 2vh;
  text-align: center
}

.welcome-lp_with-comics_frame {
  padding: 0 20px;
  overflow: hidden;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), white 90%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 90%)
}

.welcome-lp_with-comics_img01, .welcome-lp_with-comics_img02, .welcome-lp_with-comics_img03 {
  width: 190px;
  height: 140px;
  margin: 20px auto 0;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 20px
}

.welcome-lp_with-comics_img01 {
  background-image: url(//cdn.with.is/assets/welcome/with_comics/01-6cb4af74d2e60fa41e76bf754e02b196bb72ae12974d7856ce03bfe5c7e456af.png)
}

.welcome-lp_with-comics_img02 {
  background-image: url(//cdn.with.is/assets/welcome/with_comics/02-f944dc18e5fca83c2f33f9cd94b60711346a241de95aea7a98486c7718e7b228.png)
}

.welcome-lp_with-comics_img03 {
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.9) 80%), url(//cdn.with.is/assets/welcome/with_comics/03-af1583c5e633d320b97a710999b2c5061af3529c543cbfadefb06d62b32c1dbd.png);
  background-image: linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.9) 80%), url(//cdn.with.is/assets/welcome/with_comics/03-af1583c5e633d320b97a710999b2c5061af3529c543cbfadefb06d62b32c1dbd.png)
}

.welcome-lp_with-comics_flow, .welcome-lp_column_flow {
  width: 100%;
  padding: 10px 20px 20px;
  background-color: #fff
}

.welcome-lp_with-report_button, .welcome-lp_with-comics_button, .welcome-lp_column_button {
  display: block;
  margin: 0 auto;
  width: 90%;
  max-width: 400px;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #FF6A70;
  border-radius: 23px;
  box-shadow: 0 10px 15px rgba(254, 105, 112, 0.2)
}

.welcome-lp_with-report_button:link, .welcome-lp_with-report_button:visited, .welcome-lp_with-report_button:hover, .welcome-lp_with-report_button:active, .welcome-lp_with-comics_button:link, .welcome-lp_with-comics_button:visited, .welcome-lp_with-comics_button:hover, .welcome-lp_with-comics_button:active, .welcome-lp_column_button:link, .welcome-lp_column_button:visited, .welcome-lp_column_button:hover, .welcome-lp_column_button:active {
  color: #fff;
  text-decoration: none
}

.welcome-lp_media {
  width: 100%;
  background-color: #fff
}

.welcome-lp_media_title {
  padding: 3vh;
  width: 100%;
  color: #606060;
  font-size: 3.5vh;
  font-weight: bold;
  text-align: center
}

.welcome-lp_media_img {
  display: block;
  margin: 0 auto 3vh;
  width: 70%;
  max-width: 280px
}

ul.welcome-lp_media_list {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 370px
}

ul.welcome-lp_media_list li {
  position: relative;
  padding: 5px 5px 5px 40px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px
}

ul.welcome-lp_media_list li:before {
  content: '';
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 15px;
  height: 15px;
  background-image: url(//cdn.with.is/assets/welcome/icn_heart-0d036056102d92f5432afd3f40ebf5fd1cdfefc2439f0cc57a2ad8c7f4d1c40f.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.welcome-lp_media_end {
  margin: 10px 0 30px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  text-align: center
}

.welcome-lp_column_title, .welcome-lp_login_title {
  padding: 3vh;
  width: 100%;
  color: #000000;
  font-size: 4vh;
  font-weight: bold;
  text-align: center
}

.welcome-lp_column_desc {
  margin-bottom: 3vh;
  padding: 0 20px;
  width: 100%;
  color: rgba(0, 0, 0, 0.87);
  font-size: 2vh
}

.welcome-lp_column_list {
  padding: 0 20px 20px
}

.welcome-lp_column_item {
  clear: both;
  overflow: hidden;
  position: relative
}

.welcome-lp_column_item+.welcome-lp_column_item {
  margin-top: 20px
}

.welcome-lp_column_thumb {
  float: left;
  display: block;
  margin-right: 15px;
  width: 100px
}

.welcome-lp_column_heading {
  color: rgba(0, 0, 0, 0.75);
  font-size: 1.8vh;
  font-weight: bold
}

.welcome-lp_column_tag {
  position: absolute;
  bottom: 0;
  left: 115px;
  color: #FF6873;
  font-size: 1.5vh
}

.welcome-lp_column_url:link, .welcome-lp_column_url:visited, .welcome-lp_column_url:hover, .welcome-lp_column_url:active {
  text-decoration: none
}

.welcome-lp_footer_login {
  position: fixed;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 700px;
  height: 80px;
  z-index: 5;
  -webkit-transition: bottom 1s 0s ease;
  transition: bottom 1s 0s ease
}

.welcome-lp_footer_login.is-hidden {
  bottom: -90px
}

.welcome-lp_footer_login_button {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  line-height: 20px;
  font-size: 15px;
  font-weight: bold;
  text-align: center
}

.welcome-lp_footer_login_button:link, .welcome-lp_footer_login_button:visited, .welcome-lp_footer_login_button:hover, .welcome-lp_footer_login_button:active {
  color: #fff;
  text-decoration: none
}

.welcome-lp_footer_login_button.is-fb {
  color: #fff;
  background-color: rgba(60, 90, 153, 0.9)
}

.welcome-lp_footer_login_button.is-sms {
  color: #fff;
  background-color: rgba(254, 105, 112, 0.9);
  cursor: pointer
}

.welcome-lp_footer_login_button.is-sms:hover {
  opacity: 0.8
}

.with-comics_heading {
  margin-bottom: 15px;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #FF999E;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  padding: 0 0 18px 0
}

.with-comics_description {
  color: rgba(0, 0, 0, 0.87)
}

.with-comics_characters {
  display: -webkit-box;
  display: flex;
  padding: 10px 0 0 0;
  flex-flow: wrap
}

.with-comics_characters .with-comics_character {
  margin-right: auto;
  flex-basis: 33.3%
}

.with-comics_characters .with-comics_character .with-comics_character_image {
  max-width: 92px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle
}

.with-comics_characters .with-comics_character .with-comics_character_body {
  vertical-align: middle;
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.87);
  padding: 10px 4px 0 4px
}

.with-comics_characters .with-comics_character .with-comics_character_body .character-name {
  font-size: 15px;
  font-weight: bold
}

@media (max-width: 480px) {
  .with-comics_characters .with-comics_character {
    width: 50%;
    flex-basis: 50%
  }

  .with-comics_characters .with-comics_character_even {
    padding-top: 20px
  }
}

.with-comics_characters+.with-comics_characters {
  margin-top: 20px
}

.with-comics_containes {
  display: table;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.with-comics_containes>a {
  display: block;
  text-decoration: none
}

.with-comics_containes:last-child {
  border-bottom: none
}

.with-comics_containes_body {
  display: table-cell;
  vertical-align: middle;
  color: #000;
  font-size: 13px
}

.with-comics_containes_image {
  display: table-cell;
  padding-left: 15px;
  width: 50%
}

.with-comics_downloads {
  display: table
}

.with-comics_downloads_list {
  display: table-cell;
  width: 110px
}

.with-comics_downloads_illust {
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px
}

#with-comics_web-link {
  font-size: 12px;
  line-height: 42px;
  border-radius: 5px
}

.with-comics_title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: rgba(0, 0, 0, 0.87)
}

.with-comics_padding-s {
  padding: 20px 20px 10px
}

.with-comics-note {
  padding: 4px 14px 10px 14px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.87)
}

.with-doctor-sub-page, .with-doctor {
  padding-top: 60px
}

.with-doctor-sub-page .title-area, .with-doctor .title-area {
  position: fixed;
  display: -webkit-box;
  display: flex;
  z-index: 10;
  top: 0;
  background: #FFF;
  width: 100%;
  max-width: 480px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
  font-size: 18px;
  left: 0;
  right: 0;
  margin: auto
}

.with-doctor_text-ok {
  color: #00C9B5
}

.with-doctor_text-ng {
  color: #606060
}

.with-doctor-color-ok .with-doctor-color {
  color: #00C9B5
}

.with-doctor-color-ng .with-doctor-color {
  color: #606060
}

.with-doctor_head {
  position: relative;
  padding-bottom: 30px
}

.with-doctor_arc-container {
  position: relative;
  margin: auto;
  max-width: 480px
}

.with-doctor_head_bg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%
}

.with-doctor_head_bg_gradation {
  position: absolute;
  width: 100%;
  bottom: 0
}

.with-doctor_head_bg_animation {
  position: absolute;
  width: 100%;
  bottom: 50px
}

.with-doctor_head_title {
  padding: 20px 0
}

#with-doctor_head_arc {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 300px;
  height: 300px
}

.with-doctor_head_up-down-icon {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 15px;
  right: -20px;
  opacity: 0;
  -webkit-transform: translateY(5px);
  transform: translateY(5px)
}

.with-doctor_head_up-down-icon.is-animate {
  -webkit-animation: bounce-with-doctor-head-up-down-icon 0.8s forwards, fade-in 0.2s forwards;
  animation: bounce-with-doctor-head-up-down-icon 0.8s forwards, fade-in 0.2s forwards
}

@-webkit-keyframes bounce-with-doctor-head-up-down-icon {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }

  33% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  66% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes bounce-with-doctor-head-up-down-icon {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }

  33% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  66% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.with-doctor_head_score {
  position: absolute;
  z-index: 3;
  top: 90px;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  text-align: center
}

.with-doctor-head-score-text-box {
  position: relative;
  display: inline-block
}

#with-doctor-head-score-text {
  font-size: 90px;
  line-height: 1;
  font-weight: 300
}

#with-doctor-head-score-text.is-ok.is-up.is-animate {
  -webkit-animation: with-doctor-head-score-text 0.4s ease-in-out;
  animation: with-doctor-head-score-text 0.4s ease-in-out
}

@-webkit-keyframes with-doctor-head-score-text {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  30% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes with-doctor-head-score-text {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  30% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.with-doctor_head.is-ok #with-doctor-head-score-text {
  color: #00C9B5;
  background: -webkit-linear-gradient(270deg, #00C9B5, #3BE4A1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.with-doctor_head.is-ng #with-doctor-head-score-text {
  color: #606060;
  background: -webkit-linear-gradient(270deg, #606060, #FE7C5F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.with-doctor_head_comment {
  font-size: 15px;
  font-weight: bold;
  text-align: center
}

.with-doctor_head_arw {
  position: absolute;
  top: 35px;
  left: 112px
}

.with-doctor_hint {
  max-width: 480px;
  padding: 0 15px 25px;
  margin: auto
}

.with-doctor_hint_head {
  padding-bottom: 10px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.with-doctor_hint_detail {
  border-radius: 10px;
  padding: 10px;
  color: rgba(0, 0, 0, 0.87)
}

.with-doctor.with-doctor-color-ng .with-doctor_hint_detail {
  background: #FFEDED
}

.with-doctor.with-doctor-color-ok .with-doctor_hint_detail {
  background: #EAFAF9
}

.with-doctor_hint_detail_title {
  font-weight: bold;
  padding-bottom: 10px
}

.with-doctor_contents {
  max-width: 480px;
  margin: auto
}

.with-doctor_details .section-border:last-child {
  display: none
}

.with-doctor_detail {
  padding: 40px 15px 40px
}

.with-doctor_detail:nth-child(1) {
  padding-top: 0
}

.with-doctor_detail_top {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.with-doctor_detail_icon {
  width: 35px;
  margin-right: 10px
}

.with-doctor_detail_rank {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto
}

.with-doctor_detail_rank-tag {
  padding-right: 12px;
  width: 70px;
  visibility: hidden
}

.with-doctor_detail_rank-tag.is-shown {
  -webkit-animation: with-doctor_tag-animation 0.5s 0.3s forwards;
  animation: with-doctor_tag-animation 0.5s 0.3s forwards
}

.with-doctor_detail_rank-icon {
  width: 42px
}

.with-doctor_detail_score {
  padding: 10px 0 20px;
  width: 100%
}

.with-doctor_detail_guide {
  margin-top: -6px
}

.with-doctor_detail_button-ng {
  position: relative;
  height: 55px;
  margin: auto;
  border-radius: 28px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  background: #FFEDED;
  border: 2px solid #FF4850;
  color: #FF4850;
  opacity: 1 !important;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column
}

.with-doctor_detail_button-ng:link, .with-doctor_detail_button-ng:visited, .with-doctor_detail_button-ng:hover, .with-doctor_detail_button-ng:active {
  color: #FF4850;
  text-decoration: none
}

.with-doctor_detail_button-ng:hover, .with-doctor_detail_button-ng:active {
  background: #FFDCDC
}

.with-doctor_detail_button-ng_arrow {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto
}

.with-doctor_detail_ok-footer {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: baseline;
  align-items: baseline;
  font-size: 13px;
  font-weight: bold
}

.with-doctor_detail_ok-footer_link {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.4)
}

.with-doctor_detail_ok-footer_link:link, .with-doctor_detail_ok-footer_link:visited, .with-doctor_detail_ok-footer_link:hover, .with-doctor_detail_ok-footer_link:active {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.with-doctor_detail-progress {
  margin: 4px auto 0;
  height: 13px;
  background-color: #F5F5F5;
  border-radius: 7px
}

.with-doctor_detail-progress .progress-bar_animation {
  height: 13px;
  border-radius: 7px;
  background-image: -webkit-linear-gradient(left, #00C9B5 0%, #3BE4A1 100%);
  background-image: linear-gradient(90deg, #00C9B5 0%, #3BE4A1 100%);
  width: 0
}

.with-doctor_detail-progress .progress-bar_animation.is-shown {
  width: 100%;
  -webkit-animation: progress-bar 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s forwards;
  animation: progress-bar 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s forwards
}

.with-doctor_detail-progress-rank-a-box {
  width: 94%
}

.with-doctor_detail-progress-rate {
  height: 13px;
  border-radius: 7px
}

.with-doctor_attention-animation {
  -webkit-animation: with-doctor_attention-animation 2s 0s infinite;
  animation: with-doctor_attention-animation 2s 0s infinite
}

@-webkit-keyframes with-doctor_attention-animation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  12.5% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  20% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes with-doctor_attention-animation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  12.5% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  20% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes with-doctor_tag-animation {
  0% {
    opacity: 0
  }

  40% {
    opacity: 1
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  80% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  80% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    visibility: visible;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }
}

@keyframes with-doctor_tag-animation {
  0% {
    opacity: 0
  }

  40% {
    opacity: 1
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  80% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  80% {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    visibility: visible;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }
}

.with-doctor-sub-page_head_comment {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  height: 45px;
  line-height: 39px;
  color: #FFFFFF;
  margin-bottom: 5px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .with-doctor-sub-page_head_comment {
    font-size: 11px
  }
}

.with-doctor-sub-page.is-ok .with-doctor-sub-page_head_comment {
  background: url(//cdn.with.is/assets/with_doctor/sub_page_balloon_ok-cf3df0570d0a4a091007252479ecfdca3e872ef3b8d4927e1cd81c12ec70fa53.svg) no-repeat center/contain
}

.with-doctor-sub-page.is-ng .with-doctor-sub-page_head_comment {
  background: url(//cdn.with.is/assets/with_doctor/sub_page_balloon_ng-096ded4916554fea67707b13acbfa3998423b52e4df603f7f7ebafc85f6bb569.svg) no-repeat center/contain
}

.with-doctor_score-text-gradation.is-ok {
  color: #00C9B5;
  background: -webkit-linear-gradient(270deg, #00C9B5, #3BE4A1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.with-doctor_score-text-gradation.is-ng {
  color: #606060;
  background: -webkit-linear-gradient(270deg, #606060, #FE7C5F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.with-doctor_illust-frame {
  padding: 15px;
  border-radius: 15px;
  background: #F5F5F5
}

.with-doctor_illust-frame_title {
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: bold;
  color: #00C9B5
}

.with-doctor-sub-page {
  max-width: 480px;
  margin: auto
}

.with-doctor-sub-page_section {
  padding: 20px 15px 40px
}

.with-doctor-sub-page_section_title {
  font-size: 20px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87)
}

.with-doctor-sub-page_head {
  position: relative;
  padding: 15px
}

.with-doctor-sub-page.is-ok .with-doctor-sub-page_head {
  background: -webkit-linear-gradient(315deg, #3BE4A1 0%, #00C9B5 100%);
  background: linear-gradient(135deg, #3BE4A1 0%, #00C9B5 100%)
}

.with-doctor-sub-page.is-ng .with-doctor-sub-page_head {
  background: -webkit-linear-gradient(315deg, #FF7279 0%, #FF4850 100%);
  background: linear-gradient(135deg, #FF7279 0%, #FF4850 100%)
}

.with-doctor-sub-page_head_status {
  display: -webkit-inline-box;
  display: inline-flex;
  height: 35px;
  background: #FFF;
  border-radius: 18px;
  padding: 5px 10px;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold
}

.with-doctor-sub-page.is-ok .with-doctor-sub-page_head_status {
  color: #00C9B5
}

.with-doctor-sub-page.is-ng .with-doctor-sub-page_head_status {
  color: #FF4850
}

.with-doctor-sub-page_head_status-icon {
  width: 22px;
  margin-right: 5px
}

.with-doctor-sub-page.is-ok .with-doctor-sub-page_head_status-icon {
  margin-top: -4px
}

.with-doctor-sub-page_head_title {
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
  color: #FFF;
  padding-bottom: 25px
}

.with-doctor-sub-page_head_category-icon {
  position: absolute;
  top: 15px;
  right: 15px
}

.with-doctor-sub-page_score-frame {
  padding: 0 15px;
  background: #FFF;
  border-radius: 10px
}

.with-doctor-sub-page_score-frame.has-title {
  padding-top: 15px
}

.with-doctor-sub-page_score_title {
  margin-bottom: -5px
}

.with-doctor-sub-page_score {
  display: -webkit-box;
  display: flex;
  position: relative;
  font-size: 55px
}

.with-doctor-sub-page_score.is-introduction {
  font-size: 50px
}

.with-doctor-sub-page_score-frame+.with-doctor-sub-page_score-frame {
  margin-top: 10px
}

.with-doctor-sub-page_check-point {
  color: rgba(0, 0, 0, 0.87);
  padding-bottom: 10px
}

.with-doctor-sub-page_check-point li {
  padding-bottom: 10px;
  padding-left: 2em;
  text-indent: -2em
}

.with-doctor-sub-page_check-point li:before {
  content: '';
  width: 16px;
  height: 16px;
  background: url(//cdn.with.is/assets/with_doctor/sub_page_check_icon-8925ff099c17e34631f741da8d40451975a07d613c89273a78698c8273f7bbb9.svg) no-repeat center;
  padding-left: 25px;
  display: inline-block;
  vertical-align: -3px
}

.with-doctor_fix-now_text {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px
}

.with-doctor-sub-page.is-ok .with-doctor_fix-now_text {
  color: rgba(0, 0, 0, 0.6)
}

.with-doctor-sub-page.is-ng .with-doctor_fix-now_text {
  color: #606060
}

.with-doctor_fix-now_remaining-count {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px
}

.with-doctor-sub-page.is-ok .with-doctor_fix-now_remaining-count {
  border: 1px solid #00C9B5;
  color: #00C9B5
}

.with-doctor-sub-page.is-ng .with-doctor_fix-now_remaining-count {
  border: 1px solid #606060;
  color: #606060
}

.with-doctor-sub-page_action-button-box {
  padding-top: 50px
}

.with-doctor_main-photo_thumb {
  border-radius: 10px
}

.with-doctor_main-photo_detail-score_analyzing-bg {
  position: absolute;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  background: rgba(86, 86, 86, 0.8);
  border-radius: 15px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  top: -10px;
  left: -10px;
  padding: 10px
}

.with-doctor_main-photo_detail-score-frame {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.with-doctor_main-photo_detail-score-frame_photo-column {
  width: 30%;
  margin-right: 20px;
  position: relative;
  z-index: 1
}

.with-doctor_main-photo_detail-score-frame_score-column {
  -webkit-box-flex: 1;
  flex: 1;
  position: relative
}

.with-doctor_main-photo_detail-score.is-ok {
  color: #00C9B5
}

.with-doctor_main-photo_detail-score.is-ng {
  color: #8C8C8C
}

.with-doctor_main-photo_detail-score+.with-doctor_main-photo_detail-score {
  margin-top: 15px
}

.with-doctor_main-photo_detail-score_text {
  position: relative;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold
}

.with-doctor_main-photo_detail-score_bar-rate {
  height: 8px;
  border-radius: 4px
}

.with-doctor_main-photo_detail-score.is-ng .with-doctor_main-photo_detail-score_bar-rate {
  background: #8C8C8C
}

.with-doctor_main-photo_detail-score.is-ok .with-doctor_main-photo_detail-score_bar-rate {
  background: -webkit-linear-gradient(right, rgba(145, 249, 113, 0.3) 0%, rgba(145, 249, 113, 0) 100%) #00c9b5;
  background: linear-gradient(-90deg, rgba(145, 249, 113, 0.3) 0%, rgba(145, 249, 113, 0) 100%) #00c9b5
}

.with-doctor_main-photo_detail-score_bar-bg {
  height: 8px;
  background: whitesmoke;
  border-radius: 4px
}

.with-doctor_main-photo_detail-score-value {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 22px;
  line-height: 1
}

a.with-doctor_main-photo-reload-link {
  -webkit-text-decoration: underline rgba(255, 255, 255, 0.87);
  text-decoration: underline rgba(255, 255, 255, 0.87)
}

a.with-doctor_main-photo-reload-link:link, a.with-doctor_main-photo-reload-link:visited, a.with-doctor_main-photo-reload-link:hover, a.with-doctor_main-photo-reload-link:active {
  color: rgba(255, 255, 255, 0.87)
}

.with-doctor_face-size-guide {
  font-size: 15px;
  max-width: 345px;
  margin: 0 auto 20px
}

.with-doctor_face-size-guide_mine {
  position: relative;
  margin: 0 auto 5px;
  width: 65.33vw;
  max-width: 245px
}

.with-doctor_face-size-guide_error {
  background: rgba(86, 86, 86, 0.7);
  color: rgba(255, 255, 255, 0.87);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.with-doctor_face-size-guide_mark {
  position: absolute;
  top: 10%;
  width: 24vw;
  max-width: 90px
}

.with-doctor_main-photo-looks {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  text-align: center
}

.with-doctor_main-photo-looks_item {
  width: 50%;
  padding: 10px 7px;
  text-align: left
}

.with-doctor_main-photo-looks_item img {
  border-radius: 10px;
  margin-bottom: 7px
}

.with-doctor_main-photo-looks_tag {
  color: #FFF;
  font-weight: bold;
  background: #00C9B5;
  border-radius: 10px;
  text-align: center
}

.with-doctor-sub-page_sub-photo_samples {
  background: #F5F5F5;
  border-radius: 15px;
  padding: 15px;
  color: rgba(0, 0, 0, 0.87)
}

.with-doctor-sub-page_sub-photo_sample {
  display: inline-block;
  font-weight: bold;
  font-size: 13px;
  width: 50%;
  text-align: center;
  padding-bottom: 20px
}

.with-doctor-sub-page_sub-photo_sample-thumb {
  display: block;
  width: 90%;
  margin: 0 auto 10px
}

.with-doctor-sub-page .profile-sub-photo-list {
  padding-left: 20px
}

.with-doctor-sub-page .sub-photo_item-m {
  margin-right: 15px
}

.with-doctor_my-prefs {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
  max-width: 381px;
  margin: auto;
  padding-bottom: 20px
}

.with-doctor_my-pref {
  position: relative;
  box-sizing: content-box;
  width: 30vw;
  max-width: 124px;
  height: 30vw;
  max-height: 124px;
  overflow: hidden;
  background-size: contain;
  border-right: 3px solid #FFF;
  border-bottom: 3px solid #FFF
}

.with-doctor_my-pref:link, .with-doctor_my-pref:active, .with-doctor_my-pref:visited, .with-doctor_my-pref:hover {
  color: #FFF;
  text-decoration: none
}

.with-doctor_my-pref:nth-child(1) {
  border-top-left-radius: 15px
}

.with-doctor_my-pref:nth-child(3) {
  border-top-right-radius: 15px
}

.with-doctor_my-pref:nth-child(7) {
  border-bottom-left-radius: 15px
}

.with-doctor_my-pref:nth-child(9) {
  border-bottom-right-radius: 15px
}

.with-doctor_my-pref_cover {
  position: absolute;
  width: 100%;
  height: 100%
}

.with-doctor_my-pref_title {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  height: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #FFF;
  word-break: break-all;
  padding: 0 4px
}

.with-doctor_my-pref_campaign-name {
  font-size: 10px;
  font-weight: normal;
  padding-bottom: 5px
}

.with-doctor_my-pref_thumb {
  position: absolute;
  width: 100%
}

.with-doctor_my-pref_empty {
  width: 335px;
  height: 335px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center
}

.with-doctor_recommend-user-card {
  padding-bottom: 15px;
  width: 50%;
  will-change: transform
}

.with-doctor_recommend-user-card.is-open {
  -webkit-animation: with-doctor_recommend-user_shuffle_open 0.3s forwards;
  animation: with-doctor_recommend-user_shuffle_open 0.3s forwards
}

.with-doctor_recommend-user-card.is-close {
  -webkit-animation: with-doctor_recommend-user_shuffle_close 0.3s forwards;
  animation: with-doctor_recommend-user_shuffle_close 0.3s forwards
}

.with-doctor_recommend-user-card .link-area:link, .with-doctor_recommend-user-card .link-area:visited, .with-doctor_recommend-user-card .link-area:hover, .with-doctor_recommend-user-card .link-area:active {
  text-decoration: none
}

.with-doctor_recommend-user-set {
  display: none;
  flex-wrap: wrap;
  padding: 0 10px
}

.with-doctor_recommend-user-set:first-child {
  display: -webkit-box;
  display: flex
}

.with-doctor_recommend-user-card_main-area {
  position: relative;
  padding: 8px
}

.with-doctor_recommend-user_thumb {
  border-radius: 10px
}

.with-doctor_recommend-user_reason-icon {
  width: 40px;
  position: absolute;
  bottom: -15px;
  left: 5px;
  border: 4px solid #FFF;
  border-radius: 20px
}

.with-doctor_recommend-user_reason-icon.is-konomi {
  border-radius: 8px
}

.with-doctor_recommend-user_like-button {
  padding: 0 5px
}

.with-doctor_recommend-user_shuffle-button-box {
  margin: auto;
  padding: 5px 10px 35px;
  text-align: center
}

.with-doctor_recommend-user_shuffle-button {
  width: 80px;
  height: 80px;
  background: #B4B4B4;
  border-radius: 40px;
  color: #FFF;
  font-size: 12px
}

.with-doctor_recommend-user_shuffle-button:hover {
  background: #A1A1A1
}

@-webkit-keyframes with-doctor_recommend-user_shuffle_open {
  0% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg)
  }

  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
  }
}

@keyframes with-doctor_recommend-user_shuffle_open {
  0% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg)
  }

  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
  }
}

@-webkit-keyframes with-doctor_recommend-user_shuffle_close {
  100% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg)
  }
}

@keyframes with-doctor_recommend-user_shuffle_close {
  100% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg)
  }
}

.with-doctor_mission {
  display: -webkit-box;
  display: flex;
  max-width: 480px;
  margin: auto;
  padding: 0 var(--outer-space);
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  color: #fff;
  height: 30px
}

.with-doctor_mission .val {
  font-weight: bold;
  font-size: 15px
}

.with-doctor_mission .unit {
  font-size: 11px
}

.with-doctor_mission.is-ok {
  background-color: #00C9B5
}

.with-doctor_mission.is-ng {
  background-color: #606060
}

.with-report_lp {
  position: relative
}

.with-report_lp_link {
  padding: 0 6%;
  position: absolute;
  bottom: 10%;
  width: 100%
}

.with-report_button {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border-radius: 10px
}

.with-report_movie {
  position: relative
}

.with-report_movie_start {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 62px;
  height: 62px
}

.with-report_title {
  padding: 20px 15px;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.with-report_title_logo {
  display: block;
  margin: 0 auto 20px;
  width: 70%;
  max-width: 260px
}

.with-report_title_desc {
  display: block;
  margin: 0 auto 30px;
  width: 90%;
  max-width: 320px
}

.with-report-list {
  background-color: #fff;
  overflow: hidden
}

.with-report-list_heading {
  margin-bottom: 30px;
  color: #FF999E;
  font-size: 30px;
  font-weight: bold
}

.with-report-list_desc {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px
}

.with-report-list_tab {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 100%;
  height: 40px
}

.with-report-list_switch {
  display: block;
  width: 30%;
  height: 40px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px
}

.with-report-list_switch:link, .with-report-list_switch:visited, .with-report-list_switch:hover {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.with-report-list_switch:active {
  background-color: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.15)
}

.with-report-list_switch.is-selected {
  color: #fff;
  background-color: #FF999E;
  border: none
}

.with-report_show-more-list {
  height: 40px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weigth: bold;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px
}

.with-report_show-more-list:link, .with-report_show-more-list:visited {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none
}

.with-report_show-more-list:active {
  background-color: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.15)
}

.with-report_link {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 0 15px
}

.with-report_link .media_image {
  margin-right: 20px
}

.with-report_link .media_body {
  color: #b8b8b8
}

.with-report-list.is-oblong .with-report_link+.with-report_link {
  margin-top: 30px
}

.with-report_link.is-block {
  padding: 10px;
  width: 50%;
  float: left
}

.with-report_link:link {
  text-decoration: none
}

.with-report_link.is-hidden:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 51, 51, 0.75)
}

.with-report_link.is-hidden:after {
  content: 'coming soon';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 33px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center
}

.with-report_link_thumb {
  width: 160px;
  height: 120px;
  border-radius: 10px
}

.with-report_link_date {
  color: rgba(0, 0, 0, 0.4);
  font-size: 10px;
  line-height: 14px
}

.with-report_link_kind {
  font-size: 12px;
  line-height: 14px
}

.with-report_link_heading {
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  word-break: break-word
}

span.with-report_tag {
  display: inline-block;
  width: 41px;
  height: 17px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 100%
}

span.with-report_tag.is-marriage {
  background-image: url(//cdn.with.is/assets/with_reports/tag_marriage-a8288041bee9a8e69929ea01a9aaed524c227312307279dc2ed60773048359f1.png)
}

span.with-report_tag.is-couple {
  background-image: url(//cdn.with.is/assets/with_reports/tag_couple-2b47586f2cb73dd33c3cdb6e2c44d96bc27abd92f7444879298432740a1cc527.png)
}

.with-report_bg {
  background-color: #fff
}

.with-report_frame_above {
  padding: 30px 15px 15px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(//cdn.with.is/assets/with_reports/bg-abcd98c1754fad263378d808b47af152b564eb744f377b43cb0caa25807b084f.jpg);
  border-bottom: 1px solid #ededed
}

.with-report_photo {
  width: 100%;
  border-radius: 10px
}

.with-report_couple-info {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  color: #999999;
  text-align: center
}

.with-report_couple-status img {
  width: 54px
}

.with-report_heading {
  margin: 10px 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.87);
  font-size: 20px;
  font-weight: bold
}

.with-report_author {
  font-size: 11px
}

.with-report_author.is-male {
  color: #2cc4cb
}

.with-report_author.is-female {
  color: #606060
}

.with-report_frame_below {
  padding: 15px
}

.with-report_content {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.7
}

.with-report_comment {
  position: relative;
  padding: 0 15px 35px 15px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 16px;
  background-color: #ffeded;
  border-radius: 10px
}

.with-report_comment>img {
  margin: 0 auto 15px;
  display: block;
  width: 100%;
  max-width: 350px
}

.with-report_comment>span {
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: block;
  font-weight: bold
}

.with-report-entry {
  position: relative
}

.with-report-entry img {
  width: 100%
}

.with-report-entry_submit {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  margin: auto;
  width: 75%;
  max-width: 300px
}

.with-report-entry_submit>a {
  width: 100%;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  background-color: #FF6680;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2)
}

.with-report-entry_submit>a:link, .with-report-entry_submit>a:visited, .with-report-entry_submit>a:hover {
  color: #fff
}

.withdrawal-reason.form-radio label {
  background-color: initial;
  border: none
}

.withdrawal-reason.form-radio>input[type="radio"]:checked+label {
  background-color: initial;
  border: none
}

.withdrawals_recommend_frame {
  position: relative
}

.withdrawals_recommend_link {
  position: absolute;
  bottom: 0;
  padding: 0 20px 50px;
  width: 100%
}

#q3-other-reason {
  display: none
}

.with-report_banner img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 12px
}

.with-report_description {
  width: 100%;
  border-radius: 10px
}

.couple_list-box {
  width: 100%
}

.couple_list-box div:first-child {
  margin-right: 6px
}

.couple_list-box div:last-child {
  margin-left: 6px
}

.couple_item {
  width: 80px;
  height: 80px;
  position: relative;
  display: inline-block;
  margin-bottom: 10px
}

.couple_img {
  width: 100%;
  border-radius: 10px
}

.new_with_report_form .photo-uploader_file-field, .new_with_report_form .photo-uploader_add {
  width: 120px;
  height: 120px;
  float: none;
  margin: auto;
  background-position: 50px
}

.new_with_report_form .img-samples {
  display: block
}

.new_with_report_form .img-samples img {
  width: 45%;
  margin: 5px
}

.recommend-ios-banner {
  width: 100%
}

.partner-list {
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
  justify-content: center;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%
}

.partner-list_box {
  margin-left: 0;
  margin-right: -5px;
  width: 340px
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .partner-list_box {
    width: 290px
  }
}

.partner-list_box>li {
  float: left;
  position: relative;
  margin: 0 0 15px;
  padding: 0 5px;
  max-width: 33%;
  min-height: 170px
}

.partner-list_box>li a {
  text-decoration: none
}

.partner-list_box>li a:visited {
  color: #606060
}

.partner-list_box>li p {
  margin: 3px 0 0 0
}

.partner-thumb {
  height: 90px;
  width: 90px;
  border-radius: 50%
}

.selected-partner {
  display: none;
  position: absolute;
  top: -4px;
  left: 0;
  height: 96px;
  width: 96px;
  border: 5px solid #606060;
  border-radius: 50%
}

.selected-partner:after {
  content: '';
  position: absolute;
  top: 66px;
  right: 3px;
  width: 22px;
  height: 22px;
  background-image: url(//cdn.with.is/assets/withdrawals/icn_select-649b9dc65a3bbd4e9db71402a7674797c4a8c64576d443d2edea53113a710fa0.png);
  background-repeat: no-repeat;
  background-size: 100%
}

.with-report_photo-uploader {
  text-align: center
}

.with-report_photo-uploader>div {
  display: inline-block
}

.with-report_photo-uploader>div:first-child {
  margin-right: 15px
}

.with-report_photo-sample {
  position: relative;
  padding: 50px 15px 15px;
  background-color: rgba(254, 105, 112, 0.1);
  border-radius: 10px
}

.with-report_photo-sample .with-report_photo-sample_title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  color: #fff;
  background-color: rgba(254, 105, 112, 0.8);
  border-radius: 10px 0 10px 0
}

.word-count-errors {
  font-size: 10px
}

.word-count-error-message {
  margin-right: 10px
}

.youtube-lp {
  position: relative
}

.youtube-lp_link {
  position: absolute;
  top: 60%;
  right: 6%;
  width: 40%
}

.user-detail-container.theme-E2C3C5 {
  background-color: #E2C3C5
}

.user-detail-container.theme-E2C3C5 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #E2C3C5);
  background: -webkit-linear-gradient(to bottom, transparent, #E2C3C5);
  background: -webkit-linear-gradient(top, transparent, #E2C3C5);
  background: linear-gradient(to bottom, transparent, #E2C3C5)
}

.user-detail-container.theme-B25CDE {
  background-color: #B25CDE
}

.user-detail-container.theme-B25CDE .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #B25CDE);
  background: -webkit-linear-gradient(to bottom, transparent, #B25CDE);
  background: -webkit-linear-gradient(top, transparent, #B25CDE);
  background: linear-gradient(to bottom, transparent, #B25CDE)
}

.user-detail-container.theme-FFA9B6 {
  background-color: #FFA9B6
}

.user-detail-container.theme-FFA9B6 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #FFA9B6);
  background: -webkit-linear-gradient(to bottom, transparent, #FFA9B6);
  background: -webkit-linear-gradient(top, transparent, #FFA9B6);
  background: linear-gradient(to bottom, transparent, #FFA9B6)
}

.user-detail-container.theme-03553B {
  background-color: #03553B
}

.user-detail-container.theme-03553B .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #03553B);
  background: -webkit-linear-gradient(to bottom, transparent, #03553B);
  background: -webkit-linear-gradient(top, transparent, #03553B);
  background: linear-gradient(to bottom, transparent, #03553B)
}

.user-detail-container.theme-F3AF19 {
  background-color: #F3AF19
}

.user-detail-container.theme-F3AF19 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #F3AF19);
  background: -webkit-linear-gradient(to bottom, transparent, #F3AF19);
  background: -webkit-linear-gradient(top, transparent, #F3AF19);
  background: linear-gradient(to bottom, transparent, #F3AF19)
}

.user-detail-container.theme-389FC4 {
  background-color: #389FC4
}

.user-detail-container.theme-389FC4 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #389FC4);
  background: -webkit-linear-gradient(to bottom, transparent, #389FC4);
  background: -webkit-linear-gradient(top, transparent, #389FC4);
  background: linear-gradient(to bottom, transparent, #389FC4)
}

.user-detail-container.theme-FFA131 {
  background-color: #FFA131
}

.user-detail-container.theme-FFA131 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #FFA131);
  background: -webkit-linear-gradient(to bottom, transparent, #FFA131);
  background: -webkit-linear-gradient(top, transparent, #FFA131);
  background: linear-gradient(to bottom, transparent, #FFA131)
}

.user-detail-container.theme-FF4947 {
  background-color: #FF4947
}

.user-detail-container.theme-FF4947 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #FF4947);
  background: -webkit-linear-gradient(to bottom, transparent, #FF4947);
  background: -webkit-linear-gradient(top, transparent, #FF4947);
  background: linear-gradient(to bottom, transparent, #FF4947)
}

.user-detail-container.theme-3DCCC2 {
  background-color: #3DCCC2
}

.user-detail-container.theme-3DCCC2 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #3DCCC2);
  background: -webkit-linear-gradient(to bottom, transparent, #3DCCC2);
  background: -webkit-linear-gradient(top, transparent, #3DCCC2);
  background: linear-gradient(to bottom, transparent, #3DCCC2)
}

.user-detail-container.theme-FFD8D3 {
  background-color: #FFD8D3
}

.user-detail-container.theme-FFD8D3 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #FFD8D3);
  background: -webkit-linear-gradient(to bottom, transparent, #FFD8D3);
  background: -webkit-linear-gradient(top, transparent, #FFD8D3);
  background: linear-gradient(to bottom, transparent, #FFD8D3)
}

.user-detail-container.theme-0144C8 {
  background-color: #0144C8
}

.user-detail-container.theme-0144C8 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #0144C8);
  background: -webkit-linear-gradient(to bottom, transparent, #0144C8);
  background: -webkit-linear-gradient(top, transparent, #0144C8);
  background: linear-gradient(to bottom, transparent, #0144C8)
}

.user-detail-container.theme-30202B {
  background-color: #30202B
}

.user-detail-container.theme-30202B .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #30202B);
  background: -webkit-linear-gradient(to bottom, transparent, #30202B);
  background: -webkit-linear-gradient(top, transparent, #30202B);
  background: linear-gradient(to bottom, transparent, #30202B)
}

.user-detail-container.theme-003962 {
  background-color: #003962
}

.user-detail-container.theme-003962 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #003962);
  background: -webkit-linear-gradient(to bottom, transparent, #003962);
  background: -webkit-linear-gradient(top, transparent, #003962);
  background: linear-gradient(to bottom, transparent, #003962)
}

.user-detail-container.theme-41004D {
  background-color: #41004D
}

.user-detail-container.theme-41004D .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #41004D);
  background: -webkit-linear-gradient(to bottom, transparent, #41004D);
  background: -webkit-linear-gradient(top, transparent, #41004D);
  background: linear-gradient(to bottom, transparent, #41004D)
}

.user-detail-container.theme-5D2C40 {
  background-color: #5D2C40
}

.user-detail-container.theme-5D2C40 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #5D2C40);
  background: -webkit-linear-gradient(to bottom, transparent, #5D2C40);
  background: -webkit-linear-gradient(top, transparent, #5D2C40);
  background: linear-gradient(to bottom, transparent, #5D2C40)
}

.user-detail-container.theme-0066B7 {
  background-color: #0066B7
}

.user-detail-container.theme-0066B7 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #0066B7);
  background: -webkit-linear-gradient(to bottom, transparent, #0066B7);
  background: -webkit-linear-gradient(top, transparent, #0066B7);
  background: linear-gradient(to bottom, transparent, #0066B7)
}

.user-detail-container.theme-0C6425 {
  background-color: #0C6425
}

.user-detail-container.theme-0C6425 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #0C6425);
  background: -webkit-linear-gradient(to bottom, transparent, #0C6425);
  background: -webkit-linear-gradient(top, transparent, #0C6425);
  background: linear-gradient(to bottom, transparent, #0C6425)
}

.user-detail-container.theme-18207F {
  background-color: #18207F
}

.user-detail-container.theme-18207F .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #18207F);
  background: -webkit-linear-gradient(to bottom, transparent, #18207F);
  background: -webkit-linear-gradient(top, transparent, #18207F);
  background: linear-gradient(to bottom, transparent, #18207F)
}

.user-detail-container.theme-EF7D33 {
  background-color: #EF7D33
}

.user-detail-container.theme-EF7D33 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #EF7D33);
  background: -webkit-linear-gradient(to bottom, transparent, #EF7D33);
  background: -webkit-linear-gradient(top, transparent, #EF7D33);
  background: linear-gradient(to bottom, transparent, #EF7D33)
}

.user-detail-container.theme-00CDFF {
  background-color: #00CDFF
}

.user-detail-container.theme-00CDFF .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #00CDFF);
  background: -webkit-linear-gradient(to bottom, transparent, #00CDFF);
  background: -webkit-linear-gradient(top, transparent, #00CDFF);
  background: linear-gradient(to bottom, transparent, #00CDFF)
}

.user-detail-container.theme-DF9BBE {
  background-color: #DF9BBE
}

.user-detail-container.theme-DF9BBE .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #DF9BBE);
  background: -webkit-linear-gradient(to bottom, transparent, #DF9BBE);
  background: -webkit-linear-gradient(top, transparent, #DF9BBE);
  background: linear-gradient(to bottom, transparent, #DF9BBE)
}

.user-detail-container.theme-C1DFE7 {
  background-color: #C1DFE7
}

.user-detail-container.theme-C1DFE7 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #C1DFE7);
  background: -webkit-linear-gradient(to bottom, transparent, #C1DFE7);
  background: -webkit-linear-gradient(top, transparent, #C1DFE7);
  background: linear-gradient(to bottom, transparent, #C1DFE7)
}

.user-detail-container.theme-104360 {
  background-color: #104360
}

.user-detail-container.theme-104360 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #104360);
  background: -webkit-linear-gradient(to bottom, transparent, #104360);
  background: -webkit-linear-gradient(top, transparent, #104360);
  background: linear-gradient(to bottom, transparent, #104360)
}

.user-detail-container.theme-E7D260 {
  background-color: #E7D260
}

.user-detail-container.theme-E7D260 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #E7D260);
  background: -webkit-linear-gradient(to bottom, transparent, #E7D260);
  background: -webkit-linear-gradient(top, transparent, #E7D260);
  background: linear-gradient(to bottom, transparent, #E7D260)
}

.user-detail-container.theme-8ACDD0 {
  background-color: #8ACDD0
}

.user-detail-container.theme-8ACDD0 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #8ACDD0);
  background: -webkit-linear-gradient(to bottom, transparent, #8ACDD0);
  background: -webkit-linear-gradient(top, transparent, #8ACDD0);
  background: linear-gradient(to bottom, transparent, #8ACDD0)
}

.user-detail-container.theme-DB7CB3 {
  background-color: #DB7CB3
}

.user-detail-container.theme-DB7CB3 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #DB7CB3);
  background: -webkit-linear-gradient(to bottom, transparent, #DB7CB3);
  background: -webkit-linear-gradient(top, transparent, #DB7CB3);
  background: linear-gradient(to bottom, transparent, #DB7CB3)
}

.user-detail-container.theme-FF984B {
  background-color: #FF984B
}

.user-detail-container.theme-FF984B .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #FF984B);
  background: -webkit-linear-gradient(to bottom, transparent, #FF984B);
  background: -webkit-linear-gradient(top, transparent, #FF984B);
  background: linear-gradient(to bottom, transparent, #FF984B)
}

.user-detail-container.theme-D4D8D9 {
  background-color: #D4D8D9
}

.user-detail-container.theme-D4D8D9 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #D4D8D9);
  background: -webkit-linear-gradient(to bottom, transparent, #D4D8D9);
  background: -webkit-linear-gradient(top, transparent, #D4D8D9);
  background: linear-gradient(to bottom, transparent, #D4D8D9)
}

.user-detail-container.theme-DF4B87 {
  background-color: #DF4B87
}

.user-detail-container.theme-DF4B87 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #DF4B87);
  background: -webkit-linear-gradient(to bottom, transparent, #DF4B87);
  background: -webkit-linear-gradient(top, transparent, #DF4B87);
  background: linear-gradient(to bottom, transparent, #DF4B87)
}

.user-detail-container.theme-B12D44 {
  background-color: #B12D44
}

.user-detail-container.theme-B12D44 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #B12D44);
  background: -webkit-linear-gradient(to bottom, transparent, #B12D44);
  background: -webkit-linear-gradient(top, transparent, #B12D44);
  background: linear-gradient(to bottom, transparent, #B12D44)
}

.user-detail-container.theme-5E9FCA {
  background-color: #5E9FCA
}

.user-detail-container.theme-5E9FCA .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #5E9FCA);
  background: -webkit-linear-gradient(to bottom, transparent, #5E9FCA);
  background: -webkit-linear-gradient(top, transparent, #5E9FCA);
  background: linear-gradient(to bottom, transparent, #5E9FCA)
}

.user-detail-container.theme-6E2B39 {
  background-color: #6E2B39
}

.user-detail-container.theme-6E2B39 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #6E2B39);
  background: -webkit-linear-gradient(to bottom, transparent, #6E2B39);
  background: -webkit-linear-gradient(top, transparent, #6E2B39);
  background: linear-gradient(to bottom, transparent, #6E2B39)
}

.user-detail-container.theme-DEC6B1 {
  background-color: #DEC6B1
}

.user-detail-container.theme-DEC6B1 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #DEC6B1);
  background: -webkit-linear-gradient(to bottom, transparent, #DEC6B1);
  background: -webkit-linear-gradient(top, transparent, #DEC6B1);
  background: linear-gradient(to bottom, transparent, #DEC6B1)
}

.user-detail-container.theme-6BAABC {
  background-color: #6BAABC
}

.user-detail-container.theme-6BAABC .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #6BAABC);
  background: -webkit-linear-gradient(to bottom, transparent, #6BAABC);
  background: -webkit-linear-gradient(top, transparent, #6BAABC);
  background: linear-gradient(to bottom, transparent, #6BAABC)
}

.user-detail-container.theme-D49D79 {
  background-color: #D49D79
}

.user-detail-container.theme-D49D79 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #D49D79);
  background: -webkit-linear-gradient(to bottom, transparent, #D49D79);
  background: -webkit-linear-gradient(top, transparent, #D49D79);
  background: linear-gradient(to bottom, transparent, #D49D79)
}

.user-detail-container.theme-001F52 {
  background-color: #001F52
}

.user-detail-container.theme-001F52 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #001F52);
  background: -webkit-linear-gradient(to bottom, transparent, #001F52);
  background: -webkit-linear-gradient(top, transparent, #001F52);
  background: linear-gradient(to bottom, transparent, #001F52)
}

.user-detail-container.theme-3C3C3C {
  background-color: #3C3C3C
}

.user-detail-container.theme-3C3C3C .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #3C3C3C);
  background: -webkit-linear-gradient(to bottom, transparent, #3C3C3C);
  background: -webkit-linear-gradient(top, transparent, #3C3C3C);
  background: linear-gradient(to bottom, transparent, #3C3C3C)
}

.user-detail-container.theme-B3385A {
  background-color: #B3385A
}

.user-detail-container.theme-B3385A .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #B3385A);
  background: -webkit-linear-gradient(to bottom, transparent, #B3385A);
  background: -webkit-linear-gradient(top, transparent, #B3385A);
  background: linear-gradient(to bottom, transparent, #B3385A)
}

.user-detail-container.theme-F06736 {
  background-color: #F06736
}

.user-detail-container.theme-F06736 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #F06736);
  background: -webkit-linear-gradient(to bottom, transparent, #F06736);
  background: -webkit-linear-gradient(top, transparent, #F06736);
  background: linear-gradient(to bottom, transparent, #F06736)
}

.user-detail-container.theme-3B496D {
  background-color: #3B496D
}

.user-detail-container.theme-3B496D .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #3B496D);
  background: -webkit-linear-gradient(to bottom, transparent, #3B496D);
  background: -webkit-linear-gradient(top, transparent, #3B496D);
  background: linear-gradient(to bottom, transparent, #3B496D)
}

.user-detail-container.theme-D8A7C5 {
  background-color: #D8A7C5
}

.user-detail-container.theme-D8A7C5 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #D8A7C5);
  background: -webkit-linear-gradient(to bottom, transparent, #D8A7C5);
  background: -webkit-linear-gradient(top, transparent, #D8A7C5);
  background: linear-gradient(to bottom, transparent, #D8A7C5)
}

.user-detail-container.theme-F4837A {
  background-color: #F4837A
}

.user-detail-container.theme-F4837A .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #F4837A);
  background: -webkit-linear-gradient(to bottom, transparent, #F4837A);
  background: -webkit-linear-gradient(top, transparent, #F4837A);
  background: linear-gradient(to bottom, transparent, #F4837A)
}

.user-detail-container.theme-E58D9B {
  background-color: #E58D9B
}

.user-detail-container.theme-E58D9B .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #E58D9B);
  background: -webkit-linear-gradient(to bottom, transparent, #E58D9B);
  background: -webkit-linear-gradient(top, transparent, #E58D9B);
  background: linear-gradient(to bottom, transparent, #E58D9B)
}

.user-detail-container.theme-91BA42 {
  background-color: #91BA42
}

.user-detail-container.theme-91BA42 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #91BA42);
  background: -webkit-linear-gradient(to bottom, transparent, #91BA42);
  background: -webkit-linear-gradient(top, transparent, #91BA42);
  background: linear-gradient(to bottom, transparent, #91BA42)
}

.user-detail-container.theme-E5A29C {
  background-color: #E5A29C
}

.user-detail-container.theme-E5A29C .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #E5A29C);
  background: -webkit-linear-gradient(to bottom, transparent, #E5A29C);
  background: -webkit-linear-gradient(top, transparent, #E5A29C);
  background: linear-gradient(to bottom, transparent, #E5A29C)
}

.user-detail-container.theme-AF2F26 {
  background-color: #AF2F26
}

.user-detail-container.theme-AF2F26 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #AF2F26);
  background: -webkit-linear-gradient(to bottom, transparent, #AF2F26);
  background: -webkit-linear-gradient(top, transparent, #AF2F26);
  background: linear-gradient(to bottom, transparent, #AF2F26)
}

.user-detail-container.theme-D8BAA0 {
  background-color: #D8BAA0
}

.user-detail-container.theme-D8BAA0 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #D8BAA0);
  background: -webkit-linear-gradient(to bottom, transparent, #D8BAA0);
  background: -webkit-linear-gradient(top, transparent, #D8BAA0);
  background: linear-gradient(to bottom, transparent, #D8BAA0)
}

.user-detail-container.theme-2D7A74 {
  background-color: #2D7A74
}

.user-detail-container.theme-2D7A74 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #2D7A74);
  background: -webkit-linear-gradient(to bottom, transparent, #2D7A74);
  background: -webkit-linear-gradient(top, transparent, #2D7A74);
  background: linear-gradient(to bottom, transparent, #2D7A74)
}

.user-detail-container.theme-3D3056 {
  background-color: #3D3056
}

.user-detail-container.theme-3D3056 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #3D3056);
  background: -webkit-linear-gradient(to bottom, transparent, #3D3056);
  background: -webkit-linear-gradient(top, transparent, #3D3056);
  background: linear-gradient(to bottom, transparent, #3D3056)
}

.user-detail-container.theme-DDC183 {
  background-color: #DDC183
}

.user-detail-container.theme-DDC183 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #DDC183);
  background: -webkit-linear-gradient(to bottom, transparent, #DDC183);
  background: -webkit-linear-gradient(top, transparent, #DDC183);
  background: linear-gradient(to bottom, transparent, #DDC183)
}

.user-detail-container.theme-C9B07F {
  background-color: #C9B07F
}

.user-detail-container.theme-C9B07F .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #C9B07F);
  background: -webkit-linear-gradient(to bottom, transparent, #C9B07F);
  background: -webkit-linear-gradient(top, transparent, #C9B07F);
  background: linear-gradient(to bottom, transparent, #C9B07F)
}

.user-detail-container.theme-554DAD {
  background-color: #554DAD
}

.user-detail-container.theme-554DAD .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #554DAD);
  background: -webkit-linear-gradient(to bottom, transparent, #554DAD);
  background: -webkit-linear-gradient(top, transparent, #554DAD);
  background: linear-gradient(to bottom, transparent, #554DAD)
}

.user-detail-container.theme-E5B738 {
  background-color: #E5B738
}

.user-detail-container.theme-E5B738 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #E5B738);
  background: -webkit-linear-gradient(to bottom, transparent, #E5B738);
  background: -webkit-linear-gradient(top, transparent, #E5B738);
  background: linear-gradient(to bottom, transparent, #E5B738)
}

.user-detail-container.theme-67ADBC {
  background-color: #67ADBC
}

.user-detail-container.theme-67ADBC .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #67ADBC);
  background: -webkit-linear-gradient(to bottom, transparent, #67ADBC);
  background: -webkit-linear-gradient(top, transparent, #67ADBC);
  background: linear-gradient(to bottom, transparent, #67ADBC)
}

.user-detail-container.theme-D8BAA0 {
  background-color: #D8BAA0
}

.user-detail-container.theme-D8BAA0 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #D8BAA0);
  background: -webkit-linear-gradient(to bottom, transparent, #D8BAA0);
  background: -webkit-linear-gradient(top, transparent, #D8BAA0);
  background: linear-gradient(to bottom, transparent, #D8BAA0)
}

.user-detail-container.theme-FF6969 {
  background-color: #6ac0fb;
}

.user-detail-container.theme-FF6969 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #FF6969);
  background: -webkit-linear-gradient(to bottom, transparent, #FF6969);
  background: -webkit-linear-gradient(top, transparent, #FF6969);
  background: linear-gradient(to bottom, transparent, #69c1ff);
}

.user-detail-container.theme-30CAD1 {
  background-color: #30CAD1
}

.user-detail-container.theme-30CAD1 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #30CAD1);
  background: -webkit-linear-gradient(to bottom, transparent, #30CAD1);
  background: -webkit-linear-gradient(top, transparent, #30CAD1);
  background: linear-gradient(to bottom, transparent, #30CAD1)
}

.user-detail-container.theme-D33F1C {
  background-color: #D33F1C
}

.user-detail-container.theme-D33F1C .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #D33F1C);
  background: -webkit-linear-gradient(to bottom, transparent, #D33F1C);
  background: -webkit-linear-gradient(top, transparent, #D33F1C);
  background: linear-gradient(to bottom, transparent, #D33F1C)
}

.user-detail-container.theme-FF7BA5 {
  background-color: #FF7BA5
}

.user-detail-container.theme-FF7BA5 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #FF7BA5);
  background: -webkit-linear-gradient(to bottom, transparent, #FF7BA5);
  background: -webkit-linear-gradient(top, transparent, #FF7BA5);
  background: linear-gradient(to bottom, transparent, #FF7BA5)
}

.user-detail-container.theme-7F608F {
  background-color: #7F608F
}

.user-detail-container.theme-7F608F .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #7F608F);
  background: -webkit-linear-gradient(to bottom, transparent, #7F608F);
  background: -webkit-linear-gradient(top, transparent, #7F608F);
  background: linear-gradient(to bottom, transparent, #7F608F)
}

.user-detail-container.theme-40A67D {
  background-color: #40A67D
}

.user-detail-container.theme-40A67D .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #40A67D);
  background: -webkit-linear-gradient(to bottom, transparent, #40A67D);
  background: -webkit-linear-gradient(top, transparent, #40A67D);
  background: linear-gradient(to bottom, transparent, #40A67D)
}

.user-detail-container.theme-E8A385 {
  background-color: #E8A385
}

.user-detail-container.theme-E8A385 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #E8A385);
  background: -webkit-linear-gradient(to bottom, transparent, #E8A385);
  background: -webkit-linear-gradient(top, transparent, #E8A385);
  background: linear-gradient(to bottom, transparent, #E8A385)
}

.user-detail-container.theme-252525 {
  background-color: #252525
}

.user-detail-container.theme-252525 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #252525);
  background: -webkit-linear-gradient(to bottom, transparent, #252525);
  background: -webkit-linear-gradient(top, transparent, #252525);
  background: linear-gradient(to bottom, transparent, #252525)
}

.user-detail-container.theme-3D3A60 {
  background-color: #3D3A60
}

.user-detail-container.theme-3D3A60 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #3D3A60);
  background: -webkit-linear-gradient(to bottom, transparent, #3D3A60);
  background: -webkit-linear-gradient(top, transparent, #3D3A60);
  background: linear-gradient(to bottom, transparent, #3D3A60)
}

.user-detail-container.theme-423033 {
  background-color: #423033
}

.user-detail-container.theme-423033 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #423033);
  background: -webkit-linear-gradient(to bottom, transparent, #423033);
  background: -webkit-linear-gradient(top, transparent, #423033);
  background: linear-gradient(to bottom, transparent, #423033)
}

.user-detail-container.theme-2F3150 {
  background-color: #2F3150
}

.user-detail-container.theme-2F3150 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #2F3150);
  background: -webkit-linear-gradient(to bottom, transparent, #2F3150);
  background: -webkit-linear-gradient(top, transparent, #2F3150);
  background: linear-gradient(to bottom, transparent, #2F3150)
}

.user-detail-container.theme-363231 {
  background-color: #363231
}

.user-detail-container.theme-363231 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #363231);
  background: -webkit-linear-gradient(to bottom, transparent, #363231);
  background: -webkit-linear-gradient(top, transparent, #363231);
  background: linear-gradient(to bottom, transparent, #363231)
}

.user-detail-container.theme-1F6572 {
  background-color: #1F6572
}

.user-detail-container.theme-1F6572 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #1F6572);
  background: -webkit-linear-gradient(to bottom, transparent, #1F6572);
  background: -webkit-linear-gradient(top, transparent, #1F6572);
  background: linear-gradient(to bottom, transparent, #1F6572)
}

.user-detail-container.theme-3E221C {
  background-color: #3E221C
}

.user-detail-container.theme-3E221C .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #3E221C);
  background: -webkit-linear-gradient(to bottom, transparent, #3E221C);
  background: -webkit-linear-gradient(top, transparent, #3E221C);
  background: linear-gradient(to bottom, transparent, #3E221C)
}

.user-detail-container.theme-46C0B8 {
  background-color: #46C0B8
}

.user-detail-container.theme-46C0B8 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #46C0B8);
  background: -webkit-linear-gradient(to bottom, transparent, #46C0B8);
  background: -webkit-linear-gradient(top, transparent, #46C0B8);
  background: linear-gradient(to bottom, transparent, #46C0B8)
}

.user-detail-container.theme-9B4C6E {
  background-color: #9B4C6E
}

.user-detail-container.theme-9B4C6E .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #9B4C6E);
  background: -webkit-linear-gradient(to bottom, transparent, #9B4C6E);
  background: -webkit-linear-gradient(top, transparent, #9B4C6E);
  background: linear-gradient(to bottom, transparent, #9B4C6E)
}

.user-detail-container.theme-D77E2D {
  background-color: #D77E2D
}

.user-detail-container.theme-D77E2D .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #D77E2D);
  background: -webkit-linear-gradient(to bottom, transparent, #D77E2D);
  background: -webkit-linear-gradient(top, transparent, #D77E2D);
  background: linear-gradient(to bottom, transparent, #D77E2D)
}

.user-detail-container.theme-AA949D {
  background-color: #AA949D
}

.user-detail-container.theme-AA949D .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #AA949D);
  background: -webkit-linear-gradient(to bottom, transparent, #AA949D);
  background: -webkit-linear-gradient(top, transparent, #AA949D);
  background: linear-gradient(to bottom, transparent, #AA949D)
}

.user-detail-container.theme-8C8EA0 {
  background-color: #8C8EA0
}

.user-detail-container.theme-8C8EA0 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #8C8EA0);
  background: -webkit-linear-gradient(to bottom, transparent, #8C8EA0);
  background: -webkit-linear-gradient(top, transparent, #8C8EA0);
  background: linear-gradient(to bottom, transparent, #8C8EA0)
}

.user-detail-container.theme-093043 {
  background-color: #093043
}

.user-detail-container.theme-093043 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #093043);
  background: -webkit-linear-gradient(to bottom, transparent, #093043);
  background: -webkit-linear-gradient(top, transparent, #093043);
  background: linear-gradient(to bottom, transparent, #093043)
}

.user-detail-container.theme-99B835 {
  background-color: #99B835
}

.user-detail-container.theme-99B835 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #99B835);
  background: -webkit-linear-gradient(to bottom, transparent, #99B835);
  background: -webkit-linear-gradient(top, transparent, #99B835);
  background: linear-gradient(to bottom, transparent, #99B835)
}

.user-detail-container.theme-592A0A {
  background-color: #592A0A
}

.user-detail-container.theme-592A0A .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #592A0A);
  background: -webkit-linear-gradient(to bottom, transparent, #592A0A);
  background: -webkit-linear-gradient(top, transparent, #592A0A);
  background: linear-gradient(to bottom, transparent, #592A0A)
}

.user-detail-container.theme-262B5E {
  background-color: #262B5E
}

.user-detail-container.theme-262B5E .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #262B5E);
  background: -webkit-linear-gradient(to bottom, transparent, #262B5E);
  background: -webkit-linear-gradient(top, transparent, #262B5E);
  background: linear-gradient(to bottom, transparent, #262B5E)
}

.user-detail-container.theme-191615 {
  background-color: #191615
}

.user-detail-container.theme-191615 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #191615);
  background: -webkit-linear-gradient(to bottom, transparent, #191615);
  background: -webkit-linear-gradient(top, transparent, #191615);
  background: linear-gradient(to bottom, transparent, #191615)
}

.user-detail-container.theme-1A5C69 {
  background-color: #1A5C69
}

.user-detail-container.theme-1A5C69 .profile-thumb_gradient {
  background: -owg-linear-gradient(to bottom, transparent, #1A5C69);
  background: -webkit-linear-gradient(to bottom, transparent, #1A5C69);
  background: -webkit-linear-gradient(top, transparent, #1A5C69);
  background: linear-gradient(to bottom, transparent, #1A5C69)
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand
}

.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block
}

.slick-track:before, .slick-track:after {
  display: table;
  content: ''
}

.slick-track:after {
  clear: both
}

.slick-loading .slick-track {
  visibility: hidden
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px
}

[dir='rtl'] .slick-slide {
  float: right
}

.slick-slide img {
  display: block
}

.slick-slide.slick-loading img {
  display: none
}

.slick-slide.dragging img {
  pointer-events: none
}

.slick-initialized .slick-slide {
  display: block
}

.slick-loading .slick-slide {
  visibility: hidden
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent
}

.slick-prev, .slick-next {
  font-size: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent
}

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
  opacity: 1
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
  opacity: .25
}

.slick-prev:before, .slick-next:before {
  font-size: 24px;
  line-height: 1;
  opacity: .75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.slick-prev {
  left: -25px
}

[dir='rtl'] .slick-prev {
  right: -25px;
  left: auto
}



.slick-next {
  right: -25px
}

[dir='rtl'] .slick-next {
  right: auto;
  left: -25px
}



.slick-slider {
  margin-bottom: 30px
}

.slick-dots {
  position: absolute;
  bottom: -45px;
  height: 24px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer
}

.slick-dots li button {
  font-size: 0;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent
}

.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1
}

.slick-dots li button:before {
  font-size: 16px;
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: black
}
.irotuke{
  color: #606060;
}
.videoview{
  width: 100%;
}
.idbspace{
  padding-left: 3px;
  color: black;
}

.iddeann{
  display: none;
}
.cardvideopage{
  display: flex;
  width: 50%;
  height: 70%;
}
.boder{
  border: 5px solid #2cc4cb;
}


video{
  width: 100%;
  flex-wrap:wrap;
}
.room{
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
}
.remote-streams{
  display: block;
  width:50%;

}


.container{
  height: 100%
}
.statasdiv{
  whdth:100%;
  padding-bottom: 100px;
}
.delsa{
  display: none;
}
.with70{
  whdth:60% !important;
}
.ECM_CheckboxInput {
padding: 12px 8px;
display: flex;
align-items: center;
cursor: pointer;
}
.ECM_CheckboxInput-Input {
margin: 0;
width: 0;
opacity: 0;
}
.ECM_CheckboxInput:hover{
background: rgba(0,0,0,.05) !important;
}
.ECM_CheckboxInput-Input:focus + .ECM_CheckboxInput-DummyInput{
border: dashed 2px #333333;
}
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput {
background: #333333;
}
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 40%;
height: 4px;
border-radius: 2px;
transform: translate(-6px, 5px) rotateZ(-135deg);
transform-origin: 2px 2px;
background: #FFFFFF;
}
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 66%;
height: 4px;
border-radius: 2px;
transform: translate(-6px, 5px) rotateZ(-45deg);
transform-origin: 2px 2px;
background: #FFFFFF;
}
.ECM_CheckboxInput-DummyInput {
position: relative;
top: 0;
left: 0;
display: block;
width: 20px;
height: 20px;
border: solid 2px transparent;
background: rgba(0,0,0, .1);
border-radius: 4px;
}
.ECM_CheckboxInput-LabelText {
margin-left: 12px;
font-size: 10px;
font-weight: bold;
}