@charset "utf-8";

.post-type-archive-gallery #contents .main .mainInner {
    padding-top: 240px;
    padding-bottom: 280px;
}

/*---------------------------------------------*/
/* 一覧
/*---------------------------------------------*/
.post-type-archive-gallery #h2-title::before {
    background-image: url(../images/gallery/img-catch.webp);
}

.post-type-archive-gallery .gallery-list {
    max-width: 1024px;
    margin: 0 auto;
}

.post-type-archive-gallery .gallery-list .box {
    margin: 0 auto 60px;
    opacity: 0;
}

.post-type-archive-gallery .gallery-list .box:last-child {
    margin: 0 auto;
}

.post-type-archive-gallery .gallery-list .box a {
    display: block;
    text-decoration: none;
}

.post-type-archive-gallery .gallery-list .box .boxNum {
    margin: 0 auto 15px;
    font-size: 4rem;
}

.post-type-archive-gallery .gallery-list .box .boxNum span {
    font-size: 80%;
    margin: 0 5px 0 0;
}

.post-type-archive-gallery .gallery-list .box .boxImage {
    margin: 0 auto 15px;
    max-width: 835px;
}

.post-type-archive-gallery .gallery-list .box .boxImage .ImageBoxInner {
    padding-top: 56.25%;
}

.post-type-archive-gallery .gallery-list .box .boxTile {
    font-size: 1.8rem;
}

.post-type-archive-gallery #contents:before {
    background-image: url(../images/gallery/contents-before.svg);
    width: 7.083333333333333vw;
    padding-top: 10.119046875%;
    right: 7.291666666666667vw !important;
}

.post-type-archive-gallery #contents .section-foot {
    padding: 60px 0 0;
}

.post-type-archive-gallery #contents .main .mainInner:after,
.single-gallery #contents .main .mainInner:after {
    background-image: url(../images/gallery/section-after.svg);
    width: 173px;
    height: auto !important;
    padding-top: 100px;
}

/*======================================================*/
.single-gallery #contents .section-area:first-of-type {
    margin: 0;
}

.single-gallery #contents .main .mainInner {
    padding-bottom: 280px;
    padding-top: 0;
}

/*---------------------------------------------*/
/* 家屋データ
/*---------------------------------------------*/

.single-gallery #h2-title .inner.InnerLeft {
    margin: 0 auto 0 0;
}

.single-gallery #h2-title {
    padding: 0;
}

.single-gallery #h2-title::before,
.single-gallery #h2-title::after {
    display: none;
}


.single-gallery #contents {
    padding: 0;
    /*margin: -226.75px 0 0;*/
    margin: -224px 0 0;
}

.single-gallery .article-head {
    padding: 60px 0;
}

.single-gallery .article-head h3 {
    font-family: "shippori-mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    font-weight: 500;
    font-size: 2.5rem !important;
}

.single-gallery .article-head h3 span.owner {
    font-family: inherit;
    font-weight: 400;
    font-size: 70%;
    display: block;
    color: #8cbbd2;
}

.single-gallery .article-body .contentBox {
    max-width: 1024px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*---------------------------------------------*/
/* Head Image
/*---------------------------------------------*/
.single-gallery #contents .article-body .headImage .ImageBoxInner {
    padding-bottom: 33.33%;
    width: 100%;
    /*max-width: 1436.5px;*/
    max-width: 75vw;
    position: relative;
    border-radius: 0 5px 5px 0;
}

.single-gallery #contents .article-body .headImage .number {
    position: relative;
    padding: 80px 0 0;
    text-align: right;
    font-size: 250%;
}

.single-gallery #contents .article-body .headImage .number:before {
    position: absolute;
    content: "";
    right: 6.7885117493472595vw !important;
    top: -11.906005221932114vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../images/gallery/contents-before.svg);
    width: 7.310704960835509vw;
    padding-top: 11.189853785900784vw;
}

.single-gallery #contents .article-body .headImage .number span {
    font-size: 70%;
    margin-right: 5px;
}

/*---------------------------------------------*/
/* 概要
/*---------------------------------------------*/
.single-gallery #contents .contentBox dl dt {
    font-size: 2.75rem;
    margin: 0 auto 25px;
}


/*---------------------------------------------*/
/* 家屋データ
/*---------------------------------------------*/
.single-gallery #contents .article-body .dataBox {
    padding: 25px 60px;
    background-color: #f9f8f4;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.single-gallery #contents .article-body .dataBox table {
    border-spacing: 15px;
    border-top: none;
    border-bottom: none;
    margin: 0 auto;
    max-width: 1024px;
    border-spacing: 20px;
    border-collapse: separate;
}

.single-gallery #contents .article-body .dataBox table caption {
    text-align: left;
}

.single-gallery #contents .article-body .dataBox table th {
    padding: 0;
    border: none;
    background: inherit;
}

.single-gallery #contents .article-body .dataBox table td {
    padding: 0 15px;
    border: none;
    background: inherit;
}

.single-gallery .article-body .dataBox table th span {
    text-align: center;
    line-height: 1;
    padding: 10px 15px;
    display: block;
    border-radius: 20.025px;
    background-color: #FFFFFF;
}

/*---------------------------------------------*/
/* 写真ギャラリー
/*---------------------------------------------*/
.single-gallery .article-body .photoBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.single-gallery .article-body .photoBox .boxImage {
    margin: 0 1% 0% 0;
    width: 24.25%;
    line-height: 1;
}

.single-gallery .article-body .photoBox .boxImage:nth-child(4n) {
    margin: 0 0 1%;
}

.single-gallery .article-body .photoBox .boxImage .ImageBoxInner {
    padding-bottom: 100%;
}

/*---------------------------------------------*/
/* Youtube
/*---------------------------------------------*/
.single-gallery .article-body .youtubeBox .youtube {
    position: relative;
    width: 100%;
    max-width: 1024px;
    padding-top: 56.25%;
    margin: 0 auto;
}

.single-gallery .article-body .youtubeBox .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/*---------------------------------------------*/
/* その他の事例を見る
/*---------------------------------------------*/
.single-gallery .otherBox .box-head {
    margin: 0 auto 40px;
}

.single-gallery .otherBox a {
    text-decoration: none;
}

.single-gallery .otherBox .article-boxInner {
    padding: 0 60px;
}

.single-gallery .otherBox .box .boxImage .ImageBoxInner {
    padding-top: 56.25%;
}

.single-gallery .otherBox .article-boxInner {
    position: relative;
}

.single-gallery #contents .otherBox .swiper .box {
    margin-bottom: 0 !important;
}

.single-gallery .otherBox .slide .boxNum {
    font-size: 125%;
    margin: 0 auto 5px;
}

.single-gallery .otherBox .slide .boxNum span {
    font-size: 75%;
    margin: 0 2.5px 0 0;
}

.single-gallery .otherBox .slide .boxImage {
    margin: 0 auto 15px;
}

.single-gallery .otherBox .slide .boxTItle {
    font-size: 85%;
}

.single-gallery .otherBox .box-head h4 {
    /* font-size: 2.5rem; */
    font-size: 2.5rem;
}

.single-gallery .otherBox .article-boxInner .swiper-button-prev,
.single-gallery .otherBox .article-boxInner .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.single-gallery .otherBox .article-boxInner .swiper-button-prev {
    left: 0px;
    right: auto;
}

.single-gallery .otherBox .article-boxInner .swiper-button-next {
    right: 0px;
    left: auto;
}

.single-gallery .otherBox .article-boxInner .swiper-button-next:after,
.single-gallery .otherBox .article-boxInner .swiper-button-prev:after {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    content: '';
}

.single-gallery .otherBox .article-boxInner .swiper-button-prev:after {
    background-image: url(../images/top/gallery/btn-prev.svg);
}

.single-gallery .otherBox .article-boxInner .swiper-button-next:after {
    background-image: url(../images/top/gallery/btn-next.svg);
}

.single-gallery .otherBox .btnBox a {
    margin: 0 0 0 auto;
}

@media screen and (max-width: 1600px) {
    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -13.0625vw 0 0;
    }

}

@media screen and (max-width: 1440px) {
    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -14.51388888888889vw 0 0;
    }

}

@media screen and (max-width: 1366px) {
    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -15.300146412884333vw 0 0;
    }

}

@media screen and (max-width: 1280px) {
    .post-type-archive-gallery #contents:before {
        width: 13.750000000000002vw;
        padding-top: 15.1785703125%;
        right: 3.125vw !important;
    }

    .post-type-archive-gallery #contents .main .mainInner {
        padding-top: 18.75vw;
        padding-bottom: 21.875vw;
    }


    .post-type-archive-gallery .main .mainInner:before {
        right: 2.9296875vw !important;
    }


    .post-type-archive-gallery #contents .main .mainInner:after,
    .single-gallery #contents .main .mainInner:after {
        width: 13.515625vw;
        padding-top: 7.8125%;
    }


    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -16.328125vw 0 0;
    }

    .single-gallery #contents .main .mainInner {
        padding-bottom: 21.875vw;
    }

    .single-gallery #contents .article-body .headImage .number .inner:before {
        right: 1.953125vw;
    }

    .single-gallery #contents .article-body .headImage .number {
        padding: 60px 0 0;
    }

    /*---------------------------------------------*/
    /* 概要
    /*---------------------------------------------*/
    .single-gallery #contents .contentBox dl dt {
        font-size: 2.5rem;
    }


    /*---------------------------------------------*/
    /* 家屋データ
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .dataBox {
        padding: 25px 50px;
    }

    .single-gallery #contents .article-body .dataBox table {
        border-spacing: 20px;
    }

    .single-gallery .article-body .dataBox table th span {
        border-radius: 20px;
    }
}

@media screen and (max-width: 1136px) {
    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -18.397887323943664vw 0 0;
    }


}

@media screen and (max-width: 1024px) {
    .post-type-archive-gallery .main .mainInner:before {
        right: 1.46484375vw !important;
        width: 10.7421875vw !important;
    }


    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -20.41015625vw 0 0;
    }

    .single-gallery .article-head {
        padding: 50px 0;
    }

    .single-gallery .article-head h3 {
        font-size: 2.25rem !important;
    }

    /*---------------------------------------------*/
    /* 一覧
    /*---------------------------------------------*/
    .post-type-archive-gallery .gallery-list .box {
        margin: 0 auto 50px;
    }

    .post-type-archive-gallery .gallery-list .box .boxNum {
        /*font-size: 4rem;*/
        font-size: 3.90625vw;
    }

    .post-type-archive-gallery .gallery-list .box .boxTile {
        /*font-size: 1.8rem;*/
        font-size: 1.7578125vw;
    }


    /*---------------------------------------------*/
    /* Head Image
    /*---------------------------------------------*/

    .single-gallery #contents .article-body .headImage .number {
        padding: 50px 0 0;
    }

    /*---------------------------------------------*/
    /* 概要
    /*---------------------------------------------*/
    .single-gallery #contents .contentBox dl dt {
        font-size: 2.25rem;
        margin: 0 auto 20px;
    }

    /*---------------------------------------------*/
    /* 家屋データ
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .dataBox {
        padding: 20px 40px;
    }

    .single-gallery #contents .article-body .dataBox table {
        border-spacing: 15px;
    }

    .single-gallery .article-body .dataBox table th span {
        border-radius: 19px;
    }
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 835px) {
    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -23.11377245508982vw 0 0;
    }

    .single-gallery .article-head {
        padding: 40px 0;
    }

    .single-gallery .article-head h3 {
        font-size: 2.125rem !important;
    }

    /*---------------------------------------------*/
    /* 一覧
    /*---------------------------------------------*/
    /*.post-type-archive-gallery .gallery-list .box {
        margin: 0 auto 40px;
    }*/

    .post-type-archive-gallery .gallery-list .box .boxNum {
        /*font-size: 4rem;*/
        font-size: 4.790419161676647vw;
    }

    .post-type-archive-gallery .gallery-list .box .boxTile {
        /*font-size: 1.8rem;*/
        font-size: 2.155688622754491vw;
    }


    /*---------------------------------------------*/
    /* Head Image
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .headImage .number {
        padding: 40px 0 0;
    }

    /*---------------------------------------------*/
    /* 概要
    /*---------------------------------------------*/
    .single-gallery #contents .contentBox dl dt {
        font-size: 2.125rem;
    }

    /*---------------------------------------------*/
    /* 家屋データ
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .dataBox {
        padding: 15px 30px;
    }

    .single-gallery #contents .article-body .dataBox table {
        border-spacing: 12.5px;
    }

    .single-gallery .article-body .dataBox table th span {
        border-radius: 18px;
    }
}

@media screen and (max-width: 750px) {
    .post-type-archive-gallery #contents:before {
        width: 17.333333333333336vw;
        padding-top: 24.8%;
        right: 1.3333333333333335vw !important;
    }

    .post-type-archive-gallery #contents .main .mainInner {
        padding-top: 26.666666666666668vw;
    }

    .post-type-archive-gallery #contents .section-foot {
        padding: 40px 0 0;
    }

    .single-gallery #contents .article-body .headImage .number:before {
        width: 17.333333333333336vw;
        padding-top: 24.8%;
        right: 1.3333333333333335vw !important;
        top: -24vw;
    }

    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -23.200000000000003vw 0 0;
    }

    .single-gallery .article-head {
        padding: 80px 0 40px;
    }

    .single-gallery .article-head h3 {
        font-size: 2rem !important;
    }

    .single-gallery #contents .main .mainInner {
        padding-bottom: 21.333333333333336vw;
    }

    .single-gallery #contents .main .mainInner:after {
        width: 26.666666666666668vw;
        padding-top: 14.666666666666666%;
        bottom: 3.3333333333333335vw;
    }

    /*---------------------------------------------*/
    /* 一覧
    /*---------------------------------------------*/
    /*.post-type-archive-gallery .gallery-list .box {
        margin: 0 auto 25px;
    }*/

    .post-type-archive-gallery .gallery-list .box .boxNum {
        /*font-size: 3.0rem;*/
        font-size: 4vw;
        margin: 0 auto 10px;
    }

    .post-type-archive-gallery .gallery-list .box .boxTile {
        /*font-size: 1.8rem;*/
        font-size: 2.4vw;
    }

    .post-type-archive-gallery .gallery-list .box .boxImage {
        margin: 0 auto 10px;
    }


    /*---------------------------------------------*/
    /* Head Image
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .headImage .ImageBoxInner {
        padding-bottom: 50%;
    }

    /*---------------------------------------------*/
    /* 概要
    /*---------------------------------------------*/
    .single-gallery #contents .contentBox dl dt {
        font-size: 2rem;
        margin: 0 auto 15px;
    }

    /*---------------------------------------------*/
    /* 家屋データ
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .dataBox {
        padding: 15px 25px;
    }

    .single-gallery #contents .article-body .dataBox table {
        border-spacing: 10px;
    }

    .single-gallery #contents .article-body .dataBox table caption {
        text-align: center;
        padding: 15px 0;
    }

    .single-gallery .article-body .dataBox table th span {
        border-radius: 17px;
    }


    /*---------------------------------------------*/
    /* その他の事例を見る
    /*---------------------------------------------*/
    .single-gallery .otherBox .box-head h4 {
        /* font-size: 2.5rem; */
        font-size: 3.3333333333333335vw !important;
    }

    .single-gallery .otherBox .article-boxInner {
        padding: 0 40px;
    }

    .single-gallery .otherBox .article-boxInner .swiper-button-next:after,
    .single-gallery .otherBox .article-boxInner .swiper-button-prev:after {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 640px) {
    .post-type-archive-gallery #contents:before {
        top: 20.833333333333336vw;
    }

    .post-type-archive-gallery #contents .main .mainInner {
        /*padding-top:200px;
        padding-bottom: 140px;*/
        padding-top: 56.25vw;
        padding-bottom: 21.875vw;
    }

    .post-type-archive-gallery #contents .main .mainInner:after {
        width: 27.03125vw;
        padding-top: 9.375%;
    }

    .single-gallery .article-head {
        padding: 9.375vw 0 40px;
    }

    .single-gallery .article-head h3 {
        font-size: 1.8rem !important;
    }

    .single-gallery #contents .article-body .headImage .number {
        font-size: 225%;
    }

    /*---------------------------------------------*/
    /* 一覧
    /*---------------------------------------------*/
    .post-type-archive-gallery .gallery-list .box .boxNum {
        /*font-size: 2.5rem;*/
        font-size: 3.90625vw;
    }

    .post-type-archive-gallery .gallery-list .box .boxTile {
        /*font-size: 1.8rem;*/
        font-size: 2.8125vw;
    }


    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -27.187499999999996vw 0 0;
    }

    .single-gallery #contents .main .mainInner {
        padding-bottom: 21.875vw;
    }

    /*---------------------------------------------*/
    /* 概要
    /*---------------------------------------------*/
    .single-gallery #contents .contentBox dl dt {
        font-size: 1.8rem;
    }

    /*---------------------------------------------*/
    /* 家屋データ
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .dataBox {
        padding: 15px;
    }

    .single-gallery #contents .article-body .dataBox table caption {
        text-align: center;
        padding: 0 0 10px;
        display: block;
        width: 100%;
    }

    .single-gallery #contents .article-body .dataBox table tbody {
        border-spacing: 7.5px;
    }

    .single-gallery #contents .article-body .dataBox table tbody tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .single-gallery #contents .article-body .dataBox table th {
        width: 30%;
        margin: 0 0 7.5px;
    }

    .single-gallery #contents .article-body .dataBox table td {
        padding: 4px 10px;
        width: 70%;
        margin: 0 0 7.5px;
    }

    .single-gallery #contents .article-body .dataBox table tbody tr:last-child th:last-child,
    .single-gallery #contents .article-body .dataBox table tbody tr:last-child td:last-child {
        margin: 0;
    }

    .single-gallery .article-body .dataBox table th span {
        border-radius: 16px;
        padding: 10px 15px;

    }


    /*---------------------------------------------*/
    /* その他の事例を見る
    /*---------------------------------------------*/
    .single-gallery .otherBox .box-head h4 {
        /* font-size: 2.25rem; */
        font-size: 3.515625vw !important;
    }

    .single-gallery .otherBox .btnBox a {
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px) {
    .post-type-archive-gallery #contents:before {
        top:20.833333333333336vw;
    }

    .post-type-archive-gallery #contents .main .mainInner {
        padding-top: 66.66vw;
        padding-bottom: 21.875vw;
    }

    .single-gallery #contents {
        padding: 0;
        /* margin: -226.75px 0 0; */
        margin: -30vw 0 0;
    }

    .single-gallery #contents .article-body .headImage .number {
        font-size: 200%;
    }

    .single-gallery #contents .main .mainInner {
        padding-bottom: 25vw;
    }

    .single-gallery #contents .main .mainInner:after {
        bottom: 5.208333333333334vw;
    }

    /*---------------------------------------------*/
    /* 一覧
    /*---------------------------------------------*/
    .post-type-archive-gallery .gallery-list .box .boxNum {
        /*font-size: 2.5rem;*/
        font-size: 5.208333333333334vw;
    }

    .post-type-archive-gallery .gallery-list .box .boxTile {
        /*font-size: 1.8rem;*/
        font-size: 3.75vw;
    }


    /*---------------------------------------------*/
    /* 家屋データ
    /*---------------------------------------------*/
    .single-gallery #contents .article-body .dataBox {
        padding: 10px;
    }

    .single-gallery #contents .article-body .dataBox table {
        border-spacing: 5px;
    }

    /*---------------------------------------------*/
    /* その他の事例を見る
    /*---------------------------------------------*/
    .single-gallery .otherBox .box-head h4 {
        /* font-size: 2.125rem; */
        font-size: 4.427083333333334vw !important;
    }

}

@media screen and (max-width: 350px) {}