@charset "UTF-8";
/*$main-color:  #2cb696;*/
/*ヘッダー*/
.header-nav {
  max-width: 768px;
  z-index: 100;
  position: fixed;
  top: 0;
  background: white;
  height: 60px;
  width: 100%;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
}

.header-nav .header-list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  margin: 0;
  list-style: none;
  text-align: center;
  height: 60px;
}

.header-nav .logo {
  margin-right: auto;
}

.header-nav .header-item {
  vertical-align: middle;
  display: flex;
  align-items: center;
}

.header-nav .header-item .notice-icon, .header-nav .header-item .user-icon {
  margin: 0 10px;
}

.header-nav .header-item .notice-icon i, .header-nav .header-item .user-icon i {
  display: block;
  height: 100%;
  font-size: 2.4rem;
  color: #888888;
}

.header-nav .header-item .header-logo {
  height: 30px;
  display: block;
}

.header-nav .header-item .notice-icon-on::after {
  content: "●";
  color: #2cb696;
  position: relative;
  top: -15px;
  right: 5px;
  font-size: 1.6rem;
}

.indent-top-header {
  margin-top: 60px;
}

/*ナビバー*/
.navbar-menu {
  height: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
  max-width: 768px;
}

.navbar-menu .navbar-nav {
  position: fixed;
  max-width: 768px;
  z-index: 100;
  bottom: 0;
  background: white;
  height: 60px;
  box-shadow: 0px -4px 2px rgba(0, 0, 0, 0.1);
}

.navbar-menu .navbar-nav .nav-list {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  padding: 0;
  list-style: none;
  text-align: center;
}

.navbar-menu .navbar-nav .nav-list .nav-item {
  height: 60px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.navbar-menu .navbar-nav .nav-list .nav-item .nav-link {
  text-decoration: none;
  color: #CDCDCD;
  font-size: 1rem;
  position: relative;
}

.navbar-menu .navbar-nav .nav-list .nav-item .nav-link i {
  display: block;
  font-size: 2.4rem;
  color: inherit;
}

.navbar-menu .navbar-nav .nav-list .nav-item .nav-link span {
  display: block;
  font-size: inherit;
  margin-top: 4px;
  color: inherit;
}

.navbar-menu .navbar-nav .nav-list .nav-item .nav-active {
  color: #2cb696 !important;
  font-weight: bold;
  font-size: 1.2rem;
}

/*フッター*/
.footer {
  color: white;
  background-color: #2cb696;
}

.footer a {
  color: white;
}

/*welcome*/
.cast,
.welcome {
  background-color: #888888;
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
}

.cast .welcome-wrapper,
.welcome .welcome-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  /*background-color: #ecf0f5;*/
  justify-content: center;
  align-items: center;
}

.cast .welcome-wrapper .top-message,
.welcome .welcome-wrapper .top-message {
  width: 100%;
  max-width: 400px;
  padding: 30px 15px;
  text-align: center;
  margin: 0 auto;
}

.cast .welcome-wrapper .top-message .support,
.welcome .welcome-wrapper .top-message .support {
  width: 100%;
  display: inline-block;
  color: yellow;
  font-weight: bold;
  font-size: 1.6rem;
  margin: 0;
}

.cast .welcome-wrapper .top-message .support .respect,
.welcome .welcome-wrapper .top-message .support .respect {
  display: inline-block;
  font-size: 3rem;
  margin-right: 5px;
  text-emphasis: filled circle　yellow;
  -webkit-text-emphasis: filled circle yellow;
}

.cast .welcome-wrapper .top-message .title,
.welcome .welcome-wrapper .top-message .title {
  width: 100%;
  display: inline-block;
  color: white;
  font-size: 6rem;
  font-weight: 1000;
  border-bottom: 2px solid #2cb696;
  height: auto;
  width: auto;
  line-height: 80px;
  padding-bottom: 10px;
  vertical-align: middle;
}

.cast .welcome-wrapper .top-message .title .golf,
.welcome .welcome-wrapper .top-message .title .golf {
  display: inline-block;
  height: 75px;
  line-height: 80px;
  vertical-align: middle;
  text-align: center;
}

.cast .welcome-wrapper .top-message .title .child,
.cast .welcome-wrapper .top-message .title .lady,
.welcome .welcome-wrapper .top-message .title .child,
.welcome .welcome-wrapper .top-message .title .lady {
  display: inline-block;
  height: 75px;
  width: 75px;
  line-height: 75px;
  vertical-align: middle;
  border-radius: 50%;
  text-align: center;
  background-color: #2cb696;
  margin: 0 4px 0 0;
}

.cast .welcome-wrapper .top-message .title img,
.welcome .welcome-wrapper .top-message .title img {
  width: 100%;
  height: 100%;
  padding: 10px;
  max-width: 400px;
}

.cast .welcome-wrapper .top-message .round,
.welcome .welcome-wrapper .top-message .round {
  width: 100%;
  color: white;
  font-size: 2.6rem;
  font-weight: bold;
}

.cast .welcome-wrapper .top-message .timing-list,
.welcome .welcome-wrapper .top-message .timing-list {
  max-width: 100%;
}

.cast .welcome-wrapper .top-message .timing-list .timing,
.welcome .welcome-wrapper .top-message .timing-list .timing {
  color: white;
  font-size: 1.6rem;
  background: radial-gradient(#2cb696, rgba(44, 182, 150, 0.7));
  padding: 5px;
  font-weight: bold;
  margin-bottom: 20px;
}

.cast .welcome-wrapper .top-image,
.welcome .welcome-wrapper .top-image {
  max-width: 360px;
  width: 100%;
  height: auto;
  text-align: center;
  margin: 0 auto;
  padding: 20px 20px 30px 20px;
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
}

.cast .welcome-wrapper .top-image img,
.welcome .welcome-wrapper .top-image img {
  max-width: 100%;
}

.cast .welcome-wrapper .cast-link,
.welcome .welcome-wrapper .cast-link {
  display: inline-block;
  height: 40px;
  width: 100%;
  color: white;
  font-size: 1.6rem;
  background: transparent;
  line-height: 40px;
  vertical-align: middle;
  border: 1px solid #2cb696;
  font-weight: bold;
  border-radius: 20px;
}

.cast .welcome-wrapper .application-link,
.welcome .welcome-wrapper .application-link {
  display: inline-block;
  height: 40px;
  width: 100%;
  color: white;
  font-size: 1.6rem;
  background: #2cb696;
  line-height: 40px;
  vertical-align: middle;
  font-weight: bold;
  border-radius: 20px;
  margin-bottom: 20px;
}

.cast .cast-wrapper,
.welcome .cast-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: auto;
  overflow: hidden;
}

.cast .cast-wrapper .title,
.welcome .cast-wrapper .title {
  width: 100%;
  height: auto;
  display: inline-block;
  padding: 10px;
}

.cast .cast-wrapper .title img,
.welcome .cast-wrapper .title img {
  width: 100%;
  height: 100%;
  padding: 10px;
  max-width: 200px;
}

.cast .cast-wrapper .subtitle,
.welcome .cast-wrapper .subtitle {
  margin: 0 auto;
  font-size: 2.2rem;
  color: white;
  font-weight: bold;
}

.cast .cast-wrapper .cast-wrapper-box,
.welcome .cast-wrapper .cast-wrapper-box {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 20px;
  border: 1px solid #2cb696;
}

.cast .cast-wrapper .cast-wrapper-box .top-message,
.welcome .cast-wrapper .cast-wrapper-box .top-message {
  padding: 10px;
  height: auto;
  overflow: hidden;
}

.cast .cast-wrapper .cast-wrapper-box .top-message .gentlemans-wrap,
.welcome .cast-wrapper .cast-wrapper-box .top-message .gentlemans-wrap {
  width: 100%;
  height: auto;
  margin: 20px auto;
  padding: 10px 0;
}

.cast .cast-wrapper .cast-wrapper-box .top-message .gentlemans-wrap .gentlemans,
.welcome .cast-wrapper .cast-wrapper-box .top-message .gentlemans-wrap .gentlemans {
  display: inline-block;
  width: 100%;
  color: white;
  font-size: 2.4rem;
  line-height: 40px;
  font-weight: bold;
  margin: 0 auto;
  text-align: center;
}

.cast .cast-wrapper .cast-wrapper-box .top-message .gentlemans-wrap .gentlemans-word,
.welcome .cast-wrapper .cast-wrapper-box .top-message .gentlemans-wrap .gentlemans-word {
  display: inline-block;
  width: 100%;
  font-size: 3.4rem;
  line-height: 40px;
  font-weight: bold;
  margin: 10px auto;
  text-align: center;
  line-height: 0.95em;
  font-weight: bold;
  color: transparent;
  background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
  -webkit-background-clip: text;
}

.cast .cast-wrapper .cast-wrapper-box .top-message .cast-link,
.welcome .cast-wrapper .cast-wrapper-box .top-message .cast-link {
  display: inline-block;
  height: 40px;
  width: 100%;
  color: white;
  font-size: 1.6rem;
  background: #2cb696;
  line-height: 40px;
  vertical-align: middle;
  border: 1px solid #2cb696;
  font-weight: bold;
  border-radius: 20px;
  margin-bottom: 20px;
}

.cast .cast-wrapper .cast-wrapper-box .top-message .application-link,
.welcome .cast-wrapper .cast-wrapper-box .top-message .application-link {
  display: inline-block;
  height: 40px;
  width: 100%;
  color: white;
  font-size: 1.6rem;
  background: transparent;
  line-height: 40px;
  vertical-align: middle;
  border: 1px solid #2cb696;
  font-weight: bold;
  border-radius: 20px;
  margin-bottom: 20px;
}

.cast .question-wrapper,
.welcome .question-wrapper {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3) inset;
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #2cb696;
  margin: 0 auto;
}

.cast .question-wrapper .title,
.welcome .question-wrapper .title {
  font-size: 2.2rem;
  color: white;
  background-color: #555555;
  font-weight: bold;
  padding: 5px 10px;
  margin: 20px 0;
  border-left: solid 5px white;
}

.cast .question-wrapper .questions,
.welcome .question-wrapper .questions {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.cast .question-wrapper .questions .subtitle,
.welcome .question-wrapper .questions .subtitle {
  display: block;
  font-size: 1.6rem;
  color: white;
  font-weight: bold;
  margin: 10px;
  text-align: left;
  width: fit-content;
  float: left;
}

.cast .question-wrapper .questions .question,
.welcome .question-wrapper .questions .question {
  width: 100%;
  max-width: 350px;
  padding: 0;
  margin: 20px 0;
  text-align: center;
}

.cast .question-wrapper .questions .question .balloon,
.welcome .question-wrapper .questions .question .balloon {
  position: relative;
  display: inline-block;
  margin: 20px 0;
  padding: 20px 10px;
  width: 80%;
  max-width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #2cb696;
  background: white;
  border-radius: 50px;
}

.cast .question-wrapper .questions .question .balloon p,
.welcome .question-wrapper .questions .question .balloon p {
  margin: 5px;
  padding: 0;
}

.cast .question-wrapper .questions .question .balloon:before,
.welcome .question-wrapper .questions .question .balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid white;
}

.cast .question-wrapper .questions .question .balloon-image,
.welcome .question-wrapper .questions .question .balloon-image {
  max-width: 150px;
  width: 100%;
  height: auto;
  text-align: center;
  margin: 0 auto;
}

.cast .question-wrapper .questions .question .balloon-image img,
.welcome .question-wrapper .questions .question .balloon-image img {
  max-width: 100%;
}

.cast .question-wrapper .questions .question .text,
.welcome .question-wrapper .questions .question .text {
  display: inline-block;
  margin: 0 auto;
  padding: 10px;
  width: 90%;
  font-size: 1.6rem;
  color: white;
  font-weight: bold;
  margin-bottom: 10px;
  border-top: solid 3px white;
  border-bottom: solid 3px white;
}

.cast .question-wrapper .answer,
.welcome .question-wrapper .answer {
  display: inline-block;
  width: 100%;
  font-size: 3rem;
  color: white;
  margin: 20px auto;
  font-weight: bold;
}

.cast .question-wrapper .answer p,
.welcome .question-wrapper .answer p {
  display: inline-block;
  margin: 0;
}

.cast .application-wrapper,
.welcome .application-wrapper {
  display: inline-block;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 50px 15px;
  background-color: #555555;
}

.cast .application-wrapper img,
.welcome .application-wrapper img {
  display: inline-block;
  width: 100%;
  height: auto;
  max-width: 200px;
  margin-bottom: 20px;
}

.cast .application-wrapper div,
.welcome .application-wrapper div {
  display: flex;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: auto;
  line-height: 40px;
}

.cast .application-wrapper div a,
.welcome .application-wrapper div a {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
  font-size: 2rem;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 5px 10px;
  margin: 0 10px;
  background-color: #2cb696;
  border-radius: 8px;
}

.cast .application-wrapper .login_btn,
.welcome .application-wrapper .login_btn {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  font-size: 2rem;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 5px 10px;
  margin: 20px 10px;
  background-color: #2cb696;
  border-radius: 8px;
}

.cast .feature-wrapper,
.welcome .feature-wrapper {
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #2cb696;
  margin: 0 auto;
}

.cast .feature-wrapper .title,
.welcome .feature-wrapper .title {
  font-size: 2.2rem;
  color: white;
  background-color: #555;
  font-weight: bold;
  padding: 5px 10px;
  margin: 20px 0;
  border-left: solid 5px white;
}

.cast .feature-wrapper .feature-list,
.welcome .feature-wrapper .feature-list {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.cast .feature-wrapper .feature-list .feature-item,
.welcome .feature-wrapper .feature-list .feature-item {
  width: 100%;
  max-width: 340px;
  padding: 10px;
  margin: 10px;
  border-radius: 8px;
  background-color: white;
  margin-bottom: 20px;
}

.cast .feature-wrapper .feature-list .feature-item p,
.welcome .feature-wrapper .feature-list .feature-item p {
  color: #2cb696;
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.cast .feature-wrapper .feature-list .feature-item img,
.welcome .feature-wrapper .feature-list .feature-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
}

.cast .function-wrapper,
.welcome .function-wrapper {
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #2cb696;
}

.cast .function-wrapper .title,
.welcome .function-wrapper .title {
  font-size: 2.2rem;
  color: white;
  background-color: #555555;
  font-weight: bold;
  padding: 5px 10px;
  margin: 20px 0;
  border-left: solid 5px white;
}

.cast .function-wrapper .case-number,
.welcome .function-wrapper .case-number {
  width: fit-content;
  font-size: 3rem;
  color: white;
  font-weight: bold;
  padding: 0;
  margin: 0 auto;
}

.cast .function-wrapper .usecase,
.welcome .function-wrapper .usecase {
  width: 90%;
  font-size: 2.2rem;
  color: white;
  font-weight: bold;
  padding: 5px 10px;
  margin: 0 auto 20px auto;
  border-bottom: double 5px white;
}

.cast .function-wrapper .scroll-item-list,
.welcome .function-wrapper .scroll-item-list {
  width: auto;
  display: flex;
  overflow-x: scroll;
  margin-bottom: 20px;
}

.cast .function-wrapper .scroll-item-list .scroll-item,
.welcome .function-wrapper .scroll-item-list .scroll-item {
  width: 100%;
  margin-right: 10px;
  padding: 10px;
}

.cast .function-wrapper .scroll-item-list .scroll-item .subtitle,
.welcome .function-wrapper .scroll-item-list .scroll-item .subtitle {
  font-size: 2rem;
  color: white;
  font-weight: bold;
  margin-bottom: 10px;
}

.cast .function-wrapper .scroll-item-list .scroll-item .balloon,
.welcome .function-wrapper .scroll-item-list .scroll-item .balloon {
  position: relative;
  display: inline-block;
  margin: 0 auto 20px auto;
  padding: 10px;
  width: 100%;
  height: 100px;
  max-width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #2cb696;
  background: white;
  border-radius: 8px;
}

.cast .function-wrapper .scroll-item-list .scroll-item .balloon p,
.welcome .function-wrapper .scroll-item-list .scroll-item .balloon p {
  margin: 5px;
  padding: 0;
  font-size: 1.6rem;
  text-align: left;
}

.cast .function-wrapper .scroll-item-list .scroll-item .balloon:before,
.welcome .function-wrapper .scroll-item-list .scroll-item .balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid white;
}

.cast .function-wrapper .scroll-item-list .scroll-item img,
.welcome .function-wrapper .scroll-item-list .scroll-item img {
  height: auto;
  max-width: 280px;
  margin-bottom: 30px;
  border-radius: 8px;
}

.cast .function-wrapper .more,
.welcome .function-wrapper .more {
  display: inline-block;
  width: 100%;
  font-size: 3rem;
  color: white;
  margin: 20px auto;
  font-weight: bold;
}

.cast .function-wrapper .more p,
.welcome .function-wrapper .more p {
  display: inline-block;
  margin: 0;
}

.cast .function-wrapper .more .caution,
.welcome .function-wrapper .more .caution {
  font-size: 1.6rem;
}

.cast .howto-wrapper,
.welcome .howto-wrapper {
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #2cb696;
  margin: 0 auto;
}

.cast .howto-wrapper .title,
.welcome .howto-wrapper .title {
  font-size: 2.2rem;
  color: white;
  background-color: #555;
  font-weight: bold;
  padding: 5px 10px;
  margin: 20px 0;
  border-left: solid 5px white;
}

.cast .howto-wrapper .howto-list,
.welcome .howto-wrapper .howto-list {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.cast .howto-wrapper .howto-list .howto-item,
.welcome .howto-wrapper .howto-list .howto-item {
  width: 100%;
  max-width: 340px;
  padding: 10px;
  margin: 10px;
  border-radius: 8px;
  background-color: white;
  margin-bottom: 20px;
  text-align: left;
}

.cast .howto-wrapper .howto-list .howto-item .subtitle,
.welcome .howto-wrapper .howto-list .howto-item .subtitle {
  color: #2cb696;
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.cast .howto-wrapper .howto-list .howto-item img,
.welcome .howto-wrapper .howto-list .howto-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.cast .howto-wrapper .howto-list .howto-item .text,
.welcome .howto-wrapper .howto-list .howto-item .text {
  color: #888;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 10px;
  text-align: left;
}

.cast .reliefpoint-wrapper,
.welcome .reliefpoint-wrapper {
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #2cb696;
}

.cast .reliefpoint-wrapper .title,
.welcome .reliefpoint-wrapper .title {
  font-size: 2.2rem;
  color: white;
  background-color: #555555;
  font-weight: bold;
  padding: 5px 10px;
  margin: 20px 0;
  border-left: solid 5px white;
}

.cast .reliefpoint-wrapper ul,
.welcome .reliefpoint-wrapper ul {
  width: 100%;
  height: auto;
  padding: 5px 20px;
  list-style-type: disc;
  list-style-position: outside;
  text-align: left;
  color: white;
}

.cast .reliefpoint-wrapper ul li,
.welcome .reliefpoint-wrapper ul li {
  font-size: 2rem;
  font-weight: bold;
}

.cast .reliefpoint-wrapper ul li .text,
.welcome .reliefpoint-wrapper ul li .text {
  font-size: 1.4rem;
  background-color: white;
  color: #555;
  padding: 15px;
  border-radius: 8px;
  margin: 10px 0 20px 30px;
}

.cast .reliefpoint-wrapper ul li:before,
.welcome .reliefpoint-wrapper ul li:before {
  font-family: FontAwesome;
  content: '\f00c';
  /* アイコンのunicode */
  margin-right: 10px;
  color: #555;
}

.cast .pricetable-wrapper,
.welcome .pricetable-wrapper {
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #2cb696;
  margin: 0 auto;
  color: #888;
}

.cast .pricetable-wrapper .title,
.welcome .pricetable-wrapper .title {
  font-size: 2.2rem;
  color: white;
  background-color: #555;
  font-weight: bold;
  padding: 5px 10px;
  margin: 20px 0;
  border-left: solid 5px white;
}

.cast .pricetable-wrapper .caution,
.welcome .pricetable-wrapper .caution {
  font-size: 1.2rem;
  color: white;
}

.cast .pricetable-wrapper .member-list,
.welcome .pricetable-wrapper .member-list {
  padding: 10px;
  text-align: left;
}

.cast .pricetable-wrapper .member-list .normal-title,
.welcome .pricetable-wrapper .member-list .normal-title {
  font-size: 2rem;
  background-color: white;
  color: #555;
  padding: 5px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}

.cast .pricetable-wrapper .member-list .pro-title,
.welcome .pricetable-wrapper .member-list .pro-title {
  font-size: 2rem;
  background-color: #111;
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}

.cast .pricetable-wrapper .member-list .price-table,
.welcome .pricetable-wrapper .member-list .price-table {
  padding: 10px;
}

.cast .pricetable-wrapper .member-list .price-table .price-item,
.welcome .pricetable-wrapper .member-list .price-table .price-item {
  font-size: 1.4rem;
  color: white;
  font-weight: bold;
  padding: 5px 10px;
}

.cast .pricetable-wrapper .member-list .price-table .price-item .rank-bronze,
.welcome .pricetable-wrapper .member-list .price-table .price-item .rank-bronze {
  color: brown;
}

.cast .pricetable-wrapper .member-list .price-table .price-item .rank-silver,
.welcome .pricetable-wrapper .member-list .price-table .price-item .rank-silver {
  color: silver;
}

.cast .pricetable-wrapper .member-list .price-table .price-item .rank-gold,
.welcome .pricetable-wrapper .member-list .price-table .price-item .rank-gold {
  color: gold;
}

.cast .pricetable-wrapper .member-list .price-table .price-item .price,
.welcome .pricetable-wrapper .member-list .price-table .price-item .price {
  float: right;
}

.cast .pricetable-wrapper .member-list .price-table .lady-normal,
.welcome .pricetable-wrapper .member-list .price-table .lady-normal {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  color: white;
}

.cast .pricetable-wrapper .member-list .price-table .lady-cast,
.welcome .pricetable-wrapper .member-list .price-table .lady-cast {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: white;
}

.cast .pricetable-wrapper .member-list .price-table .border-bottom,
.welcome .pricetable-wrapper .member-list .price-table .border-bottom {
  border-bottom: 1px solid white;
}

.cast .pricetable-wrapper .member-list .release-event,
.welcome .pricetable-wrapper .member-list .release-event {
  font-size: 2rem;
  background-color: yellow;
  color: #888888;
  padding: 10px;
  margin-bottom: 30px;
  font-weight: bold;
  text-align: center;
}

.cast .detail-wrapper,
.welcome .detail-wrapper {
  display: inline-block;
  width: 100%;
  padding: 15px;
  background-color: #2cb696;
  margin: 0 auto;
  color: white;
}

.cast .detail-wrapper .title,
.welcome .detail-wrapper .title {
  font-size: 2.2rem;
  color: white;
  background-color: #555;
  font-weight: bold;
  padding: 5px 10px;
  margin: 20px 0;
  border-left: solid 5px white;
}

.cast .detail-wrapper .detail-div,
.welcome .detail-wrapper .detail-div {
  width: 100%;
  height: auto;
  padding: 10px;
  text-align: left;
}

.cast .detail-wrapper .detail-div .subtitle,
.welcome .detail-wrapper .detail-div .subtitle {
  font-size: 1.6rem;
  padding: 10px;
  border-bottom: 1px solid white;
  margin-bottom: 10px;
}

.cast .detail-wrapper .detail-div .text,
.welcome .detail-wrapper .detail-div .text {
  font-size: 1.2rem;
  padding: 10px;
  margin-bottom: 20px;
}

.signinPage {
  height: auto;
  min-height: 100%;
  width: 100%;
  padding: 10px;
}

.signinPage .signin-wrapper {
  padding: 20px;
  text-align: center;
  background-color: white;
  border-radius: 8px;
  height: 100%;
  min-height: 100%;
}

.signinPage .signin-wrapper .back_home {
  margin-bottom: 30px;
  font-size: 2rem;
  width: 100%;
  text-align: left;
  color: #2cb696;
}

.signinPage .signin-wrapper .logo {
  margin: 10px auto 20px auto;
}

.signinPage .signin-wrapper .logo img {
  max-height: 40px;
  width: auto;
  height: auto;
}

.signinPage .signin-wrapper .title {
  box-sizing: border-box;
  margin: 0 0 20px;
  font-weight: 700;
  text-align: center;
  transition: all .3s ease-in-out;
  font-size: 32px !important;
}

.signinPage .signin-wrapper .form .form-group .form-control {
  font-size: 1.6rem;
  height: 50px;
}

.signinPage .signin-wrapper .loginBtn {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin: 1rem auto;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 60px;
  vertical-align: middle;
}

.signinPage .signin-wrapper .linkToLogin {
  margin-bottom: 10px;
}

.signinPage .signin-wrapper .linkToLogin a {
  color: #2cb696;
  font-weight: bold;
}

.signinPage .signin-wrapper .divider-login {
  font-size: 1.4rem;
  color: #333;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  height: auto;
  overflow: hidden;
}

.signinPage .signin-wrapper .divider-login hr {
  width: 100%;
  border-bottom: 1px solid whitesmoke;
  border-top: 0;
  height: 1px;
}

.signinPage .signin-wrapper .divider-login span {
  position: absolute;
  font-size: 1.6rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 109px;
  height: 100%;
  background-color: #fff;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CCC;
}

.signinPage .signin-wrapper .loginLine {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  background-color: #00B900;
  color: white;
  border: none;
  line-height: 60px;
  justify-content: center;
  align-items: center;
}

.signinPage .signin-wrapper .loginLine img {
  width: auto;
  height: 100%;
  padding: 5px;
  margin-right: 5px;
}

.signinPage .signin-wrapper .loginLine span {
  font-size: 2rem;
  font-weight: bold;
  vertical-align: middle;
}

.signinPage .signin-wrapper .linkToTerms {
  margin: 30px auto;
}

.signinPage .signin-wrapper .linkToTerms a {
  color: #2cb696;
}

/*register*/
.registerPage {
  height: auto;
  min-height: 100%;
  width: 100%;
  padding: 10px;
}

.registerPage .register-wrapper {
  padding: 20px;
  text-align: center;
  background-color: white;
  border-radius: 8px;
  height: auto;
  min-height: 100%;
}

.registerPage .register-wrapper .back_home {
  margin-bottom: 30px;
  font-size: 2rem;
  width: 100%;
  text-align: left;
  color: #2cb696;
}

.registerPage .register-wrapper .logo {
  margin: 10px auto 20px auto;
}

.registerPage .register-wrapper .logo img {
  max-height: 40px;
  width: auto;
  height: auto;
}

.registerPage .register-wrapper .title {
  box-sizing: border-box;
  margin: 0 0 20px;
  font-weight: 700;
  text-align: center;
  transition: all .3s ease-in-out;
  font-size: 32px !important;
}

.registerPage .register-wrapper .form .form-group .form-control {
  font-size: 1.6rem;
  height: 50px;
}

.registerPage .register-wrapper .linkToTerms {
  margin-bottom: 10px;
}

.registerPage .register-wrapper .linkToTerms a {
  color: #2cb696;
}

.registerPage .register-wrapper .accept_done_btn,
.registerPage .register-wrapper .accept_btn {
  font-size: 1.6rem;
  padding: 10px;
  margin-bottom: 20px;
}

.registerPage .register-wrapper .accept_done_btn i,
.registerPage .register-wrapper .accept_btn i {
  color: #2cb696;
}

.registerPage .register-wrapper .registerBtn {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin: 1rem auto;
  text-align: center;
  background-color: #CDCDCD;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 60px;
  vertical-align: middle;
}

.registerPage .register-wrapper .linkToLogin {
  margin-bottom: 10px;
}

.registerPage .register-wrapper .linkToLogin a {
  color: #2cb696;
  font-weight: bold;
}

.registerPage .register-wrapper .divider-login {
  font-size: 1.4rem;
  color: #333;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  height: auto;
  overflow: hidden;
}

.registerPage .register-wrapper .divider-login hr {
  width: 100%;
  border-bottom: 1px solid whitesmoke;
  border-top: 0;
  height: 1px;
}

.registerPage .register-wrapper .divider-login span {
  position: absolute;
  font-size: 1.6rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 109px;
  height: 100%;
  background-color: #fff;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CCC;
}

.registerPage .register-wrapper .loginLine {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  background-color: #CDCDCD;
  color: white;
  border: none;
  line-height: 60px;
  justify-content: center;
  align-items: center;
}

.registerPage .register-wrapper .loginLine img {
  width: auto;
  height: 100%;
  padding: 5px;
  margin-right: 5px;
}

.registerPage .register-wrapper .loginLine span {
  font-size: 2rem;
  font-weight: bold;
  vertical-align: middle;
}

/*login_check*/
.login_check {
  height: 100%;
  width: 100%;
  padding: 10px;
}

.login_check .login_check-wrapper {
  padding: 20px;
  text-align: center;
  background-color: white;
  border-radius: 8px;
  height: 100%;
}

.login_check .login_check-wrapper .back_home {
  margin-bottom: 30px;
  font-size: 2rem;
  width: 100%;
  text-align: left;
  color: #2cb696;
}

.login_check .login_check-wrapper .logo {
  margin: 10px auto 20px auto;
}

.login_check .login_check-wrapper .logo img {
  max-height: 40px;
  width: auto;
  height: auto;
}

.login_check .login_check-wrapper .title {
  box-sizing: border-box;
  margin: 0 0 20px;
  font-weight: 700;
  text-align: center;
  transition: all .3s ease-in-out;
  font-size: 16px !important;
}

.login_check .login_check-wrapper .title i {
  color: #2cb696;
}

.login_check .login_check-wrapper .home_btn {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  line-height: 60px;
  justify-content: center;
  align-items: center;
}

.login_check .login_check-wrapper .home_btn span {
  font-size: 2rem;
  font-weight: bold;
  vertical-align: middle;
}

/*terms*/
.terms .terms-wrapper {
  margin: 10px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  height: auto;
}

.terms .terms-wrapper .back_home {
  margin-bottom: 30px;
  font-size: 2rem;
  width: 100%;
  text-align: left;
  color: #2cb696;
}

.terms .terms-wrapper .logo {
  margin: 10px auto 20px auto;
}

.terms .terms-wrapper .logo img {
  max-height: 40px;
  width: auto;
  height: auto;
}

.terms .terms-wrapper .title {
  box-sizing: border-box;
  margin: 0 0 20px;
  font-weight: 700;
  text-align: center;
  transition: all .3s ease-in-out;
  font-size: 32px !important;
}

.terms .terms-wrapper .terms-list {
  text-align: left;
  font-size: 1.2rem;
}

.terms .terms-wrapper .terms-list .top {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: auto;
  padding: 10px;
}

.terms .terms-wrapper .terms-list .list-title {
  margin: 20px 0 0 0;
}

.terms .terms-wrapper .terms-list .content {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 0;
  padding: 0 10px 0 20px;
  list-style-type: decimal;
}

.terms .terms-wrapper .terms-list .content .list-item {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 0;
  padding: 0 10px 0 20px;
  list-style-type: decimal;
}

.terms .terms-wrapper .terms-list .content .list-item li {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 0;
  padding: 0;
  list-style-type: decimal;
}

.terms .terms-wrapper .terms-list .content .list-item:marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}

/*privacy*/
.privacy .privacy-wrapper {
  margin: 10px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  height: auto;
}

.privacy .privacy-wrapper .back_home {
  margin-bottom: 30px;
  font-size: 2rem;
  width: 100%;
  text-align: left;
  color: #2cb696;
}

.privacy .privacy-wrapper .logo {
  margin: 10px auto 20px auto;
}

.privacy .privacy-wrapper .logo img {
  max-height: 40px;
  width: auto;
  height: auto;
}

.privacy .privacy-wrapper .title {
  box-sizing: border-box;
  margin: 0 0 20px;
  font-weight: 700;
  text-align: center;
  transition: all .3s ease-in-out;
  font-size: 32px !important;
}

.privacy .privacy-wrapper .privacy-list {
  text-align: left;
  font-size: 1.2rem;
}

.privacy .privacy-wrapper .privacy-list .top {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: auto;
  padding: 10px;
}

.privacy .privacy-wrapper .privacy-list .decimal {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 0;
  padding: 0 10px 0 20px;
  list-style-type: decimal;
}

.privacy .privacy-wrapper .privacy-list .decimal li {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  padding: 0;
  margin: 20px 0;
  list-style-type: decimal;
}

.privacy .privacy-wrapper .privacy-list .decimal li::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}

.privacy .privacy-wrapper .privacy-list .decimal p {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  list-style-type: decimal;
  text-align: left;
  padding: 0;
  margin: auto;
}

.privacy .privacy-wrapper .privacy-list .decimal .head .lower-roman {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 0;
  padding: 0 10px 0 20px;
  list-style-type: lower-roman;
}

/*clsoe*/
.user-close {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

.user-close .close-wrapper {
  background-color: white;
  height: auto;
}

.user-close .close-wrapper .close-body {
  padding: 20px;
}

.user-close .close-wrapper .title {
  box-sizing: border-box;
  margin: 0 0 20px;
  font-weight: 700;
  text-align: center;
  transition: all .3s ease-in-out;
  font-size: 32px !important;
}

.user-close .close-wrapper .point-wrapper {
  text-align: left;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.user-close .close-wrapper .point-wrapper .point-remain {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.user-close .close-wrapper .terms-list {
  text-align: left;
  font-size: 1.2rem;
  margin: 20px 0;
}

.user-close .close-wrapper .terms-list .top {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: auto;
  padding: 10px;
}

.user-close .close-wrapper .terms-list .list-title {
  margin: 10px 0;
}

.user-close .close-wrapper .terms-list .content {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 0;
  padding: 0 10px 0 20px;
  list-style-type: decimal;
}

.user-close .close-wrapper .terms-list .content .list-item {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 0;
  padding: 0 10px 0 20px;
  list-style-type: decimal;
}

.user-close .close-wrapper .terms-list .content .list-item li {
  font-size: 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  text-align: left;
  margin: 10px 0 0 0;
  padding: 0;
  list-style-type: decimal;
}

.user-close .close-wrapper .terms-list .content .list-item:marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}

.user-close .close-wrapper .btn_user_destroy {
  display: inline-block;
  height: 40px;
  width: 100%;
  margin-bottom: 20px;
  background-color: #2cb696;
  border-radius: 4px;
  color: white;
  font-size: 1.8rem;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  font-weight: bold;
}

.user-close .close-wrapper .btn_user_destroy:disabled {
  background: #999 !important;
}

/*toppage*/
.toppage {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.toppage .news-wrapper, .toppage .notice-wrapper {
  padding: 10px;
  text-align: left;
  height: auto;
  overflow: hidden;
}

.toppage .news-wrapper ul, .toppage .notice-wrapper ul {
  height: auto;
  overflow: hidden;
  padding: 10px;
  background-color: whitesmoke;
}

.toppage .news-wrapper ul li, .toppage .notice-wrapper ul li {
  margin-bottom: 5px;
}

.toppage .news-wrapper ul li span, .toppage .notice-wrapper ul li span {
  color: #2cb696;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.toppage .news-wrapper ul .link-text, .toppage .notice-wrapper ul .link-text {
  font-size: 1.2rem;
}

.toppage .setting-wrapper {
  padding: 10px 20px;
  text-align: left;
}

.toppage .setting-wrapper .my-account {
  width: 100%;
  display: flex;
  padding: 30px 10px;
}

.toppage .setting-wrapper .my-account .user-icon {
  height: auto;
  width: 30%;
  text-align: center;
}

.toppage .setting-wrapper .my-account .user-icon img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.toppage .setting-wrapper .my-account .user-info {
  width: 70%;
}

.toppage .setting-wrapper .my-account .user-info .badge {
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
  background-color: #2cb696;
}

.toppage .setting-wrapper .my-account .user-info .link-text {
  font-size: 1.2rem;
}

.toppage .setting-wrapper .my-account .user-info .review-average i {
  color: #ffdf88;
}

.toppage .setting-wrapper .my-account .user-info .profile_edit_btn {
  border: none;
  background-color: transparent;
  padding: 0;
  margin-bottom: 10px;
  outline: none;
}

.toppage .setting-wrapper .important-info {
  width: 100%;
  height: auto;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #2cb696;
}

.toppage .setting-wrapper .important-info p:last-child {
  margin: 0;
}

.toppage .setting-wrapper .my-info {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.toppage .setting-wrapper .my-info .icon-list {
  display: flex;
  justify-content: space-evenly;
}

.toppage .setting-wrapper .my-info .icon-list .icon {
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  height: auto;
  width: 45%;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.toppage .setting-wrapper .my-info .icon-list .icon .licence-check {
  font-size: 3rem;
  padding-bottom: 10px;
}

.toppage .setting-wrapper .my-info .icon-list .icon p {
  margin: 0;
}

.toppage .setting-wrapper .my-info .icon-list .icon .title {
  font-size: 1.6rem;
}

.toppage .setting-wrapper .my-info .icon-list .icon .point {
  padding: 6px 0;
  font-size: 1.6rem;
}

.toppage .setting-wrapper .my-info .icon-list .icon .link-text {
  font-size: 1.2rem;
  padding-top: 5px;
}

.toppage .setting-wrapper .my-info .icon-list .icon .pt-10 {
  padding-top: 10px;
}

.toppage .setting-wrapper .my-info .info-list {
  padding: 10px;
}

.toppage .setting-wrapper .my-info .info-list .btn_green {
  border: none;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  width: 100%;
  text-align: center;
  background-color: #2cb696;
  outline: none;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  font-weight: bold;
}

.toppage .setting-wrapper .my-info .info-list .gray {
  background-color: #999;
}

.toppage .setting-wrapper .toppage-menu {
  padding: 10px;
}

.toppage .setting-wrapper .toppage-menu .icon-list {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.toppage .setting-wrapper .toppage-menu .icon-list .icon {
  width: 30%;
  text-align: center;
}

.toppage .setting-wrapper .toppage-menu .icon-list .icon i {
  position: relative;
  font-size: 3rem;
}

.toppage .setting-wrapper .toppage-menu .icon-list .icon i .notice {
  position: absolute;
  top: -5px;
  right: -10px;
  color: #2cb696;
  font-size: 2rem;
}

.toppage .setting-wrapper .toppage-menu .icon-list .icon p {
  padding: 5px;
}

.icon-wrapper {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 10px;
  color: white;
}

.icon-wrapper .balloon {
  width: 100%;
  border-radius: 8px;
  text-align: left;
  height: auto;
  position: relative;
  display: inline-block;
  padding: 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #2cb696;
}

.icon-wrapper .balloon .header {
  color: white;
  margin: 0;
  padding: 0 10px 0 0;
  font-size: 2rem;
}

.icon-wrapper .balloon .body {
  display: flex;
}

.icon-wrapper .balloon .body img {
  height: 60px;
  width: 60px;
  border-radius: 4px;
}

.icon-wrapper .balloon .body p {
  color: white;
  margin: 0;
  padding: 10px;
}

.icon-wrapper .balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #2cb696;
}

.newspost-page {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.newspost-page .news-wrapper, .newspost-page .notice-wrapper {
  padding: 10px;
  text-align: left;
}

.newspost-page .news-wrapper ul, .newspost-page .notice-wrapper ul {
  padding: 20px;
  background-color: whitesmoke;
}

.newspost-page .news-wrapper ul li, .newspost-page .notice-wrapper ul li {
  margin-bottom: 5px;
}

.newspost-page .news-wrapper ul li span, .newspost-page .notice-wrapper ul li span {
  color: #2cb696;
}

.modal-license .img-container {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.modal-license .img-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.back-home {
  height: auto;
  text-align: left;
  overflow: hidden;
  padding: 20px;
  width: 100%;
  color: #2cb696;
  font-size: 1.8rem;
}

.lisence {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.lisence .license-wrapper {
  width: 100%;
  background-color: white;
  height: auto;
  text-align: left;
  padding: 10px;
}

.lisence .license-wrapper .license-caution {
  padding: 10px;
}

.lisence .license-wrapper ul, .lisence .license-wrapper li {
  list-style: unset;
}

.lisence .result, .lisence .myphoto {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.lisence .result img, .lisence .myphoto img {
  background-color: whitesmoke;
  padding: 10px;
  border-radius: 4px;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.lisence .btn_green {
  display: inline-block;
  height: 40px;
  width: 100%;
  margin-bottom: 20px;
  background-color: #2cb696;
  border-radius: 4px;
  color: white;
  font-size: 1.8rem;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  font-weight: bold;
}

.lisence .gray {
  background-color: #999;
}

/*通知*/
.notice-page, .newspost-page {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.notice-wrapper,
.newspost-wrapper {
  overflow-y: scroll;
}

.notice-wrapper .list-group .list-group-item,
.newspost-wrapper .list-group .list-group-item {
  width: 100%;
  text-align: left;
  display: flex;
}

.notice-wrapper .list-group .list-group-item .user-icon,
.newspost-wrapper .list-group .list-group-item .user-icon {
  display: inline-block;
  width: 20%;
  text-align: center;
}

.notice-wrapper .list-group .list-group-item .user-icon img,
.newspost-wrapper .list-group .list-group-item .user-icon img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.notice-wrapper .list-group .list-group-item .notice-info,
.newspost-wrapper .list-group .list-group-item .notice-info {
  display: inline-block;
  width: 80%;
  padding: 0 5px;
}

.notice-wrapper .list-group .list-group-item .notice-info .datetime,
.newspost-wrapper .list-group .list-group-item .notice-info .datetime {
  font-size: 1rem;
}

.notice-wrapper .list-group .list-group-item .notice-info .message,
.newspost-wrapper .list-group .list-group-item .notice-info .message {
  font-size: 1.2rem;
}

.notice-wrapper .list-group .list-group-item .notice-info .badge,
.newspost-wrapper .list-group .list-group-item .notice-info .badge {
  background-color: #2cb696;
  color: white;
}

.notice-wrapper .list-group .list-group-item .newspost-info,
.newspost-wrapper .list-group .list-group-item .newspost-info {
  display: inline-block;
  width: 100%;
  padding: 0 5px;
}

.notice-wrapper .list-group .list-group-item .newspost-info .datetime,
.newspost-wrapper .list-group .list-group-item .newspost-info .datetime {
  font-size: 1rem;
}

.notice-wrapper .list-group .list-group-item .newspost-info .text,
.newspost-wrapper .list-group .list-group-item .newspost-info .text {
  font-size: 1rem;
  color: #999;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.newspost-show {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.newspost-show .newspost-wrapper {
  text-align: left;
  padding: 10px;
}

.newspost-show .newspost-wrapper .newspost-header {
  margin-bottom: 10px;
  border-bottom: 1px solid #2cb696;
}

.newspost-show .newspost-wrapper .text {
  padding: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*スケジュール*/
.schedule-page {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.schedule-page .schedule-wrapper {
  overflow-y: scroll;
  text-align: left;
}

.schedule-page .schedule-wrapper .month {
  margin: 20px;
  font-size: 2.6rem;
}

.schedule-page .schedule-wrapper .schedules {
  padding: 10px;
}

.schedule-page .schedule-wrapper .schedules .schedule {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.schedule-page .schedule-wrapper .schedules .schedule .day {
  width: 50%;
  text-align: left;
}

.schedule-page .schedule-wrapper .schedules .schedule .schedule-btns {
  width: 50%;
  text-align: right;
}

.schedule-page .schedule-wrapper .schedules .schedule .schedule-btns .schedule-btn {
  border-radius: 3px;
  padding: 5px 20px;
  margin-right: 10px;
  background-color: whitesmoke;
}

.schedule-page .schedule-wrapper .schedules .schedule .schedule-btns .selected {
  background: #2cb696;
  color: white;
}

.profile-wrapper .user-schedule-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.profile-wrapper .user-schedule-wrapper .schedule-header {
  margin-bottom: 8px;
  margin-left: 8px;
  font-size: 2rem;
  font-weight: bold;
  color: #2cb696;
  text-align: left;
}

.profile-wrapper .user-schedule-wrapper .schedules {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 10px;
}

.profile-wrapper .user-schedule-wrapper .schedules .schedule {
  display: inline-block;
  width: auto;
  margin: 0 10px;
}

.profile-wrapper .user-schedule-wrapper .schedules .schedule .month {
  font-size: 3rem;
  color: white;
  background-color: #2cb696;
  border-radius: 4px;
  padding: 10px;
}

.profile-wrapper .user-schedule-wrapper .schedules .schedule .day {
  font-weight: bold;
}

.profile-wrapper .user-schedule-wrapper .schedules .schedule .ok {
  font-size: 3rem;
  color: #2cb696;
  padding: 10px;
}

.profile-wrapper .user-schedule-wrapper .schedules .schedule .ng {
  font-size: 3rem;
  padding: 10px;
}

/*設定*/
.setting-page {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.setting-wrapper {
  overflow-y: hidden;
}

/*HOME*/
.home {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.home .new-user-wrapper {
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  height: auto;
}

.home .new-user-wrapper .cast-users {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 0px 10px;
  margin: 0px;
  height: 100%;
}

.home .new-user-wrapper .cast-users .cast-user {
  display: inline-block;
  width: 60px;
  margin: 0 5px;
}

.home .new-user-wrapper .cast-users .cast-user .card {
  border-radius: 3px;
  font-size: 1.2rem;
  position: relative;
  height: 100%;
  background-color: transparent;
  border: none;
}

.home .new-user-wrapper .cast-users .cast-user .card .card-img-top {
  width: 60px;
  height: 60px;
  max-width: 60px;
  border: 1px solid whitesmoke;
  object-fit: cover;
  border-radius: 50%;
}

.home .new-user-wrapper .cast-users .cast-user .card .border-green {
  border: 2px solid #2cb696;
  padding: 2px;
}

.home .new-user-wrapper .cast-users .cast-user .card .card-body {
  height: auto;
  padding: 2px 4px;
  text-align: center;
}

.home .new-user-wrapper .cast-users .cast-user .card .card-body .card-title {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image_frame {
  max-width: 768px;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10000;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.image_frame .image_close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 26px;
}

.image_frame .image_preview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.image_frame .image_preview .timeline_image {
  max-width: 100%;
  max-height: 100%;
}

.timeline-wrapper {
  width: 100%;
  height: auto;
  background-color: white;
  padding: 0;
}

.timeline-wrapper .timeline-header {
  margin-bottom: 18px;
  margin-left: 18px;
  font-size: 2rem;
  font-weight: bold;
  color: #2cb696;
  text-align: left;
}

.timeline-wrapper .timeline_post_loading {
  display: inline-block;
  line-height: 100px;
  vertical-align: middle;
  text-align: center;
  border-radius: 0 !important;
  border-left: none;
  border-right: none;
  height: 100px;
  color: #888888;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  background-color: white;
  margin: 0;
}

.timeline-wrapper .timeline_post_list {
  text-align: left;
  font-size: 1.2rem;
  overflow: hidden;
  height: auto;
}

.timeline-wrapper .timeline_post_list .timeline_posts {
  margin: 0;
  text-align: left;
  font-size: 1.2rem;
  background-color: white;
  overflow: hidden;
  height: auto;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post {
  text-align: left;
  border-radius: 0 !important;
  border-left: none;
  border-right: none;
  padding: 10px 10px;
  height: auto;
  color: #888888;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  background-color: white;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_left {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_left .timeline-icon {
  display: inline-block;
  border: 1px solid whitesmoke;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right {
  width: 79%;
  display: inline-block;
  vertical-align: top;
  padding: 0 10px;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info {
  margin: 0;
  padding: 0;
  font-weight: bold;
  width: 100%;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info .btn_timeline_like_box {
  position: relative;
  color: #888888;
  font-size: 1.6rem;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info .btn_timeline_like_box button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info .btn_timeline_like_box .timeline_like_count {
  display: inline-block;
  margin-left: 5px;
  font-size: 1.6rem;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-date {
  color: #2cb696;
  margin: 0 0 10px 0;
  padding: 0;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-message {
  padding: 0;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-video {
  width: 100%;
  height: 400px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  overflow: hidden;
  background-color: black;
  vertical-align: middle;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-video video {
  width: 100%;
  height: 400px;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .image-link {
  display: inline-block;
  width: 100%;
  height: 400px;
  background-color: black;
  border-radius: 5px;
}

.timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .image-link .timeline-image {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 400px;
  background-size: contain;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.timeline-wrapper .timeline_post_list .timeline_postslast-child {
  border-bottom: none;
}

.timeline-wrapper .infinite-scroll-request {
  width: 100%;
  height: 50px;
}

.tweet_btn {
  position: fixed;
  bottom: 90px;
  right: 30px;
  height: 60px;
  width: 60px;
  background-color: #2cb696;
  color: white;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  z-index: 101;
  outline: none;
}

.tweet_btn i {
  font-size: 3rem;
  color: white;
}

.tweet-modal .modal-fill .modal-content {
  max-width: 768px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0;
  border-radius: 0;
}

.tweet-modal .modal-fill .modal-content .modal-header {
  border-bottom: 1px solid #2cb696;
  height: 74px;
}

.tweet-modal .modal-fill .modal-content .modal-header .btn_post_timeline_close {
  margin: -1rem auto -1rem -1rem;
  font-size: 3rem;
}

.tweet-modal .modal-fill .modal-content .modal-header .btn_post_timeline_image {
  margin: 0 5px;
  padding: 5px 0;
}

.tweet-modal .modal-fill .modal-content .modal-header .btn_post_timeline_image i {
  border: none;
  background-color: white;
  color: #2cb696;
  font-size: 3rem;
  padding: 0 20px;
}

.tweet-modal .modal-fill .modal-content .modal-header .btn_post_timeline {
  border: none;
  background-color: #2cb696;
  color: white;
  border-radius: 20px;
  margin: 0 8px;
  font-size: 2rem;
  padding: 5px 20px;
}

.tweet-modal .modal-fill .modal-content .modal-body {
  overflow: auto;
}

.tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper {
  text-align: center;
  padding: 20px 0;
}

.tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper i {
  font-size: 2.2rem;
}

.tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper .post_timeline_message {
  width: 100%;
  line-height: 20px;
  border: none;
  background-color: white;
  border-radius: 8px;
  font-size: 2rem;
  color: #888888;
}

.tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper .timeline_post_preview {
  position: relative;
  height: auto;
  width: auto;
  text-align: center;
  margin: 0 auto;
}

.tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper .timeline_post_preview .timeline_post_image_preview, .tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper .timeline_post_preview .timeline_post_video_preview {
  text-align: center;
  width: auto;
  height: auto;
  margin: 30px auto;
  max-width: 90%;
}

.tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper .timeline_post_preview .timeline_post_preview_close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  background-color: white;
  border-radius: 50%;
  height: 26px;
  width: 26px;
}

.tweet-modal .modal-fill .modal-content .modal-body .timeline_post_wrapper .timeline_post_preview .timeline_post_preview_close i {
  color: #2cb696;
  font-size: 2.6rem;
}

/*探す*****************************************/
.search, .favorite, .foot, .ranking {
  text-align: center;
  max-width: 768px;
  margin-top: 130px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.search .banner-wrapper, .favorite .banner-wrapper, .foot .banner-wrapper, .ranking .banner-wrapper {
  padding: 20px 10px;
  background-color: white;
}

.search .banner-wrapper p, .favorite .banner-wrapper p, .foot .banner-wrapper p, .ranking .banner-wrapper p {
  background-color: #2cb696;
  border-radius: 3px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  color: white;
  margin: 0;
  font-size: 1.6rem;
}

.test {
  height: auto !important;
}

.test .search {
  text-align: center;
  max-width: 768px;
  margin: 0 auto !important;
  padding-top: 40px !important;
  padding-bottom: 60px !important;
  position: static !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto;
}

.test .search-header {
  height: 40px !important;
  margin: 0;
  right: 0;
  left: 0;
}

.test .navbar-menu {
  height: auto;
}

.test .new-cast-users .cast-user {
  width: 100px !important;
  height: 100px !important;
}

.test .new-cast-users .cast-user .card {
  border-radius: 20px !important;
}

.test .new-cast-users .cast-user img {
  width: 100px !important;
  height: 100px !important;
  border-radius: 20px !important;
}

.test .new-cast-users .cast-user .card-img-overlay {
  bottom: 0px !important;
  border-radius: 0 0 20px 20px !important;
}

.test .pickup_user img {
  height: 180px !important;
  border-radius: 20px !important;
}

.test .pickup_user .card-body {
  height: 40px !important;
}

.test .pickup_user .card-img-overlay {
  bottom: 40px !important;
  border-radius: 0 0 20px 20px !important;
}

/*search*/
.search-header {
  max-width: 768px;
  background-color: white;
  height: 130px;
  width: 100%;
  position: fixed;
  z-index: 100;
  padding: 0;
  top: 0;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
}

.search-header .user-search-form {
  text-align: left;
  width: 100%;
  padding: 20px;
}

.search-header .user-search-form .search-area-select {
  /*入力部*/
  background-color: whitesmoke;
  color: #888888;
  width: 100%;
  border: none;
  border-radius: 3px;
  height: 50px;
  font-size: 1.4rem;
}

.search-header .search-tab-btns {
  text-align: center;
  color: #888888;
  font-size: 1.4rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.search-header .search-tab-btns .search-tab-btn {
  display: inline-block;
  width: calc(100% / 4);
  background-color: white;
  padding: 10px 0 5px 0;
  border-radius: unset;
  box-shadow: none;
}

.search-header .search-active-btn {
  border-bottom: 3px solid #2cb696;
  font-weight: bold;
}

.search-header .favorite-tab-btns,
.search-header .foot-tab-btns,
.search-header .ranking-tab-btns {
  display: flex;
}

.search-header .favorite-tab-btns a,
.search-header .foot-tab-btns a,
.search-header .ranking-tab-btns a {
  width: 50%;
  border-radius: 3px;
  float: left;
  margin: 5px;
  padding: 5px;
}

.search-header .favorite-tab-btns a div,
.search-header .foot-tab-btns a div,
.search-header .ranking-tab-btns a div {
  font-size: 2.0rem;
}

.search-header .favorite-tab-btns a p,
.search-header .foot-tab-btns a p,
.search-header .ranking-tab-btns a p {
  margin: 0;
}

.search-header .favorite-active-btn, .search-header .foot-active-btn, .search-header .ranking-active-btn {
  background-color: #2cb696 !important;
  color: white !important;
}

.search .new-cast-user-wrapper, .feature .new-cast-user-wrapper {
  width: 100%;
  height: auto;
  background-color: white;
  padding: 5px;
  text-align: left;
  border-top: 5px solid whitesmoke;
}

.search .new-cast-user-wrapper .new-cast-users, .feature .new-cast-user-wrapper .new-cast-users {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin: 0px;
  padding: 5px;
  height: 100%;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user, .feature .new-cast-user-wrapper .new-cast-users .cast-user {
  /* 横スクロール用 */
  display: inline-block;
  width: 130px;
  margin: 0 5px 0 0;
  background-color: white;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card {
  border-radius: 3px;
  font-size: 1.2rem;
  background-color: white;
  position: relative;
  height: 100%;
  border: none;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-img-top, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-img-top {
  border-radius: 3px 3px 0 0;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay {
  height: 30px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  position: absolute;
  bottom: 60px;
  top: unset;
  left: 0;
  padding: 0 4px;
  margin: 0;
  line-height: 30px;
  text-align: left;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .badge, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .badge {
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .profile-userrank, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .profile-userscore, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .profile-userscore {
  background-color: #555;
  color: white;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-body, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-body {
  height: 60px;
  padding: 2px 4px;
  text-align: left;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-body .card-title, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-body .card-title {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user .card-body .card-text, .feature .new-cast-user-wrapper .new-cast-users .cast-user .card-body .card-text {
  margin: 3px 0;
  font-size: 1rem;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search .new-cast-user-wrapper .new-cast-users .cast-user i, .feature .new-cast-user-wrapper .new-cast-users .cast-user i {
  color: white;
  margin-right: 3px;
}

.search .pickup-user-wrapper, .feature .pickup-user-wrapper {
  padding: 5px;
  background-color: white;
  height: auto;
  text-align: left;
  border-top: 1px solid whitesmoke;
}

.search .pickup-user-wrapper .pickup_users, .feature .pickup-user-wrapper .pickup_users {
  padding-left: 15px;
  padding-right: 15px;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card, .feature .pickup-user-wrapper .pickup_users .pickup_user .card {
  border-radius: 3px;
  font-size: 1.2rem;
  background-color: white;
  position: relative;
  border: none;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-top, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-top {
  border-radius: 3px 3px 0 0;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay {
  height: 30px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  position: absolute;
  bottom: 60px;
  top: unset;
  left: 0;
  padding: 0 4px;
  margin: 0;
  line-height: 30px;
  text-align: left;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userrank, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userscore, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userscore {
  background-color: #555;
  color: white;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userscore i, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userscore i {
  color: white;
  margin-right: 4px;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .badge, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .badge {
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-body, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-body {
  height: 60px;
  padding: 2px 4px;
  text-align: left;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-body .card-title, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-body .card-title {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .card .card-body .card-text, .feature .pickup-user-wrapper .pickup_users .pickup_user .card .card-body .card-text {
  margin: 3px 0;
  font-size: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 10px;
  right: 10px;
  background-color: white;
  border-radius: 50%;
  padding: 0;
  outline: none;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .ikitai, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .ikitai {
  font-size: 1rem;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .fa-heart, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .fa-heart {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: #CDCDCD;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .faved, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .faved {
  color: #e0245e !important;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 60px;
  right: 10px;
  padding: 0;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up i, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up i {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: white;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 100px;
  right: 10px;
  padding: 0;
}

.search .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down i, .feature .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down i {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: white;
}

.favorite .favorite-user-wrapper {
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;
  height: auto;
  text-align: left;
}

.favorite .favorite-user-wrapper .title {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.favorite .favorite-user-wrapper .title p {
  font-size: 2rem;
  font-weight: bold;
  text-align: left;
  margin: 20px 0 10px 0;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card {
  border-radius: 3px;
  font-size: 1.2rem;
  background-color: white;
  position: relative;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-img-top {
  border-radius: 3px 3px 0 0;
  width: 100%;
  height: 200px;
  border: 1px solid whitesmoke;
  object-fit: cover;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-img-overlay {
  height: 30px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  position: absolute;
  bottom: 60px;
  top: unset;
  left: 0;
  padding: 0 4px;
  margin: 0;
  line-height: 30px;
  text-align: left;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-img-overlay .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-img-overlay .profile-userscore {
  background-color: #555;
  color: white;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-img-overlay .badge {
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-img-overlay i {
  color: white;
  margin-right: 4px;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-body {
  height: 60px;
  padding: 2px 4px;
  text-align: left;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-body .card-title {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .card .card-body .card-text {
  margin: 3px 0;
  font-size: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .btn_user_favorite {
  position: absolute;
  border: none;
  display: inline-block;
  height: 32px;
  width: 32px;
  text-align: center;
  top: 10px;
  right: 10px;
  background-color: white;
  border-radius: 50%;
  padding: 0;
  outline: none;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .btn_user_favorite i {
  font-size: 1.6rem;
  line-height: 32px;
  vertical-align: middle;
  color: #CDCDCD;
}

.favorite .favorite-user-wrapper .favorite_users .favorite_user .btn_user_favorite .faved {
  color: #e0245e !important;
}

/*足跡*/
.foot-wrapper .list-group .list-group-item {
  width: 100%;
  text-align: left;
  display: flex;
}

.foot-wrapper .list-group .list-group-item .user-icon {
  display: inline-block;
  width: 20%;
  text-align: center;
}

.foot-wrapper .list-group .list-group-item .user-icon img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.foot-wrapper .list-group .list-group-item .user-info {
  display: inline-block;
  width: 80%;
  padding: 0 5px;
}

.foot-wrapper .list-group .list-group-item .user-info .user-title {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
}

.foot-wrapper .list-group .list-group-item .user-info .user-title .badge {
  background-color: #2cb696;
  color: white;
}

.foot-wrapper .list-group .list-group-item .user-info .user-introduction {
  font-size: 1.2rem;
}

.foot-wrapper .list-group .list-group-item .user-info .btn_user_matching {
  border: none;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  width: 100%;
  text-align: center;
  background-color: #2cb696;
  outline: none;
  margin: 10px 0 0 0;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  font-weight: bold;
}

.foot-wrapper .list-group .list-group-item .user-info .btn_user_matching i {
  font-size: 1.8rem;
  color: white;
  margin: 0 10px;
}

/*ランキング*/
.ranking .list-group .rank_score_user-1 {
  display: block !important;
  text-align: center !important;
}

.ranking .list-group .rank_score_user-1 .list-number-wrap {
  display: block !important;
}

.ranking .list-group .rank_score_user-1 .list-icon-wrap {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.ranking .list-group .rank_score_user-1 .list-icon-wrap a img {
  display: inline-block;
  height: 200px !important;
  width: 200px !important;
  margin: 0 !important;
  border-radius: 50%;
  margin: 0 auto !important;
  object-fit: cover !important;
}

.ranking .list-group .rank_score_user-1 .list-text-wrap {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: 10px auto !important;
}

.ranking .list-group .rank_score_user-1 .list-number-wrap {
  display: block !important;
  background-color: gold;
  color: white;
}

.ranking .list-group .rank_score_user-2 .list-number-wrap {
  display: block !important;
  background-color: silver;
  color: white;
}

.ranking .list-group .rank_score_user-3 .list-number-wrap {
  display: block !important;
  background-color: brown;
  color: white;
}

.ranking .list-group .list-group-item {
  width: 100%;
  text-align: left;
  display: flex;
}

.ranking .list-group .list-group-item .list-number-wrap {
  height: 30px !important;
  width: 30px !important;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  font-size: 2rem;
}

.ranking .list-group .list-group-item .list-icon-wrap {
  display: inline-block;
  width: 25%;
  text-align: center;
}

.ranking .list-group .list-group-item .list-icon-wrap a img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
}

.ranking .list-group .list-group-item .list-text-wrap {
  max-width: 60%;
  display: inline-block;
  width: auto;
}

.ranking .list-group .list-group-item .list-text-wrap .count {
  font-size: 2.0rem;
  color: #2cb696;
}

.ranking .list-group .list-group-item .list-text-wrap .title {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
}

.ranking .list-group .list-group-item .list-text-wrap p {
  font-size: 1.2rem;
}

.ranking .list-group .list-group-item .list-text-wrap .badge {
  background-color: #2cb696;
  color: white;
  font-size: 1.2rem;
}

.ranking .list-group .list-group-item .list-text-wrap .count {
  background-color: #555;
  color: white;
  font-size: 1.2rem;
}

/*ready*/
.ready {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ready i {
  font-size: 6.2rem;
  color: #999999;
}

.ready p {
  font-size: 2.6rem;
  color: #999999;
  font-weight: bold;
}

/*呼ぶ*/
.round-header {
  max-width: 768px;
  background-color: white;
  height: 130px;
  width: 100%;
  position: fixed;
  z-index: 100;
  padding: 0;
  top: 0;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
}

.round-header .round-search-form {
  text-align: left;
  width: 100%;
  padding: 20px;
}

.round-header .round-search-form .round_search_btn {
  /*入力部*/
  background-color: whitesmoke;
  color: #888888;
  width: 100%;
  border: none;
  border-radius: 3px;
  height: 50px;
  font-size: 1.4rem;
}

.round-header .favorite-user-wrapper {
  background-color: white;
  height: auto;
  padding: 0px 10px 5px 10px;
  text-align: left;
}

.round-header .favorite-user-wrapper .title {
  margin-bottom: 3px;
}

.round-header .favorite-user-wrapper .cast-users {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0px;
  height: 100%;
}

.round-header .favorite-user-wrapper .cast-users .cast-user {
  display: inline-block;
  width: 40px;
  margin: 0 5px;
}

.round-header .favorite-user-wrapper .cast-users .cast-user .card {
  border-radius: 3px;
  font-size: 1rem;
  position: relative;
  height: 100%;
  background-color: transparent;
  border: none;
}

.round-header .favorite-user-wrapper .cast-users .cast-user .card .card-img-top {
  width: 40px;
  height: 40px;
  max-width: 40px;
  object-fit: cover;
  border-radius: 50px;
}

.round-header .favorite-user-wrapper .cast-users .cast-user .card .card-body {
  height: auto;
  padding: 2px 4px;
  text-align: center;
}

.round-header .favorite-user-wrapper .cast-users .cast-user .card .card-body .card-title {
  font-size: 1rem;
  margin: 0;
  font-weight: bold;
  vertical-align: middle;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.round-header .round-tab-btns {
  text-align: center;
  color: #888888;
  font-size: 1.4rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.round-header .round-tab-btns .round-tab-btn {
  display: inline-block;
  width: 33%;
  background-color: white;
  padding: 10px 0 5px 0;
  border-radius: unset;
  box-shadow: none;
}

.round-header .round-active-btn {
  border-bottom: 3px solid #2cb696;
  font-weight: bold;
}

.round-header .myround-tab-btns {
  display: flex;
}

.round-header .myround-tab-btns a {
  width: 50%;
  border-radius: 3px;
  float: left;
  margin: 5px;
  padding: 5px;
}

.round-header .myround-tab-btns a div {
  font-size: 2.0rem;
}

.round-header .myround-tab-btns a p {
  margin: 0;
}

.round-header .ranking-tab-btns a,
.round-header .myround-tab-btns a {
  width: 25% !important;
}

.round-header .myround-active-btn {
  background-color: #2cb696 !important;
  color: white !important;
}

/*
.round-call-btn-box {
  max-width: $max-width-main;
  position: fixed;
  bottom: 60px;
  width: 100%;
  height: 60px;
  z-index: 101;
  padding: 5px;
  background-color:$main-color;
  .round-call-btn{
    display: inline-block;
    font-size: 2rem;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    vertical-align: middle;
    font-weight: bold;
    color: #fff;
    background-color:$main-color;
    border: 1px solid  white;
    i{
      margin-right: 10px;
    }
  }
}
*/
.round-call-btn-box,
.page-top-btn-box {
  max-width: 768px;
  position: fixed;
  bottom: 90px;
  right: 30px;
  height: 60px;
  width: 60px;
  background-color: #2cb696;
  color: white;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  z-index: 101;
  outline: none;
}

.round-call-btn-box .round-call-btn,
.round-call-btn-box .page-top-btn,
.page-top-btn-box .round-call-btn,
.page-top-btn-box .page-top-btn {
  line-height: 60px;
  vertical-align: middle;
}

.round-call-btn-box .round-call-btn i,
.round-call-btn-box .page-top-btn i,
.page-top-btn-box .round-call-btn i,
.page-top-btn-box .page-top-btn i {
  line-height: 60px;
  vertical-align: middle;
  font-size: 3rem;
  color: white;
}

.round-friend-btn-box {
  max-width: 768px;
  position: fixed;
  bottom: 90px;
  left: 30px;
  height: 60px;
  width: 60px;
  background-color: #2cb696;
  color: white;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  z-index: 101;
  outline: none;
}

.round-friend-btn-box .round-friend-btn {
  line-height: 60px;
  vertical-align: middle;
}

.round-friend-btn-box .round-friend-btn i {
  line-height: 60px;
  vertical-align: middle;
  font-size: 3rem;
  color: white;
}

.call {
  text-align: left;
  max-width: 768px;
  margin-top: 130px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.call-form-wrapper {
  padding: 10px;
  background-color: white;
  border-bottom: 5px solid whitesmoke;
  height: auto;
  text-align: left;
}

.call-form-wrapper .call-title {
  width: 100%;
}

.call-form-wrapper .call-title p {
  font-size: 2rem;
  font-weight: bold;
  text-align: left;
  margin: 10px 0 5px 0;
}

.call-form-wrapper .area_cast_count {
  font-size: 1.6rem;
  color: #2cb696;
  padding: 0px 5px;
  margin-bottom: 10px;
  text-align: right;
}

.call-form-wrapper .area_cast_count span {
  font-weight: bold;
  padding: 5px 5px;
  font-weight: bold;
}

.call-form-wrapper .friend-wrapper {
  width: 100%;
  height: auto;
  background-color: whitesmoke;
  border-radius: 4px;
  padding: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.call-form-wrapper .btn-call-input,
.call-form-wrapper .btn_green {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin: 15px auto;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 60px;
  vertical-align: middle;
}

.call-form-wrapper .gray {
  background-color: #999;
}

.call-form-wrapper .list-number {
  list-style-type: decimal;
  margin-bottom: 10px;
}

.call-form-wrapper .list-dot {
  list-style-type: disc;
}

.call-form-wrapper .btn-flex {
  display: flex;
}

.call-form-wrapper .btn-flex .btn-box {
  display: flex;
  width: 50%;
  background-color: whitesmoke;
  height: 50px;
  border-radius: 4px;
  padding: 4px 10px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.call-form-wrapper .btn-flex .btn-box .btn-icon {
  display: inline-block;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  padding: 0 5px;
  font-size: 2rem;
}

.call-form-wrapper .btn-flex .btn-box .btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0 10px;
  width: 100%;
}

.call-form-wrapper .btn-flex .btn-box .btn-text .btn-title {
  font-size: 1.2rem;
}

.call-form-wrapper .btn-flex .btn-box .btn-text .call-input {
  display: inline-block;
  color: #2cb696 !important;
  font-size: 1.6rem;
  margin: 0;
  background-color: transparent;
  padding: 0;
  width: 100%;
}

.call-form-wrapper .btn-flex .btn-box .btn-text .call-input::placeholder {
  color: #2cb696 !important;
}

.call-form-wrapper .btn-flex .btn-box .btn-text input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.call-form-wrapper .btn-flex .btn-box:first-child {
  margin-right: 4px;
}

.call-form-wrapper .btn-flex .btn-box:last-child {
  margin-left: 4px;
}

.roundwrap {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.roundlist {
  text-align: center;
  max-width: 768px;
  margin-top: 130px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.roundshow {
  text-align: center;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.round-post-wrapper {
  padding: 10px;
  height: auto;
}

.round-post-wrapper .call-title {
  width: 100%;
}

.round-post-wrapper .call-title p {
  font-weight: bold;
  text-align: left;
  margin: 10px 0 5px 0;
}

.round-post-wrapper .round-post_loading {
  display: inline-block;
  line-height: 120px;
  vertical-align: middle;
  text-align: center;
  border-radius: 0 !important;
  border-right: none;
  height: 120px;
  color: #888888;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  background-color: white;
  border-radius: 0 20px 0 0 !important;
  margin: 0;
}

.round-post-wrapper .round-posts {
  height: auto;
}

.round-post-wrapper .round-posts .round-post {
  width: 100%;
  background-color: white;
  height: auto;
  border-radius: 4px;
  margin: 0 0 10px 0;
  text-align: left;
  position: relative;
}

.round-post-wrapper .round-posts .round-post .round-post-header {
  display: flex;
  text-align: center;
  height: auto;
  width: 100%;
  padding: 10px 15px;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-info {
  display: inline-block;
  width: 80%;
  margin: 0;
  text-align: left;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icon-box {
  width: 20%;
  text-align: center;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icon-box .post-icon {
  display: inline-block;
  height: 60px;
  width: 60px;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icon-box .post-icon img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icon-box .post-icon-name {
  font-size: 1rem;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-infos {
  display: inline-block;
  width: 65%;
  margin: 0;
  text-align: left;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icons-box {
  position: relative;
  width: 35%;
  text-align: center;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icons-box .post-icons {
  position: absolute;
  width: 60px;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icons-box .post-icons .post-icon {
  display: inline-block;
  height: 60px;
  width: 60px;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icons-box .post-icons .post-icon img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icons-box .post-icons .post-icon-name {
  font-size: 1rem;
  padding: 5px;
  margin: 0;
}

.round-post-wrapper .round-posts .round-post .round-post-header .post-icons-box .post-icons:nth-child(2) {
  right: 0;
  z-index: 100;
}

.round-post-wrapper .round-posts .round-post .round-post-body {
  text-align: center;
  padding: 5px 10px;
  border-radius: 0 0 4px 4px;
  height: auto;
  text-align: right;
  background-color: #2cb696;
}

.round-post-wrapper .round-posts .round-post .round-post-body p {
  color: white;
}

.round-post-wrapper .round-posts .round-post .round-post-layer {
  width: 100%;
  height: 134px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.round-post-wrapper .round-posts .round-post .round-post-layer p {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  margin: 0 auto;
  line-height: 134px;
  vertical-align: middle;
}

.round-post-wrapper .round-post-load-status {
  padding: 20px 0;
  width: 100%;
  height: auto;
  text-align: center;
}

.round-post-wrapper .round-destroy-btn {
  display: inline-block;
  padding: 15px;
}

.roundshow .round-post-wrapper {
  padding: 10px;
  height: auto;
}

.roundshow .round-post-wrapper .round-posts {
  height: auto;
}

.roundshow .round-post-wrapper .round-posts .round-post-show {
  width: 100%;
  background-color: white;
  height: auto;
  border-bottom: 3px solid #2cb696;
  border-radius: 8px;
  text-align: left;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .back-roundlist {
  height: auto;
  overflow: hidden;
  padding: 20px;
  width: 100%;
  color: #2cb696;
  font-size: 1.8rem;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information {
  text-align: left;
  padding: 0 15px 15px 15px;
  height: auto;
  border-bottom: 1px solid #DBDBDB;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icon-box {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 10px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icon-box .post-icon {
  display: inline-block;
  height: 200px;
  width: auto;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icon-box .post-icon img {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icon-box .post-icon-name {
  font-size: 1.6rem;
  padding: 5px;
  margin: 0;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box {
  position: relative;
  width: 100%;
  height: 250px;
  text-align: center;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box .post-icons {
  position: absolute;
  width: 170px;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box .post-icons .post-icon {
  display: inline-block;
  height: 170px;
  width: 170px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box .post-icons .post-icon img {
  height: 170px;
  width: 170px;
  border-radius: 50%;
  object-fit: cover;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box .post-icons .post-icon-name {
  font-size: 1.6rem;
  padding: 5px;
  margin: 0;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box .post-icons:nth-child(2) {
  right: 0;
  z-index: 100;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-info {
  display: inline-block;
  width: 100%;
  margin: 0;
  text-align: left;
  color: #2cb696;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-info i {
  margin: 0 5px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-info p {
  padding: 5px;
  border-bottom: 1px solid #DBDBDB;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-information .post-info span {
  color: #888;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .border-none {
  border: none !important;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review {
  text-align: left;
  padding: 15px;
  height: auto;
  border-bottom: 1px solid #DBDBDB;
  overflow: hidden;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members {
  height: auto;
  width: 100%;
  margin-bottom: 20px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member {
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  display: inline-block;
  height: 60px;
  width: 100%;
  background-color: whitesmoke;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member a, .roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member div,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member a,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member div,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member a,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member div,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member a,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member div,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member a,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member div {
  display: inline-block;
  height: 40px;
  width: 40px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member a img, .roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member div img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member a img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member div img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member a img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member div img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member a img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member div img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member a img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member div img {
  object-fit: cover;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member .name,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member .name,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member .name,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member .name,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member .name {
  line-height: 40px;
  vertical-align: middle;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member .form-check-input,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member .form-check-input,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member .form-check-input,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member .form-check-input,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member .form-check-input {
  width: 100%;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member .badge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member .badge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member .badge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member .badge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member .badge {
  background-color: #2cb696;
  color: white;
  padding: 4px 8px;
  font-weight: normal;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member .point, .roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member .date,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member .point,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member .date,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member .point,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member .date,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member .point,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member .date,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member .point,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member .date {
  line-height: 40px;
  vertical-align: middle;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member .today-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member .today-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member .today-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member .today-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member .today-check {
  line-height: 40px;
  vertical-align: middle;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .members .member-selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .members .member-selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .members .member-selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .members .member-selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .members .member-selected {
  background-color: #2cb696 !important;
  color: white !important;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .terms-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .terms-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .terms-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .terms-check,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .terms-check {
  padding: 20px 10px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .terms-check i,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .terms-check i,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .terms-check i,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .terms-check i,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .terms-check i {
  font-size: 2rem;
  margin: 5px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .my-cart,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .my-cart,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .my-cart,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .my-cart,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .my-cart {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: whitesmoke;
  font-size: 1.6rem;
  text-align: right;
  padding: 0 20px;
  font-weight: bold;
  border-radius: 3px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .my-cart .totalamount,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .my-cart .totalamount,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .my-cart .totalamount,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .my-cart .totalamount,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .my-cart .totalamount {
  width: 80%;
  text-align: right;
  border: none;
  background-color: whitesmoke;
  display: inline-block;
  vertical-align: middle;
  font-size: 2.6rem;
  color: #2cb696;
  padding: 0 10px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_green,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_request,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-finish,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-charged,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_friend_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_green,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_request,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-finish,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-charged,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_friend_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_green,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_request,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-finish,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-charged,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_friend_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_green,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_request,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-finish,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-charged,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_friend_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_green,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_request,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_selected,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-finish,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_charge,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-charged,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_friend_charge {
  display: inline-block;
  height: 40px;
  width: 100%;
  margin-bottom: 20px;
  background-color: #2cb696;
  border-radius: 4px;
  color: white;
  font-size: 1.8rem;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  font-weight: bold;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .gray,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .gray,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .gray,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .gray,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_round_charged-done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .gray,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_request_cancel,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_selected_done,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-joined,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-doned,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn-round-finished,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_round_charged-done {
  background-color: #999999 !important;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .license-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .license-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .license-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .license-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .license-box {
  width: 100%;
  height: auto;
  min-height: 200px;
  text-align: center;
  margin: 0 auto;
  background-color: whitesmoke;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 20px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .license-box img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .license-box img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .license-box img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .license-box img,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .license-box img {
  border-radius: 4px;
  max-width: 100%;
  height: auto;
  min-height: 200px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .limit-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .limit-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .limit-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .limit-box,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .limit-box {
  width: 100%;
  height: 100px;
  text-align: center;
  margin: 0 auto;
  background-color: whitesmoke;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 20px;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .member-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .member-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .member-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .member-join,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .member-join {
  height: auto;
  overflow: hidden;
}

.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-request .btn_disable,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-select .btn_disable,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-joined .btn_disable,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-done .btn_disable,
.roundshow .round-post-wrapper .round-posts .round-post-show .round-members-review .btn_disable {
  background-color: #999999;
}

.roundshow .round-post-wrapper .round-post-load-status {
  padding: 20px 0;
  width: 100%;
  height: auto;
  text-align: center;
}

.roundshow .stepbar-row {
  padding: 0px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.roundshow .stepbar-row .stepbar {
  display: flex;
  /* 横方向中央揃え（Safari用） */
  justify-content: center;
  /* 横方向中央揃え */
  position: relative;
  padding: 0;
  text-align: center;
}

.roundshow .stepbar-row .stepbar li {
  font-size: 1.2rem;
  list-style: none;
  padding-left: 30px;
  position: relative;
  max-width: 100px;
}

.roundshow .stepbar-row .stepbar li:after {
  background-color: #BDBDBD;
  content: "";
  height: 6px;
  left: 0px;
  position: absolute;
  top: 19px;
  width: 30px;
}

.roundshow .stepbar-row .stepbar li:first-child {
  padding-left: 0;
  width: 40px;
}

.roundshow .stepbar-row .stepbar li:first-child:after {
  display: none;
}

.roundshow .stepbar-row .stepbar li span {
  background-color: #BDBDBD;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 40px;
  margin-bottom: 4px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  font-size: 1.6rem;
}

.roundshow .stepbar-row .done:after, .roundshow .stepbar-row .done span {
  background-color: #2cb696 !important;
}

/*メッセージ*/
.chat-rooms {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.chat-rooms .chatrooms-wrapper .list-group .list-group-item {
  width: 100%;
  text-align: left;
  display: flex;
}

.chat-rooms .chatrooms-wrapper .list-group .list-group-item .user-icon {
  display: flex;
  justify-content: center;
  /*左右中央揃え*/
  align-items: center;
  /*上下中央揃え*/
  width: 20%;
  text-align: center;
}

.chat-rooms .chatrooms-wrapper .list-group .list-group-item .user-icon img {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.chat-rooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body {
  display: inline-block;
  width: 80%;
  padding: 0 5px;
  position: relative;
}

.chat-rooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body .datetime {
  text-align: right;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  color: #2cb696;
}

.chat-rooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body .name {
  display: inline-block;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-rooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body .new-message {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.no-cast-user {
  margin: 30px auto;
}

/*チャット設定*/
.chatwrap {
  height: auto;
  width: 100%;
  overflow: hidden;
  z-index: 10010;
}

.chat-user-wrapper {
  max-width: 768px;
  z-index: 10010;
  position: fixed;
  top: 0px;
  background: white;
  height: 60px;
  line-height: 60px;
  width: 100%;
  text-align: left;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
  display: flex;
}

.chat-user-wrapper .back-chatroom {
  font-size: 2.6rem;
  vertical-align: middle;
  margin: 0 20px;
}

.chat-user-wrapper .chatPartner_img img {
  display: inline-block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
}

.chat-user-wrapper .chatPartner_name {
  display: inline-block;
  font-size: 1.6rem;
  vertical-align: middle;
  margin: 0 12px;
  font-weight: bold;
}

.chat-user-wrapper .btn-private-round {
  display: inline-block;
  padding: 8px 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: 10px;
  line-height: 24px;
  background-color: #2cb696;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  border: none;
}

.chat-progress-wrapper {
  max-width: 768px;
  z-index: 98;
  position: fixed;
  top: 60px;
  height: auto;
  width: 100%;
  text-align: center;
  padding: 0 15px;
  background-color: white;
  padding: 10px;
  overflow: hidden;
  font-size: 1.6rem;
}

.chat-progress-wrapper .stepbar-row {
  padding: 0px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.chat-progress-wrapper .stepbar-row .stepbar {
  display: flex;
  /* 横方向中央揃え（Safari用） */
  justify-content: center;
  /* 横方向中央揃え */
  position: relative;
  padding: 0;
  text-align: center;
}

.chat-progress-wrapper .stepbar-row .stepbar li {
  font-size: 1.2rem;
  list-style: none;
  padding-left: 30px;
  position: relative;
  max-width: 100px;
}

.chat-progress-wrapper .stepbar-row .stepbar li:after {
  background-color: #BDBDBD;
  content: "";
  height: 6px;
  left: 0px;
  position: absolute;
  top: 19px;
  width: 30px;
}

.chat-progress-wrapper .stepbar-row .stepbar li:first-child {
  padding-left: 0;
  width: 40px;
}

.chat-progress-wrapper .stepbar-row .stepbar li:first-child:after {
  display: none;
}

.chat-progress-wrapper .stepbar-row .stepbar li span {
  background-color: #BDBDBD;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 40px;
  margin-bottom: 4px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  font-size: 1.6rem;
}

.chat-progress-wrapper .stepbar-row .done:after, .chat-progress-wrapper .stepbar-row .done span {
  background-color: #2cb696;
}

.chat-progress-wrapper .btn-success {
  font-size: 16px;
  width: 100%;
  height: 40px;
  border-radius: 0px;
  margin-bottom: 10px;
  text-align: center;
}

.chatPage {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10010;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 1.2rem;
  background-color: #ecf0f5;
}

.chatPage .chat-message-wrapper {
  background-color: #ecf0f5;
  font-size: 1.2rem;
  padding: 10px;
  height: auto;
  overflow-y: auto;
}

.messagebar-nav {
  max-width: 768px;
  width: 100%;
  z-index: 10010;
  position: fixed;
  background: white;
  min-height: 60px;
  height: auto;
  bottom: 0px;
}

.messagebar-nav .messageInputForm {
  font-size: 1.6rem;
  z-index: 10010;
  padding: 0 20px;
  display: flex;
}

.messagebar-nav .messageInputForm p {
  margin-bottom: 8px;
}

.messagebar-nav .messageInputForm .messageInputForm_input {
  width: 80%;
  height: auto;
  padding-top: 20px;
  border: none;
  background-color: white;
  border-radius: 8px;
  line-height: 2rem;
}

.messagebar-nav .messageInputForm .messageInputForm_btn,
.messagebar-nav .messageInputForm .imageInputForm_btn {
  width: 10%;
  border: none;
  background-color: white;
  color: #2cb696;
  font-size: 2rem;
  padding: 10px;
  line-height: 40px;
  vertical-align: middle;
}

.messagesArea .message {
  font-size: 1.2rem;
}

.messagesArea .message .mycomment {
  margin: 10px 0 0 0;
  width: 100%;
  text-align: right;
}

.messagesArea .message .mycomment p {
  display: inline-block;
  position: relative;
  margin: 0 10px 0 0;
  padding: 8px 12px;
  max-width: 250px;
  border-radius: 12px;
  background: #2cb696;
  color: white;
  text-align: left;
  white-space: pre-wrap;
}

.messagesArea .message .mycomment p:after {
  content: "";
  position: absolute;
  top: 3px;
  right: -19px;
  border: 8px solid transparent;
  border-left: 18px solid #2cb696;
  transform: rotate(-35deg);
}

.messagesArea .message .mycomment .chat-image {
  max-width: 60%;
  height: auto;
  margin: 10px;
  border-radius: 8px;
}

.messagesArea .message .partnercomment {
  width: 100%;
  margin: 10px 0 0 0;
  overflow: hidden;
}

.messagesArea .message .partnercomment .faceicon {
  float: left;
  margin-right: -50px;
  height: 40px;
  width: auto;
}

.messagesArea .message .partnercomment .faceicon img {
  display: inline-block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
}

.messagesArea .message .partnercomment .chatting {
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: left;
}

.messagesArea .message .partnercomment .chatting .chat-image {
  max-width: 60%;
  height: auto;
  border-radius: 8px;
  margin: 10px 10px 10px 50px;
}

.messagesArea .message .partnercomment .says {
  display: inline-block;
  position: relative;
  margin: 0 0 0 50px;
  padding: 8px 12px;
  max-width: 250px;
  border-radius: 12px;
  background: white;
}

.messagesArea .message .partnercomment .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px;
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid white;
  transform: rotate(35deg);
}

.messagesArea .message .partnercomment .says p {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
}

.messagesArea .message .messagetime {
  font-size: 8px;
  margin: 0 5px;
}

.messagesArea .message .read {
  font-size: 0.8rem;
  text-align: right;
}

/*イベント*/
.event_frame {
  max-width: 768px;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 10000;
  top: 0;
}

.event-close {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  color: white !important;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  margin: 0;
  z-index: 1;
}

.event-create,
.event-index {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.event-create {
  margin: 10px;
}

.event-create .create-wrapper {
  text-align: left;
}

.event-create .create-wrapper input, .event-create .create-wrapper text, .event-create .create-wrapper textarea {
  width: 100%;
  margin-bottom: 10px;
}

.event-index .eventList-wrapper {
  width: 100%;
}

.event-index .eventList-wrapper .eventList {
  width: 100%;
  padding: 10px;
}

.event-index .eventList-wrapper .eventList .eventList-item {
  padding: 0;
  margin-bottom: 15px;
  box-sizing: border-box;
  max-width: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  text-align: left;
  cursor: pointer;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-image-wrapper {
  width: 100%;
  height: auto;
  position: relative;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-image-wrapper .event-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-image-wrapper .event-image-layer {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-body {
  height: auto;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.event-index .eventList-wrapper .eventList .eventList-item .event-body p {
  margin: 0;
  font-size: 1.6rem;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-body .event-title {
  font-size: 1.8rem;
  font-weight: bold;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-body .info {
  font-size: 1.6rem;
  color: #2cb696;
  margin: 5px 0;
  font-weight: bold;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-body .info .badge {
  background-color: #2cb696;
  color: white;
  line-height: normal;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot {
  height: auto;
  padding: 5px 10px;
  display: flex;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot p {
  margin: 0;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot .event-foot-box:first-child {
  margin-right: 4px;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot .event-foot-box {
  display: flex;
  width: 50%;
  background-color: whitesmoke;
  height: 50px;
  border-radius: 4px;
  padding: 2px 10px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot .event-foot-box .icon {
  display: inline-block;
  line-height: 50px;
  vertical-align: middle;
  text-align: center;
  padding: 0 5px;
  font-size: 2rem;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot .event-foot-box .text {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  width: 100%;
  font-size: 1.2rem;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot .event-foot-box .text .inputdatabox {
  text-align: right;
}

.event-index .eventList-wrapper .eventList .eventList-item .event-foot .event-foot-box .text .inputdatabox .inputdata {
  font-size: 2rem;
  color: #2cb696;
  font-weight: bold;
}

.event-show {
  text-align: center;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.event-show .event-image-wrapper {
  width: 100%;
  height: auto;
  position: relative;
}

.event-show .event-image-wrapper .event-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.event-show .eventHead-wrapper {
  width: 100%;
}

.event-show .eventHead-wrapper .event-body {
  overflow: hidden;
  text-align: left;
  height: auto;
  padding: 10px 10px;
  border-bottom: 1px solid #C6C6C6;
  font-size: 1.2rem;
}

.event-show .eventHead-wrapper .event-body p {
  margin: 0;
  font-size: 1.2rem;
}

.event-show .eventHead-wrapper .event-body .event-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
}

.event-show .eventHead-wrapper .event-body .event-subtitle {
  font-size: 1.8rem;
  color: #2cb696;
  margin: 5px 0px;
  font-weight: bold;
}

.event-show .eventHead-wrapper .event-body .event-subtitle .badge {
  background-color: #2cb696;
  color: white;
  line-height: normal;
}

.event-show .eventInfo-wrapper {
  width: 100%;
  text-align: left;
  padding: 15px;
}

.event-show .eventInfo-wrapper .title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.event-show .eventInfo-wrapper .body {
  border: 1px solid #C6C6C6;
  border-radius: 3px;
  padding: 10px;
  font-size: 1.2rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.event-show .eventInfo-wrapper .body .map {
  height: auto;
}

.event-show .eventDetail-wrapper {
  width: 100%;
  text-align: left;
  padding: 15px;
}

.event-show .eventDetail-wrapper .title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.event-show .eventDetail-wrapper .body {
  border: 1px solid #C6C6C6;
  padding: 10px;
  font-size: 1.2rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.event-show .eventDetail-wrapper .body .list:last-child {
  border: none;
}

.event-show .eventDetail-wrapper .body .list {
  height: auto;
  padding: 15px 0;
  display: flex;
  border-bottom: 1px solid #C6C6C6;
}

.event-show .eventDetail-wrapper .body .list .list-title {
  width: 30%;
  font-weight: bold;
}

.event-show .eventDetail-wrapper .body .list .list-info {
  width: 70%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.event-show .eventDetail-wrapper .body .event-image {
  width: 100%;
  margin-bottom: 10px;
  height: auto;
  object-fit: cover;
  border-radius: 3px;
}

/*マイページ*/
.user_frame {
  max-width: 768px;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 10000;
  top: 0;
}

.profile {
  text-align: center;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  padding-bottom: 60px;
}

.profile .profile-image-wrapper {
  width: 100%;
  height: auto;
  position: relative;
}

.profile .profile-image-wrapper .profile-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.profile .profile-image-wrapper .profile-image-layer {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  border-radius: 0 0 5px 5px;
  color: white;
  text-align: left;
  line-height: 60px;
}

.profile .profile-image-wrapper .profile-image-layer .profile-userinfo {
  font-size: 1.6rem;
  margin: 0;
  padding: 0 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  vertical-align: middle;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.profile .profile-image-wrapper .profile-image-layer .profile-userinfo .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.profile .profile-image-wrapper .profile-image-layer .profile-userinfo .profile-usernonsubscribe {
  background-color: white;
  color: #555;
}

.profile .profile-image-wrapper .profile-image-layer .profile-userinfo .profile-usersubscribe {
  background-color: gold;
  color: #555;
}

.profile .profile-image-wrapper .profile-image-layer .profile-userinfo .badge {
  font-size: 1.2rem;
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.profile .profile-image-wrapper .profile-image-edit {
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  color: #2cb696;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  margin: 0;
}

.profile .profile-image-subwrapper {
  height: auto;
  width: 100%;
  text-align: left;
  padding: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.profile .profile-image-subwrapper span {
  height: 60px;
  width: 60px;
  margin-right: 6px;
}

.profile .profile-image-subwrapper img {
  max-width: 60px;
  max-height: 60px;
  height: 60px;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile .profile-image-subwrapper .active-image {
  border: 3px solid #2cb696;
}

.profile .playfee-wrapper {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #2cb696;
}

.profile .playfee-wrapper .playfee {
  color: #2cb696;
  padding: 10px;
  margin: 0;
  font-size: 2.6rem;
}

.profile .profile-wrapper {
  height: auto;
  overflow: hidden;
  padding: 10px;
  margin-bottom: 20px;
}

.profile .profile-wrapper .list-group {
  margin-bottom: 20px;
}

.profile .profile-wrapper .list-group .list-item {
  line-height: 30px;
  font-size: 1.4rem;
}

.profile .profile-wrapper .list-group p {
  color: #888888;
}

.profile .profile-wrapper .list-group p:first-child {
  border-top: none;
}

.profile .profile-wrapper .b-b-none {
  border-bottom: none;
}

.profile .profile-wrapper .input-group-text {
  background-color: #2cb696;
  color: white;
}

.profile .profile-wrapper .list-group p {
  text-align: left;
  border-radius: 0 !important;
  border-left: none;
  border-right: none;
  padding: 5px 10px;
  vertical-align: middle;
  height: auto;
}

.profile .profile-wrapper .btn_user_matching {
  border: none;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
  background-color: #2cb696;
  outline: none;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 1.6rem;
  color: white;
  font-weight: bold;
}

.profile .profile-wrapper .btn_user_matching i {
  font-size: 1.8rem;
  color: white;
  margin: 0 10px;
}

.profile .setting-wrapper .list-group .list-item {
  line-height: 40px;
}

.profile .setting-wrapper .list-group a, .profile .setting-wrapper .list-group button {
  text-align: left;
  border-radius: 0 !important;
  border-left: none;
  border-right: none;
  padding: 5px 10px;
  vertical-align: middle;
  height: auto;
}

.profile .setting-wrapper .list-group i {
  padding: 12px 10px;
}

.profile .setting-wrapper .point-text {
  font-size: 20px;
  text-align: right;
}

.profile .setting-wrapper .point {
  font-size: 26px;
  font-weight: bold;
  padding: 20px;
}

.profile .profile-intro {
  text-align: left;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.profile .profile-intro .intro-text {
  width: 100%;
  margin: 5px 0;
  padding: 10px;
  font-size: 1.4rem;
  white-space: pre-wrap;
}

.profile .profile-intro .edit-intro-text {
  width: 100%;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #2cb696;
  border-radius: 5px;
  font-size: 1.6rem;
  color: #888888;
}

.profile .profile-header {
  margin-bottom: 8px;
  margin-left: 8px;
  font-size: 2rem;
  font-weight: bold;
  color: #2cb696;
  text-align: left;
}

.profile .profile-header i {
  margin-right: 10px;
  font-size: 22px;
}

.profile .edit_user_name, .profile .edit_user_tall, .profile .edit_user_age, .profile .edit_user_style, .profile .edit_user_score, .profile .edit_user_drink, .profile .edit_user_smoke, .profile .edit_user_area, .profile .edit_user_subarea1, .profile .edit_user_subarea2, .profile .edit_user_subarea3 {
  width: 150px;
  margin: 0;
  padding: 0;
  border: 1px solid #2cb696;
  border-radius: 5px;
  font-size: 16px;
  color: #888888;
  text-align: center;
  line-height: 30px;
  background-color: white;
}

.profile .btn {
  font-size: 16px;
  width: 100%;
  height: 40px;
  border-radius: 0px;
  margin: 10px 0;
  text-align: center;
}

.profile .account-header {
  padding: 10px 15px;
}

.profile .timeline .timeline_container {
  text-align: left;
  font-size: 12px;
}

.profile .timeline .timeline_container .list-group {
  margin-bottom: 20px;
}

.profile .timeline .timeline_container .list-group .list-group-item {
  text-align: left;
  border-radius: 0 !important;
  border-left: none;
  border-right: none;
  padding: 10px 0px;
  height: auto;
  color: #888888;
  float: left;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.profile .timeline .timeline_container .list-group .list-group-item:first-child {
  border-top: none;
  margin-top: 20px;
}

.profile .timeline .timeline_container .list-group .list-group-item:last-child {
  border-bottom: none;
  margin-bottom: 20px;
}

.profile .timeline .timeline_container .list-group .list-group-item .list-group-item-left {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.profile .timeline .timeline_container .list-group .list-group-item .list-group-item-left .timeline-icon {
  height: 60px;
  max-width: 60px;
  border: 1px solid whitesmoke;
  object-fit: cover;
  border-radius: 50%;
}

.profile .timeline .timeline_container .list-group .list-group-item .list-group-item-right {
  width: 79%;
  display: inline-block;
  vertical-align: top;
  padding: 0 10px;
}

.profile .timeline .timeline_container .list-group .list-group-item .list-group-item-right .timeline-info {
  font-size: 20px;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.profile .timeline .timeline_container .list-group .list-group-item .list-group-item-right .timeline-date {
  font-size: 12px;
  color: #2cb696;
  margin: 0 0 10px 0;
  padding: 0;
}

.profile .timeline .timeline_container .list-group .list-group-item .list-group-item-right .timeline-message {
  font-size: 16px;
  padding: 0;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

/*レビュー*/
/*マイページ*/
.review_frame {
  max-width: 768px;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 10100;
  top: 0;
}

.review-close {
  height: auto;
  text-align: left;
  overflow: hidden;
  padding: 20px;
  width: 100%;
  color: #2cb696;
  font-size: 1.8rem;
}

.review-show {
  text-align: left;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  padding: 10px;
}

.review-show .review-header {
  margin-bottom: 8px;
  margin-left: 8px;
  font-size: 2rem;
  font-weight: bold;
  color: #2cb696;
  text-align: left;
}

.review-show .review-header i {
  margin-right: 10px;
  font-size: 22px;
}

.review-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 20px;
}

.review-wrapper .review-average {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 2rem;
}

.review-wrapper .review-average i {
  color: #ffdf88;
}

.review-wrapper .reviews {
  width: 100%;
  height: auto;
}

.review-wrapper .reviews .review {
  padding: 10px;
  text-align: left;
  background-color: whitesmoke;
  border-radius: 8px;
  margin-bottom: 10px;
}

.review-wrapper .reviews .review .rating i {
  color: #ffdf88;
}

.profile-close {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  color: white !important;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  margin: 0;
  z-index: 1;
}

.profile_bottom_wrapper {
  max-width: 768px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
  z-index: 101;
  background-color: #2cb696;
}

.profile_bottom_wrapper .btn_user_favorite_message,
.profile_bottom_wrapper .chatroom-by-user,
.profile_bottom_wrapper .btn_user_register {
  display: inline-block;
  font-size: 2rem;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 60px;
  vertical-align: middle;
  font-weight: bold;
  color: #fff;
  background-color: #2cb696;
  border: none;
  /*border-bottom: 5px solid  #2d917a;*/
}

.profile_bottom_wrapper .btn_user_favorite_message i,
.profile_bottom_wrapper .chatroom-by-user i,
.profile_bottom_wrapper .btn_user_register i {
  margin-right: 10px;
}

.chip-wrapper {
  margin-bottom: 20px;
}

.chip-wrapper .chip-text {
  padding: 10px;
  margin: 0px;
  text-align: left;
  font-size: 1.2rem;
}

.chip-wrapper .my-point {
  text-align: left;
  font-size: 1.2rem;
}

.chip-wrapper .form_chip_order {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
}

.chip-wrapper .form_chip_order .input_point {
  padding: 10px 0;
  background-color: whitesmoke;
  font-size: 1.6rem;
  font-weight: bold;
  color: #2cb696;
  margin: 0 5% 0 0;
  border-radius: 4px;
  text-align: center;
  width: 65%;
  height: 40px;
}

.chip-wrapper .form_chip_order .btn-chip-order {
  padding: 10px 0;
  background-color: #2cb696;
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  margin: 0;
  border-radius: 4px;
  text-align: center;
  width: 30%;
  height: 40px;
}

.result, .myphoto {
  width: 100%;
  height: 100%;
  margin: 20px 0;
}

.result img, .myphoto img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/*ポイント*/
.mypoint {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.mypoint .point-wrapper {
  background-color: white;
}

.mypoint .point-show-wrapper {
  padding: 20px 10px 10px 10px;
  text-align: center;
}

.mypoint .point-show-wrapper .title {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
}

.mypoint .point-show-wrapper .total_point {
  padding: 10px 0;
  background-color: whitesmoke;
  font-size: 1.6rem;
  font-weight: bold;
  color: #2cb696;
  margin: 0;
  border-radius: 8px;
  text-align: center;
}

.mypoint .point-charge-wrapper {
  padding: 10px;
  height: auto;
  overflow: hidden;
  text-align: left;
}

.mypoint .point-charge-wrapper .title p {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  margin: 20px 0 10px 0;
}

.mypoint .point-charge-wrapper .point-charge {
  height: auto;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin: 15px auto;
}

.mypoint .point-charge-wrapper .point-charge .point-select {
  background-color: whitesmoke;
  color: #888888;
  width: 100%;
  border: none;
  border-radius: 8px 8px 0 0;
  height: 50px;
  font-size: 16px;
  padding-left: 10px;
}

.mypoint .point-charge-wrapper .point-charge .checkout-button {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  height: 50px;
  border-radius: 0 0 8px 8px;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 50px;
  vertical-align: middle;
}

.mypoint .point-charge-wrapper .point-charge .input-playfee {
  width: 50%;
  padding: 10px 20px;
  background-color: whitesmoke;
  font-size: 1.6rem;
  font-weight: bold;
  color: #2cb696;
  margin: 0;
  border-radius: 8px;
  direction: rtl;
}

.mypoint .point-charge-wrapper .point-charge .btn_green {
  width: 48%;
  display: inline-block;
  height: 40px;
  margin-bottom: 20px;
  background-color: #2cb696;
  border-radius: 4px;
  color: white;
  font-size: 1.8rem;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  font-weight: bold;
}

.mypoint .point-charge-wrapper .error-message {
  text-align: center;
  color: red;
}

.mypoint .point-charge-wrapper .point-description {
  text-align: center;
  color: #2cb696;
}

.mypoint .point-history-wrapper {
  padding: 10px 10px 20px 10px;
  height: auto;
  overflow: hidden;
  text-align: left;
}

.mypoint .point-history-wrapper .title p {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  margin: 20px 0 10px 0;
}

.mypoint .point-history-wrapper .point-histories {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.mypoint .point-history-wrapper .point-histories .point-history {
  padding: 10px 0;
  border-bottom: 1px solid whitesmoke;
}

.mypoint .btn_home_back {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  height: 50px;
  border-radius: 8px;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 50px;
  vertical-align: middle;
  margin-bottom: 20px;
}

.mypoint .bank-order-wrapper {
  padding: 10px 10px 20px 10px;
  height: auto;
  overflow: hidden;
  text-align: left;
}

.mypoint .bank-order-wrapper .title p {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  margin: 20px 0 10px 0;
}

.mypoint .bank-order-wrapper .bank-order {
  height: auto;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin: 15px auto;
}

.mypoint .bank-order-wrapper .bank-order .form-input:first-child {
  border-radius: 8px 8px 0 0;
}

.mypoint .bank-order-wrapper .bank-order .form-input {
  background-color: whitesmoke;
  color: #888888;
  width: 100%;
  border-bottom: 1px solid white;
  height: 50px;
  font-size: 16px;
  padding-left: 10px;
}

.mypoint .bank-order-wrapper .bank-order .bankorder-button {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  height: 50px;
  border-radius: 0 0 8px 8px;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 50px;
  vertical-align: middle;
}

.mypoint .bank-order-wrapper .bank-description {
  text-align: center;
  color: #2cb696;
}

.bank {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: scroll;
  overflow-y: scroll;
}

.bank .bank-order-wrapper {
  padding: 10px 0px;
  height: auto;
}

.bank .bank-order-wrapper .title {
  margin: 10px;
}

.bank .bank-order-wrapper .title p {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  margin: 20px 0 10px 0;
}

.bank .bank-order-wrapper .bank-table {
  font-size: 1.6rem;
  background-color: white;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.bank .bank-order-wrapper .bankupdate-button {
  display: inline-block;
  width: 100px;
  border-radius: 3px;
  background-color: red;
  color: white;
  padding: 3px 5px;
  cursor: pointer;
}

.bank .bank-order-wrapper .bankupdate-done {
  display: inline-block;
  width: 100px;
  border-radius: 3px;
  background-color: #2cb696;
  color: white;
  padding: 3px 5px;
}

/*共通*/
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100% !important;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

body {
  background-color: #ecf0f5;
  font-size: 14px;
  color: #888888;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  height: 100%;
  overflow: scroll;
  font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

input, textarea, select {
  font-size: 16px;
  transform: scale(1);
  -webkit-appearance: none;
}

a {
  color: #888888;
  text-decoration: none;
}

a:hover {
  color: #888888;
  text-decoration: none;
}

li, ul {
  list-style: none;
}

h1 {
  font-size: 22px;
  font-weight: bold;
  color: #888888;
  width: 100%;
  padding: 10px 5px;
  text-align: left;
  margin: 0;
}

input, textarea {
  border: none;
  outline: none;
}

select {
  border: none;
  outline: none;
}

select:focus {
  border: none;
  outline: none;
}

.container {
  background-color: white;
  /*font-size: 16px;*/
  height: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

.indent-bottom {
  margin-bottom: 60px;
}

.bg-gray {
  background-color: #888888 !important;
}

.btn-success {
  background-color: #2cb696;
  border: none;
  border-radius: 5px;
}

.border-green {
  border: 1px solid #2cb696 !important;
  color: #2cb696 !important;
}

.bg-golx {
  background-color: #ecf0f5 !important;
}

.bg-success {
  background-color: #2cb696 !important;
}

.bg-green {
  background-color: #e1f3ed !important;
}

.bg-blue {
  background-color: #DFF2FC !important;
}

.bg-red {
  background-color: #FEEEED !important;
}

.green {
  color: #2cb696 !important;
}

.border-bottom-green {
  border-bottom: 1px solid #2cb696;
}

.red {
  color: red !important;
}

.blue {
  color: blue !important;
}

.yellow {
  color: #ffdf88 !important;
}

.whitesmoke {
  color: whitesmoke !important;
}

.bold {
  font-weight: bold !important;
}

.badge-green {
  background-color: #2cb696;
  color: white;
}

.badge-red {
  background-color: #e0245e;
  color: white;
}

.badge-yellow {
  background-color: #ffdf88;
  color: white;
}

.badge-bronze {
  background-color: brown;
  color: white;
}

.badge-silver {
  background-color: silver;
  color: white;
}

.badge-gold {
  background-color: gold;
  color: white;
}

.input-group {
  font-size: 16px;
}

.noSelect {
  -webkit-touch-callout: none;
  user-select: none;
}

.user_login_check {
  color: #2cb696;
  padding: 0 2px;
}

.f-white {
  color: #888888;
}

.f-green {
  color: #2cb696;
}

.blank {
  height: 100px;
}

/*ローディング*/
.favorite_users_load-status, .pickup_users_load-status {
  padding: 20px 0;
  width: 100%;
  height: auto;
  text-align: center;
}

.infinite-scroll-request {
  width: 100%;
  height: 50px;
}

.spinner {
  width: 100%;
  margin: 20px auto;
  text-align: center;
}

.spinner > div {
  width: 18px;
  /* サイズ - 可変 - 大きくした場合、上の「.spinner」のサイズも変えないと縦長になる */
  height: 18px;
  /* サイズ - 可変 */
  background-color: #2cb696;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/*

<div class="loader-wheel">
  <i><i><i><i><i><i><i><i><i><i><i><i>
  </i></i></i></i></i></i></i></i></i></i></i></i>
</div>

*/
.loader-wheel {
  font-size: 64px;
  /* change size here */
  position: relative;
  height: 1em;
  width: 1em;
  padding-left: 0.45em;
  overflow: hidden;
  margin: 0 auto;
  animation: loader-wheel-rotate 0.5s steps(12) infinite;
}

.loader-wheel i {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 0.1em;
  border-radius: 0.05em;
  background: #333;
  /* change color here */
  opacity: 0.8;
  transform: rotate(-30deg);
  transform-origin: center 0.5em;
}

@keyframes loader-wheel-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.shadow-md {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

.shadow-rd {
  box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.05), 4px 4px 12px rgba(0, 0, 0, 0.05);
}

.profile-modal .modal-fill,
.user-search-modal .modal-fill,
.round-search-modal .modal-fill {
  background-color: rgba(0, 0, 0, 0.7);
}

.profile-modal .modal-fill .modal-dialog,
.user-search-modal .modal-fill .modal-dialog,
.round-search-modal .modal-fill .modal-dialog {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100%;
  width: 100%;
}

.profile-modal .modal-fill .modal-content,
.user-search-modal .modal-fill .modal-content,
.round-search-modal .modal-fill .modal-content {
  max-width: 768px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 3px;
  width: 90%;
  height: 90%;
}

.profile-modal .modal-fill .modal-content .modal-body,
.user-search-modal .modal-fill .modal-content .modal-body,
.round-search-modal .modal-fill .modal-content .modal-body {
  overflow: auto;
}

.profile-modal .modal-fill .modal-content .modal-body .modal-title,
.user-search-modal .modal-fill .modal-content .modal-body .modal-title,
.round-search-modal .modal-fill .modal-content .modal-body .modal-title {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  color: #2cb696;
  padding: 20px 0;
  width: 100%;
  border-bottom: 1px solid #2cb696;
}

.profile-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper,
.user-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper,
.round-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper {
  text-align: left;
  padding: 20px 0;
}

.profile-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper i,
.user-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper i,
.round-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper i {
  font-size: 2.2rem;
}

.profile-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .form_profile_label,
.user-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .form_profile_label,
.round-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .form_profile_label {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 5px 5px;
}

.profile-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .form_profile_input,
.user-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .form_profile_input,
.round-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .form_profile_input {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #CDCDCD;
  font-size: 1.6rem;
  color: #888888;
  margin-bottom: 10px;
  padding: 10px 10px;
  background-color: white;
}

.profile-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .user_score,
.user-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .user_score,
.round-search-modal .modal-fill .modal-content .modal-body .profile_edit_wrapper .user_score {
  width: 45% !important;
}

.profile-modal .modal-fill .modal-content .modal-body .modal-btn,
.user-search-modal .modal-fill .modal-content .modal-body .modal-btn,
.round-search-modal .modal-fill .modal-content .modal-body .modal-btn {
  display: flex;
  width: 100%;
  height: auto;
}

.profile-modal .modal-fill .modal-content .modal-body .modal-btn .btn,
.user-search-modal .modal-fill .modal-content .modal-body .modal-btn .btn,
.round-search-modal .modal-fill .modal-content .modal-body .modal-btn .btn {
  width: 50%;
  height: 45px;
  width: 100%;
  background-color: #2cb696;
  font-size: 1.6rem;
  color: white;
  border-radius: 3px;
}

.profile-modal .modal-fill .modal-content .modal-body .modal-btn .btn:first-child,
.user-search-modal .modal-fill .modal-content .modal-body .modal-btn .btn:first-child,
.round-search-modal .modal-fill .modal-content .modal-body .modal-btn .btn:first-child {
  margin-right: 4px;
}

.profile-modal .modal-fill .modal-content .modal-body .modal-btn .btn:last-child,
.user-search-modal .modal-fill .modal-content .modal-body .modal-btn .btn:last-child,
.round-search-modal .modal-fill .modal-content .modal-body .modal-btn .btn:last-child {
  margin-left: 4px;
}

.edit {
  height: auto;
  width: 100%;
  padding: 10px;
}

.edit .form_profile {
  height: auto;
  width: 100%;
}

.edit .profile_from_wrapper {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  height: auto;
  text-align: left;
}

.edit .profile_from_wrapper .title {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  color: #2cb696;
  width: 100%;
  padding: 10px;
  margin: 20px auto;
  border-left: 2px solid #2cb696;
}

.edit .profile_from_wrapper .profile-image-wrapper {
  width: 100%;
  height: auto;
}

.edit .profile_from_wrapper .profile-image-wrapper img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.edit .profile_from_wrapper .profile-image-wrapper .profile-image-edit-initial {
  height: 40px;
  width: 100%;
  border-radius: 4px;
  color: #666;
  background-color: whitesmoke;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  margin: 10px auto;
}

.edit .profile-image-label {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 5px 5px;
}

.edit .profile-image-wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
}

.edit .profile-image-wrapper img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  object-fit: cover;
}

.edit .form_profile_label {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 5px 5px;
}

.edit .form_profile_input {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #CDCDCD;
  font-size: 1.6rem;
  color: #888888;
  margin-bottom: 10px;
  padding: 10px 10px;
  background-color: white;
}

.edit .btn {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin: 15px auto;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 60px;
  vertical-align: middle;
}

.edit .btn i {
  margin: 0 10px;
}

.error-message {
  color: red;
}

.rating-wrapper {
  text-align: left;
}

.rating-wrapper .star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 150px;
  height: 30px;
  overflow: hidden;
  position: relative;
  background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=");
  background-size: contain;
}

.rating-wrapper .star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=");
  background-size: contain;
}

.rating-wrapper .star-rating input {
  text-align: left;
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}

.rating-wrapper .star-rating input:hover + i,
.rating-wrapper .star-rating input:checked + i {
  opacity: 1;
}

.rating-wrapper .star-rating i ~ i {
  width: 40%;
}

.rating-wrapper .star-rating i ~ i ~ i {
  width: 60%;
}

.rating-wrapper .star-rating i ~ i ~ i ~ i {
  width: 80%;
}

.rating-wrapper .star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}

.rating-wrapper .choice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: left;
  padding: 20px;
  display: block;
}

.rating-wrapper *, .rating-wrapper ::after, .rating-wrapper ::before {
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
  vertical-align: middle;
}

.rating-wrapper body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.rating-wrapper body::before {
  height: 100%;
  content: '';
  width: 0;
  background: red;
  vertical-align: middle;
  display: inline-block;
}

.review-page {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.review-page .btn_green {
  display: inline-block;
  height: 40px;
  width: 100%;
  margin-bottom: 20px;
  background-color: #2cb696;
  border-radius: 4px;
  color: white;
  font-size: 1.8rem;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  font-weight: bold;
}

.review-page .gray {
  background-color: #999 !important;
}

.review-page .review-wrapper .reviews {
  padding: 10px;
}

.review-page .review-wrapper .reviews .review {
  width: 100%;
  border-radius: 8px;
  text-align: left;
  display: flex;
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
}

.review-page .review-wrapper .reviews .review .user-icon {
  display: inline-block;
  width: 20%;
  text-align: center;
}

.review-page .review-wrapper .reviews .review .user-icon img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.review-page .review-wrapper .reviews .review .user-info {
  display: inline-block;
  width: 80%;
  padding: 0 5px;
}

.review-page .review-wrapper .reviews .review .user-info .user-title {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
}

.review-page .review-wrapper .reviews .review .user-info .user-title .badge {
  background-color: #2cb696;
  color: white;
}

.review-page .review-wrapper .reviews .review .user-info .badge {
  background-color: #2cb696;
  color: white;
  font-weight: normal;
}

.review-page .review-wrapper .reviews .review .user-info textarea {
  padding: 10px;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.review-page .review-wrapper .reviews .review .caution {
  font-size: 1.2rem;
}

.error-page {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.error-page .error-wrapper {
  text-align: center;
  padding: 30px 10px;
  height: auto;
  overflow: hidden;
}

.error-page .error-wrapper .code {
  font-size: 5rem;
  color: gray;
  font-weight: bold;
  margin-bottom: 20px;
}

.error-page .error-wrapper .message {
  font-size: 2rem;
  color: #2cb696;
  margin-bottom: 40px;
}

.error-page .error-wrapper .btn_green {
  border: none;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  width: 80%;
  text-align: center;
  background-color: #2cb696;
  outline: none;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  margin-bottom: 20px;
}

.favorite,
.search {
  /* ラベル部分 左上に表示 */
}

.favorite .rank-normal::before,
.search .rank-normal::before {
  content: "";
  top: 0px;
  left: 0px;
  border-bottom: 4em solid transparent;
  border-left: 4em solid #2cb696;
  /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}

.favorite .rank-normal::after,
.search .rank-normal::after {
  content: "NORMAL";
  display: block;
  top: 12px;
  transform: rotate(-45deg);
  color: #fff;
  /* 文字色はここで変更 */
  left: -2px;
  position: absolute;
  z-index: 101;
  font-size: 1rem;
  font-weight: bold;
}

.favorite .rank-bronze::before,
.search .rank-bronze::before {
  content: "";
  top: 0px;
  left: 0px;
  border-bottom: 4em solid transparent;
  border-left: 4em solid brown;
  /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}

.favorite .rank-bronze::after,
.search .rank-bronze::after {
  content: "BRONZE";
  display: block;
  top: 12px;
  transform: rotate(-45deg);
  color: #fff;
  /* 文字色はここで変更 */
  left: -2px;
  position: absolute;
  z-index: 101;
  font-size: 1rem;
  font-weight: bold;
}

.favorite .rank-silver::before,
.search .rank-silver::before {
  content: "";
  top: 0px;
  left: 0px;
  border-bottom: 4em solid transparent;
  border-left: 4em solid silver;
  /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}

.favorite .rank-silver::after,
.search .rank-silver::after {
  content: "SILVER";
  display: block;
  top: 12px;
  transform: rotate(-45deg);
  color: #fff;
  /* 文字色はここで変更 */
  left: 0;
  position: absolute;
  z-index: 101;
  font-size: 1rem;
  font-weight: bold;
}

.favorite .rank-gold::before,
.search .rank-gold::before {
  content: "";
  top: 0px;
  left: 0px;
  border-bottom: 4em solid transparent;
  border-left: 4em solid gold;
  /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}

.favorite .rank-gold::after,
.search .rank-gold::after {
  content: "GOLD";
  display: block;
  top: 12px;
  transform: rotate(-45deg);
  color: #fff;
  /* 文字色はここで変更 */
  left: 3px;
  position: absolute;
  z-index: 101;
  font-size: 1rem;
  font-weight: bold;
}

/*loadingローディング*/
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  height: auto;
  width: auto;
  z-index: 99998;
}

/*rgba(255, 255, 255, 0.2)*/
.loader,
.loader:after {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 5px solid whitesmoke;
  border-right: 5px solid whitesmoke;
  border-bottom: 5px solid whitesmoke;
  border-left: 5px solid #2cb696;
  transform: translateZ(0);
  animation: load8 0.8s infinite linear;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.point-show-wrapper .logo {
  margin: 10px auto 20px auto;
}

.point-show-wrapper .logo img {
  max-height: 40px;
  width: auto;
  height: auto;
}

.point-show-wrapper .loginLine {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
  background-color: #00B900;
  color: white;
  border: none;
  line-height: 60px;
  justify-content: center;
  align-items: center;
}

.point-show-wrapper .loginLine img {
  width: auto;
  height: 100%;
  padding: 5px;
  margin-right: 5px;
}

.point-show-wrapper .loginLine span {
  font-size: 2rem;
  font-weight: bold;
  vertical-align: middle;
}

.point-show-wrapper .input_code {
  width: 100%;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  background-color: whitesmoke;
  border-radius: 4px;
  text-align: center;
}

.point-show-wrapper .btn_green {
  border: none;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
  background-color: #2cb696;
  outline: none;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  margin-bottom: 20px;
}

.manual {
  text-align: center;
  max-width: 768px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.manual .manual-wrapper {
  background-color: white;
}

.manual .manual-wrapper .maunal-menu {
  text-align: left;
  padding: 20px 40px;
  margin: 20px;
  border: 1px solid #2cb696;
}

.manual .manual-wrapper .maunal-menu li {
  margin-bottom: 10px;
}

.manual .manual-wrapper .maunal-menu .list-number {
  list-style-type: decimal;
  margin-left: 10px;
}

.manual .manual-wrapper .maunal-menu .list-dot {
  list-style-type: decimal;
}

.manual .manual-wrapper .men-body {
  text-align: left;
  padding: 20px;
}

.manual .manual-wrapper .men-body ol {
  margin-bottom: 20px;
}

.manual .manual-wrapper .men-body ol li {
  margin-bottom: 10px;
}

.manual .manual-wrapper .men-body .list-number {
  list-style-type: decimal;
  margin-left: 10px;
}

.manual .manual-wrapper .men-body .list-dot {
  list-style-type: decimal;
}

.manual .manual-wrapper .men-body .manual-img {
  padding: 10px;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin-bottom: 20px;
}

.manual .manual-wrapper .men-body .manual-img img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid whitesmoke;
  height: auto;
}

.lp {
  margin: 0;
  border: 0;
  color: #333;
  font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'Meiryo UI',YuGothic,'Yu Gothic','Yu Gothic UI',sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.5;
  outline: 0;
  overflow-x: hidden;
  background-color: #fff;
  max-width: none;
  height: auto;
}

.lp .header {
  background-color: #fff;
}

.lp .header .header-pc {
  padding: 0 2rem;
  max-width: 1200px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .lp .header .header-pc {
    display: none !important;
  }
}

.lp .header .header-pc .logo {
  max-width: 244px;
}

.lp .header .header-pc .logo a {
  color: inherit;
  text-decoration: none;
}

.lp .header .header-pc .logo a .caption {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1;
}

.lp .header .header-pc .logo a img {
  width: 180px;
  display: block;
}

.lp .header .header-pc .header-menu {
  display: flex;
  align-items: center;
}

.lp .header .header-pc .header-menu .usermenu {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
}

.lp .header .header-pc .header-menu .usermenu a {
  color: #666;
  width: 120px;
}

.lp .header .header-pc .header-menu .usermenu a i {
  padding: 1rem;
  font-size: 2rem;
}

.lp .header .header-pc .header-menu .usermenu a span {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lp .header .header-pc .header-menu .userlogin {
  margin-left: 1.6rem;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
}

.lp .header .header-pc .header-menu .userlogin li {
  width: 120px;
}

.lp .header .header-pc .header-menu .userlogin .signin {
  background-color: #fff;
  color: #2cb696;
}

.lp .header .header-pc .header-menu .userlogin .signin a {
  width: 100%;
  padding: 1rem;
  border: 1px solid #2cb696;
  border-radius: 18px;
  display: block;
}

.lp .header .header-pc .header-menu .userlogin .signup {
  margin-left: 1rem;
}

.lp .header .header-pc .header-menu .userlogin .signup a {
  background-color: #2cb696;
  color: #fff;
  width: 100%;
  padding: 1rem;
  border-radius: 18px;
  display: block;
}

@media screen and (min-width: 769px) {
  .lp .header .header-sp {
    display: none !important;
  }
}

.lp .header .header-sp .header-userlogin-sp {
  height: 60px;
  max-width: 100%;
  width: 100%;
  padding: 0 1.6rem;
  background-color: #fff;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lp .header .header-sp .header-userlogin-sp .userlogin {
  margin-left: 1.6rem;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
}

.lp .header .header-sp .header-userlogin-sp .userlogin li {
  width: 120px;
}

.lp .header .header-sp .header-userlogin-sp .userlogin .signin {
  background-color: #fff;
  color: #2cb696;
}

.lp .header .header-sp .header-userlogin-sp .userlogin .signin a {
  width: 100%;
  padding: 1rem;
  border: 1px solid #2cb696;
  border-radius: 18px;
  display: block;
}

.lp .header .header-sp .header-userlogin-sp .userlogin .signup {
  margin-left: 1rem;
}

.lp .header .header-sp .header-userlogin-sp .userlogin .signup a {
  background-color: #2cb696;
  color: #fff;
  width: 100%;
  padding: 1rem;
  border-radius: 18px;
  display: block;
}

.lp .header .header-sp .header-main-sp {
  max-width: unset;
  height: 60px;
  padding: 0 1.6rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.lp .header .header-sp .header-main-sp .header-main-title .header-main-text {
  margin-bottom: .5rem;
  font-size: 1rem;
  line-height: 1;
}

.lp .header .header-sp .header-main-sp .header-main-title .header-main-image a {
  color: inherit;
  text-decoration: none;
}

.lp .header .header-sp .header-main-sp .header-main-title .header-main-image a img {
  margin: 0 auto;
  display: block;
  width: 120px;
  height: auto;
}

.lp .header .header-sp .header-main-sp .header-main-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  z-index: 101;
  line-height: 60px;
}

.lp .header .header-sp .header-main-sp .header-main-menu i {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: block;
  font-size: 3rem;
  color: #2cb696;
}

.lp .header .header-sp .header-menu-sp {
  height: 60px;
  padding: 0 1.6rem;
  background-color: #fff;
  border-top: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp .header .header-sp .header-menu-sp .usermenu {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
  padding: 0;
}

.lp .header .header-sp .header-menu-sp .usermenu a {
  color: #666;
  width: 120px;
}

.lp .header .header-sp .header-menu-sp .usermenu a i {
  padding: 1rem;
  font-size: 2rem;
}

.lp .header .header-sp .header-menu-sp .usermenu a span {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lp .header-main-sp-sticky {
  max-width: unset;
  height: 60px;
  padding: 0 1.6rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  top: 0px;
  z-index: 1001;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 769px) {
  .lp .header-main-sp-sticky {
    display: none !important;
  }
}

.lp .header-main-sp-sticky .header-main-title .header-main-text {
  margin-bottom: .5rem;
  font-size: 1rem;
  line-height: 1;
}

.lp .header-main-sp-sticky .header-main-title .header-main-image a {
  color: inherit;
  text-decoration: none;
}

.lp .header-main-sp-sticky .header-main-title .header-main-image a img {
  margin: 0 auto;
  display: block;
  width: 120px;
  height: auto;
}

.lp .header-main-sp-sticky .header-main-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  z-index: 101;
  line-height: 60px;
}

.lp .header-main-sp-sticky .header-main-menu i {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: block;
  font-size: 3rem;
  color: #2cb696;
}

.lp .catch {
  background: #000;
  display: flex;
  justify-content: center;
  padding: 4.2rem 1.6rem 0;
  align-items: center;
  background-image: url("../images/lp/lp_catch_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 340px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .lp .catch {
    flex-wrap: wrap;
    justify-content: center;
    padding: 2.7rem 0 0 0;
    background-image: url("../images/lp/lp_catch_bg_mobile.png");
    background-size: 100% 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-height: none;
  }
}

.lp .catch .catch-image {
  position: relative;
}

@media screen and (max-width: 768px) {
  .lp .catch .catch-image {
    order: 2;
    margin-right: 0;
    max-width: 300px;
  }
}

.lp .catch .catch-image p {
  max-width: 100%;
  margin: 0;
}

.lp .catch .catch-image p img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.lp .catch .catch-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  outline: 0;
  vertical-align: baseline;
  list-style: none;
  font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'Meiryo UI',YuGothic,'Yu Gothic','Yu Gothic UI',sans-serif;
  font-weight: 300;
}

@media screen and (max-width: 768px) {
  .lp .catch .catch-text {
    order: 1;
    text-align: center;
  }
}

.lp .catch .catch-text .p-sm {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 1.6rem;
}

@media screen and (max-width: 768px) {
  .lp .catch .catch-text .p-sm {
    font-size: 1.4rem;
  }
}

.lp .catch .catch-text .p-lg {
  font-size: 3.2rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .lp .catch .catch-text .p-lg {
    font-size: 3rem;
    margin-bottom: 0;
  }
}

.lp .catch .catch-text .p-lg span {
  font-size: 4.6rem;
}

.lp .main-menu {
  width: 100%;
  margin-bottom: 0;
  padding: 1.6rem;
  background-color: #2cb696;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
  .lp .main-menu {
    flex-wrap: wrap;
    padding: 0;
  }
}

.lp .main-menu .main-menu-item {
  padding: .8 .8rem;
  width: calc(100% /4);
  max-width: 250px;
}

@media screen and (max-width: 768px) {
  .lp .main-menu .main-menu-item {
    width: calc(100% /2);
    font-size: 1.2rem;
    padding: 1rem;
    border: 0.25px solid #eeeff0;
  }
}

.lp .main-menu .main-menu-item a {
  color: white;
  padding-right: 2rem;
}

@media screen and (max-width: 768px) {
  .lp .main-menu .main-menu-item a {
    padding-right: 0;
  }
}

.lp .cast-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 1.6rem;
}

@media screen and (max-width: 768px) {
  .lp .cast-list {
    padding: 4rem 1.6rem;
  }
}

.lp .cast-list .cast-list-header {
  margin-bottom: 5rem;
  padding-bottom: 3.4rem;
  color: #666;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .cast-list .cast-list-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .cast-list .cast-list-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .cast-list .cast-list-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .cast-list .cast-list-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}

.lp .cast-list .cast-list-wrap .cast-list-item {
  width: calc(100% /3);
  color: #333;
}

@media screen and (max-width: 768px) {
  .lp .cast-list .cast-list-wrap .cast-list-item {
    width: 100%;
  }
}

.lp .cast-list .cast-list-wrap .cast-list-item a {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-image {
  display: inline-block;
  border: 1px solid whitesmoke;
  height: 80px;
  width: 80px;
  min-width: 80px;
  border-radius: 4px;
  margin: 0 auto;
  object-fit: cover;
}

.lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text {
  margin-left: 2rem;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text {
    margin-left: 1rem;
  }
}

.lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text .cast-name {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text .cast-info {
  color: #2cb696;
  font-size: 1rem;
  line-height: 1.5;
}

.lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text .cast-info .badge-score {
  padding: 0.6rem 1rem;
  background-color: #2cb696;
  color: white;
}

@media screen and (max-width: 768px) {
  .lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text .cast-info .badge-score {
    padding: 0.6rem;
  }
}

.lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text .cast-info .badge-area {
  padding: 0.6rem 1rem;
  border: 1px solid #2cb696;
}

@media screen and (max-width: 768px) {
  .lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text .cast-info .badge-area {
    padding: 0.6rem;
  }
}

.lp .cast-list .cast-list-wrap .cast-list-item a .cast-list-text .cast-description {
  font-size: 1.2rem;
  line-height: 1.5;
}

.lp .about {
  padding: 6rem 1.6rem;
}

@media screen and (max-width: 768px) {
  .lp .about {
    padding: 4rem 1.6rem;
  }
}

.lp .about .about-header {
  margin-bottom: 5rem;
  padding-bottom: 3.4rem;
  color: #666;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .about .about-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .about .about-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .about .about-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .about .about-wrap {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .lp .about .about-wrap {
    display: block;
  }
}

.lp .about .about-wrap .about-image {
  max-width: 280px;
  margin: 2rem;
  padding: 10px;
}

@media screen and (max-width: 768px) {
  .lp .about .about-wrap .about-image {
    margin: 2rem auto;
    max-width: 200px;
  }
}

.lp .about .about-wrap .about-image img {
  max-width: 100%;
  height: auto;
}

.lp .about .about-wrap .about-content {
  max-width: 800px;
}

.lp .about .about-wrap .about-content .about-text {
  font-size: 1.4rem;
  text-align: left;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .lp .about .about-wrap .about-content .about-text {
    text-align: center;
  }
}

.lp .about .about-wrap .about-content .about-text .sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .lp .about .about-wrap .about-content .about-text .sp {
    display: block;
  }
}

.lp .about .about-wrap .about-content .about-link {
  color: #56b8b8;
  margin-top: 3rem;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .lp .about .about-wrap .about-content .about-link {
    text-align: center;
  }
}

.lp .reviews {
  padding: 0 1.6rem 6rem 1.6rem;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .lp .reviews {
    padding: 4rem 1.6rem;
  }
}

.lp .reviews .review-header {
  margin-bottom: 5rem;
  padding-bottom: 3.4rem;
  color: #666;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .reviews .review-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .reviews .review-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .reviews .review-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .reviews .review-caption {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 4.5rem;
}

@media screen and (max-width: 768px) {
  .lp .reviews .review-caption {
    font-size: 1.4rem;
  }
}

.lp .reviews .review-list-item {
  width: 100%;
  color: #333;
}

.lp .reviews .review-list-item a {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.lp .reviews .review-list-item a .review-list-image {
  display: inline-block;
  height: 80px;
  width: 80px;
  min-width: 80px;
  border-radius: 4px;
  margin: 0 auto;
  object-fit: cover;
}

.lp .reviews .review-list-item a .review-list-text {
  margin-left: 2rem;
  width: 100%;
}

.lp .reviews .review-list-item a .review-list-text .review-name {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.lp .reviews .review-list-item a .review-list-text .review-info {
  font-size: 1.2rem;
  line-height: 1.5;
}

.lp .reviews .review-list-item a .review-list-text .review-info .rating i {
  color: #ffdf88;
}

.lp .reviews .review-list-item a .review-list-text .review-description {
  font-size: 1.2rem;
  line-height: 1.5;
}

.lp .cast-count, .lp .cast-count-sp {
  background-color: #eeeff0;
}

.lp .cast-count .cast-count-text, .lp .cast-count-sp .cast-count-text {
  font-size: 1.8rem;
  color: #48485a;
  text-align: center;
  padding: 1rem 0;
}

@media screen and (max-width: 768px) {
  .lp .cast-count .cast-count-text, .lp .cast-count-sp .cast-count-text {
    font-size: 1.6rem;
    padding: .8rem 0;
  }
}

.lp .cast-count .cast-count-text .cast-number, .lp .cast-count-sp .cast-count-text .cast-number {
  margin-right: .5rem;
  font-size: 2.4rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .lp .cast-count .cast-count-text .cast-number, .lp .cast-count-sp .cast-count-text .cast-number {
    font-size: 2rem;
  }
}

@media screen and (min-width: 769px) {
  .lp .cast-count-sp {
    display: none;
  }
}

.lp .top-register-box {
  margin: 0 auto;
  padding: 2rem;
  background-color: #fff;
  border-bottom: 1px solid #cad2d2;
}

@media screen and (min-width: 769px) {
  .lp .top-register-box {
    display: none;
  }
}

.lp .top-register-box .register-btn a {
  display: block;
  background-color: #2cb696;
  width: 520px;
  margin: 0 auto;
  padding: 1rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .lp .top-register-box .register-btn a {
    width: 100%;
  }
}

.lp .top-register-box .register-btn a .register-btn-lg {
  font-size: 2.4rem;
  font-weight: bold;
}

.lp .register-box {
  background-color: #2cb696;
  padding: 4.2rem 1.6rem;
}

@media screen and (max-width: 768px) {
  .lp .register-box {
    padding: 4rem 1.6rem;
  }
}

.lp .register-box .register-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 4rem 2rem;
  background-color: #fff;
}

.lp .register-box .register-wrap .register-header {
  max-width: 520px;
  margin: 0 auto 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .lp .register-box .register-wrap .register-header {
    display: block;
  }
}

.lp .register-box .register-wrap .register-header .register-image {
  width: 100px;
  max-width: 100px;
  text-align: center;
  margin: 0 auto 2rem auto;
}

@media screen and (max-width: 768px) {
  .lp .register-box .register-wrap .register-header .register-image {
    width: 200px;
    max-width: 200px;
  }
}

.lp .register-box .register-wrap .register-header .register-image img {
  margin: 0 auto;
  display: block;
  width: 100px;
  max-width: 100px;
}

@media screen and (max-width: 768px) {
  .lp .register-box .register-wrap .register-header .register-image img {
    width: 200px;
    max-width: 200px;
  }
}

.lp .register-box .register-wrap .register-header .register-description {
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6;
}

.lp .register-box .register-wrap .register-header .register-description a {
  color: #56b8b8;
  text-decoration: underline;
}

.lp .register-box .register-wrap .register-btn a {
  display: block;
  background-color: #2cb696;
  width: 520px;
  margin: 0 auto;
  padding: 1rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .lp .register-box .register-wrap .register-btn a {
    width: 100%;
  }
}

.lp .register-box .register-wrap .register-btn a .register-btn-lg {
  font-size: 2.4rem;
  font-weight: bold;
}

.lp .threepoint {
  padding: 0 1.6rem;
}

@media screen and (max-width: 768px) {
  .lp .threepoint {
    padding: 0;
  }
}

.lp .threepoint .threepoint-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8rem 0 5rem;
  border-bottom: 1px solid #cad2d2;
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner {
    padding: 4rem 1.6rem 2.2rem;
  }
}

.lp .threepoint .threepoint-inner .threepoint-header {
  margin-bottom: 5rem;
  padding-bottom: 3.4rem;
  color: #666;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .threepoint .threepoint-inner .threepoint-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .threepoint .threepoint-inner .threepoint-caption {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 4.5rem;
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-caption {
    font-size: 1.4rem;
  }
}

.lp .threepoint .threepoint-inner .threepoint-list {
  padding: 0;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-list {
    display: block;
  }
}

.lp .threepoint .threepoint-inner .threepoint-list .threepoint-item {
  width: calc((100% - 4.8rem) / 3);
  padding: 2.4rem;
  border: 1px solid #cad2d2;
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-list .threepoint-item {
    width: 100%;
    padding: 1.2rem;
  }
}

.lp .threepoint .threepoint-inner .threepoint-list .threepoint-item .threepoint-item-image {
  margin-bottom: 3rem;
}

.lp .threepoint .threepoint-inner .threepoint-list .threepoint-item .threepoint-item-image i {
  font-size: 7rem;
  color: #2cb696;
}

.lp .threepoint .threepoint-inner .threepoint-list .threepoint-item .threepoint-list-title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 1.2rem;
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-list .threepoint-item .threepoint-list-title {
    font-size: 1.4rem;
  }
}

.lp .threepoint .threepoint-inner .threepoint-list .threepoint-item .threepoint-list-text {
  text-align: left;
  color: #666;
  line-height: 1.7;
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-list .threepoint-item .threepoint-list-text {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 768px) {
  .lp .threepoint .threepoint-inner .threepoint-list .threepoint-item:nth-child(2) {
    border-top: none;
    border-bottom: none;
  }
}

.lp .feature {
  padding: 0;
}

.lp .feature .feature-inner {
  width: 100%;
  margin: 0 auto;
  padding: 8rem 0 6rem;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner {
    padding: 4rem 0 3rem;
  }
}

.lp .feature .feature-inner .feature-header {
  margin-bottom: 5rem;
  padding-bottom: 3.4rem;
  color: #666;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .feature .feature-inner .feature-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .feature .feature-inner .feature-caption {
  font-size: 1.6rem;
  margin-bottom: 7.4rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-caption {
    margin-bottom: 2.6rem;
    font-size: 1.4rem;
  }
}

.lp .feature .feature-inner .feature-caption .sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-caption .sp {
    display: block;
  }
}

.lp .feature .feature-inner .pickup_cast_list {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto 11.6rem;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .pickup_cast_list {
    margin-bottom: 4.2rem;
  }
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin: 0px;
  padding: 5px;
  height: 100%;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast {
  display: inline-block;
  width: 200px;
  max-width: 200px;
  height: auto;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link {
  font-size: 1.2rem;
  background-color: white;
  position: relative;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-img-top {
  width: 100%;
  height: 200px;
  border: 1px solid whitesmoke;
  object-fit: cover;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-img-overlay {
  height: 30px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  position: absolute;
  bottom: 60px;
  top: unset;
  left: 0;
  padding: 0 4px;
  margin: 0;
  line-height: 30px;
  text-align: left;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-img-overlay .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-img-overlay .profile-userscore {
  background-color: #555;
  color: white;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-img-overlay .profile-userscore i {
  color: white;
  margin-right: 4px;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-img-overlay .badge {
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-body {
  height: 60px;
  padding: 2px 4px;
  text-align: left;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-body .card-title {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lp .feature .feature-inner .pickup_cast_list .pickup_casts .pickup_cast .pickup_cast_link .card-body .card-text {
  margin: 3px 0;
  font-size: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lp .feature .feature-inner .feature-list {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list {
    margin: 0;
    padding: 0 1.3rem;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-header {
  font-size: 1.6rem;
  font-weight: bold;
  color: #666;
  border-left: 3px solid #56b8b8;
  padding-left: 1.7rem;
  margin-bottom: 1.2rem;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-header {
    font-size: 1.4rem;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-caption {
  line-height: 1.35;
  margin-bottom: 2.7rem;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-caption {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-items {
  display: flex;
  margin-bottom: 5.8rem;
  justify-content: space-between;
  text-align: center;
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items {
    flex-wrap: wrap;
    margin-bottom: 3.2rem;
    padding: 0;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item {
  width: calc(100% / 2 - 20px);
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item {
    width: 100%;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item a {
  display: block;
  padding: 2rem 4rem;
  height: 100%;
  background: #2cb696;
  border-radius: 4px;
  position: relative;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item a {
    padding: 1.3rem 4rem;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-title {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 1.3rem;
  padding-left: 2.8rem;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-title {
    font-size: 1.4rem;
    margin-bottom: 1.3rem;
    padding-left: 2rem;
    background-size: 1.2rem auto;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-caption {
  color: #fff;
  font-size: 1.3rem;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-caption {
    font-size: 1.2rem;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-caption .sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-caption .sp {
    display: block;
  }
}

.lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-right {
  position: absolute;
  top: calc(100% / 2 - 1.6rem);
  right: 15px;
  color: white;
  font-size: 1.6rem;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item .feature-list-item-right {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-list .feature-list-items .feature-list-item:nth-child(2) {
    margin-top: 1.3rem;
  }
}

.lp .feature .feature-inner .feature-contact-text {
  text-align: center;
  color: #3c3c3c;
  margin-bottom: 2.7rem;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-contact-text {
    font-size: 1.2rem;
    margin-bottom: 2.4rem;
  }
}

.lp .feature .feature-inner .feature-contact-text .sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-contact-text .sp {
    display: block;
  }
}

.lp .feature .feature-inner .feature-contact a {
  display: block;
  width: 240px;
  margin: 0 auto;
  padding: 1rem;
  background-color: #2cb696;
  color: #fff;
  text-align: center;
  border-radius: 25px;
}

@media screen and (max-width: 768px) {
  .lp .feature .feature-inner .feature-contact a {
    font-size: 1.4rem;
  }
}

.lp .guide {
  padding: 6rem 1.6rem 5rem;
  background-color: #f7f8f8;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .lp .guide {
    padding: 4rem 1.3rem 1.8rem;
  }
}

.lp .guide .guide-header {
  font-size: 2.4rem;
  font-weight: bold;
  color: #666;
  text-align: center;
  position: relative;
  margin: 0 0 5rem;
  padding-bottom: 3.4rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guide-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .guide .guide-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .guide .guide-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .guide .guidelist {
  background-color: #fff;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist {
    padding: 1.9rem 1.3rem 2.1rem;
  }
}

.lp .guide .guidelist .guidelist-item {
  margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item {
    margin-bottom: 3.2rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-header {
  font-size: 1.6rem;
  font-weight: bold;
  color: #666;
  border-left: 3px solid #56b8b8;
  padding-left: 1.7rem;
  margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-header {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-image-pc {
  max-width: 900px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-image-pc {
    display: none;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-image-pc img {
  max-width: 900px;
}

.lp .guide .guidelist .guidelist-item .guidelist-image-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-image-sp {
    max-width: 288px;
    margin: 0 auto;
    display: block;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-image-sp img {
  max-width: 288px;
}

.lp .guide .guidelist .guidelist-item .guidelist-link {
  text-align: right;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-link {
    line-height: 1;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-link a {
  padding-left: 1.4rem;
  display: inline-block;
  color: #2cb696;
  font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-link a {
    font-size: 1.2rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-movie {
  margin-bottom: 5.4rem;
  position: relative;
  width: 100%;
  max-width: 450px;
}

.lp .guide .guidelist .guidelist-item .guidelist-movie video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lp .guide .guidelist .guidelist-item .guidelist-movie::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.lp .guide .guidelist .guidelist-item .guidelist-title {
  font-size: 1.6rem;
  margin-bottom: 1.8rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-title {
    font-size: 1.2rem;
    margin-bottom: .5rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-text {
  font-size: 1.6rem;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-text {
    font-size: 1.2rem;
    margin-bottom: .5rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-price-text {
  max-width: 400px;
  border: 1px solid #cad2d2;
  border-radius: 4px;
  font-weight: bold;
  padding: 1.7rem 2.8rem;
  margin: 2rem 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-price-text {
    width: 320px;
  }
}

.lp .guide .guidelist .guidelist-item .sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .sp {
    display: block;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-price-plus {
  text-align: center;
  max-width: 400px;
  margin: 2rem 0;
  font-size: 3rem;
  color: #2cb696;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-price-plus {
    width: 320px;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-price-table {
  max-width: 400px;
  border: 1px solid #cad2d2;
  border-radius: 4px;
  padding: 0;
  margin: 2rem 0;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-price-table {
    width: 320px;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-price-table .guidelist-price {
  font-weight: bold;
  padding: 1.7rem 2.8rem;
  border-bottom: 1px solid #cad2d2;
}

.lp .guide .guidelist .guidelist-item .guidelist-price-table .guidelist-price:nth-child(1) {
  background-color: #cad2d2;
  text-align: center;
  font-weight: bold;
}

.lp .guide .guidelist .guidelist-item .guidelist-price-table .guidelist-price:nth-child(1) .sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-price-table .guidelist-price:nth-child(1) .sp {
    display: block;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-price-table .guidelist-price:nth-child(3) {
  color: brown;
  background-color: white;
}

.lp .guide .guidelist .guidelist-item .guidelist-price-table .guidelist-price:nth-child(4) {
  color: silver;
}

.lp .guide .guidelist .guidelist-item .guidelist-price-table .guidelist-price:nth-child(5) {
  color: gold;
  border-bottom: none;
}

.lp .guide .guidelist .guidelist-item .guidelist-payments {
  margin: 2rem 0;
  padding: 0;
  display: flex;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-payments {
    flex-wrap: wrap;
    margin: 1rem 0;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment {
  border: 1px solid #cad2d2;
  padding: 1.7rem 2.8rem;
  width: 50%;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment {
    width: 320px;
  }
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment {
    width: 100%;
    padding: 1.3rem 1.8rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1.2rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-title {
    font-size: 1.4rem;
    margin-bottom: .8rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-text {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-text {
    font-size: 1.2rem;
  }
}

.lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-card-image {
  max-width: 90%;
  text-align: center;
}

.lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-card-image img {
  max-width: 90%;
  margin: 0 auto;
}

.lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-receipt-image {
  max-width: 90%;
  text-align: center;
}

.lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment .guidelist-payment-receipt-image img {
  max-width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment:nth-child(2) {
    border-left: none;
  }
}

@media screen and (max-width: 768px) {
  .lp .guide .guidelist .guidelist-item .guidelist-payments .guidelist-payment:nth-child(2) {
    border-top: none;
  }
}

.lp .guide-link {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 4rem;
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .lp .guide-link {
    font-size: 1.4rem;
  }
}

.lp .guide-link a {
  display: block;
  width: 300px;
  margin: 0 auto;
  padding: 1rem;
  background: #2cb696;
  color: #fff;
  text-align: center;
  border-radius: 25px;
}

@media screen and (max-width: 768px) {
  .lp .guide-link a {
    width: 320px;
  }
}

.lp .help {
  padding: 6rem 1.6rem 5rem;
  background-color: #f7f8f8;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .lp .help {
    padding: 4rem 1.3rem 1.8rem;
  }
}

.lp .help .help-header {
  font-size: 2.4rem;
  font-weight: bold;
  color: #666;
  text-align: center;
  position: relative;
  margin: 0 0 5rem;
  padding-bottom: 3.4rem;
}

@media screen and (max-width: 768px) {
  .lp .help .help-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .help .help-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .help .help-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .help .helplist {
  background-color: #fff;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem;
}

@media screen and (max-width: 768px) {
  .lp .help .helplist {
    padding: 1.9rem 1.3rem 2.1rem;
  }
}

.lp .help .helplist .helplist-item {
  margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .lp .help .helplist .helplist-item {
    margin-bottom: 3.2rem;
  }
}

.lp .help .helplist .helplist-item .helplist-question {
  text-align: left;
  text-decoration: none;
  width: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  border-left: 3px solid #666;
  padding-left: 1.7rem;
  background-color: #2cb696;
  border-radius: 0px;
  padding: 1rem;
}

@media screen and (max-width: 768px) {
  .lp .help .helplist .helplist-item .helplist-question {
    font-size: 1.4rem;
  }
}

.lp .help .helplist .helplist-item .helplist-answer {
  background-color: #f7f8f8;
  font-size: 1.6rem;
  padding: 1rem;
}

@media screen and (max-width: 768px) {
  .lp .help .helplist .helplist-item .helplist-answer {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}

.lp .contact {
  padding: 6rem 1.6rem 5rem;
  background-color: #f7f8f8;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .lp .contact {
    padding: 4rem 1.3rem 1.8rem;
  }
}

.lp .contact .contact-header {
  font-size: 2.4rem;
  font-weight: bold;
  color: #666;
  text-align: center;
  position: relative;
  margin: 0 0 5rem;
  padding-bottom: 3.4rem;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.lp .contact .contact-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.lp .contact .contact-form {
  background-color: #fff;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form {
    padding: 1.9rem 1.3rem 2.1rem;
  }
}

.lp .contact .contact-form .contact-form-label {
  text-align: left;
  text-decoration: none;
  width: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  color: #666;
  border-left: 3px solid #2cb696;
  padding-left: 1.7rem;
  border-radius: 0px;
  padding: 1rem;
  margin-bottom: 1.4rem;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form .contact-form-label {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}

.lp .contact .contact-form .contact-form-input {
  display: block;
  text-align: left;
  width: 100%;
  background-color: #f7f8f8;
  font-size: 1.6rem;
  padding: 1rem;
  margin-bottom: 1.4rem;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form .contact-form-input {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}

.lp .contact .contact-form .contact-form-input-category-box {
  margin-bottom: 1.4rem;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form .contact-form-input-category-box {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}

.lp .contact .contact-form .contact-form-input-category-item {
  text-align: left;
  width: calc(100% /4);
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form .contact-form-input-category-item {
    width: 100%;
  }
}

.lp .contact .contact-form .contact-form-input-category-item .contact-form-category-label {
  padding: 1rem;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form .contact-form-input-category-item .contact-form-category-label {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}

.lp .contact .contact-form .contact-form-input-category-item .contact-form-category-input {
  appearance: radio;
  -moz-appearance: radio;
  -webkit-appearance: radio;
  padding: 1rem;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form .contact-form-input-category-item .contact-form-category-input {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}

.lp .contact .contact-form .contact-form-submit {
  display: block;
  width: 240px;
  margin: 1rem auto;
  padding: 1rem;
  background-color: #2cb696;
  color: #fff;
  text-align: center;
  border-radius: 25px;
}

@media screen and (max-width: 768px) {
  .lp .contact .contact-form .contact-form-submit {
    font-size: 1.4rem;
  }
}

.lp .search-header-pc {
  background-color: #2cb696;
  display: flex;
  justify-content: center;
  padding: 4.2rem 1.6rem 0;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .lp .search-header-pc {
    display: none !important;
  }
}

.lp .search-header-pc .search-header-image {
  position: relative;
}

.lp .search-header-pc .search-header-image p {
  max-width: 100%;
  margin: 0;
}

.lp .search-header-pc .search-header-image p img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.lp .search-header-pc .search-header-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  outline: 0;
  vertical-align: baseline;
  list-style: none;
  font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'Meiryo UI',YuGothic,'Yu Gothic','Yu Gothic UI',sans-serif;
  font-weight: 300;
}

.lp .search-header-pc .search-header-text .p-sm {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 2.4rem;
}

.lp .search-header-pc .search-header-text .p-lg {
  font-size: 3.2rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.6;
}

.lp .search-header-pc .search-header-text .p-lg span {
  font-size: 4.6rem;
}

.lp .search-header-sp {
  height: 100px;
  padding: 0 20px;
  background-color: #2cb696;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 769px) {
  .lp .search-header-sp {
    display: none !important;
  }
}

.lp .search-header-sp .search-header-text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
}

.lp .search-header-sp .search-header-text p {
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  margin: 0;
}

.lp .search-box {
  border-top: 1px solid #e1e1e9;
  background-color: #fff;
}

.lp .search-box .search-box_inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 25px 15px;
  display: flex;
}

@media screen and (max-width: 768px) {
  .lp .search-box .search-box_inner {
    padding: 2rem 0.8rem 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.lp .search-box .search-box_inner .search-box-box {
  height: 36px;
  margin-right: 1rem;
  display: inline-block;
  position: relative;
}

@media screen and (max-width: 768px) {
  .lp .search-box .search-box_inner .search-box-box {
    width: 100%;
    margin: 0 0 2rem;
  }
}

.lp .search-box .search-box_inner .search-box-box button {
  width: 400px;
  height: 100%;
  padding: 0.75rem;
  border: solid 1px #d3d8dc;
  border-radius: 2px;
  font-size: 1.4rem;
  display: flex;
}

@media screen and (max-width: 768px) {
  .lp .search-box .search-box_inner .search-box-box button {
    width: 100%;
    height: 42px;
  }
}

.lp .search-box .search-box_inner .search-box-box button span {
  text-align: center;
  padding-left: 1rem;
}

.lp .search-box .search-box_inner .search-box-box button i {
  width: 36px;
  color: white;
  background-color: #2cb696;
  border: none;
  border-radius: 0 2px 2px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding-top: 7px;
}

@media screen and (max-width: 768px) {
  .lp .search-box .search-box_inner .search-box-box button i {
    padding-top: 10px;
    width: 48px;
    height: 42px;
  }
}

.lp .search-box .search-box_inner .search-box-list {
  margin-right: 1rem;
  display: flex;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .lp .search-box .search-box_inner .search-box-list {
    width: 100%;
    height: 42px;
    margin: 0;
    justify-content: space-between;
  }
}

.lp .search-box .search-box_inner .search-box-list .search-box-list-item {
  margin-right: 1rem;
  line-height: 1;
  position: relative;
}

@media screen and (max-width: 768px) {
  .lp .search-box .search-box_inner .search-box-list .search-box-list-item {
    width: calc(100% / 3 - 20px / 3);
    margin: 0;
  }
}

.lp .search-box .search-box_inner .search-box-list .search-box-list-item a {
  height: 36px;
  padding: 0 0.75rem;
  background-color: #fff;
  border: 1px solid #e1e1e9;
  border-radius: 3px;
  color: #48485a;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .lp .search-box .search-box_inner .search-box-list .search-box-list-item a {
    height: auto;
    padding: 1rem;
    justify-content: center;
    position: relative;
  }
}

.lp .search-box .search-box_inner .search-box-list .search-box-list-item .lp-search-box-fukidashi {
  min-width: 240px;
  padding: 1.5rem 1rem 1rem 1.5rem;
  background-color: #fff;
  color: #48485a;
  font-size: 0.875rem;
  position: absolute;
  top: 85%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity, top, pointer-events;
  transition-duration: 0.4s, 0.4s, 0s;
  transform: translateX(-50%);
  z-index: 1;
}

.lp .search-box-purpose {
  background-color: #fff;
}

.lp .search-box-purpose .search-box-purpose-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #dddddd;
}

@media screen and (max-width: 768px) {
  .lp .search-box-purpose .search-box-purpose-inner {
    display: block;
  }
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-people .search-box-people-target {
  padding-top: 50px;
  padding-left: 20px;
}

@media screen and (max-width: 768px) {
  .lp .search-box-purpose .search-box-purpose-inner .search-box-people .search-box-people-target {
    padding: 1.5rem 1rem;
  }
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-people .search-box-people-target .target-value {
  color: #48aba9;
  font-size: 27px;
  font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'Meiryo UI',YuGothic,'Yu Gothic','Yu Gothic UI',sans-serif;
  font-weight: bold;
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-people .search-box-people-target .target-value .target-value-text {
  font-size: 14px;
  margin: 0 15px 0 12px;
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-button-text {
  font-size: 12px;
  font-weight: bold;
  margin: 1.2rem 0 1rem;
  text-align: right;
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-button-list {
  display: flex;
}

@media screen and (max-width: 768px) {
  .lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-button-list {
    display: none;
  }
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-button-list .search-box-button-item {
  margin-bottom: 8px;
  margin-right: 8px;
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-button-list .search-box-button-item .search-box-button-link {
  width: 70px;
  height: 64px;
  display: block;
  border: solid 1px #51B8B9;
  border-radius: 3px;
  color: #51B8B9;
  font-size: 10px;
  text-align: center;
  padding: 10px;
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-button-list .search-box-button-item .search-box-button-link .icon {
  font-size: 2rem;
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-select {
  position: relative;
  border: 1px solid #e1e1e9;
  border-radius: 2px;
  background: #fff;
}

@media screen and (min-width: 769px) {
  .lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-select {
    display: none;
  }
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-select .search-box-select-input {
  padding: 1rem 1.5rem;
  color: #333;
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  appearance: none;
}

.lp .search-box-purpose .search-box-purpose-inner .search-box-buttons .search-box-select::before {
  position: absolute;
  top: 1em;
  right: 1em;
  content: '▼';
  color: #e1e1e9;
  pointer-events: none;
}

.lp .search-cast-grid {
  background-color: whitesmoke;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid {
    padding: 2rem 0.5rem 0;
  }
}

.lp .search-cast-grid .search-cast-grid-list {
  max-width: 1340px;
  margin: 0 auto;
  padding: 1.7rem 0.6rem;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list {
    margin: 0 -0.25rem;
    padding: 0;
  }
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item {
  margin: 0 0.75rem 1.5rem;
  width: 240px;
  background-color: #fff;
  border-bottom: 1px solid #eff2f2;
  border-right: 1px solid #eff2f2;
  border-left: 1px solid #eff2f2;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item {
    width: calc(50% - .5rem);
    margin: 0 0.25rem 0.5rem;
  }
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-image {
  cursor: pointer;
  font-size: 1.2rem;
  background-color: white;
  position: relative;
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-image img {
    height: 186px;
  }
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text {
  height: calc(100% - 250px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-information {
  padding: 16px;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-information {
    width: 100%;
  }
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-information .name {
  color: #333340;
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-information .description {
  height: 60px;
  margin-top: .7rem;
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-information .description {
    height: 52px;
  }
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-information .tags {
  min-height: 40px;
  margin-top: .7rem;
  color: #858b94;
  display: block;
  font-size: 1rem;
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-buttons {
  width: 100%;
  padding: 10px 16px;
  border-top: 2px dotted #f6f6f9;
  display: flex;
  font-size: 1.2rem;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-buttons {
    flex-wrap: wrap;
  }
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-buttons .search-cast-grid-list-item-button-favorite {
  padding-left: 1rem;
  color: #56b8b8;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-buttons .search-cast-grid-list-item-button-favorite {
    width: 100%;
  }
}

.lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-buttons .search-cast-grid-list-item-button-offer {
  padding-left: 1rem;
  color: #56b8b8;
}

@media screen and (max-width: 768px) {
  .lp .search-cast-grid .search-cast-grid-list .search-cast-grid-list-item .search-cast-grid-list-item-text .search-cast-grid-list-item-buttons .search-cast-grid-list-item-button-offer {
    margin-top: 0.75rem;
    width: 100%;
  }
}

.lp .search-pagination {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .lp .search-pagination {
    padding: 1.2rem 1rem;
    flex-wrap: wrap;
  }
}

.lp .search-pagination .search-pagination-inner {
  margin: 0 0 0 auto;
  width: 232px;
}

@media screen and (max-width: 768px) {
  .lp .search-pagination .search-pagination-inner {
    width: 100%;
  }
}

.lp .search-pagination .search-pagination-inner .pagination {
  box-shadow: none;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .lp .search-pagination .search-pagination-inner .pagination {
    margin-top: 0;
  }
}

.lp .search-pagination .search-pagination-inner .pagination .page-item {
  display: inline;
  flex: 0 0 37px;
  box-shadow: 0 2px 5px 3px #dfdfdf;
}

.lp .search-pagination .search-pagination-inner .pagination .page-item a {
  width: 100%;
  height: 37px;
  color: #48485a;
  text-decoration: none;
  line-height: 37px;
  padding: 0;
}

.lp .search-pagination .search-pagination-inner .pagination .active a {
  color: white;
  background-color: #2cb696;
  border: none;
}

.lp .search-pagination .search-pagination-caption {
  width: 100%;
  color: #a8a8a8;
  font-size: 1.2rem;
  text-align: right;
}

.lp .profile-main {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: unset !important;
  z-index: 0;
  overflow-x: scroll;
  overflow-y: scroll;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: row;
  max-width: unset;
}

@media screen and (max-width: 768px) {
  .lp .profile-main {
    display: block;
    width: 100%;
  }
}

.lp .profile-col1 {
  width: 400px;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .lp .profile-col1 {
    order: 1;
    width: 100%;
  }
}

.lp .profile-col2 {
  width: 400px;
  text-align: left;
  border-left: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
  .lp .profile-col2 {
    border-left: none;
    order: 2;
    width: 100%;
  }
}

.lp .profile-col3 {
  width: 400px;
  text-align: left;
  border-left: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
  .lp .profile-col3 {
    border-left: none;
    order: 3;
    width: 100%;
  }
}

.lp .profile-col4 {
  width: calc(100% - 1200px);
  border-left: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
  .lp .profile-col4 {
    border-left: none;
    order: 4;
    width: 100%;
  }
}

.lp .profile-col4 .user-schedule-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.lp .profile-col4 .user-schedule-wrapper .schedule-header {
  margin-bottom: 8px;
  margin-left: 8px;
  font-size: 2rem;
  font-weight: bold;
  color: #2cb696;
  text-align: left;
}

.lp .profile-col4 .user-schedule-wrapper .schedules {
  padding: 10px;
}

.lp .profile-col4 .user-schedule-wrapper .schedules .schedule {
  display: inline-block;
  width: auto;
  margin: 0 10px;
}

.lp .profile-col4 .user-schedule-wrapper .schedules .schedule .month {
  font-size: 2rem;
  color: white;
  background-color: #2cb696;
  border-radius: 4px;
  padding: 10px;
}

.lp .profile-col4 .user-schedule-wrapper .schedules .schedule .day {
  font-weight: bold;
}

.lp .profile-col4 .user-schedule-wrapper .schedules .schedule .ok {
  font-size: 1.4rem;
  color: #2cb696;
  padding: 10px;
}

.lp .profile-col4 .user-schedule-wrapper .schedules .schedule .ng {
  font-size: 1.4rem;
  padding: 10px;
}

.lp .profile-image-wrapper {
  width: 100%;
  height: auto;
  position: relative;
}

.lp .profile-image-wrapper .profile-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.lp .profile-image-wrapper .profile-image-layer {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  border-radius: 0 0 5px 5px;
  color: white;
  text-align: left;
  line-height: 60px;
}

.lp .profile-image-wrapper .profile-image-layer .profile-userinfo {
  font-size: 1.6rem;
  margin: 0;
  padding: 0 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  vertical-align: middle;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.lp .profile-image-wrapper .profile-image-layer .profile-userinfo .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.lp .profile-image-wrapper .profile-image-layer .profile-userinfo .profile-usernonsubscribe {
  background-color: white;
  color: #555;
}

.lp .profile-image-wrapper .profile-image-layer .profile-userinfo .profile-usersubscribe {
  background-color: gold;
  color: #555;
}

.lp .profile-image-wrapper .profile-image-layer .profile-userinfo .badge {
  font-size: 1.2rem;
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.lp .profile-image-wrapper .profile-image-edit {
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  color: #2cb696;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  margin: 0;
}

.lp .profile-image-subwrapper {
  height: auto;
  width: 100%;
  text-align: left;
  padding: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.lp .profile-image-subwrapper span {
  height: 60px;
  width: 60px;
  margin-right: 6px;
}

.lp .profile-image-subwrapper img {
  max-width: 60px;
  max-height: 60px;
  height: 60px;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.lp .profile-image-subwrapper .active-image {
  border: 3px solid #2cb696;
}

.searchnormal {
  text-align: center;
  max-width: 768px;
  margin-top: 130px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.searchnormal .login-cast-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 1.6rem;
  background-color: white;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list {
    padding: 2rem 0;
  }
}

.searchnormal .login-cast-list .cast-list-header {
  margin-bottom: 5rem;
  padding-bottom: 3.4rem;
  color: #666;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.searchnormal .login-cast-list .cast-list-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.searchnormal .login-cast-list .cast-list-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item {
  width: calc(100% /4);
  color: #333;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap .cast-list-item {
    width: calc(100% /3);
    padding: 0.5rem;
  }
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap .cast-list-item a::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item a {
  display: flex;
  align-items: center;
  padding: 1rem;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap .cast-list-item a {
    display: block;
    position: relative;
    width: 100%;
  }
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item a .cast-list-image {
  display: inline-block;
  border: 1px solid whitesmoke;
  height: 80px;
  width: 80px;
  min-width: 80px;
  border-radius: 3px;
  margin: 0 auto;
  object-fit: cover;
  border: none;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap .cast-list-item a .cast-list-image {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
    min-width: unset;
  }
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item a .cast-list-image-overlay {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  border-radius: 3px;
  padding: 0.5rem;
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item a .cast-list-image-overlay .cast-name {
  color: white;
  font-size: 0.8rem;
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text {
  margin-left: 2rem;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text {
    margin-left: 0;
    padding: 0.5rem 0;
    display: block;
  }
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info {
  color: #2cb696;
  font-size: 1rem;
  line-height: 1.5;
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .yellow {
  color: #ffdf88;
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-review {
  padding: 0.6rem 1rem;
  background-color: #2cb696;
  color: white;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-review {
    padding: 0.5rem;
    margin: 0 0.5rem 0.5rem 0;
  }
}

.searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-area, .searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-score {
  padding: 0.6rem 1rem;
  border: 1px solid #2cb696;
}

@media screen and (max-width: 768px) {
  .searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-area, .searchnormal .login-cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-score {
    padding: 0.5rem;
    margin: 0 0.5rem 0.5rem 0;
  }
}

.searchnormal .cast-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 1.6rem;
  background-color: white;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list {
    padding: 2rem 0;
  }
}

.searchnormal .cast-list .cast-list-header {
  margin-bottom: 5rem;
  padding-bottom: 3.4rem;
  color: #666;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-header {
    margin: 0 0 2.4rem;
    padding-bottom: 2.3rem;
    font-size: 1.8rem;
  }
}

.searchnormal .cast-list .cast-list-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 2px;
  background-color: #56b8b8;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-header::after {
    width: 60px;
    bottom: 0rem;
  }
}

.searchnormal .cast-list .cast-list-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item {
  width: calc(100% /3);
  color: #333;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap .cast-list-item {
    width: calc(100% /2);
    padding: 0.5rem;
  }
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap .cast-list-item a::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item a {
  display: flex;
  align-items: center;
  padding: 1rem;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap .cast-list-item a {
    display: block;
    position: relative;
    width: 100%;
  }
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item a .cast-list-image {
  display: inline-block;
  border: 1px solid whitesmoke;
  height: 80px;
  width: 80px;
  min-width: 80px;
  border-radius: 3px;
  margin: 0 auto;
  object-fit: cover;
  border: none;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap .cast-list-item a .cast-list-image {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
  }
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item a .cast-list-image-overlay {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  border-radius: 3px;
  padding: 0.5rem;
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item a .cast-list-image-overlay .cast-name {
  color: white;
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item a .cast-list-image-overlay .cast-name .cast-rank {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0 0.5rem;
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: #666;
  text-align: center;
  background-color: #ffdf88;
  border: 1px solid #888;
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item a .cast-list-image-overlay .cast-score {
  color: white;
  font-size: 0.8rem;
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text {
  margin-left: 2rem;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text {
    margin-left: 0;
    padding: 0.5rem 0;
    display: block;
  }
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info {
  color: #2cb696;
  font-size: 1rem;
  line-height: 1.5;
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .yellow {
  color: #ffdf88;
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-review {
  padding: 0.6rem 1rem;
  background-color: #2cb696;
  color: white;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-review {
    padding: 0.5rem;
    margin: 0 0.5rem 0.5rem 0;
  }
}

.searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-area, .searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-score {
  padding: 0.6rem 1rem;
  border: 1px solid #2cb696;
}

@media screen and (max-width: 768px) {
  .searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-area, .searchnormal .cast-list .cast-list-wrap .cast-list-item .cast-list-text .cast-info .badge-score {
    padding: 0.5rem;
    margin: 0 0.5rem 0.5rem 0;
  }
}

.searchnormal .new-cast-user-wrapper {
  width: 100%;
  height: auto;
  background-color: white;
  padding: 5px;
  text-align: left;
  border-top: 5px solid whitesmoke;
}

.searchnormal .new-cast-user-wrapper .new-cast-users {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin: 0px;
  padding: 5px;
  height: 100%;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user {
  /* 横スクロール用 */
  display: inline-block;
  width: 80px;
  margin: 0 5px 0 0;
  background-color: white;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card {
  border-radius: 8px;
  font-size: 1.2rem;
  background-color: white;
  position: relative;
  height: 100%;
  border: 1px solid whitesmoke;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-img-top {
  border-radius: 8px;
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay {
  height: 30px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  position: absolute;
  bottom: 0;
  top: unset;
  left: 0;
  padding: 0 4px;
  margin: 0;
  line-height: 30px;
  text-align: left;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .badge {
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-img-overlay .profile-userscore {
  background-color: #555;
  color: white;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-body {
  height: 30px;
  padding: 2px 4px;
  text-align: left;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-body .card-title {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user .card-body .card-text {
  margin: 3px 0;
  font-size: 1rem;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchnormal .new-cast-user-wrapper .new-cast-users .cast-user i {
  color: white;
  margin-right: 3px;
}

.searchnormal .pickup-user-wrapper {
  padding: 5px;
  background-color: white;
  height: auto;
  text-align: left;
  border-top: 1px solid whitesmoke;
}

.searchnormal .pickup-user-wrapper .pickup_users {
  padding-left: 15px;
  padding-right: 15px;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card {
  border-radius: 8px;
  font-size: 1.2rem;
  background-color: white;
  position: relative;
  border: none;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-top {
  border-radius: 8px;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay {
  height: 30px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  position: absolute;
  bottom: 60px;
  top: unset;
  left: 0;
  padding: 0 4px;
  margin: 0;
  line-height: 30px;
  text-align: left;
  border-radius: 0 0 8px 8px;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userrank {
  background-color: #2cb696;
  color: white;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userscore {
  background-color: #555;
  color: white;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .profile-userscore i {
  color: white;
  margin-right: 4px;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay .badge {
  margin-left: 4px;
  padding: 4px 8px;
  font-weight: normal;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-body {
  height: 60px;
  padding: 2px 4px;
  text-align: left;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-body .card-title {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .card .card-body .card-text {
  margin: 3px 0;
  font-size: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 10px;
  right: 10px;
  background-color: white;
  border-radius: 50%;
  padding: 0;
  outline: none;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .ikitai {
  font-size: 1rem;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .fa-heart {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: #CDCDCD;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .faved {
  color: #e0245e !important;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 60px;
  right: 10px;
  padding: 0;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up i {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: white;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 100px;
  right: 10px;
  padding: 0;
}

.searchnormal .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down i {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: white;
}

.header-main-menu {
  /*ボタンのスタイル*/
}

.header-main-menu .Toggle {
  position: relative;
  top: 8px;
  right: 0px;
  width: 45px;
  height: 45px;
  cursor: pointer;
  display: block;
}

.header-main-menu .Toggle span {
  display: block;
  position: absolute;
  width: 35px;
  border-bottom: solid 4px #2cb696;
  transition: .35s ease-in-out;
  left: 6px;
}

.header-main-menu .Toggle span:nth-child(1) {
  top: 9px;
}

.header-main-menu .Toggle span:nth-child(2) {
  top: 20px;
}

.header-main-menu .Toggle span:nth-child(3) {
  top: 31px;
}

.header-main-menu .Toggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  transform: rotate(-45deg);
  border-bottom: solid 3px #2cb696;
}

.header-main-menu .Toggle.active span:nth-child(2),
.header-main-menu .Toggle.active span:nth-child(3) {
  top: 18px;
  transform: rotate(45deg);
  border-bottom: solid 3px #2cb696;
}

/*ナビのスタイル*/
nav.NavMenu {
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  background: white;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
}

nav.NavMenu ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

nav.NavMenu ul li {
  font-size: 24px;
  list-style-type: none;
  width: 100%;
  padding-bottom: 0px;
}

nav.NavMenu ul li:last-child {
  padding-bottom: 0;
}

nav.NavMenu ul li a {
  display: block;
  color: #2cb696;
  padding: 15px 0;
  font-weight: bold;
  font-size: 18px;
}

/*APP*****************************************************/
*:checked + .tabbar__button.tabbar__button {
  color: #2cb696 !important;
}

.back-button__icon, .back-button__icon {
  fill: #2cb696 !important;
}

*:checked + .segment__button {
  color: white !important;
  background-color: #2cb696 !important;
}

.segment__button {
  color: #2cb696 !important;
  border: 1px solid #2cb696 !important;
}

.appTimeline, .appSearch {
  text-align: center;
  max-width: 768px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

.appSearch .pickup-user-wrapper {
  padding: 10px;
  background-color: white;
  height: auto;
  text-align: left;
}

.appSearch .pickup-user-wrapper .pickup_users {
  padding-left: 10px;
  padding-right: 10px;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .card {
  border-radius: 8px;
  font-size: 1.2rem;
  background-color: white;
  position: relative;
  border: none;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-top {
  border-radius: 8px;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .card .card-img-overlay {
  border-radius: 8px;
  height: 40px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  position: absolute;
  bottom: 0;
  top: unset;
  left: 0;
  padding: 0 8px;
  margin: 0;
  text-align: left;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .card .user-name {
  margin: 2px 0;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info {
  height: 40px;
  padding: 2px;
  text-align: left;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-review {
  font-size: 1rem;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-review i {
  font-size: 1.2rem;
  color: #ffdf88;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-favorite {
  font-size: 1rem;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-favorite i {
  font-size: 1.2rem;
  color: #e0245e;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-score {
  font-size: 1rem;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-score i {
  font-size: 1.2rem;
  color: #2cb696;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-area {
  font-size: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user-info .user-area i {
  color: #666;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 160px;
  right: 10px;
  background-color: white;
  border-radius: 50%;
  padding: 0;
  outline: none;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .fa-heart {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: #CDCDCD;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .btn_user_favorite .faved {
  color: #e0245e !important;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 10px;
  left: 10px;
  padding: 0;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .btn_user_up i {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: white;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 40px;
  left: 10px;
  padding: 0;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .btn_user_down i {
  font-size: 2rem;
  line-height: 40px;
  vertical-align: middle;
  color: white;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user_rank {
  position: absolute;
  border: none;
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  top: 15px;
  left: 15px;
  padding: 0;
  font-size: 0.6rem;
  color: white;
  font-weight: bold;
  text-shadow: 1px 2px 5px black;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user_rank ion-icon {
  font-size: 3.6rem;
  line-height: 40px;
  vertical-align: middle;
  color: white;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user_rank .rank-bronze {
  color: brown;
  text-shadow: 1px 2px 10px black;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user_rank .rank-silver {
  color: silver;
  text-shadow: 1px 2px 10px black;
}

.appSearch .pickup-user-wrapper .pickup_users .pickup_user .user_rank .rank-gold {
  color: gold;
  text-shadow: 1px 2px 10px black;
}

.appRound {
  background-color: white !important;
}

.appRound .app-round-post-wrapper {
  padding: 10px;
  height: auto;
  width: 100%;
}

.appRound .app-round-post-wrapper .round-posts {
  height: auto;
}

.appRound .app-round-post-wrapper .round-posts .round-post {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: 8px;
  margin: 0 0 10px 0;
  text-align: left;
  position: relative;
  padding: 10px;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-header {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body {
  width: 100%;
  height: auto;
  padding-bottom: 0px;
  display: flex;
  border-radius: 0px;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-icon-box {
  width: 80px;
  height: auto;
  border-radius: 8px;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-icon-box .post-icon {
  display: inline-block;
  height: 80px;
  width: 80px;
  border-radius: 8px;
  position: relative;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-icon-box .post-icon img {
  height: 80px;
  width: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-icon-box .post-icon .post-rank {
  position: absolute;
  width: 99%;
  bottom: 0px;
  left: 0;
  right: 0;
  border-radius: 0 0 8px 8px;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-icon-box .post-icon-name {
  width: 100%;
  font-size: 1rem;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information {
  display: inline-block;
  width: calc(100% - 80px);
  height: auto;
  margin: 0;
  padding: 0px;
  text-align: left;
  border-radius: 8px;
  font-size: 1.2rem;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-date {
  font-size: 1.6rem;
  font-weight: bold;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-round,
.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-way {
  width: 95%;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-calc {
  width: 100%;
  height: auto;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-calc .post-name {
  display: inline-block;
  width: 40%;
  min-width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-playfee {
  margin: 0;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-playfee .post-point {
  font-size: 2.2rem;
  font-weight: bold;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-playfee .post-p {
  font-size: 1.6rem;
  font-weight: bold;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-playfee .post-round {
  font-weight: bold;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-playfee .post-people {
  font-size: 2.2rem;
  font-weight: bold;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-body .post-information .post-playfee .post-mei {
  font-size: 1.2rem;
  font-weight: bold;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-footer {
  display: inline-block;
  width: 100%;
  margin: 10px 0 0 0;
  padding: 0px;
  text-align: left;
  font-size: 1rem;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-footer .user-review i {
  font-size: 1.2rem;
  color: #ffdf88;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-footer .user-favorite i {
  font-size: 1.2rem;
  color: #e0245e;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-footer .user-score i {
  font-size: 1.2rem;
  color: #2cb696;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-icons-box {
  position: relative;
  width: 35%;
  text-align: center;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-icons-box .post-icons {
  position: absolute;
  width: 60px;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-icons-box .post-icons .post-icon {
  display: inline-block;
  height: 60px;
  width: 60px;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-icons-box .post-icons .post-icon img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-icons-box .post-icons .post-icon-name {
  font-size: 1rem;
  padding: 5px;
  margin: 0;
}

.appRound .app-round-post-wrapper .round-posts .round-post .post-icons-box .post-icons:nth-child(2) {
  right: 0;
  z-index: 100;
}

.appRound .app-round-post-wrapper .round-posts .round-post .round-post-body {
  text-align: center;
  padding: 5px 10px;
  border-radius: 0 0 4px 4px;
  height: auto;
  text-align: right;
  background-color: #2cb696;
}

.appRound .app-round-post-wrapper .round-posts .round-post .round-post-body p {
  color: white;
}

.appRound .app-round-post-wrapper .round-posts .round-post .round-post-layer {
  width: 100%;
  height: 134px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.appRound .app-round-post-wrapper .round-posts .round-post .round-post-layer p {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  margin: 0 auto;
  line-height: 134px;
  vertical-align: middle;
}

.appRound .app-round-post-wrapper .round-posts .round-post .round-post-soldout {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.appRound .app-round-post-wrapper .round-posts .round-post .round-post-soldout .soldout {
  font-size: 3rem;
  font-weight: bold;
  color: white;
}

.appRound .app-round-post-wrapper .round-post-load-status {
  padding: 20px 0;
  width: 100%;
  height: auto;
  text-align: center;
}

.appRound .app-round-post-wrapper .round-destroy-btn {
  display: inline-block;
  padding: 15px;
}

.appChatrooms {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.toast {
  opacity: 1;
}

.search-content, .round-content {
  top: 59px !important;
}

.appTimeline {
  overscroll-behavior: none;
}

.appTimeline .app-timeline-wrapper {
  width: 100%;
  height: auto;
  background-color: white;
  padding: 0;
}

.appTimeline .app-timeline-wrapper .timeline_post_list {
  text-align: left;
  font-size: 1.2rem;
  overflow: hidden;
  height: auto;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts {
  margin: 0;
  text-align: left;
  font-size: 1.2rem;
  background-color: white;
  overflow: hidden;
  height: auto;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post {
  text-align: left;
  border-radius: 0 !important;
  border-left: none;
  border-right: none;
  padding: 10px 10px;
  height: auto;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  background-color: white;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_left {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_left .timeline-icon {
  display: inline-block;
  border: 1px solid whitesmoke;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right {
  width: 79%;
  display: inline-block;
  vertical-align: top;
  padding: 0 10px;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info {
  margin: 0;
  padding: 0;
  font-weight: bold;
  width: 100%;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info .btn_timeline_like_box {
  position: relative;
  font-size: 1.6rem;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info .btn_timeline_like_box button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-info .btn_timeline_like_box .timeline_like_count {
  display: inline-block;
  margin-left: 5px;
  font-size: 1.6rem;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-date {
  color: #2cb696;
  margin: 0 0 10px 0;
  padding: 0;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-message {
  padding: 0;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-video {
  width: 100%;
  height: 400px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  overflow: hidden;
  background-color: black;
  vertical-align: middle;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .timeline-video video {
  width: 100%;
  height: 400px;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .image-link {
  display: inline-block;
  width: 100%;
  height: 400px;
  background-color: black;
  border-radius: 5px;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .image-link .timeline-image {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 400px;
  background-size: contain;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_posts .timeline_post .timeline_post_right .message-button {
  font-size: 1.3rem;
  color: #2cb696;
  background-color: white !important;
  border: 1px solid #2cb696;
}

.appTimeline .app-timeline-wrapper .timeline_post_list .timeline_postslast-child {
  border-bottom: none;
}

.appTimeline .app-timeline-wrapper .infinite-scroll-request {
  width: 100%;
  height: 50px;
}

/*tweet post*/
.appTimeline {
  background-color: white;
  width: 100%;
  height: 100%;
}

.appTimeline .tweet-wrapper .tweet-body {
  overflow: auto;
}

.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper {
  text-align: center;
  padding: 20px 0;
}

.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper i {
  font-size: 2.2rem;
}

.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper .post_timeline_message {
  width: 100%;
  line-height: 2rem;
  border: none;
  background-color: white;
  border-radius: 8px;
  font-size: 1.6rem;
  color: #888888;
  overflow-y: hidden;
}

.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper .timeline_post_preview {
  position: relative;
  height: auto;
  width: auto;
  text-align: center;
  margin: 0 auto;
}

.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper .timeline_post_preview .timeline_post_image_preview,
.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper .timeline_post_preview .timeline_post_video_preview {
  text-align: center;
  width: auto;
  height: auto;
  margin: 0 auto;
  max-width: 90%;
}

.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper .timeline_post_preview .timeline_post_preview_close {
  position: absolute;
  top: 0px;
  right: 20px;
  z-index: 100;
  background-color: white;
  border-radius: 50%;
  height: 26px;
  width: 26px;
}

.appTimeline .tweet-wrapper .tweet-body .timeline_post_wrapper .timeline_post_preview .timeline_post_preview_close i {
  color: #2cb696;
  font-size: 2.6rem;
}

.appTimeline .tweet-wrapper .btn_post_timeline_image {
  color: #2cb696 !important;
}

.appTimeline .tweet-wrapper .btn_post_timeline {
  background-color: #2cb696 !important;
}

.timeline_tweet_btn {
  background-color: #2cb696 !important;
}

.timeline_tweet_btn ons-button {
  background-color: inherit;
}

.pull-hook {
  background-color: #2cb696;
  color: white;
}

.appChatrooms .chatrooms-wrapper .list-group .list-group-item {
  width: 100%;
  text-align: left;
  display: flex;
}

.appChatrooms .chatrooms-wrapper .list-group .list-group-item .user-icon {
  display: flex;
  justify-content: center;
  /*左右中央揃え*/
  align-items: center;
  /*上下中央揃え*/
  width: 20%;
  text-align: center;
}

.appChatrooms .chatrooms-wrapper .list-group .list-group-item .user-icon img {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.appChatrooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body {
  display: inline-block;
  width: 80%;
  padding: 0 5px;
  position: relative;
}

.appChatrooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body .datetime {
  text-align: right;
  font-size: 1.4rem;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: normal;
  color: #2cb696;
}

.appChatrooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body .name {
  display: inline-block;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appChatrooms .chatrooms-wrapper .list-group .list-group-item .chatroom-body .new-message {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appChatroom .chat-message-wrapper {
  background-color: #ecf0f5;
  font-size: 1.2rem;
  padding: 10px 10px 80px 10px;
  height: auto;
  overflow-y: auto;
}

.page-chatroom .private_round_btn {
  padding: 0px 10px;
  margin: 5px 10px 5px 0px;
  font-size: 1.2rem;
  color: white;
  background-color: #2cb696;
}

.appRoundPost .call-form-wrapper {
  padding: 10px;
  background-color: white;
  border-bottom: 5px solid whitesmoke;
  height: auto;
  text-align: left;
  overflow: hidden;
}

.appRoundPost .call-form-wrapper .call-title {
  width: 100%;
}

.appRoundPost .call-form-wrapper .call-title p {
  font-size: 2rem;
  font-weight: bold;
  text-align: left;
  margin: 10px 0 5px 0;
}

.appRoundPost .call-form-wrapper .btn-call-input,
.appRoundPost .call-form-wrapper .btn_green {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  width: 100%;
  height: 60px;
  border-radius: 4px;
  margin: 15px auto;
  text-align: center;
  background-color: #2cb696;
  color: white;
  border: none;
  font-weight: bold;
  line-height: 60px;
  vertical-align: middle;
}

.appRoundPost .call-form-wrapper .gray {
  background-color: #999;
}

.appRoundPost .call-form-wrapper .list-number {
  list-style-type: decimal;
  margin-bottom: 10px;
}

.appRoundPost .call-form-wrapper .list-dot {
  list-style-type: disc;
}

.appRoundPost .call-form-wrapper .btn-flex {
  display: flex;
}

.appRoundPost .call-form-wrapper .btn-flex .height-auto {
  height: auto !important;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box {
  display: flex;
  width: 50%;
  background-color: whitesmoke;
  height: 50px;
  border-radius: 4px;
  padding: 4px 10px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box .btn-icon {
  display: inline-block;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  padding: 0 5px;
  font-size: 2rem;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box .btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0 10px;
  width: 100%;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box .btn-text .btn-title {
  font-size: 1.2rem;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box .btn-text .call-input {
  display: inline-block;
  color: #2cb696 !important;
  font-size: 1.6rem;
  margin: 0;
  background-color: transparent;
  padding: 0;
  width: 100%;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box .btn-text .call-input::placeholder {
  color: #2cb696 !important;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box .btn-text input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box:first-child {
  margin-right: 4px;
}

.appRoundPost .call-form-wrapper .btn-flex .btn-box:last-child {
  margin-left: 4px;
}

.appRoundPost .btn-box-private {
  height: 90px !important;
}

.appRoundPost .private_user_info .post-icon-box {
  width: 20%;
  text-align: center;
}

.appRoundPost .private_user_info .post-icon-box .post-icon {
  display: inline-block;
  height: 40px;
  width: 40px;
}

.appRoundPost .private_user_info .post-icon-box .post-icon img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2cb696;
}

.appRoundPost .private_user_info .private_user_text {
  width: 75%;
  text-align: left;
}

.ptr--ptr {
  font-family: inherit !important;
}

.ptr--text {
  display: none;
  font-family: inherit !important;
  font-weight: normal !important;
  font-size: 1.2rem !important;
}

.ptr--icon {
  color: #2cb696 !important;
  font-size: 2.6rem !important;
}

/*
.ptr--ptr { 
  background-color: $main-color!important;
  font-family: inherit;
}
.ptr--box { 
  padding: 10px; 
  flex-basis: 100%; 
} 
.ptr--pull { 
  transition: none; 
} 
.ptr--text { 
  margin-top: .33em; 
  color: white; 
  font-family: inherit;
} 
.ptr--icon { 
  color: white!important;
  transition: transform .3s; 
}
.ptr--top { 
  touch-action: pan-x pan-down pinch-zoom; 
} 
.ptr--release .ptr--icon { 
  transform: rotate(180deg); 
} 
*/
.progress-green {
  padding: 5px;
}

.progress-green .progress-circular__primary {
  stroke: #2cb696 !important;
}

.progress-green .progress-circular__secondary {
  stroke: #5ec3a7 !important;
}

.progress-white {
  padding: 5px;
}

.progress-white .progress-circular__primary {
  stroke: whitesmoke !important;
}

.progress-white .progress-circular__secondary {
  stroke: white !important;
}

.checkout-button-event {
  background-color: #2cb696;
  color: white;
  border-radius: 4px;
}

.appRoundShow .round-post-wrapper {
  padding: 0;
  height: auto;
  text-align: left;
}

.appRoundShow .round-post-wrapper .round-posts {
  height: auto;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show {
  width: 100%;
  background-color: white;
  height: auto;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information {
  padding: 0px;
  height: auto;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-icon-box {
  width: 100%;
  height: auto;
  text-align: center;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-icon-box .post-icon {
  display: inline-block;
  width: 100%;
  height: 500px;
  border-radius: 0px;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-icon-box .post-icon img {
  width: 100%;
  height: 500px;
  border-radius: 0px;
  object-fit: cover;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box {
  width: 100%;
  height: auto;
  text-align: center;
  display: flex;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box .post-icon {
  display: inline-block;
  width: 50%;
  height: 250px;
  border-radius: 0px;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-icons-box .post-icon img {
  width: 100%;
  height: 250px;
  border-radius: 0px;
  object-fit: cover;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header {
  display: inline-block;
  width: 100%;
  margin: 0;
  text-align: left;
  padding: 15px;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-user-name {
  font-size: 2rem;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-user-review {
  font-size: 1.6rem;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-user-review i {
  color: #ffdf88;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-playfee .post-point {
  font-size: 2.8rem;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-playfee .post-p {
  font-size: 1.6rem;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-playfee-supplement {
  color: whitesmoke;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-header-friends {
  width: 100%;
  height: auto;
  display: flex;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-header-friends .post-header-friend {
  display: inline-block;
  width: 50%;
  height: auto;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-header-friends .post-user-name {
  font-size: 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-header-friends .post-user-review {
  font-size: 1.2rem;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-header .post-header-friends .post-user-review i {
  color: #ffdf88;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body {
  width: 100%;
  height: auto;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-title {
  background-color: whitesmoke;
  color: rgba(0, 0, 0, 0.5);
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-info-item {
  width: 100%;
  height: auto;
  display: flex;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-info-item .post-info-subtitle {
  display: inline-block;
  width: 40%;
  padding: 10px;
  text-align: center;
  background-color: #e1f3ed;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-info-item .post-info-text {
  display: inline-block;
  width: 60%;
  padding: 10px;
  text-align: left;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-user {
  width: 100%;
  height: auto;
  padding: 15px;
  display: flex;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-user .post-icon-box {
  width: 60px;
  height: auto;
  text-align: center;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-user .post-icon-box .post-icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-user .post-icon-box .post-icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-user .post-user-info {
  width: calc(100% - 60px);
  height: auto;
  text-align: left;
  padding: 10px;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .post-user .post-user-info .user-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .reviews {
  width: 100%;
  height: auto;
  padding: 15px;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .reviews .review {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  overflow: hidden;
}

.appRoundShow .round-post-wrapper .round-posts .round-post-show .round-information .post-body .reviews-more {
  width: 100%;
  height: auto;
  text-align: right;
}

.page-schedule {
  width: 100%;
  height: auto;
  background-color: white;
}

:checked + .switch__toggle {
  background-color: #2cb696 !important;
  box-shadow: 0 0 0 2px #2cb696 !important;
}

:checked + .checkbox__checkmark:before {
  background: #2cb696 !important;
}

.range__input {
  background-image: linear-gradient(#2cb696, #2cb696) !important;
}

.radio-button__checkmark:after {
  border: 2px solid #2cb696 !important;
  border-top: none !important;
  border-right: none !important;
}

/*Profile*/
.page-user-data {
  text-align: left;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

.page-user-data .profile-image-wrapper {
  width: 100%;
  height: auto;
  position: relative;
}

.page-user-data .profile-image-wrapper .profile-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.page-user-data .profile-image-wrapper .profile-image-layer {
  height: 100px;
  width: 100%;
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  text-align: left;
  padding: 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.page-user-data .profile-image-wrapper .profile-image-layer .post-user-name {
  font-size: 2rem;
}

.page-user-data .profile-image-wrapper .profile-image-layer .post-user-review {
  font-size: 1.6rem;
}

.page-user-data .profile-image-wrapper .profile-image-layer .post-user-review i {
  color: #ffdf88;
}

.page-user-data .profile-image-wrapper .btn_user_favorite {
  position: absolute;
  border: none;
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  bottom: 15px;
  right: 15px;
  background-color: white;
  border-radius: 50%;
  padding: 0;
  outline: none;
  z-index: 11;
}

.page-user-data .profile-image-wrapper .btn_user_favorite .fa-heart {
  font-size: 3rem;
  line-height: 60px;
  vertical-align: middle;
  color: #CDCDCD;
}

.page-user-data .profile-image-wrapper .btn_user_favorite .faved {
  color: #e0245e !important;
}

.page-user-data .profile-image-thumbnail-wrapper {
  height: auto;
  width: 100%;
  text-align: left;
  padding: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.page-user-data .profile-image-thumbnail-wrapper .profile-thumbnail {
  height: 60px;
  width: 60px;
  margin-right: 6px;
}

.page-user-data .profile-image-thumbnail-wrapper .profile-thumbnail img {
  max-width: 60px;
  max-height: 60px;
  height: 60px;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.page-user-data .profile-image-thumbnail-wrapper .active-image {
  border: 3px solid #2cb696;
}

.page-user-data .profile-image-thumbnail-wrapper .carousel-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.page-user-data .profile-image-thumbnail-wrapper .dots {
  text-align: left;
  font-size: 30px;
  color: #000;
}

.page-user-data .profile-image-thumbnail-wrapper .dots > span {
  cursor: pointer;
}

.page-user-data .profile-header {
  display: inline-block;
  width: 100%;
  margin: 0;
  text-align: left;
  padding: 15px;
}

.page-user-data .profile-header .post-playfee .rank {
  display: inline-block;
  width: 50%;
  margin-right: 50%;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  overflow: hidden;
}

.page-user-data .profile-header .post-playfee .rank ion-icon {
  font-size: 2rem;
}

.page-user-data .profile-header .post-playfee .rank span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
}

.page-user-data .profile-header .post-playfee .normal {
  color: #888888;
}

.page-user-data .profile-header .post-playfee .bronze {
  color: brown;
}

.page-user-data .profile-header .post-playfee .silver {
  color: silver;
}

.page-user-data .profile-header .post-playfee .gold {
  color: gold;
}

.page-user-data .profile-header .post-playfee .post-point {
  font-size: 2.8rem;
}

.page-user-data .profile-header .post-playfee .post-point span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}

.page-user-data .profile-header .post-playfee .post-p {
  font-size: 1.6rem;
}

.page-user-data .profile-header .post-playfee-supplement {
  color: whitesmoke;
}

.page-user-data .profile-header .post-header-friends {
  width: 100%;
  height: auto;
  display: flex;
}

.page-user-data .profile-header .post-header-friends .post-header-friend {
  display: inline-block;
  width: 50%;
  height: auto;
}

.page-user-data .profile-header .post-header-friends .post-user-name {
  font-size: 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-user-data .profile-header .post-header-friends .post-user-review {
  font-size: 1.2rem;
}

.page-user-data .profile-header .post-header-friends .post-user-review i {
  color: #ffdf88;
}

.page-user-data .profile-body {
  width: 100%;
  height: auto;
}

.page-user-data .profile-body .post-title {
  background-color: whitesmoke;
  color: rgba(0, 0, 0, 0.5);
}

.page-user-data .profile-body .post-introduction {
  white-space: pre-wrap;
}

.page-user-data .profile-body .post-info-item {
  width: 100%;
  height: auto;
  display: flex;
}

.page-user-data .profile-body .post-info-item .post-info-subtitle {
  display: inline-block;
  width: 40%;
  padding: 10px;
  text-align: center;
  background-color: #e1f3ed;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}

.page-user-data .profile-body .post-info-item .post-info-text {
  display: inline-block;
  width: 60%;
  padding: 10px;
  text-align: left;
}

.page-user-data .profile-body .reviews {
  width: 100%;
  height: auto;
  padding: 15px;
}

.page-user-data .profile-body .reviews .review {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  overflow: hidden;
}

.page-user-data .profile-body .reviews-more {
  width: 100%;
  height: auto;
  text-align: right;
}

.page-user-data .profile-body .schedule {
  width: 100%;
  height: auto;
}

.page-user-data .profile-body .schedule .schedule-header {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: auto;
  border-top: 1px solid whitesmoke;
  border-bottom: 1px solid whitesmoke;
}

.page-user-data .profile-body .schedule .schedule-header .yobi {
  display: inline-block;
  width: calc( 100% / 7);
  height: auto;
  text-align: center;
  border-right: 1px solid whitesmoke;
}

.page-user-data .profile-body .schedule .schedule-header .yobi:first-child {
  border-left: 1px solid whitesmoke;
}

.page-user-data .profile-body .schedule .schedule-body {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: auto;
  border-bottom: 1px solid whitesmoke;
}

.page-user-data .profile-body .schedule .schedule-body .day {
  display: inline-block;
  width: calc( 100% / 7);
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  border-right: 1px solid whitesmoke;
}

.page-user-data .profile-body .schedule .schedule-body .day:first-child {
  border-left: 1px solid whitesmoke;
}

.page-user-data .profile-body .schedule .schedule-body .day .circle {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  vertical-align: middle;
  text-align: center;
  color: white;
  background-color: #2cb696;
  border-radius: 50%;
}

.page-user-data .profile-body .schedule-input {
  width: 100%;
  height: auto;
  text-align: right;
  padding: 15px;
}

.page-user-data .profile-body .user-icon {
  height: 200px;
  width: 200px;
  text-align: center;
}

.page-user-data .profile-body .user-icon img {
  display: inline-block;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.appMypage .user-icon {
  height: 60px;
  width: 60px;
  text-align: center;
}

.appMypage .user-icon img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
}

.ons-ios-scroll-fix .page:not(.page--wrapper)[shown] > .page__content {
  overflow-y: scroll !important;
}

.mb-1rem {
  margin-bottom: 1rem !important;
}

.menu-point {
  padding-left: 14px;
  text-align: left;
  border-left: 3px solid #2cb696;
}

.menu-point .point-flex {
  display: flex;
}

.menu-point .point-flex .point {
  font-size: 1.6rem;
  color: #2cb696;
}

.menu-point .point-flex .point .point-number {
  font-size: 2.6rem;
  color: #2cb696;
}

.menu-point .point-flex .point-button {
  width: auto;
  margin-left: auto;
  margin-right: 14px;
}
/*# sourceMappingURL=style.css.map */