@charset "utf-8";

/* collect HEART COLLECT */
#collect{}
#collect .tit{width: 100%;}
#collect .tit img{width: 100%;}
#collect .bx{width: 100%;text-align: center; padding-bottom: 8vw !important;}
#collect .bx .message_tree_tit{width: 100%;}
#collect .bx .message_tree{width: 100%;}
#collect .bx .message_tree_img{margin-bottom: 2.933vw; width: 100%;position: relative;}
#collect .bx .tree_date{margin-bottom: 2.933vw; color: #51A9B9; font-size: 5vw;font-weight: 700;line-height: 1;}
#collect .bx .tree_date small{font-size: 4vw;font-weight: 700;}
#collect .bx .tree_date span{display: block;padding: 1.4vw 0 0; font-size: 2.933vw;font-weight: 500; line-height: 4.8vw;}

#collect .bx .tree_area{margin: 0 auto 4vw; color: #6586C4; font-size: 5.866vw;font-weight: 500;line-height: 1; border-bottom: 2px solid #51A9B9;border-top: 2px solid #51A9B9;padding: 2.66vw 0;width: 93.6%;position: relative;}
#collect .bx .tree_area small{display: block;padding: 2vw 0 0; font-size: 2.666vw;font-weight: 500;line-height: 4.8vw;}
#collect .bx .tree_area small a{display: block; color: #6586C4;font-size: 3.2vw;font-weight: 500;line-height: 4.8vw; text-decoration: underline;}
#collect .bx .tree_copy{margin-bottom: 3.2vw; color: #CF2C37; font-size: 4.266vw;font-weight: 500;line-height: 6.23vw;}
#collect .bx .tree_txt{margin-bottom: 4vw;padding: 0 3.333vw; color: #203165; font-size: 3.2vw;font-weight: 300;line-height: 4.8vw;}
#collect .bx .tree_txt span{color: #6586C4;font-weight: 700;}
#collect .bx .tree_txt small{color: #6586C4;font-size: 2.6vw;display: block;margin-top: 2vw;}

#collect .bx .tree_area .ill{position: absolute;left: -2vw;top: -9.8vw;width: 15.4vw;}
/*20241022追記*/
#collect .bx .message_tree_img span{display: block;font-size: 1.866vw;text-align: left;color: #707070;padding: 0 0 0 2.666vw !important;}
#collect .bx .message_tree_img span.fukidashi{position: absolute;right: 1.06vw;bottom: -6vw;width: 30vw;padding: 0 !important;text-align: right;}
#collect .bx .tree_sponsor{color: #6586C4;font-weight: 700;font-size: 2.6vw;text-align: center;margin: 2vw 0;}
#collect .bx .tree_btn_bosyu{margin: 0 auto;width: 42.6vw;}
#collect .bx .tree_btn_bosyu a{display: flex;justify-content: center;align-items: center;width: 100%;height: 5.33vw;background-color: #6586C4;border-radius: 9999px;}
#collect .bx .tree_btn_bosyu a span{color: #fff;font-weight: 700;font-size: 2.4vw;background: url(../../asset/images/collect/ico_bosyu.png) no-repeat right center;background-size: 2.93vw auto;padding: 0 4.26vw 0 0;}
#collect .area_map{padding: 4.666vw 0 6vw; width: 93.6%;margin: 0 auto;}
#collect .area_map .map{width: 100%;}
#collect .area_map .map img{width: 100%;}
#collect .area_map .map_note{font-size: 3.2vw;margin: 1vw 0 4vw;text-align: center;color: #203165;}
/*20231016追記*/
#collect .bx{padding-bottom: 0;}
#collect .bx .tree_txt span{display: block;font-size: 2.133vw;padding: 2.666vw 0 0;}
/*20251017追記*/
#collect .bx .tree_btn{width: 71.2vw;margin: 2vw auto 0;}
#collect .bx .tree_btn dt{width: 100%;height: 10.666vw;background-color: #CF2C37;border-radius: 7px;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 4vw;line-height: 1.1;font-weight: 500;cursor: pointer;position: relative;}
#collect .bx .tree_btn dt p{font-weight: 500;}
#collect .bx .tree_btn dt p span{font-size: 2.6vw;font-weight: 500;display: block;}
#collect .bx .tree_btn dd{display: none;}
#collect .bx .tree_btn dd .tree_btn_list{background-color: #203165;border-radius: 7px;padding: 3.2vw 4vw;width: 100%;box-sizing: border-box;}
#collect .bx .tree_btn dd .tree_btn_list li{font-size: 2.8vw;line-height: 4.533vw;font-weight: 500;text-align: left;color: #fff;}
#collect .bx .tree_btn .ill01{position: absolute;left: -13.8vw;bottom: -1.33vw;width: 16vw;}
#collect .bx .tree_btn .ill02{position: absolute;right: -13vw;bottom: -2.93vw;width: 13.3vw;}

/* popup */
.popup-open {margin: 0 auto;width: 42.6vw;display: flex;justify-content: center;align-items: center;width: 100%;height: 5.33vw;background-color: #6586C4;border-radius: 9999px;}
.popup-open span{color: #fff;font-weight: 700;font-size: 2.4vw;background: url(../../asset/images/collect/ico_bosyu.png) no-repeat right center;background-size: 2.93vw auto;padding: 0 4.26vw 0 0;}
.popup {z-index: 10;position: fixed;top: 0;left: 0;width: 100%;height: 100%;transform: scale(0);background-color: rgba(0, 0, 0, 0.8);opacity: 0;transition: opacity 0.3s, transform 0s 0.3s;}
.popup__btn {display: block;z-index: 13;position: absolute;top: 1vh;right: 4vh;width: 5vh;height: 5vh;cursor: pointer;}
.popup__btn::before,.popup__btn::after {position: absolute;top: 50%;width: 100%;height: 2px;margin-top: -1px;background-color: #fff;content: '';}
.popup__btn::before {transform: rotate(45deg);}
.popup__btn::after {transform: rotate(-45deg);}
.popup__btnarea {z-index: 12;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.popup__img {z-index: 11;position: absolute;top: 15%;left: 5%;width: 90%;height: 90%;}
.popup__img_inner{width: 100%;}
.popup__img_inner img {width: 100%;height: auto;/* object-fit: contain; */padding: 0.5vw;}
input[type="checkbox"] { display: none;}
input[type="checkbox"]:checked ~ .popup {transform: scale(1);opacity: 1;transition: opacity 0.3s;}



@media screen and (min-width: 1024px) {
#collect .bx{padding-bottom: 60px !important;}
#collect .bx .message_tree_img span.fukidashi{right: 8px;bottom: -70px;width: 227px;}
#collect .bx .tree_date{margin-bottom: 14px;font-size: 38px;}
#collect .bx .tree_date small{font-size: 30px;font-weight: 700;}
#collect .bx .tree_area{margin: 0 auto 30px; font-size: 44px;padding: 20px 0;}
#collect .bx .tree_area small{padding: 15px 0 0; font-size: 20px;line-height: 1.4;}
#collect .bx .tree_area .ill{left: -70px;top: -72px;width: 232px;}
#collect .bx .tree_copy{margin-bottom: 3.2vw;font-size: 32px;line-height: 1.43;}
#collect .bx .tree_txt{margin-bottom: 30px;padding: 0 20px;font-size: 24px;line-height: 1.5;}
#collect .bx .tree_txt span{font-size: 16px;padding: 20px 0 0;}
#collect .bx .tree_txt small{font-size: 18px;margin-top: 15px;}
#collect .bx .tree_sponsor{margin-top: 20px;font-size: 16px;}
#collect .bx .tree_btn_bosyu{width: 320px;}
#collect .bx .tree_btn_bosyu a{height: 40px;}
#collect .bx .tree_btn_bosyu a span{font-size: 18px;background-size: 20px auto;padding: 0 32px 0 0;}
#collect .bx .tree_btn .ill01{left: -164px;bottom: -10px;width: 240px;}
#collect .bx .tree_btn .ill02{right: -148px;bottom: -22px;width: 200px;}

#collect .bx .feeling_heart_tit{margin-bottom: 3.2vw;width: 100%;}
#collect .bx.tag{padding-bottom: 0;}
#collect .bx .thanks_tag_tit{padding: 4.533vw 0 4.2vw; width: 100%;color: #fff;font-size: 4.533vw;font-weight: 500;line-height: 6.133vw;text-align: center;background: #CF2C37;}
#collect .bx .thanks_tag_bx{padding: 3.6vw 3.2vw 0; background: #FEE3EC;}
#collect .bx .thanks_tag_bx .tag_img{margin: 0 auto 8.8vw;width: 83.333vw;}
#collect .bx .thanks_tag_bx .special_favor{padding: 6.666vw 0 0; background: #fff;position: relative;}
#collect .bx .thanks_tag_bx .special_favor .favor_tit{margin: 0 auto;padding: 1.866vw 0;width: 53.333vw;color: #fff; font-size: 4.533vw;font-weight: 500; line-height: 1;text-align: center;background: #203165;position: absolute;left: 0;right: 0;top: -3.733vw;border-radius: 50px;}
#collect .bx .thanks_tag_bx .special_favor .favor_copy{margin-bottom: 3.333vw; color: #203165; font-size: 6.133vw;font-weight: 500;line-height: 1;text-align: center;}
#collect .bx .thanks_tag_bx .special_favor .favor_img{margin: 0 auto 5vw;width: 77.6vw;}
#collect .bx .thanks_tag_bx .special_favor .favor_img img{width: 100%;}
#collect .bx .thanks_tag_bx .special_favor .favor_btn_area{padding: 3.6vw 2.933vw; width: 100%;background: #CF2C37;box-sizing: border-box;}
#collect .bx .thanks_tag_bx .special_favor .favor_btn_area .favor_btn{width: 100%;background: #fff;border-radius: 50px;}
#collect .bx .thanks_tag_bx .special_favor .favor_btn_area .favor_btn a{display: block;padding: 2.666vw 0; color: #CF2C37;font-size: 6.933vw;font-weight: 500;line-height: 1;text-align: center;background: url("../images/common/ico_btn.png") no-repeat right 3.2vw center;background-size: 7vw auto;}
#collect .bx .thanks_tag_bx .special_favor .favor_btn_area .favor_btn a:hover{}
#collect .bx .message_tree_img span{font-size: 14px;padding: 0 0 0 20px !important;}

/*20241022追記*/
#collect .bx .tree_btn{width: 534px;margin: 15px auto 0;}
#collect .bx .tree_btn dt{height: 80px;font-size: 30px;}
#collect .bx .tree_btn dt p span{font-size: 22px;}
#collect .bx .tree_btn dd .tree_btn_list{padding: 20px 30px;}
#collect .bx .tree_btn dd .tree_btn_list li{font-size: 21px;line-height: 34px;}

#collect .area_map{padding: 0 0 50px;}
#collect .area_map .map_note{font-size: 24px;margin: 10px 0 30px;}

/* popup */
.popup-open {width: 320px;height: 40px;}
.popup-open span{font-size: 18px;background-size: 20px auto;padding: 0 32px 0 0;}
.popup {overflow-y: scroll;}
.popup__img {top: 12%;left: 25%;width: 50%;height: 100%;}
.popup__img_inner img {width: 100%;}
}