/* Overlay */
.modal-overlay, .modal-overlay-2 {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
}

/* Modal box */
.modal {
  background: #fff;
width: 100%;
 max-width: 1150px;
  padding: 40px;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
margin: 0 10px;
}
.modal h2{
    font-size: 30px;
    text-align: center;
    margin-bottom: 26px;
    line-height: 1.4;
}
.modal-content ul{
    margin: 0 0 26px;
    padding-left: 20px;
}
.modal-content ul li+li{
    margin-top: 15px;
}
.modal-content p{
    margin-bottom: 10px;
    /* text-align: center; */
}
.modal-content .btn{
    margin-inline: auto;
    display: block;
    max-width: 420px;
    line-height: 48px;
}
.modal-content .btn svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.modal-footer{
    padding-top: 40px;
}
.modal-footer .btn-outline{
    display: block;
    max-width: 250px;
    margin-inline: auto;
}
.inquiry-section__row h3 {
	margin: 0;
}
.inquiry-section__row p {
	margin: 0 0 10px;
}
 .banner__label a {
    border: 2px solid #fff;
    border-top: 0;
  }

.download-section__buttons + figure {
	margin-top: 50px;
}

.banner-section {
	padding: 50px 0;
}
.banner-section__inner {
	max-width: 950px;
	margin: 0 auto;
}
/*vst*/
.modal-overlay-2 .modal {
	max-height: 94vh;
	overflow: auto;
}
.modal-content .card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4%;
}
.modal-content .card-grid  h3 {
	background: #E7E7E7;
	font-size: 24px;
	font-weight: bold;
	line-height: 26px;
	padding: 18px 20px 8px;
}
.modal-content .apply-flow {
	/* border-bottom: 1px solid #CCCCCC; */
	padding: 10px;
}
.modal-content .apply-flow:last-child {
	border-bottom: none;
}
.modal-content .apply-flow p {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
}
.modal-content .apply-flow .flex {
	align-items: center;
	display: flex;
}
.modal-content .apply-flow .flex > * {
	width: 50%
}
.modal-content .apply-flow .flex figure {
	text-align: center;
}
.modal .btn-outline.btn--lg {
	font-size: 16px;
	width: 100%;
}
.modal .btn-outline, .modal .btn,
.modal .close, .modal .close-2 {
	position: relative;
}
.modal .close:before, .modal .close-2:before {
	content: "";
	background: url(/content/dam/nttcom/hq/jp/business/services/db_card/img/Rectangle1.svg) no-repeat;
	background-size: 8px auto;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 35px;
	width: 16px;
	height: 16px;
}
.modal .btn-outline.btn--lg:after {
	content: "";
	background: url(/content/dam/nttcom/hq/jp/business/services/db_card/img/Rectangle3.svg) no-repeat;
	background-size: 8px auto;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	right: 35px;
	width: 16px;
	height: 16px;
}
.modal .btn.btn--lg:after {
	content: "";
	background: url(/content/dam/nttcom/hq/jp/business/services/db_card/img/Rectangle2.svg) no-repeat;
	background-size: 11px auto;
	position: absolute;
	top: 50%;
	margin-top: -11px;
	right: 35px;
	width: 22px;
	height: 22px;
}
@media only screen and (max-width: 767px){
    .modal{
        padding: 30px;
    }
    .modal h2{
        font-size: 4vw;
        margin-bottom: 30px;
    }
    .modal-content ul{
        font-size: 14px;
        margin-bottom: 20px;
    }
    .modal-content p{
        font-size: 14px;
    }
    .modal-content .btn{
        width: 100%;
    }
	.short-download__inner {
        flex-direction: row;
        gap: 16px;
	}
	.short-download__body {
		flex: 1;
	}
	.short-download__body h3 {
		justify-content: center;
		flex-direction: row;
		font-size: 15px;
		margin-left: -106px;
	}
	.short-download__inner figure {
		width: 90px;
		margin-top: 30px;
	}
	.short-download__buttons {
		flex-direction: row;
		gap: 5px;
	}
	.short-download__buttons .btn {
		font-size: 12px;
		min-width: calc(50% - 5px);
		padding: 6px 5px;
	}
	.modal-content .card-grid {
		display: block;
	}
}

@media only screen and (max-width: 400px){
	.short-download__buttons .btn {
		min-width: 0;
	}
}

@media only screen and (max-width: 767px){
    .modal{
        padding: 30px;
    }
    .modal h2{
        font-size: 4vw;
        margin-bottom: 30px;
    }
    .modal-content ul{
        font-size: 14px;
        margin-bottom: 20px;
    }
    .modal-content p{
        font-size: 14px;
    }
    .modal-content .btn{
        width: 100%;
    }
.card-item{
margin-bottom: 40px;}
}

@media only screen and (max-width: 400px) {
    .short-download__buttons .btn {
        min-width: 100px;
    }
.short-download__inner figure img{
width: 90%;
}
.short-download__body h3{
font-size: 3.4vw;
}
}

.modal-content .apply-flow p.apply-flow_subtxt{
color: #cc0133;
font-size: 16px;
line-height: 1.6;
background-color: #fff;
border: 1px solid #cc0133;
padding: 6px;
}
.apply_d-account{
color: #cc0133;
}
.apply-d-button{
color: #cc0133;
text-decoration: underline;
}
.apply-d-button:visited{
color: #cc0133;
text-decoration: underline;
}
.modal-footer a{
align-content: center;
}
.modal_txt_red{
color: #cc0133;
font-weight: bold;
}

.modal_txt_kome{
font-size: 10px;
vertical-align: top;
}
/* main .modal-content .apply-flow p.modal_txt_flow{
font-weight: normal;
} */
.modal-content .apply-flow_01{
padding-bottom: 0;
}
.modal-content .apply-flow_qrarea{
border-bottom: 1px solid #ccc;
}
.modal_txt_link{
color: #cc0133;
text-decoration: underline;
}
.modal_txt_left{
padding-bottom: 20px;}
.modal_txt_sub {
    font-size: 14px;
}
.apply-flow_qrarea{
display: flex;
justify-content: space-between;
}
.apply-flow_qrarea .apply-flow_qrimage{
width: 35%;
}
.modal_qrtxtbox{
width: 60%;
}
.modal-content .card-grid{
position: relative;
}
.modal-content .card-grid::after{
position: absolute;
content: "";
background-image: url(/content/dam/nttcom/hq/jp/business/services/db_card/img/arrow-step.svg);
background-repeat: no-repeat;
width: 20px;
height: 20px;
left: 50%;
top: 5%;
transform: translateX(-45%);
z-index: 1;
}

@media only screen and (max-width: 767px){
.modal{
margin: 0 auto;
width: 94%;
}
.modal-content ul{
padding-left: 0;
}
.modal h2{
margin-bottom: 14px;
}
.modal-content .apply-flow p{
font-size: 16px;
}
.modal-content .card-grid::after{
display: none;
}
.card-item_sp{
position: relative;
margin-bottom: 90px;
}
.card-item_sp:after{
position: absolute;
content: "";
background-image: url(/content/dam/nttcom/hq/jp/business/services/db_card/img/arrow-step.svg);
background-repeat: no-repeat;
width: 20px;
height: 20px;
left: 50%;
top: 108%;
transform: translateX(-50%) rotate(90deg);
z-index: 1;
}
.modal-footer{
margin-top: 20px;
}
}
@media only screen and (max-width: 480px) {
.modal-content .card-grid h3{
font-size: 20px;
}
}
@media only screen and (max-width: 400px) {
.modal{
padding: 30px 15px;}
}

/* 20260304 */
main .card-grid .card-item h3 span {
    font-size: 12px;
}