/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 120; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
  z-index: 120; /*サイトによってここの数値は調整 */
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 90%;
  background-color:#efe9e1;
}

@media screen and (max-width: 480px) {
  .modalWrapper {
    width: 90%;
  }
}

.modalContents p {
  line-height:1.3;
  padding:5%;
  background-color:#efe9e1;
}

@media screen and (max-width: 480px) {
  .modalContents p {
    padding:8%;
  }
}

.modalContents img {
  width:100%;
  padding:3%;
  background-color:#efe9e1;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

.userBudgeArea {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  align-items:center;
}

.userBudgeArea img{
  width:90%;
}

#budgeModalWrapper {
  width:30%;
}

@media screen and (max-width: 1024px) {
  #budgeModalWrapper {
    width:50%;
  }
}

@media screen and (max-width: 480px) {
  #budgeModalWrapper {
    width:90%;
  }
}

.budgeModalContents p {
  font-size: 1.2em;
  line-height:1.3;
  background-color:#efe9e1;
}

@media screen and (max-width: 480px) {
  .budgeModalContents p {
    font-size: 1.0em;
    line-height:1.2;
  }
}


.userInfoArea {
  padding:20px;
  border:solid 15px #352928;
}

.budgeImage {
  text-align: center;
}

.budgeUser {
  margin:0 0 20px 0;
}

.budgeCount {
  margin:0 0 17px 0;
}

.budgeTitle {
  margin:0 0 10px 0;
}

#closeBudgeModal {
  top:1.5rem;
  right:2rem;
}

.modal-mark::before{
  content:"◆";
  margin-left: 0.5rem;
  padding-right: 0.5rem;
  color:#c2a261;
}

#budgeModalBg {
  background-color: rgba(255, 255, 255, 0.9);
}

.budgeTitle {
  margin-top:30px;
  text-align: center;
}

.budgeViewer {
  margin-bottom:0px;
  width:150px;
}

@media screen and (max-width: 480px) {
  .budgeViewer {
    width:120px;
  }
}


#budgeViewerComment {
  font-size:0.6em;
  margin-top:3px;
  margin-bottom:20px;
  margin-left:20px;
}

.percent-area {
  display: flex;
}

.bar23{
  height: 20px;
  margin: 0 auto 10px auto;
  line-height: 20px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
  flex:1;
}

.bar23::before{
  content:'';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: 0;
  background: #ecf0f1;
}
.bar23::after{
  content: '';
  background: #c2a261;
  height: 30px;
  transition: 0.7s;
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.bar-view-percent::after{
  max-width: 20%;
}

#modal-count {
  padding-left:20px;
}

@media screen and (max-width: 480px) {
  #modal-count {
    padding-left:10px;
  }
}

.percent-graph {
  margin-top:3px;
}