@charset "utf-8";
/*========= モーダル表示のためのCSS ===============*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none!important;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}


.modaal-wrapper .box {
    margin-top: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 5px 5px 3px rgb(0 0 0 / 10%);
    position: relative;
}

.modaal-wrapper .box  h3{font-weight: 700;color: #faaabe;font-size: 2.8rem;padding: 13px 0 18px;
	border-bottom: 1px solid #f3f3f3;margin-bottom: 20px; text-align: center;}

.modaal-wrapper .modaal-content-container {
    background: url(../img/index/webp/bg-dot.webp)center/1200px repeat #fff;
}

.modaal-wrapper .loan table{margin-bottom: 50px; width: 100%; display: table;}

.modaal-wrapper .loan table th,
.modaal-wrapper .loan table td{font-weight: 400; text-align: center;vertical-align: middle;height: 60px;}

.modaal-wrapper .loan table tr{background: #f6f6f6;}
.modaal-wrapper .loan table tr:nth-child(even){background: #fff;}

.modaal-wrapper .loan table tr:first-child th:first-child{border-top-left-radius: 10px;}
.modaal-wrapper .loan table tr:first-child th:last-child{border-top-right-radius: 10px;}
.modaal-wrapper .loan table tr:last-child th:first-child{border-bottom-left-radius: 10px;}
.modaal-wrapper .loan table tr:last-child td:last-child{border-bottom-right-radius: 10px;}

.modaal-wrapper .loan table th:first-child{color: #808080;width: 125px; background: #d2eef4;mix-blend-mode: multiply;}
.modaal-wrapper .loan table td:first-of-type{font-weight: 700;color: #faaabe;}

.modaal-wrapper .loan table tr:first-child th{height: 80px;font-size: 1.8rem;font-weight: 500;}

@media screen and (max-width:768px){
   .modaal-wrapper .scroll-table  {
  overflow-x: scroll;
}
.modaal-wrapper .scroll-table table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
    
    .modaal-content-container {
    padding: 10px;
}
    .modaal-wrapper .box  h3{font-size: 4vw;}
.modaal-wrapper .loan table tr:first-child th {
    font-size: 1.4rem;
}

        .modaal-wrapper .loan table tr:first-child th:nth-of-type(2) {
    width: 40%;
}
        .modaal-wrapper .loan table tr:first-child th:nth-of-type(3) {
     width: 40%;
}
}