.notifications {
    position:relative;
    height:210px;
    -webkit-transform-origin:left center;
    transform-origin:left center;
    margin-bottom:100px
}

.notifications:after {
    content:"";
    height:210px;
    width:calc(100% + 20px);
    position:absolute;
    bottom:-190px;
    left:50%;

    z-index:5;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%)
}
html[lang=ja] .notifications:after {
    height:240px;
    bottom:-240px
}
.notification {
    position:absolute;
    left:0;
    right:0;

    border-radius:4px;
    -webkit-box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
    box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
    padding:1.15em 1.5em;
    -webkit-transition:all .5s cubic-bezier(.645,.045,.355,1);
    transition:all .5s cubic-bezier(.645,.045,.355,1);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start;
    min-height:73px;
    overflow:hidden;
    z-index:10;
    font-size:15px
}
@media(min-width:880px) {
    .notification {
        font-size:15px
    }
}
.notification:nth-child(2) {
    -webkit-transform:translateY(100%) translateY(35px) scale(.96);
    transform:translateY(100%) translateY(35px) scale(.96);
    z-index:2
}
.notification:nth-child(3) {
    -webkit-transform:translateY(200%) translateY(40px) scale(.96);
    transform:translateY(200%) translateY(40px) scale(.96);
    z-index:3
}
.notification:nth-child(4) {
    -webkit-transform:translateY(300%) translateY(30px) scale(.96);
    transform:translateY(300%) translateY(30px) scale(.96);
    z-index:4
}
.notification:nth-child(5) {
    -webkit-transform:translateY(400%) translateY(40px) scale(.96);
    transform:translateY(400%) translateY(40px) scale(.96);
    z-index:5
}
.notification:after {
    content:"";
    position:absolute;
    right:0;
    top:0;

}
.notification--new {
    opacity:0;
    -webkit-transform:translateY(-60px) scale(.9);
    transform:translateY(-60px) scale(.9)
}
.notification__indicator-wrapper {
    display: block;
    width: 3.6em;
    height: 3.6em;

}
.notification__indicator-wrapper svg {
    width:100%;
    height:100%
}
.notification__indicator {
    display:block;
    -webkit-transition:all .5s cubic-bezier(.645,.045,.355,1);
    transition:all .5s cubic-bezier(.645,.045,.355,1)
}
.notification__indicator--gray {
    background-color:#b3d1ff;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width:100%;
    height:100%
}
.notification__timestamp {
    color:#6b7c93;
    margin:.2em 0 0
}
.notification__content {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    overflow:hidden
}
.notification__message,.notification__timestamp {
    position:relative;
    display:inline-block;
    font-size:13px;
    font-weight:500;
    -webkit-transition:all .5s cubic-bezier(.645,.045,.355,1);
    transition:all .5s cubic-bezier(.645,.045,.355,1);
    white-space:nowrap;
    line-height: 25px;
    left: 15%!important;
}
.notification__timestamp {
    color:#aab7c4;
    font-size:13px
}
.bg_f {
    background: var(--bs-ContentSection-footer)!important;
}
@media (max-width:880px) {
.di_p {display: none} }
.notification:nth-child(2),.notification:nth-child(3),.notification:nth-child(4) {
    -webkit-box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
    box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)
}
.notification:nth-child(2):after,.notification:nth-child(3):after,.notification:nth-child(4):after {
    opacity:1
}

.notification:nth-child(2) .notification__indicator--gray,.notification:nth-child(3) .notification__indicator--gray,.notification:nth-child(4) .notification__indicator--gray {
    opacity:.4;
    -webkit-filter:none;
    filter:none
}
 

.notification_2 {

    left: 0;
    right: 0;
    border-radius: 4px;
    -webkit-box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
    box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
    padding: 1.15em 1.5em;
    -webkit-transition: all .5s cubic-bezier(.645,.045,.355,1);
    transition: all .5s cubic-bezier(.645,.045,.355,1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    min-height: 193px;
    overflow: hidden;
    z-index: 10;
    font-size: 15px;

}


.pin2 {



    position: absolute;

    left: 50%;
    top: 50%;
    margin: -30px 0 0 -20px;


    z-index: 6;

}