@charset "utf-8";

/*------------------------------------------------------------------------------
  reset
------------------------------------------------------------------------------*/

html,
input,
textarea,
select,
button {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
}

/* IE10以降 游ゴシック文字ずれ対応 */
html.ie10,
.ie10 input,
.ie10 textarea,
.ie10 select,
.ie10 button,
html.ie11,
.ie11 input,
.ie11 textarea,
.ie11 select,
.ie11 button {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: normal;
}

html {
  color: #333;
  background: #fff;
  font-size: 10px;
  line-height: 1.6;
  word-break: break-all;
}
html.font-size-big {
  font-size: 14px;
}

body {
  background: #fff;
  font-size: 1.2rem;
  margin: 0;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

img {
  border: 0;
  margin: 0;
  vertical-align: top;
  max-width: 100%;
}

p {
  margin: 0 0 1em;
  padding: 0;
}

p:last-child {
  margin-bottom: 0;
}

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

input[type="submit"],
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  font-size: 16px;
  padding: 5px 10px;
  margin: 0;
  border-radius: 0;
  background: #fff;
  border: 1px solid #aaa;
}
input[type="date"] {
  padding: 5px 10px;
  font-size: 16px;
  border: 1px solid #aaa;
}
input[type="time"] {
  padding: 5px 10px;
  font-size: 16px;
  border: 1px solid #aaa;
}
select {
  font-size: 16px;
  padding: 5px 10px;
  border: 1px solid #aaa;
}

input[type="submit"] {
  -webkit-text-size-adjust: 100%;
}
button {
  position: relative;
  transition: left 50ms;
  transition: top 0.1s;
  transition: scale 50ms;
}

select::-ms-expand {
  display: none;
}

textarea {
  resize: vertical;
}

button {
  border: none;
  cursor: pointer;
}

label {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

.outer-block {
  min-width: 320px;
}

.inner-block {
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100%;
}

#wrapper {
  min-width: 320px;
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
}
#wrapper.has-not-sub-menu {
  padding-top: 50px;
}

.main {
  word-break: normal !important;
  word-wrap: break-word;
}

.pc {
  display: none !important;
}
.pc-ib {
  display: none !important;
}

.sp {
  display: block !important;
}
.sp-ib {
  display: inline-block !important;
}

.js-based {
  display: none !important;
}
.js-based-based {
  display: none !important;
}

.display-none {
  display: none;
}

@media (max-width: 350px) {
  .sp-320-hide {
    display: none;
  }
}


/*------------------------------------------------------------------------------
  auth disp
------------------------------------------------------------------------------*/
#wrapper:not(.auth-developer) .auth-developer {
  display: none !important;
}
#wrapper:not(.auth-contactman):not(.auth-developer) .auth-contactman {
  display: none !important;
}
#wrapper:not(.auth-conductor):not(.auth-contactman):not(.auth-developer) .auth-conductor {
  display: none !important;
}
#wrapper:not(.auth-supporter):not(.auth-conductor):not(.auth-contactman):not(.auth-developer) .auth-supporter {
  display: none !important;
}
#wrapper:not(.auth-helper):not(.auth-supporter):not(.auth-conductor):not(.auth-contactman):not(.auth-developer) .auth-helper {
  display: none !important;
}
#wrapper:not(.auth-pointman):not(.auth-supporter):not(.auth-conductor):not(.auth-contactman):not(.auth-developer) .auth-pointman {
  display: none !important;
}
#wrapper:not(.auth-elder-and-helper):not(.auth-supporter):not(.auth-conductor):not(.auth-contactman):not(.auth-developer) .auth-elder-and-helper {
  display: none !important;
}

/*** depertment ***/
#wrapper:not(.auth-supporter):not(.auth-conductor):not(.auth-contactman):not(.auth-developer):not(.depertment-manage) .depertment-manage {
  display: none !important;
}
#wrapper:not(.auth-supporter):not(.auth-conductor):not(.auth-contactman):not(.auth-developer):not(.depertment-preach) .depertment-preach {
  display: none !important;
}
#wrapper:not(.auth-supporter):not(.auth-conductor):not(.auth-contactman):not(.auth-developer):not(.depertment-material) .depertment-material {
  display: none !important;
}





/*------------------------------------------------------------------------------
  font
------------------------------------------------------------------------------*/
.en-font {
  font-family: Impact, Myriad, Verdana, Axis, sans-serif;
}

/*------------------------------------------------------------------------------
  text
------------------------------------------------------------------------------*/
.text-title {
  font-size: 1.8rem;
  font-weight: bold;
}
.text-subtitle {
  font-size: 1.4rem;
  font-weight: bold;
}


/*------------------------------------------------------------------------------
  btn-area
------------------------------------------------------------------------------*/
.btn-area {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.btn-area.type-right {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.btn-area .btn {
  /* background: #e6020f; */ /* 当初のデザインの色 */
  background: #123592;
  border-radius: 8px;
  color: #fff;
  display: block;
  font-size: 1.2rem;
  padding: 5px 0;
  text-align: center;
  width: 100%;
}
.btn-area .btn.calsel-btn {
  background: #999;
}
.btn-area .btn + .btn {
  margin-left: 5px;
}
.btn-area .text-label {
  margin: 0 10px 0 0;
  width: 100%;
}
.btn-area .disabled {
  color: #aaa;
}
.right-btn-area {
  text-align: right;
  margin: 0 10px;
}
.all-open-btn {
  background: #123592;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 1.1rem;
  padding: 5px 10px;
  text-align: center;
}
@media (max-width: 640px) {
  .card-ul .btn-area {
    display: block;
    text-align: center;
  }

  .card-ul .btn-area .btn {
    display: inline-block;
    margin: 0 1% 5px;
    width: 46%;
  }
}


/*------------------------------------------------------------------------------
  header
------------------------------------------------------------------------------*/
#header {
  background: #ddd;
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 101;
}
#header .inner-block {
  padding: 15px 10px 5px;
}
#header .logo-text {
  width: 180px;
}
#header .logo-text .logo-sp {
  display: none;
}
@media (max-width: 400px) {
  #header .logo-text .logo-pc {
    display: none;
  }
  #header .logo-text .logo-sp {
    display: block;
  }
  #header .logo-text {
    position: relative;
    top: -6px;
    left: 0;
    width: 110px;
  }
}

  /*------------------------------------------------------------------------------
    user-info-block
  ------------------------------------------------------------------------------*/
#user-info-block {
  position: fixed;
  top: 5px;
  right: 10px;
  height: 50px;
  z-index: 102;
}
#user-info-block:before {
  border: 1px solid #333;
  border-radius: 50%;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  left: -28px;
  top: 8px;
}
#user-info-block:after {
  border-bottom: 9px solid transparent;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 9px solid #333;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  left: -22px;
  top: 16px;
}
#user-info-block.open:after {
  top: 4px;
  border-bottom: 9px solid #333;
  border-top: 9px solid transparent;
}
#user-info-block .my-name {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.6;
}
#user-info-block .my-name.unread:after {
  content: ' ●';
  color: #e60012;
}

#user-info-block .my-pointman {
  position: absolute;
  right: 0;
  top: 1px;
  font-size: 12px;
  font-weight: bold;
}

#user-info-block .my-shift {
  font-size: 12px;
  font-weight: bold;
}

.auth-mode .contents-block {
  background: #53544E;
  color: #fff;
}

/*------------------------------------------------------------------------------
  contents-block
------------------------------------------------------------------------------*/
.contents-block {
  background: #eeeef0;
  min-height: 90vh;
  opacity: 0; /* loadingの間透過 */
  transition: opacity 0.3s;
  padding: 0 0 1px;
}
.has-not-sub-menu .contents-block {
  padding-top: 30px;
}

.page-title {
  margin: 0 10px 20px;
  font-size: 1.8rem;
  font-weight: bold;
}
/*
#wrapper .slick-slider {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

 */

.app-apply-btn {
  display: none;
  text-align: center;
  margin: 0 0 40px;
}
.app-apply-btn .btn {
  margin: auto;
}

/*------------------------------------------------------------------------------
  main-menu
------------------------------------------------------------------------------*/
#main-menu {
  background: #ddd;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 102;
}

#main-menu .main-menu-ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 12px;
}
#main-menu .main-menu-ul li {
  height: 60px;
  width: 25%;
  text-align: center;
}
#main-menu .main-menu-ul li a {
  display: block;
  height: 100%;
  padding: 43px 0 0;
  position: relative;
}
#main-menu .main-menu-ul li.home a {
  background: url(../img/parts/icon_home.png) no-repeat center 5px;
  background-size: 38px;
}
#main-menu .main-menu-ul li.shift a {
  background: url(../img/parts/icon_shift.png) no-repeat center 5px;
  background-size: 32px;
}
#main-menu .main-menu-ul li.news a {
  background: url(../img/parts/icon_news.png) no-repeat center 5px;
  background-size: 36px;
}
#main-menu .main-menu-ul li.information a {
  background: url(../img/parts/icon_infomation.png) no-repeat center 5px;
  background-size: 36px;
}
#main-menu .main-menu-ul li.my-smpw a {
  background: url(../img/parts/icon_mysmpw.png) no-repeat center 5px;
  background-size: 32px;
}
#main-menu .main-menu-ul li.home.current a {
  background-image: url(../img/parts/icon_home_act.png);
}
#main-menu .main-menu-ul li.shift.current a {
  background-image: url(../img/parts/icon_shift_act.png);
}
#main-menu .main-menu-ul li.news.current a {
  background-image: url(../img/parts/icon_news_act.png);
}
#main-menu .main-menu-ul li.information.current a {
  background-image: url(../img/parts/icon_infomation_act.png);
}
#main-menu .main-menu-ul li.my-smpw.current a {
  background-image: url(../img/parts/icon_mysmpw_act.png);
}
#main-menu .main-menu-ul li .badge {
  position: absolute;
  right: 15px;
  top: 5px;
  border-radius: 50%;
  background: #e60012;
  color: #fff;
  text-align: center;
  height: 18px;
  width: 18px;
  font-size: 12px;
  display: none;
}


/*------------------------------------------------------------------------------
  user-menu-body
------------------------------------------------------------------------------*/
#user-menu-body {
  display: none;
  position: fixed;
  top: 50px;
  right: 10px;
  max-height: calc(100vh - 51px);
  overflow: scroll;
  background: #d9e8ff;
  padding: 5px 20px;
  z-index: 100;
}
.user-menu-ul {
  padding: 8px 0;
}
.user-menu-ul li {
  padding: 2px 0;
}
.user-menu-ul li a {
  display: block;
}
.user-menu-ul li.smpw-contact-li.unread a:after {
  content: ' ●';
  color: #e60012;
}
.user-menu-ul + .user-menu-ul {
  border-top: 1px solid #666;
}
.user-menu-ul li.menu-head:before {
  content: '■';
}
.user-menu-ul.has-menu-head li:not(.menu-head) {
  padding-left: 1em;
}
.user-menu-ul li .inactive {
  color: #aaa;
}
.user-menu-ul li.help a {
  background: url(../img/parts/help.png) no-repeat left center;
  background-size: 15px;
  padding: 1px 0 1px 20px;
}
.user-menu-ul li.rule a {
  background: url(../img/parts/rule.png) no-repeat left center;
  background-size: 15px;
  padding: 1px 0 1px 20px;
}
.user-menu-ul li.privacy a {
  background: url(../img/parts/privacy.png) no-repeat left center;
  background-size: 15px;
  padding: 1px 0 1px 20px;
}
.user-menu-ul li.logout a {
  background: url(../img/parts/logout.png) no-repeat 1px center;
  background-size: 15px;
  padding: 1px 0 1px 20px;
}



/*------------------------------------------------------------------------------
  sub-menu-block
------------------------------------------------------------------------------*/
.sub-menu-block {
  background: #fff;
  height: 40px;
  position: fixed;
  left: 0;
  width: 100%;
  top: 50px;
  z-index: 100;
  padding: 0 10px;
  opacity: 0; /* loadingの間透過 */
  transition: opacity 0.3s;
}
.sub-menu-ul li {
  padding: 0 10px;
  color: #6376ba;
  font-weight: bold;
  line-height: 30px;
  font-size: 14px;
  position: relative;
  display: inline-block;
}
.sub-menu-ul li.current,
.sub-menu-ul .slick-current li {
  color: #6376ba;
  font-weight: bold;
}
.sub-menu-ul li .inner {
  position: relative;
  display: block;
}
.sub-menu-ul li .inner:before {
  background: #6376ba;
  content: '';
  height: 3px;
  width: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
.sub-menu-ul li.current .inner:before,
.sub-menu-ul .slick-current li .inner:before {
  width: 100%;
}
.sub-menu-ul li .badge {
  background: #e60012;
  border-radius: 50%;
  content: '';
  height: 10px;
  width: 10px;
  top: 0;
  right: -3px;
  position: absolute;
}
.sub-menu-ul li:not(.unread) .badge {
  display: none;
}

/*
.sub-menu-ul .slick-track {
  width: 100% !important;
  transform: translate3d(0, 0, 0) !important;
}
 */

#wrapper .sub-menu-ul .slick-list {
  overflow: scroll;
}
.sub-menu-ul .slick-list .slick-track {
  transform: translate3d(0, 0, 0) !important;
}
.news-wrapper .sub-menu-ul .slick-list .slick-track {
  width: 450px !important;
}
.experience-wrapper .sub-menu-ul .slick-list .slick-track {
  width: 500px !important;
}
.my-smpw-wrapper .sub-menu-ul .slick-list .slick-track {
  width: 440px !important;
}
.sub-menu-ul .slick-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  text-indent: -9999px;
}
.sub-menu-ul .slick-arrow.slick-prev {
  left: 0;
}
.sub-menu-ul .slick-arrow.slick-next {
  right: -10px;
}
.sub-menu-ul .slick-arrow:before {
  border-left: 2px solid #6376ba;
  border-bottom: 2px solid #6376ba;
  content: '';
  height: 8px;
  width: 8px;
  position: absolute;
  left: 0;
  top: 10px;
}
.sub-menu-ul .slick-arrow.slick-prev:before {
  transform: rotate(45deg);
}
.sub-menu-ul .slick-arrow.slick-next:before {
  transform: rotate(225deg);
}
.comment-btn-area {
  text-align: right;
}
.experience-info {
  margin: 0 0 10px;
}
.experience-info .post_name {
  padding-left: 10px;
}

  /*------------------------------------------------------------------------------
    footer
  ------------------------------------------------------------------------------*/
#footer-block {
  background: #c8c8c8;
  padding: 10px;
}
.footer-link {
  display: flex;
  justify-content: center;
}
.footer-link li {
  font-size: 0.9rem;
  padding: 0 10px;
}
.footer-link li + li {
  border-left: 1px solid #aaa;
}

.page-under-link {
  text-align: right;
  margin: 0 15px;
}
.page-under-link .text-link {
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: flex;
}
.page-under-link img {
  filter: drop-shadow(2px 2px 4px #999);
  border-radius: 50%;
  width: 60px;
}
.page-under-link.fixed {
  position: fixed;
  right: 0;
  bottom: 75px;
  z-index: 10;
}
.page-under-link.fixed.easy-post-link {
  bottom: 145px;
}

.btn-area .btn.js-modal-close {
  background: #aaa;
}
.btn-area .btn.comment-btn {
  background: #ea5404;
}


/*------------------------------------------------------------------------------
  loader
------------------------------------------------------------------------------*/
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100px;
  width: 100px;
  height: 100px;
  margin: auto;
  z-index: 9999;
}

#page-loader .loader {
  color: #123592;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}


#petit-loader {
  position: fixed;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 999;
  width: 100px;
  height: 100px;
}
#petit-loader .loader,
#petit-loader .loader:before,
#petit-loader .loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
#petit-loader .loader {
  color: #123592;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
#petit-loader .loader:before,
#petit-loader .loader:after {
  content: '';
  position: absolute;
  top: 0;
}
#petit-loader .loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
#petit-loader .loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


  /*------------------------------------------------------------------------------
    useful-menu-block
  ------------------------------------------------------------------------------*/
.useful-menu-block {
  margin: 10px 0;
  opacity: 0; /* loadingの間透過 */
  transition: opacity 0.3s;
}
.useful-menu-block .inner-block {
  display: flex;
  justify-content: flex-end;
}
.useful-menu-block .item {
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  width: 24px;
}
.useful-menu-block .item.search-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
}
.useful-menu-block .item.search-btn input {
  padding-top: 1px;
  padding-bottom: 1px;
  width: 170px;
}
.useful-menu-block .item.search-btn .image {
  display: block;
  width: 24px;
}
.useful-menu-block .item.fontsize-change-btn {
  padding-top: 2px;
}
.useful-menu-block .item.on:before {
  background: #e9000f;
  content: '';
  border-radius: 50%;
  height: 10px;
  width: 10px;
  position: absolute;
  right: -5px;
  top: 0;
}
.useful-menu-block .item.to-post-link {
  width: auto;
}
.useful-menu-block .item.to-post-link a {
  border-radius: 20px;
  display: block;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
  text-align: center;
  background: #3c3c3c;
  color: #fff;
  padding: 0 20px;
}



  /*------------------------------------------------------------------------------
    contents-display-area
  ------------------------------------------------------------------------------*/
.contents-display-area .contents {
  min-height: calc(100vh - 60px - 80px);
}


/*------------------------------------------------------------------------------
  search-btn-block
------------------------------------------------------------------------------*/
.search-btn-block {
  margin: 20px 10px;
}
.search-btn-block .title {
  background: url(../img/parts/Refine.png) no-repeat left center;
  background-size: 20px;
  padding: 7px 0 2px 26px;
}
.search-btn-area {
  margin: 7px 0;
}
.search-btn-area.btn-area .btn {
  border: 1px solid #aaa;
  border-radius: 0;
  background: #fafafa;
  color: #888;
}
.search-btn-area.btn-area .btn.on {
  background: #6376ba;
  border: 1px solid #6376ba;
  color: #fff;
}
.search-btn-area.btn-area .btn.recruit {
  position: relative;
}
.search-btn-area.btn-area .btn.recruit:before {
  content: '◆';
  color: #e9000f;
  height: 12px;
  width: 12px;
  left: 50%;
  line-height: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: -50px;
  position: absolute;
  z-index: 1;
}
.search-btn-area.btn-area .btn.recruit.pointman:before {
  content: '★';
  font-size: 1.6rem;
}
.search-hit-word {
  background:linear-gradient(transparent 0%, #ffce9e 0%);
  font-weight:bold;
}


/*------------------------------------------------------------------------------
  card-ul
------------------------------------------------------------------------------*/
.recruit-contents .card-ul li.close .main-contents {
  background: #b5b5b5;
}
.card-ul {
  margin: 10px;
}
.card-ul li{
  position: relative;
}
.card-ul li.shift-border {
  margin-top: 60px;
}
.card-ul li.open {
  margin-bottom: 20px;
}
.card-ul li.unread:before {
  background: #e9000f;
  border-radius: 50%;
  content: '';
  height: 12px;
  width: 12px;
  left: 7px;
  top: 15px;
  margin: auto;
  position: absolute;
  z-index: 1;
}
.card-ul li.recruit:before {
  content: '◆';
  color: #e9000f;
  height: 12px;
  width: 12px;
  line-height: 13px;
  left: 7px;
  top: 15px;
  margin: auto;
  position: absolute;
  z-index: 1;
}
.card-ul li.recruit.recruit-pointman:before {
  content: '★';
  font-size: 1.6rem;
  left: 5px;
}
#experience .card-ul li.unread:before,
#experience .card-ul li.recruit:before {
  left: 12px;
  top: 15px;
}
.card-ul.pattern2 li.unread:before,
.card-ul.pattern2 li.recruit:before {
  top: 15px;
}
.card-ul li.shift-border:after {
  background: #aaa;
  content: '';
  height: 1px;
  width: 100%;
  top: -30px;
  left: 0;
  position: absolute;
}
.card-ul li .main-contents {
  background: #fff;
  border-radius: 8px;
  color: #333;
  position: relative;
  overflow: hidden;
}
.card-ul li.marunouchia .main-contents,
.card-ul li.marunouchib .main-contents,
.card-ul li.marunouchic .main-contents,
.card-ul li.marunouchid .main-contents,
.card-ul li.marunouchi .main-contents {
  background: #6c9bd2;
}
.card-ul li.suidobashia .main-contents,
.card-ul li.suidobashib .main-contents,
.card-ul li.suidobashic .main-contents,
.card-ul li.suidobashi .main-contents {
  background: #bae3f9;
}
.card-ul li.yaesua .main-contents,
.card-ul li.yaesub .main-contents,
.card-ul li.testpointa .main-contents,
.card-ul li.testpointb .main-contents,
.card-ul li.yaesu .main-contents {
  background: #bedfc2;
}
.card-ul li.akihabaraa .main-contents,
.card-ul li.akihabarab .main-contents,
.card-ul li.akihabarac .main-contents,
.card-ul li.akihabara .main-contents {
  background: #f8c499;
}
.card-ul li.asakusaa .main-contents,
.card-ul li.asakusab .main-contents,
.card-ul li.asakusac .main-contents,
.card-ul li.asakusad .main-contents,
.card-ul li.asakusae .main-contents,
.card-ul li.asakusa .main-contents {
  background: #f4b4d0;
}
.card-ul li.yurakuchoa .main-contents,
.card-ul li.yurakuchob .main-contents,
.card-ul li.yurakuchoc .main-contents,
.card-ul li.yurakuchod .main-contents,
.card-ul li.yurakuchoe .main-contents,
.card-ul li.yurakucho .main-contents {
  background: #a59aca;
}
#experience .card-ul li .main-contents {
  background: #fff;
}
.card-ul li + li {
  margin-top: 10px;
}
.card-ul li .main-text {
  padding: 10px 50px 10px 25px;
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
}
.card-ul li .main-text:before {
  border-left: 2px solid #514c49;
  border-bottom: 2px solid #514c49;
  content: '';
  height: 15px;
  width: 15px;
  position: absolute;
  right: 20px;
  bottom: 5px;
  top: 0;
  margin: auto;
  transform: rotate(315deg);
  transform-origin: 4px 10px;
  transition: all 0.3s;
}
.card-ul li .main-text .place-name {
  font-size: 1.1rem;
  margin-left: 10px;
}
.card-ul li .main-text .post_date {
  font-size: 1.1rem;
  margin-right: 10px;
}
.card-ul li.open .main-text:before {
  transform: rotate(135deg);
}
.card-ul li .target-date {
  display: block;
}
.card-ul li .sub-text {
  background: #fff;
  font-size: 1.2rem;
  padding: 10px;
}
.card-ul li .date {
  font-size: 1.1rem;
  position: absolute;
  right: 10px;
  top: 10px;
}
.card-ul li .category {
  font-size: 1.1rem;
  position: absolute;
  left: 25px;
  top: 10px;
}
.card-ul li .box {
  margin: 3px 0;
}
.card-ul li .box .category {
  position: relative;
  left: auto;
  top: auto;
}
.card-ul li .box .head {
  font-weight: bold;
}
.report-detial-info-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 10px 0 0;
}
.card-ul li:not(.open) .open-contents {
  display: none;
}
.card-ul li .sub-contents {
  margin: 5px 0 20px;
}
.card-ul li .member-area {
  margin: 0 10px;
}
.card-ul li .member {
  display: inline-block;
  font-size: 1.1rem;
  width: 49%;
}
.card-ul li .member.charge {
  width: 100%;
}
.card-ul li .member.unread {
  color: #e40011;
}
.card-ul li .member.recruit {
  color: #e40011;
  display: block;
  margin: 5px 0 0;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.more-read {
  margin: 10px;
  border-radius: 8px;
  background: #b6b6b6;
  text-align: center;
  padding: 7px;
  font-size: 1.4rem;
  font-weight: bold;
}
.card-ul li .message-ul {
  margin: 10px 0;
}
.card-ul li .message-ul li {
  border-top: 1px solid #ddd;
  padding: 10px 10px 0;
  margin-top: 10px;
}
.card-ul li .message-ul li .message-date {
  text-align: right;
  font-size: 1.0rem;
}
.card-ul li .btn-area {
  margin: 10px 0;
}
.card-split-date {
  border-left: 6px solid #7dcef4;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 30px 10px 0;
  padding: 0 0 0 10px;
}
.card-ul li .sub-text .time {
  border-left: 4px solid #7dcef4;
  font-weight: bold;
  margin: 0 0 3px;
  padding: 0 0 0 8px;
}
.card-ul li .sub-text .time-zone-area + .time-zone-area {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 10px;
}
.card-split-date-box {
  position: relative;
}
.card-split-date-box .all-open-btn {
  background: #7dcef4;
  border-radius: 5px;
  color: #333;
  display: inline-block;
  font-size: 1.0rem;
  font-weight: bold;
  padding: 5px 15px;
  position: absolute;
  top: 0;
  right: 10px;
}
.card-ul li .memberlist-unread {
  display: inline-block;
  background: #e60012;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  margin: 0 3px 0 0;
}
/*** 中止 ***/
#wrapper .card-ul li.abort {
  background: #888;
}
#wrapper .card-ul li.abort .main-contents {
  background: #888;
}
#wrapper .card-ul li.abort .main-contents .main-text {
  background: #888 !important;
}
#wrapper .card-ul li.abort .shiftAbortBtn,
#wrapper .card-ul li.abort .shiftAbortEtcBtn,
#wrapper .card-ul li.abort .backupEntryBtn,
#wrapper .card-ul li.abort .backupRegistBtn {
  display: none !important;
}


.member-shift-btn-wrap .shift-btn-box {
  background: #f5f5f5;
  border-radius: 8px;
  margin: 10px 0;
  padding: 10px 1px 10px 10px;
}
@media (min-width: 414px) {
  .member-shift-btn-wrap {
    display: flex;
    justify-content: space-between;
  }
  .member-shift-btn-wrap .shift-btn-box {
    margin: 0 0 10px;
  }
}
.member-shift-btn-wrap .shift-btn-ul li {
  color: #666;
  padding: 5px 3px 5px 28px;
}
.member-shift-btn-wrap .shift-btn-ul li + li {
  margin-top: 1px;
}
.member-shift-btn-wrap .shift-btn-ul li a {
  color: #666;
  display: block;
  padding: 5px 3px 5px 28px;
}
.member-shift-btn-wrap .shift-btn-ul li.backupRegistBtn {
  background: url(../img/shift/backup_request.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.pointmanPhoneCallBtn a {
  background: url(../img/shift/tel_pointman.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.pointmanMailSendBtn a {
  background: url(../img/shift/mail_to_pointman.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.sendExerienceBtn {
  background: url(../img/shift/write_exp.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.backupEntryBtn {
  background: url(../img/shift/join_team.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.shiftAbortBtn {
  background: url(../img/shift/rain.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.shiftAbortEtcBtn {
  background: url(../img/shift/abort.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.sendShiftInfoBtn {
  background: url(../img/shift/announce_to_team.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.sendReportBtn {
  background: url(../img/shift/send_report.png) no-repeat left center;
  background-size: 20px;
}
.member-shift-btn-wrap .shift-btn-ul li.pointmanPhoneCallBtn,
.member-shift-btn-wrap .shift-btn-ul li.pointmanMailSendBtn {
  padding: 0;
}



  /*------------------------------------------------------------------------------
    news-block
  ------------------------------------------------------------------------------*/
.news-block {
  margin: 20px 0;
}
.news-block .card-ul li .main-contents {
  border: none;
  border-radius: 0;
}
.news-block .card-ul li .main-text {
  background: #fff;
  color: #1c368d;
}
.news-block .card-ul li .sub-text {
  background: #fff;
  padding: 0 10px 20px 20px;
}
.news-block .card-ul li:not(.open) .sub-text.pre-open {
  height: calc(1.2rem * 1.6 * 2);
  margin-bottom: 10px;
  display: block !important;
}
.news-block .card-ul li .main-text:before {
  border-color: #1c368d;
  border-width: 1px;
}
.news-block .card-ul li.important .main-text .title {
  background: url(../img/parts/important.png) no-repeat left center;
  background-size: 60px;
  padding-left: 70px;
}
.news-block .card-ul li.unread:before {
  top: 16px;
}
.card-ul li.private .main-contents {
  border: 2px solid #999;
  background: #bbb;
}
.news-block .card-ul li .photo {
  text-align: center;
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
  margin: 0 0 10px;
}
.news-block .card-ul li:not(.open) .photo {
  display: none;
}
.news-block .card-ul li .photo img {
  display: block;
  position: absolute;
  top: -100%;
  left: -100%;
  right: -100%;
  bottom: -100%;
  margin: auto;
  height: 200px;
  max-width: 999%;
}
/* sp_width_100 */
.news-block .card-ul li.sp_width_100 .photo {
  height: auto;
}
.news-block .card-ul li.sp_width_100 .photo img {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  max-width: 100%;
}
/* pc_width_100 */
.news-block .card-ul li.pc_width_100 .photo {
  height: auto;
}
.news-block .card-ul li.pc_width_100 .photo img {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  max-width: 100%;
}
.news-block .card-ul li .sub-text .category-wrap {
  padding-left: 10px;
}
.news-block .card-ul li .sub-text .category {
  position: relative;
  left: 0;
  top: 0;
  font-size: 1.2rem;
}
.news-block .card-ul li .sub-text .description {
  border-top: 1px solid #ccc;
  line-height: 2;
}
.news-block .card-ul li .sub-text .description a {
  color: #0013fe;
  text-decoration: underline;
}
  /*** 記事内 ***/
.description iframe {
  display: block;
  margin: auto;
  max-width: 100%;
}
.news-block .card-ul li .news-info {
  position: relative;
}
.news-block .card-ul li .news-info .favorite-btn {
  background: url(../img/parts/star.png) no-repeat center center;
  background-size: 100%;
  height: 20px;
  width: 20px;
  position: absolute;
  right: 10px;
  top: -5px;
  cursor: pointer;
}
.news-block .card-ul li .news-info .favorite-btn.on {
  background: url(../img/parts/star_act.png) no-repeat center center;
  background-size: 100%;
}

@media (max-width: 640px) {
  .description iframe {
    max-height: 200px;
  }
}


/*** 経験 ***/
.experience-wrapper .news-block .card-ul li.marunouchi .main-contents {
  border-left: 6px solid #0013fe;
}
.experience-wrapper .news-block .card-ul li.suidobashi .main-contents {
  border-left: 6px solid #2ee1ff;
}
.experience-wrapper .news-block .card-ul li.yaesu .main-contents {
  border-left: 6px solid #70c100;
}
.experience-wrapper .news-block .card-ul li.akihabara .main-contents {
  border-left: 6px solid #ff9000;
}
.experience-wrapper .news-block .card-ul li.asakusa .main-contents {
  border-left: 6px solid #e40013;
}
.experience-wrapper .news-block .card-ul li.yurakucho .main-contents {
  border-left: 6px solid #7459ca;
}
.experience-wrapper .news-block .card-ul li.other .main-contents {
  border-left: 6px solid #aaa;
}
.experience-wrapper .news-block .card-ul li .sub-text {
  padding-left: 25px;
}

/*** information ***/
.information-wrapper .news-block .card-ul li .sub-text {
  padding-right: 0;
  padding-left: 0;
}

.unread-check-area {
  margin: 20px 0;
}
.unread-check-area .unread-check-btn {
  cursor: pointer;
}
.unread-check-area .name {
  display: inline-block;
  margin: 2px;
  width: 300px;
}


/*------------------------------------------------------------------------------
  input-block
------------------------------------------------------------------------------*/
#input-block {
  padding: 20px 10px;
}
#input-block .update-attention {
  color: #ffa100;
  display: none;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 20px;
}

.input-table {
  margin: 0 auto 20px;
  width: 100%;
}
.input-table tr + tr {
  border-top: 1px solid #aaa;
}
.input-table .has-border-bottom {
  border-bottom: 1px solid #aaa;
}
.input-table .lesson-detail-tbody + .lesson-detail-tbody {
  border-top: 1px solid #aaa;
}
.input-table .lesson-detail-tbody {
  border-bottom: 1px solid #aaa;
}
.input-table tr.separate-line {
  border-width: 2px;
}
.report-wrapper .input-table tr th {
  position: relative;
}
.report-wrapper .input-table tr th:before {
  content: '　 ';
  margin-right: 5px;
}
.report-wrapper .input-table tr.color-01 th:before { background: #c0f7dd; }
.input-table tr.color-02 th:before { background: #a4d4fc; }
.input-table tr.color-03 th:before { background: #f5fca4; }
.input-table tr.color-04 th:before { background: #8498ff; }
.input-table tr.color-05 th:before { background: #5feffc; }
.input-table tr.color-06 th:before { background: #f4d09a; }
.input-table tr.color-07 th:before { background: #ffccee; }
.input-table tr.color-08 th:before { background: #cece92; }
.input-table tr.color-09 th:before { background: #cccccc; }
.input-table tr.color-10 th:before { background: #d3efff; }
.input-table tr.color-11 th:before { background: #d3ffd7; }
.input-table tr.color-12 th:before { background: #fcb2a6; }
.input-table th {
  padding: 10px 30px 10px 10px;
  text-align: left;
  vertical-align: middle;
  position: relative;
  width: 100px;
}
.input-table td {
  padding: 10px 0 10px 10px;
  text-align: left;
  vertical-align: middle;
}
.input-table .submit-td {
  text-align: center;
}
.input-table .submit-td button {
  padding: 8px 30px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  background: #e6020f;
  border-radius: 8px;
  color: #fff;
}
.input-table input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
}
.input-table textarea {
  height: 150px;
  width: 100%;
}
#wrapper .input-table input.short {
  width: 45%;
}
#wrapper .input-table input.very-short {
  height: 35px;
  width: 80px;
  vertical-align: top;
}
.input-table input + input {
  margin-left: 3%;
}
.input-table .required-mark {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #e6020f;
  border: 1px solid #e6020f;
  font-size: 0.9rem;
  padding: 2px 5px;
  height: 20px;
}
.input-table .error {
  color: #e6020f;
  font-weight: bold;
}
.auth-mode .input-table .error {
  background: #999;
}
.input-table .error-input {
  background: #fbf2fc;
  border: 1px solid #f66;
}
.checkbox-label-wrap {
  text-align: left;
  margin-bottom: -10px;
}
.checkbox-label {
  display: inline-block;
  margin: 0 10px 10px 0;
  position: relative;
}
.checkbox-label input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.checkbox-label .checkbox-name {
  border: 1px solid #666;
  background: #fafafa;
  border-radius: 8px;
  color: #666;
  display: block;
  font-size: 1.2rem;
  padding: 5px 15px;
  text-align: left;
}
.checkbox-label input:checked + .checkbox-name {
  background: #6376ba;
  border: 1px solid #6376ba;
  color: #fff;
}
#wrapper .input-table .lesson-detail-head {
  background: #7dcef4;
  font-weight: bold;
  text-align: center;
}

#input-area {
  margin: 10px;
}
#contact .input-table [name="other-text"] {
  display: none;
}

.input-table .notice {
  font-size: 1.1rem;
  margin: 10px 0 0;
}

@media (max-width: 640px) {
  #wrapper .input-table th {
    display: block;
    padding: 10px 10px 5px;
    width: 100%;
  }

  #wrapper .input-table td {
    display: block;
    padding: 3px 10px 10px;
  }
  #wrapper .input-table td.submit-td {
    padding-top: 10px;
  }
}



/*------------------------------------------------------------------------------
  news_post
------------------------------------------------------------------------------*/
.news_post #wrapper .btn-area {
  margin-bottom: 30px;
}


/*------------------------------------------------------------------------------
  main-message
------------------------------------------------------------------------------*/
.main-wrapper .contents-block {
  min-height: calc(100vh - 36px - 50px - 60px + 3px);  /* 画面縦 - copyright - header - footer + alpha */
}
.main-message h1 {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 10px;
}
.sign-out-wrap {
  text-align: right;
}
#sign-out {
  background: #aaa;
  color: #fff;
  border-radius: 8px;
  font-size: 1.2rem;
  padding: 5px 30px;
}

/*------------------------------------------------------------------------------
  account
------------------------------------------------------------------------------*/
.contents-inner-box {
  background: #fff;
  margin: 20px 10px;
  padding: 10px;
}
.auth-mode .contents-inner-box {
  background: none;
}
.contents-inner-box .modified-box {
  margin: 0 0 5px;
  text-align: right;
}
.time-select-box select {
  margin: 0 5px 0 0;
  padding: 5px 2px;
}
.timetabes-box {
  border: 1px solid #aaa;
  padding: 5px;
  overflow: auto;
  height: 300px;
}
.timetabes-box label {
  display: inline-block;
  width: 100%;
}
.timetabes-box .days-head {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 5px 5px 0;
}

.my-smpw-wrapper .input-table th {
  padding-right: 0;
}

.contents-inner-box .regularshift-box {
  margin: 0 0 5px;
  text-align: right;
}
.contact-more-read-btn {
  border: 2px solid #123592;
  border-radius: 5px;
  color: #123592;
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 20px auto;
  padding: 5px;
  text-align: center;
  width: 200px;
}

@media (max-width: 640px) {
  #spouse_name_area {
    margin: 5px 0 0;
  }
}

  /*------------------------------------------------------------------------------
    chart-div
  ------------------------------------------------------------------------------*/
.chart-div {
  margin: 10px 0 0;
}
.chart-title {
  color: #333;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
}
.chart-title .small {
  font-size: 1.2rem;
  font-weight: normal;
}


/*------------------------------------------------------------------------------
  report
------------------------------------------------------------------------------*/
@media (max-width: 640px) {
  .report-wrapper .input-table .head-tr {
    display: none;
  }
  .report-wrapper .input-table .count-btn {
    top: 10px;
  }
}

.report-wrapper .input-table {
  table-layout: fixed;
}
.input-table .count-btn-wrap {
  position: relative;
}
.input-table .count-btn {
  display: none;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 30px;
  width: 30px;
}
.input-table .minus-btn {
  right: 50px;
}
.input-table .latest .plus-btn {
  display: block;
}
.input-table .latest:not(.base) .minus-btn {
  display: block;
}
.input-table .language-num-input {
  margin: 5px 0 0;
}
.report-detail-tbody {
  display: none;
}
.report-detail-tbody [name="language_other"] {
  display: none;
  margin: 10px 0 0;
}
.shift-target-message {
  background: #eeffd2;
  color: #333;
  display: none;
  font-size: 1.2rem;
  margin: 0 0 20px;
  padding: 5px 5px;
  text-align: center;
}
.shift-target-message .shift-target {
  font-size: 1.6rem;
  font-weight: bold;
}
.unchange-message {
  color: #f00;
  display: none;
  margin: 0 0 0 5px;
}
.reflection-notice {
  margin: 2px 0 20px;
  text-align: center;
}

.explain-text {
  color: #777;
  font-size: 1.1rem;
  margin: 0 0 5px;
}

.already-report-area {
  margin: 40px 0;
}
.already-report-area .title {
  font-size: 1.6rem;
  font-weight: bold;
}
.already-report-ul li + li {
  margin: 10px 0 0;
}
.already-report-ul li a {
  background: #123592;
  border-radius: 8px;
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 5px 20px;
  text-align: left;
}


  /*------------------------------------------------------------------------------
    login
  ------------------------------------------------------------------------------*/
#wrapper.login-wrap {
  padding: 0;
}
#wrapper.login-wrap .contents-block {
  min-height: 100vh;
}
#wrapper.login-wrap .login-contents {
  margin: 0 20px;
}
#wrapper.login-wrap .login-logo {
  padding: 40px 0 0;
  margin: 0 auto 40px;
  text-align: center;
  width: 120px;
}
#wrapper.login-wrap .login-title {
  font-weight: bold;
  font-size: 1.6rem;
  margin: 0 0 20px;
  text-align: center;
}
#wrapper.login-wrap .input-table th {
  padding-right: 10px;
  width: 130px;
}
#passwordForgetLinkArea {
  text-align: right;
}

/*------------------------------------------------------------------------------
  contact-message-area
------------------------------------------------------------------------------*/
#contact-message-area {
  margin: 40px 0 0;
}
#contact-message-area .message-box {
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 10px;
  position: relative;
}
#contact-message-area .message-box.unread:before {
  background: #e60012;
  border-radius: 50%;
  content: '';
  height: 16px;
  width: 16px;
  top: 10px;
  left: 10px;
  position: absolute;
}
#contact-message-area .message-box + .message-box {
  margin-top: 20px;
}
#contact-message-area .message-box .photo-img {
  border: 1px solid #ccc;
  margin: 10px 10px 20px;
  text-align: center;
}
#contact-message-area .message-box .photo-img img {
  max-height: 65vh;
  margin: auto;
}
#contact-message-area .message-box .contact_kind-box {
  font-weight: bold;
  margin: 0 0 5px;
  text-align: center;
}
#contact-message-area .message-box .message {
  background: #eee;
  border-radius: 10px;
  margin: 10px 0;
  padding: 10px;
  width: 80%;
}
#contact-message-area .message-box .message.self {
  background: #d3f4d0;
  margin-left: 20%;
}
#contact-message-area .message-box .message .post_date {
  font-size: 1.0rem;
  text-align: right;
}
#contact-message-area .message-box .already-read-btn {
  background: #123592;
  border-radius: 8px;
  color: #fff;
  display: block;
  padding: 5px 10px;
  font-size: 1.0rem;
  position: absolute;
  right: 10px;
  bottom: 50px;
  text-align: center;
  width: 50px;
}
#contact-message-area .message-box:not(.unread) .already-read-btn {
  display: none;
}

/*** auth-mode の contact  ***/
.auth-mode #contact-message-area .message-box {
  background: #fff;
  color: #333;
}
.auth-mode #contact-message-area .message-box .message {
  background: #d3f4d0;
  margin-left: 20%;
}
.auth-mode #contact-message-area .message-box .message.self {
  background: #ddd;
  margin-left: 0;
}
.auth-mode .modal {
  color: #333;
}
#send-user-list-area label {
  display: inline-block;
  width: 48%;
}
#send-user-list-area .has-cong-name label {
  display: block;
  width: 100%;
}
#send-user-list-area .cong-wrap {
  background: #fff;
  border-radius: 8px;
  color: #333;
  padding: 10px;
  position: relative;
}
#send-user-list-area .cong-wrap + .cong-wrap {
  margin-top: 10px;
}
#send-user-list-area .cong-wrap .head {
  font-weight: bold;
  position: relative;
}
#send-user-list-area .cong-wrap.open .head {
  margin: 0 0 10px;
}
#send-user-list-area .cong-wrap:not(.open) label {
  display: none;
}
#send-user-list-area .cong-wrap .all-btn {
  background: #6376ba;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  border-radius: 8px;
  padding: 2px 5px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
}



/*------------------------------------------------------------------------------
    record-count-ul
  ------------------------------------------------------------------------------*/
.record-count-area {
  text-align: center;
}
.count-reset-btn {
  background: #999;
  border: 1px solid #999;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  margin: 0 5px 20px;
  padding: 10px 5px;
  text-align: center;
  width: 150px;
}
.count-sort-btn {
  background: #fafafa;
  border: 1px solid #666;
  border-radius: 8px;
  color: #666;
  display: inline-block;
  margin: 0 5px 20px;
  padding: 10px 5px;
  text-align: center;
  width: 150px;
}
.count-sort-btn.on {
  background: #6376ba;
  border: 1px solid #6376ba;
  color: #fff;
}
.record-count-ul li {
  display: flex;
  justify-content: space-between;
}
.record-count-ul li.zero {
  display: none;
}
.record-count-ul li + li {
  margin-top: 10px;
}
.record-count-ul li .count-btn {
  background: #ccc;
  border-radius: 10px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 30px;
  text-align: center;
}
.record-count-ul li .item-name {
  font-size: 1.4rem;
  padding: 10px 0 0;
  text-align: center;
}

.record-count-ul li[data-count-target="news"] .item-name {
  padding: 0;
}
.record-count-ul li .count-num {
  font-size: 1.8rem;
  font-weight: bold;
}
.record-count-ul li.color-01 .count-btn { background: #c0f7dd; }
.record-count-ul li.color-02 .count-btn { background: #a4d4fc; }
.record-count-ul li.color-03 .count-btn { background: #f5fca4; }
.record-count-ul li.color-04 .count-btn { background: #8498ff; }
.record-count-ul li.color-05 .count-btn { background: #5feffc; }
.record-count-ul li.color-06 .count-btn { background: #f4d09a; }
.record-count-ul li.color-07 .count-btn { background: #ffccee; }
.record-count-ul li.color-08 .count-btn { background: #cece92; }
.record-count-ul li.color-09 .count-btn { background: #cccccc; }
.record-count-ul li.color-10 .count-btn { background: #d3efff; }
.record-count-ul li.color-11 .count-btn { background: #d3ffd7; }
.record-count-ul li.color-12 .count-btn { background: #fcb2a6; }


#addContactStr {
  width: 100%;
  height: 180px;
}


/*------------------------------------------------------------------------------
  analysis-chart-block
------------------------------------------------------------------------------*/
#wrapper .analysis-chart-block {
  background: #fff;
  padding: 10px;
}

#wrapper .analysis-chart-block .list-div {
  overflow: auto;
  margin: 0 0 40px;
}
#wrapper .analysis-chart-block .list-table {
  color: #333;
  border: 1px solid #ccc;
  font-size: 10px;
  table-layout: fixed;
  width: 1800px;
}
#wrapper .analysis-chart-block .list-table th {
  border: 1px solid #ccc;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}
#wrapper .analysis-chart-block .list-table td {
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
}
#wrapper .analysis-chart-block .list-table td:nth-child(2),
#wrapper .analysis-chart-block .list-table td:nth-child(6),
#wrapper .analysis-chart-block .list-table td:nth-child(11),
#wrapper .analysis-chart-block .list-table td:nth-child(12),
#wrapper .analysis-chart-block .list-table td:nth-child(16),
#wrapper .analysis-chart-block .list-table td:nth-child(17),
#wrapper .analysis-chart-block .list-table td:nth-child(22) {
  background: #ffe190;
  font-weight: bold;
}

#wrapper .analysis-chart-block .list-table .place-cell {
  background: #eeffd2;
  font-weight: bold;
}
#wrapper .analysis-chart-block .list-table .total-tr {
  background: #f9e8cf;
  border-top: 2px solid #aaa;
}
.change-date {
  margin: 10px 0 20px;
}

#wrapper .list-analysis-div {
  background: #fff;
  color: #333;
  padding: 20px 10px;
}
.list-analysis-div .list-analysis-div-inner {
  overflow: auto;
  width: 100%;
}
.list-analysis-div .analysis-table {
  border: 1px solid #aaa;
  width: 1500px;
}
.list-analysis-div .analysis-table th {
  background: #eeffd2;
  border: 1px solid #aaa;
  padding: 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.8rem;
}
.list-analysis-div .analysis-table th.lesson_detail-th {
  width: 300px;
}
.list-analysis-div .analysis-table tr.abort,
.list-analysis-div .analysis-table tr.abort td {
  background: #ccc !important;
}
.list-analysis-div .analysis-table td {
  border: 1px solid #aaa;
  padding: 2px 5px;
  text-align: center;
  vertical-align: middle;
  width: 70px;
  font-size: 0.8rem;
}
.list-analysis-div .analysis-table td.number-type {
  width: 50px;
}
.list-analysis-div .analysis-table .report-tr-clicked td {
  background: #ffeea0;
}
#wrapper .list-analysis-div .analysis-table td.lesson,
#wrapper .list-analysis-div .analysis-table td.conversation,
#wrapper .list-analysis-div .analysis-table td.video,
#wrapper .list-analysis-div .analysis-table td.repeater,
#wrapper .list-analysis-div .analysis-table td.news,
#wrapper .list-analysis-div .analysis-table td.enjoy_life_ja,
#wrapper .list-analysis-div .analysis-table td.enjoy_life,
#wrapper .list-analysis-div .analysis-table td.contact {
  background: #ffe190;
  font-weight: bold;
}

/*------------------------------------------------------------------------------
    information
  ------------------------------------------------------------------------------*/
.rule-block h2 {
  font-size: 16px;
  font-weight: bold;
}
.rule-block.privacy {
  margin: 60px 0 0;
}
.information-wrapper .sub-menu-ul .slick-list .slick-track {
  width: 500px !important;
}
.information-sub-inner {
  padding: 5px 20px 20px;
}
.information-sub-inner .has-icon-contents {
  background: url(../img/information/history.png) no-repeat left top;
  background-size: 30px;
  margin: 0 0 20px;
}
.information-sub-inner .has-icon-contents.history { background-image: url(../img/information/history.png); }
.information-sub-inner .has-icon-contents.feature {
  background-image: url(../img/information/Characteristics.png);
  background-size: 25px;
  background-position: 3px top;
}
.information-sub-inner .has-icon-contents.equipment {
  background-image: url(../img/information/tools.png);
  background-size: 21px;
  background-position: 6px top;
}
.information-sub-inner .has-icon-contents.storage {
  background-image: url(../img/information/strage.png);
  background-size: 28px;
  background-position: 2px top;
}
.information-sub-inner .has-icon-contents.attention {
  background-image: url(../img/information/caution.png);
  background-position: left 2px;
}

.information-sub-inner .title {
  color: #3d61a4;
  font-size: 1.8rem;
  padding: 1px 0 5px 40px;
}
.information-wrapper .news-block .card-ul li.marunouchi .main-text { background: #6c9bd2; }
.information-wrapper .news-block .card-ul li.suidobashi .main-text { background: #bae3f9; }
.information-wrapper .news-block .card-ul li.yaesu .main-text { background: #bedfc2; }
.information-wrapper .news-block .card-ul li.akihabara .main-text { background: #f8c499; }
.information-wrapper .news-block .card-ul li.asakusa .main-text { background: #f4b4d0; }
.information-wrapper .news-block .card-ul li.yurakucho .main-text { background: #a59aca; }

.information-wrapper .map-area {
  height: 250px;
  margin: 0 20px;
}
.information-wrapper .map-area iframe {
  height: 250px;
  width: 100%;
}

#scenario .news-block .card-ul li .main-text {
  background: #ddd;
}
.scenario-dl {
  line-height: 1.6;
  margin: 0 10px;
  padding: 10px 0 5px;
}
.scenario-dl + .scenario-dl {
  padding-top: 0;
}
.scenario-dl dt {
  color: #7459ca;
  float: left;
  width: 4.5em;
}
.scenario-dl dd {
  float: right;
  margin: 0;
  width: calc(100% - 4.5em);
}
.scenario-dl dt.jw {
  color: #6376ba;
  font-weight: bold;
}
.scenario-dl .ex {
  color: #999;
}

.scenario-information-block .card-ul li.new .main-text .title {
  background: url(../img/parts/new.png) no-repeat left center;
  background-size: 60px;
  padding-left: 70px;
}

.document-information-block .index-box {
  background: #fff;
  font-size: 1.1rem;
  margin: 10px 20px;
  padding: 10px;
}
.document-information-block .index-box ol {
  padding-left: 30px;
}
.document-information-block .index-box li {
  color: #777;
  margin: 0 0 5px;
}
.document-information-block .content-box {
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 10px 20px;
}
.document-information-block .content-box ol {
  background: #fff;
  padding: 20px 20px 20px 40px;
}
.document-information-block .content-box li + li {
  margin-top: 20px;
}
.document-information-block .content-box li .title {
  color: #6376ba;
  font-size: 1.6rem;
}
.document-information-block .content-box ol ol {
  padding: 10px 10px 10px 10px;
}
.document-information-block .content-box li .subtitle {
  color: #6376ba;
  font-size: 1.4rem;
}
.to-page-top {
  background: #193590;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 20px;
  -webkit-transform: translateZ(0);
}
.to-page-top:before {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  content: '';
  height: 15px;
  width: 15px;
  transform: rotate(45deg);
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.check-ok-message {
  color: #70c100;
  display: none;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 10px 0;
  text-align: center;
}

.help-block {
  margin: 20px 10px;
}
.help-category {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 20px 0 0;
}
.help-category:before {
  content: '◆ ';
}
.help-block dt {
  color: #6376ba;
  font-size: 1.2rem;
  font-weight: bold;
}
.help-block dd {
  margin: 0 0 0 2em;
}

.org-information-block {
  background: #fff;
  padding: 20px;
}
.org-information-block .title {
  color: #6376ba;
  font-size: 1.4rem;
  font-weight: bold;
}
.org-information-block .depertment-area {
  margin: 40px 0 0;
}
.org-information-block .depertment-area .depertment {
  padding-bottom: 100px;
}
.org-information-block .depertment-area .depertment.preach {
  background: url(../img/information/preach_dept.png) no-repeat right bottom;
  background-size: 100%;
}
.org-information-block .depertment-area .depertment.manage {
  padding-bottom: 60px;
  background: url(../img/information/manage_dept.png) no-repeat right bottom;
  background-size: 100%;
}
.org-information-block .depertment-area .depertment.material {
  padding-bottom: 60px;
  background: url(../img/information/material_dept.png) no-repeat right bottom;
  background-size: 100%;
}
.org-information-block .depertment-area .depertment + .depertment {
  margin-top: 20px;
}
.org-information-block .history-area {
  margin: 40px 0 0;
}
.org-information-block .history-area table + table {
  margin-top: 30px;
}
.org-information-block .history-area table th {
  font-weight: normal;
  padding: 2px 5px 2px 0;
  text-align: left;
  vertical-align: top;
  width: 80px;
}
.org-information-block .history-area table th.year {
  font-weight: bold;
}
.org-information-block .history-area table td {
  font-weight: normal;
  padding: 2px 5px 2px 0;
  text-align: left;
  vertical-align: top;
}
.document-information-block a {
  color: #0013fe;
  text-decoration: underline;
}
#wrapper .photo-area {
  margin: 10px 50px 30px;
}
#wrapper .photo-area .photo-box {
  margin: 0 0 20px;
}
#wrapper .photo-area p {
  margin: 5px 0;
}
#wrapper .photo-area .photo-box img {
  display: inline-block;
  width: 48%;
}
@media (max-width: 640px) {
  #wrapper .photo-area {
    margin: 10px;
  }
  #wrapper .photo-area .photo-box img {
    display: block;
    width: 100%;
  }
}


  /*------------------------------------------------------------------------------
      font-size-big
    ------------------------------------------------------------------------------*/
.font-size-big .search-btn-area.btn-area .btn.recruit:before {
  margin-left: -65px;
}


/*------------------------------------------------------------------------------
    renewal-2021
  ------------------------------------------------------------------------------*/
.renewal-2021 .contents-inner-box {
  margin: 0;
}

/*** page-main ***/
.renewal-2021.page-main.has-not-sub-menu .contents-block {
  padding-top: 0;
}

.block-title {
  font-size: 2.2rem;
  font-weight: bold;
  color: #1c368d;
}


/*------------------------------------------------------------------------------
    mv-block
  ------------------------------------------------------------------------------*/
.mv-block {
  background: #fff;
  padding: 0 0 10px;
}

.mv-ul .item {
  height: 240px;
  width: 100%;
}
.mv-ul .item .inner {
  height: 240px;
  width: 100%;
  display: flex;
}
.mv-ul .item .inner .image {
  height: 240px;
  width: 33.33334%;
}

.mv-ul .slick-dots {
  margin: 10px auto 0;
  width: 100%;
  text-align: center;
  text-indent: -9999px;
  z-index: 20;
  display: flex;
  justify-content: center;
}
.mv-ul .slick-dots li {
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 10px;
}
.mv-ul .slick-dots li.slick-active,
.mv-ul .slick-dots li.slick-active:hover {
  background: #1c368d;
}


/*------------------------------------------------------------------------------
    latest-news-ul
  ------------------------------------------------------------------------------*/
.latest-news-ul {
  border-top: 1px solid #ccc;
  margin: 10px 0;
}

.latest-news-ul li {
  padding: 15px 10px;
  position: relative;
  display: flex;
  border-bottom: 1px solid #ccc;
}
.latest-news-ul li a {
  display: flex;
  position: relative;
  width: 100%;
}
.latest-news-ul li span {
  display: block;
}

.latest-news-ul li .image {
  height: 75px;
  width: 75px;
}
.latest-news-ul li .text-area {
  padding-left: 20px;
  width: calc(100% - 75px);
}
.latest-news-ul li .date {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.2rem;
  color: #aaa;
}
.latest-news-ul li .category {
  font-size: 1.2rem;
  font-weight: bold;
}
.latest-news-ul li .category.news {
  color: #666;
}
.latest-news-ul li .category.marunouchi {
  color: #6c9bd2;
}
.latest-news-ul li .category.suidobashi {
  color: #bae3f9;
}
.latest-news-ul li .category.yaesu {
  color: #bedfc2;
}
.latest-news-ul li .category.akihabara {
  color: #f8c499;
}
.latest-news-ul li .category.asakusa {
  color: #f4b4d0;
}
.latest-news-ul li .category.yurakucho {
  color: #a59aca;
}
.latest-news-ul li .title {
  color: #1c368d;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 3px 0;
}
.latest-news-ul li .text {
  font-size: 1.1rem;
}


/*------------------------------------------------------------------------------
    menu-block
  ------------------------------------------------------------------------------*/
.menu-block {
  margin: 40px 0 1px;
}
.menu-ul {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.menu-ul li {
  margin: 0 0 18px;
  text-align: left;
  width: 48%;
}
.menu-ul li .link {
  background: #1c368d;
  color: #fff;
  font-size: 1.3rem;
  display: block;
  position: relative;
  height: 40px;
  padding: 10px 10px;
}
.menu-ul li .link.big {
  background: #d95e28;
  height: 70px;
  padding-top: 23px;
}
.menu-ul li .link.kansou:before {
  background: url(../img/top/menu_kansou_post.png) no-repeat center center;
  background-size: auto 100%;
  content: '';
  height: 60px;
  width: 105px;
  position: absolute;
  right: 10px;
  bottom: 0;
}
.menu-ul li .link.keiken:before {
  background: url(../img/top/menu_keiken_post.png) no-repeat center center;
  background-size: auto 100%;
  content: '';
  height: 60px;
  width: 110px;
  position: absolute;
  right: 5px;
  bottom: 4px;
}
@media (max-width: 374px) {
  .menu-ul li .link.big {
    height: 55px;
    padding-top: 10px;
  }
  .menu-ul li .link.kansou:before {
    right: 5px;
    height: 45px;
    width: 79px;
  }
  .menu-ul li .link.keiken:before {
    height: 45px;
    width: 85px;
  }
}

.menu-ul li .link.kansou.show {
  position: relative;
  overflow: hidden;
}

.menu-ul li .link.keiken.show {
  position: relative;
  overflow: hidden;
}

.menu-ul li .link.kansou.show::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 11s ease-in-out 2;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 11s ease-in-out 2;
}

.menu-ul li .link.keiken.show::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 11s ease-in-out 2;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 11s ease-in-out 2;
}

@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/*------------------------------------------------------------------------------
    slider-card-ul
  ------------------------------------------------------------------------------*/
.slider-card-ul .main-contents {
  display: flex;
}
.slider-card-ul .main-contents .photo {
  width: 48%;
}
.slider-card-ul .main-contents .info-area {
  font-size: 1.4rem;
  padding: 10px 20px;
  width: 48%;
}

.news_post #wrapper .slider-card-ul .btn-area {
  margin-bottom: 0;
}

.btn-area .btn.delete-link {
  background: #e6020f;
}



  /*------------------------------------------------------------------------------
      clearfix
    ------------------------------------------------------------------------------*/
.clearfix:after,
.sub-menu-ul:after,
.inner-block:after,
.scenario-dl:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

/*------------------------------------------------------------------------------
  modal
------------------------------------------------------------------------------*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
  z-index: 999;
}
.modal__bg{
    background: rgba(0,0,0,0.5);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 0;
  right: 0;
  margin: auto;
    padding: 20px;
    position: absolute;
    top: 50px;
    width: 90%;
}
.js-modal.input-textarea-mode #registAddContactBtn {
  display: none;
}
.js-modal:not(.input-textarea-mode) #inputTextareaBtn {
  display: none;
}

.search-modal .input-area {
  margin: 0 0 20px;
}
.search-modal .input-area input {
  width: 100%;
}
.modal .main-text {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
}
.modal .modal-textarea {
  margin: 0 0 10px;
  height: 180px;
  width: 100%;
}

.cdt_wrapper {
  position: relative;
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  color: #1c368d;
}