@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Saira&display=swap);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
em,
mark {
  font-style: italic;
}
.pc_only,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
hr,
menu,
nav,
section {
  display: block;
}
a,
button,
hr,
input,
select,
textarea {
  margin: 0;
  padding: 0;
}
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0;
}
ins,
mark {
  background-color: #ff9;
  color: #000;
}
li,
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
a {
  font-size: 100%;
  vertical-align: baseline;
  background: 0;
  color: #000;
  transition: all 0.5s ease;
}
a,
ins {
  text-decoration: none;
}
mark {
  font-weight: 700;
}
img {
  border: 0;
  vertical-align: top;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
}
input,
select,
textarea {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: 100%;
  vertical-align: middle;
}
.btn__area .more__btn,
.upload__content .upload__foot .cancel__btn,
body {
  font-family: Saira, Noto Sans JP, sans-serif;
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
}
.sp_only {
  display: none;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  overflow-y: scroll;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  line-height: 1.4;
  color: #ddd;
  background-color: #111;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
}
@media (max-width: 640px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
  body {
    width: 100%;
    min-width: initial;
  }
}
a:hover {
  text-decoration: none;
}
button,
input,
select,
textarea {
  background: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  -webkit-backface-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="checkbox"],
input[type="radio"] {
  display: none;
}
label {
  cursor: pointer;
}
@keyframes a {
0 {
  opacity: 0;
}
to {
  opacity: 1;
}
}
@-webkit-keyframes a {
0 {
  opacity: 0;
}
to {
  opacity: 1;
}
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb60 {
  margin-bottom: 60px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.ml20 {
  margin-left: 20px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr20 {
  margin-right: 20px !important;
}
.header .signup__btn,
.header .upload__btn {
  font-size: 1.4rem;
  box-shadow: 0 0 1px transparent;
  position: relative;
}
.header .header__logo--area {
  display: flex;
}
@media (max-width: 640px) {
  .header .header__logo--area {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
  }
}
.header .header__logo--area .logo {
  margin-right: 30px;
  width: 180px;
}
.header .header__logo--area .logo img {
  width: 100%;
}
.header .header__logo--area .logo:hover {
  opacity: 0.7;
  transition: all 0.5s ease;
}
.header .header__logo--area .about__btn {
  padding-left: 15px;
  font-size: 1.4rem;
  color: #ddd;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
}
.header .header__logo--area .about__btn:hover {
  background: url(/assets/img/arrow_s_gray.png) 2% 50% no-repeat;
  color: #000;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .header .header__logo--area .logo {
    margin: 0;
  }
  .header .header__logo--area .about__btn {
    display: none;
  }
  .header .header__logo--area .about__btn:hover {
    background: 0;
  }
}
.header .header__btn--area {
  display: flex;
  align-items: center;
}
.header .login__btn {
  cursor: pointer;
  margin-right: 20px;
  padding-left: 15px;
  font-size: 1.4rem;
  color: #ddd;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
}
.header .login__btn:hover {
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
  color: #000;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .header .header__btn--area {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .header .login__btn {
    margin-right: 15px;
  }
  .header .login__btn:hover {
    background: 0;
  }
}
.header .signup__btn {
  cursor: pointer;
  padding: 7px 10px;
  min-width: 130px;
  min-height: 40px;
  background: url(/assets/img/bg_blue.png);
  color: #333;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.header .signup__btn:active,
.header .signup__btn:focus,
.header .signup__btn:hover {
  color: #666;
}
.header .signup__btn:before,
.header .upload__btn:before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  bottom: 0;
  left: 0;
  z-index: -1;
}
.header .signup__btn:before {
  background: #89d2e8;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.header .signup__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
@media (max-width: 640px) {
  .header .signup__btn {
    padding: 5px;
    width: 30%;
    min-width: initial;
    min-height: initial;
  }
  .header .signup__btn:hover:before {
    background: 0;
  }
}
.header .signup__btn:active:before,
.header .signup__btn:focus:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.header .upload__btn,
.user-list .user-list__item .invite__btn {
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
}
.header .upload__btn {
  margin-right: 10px;
  padding: 9px 10px;
  min-width: 130px;
  min-height: 40px;
  color: #000;
  font-weight: 700;
  text-align: center;
  background-color: #fff;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  display: inline-block;
}
.header .upload__btn:active,
.header .upload__btn:focus,
.header .upload__btn:hover {
  color: #fff;
}
@media (max-width: 640px) {
  .header .upload__btn {
    display: none;
    margin-right: 15px;
    padding: 5px;
    width: 30%;
    min-width: initial;
    min-height: initial;
  }
}
.header .upload__btn span {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.4;
  background-size: 17px 15px;
}
.header .header__profile {
  padding: 0;
  width: 70px;
  height: 40px;
  /* border: 1px solid #666; */
}
.header .header__profile:hover {
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .header .header__profile {
    overflow: visible;
    margin-right: 10px;
    width: 25%;
    height: 40px;
    order: 1;
  }
  .header .header__profile:hover {
    background: 0;
  }
  .header .header__profile li {
    cursor: pointer;
  }
}
.header .header__profile li {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}
.header .header__profile li a {
  cursor: pointer;
  display: block;
  margin: 0;
  background-color: #efefef;
  padding: 4px;
}
.header .header__profile li a:hover {
  background-color: #fff;
}
@media (max-width: 640px) {
  .header .header__profile li a {
    padding: 4px;
  }
}
.header .header__profile li a img {
  display: block;
  width: 30px;
  max-width: 30px;
  min-width: 30px;
  height: 30px;
  max-height: 30px;
  min-height: 30px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
}
.header .header__profile li .profile__setting {
  position: absolute;
  content: "";
  top: 45px;
  left: -180px;
  margin: 0;
  padding: 0;
  width: 250px;
  z-index: 4;
}
.header .header__profile li .profile__setting .profile__setting--item {
  overflow: hidden;
  width: 250px;
  height: 0;
  color: #333;
  transition: all 0.5s ease;
}
.header .header__profile li .profile__setting .profile__setting--item a {
  cursor: pointer;
  padding: 11px 6px 11px 26px;
  color: #000;
  font-size: 1.2rem;
  position: relative;
  line-height: 1.2;
  text-align: left;
}
.header .header__profile {
  position: relative;
  background-color: #fff;
  transition: all 0.3s ease;
}
.header .header__profile::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 48%;
  transform: translateY(-50%) rotate(225deg);
  -webkit-transform: translateY(-50%) rotate(225deg);
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}
.header
.header__profile
li
.profile__setting
.profile__setting--item
a::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
  -webkit-transform: translateY(-50%) rotate(135deg);
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
@media (max-width: 640px) {
  .header .header__profile li .profile__setting {
    top: 45px;
    left: -1px;
    width: 250px;
  }
  .header .header__profile li .profile__setting .profile__setting--item {
    width: 250px;
  }
  .header .header__profile li .profile__setting .profile__setting--item a {
    padding: 10px 6px 10px 24px;
    font-size: 1.6rem;
  }
}
.header .header__profile li .profile__setting .profile__setting--item a:hover {
  background-color: #000;
  color: #fff;
}
.header
.header__profile
li
.profile__setting
.profile__setting--item
a:hover::before {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}
.header
.header__profile
li
.profile__setting
.profile__setting--item
.profile__setting--name {
  display: flex;
  align-items: center;
  padding: 10px;
  min-height: 5pc;
  color: #000;
  border-bottom: solid 1px #aaa;
  background: #efefef;
}
.header
.header__profile
li
.profile__setting
.profile__setting--item
.profile__setting--name::before {
  display: none;
}
.header
.header__profile
li
.profile__setting
.profile__setting--item
.profile__setting--name:hover {
  color: #fff;
  background: #000;
}
.header
.header__profile
li
.profile__setting
.profile__setting--item
.profile__setting--name
img {
  display: block;
  margin-right: 6px;
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
}
.header
.header__profile
li
.profile__setting
.profile__setting--item
.profile__setting--name
p {
  font-size: 1.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.header .header__profile li:hover .profile__setting .profile__setting--item {
  overflow: visible;
  height: 33px;
}
@media (max-width: 640px) {
  .header .header__profile li:hover .profile__setting .profile__setting--item {
    height: 45px;
  }
}
.header
.header__profile
li:hover
.profile__setting
.profile__setting--item:first-child {
  height: 5pc;
}
.header
.header__profile
li:hover
.profile__setting
.profile__setting--item:last-child {
  border-top: solid 1px #999;
}
.header .header__cart,
.header .header__message {
  position: relative;
  padding: 10px;
  width: 40px;
  min-height: 40px;
  border: 1px solid #666;
}
.header
.header__profile
li:hover
.profile__setting
.profile__setting--item:last-child:hover {
  background: #ddd;
  color: #000;
}
@media (max-width: 640px) {
  .header
  .header__profile
  li:hover
  .profile__setting
  .profile__setting--item:last-child:hover {
    background: 0;
    color: transparent;
  }
}
.header .header__message {
  margin: 0 10px;
  background: url(/assets/img/ico_contact.png) 50% 50% no-repeat;
  background-size: 18px 1pc;
}
@media (max-width: 640px) {
  .header .header__message {
    margin: 0 5px;
    order: 3;
  }
}
.header .header__message:hover {
  background: #000 url(/assets/img/ico_contact_wht.png) no-repeat;
  background-position: 50% 50%;
  background-size: 18px 1pc;
  transition: all 0.5s ease;
}
.header .header__cart {
  margin: 0 0 0 10px;
  background: url(/assets/img/ico_cart.png) 50% 50% no-repeat;
  transition: all 0.5s ease;
  background-size: 20px 1pc;
}
@media (max-width: 640px) {
  .header .header__cart {
    margin: 0 5px;
    order: 2;
  }
}
.header .header__cart:hover {
  background: #000 url(/assets/img/ico_cart_wht.png) no-repeat;
  background-position: 50% 50%;
  background-size: 20px 1pc;
  transition: all 0.5s ease;
}
.header .badge {
  position: absolute;
  top: -10px;
  left: -10px;
  padding: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  color: #333;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.navi {
  width: 100%;
  background: #333;
}
.navi .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 10px;
  max-width: 1200px;
  min-height: 60px;
}
@media (max-width: 640px) {
  .navi .inner {
    flex-wrap: wrap;
    padding: 10px 4%;
    width: 100%;
    min-width: initial;
  }
  .navi .grobal__navi {
    width: 100%;
    order: 2;
  }
}
.navi .grobal__navi {
  display: flex;
  flex-wrap: wrap;
}
.navi .grobal__navi .grobal__navi--item {
  margin-right: 40px;
  font-size: 1.6rem;
}
@media (max-width: 640px) {
  .navi .grobal__navi .grobal__navi--item {
    margin-right: 30px;
    margin-bottom: 10px;
    width: 40%;
    font-size: 1.4rem;
  }
  .navi .grobal__navi .grobal__navi--item:nth-child(2n) {
    margin-right: 0;
    margin-bottom: 0;
  }
  .search__wrap {
    margin-bottom: 10px;
    width: 100%;
    height: 40px;
    order: 1;
  }
}
@media (max-width: 320px) {
  .navi .grobal__navi .grobal__navi--item {
    margin-right: 20px;
    font-size: 1.4rem;
  }
}
.navi .grobal__navi .grobal__navi--item:last-child {
  margin-right: 0;
}
.navi .grobal__navi .grobal__navi--item a {
  color: #666;
}
.navi .grobal__navi .grobal__navi--item .icon__model {
  display: inline-block;
  padding-left: 24px;
  background: url(/assets/img/ico_3d_gray.png) 0 50% no-repeat;
  background-size: 1pc 18px;
}
.navi .grobal__navi .grobal__navi--item .icon__model:hover {
  color: #000;
  background: url(/assets/img/ico_3d_gray.png) 0 50% no-repeat;
  background-size: 1pc 18px;
  transition: all 0.5s ease;
}
.search__wrap {
  display: flex;
  align-items: center;
}
.search__text-box {
  margin-right: 2px;
  padding: 8px 10px 8px 35px;
  min-width: 500px;
  min-height: 40px;
  color: #000;
  font-size: 1.4rem;
  background: url(/assets/img/ico_search_gray.png) 2% 50% no-repeat #fff;
  background-size: 17px 18px;
}
.search__text-box::placeholder {
  color: #999;
  font-size: 1.4rem;
}
@media (max-width: 640px) {
  .search__text-box {
    width: 75%;
    padding: 8px 10px 8px 35px;
    min-width: initial;
    min-height: initial;
    background: url(/assets/img/ico_search_gray.png) 4% 50% no-repeat #fff;
  }
}
.search__btn {
  cursor: pointer;
  padding: 8px 6px 4px 6px;
  min-height: 40px;
  background: #fff;
  color: #000;
  font-weight: 600;
}
.search__btn:hover {
  background: #eee;
  color: #000;
  transition: all 0.5s ease;
}
.topicpath {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .search__btn {
    padding: 9px 4px 7px 4px;
    width: 25%;
    font-size: 1.4rem;
    text-align: center;
    min-height: initial;
    background: #fff;
    color: #000;
  }
  .topicpath {
    display: none;
  }
}
.topicpath .topicpath__item {
  position: relative;
  margin: 0 30px 3px 0;
  font-size: 1.4rem;
}
.topicpath .topicpath__item:last-child {
  margin-right: 0;
}
.topicpath .topicpath__item:last-child:after {
  content: none;
}
.topicpath .topicpath__item:after {
  position: absolute;
  content: ">";
  top: -1px;
  right: -20px;
  font-size: 1.4rem;
  color: #666;
}
.topicpath .topicpath__item a:hover {
  color: #ddd;
  transition: all 0.5s ease;
}
.contents {
  width: 100%;
}
.contents .inner {
  margin: 0 auto;
  max-width: 1200px;
}
@media (max-width: 640px) {
  .contents .inner {
    max-width: initial;
    width: 95%;
  }
}
.contents .contents__wrap {
  margin: 0 auto;
  padding: 30px 0 75pt;
  width: 100%;
  max-width: 75pc;
  font-size: 1.6rem;
}
#contact,
.contents .contents__wrap .inner {
  padding: 0 20px;
}
.contents .contents__title {
  margin: 20px 0 30px;
  padding-bottom: 10px;
  border-bottom: solid 1px #666;
  font-size: 3rem;
  font-weight: 400;
  text-align: center;
}
.contents .contents__text-c {
  margin-bottom: 60px;
  text-align: center;
}
#contact {
  bottom: 60px;
  z-index: 2;
  background: hsla(0, 0, 60%, 0.5);
}
#contact:hover {
  background: rgba(91, 190, 221, 0.5);
  opacity: 0.7;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .contents .contents__wrap {
    max-width: initial;
  }
  .contents .contents__title {
    line-height: 1.4;
  }
  .contents .contents__text-c {
    font-size: 1.4rem;
  }
}
.footer-site-list__wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: solid 1px #666;
}
.footer-works__category {
  width: 30%;
}
.footer-category__title {
  margin-bottom: 20px;
  padding-left: 24px;
  font-size: 1.8rem;
  background: url(/assets/img/ico_3d_gray.png) 0 50% no-repeat;
  background-size: 1pc 18px;
}
@media (max-width: 640px) {
  .footer-site-list__wrap {
    flex-wrap: wrap;
    padding-bottom: 30px;
  }
  .footer-works__category {
    width: 100%;
  }
  .footer-category__title {
    font-size: 2.2rem;
  }
  .footer-category__list {
    width: 100%;
  }
}
.footer-category__title--middle {
  font-size: 1.8rem;
  color: #000;
}
.footer-category__title--small {
  margin-bottom: 5px;
  font-size: 1.8rem;
  color: #777;
}
.footer-category__list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.footer-category__list .footer-category__list--item {
  margin: 0 20px 10px 0;
  word-break: break-all;
  line-height: 1.2;
}
.footer-category__list .footer-category__list--item a {
  display: block;
  padding-left: 14px;
  color: #ddd;
  font-size: 1.4rem;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
}
.footer-category__list .footer-category__list--item a:hover {
  color: #000;
  background: url(/assets/img/arrow_s_gray.png) 2% 50% no-repeat;
  transition: all 0.3s ease;
}
@media (max-width: 640px) {
  .footer-category__list .footer-category__list--item {
    margin-right: 0;
    width: 48.5%;
    line-height: 1.4;
  }
  .footer-category__list .footer-category__list--item a {
    font-size: 1.6rem;
  }
  .footer-site__summary {
    width: 100%;
  }
}
.footer-site__summary {
  margin-bottom: 30px;
  padding-bottom: 30px;
  width: 100%;
  border-bottom: solid 1px #666;
}
.footer-site__summary .footer-summary__btn {
  margin-bottom: 20px;
}
.footer-site__summary .footer-summary__btn a {
  display: inline-block;
  padding-left: 20px;
  color: #ddd;
  font-size: 1.8rem;
  font-weight: 700;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
}
.footer-site__summary .footer-summary__btn a:hover {
  color: #000;
  background: url(/assets/img/arrow_s_gray.png) 2% 50% no-repeat;
  transition: all 0.3s ease;
}
.footer-site__summary .footer-summary__list {
  display: flex;
  flex-wrap: wrap;
}
.footer-site__summary .footer-summary__list .footer-summary__list--item {
  margin: 0 30px 10px 0;
  word-break: break-all;
}
@media (max-width: 640px) {
  .footer-site__summary .footer-summary__btn {
    width: 100%;
  }
  .footer-site__summary .footer-summary__btn a {
    font-size: 2rem;
  }
  .footer-site__summary .footer-summary__list {
    width: 100%;
  }
  .footer-site__summary .footer-summary__list .footer-summary__list--item {
    margin: 0 0 10px;
    width: 100%;
  }
}
.footer-site__summary .footer-summary__list .footer-summary__list--item a,
.footer-site__summary .footer-summary__list .footer-summary__list--item label {
  display: block;
  padding-left: 1pc;
  color: #ddd;
  font-size: 1.4rem;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
}
.footer-site__summary .footer-summary__list .footer-summary__list--item a:hover,
.footer-site__summary
.footer-summary__list
.footer-summary__list--item
label:hover {
  color: #000;
  background: url(/assets/img/arrow_s_gray.png) 2% 50% no-repeat;
  transition: all 0.3s ease;
}
.footer-site__terms--wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 75pt;
}
.footer-site__terms--wrap .footer-site__terms {
  display: flex;
  justify-content: space-between;
}
.footer-site__terms--wrap .footer-site__terms .footer-site__terms--item {
  margin-right: 30px;
}
@media (max-width: 640px) {
  .footer-site__summary .footer-summary__list .footer-summary__list--item a,
  .footer-site__summary
  .footer-summary__list
  .footer-summary__list--item
  label {
    font-size: 1.6rem;
  }
  .footer-site__terms--wrap .footer-site__terms {
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  .footer-site__terms--wrap .footer-site__terms .footer-site__terms--item {
    margin-bottom: 10px;
    width: 100%;
    line-height: 1.4;
  }
  .footer-site__terms--wrap .footer-sns__area {
    justify-content: center;
    margin-bottom: 60px;
    width: 100%;
  }
}
.footer-site__terms--wrap .footer-site__terms .footer-site__terms--item a {
  display: block;
  padding-left: 1pc;
  color: #ddd;
  font-size: 1.4rem;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
}
.footer-site__terms--wrap
.footer-site__terms
.footer-site__terms--item
a:hover {
  color: #000;
  background: url(/assets/img/arrow_s_gray.png) 2% 50% no-repeat;
  transition: all 0.3s ease;
}
.footer-site__terms--wrap .footer-sns__area {
  margin-left: auto;
  display: flex;
}
.footer-site__terms--wrap .footer-sns__area .footer-sns__area--item {
  margin-right: 5px;
}
@media (max-width: 640px) {
  .footer-site__terms--wrap .footer-sns__area .footer-sns__area--item {
    margin-right: 30px;
  }
}
.footer-site__terms--wrap .footer-sns__area .footer-sns__area--item:last-child {
  margin-right: 0;
}
.footer-site__terms--wrap .footer-sns__area .footer-sns__area--item a:hover {
  opacity: 0.5;
  transition: all 0.5s ease;
}
.footer-site__terms--wrap .footer-sns__area .footer-sns__area--item img {
  width: 50%;
  height: auto;
}
@media (max-width: 640px) {
  .footer-site__terms--wrap .footer-sns__area .footer-sns__area--item img {
    width: 70%;
  }
}
.copyright {
  padding: 10px 0;
  width: 100%;
  background: #222;
  text-align: center;
}
.copyright .text {
  font-size: 1.2rem;
}
@media (max-width: 640px) {
  .copyright {
    padding: 20px 10px;
  }
  .copyright .text {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
.common__center-text {
  text-align: center;
  line-height: 1.6;
}
.radio__btn + label {
  margin-right: 10px;
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 25px;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 700;
}
.radio__btn + label:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  transform: translateY(-50%);
}
.radio__btn[type="radio"]:checked + label:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  background: #000;
  border-radius: 100%;
}
.radio__btn01 + label {
  cursor: pointer;
  margin-right: -3px;
  padding: 4px 14px;
  background: #666;
  text-align: center;
  font-size: 1.6rem;
  color: #999;
  border-radius: 5px 0 0 5px;
}
@media (max-width: 640px) {
  .radio__btn01 + label {
    display: block;
    margin: 0;
    padding: 5px 0;
    width: 100%;
    border-radius: 5px 5px 0 0;
    font-size: 1.4rem;
  }
}
.radio__btn01[type="radio"]:checked + label {
  background: #fff;
  color: #000;
}
.radio__btn02 + label {
  cursor: pointer;
  padding: 4px 14px;
  background: #666;
  text-align: center;
  font-size: 1.6rem;
  color: #999;
  border-radius: 0 5px 5px 0;
}
@media (max-width: 640px) {
  .radio__btn02 + label {
    display: block;
    margin: 0;
    padding: 5px 0;
    width: 100%;
    border-radius: 0 0 5px 5px;
    font-size: 1.4rem;
  }
}
.radio__btn02[type="radio"]:checked + label {
  background: #fff;
  color: #000;
}
.check__box + label {
  cursor: pointer;
  position: relative;
  display: block;
  margin-right: 20px;
  padding-left: 25px;
  font-size: 1.6rem;
}
.lang-switch__btn .en__btn,
.lang-switch__btn .jp__btn {
  display: inline-block;
  box-sizing: border-box;
}
.check__box + label:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 1pc;
  height: 1pc;
  background: #fff;
  border: 1px solid #888;
  transform: translateY(-50%);
}
input.check__box[type="checkbox"]:checked + label:after {
  position: absolute;
  content: "";
  top: 6px;
  left: 5px;
  width: 7px;
  height: 11px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}
.lang-switch__btn {
  margin-left: 20px;
}
@media (max-width: 640px) {
  .lang-switch__btn {
    margin: 0 auto;
    width: 5pc;
    order: 4;
  }
}
.lang-switch__btn .jp__btn {
  width: 30px;
  color: #666;
  font-size: 1.4rem;
  text-align: center;
  border: 1px solid #666;
  background: #333;
}
.lang-switch__btn .jp__btn:hover {
  color: #333;
  background: #ddd;
  border: 1px solid #ddd;
  transition: all 0.5s ease;
}
.header .lang-switch__btn .jp__btn {
  border: 1px solid #999 !important;
}
.header .lang-switch__btn .jp__btn:hover {
  border: 1px solid #999 !important;
}
.lang-switch__btn .en__btn {
  margin-left: -4px;
  width: 30px;
  color: #666;
  font-size: 1.4rem;
  text-align: center;
  border: 1px solid #666;
  background: #333;
}
.lang-switch__btn .en__btn:hover {
  color: #333;
  background: #ddd;
  border-top: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  transition: all 0.5s ease;
}
.header .lang-switch__btn .en__btn {
  border-top: solid 1px #999 !important;
  border-right: solid 1px #999 !important;
  border-bottom: solid 1px #999 !important;
}
@media (max-width: 640px) {
  .not-authenticate__link {
    display: block;
    width: 100%;
  }
}
.lang-switch__btn .is-active {
  color: #333;
  background: #ddd;
  border: 1px solid #ddd;
}
.not-authenticate {
  position: relative;
  margin-right: 20px;
  padding: 9pt 10px 10px 35px;
  min-height: 40px;
  border: 1px solid tomato;
  background: url(/assets/img/ico_contact_red.png) 5% 50% no-repeat;
  background-size: 20px 14px;
}
.not-authenticate:hover {
  border: 1px solid #ffbdb1;
  transition: all 0.5s ease;
}
.not-authenticate .not-authenticate__text {
  color: tomato;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
}
@media (max-width: 640px) {
  .not-authenticate {
    margin-right: 0;
    /* margin-bottom: 10px; */
    padding: 8px 10px 8px 34px;
    width: 100%;
    min-height: inherit;
    background: url(/assets/img/ico_contact_red.png) 10px 50% no-repeat;
    background-size: 16px 11.42px;
  }
  .not-authenticate:hover {
    border: 1px solid #ffbdb1;
  }
  .not-authenticate .not-authenticate__text {
    font-size: 1.2rem;
  }
  .not-authenticate .not-authenticate__caption {
    display: none;
  }
}
.not-authenticate .not-authenticate__caption {
  position: absolute;
  left: -50px;
  top: -15px;
  display: none;
  padding: 15px;
  min-width: 340px;
  color: #fff;
}
.not-authenticate .not-authenticate__link {
  margin: 50px 0 0;
  padding: 15px 10px;
  color: #ddd;
  font-size: 1.2rem;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
}
.not-authenticate .not-authenticate__link:hover {
  color: #999;
  transition: all 0.5s ease;
}
.not-authenticate .not-authenticate__link span {
  text-decoration: underline;
}
.not-authenticate-name {
  position: relative;
  margin-right: 20px;
  padding: 9pt 10px 10px 35px;
  min-height: 40px;
  border: 1px solid tomato;
  background: url(/assets/img/ico_user-name-red.png) 7% 50% no-repeat;
  background-size: 9pt 20px;
}
.not-authenticate-name:hover {
  border: 1px solid #ffbdb1;
  transition: all 0.5s ease;
}
.not-authenticate-name .not-authenticate-name__text {
  color: tomato;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
}
@media (max-width: 640px) {
  .not-authenticate .not-authenticate__link {
    display: none;
  }
  .not-authenticate-name {
    margin-right: 0;
    margin-bottom: 10px;
    padding: 9pt 10px 10px 45px;
    width: 100%;
  }
  .not-authenticate-name:hover {
    border: 1px solid #ffbdb1;
  }
  .not-authenticate-name .not-authenticate-name__text {
    font-size: 1.3rem;
  }
  .not-authenticate-name .not-authenticate-name__link {
    display: none;
  }
}
.not-authenticate-name .not-authenticate-name__caption {
  position: absolute;
  left: -50px;
  top: -15px;
  display: none;
  padding: 15px;
  min-width: 340px;
  color: #fff;
}
.not-authenticate-name .not-authenticate-name__link {
  margin: 50px 0 0;
  padding: 15px 10px;
  color: #ddd;
  font-size: 1.2rem;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
}
.not-authenticate-name .not-authenticate-name__link:hover {
  color: #999;
  transition: all 0.5s ease;
}
.not-authenticate-name .not-authenticate-name__link span {
  text-decoration: underline;
}
.error__text {
  margin: 5px 0;
  padding-left: 20px;
  width: 100%;
  color: tomato;
  font-size: 1.4rem;
  line-height: 1;
  background: url(/assets/img/ico_error_red.png) 0 50% no-repeat;
  background-size: 1pc 14px;
}
.common-error__title {
  margin: 60px 0 30px;
  width: 100%;
  text-align: center;
  line-height: 1;
}
@media (max-width: 640px) {
  .common-error__title {
    margin: 30px 0;
  }
}
.common-error__title span {
  display: inline-block;
  padding-left: 70px;
  color: tomato;
  font-size: 6rem;
  background: url(/assets/img/ico_error.png) 0 50% no-repeat;
}
.error__message,
.error__number {
  color: #666;
  text-align: center;
  width: 100%;
}
.error__title--base {
  margin: 60px 0;
  width: 100%;
  text-align: center;
}
@media (max-width: 640px) {
  .error__title--base {
    margin: 30px 0;
  }
}
.error__number {
  margin-bottom: 30px;
  font-size: 10rem;
  line-height: 1;
}
@media (max-width: 640px) {
  .error__number {
    font-size: 6rem;
  }
}
.error__message {
  margin-bottom: 50px;
  font-size: 2rem;
  line-height: 1.6;
}
.nothing__btn,
.nothing__btn--upload {
  display: block;
  min-height: 50px;
  font-size: 1.6rem;
  color: #333;
  padding: 10px;
  background: url(/assets/img/bg_gray.png);
}
@media (max-width: 640px) {
  .error__message {
    margin-bottom: 30px;
    font-size: 1.6rem;
  }
}
.nothing__btn {
  margin: 0 auto;
  max-width: 280px;
  text-align: center;
}
@media (max-width: 640px) {
  .nothing__btn {
    max-width: initial;
    width: 100%;
  }
  .nothing__btn--upload {
    display: none;
  }
}
.nothing__btn--upload {
  margin: 0 auto;
  max-width: 280px;
  text-align: center;
}
.error__title {
  padding-top: 90pt;
  width: 100%;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: url(/assets/img/ico_caution_white_l.png) 50% 0 no-repeat;
  background-size: 90pt 81pt;
}
.notification__area,
.notification__area--error {
  position: fixed;
  top: 0;
  transform: translate(-50%, 20px);
  padding: 105px 20px 20px;
  min-height: 10pc;
  text-align: center;
  box-shadow: 0 0 1px transparent;
  z-index: 9999;
  left: 50%;
}
.error__caution--text-l {
  margin-bottom: 30px;
  width: 100%;
  font-size: 2.4rem;
  color: #fff;
  text-align: center;
}
.notification__area {
  width: 100%;
  max-width: 300px;
  color: #999;
  background: url(/assets/img/ico_notification.png) 50% 40px no-repeat #eee;
  background-size: 4pc 46px;
}
.notification__area .notification__txt {
  font-size: 1.6rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .notification__area {
    width: 80%;
    max-width: initial;
  }
  .notification__area .notification__txt {
    font-size: 1.4rem;
  }
}
.notification__area .error {
  color: tomato;
}
.notification__area--error {
  width: 100%;
  max-width: 300px;
  color: #999;
  background: url(/assets/img/ico_error.png) 50% 40px no-repeat #eee;
  background-size: 60px 54px;
}
.notification__area--error .notification__txt {
  font-size: 1.6rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .notification__area--error {
    width: 80%;
    max-width: initial;
  }
  .notification__area--error .notification__txt {
    font-size: 1.4rem;
  }
}
.notification__area--error .error {
  color: tomato;
}
.page-nation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.page-nation .page-nation--item {
  margin-right: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #666;
}
@media (max-width: 640px) {
  .page-nation .page-nation--item {
    margin-bottom: 10px;
    padding: 6px 0;
    width: 40px;
    height: 40px;
  }
}
.page-nation .page-nation--item a {
  display: block;
  color: #666;
}
.page-nation .active,
.page-nation .page-nation--item a:hover {
  color: #333;
  background: #fff;
  border: 0;
  font-weight: 700;
}
.page-nation .page-nation--item a:hover {
  transition: all 0.5s ease;
}
.page-nation .page-nation--item:last-child {
  margin-right: 0;
}
.about-summary__title--wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.about__tooltip--wrap {
  position: relative;
  cursor: pointer;
}
.about__tooltip img {
  margin: 0;
  padding: 0;
}
.about__blowing {
  display: none;
  position: absolute;
  padding: 5px;
  min-width: 10pc;
  font-size: 1.2rem;
  color: #ddd;
  border-radius: 5px;
  background: #000;
  z-index: 2;
}
.about__tooltip--wrap:hover .about__blowing {
  display: inline-block;
  top: -30px;
  left: 40px;
  opacity: 0.8;
  transition: all 0.5s ease;
}
.underlayer__head {
  display: flex;
  margin-bottom: 30px;
  padding: 0 15px 0 10px;
}
@media (max-width: 640px) {
  .underlayer__head {
    flex-wrap: wrap;
    padding: 0;
  }
}
.underlayer__head .right-side__wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
.underlayer__head .right-side__wrap .right-side__item {
  width: 75%;
}
.underlayer__title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .underlayer__head .right-side__wrap {
    flex-wrap: wrap;
  }
  .underlayer__head .right-side__wrap .right-side__item {
    width: 100%;
  }
  .underlayer__title {
    margin-bottom: 20px;
    font-size: 2rem;
  }
}
.sort__area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 25%;
  min-width: 210px;
}
.sort__area p {
  margin-right: 10px;
  font-size: 1.6rem;
}
@media (max-width: 640px) {
  .sort__area {
    width: 100%;
  }
  .sort__area p {
    width: 20%;
  }
}
.sort__area .sort__btn {
  cursor: pointer;
  padding: 5px 10px;
  width: 140px;
  min-height: 40px;
  border: 1px solid #666;
  color: #ddd;
  font-size: 1.4rem;
  background: url(/assets/img/arrow-down_s_gray.png) 92% 50% no-repeat #333;
}
.pc-only__text {
  display: block;
  color: #999;
}
.sp-only__text {
  display: none;
}
@media (max-width: 640px) {
  .sort__area .sort__btn {
    width: 75%;
  }
  .pc-only__text {
    display: none;
  }
  .sp-only__text {
    display: block;
    color: #999;
    font-size: 1.6rem;
  }
}
.banner__area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 5pc;
  text-align: center;
  background: #ccc;
  color: #333;
}
.category__wrap {
  margin-right: 10px;
  padding: 0;
  width: 280px;
}
@media (max-width: 640px) {
  .banner__area {
    min-height: initial;
  }
  .category__wrap {
    display: none;
  }
}
.category__wrap li {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.category__wrap li .category__btn {
  display: block;
  padding: 15px 20px;
  width: 280px;
  min-height: 60px;
  color: #ddd;
  font-size: 1.6rem;
  border-bottom: solid 1px #fff;
  box-sizing: border-box;
  background: url(/assets/img/arrow-down_s_gray.png) 92% 50% no-repeat #333;
}
.category__wrap li .category__btn:hover {
  color: #000;
  background: url(/assets/img/arrow-down_s_gray.png) 92% 50% no-repeat #444;
  transition: all 0.5s ease;
}
.category__wrap li .category__list {
  position: absolute;
  top: 60px;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 4;
  background: rgba(68, 68, 68, 0.9);
}
.category__wrap li .category__list .category__list--item {
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: all 0.5s ease;
}
.category__wrap
li
.category__list
.category__list--item
.category__list--inner {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.category__wrap
li
.category__list
.category__list--item
.category__list--inner
.category__list--inner-item {
  width: 50%;
  background: rgba(68, 68, 68, 0.9);
  line-height: 1.2;
}
.category__wrap
li
.category__list
.category__list--item
.category__list--inner
a {
  display: block;
  padding: 4px 10px 4px 30px;
  width: 100%;
  color: #ddd;
  font-size: 1.4rem;
  background: url(/assets/img/arrow_s_gray.png) 10% 50% no-repeat;
}
.category__wrap
li
.category__list
.category__list--item
.category__list--inner
a:hover {
  color: #000;
  background: url(/assets/img/arrow_s_gray.png) 12% 50% no-repeat #666;
  transition: all 0.5s ease;
}
.category__wrap li .category__list .category__list--title {
  padding: 1% 20px 0 10px;
  font-size: 1.8rem;
  color: #000;
  border-top: solid 1px #666;
  background: rgba(68, 68, 68, 0.9);
}
.category__wrap li .category__list .category__list--title--middle {
  padding: 1% 20px 0 10px;
  font-size: 1.6rem;
  color: #999;
  background: rgba(68, 68, 68, 0.9);
}
.category__wrap li:last-child .category__list {
  left: 0;
  width: 100%;
}
.category__wrap li:hover .category__list .category__list--item {
  overflow: visible;
  height: auto;
}
.category__wrap li:hover .category__list .category__list--item:first-child {
  border-top: 0;
}
.category__wrap li:hover .category__list .category__list--item:last-child {
  border-bottom: 0;
}
.user-category__wrap {
  margin-right: 10px;
  padding: 0;
  width: 250px;
}
@media (max-width: 640px) {
  .user-category__wrap {
    display: none;
  }
}
.user-category__wrap li {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.user-category__wrap li .user-category__btn {
  display: block;
  padding: 15px 20px;
  width: 250px;
  min-height: 60px;
  color: #ddd;
  font-size: 1.6rem;
  border-bottom: solid 1px #fff;
  box-sizing: border-box;
  background: url(/assets/img/arrow-down_s_gray.png) 92% 50% no-repeat #333;
}
.user-category__wrap li .user-category__btn:hover {
  color: #000;
  background: url(/assets/img/arrow-down_s_gray.png) 92% 50% no-repeat #444;
  transition: all 0.5s ease;
}
.user-category__wrap li .user-category__list {
  position: absolute;
  top: 60px;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 4;
  background: rgba(68, 68, 68, 0.9);
  display: flex;
  flex-wrap: wrap;
}
.user-category__wrap li .user-category__list .user-category__list--item {
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: all 0.5s ease;
}
.user-category__wrap li .user-category__list .user-category__list--item a {
  display: block;
  padding: 0 10px 0 40px;
  width: 100%;
  color: #ddd;
  font-size: 1.4rem;
  background: url(/assets/img/arrow_s_gray.png) 10% 50% no-repeat;
}
.user-category__wrap
li
.user-category__list
.user-category__list--item
a:hover {
  color: #000;
  background: url(/assets/img/arrow_s_gray.png) 12% 50% no-repeat #666;
  transition: all 0.5s ease;
}
.user-category__wrap li:last-child .user-category__list {
  left: 0;
  width: 100%;
}
.user-category__wrap li:hover .user-category__list .user-category__list--item {
  overflow: visible;
  height: 30px;
}
.user-category__wrap
li:hover
.user-category__list
.user-category__list--item:first-child {
  border-top: 0;
  margin-top: 10px;
}
.user-category__wrap
li:hover
.user-category__list
.user-category__list--item:last-child {
  border-bottom: 0;
  margin-bottom: 10px;
}
.works-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 75pt;
  max-width: 1420px;
  width: calc(100% - 10px);
  animation: a 2s ease 0 1 normal;
}
@media (max-width: 1200px) {
  .works-list {
    max-width: 885pt;
  }
}
@media (max-width: 900px) {
  .works-list {
    max-width: 55pc;
  }
}
@media (max-width: 640px) {
  .works-list {
    max-width: initial;
    width: 100%;
  }
  .works-list:nth-child(2n) {
    margin-right: 0;
  }
}
.works-list .works-list__item {
  position: relative;
  margin: 0 10px 10px 0;
  width: calc(20% - 10px);
  max-width: 274px;
  background: #222;
  flex: none;
}
@media (max-width: 1200px) {
  .works-list .works-list__item {
    width: calc(25% - 10px);
    max-width: initial;
    transition: all 0.5s ease;
  }
}
@media (max-width: 900px) {
  .works-list .works-list__item {
    width: calc(33.33333% - 10px);
    max-width: initial;
    transition: all 0.5s ease;
  }
}
@media (max-width: 640px) {
  .works-list .works-list__item {
    width: calc(51% - 10px);
    max-width: initial;
    transition: all 0.5s ease;
  }
  .works-list .works-list__item:nth-child(2n) {
    margin-right: 0;
  }
}
.works-list .works-list__item .thumbnail {
  max-width: 274px;
  max-height: 140px;
  overflow: hidden;
  border: 1px solid #333;
}
@media (max-width: 1200px) {
  .works-list .works-list__item .thumbnail {
    width: 100%;
    max-width: initial;
  }
}
@media (max-width: 900px) {
  .works-list .works-list__item .thumbnail {
    width: 100%;
    max-width: initial;
  }
}
.works-list .works-list__item .thumbnail img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
@media (max-width: 640px) {
  .works-list .works-list__item .thumbnail {
    width: 100%;
    max-width: initial;
    max-height: 75pt;
  }
  .works-list .works-list__item .thumbnail img {
    width: 100%;
    height: auto;
  }
}
.works-list .works-list__item .thumbnail img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.works-list .works-list__item .sell-model {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 60px;
  height: 60px;
  z-index: 1;
}
.works-list .works-list__item .sell-model .sell-model__img {
  width: 100%;
}
.works-list .works-list__item .user-name {
  padding: 10px;
  min-height: 46px;
  font-size: 1.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: solid 1px #666;
}
.works-list .works-list__item .user-name a {
  color: #ddd;
}
.works-list .works-list__item .user-name a:hover {
  color: #000;
  transition: all 0.5s ease;
}
.works-list .works-list__item .works-list__counter {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  font-size: 1.4rem;
  color: #999;
}
.works-list .works-list__item .works-list__counter .view {
  margin-right: 10px;
  padding-left: 22px;
  background: url(/assets/img/ico_view_gray.png) 0 50% no-repeat;
  background-size: 18px 10px;
}
@media (max-width: 640px) {
  .works-list .works-list__item .works-list__counter {
    flex-wrap: wrap;
    font-size: 1.2rem;
  }
  .works-list .works-list__item .works-list__counter .view {
    margin-right: 0;
    width: 50%;
  }
}
.works-list .works-list__item .works-list__counter .comment {
  margin-right: 10px;
  padding-left: 22px;
  color: #999;
  background: url(/assets/img/ico_comment_gray.png) 0 50% no-repeat;
  background-size: 18px 15px;
}
.works-list .works-list__item .works-list__counter .comment:hover {
  color: #000;
  transition: all 0.5s ease;
}
.works-list .works-list__item .works-list__counter .like {
  padding-left: 18px;
  color: #999;
  background: url(/assets/img/ico_like_gray.png) 0 50% no-repeat;
  background-size: 14px 13px;
}
.works-list .works-list__item .works-list__counter .like:hover {
  color: #000;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .works-list .works-list__item .works-list__counter .comment {
    margin-right: 0;
    width: 50%;
  }
  .works-list .works-list__item .works-list__counter .like {
    width: 100%;
  }
}
.works-list .works-list__item .works__publish--area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.works-list .works-list__item .works__publish--area .works__unpublish--btn {
  display: inline-block;
  padding: 1px 10px;
  width: 90px;
  min-height: 30px;
  border: 1px solid #666;
  color: #666;
  font-size: 1.4rem;
  text-align: center;
}
@media (max-width: 640px) {
  .works-list .works-list__item .works__publish--area .works__unpublish--btn {
    margin-bottom: 10px;
    width: 100%;
  }
}
.works-list
.works-list__item
.works__publish--area
.works__unpublish--btn:hover {
  color: #333;
  background: #5bbedd;
  border: 1px solid #5bbedd;
  transition: all 0.5s ease;
}
.works-list .works-list__item .works__publish--area .works__publish--btn {
  display: inline-block;
  padding: 1px 10px;
  width: 90px;
  min-height: 30px;
  border: 1px solid #666;
  color: #666;
  font-size: 1.4rem;
  text-align: center;
}
.works-list .works-list__item .works__publish--area .works__publish--btn:hover {
  color: #333;
  background: #fff;
  border: 1px solid #000;
  transition: all 0.5s ease;
}
.works-list .works-list__item .works__publish--area .works__purchased {
  width: 100%;
  color: #666;
  font-size: 1.4rem;
  text-align: center;
}
.works-list .works-list__item .works__publish--area .works__purchased span {
  display: inline-block;
  padding-left: 20px;
  background: url(/assets/img/ico_check_grey.png) 0 50% no-repeat;
  background-size: 14px 10px;
}
.works-list .works-list__item .works__publish--area .works__edit--btn {
  padding: 1px 10px;
  min-width: 5pc;
  min-height: 30px;
  color: #666;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid #666;
}
.works-list .works-list__item .works__publish--area .works__edit--btn:hover {
  background: #edcced;
  border: 1px solid #edcced;
}
.works-list .works-list__item .works__publish--area .works__edit--btn span {
  display: inline-block;
  padding-left: 20px;
  background: url(/assets/img/ico_edit_gray.png) 5% 48% no-repeat;
  background-size: 9pt 9pt;
}
.works-list
.works-list__item
.works__publish--area
.works__edit--btn
span:hover {
  background: url(/assets/img/ico_edit.png) 5% 48% no-repeat;
  background-size: 9pt 9pt;
}
.works-list .works-list__item .works__publish--area .works__delete--btn {
  cursor: pointer;
  padding: 5px 10px;
  min-width: 36px;
  min-height: 30px;
  color: #999;
  text-align: center;
  border: 1px solid #666;
  background: url(/assets/img/ico_trash.png) 50% 50% no-repeat;
  background-size: 10px 15px;
}
@media (max-width: 640px) {
  .works-list .works-list__item .works__publish--area .works__edit--btn,
  .works-list .works-list__item .works__publish--area .works__publish--btn {
    margin-bottom: 10px;
    width: 100%;
  }
  .works-list .works-list__item .works__publish--area .works__delete--btn {
    width: 100%;
  }
}
.works-list .works-list__item .works__publish--area .works__delete--btn:hover {
  background: url(/assets/img/ico_trash.png) 50% 50% no-repeat #666;
  background-size: 10px 15px;
  transition: all 0.5s ease;
}
.btn__area {
  width: 100%;
  text-align: center;
}
.btn__area .more__btn {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  width: 20pc;
  text-align: center;
  font-size: 1.8rem;
  color: #ddd;
  border: 1px solid #666;
  background-position: 95% 50%;
}
.btn__area .more__btn:hover {
  background: hsla(0, 0, 40%, 0.5);
  transition: all 0.5s ease;
}
.project__list {
  animation: a 2s ease 0 1 normal;
}
.project__list .project__list--item {
  display: flex;
  margin-bottom: 30px;
  padding: 10px;
  background: url(/assets/img/bg_gray.png);
}
.project__list .project__list--item .project__thumbnail {
  max-width: 200px;
  max-height: 140px;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .btn__area .more__btn {
    width: 100%;
  }
  .project__list .project__list--item {
    flex-wrap: wrap;
  }
  .project__list .project__list--item .project__thumbnail {
    max-width: initial;
    max-height: initial;
    width: 100%;
    height: auto;
  }
}
.project__list .project__list--item .project__thumbnail img {
  max-width: 200px;
  min-width: 200px;
  max-height: 140px;
  min-height: 140px;
  overflow: hidden;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.project__list .project__list--item .project__thumbnail img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.project__list .project__list--item .project__list--inner {
  padding: 0 10px 0 20px;
  width: 100%;
}
.project__list--inner--status {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 640px) {
  .project__list .project__list--item .project__thumbnail img {
    max-width: initial;
    max-height: 75pt;
    min-height: 75pt;
    width: 100%;
  }
  .project__list .project__list--item .project__list--inner {
    padding: 20px;
  }
  .project__list--inner--status {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}
.project__list--inner--status .project__list--deadline {
  margin-left: auto;
  font-size: 1.4rem;
  text-align: right;
}
.project__list--being,
.project__list--completion,
.project__list--not-yet {
  padding: 2px 10px;
  font-size: 1.3rem;
  font-weight: 700;
}
.project__list--not-yet {
  max-width: 150px;
  color: #333;
  text-align: center;
  background: #ccc;
}
@media (max-width: 640px) {
  .project__list--inner--status .project__list--deadline {
    margin-left: 0;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
  }
  .project__list--not-yet {
    margin-bottom: 5px;
    max-width: initial;
    width: 100%;
  }
}
.project__list--being {
  max-width: 140px;
  color: #333;
  text-align: center;
  background: #fff;
}
@media (max-width: 640px) {
  .project__list--being {
    margin-bottom: 5px;
    max-width: initial;
    width: 100%;
  }
}
.project__list--completion {
  max-width: 140px;
  color: #aaa;
  text-align: center;
  background: #666;
}
@media (max-width: 640px) {
  .project__list--completion {
    margin-bottom: 5px;
    max-width: initial;
    width: 100%;
  }
}
.project__type--private {
  margin: 10px;
  padding: 0 10px;
  border: 1px solid #666;
  background: #333;
}
.project__type--private span {
  display: inline-block;
  padding-left: 15px;
  font-size: 1.4rem;
  color: #000;
  background: url(/assets/img/ico_private_green.png) 0 50% no-repeat;
  background-size: 10px 11px;
}
.project__list--inner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: solid 1px #666;
}
@media (max-width: 640px) {
  .project__type--private {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .project__list--inner-head {
    flex-wrap: wrap;
  }
}
.project__list--inner-head .title {
  margin: 0 10px 10px 0;
  max-width: 700px;
  overflow: hidden;
  word-break: break-all;
  font-size: 2rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .project__list--inner-head .title {
    margin-bottom: 10px;
    max-width: initial;
    width: 100%;
    font-size: 1.6rem;
  }
  .project__list--inner-head .budget {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
  }
}
.project__list--inner-head .title a {
  color: #ddd;
}
.project__list--inner-head .title a:hover {
  color: #000;
  transition: all 0.5s ease;
}
.project__list--inner-head .budget {
  color: #000;
  font-size: 1.4rem;
}
.project__list--inner-head .budget span {
  display: inline-block;
  margin-left: 10px;
  font-size: 3rem;
  font-weight: 700;
}
@media (max-width: 640px) {
  .project__list--inner-head .budget span {
    font-size: 2rem;
  }
}
.project__list--inner-head .send-message__btn {
  display: block;
  margin-right: 10px;
  padding: 2px 10px;
  min-width: 90pt;
  max-height: 30px;
  text-align: center;
  color: #999;
  font-size: 1.4rem;
  border: 1px solid #666;
}
.project__list--inner-head .send-message__btn span {
  display: inline-block;
  padding-left: 24px;
  background: url(/assets/img/ico_contact_gray.png) 0 50% no-repeat;
}
.project__list--inner-head .send-message__btn span:hover {
  background: url(/assets/img/ico_contact_black.png) 0 50% no-repeat;
}
.project__list--inner-head .send-message__btn:hover {
  color: #333;
  background: #000;
  border: 1px solid #000;
  transition: all 0.5s ease;
}
.project__list--title--wrap {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .project__list--inner-head .send-message__btn {
    margin: 0 auto 30px;
    width: 50%;
    max-height: initial;
  }
  .project__list--title--wrap {
    width: 100%;
  }
}
.project__list--inner-foot {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #666;
}
.project__list--inner-foot .tag__info {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.project__list--inner-foot .tag__info .tag__info--item {
  padding: 0 10px;
  font-size: 1.4rem;
  border-right: solid 1px #666;
}
@media (max-width: 640px) {
  .project__list--inner-foot .tag__info {
    flex-wrap: wrap;
    width: 100%;
  }
  .project__list--inner-foot .tag__info .tag__info--item {
    padding: 5px 0;
    width: 100%;
    border-right: 0;
    border-bottom: solid 1px #666;
  }
  .project__list--inner-foot .tag__info .tag__info--item:last-child {
    margin-bottom: 10px;
  }
  .project__list--inner-foot .tag__label {
    flex-wrap: wrap;
    width: 100%;
  }
}
.project__list--inner-foot .tag__info .tag__info--item:first-of-type {
  padding-left: 0;
}
.project__list--inner-foot .tag__label {
  display: flex;
}
.project__list--inner-foot .tag__label .tag__label--item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  padding: 0 0 0 10px;
  border-right: solid 1px #666;
}
@media (max-width: 640px) {
  .project__list--inner-foot .tag__label .tag__label--item {
    flex-wrap: wrap;
    padding: 0;
    border-right: 0;
  }
  .project__list--inner-foot .tag__label .tag__label--item p {
    margin-bottom: 10px;
  }
}
.project__list--inner-foot .tag__label .tag__label--item:last-child {
  margin-right: 0;
  border-right: 0;
}
.project__list--inner-foot .tag__label .tag__label--item p {
  margin-right: 10px;
  padding: 0 10px;
  font-size: 1.4rem;
  border: 1px solid #666;
}
.project__list--inner-foot .tag__label .radio__btn + label {
  margin-right: 10px;
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 25px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 700;
}
.project__list--inner-foot .tag__label .radio__btn + label:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  background: #333;
  border: 1px solid #666;
  border-radius: 10px;
  transform: translateY(-50%);
}
.project__list--inner-foot
.tag__label
.radio__btn[type="radio"]:checked
+ label:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 6px;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  background: #000;
  border-radius: 100%;
}
.project__list--inner--member .member__title {
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: 700;
}
.project__list--inner--member .member {
  display: flex;
  flex-wrap: wrap;
}
.project__list--inner--member .member .member__item {
  margin: 0 10px 10px 0;
}
.project__list--inner--member .member__thumbnail {
  width: 30px;
  max-width: 30px;
  min-width: 30px;
  height: 30px;
  max-height: 30px;
  min-height: 30px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
}
.project__list--inner--member .member__list--wrap {
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.project__list--inner--member .member__list--wrap img {
  margin: 0;
  padding: 0;
}
.project__list--inner--member .member__blowing {
  display: none;
  position: absolute;
  padding: 5px;
  width: 75pt;
  font-size: 1.2rem;
  color: #ddd;
  border-radius: 5px;
  background: #000;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.project__list--inner--member .member__list--wrap:hover .member__blowing {
  display: inline-block;
  top: -40px;
  left: -30px;
  opacity: 0.8;
  transition: all 0.5s ease;
}
.modal-btn__wrap .fb__btn:hover,
.user-list .user-list__item .user-profile figure:hover {
  opacity: 0.7;
  transition: all 0.5s ease;
}
.user-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 75pt;
  max-width: 1420px;
  width: calc(100% - 10px);
  animation: a 2s ease 0 1 normal;
}
@media (max-width: 1200px) {
  .user-list {
    max-width: 885pt;
  }
}
@media (max-width: 900px) {
  .user-list {
    max-width: 55pc;
  }
}
@media (max-width: 640px) {
  .user-list {
    max-width: initial;
    width: 100%;
  }
}
.user-list .user-list__item {
  margin: 0 10px 10px 0;
  width: calc(20% - 10px);
  max-width: 274px;
  background: #333;
  flex: none;
}
@media (max-width: 1200px) {
  .user-list .user-list__item {
    width: calc(25% - 10px);
    max-width: initial;
    transition: all 0.5s ease;
  }
}
@media (max-width: 900px) {
  .user-list .user-list__item {
    width: calc(33.33333% - 10px);
    max-width: initial;
    transition: all 0.5s ease;
  }
}
.user-list .user-list__item .user-profile {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  min-height: 70px;
}
@media (max-width: 640px) {
  .user-list .user-list__item {
    width: calc(51% - 10px);
    max-width: initial;
    transition: all 0.5s ease;
  }
  .user-list .user-list__item:nth-child(2n) {
    margin-right: 0;
  }
  .user-list .user-list__item .user-profile {
    min-height: initial;
  }
}
.user-list .user-list__item .user-profile figure {
  margin-right: 10px;
  overflow: hidden;
}
.user-list .user-list__item .user-profile .user-profile__thum {
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 640px) {
  .user-list .user-list__item .user-profile .user-profile__thum {
    width: 30px;
    max-width: 30px;
    min-width: 30px;
    height: 30px;
    max-height: 30px;
    min-height: 30px;
  }
  .user-list .user-list__item .user-profile .user-skill {
    margin-top: -8px;
  }
}
@media (max-width: 320px) {
  .user-list .user-list__item .user-profile .user-profile__thum {
    width: 24px;
    max-width: 24px;
    min-width: 24px;
    height: 24px;
    max-height: 24px;
    min-height: 24px;
  }
}
.user-list .user-list__item .user-profile .user-name__wrap {
  flex: none;
  width: 75%;
}
.user-list .user-list__item .user-profile .user-name {
  font-size: 1.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.user-list .user-list__item .user-profile .user-name a:hover {
  color: #ddd;
  transition: all 0.5s ease;
}
.user-list .user-list__item .user-profile .user-skill {
  font-size: 1.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.user-list .user-list__item .user-cover {
  max-width: 274px;
  max-height: 140px;
  overflow: hidden;
  border: 1px solid #333;
}
@media (max-width: 1200px) {
  .user-list .user-list__item .user-cover {
    width: 100%;
    max-width: initial;
  }
}
@media (max-width: 900px) {
  .user-list .user-list__item .user-cover {
    width: 100%;
    max-width: initial;
  }
}
.user-list .user-list__item .user-cover img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
@media (max-width: 640px) {
  .user-list .user-list__item .user-cover {
    width: 100%;
    max-width: initial;
    max-height: 75pt;
  }
  .user-list .user-list__item .user-cover img {
    width: 100%;
    height: auto;
  }
}
.user-list .user-list__item .user-cover img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.user-list .user-list__item .user__quote {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 0 5px;
  width: 90%;
}
@media (max-width: 640px) {
  .user-list .user-list__item .user__quote {
    padding: 6px 8px;
    width: 100%;
  }
}
.user-list .user-list__item .user__quote .user__quote--item {
  margin: 10px 0 0;
  width: 50%;
  font-size: 1.8rem;
  color: #ddd;
  text-align: center;
}
@media (max-width: 640px) {
  .user-list .user-list__item .user__quote .user__quote--item {
    margin: 0;
    width: 50%;
    text-align: center;
    font-size: 1.6rem;
  }
}
.user-list .user-list__item .user__quote .user__quote--item span {
  display: block;
  margin-top: -5px;
  font-size: 1.2rem;
}
.user-list .user-list__item .invite__btn {
  display: block;
  margin: 0 auto 10px;
  padding: 8px 10px;
  width: 90%;
  max-height: 40px;
  text-align: center;
  background: url(/assets/img/bg_blue.png);
  color: #333;
  font-size: 1.6rem;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  backface-visibility: hidden;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.user-list .user-list__item .free-user__box,
.user-list .user-list__item .invited__box {
  margin: 0 auto 10px;
  width: 90%;
  max-height: 40px;
  font-size: 1.8rem;
  border: 1px solid #666;
  text-align: center;
  font-weight: 700;
}
.login__content .login__btn:before,
.user-list .user-list__item .invite__btn:before {
  top: 0;
  -webkit-transform: scaleX(0);
  content: "";
  right: 0;
  bottom: 0;
  -webkit-transition-timing-function: ease-out;
}
.user-list .user-list__item .invite__btn:before {
  position: absolute;
  z-index: -1;
  left: 0;
  background: #89d2e8;
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.user-list .user-list__item .invite__btn:hover {
  color: #333;
}
.user-list .user-list__item .invite__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.user-list .user-list__item .invite__btn:focus {
  color: #333;
}
.user-list .user-list__item .invite__btn:focus:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.user-list .user-list__item .invite__btn:active {
  color: #333;
}
.user-list .user-list__item .invite__btn:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.user-list .user-list__item .invited__box {
  padding: 4px 10px;
  color: #666;
}
.user-list .user-list__item .invited__box span {
  display: inline-block;
  padding-left: 20px;
  background: url(/assets/img/ico_check_grey.png) 0 50% no-repeat;
  background-size: 14px 10px;
}
.user-list .user-list__item .free-user__box {
  padding: 4px 10px;
  color: #aaa;
  background: #666;
}
.close__btn {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 7px 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #bbb;
}
@media (max-width: 640px) {
  .close__btn {
    top: 5px;
    right: 5px;
    padding: 4px 2px 1px;
    width: 24px;
    height: 24px;
  }
  .close__btn img {
    width: 75%;
  }
}
.modal-btn__wrap {
  display: flex;
  justify-content: space-between;
  margin: 30px auto;
  width: 80%;
}
@media (max-width: 640px) {
  .modal-btn__wrap {
    flex-wrap: wrap;
    margin: 16px auto;
    width: 100%;
  }
}
.modal-btn__wrap .fb__btn {
  display: block;
  padding: 18px 10px;
  width: 48%;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  background: #3a589a;
}
@media (max-width: 640px) {
  .modal-btn__wrap .fb__btn {
    margin-bottom: 10px;
    width: 100%;
    padding: 16px 10px;
  }
}
.modal-btn__wrap .fb__btn span {
  display: inline-block;
  padding: 3px 0 0 15px;
  min-height: 20px;
  background: url(/assets/img/ico_facebook_white.png) 0 50% no-repeat;
}
.modal-btn__wrap .google__btn {
  display: block;
  padding: 18px 10px;
  width: 48%;
  color: #666;
  font-size: 1.6rem;
  background: #fff;
  text-align: center;
  border: 1px solid #ccc;
}
@media (max-width: 640px) {
  .modal-btn__wrap .google__btn {
    width: 100%;
    padding: 16px 10px;
  }
}
.modal-btn__wrap .google__btn:hover {
  opacity: 0.5;
  transition: all 0.5s ease;
}
.modal-btn__wrap .google__btn span {
  display: inline-block;
  padding-left: 24px;
  background: url(/assets/img/ico_google.png) 0 50% no-repeat;
  background-size: 15px 1pc;
}
.under__text {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #999;
  text-align: center;
}
.under__text a,
.under__text label {
  color: #000;
}
.under__text a:hover,
.under__text label:hover {
  color: #000;
  transition: all 0.5s ease;
}
.under__text b {
  font-weight: 700;
  color: #333;
}
.modal__checkbox + label {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding-left: 40px;
  width: 100%;
  font-size: 1.4rem;
  color: #999;
  text-align: left;
}
.modal__checkbox + label a {
  color: #000;
}
.modal__checkbox + label a:hover {
  color: #000;
  transition: all 0.5s ease;
}
.modal__checkbox + label:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 10px;
  width: 18px;
  height: 18px;
  background: 0;
  border: 1px solid #999;
  transform: translateY(-50%);
}
input.modal__checkbox[type="checkbox"]:checked + label:after {
  position: absolute;
  content: "";
  top: 33%;
  left: 17px;
  width: 7px;
  height: 9pt;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 640px) {
  input.modal__checkbox[type="checkbox"]:checked + label:after {
    top: 40%;
  }
}
.modal__foot {
  margin-top: 20px;
  padding-top: 20px;
  width: 100%;
  font-size: 1.4rem;
  color: #999;
  text-align: center;
  border-top: solid 1px #ccc;
}
.login__content,
.signup__content {
  align-self: center;
  padding: 60px;
  line-height: 1;
  box-sizing: border-box;
  max-width: 50pc;
}
.modal__foot a {
  color: #000;
}
.modal__foot a:hover {
  color: #000;
  transition: all 0.5s ease;
}
.login__wrap input {
  display: none;
}
.login__overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0 0.5s;
  transform: scale(0);
}
.login__content {
  position: relative;
  width: 90%;
  max-width: 800px;
  color: #000;
  background: #fff;
  transition: 0.5s;
}
@media (max-width: 640px) {
  .login__content {
    padding: 20px 10px;
    width: 90%;
    max-width: initial;
    height: 520px;
    height: auto;
    max-height: 95dvh;
    overflow: scroll;
  }
}
.login__content .title {
  padding-bottom: 30px;
  font-size: 3rem;
  border-bottom: solid 1px #ccc;
}
@media (max-width: 640px) {
  .login__content .title {
    padding: 10px 0;
    font-size: 2rem;
  }
}
.login__content .input__area {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  padding: 0 10px;
}
.login__content .input__area .form__title {
  width: 15%;
  font-size: 1.8rem;
}
.login__content .input__area .form__title span {
  display: block;
  margin-top: 5px;
  font-size: 1.4rem;
  color: #999;
}
@media (max-width: 640px) {
  .login__content .input__area {
    flex-wrap: wrap;
    padding: 0;
  }
  .login__content .input__area .form__title {
    margin-bottom: 5px;
    width: 100%;
    font-size: 1.4rem;
  }
}
.login__content .input__area .modal__text-area--wrap {
  width: 80%;
}
.login__content .input__area .modal__text-area {
  display: block;
  padding: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  color: #000;
  font-size: 1.6rem;
}
@media (max-width: 640px) {
  .login__content .input__area .modal__text-area--wrap {
    width: 100%;
  }
  .login__content .input__area .modal__text-area {
    padding: 8px;
    width: 100%;
    font-size: 1.6rem;
  }
}
.login__content .input__area .modal__text-area::placeholder {
  color: #999;
  font-size: 1.6rem;
}
.login__content .lost__text {
  flex: none;
  display: block;
  margin: -15px 0 30px;
  padding: 0 10px;
  width: 100%;
  color: #000;
  font-size: 1.4rem;
  text-align: right;
}
.login__content .login__btn,
.signup__content .account__btn {
  width: 300px;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 640px) {
  .login__content .lost__text {
    margin-bottom: 20px;
  }
}
.login__content .lost__text a {
  color: #5bbedd;
}
.login__content .lost__text a:hover {
  color: #333;
  transition: all 0.5s ease;
}
.login__content .login__btn {
  margin: 20px auto;
  padding: 23px 10px;
  min-height: 60px;
  background: #fff;
  border: 1px solid #ccc;
  text-align: center;
  color: #333;
  font-size: 1.8rem;
  display: block;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  font-weight: 700;
  transition: all 0.3s ease;
  text-decoration: none;
}
.login__content .login__btn:active,
.login__content .login__btn:focus,
.login__content .login__btn:hover {
  color: #fff;
  background: #000;
}
@media (max-width: 640px) {
  .login__content .login__btn {
    margin-bottom: 10px;
    padding: 16px 10px;
    width: 100%;
    min-height: initial;
    /* height: 40px; */
    font-size: 1.6rem;
  }
}
.signup__overlay,
.upload__overlay {
  justify-content: center;
  overflow: auto;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
}
.login__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.login__wrap input:checked ~ .login__overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.signup__wrap input {
  display: none;
}
.signup__overlay {
  display: flex;
  position: fixed;
  z-index: 2000;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s, transform 0 0.5s;
  transform: scale(0);
}
.signup__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.signup__content {
  position: relative;
  width: 90%;
  max-width: 800px;
  color: #000;
  background: #fff;
  transition: 0.5s;
}
@media (max-width: 640px) {
  .signup__content {
    margin-bottom: 30px;
    padding: 20px 10px;
    width: 90%;
    max-width: initial;
    height: 520px;
    height: auto;
    max-height: 95dvh;
    overflow: scroll;
  }
}
.signup__content .title {
  padding-bottom: 30px;
  font-size: 3rem;
  border-bottom: solid 1px #ccc;
}
.signup__content .modal__text-area--wrap {
  width: 80%;
}
@media (max-width: 640px) {
  .signup__content .title {
    padding: 10px 0;
    font-size: 2rem;
  }
  .signup__content .modal__text-area--wrap {
    width: 100%;
  }
  .signup__content .input__area {
    flex-wrap: wrap;
  }
}
.signup__content .input__area {
  display: flex;
  margin: 20px 0;
  padding: 0 10px;
}
.signup__content .input__area .form__title {
  width: 35%;
  font-size: 1.8rem;
}
.signup__content .input__area .form__title span {
  display: block;
  margin-top: 5px;
  font-size: 1.4rem;
  color: #999;
}
@media (max-width: 640px) {
  .signup__content .input__area .form__title {
    margin-bottom: 5px;
    width: 100%;
    font-size: 1.4rem;
  }
}
.signup__content .input__area .modal__text-area {
  display: block;
  padding: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  color: #000;
  font-size: 1.6rem;
}
@media (max-width: 640px) {
  .signup__content .input__area .modal__text-area {
    padding: 8px;
    width: 100%;
  }
}
.signup__content .input__area .modal__text-area::placeholder {
  color: #999;
  font-size: 1.6rem;
}
.signup__content .caution__text {
  margin-top: 5px;
  font-size: 1.4rem;
  color: #999;
  line-height: 1.4;
}
.signup__content .account__btn {
  margin: 20px auto;
  padding: 23px 10px;
  min-height: 60px;
  background: #fff;
  text-align: center;
  color: #000;
  font-weight: 700;
  font-size: 1.8rem;
  display: block;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  border: 1px solid #ccc;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.signup__content .account__btn:active,
.signup__content .account__btn:focus,
.signup__content .account__btn:hover {
  color: #fff;
  background: #000;
}
@media (max-width: 640px) {
  .signup__content .account__btn {
    margin-bottom: 10px;
    width: 100%;
    font-size: 1.6rem;
    padding: 16px 10px;
    min-height: inherit;
  }
}
.signup__content .under__text {
  width: 100%;
  font-size: 1.4rem;
  color: #999;
  text-align: center;
}
.signup__wrap input:checked ~ .signup__overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.signup__wrap input:checked ~ .signup__overlay .signup__content {
  /* transform: translateY(8%); */
}
@media (max-width: 640px) {
  .signup__wrap input:checked ~ .signup__overlay .signup__content {
    transform: translateY(3%);
  }
}
.upload__wrap input {
  display: none;
}
.upload__overlay {
  display: flex;
  position: fixed;
  z-index: 2000;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s, transform 0 0.5s;
  transform: scale(0);
}
.license-check__content,
.upload__content {
  line-height: 1;
  transition: 0.5s;
  align-self: center;
  box-sizing: border-box;
}
.upload__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.upload__content::-webkit-scrollbar {
  display: none;
}
.upload__content {
  position: relative;
  padding: 40px;
  width: 95%;
  max-height: 780px;
  max-width: 960px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  color: #000;
  background: #fff;
  transform: scale(1.2);
}
.upload__btn,
.upload__content .upload__foot .cancel__btn {
  vertical-align: middle;
  box-shadow: 0 0 1px transparent;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  max-height: 40px;
  text-align: center;
}
.upload__btn:before,
.upload__content .upload__foot .cancel__btn:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition-timing-function: ease-out;
  content: "";
}
@media (max-width: 640px) {
  .upload__content {
    padding: 20px 10px;
    width: 90%;
    max-width: initial;
    height: 360px;
  }
}
.upload__content .title {
  padding-bottom: 20px;
  font-size: 3rem;
}
@media (max-width: 640px) {
  .upload__content .title {
    margin-bottom: 20px;
    padding: 10px 0;
    font-size: 2rem;
  }
  .upload__content .upload__area {
    display: none;
  }
}
.upload__content .upload__area {
  margin: 0 0 20px;
  padding: 20px;
  width: 100%;
  min-height: 340px;
  border: 1px solid #bbb;
  background: url(/assets/img/bg_upload_area_talentpool.png) 50% 50% no-repeat
  #fff;
  background-size: 600px 177px;
}
.upload__content .upload__foot {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  width: 100%;
  font-size: 1.4rem;
  color: #999;
  text-align: center;
  border-top: solid 1px #ccc;
}
.upload__content .upload__foot .cancel__btn {
  margin-right: 10px;
  padding: 10px;
  min-width: 130px;
  background: #fff;
  color: #000;
  font-size: 1.4rem;
  font-weight: 700;
  border: 1px solid #ccc;
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.upload__content .upload__foot .cancel__btn:active,
.upload__content .upload__foot .cancel__btn:focus,
.upload__content .upload__foot .cancel__btn:hover {
  color: #fff;
  background: #000;
}
.save-private__btn,
.upload__btn {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
}
.upload__wrap input:checked ~ .upload__overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.upload__wrap input:checked ~ .upload__overlay .upload__content {
  transform: scale(1);
}
.upload__btn {
  cursor: pointer;
  padding: 10px;
  min-width: 130px;
  color: #000;
  font-size: 1.4rem;
  background: #fff;
  border: 1px solid #ccc;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.upload__btn--disable,
.upload__btn--loading,
.upload__btn:active,
.upload__btn:focus,
.upload__btn:hover {
  color: #fff;
  background: #000;
}
.error__btn--wrap .no__btn:before,
.error__btn--wrap .yes__btn:before,
.license-dl__btn:before,
.license-setting-save__btn:before,
.period__modal--btn:before,
.save-private__btn:before {
  -webkit-transition-timing-function: ease-out;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.upload__btn:active:before,
.upload__btn:focus:before,
.upload__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.license-dl__btn,
.save-private__btn {
  cursor: pointer;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px transparent;
}
.upload__btn--loading {
  display: inline-block;
  padding: 13px 10px;
  min-width: 200px;
  max-height: 40px;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  text-align: center;
  background: #000;
}
.upload__btn--loading span {
  padding-left: 24px;
  background: url(/assets/img/ico_loading_green.gif) 0 50% no-repeat;
  background-size: 20px 20px;
}
.upload__btn--disable {
  display: inline-block;
  padding: 14px 10px;
  min-width: 130px;
  max-height: 40px;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  text-align: center;
  background: #ccc;
}
.save-private__btn {
  padding: 7px 10px;
  min-width: 90pt;
  min-height: 40px;
  color: #333;
  font-size: 1.4rem;
  text-align: center;
  background: url(/assets/img/bg_blue.png);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.save-private__btn:before {
  content: "";
  position: absolute;
  background: #89d2e8;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.save-private__btn:hover {
  color: #666;
}
.save-private__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.save-private__btn:focus {
  color: #666;
}
.save-private__btn:focus:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.save-private__btn:active {
  color: #666;
}
.save-private__btn:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.save-private__btn span {
  display: inline-block;
  padding-left: 25px;
  background: url(/assets/img/ico_save.png) 5% 48% no-repeat;
  background-size: 17px 18px;
}
.fileset__trigger {
  position: absolute;
  height: 100%;
}
.upload__area--fileset {
  margin: 0 0 20px;
  padding: 20px;
  width: 100%;
  min-height: 380px;
  border: 1px solid #bbb;
  background: url(/assets/img/bg_ico_fileset.gif) 50% 58.5% no-repeat #e4f8fe;
  background-size: 220px 210px;
}
.flie-spec__area {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  padding: 20px 10px;
  border: 1px solid #bbb;
  background: #fff;
}
.flie-spec__area .flie-spec__item {
  margin-right: 30px;
  font-size: 1.4rem;
  color: #666;
  text-align: center;
}
.flie-spec__area .flie-spec__item:last-child {
  margin-right: 0;
}
.flie-spec__area .flie-spec__item span {
  display: inline-block;
  margin-right: 5px;
  color: #bbb;
  font-size: 1.2rem;
  font-weight: 700;
}
.license-upload__area,
.upload__area--error,
.upload__area--loading {
  margin: 0 0 20px;
  padding: 20px;
  border: 1px solid #bbb;
  width: 100%;
}
.loading__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.upload__area--loading {
  min-height: 380px;
  background: url(/assets/img/bg_ico_uploading.gif) 50% 50% no-repeat #fff;
  background-size: 90pt 153px;
}
.error__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.upload__area--error {
  min-height: 380px;
  background: url(/assets/img/bg_ico_error.gif) 50% 50% no-repeat #fff;
}
.license-upload__area {
  min-height: 340px;
  background: url(/assets/img/bg_upload_license.png) 50% 50% no-repeat #fff;
  background-size: 600px 177px;
}
.license-check__content {
  position: relative;
  width: 60%;
  max-width: 50pc;
  max-height: 700px;
  padding: 60px;
  color: #333;
  background: #eee;
  overflow: scroll;
}
@media (max-width: 640px) {
  .license-upload__area {
    display: none;
  }
  .license-check__content {
    margin-bottom: 20px;
    padding: 20px 10px;
    width: 90%;
    max-width: initial;
    height: 70%;
    overflow: scroll;
  }
}
.license-check__title {
  padding-bottom: 30px;
  font-size: 3rem;
  text-align: left;
  border-bottom: solid 1px #ccc;
}
@media (max-width: 640px) {
  .license-check__title {
    padding: 10px 0;
    font-size: 2rem;
  }
}
.license-check__list {
  margin-bottom: 30px;
}
.license-check__list .license-check__list--item {
  display: flex;
  justify-content: space-between;
  padding: 14px 10px;
  font-size: 1.6rem;
  border-bottom: solid 1px #ccc;
  text-align: left;
  word-break: break-all;
}
.license-check__list .license-check__data-item {
  min-width: 200px;
}
.license-check__list .ok__text {
  padding-left: 20px;
  color: #5bbedd;
  background: url(/assets/img/ico_check_grey.png) 0 50% no-repeat;
  background-size: 14px 10px;
}
.license-check__list .ng__text {
  padding-left: 20px;
  color: #999;
  background: url(/assets/img/ico_close.png) 0 50% no-repeat;
  background-size: 9pt 9pt;
}
.invitation__navi .invitation__navi--item a,
.license-more__btn {
  padding-left: 20px;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
}
.license-more__btn {
  display: inline-block;
  font-size: 1.6rem;
  color: #333;
  text-align: right;
  background-size: 6px 10px;
}
.license-more__btn:hover {
  color: #5bbedd !important;
  background: url(/assets/img/arrow_s_blue.png) 2% 50% no-repeat;
  background-size: 6px 10px;
  transition: all 0.5s ease;
}
.license-dl__btn {
  margin: 30px auto 0;
  padding: 14px 10px;
  width: 100%;
  max-height: 60px;
  text-align: center;
  background: url(/assets/img/bg_blue.png);
  color: #333;
  font-size: 1.8rem;
  display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.license-dl__btn:active,
.license-dl__btn:focus,
.license-dl__btn:hover {
  color: #666;
}
@media (max-width: 640px) {
  .license-dl__btn {
    min-width: initial;
    max-height: initial;
    width: 100%;
  }
}
.license-dl__btn:before {
  content: "";
  position: absolute;
  background: #89d2e8;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.license-dl__btn:active:before,
.license-dl__btn:focus:before,
.license-dl__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.license-setting-save__btn,
.period__modal--btn {
  cursor: pointer;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.license-setting__area {
  margin: 30px auto 60px;
  padding: 60px;
  width: 90%;
  background: url(/assets/img/bg_gray.png);
}
@media (max-width: 640px) {
  .license-setting__area {
    margin: 0 4% 30px;
    padding: 30px;
    width: 92%;
  }
}
.setting-section__title {
  margin-bottom: 20px;
  color: #fff;
  font-weight: 600;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  font-size: 2.4rem;
}
.setting__title {
  margin-bottom: 5px;
  max-width: 260px;
  color: #fff;
  font-weight: 600;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  font-size: 1.6rem;
  text-align: left;
}
.setting-section__title + p {
  color: #fff;
}
@media (max-width: 640px) {
  .setting__title {
    width: 100%;
    max-width: initial;
    font-size: 1.8rem;
  }
}
.setting__title:before {
  content: "■";
  display: inline-block;
  margin-right: 5px;
  color: #fff;
}
.license-setting__caution {
  margin: 10px 0 30px;
  padding: 20px;
  width: 100%;
  border: 1px solid tomato;
  color: #fff;
  background: tomato;
  font-size: 1.4rem;
  text-align: center;
  font-weight: 700;
}
.license-setting__secondary {
  /* margin: 10px 0 30px; */
  padding: 20px;
  width: 100%;
  border: 1px solid #eee;
  color: #000;
  background: #eee;
  font-size: 1.4rem;
  text-align: center;
}
.license-setting__caution a {
  color: #999;
}
.license-setting__caution a:hover {
  color: #ddd;
  transition: all 0.5s ease;
}
.license-sell__list {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: solid 1px #666;
}
.license-sell__list .license-sell__list--item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.license-sell__list .license-sell__list--contents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 80%;
  max-width: 700px;
}
.license-sell__list--inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.license-sell__list--inner p {
  color: #fff;
}
.license-sell__list--inner h3 {
  color: #fff;
}
.license-sell__list--inner label {
  color: #fff;
}
.license-sell__price {
  color: #fff;
  font-size: 1.4rem;
}
.license-sell__price span {
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
}
.period__modal--btn {
  padding: 3px 1pc;
  background: #fff;
  text-align: center;
  color: #000;
  border: 1px solid #666;
  font-size: 1.6rem;
  display: block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.period__modal--btn:active,
.period__modal--btn:focus,
.period__modal--btn:hover {
  background: #333;
  color: #fff;
}
@media (max-width: 640px) {
  .license-sell__list .license-sell__list--contents {
    width: 100%;
    max-width: initial;
  }
  .license-sell__price {
    width: 100%;
  }
  .period__modal--btn {
    margin: 10px 0;
    padding: 6px 1pc;
    width: 100%;
    min-height: initial;
  }
}
.license-sell__caution {
  margin: 0 0 0 20%;
  padding: 20px;
  width: 100%;
  max-width: 700px;
  border: 1px solid #666;
}
.license-number__input,
.license-setting-creator__input,
.license-setting__input {
  padding: 10px;
  min-height: 30px;
  background: #fff;
  color: #000;
  border: 1px solid #666;
}
@media (max-width: 640px) {
  .license-sell__caution {
    margin-left: 0;
    width: 100%;
  }
}
.license-sell__caution p {
  font-size: 1.4rem;
}
.license-sell__caution p span {
  color: #000;
  font-size: 1.8rem;
}
.license-sell__caution a {
  color: #000;
}
.license-sell__caution a:hover {
  color: #999;
  transition: all 0.5s ease;
}
.error__btn--wrap .yes__btn,
.license-setting-save__btn {
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: color;
}
.license-setting__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.license-setting__list .license-setting__list--item {
  margin-bottom: 5pc;
  width: 420px;
}
@media (max-width: 640px) {
  .license-setting__list .license-setting__list--item {
    margin-bottom: 40px;
    width: 100%;
  }
}
.license-setting__list--inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.license-setting__description {
  width: 290px;
}
.license-setting__text {
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #fff;
}
@media (max-width: 640px) {
  .license-setting__description {
    width: 100%;
  }
  .license-setting__text {
    margin-bottom: 20px;
  }
}
.license-setting__text--caution {
  color: tomato;
}
.license__input--wrap {
  margin: 10px 0;
}
.license-setting__input {
  display: block !important;
  margin-right: 20px;
  width: 60%;
  max-width: 420px;
  color: #000;
  font-size: 1.6rem;
}
@media (max-width: 640px) {
  .license-setting__input {
    margin-right: 0;
    width: 100%;
    max-width: initial;
  }
}
.license-setting__input::placeholder {
  color: #999;
}
.license-number__input {
  display: block !important;
  margin-right: 20px;
  width: 40%;
  max-width: 420px;
  color: #000;
  font-size: 1.6rem;
}
@media (max-width: 640px) {
  .license-number__input {
    margin: 10px 0;
    width: 100%;
    max-width: initial;
  }
}
.license-number__input::placeholder {
  color: #999;
}
.license-setting-creator__input {
  display: block !important;
  margin-bottom: 10px;
  width: 100%;
  max-width: 420px;
  color: #ddd;
  font-size: 1.6rem;
}
.license-setting-creator__input::placeholder {
  color: #999;
}
.license__radio--wrap {
  padding-top: 3px;
}
@media (max-width: 640px) {
  .license-setting-creator__input {
    min-width: initial;
    max-width: initial;
    width: 100%;
  }
  .license__radio--wrap {
    margin-bottom: 10px;
    padding-top: 0;
    width: 100%;
  }
}
.license-setting__other {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60px;
}
.license-setting__textarea {
  padding: 10px;
  min-width: 580px;
  max-width: 580px;
  min-height: 140px;
  background: #fff;
  border: 1px solid #666;
  color: #000;
  font-size: 1.6rem;
}
.license-setting__textarea::placeholder{
  color: #999;
}
.error__btn--wrap .no__btn,
.error__btn--wrap .yes__btn,
.license-setting-save__btn {
  font-size: 1.8rem;
  box-shadow: 0 0 1px transparent;
}
@media (max-width: 640px) {
  .license-setting__textarea {
    min-width: initial;
    max-width: initial;
    width: 100%;
  }
}
.license-setting-save__wrap {
  width: 100%;
  text-align: center;
}
.license-setting-save__btn {
  padding: 7px 10px;
  min-width: 200px;
  min-height: 60px;
  color: #333;
  font-weight: 700;
  text-align: center;
  background: url(/assets/img/bg_blue.png);
  display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.license-setting-save__btn:active,
.license-setting-save__btn:focus,
.license-setting-save__btn:hover {
  color: #666;
}
.license-setting-save__btn:before {
  content: "";
  position: absolute;
  background: #89d2e8;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.license-setting-save__btn:active:before,
.license-setting-save__btn:focus:before,
.license-setting-save__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.license-setting-save__btn span {
  display: inline-block;
  padding-left: 25px;
  background: url(/assets/img/ico_save.png) 5% 48% no-repeat;
  background-size: 17px 18px;
}
.similarsearch__error--area {
  margin: 20px 0;
  padding: 60px 20px;
  width: 100%;
  min-height: 200px;
  background: url(/assets/img/bg_red.png);
}
.error__caution--text {
  margin-bottom: 30px;
  width: 100%;
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
}
.error__btn--wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.error__btn--wrap .no__btn,
.error__btn--wrap .yes__btn {
  min-height: 60px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  vertical-align: middle;
  cursor: pointer;
  padding: 7px 10px;
  font-family: Saira, sans-serif;
}
.error__btn--wrap .yes__btn {
  min-width: 260px;
  color: #a22323;
  background: #fff;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.error__btn--wrap .no__btn,
.license-correct__area .correct__btn,
.send-message-modal_content .send-message__foot .cancel__btn {
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 640px) {
  .error__btn--wrap .yes__btn {
    width: 100%;
    min-width: initial;
  }
}
.error__btn--wrap .yes__btn:before {
  content: "";
  position: absolute;
  background: #a22323;
  border: 1px solid #fff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.error__btn--wrap .yes__btn:hover {
  color: #fff;
}
.error__btn--wrap .yes__btn:active,
.error__btn--wrap .yes__btn:focus {
  color: #666;
}
.error__btn--wrap .yes__btn:active:before,
.error__btn--wrap .yes__btn:focus:before,
.error__btn--wrap .yes__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.error__btn--wrap .no__btn {
  margin-right: 20px;
  min-width: 260px;
  color: #999;
  background: #ddd;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.error__btn--wrap .no__btn:active,
.error__btn--wrap .no__btn:focus,
.error__btn--wrap .no__btn:hover {
  color: #666;
}
@media (max-width: 640px) {
  .error__btn--wrap .no__btn {
    margin-right: 0;
    margin-bottom: 20px;
    width: 100%;
    min-width: initial;
  }
}
.error__btn--wrap .no__btn:before {
  content: "";
  position: absolute;
  background: #fff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.error__btn--wrap .no__btn:active:before,
.error__btn--wrap .no__btn:focus:before,
.error__btn--wrap .no__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.error-logo__title {
  margin: 0 auto 60px;
  max-width: 380px;
}
.error-logo__title img {
  width: 100%;
}
.error-input__text {
  display: block !important;
  margin: 0 auto 30px;
  padding: 10px;
  min-width: 35pc;
  background: #fff;
}
@media (max-width: 640px) {
  .error-input__text {
    width: 100%;
    min-width: initial;
  }
}
.error-input__text::placeholder {
  color: #999;
}
.license-error__area {
  margin: 20px 0;
  padding: 60px 20px;
  width: 100%;
  min-height: 200px;
  background: url(/assets/img/bg_red.png);
}
.license-correct__area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  width: 100%;
  min-height: 200px;
}
.license-correct__area .left-item {
  margin-right: 30px;
  width: 50%;
}
.license-correct__area .correct__title {
  margin-bottom: 20px;
  padding-top: 70px;
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  background: url(/assets/img/ico_notification.png) 50% 0 no-repeat;
  background-size: 4pc 46px;
}
.license-correct__area .correct__btn {
  cursor: pointer;
  padding: 14px 10px;
  width: 100%;
  max-width: 380px;
  max-height: 60px;
  text-align: center;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  font-size: 1.8rem;
  font-family: Saira, sans-serif;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px transparent;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  position: relative;
}
.license-correct__area .correct__btn:active,
.license-correct__area .correct__btn:focus,
.license-correct__area .correct__btn:hover {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}
@media (max-width: 640px) {
  .license-correct__area .correct__btn {
    min-width: initial;
    max-height: initial;
    width: 100%;
  }
}
.license-correct__area .correct__btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #89d2e8;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.license-correct__area .correct__btn:active:before,
.license-correct__area .correct__btn:focus:before,
.license-correct__area .correct__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.license-correct__area .right-item {
  max-width: 274px;
  text-align: center;
}
.license-correct__area .right-item .thumbnail {
  max-width: 274px;
  max-height: 140px;
  overflow: hidden;
  border: 1px solid #333;
}
@media (max-width: 1200px) {
  .license-correct__area .right-item .thumbnail {
    width: 100%;
    max-width: initial;
  }
}
@media (max-width: 900px) {
  .license-correct__area .right-item .thumbnail {
    width: 100%;
    max-width: initial;
  }
}
.license-correct__area .right-item .thumbnail img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.send-message-free-modal_overlay,
.send-message-modal_overlay {
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.5s, transform 0 0.5s;
  overflow: auto;
  position: fixed;
}
@media (max-width: 640px) {
  .license-correct__area .right-item .thumbnail {
    width: 100%;
    max-width: initial;
    max-height: 75pt;
  }
  .license-correct__area .right-item .thumbnail img {
    width: 100%;
    height: auto;
  }
}
.license-correct__area .right-item .thumbnail img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.license-correct__area .right-item img {
  width: 100%;
}
.send-message-modal_wrap input {
  display: none;
}
.send-message-modal_overlay {
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0);
}
.send-message-modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.send-message-modal_content {
  position: relative;
  align-self: center;
  padding: 30px 30px 15px;
  width: 70%;
  max-width: 600px;
  max-height: 80vh;
  text-align: left;
  color: #333;
  font-size: 1.4rem;
  background: #eee;
  box-sizing: border-box;
  transition: 0.5s;
  overflow-y: auto;
}
.send-message-modal_content .send-message__title {
  margin-bottom: 10px;
  font-size: 2.4rem;
  border-bottom: solid 1px #bbb;
}
@media (max-width: 640px) {
  .send-message-modal_content {
    max-width: initial;
    max-height: initial;
    width: 95%;
  }
  .send-message-modal_content .send-message__title {
    font-size: 2rem;
  }
}
.send-message-modal_content .send-message__sub-title {
  font-size: 2rem;
}
.send-message-modal_content .send-message__subject {
  display: block;
  margin-bottom: 30px;
  padding: 10px;
  width: 100%;
  border: 1px solid #bbb;
  background: #fff;
}
.send-message-modal_content .send-message__subject::placeholder {
  color: #999;
}
.send-message-modal_content .send-message__text {
  margin-bottom: 30px;
  padding: 10px;
  max-width: 540px;
  min-width: 540px;
  border: 1px solid #bbb;
  background: #fff;
}
@media (max-width: 640px) {
  .send-message-modal_content .send-message__text {
    max-width: initial;
    min-width: initial;
    width: 100%;
  }
}
.send-message-modal_content .send-message__text::placeholder {
  color: #999;
}
.send-message-modal_content .send-message__foot {
  display: flex;
  justify-content: center;
}
.send-message-modal_content .send-message__foot .cancel__btn,
.send-message-modal_content .send-message__foot .send__btn {
  padding: 8px 10px;
  min-width: 130px;
  display: inline-block;
  -webkit-transition-property: color;
  text-align: center;
  position: relative;
  font-size: 1.4rem;
}
.send-message-modal_content .send-message__foot .cancel__btn {
  margin-right: 10px;
  max-height: 40px;
  background: 0;
  color: #333;
  font-weight: 700;
  border: 1px solid #bbb;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  backface-visibility: hidden;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.send-message-modal_content .send-message__foot .cancel__btn:active,
.send-message-modal_content .send-message__foot .cancel__btn:focus,
.send-message-modal_content .send-message__foot .cancel__btn:hover {
  color: #666;
}
.send-message-modal_content .send-message__foot .cancel__btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.send-message-modal_content .send-message__foot .cancel__btn:active:before,
.send-message-modal_content .send-message__foot .cancel__btn:focus:before,
.send-message-modal_content .send-message__foot .cancel__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.send-message-free-modal_content .send-message-free__foot .cancel__btn,
.send-message-modal_content .send-message__foot .send__btn {
  -webkit-transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -moz-osx-font-smoothing: grayscale;
  max-height: 40px;
  font-weight: 700;
  vertical-align: middle;
}
.send-message-modal_content .send-message__foot .send__btn {
  cursor: pointer;
  color: #333;
  background: #fff;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.send-message-modal_content .send-message__foot .send__btn:active,
.send-message-modal_content .send-message__foot .send__btn:focus,
.send-message-modal_content .send-message__foot .send__btn:hover {
  color: #666;
}
@media (max-width: 640px) {
  .send-message-modal_content .send-message__foot {
    flex-wrap: wrap;
  }
  .send-message-modal_content .send-message__foot .cancel__btn {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
    max-width: initial;
  }
  .send-message-modal_content .send-message__foot .send__btn {
    width: 100%;
    max-width: initial;
  }
}
.send-message-modal_content .send-message__foot .send__btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cbf46a;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.send-message-modal_content .send-message__foot .send__btn:active:before,
.send-message-modal_content .send-message__foot .send__btn:focus:before,
.send-message-modal_content .send-message__foot .send__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.send-message-modal_wrap input:checked ~ .send-message-modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.send-message__close {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 7px 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #bbb;
  z-index: 3;
}
@media (max-width: 640px) {
  .send-message__close {
    top: 5px;
    right: 5px;
    padding: 5px;
    width: 24px;
    height: 24px;
  }
  .send-message__close img {
    width: 95%;
  }
}
.offer-price-modal__content,
.send-message-free-modal_content {
  align-self: center;
  padding: 30px 30px 15px;
  overflow-y: auto;
  box-sizing: border-box;
}
.send-message-free-modal_wrap input {
  display: none;
}
.send-message-free-modal_overlay {
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0);
}
.send-message-free-modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.send-message-free-modal_content {
  position: relative;
  width: 70%;
  max-width: 600px;
  max-height: 80vh;
  text-align: left;
  color: #333;
  font-size: 1.4rem;
  background: #eee;
  transition: 0.5s;
}
@media (max-width: 640px) {
  .send-message-free-modal_content {
    max-width: initial;
    max-height: initial;
    width: 95%;
  }
}
.send-message-free-modal_content .for-free-plan__message {
  position: absolute;
  top: 50px;
  left: 30px;
  display: flex;
  align-items: center;
  padding: 30px;
  width: 92%;
  height: 83%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 4;
}
.send-message-free-modal_content .for-free-plan__message p {
  color: #ddd;
  font-size: 1.8rem;
  text-align: center;
}
@media (max-width: 640px) {
  .send-message-free-modal_content .for-free-plan__message {
    width: 85%;
    height: 85%;
  }
  .send-message-free-modal_content .for-free-plan__message p {
    font-size: 1.6rem;
  }
}
.send-message-free-modal_content .send-message-free__title {
  margin-bottom: 10px;
  font-size: 2.4rem;
  border-bottom: solid 1px #bbb;
}
.send-message-free-modal_content .send-message-free__sub-title {
  font-size: 2rem;
}
.send-message-free-modal_content .send-message-free__subject {
  display: block;
  margin-bottom: 30px;
  padding: 10px;
  width: 100%;
  border: 1px solid #bbb;
  background: #fff;
}
.send-message-free-modal_content .send-message-free__subject::placeholder {
  color: #999;
}
.send-message-free-modal_content .send-message-free__text {
  margin-bottom: 30px;
  padding: 10px;
  max-width: 540px;
  min-width: 540px;
  border: 1px solid #bbb;
  background: #fff;
}
.send-message-free-modal_content .send-message-free__text::placeholder {
  color: #999;
}
.send-message-free-modal_content .send-message-free__foot {
  display: flex;
  justify-content: center;
}
@media (max-width: 640px) {
  .send-message-free-modal_content .send-message-free__title {
    font-size: 2rem;
  }
  .send-message-free-modal_content .send-message-free__text {
    max-width: initial;
    min-width: initial;
    width: 100%;
  }
  .send-message-free-modal_content .send-message-free__foot {
    flex-wrap: wrap;
  }
}
.send-message-free-modal_content .send-message-free__foot .cancel__btn {
  margin-right: 10px;
  padding: 8px 10px;
  min-width: 130px;
  background: 0;
  color: #333;
  font-size: 1.4rem;
  text-align: center;
  border: 1px solid #bbb;
  display: inline-block;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.send-message-free-modal_content .send-message-free__foot .cancel__btn:active,
.send-message-free-modal_content .send-message-free__foot .cancel__btn:focus,
.send-message-free-modal_content .send-message-free__foot .cancel__btn:hover {
  color: #666;
}
.send-message-free-modal_content .send-message-free__foot .cancel__btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.send-message-free-modal_content
.send-message-free__foot
.cancel__btn:active:before,
.send-message-free-modal_content
.send-message-free__foot
.cancel__btn:focus:before,
.send-message-free-modal_content
.send-message-free__foot
.cancel__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.offer-price-modal__content .offer-price__foot .cancel__btn,
.send-message-free-modal_content .send-message-free__foot .send__btn {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  position: relative;
  -webkit-transition-property: color;
  font-size: 1.4rem;
  box-shadow: 0 0 1px transparent;
  -moz-osx-font-smoothing: grayscale;
}
.send-message-free-modal_content .send-message-free__foot .send__btn {
  cursor: pointer;
  padding: 8px 10px;
  min-width: 130px;
  max-height: 40px;
  color: #333;
  font-weight: 700;
  text-align: center;
  background: #fff;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.send-message-free-modal_content .send-message-free__foot .send__btn:active,
.send-message-free-modal_content .send-message-free__foot .send__btn:focus,
.send-message-free-modal_content .send-message-free__foot .send__btn:hover {
  color: #666;
}
@media (max-width: 640px) {
  .send-message-free-modal_content .send-message-free__foot .cancel__btn {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
    max-width: initial;
  }
  .send-message-free-modal_content .send-message-free__foot .send__btn {
    width: 100%;
    max-width: initial;
  }
}
.send-message-free-modal_content .send-message-free__foot .send__btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cbf46a;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.send-message-free-modal_content
.send-message-free__foot
.send__btn:active:before,
.send-message-free-modal_content
.send-message-free__foot
.send__btn:focus:before,
.send-message-free-modal_content
.send-message-free__foot
.send__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.send-message-free-modal_wrap input:checked ~ .send-message-free-modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.send-message-free__close {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 7px 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #bbb;
  z-index: 3;
}
@media (max-width: 640px) {
  .send-message-free__close {
    top: 5px;
    right: 5px;
    padding: 5px;
    width: 24px;
    height: 24px;
  }
  .send-message-free__close img {
    width: 95%;
  }
}
.offer-price-modal_wrap input {
  display: none;
}
.offer-price-modal__overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0 0.5s;
  transform: scale(0);
}
.offer-price-modal__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.offer-price-modal__content {
  position: relative;
  width: 70%;
  max-width: 600px;
  max-height: 80vh;
  text-align: left;
  color: #333;
  font-size: 1.4rem;
  background: #eee;
  transition: 0.5s;
}
.offer-price-modal__content .offer-price__title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 2.4rem;
  border-bottom: solid 1px #bbb;
}
@media (max-width: 640px) {
  .offer-price-modal__content {
    max-width: initial;
    width: 95%;
  }
  .offer-price-modal__content .offer-price__title {
    font-size: 2rem;
  }
}
.offer-price-modal__content .offer-price__sub-title {
  margin-bottom: 10px;
  font-size: 2rem;
}
.offer-price-modal__content .offer-price__input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.offer-price-modal__content .offer-price__input p {
  margin-right: 10px;
  font-size: 2rem;
}
.offer-price-modal__content .offer-price__price {
  display: block;
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
}
.offer-price-modal__content .offer-price__price::placeholder {
  color: #999;
}
.offer-price-modal__content .offer-price__text {
  margin-bottom: 30px;
  padding: 10px;
  max-width: 540px;
  min-width: 540px;
  border: 1px solid #bbb;
  background: #fff;
}
@media (max-width: 640px) {
  .offer-price-modal__content .offer-price__text {
    max-width: initial;
    min-width: initial;
    width: 100%;
  }
}
.offer-price-modal__content .offer-price__text::placeholder {
  color: #ccc;
}
.offer-price-modal__content .offer-price__foot {
  display: flex;
  justify-content: center;
}
.offer-price-modal__content .offer-price__foot .cancel__btn,
.offer-price-modal__content .offer-price__foot .make-offer__btn {
  padding: 8px 10px;
  min-width: 130px;
  max-height: 40px;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.offer-price-modal__content .offer-price__foot .cancel__btn {
  margin-right: 10px;
  background: 0;
  color: #333;
  border: 1px solid #bbb;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.offer-price-modal__content .offer-price__foot .cancel__btn:active,
.offer-price-modal__content .offer-price__foot .cancel__btn:focus,
.offer-price-modal__content .offer-price__foot .cancel__btn:hover {
  color: #666;
}
.offer-price-modal__content .offer-price__foot .cancel__btn:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ccc;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.common__btn:before,
.deletion__inner--item .deletion__inner--btn:before,
.modal-window .cansel__btn:before,
.modal-window .set__btn:before,
.offer-price-modal__content .offer-price__foot .cancel__btn:before,
.offer-price-modal__content .offer-price__foot .make-offer__btn:before {
  content: "";
  z-index: -1;
  bottom: 0;
  -webkit-transition-timing-function: ease-out;
}
.offer-price-modal__content .offer-price__foot .cancel__btn:active:before,
.offer-price-modal__content .offer-price__foot .cancel__btn:focus:before,
.offer-price-modal__content .offer-price__foot .cancel__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.offer-price-modal__content .offer-price__foot .make-offer__btn {
  cursor: pointer;
  color: #333;
  font-size: 1.4rem;
  background: #fff;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.offer-price-modal__content .offer-price__foot .make-offer__btn:active,
.offer-price-modal__content .offer-price__foot .make-offer__btn:focus,
.offer-price-modal__content .offer-price__foot .make-offer__btn:hover {
  color: #666;
}
@media (max-width: 640px) {
  .offer-price-modal__content .offer-price__foot {
    flex-wrap: wrap;
  }
  .offer-price-modal__content .offer-price__foot .cancel__btn {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
    max-width: initial;
  }
  .offer-price-modal__content .offer-price__foot .make-offer__btn {
    width: 100%;
    max-width: initial;
  }
}
.offer-price-modal__content .offer-price__foot .make-offer__btn:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #cbf46a;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.offer-price-modal__content .offer-price__foot .make-offer__btn:active:before,
.offer-price-modal__content .offer-price__foot .make-offer__btn:focus:before,
.offer-price-modal__content .offer-price__foot .make-offer__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.offer-price-modal__wrap input:checked ~ .offer-price-modal__overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.modal-window .cansel__btn,
.modal-window .set__btn {
  font-weight: 700;
  -webkit-transition-property: color;
  vertical-align: middle;
}
.offer-price__close {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 7px 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #bbb;
  z-index: 3;
}
@media (max-width: 640px) {
  .offer-price__close {
    top: 5px;
    right: 5px;
    padding: 5px;
    width: 24px;
    height: 24px;
  }
  .offer-price__close img {
    width: 95%;
  }
}
.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 40px;
  width: 700px;
  min-height: 25pc;
  background-color: #fff;
  z-index: 9999;
  transform: translate(-50%, -50%);
  color: #000;
}
@media (max-width: 640px) {
  .modal-window {
    padding: 20px;
    width: 90%;
    height: 80%;
    overflow: scroll;
  }
}
.modal-window .title {
  margin-bottom: 30px;
  padding-bottom: 10px;
  font-size: 2.6rem;
  color: #000 !important;
  border-bottom: solid 1px #bbb;
}
.modal-window .title__sub {
  margin-bottom: 10px;
  font-size: 2rem;
}
@media (max-width: 640px) {
  .modal-window .title {
    padding-bottom: 0;
    font-size: 2rem;
  }
  .modal-window .title__sub {
    font-size: 1.8rem;
  }
}
.modal-window .btn__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.modal-window .cansel__btn {
  margin-right: 10px;
  padding: 10px;
  min-width: 180px;
  background: 0;
  color: #000;
  font-size: 1.4rem;
  text-align: center;
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
  border: 1px solid #bbb;
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.modal-window .cansel__btn:active,
.modal-window .cansel__btn:focus,
.modal-window .cansel__btn:hover {
  color: #666;
}
@media (max-width: 640px) {
  .modal-window .cansel__btn {
    margin-bottom: 10px;
    width: 100%;
    min-width: initial;
  }
}
.modal-window .cansel__btn:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ccc;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.modal-window .cansel__btn:focus:before,
.modal-window .cansel__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.common__btn,
.modal-window .set__btn {
  cursor: pointer;
  color: #fff;
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
.modal-window .cansel__btn:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.modal-window .set__btn {
  padding: 10px 1pc;
  min-width: 180px;
  background: #fff;
  font-size: 1.6rem;
  display: block;
  color: #000;
  border: 1px solid #bbb;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.modal-window .set__btn:active,
.modal-window .set__btn:focus,
.modal-window .set__btn:hover {
  color: #fff;
}
@media (max-width: 640px) {
  .modal-window .set__btn {
    padding: 6px 1pc;
    width: 100%;
    min-height: initial;
  }
}
.modal-window .set__btn:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #000;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.modal-window .set__btn:active:before,
.modal-window .set__btn:focus:before,
.modal-window .set__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 2000;
}
.period-close--btn {
  position: fixed;
  cursor: pointer;
  top: 20px;
  right: 20px;
  padding: 7px 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #bbb;
}
@media (max-width: 640px) {
  .period-close--btn {
    top: 10px;
    right: 10px;
    padding: 5px;
    width: 24px;
    height: 24px;
  }
  .period-close--btn img {
    width: 90%;
  }
}
.date__pickup,
.use-period__textarea {
  padding: 10px;
  border: 1px solid #bbb;
  background: #fff;
}
.date__pickup {
  margin-bottom: 30px;
  width: 100%;
}
.date__pickup::placeholder {
  color: #999;
}
.use-period__text {
  margin-bottom: 20px;
  color: #000 !important;
  font-size: 1.4rem;
}
.use-period__textarea {
  width: 50%;
}
.use-radio__btn + label {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  padding: 0 0 0 25px;
  cursor: pointer;
  color: #666;
  font-size: 1.6rem;
}
.use-radio__btn + label:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 10px;
  transform: translateY(-50%);
}
.use-radio__btn[type="radio"]:checked + label:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  background: #000;
  border-radius: 100%;
}
.common__text-box--wrap {
  display: flex;
  align-items: center;
  margin: 10px auto 30px;
  width: 730px;
}
@media (max-width: 640px) {
  .common__text-box--wrap {
    flex-wrap: wrap;
    width: 100%;
  }
}
.common__text-box--wrap .title {
  margin-right: 10px;
  width: 16%;
  min-width: 190px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .common__text-box--wrap .title {
    margin-right: 0;
    margin-bottom: 5px;
    width: 100%;
    min-width: initial;
  }
}
.common__text-box--wrap .text {
  min-width: 520px;
}
@media (max-width: 640px) {
  .common__text-box--wrap .text {
    width: 100%;
    min-width: initial;
  }
}
.common__text-box--wrap a:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 10px;
  background: url(/assets/img/arrow_s_gray.png) 0 50% no-repeat;
  background-size: 6px 10px;
}
.common__text-box,
.common__text-box--s {
  padding: 8px 20px;
  border: 1px solid #000;
  color: #000;
  background: #fff;
  min-height: 40px;
}
.common__text-box--wrap a:hover {
  color: #ddd;
  transition: all 0.5s ease;
}
.common__text-box {
  min-width: 520px;
  color: #000;
}
.common__text-box::placeholder {
  color: #999;
  font-size: 1.4rem;
}
@media (max-width: 640px) {
  .common__text-box {
    width: 100%;
    padding: 5px 10px;
    min-width: initial;
  }
}
.common__text-box--s {
  min-width: 250px;
  color: #000;
}
.common__text-box--s::placeholder {
  color: #999;
  font-size: 1.4rem;
}
@media (max-width: 640px) {
  .common__text-box--s {
    width: 100%;
    padding: 5px 10px;
    min-width: initial;
  }
}
.common__btn {
  padding: 14px 20px;
  min-width: 380px;
  max-height: 60px;
  background: #000;
  color: fff;
  font-size: 1.8rem;
  border: 1px solid #000;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.common__btn:active,
.common__btn:focus,
.common__btn:hover {
  color: #000;
  border: 1px solid #ccc;
  background: #fff;
}
.account-deletion__btn,
.deletion__inner--item .deletion__inner--btn {
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
  sans-serif;
}
@media (max-width: 640px) {
  .common__btn {
    min-width: initial;
    max-height: initial;
    width: 95%;
  }
}
.deletion__inner--item .deletion__inner--btn,
.edit__btn {
  cursor: pointer;
  -webkit-transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  font-weight: 700;
}
.common-btn__area {
  padding: 10px 0 0;
  width: 100%;
  text-align: center;
}
.edit__pen {
  display: inline-block;
  margin: 0 10px;
  padding-top: 5px;
  height: 20px;
}
.deletion__wrap {
  display: flex;
  align-items: center;
  margin: 10px auto 30px;
  width: 700px;
}
@media (max-width: 640px) {
  .deletion__wrap {
    flex-wrap: wrap;
    width: 100%;
  }
}
.deletion__wrap .title {
  margin-right: 10px;
  width: 20%;
  min-width: 200px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.deletion__wrap .text {
  min-width: 520px;
}
@media (max-width: 640px) {
  .deletion__wrap .title {
    margin-right: 0;
    margin-bottom: 5px;
    width: 100%;
  }
  .deletion__wrap .text {
    width: 100%;
    min-width: initial;
  }
}
.deletion__inner--item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.deletion__inner--item .deletion__inner--btn {
  margin-left: 20px;
  padding: 7px 10px;
  min-width: 140px;
  min-height: 40px;
  background: url(/assets/img/bg_blue.png);
  color: #333;
  font-size: 1.4rem;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.account-deletion__btn,
.deletion__inner--item .deletion__inner--btn:active,
.deletion__inner--item .deletion__inner--btn:focus,
.deletion__inner--item .deletion__inner--btn:hover {
  color: #666;
}
.deletion__inner--item .deletion__inner--btn:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #89d2e8;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.deletion__inner--item .deletion__inner--btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
@media (max-width: 640px) {
  .deletion__inner--item .deletion__inner--btn {
    margin-left: 0;
    padding: 5px;
    width: 30%;
    min-width: initial;
    min-height: initial;
  }
  .deletion__inner--item .deletion__inner--btn:hover:before {
    background: 0;
  }
}
.deletion__inner--item .deletion__inner--btn:active:before,
.deletion__inner--item .deletion__inner--btn:focus:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.deletion-btn__area {
  margin-top: 60px;
  padding: 30px 0 0;
  width: 100%;
  text-align: center;
  border-top: solid 1px #666;
}
.account-deletion__btn {
  cursor: pointer;
  padding: 14px 10px;
  min-width: 380px;
  min-height: 60px;
  font-size: 1.8rem;
  border: 1px solid #666;
}
.account-deletion__btn:hover {
  color: #999;
  border: 1px solid #999;
  background: rgba(0, 0, 0, 0.7);
  transition: all 0.5s ease;
}
.account-deletion__btn span {
  display: inline-block;
  padding-left: 30px;
  background: url(/assets/img/ico_trash.png) 0 50% no-repeat;
}
.credit__text-box,
.name__text-box {
  border: 0;
  background: #fff;
  min-height: 40px;
}
.credit-card__list {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
.credit-card__list .credit-card__list--item {
  margin-right: 20px;
}
@media (max-width: 640px) {
  .account-deletion__btn {
    min-width: initial;
    width: 80%;
  }
  .credit-card__list .credit-card__list--item {
    margin-right: 10px;
  }
}
.credit-card__list .credit-card__list--item img {
  width: auto;
  height: 40px;
}
.credit-card__list .credit-card__list--item:last-child {
  margin-right: 0;
}
.credit__wrap {
  display: flex;
  margin: 0 auto 30px;
  width: 45pc;
}
@media (max-width: 640px) {
  .credit__wrap {
    flex-wrap: wrap;
    width: 100%;
  }
}
.credit__wrap .title {
  width: 26%;
  margin-right: 10px;
}
.credit__text-box {
  padding: 8px 20px;
  min-width: 520px;
  border: 1px solid #000;
  color: #000;
}
@media (max-width: 640px) {
  .credit__wrap .title {
    width: 100%;
  }
  .credit__text-box {
    margin-right: 0;
    padding: 5px 10px;
    width: 100%;
    min-width: initial;
  }
}
.credit__text-box::placeholder {
  color: #999;
  font-size: 1.4rem;
}
.name__text-box {
  padding: 8px 20px;
  min-width: 250px;
  color: #000;
}
.name__text-box::placeholder {
  color: #999;
  font-size: 1.4rem;
}
.mypage__title--area {
  top: 60px;
  z-index: 4;
  border-top: solid 1px #222;
  background: url(/assets/img/bg_gray.png);
}
@media (max-width: 640px) {
  .name__text-box {
    width: 46%;
    padding: 5px 10px;
    min-width: initial;
  }
  .mypage__title--area {
    position: static;
  }
}
.mypage__title--area .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 20px 10px;
  max-width: 1200px;
  width: 100%;
}
.mypage__title--area .mypage__title {
  color: #fff;
  font-weight: 500;
  font-size: 3rem;
}
@media (max-width: 640px) {
  .mypage__title--area .inner {
    flex-wrap: wrap;
    max-width: initial;
  }
  .mypage__title--area .mypage__title {
    margin-bottom: 20px;
    width: 100%;
    font-size: 2.6rem;
    text-align: center;
    line-height: 1;
  }
}
.mypage__title--area .mypage__title span {
  display: inline-block;
  margin-left: 20px;
  font-size: 2rem;
}
.mypage__title--area .btn-area__wrap {
  display: flex;
  align-items: center;
}
@media (max-width: 640px) {
  .mypage__title--area .mypage__title span {
    margin-left: 0;
    font-size: 1.6rem;
  }
  .mypage__title--area .btn-area__wrap {
    justify-content: center;
    margin: 0 auto;
    width: 100%;
  }
}
.publish__btn {
  cursor: pointer;
  padding: 7px 10px;
  min-width: 90pt;
  min-height: 40px;
  color: #666;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  background: #333;
  border: 1px solid #666;
}
@media (max-width: 640px) {
  .publish__btn {
    margin: 0 auto;
    width: 90px;
    min-width: initial;
    font-size: 1.2rem;
  }
}
.edit__btn,
.save__btn {
  min-width: 90pt;
  color: #333;
  text-align: center;
  vertical-align: middle;
  min-height: 40px;
}
.publish__btn:hover {
  color: #333;
  background: #fff;
  transition: all 0.5s ease;
}
.publish__tooltip--wrap {
  position: relative;
  cursor: pointer;
}
.publish__tooltip--blowing {
  display: none;
  position: absolute;
  padding: 5px;
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.4;
  border-radius: 5px;
  background: #000;
  z-index: 5;
}
.publish__tooltip--wrap:hover .publish__tooltip--blowing {
  display: inline-block;
  top: 45px;
  right: 0;
  opacity: 0.8;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .publish__tooltip--wrap:hover .publish__tooltip--blowing {
    display: none;
  }
  .edit__btn {
    margin: 0 auto;
    width: 90px;
    min-width: initial;
  }
}
.edit__btn {
  padding: 11px 10px 5px 10px;
  font-size: 1.4rem;
  background: #fff;
  color: #000;
  line-height: 1.2;
  border: 1px solid #ccc;
  display: inline-block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  position: relative;
}
.edit__btn:active,
.edit__btn:focus,
.edit__btn:hover {
  background: #eee;
  color: #000;
}
.edit__tooltip--wrap,
.save__btn {
  position: relative;
  cursor: pointer;
}
.edit__btn span {
  display: inline-block;
  padding-left: 26px;
  background: url(/assets/img/ico_edit.png) 5% 48% no-repeat;
  background-size: 18px 18px;
}
.edit__tooltip--blowing {
  display: none;
  position: absolute;
  padding: 5px;
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.4;
  border-radius: 5px;
  background: #000;
  z-index: 5;
}
.edit__tooltip--wrap:hover .edit__tooltip--blowing {
  display: inline-block;
  top: 45px;
  right: 0;
  opacity: 0.8;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .edit__tooltip--wrap:hover .edit__tooltip--blowing {
    display: none;
  }
  .save__btn {
    margin: 0 auto;
    width: 90px;
    min-width: initial;
  }
}
.save__btn {
  padding: 10px 10px;
  font-size: 1.4rem;
  font-weight: 700;
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  display: inline-block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.save__btn:active,
.save__btn:focus,
.save__btn:hover {
  background: #eee;
  color: #000;
}
.save__btn span {
  display: inline-block;
  padding-left: 25px;
  background: url(/assets/img/ico_save.png) 5% 48% no-repeat;
  background-size: 17px 18px;
}
.save__tooltip--wrap {
  position: relative;
  cursor: pointer;
}
.save__tooltip--blowing {
  display: none;
  position: absolute;
  padding: 5px;
  min-width: 170px;
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.4;
  text-align: center;
  border-radius: 5px;
  background: #000;
  z-index: 5;
}
.save__tooltip--wrap:hover .save__tooltip--blowing {
  display: inline-block;
  top: 45px;
  right: 0;
  opacity: 0.8;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .save__tooltip--wrap:hover .save__tooltip--blowing {
    display: none;
  }
  .cancel__btn {
    margin-left: 5px;
  }
}
.cancel__btn {
  cursor: pointer;
  margin-right: 10px;
  padding: 6px 10px;
  min-width: 90pt;
  min-height: 40px;
  background: #333;
  color: #aaa;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  font-family: Saira, sans-serif;
  border: 1px solid #666;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  transition-duration: 0.3s;
}
.cancel__btn:active,
.cancel__btn:focus,
.cancel__btn:hover {
  color: #666;
}
.cancel__tooltip--wrap--blowing,
.delete__tooltip--blowing {
  line-height: 1.4;
  font-size: 1.2rem;
  z-index: 5;
  text-align: center;
}
.cancel__btn:active:before,
.cancel__btn:focus:before,
.cancel__btn:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.cancel__tooltip--wrap {
  position: relative;
  cursor: pointer;
}
.cancel__tooltip--wrap--blowing {
  display: none;
  position: absolute;
  padding: 5px;
  color: #ddd;
  border-radius: 5px;
  background: #000;
}
.cancel__tooltip--wrap:hover .cancel__tooltip--wrap--blowing {
  display: inline-block;
  top: 45px;
  left: 0;
  opacity: 0.8;
  transition: all 0.5s ease;
}
.assets__delete--btn {
  cursor: pointer;
  margin-right: 10px;
  padding: 5px 10px;
  min-width: 40px;
  min-height: 40px;
  color: #999;
  text-align: center;
  font-family: Saira, sans-serif;
  border: 1px solid #666;
  background: url(/assets/img/ico_trash.png) 50% 50% no-repeat #333;
  background-size: 10px 15px;
}
@media (max-width: 640px) {
  .cancel__tooltip--wrap:hover .cancel__tooltip--wrap--blowing {
    display: none;
  }
  .assets__delete--btn {
    width: 100%;
  }
}
.assets__delete--btn:hover {
  background: url(/assets/img/ico_trash.png) 50% 50% no-repeat #666;
  background-size: 10px 15px;
  transition: all 0.5s ease;
}
.delete__tooltip--wrap {
  position: relative;
  cursor: pointer;
}
.delete__tooltip--blowing {
  display: none;
  position: absolute;
  padding: 5px;
  min-width: 90pt;
  color: #ddd;
  border-radius: 5px;
  background: #000;
}
.delete__tooltip--wrap:hover .delete__tooltip--blowing {
  display: inline-block;
  top: 45px;
  left: -30px;
  opacity: 0.8;
  transition: all 0.5s ease;
}
.participating__list {
  margin: 0 0 30px;
  padding: 0;
}
.message-box .name__margin,
.upgrade__btn {
  margin-left: 10px;
}
@media (max-width: 640px) {
  .delete__tooltip--wrap:hover .delete__tooltip--blowing {
    display: none;
  }
  .participating__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
}
.participating__list .participating__list--item {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 1.4rem;
  background: #222;
}
.participating__list .participating__list--item:last-child {
  margin-bottom: 0;
}
.participating__list .participating__list--item:hover {
  background: #333;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .participating__list .participating__list--item {
    flex-wrap: wrap;
    padding: 5px;
    width: 49%;
    max-width: initial;
  }
  .participating__list .participating__list--item:last-child {
    margin-bottom: 10px;
  }
  .participating__list .participating__list--item a {
    width: 100%;
  }
}
.participating__list .participating__list--item .creators__profile {
  display: flex;
  align-items: center;
  width: 100%;
}
.participating__list
.participating__list--item
.creators__profile
.creators__profile--thum {
  position: relative;
  padding-left: 10px;
}
.participating__list
.participating__list--item
.creators__profile
.creators__profile--thum
img {
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 640px) {
  .participating__list
  .participating__list--item
  .creators__profile
  .creators__profile--thum {
    padding-left: 15px;
  }
  .participating__list
  .participating__list--item
  .creators__profile
  .creators__profile--thum
  img {
    width: 30px;
    max-width: 30px;
    min-width: 30px;
    height: 30px;
    max-height: 30px;
    min-height: 30px;
  }
}
.participating__list .participating__list--item .creators__profile .name {
  padding: 10px;
  max-width: 330px;
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 640px) {
  .participating__list .participating__list--item .creators__profile .name {
    max-width: initial;
    width: 70%;
  }
}
.participating__list .participating__list--item .creators__profile .badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  color: #333;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.participating__list .selected {
  position: relative;
  max-width: 25pc;
  background: #454545;
}
@media (max-width: 640px) {
  .participating__list .selected {
    max-width: initial;
    width: 49%;
  }
  .participating__list .selected:after {
    display: none;
  }
}
.participating__list .selected .name {
  color: #ddd !important;
}
.participating__list .selected:after {
  position: absolute;
  top: 35%;
  right: -20px;
  content: url(/assets/img/tab_arrow.png);
  width: 20px;
  height: 20px;
}
.message-box {
  margin-bottom: 10px;
  padding: 30px;
  background: #555;
  border-radius: 10px;
}
@media (max-width: 640px) {
  .message-box {
    padding: 20px;
  }
}
.message-box .profile {
  display: flex;
  margin-bottom: 10px;
}
.message-box .name {
  font-size: 1.6rem;
}
.message-box .date {
  font-size: 1.2rem;
  color: #999;
}
.message-box .message-box__text {
  margin-bottom: 5pc;
  padding-left: 70px;
  font-size: 1.6rem;
  line-height: 1.8;
  word-break: break-all;
}
@media (max-width: 640px) {
  .message-box .message-box__text {
    padding-left: 0;
    font-size: 1.4rem;
  }
}
.message-box .message-box__thum {
  width: 60px;
  max-width: 60px;
  min-width: 60px;
  height: 60px;
  max-height: 60px;
  min-height: 60px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  object-position: 50% 50%;
}
.message-box .name__margin--reply {
  margin-right: 10px;
}
.message-box .name__reply {
  font-size: 1.6rem;
}
.message-box .date__reply {
  font-size: 1.2rem;
  color: #999;
}
.message-box .message-box__text--reply {
  padding-right: 70px;
  font-size: 1.6rem;
  line-height: 1.8;
  word-break: break-all;
}
@media (max-width: 640px) {
  .message-box .message-box__text--reply {
    padding-right: 0;
    font-size: 1.4rem;
  }
}
.message-box .profile__reply {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  text-align: right;
}
.url-embed__link {
  display: block;
}
.url-embed__link:hover {
  opacity: 0.6;
  transition: all 0.5s ease;
}
.url-embed {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
  padding: 20px;
  border: 1px solid #999;
  border-radius: 5px;
}
.url-embed .url-embed__img {
  width: 180px;
}
.url-embed .url-embed__img img {
  width: 100%;
}
.url-embed .url-embed__txt {
  width: 25pc;
  color: #ddd;
  font-size: 1.4rem;
  word-break: break-all;
}
.url-embed .url-embed__txt p {
  margin-bottom: 10px;
}
.url-embed .url-embed__btn {
  margin-left: auto;
  padding: 5px 10px;
  width: 140px;
  color: #333;
  text-align: center;
  background: #fff;
}
.free-plan {
  color: #999;
  border: 1px solid #666;
  background: #222;
}
.business-plan,
.free-plan,
.light-plan,
.pro-plan {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 10px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
}
.business-plan,
.light-plan,
.pro-plan {
  color: #333;
}
.light-plan {
  background: #5bbedd;
}
.pro-plan {
  background: #fff;
}
.business-plan {
  background: #eeb2ee;
}
.upgrade__btn {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #666;
}
@media (max-width: 640px) {
  .url-embed .url-embed__img {
    margin-bottom: 10px;
  }
  .url-embed .url-embed__btn {
    width: 100%;
  }
  .upgrade__btn {
    padding: 4px 8px;
  }
}
.upgrade__btn:hover {
  background: #aaa;
  transition: all 0.5s ease;
}
.upgrade__btn span {
  display: inline-block;
  padding-left: 14px;
  background: url(/assets/img/ico_plus_gray.png) 0 50% no-repeat;
  background-size: 10px 10px;
  color: #999;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}
.upgrade__btn span:hover {
  color: #333;
  background: url(/assets/img/ico_plus_black.png) 0 50% no-repeat;
  background-size: 10px 10px;
}
@-webkit-keyframes load3 {
0 {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
}
@keyframes load3 {
0 {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
}
.invitation__contents--wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.invitation__navi {
  max-width: 230px;
  z-index: 2;
}
@media (max-width: 640px) {
  .invitation__inner {
    margin: 0 auto;
    width: 90%;
  }
  .invitation__navi {
    position: static;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
    width: 100%;
    max-width: initial;
  }
  .invitation__navi .invitation__navi--item {
    width: 100%;
  }
}
.invitation__navi .invitation__navi--item {
  margin-bottom: 20px;
}
.invitation__navi .invitation__navi--item a {
  display: inline-block;
  color: #666;
  background-size: 6px 10px;
}
.invitation__navi .invitation__navi--item a:hover {
  transition: all 0.3s ease;
}
.invitation__navi .invitation__navi--item .active,
.invitation__navi .invitation__navi--item a:hover {
  color: #000;
  background: url(/assets/img/arrow_s_gray.png) 2% 50% no-repeat;
  background-size: 6px 10px;
}
.invitation__contents {
  max-width: 970px;
}
.invitation__title {
  margin-bottom: 30px;
  font-size: 3rem;
}
.invitation__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.5);
}
.invitation__overlay .pop-up {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 75pt 30px 30px;
  min-width: 300px;
  background: url(/assets/img/ico_error.png) 50% 10% no-repeat #ddd;
}
.invitation__overlay .pop-up__caution {
  color: #333;
  font-size: 1.6rem;
  text-align: center;
}
.invitation__overlay .btn__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.invitation__overlay .invitation__get-out--btn {
  cursor: pointer;
  margin-right: 10px;
  padding: 10px 20px;
  color: #333;
  text-align: center;
  border: 1px solid #999;
}
.invitation__overlay .invitation__get-out--btn:hover {
  color: #fff;
  background: tomato;
  border: 1px solid tomato;
  transition: all 0.5s ease;
}
.invitation__overlay .invitation__cansel--btn {
  cursor: pointer;
  padding: 10px 20px;
  text-align: center;
  background: #5bbedd;
}
.invitation__overlay .invitation__cansel--btn:hover {
  background: #89d2e8;
  transition: all 0.5s ease;
}
@media (max-width: 640px) {
  .invitation__contents {
    max-width: initial;
    width: 100%;
  }
  .invitation__overlay .invitation__get-out--btn {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }
  .invitation__overlay .invitation__cansel--btn {
    width: 100%;
  }
}
.modal-window1.active {
  display: block !important;
}
.modal-window2.active {
  display: block !important;
}
.modal-window1.active-close {
  display: none !important;
}
.modal-window2.active-close {
  display: none !important;
}