/* ==================================

フッター

=====================================*/
footer{
    &.layout-footer--2026{

        .layout-footer__sp-only{
            @media screen and (min-width: 1000px){
                display: none;
            }
            @media screen and (min-width: 681px) and (max-width:999px){
                display: none;
            }
            @media screen and (max-width:680px){
                display: block;
            }
        }

        .layout-footer__tab-only{
            @media screen and (min-width: 1000px){
                display: none;
            }
            @media screen and (min-width: 681px) and (max-width:999px){
                display: block;
            }
            @media screen and (max-width:680px){
                display: none;
            }
        }

        .layout-footer__pc-only{
            @media screen and (min-width: 1000px){
                display: block;
            }
            @media screen and (min-width: 681px) and (max-width:999px){
                display: none;
            }
            @media screen and (max-width:680px){
                display: none;
            }
        }

        /* ----------------------------------
           共通パーツ
        -----------------------------------*/
        .layout-footer__button-text{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding-block: min(calc((2/375)*100vw),2px);
            padding-inline: min(calc((4/375)*100vw),4px);
            border: solid 1px #D9D9D9;
            border-radius: 4px;
            font-size: min(calc((14/375)*100vw),14px);
            font-weight: bold;
            line-height: calc((20/14)*100%);
            span{
                font-size: min(calc((12/375)*100vw),12px);
                line-height: calc((20/12)*100%);
            }
        }


        /* ----------------------------------
           フッターインフォメーション
        -----------------------------------*/
        .layout-footer__information{
            padding-block: min(calc((60/375)*100vw),60px);
            padding-inline: min(calc((17/375)*100vw),17px);
            background: #B3C2C4;

            .footer-information-block{

                &+.footer-information-block-wrap{
                    width: fit-content;
                    border-top: solid 1px #FFFFFF;
                    padding-block-start: min(calc((32/375)*100vw),32px);
                    margin-block-start: min(calc((32/375)*100vw),32px);
                    @media screen and (min-width: 1000px){
                        width: 100%;
                        max-width: 960px;
                        margin-inline: auto;
                    }
                }

                @media screen and (min-width: 1000px){
                    max-width: 960px;
                    padding-block: 24px;
                    padding-inline: 24px;
                    margin-inline: auto;
                    background: #E1DBD6;
                    border-radius: 20px;

                    &.block-01{
                        display: grid;
                        grid-template-columns: 510px 1fr;
                        gap: 0 24px;

                        [data-item="site-service"]{
                            grid-column: 1/2;
                            grid-row: 1/3;
                        }
                        [data-item="gift-service"]{
                            grid-column: 2/3;
                            grid-row: 1/2;
                            margin-block-start: initial;
                        }
                        [data-item="delivery-shipping"]{
                            grid-column: 2/3;
                            grid-row: 2/3;
                            align-self: end;
                            margin-block-start: initial !important;
                        }
                    }
                }
                @media screen and (min-width: 681px) and (max-width:999px){
                    max-width: 700px;
                    padding-block: 24px;
                    padding-inline: 24px;
                    margin-inline: auto;
                    background: #E1DBD6;
                    border-radius: 20px;
                }

                .footer-information-block__item{

                    @media screen and (min-width: 681px) and (max-width:999px){
                        max-width: 560px;
                        padding-block: min(calc((12/768)*100vw),24px);
                        padding-inline: min(calc((30/768)*100vw),30px);
                        margin-inline: auto;
                        background: #ffffff;
                    }

                    &+.footer-information-block__item{
                        margin-block-start: min(calc((24/375)*100vw),24px);
                    }
                    
                    /* 見出し共通 */
                    .footer-information-block__item-heading{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-wrap: wrap;
                        margin-block-end: min(calc((12/375)*100vw),12px);

                        .footer-information-block__item-heading-icon{
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                                display: block;
                            }
                        }

                        h2{
                            font-size: min(calc((18/375)*100vw),18px);
                            font-weight: bold;
                            letter-spacing: 10%;
                            line-height: calc((24/18)*100%);
                            @media screen and (min-width: 1000px){
                                font-size: 16px;
                                line-height: calc((24/16)*100%);
                            }
                        }

                        @media screen and (min-width: 1000px){
                            gap: 8px;
                            margin-block-end: 6px;

                        }
                    }
                    .footer-information-block__item-heading-sub{
                        display: block;
                        width: 100%;
                        font-size: min(calc((12/375)*100vw),12px);
                        font-weight: normal;
                        line-height: calc((20/12)*100%);

                        @media screen and (min-width: 1000px){
                            width: initial;
                        }
                    }

                    /* 白背景カード共通 */
                    .footer-information-block__item-content{
                        padding-block: min(calc((12/375)*100vw),12px) min(calc((16/375)*100vw),16px);
                        padding-inline: min(calc((20/375)*100vw),20px);
                        background: #FFFFFF;
                        border-radius: 10px;

                        dl{
                            dt{
                                margin-block-end: min(calc((4/375)*100vw),4px);
                                color: #4A535C;
                                font-size: min(calc((16/375)*100vw),16px);
                                font-weight: bold;
                                line-height: calc((20/16)*100%);
                                @media screen and (min-width: 1000px){
                                    margin-block-end: 6px;
                                    font-size: 14px;
                                    line-height: calc((20/14)*100%);
                                }
                            }
                            &+dl{
                                margin-block-start: min(calc((16/375)*100vw),16px);
                            }
                        }
                    }


                    /* ----------------------------------
                       1. お支払い方法 (site-service)
                    -----------------------------------*/
                    &[data-item="site-service"]{
                        .footer-information-block__item-heading{
                            .footer-information-block__item-heading-icon{
                                width: min(calc((28/375)*100vw),28px);
                                height: min(calc((20/375)*100vw),20px);
                            }
                        }
                        .site-service__content{
                            /* ロゴリスト枠共通 */
                            .site-service__list{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                padding-block: min(calc((8/375)*100vw),8px);
                                padding-inline: min(calc((24/375)*100vw),24px);
                                border: solid 1px #D9D9D9;
                                border-radius: 4px;
                                @media screen and (min-width:1000px){
                                    border-radius: 10px;
                                }
                            }

                            /* クレジットカード */
                            .site-service__credit{
                                .site-service__list{
                                    padding-inline: min(calc((10/375)*100vw),10px);
                                    li{
                                        height: min(calc((28/375)*100vw),28px);
                                        img{
                                            width: auto;
                                            height: 100%;
                                        }
                                    }

                                    @media screen and (min-width: 1000px){
                                        flex-wrap: wrap;
                                        justify-content: initial;
                                        padding: 16px;
                                        gap: 8px;
                                        li{
                                            height: 36px;
                                        }
                                    }
                                }
                            }

                            /* スマホ・ID決済 */
                            .site-service__pay{
                                .site-service__list{
                                    li{
                                        height: min(calc((17/375)*100vw),17px);
                                        img{
                                            width: auto;
                                            height: 100%;
                                        }
                                    }

                                    @media screen and (min-width: 1000px){
                                        flex-wrap: wrap;
                                        justify-content: initial;
                                        padding: 24px 16px;
                                        gap: 20px 8px;
                                        li{
                                            height: 20px;
                                        }
                                    }
                                }
                            }

                            /* その他 */
                            .site-service__other{
                                dd{
                                    .layout-footer__button-text{
                                        &+.layout-footer__button-text{
                                            margin-block-start: min(calc((6/375)*100vw),6px);
                                        }
                                    }
                                }
                            }

                            /* PC表示レイアウト */
                            @media screen and (min-width: 1000px){
                                display: grid;
                                grid-template-columns: repeat(2,calc((100% - 12px)/2));
                                gap: 12px;
                                padding-inline: 30px;
                                dl{
                                    margin-block-start: initial;
                                }
                                .site-service__credit{
                                    grid-column: 1/2;
                                    grid-row: 1/2;
                                }
                                .site-service__pay{
                                    grid-column: 2/3;
                                    grid-row: 1/2;
                                }
                                .site-service__npato{
                                    grid-column: 1/3;
                                    grid-row: 2/3;
                                }
                                .site-service__other{
                                    grid-column: 1/3;
                                    grid-row: 3/4;
                                    display: flex;
                                    justify-content: center;
                                    gap: 12px;
                                    dt{
                                        align-self: center;
                                        margin: initial;
                                    }
                                    dd{
                                        display: flex;
                                        gap: 12px;
                                        .layout-footer__button-text + .layout-footer__button-text{
                                            margin-block-start: initial;
                                        }
                                    }
                                }
                            }
                        }
                    } 


                    /* ----------------------------------
                       2. 無料のギフトサービス (gift-service)
                    -----------------------------------*/
                    &[data-item="gift-service"]{
                        @media screen and (min-width: 1000px){
                            margin-block-start: initial;
                        }
                        
                        .footer-information-block__item-heading{
                            .footer-information-block__item-heading-icon{
                                width: min(calc((24/375)*100vw),24px);
                                height: min(calc((24/375)*100vw),24px);
                            }
                        }
                        .gift-service__content{
                            @media screen and (min-width:1000px){
                                padding-block: 12px;
                                padding-inline: 16px;   
                            }


                            .gift-service__column{
                                display: grid;
                                grid-template-columns: repeat(3, min(calc((90/375)*100vw),90px));
                                grid-template-rows: auto auto;
                                justify-content: space-between;
                                @media screen and (min-width: 1000px){
                                    grid-template-columns: repeat(3, minmax(100px, 1fr));
                                    gap: 4px;
                                }

                                dl{
                                    display: grid;
                                    grid-template-rows: subgrid;
                                    grid-row: span 2;
                                    &+dl{
                                        margin-block-start: initial;
                                    }
                                    dt{
                                        align-self: center;
                                    }
                                }

                            }

                            dl{
                                dt{
                                    font-size: min(calc((14/375)*100vw),14px);
                                    line-height: calc((16/14)*100%);
                                    text-align: center;
                                    @media screen and (min-width:1000px){
                                        font-size: 12px;
                                        margin: initial;
                                    }
                                }
                                dd{
                                    img{
                                        width: 100%;
                                        height: auto;
                                        display: block;
                                    }
                                }
                            }

                            .gift-service__noshi-mc{
                                dt{
                                    @media screen and (min-width:1000px){
                                        font-size: 10px;
                                    }
                                }
                            }

                            .gift-service__text{
                                margin-block-start: min(calc((8/375)*100vw),8px);
                                font-size: min(calc((14/375)*100vw),14px);
                                line-height: calc((20/14)*100%);
                                @media screen and (min-width:1000px){
                                    font-size: 12px;
                                    line-height: calc((20/12)*100%);
                                }
                            }
                        }
                    }


                    /* ----------------------------------
                       3. 配送・送料について (delivery-shipping)
                    -----------------------------------*/
                    &[data-item="delivery-shipping"]{
                        .footer-information-block__item-heading{
                            .footer-information-block__item-heading-icon{
                                width: min(calc((26/375)*100vw),26px);
                                height: min(calc((24/375)*100vw),24px);
                            }
                        }
                        .delivery-shipping__content{

                            @media screen and (min-width:1000px){
                                padding-inline: 8px;
                            }

                            .delivery-shipping__list{
                                li{
                                    font-size: min(calc((14/375)*100vw),14px);
                                    line-height: calc((20/14)*100%);

                                    @media screen and (min-width:1000px){
                                        font-size: 12px;
                                        line-height: calc((20/12)*100%);
                                    }

                                    span{
                                        color: #CE0031;
                                        font-size: min(calc((16/375)*100vw),16px);
                                        font-weight: bold;
                                        line-height: calc((16/20)*100%);
                                        @media screen and (min-width:1000px){
                                            font-size: 14px;
                                            line-height: calc((20/14)*100%);
                                        }
                                    }
                                    strong{
                                        color: #CE0031;
                                        font-size: min(calc((24/375)*100vw),24px);
                                        font-weight: bold;
                                        line-height: calc((24/16)*100%);
                                        @media screen and (min-width:1000px){
                                            line-height: 1;
                                        }
                                    }
                                    sub{
                                        font-size: min(calc((12/375)*100vw),12px);
                                        line-height: calc((20/12)*100%);
                                        letter-spacing: -5%;
                                        bottom: initial;
                                        @media screen and (min-width:1000px){
                                            font-size: 10px;
                                            line-height: calc((16/10)*100%);
                                        }
                                    }
                                }
                            }
                        }
                    }


                    /* ----------------------------------
                       4. お問い合わせ (contact)
                    -----------------------------------*/
                    &[data-item="contact"]{
                        .contact__heading{
                            align-items: center;
                            @media screen and (min-width:1000px){
                                gap: 16px;
                            }

                            h2{
                                margin-block-end: min(calc((8/375)*100vw),8px);
                                @media screen and (min-width:1000px){
                                    margin-block-end: initial;
                                }
                            }
                            .contact__text{
                                margin-block-end: min(calc((20/375)*100vw),20px);
                                font-size: min(calc((14/375)*100vw),14px);
                                line-height: calc((20/14)*100%);
                                @media screen and (min-width:1000px){
                                    margin-block-end: initial;
                                    font-size: 12px;
                                    line-height: calc((20/12)*100%);
                                }
                            }
                        }
                        
                        .contact__content{
                            padding: initial;
                            background: initial;
                            @media screen and (min-width:1000px){
                                display: flex;
                                gap: 24px;
                                max-width: 644px;
                                margin-inline: auto;
                            }


                            p+p{
                                margin-block-start: min(calc((16/375)*100vw),16px);
                                @media screen and (min-width:1000px){
                                    margin-block-start: initial;
                                }
                            }
                        }

                        /* お問い合わせボタン（白） */
                        .contact__button--white{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            padding-block: min(calc((12/375)*100vw),12px);
                            padding-inline: min(calc((28/375)*100vw),28px);
                            background: #ffffff;
                            border-radius: 8px;
                            color: #000000;
                            position: relative;

                            >span{
                                display: flex;
                                align-items: center;
                                gap: 0 min(calc((32/375)*100vw),32px);
                                width: 100%;
                                font-size: min(calc((16/375)*100vw),16px);
                                line-height: calc((20/16)*100%);

                                &::before{
                                    content: " ";
                                    display: block;
                                    width: min(calc((28/375)*100vw),28px);
                                    height: min(calc((28/375)*100vw),28px);
                                }
                            }

                            &.--arrow{
                                padding-inline: min(calc((28/375)*100vw),28px) min(calc((76/375)*100vw),76px);
                                &::after{
                                    content: " ";
                                    display: block;
                                    width: 0.25em;
                                    height: 0.25em;
                                    border-top: solid 1px #4A535C;
                                    border-right: solid 1px #4A535C;
                                    position: absolute;
                                    right: min(calc((40/375)*100vw),40px);
                                    bottom: 50%;
                                    transform: rotate(45deg) translateY(50%);
                                }
                            }

                            &.--contact{
                                >span::before{
                                    background: url(https://hoshi.itembox.cloud/item/images/footer/04_mail.webp);
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }
                            }

                            &.--tel{
                                >span{
                                    justify-content: space-between;
                                    gap: initial;
                                    font-size: min(calc((22/375)*100vw),22px);
                                    line-height: calc((20/22)*100%);
                                }
                                >span::before{
                                    background: url(https://hoshi.itembox.cloud/item/images/footer/04_tel.webp);
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }
                                .tel-time{
                                    padding-block: min(calc((2/375)*100vw),2px);
                                    padding-inline: min(calc((4/375)*100vw),4px);
                                    border: solid 1px #D9D9D9;
                                    border-radius: 4px;
                                    font-size: min(calc((12/375)*100vw),12px);
                                    line-height: calc((16/12)*100%);
                                }
                            }
                        }

                        /* お問い合わせボタン（黒・よくあるご質問） */
                        .contact__button--black{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            padding-block: min(calc((12/375)*100vw),12px);
                            padding-inline: min(calc((28/375)*100vw),28px);
                            background: #4A535C;
                            border-radius: 8px;
                            color: #ffffff;
                            position: relative;

                            >span{
                                display: flex;
                                align-items: center;
                                gap: 0 min(calc((32/375)*100vw),32px);
                                width: 100%;
                                font-size: min(calc((16/375)*100vw),16px);
                                font-weight: normal;
                                line-height: calc((20/16)*100%);

                                &::before{
                                    content: " ";
                                    display: block;
                                    width: min(calc((28/375)*100vw),28px);
                                    height: min(calc((28/375)*100vw),28px);
                                }
                            }

                            &.--inline{
                                display: inline-flex;
                                width: initial;
                                padding-block: 0.14em;
                                padding-inline: 0.5em;
                                border-radius: 4px;
                                >span{
                                    display: inline-flex;
                                    gap: initial;
                                    width: initial;
                                    font-size: inherit;
                                    line-height: inherit;
                                    &::before{
                                        width: 1em;
                                        height: 1em;
                                    }
                                }
                            }

                            &.--arrow{
                                padding-inline: min(calc((28/375)*100vw),28px) min(calc((76/375)*100vw),76px);
                                &::after{
                                    content: " ";
                                    display: block;
                                    width: 0.25em;
                                    height: 0.25em;
                                    border-top: solid 1px #ffffff;
                                    border-right: solid 1px #ffffff;
                                    position: absolute;
                                    right: min(calc((40/375)*100vw),40px);
                                    bottom: 50%;
                                    transform: rotate(45deg) translateY(50%);
                                }
                            }

                            &.--question{
                                >span::before{
                                    background: url(https://hoshi.itembox.cloud/item/images/footer/04_question.webp);
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }
                            }
                        }
                    }

                }
            }
        }


        /* ----------------------------------
           フッターサイトマップ
        -----------------------------------*/
        .layout-footer__sitemap{
            background: #4A535C;    
            color: #ffffff;

            @media screen and (min-width:1000px){
                .layout-footer__sitemap__inner{
                    display: grid;
                    grid-template-columns: 1fr 264px;
                    gap: 24px;
                    max-width: 960px;
                    padding-inline: 24px;
                    margin-inline: auto;
                }
            }

            .footer-sitemap{
                @media screen and (min-width:1000px){
                    grid-column: 1/2;
                    grid-row: 1/2;
                }
                .footer-sitemap__list{
                    display: grid;
                    grid-template-columns: repeat(2,1fr);
                    border-bottom: solid 1px #ffffff;
                    @media screen and (min-width:1000px){
                        grid-template-columns: repeat(3,1fr);
                        border-bottom: none;
                    }

                    li{
                        &:not(&:nth-child(1),&:nth-child(2)){
                            border-top: solid 1px #ffffff;
                            @media screen and (min-width:1000px){
                                border-top: none;
                            }
                        }
                        &:nth-child(2n){
                            border-inline-start: solid 1px #ffffff;
                            @media screen and (min-width:1000px){
                                border-inline-start: none;
                            }
                        }
                        a{
                            display: flex;
                            align-items: center;
                            padding-block: min(calc((15/375)*100vw),15px);
                            padding-inline: min(calc((12/375)*100vw),12px) min(calc((27/375)*100vw),27px);
                            color: #ffffff;
                            font-size: min(calc((14/375)*100vw),14px);
                            line-height: calc((30/14)*100%);
                            position: relative;
                            &::after{
                                content: " ";
                                display: block;
                                width: 0.28em;
                                height: 0.28em;
                                border-top: solid 1px #ffffff;
                                border-right: solid 1px #ffffff;
                                position: absolute;
                                bottom: 50%;
                                right: min(calc((23/375)*100vw),23px);
                                transform: translateY(50%) rotate(45deg);
                            }
                        }

                        @media screen and (min-width:1000px){
                            border-right: solid 1px #ffffff;
                            &.footer-sitemap__list-0101{
                                grid-column: 1/2;
                                grid-row: 1/2;
                            }
                            &.footer-sitemap__list-0102{
                                grid-column: 1/2;
                                grid-row: 2/3;
                            }
                            &.footer-sitemap__list-0103{
                                grid-column: 1/2;
                                grid-row: 3/4;
                            }
                            &.footer-sitemap__list-0104{
                                grid-column: 1/2;
                                grid-row: 4/5;
                            }
                            &.footer-sitemap__list-0201{
                                grid-column: 2/3;
                                grid-row: 1/2;
                            }
                            &.footer-sitemap__list-0202{
                                grid-column: 2/3;
                                grid-row: 2/3;
                            }
                            &.footer-sitemap__list-0203{
                                grid-column: 2/3;
                                grid-row: 3/4;
                            }
                            &.footer-sitemap__list-0301{
                                grid-column: 3/4;
                                grid-row: 1/2;
                            }
                            &.footer-sitemap__list-0302{
                                grid-column: 3/4;
                                grid-row: 2/3;
                            }
                            &.footer-sitemap__list-0303{
                                grid-column: 3/4;
                                grid-row: 3/4;
                            }
                        }
                    }
                }
            }

            .footer-banner{
                padding-inline: min(calc((23/375)*100vw),23px);
                margin-block-start: min(calc((32/375)*100vw),32px);
                @media screen and (min-width:1000px){
                    grid-column: 2/3;
                    grid-row: 1/2;
                    padding-inline: initial;
                    margin-block-start: initial;
                }
            }

            .footer-sns{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-inline: min(calc((23/375)*100vw),23px);
                margin-block-start: min(calc((24/375)*100vw),24px);
                @media screen and (min-width:1000px){
                    grid-column: 1/3;
                    grid-row: 2/3;
                }
                >p{
                    font-size: min(calc((12/375)*100vw),12px);
                    line-height: calc((16/12)*100%);
                }
                a{
                    display: flex;
                    align-items: center;
                    gap: 0 min(calc((4/375)*100vw),4px);
                    color: #ffffff;
                    font-size: min(calc((12/375)*100vw),12px);
                    font-weight: bold;
                    line-height: calc((16/12)*100%);
                    img{
                        width: min(calc((30/375)*100vw),30px);
                        height: min(calc((30/375)*100vw),30px);
                    }
                }
            }
        }


        /* ----------------------------------
           コピーライト
        -----------------------------------*/
        .layout-footer__copyright{
            padding-block: min(calc((32/375)*100vw),32px) min(calc((40/375)*100vw),40px);
            padding-inline: min(calc((23/375)*100vw),23px);
            background: #4A535C;
            color: #D9D9D9;
            font-size: min(calc((12/375)*100vw),12px);
            line-height: calc((16/12)*100%);
            text-align: center;
            @media screen and (min-width:1000px){
                grid-column: 1/3;
                grid-row: 3/4;
            }
        }

    }
}