@charset "UTF-8";

body {
  font-family: YakuHanJP, "Roboto Condensed", "Noto Sans JP", "游ゴシック体",
    "Yu Gothic", YuGothic, sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #242424;
}

img {
  width: 100%;
  height: auto;
}

a {
  transition: all .7s;
}

textarea {
  width: 100%;
}

a:hover {
  opacity: .8;
}

.container {
  max-width: 1000px;
  padding: 140px 0 180px;
  margin: 0 auto;
  width: 100%;
}

#main {
  margin-bottom: 40px;
}

.entry-header {
  display: none;
}

.entry .entry-header {
  display: block;
}

.entry .basic {
  display: none;
}

.header-bar {
  padding: 2.5px 5px 5px;
  width: 100%;
  border-bottom: 1px solid #999;
}

.header-bar p {
  font-size: 14px;
  letter-spacing: 1px;
}

.header-inner {
  display: flex;
  padding: 10px 15px;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  border-bottom: 1px solid #999;
}

.header-logo {
  width: 160px;
}

.header-menu-pc{
  display:flex;
  justify-content: center;
  justify-items: center;
  flex-wrap:wrap;
  width:600px;
}
.header-inner2{
  display:none;
  border-bottom: 1px solid #999;
  padding: 4px 8px;
}
.header-menu-sp{
  display:none;
  justify-content: center;
  justify-items: center;
  flex-grow: 0;    /* 最後の子要素はflexの影響を受けない */
  align-self: flex-start; /* 子要素の位置を上側に固定 */
  width: 100%;     /* 100%の幅を取ることで次の行に折り返す */
}
.header-menu-pc a,
.header-menu-sp a{
  display:inline-block;
  /* border-bottom:1px #AAA solid;
  padding-bottom:3px; */
}

.header-menu-pc a:not(:nth-of-type(1)),
.header-menu-sp a:not(:nth-of-type(1)){
  margin-left:5%;
}
.header-menu-sp .sepa{
  display:none;
  align-self:center;
  padding:0 1%;
}
@media (max-width: 934px) {
  .header-menu-pc{
    display:none;
  }
  .header-inner2{
    display:block;
  }
  .header-menu-sp{
    display:flex;
  }
}
@media (max-width: 525px) {
  .header-menu-sp .icon{
    display:none;
  }
  .header-menu-sp .sepa{
    display:inline;
  }
  .header-menu-sp a{
    flex:1;
    align-self:center;
    text-align:center;
    font-size:0.75rem;
  }
  .header-menu-sp a:not(:nth-of-type(1)){
    margin-left:unset;
  }

  
}
@media (max-width: 470px) {
  .header-menu-sp a{
    font-size:0.70rem;
  }
  .header-menu-sp .sepa{
    padding:0 0%;
  }
}
@media (max-width: 400px) {
  .header-menu-sp a{
    font-size:0.72rem;
  }
  
}

.header-flex-btn {
  display: flex;
}

.login-btn {
  width: 100px;
  margin-right: 10px;
  height: 37.5px;
}

.login-btn a {
  border: 1px solid #707070;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #707070;
  text-align: center;
  line-height: 37.5px;
  display: block;
  width: 100%;
  height: 100%;
}

.entry-btn {
  width: 140px;
  height: 37.5px;
}

.entry-btn a {
  border: 1px solid #5896D2;
  border-radius: 5px;
  font-size: 12px;
  background-color: #5896D2;
  font-weight: 600;
  color: #fff;
  text-align: center;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 37.5px;
}

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

.header-nav ul {
  display: flex;
  margin-right: 30px;
  align-items: center;
}

.header-nav ul li {
  width: 70px;
  margin-right: 15px;
  text-align: center;
}

.header-nav ul li img {
  width: auto;
  margin: 0 auto 5px;
  max-height: 30px;
}

.header-nav ul li p {
  font-size: 12px;
  font-weight: bold;
}

.header-nav ul li:last-child {
  margin-right: 0px;
}

.logout-btn {
  width: 140px;
  margin-right: 10px;
  height: 37.5px;
}

.logout-btn a {
  border: 1px solid #EA5755;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #EA5755;
  text-align: center;
  line-height: 37.5px;
  display: block;
  width: 100%;
  height: 100%;
}

.change-btn a {
  display: block;
  margin-right: 15px;
  line-height: 37.5px;
}

.change-btn a img {
  display: inline-block;
  width: 20px;
  margin-right: 5px;
  vertical-align: sub;
}

.change-btn a p {
  display: inline;
  font-size: 12px;
  font-weight: 600;
  color: #F7D667;
}

.copyright {
  text-align: center;
  padding: 20px 0 0px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #fff;
  border-top: 1px solid #fff;
}

footer {
  background-color: #EA5755;
  padding: 20px 0;
}

.footer-nav {
  margin-bottom: 20px;
}

.footer-nav ul {
  display: flex;
  max-width: 400px;
  width: 95%;
  margin: 0 auto;
  justify-content: space-between;
}

.footer-nav ul li {
  font-size: 14px;
}

.footer-nav ul li a {
  color: #fff;
}

.footer-nav ul li:last-child {
  margin-right: 0px;
}

.sp {
  display: none !important;
}

.entry .entry-title {
  margin-bottom: 40px;
  text-align: center;
  background-color: initial;
  padding: 0px;
  box-shadow: none;
}

.entry .entry-title h2 {
  font-size: 24px;
  letter-spacing: 1px;
  font-weight: bold;
}

.entry .entry-title p {
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: bold;
}

.entry-form {
  max-width: 700px;
  margin: 0 auto;
}

.entry-form .email-form p {
  font-size: 12px;
  padding-bottom: 5px;
}

.entry-form .email-form input {
  display: block;
  width: 100%;
  margin: 0 auto 10px;
  border-radius: 5px;
  border: 1px solid #707070;
  padding: 12.5px 5px;
}

.entry-form button {
  width: 100%;
  margin: 0 auto 10px;
  border-radius: 5px;
  padding: 12.5px 5px;
  background-color: #EA5755;
  color: #fff;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12), 0 2px 3px 0 rgba(0, 0, 0, .22);
  transition: .3s;
}

.line-btn {
  display: block;
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  padding: 12.5px 5px;
  background-color: #46C32A;
  color: #fff;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12), 0 2px 3px 0 rgba(0, 0, 0, .22);
  transition: .3s;
}

.entry-form button:hover,
.line-btn:hover {
  box-shadow: none;
}

.entry-form-in-img {
  max-width: 400px;
  width: 100%;
  margin: 0 auto 60px;
}

.entry-form-in-text p {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  line-height: 1.8;
  padding-bottom: 60px;
}

.entry-form-in-text ul {
  padding-left: 15px;
}

.entry-form-in-text li {
  font-size: 14px;
  line-height: 1.8;
  list-style: circle;
}

.contact-ttl {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}

.contact-table {
  padding: 10px;
  width: 100%;
  margin-bottom: 40px;
  border: 4px solid #EA5755;
}

.contact-item,
.contact-body {
  padding: 15px 10px;
}

.contact-item {
  text-align: left;
  width: 30%;
  font-size: 14px;
  color: #242424;
  background-color: #eee;
  vertical-align: middle;
}

.contact-item span {
  padding: 0px 2.5px 1px;
  font-size: 12px;
  border: 1px solid #EA5755;
  color: #EA5755;
  line-height: 1;
  margin-left: 10px;
}

.contact-body {
  width: 70%;
}

.name-body .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0 -0.3em;
}
.name-body .row .col {
    padding: 0 0.3em;
}
.contact-body .anno {
    font-size: 80%;
    color: #AAA;
}
.address-body input {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  margin-bottom: 5px;
  width: 100%;
}

.entry input[type="password"],
.entry input#input_pass01,
.entry input#input_pass02 {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  margin-bottom: 5px;
  width: 60%;
}

.password-wrap {
  margin-bottom: 10px;
}

.password-wrap label {
  margin-bottom: 5px;
  display: block;
}

.password-wrap button {
  width: 45px;
  margin: 0 auto 5px 2.5px;
  border-radius: initial;
  padding: 2px 0px 2.5px;
  background-color: initial;
  color: #999;
  font-size: 12px;
  border: 1px solid #999;
  text-align: center;
  box-shadow: initial;
  display: inline-block;
}

.address-body span {
  font-size: 16px;
  vertical-align: text-bottom;
}

.address-body input:nth-child(2) {
  display: inline-block;
  width: 180px;
}

.address-body input:nth-child(4) {
  margin-bottom: 0px;
}

.entry input[type="password"]:nth-child(2) {
  margin-bottom: 0px;
}

.login-id {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.login-id p {
  font-size: 14px;
  color: #707070;
  align-items: center;
  font-weight: bold;
}

.login-id p:nth-child(1) {
  display: inline-block;
  margin-right: 20px;
  font-weight: 300;
}

.entry .form-text {
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.entry .contact-sex+.entry .contact-sex {
  margin-left: 10px;
}

.entry .contact-sex-txt {
  display: inline-block;
  margin-left: 5px;
}

.entry .form-select {
  width: 180px;
  height: 40px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.entry .contact-skill {
  display: block;
}

.entry .contact-skill+.entry .contact-skill {
  margin-top: 10px;
}

.entry .contact-skill-txt {
  display: inline-block;
  margin-left: 5px;
}

.contact-sex {
  display: inline-block;
  margin-right: 10px;
}

.entry .contact-submit {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: 0 auto;
  border-radius: 5px;
  padding: 12.5px 5px;
  background-color: #EA5755;
  color: #fff;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12), 0 2px 3px 0 rgba(0, 0, 0, .22);
  transition: .3s;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.entry .close-btn {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: 10px auto 0;
  border-radius: 5px;
  padding: 12.5px 5px;
  background-color: #fff;
  border: 1px solid #ea5755;
  color: #ea5755;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12), 0 2px 3px 0 rgba(0, 0, 0, .22);
  transition: .3s;
  cursor: pointer;
}

.entry-flow {
  max-width: 400px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between;
}

.entry-flow li {
  width: 30%;
  text-align: center;
  border: 2px solid #CACACA;
  color: #CACACA;
  font-size: 16px;
  font-weight: 600;
  padding: 7.5px 0;
}

.entry-flow li.flow-current {
  border: 2px solid #FFB100;
  color: #fff;
  background-color: #FFB100;
}

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

.agree-link p {
  font-size: 12px;
  letter-spacing: 1px;
}

.agree-link p a {
  color: #5896D2;
}

.modalArea {
  display: none;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  padding: 20px 15px 30px;
  background-color: #fff;
  overflow: scroll;
  height: 80%;
}

.entry .modalWrapper {
  height: initial;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
  font-size: 20px;
  color: #777;
  font-weight: 600;
}

.modal-flex {
  display: flex;
  align-items: center;
  width: 300px;
  margin: 0 auto 15px;
}

.modal-flex-img {
  width: 100px;
  margin-right: 10px;
}

.modal-text .modal-flex-num p {
  font-size: 24px;
  font-weight: bold;
}

.modal-text {
  margin-bottom: 15px;
}

.line-register-txt {
  margin-bottom: 40px;
}

.line-register-txt p {
  font-size: 16px;
  font-weight: 500;
  color: #35c759;
}

.certification-title {
  margin-top: 60px;
}

.complete-title {
  margin: 60px auto;
}

.complete-title h2 {
  color: #46C32A;
}

.top-btn {
  background-color: #EA5755;
  max-width: 300px;
}

.password_form {
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
}

.password_form img {
  display: block;
  width: 270px;
  margin: 0 auto 10px;
}

.password-box {
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  border-radius: 5px;
  padding: 15px 10px 10px;
}

.login_form {
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
}

.login_form img {
  display: block;
  width: 90%;
  margin: 0 auto 10px;
}

.login-box {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 5px;
  padding: 15px 10px 10px;
}

.login-box h2 {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 7.5px;
}

.password-box h2 {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 7.5px;
}

.login-box input {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 2.5px;
  padding: 7.5px 2.5px;
  display: block;
  margin-bottom: 7.5px;
}

.password-box input {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 2.5px;
  padding: 7.5px 2.5px;
  display: block;
  margin-bottom: 7.5px;
}

.login-box input[type="password"] {
  width: 100%;
}

.password-box input[type="password"] {
  width: 100%;
}

.login-box .line-btn {
  padding: 7.5px 5px;
  font-size: 14px;
}

.password-box .line-btn {
  padding: 7.5px 5px;
  font-size: 14px;
}

.login-box button {
  width: 100%;
  margin: 10px auto;
  border-radius: 5px;
  padding: 7.5px 5px;
  background-color: #EA5755;
  color: #fff;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12), 0 2px 3px 0 rgba(0, 0, 0, .22);
  transition: .3s;
}

.password-box button {
  width: 100%;
  margin: 10px auto;
  border-radius: 5px;
  padding: 7.5px 5px;
  background-color: #EA5755;
  color: #fff;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12), 0 2px 3px 0 rgba(0, 0, 0, .22);
  transition: .3s;
}

.login-box p {
  text-align: center;
}

.password-box p {
  text-align: center;
}

.login-box span {
  font-size: 12px;
}

.password-box span {
  font-size: 12px;
}

.forget-link {
  text-align: center;
  margin-top: 5px;
}

.forget-link a {
  font-size: 12px;
  letter-spacing: 1px;
  color: #2793fa;
}

.main-flex {
  display: flex;
}

.col {
  width: 100%;
}

#side,
#side-sp,
#side_profile {
  width: 220px;
  margin-right: 30px;
}

.side-container {
  width: 220px;
}

.side-container li:not(.agent-offer-banner) {
  border: 1px solid #707070;
  border-left: 8px solid #EA5755;
  margin-bottom: 10px;
}

.side-container li.current-item:not(.agent-offer-banner) {
  background-color: #FFD9D9;
}

.side-container li img:not(.agent-offer-banner img) {
  width: auto;
  display: inline-block;
  margin-right: 5px;
  height: 20px;
}

.side-container li a:not(.agent-offer-banner > a) {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  width: 100%;
  height: 100%;
  display: block;
  padding: 15px 10px 15px 12.5px;
}

.search-box {
  border: 1px solid #707070;
  border-radius: 5px;
  padding: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  margin: 0 auto 15px;
}

.search-box h3 {
  padding-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
}

.search-box h4 {
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
}

.search-flexs form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 84.5%;
}

.search-flex-content {
  width: 49%;
  margin: 0 auto 15px;
}

.search-flex-content input,
.search-flex-content select {
  background-color: #F5F5F5;
  font-size: 14px;
  padding: 5px 2.5px;
  width: 48%;
}
.search-flex-content input{
  height:1.5rem;
}

.search-submit {
  width: 15%;
}

.search-submit input {
  width: 100%;
  border-radius: 5px;
  padding: 7.5px 5px;
  background-color: #EA5755;
  color: #fff;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .12), 0 2px 3px 0 rgba(0, 0, 0, .22);
  transition: .3s;
}

.search-form {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form a {
  font-size: 12px;
  width: 7.5%;
  padding: 5px 0px;
  background-color: #CACACA;
  text-align: center;
  font-weight: 600;
}

.search-form form {
  position: relative;
  width: 90%;
}

#sbox {
  outline: 0;
  width: 92.5%;
  height: 42.5px;
  padding: 0 5px;
  border-radius: 5px 0 0 5px;
  background: #eee;
  border: 1px solid #EA5755;
}

#sbtn {
  width: 7.5%;
  height: 42.5px;
  border-radius: 0 5px 5px 0;
  background: #EA5755;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin-left: -5px;
}

.search-conditions {
  margin-bottom: 20px;
  display: flex;
}

.search-conditions .keep {
  font-size: 12px;
  width: 120px;
  padding: 5px 0px;
  background-color: #CACACA;
  text-align: center;
  font-weight: 600;
  display: inline-block;
  margin-right: 10px;
}

.search-conditions ul li a {
  color: #EA5755;
  text-decoration: underline;
  font-size: 12px;
  margin-right: 5px;
}

.search-map {
  height: 600px;
  width: 100%;
}

.search-map iframe {
  width: 100%;
  height: 100%;
}

.big-title {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-top: 6px solid #EA5755;
  padding: 10px 25px 12.5px;
  width: 100%;
  margin: 0 auto 20px;
  position: relative;
}

.big-title h2 {
  font-size: 20px;
  font-weight: bold;
}

.search_table table {
  width: 100%;
  margin: 0 auto 40px;
  border-collapse: collapse;
}

.search_table th {
  text-align: right;
  width: 30%;
  font-size: 14px;
  color: #242424;
  background-color: #eee;
  padding: 10px;
  border: #707070 1px solid;
}

.search_table td {
  width: 70%;
  padding: 10px;
  border: #707070 1px solid;
}

.search_table input[type="text"] {
  width: 100%;
  display: block;
  margin: 0px auto 5px;
  border: 1px solid #707070;
  padding: 2.5px;
  font-size: 14px;
}

.search_table input[type="text"]:nth-child(3) {
  margin: 0px auto;
}

.search_table select {
  width: 48%;
  border: 1px solid #707070;
  padding: 2.5px;
  font-size: 14px;
}

.search_table input[type="number"] {
  width: 48%;
  border: 1px solid #707070;
  padding: 2.5px;
  font-size: 14px;
}

.search_table .search-submit {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.keep-checks {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.keep-check {
  margin-right: 20px;
}

.keep-check label {
  vertical-align: text-top;
  font-size: 14px;
}

.keep-delete button {
  background-color: #ddd;
  border: 1px solid #242424;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 12px;
}

.search_tables li {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.search_tables-title {
  border: #707070 1px solid;
  border-top: 6px solid #EA5755;
  border-bottom: none;
  padding: 7.5px 15px;
  position: relative;
}

.search_tables-title input {
  width: 16px;
  height: 16px;
}

#form2 {
  position: relative;
  max-width: 100%;
  margin-bottom: 20px;
}

#sbox2 {
  height: 35px;
  padding: 0 10px;
  border-radius: 2px;
  outline: 0;
  background: #eee;
  width: 100%;
  padding-right: 27.5px;
}

#sbtn2 {
  height: 35px;
  position: absolute;
  right: 10px;
  top: 0;
  background: none;
  color: #666;
  border: none;
  font-size: 14px;
}

.search_tables-title label {
  vertical-align: text-top;
  font-size: 16px;
  color: #EA5755;
  font-weight: bold;
}

.tab_box .btn_area {
  margin: 0 5px;
  display: -webkit-box;
  display: flex;
  justify-content: space-between;
}

.tab_box .tab_btn {
  width: 48%;
  padding: 8px 0;
  color: #333;
  background: #f5f7f8;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease 0s;
  font-size: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab_box .tab_btn:hover {
  background-color: #dce1e4;
}

.tab_box .tab_btn.active {
  background: #EA5755;
  color: #fff;
}

.tab_box .panel_area {
  border: solid 1px #e3ebf3;
  padding: 15px 10px;
}

.tab_box .tab_panel {
  display: none;
}

.tab_box .tab_panel.active {
  display: block;
}

.tab_panel li {
  padding-bottom: 7.5px;
  border-bottom: 1px solid #242424;
  margin-bottom: 10px;
}

.matter-tab-title {
  margin-bottom: 5px;
}

.matter-tab-title p {
  font-size: 14px;
  color: #5896D2;
}

.matter-tab-text {
  margin-bottom: 5px;
}

.matter-tab-text p {
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}

.matter-tab-btn {
  display: flex;
  justify-content: space-between;
}

.matter-tab-btn a {
  width: 48%;
  border: 1px solid #EA5755;
  border-radius: 2.5px;
  text-align: center;
  color: #fff;
  background-color: #EA5755;
  padding: 2.5px 0;
  font-size: 12px;
}

.matter-tab-btn a:nth-child(1) {
  color: #EA5755;
  background-color: #fff;
}

.matter-day {
  width: 100%;
  padding: 10px 0;
  overflow-x: scroll;
}

.matter-day ul {
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.matter-day li {
  width: 7.5%;
}

.matter-day li.today a {
  color: #fff;
  border: 1px solid #EA5755;
  background-color: #EA5755;
}

.matter-day li a {
  border: #999 solid 1px;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  line-height: 1.3;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.matter-day li a span {
  font-size: 10px;
  color: #777;
}

.matter-day li.today a span {
  color: #fff;
}

.matter-flex {
  display: flex;
  justify-content: space-between;
}

.matter-main {
  width: 75%;
}

.matter-side {
  width: 23%;
}

.pagenations {
  display: flex;
  justify-content: space-between;
  margin: 10px auto;
}

.page-sum {
  width: 40%;
}

.page-sum p {
  font-size: 12px;
}

.pagenation {
  width: 60%;
}

.pagenation ul {
  display: flex;
  align-items: center;
}

.pagenation ul li {
  width: 9%;
  margin-right: 2.5px;
}

.pagenation ul li a {
  text-align: center;
  font-size: 12px;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.pagenation ul li.current-page a {
  background-color: #EA5755;
  color: #fff;
}

.sort-item {
  width: 100%;
  margin-bottom: 10px;
}

.sort-item ul {
  display: flex;
  justify-content: space-between;
  border: 1px solid #707070;
  background-color: #eee;
  flex-wrap: wrap;
}

.sort-item ul li {
  width: 12.5%;
  border-right: 1px solid #707070;
  text-align: center;
  padding: 2.5px 0 4px;
}

.sort-item ul li:nth-child(8) {
  border-right: none;
}

.sort-item ul li a {
  font-size: 12px;
  color: #333;
}

.sort-item ul li.current-sort a {
  color: #EA5755;
}

.matter-lists .matter-lists-item {
  display: block;
  margin-bottom: 30px;
  box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
  border-top: 6px solid #EA5755;
  padding: 15px 20px;
}

.matter-lists li .matter-title {
  padding-bottom: 5px;
  border-bottom: 1px solid #333;
  margin-bottom: 15px;
}

.matter-lists li .matter-title p {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 5px;
}

.matter-lists li .matter-title h3 {
  font-size: 18px;
  font-weight: 600;
  color: #EA5755;
}

.matter-list {
  width: 100%;
  margin-bottom: 15px;
}

.matter-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.matter-list-img {
  width: 20px;
  margin-right: 10px;
}

.matter-list-img img {
  vertical-align: middle;
}

.matter-list-text {
  font-size: 14px;
  font-weight: 600;
}

.matter-list-text th {
  padding-right: 10px;
}

.matter-btn {
  background-color: #FFF3F5;
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
}

.matter-btn .rec-btn {
  width: 40%;
  text-align: center;
}

.matter-btn .detail-btn {
  width: 57.5%;
  text-align: center;
}

.matter-btn a {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.matter-btn .rec-btn a {
  color: #333;
  border: 1px solid #666;
  background-color: #fff;
}

.matter-btn .rec-btn a img {
  display: inline-block;
  width: 15px;
  margin-right: 5px;
  vertical-align: text-bottom;
}

.matter-btn .detail-btn a {
  border: 1px solid #EA5755;
  background-color: #EA5755;
  color: #fff;
}

.slide-arrow {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
}

.prev-arrow {
  left: -20px;
  width: 25px;
  height: 25px;
}

.next-arrow {
  right: -20px;
  width: 25px;
  height: 25px;
  transform: rotate(180deg);
}

.big-title p {
  position: absolute;
  left: -20px;
  top: -20px;
  background-color: #F00C1A;
  color: #fff;
  padding: 5px;
  font-size: 14px;
}

.matter-map {
  height: 400px;
  margin-bottom: 20px;
}

.matter-map iframe {
  height: 100%;
}

.box-list {
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}

.box-list li {
  width: 48%;
  text-align: center;
  background-color: #EA5755;
  padding: 20px 0;
  display: initial;
  align-items: initial;
  margin-bottom: initial;
}

.box-list li p {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.box-list li p span {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.box-list li span {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.matter-detail-btn {
  max-width: 400px;
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.matter-detail-btn .rec {
  width: 10%;
}

.matter-detail-btn .post-btn {
  width: 85%;
}

.matter-detail-btn .post-btn a {
  text-align: center;
  color: #EA5755;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
  font-size: 14px;
  display: block;
  font-weight: 600;
}

.other-day {
  border-top: 1px solid #242424;
  padding: 20px 5px;
  margin: 0px auto30px;
}

.other-day p {
  font-size: 16px;
  font-weight: 600;
}

.other-btn {
  width: 95%;
  max-width: 500px;
  margin: 20px auto;
}

.other-btn a {
  text-align: center;
  color: #EA5755;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
  font-size: 14px;
  display: block;
  font-weight: 600;
  background-color: #fff;
}

.matter-detail-compamy {
  margin-bottom: 30px;
  border: 1px solid #777;
}

.matter-detail-compamy .company-title,
.matter-detail-compamy .company-other {
  background-color: #eee;
  text-align: center;
  padding: 10px 0;
}

.matter-detail-compamy .company-title p {
  font-size: 18px;
  font-weight: 600;
}

.matter-detail-compamy .company-name {
  text-align: center;
  padding: 20px 0;
  margin-bottom: 0px;
}

.matter-detail-compamy .company-name a {
  font-size: 18px;
  font-weight: 600;
  color: #EA5755;
  text-decoration: underline
}

.slide-matter {
  display: block;
  box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
  border-top: 6px solid #EA5755;
  padding: 15px;
}

.slide-matter-title {
  margin-bottom: 15px;
}

.slide-matter-title p {
  font-size: 18px;
  font-weight: 600
}

.sliderArea {
  padding: 0px 20px;
}

.slide-item {
  margin: 0px 15px;
  padding: 10px;
  border: #666 1px solid;
  border-radius: 5px;
}

.slide-item .matter-title {
  padding-bottom: 5px;
  border-bottom: 1px solid #333;
  margin-bottom: 5px;
}

.slide-item .matter-title p {
  font-size: 12px;
  font-weight: 600;
}

.slide-item .matter-title h3 {
  font-size: 14px;
  font-weight: 600;
  color: #EA5755;
}

.slide-item .matter-list li {
  margin-bottom: 5px;
}

.slide-item .matter-list-img {
  width: 15px;
  margin-right: 5px;
}

.slide-item .matter-list-text {
  font-size: 12px;
  font-weight: 600;
}

.slide-item .matter-btn {
  background-color: #FFF;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slide-item .matter-btn .rec-btn {
  width: 10%;
  text-align: center;
}

.slide-item .matter-btn .rec-btn .rec {
  width: 100%;
}

.slide-item .matter-btn .detail-btn {
  width: 85%;
  text-align: center;
}

.slide-item .matter-btn .detail-btn a {
  text-align: center;
  font-size: 12px;
  text-align: center;
  color: #EA5755;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
}

.entry-title {
  margin-bottom: 20px;
  padding: 10px 15px;
  background-color: #EA5755;
  text-align: left;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.entry-title h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.entry-detail {
  margin-bottom: 40px;
}

.entry-detail table {
  width: 100%;
}

.entry-detail table th {
  width: 25%;
  text-align: center;
  padding: 10px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background-color: #707070;
  border: 1px solid #707070;
  margin-bottom: 5px;
  vertical-align: middle;
}

.entry-detail table td {
  width: 73%;
  text-align: left;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #707070;
}

.entry-detail table td input,
.entry-detail table td select {
  border: 1px solid #242424;
}

.entry-detail table td span {
  padding: 0 5px;
}

.entry-sub-title {
  background-color: #AAA7A7;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.entry-sub-title p {
  font-size: 16px;
  font-weight: 600;
}

.entry-radio-wrap {
  border: 1px solid #434040;
  padding: 7.5px 10px;
  width: 100%;
  margin: 0 auto 10px;
}

.entry-radio-wrap label {
  padding-left: 5px;
}

.entry-radio-wrap:nth-child(2) {
  margin: 0 auto 20px;
}

.entry-text-input {
  margin: 0 auto 10px;
}

.entry-text-input p {
  border-left: 4px solid #EA5755;
  padding-left: 7.5px;
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin: 0 auto 7.5px;
}

.entry-text-input textarea {
  width: 100%;
  padding: 5px;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid #434040;
}

.matter-post-btn {
  max-width: 400px;
  width: 100%;
  margin: 60px auto 0px;
}

.back-btn a {
  text-align: center;
  font-size: 14px;
  color: #EA5755;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
  width: 100%;
  margin: 0 auto 15px;
  display: block;
}

.post-btn a {
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #EA5755;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
  width: 100%;
  display: block;
}

.matter-entry .post-btn a {
  color: #fff;
}

.post-btn button {
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #EA5755;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
  width: 100%;
  display: block;
}

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

.modal-title p {
  font-size: 16px;
  font-weight: 600;
  color: #EA5755;
}

.modal-text {
  margin-bottom: 20px;
}

.modal-text p {
  font-size: 14px;
  line-height: 1.6;
}

.modal-text p span {
  color: #EA5755;
}

.modal-text p.big {
  color: #EA5755;
  font-weight: 600;
  text-align: center;
  padding-bottom: 10px;
}

.modal-img {
  width: 100%;
  margin: 0 auto 10px;
}

.cancel-btn-top {
  text-align: center;
  color: #EA5755;
  font-size: 14px;
}

.contact-submit {
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #EA5755;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
  width: 100%;
  margin: 5px auto 0px;
  display: block;
  max-width: 280px;
}

.complete-img {
  width: 200px;
  margin: 30px auto;
}

.matter-complete-title {
  margin-bottom: 30px;
}

.matter-complete-title h2 {
  color: #46C32A;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}

.task-btn {
  display: flex;
  align-items: center;
}

.toggle {
  position: relative;
  width: 35px;
  height: 20px;
  margin: 10px 0px 10px auto;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer;
}

.toggle input[type=checkbox] {
  display: none;
}

.toggle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #e9e9eb;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

.toggle:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

.toggle.checked:before {
  background: #35c759;
}

.toggle.checked:after {
  left: 18px;
  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
}

.task-btn p {
  padding-left: 5px;
  font-size: 12px;
  color: #666;
  font-weight: 600;
}

.tab_box.task .tab_btn {
  width: 33%;
  padding: 15px 0;
  color: #333;
  font-size: 14px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 6px solid #707070;
  font-weight: 600;
  color: #FF0000;
}

.tab_box.task .tab_btn.active {
  background-color: rgba(254, 101, 110, .3);
  border-bottom: 6px solid #FE656E;
}

.tab_box.task .panel_area {
  border: solid 1px #e3ebf3;
  padding: 0px;
}

.task-title {
  font-size: 16px;
  font-weight: 600;
  color: #F00C1A;
  padding-bottom: 5px;
}

.task-day {
  color: #817C7C;
  font-size: 12px;
}

.task .tab_panel li:last-child {
  border-bottom: none;
}

.task .tab_panel li {
  padding: 10px 15px;
  border-bottom: 1px solid #242424;
  margin-bottom: 5px;
}

.star5_rating {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  color: #CCCCCC;
  font-size: 18px;
}

.star5_rating:before,
.star5_rating:after {
  content: '★★★★★';
}

.star5_rating:after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffcf32;
}

.star5_rating[data-rate="5"]:after {
  width: 100%;
}

.star5_rating[data-rate="4.5"]:after {
  width: 90%;
}

.star5_rating[data-rate="4"]:after {
  width: 80%;
}

.star5_rating[data-rate="3.5"]:after {
  width: 70%;
}

.star5_rating[data-rate="3"]:after {
  width: 60%;
}

.star5_rating[data-rate="2.5"]:after {
  width: 50%;
}

.star5_rating[data-rate="2"]:after {
  width: 40%;
}

.star5_rating[data-rate="1.5"]:after {
  width: 30%;
}

.star5_rating[data-rate="1"]:after {
  width: 20%;
}

.star5_rating[data-rate="0.5"]:after {
  width: 10%;
}

.star5_rating[data-rate="0"]:after {
  width: 0%;
}

.box-contents {
  border-radius: 20px;
  border: 1px solid #707070;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  width: 100%;
  margin: 0 auto 40px;
  padding: 15px 0;
}

.company-name {
  margin: 0 auto 20px;
}

.company-img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: #707070 1px solid;
  display: block;
  margin: 0 auto 10px;
  overflow: hidden;
}

.compnay-voice {
  text-align: center;
  padding-bottom: 10px;
}

.company-name {
  text-align: center;
}

.company-name p {
  font-size: 18px;
  font-weight: 600;
}

.company-list li {
  display: flex;
  padding: 15px 20px;
  justify-content: space-between;
  border-top: 1px solid #707070;
}

.company-list li:last-child {
  border-bottom: 1px solid #707070;
}

.company-list-left {
  width: 50%;
  text-align: left;
}

.company-list-right {
  width: 50%;
  text-align: right;
}

.company-list-right p,
.company-list-left p {
  font-size: 14px;
  font-weight: 600;
}

.table-contents {
  width: 100%;
  margin-bottom: 40px;
}

.table-title {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  width: 100%;
  margin-bottom: 10px;
  border-bottom: 4px solid #989797;
  position: relative;
  padding: 10px 15px 7.5px;
}

.table-title:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 4px #EA5755;
  bottom: -4px;
  width: 40%;
  left: 0px;
}

.table-title h3 {
  font-size: 16px;
  font-weight: 600;
}

.search_table.company_table th {
  text-align: left;
  width: 20%;
}

.box-contents-title {
  padding: 0px 20px 15px;
}

.box-contents-title h3 {
  font-size: 16px;
  font-weight: 600;
}

.small-mater-list li {
  padding: 10px 15px;
  border: 1px solid #707070;
  border-radius: 20px;
  width: 100%;
  margin: 0 auto 15px;
}

.company-matter-list li {
  padding: 10px 15px;
  border-top: 1px solid #707070;
}

.company-matter-list li:last-child {
  border-bottom: 1px solid #707070;
}

.company-matter-title {
  padding-bottom: 5px;
  border-bottom: 1px solid #5A5757;
  margin-bottom: 10px;
}

.company-matter-title p {
  font-size: 14px;
  font-weight: 600;
  color: #F7D667;
}

.small-mater-title {
  padding-bottom: 5px;
  border-bottom: 1px solid #5A5757;
  margin-bottom: 10px;
}

.small-mater-title .row {
    display: flex;
    justify-content: between;
    align-items: center;
}

.small-mater-title .row .contracts_status {
    text-wrap: nowrap;
    display: block;
    width: 78px;
    text-align: center;
    font-size: 11px;
    padding: 5px 0;
    color: #FFF;
    background: #ec4272;
    border: 1px solid #ec4272;
    border-radius: 5px;
}
.small-mater-title .row .contracts_status[data-status="5"] {
  background: #1a8fc1;
  border: 1px solid #1a8fc1;
}
.small-mater-title .row .contracts_status[data-status="6"] {
    background: #999;
    border: 1px solid #999;
}
.small-mater-title .row .contracts_status[data-status="7"] {
  background: #f2ab39;
  border: 1px solid #f2ab39;
}
.small-mater-title .row .contracts_status[data-status="9"] {
  background: #999;
  border: 1px solid #999;
}
.small-mater-title .row .contracts_status[data-status="11"] {
  width: 94px;
}

.small-mater-title p {
  font-size: 14px;
  font-weight: 600;
  color: #EA5755;
}

.small-mater-title p.day {
  font-size: 12px;
  font-weight: 600;
  padding-bottom: 2.5px;
  color: #242424;
}

.company-matter-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-matter-detail ul {
  width: 80%;
}

.company-matter-detail ul li {
  display: flex;
  padding: 0px 0px 5px;
  border: none;
  align-items: center;
}

.company-matter-detail ul li:last-child {
  border: none;
}

.company-matter-detail ul li .matter-list-img {
  width: 17.5px;
  margin-right: 5px;
}

.company-matter-detail ul li:nth-child(2) .matter-list-img {
  width: 20px;
}

.company-matter-detail ul li .matter-list-text p {
  font-size: 12px;
  font-weight: 600;
}

.company-matter-btn a {
  display: block;
  width: 90px;
  text-align: center;
  font-size: 12px;
  padding: 5px 0;
  color: #F7D667;
  border: 1px solid #F7D667;
  border-radius: 30px;
}

.small-mater-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.small-mater-detail ul {
  width: 80%;
}

.small-mater-detail ul li {
  display: flex;
  padding: 0px 0px 5px;
  border: none;
  align-items: center;
  margin: 0 auto 2.5px;
}

.small-mater-detail ul li:last-child {
  border: none;
}

.small-mater-detail ul li .matter-list-img {
  width: 17.5px;
  margin-right: 5px;
}

.small-mater-detail ul li:nth-child(2) .matter-list-img {
  width: 20px;
}

.small-mater-detail ul li .matter-list-text p {
  font-size: 12px;
  font-weight: 600;
}

.small-matter-btn a {
  display: block;
  width: 90px;
  text-align: center;
  font-size: 12px;
  padding: 5px 0;
  color: #EA5755;
  border: 1px solid #EA5755;
  border-radius: 30px;
}

.company-review {
  display: flex;
  justify-content: space-between;
}

.company-review-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: #707070 1px solid;
  display: block;
  margin-right: 7.5px;
  overflow: hidden;
}

.company-review-text {
  width: 80%;
}

.company-review-text p.name {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 5px;
}

.company-review-text p {
  font-size: 12px;
}

.company-review .star5_rating {
  font-size: 14px;
}

.top-search #sbox2 {
  border-radius: 20px;
}

.message-list li a {
  display: flex;
  padding: 10px 15px;
  justify-content: space-between;
  border: 1px solid #707070;
  margin-bottom: 10px;
}

.company-list-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: #707070 1px solid;
  display: block;
  margin-right: 10px;
  overflow: hidden;
}

.company-list-name {
  width: 80%;
}

.company-list-name p {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 5px;
}

.company-list-name small {
  font-size: 12px;
  color: #707070;
}

.company-list-day p {
  font-size: 12px;
  color: #707070;
}

.message-box {
  border: 1px solid #707070;
}

.fukidasi {
  position: relative;
  display: block;
  max-width: 220px;
  margin: 7.5px 10px;
  padding: 10px 15px;
  border-radius: 30px;
  overflow-wrap: break-word;
  clear: both;
  box-sizing: content-box;
  font-size: 12px;
}

.fukidasi.left {
  background: #F4EDED;
  margin-right: auto;
}

.fukidasi.right {
  background: #F77575;
  color: white;
  margin-left: auto;
}

fukidasi:after {
  position: absolute;
  content: "";
  width: 17px;
  height: 17px;
  bottom: 0;
}

.fukidasi.left:after {
  left: -6px;
  border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
  box-shadow: -14px 2px 0 -3px #e9e9ed inset;
}

.fukidasi.right:after {
  right: -6px;
  border-radius: 0px 0 0 17px/ 0px 0 0 13px;
  box-shadow: 14px 2px 0 -3px #2793fa inset;
}

.message-box-title {
  display: flex;
  border-bottom: 1px solid #707070;
}

.message-box-btn {
  padding: 10px 12.5px;
  border-right: 1px solid #707070;
}

.message-box-btn a {
  color: #2793fa;
}

.message-box-text {
  padding: 10px;
}

.message-box-text p {
  font-size: 14px;
  font-weight: 600;
}

.message-text {
  padding: 20px 10px;
}

.mypage-account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.mypage-icon {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: #707070 1px solid;
  display: block;
  margin-right: 20px;
  overflow: hidden;
  position: relative;
}

.mypage-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← これがポイント */
  object-position: center center;
  display: block;
}

.mypage-name {
  width: 82.5%;
}

.mypage-name p {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

.mypage-edit {
  width: 20px;
}

.wallet-conetnt {
  background-color: #FA8983;
  padding: 15px 20px;
  border-radius: 20px;
}

.wallet-name {
  margin-bottom: 7.5px;
  display: flex;
  align-items: center;
}

.wallet-name img {
  width: 20px;
  display: inline-block;
  margin-right: 7.5px;
}

.wallet-name p {
  font-size: 14px;
  color: #fff;
}

.wallet-name p span {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  padding-right: 5px;
}

.wallet-prices {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wallet-prices .wallet-price {
  width: 90%;
}

.wallet-prices .wallet-price p {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
}

.wallet-withdraw a {
  width: 90px;
  background-color: #fff;
  padding: 5px 0;
  text-align: center;
  display: block;
  color: #000;
  font-size: 12px;
  border-radius: 20px;
}

.entry-textarea {
  border: 1px solid #434040;
  padding: 10px;
  width: 100%;
  margin: 0 auto 10px;
}

.entry-textarea p {
  font-size: 14px;
  font-weight: 400;
  border: none;
  padding-left: 0px;
}

.correspondence_modal .modalWrapper {
  height: initial;
}

.modal-title.chat-title {
  margin-bottom: 20px;
}

.modal-title.chat-title p {
  line-height: 2;
  color: #F00C1A;
}

.wallet-menu {
  margin-top: 30px;
}

.wallet-menu ul li {
  border: 1px solid #707070;
  position: relative;
  border-bottom: none;
}

.wallet-menu ul li:last-child {
  border-bottom: 1px solid #707070;
}

.wallet-menu ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}

.wallet-menu ul li::before {
  width: 10px;
  height: 10px;
  border-top: 2px solid #242424;
  border-right: 2px solid #242424;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%)rotate(45deg);
  -webkit-transform: translateY(-50%)rotate(45deg);
  -ms-transform: translateY(-50%)rotate(45deg);
  content: "";
}

.wallet-menu ul li a img {
  display: inline;
  margin-right: 10px;
  width: 15px;
}

.wallet-menu ul li:last-child a img {
  width: 10px;
}

.wallet-history-table table {
  width: 100%;
  border-collapse: collapse;
}

.wallet-history-table table th {
  background-color: #E8E4E4;
  border: 1px solid #707070;
  text-align: center;
  padding: 10px 5px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.wallet-history-table table th:nth-child(1) {
  width: 25%;
}

.wallet-history-table table th:nth-child(2) {
  width: 65%;
}

.wallet-history-table table th:nth-child(3) {
  width: 10%;
}

.wallet-history-table table td {
  background-color: #fff;
  border: 1px solid #707070;
  text-align: center;
  padding: 10px 5px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.wallet-history-table table td:nth-child(1) {
  width: 25%;
}

.wallet-history-table table td:nth-child(2) {
  width: 65%;
}

.wallet-history-table table td:nth-child(3) {
  width: 10%;
}

.wallet-menu.payment-menu ul li::before {
  display: none;
}

.wallet-menu.payment-menu {
  margin: 0px auto 10px;
}

.wallet-menu.payment-menu ul li {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 20px 12.5px;
}

.wallet-menu.payment-menu ul li span {
  font-size: 24px;
  color: #D8423A;
  padding-right: 10px;
  font-weight: bold;
  vertical-align: bottom;
  line-height: 16px;
}

.company-list.payment-list li {
  border-right: 1px solid #707070;
  border-left: 1px solid #707070;
}

.company-list.bank-list li {
  border-right: 1px solid #707070;
  border-left: 1px solid #707070;
  position: relative;
  padding: 10px 37.5px 10px 20px;
}

.company-list.bank-list li input {
  border: 1px solid #CACACA;
  padding: 5px;
}

.company-list.bank-list li p {
  padding: 5px 0px;
}

.bank-list ul li::before {
  width: 10px;
  height: 10px;
  border-top: 2px solid #242424;
  border-right: 2px solid #242424;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%)rotate(45deg);
  -webkit-transform: translateY(-50%)rotate(45deg);
  -ms-transform: translateY(-50%)rotate(45deg);
  content: "";
}

.entry-detail table td textarea {
  border: 1px solid #242424;
}

.entry-detail.contact-detail table td input {
  width: 100%;
}

.entry-detail.contact-detail table th {
  width: 30%;
  padding: 10px 7.5px;
  font-size: 14px;
}

.entry-detail.contact-detail table th span {
  background-color: #D8423A;
  color: #fff;
  font-size: 12px;
  padding: 1px 2.5px 1.5px;
  margin-left: 5px;
}

.privacy-Block h3 {
  font-size: 20px;
  font-weight: 700;
}

.privacy h2 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 30px;
}

.privacy p {
  font-size: 16px;
  margin-top: 25px;
  line-height: 2;
}

.privacy ol {
  padding-left: 20px;
  margin-top: 10px;
}

.privacy li {
  font-size: 14px;
  line-height: 2;
  margin-bottom: 10px;
  list-style: circle;
}

.privacy_content_primary {
  margin-top: 60px;
}

.privacy ol.paren-non {
  padding-left: 10px;
}

.privacy ol.paren-non li {
  list-style: none;
}

.withdrawal-content p {
  font-size: 14px;
  line-height: 1.9;
}

.withdrawal-content p span {
  color: #D8423A;
}

.withdrawal-content p.big {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.withdrawal-img {
  width: 120px;
  margin: 40px auto 0px;
}

.big-title.account-title {
  margin-bottom: 40px;
}

.search_table.account-table table th {
  text-align: left;
  vertical-align: middle;
}

.search_table.account-table table td {
  position: relative;
}

.search_table.account-table table td a {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 45px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid #EA5755;
  color: #EA5755;
  padding: 2.5px 0;
  text-align: center
}

.search_table.account-table table td a.not-btn {
  position: relative;
  top: initial;
  right: initial;
  transform: initial;
  -webkit-transform: initial;
  -ms-transform: initial;
  width: initial;
  border-radius: initial;
  font-weight: 600;
  font-size: 12px;
  border: initial;
  color: #EA5755;
  padding: initial;
  text-align: initial;
}

.search_table.account-table input,
.search_table.account-table textarea {
  width: 100%;
  display: block;
  margin: 0px auto;
  border: 1px solid #707070;
  padding: 2.5px;
  font-size: 14px;
}

.search_table.account-table input[type="tel"],
.search_table.account-table input[type="email"],
.search_table.account-table input[type="password"] {
  width: 60%;
  margin-left: 0px;
}

.acc-toggle {
  display: none;
}

.Label {
  padding: 15px 10px;
  display: block;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #707070;
}

.Label::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #707070;
  border-right: 2px solid #707070;
  -webkit-transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 6px);
  right: 20px;
  transform: rotate(135deg);
}

.Label,
.acc-content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}

.acc-content {
  height: 0;
  margin-bottom: 10px;
  padding: 0 20px;
  overflow: hidden;
}

.acc-toggle:checked+.Label+.acc-content {
  height: auto;
  padding: 20px;
  transition: all .3s;
}

.acc-toggle:checked+.Label::before {
  transform: rotate(-45deg) !important;
  top: calc(50% - 3px);
}

.company-matter-list.review-list {
  margin-bottom: 30px;
}

.company-matter-list.review-list li {
  border: 1px solid #707070;
  margin-bottom: 10px;
}

.review-list .company-review {
  align-items: center;
}

.review-list .company-review-text p.name {
  padding-bottom: 0px;
}

.review-list .company-review-star {
  margin-bottom: 2.5px;
}

.review-list .star5_rating:after {
  color: #F71C1C;
}

.review-list .review-day p {
  font-size: 12px;
}

.notice-table .task-btn {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.search_table.notice-table td {
  padding: 15px 75px 15px 10px;
}

.distribution-content {
  margin-bottom: 32px;
}

.distribution-content .place {
  margin-bottom: 20px;
  position: relative;
}

.distribution-content .place p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

.distribution-content .place img {
  width: 20px;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.distribution-content table.area-table {
  padding-left: 30px;
}

.timer-text {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1.4em;
}
.timer-limit {
  width: 95%;
  text-align: center;
}
.timer-limit .timer-limit-date,
.timer-limit .timer-limit-countdown {
  font-weight: bold;
}
.timer-limit .timer-limit-date .value {
  font-size: 1.4em;
  margin: 0.2em 0 1em 0;
}
.timer-limit-countdown #TimeLeft {
  display: inline-block;
  font-size: 1.4em;
  margin: 0.3em auto 0.6em;
  background: #CCC;
  padding: 0.1em 1.8em;
}

.timer-limit-extension {
  margin-top: 2.8em;
}
.timer-limit-extension.hide {
  display: none;
}
.timer-limit-extension .form-block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.4em;
  margin-bottom: 0.8em;
}
.timer-limit-extension .form-block select {
  height: 100%;
  width: 140px;
  margin-right: 5px;
  padding: 2.5px 5px;
  border: 1px solid #707070;
  margin: 0;
}
.timer-limit-extension .form-block select + button {
  height: 100%;
  border: 1px solid #707070;
  margin-left: -1px;
  padding: 0 1.4em;
  background: #CCC;
}







.distribution-number {
  margin-top: 3em!important;
}

.distribution-number,
.timer-setting {
  max-width: 290px;
  width: 95%;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  position: relative;
}
.timer-setting { max-width: 360px; }

.distribution-number p,
.timer-setting p {
  padding-right: 5px;
  font-size: 16px;
  font-weight: 600;
}

.distribution-number input,
.timer-setting select {
  width: 200px;
  margin-right: 5px;
  padding: 2.5px 5px;
  border: 1px solid #707070;
}

.modalWrapper.distribution-modal {
  height: initial;
}

.modal-flex-btn {
  display: flex;
  justify-content: space-between;
}

.modal-flex-btn a {
  width: 48%;
  display: block;
  text-align: center;
  font-size: 14px;
  color: #EA5755;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #EA5755;
  padding: 10px 0;
}

.modal-flex-btn a.finish-btn {
  color: #fff;
  background-color: #EA5755;
}

.distribution-text {
  width: 100%;
  margin: 60px auto 0px;
}

.distribution-text p {
  font-size: 16px;
  text-align: center;
  line-height: 2;
  color: #F00C1A;
  font-weight: 600;
}

.review-company-img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: #707070 1px solid;
  display: block;
  margin: 40px auto 15px;
  overflow: hidden;
}

.review-company-name {
  width: 100%;
  margin: 0 auto 20px;
  text-align: center;
}

.review-company-name p {
  font-size: 18px;
  font-weight: 600;
}

.stars span {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.stars input[type='radio'] {
  display: none;
}

.stars label {
  color: #D2D2D2;
  font-size: 24px;
  padding: 0 5px;
  cursor: pointer;
}

.stars label:hover,
.stars label:hover~label,
.stars input[type='radio']:checked~label {
  color: #EA5755;
}

.distribution-title {
  margin-top: 60px;
}

.distribution-table table {
  width: 100%;
  border-collapse: collapse;
}

.distribution-table th {
  background-color: #E8E4E4;
  text-align: center;
  padding: 12.5px 0;
  margin-bottom: 10px;
  border: 1px solid #707070;
  font-size: 14px;
  font-weight: 600;
}

.distribution-table th:nth-child(1) {
  width: 27.5%;
}

.distribution-table th:nth-child(2) {
  width: 50%;
}

.distribution-table th:nth-child(3) {
  width: 27.5%;
}

.distribution-table td {
  text-align: center;
  padding: 12.5px 0;
  margin-bottom: 10px;
  border: 1px solid #707070;
  font-size: 14px;
  font-weight: 600;
}

.distribution-table td a {
  text-decoration: underline;
}

.distribution-table td:nth-child(1) {
  width: 27.5%;
}

.distribution-table td:nth-child(2) {
  width: 50%;
}

.distribution-table td:nth-child(3) {
  width: 27.5%;
}

.distribution-table td input {
  text-align: right;
  vertical-align: top;
}

.side-navi {
  border-right: 1px solid #707070;
  padding: 25px 40px 25px 15px;
  position: relative;
  transition: all .5s;
  height: 100%;
  width: 210px;
}

.side-navi li a {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.side-navi li a img {
  width: 20px;
  margin-right: 10px;
}

.side-navi li a p {
  font-size: 12px;
  font-weight: bold;
}

.css-mit7qq,.css-mit7qq-fixed {
  position: absolute;
  right: -15px;
  top: 10px;
  background-color: rgb(255, 255, 255);
  height: 30px;
  width: 30px;
  border-radius: 30px;
  cursor: pointer;
  border: 1px solid rgb(234, 234, 234);
  border: 1px solid #AAA;
  z-index: 51;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

#side-sp .css-mit7qq{
  border: 1px solid #AAA;

}

.css-mit7qq-fixed-box{
  display:none;
  position: relative;
  left: 0px;
  top: 0px;
  background-color:#ffe88a;
  height: 30px;
  width: 110px;
  border-radius: 0px 10px 10px 0px;
  z-index:101;
}
@media (min-width: 769px) {
  .css-mit7qq-fixed-box{
    display:none;
  }
}
.css-mit7qq-fixed{
  right:unset;
  left:10px;
  border:none;
}
.css-mit7qq-fixed:after{
  width:100px;
  position:absolute;
  top:-2px;
  left:24px;
  content:"メニュー";
}

#side-sp:not(.open) .css-mit7qq{
  position: absolute;
  right: -25px;
}


.arrow-open {
  width: 12px;
  transform: rotate(180deg);
}

.arrow-close {
  width: 12px;
  transform: initial;
}
.css-mit7qq-fixed .arrow-close{
  position:relative;
  width: 8px;
  top:0px;
  left:0px;
}

.side-navi.close {
  padding: 25px 0px;
  width: auto;
}

.side-navi.close li a {
  display: block;
  text-align: center;
}

.side-navi.close li a img {
  width: 17.5px;
  margin-bottom: 2.5px;
  margin-right: 0px;
}

.side-navi.close li a p {
  font-size: 10px;
  font-weight: bold;
  transform: scale(.8);
  white-space: nowrap;
}

.wrapper {
  position: relative;
}

.calender-container {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #fff;
  padding: 20px 15px;
}

.entry .form-text.form-text-small {
  width: 120px;
}

.group-btn {
  display: block;
  border: 1px solid #707070;
  border-radius: 5px;
  padding: 15px 0 12.5px;
  text-align: center;
  width: 150px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.group-btn img {
  width: 40px;
  display: block;
  margin: 0 auto 5px;
}

.group-btn p {
  font-size: 14px;
  font-weight: bold;
}

.mcf-parts span {
  padding: 0 5px;
  vertical-align: super;
}

.mcf-parts label span {
  vertical-align: initial;
}

.mcf-open.mcf-main-open ul {
  padding-left: 0px;
}

.modal-input {
  margin: 0 auto 20px;
  width: 200px;
  font-size: 14px;
  font-weight: 900;
}

.modal-input input {
  border: #707070 1px solid;
  padding: 5px 10px;
  font-size: 16px;
  margin-right: 5px;
  width: 90%;
  text-align: right;
}

.search_table.account-table.review-table input[type="number"] {
  width: 50%;
  margin-left: 0px;
  display: inline-block;
  margin-right: 5px;
}

.distribution-parts ul li span {
  vertical-align: initial;
  color: #707070;
  padding-left: 10px;
}

.distribution-parts .sum {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
}

.distribution-parts .sum span {
  vertical-align: initial;
  font-size: 16px;
}

.mcf-parts.distribution-parts input[type="number"] {
  border: 1px solid #707070;
}

.mcf-parts li {
  margin-bottom: 5px;
}

table.area-table th {
  width: initial !important;
  text-align: initial;
  padding: initial !important;
  color: initial;
  font-size: 14px;
  background-color: initial;
  border: initial;
  margin-bottom: initial;
  vertical-align: initial;
  padding-right: 10px !important;
  color: #242424;
}

table.area-table td {
  width: initial !important;
  text-align: initial;
  padding: initial !important;
  font-size: 14px;
  display: table-cell !important;
  border: initial;
  font-weight: 600;
}

.entry-detail table.area-table {
  width: auto;
}

.modalContents .area-table {
  width: 100% !important;
  margin: 0 auto 10px;
}

.modalContents .area-table th {
  text-align: center;
}

.modalContents .area-table td {
  text-align: center;
  font-weight: 400;
}

.distribution-content .place span.day {
  padding-left: 30px;
}

.gps .modalWrapper {
  padding: 40px 15px 27.5px;
}

.gps #modalArea01 .modalWrapper {
  padding: 30px 15px 37.5px;
}

.modal-title.chat-title p .time {
  font-size: 22px;
}

.entry-container .alert-danger {
  text-align: center;
  font-size: 20px;
  margin: 0 auto 0.5rem;
}

p.caution-txt-p {
  font-size: 14px;
  color: #EB2541;
}

.entry-form button.client-btn{
    background: #F7D667;
}

.cancel-title {
  margin: 20px auto;
  border-left: 4px solid #EA5755;
  padding: 7.5px 5px 7.5px 15px;
}
.cancel-title h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.cancel-form select, .cancel-form textarea {
  width: 100%;
  border: 1px solid #CACACA;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

@media (max-width: 1024px) {
  .container {
    padding: 100px 20px 120px;
  }

  .header-nav ul li {
    width: 52.5px;
    margin-right: 10px;
  }

  .header-nav ul li p {
    font-size: 10px;
  }

  .header-nav ul {
    margin-right: 20px;
  }

  .change-btn a p {
    font-size: 10px;
  }

  .search-box {
    padding: 15px 10px;
  }

  .search-form form {
    width: 87.5%;
  }

  .search-form a {
    width: 10%;
  }

  .mypage-name {
    width: 75%;
  }

  .entry-detail.contact-detail table th {
    width: 40%;
    font-size: 12px;
  }

  .distribution-table td input {
    width: 100px;
  }

  .side-navi.close {
    padding: 25px 0px;
  }

  .side-navi li a {
    display: block;
    text-align: center;
  }

  .side-navi li a img {
    width: 17.5px;
    margin-bottom: 2.5px;
    margin-right: 0px;
  }

  .side-navi li a p {
    display: none;
  }

  .side-navi.close li a p {
    display: block;
  }

  .side-navi {
    padding: 30px 12.5px 25px;
    width: auto;
  }

  .css-mit7qq,.css-mit7qq-fixed {
    right: -10px;
    top: 5px;
    height: 20px;
    width: 20px;
  }

  .arrow-open {
    width: 8px;
    transform: initial;
  }

  .arrow-open.arrow-close {
    width: 8px;
    transform: rotate(180deg);
  }
}

@media (max-width: 768px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  .header-bar {
    display: none;
  }

  .drawer-hamburger-icon,
  .drawer-hamburger-icon:after,
  .drawer-hamburger-icon:before {
    background-color: #EA5755 !important;
    border-radius: 5px !important;
    height: 3px !important;
  }

  .drawer-open .drawer-hamburger-icon {
    background-color: transparent !important;
  }

  .header-nav ul {
    display: block;
    margin: 30px auto 0px;
  }

  .header-nav ul li {
    width: 52.5px;
    margin: 0 auto 15px;
  }

  .header-nav ul li:last-child {
    margin-right: auto;
  }

  .drawer-nav {
    width: 140px !important;
  }

  .drawer--right.drawer-open .drawer-hamburger {
    right: 140px !important;
  }

  .drawer-nav .header-flex-btn {
    display: block;
    margin-right: auto;
  }

  .drawer-nav .change-btn {
    width: 92.5px;
    margin: 0 auto 15px;
  }

  .drawer-nav .logout-btn {
    width: 120px;
    margin: 0px auto;
    height: 37.5px;
  }
  .drawer--right .drawer-nav {
    right:-140px!important;
  }

  .header-flex-btn {
    margin-right: 40px;
    align-items: center;
  }

  .logout-btn {
    width: 100px;
    margin-right: 0px;
  }

  .change-btn a {
    margin-right: 10px;
    line-height: initial;
  }

  .change-btn a img {
    display: block;
    width: 15px;
    margin: 0px auto;
  }

  .drawer-nav .change-btn a {
    margin-right: 0px;
  }

  .drawer-nav .change-btn a img {
    display: inline-block;
    width: 20px;
    margin: 0px 5px 0px 0px;
  }

  .header-logo {
    width: 120px;
  }

  .header-inner {
    padding: 10px 15px 10px 10px;
  }

  .entry .header-flex-btn {
    margin-right: 0px;
    align-items: center;
  }

  .entry-btn {
    width: 100px;
    height: 32.5px;
  }

  .entry-btn a {
    line-height: 32.5px;
  }

  .login-btn {
    width: 75px;
    margin-right: 7.5px;
    height: 32.5px;
  }

  .login-btn a {
    line-height: 32.5px;
  }

  .entry .entry-title h2 {
    font-size: 20px;
  }

  .entry-form button,
  .line-btn {
    font-size: 14px
  }

  .entry-form .email-form input {
    font-size: 12px;
  }

  .entry-form-in-text p {
    font-size: 14px;
    padding-bottom: 40px;
  }

  .entry-form-in-text li {
    font-size: 12px;
  }

  .contact-body,
  .contact-item {
    width: 100%;
    display: block;
  }

  .contact-table {
    padding: 10px 5px;
  }

  .entry input[type="password"],
  .entry input#input_pass01,
  .entry input#input_pass02 {
    width: 90%;
  }

  .entry .login-box .email-form input[type="password"] {
    width: 100%;
  }

  .search-box {
    padding: 10px;
  }

  .search-box h3 {
    font-size: 16px;
  }

  .search-flexs form {
    display: block;
  }

  .search-flex {
    width: 100%;
    margin-bottom: 15px;
  }

  .search-submit {
    width: 280px;
    margin: 0 auto;
  }

  .search-flex-content {
    width: 100%;
    margin: 0 auto 12.5px;
  }

  .search-conditions .keep {
    margin: 15px auto 5px;
    display: block;
  }

  .search-form form {
    width: 100%;
    margin: 0 auto 10px;
  }

  .search-form {
    display: block;
  }

  .search-form a {
    width: 100px;
    display: block;
  }

  .search-conditions {
    display: block;
  }

  .search-map {
    height: 400px;
  }

  .search-map iframe {
    height: 400px;
  }

  #sbtn {
    font-size: 12px;
  }

  .big-title {
    padding: 7.5px 20px 10px;
  }

  .big-title h2 {
    font-size: 18px;
  }

  .search_table th {
    text-align: center;
    display: block;
    width: 100%;
  }

  .search_table td {
    width: 100%;
    display: block;
  }

  .search_table input[type="text"] {
    font-size: 12px;
  }

  .search_table select {
    font-size: 12px;
  }

  .search_table input[type="number"] {
    font-size: 12px;
  }

  .search_tables-title {
    padding-left: 32.5px;
    padding-right: 10px;
  }

  .search_tables-title input {
    top: 50%;
    left: 7.5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    position: absolute;
  }

  .matter-flex {
    display: block;
  }

  .matter-side {
    width: 100%;
  }

  .matter-main {
    width: 100%;
    margin-bottom: 30px;
  }

  .sort-item ul li {
    width: 25%;
  }

  .sort-item ul li:nth-child(1),
  .sort-item ul li:nth-child(2),
  .sort-item ul li:nth-child(3),
  .sort-item ul li:nth-child(4) {
    border-bottom: 1px solid #707070;
  }

  .sort-item ul li:nth-child(4) {
    border-right: none;
  }

  .big-title p {
    left: -5px;
    top: -20px;
    font-size: 12px;
  }

  .box-list li p {
    font-size: 18px;
  }

  .entry-title h3 {
    font-size: 16px;
  }

  .entry-title {
    padding: 10px 12.5px;
  }

  .entry-detail table th {
    width: 100%;
    display: block;
    margin-bottom: 0px;
  }

  .entry-detail table td {
    width: 100%;
    display: block;
    margin-bottom: 5px;
  }

  .entry-sub-title p {
    font-size: 14px;
  }

  .entry-radio-wrap label {
    font-size: 12px;
  }

  .entry-text-input p {
    font-size: 12px;
  }

  .matter-post-btn {
    margin: 40px auto 0px;
  }

  .tab_box.task .tab_btn {
    padding: 12.5px 0 10px;
    font-size: 12px;
  }

  .task-title {
    font-size: 14px;
  }

  .search_table.company_table th {
    width: 100%;
  }

  .company-review-text {
    width: 75%;
  }

  .main-flex {
    flex-direction: column-reverse;
  }

  #side,
  #side-sp,
  #side_profile {
    width: 100%;
    margin: 30px auto 0px;
  }

  .side-container {
    width: 100%;
  }

  .side-container ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .side-container li:not(.agent-offer-banner) {
    width: 49%;
  }
  .side-container li.agent-offer-banner {
    
    margin:0 auto;
  }

  .mypage-name {
    width: 82.5%;
  }

  .small-mater-detail ul li .matter-list-img {
    width: 15px;
  }

  .wallet-history-table table th:nth-child(2) {
    width: 50%;
  }

  .wallet-history-table table th:nth-child(3) {
    width: 25%;
  }

  .wallet-history-table table td:nth-child(2) {
    width: 50%;
  }

  .wallet-history-table table td:nth-child(3) {
    width: 25%;
  }

  .company-list.bank-list li input {
    font-size: 12px;
  }

  .bank-list ul li::before {
    width: 6px;
    height: 6px;
    border-top: 1px solid #242424;
    border-right: 1px solid #242424;
    right: 10px;
  }

  .entry-detail.contact-detail table th {
    width: 100%;
  }

  .distribution-table td {
    font-size: 12px;
  }

  .distribution-table td input {
    width: 60px;
  }

  .search_table.account-table.review-table input[type="number"] {
    width: 95%;
  }
}

@media (max-width: 500px) {
  .container {
    padding: 60px 15px 120px;
  }

  .smsp {
    display: none !important;
  }

  .logout-btn a {
    font-size: 12px;
    line-height: 27.5px;
  }

  .logout-btn {
    width: 90px;
    height: 29.5px;
  }

  .drawer-hamburger {
    top: -2px !important;
    width: 25px !important;
  }

  .entry .header-inner {
    padding: 10px;
  }

  .footer-nav ul {
    display: block;
    max-width: 100%;
    width: 100%;
  }

  .footer-nav ul li {
    text-align: center;
    padding-bottom: 10px;
  }

  .footer-nav ul li:last-child {
    padding-bottom: 0px;
  }

  .login-id {
    display: block;
  }

  .login-id p:nth-child(1) {
    display: block;
    margin: 0 0 10px;
  }

  .entry input[type="password"],
  .entry input#input_pass01,
  .entry input#input_pass02 {
    width: 70%;
  }

  .agree-link p {
    font-size: 10px;
  }

  .entry-flow li {
    font-size: 14px;
  }

  .modal-flex {
    width: 240px;
  }

  .modal-text .modal-text .modal-flex-num p {
    font-size: 22px;
  }

  .entry .entry-title h2 {
    font-size: 18px;
  }

  .entry .entry-title p {
    font-size: 16px;
  }

  #sbox {
    width: 87.5%;
    height: 40px;
  }

  #sbtn {
    width: 12.5%;
    height: 40px;
  }

  .search-flex-content input,
  .search-flex-content select {
    font-size: 12px;
  }

  .search-submit input {
    font-size: 12px;
  }

  .keep-check label {
    vertical-align: middle;
    font-size: 12px;
  }

  .search_tables-title label {
    font-size: 14px;
    vertical-align: text-bottom;
  }

  .matter-lists .matter-lists-item {
    padding: 12.5px 10px;
  }

  .pagenations {
    display: block;
  }

  .page-sum {
    width: 100%;
    margin-bottom: 10px;
  }

  .pagenation {
    width: 100%;
  }

  .matter-lists li .matter-title p {
    font-size: 12px;
  }

  .matter-lists li .matter-title h3 {
    font-size: 16px;
  }

  .matter-list-img {
    width: 20px;
    margin-right: 7.5px;
  }

  .matter-list-text {
    font-size: 12px;
  }

  .matter-btn {
    padding: 10px;
    display: block;
  }

  .matter-btn a {
    font-size: 12px;
  }

  .matter-btn .rec-btn a img {
    width: 12.5px;
    margin-right: 2.5px;
    vertical-align: sub;
  }

  .sort-item ul li a {
    font-size: 10px;
  }

  .big-title {
    padding: 7.5px 7.5px 10px;
    margin-bottom: 15px;
  }

  .big-title h2 {
    font-size: 16px;
  }

  .matter-btn .rec-btn {
    width: 100%;
    margin-bottom: 10px;
  }

  .matter-btn .detail-btn {
    width: 100%;
  }

  .pagenation ul li a {
    font-size: 10px;
  }

  .box-list {
    display: block;
  }

  .box-list li {
    width: 100%;
    padding: 15px 0;
    background-color: #EA5755;
    display: block;
  }

  .box-list li:nth-child(1) {
    margin-bottom: 10px;
  }

  .box-list li p span {
    font-size: 20px;
  }

  .other-day p {
    font-size: 14px;
  }

  .matter-detail-compamy .company-title p {
    font-size: 16px;
  }

  .matter-detail-compamy .company-name a {
    font-size: 16px;
  }

  .company-other .other-btn {
    margin: 5px auto;
  }

  .slide-item .matter-btn .rec-btn {
    margin-bottom: 0px;
  }

  .slide-item .matter-btn .detail-btn a {
    padding: 5px 0;
  }

  .slide-matter-title p {
    font-size: 14px;
  }

  .slide-matter {
    padding: 10px 10px 20px;
  }

  .sliderArea {
    padding: 0px 5px;
  }

  .slide-item {
    margin: 0px 5px;
  }

  .next-arrow {
    right: -15px;
    width: 20px;
    height: 20px;
  }

  .prev-arrow {
    left: -15px;
    width: 20px;
    height: 20px;
  }

  .entry-detail table td {
    padding: 10px 5px;
  }

  .matter-complete-title h2 {
    font-size: 20px;
  }

  .complete-img {
    width: 160px;
  }

  .tab_box.task .tab_btn {
    padding: 10px 0 7.5px;
    font-size: 10px;
  }

  .company-name p {
    font-size: 16px;
  }

  .company-list-right p,
  .company-list-left p {
    font-size: 12px;
  }

  .company-matter-detail {
    display: block;
  }

  .company-matter-detail ul {
    width: 100%;
    margin: 0 auto 10px;
  }

  .company-matter-btn a {
    margin: 0 auto;
  }

  .company-list li {
    padding: 12.5px 15px;
  }

  .table-title {
    padding: 10px 12.5px 7.5px;
  }

  .company-review-img {
    margin: 0 auto 10px;
  }

  .company-review-text {
    width: 100%;
    margin: 0 auto 5px;
  }

  .company-review-star {
    text-align: center;
  }

  .company-review {
    display: block;
  }

  .message-list li a {
    padding: 10px;
    align-items: center;
  }

  .company-list-img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }

  .company-list-name p {
    font-size: 12px;
    padding-bottom: 0px;
  }

  .company-list-name small,
  .company-list-day p {
    font-size: 10px;
  }

  #sbox2 {
    font-size: 12px;
  }

  #sbtn2 {
    font-size: 12px;
  }

  .message-box-btn a {
    font-size: 12px;
  }

  .message-box-text p {
    font-size: 12px;
  }

  .fukidasi {
    max-width: 180px;
    border-radius: 35px;
  }

  /* .side-container li {
    width: 100%;
  } */

  .mypage-name {
    width: 75%;
  }

  .mypage-name p {
    font-size: 16px;
  }

  .mypage-icon {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }

  .wallet-name img {
    width: 17.5px;
  }

  .wallet-name p {
    font-size: 12px;
  }

  .wallet-name p span {
    font-size: 14px;
  }

  .wallet-prices .wallet-price p {
    font-size: 20px;
  }

  .wallet-withdraw a {
    width: 70px;
    font-size: 10px;
  }

  .side-container li a:not(.agent-offer-banner > a) {
    font-size: 12px;
    padding: 12.5px 10px;
  }

  .small-mater-detail {
    display: block;
    justify-content: space-between;
    align-items: center;
  }

  .small-mater-detail ul {
    width: 100%;
    margin: 0 auto 15px;
  }

  .small-matter-btn a {
    margin: 0 auto;
  }

  .modal-title.chat-title p {
    font-size: 14px;
  }

  .wallet-menu ul li a {
    font-size: 12px;
  }

  .wallet-history-table table td,
  .wallet-history-table table th {
    font-size: 12px;
  }

  .wallet-menu.payment-menu ul li {
    font-size: 14px;
  }

  .wallet-menu.payment-menu ul li span {
    font-size: 20px;
    line-height: 14px;
  }

  .company-list.bank-list li {
    padding: 10px 27.5px 10px 15px;
  }

  .company-list-left.bank-list-left {
    width: 40%;
  }

  .company-list-left.bank-list-right {
    width: 60%;
  }

  .entry-detail.contact-detail table th span {
    font-size: 10px;
  }

  .privacy-Block h3 {
    font-size: 16px;
  }

  .privacy p {
    font-size: 12px;
    margin-top: 15px;
    line-height: 1.7;
  }

  .privacy li {
    font-size: 12px;
    line-height: 1.8;
  }

  .search_table.account-table input[type="tel"],
  .search_table.account-table input[type="email"],
  .search_table.account-table input[type="password"],
  .search_table.account-table select {
    width: 100%;
  }

  .Label {
    font-size: 12px;
  }

  .Label::before {
    width: 7.5px;
    height: 7.5px;
    border-top: 1px solid #707070;
    border-right: 1px solid #707070;
  }

  .review-list .company-review-text p.name {
    text-align: center;
  }

  .review-day p {
    text-align: right;
  }

  .search_table.notice-table td {
    font-size: 12px;
    padding: 15px 70px 15px 7.5px;
  }

  .task-btn p {
    font-size: 10px;
  }

  .distribution-content .place img {
    width: 18px;
    padding-right: 5px;
  }

  .distribution-content .place p {
    font-size: 14px;
  }

  .distribution-number {
    max-width: 300px;
    width: 100%;
    margin: 0 auto 30px;
  }

  .distribution-number p {
    font-size: 14px;
  }

  .modalWrapper.distribution-modal {
    padding-top: 40px;
  }

  .modal-flex-btn {
    display: block;
  }

  .modal-flex-btn a {
    width: 100%;
  }

  .modal-flex-btn a.suspension-btn {
    margin: 0 auto 15px;
  }

  .gps .modal-flex-btn a.suspension-btn {
    margin: 0 auto;
  }

  .gps .modal-flex-btn a.finish-btn {
    margin: 0 auto 15px;
  }

  .review-company-name p {
    font-size: 16px;
  }

  .distribution-table th {
    font-size: 12px;
  }

  .distribution-table th:nth-child(1) {
    width: 30%;
  }

  .distribution-table th:nth-child(2) {
    width: 40%;
  }

  .distribution-table th:nth-child(3) {
    width: 30%;
  }

  .distribution-table td:nth-child(1) {
    width: 30%;
  }

  .distribution-table td:nth-child(2) {
    width: 40%;
  }

  .distribution-table td:nth-child(3) {
    width: 30%;
  }

  .header-inner {
    padding: 10px 5px;
  }

  .group-btn {
    margin: 0 auto 20px;
  }

  table.area-table th {
    font-size: 12px;
    padding-right: 7.5px !important;
  }

  table.area-table td {
    font-size: 12px;
  }

  .distribution-content table.area-table {
    padding-left: 20px;
  }

  .line-register-txt {
    margin-bottom: 30px;
  }

  .line-register-txt p {
    font-size: 14px;
  }

  p.caution-txt-p {
    font-size: 12px;
  }
}

@media (max-width: 374px) {
  .entry-btn {
    width: 80px;
  }

  .entry-btn a,
  .login-btn a {
    font-size: 10px;
  }

  .login-btn {
    width: 60px;
  }

  .search-submit {
    width: 240px;
  }

  .slide-item .matter-list-text p {
    font-size: 10px;
  }

  .mypage-name {
    width: 72.5%;
  }

  .mypage-name p {
    font-size: 14px;
  }
}

/* add230420 */
.send-box {
  border: 1px solid #707070;
  border-top: none;
  display: flex;
  padding: 5px;
  justify-content: space-between;
}

.send-box textarea {
  width: calc(100% - 75px);
  line-height: 14px;
  height: 40px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.2) inset;
}

.send-box input#search {
  width: 70px;
  height: 40px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  background: #F77575;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

.search_table input[type="text"].form-text-small {
  width: 140px;
  margin-left: 0;
}

.login_form.pass_form {
  max-width: 500px;
}

.pass-box.login-box {
  box-shadow: none;
}

.pass_form.login_form img {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 10px;
}

.pass-box p {
  padding-bottom: 20px;
  text-align: center;
  font-size: 16px;
}

.pass-box span {
  font-size: 12px;
  color: #777;
}

.login_form.pass_form .login-btn {
  width: 100%;
}

.back-btn button {
  background-color: #707070;
}


.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.blinking-2{
	-webkit-animation:blink2 1.5s ease-in-out infinite alternate;
    -moz-animation:blink2 1.5s ease-in-out infinite alternate;
    animation:blink2 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink2{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@-moz-keyframes blink2{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@keyframes blink2{
    0% {opacity:0.2;}
    100% {opacity:1;}
}



.blinking-3{
	-webkit-animation:blink3 .5s ease-in-out infinite alternate;
    -moz-animation:blink3 .5s ease-in-out infinite alternate;
    animation:blink3 .5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink3{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@-moz-keyframes blink3{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@keyframes blink3{
    0% {opacity:0.5;}
    100% {opacity:1;}
}

[class^="status-label"]{
  position: relative;
  border-radius: 7px;
  padding: 6px 36px 6px 12px;
  margin:2px;
  font-size: 0.9rem;
}

[class^="status-label"] [class^="badge1__"]{
  top:5px;
  right:6px;
  font-weight: 900;
}

.status-label__red{
  background-color: #d02715;
  color: #fff!important;
}

.status-label__blue{
  background-color: #0a5ea7;
  color: #fff!important;
}

.status-label__grey{
  background-color: #808080;
  color: #fff!important;
}

.status-label__yellow{
  background-color: #ffa500;
  color: #fff!important;
}

/*************************************************************************************************
 *
 * 汎用部品
 *
*************************************************************************************************/

/******************
 *
 * カスタムボックス
 *
 ******************/

 /* 警告 */

.box-warnning01 {
  display: flex;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #ffebee;
  color: #333333;
}

.box-warnning01::before {
  width: 24px;
  height: 24px;
  content: '';
  background-repeat: no-repeat;
  background-size: initial; /* ここを変更 */
  background-position: center; /* 画像を中央に配置 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.box-warnning01 p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #f06060;
}

.box-info01 {
  display: flex;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #fff9e5;
  color: #333333;
}

.box-info01::before {
  width: 24px;
  height: 24px;
  content: '';
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23ffb36b'%3E%3C/path%3E%3C/svg%3E");
}

.box-info01 p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #ffb36b;
}

/* 完了、チェックなど */

.box-success01 {
  display: flex;
  align-items: center;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #ecffe9;
  color: #333333;
}

.box-success01::before {
  width: 16px;
  height: 8px;
  border-bottom: 3px solid #86d67c;
  border-left: 3px solid #86d67c;
  transform: rotate(-45deg) translate(2.5px, -2.5px);
  content: '';
}

.box-success01 p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #86d67c;
}

.box-success02 {
  display: flex;
  align-items: center;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #c1e1f2;
  color: #333333;
}

.box-success02::before {
  width: 16px;
  height: 8px;
  border-bottom: 3px solid #7fb8d7;
  border-left: 3px solid #7fb8d7;
  transform: rotate(-45deg) translate(2.5px, -2.5px);
  content: '';
}

.box-success02 p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #7fb8d7;
}

/*失敗など*/
.box-failed01 {
  display: flex;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #ffebee;
  color: #333333;
}

.box-failed01::before {
  width: 24px;
  height: 24px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.box-failed01 p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #f06060;
}

/*失敗など*/
.box-failed02 {
  display: flex;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #d7d7d7;
  color: #333333;
}

.box-failed02::before {
  width: 24px;
  height: 24px;
  content: '';
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 352 512%22%3E%3Cpath d=%22M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.box-failed02 p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #6e6e6e;
}

.box-contents-custom{
  border: 2px solid #FA8983;
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 20px;
}
.box-contents-custom__lightgray{
  border: 2px solid #d0d0d0;
}
.box-contents-custom__gray{
  border: 2px solid #6b6b6b;
}
/*番号付きボックス*/
/* <p class="box-021" data-number="1">
    依頼主にお礼を言い、チラシの受け取り方法や日時を確認しましょう。
</p> */
.box-021 {
    position: relative;
    max-width: 430px;
    margin: 1em auto;
    padding: 1em 1.5em;
    border: 2px solid #e48181;
    border-radius: 3px;
    color: #333;
}

.box-021::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1em;
    left: -1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: #e48181;
    color: #fff;
    font-weight: 600;
    content: attr(data-number);
}

.box-021__pink {
   
    border: 2px solid #e48181;
    color: #333;
}

.box-021__pink::before {
    
    background-color: #e48181;
    color: #fff;
    
}

/******************
 *
 * 吹き出し
 *
 ******************/

 .balloon-004 {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 300px;
  margin-left: 15px;
  padding: .8em 1.2em;
  border-radius: 5px;
  background-color: #ee2b2b;
  color: #ffffff;
}

.balloon-004::before {
  position: absolute;
  left: -15px;
  width: 15px;
  height: 30px;
  background-color: #ee2b2b;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: '';
}

/******************
 *
 * カスタムフォーム
 *
 ******************/

 /* ex)
 <div class="ul-form-1">
         
          <div class="title">口座情報</div>
          <ul>
            <li>
              <div class="field-label">
                <p class="required">銀行名</p>
              </div>
              <div class="field-content">
                <input type="">
              </div> 
*/
.ul-form-1{
  width:100%;
}

.ul-form-1 .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.ul-form-1 ul li{
  display:flex;
  margin-bottom:2px;
  
}
.ul-form-1 .field-label{
  background-color:#d0d0d0;
  color:#232323;
  width:15em;
  flex-shrink: 0; 
}

/**ラベル */
.ul-form-1 .field-label .required::after{
  content:'必須';
  border-radius: 0.3em;
  padding:0.2em 0.5em;
  margin-left:0.2em;
  background-color:#ad3838;
  font-size:0.9em;
  color:#FFF;
}
.ul-form-1 .field-label .any::after{
  content:'任意';
  border-radius: 0.3em;
  padding:0.2em 0.5em;
  margin-left:0.2em;
  background-color:#125b9b;
  font-size:0.9em;
  color:#FFF;
}

.ul-form-1 .field-content{
  flex-grow: 1;
  flex-wrap: wrap;
  background-color:#eFeFef;

}

.ul-form-1 .field-label,
.ul-form-1 .field-content{
  padding:0.5em 0.5em 1em 0.5em; 
}

@media (max-width: 500px) {
  .ul-form-1 ul li{
    flex-direction: column;
    
  }
  .ul-form-1 .field-label{
    width:100%;
  }
}

/******************
 *
 * カスタムセレクトボックス 
 *
 ******************/
 /* <label class="selectbox-3">
 <select id="order_list" onchange="changeOrder();">
     @if (empty($selectedEntry)) <option value="">選択してください</option> @endif
     @foreach ($entries as $entry)
     <option value="{{$entry->contract->id}}" @if (!empty($selectedEntry) && $entry->contract->id == $selectedEntry->contract->id) selected @endif>
     {{ $entry->work->name }}(配布ID：{{$entry->contract->id}})
     </option>
     @endforeach
 </select>
</label> */

.selectbox-3 {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.selectbox-3::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox-3 select {
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}
/******************
 *
 * カスタムテキストフィールド
 *
 ******************/

.textbox-1-label,
.textbox-1 {
    color: #333;
}

.textbox-1-label {
    display: block;
    margin-bottom: 5px;
    font-size: .9em;
}

.textbox-1 {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #969da3;
    background-color:#FFF;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5;
}

.textbox-1::placeholder {
    color: #999;
}
/******************
 *
 * カスタムボタン
 *
 ******************/
.button-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin:0 auto;
  padding: .9em 2em;
  border: 1px solid #737373;
  border-radius: 5px;
  background-color: #fff;
  color: #737373;
  font-size: 1em;
}
.button-1:disabled{
background-color: #DDD;
}

.button-1::after {
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  margin-left: 10px;
  border-top: 2px solid #737373;
  border-right: 2px solid #737373;
  content: '';
}

.button-2__blue {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  padding: .5em 1em;
  border: 1px solid #1679bb;
  border-radius: 5px;
  background-color: #1679bb;
  color: #FFF;
  font-size: 1em;
}
.button-2__blue:active{
  border: 1px solid #DDD;
  background-color: #DDD;
}

.button-2__black {
	display: flex;
	justify-content: center;
	align-items: center;
	margin:0 auto;
	padding: .5em 1em;
	border: 1px solid #242424;
	border-radius: 5px;
	background-color: #242424;
	color: #FFF;
	font-size: 1em;
  }
  .button-2__black:active{
	border: 1px solid #FFF;
	background-color: #FFF;
	color:#242424;
  }

.button-2__white {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  padding: .5em 1em;
  border: 1px solid #999;
  border-radius: 5px;
  background-color: #ffffff;
  color: #555;
  font-size: 1em;
}
.button-2__white:active{
  border: 1px solid #ccc;
  background-color: #ccc;
}

.button-2__red {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  padding: .5em 1em;
  border: 1px solid #EA5755;
  border-radius: 5px;
  background-color: #EA5755;
  color: #FFF;
  font-size: 1em;
}
.button-2__red:active{
  border: 1px solid #DDD;
  background-color: #DDD;
}

.button-2__yellow {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin:0 auto; */
  padding: .5em 1em;
  border: 1px solid #F7D667;
  border-radius: 5px;
  background-color: #F7D667;
  color: #FFF;
  font-size: 1em;
}
.button-2__yellow:active{
  border: 1px solid #DDD;
  background-color: #DDD;
  color: #F7D667;
}

.button-2__darkgray {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin:0 auto; */
  padding: .5em 1em;
  border: 1px solid #6b6b6b;
  border-radius: 5px;
  background-color: #6b6b6b;
  color: #FFF;
  font-size: 1em;
}
.button-2__darkgray:active{
  border: 1px solid #DDD;
  background-color: #DDD;
  color: #6b6b6b;
}

/** トグル **/
.toggle-button-2 {
  display: inline-block;
  position: relative;
  width: 32px; /* 幅も縮小する */
  height: 16px; /* 高さを16pxに変更 */
  border-radius: 16px; /* 高さと同じ数値に変更 */
  border: 2px solid #dddddd; /* ボーダーも少し小さく調整 */
  box-sizing: content-box;
  cursor: pointer;
  transition: border-color .4s;
}

.toggle-button-2:has(:checked) {
  border-color: #f7d667;
}

.toggle-button-2::after {
  position: absolute;
  top: 50%;
  left: 1px; /* 左の位置も微調整 */
  transform: translateY(-50%);
  width: 12px; /* ボタンの幅も縮小 */
  height: 12px; /* 高さも調整 */
  border-radius: 50%; /* 丸形のまま */
  background-color: #dddddd;
  content: '';
  transition: left .4s;
}

.toggle-button-2:has(:checked)::after {
  left: 18px; /* チェックされた時の位置も調整 */
  background-color: #f7d667;
}


.toggle-button-2 input {
  display: none;
}


/******************
 *
 * カスタムリスト
 *
 ******************/

 .list-2 {
  list-style-type: none;
  padding: 1em;
  border: 2px solid #2589d0;
  counter-reset: li;
}

.list-2 li {
  display: flex;
  align-items: center;
  padding: .3em;
}

.list-2 li::before {
  display: inline-block;
  min-width: 1.7em;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #2589d0;
  color: #fff;
  font-weight: bold;
  font-size: .75em;
  line-height: 1.7em;
  text-align: center;
  content: counter(li);
  counter-increment: li;
}

.list-9 {
  list-style-type: disc;
  list-style-position: inside;
  padding: 1em;
  border: 2px solid #ea5755;
}

.list-9 li {
  padding: .5em;
}

.list-9 li:not(:last-child) {
  border-bottom: 1px dashed #ea5755;
}

.list-9 li::marker {
  color: #ea5755;
  font-size: 1.1em;
}

/*******************
 *
 * カスタムラベル
 *
 *******************/
 .label-1{
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #f7d667;
  color: #333;
  font-size: 0.8rem;
 }
 .label-1__red{
  background-color: #f76767;
  color: #FFF;
 }
 .label-1__blue{
  background-color: #3765fe;
  color: #FFF;
 }
 .label-1__gray{
  background-color: #6b6b6b;
  color: #FFF;
 }
 /*リボン*/
.ribbon-1 {  
  display: inline-block;
  position: absolute;
  top: -8px;
  right: 10px;
  margin: 0;
  padding: 10px 0;
  z-index: 1;
  width: 60px;
  text-align: center;
  color: white;
  font-size: 0.9rem;
  background: linear-gradient(#ff785b 0%, #e95738 100%);
  border-radius: 2px 0 0 0;
  }

.ribbon-1:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px #cf4a2d;
  border-right: solid 6px transparent;
}
.ribbon-1:after {
  content: '';
  position: absolute;
  left: 0;
  top: 98.3%;
  height: 0;
  width: 0;
  border-left: 30px solid #e95738;
  border-right: 30px solid #e95738;
  border-bottom: 10px solid transparent;
}

.ribbon-2 {  
  display: inline-block;
  position: absolute;
  top: -8px;
  right: 10px;
  margin: 0;
  padding: 10px 0;
  z-index: 1;
  width: 60px;
  text-align: center;
  color: white;
  font-size: 0.8rem;
  background: linear-gradient(#acacac 0%, #7f7f7f 100%);
  border-radius: 2px 0 0 0;
  }

.ribbon-2:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px #7f7f7f;
  border-right: solid 6px transparent;
}
.ribbon-2:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 30px solid #7f7f7f;
  border-right: 30px solid #7f7f7f;
  border-bottom: 10px solid transparent;
}
/*******************
 *
 * カスタムチャート
 *
 *******************/

 .bar-chart-002 {
  font-size: .9em;
}

.bar-chart-002 > div {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}

.bar-chart-002 dt {
  width: 72px;
  min-width: 55px;
  margin-right:1rem;
}

.bar-chart-002 dd {
  width: 100%;
  margin: 0;
  border-radius: 3px;
  background-color: #f2f2f2;
}

.bar-chart-002 span {
  display: inline-block;
  padding-left:2px;
  padding-right: 15px;
  border-radius: inherit;
  background-color: #f3a499;
  color: #303030;
  font-weight: 600;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
}
/********************
 *
 * カスタムテーブル
 *
 ********************/
 .table-01{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }

  .table-01 tr{
    border-bottom: solid 1px #eee;
    cursor: pointer;
  }

  .table-01 tr:hover{
    background-color: #d4f0fd;
  }
  .table-01 th{
    background-color:#eee;
  }

  .table-01 th,table td{
    text-align: left;
    /* width: 25%; */
    padding: 16px 16px;
  }

  .table-02{
    /* margin: 100px auto; */
    border-collapse: collapse;
    border: solid 2px #595959;
  }
  .table-02 td, 
  .table-02 th {
      padding: 5px;

      border: solid 1px #595959;
  }
  .table-02 td{
      vertical-align: middle;
      
  }
  .table-02 th {
      text-align:center;
      background: #e6e6e6;
  }



  /*テーブル横スクロール*/
  .table-scroll-01{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
/******************
 *
 * モーダルウィンドウ
 *
 ******************/

 /** Alertモーダル **/

 /*EX）
 <div class="alert-confirm-modal__wrap">
    <label for="alert-confirm-modal__open" class="alert-confirm-modal__open-label">モーダルを開く</label><--JSなどのアクションから開きたい場合はこいつ抜く
    <input type="radio" id="alert-confirm-modal__open[任意のID]" class="alert-confirm-modal__open-input" name="alert-confirm-modal__trigger"/>
    <input type="radio" id="alert-confirm-modal__close[任意のID]" name="alert-confirm-modal__trigger"/>
    <div class="alert-confirm-modal">
        <div class="alert-confirm-modal__content-wrap">
            <label for="alert-confirm-modal__close[任意のIDと合わせる]" class="alert-confirm-modal__close-label">×</label>
            <div class="alert-confirm-modal__content">ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。<br/>ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。<br/>ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。</div>
        </div>
        <label for="alert-confirm-modal__close[任意のIDと合わせる]">
            <div class="alert-confirm-modal__background"></div>
        </label>
    </div>
</div>
*/

.alert-confirm-modal__wrap > input {
  display: none;
}

.alert-confirm-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.alert-confirm-modal__open-input:checked + input + .alert-confirm-modal {
  display: block;
  animation: alert-confirm-modal-animation .6s;
}

.alert-confirm-modal__content-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 650px;
  background-color: #fefefe;
  z-index: 2;
  border-radius: 5px;
}

.alert-confirm-modal__content {
  max-height: 50vh;
  overflow-y: auto;
  padding: 39px 45px 40px;
}
.alert-confirm-modal__content .alert-confirm-modal__message{
  text-align:center;
}
.alert-confirm-modal__content .alert-confirm-modal__ok-ng{
  margin-top:1em;
  display:flex;
  justify-content: center;
}
.alert-confirm-modal__content .alert-confirm-modal__ok-btn,
.alert-confirm-modal__content .alert-confirm-modal__no-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0.2em;
  padding: .5em 1em;
  border-radius: 5px;
  font-size: 1em;
}

.alert-confirm-modal__content .alert-confirm-modal__ok-btn {
  border: 1px solid #1679bb;
  background-color: #1679bb;
  color: #FFF;
  
}
.alert-confirm-modal__content .alert-confirm-modal__no-btn {
  border: 1px solid #dc52a5;
  background-color: #dc52a5;
  color: #FFF;

}
.alert-confirm-modal__ok-btn:active{
  color: #1679bb;
  border: 1px solid #1679bb;
  background-color: #a7cfe9;
}

.alert-confirm-modal__no-btn:active{
  color: #dc52a5;
  border: 1px solid #dc52a5;
  background-color: #edbeda;
}

.alert-confirm-modal__background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .45);
  z-index: 1;
}

@keyframes alert-confirm-modal-animation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@media only screen and (max-width: 520px) {
git
  .alert-confirm-modal__content-wrap {
      width: 90vw;
  }

  .alert-confirm-modal__content {
      padding: 33px 21px 35px;
      max-width: 100%;
  }
}

/** 汎用モーダルウィンドウ **/


.sort-switch-btns {
  display: flex;
}

.sort-switch-btns .task-btn {
  display: block;
}

.sort-switch-btns .task-btn:nth-child(1) {
  margin-right: 20px;
}

.sort-switch-btns .task-btn p {
  padding-left: 0px;
}

.sort-switch-btns .task-btn .toggle {
  margin: 2.5px auto 15px;
}

.boshushuryo-label{
  border:2px #c10c21 solid;
  color:#c10c21;
  padding:4px 3px 3px 3px;
  font-size:0.8rem!important;
  text-align:center;
  border-radius: 3px;
  display: inline-block;
}

.top-list-box {
  width: 100%; /* 必要に応じて幅を指定 */
}

.top-list-box .top-list {
  display: flex;
  flex-wrap: wrap; /* 要素が折り返されるように設定 */
  justify-content: left; /* 要素間のスペースを均等にする */
}

.top-list-box .top-list li {
  flex: 0 0 calc(33.33% - 10px); /* 3列に分けるために幅を指定し、余白を考慮 */
  list-style: none; 
  text-align: center; 
  border: 1px solid #ccc; 
  padding: 10px;
  margin: 5px; 
  box-sizing: border-box; 
  border-radius: 5px;
}
.top-list-box .top-list .work-box .mypage-icon {
  width:40px;
  height:40px;
}
.top-list-box .top-list .work-box .work-day {
  text-align:left;
  border:1px #DDD solid;
  color:#AAA;
  font-size:0.9rem;
  padding:3px 5px;
  display:inline-block;

}
.top-list-box .top-list .work-box .work-name {
  text-align:left;
  width: 290px;
  white-space: nowrap;    /* 改行を禁止 */
  overflow: hidden;       /* はみ出た部分を非表示に */
  text-overflow: ellipsis; /* はみ出た部分を省略記号に */
}
.top-list-box .top-list .work-box .work-pref {
  text-align:left;
}
.top-list-box .top-list .work-box .work-price {
  text-align:left;
  vertical-align: bottom;
}

@media (max-width: 1032px) {
  .top-list-box .top-list .work-box .work-name {
    width: 240px;
    
  }
}
@media (max-width: 868px) {
  .top-list-box .top-list .work-box .work-name {
    width: 190px;
    
  }
}
@media (max-width: 768px) {
  .top-list-box .top-list .work-box .work-name {
    width: 300px;
    
  }
  .top-list-box .top-list li {
    flex: 0 0 calc(50% - 10px); /* 3列に分けるために幅を指定し、余白を考慮 */
  }
}
@media (max-width: 710px) {
  .top-list-box .top-list .work-box .work-name {
    width: 260px; 
  }
}
@media (max-width: 626px) {
  .top-list-box .top-list .work-box .work-name {
    width: 200px; 
  }
}
@media (max-width: 510px) {
  .top-list-box .top-list .work-box .work-name {
    width: 160px; 
  }
}
@media (max-width: 420px) {
  .top-list-box .top-list .work-box .work-name {
    
    width: 310px;
    
  }
  .top-list-box .top-list li {
    flex: 0 0 calc(100% - 10px); /* 3列に分けるために幅を指定し、余白を考慮 */
  }
}
@media (max-width: 380px) {
  .top-list-box .top-list .work-box .work-name {
    width: 280px; 
  }
}

.top-list-box .top-list .work-box .work-button {
  background-color: #FFF3F5;

}
.top-list-box .top-list .work-box .detail-btn{
  display:inline-block;
  border:1px #EA5755 solid;
  color:#EA5755;
  padding:4px 8px;
  border-radius: 5px;
  margin-top:8px;

}



.break-word {
  word-break: break-word; /* 改行可能 */
  overflow-wrap: break-word; /* 必要に応じて改行 */
}
.nowrap {
  white-space: nowrap; /* この部分は改行しない */
}

.canwrap {
  white-space: normal; /* この部分は改行を許可 */
}


/******************
 *
 * バッジ
 *
 ******************/

 
 .badge1__red{
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #ef4643;
  border-radius: 24px;
  min-width: 24px;
  height: 24px;
  padding:0px 8px;
}
.badge1__red .inner{
  font-weight: bold;
  font-size: 0.7rem;
  color:#FFF;
}

.badge1__white{
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
  border-radius: 24px;
  min-width: 24px;
  height: 24px;
  padding:0px 8px;
}
.badge1__white .inner{
  font-weight: bold;
  font-size: 0.7rem;
  color:#000;
}

input[name="user_info_send_flg"] {
  display: none;
}

/******************
 *
 * タイムライン
 *
 ******************/

 .timeline-003 {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}

.timeline-003 li {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  color: #969da3;
  font-size: 0.9em;
}

.timeline-003 li.prev,
.timeline-003 li.current {
  color: #f3a499;
}
.timeline-003 li.current {
  color: #e56a5a;
}

.timeline-003 li::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-bottom: 6px;
  content: '';
  border: 2px solid #d6dde3;
  border-radius: 50%;
  background-color: #fff;
}

.timeline-003 li.prev::before,
.timeline-003 li.current::before {
  border-color: #f3a499;
}

.timeline-003 li:not(:last-child)::after {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 2px;
  background-color: #d6dde3;
  content: '';
}

.timeline-003 li.current::before,
.timeline-003 li.prev::after {
  background-color: #f3a499;
}


/******************
 * ツールチップ
 ******************/

 .tooltip-001 {
  display: inline-block;
  position: relative;
}

.tooltip-001 .tooltip-btn {
  cursor: pointer;
}

.tooltip-001 .tooltip-body {
  display: flex;
  justify-content: center;
  visibility: hidden;
  opacity: 0.7;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  padding: .5em 1em;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #FFF;
  white-space: nowrap;
  transition: opacity .3s;
  z-index:99;
}


.tooltip-001:hover .tooltip-body {
  visibility: visible;
  opacity: 1;
}




.tooltip-005 {
    display: inline-block;
    position: relative;
}

.tooltip-005 svg {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.tooltip-005 p {
    display: flex;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: -43px;
    left: 50%;
    transform: translateX(-50%);
    padding: .5em 1em;
    border-radius: 3px;
    background-color: #00000099;
    color: #fff;
    font-size: .9em;
    white-space: nowrap;
    transition: opacity .3s;
}

.tooltip-005:hover > p {
    visibility: visible;
    opacity: 1;
}

/* .tooltip-005 p::before {
    position: absolute;
    top: -6px;
    width: 9px;
    height: 6px;
    background-color: inherit;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
} */


.tooltip-square {
  position: relative;
}
.tooltip-square .tooltip-square-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: opacity .3s, visibility .1s;
    top: 0;
    left: 0;
    padding: .5em 1em;
    border-radius: 3px;
    background-color: #000000b3;
    color: #fff;
    font-size: .9em;
    line-height: 1.5;
}
 
.tooltip-square:hover .tooltip-square-content {
  visibility: visible;
  opacity: 1;
}


.table-wrapper {
    max-height: 80vh;      /* 縦の高さを決める */
    overflow-y: auto;       /* 中身だけ縦スクロール */
}

/* ヘッダー固定 */
.sticky-header-table thead th {
position: sticky;
top: 0;
background: #fff;       /* 下の行が透けないように背景色必須 */
z-index: 1;             /* 行とかぶらないように */
}

/* 見た目はお好みで */
.sticky-header-table {
width: 100%;
border-collapse: collapse;
}
.sticky-header-table th,
.sticky-header-table td {
border: 1px solid #ccc;
padding: 4px 8px;
}