@import url('/resources/mobile/css/event_common.css');

#container.event .eventCont .inputArea{display: flex; left:50%; transform: translateX(-50%); width: auto;}
#container.event .eventCont .inputArea a{margin-left: 10px;}
#container.event .eventCont .inputArea::placeholder{color:#e8e8e8;}
.hashArea{position: absolute; right: 130px;	text-align: center;}

.tabArea ul{position: relative; display: flex; justify-items: center; justify-content: center;}
.tabArea{position:fixed; bottom:0; z-index: 101;}
.tabArea.on{top: 0; bottom: auto; padding-top: 145px;}


.gaugeArea{position:absolute; bottom:159px; left:106px;}
.gauge{display:inline-block; position:relative; width:719px; height:70px; background:url(/resources/mobile/event/2023/11/heartmeal/images/gaugeBg_off.png) no-repeat 0 0}
.gauge>span{position:absolute; width:238px; height:100%; bottom:0px; left:0px; background:url(/resources/mobile/event/2023/11/heartmeal/images/gaugeBg_on.png) no-repeat;}


#container.event .event02 .slideArea{position:absolute; left:0px; width:100%; text-align:center; bottom:147px;}
#container.event .event02 .slick-arrow{position:absolute; top:50%; width:61px; height:111px; margin-top:-56px; text-indent:-999px; overflow:hidden; z-index:2}
#container.event .event02 .slick-prev{left:40px; background:url(/resources/mobile/event/2023/11/heartmeal/images/btn_prev.png) no-repeat 0 0}
#container.event .event02 .slick-next{right:40px; background:url(/resources/mobile/event/2023/11/heartmeal/images/btn_next.png) no-repeat 0 0}

#container.event .event03 .btnArea{bottom:79px; display:flex; justify-content: space-between; padding:0 5%;}
#container.event .event03 .btnArea a{flex:1;}
#container.event .event03 .btnArea a:first-of-type{margin-right:20px;}

#container.event .event03_2 .btnArea{top: 1198px;}
#container.event .event03_2 .hashArea{bottom:492px;}
#container.event .event03_2 .inputArea{bottom: 166px;}

#container.event .event04 .inputArea{bottom: 142px;}
#container.event .event04 .btnArea{top:1444px;}
#container.event .event04 .btnArea a{margin-left: 230px;}
#container.event .event04 .btnArea a:last-of-type{margin-left:10px;}
#container.event .event04 .hashArea{bottom: 469px;}
#container.event .event04 .snsArea{position: absolute; top:1771px; left: 50%; transform: translateX(-50%); width: 716px; text-align:center; font-size:0;}
#container.event .event04 .snsArea ul li{display:inline-block; padding:0 6px 22px;}
#container.event .event04 .snsArea ul li:first-child {display:block;}
#container.event .event04 .snsArea:after{display: block; content: ''; clear: both;}
#container.event .event03_2 .inputArea input,
#container.event .event04 .inputArea input{
    width: 700px;
    box-sizing: border-box;
    padding: 20px 40px;
    border: 3px solid #cccccc;
    border-radius: 10px;
}

#container.event .event05 .btnArea{bottom:143px;}

.dim {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; z-index: 100;}
.applyPop {display: none; padding-bottom:50px; position: absolute; left: 0; top:50%; z-index: 101; width:100%; background:#fff;}
.applyPop h2 img, .applyPop .agreeArea01 img {width:100%;}
.applyPop .infoArea {padding:70px 50px 0;}
.applyPop .btnClose{position: absolute; top: 25px; right: 25px;}
.applyPop .infoArea ul li{position:relative; padding-left:190px; margin-bottom: 30px;}
.applyPop .infoArea ul li strong{position:absolute; left:0; top:0; height: 110px;  font-size:40px; line-height: 110px; }
.applyPop .infoArea ul li div{font-size: 0;}
.applyPop .infoArea ul li input, .applyPop .infoArea ul li select{width: 100%; height: 110px; padding: 0 10px; border:2px solid #cacacd; border-radius: 10px; font-size:35px; color:#434343; box-sizing: border-box;}
.applyPop .infoArea ul li.phoneArea input, .applyPop .infoArea ul li.phoneArea select{width: calc((100% - 20px) / 3); margin-right:10px;}
.applyPop .infoArea ul li.phoneArea input:last-child{margin-right: 0;}
.applyPop .checkArea{display: flex; justify-content: flex-end; position: relative; padding:0 35px 40px 0; box-sizing: border-box; color:#333333;}
.applyPop .checkArea>div:nth-of-type(odd){margin-right: 36px;}
.applyPop .checkArea input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.applyPop .checkArea input[type="radio"] + label { display: inline-block; position: relative; padding: 0 0 0 50px; font-size: 40px; line-height:35px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.applyPop .checkArea input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: 0px; width: 35px; height: 35px; text-align: center; background: #ffffff; border: 2px solid #cfcfcf; border-radius: 100%; }
.applyPop .checkArea input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 9px; left: 9px; width: 20px; height: 20px; background: #0b317a; border-radius: 100%;}
.applyPop .btnArea{padding:20px 0 50px; text-align: center; background:#fff;}
.applyPop .btnArea img {width:60%;}
.applyPop .btnArea.fixed {position:fixed; left:0; right:0; bottom:0; text-align: center;}

/*.hashArea span{
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 50px;
    background: #fff;
    color: #333333;
    font-size: 36px;
    border-radius: 30px;
    width: 400px;
    margin-bottom: 20px;
}
#container.event .event04 .hashArea span:nth-child(odd){margin-right:10px;}
#container.event .event04 .hashArea span{
	width:auto;
    padding: 10px 35px; 
    margin-right:10px;
}
#container.event .event04 .hashArea span:nth-of-type(3),
#container.event .event04 .hashArea span:nth-of-type(5){margin-right:0;}*/