@charset "utf-8";

/*a-galleryとa-contactの両方に共通のcss*/

.container,
.contents,
.wrapping,
.cover {
    display: flex;
    flex-flow: column wrap;
    /*border: 1px solid #ecf117;*/
}

p {
    text-align: left;
}

.cover-title {
    text-align: left;

}

/*.work{
    text-align: center;
}*/
.color {
    color: #3F3F3F;
}
.vessel {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    margin-bottom: 2rem;
}


.cover_work {
    display: flex;
    flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    width: calc(100% - 0);
    height: fit-content;
    align-items: flex-start;
    padding-bottom: 4rem;
    /*border: 1px solid #f10b48;*/
}

.point_work {
    display: flex;
    flex-flow: column nowrap;
    /*flex: 0 1 auto;*/
    /*width: 50%;*/
    margin: 0 0.5rem 0.5rem 0;
    width: calc(100% / 2 - 1rem / 2);
    text-align: center;
    box-sizing: border-box;
    /*border: 1px solid #1219f1;*/
}

.point_work:nth-child(2n) {
    margin-right: 0;
}


/*.point-le {
display: flex;
justify-content: left;
width: calc(100% - 1rem);
padding: 0 3rem;
margin: 0 0 0 0 ;

}*/

/*.point-work {
    flex: 1 1 23rem;
    min-width: 23rem;
    max-width: 25rem;
    width: calc(23% - 0.1rem);
    text-align: center;
    margin: 1rem;

}*/

/*.point-work {
    flex: 1 0 auto;
    width: calc(100% - 0.1rem);
    text-align: center;
    margin: 1rem;
}*/
img {
    max-width: 100%;
    /*border: 1px solid #2c1cf1;*/
}

.date {
    font-size: 1.2rem;
}

.btn {
    margin: -1rem 0 0 0;
    /*border: 1px solid #12f1e7;*/
}


a {
    color: #000000;;
    text-decoration: none;
}

a hover {
    color: #a0a0a0;
}


.button.button-black {
    background-color: black;
    border-color: black;
    font-size: .8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    padding: 0 1.5rem;
}

.button.button-black.button-clear,
.button.button-black.button-outline {
    background-color: transparent;
    color: black;
    font-size: 1.1rem;
    font-weight: 700;
    height: 2.8rem;
    line-height: 2.8rem;
    letter-spacing: .1rem;
    padding: 0 2.2rem;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

.button.button-black.button-clear {
    border-color: transparent;
}

/* Custom size */
.button.button-small {
    font-size: .8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    padding: 0 1.5rem;
}


/* 表示するimageの数の補助用 */
.point_work li {
    list-style-type: none;
}

#more_btn {
    background-color: transparent;
    color: #3F3F3F;
    border-color: black;
    margin-right: auto;
}

#close_btn {
    background-color: transparent;
    color: #3F3F3F;
    border-color: black;
    margin-right: auto;
}


/*#tileList {
    list-style: none;
}
#tileList .content {
    display: none;
}
.readMoreBtn {
    display: none;
}*/


@media screen and (min-width: 40rem) {
    .contents {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        width: calc(100% - 1rem);
        /*border: 1px solid #a04e19;*/
    }

    .wrapping {
        display: flex;
        flex-flow: column wrap;
        /*-webkit-justify-content: space-around;
        justify-content: space-around;*/
        width: calc(100% - 0.1rem);
        margin: 3rem 0 0 0;
        /*border: 1px solid #1219f1;*/
    }

    .cover {
        display: flex;
        /* これを入れると、写真とフッターが重なるので、nowrapが必要*/
        /*flex: 1 ;*/
        flex-flow: row wrap;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        width: calc(100% - 0.1rem);
        margin-bottom: 8rem;
        /*border: 1px solid #f10314;*/
    }

    .cover-cont {
        display: flex;
        /* これを入れると、写真とフッターが重なるので、nowrapが必要*/
        /*flex: 1 ;*/
        flex-flow: row wrap;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        width: calc(100% - 0.1rem);
        margin-bottom: 3rem;
        /* border: 1px solid #f10314;*/
    }

    .cover-title {
        display: flex;
        /* これを入れると、写真とフッターが重なるので、nowrapが必要*/
        /*flex: 1 ;*/
        /*-webkit-justify-content: flex-start;
        justify-content: flex-start;*/
        text-align: left;
        margin-right: auto;
        margin-top: 2rem;
    }


    .vessel {
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        margin-bottom: 2rem;
    }





 .cover_work {
         display: flex;
         flex-flow: row wrap;
         -webkit-justify-content: flex-start;
         justify-content: flex-start;
         align-items: stretch;
         width: calc(100% - 0);
         /*flex: 0 0 25%;*/
        text-align: center;
        margin-bottom: 4rem;
        /*border: 1px solid #f10b48;*/
    }


    .point_work {
        display: flex;
        flex-flow: row wrap;
        margin: 0 1rem 1rem 0;
        width: calc(100% / 4 - 3rem / 4);
        text-align: left;
        box-sizing: border-box;
        padding: 2rem 2rem 2.2rem 2rem;
        /*border: 1px solid #368216;*/
    }

    /*.point:nth-child(2n) {
        margin-right: 0;
    }*/
    .point_work:nth-child(2n) {
        margin-right: 1.0rem;
    }

    .point_work:nth-child(4n) {
        margin-right: 0;
    }


    .point {
        display: flex;
        height: auto;
        min-width: 28rem;
        width: calc(100% - 1rem);
        align-items: center;
        padding: 0 1rem;
        /*border: 1px solid #ecf117;*/
    }

    .point-cont {
        flex: 0 0 20rem;
        text-align: center;
        margin: 1rem;
        /*border: 1px solid #1219f1;*/
    }

    .point-le {
        display: flex;
        justify-content: flex-start;
        /*align-items: flex-start;*/
        width: calc(100% - 1rem);
        padding: 0 3rem;
        margin: 0 0 0 0;
        /*border: 1px solid #0b8010;*/
        /*width: calc(30% - 0);*/
    }

    .point-work {
        flex: 1 1 23rem;
        width: calc(23% - 0.1rem);
        text-align: center;
        margin: 1rem;
    }

    p {
        text-align: left;
    }
}

/*@media screen and (min-width: 60rem) {
    .contents {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        width: calc(100% - 1rem);

    }

    .wrapping {
        display: flex;
        flex-flow: row wrap;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        width: calc(100% - 0.1rem);
        margin: 3rem 0 0 0;

    }
    .cover {
        display: flex;
        flex-flow: row wrap;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        width: calc(100% - 0.1rem);
        margin-bottom: 10rem;

    }

    .point-work {
        flex: 1 1 23rem;
        min-width: 23rem;
        max-width: 25rem;
        width: calc(23% - 0.1rem);
        text-align: center;
        margin: 1rem;

    }

    .point {
        display: flex;

        height: auto;
        min-width: 28rem;
        width: calc(100% - 1rem);
        text-align: left;
        align-items: center;
        padding: 0 1rem;
    }
    .point.text{
        text-align: left;
    }

    p {
        text-align: left;
    }
}*/