@charset "UTF-8";
/*==============================================================================
1.選ばれる3つの理由
2.選べる収納サイズ
==============================================================================*/

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

	1.選ばれる3つの理由

==============================================================================================================================================================
============================================================================================================================================================*/
#reason{
    & .inner{
        padding: 0;
    }

    & h2{
        font-size: 2rem;
        line-height: 2;

        & span{
            padding: 0 40px;
            font-family: var(--font-sub);
        }

        & img{
            vertical-align: middle;

            &.reason-title_img-1{
                margin-top: 0.3em;
                margin-right: 4px;
                vertical-align: top;
            }
            &.reason-title_img-2{
                margin: 0 6px 0 4px;
                width: 18px;
            }
        }
    }

    /*======== 理由のリスト =========*/
    & .reason-list{
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 40px 0;

        & .reason-list_item{
            display: flex;
            flex-direction: column;

            /* 画像 */
            & .reason-list_img{
                position: relative;

                /* 白いグラデ */
                &::after{
                    content: "";
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: linear-gradient(
                        to bottom,
                        white 0%,
                        rgba(255, 255, 255, 0.5) 5%,
                        rgba(255, 255, 255, 0) 10%,
                        rgba(255, 255, 255, 0) 90%,
                        rgba(255, 255, 255, 0.5) 95%,
                        white 100%
                    );
                }
                & img{
                    width: 100%;
                }
            }

            /* テキスト */
            & .reason-list_text{
                margin: 20px auto 0;
                width: 80%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                text-align: center;

                & dt{
                    padding-left: 40px;
                    position: relative;
                    text-align: center;
                    font-size: 2rem;
                    font-weight: var(--weight-bold);

                    /* 文字背景 */
                    & span{
                        background-image: linear-gradient(transparent 40%, #f5e6a5 60%);
                    }

                    /* 文字横数字 */
                    &::before{
                        content: "";
                        width: 23px;
                        aspect-ratio: 24 / 43;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: 100% auto;
                    }
                }
                & dd{
                    margin-top: 20px;
                    font-size: 1.4rem;
                    text-align: center;
                }
            }
        }

        & .reason-list_item:nth-of-type(1) dt::before{
            background-image: url(../1_img/base/num-1.svg);
        }
        & .reason-list_item:nth-of-type(2) dt::before{
            background-image: url(../1_img/base/num-2.svg);
        }
        & .reason-list_item:nth-of-type(3) dt::before{
            background-image: url(../1_img/base/num-3.svg);
        }
        & .reason-list_item:nth-of-type(4) dt::before{
            background-image: url(../1_img/base/num-4.svg);
        }
    }
}
/*==============================================================================

	選ばれる3つの理由 PC

==============================================================================*/
@media all and (min-width: 769px) {
    #reason{
        & h2{
            font-size: 3.4rem;

            &.fukidashi-wrap {
                padding: 0 50px;
                
                & > span {
                    display: block;

                    &::before, 
                    &::after {
                        content: "";
                        width: 95px;
                    }
                }
            }

            & span{
                padding: 0 100px;
            }

            & img{

                &.reason-title_img-1{
                    margin-right: 10px;
                    width: 406px;
                }
                &.reason-title_img-2{
                    margin: 0 15px 5px 10px;
                    width: 35px;
                }
            }
        }

        /*======== 理由のリスト =========*/
        & .reason-list{
            margin-top: 80px;
            gap: 70px 0;

            & .reason-list_item{
                padding-left: 120px;
                position: relative;
                flex-direction: row;
                align-items: center;
                gap: 0 50px;
                
                /* 画像横数字 */
                &::before{
                    content: "";
                    width: 50px;
                    aspect-ratio: 24 / 43;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                }

                /* 画像 */
                & .reason-list_img{

                    /* 白いグラデ */
                    &::after{
                        content: none;
                    }
                }

                /* テキスト */
                & .reason-list_text{
                    margin: 0;
                    width: 100%;
                    text-align: left;

                    & dt{
                        padding-left: 0px;
                        font-size: 2.2rem;

                        /* 文字横数字 */
                        &::before{
                            content: none;
                        }
                    }
                    & dd{
                        margin-top: 15px;
                    }
                }
            }

            & .reason-list_item:nth-of-type(1)::before{
                background-image: url(../1_img/base/num-1.svg);
            }
            & .reason-list_item:nth-of-type(2)::before{
                background-image: url(../1_img/base/num-2.svg);
            }
            & .reason-list_item:nth-of-type(3)::before{
                background-image: url(../1_img/base/num-3.svg);
            }
            & .reason-list_item:nth-of-type(4)::before{
                background-image: url(../1_img/base/num-4.svg);
            }
        }
    }
}

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

	2.選べる収納サイズ

==============================================================================================================================================================
============================================================================================================================================================*/
#storage{
    padding: 80px 0 50px;
    background-color: var(--color-sub);
    clip-path: polygon(50% 0, 100% 60px, 100% 100%, 0 100%, 0 60px);

    & h2{
        margin-bottom: 5px;
    }

    /*======== intro =========*/
    & .storage-intro{
        text-align: center;
        font-size: 1.2rem;
    }

    /*======== catch =========*/
    & .catch{
        margin-top: 20px;
        text-align: center;

        & span{
            padding: 0 20px;
            display: inline-block;
            position: relative;
            font-size: 1.3rem;
            font-weight: var(--weight-bold);
            letter-spacing: 0.2em;

            &::before,
            &::after{
                content: "";
                width: 40px;
                height: 3px;
                position: absolute;
                bottom: 10px;
                background-image: url(../1_img/base/border-dotted.svg);
                background-repeat: repeat-x;
                background-size: auto 3px;
            }

            &::before{
                left: 0;
                transform: rotate(60deg);
                background-position: left center;
            }
            &::after{
                right: 0;
                transform: rotate(-60deg);
                background-position: right -3px center;
            }
        }
    }

    /*======== 収納タイプ全体 =========*/
    & .storage-type{
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 50px 0;
        
        & .storage-type_item{
            display: flex;
            flex-direction: column;
            gap: 30px 0;
        }
    }
    
    /*======== 収納タイプ個別 (figure) =========*/
    & .storage-type_item > figure{

        & figcaption{
            padding: 15px 20px;
            text-align: center;
            background-color: var(--color-accent);
            font-weight: var(--weight-bold);
            font-family: var(--font-sub);

            & h3{
                font-size: 1.8rem;
            }

            & p{
                font-size: 1.4rem;
            }
        }

        & img{
            width: 100%;
        }
    }

    /*======== 収納タイプ個別 (section) =========*/
    & .storage-type_item section{

        /* 説明文 */
        & .storage-desc{
            padding: 0 20px;
            text-align: center;

            & h4{
                font-family: var(--font-sub);
                font-size: 1.7rem;
                font-weight: var(--weight-bold);
            }
            
            & p{
                margin-top: 5px;
                font-size: 1.4rem;
            }
        }

        /* 入る荷物の量 */
        & .storage-size{
            margin-top: 30px;
            text-align: center;

            & .storage-size_text{
                display: flex;
                min-height: 60px;
                position: relative;
                z-index: 2;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                background-color: var(--color-font);
                font-family: var(--font-sub);
                font-weight: var(--weight-bold);
                font-size: 1.4rem;
                color: #fff;
                cursor: pointer;


                &::before,&::after{
                    content: "";
                    position: absolute;
                    aspect-ratio: 1 / 1;
                    transition: 500ms;
                }

                &::before{
                    width: 30px;
                    top: 50%;
                    right: 20px;
                    transform: translateY(-50%);
                    background-color: #fff;
                    border-radius: 100%;
                }

                &::after{
                    margin-top: -5px;
                    width: 10px;
                    top: 50%;
                    right: 30px;
                    border-top: 2px solid var(--color-main);
                    border-right: 2px solid var(--color-main);
                    transform: rotate(135deg);
                }

                &.open{
                    &::after{
                        transform: rotate(-45deg);
                    }
                }
            }

            /* こんなものの収納におすすめ */
            & .storage-example{
                margin-top: -5px;
                padding: 25px 20px 20px;
                display: none;
                position: relative;
                background-color: #fff;
                border-radius: 0 0 10px 10px;
                z-index: 1;

                & .img-list{
                    display: flex;
                    justify-content: center;
                    gap: 20px;
                }
                & .example-size_s{
                    margin-top: 15px;
                    font-size: 1rem;
                }

            }
        }
    }

}
/*==============================================================================

	選べる収納サイズ PC

==============================================================================*/
@media all and (min-width: 769px) {
    #storage{
        padding: 130px 0 150px;
        clip-path: polygon(50% 0, 100% 130px, 100% 100%, 0 100%, 0 130px);

        & h2{
            margin-bottom: 5px;
        }

        /*======== intro =========*/
        & .storage-intro{
            font-size: 1.8rem;
        }

        /*======== catch =========*/
        & .catch{
            margin-top: 40px;

            & span{
                padding: 0 100px;
                font-size: 2.6rem;

                &::before,
                &::after{
                    width: 104px;
                    height: 6px;
                    bottom: 40px;
                    background-size: auto 6px;
                }

                &::before{
                    left: -15px;
                    background-position: left center;
                }
                &::after{
                    right: -15px;
                    background-position: right -6px center;
                }
            }
        }

        /*======== 収納タイプ全体 =========*/
        & .storage-type{
            margin-top: 40px;
            gap: 90px 0;
            
            & .storage-type_item{
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: 0;
            }
        }
        
        /*======== 収納タイプ個別 (figure) =========*/
        & .storage-type_item > figure{
            width: 490px;

            & figcaption{
                padding: 15px 20px;

                & h3{
                    font-size: 3.4rem;
                }

                & p{
                    font-size: 1.8rem;
                }
            }
        }

        /*======== 収納タイプ個別 (section) =========*/
        & .storage-type_item section{
            width: 460px;

            /* 説明文 */
            & .storage-desc{
                padding: 0;

                & h4{
                    font-size: 2.4rem;
                    letter-spacing: 0.15em;
                }
                
                & p{
                    margin-top: 30px;
                    padding: 0 20px;
                    font-size: 1.4rem;
                    text-align: left;
                }
            }

            /* 入る荷物の量 */
            & .storage-size{
                margin-top: 30px;

                & .storage-size_text{
                    font-size: 1.6rem;
                    pointer-events: none;

                    &::before,&::after{
                        content: none;
                    }
                }

                /* こんなものの収納におすすめ */
                & .storage-example{
                    display: block;

                    & .img-list{
                        justify-content: center;
                        gap: 30px;
                    }
                    & .example-size_s{
                        font-size: 1.4rem;
                    }

                }
            }
        }
        
    }
}