@charset "utf-8";

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.bg_white {
    background: #fff;
}
.giftContainer, .container03 {
    position: relative;
    overflow: hidden;
}
.bg_donut_area::after {
    content: '';
    display: block;
    position: absolute;
    top: 11%;
    right: -6.25%;
    width: 400px;
    height: 400px;
    background: url('/common_2022/images/bg/img_donut_ill_05.png') no-repeat right top;
    background-size: 100%;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .bg_donut_area::after {
        display: none;
    }
}
.bg_donut_area02::after {
    content: '';
    display: block;
    position: absolute;
    top: 175px;
    left: -6.25%;
    width: 400px;
    height: 400px;
    background: url('/common_2022/images/bg/img_donut_ill_03.png') no-repeat right top;
    background-size: 100%;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .bg_donut_area02::after {
        display: none;
    }
}
.bg_donut_area03::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: -6.25%;
    width: 400px;
    height: 400px;
    background: url('/common_2022/images/bg/img_donut_ill_09.png') no-repeat right top;
    background-size: 100%;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .bg_donut_area03::after {
        display: none;
    }
}
.gift_inner {
    max-width: 1120px;
    margin: 0 auto;
}
.gift {
    padding: 50px 0 60px;
    background: #FFF7F1 url('/gift/images/bg.png') no-repeat top center;
    border-radius: 40px;
}
@media screen and (max-width: 767px) {
    .gift {
        padding: 40px 0 35px;
        background: #FFF7F1 url('/gift/images/bg_sp.png') no-repeat top center;
        background-size: 100%;
        border-radius: 20px;
    }
}
.bg_01 {
    padding: 50px 60px 60px;
    background: #FFF7F1;
    border-radius: 40px;
}
@media screen and (max-width: 767px) {
    .bg_01 {
        padding: 40px 25px 35px;
    }
}
.text_container01 {
    padding: 0 60px;
}
@media screen and (max-width: 767px) {
    .text_container01 {
        padding: 0 25px;
    }
}
.img01 {
    text-align: center;
}
@media screen and (max-width: 767px) {
    .img01 {
        padding: 0 7px;
    }
}
.img01 img {
    max-width: 646px;
    width: 100%;
}
.donut_list {
    margin: 0 -10px;
}
.donut_list img{
    width: 100%;
}
@media screen and (max-width: 767px) {
    .donut_list {
        margin: 0 -5px;
    } 
}
.donut_list li {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding: 0 15px;
}
@media screen and (max-width: 767px) {
    .donut_list li {
        width: 50%;
        padding: 25px 3.1% 0;
    }
}
.container_01 .c_ttl_bold_03 {
    margin-top: 0;
}
.logo_01 {
    position: relative;
}
.list_01 li {
    float: left;
    box-sizing: border-box;
}
.list_01 li:first-child {
    width: 10.8%;
}
@media screen and (max-width: 768px) {
    .list_01 li:first-child {
        width: 22%;
    }
}
.list_01 li:first-child img {
    vertical-align: bottom;
}
.list_01 li:last-child {
    width: 89.2%;
    padding-left: 38px;
}
@media screen and (max-width: 768px) {
    .list_01 li:last-child {
        width: 78%;
        padding-left: 25px;
    }
}
.btn_01 {
    min-width: 240px !important;
}
.bg_grey {
    background: #F6F6F6;
}
.btn_02 {
    background: #fff;
    display: block;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
}
@media screen and (max-width: 767px) {
    .btn_02 {
        padding: 13px 27px;
    }
}
.btn_02::after {
    right: 27px !important;
}
.acc_content {
    background: #fff;
    border-radius: 10px;
}
.border_none {
    border: none !important;
}
.container_01 {
    margin: 0 -40px -40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
@media screen and (max-width: 767px) {
    .box_inner01 {
        padding: 9px;
    }
    .box_inner02 {
        padding: 20px;
    }
    .container_01 {
        margin: 0 -25px -25px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}
.head_01 {
    left: 0 !important;
}
.head_01 .ttl {
    min-height: 40px;
    padding: 0.5em 1.12em;
}
.stepList li {
    float: left;
    box-sizing: border-box;
}
.stepList li:first-child {
    width: 65%;
}
.stepList li:last-child {
    width: 35%;
}
.step_flex {
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 767px) {
    .step_flex {
        flex-direction: row;
        justify-content: space-between;
    }
    .step_flex .flex_01 {
        order: 2;
        flex-shrink: 0;
        padding-left: 25px;
    }
    .step_flex .flex_01 img {
        width: 50px;
    } 
}
.pc_border_left_dotted::after {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    height: 100%;
    width: 2px;
    background: url('/gift/images/dot_01.png') top center repeat-y;
    background-size: 100%;
}
@media screen and (max-width: 767px) {
    .pc_border_left_dotted::after, .pc_border_right_dotted::after {
        display: none;
    }
}
.pc_border_right_dotted::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: url('/gift/images/dot_01.png') top center repeat-y;
    background-size: 100%;
}
.border_bottom {
    border-bottom: 1px solid #ccc;
}
.sp_border_bottom_dotted {
    position: relative;
}
@media screen and (max-width: 767px) {
    .pc_border_right_dotted {
        border-right: none;
    }
    .sp_border_bottom_dotted::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 4px;
        width: 100%;
        background: url('/gift/images/dot_01_sp.png') repeat-x;
    } 
}
.item_01 img {
    margin: 0 auto;
    max-width: 95px;
    width: 100%;
}
.item_02 img, .item_03 img {
    margin: 0 auto;
    max-width: 83px;
    width: 100%;
}
.inst_flex {
    display: flex;
    justify-content: space-between;
}
.inst_01 {
    width: 66%;
}
.inst_02 {
    width: 34%;
}
.inst_01.step_col_a {
    width: 74%;
}
.inst_02.step_col_b {
    width: 26%;
}
@media screen and (max-width: 767px) {
    .inst_02 {
        flex-shrink: 0;
    }
    .inst_02 img {
        width: 69px;
    }
    .inst_01, .inst_02 {
        width: auto;
        align-self: flex-end;
    }
}
.modal_inner_01 {
    padding: 80px 15px 64px !important;
}
.modal_container_01 {
    margin: 0 auto;
}