.l-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3.5rem;
}

.l-footer__items,
.l-footer__items_mourning,
.l-footer__items_moving {
    display: flex;
    font-size: .1rem;
    text-align: center;
    overflow-x: scroll;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.l-footer__items::-webkit-scrollbar {
    display: none;
}

@media screen and (min-width: 640px) {
    .l-footer {
        width: calc(100% - 330px);
        padding: 0 1rem;
    }
    .l-footer__items {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .l-footer__items_no_stamp {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }   
    .l-footer__items_no_image {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .l-footer__items_no_stamp.l-footer__items_no_image {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

}

/*** フッター左矢印 ***/
.l-footer__leftArrow {
    width: 20px;
    height: 100%;
    background-color: #00C2FF;
    padding-top: 5rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.l-footer__rightArrow {
    width: 20px;
    height: 100%;
    background-color: #00C2FF;
    padding-top: 5rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.l-footer__arrow::before {
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #FFF;
    z-index: 2;
}

.l-footer__arrow::after {
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #FFF;
    z-index: 2;
}

@media screen and (min-width: 640px) {
    .l-footer__arrow--color::before {
        display: none;
    }
    
    .l-footer__arrow--color::after {
        display: none;
    }
    
    .l-footer__arrow::before {
        display: none;
    }
    
    .l-footer__arrow::after {
        display: none;
    }
}

/*** footerアイコン / footerエリアの背景色 ***/
.l-footer__icon {
    width: 100%;
    height: 100%;
    position: relative;
}
.l-footer__icon::after {
    font-size: .7rem;
    font-weight: bold;
}

.l-footer__icon.is-colorActive {
    color: #FFF;
}

.l-footer__icon::after {
    position: relative;
    top: calc(75% - 10px);
}

/*** スタイル ***/
.l-footer__icon.l-footer__icon--style {
    background: url(/images/icon/footer/style_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--style::after {
    content: 'レイアウト';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--style.is-colorActive {
    background: url(/images/icon/footer/style_icon_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}

/*** テキスト追加 ***/
.l-footer__icon.l-footer__icon--addText {
    background: url(/images/icon/footer/text_add_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--addText::after {
    content: 'テキスト追加';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--addText.is-colorActive {
    background: url(/images/icon/footer/text_add_icon_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}

/*** 差出人追加 ***/
.l-footer__icon.l-footer__icon--senderList {
    background: url(/images/icon/footer/sender_add_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--senderList::after {
    content: '差出人追加';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon--senderList.is-reActive {
    background-color: #CCC;
}

/*** 画像配置 ***/
.l-footer__icon.l-footer__icon--arrangeImage {
    background: url(/images/icon/footer/img_position_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--arrangeImage::after {
    content: '画像配置';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--arrangeImage.is-colorActive {
    background: url(/images/icon/footer/img_position_icon_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}

/*** スタンプ ***/
.l-footer__icon.l-footer__icon--stamp {
    background: url(/images/icon/footer/stamp_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--stamp::after {
    content: 'スタンプ';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--stamp.is-colorActive {
    background: url(/images/icon/footer/stamp_icon_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}

/*** 一時保存 ***/
.l-footer__icon.l-footer__icon--tmpSave {
    background: url(/images/icon/footer/temporary_saving_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--tmpSave::after {
    content: '一時保存';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--tmpSave.is-colorActive {
    background: url(/images/icon/footer/temporary_saving_icon_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}

/*** チュートリアル ***/
.l-footer__icon.l-footer__icon--tutorial {
    background: url(/images/icon/footer/tutorial_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--tutorial::after {
    content: 'ガイド';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--tutorial.is-colorActive {
    background: url(/images/icon/footer/tutorial_icon_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}

/* ** 購入に進む **/
.l-footer__icon.l-footer__icon--purchase {
    background: url(/images/icon/footer/payment_icon.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--purchase::after {
    content: '購入に進む';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--purchase.is-colorActive {
    background: url(/images/icon/footer/payment_icon_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}

/*** はがきの台紙選択 ***/
.l-footer__icon.l-footer__icon--paper_select {
    background: url(/images/icon/footer/paper_select.svg) 50% 30%;
    background-repeat: no-repeat;
}

.l-footer__icon.l-footer__icon--paper_select::after {
    content: '宛名のデザイン';
    position: absolute;
    left: 0;
    right: 0;
}

.l-footer__icon.l-footer__icon--paper_select.is-colorActive {
    background: url(/images/icon/footer/paper_select_active.svg) 50% 30% #FFA200;
    background-repeat: no-repeat;
}