@charset "utf-8";

.mainVisual {
    margin-bottom: 3rem;
}

.mainVisual__bg {
    background-image: url(../img/gallery/mv.jpg);
}

.gallery-articles__container {
    padding-left: var(--padding--container);
    padding-right: var(--padding--container);
    padding-bottom: 5rem;
}

.gallery-pickup-articles {
    background-color: var(--tertiary-brown);
}

.gallery-pickup-articles__container {
    padding-top: 5.4rem;
    padding-left: var(--padding--container);
    padding-right: var(--padding--container);
    padding-bottom: 2.6rem;
}

.gallery-cats {
    margin-bottom: 4rem;
}

.gallery-cats-list {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
}

.gallery-cats-list__item {
    width: calc(100% / 3 - 3px);
    border: 1px solid var(--primary-brown);
}

.gallery-cats-list__item a {
    width: 100%;
    height: 100%;
    padding: .9rem;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.57;
    color: #fff;
    background-color: var(--primary-brown);
    text-align: center;
}

/* カテゴリーから探す（ポップアップ） */
.gallery-cats-popup-button {
    width: 100%;
    height: 100%;
    padding: 0.9rem;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.57;
    color: #fff;
    background-color: var(--primary-brown);
    text-align: center;
}

.remodal-wrapper {
    padding-left: var(--padding--container);
    padding-right: var(--padding--container);
}

.remodal {
    padding: 0;
}

.remodal-close {
    top: -15px;
    left: auto;
    right: -10px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 100%;
}

.remodal-close::before {
    width: 40px;
    font-size: 40px;
    line-height: 40px;
    color: var(--primary-brown);
}

.gallery-cats-popup__title {
    padding: 1.5rem 0;
    font-family: var(--ff-noto-sans);
    font-weight: 500;
    font-size: 1.5rem;
    color: #fff;
    background-color: var(--primary-brown);
    text-align: center;
}

.gallery-cats-popup__container {
    width: 100%;
    padding: 3rem var(--padding--container);
    font-family: var(--ff-noto-sans);
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--primary-brown);
}

.gallery-cats-popup__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.gallery-cats-popup__list:first-child {
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--primary-brown);
}

.gallery-cats-popup__list:not(:first-child) li:not(:last-child) {
    margin-right: 5%;
    letter-spacing: -1px;
}

.gallery-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 2.6rem;
}

.gallery-list__item {
    max-width: 50%;
    width: calc(100% / 2 - 1.8vw);
    margin-bottom: 2.6rem;
    opacity: 1;
}

.gallery-list__item.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}

.gallery-list__item:nth-child(even) {
    margin-left: 3.6vw;
}

.gallery-list__thumb {
    width: 100%;
    height: 28.8vw;
    margin-bottom: .6rem;
}

.gallery-list__thumb a {
    width: 100%;
    height: 100%;
}

.gallery-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-list-subtitle {
    margin-bottom: .6rem;
    font-family: var(--ff-noto-sans);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.2;
}

.gallerytaxs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: .6rem;
}

.gallerytaxs__item {
    display: inherit;
    width: auto;
}

.gallerytaxs__item:not(:last-child) {
    margin-right: .4rem;
}

.gallerytaxs__item a {
    width: 100%;
    padding: 0 .6rem;
    font-family: var(--ff-noto-sans);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--primary-brown);
    background-color: #fff;
    border: 1px solid var(--primary-brown);
}

.gallery-list__tax {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .4rem 2.2rem;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.2;
    color: #fff;
    background-color: var(--primary-brown);
}

.gallery-list__title {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.28;
}

.gallery-pickup__title {
    margin-bottom: 4rem;
    font-weight: 500;
    font-size: 1.6rem;
}

.allery-more-button.is-btn-hidden {
    display: none;
}

/* 施工事例詳細 */
.single-gallery .main-contents {
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: 20px;
}

.gallery-article {
    margin-bottom: 2rem;
    padding-left: var(--padding--container);
    padding-right: var(--padding--container);
}

.gallery-article__content {
    margin-bottom: 4.2rem;
	margin-top: 40px;
}

.gallery-article__title {
    position: relative;
    margin-bottom: 4.8rem;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.3;
	text-align: center;
}

.gallery-article__title::after {
    display: block;
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background-color: #333;
}

.gallery-article p {
    width: auto !important;
    margin: 1em 0;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.85;
}


.articles-link a {
    position: relative;
    width: 100%;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.85;
    text-align: right;
}

.articles-link a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--primary-brown);
    position: absolute;
    top: 50%;
    left: auto;
    margin-top: -6px;
    margin-left: -10px;
}

.catalogBox__title {
    letter-spacing: -1px;
}


/* 施工事例カテゴリー */
.tax-gallerytax .p-breadcrumb {
    display: none;
}

.archive-gallerytax {
    margin-top: 3.5rem;
}

.gallerytax__headline {
    margin-bottom: 2.4rem;
    font-weight: 500;
    font-size: 2rem;
    text-align: center;
}

.gallerytax-mainVisual {
    width: 100%;
    height: 53.07vw;
    margin-bottom: 3rem;
    text-align: center;
}

.gallerytax-mainVisual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-gallerytax .mainVisual__container,
.gallerytax-articles__container {
    padding-left: var(--padding--container);
    padding-right: var(--padding--container);
}

.gallerytax-articles .gallery-cats-popup-button {
    position: relative;
    margin-bottom: 3rem;
    padding: 1.9rem 0;
}

.gallerytax-articles .gallery-cats-popup-button::before {
    content: "";
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(420%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--white);
}

.gallerytax-articles .gallery-cats-popup-button::after {
    content: "";
    position: absolute;
    margin: auto;
    top: 50%;
    right: 50%;
    transform: translate(1790%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--primary-brown);
    border-right: 1px solid var(--primary-brown);
}

/* 施工事例詳細 サイドバー */
.sidebar__container {
    padding-bottom: 4.5rem;
}

.other-gallery {
    padding: 1.4rem 0 2.3rem 1.7rem;
    background-color: var(--tertiary-brown);
}

.other-gallery__title {
    margin-bottom: 1.2rem;
    font-weight: 500;
    font-size: 1.4rem;
}

.other-gallery+.other-gallery {
    margin-top: .8rem;
}

.other-gallery-list {
    width: 100%;
    padding-left: var(--padding--container);
}

.other-gallery-list__item a {
    position: relative;
    width: 100%;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.85;
}

.other-gallery-list__item a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--primary-brown);
    position: absolute;
    top: 50%;
    left: -1.2rem;
    margin-top: -6px;
}

/* リフォーム一覧 */
.post-type-archive-reform .p-breadcrumb {
    display: none;
}

/* リフォーム詳細 */
.single-reform .gallery-article__text {
    margin-bottom: 4.8rem;
}

.gallery-article p {
    width: auto !important;
    margin: 1em 0;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.85;
}

.reform-before-image-wrap {
    display: flex;
    align-items: normal;
    justify-content: space-between;
}

.reform-before-image {
    width: 40%;
    height: 26.667vw;
    margin-right: 1.4rem;
    margin-bottom: 0;
}

.reform-before-image a {
    width: 100%;
    height: 100%;
}

.reform-before-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reform-after-image {
    width: 100%;
}

.reform-after-image a {
    width: 100%;
    height: 100%;
}

.reform-after-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reform-before-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    font-size: 1.8rem;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

.reform-guide {
    margin: 1rem 0;
    font-family: var(--ff-noto-sans);
    font-weight: 400;
    font-size: 1.4rem;
}

.reform-guide .red {
    color: #ff2688;
}

.reform-guide img {
    vertical-align: middle;
}

.reform-gallerys a {
    width: 100%;
    height: 100%;
}

.reform-gallerys img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1000px) {
    .mainVisual {
        margin-bottom: 5rem;
    }

    .mainVisual__bg {
        position: relative;
        background-image: url(../img/gallery/mv_pc.jpg);
    }

    .gallery-articles__container {
        max-width: var(--width--container);
        margin: auto;
        padding: 0 0 8rem;
    }

    .gallery-pickup-articles__container {
        max-width: var(--width--container);
        margin: auto;
        padding: 6.5rem 0 .5rem 0;
    }

    .gallery-cats {
        width: 590px;
        margin: 0 auto 5rem;
    }

    .gallery-cats-list {
        justify-content: space-between;
        gap: 0;
        margin-bottom: 1rem;
    }

    .gallery-cats-list__item a,
    .gallery-cats-popup-button {
        padding: 1.4rem 0;
    }

    .gallery-cats-popup-button {
        cursor: pointer;
        transition: opacity .4s ease;
    }

    .gallery-cats-popup-button:hover {
        opacity: 0.6;
    }

    /* カテゴリーから探す（ポップアップ） */
    .remodal {
        width: 910px;
    }

    .gallery-cats-popup__container {
        display: flex;
        height: 210px;
        padding: 1.2rem 0;
        font-size: 1.6rem;
    }

    .gallery-cats-popup__list {
        width: 655px;
    }

    .gallery-cats-popup__list:first-child {
        flex-direction: column;
        justify-content: center;
        width: 255px;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        border-right: 2px solid var(--primary-brown);
    }

    .gallery-cats-popup__list:first-child li:nth-child(3n-1) {
        margin: 2.2rem 0;
    }

    .gallery-cats-popup__list:last-child {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        width: 100%;
        padding-left: 4rem;
    }

    .gallery-cats-popup__list:last-child li {
        margin: 1.2rem 0;
    }

    .gallery-cats-popup__list:not(:first-child) li:not(:last-child) {
        margin: 0;
    }

    .gallery-cats-popup__list:last-child li:first-child {
        grid-area: 1 / 1 / 2 / 2;
    }

    .gallery-cats-popup__list:last-child li:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
    }

    .gallery-cats-popup__list:last-child li:nth-child(2) a {
        text-align: center;
    }

    .gallery-cats-popup__list:last-child li:nth-child(3) {
        grid-area: 1 / 3 / 2 / 5;
    }

    .gallery-cats-popup__list:last-child li:nth-child(4) {
        grid-area: 2 / 1 / 3 / 2;
    }

    .gallery-cats-popup__list:last-child li:nth-child(5) {
        grid-area: 2 / 2 / 3 / 3;
    }

    .gallery-cats-popup__list:last-child li:nth-child(5) a {
        text-align: center;
    }

    .gallery-cats-popup__list:last-child li:nth-child(6) {
        grid-area: 2 / 3 / 3 / 5;
    }

    .gallery-cats-popup__list:last-child li:nth-child(7) {
        grid-area: 3 / 1 / 4 / 2;
    }

    .gallery-cats-popup__list:last-child li:last-child {
        grid-area: 3 / 2 / 4 / 3;
    }

    .gallery-cats-popup__list:last-child li:last-child a {
        text-align: center;
    }

    .gallery-cats-popup__list:last-child a {
        width: 100%;
        height: 100%;
        text-align: left;
    }



    .gallery-list__item {
        max-width: 100%;
        width: 300px;
        margin-right: 50px;
        margin-bottom: 6rem;
    }

    .gallery-list__item:nth-child(even) {
        margin-left: 0;
    }

    .gallery-list__item:nth-child(3n) {
        margin-right: 0;
    }

    .gallery-list__thumb {
        margin-bottom: 1rem;
        height: 225px;
    }

    .gallery-list__thumb a {
        transition: all .4s ease;
    }

    .gallery-list__thumb a:hover {
        opacity: 0.6;
    }

    .gallery-list-subtitle {
        display: inline-block;
    }

    .post-type-archive-gallery .gallery-list .gallery-more-button {
        /* margin-left: -8%; */
    }

    .gallerytaxs {
        display: inline-block;
    }

    .gallerytaxs__item a {
        padding: .4rem .6rem;
    }

    .gallerytaxs__item:not(:last-child) {
        margin-right: .6rem;
    }

    .gallery-list__title {
        font-size: 1.7rem;
    }

    .gallery-pickup__title {
        font-size: 1.9rem;
    }

    /* 施工事例詳細 */
    .single-gallery .main-contents {
        display: flex;
        flex-direction: row-reverse;
		justify-content: center;
    }

    .single-gallery .gallery-article {
        /*width: 77%;*/
		width: 100%;
        margin-bottom: 0;
        padding: 0;
    }

    .single-gallery .gallery-article__content {
        margin-bottom: 8rem;
    }

    .single-gallery .gallery-article__title {
        margin-bottom: 6.8rem;
        font-size: 2.4rem;
        text-align: center;
    }

    .single-gallery .gallery-article__title::after {
        width: 100px;
        bottom: -28px;
    }

    .single-gallery .gallerytaxs {
        margin-bottom: 1.8rem;
    }

    .single-gallery .articles-link {
        display: flex;
        justify-content: flex-end;
    }

    .single-gallery .articles-link a {
        display: inline-block;
        width: auto;
    }

    .single-gallery .articles-link a::after {
        content: '';
        background-color: var(--primary-brown);
        width: 0%;
        height: 1px;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: all .3s ease;
    }

    .single-gallery .articles-link a:hover::after {
        width: 100%;
    }

    /* 施工事例詳細 サイドバー */
    .other-gallery {
        margin-bottom: 2rem;
        padding: 3.4rem 1.7rem 2.5rem;
    }

    .other-gallery {
        font-size: 1.4rem;
    }

    .other-gallery-list {
        width: 100%;
        padding-left: calc(var(--padding--container) - 1rem);
    }

    .other-gallery-list__item a::before {
        top: 0.7rem;
        left: -1rem;
        margin-top: 0;
    }

    .other-gallery-list__item a:hover {
        text-decoration: underline;
    }

    /* 施工事例カテゴリー */
    .archive-gallerytax {
        margin-top: 3.5rem;
    }

    .archive-gallerytax .mainVisual {
        margin-bottom: 14.8rem;
    }

    .archive-gallerytax .mainVisual__container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        max-width: var(--width--container);
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    .gallerytax-top-left {
        width: 370px;
        margin-right: 8.5rem;
    }

    .gallerytax__headline {
        font-size: 2.9rem;
    }

    .gallerytax-mainVisual {
        width: 500px;
        height: 297px;
        margin-bottom: 0;
    }

    .gallerytax-articles__container {
        max-width: var(--width--container);
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 8rem;
    }

    .gallerytax-top-left .gallery-cats-popup-button {
        position: relative;
        margin-bottom: 3rem;
        padding: 1.9rem 0;
    }

    .gallerytax-top-left .gallery-cats-popup-button::before {
        content: "";
        position: absolute;
        margin: auto;
        top: 50%;
        left: 50%;
        transform: translate(420%, -50%);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--white);
    }

    .gallerytax-top-left .gallery-cats-popup-button::after {
        content: "";
        position: absolute;
        margin: auto;
        top: 50%;
        right: 50%;
        transform: translate(1790%, -50%) rotate(45deg);
        width: 8px;
        height: 8px;
        border-top: 1px solid var(--primary-brown);
        border-right: 1px solid var(--primary-brown);
    }

    /* リフォーム詳細 */
    .single-reform {
        margin-top: 100px;
    }

    .single-reform .p-breadcrumb__item {
        color: var(--primary-brown);
    }

    .single-reform .p-breadcrumb__item:not(:last-child)::after {
        color: var(--primary-brown);
    }

    .reform-image {
        margin-bottom: 3rem;
    }

    .reform-example-block {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2.8rem;
    }

    .reform-example {
        width: calc(100% / 2 - 1rem);
    }

    .reform-example:not(:last-child) {
        margin-bottom: 0;
    }

    .reform-before-image {
        width: 40%;
        height: 100px;
    }

    .reform-guide {
        margin: 1.2rem 0;
    }

    .single-reform .sidebar__container {
        padding-bottom: 0;
    }

    .single-reform .side-list {
        margin-bottom: 2rem;
    }

    .reform-gallerys {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1.4rem;
    }

    .reform-gallerys .gallery {
        width: calc(100% / 4 - 1.1rem);
        margin-bottom: 0;
    }
}