@charset "UTF-8";
body.no-scroll{
overflow: hidden;
}
.js-popup {
display: none;
height: 100vh;
width: 100%;
background: rgb(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.js-popup .content {
background: #fff;
padding: 0;
width: 86%;
max-width: 600px;
/* max-height: 500px; */
box-sizing: border-box;
position: relative;
margin: 3% 0;
}
.js-popup.js-show {
display: flex;
justify-content: center;
align-items: center;
}
#js-close{
position: absolute;
right: -15px;
top: -20px;
width: 40px;
height: 40px;
}
#js-close img{width: 100%;}
.step_01{border: 5px solid #ff6600;}
.step_01 img{ width: 100%; height: auto;}
.step_01_ttl{text-align: center;font-weight: bold;line-height: 1.4;margin-bottom: 3%;font-size: clamp(18px, 5.5vw, 36px);}
.step_01_ttl span.large{font-size: 1.4em;}
.step_01_ttl span.small{font-size: 0.7em;}
.step_01 .js-no{padding: 0 5% 5%;}
.step_01 .js-no a{display: block;}
.step_01 .js-yes{padding: 0 5% 5%;}
.step_01 .js-yes:hover{cursor: pointer;}
.step_02{display: none;padding: 5% 0;}
.step_02_ttl{text-align: center;font-weight: bold;line-height: 1.4;margin-bottom: 3%;font-size:clamp(18px, 4vw, 30px);}
.step_02 .popup_brand{padding: 0 5%;}
.step_02 .brand_box:not(:first-of-type){margin-top: 5%;}
.step_02 .brand_inner{background: #f6f6f6;border: 3px solid;border-radius: 10px;position: relative;}
.step_02 .brand_inner .banner{position: absolute;top:6%;right:3%;width:42%;}
.step_02 .brand_inner .btn{padding:0 3% 3% 3%;}
.step_02 .popup_brand .mobit{border-color: #00963d;}
.step_02 .popup_brand .promise{border-color: #003c7e;}
.step_02 .popup_brand .aiful{border-color: #cf0d23;}
span.red{color:red;}