@charset "UTF-8";

/*========All=========*/

section {
    height: 600px;
}

.inner {
    height: 100%;
  /*   display: flex; */
}

.about_item-blk,
.item-blk {
    height: 100%;
    display: flex;
}

/*セクションタイトル設定*/

h1 {
    font-size: 23px;
    color: #edecea;
    box-sizing: border-box;
    background-color: #323B60;
    width: 125px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 1.5px solid #edecea;
    outline-offset: -15px;
}

.title {

    margin: 40px 0;
}

.title-long {
    margin: 40px 0;
}

.title-long h1 {
    width: 190px;
}


.text {
    width: 50%;
    padding: 50px 0 90px 60px;
    box-sizing: border-box;
}

.content {
    margin-top: 30px;
}

/*右からフェードイン*/

.item-blk.active {
    animation: RightToLeft 2s;
}

@keyframes RightToLeft {
    0% {
        opacity: 0;
        transform: translateX(1500px)
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/*------当店について-----*/

#about .about-img {
    width: 50%;
    background: url(./images/store.jpg)no-repeat center center / cover;
}

/*------フローリスト-----*/

#florist .florist-img {
    width: 50%;
    background: url(./images/florist.jpg)no-repeat center right / cover;
}

#florist h2 {
    margin-bottom: 20px;
    font-weight: bold;
}

/*------マップ-----*/

#map {
    margin-bottom: 50px;
}

#map .map-img {
    width: 50%;
    background: url(./images/Map.jpg)no-repeat center center / cover;
}

#map .map-logo::before {
    content: url(./images/logo-name.svg);
}

#map .map-logo {
    width: 200px;
}

#map dl {
    display: flex;
}

#map dt {
    width: 15%;
    box-sizing: border-box;
    text-align: right;
}

#map dd {
    box-sizing: border-box;
    margin-left: 20px;
}


/*--------------------------------------
スマホ
--------------------------------------*/

@media screen and (max-width: 431px) {
    
    .text {
        width: 100%;
        padding: 0;
    }

    .title {
        display: flex;
        justify-content: center;
        margin: 30px 0;
    }

    .content p {
        font-size: 1.4rem;
    }

    .content dt,
    dd {
        font-size: 1.4rem;
    }


    /*------当店について-----*/

    #about {
        width: 100%;
        height: 100%;
        background-color: #e6e6e6;
    }

    #about .inner {
        width: 94%;
        align-items: center;
    }

    #about .about_item-blk {
        display: flex;
        flex-direction: column-reverse;
    }

    #about .about-img {
        width: 100%;
        height: 300px;
        margin: 20px 0;
    }

    #about .title-long {
        display: flex;
        justify-content: center;
        margin: 30px 0;
    }

    #about .content {
        margin-top: 20px;
    }


    /*------フローリスト-----*/

    #florist {
        width: 100%;
        height: 100%;
        background-color: #e6e6e6;
    }

    #florist .inner {
        width: 94%;
        /* display: flex;
        flex-direction: column; */
        align-items: center;
    }

    #florist .item-blk {
        display: flex;
        flex-direction: column;
    }

    #florist .title-long {
        display: flex;
        justify-content: center;
        margin: 30px 0;
    }

    #florist .florist-img {
        width: 100%;
        height: 300px;
        margin: 20px 0;
    }

    /*------マップ-----*/

    #map {
        width: 100%;
        height: 100%;
        background-color: #e6e6e6;
    }

    #map .inner {
        width: 94%;
        /* display: flex;
        flex-direction: column-reverse; */
        align-items: center;
    }

    #map .item-blk {
        display: flex;
        flex-direction: column-reverse;
    }

    #map .map-img {
        width: 100%;
        height: 300px;
        margin: 20px 0;
    }

    #map .map-logo {
        margin: 0 auto 20px auto;
    }

    #map dl {
        width: 100%;
    }


    #map dt {
        width: 30%;
    }

    #map dd {
        width: 70%;
    }



}