@charset "UTF-8";

/* 共通 */
* {
  margin: 0;
  padding: 0; }

.mt-100 {
  margin-top: 100px !important;
}

.mb-50 {
  margin-bottom: 50px !important; }

.c-btn{
  background: #19c8cb;
  color: white;
  border-radius: 30px;
  border: none;  
  padding: 15px 0;
  width: 90%;
  margin: 0 5%;
  cursor: pointer;
}
.n-btn{
  border: solid 1px #19c8cb;
  padding: 5px 30px;
  background-color: white;
  border-radius: 30px;
  color: #19c8cb;
  cursor: pointer;
}
.n-btn:hover{
  background: #c6f4e7;
  text-decoration: none;
}
.t_bold{
  font-weight: bold;
}
.t_red{
  color: red;
}
.w-auto{
  width: auto;
}

/* table 横スクロール*/
.scroll table{
  width:100%;
}
.scroll{
  overflow: auto;
  white-space: nowrap;
}
.scroll::-webkit-scrollbar{
 height: 5px;
}
.scroll::-webkit-scrollbar-track{
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}



/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box; }
  input[type="submit"]::-webkit-search-decoration,
  input[type="button"]::-webkit-search-decoration {
    display: none; }
  input[type="submit"]::focus,
  input[type="button"]::focus {
    outline-offset: -2px; }
button{
  outline: none !important;
}

body{
  background: #f3f3f3;
}
#wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
  box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.4);
  background: #fff;
}
  #wrapper img {
    width: 100%; }
  #wrapper .btn_normal {
    width: 80%;
    border: solid 1px #aaa;
    padding: 10px 0;
    text-align: center;
    border-radius: 30px;
    display: block;
    margin: 0 auto;
    color: #333; }
    #wrapper .btn_normal:hover {
      background-color: #ebebeb;
      text-decoration: none; }
  #wrapper .header {
    position: relative;
    text-align: center;
    background-color: #444444;
    color: white;
    padding: 30px 5%;
    overflow: hidden; }
    #wrapper .header:before {
      position: absolute;
      content: "";
      top: 0;
      left: -18%;
      transform: skew(-20deg);
      height: 100%;
      width: 100px;
      background-color: #666666;
      display: block;
      z-index: 1; }
    #wrapper .header:after {
      position: absolute;
      content: "";
      top: 0;
      right: -18%;
      transform: skew(-20deg);
      height: 100%;
      width: 100px;
      background-color: #666666;
      display: block;
      z-index: 1; }
    #wrapper .header .ttl {
      position: relative;
      font-size: 1.1rem;
      z-index: 10; }
    #wrapper .header .txt {
      position: relative;
      z-index: 10; }
  #wrapper #content .sns_list {
    margin-bottom: 40px; }
    #wrapper #content .sns_list li {
      position: relative;
      display: flex;
      align-items: center;
      list-style: none;
      border-bottom: solid 1px #ddd;
      padding: 15px 15px 10px; }
      #wrapper #content .sns_list li .icon {
        display: inline-block;
        padding-right: 10px;
        position: relative;
        z-index: 10; }
        #wrapper #content .sns_list li .icon img {
          width: 50px; }
      #wrapper #content .sns_list li .sns_name {
        display: inline-block; }
      #wrapper #content .sns_list li .btn_link {
        display: inline-block;
        position: absolute;
        right: 10px;
        border: solid 1px #19c8cb;
        padding: 10px 30px;
        background-color: white;
        border-radius: 30px;
        color: #19c8cb;
        z-index: 10;
        cursor: pointer; }
        #wrapper #content .sns_list li .btn_link:hover {
          background: #c6f4e7;
          text-decoration: none; }
      #wrapper #content .sns_list li.on {
        background-color: #19c8cb; }
        #wrapper #content .sns_list li.on:before {
          position: absolute;
          top: 0;
          left: -60px;
          display: block;
          content: "";
          background-color: #23b8bb;
          transform: skew(-20deg);
          height: 100%;
          width: 100px;
          z-index: 1; }
        #wrapper #content .sns_list li.on .btn_link {
          background-color: #15a3a5;
          color: white; }
  #wrapper .footer {
    text-align: center;
    background-color: #444444;
    color: #acacac;
    padding: 30px 0;
    height: 150px;
    margin-top: auto; 
  }
    #wrapper .footer img {
      width: 100px; }
    #wrapper .footer .copy {
      margin-top: 15px;
      font-size: 0.8rem; }

@media screen and (min-width: 1025px) {
  #wrapper {
    width: 750px;
    overflow: hidden; 
    }
  #wrapper .header:before {
    left: -6%;
  }
  #wrapper .header:after {
    right: -6%;
  }
}
.signin-button {
  width: 210px !important;
  height: 40px !important; }
  .signin-button svg {
    height: 40px; }

/* 詳細画面 */
.content_repay{
  padding-top: 30px;
}

/* 未処理の内容が２つ以上ある時は線がでる */
.content_repay .inner:nth-child(n + 3){
  border-top: 1px solid #dee2e6;
  padding-top: 30px;
  }
.content_repay label{
  background: #c6f4e7;
  padding: 10px 5%;
  width: 100%;
  font-weight: bold;
}
.content_repay p{
  padding: 10px 5%;
  }
.misyori{
  position: relative;
}
.misyori button{
  position: absolute;
  right: 15px;
  top: 5px;
}

.modal-header{
  border: none;
}
.modal-body table thead{
  background: #c6f4e7;
}
.modal-body table th{
  border-bottom: 1px solid #dee2e6;
}

/* メンテ　エラー */
.content_attention{
  margin: 15px;
}