@charset "utf-8";

#about {
    width: 80%;
    margin: 0 auto;
    padding-top: 100px;
    text-align: center;
}

#about h2 {
    font-size: 28px;
}

#about p {
    margin-top: 10px;
}

/* アバウトエリア */
.flex-a {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.inner-a {
    line-height: 2.5;
    width: 50%;
    opacity: 0;
    transition: 1.5s;
}

.inner-a.is-show {
    opacity: 1;
}

.inner-a h3 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}

.flex-a img {
    width: 40%;
    height: 100%;
    border: 1px solid #6a3906;
}
.fadeup {

    opacity: 0;
    transform: translate(0, 30%);
    transition: 1.3s;

}

.fadeup.is-show {
    transform: translate(0, 0);
    opacity: 1;
}

.border {
    width: 10%;
    min-width: 110px;
    height: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
}

.flex-b {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;

}

.inner-b {
    line-height: 2.5;
    width: 50%;
    opacity: 0;
    transition: 1.5s;
    /* transition-delay: 1s; */


}
.inner-b.is-show {
    opacity: 1;
}

.inner-b h3 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}

.flex-b img {
    width: 40%;
    height: 100%;
}

.out-c {
    width: 80%;
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;

}

.flex-c {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.inner-c {
    line-height: 2.5;
    width: 50%;
    opacity: 0;
    transition: 1.75s;
}
.inner-c.is-show {
    opacity: 1;
}

.inner-c h3 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}

.flex-c img {
    width: 40%;
    min-width: 200px;
    height: 100%;
}

.out-c .po-cake {
    position: absolute;
    bottom: 93%;
    min-width: 200px;
    right: 0;
    width: 40%;
    height: auto;
}

.out-d {
    background-color: #e4e4e4;
    width: 100%;
    padding: 30px 0;
    margin-top: 80px;
    position: relative;

}

.flex-d {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
}

.inner-d {
    line-height: 2.5;
    width: 50%;
}

.inner-d h3 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}

img.inshop-img {
    width: 40%;
    height: 100%;
    border-radius: 25%;
}

img.ins-pos {
    width: 45%;
}


.ins-rig {
    margin-left: 4%;
}

.lamp {
    position: absolute;
    width: 12%;
    max-width: 160px;
    min-width: 100px;
    top: -18%;
    left: 48%;
    height: auto;
    opacity: 0;
    transition: 1.3s;
    transition-delay: 0.6s;


}

.lamp.is-show{
    opacity: 1;
    top: -12%;

}

@media (max-width:600px) {
    .flex-a {
        display: block;
    }

    .inner-a {
        width: 100%;
        line-height: 2;
    }

    .flex-a img {
        width: 70%;
        height: 100%;
        display: block;
        margin: 0 auto;
    }

    .flex-b {
        display: block;
    }

    .inner-b {
        width: 100%;
        line-height: 2;
    }

    .flex-b img {
        width: 70%;
        height: 100%;
        display: block;
        margin: 0 auto;
    }

    .flex-c {
        display: block;
    }

    .inner-c {
        width: 100%;
        line-height: 2;
    }

    .flex-c img {
        width: 70%;
        height: 100%;
        display: block;
        margin: 0 auto;
    }

    .flex-d {
        display: block;
    }

    .inner-d {
        width: 100%;
        line-height: 2;
    }

    img.inshop-img {
        width: 70%;
    }

    .lamp {
        top: -5%;
        left: 70%;
        height: auto;
    }
    .lamp.is-show{
        top: -4%;}
    
    
}