@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap');
#goog-gt-tt {
  display: none !important;
}
.goog-te-banner-frame {
  display: none !important;
}
.goog-te-menu-value:hover {
  text-decoration: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}
body {
  top: 0 !important;
}
#google_translate_element2 {
  display: none !important;
}
header,
div,
span,
applet,
object,
iframe,
input[type='file'],
h1,
h2,
h3,
h4,
h5,
h6,
p,
select,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  vertical-align: baseline;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ,
    Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 500;
}
@media screen and (max-width: 736px) {
  header,
  div,
  span,
  applet,
  object,
  iframe,
  input[type='file'],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  select,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  font,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  sub,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td {
    font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif',
      'Hiragino Kaku Gothic ProN', 'Meiryo', 'ヒラギノ角ゴ ProN W3', 'Osaka', 'MS PGothic', sans-serif !important;
  }
}
.ma20 {
  margin-top: 20px;
}
small {
  font-size: 75%;
  font-weight: bold;
  display: block;
  line-height: 1.7;
}
small.space {
  margin: 1vh 0 0 0;
}
a {
  color: #333333;
  text-decoration: none;
  outline: none;
  border: none;
}
a:hover {
  text-decoration: none;
}
a img,
img {
  border: 0;
}
blockquote,
dd,
div,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
pre,
span,
td,
th,
ul {
  margin: 0;
  padding: 0;
}
abbr,
acronym {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
th,
strong,
var {
  font-style: normal;
  font-weight: normal;
}
caption,
th {
  text-align: left;
}
code,
kbd,
pre,
samp,
tt {
  font-family: monospace;
  line-height: 100%;
}
* + html code,
kbd,
pre,
samp,
tt {
  font-size: 108%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
q:before,
q:after {
  content: '';
}
button,
fieldset,
form,
input,
label,
legend,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  outline: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}
table td {
  vertical-align: top;
}
.right {
  float: right;
}
.left {
  floar: left;
}
.mb50 {
  margin-bottom: 50px;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
.pc {
  display: inline-block;
}
@media screen and (max-width: 736px) {
  .pc {
    display: none !important;
  }
}
.sp {
  display: none !important;
}
@media screen and (max-width: 736px) {
  .sp {
    display: inline-block !important;
  }
}
body.over {
  overflow: hidden;
  position: fixed;
}
body.over ul.under-nav {
  overflow: hidden;
}
.upper-nav a.on {
  opacity: 0.5;
}
@media screen and (max-width: 736px) {
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  button {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
  }
}
@media screen and (max-width: 736px) {
  input[type='text'],
  textarea,
  input[type='button'],
  input[type='checkbox'],
  input[type='password'] {
    -webkit-appearance: none;
  }
}
input[type='text'].bo {
  border-bottom: 1px dotted #ccc;
  border-radius: none;
  font-size: 14px;
}
input[type='text'].w90 {
  width: 90%;
  margin-right: 5px;
}
body {
  margin: 0;
  color: #222;
}
img {
  max-width: 100%;
}
.red {
  color: #c00;
}
.blue {
  color: #07f;
}
p {
  color: #58595b;
  font-weight: bold;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 736px) {
  p {
    font-size: 13px;
    font-weight: normal;
  }
}
p.cap {
  letter-spacing: 0.05em;
}
p.error-message {
  color: #c00;
  margin-bottom: 1.5vh;
  font-size: 85%;
}
p.optional {
  padding: 0 20px 20px 20px;
}
input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
select,
textarea {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  border: none;
  font-weight: bold;
  color: #58595b;
}
input[type='number'],
input[type='email'] {
  font-family: 'Roboto', sans-serif !important;
}
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}
footer {
  padding: 50px 5vw;
  background: #fff;
  margin: 5vh 0 0 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  footer {
    display: block;
    text-align: center;
  }
}
footer #footer-left {
  display: flex;
}
@media screen and (max-width: 736px) {
  footer #footer-left {
    display: block;
  }
}
footer #footer-left > p {
  width: 150px;
  margin: 0 5vw 0 0;
}
@media screen and (max-width: 736px) {
  footer #footer-left > p {
    margin: 0 auto;
    width: 110px;
  }
}
footer #footer-left ul {
  width: calc(80% - 150px);
}
@media screen and (max-width: 736px) {
  footer #footer-left ul {
    width: auto;
    margin: 25px 0;
  }
}
footer #footer-left ul li {
  line-height: 2.5;
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  footer #footer-left ul li a {
    font-weight: normal;
  }
}
footer #footer-right ul {
  display: flex;
  justify-content: space-between;
}
footer #footer-right ul li {
  margin: 0;
}
footer #footer-right ul li a {
  display: block;
  width: 40px;
  margin: 0 10px;
}
footer #footer-right p {
  font-family: 'Roboto', sans-serif !important;
  font-weight: normal;
  font-size: 12px;
  text-align: right;
  margin: 2.5vh 0 0 0;
}
@media screen and (max-width: 736px) {
  footer #footer-right p {
    text-align: center;
  }
}
.report:not(:first-child) {
  margin-top: 5vh;
}
#particles-js {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: -1px;
}
html {
  scrollbar-gutter: stable;
}
.box {
  opacity: 0;
}
.slideUp {
  opacity: 1;
  animation: slideUp 0.5s ease-in-out forwards;
}
@keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
ul.top-news-list li {
  border-bottom: 1px solid #eee;
  padding-bottom: 2.5vh;
  margin-bottom: 2.5vh;
}
ul.top-news-list li dl dt {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px;
  margin: 0 0 5px 0;
  opacity: 0.7;
}
ul.top-news-list li dl dd {
  letter-spacing: 0.05em;
}
@media screen and (max-width: 736px) {
  ul.top-news-list li dl dd {
    font-weight: normal;
    font-size: 14px;
  }
}
#before-login {
  background: linear-gradient(45deg, #27aae1, #000fff);
}
@media screen and (max-width: 736px) {
  #before-login {
    min-height: inherit;
    background: linear-gradient(90deg, #27aae1, #000fff);
  }
}
#before-login .confirm {
  text-align: center;
  font-size: 14px;
  margin: 3vh 0;
}
@media screen and (max-width: 736px) {
  #before-login .confirm {
    text-align: left;
  }
}
#before-login .confirm input[type='checkbox'] {
  display: none;
}
#before-login .confirm input[type='checkbox'] + label {
  font-weight: bold;
  color: #414042;
  letter-spacing: 0.05em;
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
  cursor: pointer;
}
@media screen and (max-width: 736px) {
  #before-login .confirm input[type='checkbox'] + label {
    font-size: 13px;
    padding-left: 40px;
    display: block;
  }
}
#before-login .confirm input[type='checkbox'] + label a {
  text-decoration: underline;
  font-weight: bold;
  color: #414042;
}
#before-login .confirm input[type='checkbox'] + label:last-child {
  margin-bottom: 0;
}
#before-login .confirm input[type='checkbox'] + label:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid #666;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  -webkit-transition:
    all 0.12s,
    border-color 0.08s;
  transition:
    all 0.12s,
    border-color 0.08s;
}
@media screen and (max-width: 736px) {
  #before-login .confirm input[type='checkbox'] + label:before {
    width: 20px;
    height: 20px;
    top: 3px;
  }
}
#before-login .confirm input[type='checkbox']:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border: 2px solid #c00;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#before-login .card-area {
  display: none;
  background: #fff;
  margin: -5px 0 0 0;
  padding: 2.5vh 2.5vh 2.5vh 2.5vh;
  border-radius: 0 0 5px 5px;
}
#before-login .card-area h4 {
  font-weight: bold;
  color: #414042;
  margin: 0 0 1vh 0;
}
@media screen and (max-width: 736px) {
  #before-login .card-area h4 {
    font-size: 14px;
  }
}
#before-login .card-area input[type='text'],
#before-login .card-area input[type='password'] {
  border: 1px solid #ccc;
}
#before-login .card-area input[type='text'].robo,
#before-login .card-area input[type='password'].robo {
  font-family: 'Roboto', sans-serif !important;
  letter-spacing: 0.05em;
  color: #414042 !important;
}
#before-login .card-area ul.year-list2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#before-login .card-area ul.year-list2 li {
  width: 48%;
  position: relative;
  margin-bottom: 0 !important;
}
#before-login .card-area ul.year-list2 li:nth-child(2) {
  width: 5%;
  text-align: center;
}
#before-login .card-area ul.year-list2 li:after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 736px) {
  #before-login .card-area ul.year-list2 li:after {
    font-size: 14px;
  }
}
#before-login .card-area ul.year-list2 li:nth-child(1):after {
  content: '月';
}
#before-login .card-area ul.year-list2 li:nth-child(3):after {
  content: '年';
}
#before-login .card-area ul.year-list2 li select {
  border-radius: 5px;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-weight: bold;
  font-family: 'Roboto', sans-serif !important;
}
@media screen and (max-width: 736px) {
  #before-login .card-area ul.year-list2 li select {
    font-size: 14px;
  }
}
#before-login .card-area ul.year-list2 li ::-ms-expand {
  display: none;
}
#before-login #all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
@media screen and (max-width: 736px) {
  #before-login #all {
    display: block;
    min-height: inherit;
  }
}
#before-login #all.centre {
  justify-content: center;
}
#before-login .white-bk {
  background: rgba(255, 255, 255, 0.8);
  padding: 2.5vh 2.5vh 0;
  border-radius: 10px;
}
#before-login .white-bk:not(:last-child) {
  margin-bottom: 2.5vh;
}
#before-login .white-bk h3 {
  color: #414042;
  font-weight: bold;
  font-size: 18px;
}
#before-login .white-bk h3:before {
  content: '';
  display: inline-block;
  margin: 0 10px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0084ff;
  position: relative;
  top: -2px;
}
#before-login .price {
  margin: 0 0 5vh 0;
}
#before-login .price p {
  font-size: 20px;
}
#before-login .price p small {
  display: inline-block;
}
#before-login .price p em {
  font-weight: bold;
  color: #c00;
}
#before-login .table2 {
  width: calc(100% - 2.5vh);
  margin: 0 2.5vh 2vh 20px;
}
#before-login .table2 tr:last-child th,
#before-login .table2 tr:last-child td {
  padding-bottom: 2vh;
}
@media screen and (max-width: 736px) {
  #before-login .table2 tr:last-child th,
  #before-login .table2 tr:last-child td {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 736px) {
  #before-login .table2 tr:last-child td {
    padding-bottom: 2vh;
  }
}
#before-login .table2 th {
  padding: 1vh 0;
  font-weight: bold;
  color: #414042;
  font-size: 14px;
  width: 30%;
}
@media screen and (max-width: 736px) {
  #before-login .table2 th {
    display: block;
    width: auto;
    padding-bottom: 0;
    font-size: 13px;
    letter-spacing: 0.05em;
  }
}
#before-login .table2 td {
  font-size: 16px;
  padding: 1vh 0;
  font-weight: bold;
  color: #414042;
}
@media screen and (max-width: 736px) {
  #before-login .table2 td {
    display: block;
    width: auto;
    font-size: 14px;
    letter-spacing: 0.05em;
  }
}
#before-login .table2 td small {
  font-weight: bold;
}
#before-login .table {
  width: 100%;
}
#before-login .table.mt {
  margin-top: 20px;
}
#before-login .table th,
#before-login .table td {
  display: block;
  letter-spacing: 0.05em;
}
#before-login .table th {
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #414042;
}
@media screen and (max-width: 736px) {
  #before-login .table th {
    font-weight: normal;
  }
}
#before-login .table th span {
  color: #c00;
  font-size: 70%;
  margin: 0 0 0 1em;
  font-weight: bold;
}
#before-login .table td {
  padding-bottom: 1.5vh;
}
@media screen and (max-width: 736px) {
  #before-login .table td {
    padding-bottom: 3vh;
  }
}
#before-login .table td textarea {
  height: 200px;
}
#before-login .table td .people {
  position: relative;
}
#before-login .table td .people:after {
  content: '人';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #414042;
}
@media screen and (max-width: 736px) {
  #before-login .table td .people:after {
    font-size: 14px;
  }
}
#before-login .table td ul.two-list {
  display: flex;
  justify-content: space-between;
}
#before-login .table td ul.two-list li {
  width: 49%;
}
#before-login .table td ul.year-list {
  display: flex;
  justify-content: space-between;
}
#before-login .table td ul.year-list li {
  width: 32%;
  position: relative;
}
#before-login .table td ul.year-list li:after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #414042;
}
@media screen and (max-width: 736px) {
  #before-login .table td ul.year-list li:after {
    font-size: 14px;
  }
}
#before-login .table td ul.year-list li:nth-child(1):after {
  content: '年';
}
#before-login .table td ul.year-list li:nth-child(2):after {
  content: '月';
}
#before-login .table td ul.year-list li:nth-child(3):after {
  content: '日';
}
#before-login .table td ul.year-list li select {
  font-weight: bold;
  font-family: 'Roboto', sans-serif !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
@media screen and (max-width: 736px) {
  #before-login .table td ul.year-list li select {
    font-size: 14px;
  }
}
#before-login .table td ul.year-list li ::-ms-expand {
  display: none;
}
#before-login #text-box {
  width: 30%;
  position: fixed;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}
@media screen and (max-width: 736px) {
  #before-login #text-box {
    width: auto;
    position: static;
    transform: translateY(0);
    padding: 10% 0;
  }
}
#before-login #text-box h1 {
  margin: 0;
  text-align: center;
}
#before-login #text-box h1 img {
  width: 200px;
  margin: 0;
}
@media screen and (max-width: 736px) {
  #before-login #text-box h1 img {
    width: 150px;
  }
}
#before-login #text-box h1 span {
  color: #fff;
  margin-left: 10px;
  display: inline-block;
}
#before-login #text-box p {
  text-align: left;
  color: #fff;
}
#before-login #input-box {
  width: 60%;
  background: rgba(255, 255, 255, 0.8);
  padding: 10vh 7.5vw;
  margin: 0 0 0 40%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
@media screen and (max-width: 736px) {
  #before-login #input-box {
    width: auto;
    min-height: inherit;
    margin: 0 5% 5% 5%;
    padding: 10% 5%;
    display: block;
    border-radius: 25px;
  }
}
#before-login #input-box #step {
  margin-bottom: 5vh;
  padding-bottom: 2.5vh;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
}
#before-login #input-box #step ul {
  display: flex;
  justify-content: space-between;
  position: relative;
}
#before-login #input-box #step ul li {
  width: 33%;
  opacity: 0.5;
}
#before-login #input-box #step ul li.active {
  opacity: 1;
}
#before-login #input-box #step ul li:nth-child(2).active:after {
  content: '';
  width: 34%;
  height: 1px;
  background: #07f;
  display: block;
  position: absolute;
  left: 16%;
  top: 5px;
}
#before-login #input-box #step ul li:nth-child(3).active:after {
  content: '';
  width: 34%;
  height: 1px;
  background: #07f;
  display: block;
  position: absolute;
  left: 50%;
  top: 5px;
}
#before-login #input-box #step ul li:before {
  content: '';
  display: block;
  margin: 0 auto 10px auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #07f;
}
#before-login #input-box #step ul li p {
  text-align: center;
  font-size: 14px;
  color: #07f;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #before-login #input-box #step ul li p {
    font-size: 12px;
  }
}
#before-login #input-box #step ul li p span {
  display: block;
  font-family: 'Roboto', sans-serif !important;
  font-size: 70%;
  opacity: 0.5;
  letter-spacing: 0;
}
#before-login #input-box .flex {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 736px) {
  #before-login #input-box input[type='text'],
  #before-login #input-box input[type='password'],
  #before-login #input-box input[type='email'],
  #before-login #input-box input[type='number'] {
    font-size: 14px;
    letter-spacing: 0.05em;
  }
}
#before-login #input-box input[type='text'].zip,
#before-login #input-box input[type='password'].zip,
#before-login #input-box input[type='email'].zip,
#before-login #input-box input[type='number'].zip {
  width: 68%;
}
@media screen and (max-width: 736px) {
  #before-login #input-box input[type='text'].zip,
  #before-login #input-box input[type='password'].zip,
  #before-login #input-box input[type='email'].zip,
  #before-login #input-box input[type='number'].zip {
    width: 50%;
  }
}
#before-login #input-box input[type='text'].zip + button,
#before-login #input-box input[type='password'].zip + button,
#before-login #input-box input[type='email'].zip + button,
#before-login #input-box input[type='number'].zip + button {
  background: none;
  border: 2px solid #07f;
  color: #07f;
  width: calc(30% - 4px);
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
}
@media screen and (max-width: 736px) {
  #before-login #input-box input[type='text'].zip + button,
  #before-login #input-box input[type='password'].zip + button,
  #before-login #input-box input[type='email'].zip + button,
  #before-login #input-box input[type='number'].zip + button {
    width: calc(48% - 4px);
    font-size: 12px;
  }
}
#before-login #input-box .select-wrap {
  position: relative;
}
#before-login #input-box .select-wrap select {
  position: relative;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ,
    Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}
@media screen and (max-width: 736px) {
  #before-login #input-box .select-wrap select {
    font-size: 14px;
  }
}
#before-login #input-box .select-wrap:after {
  content: '';
  position: absolute;
  right: 15px;
  top: calc(50% - 3px);
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-top: 2px solid #414042;
  border-left: 2px solid #414042;
  pointer-events: none;
  transform: translateY(-50%) rotate(-135deg);
}
#before-login #input-box .send-finish {
  position: relative;
  height: calc(100vh - 20vh);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media screen and (max-width: 736px) {
  #before-login #input-box .send-finish {
    height: 68vh;
  }
}
#before-login #input-box .send-finish #paperplane {
  position: absolute;
  animation: plane 3s ease-in-out forwards;
  left: -200px;
  top: 100%;
}
@keyframes plane {
  0% {
    left: -200px;
    top: 110%;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    left: 100%;
    top: 0;
    opacity: 0;
  }
}
#before-login #input-box .send-finish #paperplane img {
  width: 100px;
}
#before-login #input-box form {
  width: 100%;
}
#before-login #input-box .username {
  margin-bottom: 10px;
}
#before-login #input-box .password2 {
  margin: 10px 0 0 0;
}
#before-login #input-box input.login {
  background: linear-gradient(45deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border: none;
  border-radius: 50px;
  width: 100%;
  margin: 30px auto 0 auto;
  padding: 2vh 1.5vh;
  display: block;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 736px) {
  #before-login #input-box input.login {
    font-size: 16px;
    padding: 2vh 1.5vh;
  }
}
#before-login #input-box p.forgetpassword {
  text-align: center;
  margin: 2.5vh 0 0 0;
  font-size: 13px;
}
#before-login #input-box p.forgetpassword a {
  text-decoration: underline;
  color: #07f;
  font-weight: bold;
}
#before-login #input-box p.register {
  margin: 2.5vh 0 0 0;
}
#before-login #input-box p.register a {
  color: #07f;
  text-align: center;
  padding: 2vh 1.5vh;
  display: block;
  border: 1px solid #07f;
  border-radius: 50px;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 736px) {
  #before-login #input-box p.register a {
    font-size: 16px;
    padding: 2vh 1.5vh;
  }
}
#before-login #input-box h2 {
  font-weight: bold;
  font-size: 20px;
  margin: 0 0 2.5vh 0;
  color: #414042;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 736px) {
  #before-login #input-box h2 {
    font-size: 18px;
  }
}
#before-login #input-box h2 + h3 {
  font-size: 16px;
  margin: 0 0 2.5vh 0;
  color: #414042;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 736px) {
  #before-login #input-box h2 + h3 {
    font-size: 14px;
  }
}
#before-login #input-box h2 + h3 span {
  border-bottom: 1px solid #666;
  font-weight: bold;
  padding: 0 0 1vh 0;
}
#before-login .lock {
  overflow: hidden;
}
#before-login #modal-target {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
#before-login .modal-content {
  display: none;
}
#before-login .modal-overlay {
  z-index: 9998;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: rgba(0, 0, 0, 0.5);
}
#before-login .modal-wrap {
  z-index: 9999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#before-login .modal-open:hover {
  cursor: pointer;
  color: #333;
}
#before-login .modal-close.x {
  background: #333;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  letter-spacing: 0;
}
#before-login .modal-close.x:hover {
  cursor: pointer;
  color: #fff;
}
#before-login .modal-content > div {
  width: 80%;
  max-height: 90vh;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5vh;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.1);
}
#before-login .modal-content > div::-webkit-scrollbar {
  display: none;
}
#before-login .modal-content > div.short {
  width: 50%;
  text-align: center;
  max-width: 736px;
}
#before-login .modal-content > div.short input[type='checkbox'] + label {
  margin-left: 10px;
}
#before-login .modal-content > div.short input[type='checkbox'] + label a {
  text-decoration: underline;
  color: #07f;
}
#before-login .modal-content > div.short .address-wrap .mail-address {
  margin: 2.5vh 0;
  border: 1px solid #ccc;
}
#before-login .modal-content > div.short .address-wrap .register-btn {
  background: linear-gradient(45deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border: none;
  border-radius: 50px;
  width: 100%;
  margin: 30px auto 0 auto;
  padding: 1.5vh;
  display: block;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
}
#before-login .modal-content > div.short #title2 h2 {
  font-size: 20px;
}
#before-login .modal-content > div.short .message-close {
  background: linear-gradient(45deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  border-radius: 50px;
  padding: 15px 60px;
  font-weight: bold;
  letter-spacing: 0.5em;
  border: none;
  margin: 2.5vh 0 0 0;
  font-size: 120%;
}
#before-login .modal-content > div.short .save {
  background: linear-gradient(45deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  padding: 15px 60px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  letter-spacing: 0.5em;
  font-weight: bold;
}
#before-login .modal-content > div.short p {
  margin: 5vh 0;
}
#before-login .modal-content > div.short p.qr {
  width: 200px;
  margin: 0 auto;
}
#before-login .modal-content > div.short p.edit-account span {
  background: linear-gradient(45deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  padding: 15px 60px;
  border-radius: 50px;
  cursor: pointer;
}
#before-login .modal-content > div.short p.edit a {
  background: linear-gradient(45deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  padding: 15px 60px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 18px;
}
#before-login .modal-content > div.short p.back a {
  border-bottom: 1px solid #999;
  padding-bottom: 5px;
  cursor: pointer;
}
#before-login .second {
  display: none;
}
#before-login p.closemodal {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 50px;
}
#before-login p.closemodal a:hover {
  color: #333;
}
#before-login #title2 {
  margin: 2.5vh 0 2.5vh 0;
}
#before-login #title2 h2 {
  font-size: 24px;
  font-weight: bold;
}
#before-login #table2.long th {
  width: 30%;
}
#before-login #table2 table {
  width: 100%;
}
#before-login #table2 table tr:first-child th,
#before-login #table2 table tr:first-child td {
  border: none;
}
#before-login #table2 table th,
#before-login #table2 table td {
  border-top: 1px solid #dde1e6;
  padding: 2.5vh;
}
#before-login #table2 table th.no-pb,
#before-login #table2 table td.no-pb {
  padding-bottom: 0;
}
#before-login #table2 table th input[type='text'],
#before-login #table2 table td input[type='text'] {
  background: rgba(234, 240, 247, 0.45);
}
#before-login #table2 table th textarea,
#before-login #table2 table td textarea {
  width: 100%;
  border: none;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(234, 240, 247, 0.45);
  height: 200px;
}
#before-login #table2 table th textarea.short,
#before-login #table2 table td textarea.short {
  height: 100px;
}
#before-login #table2 table th ul.calendar,
#before-login #table2 table td ul.calendar {
  display: flex;
  align-items: center;
}
#before-login #table2 table th ul.calendar li:nth-child(1),
#before-login #table2 table td ul.calendar li:nth-child(1) {
  width: 45%;
}
#before-login #table2 table th ul.calendar li:nth-child(2),
#before-login #table2 table td ul.calendar li:nth-child(2) {
  width: 10%;
  text-align: center;
}
#before-login #table2 table th ul.calendar li:nth-child(3),
#before-login #table2 table td ul.calendar li:nth-child(3) {
  width: 45%;
}
#before-login #table2 table th {
  padding-top: 4vh;
  width: 25%;
  font-weight: bold;
}
#before-login #table2 table th a.question {
  float: right;
}
#before-login #table2 table th span.must {
  float: right;
  color: #c00;
  font-size: 12px;
  border: 1px solid #c00;
  padding: 0 3px;
  font-weight: bold;
}
#before-login input[type='date']::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#before-login input[type='date']::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
#before-login input[type='date']::-webkit-clear-button {
  -webkit-appearance: none;
}
#before-login ::-webkit-input-placeholder {
  color: #aaa;
}
#before-login :-ms-input-placeholder {
  color: #aaa;
}
#before-login ::placeholder {
  color: #aaa;
}
#before-login .image-crop {
  margin: 15px 0 0 0;
}
#before-login .image-crop label {
  display: block;
  text-align: center;
  color: #07f;
  border: 2px solid #07f;
  padding: 10px 30px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  font-weight: bold;
  font-size: 14px;
}
#before-login .image-crop label span {
  font-weight: bold;
}
#before-login .image-crop label:before {
  content: '';
  display: inline-block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAASJJREFUSEvVlO1tg0AQRN/KKYR0YipJXEYkoggZKWUknYROco0kGy0HhsNw9vHxI/vTNvPGO8sIO4/srM9twLtm/PABHEdmag6ceBEXMxkHzIt3mo4DeQwyDwjFHYU8Xpz6776ADIhCesBZjwhvE6sIxTtKCBluqUYpeZXaPuwBlX63jsIfF5LP7jgGaZ8bArQRKuR28LFUKw107gN4p7a+52bnYBdUToabDPDitr7xTIebDKjU3gFz7u/epr+gmnFGCwA+fCXvLgN/cXam1xe2MeD6KBYAzKnVhEM58YAbVMcnhfi1dZMM2D1kc2aQX57QJmwbCzd0vvgfpPZ58oo2BEx1Uap8X+Nt+47b1F4qq+A1M9OmayQjz65rzjtM/X/AHy5UsRlZwe5bAAAAAElFTkSuQmCC')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 17px;
  position: relative;
  top: 3px;
  margin: 0 10px 0 0;
}
#before-login .image-crop label > input {
  display: none;
}
#before-login #preview {
  max-width: 100%;
  margin: 0 0 2vh 0;
}
#before-login canvas {
  border: 1px solid #ccc;
  cursor: crosshair;
}
#before-login ul.radio-list {
  margin: 1vh 0 0 0;
}
#before-login ul.radio-list.payment li input[type='radio'] + label::before {
  top: 22px;
  transform: translateY(0);
}
@media screen and (max-width: 736px) {
  #before-login ul.radio-list.payment li input[type='radio'] + label::before {
    top: 20px;
  }
}
#before-login ul.radio-list.payment li input[type='radio'] + label::after {
  top: 26px;
  transform: translateY(0);
}
@media screen and (max-width: 736px) {
  #before-login ul.radio-list.payment li input[type='radio'] + label::after {
    top: 24px;
  }
}
#before-login ul.radio-list li {
  position: relative;
}
@media screen and (max-width: 736px) {
  #before-login ul.radio-list li {
    margin-right: 0 !important;
  }
}
#before-login ul.radio-list li:not(:last-child) {
  margin: 0 0 1.5vh 0;
}
#before-login ul.radio-list li input[type='radio'] {
  position: absolute;
  left: 2.6vh;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
#before-login ul.radio-list li input[type='radio'] + label::before,
#before-login ul.radio-list li input[type='radio'] + label::after {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}
#before-login ul.radio-list li input[type='radio'] + label::before {
  background-color: #fff;
  border: 1px solid #07f;
  height: 20px;
  width: 20px;
  left: 20px;
}
@media screen and (max-width: 736px) {
  #before-login ul.radio-list li input[type='radio'] + label::before {
    left: 15px;
  }
}
#before-login ul.radio-list li input[type='radio'] + label::after {
  background: #07f;
  opacity: 0;
  height: 14px;
  width: 14px;
  left: 24px;
}
@media screen and (max-width: 736px) {
  #before-login ul.radio-list li input[type='radio'] + label::after {
    left: 19px;
  }
}
#before-login ul.radio-list li input[type='radio']:checked + label::after {
  opacity: 1;
}
#before-login ul.radio-list li label {
  display: block;
  padding: 2.5vh 2.5vh 2.5vh 7.5vh;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  transition: all 0.2s ease-in-out;
  color: #414042;
}
#before-login ul.radio-list li label h3 {
  font-weight: bold;
  font-size: 18px;
  color: #414042;
}
@media screen and (max-width: 736px) {
  #before-login ul.radio-list li label h3 {
    font-size: 16px;
  }
}
#before-login ul.radio-list li label h3 small {
  font-size: 80%;
  font-weight: bold;
}
#before-login ul.radio-list li label p {
  font-size: 14px;
  font-weight: bold;
}
#before-login ul.radio-list li label p span {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold;
  font-size: 18px;
}
#before-login ul.radio-list li label p small {
  font-size: 12px;
  display: inline-block;
  margin: 0 0 0 10px;
}
@media screen and (max-width: 736px) {
  #before-login ul.radio-list li label p small {
    margin: 0;
    font-size: 11px;
  }
}
#before-login ul.radio-list li input[type='radio']:checked + label {
  background: #07f;
  color: #fff;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
#before-login ul.radio-list li input[type='radio']:checked + label h3,
#before-login ul.radio-list li input[type='radio']:checked + label p {
  color: #fff;
}
#before-login ul.radio-list li .label:hover {
  background-color: #e2edf9;
}
#before-login input.glay,
#before-login select.glay {
  opacity: 0.5;
}
#before-login .back {
  text-align: center;
  margin: 2.5vh 0 0 0;
}
#before-login .back button {
  background: none;
  border: none;
  cursor: pointer;
  color: #414042;
}
@media screen and (max-width: 736px) {
  #before-login .back button {
    font-size: 13px;
  }
}
#before-login .back button:before {
  content: '<';
  display: inline-block;
  transform: scale(0.7, 1);
  margin: 0 10px 0 0;
}
#before-login .logo {
  width: 50%;
}
@media screen and (max-width: 736px) {
  #before-login .logo {
    width: auto;
  }
}
.lock {
  overflow: hidden;
}
#modal-target {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.modal-content {
  display: none;
}
.modal-overlay {
  z-index: 9998;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: rgba(0, 0, 0, 0.5);
}
.modal-wrap {
  z-index: 9999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.modal-open:hover {
  cursor: pointer;
  color: #333;
}
.modal-close.x {
  background: #333;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  letter-spacing: 0;
}
.modal-close.x:hover {
  cursor: pointer;
  color: #fff;
}
.modal-content > div {
  max-height: 90vh;
  max-width: 800px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5vh;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.1);
}
@media screen and (max-width: 736px) {
  .modal-content > div {
    padding: 20px;
    width: calc(100% - 40px);
  }
}
.modal-content > div::-webkit-scrollbar {
  display: none;
}
.modal-content > div > h2 {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 5vh;
}
.modal-content > div > h2.centre {
  text-align: center;
  margin-bottom: 0;
  margin-top: 10px;
}
@media screen and (max-width: 736px) {
  .modal-content > div > h2 {
    font-size: 16px;
  }
}
.modal-content > div .submit-area {
  text-align: center;
  margin: 2.5vh 0 0 0;
}
.modal-content > div .submit-area button {
  background: linear-gradient(90deg, #27aae1, #000fff);
  color: #fff;
  border: none;
  padding: 15px 60px;
  border-radius: 50px;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .modal-content > div .submit-area button {
    font-size: 14px;
    letter-spacing: 0.09em;
  }
}
.modal-content > div ul.radio-list {
  margin: 1vh 0 0 0;
  display: flex;
  flex-wrap: wrap;
}
.modal-content > div ul.radio-list li {
  position: relative;
  width: 49%;
}
.modal-content > div ul.radio-list li input[type='radio'] {
  position: absolute;
  left: 2.6vh;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.modal-content > div ul.radio-list li input[type='radio'] + label::before,
.modal-content > div ul.radio-list li input[type='radio'] + label::after {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}
.modal-content > div ul.radio-list li input[type='radio'] + label::before {
  background-color: #fff;
  border: 1px solid #07f;
  height: 20px;
  width: 20px;
  left: 20px;
}
@media screen and (max-width: 736px) {
  .modal-content > div ul.radio-list li input[type='radio'] + label::before {
    left: 10px;
  }
}
.modal-content > div ul.radio-list li input[type='radio'] + label::after {
  background: #07f;
  opacity: 0;
  height: 14px;
  width: 14px;
  left: 24px;
}
@media screen and (max-width: 736px) {
  .modal-content > div ul.radio-list li input[type='radio'] + label::after {
    left: 14px;
  }
}
.modal-content > div ul.radio-list li input[type='radio']:checked + label::after {
  opacity: 1;
}
.modal-content > div ul.radio-list li label {
  display: block;
  font-weight: bold;
  padding: 1.5vh 0 1.5vh 55px;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  transition: all 0.2s ease-in-out;
  color: #414042;
}
@media screen and (max-width: 736px) {
  .modal-content > div ul.radio-list li label {
    font-size: 14px;
    font-weight: normal;
    padding: 10px 0 10px 40px;
  }
}
.modal-content > div ul.radio-list li label h3 {
  font-weight: bold;
  font-size: 18px;
  color: #414042;
}
@media screen and (max-width: 736px) {
  .modal-content > div ul.radio-list li label h3 {
    font-size: 16px;
  }
}
.modal-content > div ul.radio-list li label h3 small {
  font-size: 80%;
  font-weight: bold;
}
.modal-content > div ul.radio-list li label p {
  font-size: 14px;
  font-weight: bold;
}
.modal-content > div ul.radio-list li label p span {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold;
  font-size: 18px;
}
.modal-content > div ul.radio-list li label p small {
  font-size: 12px;
  display: inline-block;
  margin: 0 0 0 10px;
}
@media screen and (max-width: 736px) {
  .modal-content > div ul.radio-list li label p small {
    margin: 0;
    font-size: 11px;
  }
}
.modal-content > div ul.radio-list li input[type='radio']:checked + label {
  background: #07f;
  color: #fff;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
.modal-content > div ul.radio-list li input[type='radio']:checked + label h3,
.modal-content > div ul.radio-list li input[type='radio']:checked + label p {
  color: #fff;
}
.modal-content > div ul.radio-list li .label:hover {
  background-color: #e2edf9;
}
.modal-content > div.short {
  width: 50%;
  text-align: center;
  max-width: 736px;
}
.modal-content > div.short input[type='checkbox'] + label {
  margin-left: 10px;
}
.modal-content > div.short input[type='checkbox'] + label a {
  text-decoration: underline;
  color: #07f;
}
.modal-content > div.short .send-finish {
  display: none;
}
.modal-content > div.short .address-wrap .mail-address {
  margin: 2.5vh 0;
  border: 1px solid #ccc;
}
.modal-content > div.short .address-wrap .register-btn {
  background: linear-gradient(90deg, #c412a2, #2138bc);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border: none;
  border-radius: 50px;
  width: 100%;
  margin: 30px auto 0 auto;
  padding: 1.5vh;
  display: block;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
}
.modal-content > div.short #title2 h2 {
  font-size: 20px;
}
.modal-content > div.short .message-close {
  background: linear-gradient(90deg, #c412a2, #2138bc);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  border-radius: 50px;
  padding: 15px 60px;
  font-weight: bold;
  letter-spacing: 0.5em;
  border: none;
  margin: 2.5vh 0 0 0;
  font-size: 120%;
}
.modal-content > div.short .save {
  background: linear-gradient(90deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  padding: 15px 60px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  letter-spacing: 0.5em;
  font-weight: bold;
}
.modal-content > div.short p {
  margin: 5vh 0;
}
.modal-content > div.short p.qr {
  width: 200px;
  margin: 0 auto;
}
.modal-content > div.short p.edit-account span {
  background: linear-gradient(90deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  padding: 15px 60px;
  border-radius: 50px;
  cursor: pointer;
}
.modal-content > div.short p.edit a {
  background: linear-gradient(90deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  padding: 15px 60px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 18px;
}
.modal-content > div.short p.back a {
  border-bottom: 1px solid #999;
  padding-bottom: 5px;
  cursor: pointer;
}
.second {
  display: none;
}
p.closemodal {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 30px;
  line-height: 1;
}
@media screen and (max-width: 736px) {
  p.closemodal {
    line-height: 0.5;
  }
}
p.closemodal a {
  cursor: pointer;
}
p.closemodal a:hover {
  color: #333;
}
#after-login {
  background: linear-gradient(45deg, #27aae1, #000fff);
  min-height: 100vh;
}
#after-login ul.radio-list-change {
  margin: 1vh 0 0 0;
}
#after-login ul.radio-list-change.payment li .card-area {
  display: none;
}
#after-login ul.radio-list-change.payment li input[type='radio'] + label::before {
  top: 22px;
  transform: translateY(0);
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change.payment li input[type='radio'] + label::before {
    top: 20px;
  }
}
#after-login ul.radio-list-change.payment li input[type='radio'] + label::after {
  top: 26px;
  transform: translateY(0);
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change.payment li input[type='radio'] + label::after {
    top: 24px;
  }
}
#after-login ul.radio-list-change li {
  position: relative;
}
#after-login ul.radio-list-change li:not(:last-child) {
  margin: 0 0 1.5vh 0;
}
#after-login ul.radio-list-change li .card-area {
  display: none;
  background: #fff;
  margin: -5px 0 0 0;
  padding: 2.5vh 2.5vh 2.5vh 2.5vh;
  border-radius: 0 0 5px 5px;
}
#after-login ul.radio-list-change li .card-area h4 {
  font-weight: bold;
  color: #414042;
  margin: 0 0 1vh 0;
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change li .card-area h4 {
    font-size: 14px;
  }
}
#after-login ul.radio-list-change li .card-area input[type='text'],
#after-login ul.radio-list-change li .card-area input[type='password'] {
  border: 1px solid #ccc;
}
#after-login ul.radio-list-change li .card-area input[type='text'].robo,
#after-login ul.radio-list-change li .card-area input[type='password'].robo {
  font-family: 'Roboto', sans-serif !important;
  letter-spacing: 0.05em;
  color: #414042 !important;
}
#after-login ul.radio-list-change li .year-list2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#after-login ul.radio-list-change li .year-list2 li {
  width: 48% !important;
  position: relative;
  margin-bottom: 0 !important;
}
#after-login ul.radio-list-change li .year-list2 li:nth-child(2) {
  width: 5% !important;
  text-align: center;
}
#after-login ul.radio-list-change li .year-list2 li:after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change li .year-list2 li:after {
    font-size: 14px;
  }
}
#after-login ul.radio-list-change li .year-list2 li:nth-child(1):after {
  content: '月';
}
#after-login ul.radio-list-change li .year-list2 li:nth-child(3):after {
  content: '年';
}
#after-login ul.radio-list-change li .year-list2 li select {
  border-radius: 5px;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-weight: bold;
  font-family: 'Roboto', sans-serif !important;
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change li .year-list2 li select {
    font-size: 14px;
  }
}
#after-login ul.radio-list-change li .year-list2 li ::-ms-expand {
  display: none;
}
#after-login ul.radio-list-change li input[type='radio'] {
  position: absolute;
  left: 2.6vh;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
#after-login ul.radio-list-change li input[type='radio'] + label::before,
#after-login ul.radio-list-change li input[type='radio'] + label::after {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}
#after-login ul.radio-list-change li input[type='radio'] + label::before {
  background-color: #fff;
  border: 1px solid #07f;
  height: 20px;
  width: 20px;
  left: 20px;
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change li input[type='radio'] + label::before {
    left: 15px;
  }
}
#after-login ul.radio-list-change li input[type='radio'] + label::after {
  background: #07f;
  opacity: 0;
  height: 14px;
  width: 14px;
  left: 24px;
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change li input[type='radio'] + label::after {
    left: 19px;
  }
}
#after-login ul.radio-list-change li input[type='radio']:checked + label::after {
  opacity: 1;
}
#after-login ul.radio-list-change li label {
  display: block;
  padding: 2.5vh 2.5vh 2.5vh 7.5vh;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  transition: all 0.2s ease-in-out;
  color: #414042;
}
#after-login ul.radio-list-change li label h3 {
  font-weight: bold;
  font-size: 18px;
  color: #414042;
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change li label h3 {
    font-size: 16px;
  }
}
#after-login ul.radio-list-change li label h3 small {
  font-size: 80%;
  font-weight: bold;
}
#after-login ul.radio-list-change li label p {
  font-size: 14px;
  font-weight: bold;
}
#after-login ul.radio-list-change li label p span {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold;
  font-size: 18px;
}
#after-login ul.radio-list-change li label p small {
  font-size: 12px;
  display: inline-block;
  margin: 0 0 0 10px;
}
@media screen and (max-width: 736px) {
  #after-login ul.radio-list-change li label p small {
    margin: 0;
    font-size: 11px;
  }
}
#after-login ul.radio-list-change li input[type='radio']:checked + label {
  background: #07f;
  color: #fff;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
#after-login ul.radio-list-change li input[type='radio']:checked + label h3,
#after-login ul.radio-list-change li input[type='radio']:checked + label p {
  color: #fff;
}
#after-login ul.radio-list-change li .label:hover {
  background-color: #e2edf9;
}
#after-login .btns {
  display: flex;
  margin: 5vh 0 0 0;
  justify-content: space-between;
}
#after-login .btns li {
  width: 48%;
}
#after-login .btns li button.keep,
#after-login .btns li button.back {
  background: #fff;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #07f;
  text-align: center;
  box-sizing: border-box;
  border: none;
  border-radius: 50px;
  width: 100%;
  margin: 0 auto;
  padding: 2vh 1.5vh;
  display: block;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 736px) {
  #after-login .btns li button.keep,
  #after-login .btns li button.back {
    font-size: 15px;
  }
}
#after-login .btns li button.confirm {
  background: linear-gradient(90deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border: none;
  border-radius: 50px;
  width: 100%;
  margin: 0 auto;
  padding: 2vh 1.5vh;
  display: block;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 736px) {
  #after-login .btns li button.confirm {
    font-size: 15px;
  }
}
#after-login header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 5vw;
}
@media screen and (max-width: 736px) {
  #after-login header {
    display: block;
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 9;
    background: #000fff;
  }
}
@media screen and (max-width: 736px) {
  #after-login header p.company-name {
    display: none;
  }
}
#after-login header a#btn {
  background: none;
  border: 1px solid #fff;
  display: none;
  margin: 0;
  position: absolute;
  right: 20px;
  top: 15px;
  padding: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 9999;
}
@media screen and (max-width: 736px) {
  #after-login header a#btn {
    display: block;
  }
}
#after-login header a#btn span {
  background: #fff;
  width: 16px;
  height: 2px;
  display: block;
  position: relative;
  top: 11px;
  left: 4px;
}
#after-login header a#btn span:before {
  content: '';
  display: block;
  position: absolute;
  top: -7px;
  background: #fff;
  width: 16px;
  height: 2px;
  transition: all 0.3s ease-in-out;
}
#after-login header a#btn span:after {
  content: '';
  display: block;
  position: absolute;
  top: 7px;
  background: #fff;
  width: 16px;
  height: 2px;
  transition: all 0.3s ease-in-out;
}
#after-login header a#btn span.change {
  height: 0;
}
#after-login header a#btn span.change:before {
  transform: rotate(-45deg);
  top: 0;
}
#after-login header a#btn span.change:after {
  transform: rotate(45deg);
  top: 0;
}
#after-login header h1 {
  width: 150px;
}
@media screen and (max-width: 736px) {
  #after-login header h1 {
    width: 110px;
  }
}
#after-login header .head-btns {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 736px) {
  #after-login header .head-btns {
    display: block;
  }
}
#after-login header .head-btns p {
  font-size: 12px;
  margin: 0 15px 0 0;
}
#after-login header .head-btns button {
  border: 1px solid #07f;
  color: #07f;
  background: url('../img/btn-logout.svg') no-repeat 20% 50%;
  background-size: 16px;
  border-radius: 50px;
  padding: 10px 20px 10px 50px;
  display: block;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
  font-weight: bold;
  cursor: pointer;
}
@media screen and (max-width: 736px) {
  #after-login header .head-btns button {
    border: 1px solid #fff;
    padding: 17px;
    border-radius: 50%;
    background: url(../img/btn-logout-w.svg) no-repeat 50% 50%;
    background-size: 16px;
    position: absolute;
    top: 15px;
    right: 73px;
  }
}
#after-login header .head-btns button:hover {
  background: #fff;
  border: 1px solid #fff;
  background: url('../img/btn-logout.sv.messageg') no-repeat 20% 50% #fff;
  background-size: 16px;
}
@media screen and (max-width: 736px) {
  #after-login header .head-btns button span {
    display: none;
  }
}
#after-login main {
  position: relative;
  min-height: calc(100vh - 162px);
  padding: 0 0 5vh 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 736px) {
  #after-login main {
    display: block;
    padding: 30px 0;
    background: rgba(255, 255, 255, 0.9);
    margin: 80px 0 0 0;
    border-radius: 15px 0 15px 0;
    min-height: initial;
  }
}
@media screen and (max-width: 736px) {
  #after-login main#sp-posi {
    padding-top: 0;
    margin-top: 77px;
  }
}
#after-login main:after {
  content: '';
  width: 75%;
  background: rgba(255, 255, 255, 0.85);
  height: calc(100% + 162px - 5vh);
  position: absolute;
  top: -165px;
  left: 25%;
  z-index: -1;
  border-radius: 0 0 0 50px;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
@media screen and (max-width: 736px) {
  #after-login main:after {
    display: none;
  }
}
#after-login main #overlay {
  width: 25%;
  padding: 0 2.5vw 0 5vw;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  #after-login main #overlay {
    width: auto;
    display: none;
    width: 100%;
    height: 110%;
    text-align: left;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 999;
    background: #000fff;
    overflow-y: scroll;
  }
}
@media screen and (max-width: 736px) {
  #after-login main #overlay .MDL_window_wrap {
    max-width: calc(100% - 15px);
    position: absolute;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    top: 20px;
    height: 75%;
    margin: 0;
    padding: 0;
  }
}
#after-login main #overlay nav li {
  line-height: 2;
}
#after-login main #overlay nav li a {
  color: #fff;
  letter-spacing: 0.05em;
  transition: all 0.2s ease-in-out;
  display: block;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login main #overlay nav li a {
    font-size: 14px;
  }
}
#after-login main #overlay nav li a:hover {
  opacity: 0.7;
}
#after-login main #overlay nav li.page a {
  background: url('../img/nav-icon-page.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 0 0 0 40px;
}
#after-login main #overlay nav li.page > a {
  pointer-events: none;
}
#after-login main #overlay nav li.page ul {
  margin-bottom: 2.5vh;
  margin-top: 1.5vh;
  max-width: 230px;
}
@media screen and (max-width: 736px) {
  #after-login main #overlay nav li.page ul {
    max-width: initial;
  }
}
#after-login main #overlay nav li.page ul li:first-child a,
#after-login main #overlay nav li.page ul li:last-child a {
  padding-right: 0;
}
#after-login main #overlay nav li.page ul li:first-child a:after,
#after-login main #overlay nav li.page ul li:last-child a:after {
  display: none;
}
#after-login main #overlay nav li.page ul li a {
  background: none;
  margin: 0 0 0 calc(40px + 1em);
  padding: 1.25vh 15px 1.25vh 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  line-height: 1.7;
  font-size: 14px;
}
#after-login main #overlay nav li.page ul li a:after {
  content: '';
  display: inline-block;
  margin: 0 0 0 1em;
  transform: scale(0.7, 1) translateY(-50%);
  position: relative;
  top: 13px;
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 50%;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAVNJREFUSEvNlYtNw0AQRGcrIakEUklIJUkqASohnQCVLHrW2Tqv1xcuIoKTTpb8mdmZnT2b7rzszvj6nwTuvpHEfpT0JeliZp+ZG90K3P0o6RTAAH81s3Mk6SII4ANoUfJcgE+RpJcAW14knc3sMlbr7k+S3iVBeqifdRG0EufuEEC06yZwdyygoVT4ljW0sm9mU1NBAcaSuGjyjKhSgEX0ZlirBO4O8Ng8PqB6LBgjOlVa9QDMba0wJQjgM08L2NHMdqAF8Fn1qYIQxQG8DBb5Jz3TQAVw5uDQnIMC9FFemiqvegE48eSKVZOFGfhCQZ1nM9tWOQdsn0wwryyGq1Yx68Fa1AIRjX4o99LItgiQTHpSP2852qMCrGAiuabpKUdBenL+6DQNKaKhbGxhsxZRbClbmwMiiV0oqVcX+LVJHiu++lPpVnBLM9e++bXj+s8IvgE9/qQZY33hjAAAAABJRU5ErkJggg==')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 736px) {
  #after-login main #overlay nav li.page ul li a:after {
    float: none;
    top: 21px;
    float: right;
  }
}
#after-login main #overlay nav li.money a {
  background: url('../img/nav-icon-money.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 10px 0 10px 40px;
}
#after-login main #overlay nav li.entried a {
  background: url('../img/nav-icon-entried.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 10px 0 10px 40px;
}
#after-login main #overlay nav li.message {
  margin: 0;
}
#after-login main #overlay nav li.message a {
  background: url('../img/nav-icon-message.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 10px 0 10px 40px;
}
#after-login main #overlay nav li.favorite a {
  background: url('../img/nav-icon-favorite.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 10px 0 10px 40px;
}
#after-login main #overlay nav li.edit-company a {
  background: url('../img/nav-icon-edit-company.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 10px 0 10px 40px;
}
#after-login main #overlay nav li.edit-account a {
  background: url('../img/nav-icon-edit-account.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 10px 0 10px 40px;
}
#after-login main #overlay nav li.plan a {
  background: url('../img/nav-icon-plan.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 10px 0 10px 40px;
}
#after-login section {
  width: 70%;
  margin: 0 5vw 7.5vh 5vw;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  #after-login section {
    width: auto;
    margin: 0;
  }
}
@media screen and (max-width: 736px) {
  #after-login section#contact {
    margin: 0 20px;
  }
}
@media screen and (max-width: 736px) {
  #after-login section#contact .table-wrap {
    width: auto;
  }
}
#after-login section#contact .select-wrap {
  width: 100%;
}
#after-login section#contact .select-wrap.short {
  width: 25%;
}
@media screen and (max-width: 736px) {
  #after-login section#contact .select-wrap.short {
    width: 100%;
  }
}
#after-login section#contact .select-wrap select {
  border: none;
  background: #fff;
  padding-right: 35px;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  #after-login section#contact .select-wrap select {
    padding-right: 0;
  }
}
#after-login section#contact h2 {
  margin-left: 0;
}
#after-login section#contact h3 {
  font-size: 110%;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login section#contact h3 {
    font-size: 95%;
  }
}
#after-login section#contact h3.sub {
  margin-bottom: 2.5vh;
}
@media screen and (max-width: 736px) {
  #after-login section#contact .title-wrap {
    margin: 0;
  }
}
#after-login section#profile h3 {
  font-weight: bold;
  font-size: 110%;
}
#after-login section#message-box.no-right {
  margin-right: 0;
}
#after-login section#message-box h2 {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  margin-bottom: 1.5vh;
}
#after-login section > .flex {
  display: flex;
  justify-content: space-between;
  margin-right: 0;
}
#after-login section > .flex #side {
  width: 40%;
  padding-right: 5vw;
}
@media screen and (max-width: 736px) {
  #after-login section > .flex #side {
    display: none;
  }
}
#after-login section > .flex #side.full {
  width: auto;
  margin-right: 0;
}
#after-login section > .flex #chat {
  width: 60%;
  padding: 2.5vw 5vw 0 5vw;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50px 0 0 0;
  margin: 0 0 5vw 0;
}
@media screen and (max-width: 736px) {
  #after-login section > .flex #chat {
    width: auto;
    box-sizing: border-box;
    background: none;
    padding: 0;
  }
}
#after-login section > .flex #chat .chat-title {
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
  padding-bottom: 2.5vh;
}
@media screen and (max-width: 736px) {
  #after-login section > .flex #chat .chat-title {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 90;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 0 15px;
  }
}
@media screen and (max-width: 736px) and (max-width: 736px) {
  #after-login section > .flex #chat .chat-title {
    position: sticky;
    top: 76px;
  }
}
#after-login section > .flex #chat .chat-title .back {
  display: none;
}
@media screen and (max-width: 736px) {
  #after-login section > .flex #chat .chat-title .back {
    width: 10%;
    display: block;
  }
}
@media screen and (max-width: 736px) {
  #after-login section > .flex #chat .chat-title .title {
    width: 90%;
  }
}
#after-login section > .flex #chat .chat-title h3 {
  font-size: 20px;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login section > .flex #chat .chat-title h3 {
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}
#after-login section > .flex #chat .chat-title h3 + p {
  font-size: 14px;
}
#after-login section > .flex #chat .chat-title h3 + p.project-name {
  margin: 5px 0 0 0;
}
@media screen and (max-width: 736px) {
  #after-login section > .flex #chat .chat-title h3 + p.project-name {
    font-size: 12px;
    margin: 0;
  }
}
#after-login section > .flex #chat .chat-title h3 + p.project-name small {
  display: inline-block;
  margin: 0 0 0 5px;
}
#after-login section #alert {
  background: #ffec59;
  text-align: center;
  margin: 0 0 5vh 0;
  padding: 10px 0;
  position: relative;
  border-radius: 5px;
}
@media screen and (max-width: 736px) {
  #after-login section #alert {
    margin: 0 20px 20px 20px;
  }
}
#after-login section #alert i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  line-height: 0;
}
#after-login section #alert p a {
  font-weight: bold;
  font-size: 14px;
  text-decoration: underline;
}
#after-login section #pager {
  display: flex;
  justify-content: center;
  margin: 5vh auto 0 auto;
}
@media screen and (max-width: 736px) {
  #after-login section #pager {
    justify-content: space-between;
    align-items: center;
  }
}
#after-login section #pager a {
  transition: all 0.2s ease-in-out;
}
#after-login section #pager a:hover {
  opacity: 0.5;
}
#after-login section #pager a,
#after-login section #pager span {
  font-family: 'Roboto', sans-serif !important;
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  margin: 0 5px;
  font-size: 14px;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login section #pager a,
  #after-login section #pager span {
    font-size: 14px;
  }
}
#after-login section #pager a.prev,
#after-login section #pager span.prev {
  margin: 0 15px 0 0;
}
@media screen and (max-width: 736px) {
  #after-login section #pager a.prev,
  #after-login section #pager span.prev {
    margin: 0 30px 0 0;
    background: linear-gradient(45deg, #27aae1, #000fff);
    border-radius: 0 10px 10px 0;
    padding: 5px;
    color: #fff;
  }
}
#after-login section #pager a.next,
#after-login section #pager span.next {
  margin: 0 0 0 15px;
}
@media screen and (max-width: 736px) {
  #after-login section #pager a.next,
  #after-login section #pager span.next {
    margin: 0 0 0 30px;
    background: linear-gradient(45deg, #27aae1, #000fff);
    border-radius: 10px 0 0 10px;
    padding: 5px;
    color: #fff;
  }
}
#after-login section #pager span {
  background: linear-gradient(90deg, #27aae1, #000fff);
  border-radius: 50%;
  color: #fff;
}
@media screen and (max-width: 736px) {
  #after-login section #pager span {
    color: #999;
    background: #fff;
  }
}
#after-login section .search {
  display: flex;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  margin: 0 0 2.5vh 0;
  position: sticky;
  top: 0;
  z-index: 9;
  background: linear-gradient(90deg, #dbe2fe, #daddff);
}
@media screen and (max-width: 736px) {
  #after-login section .search {
    background: #e6e9ff;
    top: 76px;
  }
}
#after-login section .search.two li {
  width: 50%;
}
#after-login section .search li {
  width: 33.3%;
  text-align: center;
  padding: 1vh 0 1.25vh 0;
  opacity: 0.7;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: relative;
  top: 2px;
}
@media screen and (max-width: 736px) {
  #after-login section .search li {
    padding: 10px 0;
  }
}
#after-login section .search li a {
  font-weight: bold;
  display: block;
}
@media screen and (max-width: 736px) {
  #after-login section .search li {
    font-size: 12px;
    padding: 10px 0 10px 0;
  }
}
#after-login section .search li.is-active {
  border-bottom: 2px solid #07f;
  color: #07f;
  opacity: 1;
}
#after-login section .search li.is-active a {
  color: #07f;
}
#after-login section .amount {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 736px) {
  #after-login section .amount {
    margin: 0 20px;
  }
}
#after-login section .amount p {
  font-size: 13px;
}
#after-login section .amount p span {
  margin: 0 5px;
  font-weight: bold;
  font-size: 120%;
}
#after-login section .amount .select-sort {
  display: flex;
  justify-content: flex-end;
  width: 80%;
}
@media screen and (max-width: 736px) {
  #after-login section .amount .select-sort {
    width: 50%;
  }
}
#after-login section .amount .select-sort .select-wrap {
  margin-left: 2.5vh;
}
#after-login section .amount input {
  width: 30%;
}
@media screen and (max-width: 736px) {
  #after-login section .amount input {
    width: 100%;
    margin: 10px 0 0 0;
  }
}
@media screen and (max-width: 736px) {
  #after-login section article {
    margin: 0;
  }
}
@media screen and (max-width: 736px) {
  #after-login section article.fav {
    margin: 0 20px;
  }
}
#after-login section article ul.user-list {
  display: flex;
  flex-wrap: wrap;
  margin: 2.5vh 0 0 0;
  justify-content: space-between;
}
#after-login section article ul.user-list:after {
  display: block;
  content: '';
  width: 32%;
}
@media screen and (max-width: 1600px) {
  #after-login section article ul.user-list:after {
    width: 49%;
  }
}
@media screen and (max-width: 736px) {
  #after-login section article ul.user-list {
    display: block;
  }
}
#after-login section article ul.user-list > li {
  width: 32%;
  background: #fff;
  padding: 2.5vh;
  position: relative;
  border-radius: 20px;
  box-sizing: border-box;
  margin-bottom: 2.5vh;
}
@media screen and (max-width: 1600px) {
  #after-login section article ul.user-list > li {
    width: 49%;
  }
}
@media screen and (max-width: 736px) {
  #after-login section article ul.user-list > li {
    padding: 20px 20px 30px 20px;
    margin-bottom: 30px;
    border-radius: 10px;
    width: auto;
    background: #fff;
    box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  }
}
#after-login section article ul.user-list > li ul.date {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 1.5vh 0 0 0;
}
@media screen and (max-width: 736px) {
  #after-login section article ul.user-list > li ul.date {
    margin: 10px 0 0 0;
  }
}
#after-login section article ul.user-list > li ul.date li {
  color: #6d6e71;
  font-size: 12px;
}
@media screen and (max-width: 736px) {
  #after-login section article ul.user-list > li ul.date li {
    font-weight: normal;
    text-align: right;
    font-size: 10px;
  }
}
#after-login section article ul.user-list > li ul.date li:last-child {
  margin-left: 10px;
}
#after-login section article ul.user-list > li p.message {
  margin: 2.5vh 0 0 0;
}
#after-login section article ul.user-list > li p.message a {
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  background: linear-gradient(90deg, #27aae1, #000fff);
  display: block;
  color: #fff;
  padding: 15px;
  border-radius: 50px;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
}
@media screen and (max-width: 736px) {
  #after-login section article ul.user-list > li p.message a {
    font-size: 14px;
  }
}
#after-login section article ul.user-list > li p.message a:before {
  content: '';
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAN1JREFUSEvtldENgzAMRO82aTdpN2knoUzSUcomZRNXRiQCQ6wEgvhpfiIUyy++ww5x8OLB+ZEEiMgNQANA95LVAWhJ6u4CvgAuJZknsR3JuwsoTWwrJjmoU9WDEfIZElvAePjeIEsP4Bk0FxFJAZRcamhQsid51Q8PMCPnemAT/gEL5c6SKJoe+8DeZIfJ+jcuR0UtgL1Y9Qo8wKLRQrtndHkcbh5gbTxrd+rIfjiezEZFEjA9CH6Y4BfJNtf8ELc6TQ0gWX4OzAO4peckT74HItJskWMNWvXBOQXwA5BMpBmu6IKJAAAAAElFTkSuQmCC')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 0 10px 0 0;
  position: relative;
  top: 3px;
}
#after-login section article ul.user-list > li > i {
  position: absolute;
  background: #c50606;
  font-family: 'Roboto', sans-serif !important;
  color: #fff;
  left: -10px;
  top: 2.5vh;
  padding: 5px 25px;
  letter-spacing: 0.075em;
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  #after-login section article ul.user-list > li > i {
    font-size: 12px;
  }
}
#after-login section article ul.user-list > li > i:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #7c0b21 transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
}
#after-login section article ul .contents {
  margin: 2vh 0 0 0;
}
#after-login section article ul .contents a {
  display: block;
  transition: all 0.3s ease-in-out;
}
#after-login section article ul .contents a:hover {
  opacity: 0.7;
}
#after-login section article ul .contents a h2 {
  font-weight: bold;
  font-size: 22px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a h2 {
    font-size: 18px;
    letter-spacing: 0.09em;
  }
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a p {
    font-weight: normal;
  }
}
#after-login section article ul .contents a ul.tag {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5vh 0 1vh 0;
}
#after-login section article ul .contents a ul.tag li {
  border-radius: 50px;
  background: #fff;
  border: 1px solid #999;
  padding: 3px 12px;
  font-size: 14px;
  margin: 0 10px 10px 0;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a ul.tag li {
    font-size: 12px;
    margin: 0 5px 5px 0;
    border: 1px solid #999;
  }
}
#after-login section article ul .contents a .personal {
  background: rgba(0, 132, 255, 0.1);
  padding: 1.25vh;
  border-radius: 10px;
  margin: 1.5vh 0 0 0;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a .personal {
    padding: 20px 10px;
  }
}
#after-login section article ul .contents a .personal.nobk {
  background: none;
  padding: 0;
}
#after-login section article ul .contents a .personal.nobk ul.skill > li dl dd ul li {
  border: 1px solid #999;
}
#after-login section article ul .contents a .personal .pic-name {
  display: flex;
  align-items: center;
}
#after-login section article ul .contents a .personal .pic-name .pic {
  overflow: hidden;
  border-radius: 50%;
  line-height: 0;
}
#after-login section article ul .contents a .personal .pic-name .pic img {
  width: 70px;
  height: 70px;
  object-fit: cover;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a .personal .pic-name .pic img {
    width: 60px;
    height: 60px;
  }
}
#after-login section article ul .contents a .personal .pic-name .name {
  margin: 0 0 0 15px;
}
#after-login section article ul .contents a .personal .pic-name .name h3 {
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a .personal .pic-name .name h3 {
    font-size: 14px;
  }
}
#after-login section article ul .contents a .personal .pic-name .name h3 small {
  display: inline-block;
  margin: 0 0 0 5px;
}
#after-login section article ul .contents a .personal .pic-name .name p {
  margin: 5px 0 0 0;
  font-size: 13px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAX9JREFUSEu1VdFtgzAQfW4ZhIzgDch/kLpBg0qlbpFki0olCt2gEvkPG3iEsEdDXdkIFNtnm3zgP8T53r27d88MCx+2cH5EAcTHS4rb7RVgGYAMEh2AFkx2SJJv/vmjvr0nCCDKzQ5ge+9tBcZkzavzwRfjBRBlftEVzzstr5o1FUoCiPd8C4nTvNxjlNxTTByAoef91UiuWvGEA/9qav2/7zP8YQeGdIob2lXw6tze33UB7L5LdPzYrGw2Gui3vxggcFm4AG/5CQzbKSFDoSqn2iXKTQYwNavxOLOgAK5GVcnzyidFp50EW6JFuTSqDQCoOFGa8bxqjJwUgCVPubYHNxZAqG1Wi8wZPDJkiZofmyKmIntw0PbAZK2sQV9WMiX3xGVLL9pjW+xVkPpBA1DLFl1relYBL4oYnbnqpE14GWj5DSyUH8UMz2t0QYAJxLGDu9I9CguqaJ7nQCuL8ij7fvRF8zAJtuUhBtPWjk+nZKm9TCGBzWIQVWggYHGAfwHJwhkwPK5rAAAAAElFTkSuQmCC')
    no-repeat;
  background-size: 18px;
  padding-left: 25px;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a .personal .pic-name .name p {
    font-size: 11px;
    padding-left: 20px;
  }
}
#after-login section article ul .contents a .personal ul.skill {
  margin: 15px 0 0;
}
#after-login section article ul .contents a .personal ul.skill > li dl {
  display: flex;
  align-items: baseline;
}
#after-login section article ul .contents a .personal ul.skill > li dl dt {
  font-size: 14px;
  font-weight: bold;
  min-width: 50px;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a .personal ul.skill > li dl dt {
    font-size: 12px;
    min-width: 70px;
  }
}
#after-login section article ul .contents a .personal ul.skill > li dl dd ul {
  display: flex;
  flex-wrap: wrap;
}
#after-login section article ul .contents a .personal ul.skill > li dl dd ul li {
  background: rgba(255, 255, 255, 0.8);
  padding: 3px 6px;
  border-radius: 3px;
  margin: 0 0 10px 10px;
  font-size: 14px;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login section article ul .contents a .personal ul.skill > li dl dd ul li {
    font-size: 12px;
    margin: 0 0 5px 5px;
  }
}
#after-login section > h2 {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 0 0 2.5vh 0;
  color: #414042;
}
@media screen and (max-width: 736px) {
  #after-login section > h2 {
    font-size: 18px;
    margin: 0 0 20px 20px;
  }
}
#after-login section .select-wrap {
  position: relative;
  width: 20%;
}
#after-login section .select-wrap.full {
  width: 100%;
  margin-bottom: 1.5vh;
}
@media screen and (max-width: 736px) {
  #after-login section .select-wrap.full {
    width: calc(100% - 40px);
    margin: 0 auto 10px auto;
  }
}
#after-login section .select-wrap.full select {
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  #after-login section .select-wrap {
    width: 100%;
  }
}
#after-login section .select-wrap select {
  position: relative;
  background: none;
  border-radius: 5px;
  border: 1px solid #999;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ,
    Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}
@media screen and (max-width: 736px) {
  #after-login section .select-wrap select {
    font-size: 14px;
  }
}
#after-login section .select-wrap:after {
  content: '';
  position: absolute;
  right: 15px;
  top: calc(50% - 3px);
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-top: 2px solid #414042;
  border-left: 2px solid #414042;
  pointer-events: none;
  transform: translateY(-50%) rotate(-135deg);
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap2 {
    padding: 0 20px;
    width: auto !important;
    white-space: inherit !important;
    overflow: inherit !important;
  }
}
#after-login section .table-wrap,
#after-login section .table-wrap2 {
  margin: 2.5vh 0 0 0;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap,
  #after-login section .table-wrap2 {
    overflow: auto;
    white-space: nowrap;
    width: calc(100vw - 65px);
  }
}
#after-login section .table-wrap table,
#after-login section .table-wrap2 table {
  width: 100%;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table tbody tr,
  #after-login section .table-wrap2 table.project-table tbody tr {
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #999;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table tbody tr:last-child,
  #after-login section .table-wrap2 table.project-table tbody tr:last-child {
    border-bottom: none;
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table tbody td,
  #after-login section .table-wrap2 table.project-table tbody td {
    display: block;
    padding: 10px 0;
    border: none;
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table tbody td:before,
  #after-login section .table-wrap2 table.project-table tbody td:before {
    content: '';
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
    font-weight: normal;
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table tbody td:nth-child(1):before,
  #after-login section .table-wrap2 table.project-table tbody td:nth-child(1):before {
    content: 'プロジェクト名';
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table tbody td:nth-child(2):before,
  #after-login section .table-wrap2 table.project-table tbody td:nth-child(2):before {
    content: 'ステータス';
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table tbody td:nth-child(3):before,
  #after-login section .table-wrap2 table.project-table tbody td:nth-child(3):before {
    content: '掲載期間';
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.project-table thead,
  #after-login section .table-wrap2 table.project-table thead {
    display: none;
  }
}
#after-login section .table-wrap table.normal tbody tr.hide,
#after-login section .table-wrap2 table.normal tbody tr.hide {
  display: none;
}
#after-login section .table-wrap table.normal tbody th,
#after-login section .table-wrap2 table.normal tbody th {
  padding: 2.5vh 0 1.25vh 0;
}
#after-login section .table-wrap table.normal tbody td,
#after-login section .table-wrap2 table.normal tbody td {
  padding: 0 0 2.5vh 0;
}
#after-login section .table-wrap table.normal tbody td input[type='text'],
#after-login section .table-wrap2 table.normal tbody td input[type='text'] {
  display: block;
}
#after-login section .table-wrap table.normal tbody td input[type='text']:nth-child(n + 1),
#after-login section .table-wrap2 table.normal tbody td input[type='text']:nth-child(n + 1) {
  margin-top: 10px;
}
#after-login section .table-wrap table.normal tbody td input[type='date'],
#after-login section .table-wrap2 table.normal tbody td input[type='date'] {
  width: 100%;
  border: none;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 5px;
  position: relative;
  font-family: 'Roboto', sans-serif !important;
}
#after-login section .table-wrap table.normal tbody td input[type='date']::-webkit-calendar-picker-indicator,
#after-login section .table-wrap2 table.normal tbody td input[type='date']::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
}
#after-login section .table-wrap table.normal tbody td input[type='date']::-webkit-inner-spin-button,
#after-login section .table-wrap2 table.normal tbody td input[type='date']::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
#after-login section .table-wrap table.normal tbody td input[type='date']::-webkit-clear-button,
#after-login section .table-wrap2 table.normal tbody td input[type='date']::-webkit-clear-button {
  -webkit-appearance: none;
}
#after-login section .table-wrap table.normal tbody td input[type='date']::-webkit-calendar-picker-indicator,
#after-login section .table-wrap2 table.normal tbody td input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0;
}
#after-login section .table-wrap table.normal tbody td .selected ul li,
#after-login section .table-wrap2 table.normal tbody td .selected ul li {
  width: auto;
}
#after-login section .table-wrap table.normal tbody td ul.two-list.expire,
#after-login section .table-wrap2 table.normal tbody td ul.two-list.expire {
  align-items: flex-end;
}
#after-login section .table-wrap table.normal tbody td ul.two-list.expire li,
#after-login section .table-wrap2 table.normal tbody td ul.two-list.expire li {
  width: 46%;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table.normal tbody td ul.two-list.expire li,
  #after-login section .table-wrap2 table.normal tbody td ul.two-list.expire li {
    margin-right: 0 !important;
  }
}
#after-login section .table-wrap table.normal tbody td ul.two-list.expire li:nth-child(2),
#after-login section .table-wrap2 table.normal tbody td ul.two-list.expire li:nth-child(2) {
  width: 4%;
  text-align: center;
}
#after-login section .table-wrap table.normal tbody td ul.two-list.expire li h3,
#after-login section .table-wrap2 table.normal tbody td ul.two-list.expire li h3 {
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 5px 0;
}
#after-login section .table-wrap table.normal tbody td .select-wrap,
#after-login section .table-wrap2 table.normal tbody td .select-wrap {
  width: auto;
}
#after-login section .table-wrap table.normal tbody td .select-wrap select,
#after-login section .table-wrap2 table.normal tbody td .select-wrap select {
  background: #fff;
  border: none;
  width: 100%;
}
#after-login section .table-wrap table thead,
#after-login section .table-wrap2 table thead {
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  color: #414042;
  opacity: 0.7;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table thead tr th:first-child,
  #after-login section .table-wrap2 table thead tr th:first-child {
    padding-left: 0;
  }
}
#after-login section .table-wrap table thead th,
#after-login section .table-wrap2 table thead th {
  font-weight: bold;
  padding: 0 1.25vh 1.25vh 0;
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table thead th,
  #after-login section .table-wrap2 table thead th {
    padding: 0 20px 20px 20px;
    font-size: 12px;
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody tr td:first-child,
  #after-login section .table-wrap2 table tbody tr td:first-child {
    padding-left: 0;
  }
}
#after-login section .table-wrap table tbody td,
#after-login section .table-wrap2 table tbody td {
  padding: 2.5vh 0;
  vertical-align: middle;
  color: #414042;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#after-login section .table-wrap table tbody td h2,
#after-login section .table-wrap2 table tbody td h2 {
  font-size: 110%;
  font-weight: bold;
}
#after-login section .table-wrap table tbody td p small,
#after-login section .table-wrap2 table tbody td p small {
  display: inline-block;
  margin: 0 0 0 15px;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td,
  #after-login section .table-wrap2 table tbody td {
    padding: 20px 20px 20px 20px;
    font-size: 14px;
  }
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td button[type='submit'].edit.top,
  #after-login section .table-wrap2 table tbody td button[type='submit'].edit.top {
    min-width: 150px;
  }
}
#after-login section .table-wrap table tbody td span.status,
#after-login section .table-wrap2 table tbody td span.status {
  border: 1px solid #999;
  font-weight: bold;
  padding: 5px 15px;
  font-size: 95%;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td span.status,
  #after-login section .table-wrap2 table tbody td span.status {
    padding: 3px 12px;
    font-size: 13px;
    font-weight: normal;
  }
}
#after-login section .table-wrap table tbody td.half,
#after-login section .table-wrap2 table tbody td.half {
  width: 40%;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td.half,
  #after-login section .table-wrap2 table tbody td.half {
    width: auto;
  }
}
#after-login section .table-wrap table tbody td ul.btn-list,
#after-login section .table-wrap2 table tbody td ul.btn-list {
  display: flex;
  justify-content: space-between;
}
#after-login section .table-wrap table tbody td ul li,
#after-login section .table-wrap2 table tbody td ul li {
  width: 48%;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td ul li:nth-child(1),
  #after-login section .table-wrap2 table tbody td ul li:nth-child(1) {
    margin-right: 4%;
  }
}
#after-login section .table-wrap table tbody td .project-box,
#after-login section .table-wrap2 table tbody td .project-box {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td .project-box,
  #after-login section .table-wrap2 table tbody td .project-box {
    display: block;
  }
}
#after-login section .table-wrap table tbody td .project-box .pic,
#after-login section .table-wrap2 table tbody td .project-box .pic {
  width: 25%;
  margin-right: 5%;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td .project-box .pic,
  #after-login section .table-wrap2 table tbody td .project-box .pic {
    width: auto;
    margin-right: 0;
  }
}
#after-login section .table-wrap table tbody td .project-box .pic img,
#after-login section .table-wrap2 table tbody td .project-box .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td .project-box .pic img,
  #after-login section .table-wrap2 table tbody td .project-box .pic img {
    height: 100px;
  }
}
#after-login section .table-wrap table tbody td .project-box .txt,
#after-login section .table-wrap2 table tbody td .project-box .txt {
  width: 65%;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td .project-box .txt,
  #after-login section .table-wrap2 table tbody td .project-box .txt {
    width: auto;
  }
}
#after-login section .table-wrap table tbody td .project-box .txt h3,
#after-login section .table-wrap2 table tbody td .project-box .txt h3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #after-login section .table-wrap table tbody td .project-box .txt h3,
  #after-login section .table-wrap2 table tbody td .project-box .txt h3 {
    font-size: 16px;
    margin: 10px 0 0 0;
  }
}
#after-login section .table-wrap table tbody td.price,
#after-login section .table-wrap2 table tbody td.price {
  font-weight: bold;
  font-family: 'Roboto', sans-serif !important;
  font-size: 120%;
}
#after-login section .table-wrap table tbody td.expire,
#after-login section .table-wrap2 table tbody td.expire {
  font-weight: bold;
  color: #c50606;
}
#after-login p.pdf a {
  background: #c50106;
  border-radius: 50px;
  padding: 3px 6px 9px 6px;
  text-align: center;
  display: block;
  color: #fff;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 736px) {
  #after-login p.pdf a {
    padding: 6px 12px 12px 12px;
  }
}
#after-login p.pdf a:hover {
  opacity: 0.7;
}
#after-login p.pdf a:before {
  content: '';
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAO5JREFUSEvtle0NgjAURc/bRCdRJ1EnESZRJ1EnESepuaRVUgktJRp+2ISQFtrzvnqf8eVhXz6fD4Bzbg0cAL2HRmVmdcrAPsAdWKQ2+u9JSB/AZRxeAXo0BiFFADMz55zCmIQUA2R6DmQSIAcyGRBDFL5uDosAQ0XwBySvyLxC5C+UZGPrTT97GdG8AcL8Elwb68ESOAJ7DxFMIrjx81ssjCWAoK4nb70gAfgAVsBuigdS11bUAFkcQnbtrL+SP9aDZNXEP8wCMKbhxA40ZqbCeIcs/sO3TFVOblcLRygntZmF3LTrv2/6o7Oa2PAEpRV9GehttEAAAAAASUVORK5CYII=')
    no-repeat;
  background-size: 100%;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 0 10px 0 0;
  position: relative;
  top: 4px;
}
@media screen and (max-width: 736px) {
  #after-login p.pdf a:before {
    margin: 0 5px 0 0;
  }
}
#after-login .check-box {
  position: relative;
}
#after-login .check-box label {
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  display: block;
  background: #ccc;
  padding: 8px 10px 8px 45px;
  color: #fff;
  max-width: 120px;
  display: block;
  font-weight: bold;
  box-sizing: border-box;
}
#after-login .check-box label:before,
#after-login .check-box label:after {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}
#after-login .check-box label:before {
  background-color: none;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  left: 15px;
}
#after-login .check-box label:after {
  background-color: #414042;
  border-radius: 50%;
  opacity: 0;
  width: 10px;
  height: 10px;
  left: 19px;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.5);
}
#after-login .check-box input:checked + label::after {
  opacity: 1;
}
#after-login .check-box input:checked + label::before {
  border: 1px solid #414042;
}
#after-login .check-box input:checked + label {
  background: #f9ed32;
  color: #414042;
}
#after-login .check-box .visually-hidden {
  position: absolute;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
}
#under-page {
  background: linear-gradient(45deg, #27aae1, #000fff);
}
#under-page header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 5vw;
}
@media screen and (max-width: 736px) {
  #under-page header {
    display: block;
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 9;
    background: #000fff;
  }
}
@media screen and (max-width: 736px) {
  #under-page header p.company-name {
    display: none;
  }
}
#under-page header a#btn {
  background: none;
  border: 1px solid #fff;
  display: none;
  margin: 0;
  position: absolute;
  right: 20px;
  top: 15px;
  padding: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 9999;
}
@media screen and (max-width: 736px) {
  #under-page header a#btn {
    display: block;
  }
}
#under-page header a#btn span {
  background: #fff;
  width: 16px;
  height: 2px;
  display: block;
  position: relative;
  top: 11px;
  left: 4px;
}
#under-page header a#btn span:before {
  content: '';
  display: block;
  position: absolute;
  top: -7px;
  background: #fff;
  width: 16px;
  height: 2px;
  transition: all 0.3s ease-in-out;
}
#under-page header a#btn span:after {
  content: '';
  display: block;
  position: absolute;
  top: 7px;
  background: #fff;
  width: 16px;
  height: 2px;
  transition: all 0.3s ease-in-out;
}
#under-page header a#btn span.change {
  height: 0;
}
#under-page header a#btn span.change:before {
  transform: rotate(-45deg);
  top: 0;
}
#under-page header a#btn span.change:after {
  transform: rotate(45deg);
  top: 0;
}
#under-page header h1 {
  width: 150px;
}
@media screen and (max-width: 736px) {
  #under-page header h1 {
    width: 110px;
  }
}
#under-page header .head-btns {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 736px) {
  #under-page header .head-btns {
    display: block;
  }
}
#under-page header .head-btns p {
  font-size: 12px;
  margin: 0 15px 0 0;
  color: #fff;
}
#under-page header .head-btns button {
  border: 1px solid #fff;
  color: #fff;
  background: url('../img/btn-logout-w.svg') no-repeat 20% 50%;
  background-size: 16px;
  border-radius: 50px;
  padding: 10px 20px 10px 50px;
  display: block;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
  font-weight: bold;
  cursor: pointer;
}
@media screen and (max-width: 736px) {
  #under-page header .head-btns button {
    padding: 17px;
    border-radius: 50%;
    background: url(../img/btn-logout-w.svg) no-repeat 50% 50%;
    background-size: 16px;
    position: absolute;
    top: 15px;
    right: 73px;
  }
}
#under-page header .head-btns button:hover {
  background: #fff;
  border: 1px solid #fff;
  background: url('../img/btn-logout.svg') no-repeat 20% 50% #fff;
  background-size: 16px;
}
@media screen and (max-width: 736px) {
  #under-page header .head-btns button span {
    display: none;
  }
}
#under-page main {
  padding: 0;
}
@media screen and (max-width: 736px) {
  #under-page main {
    padding-top: 80px;
  }
}
#under-page main #overlay {
  width: 25%;
  padding: 0 2.5vw 0 5vw;
  box-sizing: border-box;
  display: none;
}
@media screen and (max-width: 736px) {
  #under-page main #overlay {
    width: auto;
    width: 100%;
    height: 110%;
    text-align: left;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 999;
    background: #000fff;
    overflow-y: scroll;
  }
}
@media screen and (max-width: 736px) {
  #under-page main #overlay .MDL_window_wrap {
    max-width: calc(100% - 15px);
    position: absolute;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    top: 20px;
    height: 75%;
    margin: 0;
    padding: 0;
  }
}
#under-page main #overlay nav li {
  line-height: 2;
}
#under-page main #overlay nav li a {
  color: #fff;
  letter-spacing: 0.05em;
  transition: all 0.2s ease-in-out;
  display: block;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #under-page main #overlay nav li a {
    font-size: 14px;
  }
}
#under-page main #overlay nav li a:hover {
  opacity: 0.7;
}
#under-page main #overlay nav li.page a {
  background: url('../img/nav-icon-page.svg') no-repeat left 50%;
  background-size: 30px;
  padding: 0 0 0 40px;
}
#under-page main #overlay nav li.page ul {
  margin-bottom: 2.5vh;
  margin-top: 1.5vh;
  max-width: 230px;
}
@media screen and (max-width: 736px) {
  #under-page main #overlay nav li.page ul {
    max-width: initial;
  }
}
#under-page main #overlay nav li.page ul li:first-child a,
#under-page main #overlay nav li.page ul li:last-child a {
  padding-right: 0;
}
#under-page main #overlay nav li.page ul li:first-child a:after,
#under-page main #overlay nav li.page ul li:last-child a:after {
  display: none;
}
#under-page main #overlay nav li.page ul li a {
  background: none;
  margin: 0 0 0 calc(40px + 1em);
  padding: 1.25vh 15px 1.25vh 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  line-height: 1.7;
  font-size: 14px;
}
#under-page main #overlay nav li.page ul li a:after {
  content: '';
  display: inline-block;
  margin: 0 0 0 1em;
  transform: scale(0.7, 1) translateY(-50%);
  position: relative;
  top: 13px;
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 50%;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAVNJREFUSEvNlYtNw0AQRGcrIakEUklIJUkqASohnQCVLHrW2Tqv1xcuIoKTTpb8mdmZnT2b7rzszvj6nwTuvpHEfpT0JeliZp+ZG90K3P0o6RTAAH81s3Mk6SII4ANoUfJcgE+RpJcAW14knc3sMlbr7k+S3iVBeqifdRG0EufuEEC06yZwdyygoVT4ljW0sm9mU1NBAcaSuGjyjKhSgEX0ZlirBO4O8Ng8PqB6LBgjOlVa9QDMba0wJQjgM08L2NHMdqAF8Fn1qYIQxQG8DBb5Jz3TQAVw5uDQnIMC9FFemiqvegE48eSKVZOFGfhCQZ1nM9tWOQdsn0wwryyGq1Yx68Fa1AIRjX4o99LItgiQTHpSP2852qMCrGAiuabpKUdBenL+6DQNKaKhbGxhsxZRbClbmwMiiV0oqVcX+LVJHiu++lPpVnBLM9e++bXj+s8IvgE9/qQZY33hjAAAAABJRU5ErkJggg==')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 736px) {
  #under-page main #overlay nav li.page ul li a:after {
    float: none;
    top: 21px;
    float: right;
  }
}
#under-page main #ok p.back a {
  color: #333;
}
#under-page main p.back {
  margin: 0 5vw;
}
#under-page main p.back a {
  font-size: 13px;
  color: #fff;
}
@media screen and (max-width: 736px) {
  #under-page main p.back a {
    font-size: 11px;
  }
}
#under-page main p.back a:before {
  content: '<';
  display: inline-block;
  margin: 0 10px 0 0;
  transform: scale(0.7, 1);
}
#under-page main #project-detail-wrap {
  position: relative;
  padding: 0 5vw 10vh 5vw;
  margin: 2.5vh 0 10vh 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail-wrap {
    display: block;
    padding: 0 0 50px 0;
  }
}
#under-page main #project-detail-wrap:after {
  content: '';
  display: block;
  position: absolute;
  width: calc(100% - 5vw);
  height: 100%;
  background: #fff;
  z-index: -1;
  border-radius: 50px 0 0 50px;
  top: 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail-wrap:after {
    left: 0;
    width: 100%;
  }
}
#under-page main #project-detail-wrap .company-project {
  margin: 5vw 0 5vw 5vw;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail-wrap .company-project {
    margin: 20px 5px 50px 5px;
  }
}
#under-page main #project-detail-wrap .company-project > h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 2.5vh;
  position: relative;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail-wrap .company-project > h2 {
    font-size: 18px;
    margin-left: 20px;
  }
}
#under-page main #project-detail-wrap .company-project > h2:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg, #27aae1, #000fff);
  position: absolute;
  top: 0;
  left: -15px;
}
#under-page main #project-detail-wrap .company-project article a .text h2 {
  display: block;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail-wrap .company-project article a .text h2 {
    font-size: 16px;
  }
}
#under-page main #project-detail.flex {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail.flex {
    display: block;
  }
}
#under-page main #project-detail .area {
  margin: 2.5vh 0 0 0;
  display: flex;
}
#under-page main #project-detail .area dl {
  display: flex;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail .area dl {
    font-size: 14px;
  }
}
#under-page main #project-detail .area dl dt {
  background: url(../img/icon-map.svg) no-repeat left 50%;
  background-size: 10px;
  padding-left: 20px;
  font-weight: bold;
}
#under-page main #project-detail .area dl dd {
  font-weight: bold;
  padding-left: 5px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail .finish {
    padding: 20px 20px 40px 20px;
  }
}
#under-page main #project-detail .finish h2 {
  font-weight: bold;
  text-align: center;
  padding: 5vh 0;
  font-size: 20px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail .finish h2 {
    font-size: 16px;
    padding: 20px 0;
  }
}
#under-page main #project-detail .finish ul {
  width: 50%;
  margin: 0 auto;
  max-width: 640px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail .finish ul {
    max-width: initial;
    width: auto;
  }
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail .finish ul li {
    font-size: 14px;
  }
}
#under-page main #project-detail .finish ul li a {
  transition: all 0.2s ease-in-out;
}
#under-page main #project-detail .finish ul li a:hover {
  opacity: 0.7;
}
#under-page main #project-detail .finish ul li.btn-message {
  margin-bottom: 2.5vh;
}
#under-page main #project-detail .finish ul li.btn-message a {
  display: flex;
  align-items: center;
  justify-content: center;
}
#under-page main #project-detail .finish ul li.btn-message a:before {
  content: '';
  display: inline-block;
  margin: 0 1em 0 0;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAOxJREFUSEvtlc0RgjAQhd92Ip1gJ9qE8YbchCYshXQinazDT4D8mjBhvMgNEvbb995kQzj4oYPrww+4cwlGBaBMbEKCUONJcvjPDxD8BnBKLK62SzR0DgNSK5uKGxqbz5vBBOnG3izAtPjaYUsPwlV5DsHsBggeyKmBKiN7NFSMLwGARo6OwCj4B9jO/ciiJfT1HJidxKZsK+jcoyIXwGgsv4IAwD5o83HH91O+DDfT2VWBazwTinlkXwKR6KPCq2C7oPLYfmM80FIdm73a556mOsArPwYWAgSlxxT33wc3rvbY4YLmvXAchMMBHw63hxnS2Mw2AAAAAElFTkSuQmCC')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail .finish ul li.btn-message a:before {
    margin: 0 0.5em 0 0;
  }
}
#under-page main #project-detail .finish ul li.btn-projects {
  margin-bottom: 2.5vh;
}
#under-page main #project-detail .finish ul li.btn-projects a {
  display: flex;
  align-items: center;
  justify-content: center;
}
#under-page main #project-detail .finish ul li.btn-projects a:before {
  content: '';
  display: inline-block;
  margin: 0 1em 0 0;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAALtJREFUSEvtVcsVQDAQnO2ETihFFdxcpQqlUIpO1gvyHgkSG3GSa97O7Mz+CIkfJcbHxwQNF2D0ADKhsgmECh2NJv6ooOYBQCEEN2ETFOVXBLx8KJJZV7MTbyv4CX6LPA38SheFzMquzZ+3qcnyWswIRaV80GwbGs629aI3wGGKNYlcgbbBAx5HQMjvMo+3CNAb89SWfXnkFq0ojud27WPWtRfcrcF6cNqAmxAE7hJEXpqzcNlheZBIcoIZPT14GVJciGoAAAAASUVORK5CYII=')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail .finish ul li.btn-projects a:before {
    margin: 0 0.5em 0 0;
  }
}
#under-page main #project-detail .finish ul li a {
  border: 1px solid #07f;
  display: block;
  border-radius: 50px;
  padding: 15px 30px;
  color: #07f;
  font-weight: bold;
  text-align: center;
}
#under-page main #project-detail article {
  width: 65%;
  padding: 5vw 0 0 5vw;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article {
    width: auto;
    padding: 40px 20px 30px 20px;
  }
}
#under-page main #project-detail article.wide {
  width: auto;
}
#under-page main #project-detail article section:not(:last-child) {
  margin-bottom: 5vh;
}
#under-page main #project-detail article section:not(:first-child) {
  border-top: 1px solid #ccc;
  padding-top: 5vh;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section:not(:first-child) {
    padding-top: 30px;
  }
}
#under-page main #project-detail article section time {
  text-align: right;
  color: #999;
  margin: 0 0 2.5vh 0;
  display: block;
}
#under-page main #project-detail article section h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 1vh;
  position: relative;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section h2 {
    font-size: 18px;
  }
}
#under-page main #project-detail article section h2:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(45deg, #27aae1, #000fff);
  position: absolute;
  top: 0;
  left: -15px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section h2:before {
    top: -13px;
    left: 2px;
  }
}
#under-page main #project-detail article section h2.nomak:before {
  display: none;
}
#under-page main #project-detail article section h3 {
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section h3 {
    font-size: 16px;
  }
}
#under-page main #project-detail article section h3.title {
  margin: 2.5vh 0 1.5vh 0;
}
#under-page main #project-detail article section ul.tags {
  display: flex;
  flex-wrap: wrap;
  margin: 2.5vh 0 2vh 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section ul.tags {
    margin: 15px 0;
  }
}
#under-page main #project-detail article section ul.tags li {
  border: 1px solid #999;
  border-radius: 50px;
  font-size: 15px;
  padding: 5px 15px;
  font-weight: bold;
  margin: 0 10px 10px 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section ul.tags li {
    font-size: 13px;
    margin: 0 5px 5px 0;
  }
}
#under-page main #project-detail article section ul.tags2 {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section ul.tags2 {
    margin: 10px 0 0 0;
  }
}
#under-page main #project-detail article section ul.tags2 li {
  padding: 10px 20px;
  font-size: 15px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50px;
  margin: 0 1vh 1vh 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section ul.tags2 li {
    box-shadow: none;
    width: auto;
    font-size: 13px;
    margin: 0 5px 10px 0 !important;
    font-weight: normal;
  }
}
#under-page main #project-detail article section table.table {
  width: 100%;
  margin: 2.5vh 0 0 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table {
    margin: 0;
  }
}
#under-page main #project-detail article section table.table.no-wid th {
  width: auto;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table tr th,
  #under-page main #project-detail article section table.table tr td {
    display: block;
  }
}
#under-page main #project-detail article section table.table tr th {
  font-weight: bold;
  width: 20%;
  padding: 1vh 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table tr th {
    width: auto;
    padding: 10px 0 0 0;
    font-size: 13px;
  }
}
#under-page main #project-detail article section table.table tr td {
  padding: 1vh 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table tr td {
    width: auto;
    font-weight: normal;
    padding: 0 0 5px 0;
    font-size: 14px;
  }
}
#under-page main #project-detail article section table.table tr td .recruit-site-btns {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table tr td .recruit-site-btns {
    display: block;
  }
}
#under-page main #project-detail article section table.table tr td .recruit-site-btns li {
  width: 49%;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table tr td .recruit-site-btns li {
    width: auto;
    margin-top: 10px;
  }
}
#under-page main #project-detail article section table.table tr td .recruit-site-btns li:nth-child(2n) {
  margin-left: 2%;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table tr td .recruit-site-btns li:nth-child(2n) {
    margin-left: 0;
  }
}
#under-page main #project-detail article section table.table tr td .recruit-site-btns li:nth-child(n + 3) {
  margin-top: 2%;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail article section table.table tr td .recruit-site-btns li:nth-child(n + 3) {
    margin-top: 10px;
  }
}
#under-page main #project-detail article section table.table tr td .recruit-site-btns li a {
  display: block;
  border: 1px solid #07f;
  border-radius: 50px;
  padding: 10px 30px;
  color: #07f;
  font-weight: bold;
  text-align: center;
}
#under-page main #project-detail article section table.table tr td .recruit-site-btns li a:after {
  content: '';
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAPFJREFUSEvtld0VgjAMhW82wU1wE11CeAPfhCUcRUZhk3gC1tOWtgT5ebKPnHC/5CZpCTsf2lkfBwNKzsF4AsgmlTFqtHQfvt+4AqGOVt/QN3G3goJfAPLoj1pIAsCDuBWQ7FGsks0AJWdgSNWupZsARnHpl1jaO5DVAF+8oZPT+FWAkLhplOnJz4CUuA0x4wx4i1ZwfIo04oGR8/cgDNCKi0VW9sLTAi6fiekhDY0dccBeRjXAXA9edhNOwGJdBdor9w+YdUphUfq6niUMAR0aOptQt8njg1Ml34Q0pAfhigd1YYAuw0VRB7/Ji3LTBb8Beq6SGcxyRycAAAAASUVORK5CYII=')
    no-repeat;
  background-size: 100%;
  width: 17px;
  height: 17px;
  display: inline-block;
  position: relative;
  top: 3px;
  margin: 0 0 0 10px;
}
#under-page main #project-detail aside {
  width: 30%;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  background: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  margin-top: 5vh;
  position: sticky;
  top: 15vh;
  height: 100%;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside {
    width: auto;
    margin-top: 0;
    border-radius: 0 20px 0 20px;
  }
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside#hear {
    position: relative;
    background: none;
    box-shadow: none;
    z-index: 99;
  }
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside#hear .entry-box {
    padding: 0;
  }
}
#under-page main #project-detail aside#hear .entry-box p.can {
  text-align: center;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside#hear .entry-box p.can {
    margin: 10px 0 0 0;
  }
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside#hear .entry-box .sp-fix {
    display: block;
    bottom: -140px;
  }
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside#hear .entry-box .sp-fix.fixed {
    bottom: 0;
  }
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside#hear .entry-box .sp-fix .btn-hear {
    width: 100%;
  }
}
#under-page main #project-detail aside p.pic {
  line-height: 0;
}
#under-page main #project-detail aside p.pic img {
  border-radius: 20px 20px 0 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside p.pic img {
    border-radius: 0 20px 0 0;
  }
}
#under-page main #project-detail aside .entry-box {
  padding: 2.5vh;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside .entry-box {
    padding: 15px 20px;
  }
}
#under-page main #project-detail aside .entry-box > p {
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside .entry-box > p {
    font-size: 15px;
  }
}
#under-page main #project-detail aside .entry-box > p em {
  font-size: 150%;
  color: #c50606;
  font-family: 'Roboto', sans-serif !important;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside .entry-box .sp-fix {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    bottom: -110px;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px 20px 30px 20px;
    border-radius: 20px 20px 0 0;
    box-sizing: border-box;
    box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
    transition: all 0.3s ease-in-out;
  }
}
#under-page main #project-detail aside .entry-box .sp-fix.fixed {
  bottom: 0;
}
#under-page main #project-detail aside .entry-box .sp-fix .favorite {
  cursor: pointer;
  border: #c50606 1px solid;
  color: #c50606;
  background: #fff;
  border-radius: 50px;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 2.5vh 0;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside .entry-box .sp-fix .favorite {
    display: block;
    border: none;
    width: 20%;
    margin: 0;
    background: none;
  }
}
#under-page main #project-detail aside .entry-box .sp-fix .favorite span {
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside .entry-box .sp-fix .favorite span {
    font-size: 11px;
    pointer-events: none;
    letter-spacing: 0;
  }
}
#under-page main #project-detail aside .entry-box .sp-fix .favorite .likes {
  display: inline-block;
  margin-left: -15px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside .entry-box .sp-fix .favorite .likes {
    display: block;
    margin: 0 auto;
    pointer-events: none;
  }
}
#under-page main #project-detail aside .entry-box .sp-fix .favorite .likes .likes-icon {
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 736px) {
  #under-page main #project-detail aside .entry-box .sp-fix .favorite .likes .likes-icon {
    width: 40px;
    height: 20px;
  }
}
.company-about {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.company-about .logo {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.company-about .company-name {
  padding-left: 5%;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  .company-about .company-name {
    padding-left: 5%;
  }
}
.company-about .company-name h3 {
  font-weight: bold;
  font-size: 16px;
}
@media screen and (max-width: 736px) {
  .company-about .company-name h3 {
    font-size: 13px;
  }
}
.company-about .company-name p {
  font-size: 14px;
  background: url('../img/icon-map.svg') no-repeat left 50%;
  background-size: 10px;
  padding-left: 20px;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .company-about .company-name p {
    font-size: 11px;
  }
}
#ok,
#building {
  z-index: 99;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(39, 170, 225, 0.9), rgba(0, 15, 225, 0.9));
}
#ok .textarea,
#building .textarea {
  margin: 0 auto !important;
  position: absolute;
  padding: 4vh;
  box-sizing: border-box;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  border-radius: 20px;
  z-index: 100;
  max-width: 768px;
}
@media screen and (max-width: 736px) {
  #ok .textarea,
  #building .textarea {
    width: calc(100% - 40px);
    text-align: center;
    max-width: initial;
  }
}
#ok .textarea .cbx,
#building .textarea .cbx {
  margin: 0 auto 2vh auto;
  display: block;
}
#ok .textarea .close,
#building .textarea .close {
  margin: 1vh 0 0 0;
  font-size: 14px;
}
#ok .textarea .close a,
#building .textarea .close a {
  display: block;
  border: 1px solid #999;
  text-align: center;
  border-radius: 50px;
  padding: 10px 30px;
  font-weight: bold;
  cursor: pointer;
}
#ok .textarea .confirm,
#building .textarea .confirm {
  font-size: 16px;
  margin: 3vh 0 1.5vh 0;
}
@media screen and (max-width: 736px) {
  #ok .textarea .confirm,
  #building .textarea .confirm {
    text-align: left;
    font-size: 14px;
  }
}
#ok .textarea .confirm input[type='checkbox'],
#building .textarea .confirm input[type='checkbox'] {
  display: none;
}
#ok .textarea .confirm input[type='checkbox'] + label,
#building .textarea .confirm input[type='checkbox'] + label {
  font-weight: bold;
  color: #414042;
  letter-spacing: 0.05em;
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
  cursor: pointer;
}
@media screen and (max-width: 736px) {
  #ok .textarea .confirm input[type='checkbox'] + label,
  #building .textarea .confirm input[type='checkbox'] + label {
    font-size: 13px;
    padding-left: 40px;
    display: block;
  }
}
#ok .textarea .confirm input[type='checkbox'] + label a,
#building .textarea .confirm input[type='checkbox'] + label a {
  text-decoration: underline;
  font-weight: bold;
  color: #414042;
}
#ok .textarea .confirm input[type='checkbox'] + label:last-child,
#building .textarea .confirm input[type='checkbox'] + label:last-child {
  margin-bottom: 0;
}
#ok .textarea .confirm input[type='checkbox'] + label:before,
#building .textarea .confirm input[type='checkbox'] + label:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid #c50606;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  -webkit-transition:
    all 0.12s,
    border-color 0.08s;
  transition:
    all 0.12s,
    border-color 0.08s;
}
@media screen and (max-width: 736px) {
  #ok .textarea .confirm input[type='checkbox'] + label:before,
  #building .textarea .confirm input[type='checkbox'] + label:before {
    width: 20px;
    height: 20px;
    top: 3px;
  }
}
#ok .textarea .confirm input[type='checkbox']:checked + label:before,
#building .textarea .confirm input[type='checkbox']:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border: 2px solid #c00;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#ok .textarea h2,
#building .textarea h2 {
  font-weight: bold;
  text-align: center;
  margin-bottom: 2.5vh;
}
#ok .textarea h3,
#building .textarea h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0;
}
@media screen and (max-width: 736px) {
  #ok .textarea h3,
  #building .textarea h3 {
    font-size: 16px;
  }
}
#ok .textarea .btn-entry,
#building .textarea .btn-entry {
  font-size: 18px;
  padding: 20px;
}
@media screen and (max-width: 736px) {
  #ok .textarea .btn-entry,
  #building .textarea .btn-entry {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    margin: 15px 0;
  }
}
#ok .textarea .btn-entry span,
#building .textarea .btn-entry span {
  display: inline-block;
  margin: 0 0 0 1em;
}
#ok .textarea p.back,
#building .textarea p.back {
  text-align: center;
}
#ok .textarea p.back a,
#building .textarea p.back a {
  cursor: pointer;
}
#ok .textarea p.back a:before,
#building .textarea p.back a:before {
  content: '<';
  display: inline-block;
  transform: scale(0.7, 1);
  margin: 0 10px 0 0;
}
#ok .textarea .pic img,
#building .textarea .pic img {
  border-radius: 10px;
}
#ok .textarea.big,
#building .textarea.big {
  animation: big 0.5s ease-in-out forwards;
}
@keyframes big {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.select-wrap {
  position: relative;
}
@media screen and (max-width: 736px) {
  .select-wrap {
    width: 100%;
  }
}
.select-wrap select {
  position: relative;
  background: #fff;
  border-radius: 5px;
  border: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ,
    Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}
@media screen and (max-width: 736px) {
  .select-wrap select {
    font-size: 14px;
  }
}
.select-wrap:after {
  content: '';
  position: absolute;
  right: 15px;
  top: calc(50% - 3px);
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-top: 2px solid #07f;
  border-left: 2px solid #07f;
  pointer-events: none;
  transform: translateY(-50%) rotate(-135deg);
}
.btn-entry,
.btn-hear,
.btn-scout {
  cursor: pointer;
  background: linear-gradient(45deg, #27aae1, #000fff);
  color: #fff;
  border-radius: 50px;
  padding: 15px;
  width: 100%;
  border: none;
  font-weight: bold;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  margin: 2.5vh 0;
  transition: all 0.2s ease-in-out;
}
.btn-entry.on,
.btn-hear.on,
.btn-scout.on {
  border: 1px solid #07f;
  color: #07f;
  background: #fff;
}
.btn-entry:hover,
.btn-hear:hover,
.btn-scout:hover {
  opacity: 0.7;
}
@media screen and (max-width: 736px) {
  .btn-entry,
  .btn-hear,
  .btn-scout {
    width: 75%;
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.075em;
  }
}
.btn-entry span,
.btn-hear span,
.btn-scout span {
  display: none;
}
@media screen and (max-width: 736px) {
  .btn-entry span,
  .btn-hear span,
  .btn-scout span {
    display: inline-block;
    margin: 0 0 0 1em;
  }
}
#profile-box {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 736px) {
  #profile-box {
    display: block;
  }
}
#profile-box h4 {
  font-weight: bold;
  border-left: 2px solid #07f;
  padding: 0 0 0 1em;
  margin: 0 0 1vh 0;
}
@media screen and (max-width: 736px) {
  #profile-box h4 {
    font-size: 14px;
  }
}
#profile-box .pic-contents {
  display: flex;
  width: 60%;
  margin: 0 0 5vh 0;
}
@media screen and (max-width: 736px) {
  #profile-box .pic-contents {
    width: auto;
    justify-content: space-between;
  }
}
#profile-box .pic-contents .pic {
  width: 40%;
}
@media screen and (max-width: 736px) {
  #profile-box .pic-contents .pic {
    width: 35%;
  }
}
#profile-box .pic-contents .pic img {
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  border-radius: 10px;
}
#profile-box .pic-contents .contents {
  width: 60%;
  margin: 0 5%;
}
@media screen and (max-width: 736px) {
  #profile-box .pic-contents .contents {
    margin: 0 0 0 5%;
  }
}
#profile-box .pic-contents .contents h3 {
  margin-bottom: 1.5vh;
}
#profile-box .pic-contents .contents .text {
  margin-left: calc(1em + 2px);
}
#profile-box .pic-contents .contents p {
  margin-bottom: 1.5vh;
}
#profile-box .portfolio {
  width: 40%;
}
@media screen and (max-width: 736px) {
  #profile-box .portfolio {
    width: auto;
    margin: 25px 0;
  }
}
#profile-box .portfolio ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#profile-box .portfolio ul:after {
  content: '';
  display: block;
  width: 32%;
}
#profile-box .portfolio ul li {
  width: 32%;
  position: relative;
  margin-bottom: 2.5%;
}
#profile-box .portfolio ul li:before {
  content: '';
  display: block;
  padding-top: 100%;
}
#profile-box .portfolio ul li a:after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAT1JREFUSEvVldFxwjAQRHcrSagkUElCJSGVhFQSU0noZDPL3GWEkZDHNh/RjEeDQXp3e3cL8eDFB9+PJkDSM4BXANt4zgAGAN6/SHrvripA0juAw53TvvxI8qNHuAFI+o6IfdaQE8khMnI2TwV8ILm7B7kCSHoD8Bky7H1x7XDAHIhlPNzL5A8Qh37iwl3r8gRKcjaGWK5mMCUgdbe2+562/l6Ss3XWzSxKQP7Y0RwnAjKLZi1KgOWxppupLVjIeia5qQW1CBAyyTvJasuXgGzPboGLQmfXNeu2VpEnAaz/nDZ1Qs26zR207J7LtE8atELXbFe/cruewuT82Vm+jHzKg+a6Vc1vrtmlT7nIhjYhPbu2FI7Yu9fFslOSkSdVIYv/cHqQxYAYNsuU7nplNasACsh27GOrAVrm+P8Bv+awqhn7KdimAAAAAElFTkSuQmCC')
    no-repeat;
  background-size: 100%;
  display: block;
  width: 30px;
  height: 30px;
}
#profile-box .portfolio ul li img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
  border-radius: 10px;
}
.popup_bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, rgba(39, 170, 225, 0.9), rgba(0, 15, 225, 0.9));
  transition: all 0.3s ease-in-out;
  z-index: 101;
}
.popup_content {
  position: relative;
}
.popup_box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 110;
  width: 50%;
}
@media screen and (max-width: 736px) {
  .popup_box {
    width: 100%;
  }
}
.popup_box .pic-text {
  overflow-y: scroll;
  max-height: 80vh;
  width: 75%;
  margin: 0 auto;
}
.popup_box .pic-text::-webkit-scrollbar {
  display: none;
}
.popup_box .pic {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 736px) {
  .popup_box .pic {
    width: 85%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 736px) {
  .popup_box .text {
    width: calc(100% - 40px);
    margin: 15px auto 0 auto;
  }
}
.popup_box h3 {
  font-size: 18px;
  color: #fff;
  margin: 2vh 0;
  text-align: center;
}
@media screen and (max-width: 736px) {
  .popup_box h3 {
    margin: 20px;
  }
}
.popup_box p {
  color: #fff;
}
@media screen and (max-width: 736px) {
  .popup_box p {
    margin: 0 20px;
  }
}
.popup_box p.url {
  text-align: center;
}
@media screen and (max-width: 736px) {
  .popup_box p.url {
    text-align: left;
  }
}
.popup_box img {
  max-width: 100%;
  max-height: 60vh;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 736px) {
  .popup_box img {
    max-height: 30vh;
    max-width: 70vh;
  }
}
.popup_box p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 1vh;
}
.popup_nav {
  position: relative;
}
.popup_nav .prev {
  position: fixed;
  top: calc(50% - 100px);
  left: 0;
  transform: translateY(-50%);
  font-size: 30px;
  height: auto;
  color: #fff;
  font-weight: bold;
  display: block;
  transform: scale(0.7, 1);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #fff;
  z-index: 130;
}
@media screen and (max-width: 736px) {
  .popup_nav .prev {
    left: -9px;
    border-left: 0;
    font-size: 20px;
    top: 25%;
    transform: translateY(-50%);
  }
}
.popup_nav .next {
  position: fixed;
  top: calc(50% - 110px);
  right: 0;
  transform: translateY(-50%);
  font-size: 30px;
  height: auto;
  color: #fff;
  font-weight: bold;
  display: block;
  transform: scale(0.7, 1);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #fff;
}
@media screen and (max-width: 736px) {
  .popup_nav .next {
    right: -9px;
    border-right: 0;
    font-size: 20px;
    top: 25%;
    transform: translateY(-50%);
  }
}
.popup_nav .prev.disabled,
.popup_nav .next.disabled {
  display: none;
}
.popup_close {
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 15px;
  border-radius: 50%;
  z-index: 120;
  display: block;
  width: 30px;
  height: 30px;
}
@media screen and (max-width: 736px) {
  .popup_close {
    top: 0;
    right: 20px;
  }
}
.popup_close span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  width: 30px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
}
@media screen and (max-width: 736px) {
  .popup_close span {
    width: 20px;
    height: 2px;
    left: 50%;
    top: 45%;
  }
}
.popup_close span:nth-child(1) {
  transform: translate(-50%, 50%) rotate(45deg);
}
.popup_close span:nth-child(2) {
  transform: translate(-50%, 50%) rotate(-45deg);
}
.page-back {
  text-align: center;
}
.page-back a {
  border: 1px solid #07f;
  color: #07f;
  border-radius: 50px;
  display: block;
  max-width: 200px;
  padding: 15px 0;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .page-back a {
    max-width: 150px;
    padding: 10px 0;
  }
}
.page-back a:before {
  content: '<';
  display: inline-block;
  margin: 0 1em 0 0;
  transform: scale(0.7, 1);
}
.talk_date_area {
  text-align: center;
  padding: 0px 0px 10px;
}
.talk_date_area > p {
  background: rgba(0, 119, 255, 0.1);
  border-radius: 20px;
  padding: 5px 10px;
  display: inline-block;
  font-size: 11px !important;
}
.talk_date_area > p small {
  display: inline-block;
}
.talk_area {
  position: relative;
  margin-top: 2.5vh;
}
@media screen and (max-width: 736px) {
  .talk_area {
    margin: 20px;
  }
}
.talk_area ul {
  margin-bottom: 15px;
}
.talk_area li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  margin-bottom: 0 !important;
}
.talk_area li > div {
  box-sizing: border-box;
}
.talk_area li .talk_icon {
  width: 28px;
}
.talk_area li .talk_icon img {
  width: 28px;
  height: 28px;
  overflow: hidden;
  object-fit: cover;
  border-radius: 50%;
}
.talk_kiji_ttl {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: bold;
}
.talk_area li .talk_balloon_box {
  padding: 10px 20px 10px 10px;
  max-width: 80%;
  position: relative;
}
.talk_area li .talk_balloon {
  padding: 14px;
  background: #fff;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.1);
  border-radius: 0px 20px 20px 20px;
  position: relative;
  display: inline-block;
  width: 98%;
  box-sizing: border-box;
}
.talk_area li .talk_balloon.me {
  background: rgba(155, 216, 246, 0.2);
}
.myself {
  flex-flow: row-reverse;
}
.myself .talk_balloon_box {
  padding: 10px 0px 10px 10px !important;
}
.myself .talk_balloon {
  border-radius: 20px 0px 20px 20px !important;
}
.talk_area li .talk_balloon > p {
  font-size: 16px;
  font-weight: bold;
  line-height: 160%;
}
@media screen and (max-width: 736px) {
  .talk_area li .talk_balloon > p {
    font-size: 14px;
    font-weight: bold;
    color: #666;
  }
}
.talk_area li.myself .talk_balloon > p {
  font-size: 15px;
}
@media screen and (max-width: 736px) {
  .talk_area li.myself .talk_balloon > p {
    font-size: 14px;
    font-weight: normal;
  }
}
.talk_area li .talk_balloon small {
  font-size: 11px;
}
.myself .talk_balloon_box {
  padding: 10px 20px 10px 10px;
  width: 300px;
  position: absolute;
  top: 0px;
  margin-left: auto;
}
.talk_area li .send_time {
  font-size: 9px;
  color: #8d8c8c;
  position: relative;
}
.talk_area li .send_time > span {
  position: absolute;
  width: 60px;
  text-align: right;
}
.talk_area li .send_time > span.you {
  right: -55px;
}
.myself .send_time > span {
  bottom: 6px !important;
  left: -70px;
}
.talk_area_map {
  width: 200px;
  height: 160px;
  background: url('../img/map_dummy.png');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
  border-radius: 20px;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
}
.talk_area_map iframe {
  width: 100%;
  height: 100%;
}
.talk_area_btn {
  width: 347px;
  margin: 20px auto;
  border-radius: 10px;
  position: relative;
  text-align: center;
}
.talk_area_btn p {
  padding: 2px 0px;
}
.talk_area_btn p:nth-of-type(1) {
  font-size: 14px;
  font-weight: bold;
}
.talk_area_btn p:nth-of-type(2) {
  font-size: 11px;
  color: #878889;
}
.talk_area_btn a {
  display: block;
  padding: 12px 20px;
}
#footer_talkroom {
  position: relative;
}
@media screen and (max-width: 736px) {
  #footer_talkroom {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
  }
}
.talkroom_menu {
  margin: 0px;
  width: calc(100% + 10vw);
  background: linear-gradient(45deg, #27aae1, #000fff);
  padding: 2.5vh 5vw;
  box-sizing: border-box;
  border-radius: 0 0 0 50px;
  position: relative;
  top: 5.6vh;
  left: -5vw;
}
@media screen and (max-width: 736px) {
  .talkroom_menu {
    width: 100%;
    position: static;
    padding: 20px;
    border-radius: 15px 0 0 0;
  }
}
.talkroom_menu a {
  display: block;
}
.talkroom_menu .menu {
  position: relative;
  top: 1px;
}
.send_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.send_area .input-text {
  width: 92.5%;
}
@media screen and (max-width: 736px) {
  .send_area .input-text {
    width: 80%;
  }
}
.send_area .input-text textarea {
  max-height: 90px;
  height: 45px;
  overflow: hidden;
}
@media screen and (max-width: 736px) {
  .send_area .input-text textarea {
    font-size: 14px;
    font-weight: normal;
    height: 40px;
  }
}
.send_area .send_btn {
  width: 5%;
  margin-left: 2.5%;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
}
@media screen and (max-width: 736px) {
  .send_area .send_btn {
    width: 15%;
    padding-bottom: 10px;
  }
}
.send_area .send_btn svg {
  background: #c50606;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.9);
}
@media screen and (max-width: 736px) {
  .send_area .send_btn svg {
    width: 40px;
    height: 40px;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.9);
  }
}
.message {
  margin: 0;
}
@media screen and (max-width: 736px) {
  .message {
    margin: 30px 0;
  }
}
@media screen and (max-width: 736px) {
  .message.com a {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 736px) {
  .message h2.title {
    margin: 0 20px;
  }
}
.message article:not(:last-child) {
  border-bottom: 1px solid #ccc;
  padding-bottom: 1vh;
  margin-bottom: 1vh;
}
.message article.active {
  border-bottom: none;
}
.message article.active a {
  position: relative;
}
.message article.active a:before {
  content: '';
  position: absolute;
  display: block;
  background: linear-gradient(90deg, #27aae1, #000fff);
  border-radius: 0 10px 10px 0;
  z-index: -1;
  width: calc(100% + 5vw);
  height: calc(100% + 2vh);
  left: -5vw;
  top: -1vh;
}
.message article.active a h3,
.message article.active a p,
.message article.active a time,
.message article.active a i {
  color: #fff !important;
}
.message article.active a i {
  border: 1px solid #fff !important;
}
.message article a {
  display: flex;
  justify-content: flex-start;
  padding: 2vh;
  transition: all 0.2s ease-in-out;
}
.message article a.active {
  padding: 2vh;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
}
.message article a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 736px) {
  .message article a {
    padding: 15px 0;
  }
}
.message article a .pic {
  min-width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.message article a .pic img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}
.message article a .pic.big {
  min-width: 70px;
  height: 70px;
}
.message article a .pic.big img {
  width: 70px;
  height: 70px;
}
.message article a .text {
  position: relative;
  padding-left: 15px;
  width: calc(100% - 15px);
}
.message article a .text time {
  font-size: 12px;
  position: absolute;
  top: 5px;
  right: 0;
  font-family: 'Roboto', sans-serif !important;
}
.message article a .text i {
  border: 1px solid #c50606;
  color: #c50606;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 6px;
}
@media screen and (max-width: 736px) {
  .message article a .text i {
    font-size: 11px;
  }
}
.message article a .text h3 {
  font-weight: bold;
  margin: 3px 0 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 736px) {
  .message article a .text h3 {
    margin: 10px 0 5px 0;
  }
}
.message article a .text h3 small {
  display: inline-block;
  margin: 0 0 0 5px;
}
.message article a .text p {
  font-size: 13px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 736px) {
  .title-wrap {
    margin: 0 20px;
  }
}
.title-wrap h2 {
  font-size: 22px;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .title-wrap h2 {
    font-size: 18px;
  }
}
.title-wrap p.back {
  font-weight: bold;
  font-size: 150%;
  margin-right: 1em;
  transform: scale(0.7, 1);
}
.title-wrap p.edit a {
  font-weight: bold;
  background: none;
  color: #07f;
  border: 1px solid #07f;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  .title-wrap p.edit a {
    font-size: 12px;
  }
}
.title-wrap p.edit a:before {
  content: '';
  display: inline-block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAQBJREFUSEu1ldERgjAQRPesBDvRSsQq4BP/wCa0E7ESqcRzjhCHEEICCflhJoS3ueWyIew8aGc+4gVKzvDFpd/onW7TDccJCJzxAHAawB0IZ9TUaaHtAiZcAzMAHRo6xglM4QJUcy8A8qy0XesrcNkiW9Z2bRZYskWsUf9io0U+W5TpBlwmwiyag8vXrvlRr/oFIuD+CiLhywIJ4G6BRPB5gYTweYGC5TSa/RzQLa5UtruoYO4XN6TeRcDtCkrOh+P+REPXWLgtULBEbw6gBaMFofrH8Cgh11xSpkUFf/o0NId1/GMEVNxKpkgFB7xRU7sGmPZGC1D2Z1EAZGnJ7gI/KJOfGWERnJ8AAAAASUVORK5CYII=')
    no-repeat left 50%;
  background-size: 100%;
  width: 15px;
  height: 15px;
  margin: 0 1em 0 0;
  position: relative;
  top: 2px;
}
article.project,
article.company {
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  border-radius: 0 25px 25px 25px;
  position: relative;
  background: #fff;
}
@media screen and (max-width: 736px) {
  article.project,
  article.company {
    margin: 0 20px;
    border-radius: 0 15px 15px 15px;
  }
}
article.project:not(:last-child),
article.company:not(:last-child) {
  margin-bottom: 5vh;
}
@media screen and (max-width: 736px) {
  article.project:not(:last-child),
  article.company:not(:last-child) {
    margin-bottom: 25px;
  }
}
article.project .status,
article.company .status {
  display: flex;
  justify-content: space-between;
  padding: 4vh 5vh 0 5vh;
  margin-bottom: -2.5vh;
  position: relative;
  z-index: 90;
  align-items: baseline;
}
@media screen and (max-width: 736px) {
  article.project .status,
  article.company .status {
    padding: 15px;
  }
}
article.project .status p a,
article.company .status p a {
  padding: 0;
  color: #07f;
  padding: 5px;
  border-radius: 50px;
  font-weight: bold;
  flex-direction: row;
}
article.project .status p a:before,
article.company .status p a:before {
  content: '';
  display: inline-block;
  margin: 0 0.5em 0 0;
  position: relative;
  top: 2px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAOxJREFUSEvtlc0RgjAQhd92Ip1gJ9qE8YbchCYshXQinazDT4D8mjBhvMgNEvbb995kQzj4oYPrww+4cwlGBaBMbEKCUONJcvjPDxD8BnBKLK62SzR0DgNSK5uKGxqbz5vBBOnG3izAtPjaYUsPwlV5DsHsBggeyKmBKiN7NFSMLwGARo6OwCj4B9jO/ciiJfT1HJidxKZsK+jcoyIXwGgsv4IAwD5o83HH91O+DDfT2VWBazwTinlkXwKR6KPCq2C7oPLYfmM80FIdm73a556mOsArPwYWAgSlxxT33wc3rvbY4YLmvXAchMMBHw63hxnS2Mw2AAAAAElFTkSuQmCC')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 736px) {
  article.project .status p a:before,
  article.company .status p a:before {
    top: 5px;
  }
}
article.project .status p span,
article.company .status p span {
  color: #c50606;
  border: 1px solid #c50606;
  font-weight: bold;
  padding: 5px 15px;
  font-size: 13px;
}
@media screen and (max-width: 736px) {
  article.project .status p span,
  article.company .status p span {
    font-size: 12px;
  }
}
article.project i.new,
article.company i.new {
  position: absolute;
  top: -5px;
  left: -5px;
  background: #c50606;
  border-radius: 3px;
  color: #fff;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px;
  padding: 5px 10px;
  pointer-events: none;
  z-index: 90;
}
@media screen and (max-width: 736px) {
  article.project i.new,
  article.company i.new {
    font-size: 11px;
    left: -20px;
    border-radius: 0 5px 5px 0;
  }
}
article.project a,
article.company a {
  padding: 5vh;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}
article.project a:hover,
article.company a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 736px) {
  article.project a,
  article.company a {
    display: block;
    padding: 15px;
  }
}
article.project a .pic,
article.company a .pic {
  width: 25%;
  position: relative;
}
@media screen and (max-width: 736px) {
  article.project a .pic,
  article.company a .pic {
    width: auto;
  }
}
article.project a .pic:before,
article.company a .pic:before {
  content: '';
  display: block;
  padding-top: 100%;
}
@media screen and (max-width: 736px) {
  article.project a .pic:before,
  article.company a .pic:before {
    padding-top: 50%;
  }
}
article.project a .pic img,
article.company a .pic img {
  border-radius: 10px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
@media screen and (max-width: 736px) {
  article.project a .pic img,
  article.company a .pic img {
    height: 100%;
  }
}
article.project a .text,
article.company a .text {
  width: 70%;
  line-height: 1.7;
}
@media screen and (max-width: 736px) {
  article.project a .text,
  article.company a .text {
    width: auto;
  }
}
article.project a .text h2,
article.company a .text h2 {
  font-weight: bold;
  font-size: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  display: -webkit-box;
  text-decoration: underline;
  line-height: 1.8;
}
@media screen and (max-width: 736px) {
  article.project a .text h2,
  article.company a .text h2 {
    font-size: 18px;
    margin: 10px 0 0 0;
    line-height: 1.6;
    text-decoration: none;
    letter-spacing: 0.05em;
  }
}
article.project a p.entered,
article.company a p.entered {
  font-size: 13px;
  margin: 2vh 0 0 0;
  color: #999;
}
@media screen and (max-width: 736px) {
  article.project a p.entered,
  article.company a p.entered {
    font-size: 11px;
  }
}
article.project a p.scouted,
article.company a p.scouted {
  font-size: 13px;
  margin: 0 0 1vh 0;
  color: #999;
}
@media screen and (max-width: 736px) {
  article.project a p.scouted,
  article.company a p.scouted {
    font-size: 11px;
    text-align: right;
  }
}
article.project a ul.tags,
article.company a ul.tags {
  display: flex;
  flex-wrap: wrap;
  margin: 1vh 0 2vh 0;
}
@media screen and (max-width: 736px) {
  article.project a ul.tags,
  article.company a ul.tags {
    margin: 10px 0;
  }
}
article.project a ul.tags li,
article.company a ul.tags li {
  border: 1px solid #999;
  padding: 7px 14px;
  line-height: 1;
  border-radius: 50px;
  font-size: 13px;
  margin: 0 5px 5px 0;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  article.project a ul.tags li,
  article.company a ul.tags li {
    font-size: 12px;
    margin: 0 5px 5px 0;
  }
}
article.project a ul.tags li:last-cgild,
article.company a ul.tags li:last-cgild {
  margin-right: 0;
}
article.project .limited,
article.company .limited {
  margin: -2.5vh 5vh 0 5vh;
  padding: 2.5vh 0 5vh 0;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 736px) {
  article.project .limited,
  article.company .limited {
    align-items: center;
    padding: 10px 0 20px 0;
  }
}
article.project .limited .likes,
article.company .limited .likes {
  position: relative;
  width: 10%;
  left: 20px;
}
@media screen and (max-width: 736px) {
  article.project .limited .likes,
  article.company .limited .likes {
    left: auto;
    width: auto;
  }
}
@media screen and (max-width: 736px) {
  article.project .limited,
  article.company .limited {
    margin: 0 15px 15px 15px;
  }
}
@media screen and (max-width: 736px) {
  article.project .limited time,
  article.company .limited time {
    display: block;
    font-size: 11px;
  }
}
article.project .limited p,
article.company .limited p {
  font-size: 14px;
  width: 90%;
}
article.project .limited p em,
article.company .limited p em {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold;
  font-size: 120%;
  color: #c50606;
}
.cbx {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 1em 0 0;
  display: inline-block;
  top: 2px;
}
@media screen and (max-width: 736px) {
  .cbx {
    display: block;
    margin: 0 auto 20px auto;
  }
}
.cbx input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  display: none;
}
.cbx label {
  width: 24px;
  height: 24px;
  background: none;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: url('#goo');
  filter: url('#goo');
  transform: trasnlate3d(0, 0, 0);
  pointer-events: none;
}
.cbx svg {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
}
.cbx svg path {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: stroke-dashoffset 0.3s ease;
  transition-delay: 0.2s;
}
.cbx input:checked + label {
  animation: splash 0.6s ease forwards;
}
.cbx input:checked + label + svg path {
  stroke-dashoffset: 0;
}
@-moz-keyframes splash {
  40% {
    background: #07f;
    box-shadow:
      0 -18px 0 -8px #07f,
      16px -8px 0 -8px #07f,
      16px 8px 0 -8px #07f,
      0 18px 0 -8px #07f,
      -16px 8px 0 -8px #07f,
      -16px -8px 0 -8px #07f;
  }
  100% {
    background: #07f;
    box-shadow:
      0 -36px 0 -10px transparent,
      32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent,
      0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent,
      -32px -16px 0 -10px transparent;
  }
}
@-webkit-keyframes splash {
  40% {
    background: #07f;
    box-shadow:
      0 -18px 0 -8px #07f,
      16px -8px 0 -8px #07f,
      16px 8px 0 -8px #07f,
      0 18px 0 -8px #07f,
      -16px 8px 0 -8px #07f,
      -16px -8px 0 -8px #07f;
  }
  100% {
    background: #07f;
    box-shadow:
      0 -36px 0 -10px transparent,
      32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent,
      0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent,
      -32px -16px 0 -10px transparent;
  }
}
@-o-keyframes splash {
  40% {
    background: #07f;
    box-shadow:
      0 -18px 0 -8px #07f,
      16px -8px 0 -8px #07f,
      16px 8px 0 -8px #07f,
      0 18px 0 -8px #07f,
      -16px 8px 0 -8px #07f,
      -16px -8px 0 -8px #07f;
  }
  100% {
    background: #07f;
    box-shadow:
      0 -36px 0 -10px transparent,
      32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent,
      0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent,
      -32px -16px 0 -10px transparent;
  }
}
@keyframes splash {
  40% {
    background: #07f;
    box-shadow:
      0 -18px 0 -8px #07f,
      16px -8px 0 -8px #07f,
      16px 8px 0 -8px #07f,
      0 18px 0 -8px #07f,
      -16px 8px 0 -8px #07f,
      -16px -8px 0 -8px #07f;
  }
  100% {
    background: #07f;
    box-shadow:
      0 -36px 0 -10px transparent,
      32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent,
      0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent,
      -32px -16px 0 -10px transparent;
  }
}
.table {
  width: 100%;
}
.table.mt {
  margin-top: 20px;
}
.table th,
.table td {
  display: block;
  letter-spacing: 0.05em;
}
.table th {
  padding-bottom: 10px;
  font-weight: bold;
  color: #414042;
}
@media screen and (max-width: 736px) {
  .table th {
    font-size: 14px;
  }
}
.table th span {
  color: #c00;
  font-size: 70%;
  margin: 0 0 0 1em;
  font-weight: bold;
}
.table td {
  padding-bottom: 2.5vh;
}
.table td.no-pd {
  padding-bottom: 0;
}
.table td .flex {
  display: flex;
  justify-content: space-between;
}
.table td .flex .zip {
  width: 68%;
}
@media screen and (max-width: 736px) {
  .table td .flex .zip {
    width: 50%;
  }
}
.table td .flex .zip + button {
  background: none;
  border: 2px solid #07f;
  color: #07f;
  width: calc(30% - 4px);
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
}
@media screen and (max-width: 736px) {
  .table td .flex .zip + button {
    width: calc(48% - 4px);
    font-size: 12px;
  }
}
@media screen and (max-width: 736px) {
  .table td {
    padding-bottom: 3vh;
    font-weight: normal;
    font-size: 13px;
  }
}
.table td ul.radio-list.modal {
  display: flex;
}
@media screen and (max-width: 736px) {
  .table td ul.radio-list.sp-no-flex {
    display: block;
  }
}
@media screen and (max-width: 736px) {
  .table td ul.radio-list li {
    margin: 0 1em 0 0;
  }
}
.table td ul.tag {
  display: flex;
  flex-wrap: wrap;
  margin: 1vh 0 2vh 0;
}
.table td ul.tag li {
  border: 1px solid #999;
  padding: 7px 14px;
  line-height: 1;
  border-radius: 50px;
  font-size: 13px;
  margin: 0 5px 0 0;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .table td ul.tag li {
    font-size: 12px;
    margin: 0 5px 5px 0;
  }
}
.table td ul.tag li:last-cgild {
  margin-right: 0;
}
.table td p + textarea {
  margin: 1em 0 0 0;
}
.table td textarea {
  height: 200px;
  letter-spacing: 0.05em;
}
.table td textarea.short {
  height: 100px;
}
@media screen and (max-width: 736px) {
  .table td textarea {
    font-weight: normal;
  }
}
.table td .people {
  position: relative;
}
.table td .people:after {
  content: '人';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #414042;
}
@media screen and (max-width: 736px) {
  .table td .people:after {
    font-size: 14px;
  }
}
.table td ul.two-list {
  display: flex;
  justify-content: space-between;
}
.table td ul.two-list li {
  width: 49%;
}
.table td ul.year-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table td ul.year-list.two li {
  font-size: 14px;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .table td ul.year-list.two li {
    font-size: 12px;
    font-weight: normal;
  }
}
.table td ul.year-list.two li:nth-child(1),
.table td ul.year-list.two li:nth-child(2) {
  width: 37%;
}
.table td ul.year-list.two li:nth-child(3) {
  width: 20%;
}
.table td ul.year-list.two li:nth-child(3):after {
  content: '';
}
.table td ul.year-list li {
  width: 32%;
  position: relative;
}
.table td ul.year-list li.now:after {
  display: none;
}
.table td ul.year-list li:after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #414042;
}
@media screen and (max-width: 736px) {
  .table td ul.year-list li:after {
    font-size: 14px;
  }
}
.table td ul.year-list li:nth-child(1):after {
  content: '年';
}
.table td ul.year-list li:nth-child(2):after {
  content: '月';
}
.table td ul.year-list li:nth-child(3):after {
  content: '日';
}
.table td ul.year-list li select {
  font-weight: bold;
  font-family: 'Roboto', sans-serif !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
@media screen and (max-width: 736px) {
  .table td ul.year-list li select {
    font-size: 14px;
  }
}
.table td ul.year-list li ::-ms-expand {
  display: none;
}
.profile-box {
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 736px) {
  .profile-box {
    flex-wrap: wrap;
  }
}
.profile-box .pic {
  overflow: hidden;
  margin: 0 2.5vh 0 0;
}
.profile-box .pic img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
}
@media screen and (max-width: 736px) {
  .profile-box .pic img {
    width: 100px;
    height: 100px;
  }
}
.profile-box .text h3 {
  margin: 0;
}
@media screen and (max-width: 736px) {
  .profile-box .text h3 {
    margin: 15px 0;
  }
}
.profile-box .text ul {
  display: flex;
  flex-wrap: wrap;
}
.profile-box .text ul li {
  font-size: 14px;
  margin: 0 1em 1vh 0;
  border-radius: 5px;
  background: rgba(0, 119, 255, 0.05);
  padding: 5px 10px;
}
@media screen and (max-width: 736px) {
  .profile-box .text ul li {
    font-weight: normal;
    font-size: 13px;
  }
}
.job-box {
  position: relative;
}
.job-box .portfolio {
  margin: 2.5vh 0 0 0;
}
@media screen and (max-width: 736px) {
  .job-box .portfolio {
    margin: 10px 0 0 0;
  }
}
.job-box .text:not(last-child) {
  margin-bottom: 2.5vh;
}
.job-box .text .portfolio ul {
  flex-wrap: wrap;
}
.job-box .text .portfolio ul li {
  width: 30%;
  margin: 0 5% 5% 0;
  padding: 0;
}
.job-box .text .portfolio ul li:nth-child(3n) {
  margin-right: 0;
}
.job-box .text .portfolio ul li:nth-last-child(-n + 3) {
  margin-bottom: 0;
}
.job-box .text .portfolio .popup_box img {
  margin-bottom: 2.5vh;
}
@media screen and (max-width: 736px) {
  .job-box .text .portfolio .popup_box img {
    margin-bottom: 0;
  }
}
.job-box .text h3 {
  margin: 0 0 1vh 0 !important;
  font-size: 18px !important;
}
@media screen and (max-width: 736px) {
  .job-box .text h3 {
    text-align: left !important;
    font-size: 14px !important;
  }
}
.job-box .text p {
  margin: 1vh 0 0 0;
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  .job-box .text p {
    font-weight: normal;
  }
}
.job-box .text ul {
  display: flex;
  flex-wrap: wrap;
}
.job-box .text ul:last-child {
  margin: 1vh 0 0 0;
}
.job-box .text ul li {
  font-size: 14px;
  margin: 0 1em 1vh 0;
  border-radius: 5px;
  background: rgba(0, 119, 255, 0.05);
  padding: 5px 10px;
}
@media screen and (max-width: 736px) {
  .job-box .text ul li {
    font-weight: normal;
    font-size: 13px;
  }
}
.image-crop {
  margin: 0 0 10px 0;
}
.image-crop label {
  display: block;
  text-align: center;
  color: #07f;
  border: 2px solid #07f;
  padding: 10px 30px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  font-weight: bold;
  font-size: 14px;
  width: 250px;
}
.image-crop label.change-btn {
  width: auto;
  padding: 0;
  border: none;
}
.image-crop label.change-btn:before {
  display: none;
  transition: all 0.2 ease-in-out;
}
.image-crop label.change-btn:hover:before {
  content: '';
  display: inline-block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAARtJREFUSEvVlMsZgjAQhGc7wU6gErUKuPl5I1VoJ9KJqcT1W5YI4REIj4N7hDD/MjtZwsFFB+tjHlBwAsYDQNprpgLhipJsqMkwYFrcaVoQshBkGuCLWxg6/TrVdy8ACYAgpAUUnIJxG7HCF3cUH9J1Say7o6RKHraAnN9NR/5hQ9mkxyFI810XwLWQofnBh6aas6ezDKCdin2X2nPA2TBMUDRAxcW+fo0PNxqQs9wB6VxzL9UmqEJ/RisAOnzNe50MaOIkpsOE7QwYhmIFQDqVNSGei0W2szqeMKS2uYoGHD5k9TzBB2dQPWwpGa7f+eo/CF2qsXfRFu0IGNtFsfLu/C++/W0ql0pW8Jaa2KZbJAPfbtucC5r6f8AXPiuvGWqPZecAAAAASUVORK5CYII=')
    no-repeat 50% 50%;
  background-size: 30px;
  position: relative;
  top: 3px;
  margin: 0 10px 0 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 736px) {
  .image-crop label {
    width: auto;
  }
}
.image-crop label span {
  font-weight: bold;
}
.image-crop label:before {
  content: '';
  display: inline-block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAARtJREFUSEvVlMsZgjAQhGc7wU6gErUKuPl5I1VoJ9KJqcT1W5YI4REIj4N7hDD/MjtZwsFFB+tjHlBwAsYDQNprpgLhipJsqMkwYFrcaVoQshBkGuCLWxg6/TrVdy8ACYAgpAUUnIJxG7HCF3cUH9J1Say7o6RKHraAnN9NR/5hQ9mkxyFI810XwLWQofnBh6aas6ezDKCdin2X2nPA2TBMUDRAxcW+fo0PNxqQs9wB6VxzL9UmqEJ/RisAOnzNe50MaOIkpsOE7QwYhmIFQDqVNSGei0W2szqeMKS2uYoGHD5k9TzBB2dQPWwpGa7f+eo/CF2qsXfRFu0IGNtFsfLu/C++/W0ql0pW8Jaa2KZbJAPfbtucC5r6f8AXPiuvGWqPZecAAAAASUVORK5CYII=')
    no-repeat;
  background-size: 100%;
  width: 20px;
  height: 17px;
  position: relative;
  top: 3px;
  margin: 0 10px 0 0;
}
.image-crop label > input {
  display: none;
}
canvas {
  border: 1px solid #ccc;
  cursor: crosshair;
}
canvas.report-chart {
  border: none;
}
.likes {
  display: inline-block;
  margin-left: -10px;
  margin-top: -5px;
}
@media screen and (max-width: 736px) {
  .likes {
    display: block;
    margin-top: 0;
  }
}
.likes .likes-icon {
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 736px) {
  .likes .likes-icon {
    width: 40px;
    height: 20px;
  }
}
.likes .likes-icon {
  background: url('../img/heart_animation.png');
  background-position: left;
  background-size: 2900%;
  background-repeat: no-repeat;
  width: 70px;
  height: 25px;
  display: block;
  cursor: pointer;
}
@keyframes heartBlast {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
.HeartAnimation {
  display: inline-block;
  background-position: right;
  -webkit-animation-name: heartBlast;
  animation-name: heartBlast;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: steps(28);
  animation-timing-function: steps(28);
  animation-fill-mode: forwards;
}
.scout-box {
  position: fixed;
  bottom: 2.5%;
  right: 2.5%;
  background: #fff;
  box-sizing: border-box;
  padding: 2.5vh;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  border-radius: 15px;
  width: 30%;
}
@media screen and (max-width: 736px) {
  .scout-box {
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
  }
}
.scout-box .status {
  width: auto;
  padding: 10px;
}
@media screen and (max-width: 736px) {
  .scout-box .status {
    width: 40%;
    margin-right: 5%;
    display: flex;
    padding: 5px 10px;
  }
}
.scout-box .status a p {
  width: 93%;
  padding-left: 7%;
}
@media screen and (max-width: 736px) {
  .scout-box .status a p {
    width: 85px;
    padding-left: 0;
  }
}
.scout-box .favorite {
  cursor: pointer;
  border: #d73d5c 1px solid;
  color: #d73d5c;
  background: #fff;
  border-radius: 50px;
  padding: 1.5vh 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 2.5vh 0;
}
@media screen and (max-width: 736px) {
  .scout-box .favorite {
    display: block;
    border: none;
    width: 20%;
    margin: 0;
    background: none;
    padding: 0;
  }
}
.scout-box .favorite .likes {
  display: inline-block;
  margin-left: -30px;
}
@media screen and (max-width: 736px) {
  .scout-box .favorite .likes {
    display: block;
    margin: 0 auto;
    pointer-events: none;
  }
}
.scout-box .favorite span {
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .scout-box .favorite span {
    font-size: 11px;
    pointer-events: none;
    letter-spacing: 0;
  }
}
button {
  cursor: pointer;
}
button.normal {
  display: block;
  background: #293056;
  color: #fff;
  border-radius: 0 50px 50px 0;
  border: none;
  padding: 8px 20px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  button.normal {
    border-radius: 50px;
  }
}
button.normal:hover {
  opacity: 0.7;
}
button.build {
  display: block;
  background: #e47f7f
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAT9JREFUSEu1VdttwzAQIzdpNmkmaT1J0kmaTJJs0m7CgoLOUFTLERT7fgIIBh93vAuxc3FnfLxEIOkdwAnAG4BfAF8k76XoYYIMflvowIGkyVK9QmBwO7iQnCTZyRnAneRxCwJlkKRYktv0k1STs/AhB1V7rPqaZ/HpWZA8DDnIKr9za1oBPJaDfnCQlRnAdp2GK8mLkST53Qqjppwcv7vi++UUraTCBCVwGmrv/swOJLVSEVhW9i/nz4hKgmYqADz09Rno4qJJcsTc+zoV/n4TgliUlkC3aCq3tMdJnSIPM26Lh+t821W8GdPvnsV8DtaIuhctx9SnwYSuSNJHcezmWI8uWlxP/7bKbUy74+p2UKJVC7nbsYvUbX/s7GYl1uPHrmpTK9btY9eT64qkjLVj6wFv85fZK2YoRb3g/u4PcAyZGdUHfIUAAAAASUVORK5CYII=')
    no-repeat 15% 50%;
  color: #fff;
  border-radius: 50px;
  border: none;
  padding: 10px 30px 10px 50px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}
button.build:hover {
  opacity: 0.7;
}
button.new-contents {
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  display: block;
  background: #fceae8
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAZlJREFUSEvFVe1tg0AMtcMUlYhKJgmZpGGRnC+LlE1KJilSkLpEiisDR8zXHVWbFik/kpj3/PH8jPDgBx+MD0GCK1EKdb1HxBQA5FMCQMHMJWw2ly1R4UtykeCDKPlkfu1AfRhlhHh4IhLiyTNLcD2dDCJSF10yc+6ybYgBUq7rZ0Q8AkAiVUnM9ny2Y4YJgQZnZpp7yYEI2a2uX1wyc/EDgq4t7wLAiIdQfx2RzAmZ35pKEDP93oCgMkaCZJB5bG02LrcyhuW32Fpf5WVs7c692wdWREdohzoI0CQ+Ai0KXX1P4Hrv67uPQBKZw7hXYIxkfwTELCbK5yQXJLjPooitPQiGJpDhJhHizmnaAYa23c1EiaRv868SSCLjKjVBoyCfPEMtUkLpVfh3Q9bLonW8VqZde9o9UkLpKxiZ27cXrXIqBOgVNFCRfNFW4ZPrWFWq+onFTFZeDQpCZqeXq/GvGXOcEIwd0h0YQLxEAM1xuYlFt0fI2fViMv9zcAZ+D5CgZMy8V9dNDkzxo5MZsoe1/weP/lqgpbgvAjVGKOL+3rEAAAAASUVORK5CYII=')
    no-repeat 12% 50%;
  color: #e47f7f;
  border-radius: 50px;
  border: none;
  padding: 15px 30px 15px 50px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  margin: 0 0 5vh 0;
  display: block;
  width: 100%;
}
@media screen and (max-width: 736px) {
  button.new-contents {
    padding: 15px 30px 15px 50px;
    margin-bottom: 0;
  }
}
button.new-contents:hover {
  opacity: 0.7;
}
button.appear {
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  display: block;
  background: #57a7dd
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAVpJREFUSEu1lY1tAjEMhZ83aScpTEKZpDBJj0mgk5RNXL2THeUS5xJVIRIKUn4++z07J3jxkBffjw1AVb8A3ETkOQucAHb5BQAvP86C5IA3AHcAnKdBSokqCIADgA+buc7xsPnG/3vZViarag4ZtYLSht6FVRRAeMGPSUcog/CsmCFHKGsk0UlErgWk6YmqEvDd8q4E0GQeOIvIEkBcsqWURFV/DbKIyNk3hmUqIu++YceTCzNt7FsD5FoO8Ag2B7mpAXnmgdg+NuraS74WARI9L6EAEgE+zY8QkOitTt4z3taoAkdSoTTZZdqrmqgZeSkriQXCxjtWJgdas1uvIuJdmxQLMmFAvLySbaSTCeBvbTR/FgJPNpGHGRSmesr+/uTLq8Yjzdj94KgqK+NkTeTPBCVhtT16kC5g5LXbg0wBBAVSd/JIpL09lsnBn4nNU9E7/N/1aRK1AvgDb6DVGbmhQ/QAAAAASUVORK5CYII=')
    no-repeat 15% 50%;
  color: #fff;
  min-width: 122px;
  border-radius: 50px;
  font-size: 14px;
  border: none;
  padding: 10px 30px 10px 50px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  width: 130px;
  box-sizing: border-box;
}
@media screen and (max-width: 736px) {
  button.appear {
    min-width: initial;
    font-size: 13px;
    background-size: 15px;
    padding: 10px;
  }
}
button.appear:hover {
  opacity: 0.7;
}
button.appear.hide {
  background: #ffc458
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWlJREFUSEvtlc1Nw0AQhb9XADcKABqB3KAKfhqADkg6AIk7QaIGriSVkAbgwJEDg57ZtdYbEwdQbrFk2fLOzjfzdmYsNnxpw/7ZAgYVXilRROwBp8AR4Hffi+TVzwdJ01WUHwERcQ2MB0P8Bk4lTfpslwAp6vsUtfc0DoC5pFlaz9kcAmdFRiNJOcPmcwdQObfhuZ2uyiIiLJ8DyvJ1IDXgOUU+kzTKjiPiALgDjoE34FHSVbFu5znrhaT9vNYCIsKp2qhjYMOIeAJOqkxueyAO0DBn3hx+CXhJi06xI0tEfNZyAq+SdktoX5AlIMvT0gsJ3oGdKoNfA1qJgM5BRcQNcPkviZLWOYu+czDkAvioD7na2ymQvjLNB+UynQx1al2mZQUt9UGKxFWQIf7UNFmqrrLR3GS2bRutdt4LKCCeQeuMCm8Zrz0qqrJzhO5Uw3z5vRx21rt3Bi012hpD7U8m2z/aoGwbl+gLnPKmGTYwD4QAAAAASUVORK5CYII=')
    no-repeat 15% 50%;
  color: #fff;
  border-radius: 50px;
  font-size: 14px;
  border: none;
  padding: 10px 30px 10px 50px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 736px) {
  button.appear.hide {
    font-size: 13px;
    background-size: 15px;
    padding: 10px;
  }
}
button.erase {
  display: block;
  background: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAZlJREFUSEu1Vct1wjAQnHUaITeTkzoAioBwC1QCqQRyI1AEpgOdgm9RI1h5K38iybItkgc3eMvM7szsivDgDz0YH4MEqVhOgWJC0FOApgAUgbICWgHJJZeHrK/JToJULEeE264C7cNQGskslwcVKgoSpGKxIWB7h3xKA/tcHt/9/7QI/gDeYGpg65M4BKUsxfcdnfulLNfa9sUhGIv5uUNz1nfkoYV+4xJ1lcfnurYhSMV8RaCd35KGXgNPGaE4WySm0zJdba8q0026LIKgsU1CKvmYBLUMXZLaXjQEL+J1p6FXAf0dEp6CNe73S2dXeZo5E4zFgs31da75nKxHhKHxoZkggqBJhyVXV0O4yqPBtgi6E2Rrzn/ire0jIdD+S36uY0xmQ/kM2Jr7xrf2JmgyH7Uqio7PXAwkH94CGpIEehMKBkc7l6e9N0H0cRtY9N8EOQT8JSIdg1fEXrIWQUkS3uhBZLOAA8eungIo3u4810Hw4AR1pw99cGyScrtvowTJRJtn01wjpUHZv57MGM1jagYf/RiQvpofsszoGT78iqgAAAAASUVORK5CYII=')
    no-repeat 25% 50%;
  color: #293056;
  border-radius: 50px;
  font-size: 14px;
  border: none;
  padding: 10px 25px 10px 45px;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border: 1px solid #293056;
}
button.erase.top {
  border: none;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
@media screen and (max-width: 736px) {
  button.erase {
    font-size: 13px;
    background-size: 15px;
    padding: 10px 10px 10px 20px;
  }
}
button.erase:hover {
  opacity: 0.7;
}
button.edit {
  background: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAASdJREFUSEu1lc0NgkAQhd8YLUK9YCdaiRpiB3rwpicTsQXETsRK5CIWYcKYcSUgf4ss7Iksy/dm3/xA6HhRx3wYCxy8p9WPorkEurHH+2zARgIfOLMHxlTABASvHs22y2EQCzUWSMMFLEAGLHle26OJkUAWLkDZG0R8FRGAd7Fdf9+gzBaJOLGroUCVLUwIJBeNLdLbopKc9v+beH0nFMHlq7L9NFGbAxO49gam8EqBNuClAm3BCwXahBcKOOfwmq3nOtVSVou5KnLckNVkHH3emcBzNzi6zwWBPQJf1vZ4aQrPCZzch8egBQg+mH2AdvEYznaovj3ViR+LTm54V9MwWUXtXxeeE5AEE8NSg4t9RL3bZjX0/wG2+kerI6ydRXUgVWc6F3gDTDD9GUccdA4AAAAASUVORK5CYII=')
    25% 50% no-repeat;
  color: #8b9de6;
  border-radius: 50px;
  border: none;
  font-size: 14px;
  padding: 10px 25px 10px 40px;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border: 1px solid #8b9de6;
}
button.edit.top {
  border: none;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
@media screen and (max-width: 736px) {
  button.edit {
    font-size: 14px;
    background-size: 20px;
    padding: 10px 10px 10px 20px;
  }
}
button.copy {
  background: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAANFJREFUSEtjZKAxYKSx+QwELWjYftmBken/fAYGBgUiHfPg/z/GxAZP3QMg9QQtaNp1af///wwORBoOU/ag3l1PkSgLGnde+g9SWO+uR9AxIHXo6glqGrUAHkSUphZY7OKMA0pTC0ELKI3MwWcBzEfoGQyWH3D5GGccoEvQ3AJCRQMuB4CLB0aGA3Vueo4oRQW5kYzFIdgLO2oFEbqF8IxGdwuIjQNCpSxOH1DdAnKKCuTUgstBKIUdE/P/ehJqL5TUQtACQkFCrjzBGo1cg2H6ABYQzxn8o7V8AAAAAElFTkSuQmCC')
    15% 50% no-repeat;
  color: #81b9d2;
  border-radius: 50px;
  border: none;
  font-size: 14px;
  padding: 10px 30px 10px 50px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border: 1px solid #81b9d2;
}
button.copy.top {
  border: none;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
@media screen and (max-width: 736px) {
  button.copy {
    font-size: 14px;
    background-size: 15px;
    padding: 10px;
  }
}
button.report {
  background: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA0klEQVRIS2NkoDFgpLH5DBgWNOw6b8D4n2U+A8N/A3yW////v7DBQ38CIQdiWNC069L+//8ZHAhpBMkTYwmGBY07L/0nZDhQ0wSgogJiLCHLgnp3PcamnZf6ibGEbAtArifGEoosIMYSii1AtwQUfMhxSJYF+BIBSRbAFBOTsmCWjnALiAkyioJo+FmAzUdUDaLBbwGhYhubPDFBdB+oUYEcwxkYGC/Uu+sa4i2LGrafd2BkYgZWmaRZwsjIcODfX4aFDZ56C/BaQJ7LceuieasCAG9ZzxlWJWtmAAAAAElFTkSuQmCC')
    15% 50% no-repeat;
  color: #81b9d2;
  border-radius: 50px;
  border: none;
  font-size: 14px;
  padding: 10px 25px 10px 40px;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border: 1px solid #81b9d2;
}
button.report.top {
  border: none;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
@media screen and (max-width: 736px) {
  button.report {
    font-size: 14px;
    background-size: 15px;
    padding: 10px;
  }
}
button.clone {
  background: none;
  border: 2px solid #07f;
  color: #07f;
  width: calc(30% - 4px);
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  padding: 10px 0;
  margin: 2.5vh 0 0 0;
}
button.clone:before {
  content: '+';
  margin: 0 1em 0 0;
}
button.new {
  background: #c50606;
  color: #fff;
  border-radius: 50px;
  border: none;
  font-size: 16px;
  padding: 15px 45px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 736px) {
  button.new {
    font-size: 14px;
    background-size: 15px;
    padding: 10px 30px;
  }
}
button.new:before {
  content: '+';
  display: inline-block;
  margin: 0 10px 0 0;
}
.input-area .dummy-back {
  padding: 10px 10px 0 10px;
  position: relative;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWNJREFUSEvVleFxwjAMhS1vYGeAwiSFSVomaToJdJKmkzQL2N7A4p7PzhlqOzkSfjR3OR+B6JOepAeJJ1/05PiiCnDO7bz3b0R0EELgHpl5wCml/FJKjUuSKwKMMR9E1DcCAHbpuu5zDvIHYK39jhkLZu6llD9KqQEV4bn3/iWDD1rrYwtyA3DOvTPzGTIQ0QmBSy8DxsxIBGffqmQCxJd+EZCIjrXgCeicO0RIM5kJkHSP2p7mtMX3xpgzEaHqahU5IPw4SnNZAsiqqPZiAlhrIc+OiPZLRzCTddRa70tJrQIgoLWWcWqtiyOfA8J4Lmlw1ugwda2+bdVkLF1xMLYYU4x1tW+PLlragbDtixYt6ZpmG5+hLaxCCJE2Ggb4eudTWDQsZtH8HjW7kDn2BqMdraUIadp1NDdkDLvGFSw7SZJ7Ug2y+g9nDrIagLJyyL3VbAJIEEiqlLrxsc0ANXP8/4ArgG0HKIXFn+EAAAAASUVORK5CYII=')
    #fff no-repeat 98% 50%;
  background-size: 20px;
  border-radius: 5px;
}
@media screen and (max-width: 736px) {
  .input-area .dummy-back {
    padding: 10px 10px 10px 10px;
  }
}
.input-area .dummy-back.no-back {
  background: #fff;
}
.input-area .dummy-back.no-back input[type='text'] {
  background: #fff;
}
.input-area #search-text {
  padding: 0;
}
.input-area #selected ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: 30px;
}
.input-area #selected ul li {
  margin: 0 10px 0 0;
  width: auto !important;
}
.input-area #selected ul li input[type='text'] {
  font-size: 13px;
}
.input-area #selected ul li input[type='text']:nth-child(n + 1) {
  margin-top: 0 !important;
  padding: 3px;
}
.input-area #selected ul li span {
  position: relative;
}
.input-area #selected ul li span i {
  position: absolute;
  right: 10px;
  top: 16px;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
}
.input-area #selected ul li span input[type='text'] {
  margin-top: 0 !important;
  background: rgba(0, 119, 255, 0.1);
  font-size: 13px;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 10px 0;
}
.input-area #selected ul li span input[type='text']#search-text {
  background: #fff;
}
.target-area {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 0 0;
}
.target-area li {
  width: auto !important;
}
.target-area li button {
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border: none;
  font-size: 13px;
  font-weight: bold;
  margin: 10px 10px 0 0;
  border-radius: 5px;
}
.target-area li button:before {
  content: '+';
  margin: 0 5px 0 0;
  color: #07f;
}
.target-area .hidden {
  display: none;
}
.status {
  border-radius: 50px;
  padding: 5px 10px;
  width: 140px;
  margin-left: auto;
}
@media screen and (max-width: 736px) {
  .status {
    width: 110px;
  }
}
.status a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.status a p {
  width: 80%;
}
.status a i {
  background: #07f;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 2px;
  text-align: center;
  display: block;
}
.status a i svg {
  width: 16px;
  position: relative;
  top: -2px;
}
.status p {
  font-size: 13px;
  text-align: center;
}
@media screen and (max-width: 736px) {
  .status p {
    font-size: 12px;
  }
}
.status.scout {
  background: rgba(0, 132, 255, 0.1);
}
.status.scout p {
  color: #07f;
}
.status.publish {
  background: rgba(109, 110, 113, 0.1);
}
.status.publish p {
  color: #333;
}
.status.match {
  background: rgba(241, 90, 41, 0.1);
}
.status.match p {
  color: #f15a29;
}
.message-flex {
  display: flex;
}
.message-flex + p {
  color: #999;
}
.message-flex .toggle_button {
  position: relative;
  width: 75px;
  height: 35px;
  margin: 0;
}
.message-flex p {
  font-size: 85%;
  margin: 0 10px 0 0;
  position: relative;
  top: 3px;
}
.message-flex .toggle_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.message-flex .toggle_label {
  width: 50px;
  height: 25px;
  background: rgba(0, 119, 255, 0.1);
  position: relative;
  display: inline-block;
  border-radius: 40px;
  transition: 0.4s;
  box-sizing: border-box;
}
.message-flex .toggle_label:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.message-flex .toggle_input:checked + .toggle_label {
  background-color: #07f;
}
.message-flex .toggle_input:checked + .toggle_label:after {
  left: 25px;
}
p.setting-password {
  margin: 2.5vh 0 10px 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
p.setting-password:hover {
  opacity: 0.7;
}
p.setting-password span {
  border: 2px solid #07f;
  color: #07f;
  width: calc(30% - 4px);
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  padding: 10px 30px;
  margin: 2.5vh 0 0 0;
}
ul.radio-list-change.payment li input[type='radio'] + label::before {
  top: 22px;
  transform: translateY(0);
}
@media screen and (max-width: 736px) {
  ul.radio-list-change.payment li input[type='radio'] + label::before {
    top: 20px;
  }
}
ul.radio-list-change.payment li input[type='radio'] + label::after {
  top: 26px;
  transform: translateY(0);
}
@media screen and (max-width: 736px) {
  ul.radio-list-change.payment li input[type='radio'] + label::after {
    top: 24px;
  }
}
ul.radio-list-change li {
  position: relative;
  width: auto !important;
}
ul.radio-list-change li:not(:last-child) {
  margin: 0 0 1.5vh 0;
}
ul.radio-list-change li input[type='radio'] {
  position: absolute;
  left: 2.6vh;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
ul.radio-list-change li input[type='radio'] + label::before,
ul.radio-list-change li input[type='radio'] + label::after {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}
ul.radio-list-change li input[type='radio'] + label::before {
  background-color: #fff;
  border: 1px solid #07f;
  height: 20px;
  width: 20px;
  left: 20px;
}
@media screen and (max-width: 736px) {
  ul.radio-list-change li input[type='radio'] + label::before {
    left: 15px;
  }
}
ul.radio-list-change li input[type='radio'] + label::after {
  background: #07f;
  opacity: 0;
  height: 14px;
  width: 14px;
  left: 24px;
}
@media screen and (max-width: 736px) {
  ul.radio-list-change li input[type='radio'] + label::after {
    left: 19px;
  }
}
ul.radio-list-change li input[type='radio']:checked + label::after {
  opacity: 1;
}
ul.radio-list-change li label {
  display: block;
  padding: 2.5vh 2.5vh 2.5vh 7.5vh;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  transition: all 0.2s ease-in-out;
  color: #414042;
}
ul.radio-list-change li label h3 {
  font-weight: bold;
  font-size: 18px;
  color: #414042;
}
@media screen and (max-width: 736px) {
  ul.radio-list-change li label h3 {
    font-size: 16px;
  }
}
ul.radio-list-change li label h3 small {
  font-size: 80%;
  font-weight: bold;
}
ul.radio-list-change li label p {
  font-size: 14px;
  font-weight: bold;
}
ul.radio-list-change li label p span {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold;
  font-size: 18px;
}
ul.radio-list-change li label p small {
  font-size: 12px;
  display: inline-block;
  margin: 0 0 0 10px;
}
@media screen and (max-width: 736px) {
  ul.radio-list-change li label p small {
    margin: 0;
    font-size: 11px;
  }
}
ul.radio-list-change li input[type='radio']:checked + label {
  background: #07f;
  color: #fff;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
}
ul.radio-list-change li input[type='radio']:checked + label h3,
ul.radio-list-change li input[type='radio']:checked + label p {
  color: #fff;
}
ul.radio-list-change li .label:hover {
  background-color: #e2edf9;
}
.bo {
  border-top: 1px dotted #999;
  margin-bottom: 2.5vh;
}
ul.alert {
  border: 2px solid #d73d5c;
  color: #d73d5c;
  padding: 2.5vh;
  margin: 0 0 5vh 0;
  line-height: 2;
}
ul.alert li {
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  ul.alert li {
    font-size: 13px;
  }
}
ul.alert li:not(:last-child) {
  margin-bottom: 10px;
}
.confirm {
  text-align: center;
  font-size: 14px;
  margin: 3vh 0;
}
@media screen and (max-width: 736px) {
  .confirm {
    text-align: left;
  }
}
.confirm input[type='checkbox'] {
  display: none;
}
.confirm input[type='checkbox'] + label {
  font-weight: bold;
  color: #414042;
  letter-spacing: 0.05em;
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
  cursor: pointer;
}
@media screen and (max-width: 736px) {
  .confirm input[type='checkbox'] + label {
    font-size: 13px;
    padding-left: 40px;
    display: block;
  }
}
.confirm input[type='checkbox'] + label a {
  text-decoration: underline;
  font-weight: bold;
  color: #414042;
}
.confirm input[type='checkbox'] + label:last-child {
  margin-bottom: 0;
}
.confirm input[type='checkbox'] + label:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid #666;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  -webkit-transition:
    all 0.12s,
    border-color 0.08s;
  transition:
    all 0.12s,
    border-color 0.08s;
}
@media screen and (max-width: 736px) {
  .confirm input[type='checkbox'] + label:before {
    width: 20px;
    height: 20px;
    top: 0;
  }
}
.confirm input[type='checkbox']:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border: 2px solid #c00;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.confirm input[type='submit'] {
  background: linear-gradient(45deg, #27aae1, #000fff);
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border: none;
  border-radius: 50px;
  width: 30%;
  margin: 30px auto 0 auto;
  padding: 2vh 1.5vh;
  display: block;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 736px) {
  .confirm input[type='submit'] {
    width: 100%;
  }
}
p.quit a {
  text-decoration: underline;
}
p.back {
  margin: 5vh 0 0 0;
}
p.back a {
  font-size: 13px;
}
@media screen and (max-width: 736px) {
  p.back a {
    font-size: 11px;
  }
}
p.back a:before {
  content: '<';
  display: inline-block;
  margin: 0 10px 0 0;
  transform: scale(0.7, 1);
}
#preview img {
  margin-bottom: 1.5vh;
}
@media screen and (max-width: 736px) {
  .sp-wid {
    min-width: 100px !important;
  }
}

.select-wrap.is-company {
  margin-top: 10px;
}
.table td .flex .zip.is-company {
  max-width: 200px;
  width: 100%;
}
#after-login section .table-wrap2 table tbody td ul.btn-list.is-two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  /* flex-wrap: wrap; */
}
#after-login section .table-wrap2 table tbody td ul.btn-list.is-two-col li {
  margin: 0;
  width: 100%;
}
#after-login section .table-wrap2 table tbody td ul.btn-list.is-two-col li .copy {
  width: 100%;
  background-position: 25% 50%;
}
.is-two-col .preview.top {
  display: block;
  text-decoration: none;
  border: none;
  box-sizing: border-box;
  text-align: center;
  /* background: #fff
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAcxJREFUSEvFlV9O20AQxn9j6GPPgDlJnEv0tXEi7kASpKYSRn3iBsR5bE9BkLhHfI5I8aBde+013mCg0K6Ul3jm++bPNzPCJz/5ZHyGCfKrBMoRKglgfgXKlkgLiB5Ir7cvBXmcIL+M0ZO8Bn0Jo0AOY9JfRcgoTJAvfqCyqh0KRDdNtIa4jBIizlCZALHNytikNz+fk/QJfHDRVcipATFkRN+bYAL2XYKqLDsLIDIeqm9LdJWgel9lIqnv1yVYL41RgrJhlqUNwHr5m4PMubiuyEOvzbxgmp07k5bgbjFBxDS1Y2AN10sF9ghz0uw2TOCJwsu+JXARhOpeEbj3iDJnlj32iAIYXgbLHGGCasrsZtNx7hJUn5Rbvn6Z8221D/RiyzQb21Z6dTb1jZHDeU/TIYLKe2ezmWZ/LE4rkqbMH0vQ9gummcX2CSoFheT52hI5oXgq/IdNNkvNDYun41fLtCpPPUetULwMPB2/Z9DuahVCo6BuD7oqICjXo1PcZN9bMf1l1040DC07G5S3eQeXncvC35DuwKAPRGV9XE7j+gi5dX00mP90cFyt7b4/jSnLGGSE2JNpnjkw2787mcca+sb/h4/+GwGfmz8BQRARKDf3KisAAAAASUVORK5CYII=)
    no-repeat 10% 50%; */
  background-color: #fff;
  width: 100%;
  font-size: 14px;
  /* padding: 10px 10px 10px 20px; */
  padding: 10px;
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 0px 10px 10px -5px rgba(123, 130, 137, 0.5);
  color: #009e7b;
}

input[type="text"]:disabled {
    background-color: #ccc;
}