@charset "UTF-8";
/* Scss Document */
body {
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif !important;
  font-size: 1.2rem;
  line-height: 1.8rem; }
  @media screen and (max-width: 768px) {
    body {
      font-size: 1rem; } }
  body a {
    cursor: pointer; }
    body a img:hover {
      opacity: 0.7;
      transition: .5s; }

.inner {
  width: 1000px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .inner {
      width: 90%;
      margin: 0 15px; } }

.blue {
  color: #019DC8; }

.maru-go {
  font-family: heisei-maru-gothic-std, sans-serif;
  font-weight: 800;
  font-style: normal; }

h2 {
  font-size: 2rem;
  font-weight: bold;
  font-family: heisei-maru-gothic-std, sans-serif;
  letter-spacing: 0.1em; }
  @media screen and (max-width: 768px) {
    h2 {
      font-size: 1.6rem; } }

.menu {
  background: rgba(255, 255, 255, 0.8);
  padding: .5rem 0;
  font-size: 1rem; }
  .menu a {
    color: #019DC8; }
  .menu .logo {
    width: 150px;
    margin-right: 1rem; }
  .menu .navbar-toggler:hover {
    border: none; }
  .menu .nav-link {
    padding: .5rem 0; }
    @media screen and (max-width: 768px) {
      .menu .nav-link {
        padding-top: .7rem;
        text-align: left; } }
  @media screen and (max-width: 768px) {
    .menu .navbar-nav {
      width: 100%; } }
  .menu .nav-btn {
    padding: .4rem .7rem .2rem .7rem;
    border-radius: 5px;
    margin-right: 1rem;
    text-decoration: none;
    display: block; }
    @media screen and (max-width: 768px) {
      .menu .nav-btn {
        width: 100%;
        margin-bottom: .5rem; } }
  .menu .entry {
    background: #019DC8;
    color: #FFF; }
    .menu .entry:hover {
      background: #fffda7;
      color: #019DC8;
      border: 1px solid #019DC8;
      transition: .5s; }
  .menu .login {
    background: #FFF;
    border: 1px solid #019DC8; }
    .menu .login:hover {
      background: #fffda7;
      transition: .5s; }
  .menu .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1rem; }
  .menu .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,157,200,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

header {
  background: url(../img/bg.jpg) center;
  background-size: cover;
  padding: 9rem 0 4rem 0;
  text-align: center; }
  header .header-sub-title {
    font-size: 1.6rem;
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
    color: #FFF; }
    @media screen and (max-width: 768px) {
      header .header-sub-title {
        font-size: 1.3rem;
        margin-top: 2.7rem; } }
  header .header-sub-title2 {
    color: #111;
    font-size: 1.2em;
    margin-bottom: .5rem;
    letter-spacing: 0.1em;
    font-weight: 600; }
  header .header-logo {
    width: 80%;
    margin: 0 auto; }
  header .header-btn {
    width: 80%;
    margin-top: 2rem; }
  header .header-img {
    width: 100%;
    margin-top: -1rem; }

.pagination {
  margin: 4rem auto 0 auto; }
  .pagination .page-link {
    color: #019DC8; }
  .pagination .page-item.active .page-link {
    background: #019DC8;
    border-color: #019DC8; }

.entry {
  background: #019DC8;
  padding: 2rem 0;
  text-align: center; }
  .entry .entry-btn {
    width: 90%; }
    @media screen and (max-width: 768px) {
      .entry .entry-btn {
        margin-bottom: 1rem; } }

.news-section {
  background: url(../img/news-bg.jpg);
  background-size: cover;
  background-position: center;
  padding: 5rem 0; }
  @media screen and (max-width: 768px) {
    .news-section {
      background: url(../img/news-bg-sp.jpg); } }

.news-box {
  background: #FFF;
  border-radius: 5px;
  box-shadow: -1px 0px 12px 2px rgba(0, 0, 0, 0.6);
  padding: 2rem;
  text-align: left;
  margin-bottom: 5rem; }
  .news-box h2 {
    text-align: left;
    font-size: 1.5rem;
    color: #019DC8;
    margin-bottom: .5rem; }
  .news-box dl {
    width: 100%; }
    @media screen and (max-width: 768px) {
      .news-box dl {
        font-size: 1rem; } }
  .news-box dt {
    border-bottom: 1px solid #ccc;
    float: left;
    padding: 10px 5px; }
    @media screen and (max-width: 768px) {
      .news-box dt {
        float: none;
        width: 100%;
        border-bottom: 0px;
        padding-bottom: 5px; } }
  .news-box dd {
    border-bottom: 1px solid #ccc;
    margin-left: 100px;
    padding: 10px 5px; }
    @media screen and (max-width: 768px) {
      .news-box dd {
        padding-top: 0;
        margin-left: 0; } }
    .news-box dd a:hover {
      color: #019DC8; }
  .news-box .more {
    text-align: right; }
    .news-box .more a {
      color: #019DC8;
      text-decoration: none; }
  .news-box .label {
    background-color: #019DC8;
    border-radius: 5px;
    color: #fff;
    margin: 0 20px;
    padding: 3px 6px;
    text-decoration: none;
    font-size: 1rem; }
  .news-box a {
    color: #111;
    text-decoration: none; }

.info-chiken {
  text-align: left;
  margin-top: 2rem;
  width: 450px; }
  @media screen and (max-width: 768px) {
    .info-chiken {
      width: 100%; } }
  .info-chiken h3 {
    font-size: 1.3rem !important;
    margin: 2rem 0;
    line-height: 1.8rem; }
    @media screen and (max-width: 768px) {
      .info-chiken h3 {
        font-size: 1.2rem !important;
        line-height: 1.6rem; } }

.merit {
  background: #30B6C1;
  color: #FFF;
  padding: 5rem 0; }
  .merit h2 {
    margin-bottom: 2rem; }
    @media screen and (max-width: 768px) {
      .merit h2 {
        margin: 2rem 0 1.5rem 0; } }

.how {
  background: #eee;
  padding: 5rem 0; }
  .how h2 {
    color: #019DC8;
    text-align: center;
    margin: 1rem 0 2rem 0; }
  .how .howbox {
    background: #FFF;
    border-radius: 10px; }
    .how .howbox .box-title {
      background: #F1F9FA;
      border-radius: 10px;
      padding: 1rem;
      text-align: center;
      font-size: 1rem;
      font-weight: bold; }
      .how .howbox .box-title h3 {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 0;
        color: #019DC8; }
    .how .howbox .contents {
      padding: 1rem;
      font-size: 1rem; }
      .how .howbox .contents h4 {
        font-size: 1.2rem;
        font-weight: bold;
        color: #019DC8; }
        @media screen and (max-width: 768px) {
          .how .howbox .contents h4 {
            font-size: 1.1rem; } }
      .how .howbox .contents .howicon {
        width: 150px;
        margin: .5rem auto; }
        @media screen and (max-width: 768px) {
          .how .howbox .contents .howicon {
            width: 50%; } }

.step {
  margin: 5rem 0; }
  .step .step-box {
    border: 5px solid #019DC8;
    border-radius: 5px;
    padding: 2rem; }
    @media screen and (max-width: 768px) {
      .step .step-box {
        padding: 1rem; } }
    .step .step-box h2 {
      color: #019DC8;
      text-align: center;
      margin: 1rem 0 2rem 0; }
    .step .step-box .light-blue-box {
      background: #F1F9FA;
      padding: 1rem;
      font-size: 1.1rem;
      margin: 2rem 0; }
      @media screen and (max-width: 768px) {
        .step .step-box .light-blue-box {
          font-size: 1rem; } }
      .step .step-box .light-blue-box h3 {
        color: #019DC8;
        font-weight: bold;
        font-size: 1.5rem;
        margin-bottom: 1rem; }
        @media screen and (max-width: 768px) {
          .step .step-box .light-blue-box h3 {
            font-size: 1.3rem; } }
      .step .step-box .light-blue-box .step-img {
        border-radius: 5px;
        width: 100%; }
        @media screen and (max-width: 768px) {
          .step .step-box .light-blue-box .step-img {
            width: 50%;
            margin: 0 auto 1.5rem auto; } }
    .step .step-box .triangle3 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid #019DC8;
      margin: 0 auto; }

.type {
  background: #F1F9FA;
  padding: 5rem 0; }
  .type h2 {
    color: #019DC8;
    text-align: center;
    margin: 1rem 0 2rem 0; }
  .type .disc {
    margin: 2rem 0; }
  .type .box-wrap {
    width: 700px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .type .box-wrap {
        width: 100%; } }
    .type .box-wrap .type-box {
      padding: 2rem;
      border-radius: 5px;
      color: #019DC8;
      width: 100%;
      margin: .7rem auto;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .type .box-wrap .type-box {
          width: 90%;
          padding: 2rem 1rem; } }
      .type .box-wrap .type-box i {
        font-size: 2rem;
        margin-bottom: 1rem; }
      .type .box-wrap .type-box h3 {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 3rem; }
      .type .box-wrap .type-box .day {
        font-size: 3.5rem;
        font-weight: 900;
        margin-bottom: 3rem; }
        @media screen and (max-width: 768px) {
          .type .box-wrap .type-box .day {
            font-size: 3rem; } }
      .type .box-wrap .type-box .box-disc {
        text-align: left; }
  .type .type1 {
    background: #C1FDFF; }
  .type .type2 {
    background: #CDFFC1; }
  .type .type3 {
    background: #F5FFC1; }
  .type .type4 {
    background: #FFDEC1; }

.voice {
  background: #F1F9FA;
  padding: 5rem 0; }
  .voice h2 {
    color: #019DC8;
    text-align: center; }
  .voice .disc {
    margin: 2rem 0;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .voice .disc {
        text-align: left; } }
  .voice h3 {
    color: #019DC8;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 2rem;
    text-align: center; }
  .voice .icon {
    width: 60%;
    display: block;
    margin: 1rem auto; }
  .voice .balloon {
    width: 100%;
    margin: .5rem 0 1.5em 0;
    overflow: hidden; }
    .voice .balloon .faceicon {
      float: left;
      margin-right: -90px;
      width: 80px; }
      .voice .balloon .faceicon img {
        width: 100%;
        height: auto;
        border: solid 3px #019DC8;
        border-radius: 50%; }
    .voice .balloon .chatting {
      width: 100%; }
    .voice .balloon .says {
      display: inline-block;
      position: relative;
      margin: 5px 0 0 105px;
      padding: 17px 13px;
      border-radius: 5px;
      background: #FFF; }
    .voice .balloon .says:after {
      content: "";
      display: inline-block;
      position: absolute;
      top: 18px;
      left: -24px;
      border: 12px solid transparent;
      border-right: 12px solid #FFF; }
    .voice .balloon .says p {
      font-size: 1rem;
      margin: 0;
      padding: 0; }

footer {
  padding-top: 2rem;
  background: #00708f;
  color: #FFFFFF;
  font-size: 1rem; }
  footer a {
    color: #FFF;
    text-decoration: none; }
    footer a:hover {
      color: #F1F9FA; }
  footer ul {
    list-style-type: none;
    padding: 0; }
  footer h2 {
    font-size: 1.2rem;
    border-bottom: 1px solid #FFF;
    padding: .5rem; }
  footer .footer-bottom {
    background: #333;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem; }

.single {
  margin: 5rem 0; }
  @media screen and (max-width: 768px) {
    .single {
      margin: 2rem 0; } }
  .single h2 {
    text-align: center;
    color: #019DC8;
    margin-bottom: 2rem; }
  .single .border-box {
    border: 5px solid #019DC8;
    border-radius: 5px;
    padding: 2rem; }
    @media screen and (max-width: 768px) {
      .single .border-box {
        padding: 2rem 1rem; } }
    .single .border-box .news-box {
      background: #FFF;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      margin: 0; }
      @media screen and (max-width: 768px) {
        .single .border-box .news-box h3 {
          font-size: 1rem; } }
      @media screen and (max-width: 768px) {
        .single .border-box .news-box time {
          font-size: .9rem; } }
      .single .border-box .news-box p {
        font-size: .9rem;
        line-height: 1.3rem;
        color: #444; }
    .single .border-box .day {
      text-align: right;
      color: #555;
      border-bottom: 1px solid #555;
      padding-bottom: .2rem; }
    .single .border-box .info-box {
      margin: 2rem 0; }

.mt-9 {
  margin-top: 5rem !important; }
  @media screen and (max-width: 768px) {
    .mt-9 {
      margin-top: 5rem; } }

.form-label {
  font-weight: bold;
  margin-top: .5rem; }

.link a {
  color: #019DC8;
  text-decoration: none; }
  .link a:hover {
    color: #30B6C1; }

.btn-blue {
  color: #FFF;
  background-color: #019DC8;
  font-size: 1.2rem; }
  .btn-blue:hover {
    background: #30B6C1;
    border-color: #30B6C1;
    color: #FFF; }
  @media screen and (max-width: 768px) {
    .btn-blue {
      font-size: 1rem; } }

.btn-outline-blue {
  color: #019DC8;
  border-color: #019DC8;
  font-size: 1.2rem; }
  .btn-outline-blue:hover {
    background: #019DC8;
    color: #FFF; }
  @media screen and (max-width: 768px) {
    .btn-outline-blue {
      font-size: 1rem; } }

.form-wrapp {
  width: 600px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .form-wrapp {
      width: 90%;
      margin: 0 15px; } }
  .form-wrapp .overflow {
    font-size: .9rem;
    line-height: 1.3rem;
    margin: 2rem 0;
    border-radius: 5px;
    background: #F1F9FA;
    border: #dbdbdb 1px solid;
    padding: 1rem;
    height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
    .form-wrapp .overflow h3 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      text-align: center; }
  .form-wrapp .form-check {
    font-size: 1rem;
    margin: 2rem auto;
    text-align: center; }
    .form-wrapp .form-check .form-check-input {
      float: none;
      margin-top: .4rem; }
  .form-wrapp .alert {
    font-size: 1rem;
    text-align: left; }

.form-group {
  margin-bottom: 1rem; }

.tel a {
  font-size: 2.5rem;
  color: #019DC8;
  font-weight: bold;
  text-decoration: none; }
  @media screen and (max-width: 768px) {
    .tel a {
      font-size: 1.5rem; } }

.login-news {
  background: #EEE;
  color: #111;
  padding: .7rem 0;
  font-size: 1rem; }
  @media screen and (max-width: 768px) {
    .login-news {
      font-size: .9rem; } }

.status-box {
  border: 1px solid #CCC;
  border-radius: 5px;
  padding: 1rem;
  width: 100%; }
  .status-box .name {
    font-size: 1.4rem; }
  .status-box .id {
    font-size: .9rem; }
  .status-box .edit {
    font-size: .9rem;
    text-decoration: none; }
  .status-box .menu {
    padding: .6rem .3rem;
    display: block;
    text-decoration: none;
    font-size: 1.1rem;
    color: #222; }
    .status-box .menu:hover {
      background: #EEE; }
  .status-box h3 {
    color: #019DC8;
    font-weight: bold;
    margin: 2rem 0;
    font-size: 1.3rem;
    border-bottom: 2px solid #019DC8;
    padding-bottom: .5rem; }
    @media screen and (max-width: 768px) {
      .status-box h3 {
        font-size: 1.1rem;
        margin: 1rem 0; } }
  .status-box .blue {
    color: #019DC8;
    font-size: 1.7rem; }
  .status-box .tel {
    color: #111;
    font-size: 1.7rem;
    font-weight: bold;
    text-decoration: none; }
  .status-box .red {
    color: #FF0004;
    font-weight: bold; }

.nav-fill .nav-item .nav-link {
  border-color: #dee2e6 #dee2e6 #fff;
  color: #019DC8; }

.nav-tabs .nav-link.active {
  background: #019DC8;
  color: #FFF; }

.tab-content {
  border-left: 1px solid #DEE2E6;
  border-right: 1px solid #DEE2E6;
  border-bottom: 1px solid #DEE2E6;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px; }
  .tab-content .number {
    background: #eee;
    padding: .5rem;
    text-align: center; }
    .tab-content .number span {
      font-weight: bold;
      font-size: 1.5rem;
      color: #FF0004; }
      @media screen and (max-width: 768px) {
        .tab-content .number span {
          font-size: 1.2rem; } }

@media screen and (max-width: 768px) {
  .reserv {
    font-size: 1rem;
    line-height: 1.4rem; } }

.matter {
  border-bottom: 1px solid #CCC;
  padding: 1rem; }
  @media screen and (max-width: 768px) {
    .matter {
      padding: 1.5rem 1rem; } }
  .matter h2 {
    font-size: 1.3rem;
    font-weight: bold;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    margin: 2rem 0;
    text-align: left; }
    .matter h2:hover {
      color: #436DFF; }
    @media screen and (max-width: 768px) {
      .matter h2 {
        font-size: 1.1rem;
        margin: 1rem 0; } }

.badge {
  font-size: .9rem;
  color: #FFF; }
  @media screen and (max-width: 768px) {
    .badge {
      font-size: .7rem; } }

.men {
  background: #3B95FF; }

.women {
  background: #E65556; }

.outpatient {
  background: #1FA2C0; }

.stay {
  background: #BD8005; }

.monitor {
  background: #0FC835; }

.hot {
  background: #FF192E; }

.maillist h3 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1rem; }
.maillist p {
  font-size: 1rem; }
.maillist time {
  color: #444; }

.solid-border-box {
  border: 1px solid #CCC;
  border-radius: 5px;
  background: #EFF8FF; }

.reserved {
  background: #EAEAEA; }

.login-title {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-size: 2rem;
  color: #222 !important;
  text-align: left !important;
  font-weight: bold;
  margin-bottom: 1.5rem; }
  @media screen and (max-width: 768px) {
    .login-title {
      font-size: 1.3rem; } }

.matter-table {
  font-size: 1rem;
  margin-top: 3rem; }
  .matter-table dl {
    display: flex;
    flex-flow: row wrap;
    width: 100%; }
  .matter-table dt {
    flex-basis: 15%;
    padding: 1rem;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc; }
    @media screen and (max-width: 768px) {
      .matter-table dt {
        flex-basis: 100%; } }
  .matter-table dd {
    flex-basis: 85%;
    padding: 1rem;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0; }
    @media screen and (max-width: 768px) {
      .matter-table dd {
        flex-basis: 100%; } }
  @media screen and (max-width: 768px) {
    .matter-table .company dl {
      flex-flow: column; } }

.border-title {
  font-size: 1.2rem;
  padding: .8rem;
  font-weight: bold;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  margin-bottom: 2rem; }

.contact-tel {
  font-size: 3rem;
  margin-top: 1.5rem; }
  @media screen and (max-width: 768px) {
    .contact-tel {
      font-size: 1.9rem; } }
  .contact-tel a {
    text-decoration: none;
    font-weight: bold; }

/* プログレスバー（進捗ステップ ）*/
.progressbar {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.progressbar li {
  position: relative;
  list-style-type: none;
  text-align: center;
  text-transform: uppercase;
  width: 33.333%;
  color: #999999;
  font-weight: bold;
  counter-increment: steps; }

.progressbar li:before {
  display: block;
  width: 26px;
  height: 26px;
  margin: 7px auto 20px auto;
  content: '';
  line-height: 26px;
  font-size: 12px;
  text-align: center;
  border-radius: 50%;
  background-color: #F5F5F5;
  content: counter(steps); }

.progressbar li:after {
  position: absolute;
  z-index: -1;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #F5F5F5; }

.progressbar li:first-child:after {
  content: none; }

.progressbar li.active,
.progressbar li.complete {
  color: #0070BD; }

.progressbar li.active:before,
.progressbar li.complete:before {
  background-color: #0070BD;
  color: #FFF; }

.progressbar li.active:after,
.progressbar li.complete:after {
  background-color: #0070BD; }