#sU-5 .common-outer-panel{
  width: 90vw;
}@media screen and (max-width: 1024px){
  #sU-5 .common-outer-panel{
    width: 96vw;
}}
#sU-5 .common-outer-panel > .menu-group > .common-inner-panel{
  width: 36vw;
  border-width: 1vw;
  border-style: solid;
  margin: 0 1vw;
}@media screen and (max-width: 1024px){
 #sU-5 .common-outer-panel > .menu-group > .common-inner-panel{
    width: 86vw;
    margin: 1vw 1vw;
}}
#sU-5 .menu-button{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#sU-5 .common-button-re-red,
#sU-5 .common-button-deepblue,
#sU-5 .common-button-blue,
#sU-5 .common-button-red,
#sU-5 .common-button-white,
#sU-5 .common-button-gray{
  width: 9.6vw;
  font-size: 1.2vw;
  padding: 1vw;
}@media screen and (max-width: 1024px){
  #sU-5 .common-button-re-red,
  #sU-5 .common-button-deepblue,
  #sU-5 .common-button-blue,
  #sU-5 .common-button-red,
  #sU-5 .common-button-white,
  #sU-5 .common-button-gray{
    width: 39vw;
    font-size: 3.2vw;
    padding: 3vw 1vw;
    margin: 1vw;
    border-radius: 2vw !important;
}}
#sU-5 .common-button-re-red.disabled,
#sU-5 .common-button-deepblue.disabled,
#sU-5 .common-button-blue.disabled,
#sU-5 .common-button-red.disabled,
#sU-5 .common-button-white.disabled,
#sU-5 .common-button-gray.disabled{
  pointer-events: none;
  background: #707070;
}
#sU-5 .common-button-deepblue.multiline,
#sU-5 .common-button-blue.multiline{
  line-height: 1.2vw;
}@media screen and (max-width: 1024px){
  #sU-5 .common-button-deepblue.multiline,
  #sU-5 .common-button-blue.multiline{
    line-height: 1em;
}}
#sU-5 .common-button-re-red > img,
#sU-5 .common-button-deepblue > img,
#sU-5 .common-button-blue > img,
#sU-5 .common-button-red > img,
#sU-5 .common-button-white > img,
#sU-5 .common-button-gray > img{
  display: block;
  margin: auto;
  margin-bottom: 1vw;
  height: 2vw;
}@media screen and (max-width: 1024px){
#sU-5 .common-button-re-red > img,
#sU-5 .common-button-deepblue > img,
#sU-5 .common-button-blue > img,
#sU-5 .common-button-red > img,
#sU-5 .common-button-white > img,
#sU-5 .common-button-gray > img{
    margin-bottom: 3vw;
    height: 5vw;
}}
#sU-5 .card-list,
#sU-5 .menu-group{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  padding: 1vw;
}
#sU-5 .card-list > div > .common-inner-panel{
  margin: 2vw 1vw;
  margin-top:0;
}
#sU-5 .card-list > div > .common-inner-panel table{
  width: 100%;
}
#sU-5 .card-list > div > .common-inner-panel td{
  padding: 0.5vw;
  font-size: 1.2vw;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .common-inner-panel td{
    padding: 2vw;
    font-size: 3vw;
}}
#sU-5 .menu-group > div > .common-inner-panel td{
  padding: 0.5vw;
  font-size: 1.2vw;
}@media screen and (max-width: 1024px){
  #sU-5 .menu-group > div > .common-inner-panel td{
    padding: 2vw;
    font-size: 3vw;
  }}
#sU-5 .card-list > div > .common-inner-panel .news td:last-child{
  text-align: left;
}
#sU-5 .menu-group > div > .common-inner-panel .news td:last-child{
  text-align: left;
}
#sU-5 .card-list > div > .common-inner-panel .news td > a{
  color: #707070;
  font-weight: bold;
  font-size: 1.2vw
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .common-inner-panel .news td > a{
    font-size: 2.6vw;
  }
}
#sU-5 .menu-group > div > .common-inner-panel .news td > a{
  color: #707070;
  font-weight: bold;
  font-size: 1.2vw
}@media screen and (max-width: 1024px){
  #sU-5 .menu-group > div > .common-inner-panel .news td > a{
    font-size: 2.6vw;
  }
}

#sU-5 .card-list > div > .common-inner-panel .news td > a:hover,
#sU-5 .card-list > div > .common-inner-panel .news td > a:active{
  text-decoration: underline;
}
#sU-5 .menu-group > div > .common-inner-panel .news td > a:hover,
#sU-5 .menu-group > div > .common-inner-panel .news td > a:active{
  text-decoration: underline;
}
#sU-5 .card-list > div > .common-inner-panel .latest{
  table-layout: fixed;
  width: 100%;
}
#sU-5 .card-list > div > .common-inner-panel .latest td{
  text-align: left;
  word-break: break-all;
}
#sU-5 .card-list > div > .common-inner-panel .latest td:first-child{
  text-align: center;
}
#sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(1){
  width: 6vw;
  white-space: nowrap;
}
#sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(2){
  width: 3.1vw;
  white-space: nowrap;
}
#sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(3){
  /* width: 15%; */
}
#sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(4){
  /* width: 30%; */
}
#sU-5 .card-list > div > .common-inner-panel .latest td > a{
  color: #707070;
  font-weight: bold;
  font-size: 1.2vw;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .common-inner-panel .latest td > a{
    font-size: 3vw;
}}
#sU-5 .card-list > div > .common-inner-panel .latest td > a:hover,
#sU-5 .card-list > div > .common-inner-panel .latest td > a:active{
  text-decoration: underline;
}
#sU-5 .card-list > div > .common-inner-panel .latest td > span{
  background: #444;
  color: #fff;
  padding: 0.2vw 0.5vw;
  border-radius: 0.3vw;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .common-inner-panel .latest td > span{
    padding: 1vw 2vw;
    border-radius: 1vw;
}}
#sU-5 .card-list > div > .common-inner-panel .latest td > .order{
  background: #ffbd72;
}
#sU-5 .card-list > div > .common-inner-panel .latest td > .contract{
  background: #74d36b;
}
@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .common-inner-panel .latest td{
    display: block;
    padding: 1vw;
  }
  #sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(1){
    width: 17vw;
  }
  #sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(2){
    width: 68vw;
  }
  #sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(3),
  #sU-5 .card-list > div > .common-inner-panel .latest td:nth-child(4){
    width: 80vw;
    margin-left: 3vw;
  }
  #sU-5 .card-list > div > .common-inner-panel .latest tr{
    display: flex;
    flex-wrap: wrap;
    margin: 2vw auto;
  }
}

#sU-5 .card-list > div > .common-inner-panel .monthly td:first-child{
  text-align: left;
  display: flex;
  align-items: center;
}
#sU-5 .card-list > div > .common-inner-panel .monthly td:last-child{
  text-align: right;
}
#sU-5 .card-list > div > .common-inner-panel .monthly tr > td > span{
  display: block;
  width: 1vw;
  height: 1vw;
  margin-right: 0.3vw;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .common-inner-panel .monthly tr > td > span{
    width: 3vw;
    height: 3vw;
    margin-right: 1vw;
}}
#sU-5 .card-list > div > .common-inner-panel .monthly tr:nth-child(1) > td > span{
  background: #a0c4ff;
}
#sU-5 .card-list > div > .common-inner-panel .monthly tr:nth-child(2) > td > span{
  background: #ff8285;
}
#sU-5 .card-list > div > .common-inner-panel .monthly tr:nth-child(3) > td > span{
  background: #60c3bc;
}
#sU-5 .card-list > div > .common-inner-panel .monthly tr:nth-child(4) > td > span{
  background: #ea81c3;
}
#sU-5 .card-list > div > .tasks,
#sU-5 .card-list > div > .bound-status,
#sU-5 .card-list > div > .saving-tax,
#sU-5 .card-list > div > .timestamp,
#sU-5 .card-list > div > .news,
#sU-5 .menu-group > div > .news,
#sU-5 .card-list > div > .digital-contract,
#sU-5 .card-list > div > .storage-usage{
  width: 36vw;
  border-width: 1vw;
  border-style: solid;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .bound-status,
  #sU-5 .card-list > div > .saving-tax,
  #sU-5 .card-list > div > .timestamp,
  #sU-5 .card-list > div > .news,
  #sU-5 .menu-group > div > .news,
  #sU-5 .card-list > div > .digital-contract,
  #sU-5 .card-list > div > .storage-usage{
    width: 86vw;
}}

#sU-5 .card-list > div > .news,
#sU-5 .card-list > div > .digital-contract{
  border-color: #e373a2;
}
#sU-5 .menu-group > div > .news,
#sU-5 .menu-group > div > .digital-contract{
  border-color: #e373a2;
}

#sU-5 .card-list > div > .task > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  background: #fff;
  padding: 1em 2em;
  border-radius: 0.2vw;
  margin: 1vw auto;
  border: 0.2vw solid #b6b6b6;
  border-radius: 0.5vw;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .task > div{
    border-width: 0.5vw;
    border-radius: 2vw;
  }}

#sU-5 .card-list > div > .saving-tax > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  background: #fff;
  padding: 1em 2em;
  border-radius: 0.2vw;
  margin: 1vw auto;
  border: 0.2vw solid #b6b6b6;
  border-radius: 0.5vw;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .saving-tax > div{
    border-width: 0.5vw;
    border-radius: 2vw;
}}
#sU-5 .card-list > div > .saving-tax > div > p:last-child{
  font-size: 1.5em;
  font-weight: bold;
  color: #58B6B9;
}

#sU-5 .card-list > div > .timestamp > div{
  margin: auto;
  background: #fff;
  padding: 1em 2em;
  border-radius: 0.2vw;
  margin: 1vw auto;
  border: 0.2vw solid #b6b6b6;
  border-radius: 0.5vw;
}@media screen and (max-width: 1024px){
  #sU-5 .card-list > div > .timestamp > div{
    border-width: 0.5vw;
    border-radius: 2vw;
  }}
#sU-5 .card-list > div > .timestamp > div > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#sU-5 .card-list > div > .timestamp > div > div > p:last-child{
  font-size: 1.5em;
  font-weight: bold;
  color: #58B6B9;
}

#sU-5 .more{
  margin: 1vw auto;
  padding: 0.5vw;
}@media screen and (max-width: 1024px){
  #sU-5 .more{
    margin: 3vw auto;
    padding: 3vw;
}}
#sU-5 .modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1001;
  display: none;
}
#sU-5 .modal > div{
  position: relative;
  width: 50vw;
  height: calc(90vh - 6vw);
  background: #fff;
  margin: 5vh auto;
  border-radius: 0.5vw;
  padding: 3vw;
  z-index: 1002;
}@media screen and (max-width: 1024px){
  #sU-5 .modal > div{
    width: 90vw;
}}
#sU-5 .modal > div > .modal-close{
  position: absolute;
  top: -0.5vw;
  right: -0.5vw;
  width: 2vw;
  height: 2vw;
  background: #fff;
  border: 0.1vw solid #999;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
}@media screen and (max-width: 1024px){
  #sU-5 .modal > div > .modal-close{
    top: -2vw;
    right: -2vw;
    width: 8vw;
    height: 8vw;
    border: 0.5vw solid #999;
}}
#sU-5 .modal > div > .modal-close:hover{
  background: #ddd;
}
#sU-5 .modal > div > .modal-close::before,
#sU-5 .modal > div > .modal-close::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2vw;
  height: 1vw;
  background: #999;
}@media screen and (max-width: 1024px){
  #sU-5 .modal > div > .modal-close::before,
  #sU-5 .modal > div > .modal-close::after{
    width: 0.6vw;
    height: 5vw;
}}
#sU-5 .modal > div > .modal-close::before{
    transform: translate(-50%, -50%) rotate(45deg);
}
#sU-5 .modal > div > .modal-close::after{
    transform: translate(-50%, -50%) rotate(-45deg);
}

#sU-5 .common-message-box{
  width: 70vw;
  padding: 2vw;
  margin: 0 auto;
}@media screen and (max-width: 1024px){
 #sU-5 .common-message-box{
    width: auto;
}}
#sU-5 .common-message-box > h5{
  width: 70vw;
  padding: 0.9vw;
  background-color: #e3f1f1cb;
  font-size: 1.3vw;
}@media screen and (max-width: 1024px){
  #sU-5 .common-message-box > h5{
    padding: 3.5vw;
    font-size: 2.5vw;
    width: auto;
}}

/* Tranzaxエラーメッセージ */
.tranzax-warning-message{
  text-align: left;
  font-size: 1.3vw;
  font-weight: bold;
  border-radius: 0.3vw;
  padding: 1vw;
  margin: 1vw 2vw;
}@media screen and (max-width: 1024px){
  .tranzax-warning-message{
    font-size: 2vw;
    border-width: 0.2vw;
    padding: 2vw;
    margin: 2vw 2vw;
  }
}

/* 二要素認証メッセージ */
.two-factor-guidance{
  font-size: 1vw;
  font-weight: bold;
  background: #ffb5b5;
  border: 0.05vw solid #f00;
  border-radius: 0.3vw;
  padding: 1vw;
  margin: 1vw 2vw;
}@media screen and (max-width: 1024px){
  .two-factor-guidance{
    border-width: 0.2vw;
    padding: 2vw;
    margin: 2vw 2vw;
  }
}
.two-factor-link{
  font-size: 1.3vw;
  font-weight: bold;
  color: #f00;
  line-height: 1.5em;
  text-decoration: underline;
}@media screen and (max-width: 1024px){
  .two-factor-link{
    font-size: 2.7vw;
    border-width: 0.2vw;
    padding: 2vw;
    margin: 2vw 2vw;
  }
}
.two-factor-guidance-link{
  color: #707070;
  font-size: 1.2vw;
  font-weight: bold;
  text-decoration: underline;
}@media screen and (max-width: 1024px){
  .two-factor-guidance-link{
    font-size: 2.5vw;
  }
}
#sU-5 .my-page-title{
  display: flex;
  justify-content: center;
  position: relative;
}
#sU-5 .my-page-title a{
  position: absolute;
  right: 2vw;
  width: 8vw;
  font-size: 1vw;
  padding: 0.5vw 0 0.5vw 0;
  color: #707070;
  border: 0.05vw solid #888;
  border-radius: 0.5vw;
  margin-top: 1.5vw;
}@media screen and (max-width: 1024px){
  #sU-5 .my-page-title a{
    width: 10vw;
    font-size: 2.5vw;
    padding: 3vw 1vw;
    border-radius: 2vw !important;
    margin-top: 3vw;
  }
}
#sU-5 .my-page-title a:hover{
    background-color: #EEEEEE;
}
#sU-5 .my-page-title a img{
  display: block;
  margin: auto auto 1vw;
  height: 1.5vw;
}@media screen and (max-width: 1024px){
  #sU-5 .my-page-title a img{
    height: 3.5vw;
  }
}

.notification-badge:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #E93F33;
  color: white;
  text-align: center;
  font-size: 16px;
  line-height: 32px;

}

.common-inner-panel.wide {
  width: 100% !important;
  padding-bottom: 0.5vw;
  padding-top: 0.5vw;
}

.badge {
  position:relative;
}
.badge[data-badge]:after {
  content:attr(data-badge);
  position:absolute;
  top:-10px;
  right:-10px;
  color:white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #E93F33;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
  box-shadow:0 0 1px #333;
  z-index: 10;
}
#sU-5 .common-inner-panel.wide .menu-button a {
  width: 20%;
}@media screen and (max-width: 1024px){
  #sU-5 .common-inner-panel.wide .menu-button a {
    width: 39vw;
    font-size: 3.2vw;
    padding: 3vw 1vw;
    margin: 1vw;
    border-radius: 2vw !important;
}}

#sU-5 .common-confirm-window .common-button-re-red,
#sU-5 .common-confirm-window .common-button-deepblue,
#sU-5 .common-confirm-window .common-button-blue,
#sU-5 .common-confirm-window .common-button-red,
#sU-5 .common-confirm-window .common-button-white,
#sU-5 .common-confirm-window .common-button-gray{
  width: 100%;
  padding: 0.3vw 0;
}