@charset "utf-8";

:root {
    /* ---------- カスタムプロパティ(カラー設定ほか) ---------- */
    --white-color: white;
    --black-color: black;
    --gray-bgcolor: rgb(214 214 214 / 1.0);
    --text-color: rgb(56 56 56 / 1.0);
    --border-color: rgb(112 112 112 / 1.0);
    --list-bgcolor: rgb(131 141 159 / 1.0);
    --scroll-bgcolor: rgb(128 128 128 / 1.0);
    --quote-bdcolor: rgb(240 243 245 / 1.0);
    --blog-bgcolor: rgb(234 234 234 / 1.0);
    --site-bgcolor: rgb(250 250 250 / 1.0);
    /* --- プロジェクト一覧 --- */
    --first-textcolor: rgb(194 227 242 / 1.0);
    --first-bgcolor: rgb(8 55 77 / 1.0);
    --second-textcolor: rgb(179 232 249 / 1.0);
    --second-bgcolor: rgb(31 103 165 / 1.0);
    --third-textcolor: rgb(10 36 68 / 1.0);
    --third-bgcolor: rgb(187 215 243 / 1.0);
    --fourth-textcolor: rgb(7 28 54 / 1.0);
    --fourth-bgcolor: rgb(165 176 201 / 1.0);
    --fifth-textcolor: var(--fourth-textcolor);
    --fifth-bgcolor: rgb(81 179 230 / 1.0);
    --sixth-textcolor: var(--second-textcolor);
    --sixth-bgcolor: rgb(28 63 119 / 1.0);
    /* --- テキスト --- */
    color: var(--text-color);
    --semibold: 600;
}


/* -----------sp　全体レイアウト ---------- */

.home .project-carousel-wrapper,
.home .container2 .project-area,
.home .container2 .blog-area,
.single-project,
.page-id-287,
.page-id-492 {
    font-size: calc(8px + 1.7777vw);
    background-color: var(--site-bgcolor);
}

.break,
.s-break {
    display: block;
}

/* -----------tablet　全体レイアウト ---------- */
@media screen and (width > 450px) {

    .home .project-carousel-wrapper,
    .home .container2 .project-area,
    .home .container2 .blog-area,
    .single-project,
    .page-id-287,
    .page-id-492 {
        font-size: calc(8px + 1.0416vw);
    }

    .s-break {
        display: inline;
    }

    .t-break {
        display: block;
    }
}


/* -----------PC　全体レイアウト ---------- */
@media screen and (width > 768px) {

    .home .project-carousel-wrapper,
    .home .container2 .project-area,
    .home .container2 .blog-area,
    .single-post,
    .single-project .container2,
    .page-id-287,
    .page-id-492 {
        font-size: min(calc(8px + 0.625vw), 16px);

        .s-wrapper {
            max-width: 1280px;
            margin: auto;
        }

        .t-break {
            display: inline;
        }
    }
}





/* ---------- トップページ ---------- */
/* ----- sp レイアウト ----- */
.home {
    .container2 {
        background-color: var(--white-color);

        .project-area {
            .s-wrapper {
                margin: auto;
                padding-top: 25px;
                width: 88.8888vw;

                .proj-tab-area {
                    overflow: hidden;

                    .tab-header {
                        /* width: 100vw; */
                        margin-bottom: 15px;
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid var(--border-color);

                        h2 {
                            margin: 0;
                            font-size: 1.125em;
                            font-weight: bold;
                            line-height: 1.4;

                            span {
                                margin-left: calc(24.1666vw - 74.75px);
                                padding: 0 calc(4.1666vw - 5.75px);
                                display: inline-block;
                                height: 1.5em;
                                line-height: 1.5;
                                color: var(--white-color);
                                background-color: var(--list-bgcolor);
                                border-radius: 0.75em;
                            }
                        }

                        .proj-tab-list {
                            margin: 9px 3.1111vw -1px 0;
                            padding: 0;
                            display: flex;
                            justify-content: flex-end;
                            gap: 2.2222vw;

                            li {
                                list-style: none;

                                button {
                                    height: 29px;
                                    width: 14.6666vw;
                                    font-size: 3.3333vw;
                                    font-weight: bold;
                                    color: var(--text-color);
                                    text-align: center;
                                    background-color: inherit;
                                    border: 1px solid var(--border-color);

                                    &.active {
                                        border-bottom: 1px solid var(--white-color);
                                    }
                                }
                            }
                        }
                    }
                }

                .proj-tab-panel {
                    display: none;


                    &.active {
                        display: block;

                    }

                    .tab-items-wrap {
                        display: flex;
                        overflow-x: auto;
                        scroll-snap-type: x mandatory;
                        white-space: nowrap;
                        border-bottom: 1px solid var(--border-color);

                        .proj-tab-item {
                            margin-bottom: 12px;
                            width: 76.88vw;
                            flex-shrink: 0;
                            /* この行を追加 */
                            flex-grow: 0;

                            .proj-img-area {
                                padding: 10px 6vw;

                                .post-date {
                                    text-align: right;

                                    time {
                                        font-size: 0.9375em;
                                        font-weight: var(--semibold);
                                        margin-bottom: 7px;
                                        line-height: 1.5625;
                                    }
                                }

                                .thumb {
                                    img {
                                        width: 100%;
                                        height: auto;
                                        object-fit: contain;
                                    }
                                }

                                h3 {
                                    margin: 0;
                                    padding: 0;
                                    height: calc(1em * 2 * 1.625);
                                    font-size: 1em;
                                    line-height: 1.625;
                                    white-space: wrap;
                                    line-clamp: 2;
                                    /* 旧仕様（後方互換） */
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                }
                            }

                            &:first-child .proj-img-area {
                                background-color: var(--first-bgcolor);

                                h3,
                                .post-date time {
                                    color: var(--first-textcolor);
                                }
                            }

                            &:nth-child(2) .proj-img-area {
                                background-color: var(--second-bgcolor);

                                h3,
                                .post-date time {
                                    color: var(--second-textcolor);
                                }
                            }

                            &:nth-child(3) .proj-img-area {
                                background-color: var(--third-bgcolor);

                                h3,
                                .post-date time {
                                    color: var(--third-textcolor);
                                }
                            }

                            &:nth-child(4) .proj-img-area {
                                background-color: var(--fourth-bgcolor);

                                h3,
                                .post-date time {
                                    color: var(--fourth-textcolor);
                                }
                            }

                            &:nth-child(5) .proj-img-area {
                                background-color: var(--fifth-bgcolor);

                                h3,
                                .post-date time {
                                    color: var(--fifth-textcolor);
                                }
                            }

                            &:nth-child(6) .proj-img-area {
                                background-color: var(--sixth-bgcolor);

                                h3,
                                .post-date time {
                                    color: var(--sixth-textcolor);
                                }
                            }

                            .deadline-line {
                                margin: 6px 0 0px;
                                padding: 0 6vw;
                                display: flex;
                                align-items: center;
                                width: 100%;
                                gap: .5em;

                                .label {
                                    display: flex;
                                    align-items: center;

                                    img {
                                        margin-right: 6px;
                                        height: 22.6px;
                                        width: 22.6px;
                                    }
                                }

                                .label,
                                .date {
                                    font-size: 1rem;
                                    font-weight: bold;
                                    white-space: nowrap;
                                }

                                .dots {
                                    flex: 1;
                                    border-bottom: 2px dotted var(--border-color);
                                    height: 0;
                                }

                                .date {
                                    margin-left: 0.5em;
                                }
                            }
                        }
                    }
                }
            }
        }

        .blog-area {
            .s-wrapper {
                padding: 28px 5.5555vw 50px;

                .blog-tab-area {
                    .tab-header {
                        margin-bottom: 14px;
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid var(--border-color);

                        h2 {
                            margin: 0;
                            font-size: 1.25em;
                            font-weight: bold;
                            line-height: 1.4;

                            span {
                                margin-left: calc(24.1666vw - 74.75px);
                                padding: 0 calc(4.1666vw - 5.75px);
                                display: inline-block;
                                height: 1.5em;
                                line-height: 1.5;
                                color: var(--white-color);
                                background-color: var(--list-bgcolor);
                                border-radius: 0.75em;
                            }
                        }

                        .blog-tab-list {
                            margin: 9px 3.1111vw -1px 0;
                            padding: 0;
                            display: flex;
                            justify-content: flex-end;
                            gap: 2.2222vw;

                            li {
                                list-style: none;

                                button {
                                    height: 29px;
                                    width: 14.6666vw;
                                    font-size: 3.3333vw;
                                    color: var(--text-color);
                                    font-weight: bold;
                                    text-align: center;
                                    border: 1px solid var(--border-color);
                                    background-color: inherit;

                                    &.active {
                                        border-bottom: 1px solid var(--white-color);
                                    }
                                }
                            }
                        }
                    }

                    .blog-tab-panel {
                        display: none;

                        &.active {
                            display: block;
                        }

                        .tab-items-wrap {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 32px 4vw;

                            .blog-tab-item {
                                background-color: var(--blog-bgcolor);

                                .post-date {
                                    height: calc(0.9375em * 1.8);
                                    margin-bottom: 8px;
                                    padding-right: 0.5rem;
                                    text-align: right;

                                    time {
                                        font-size: 0.9375em;
                                        font-weight: var(--semibold);
                                        line-height: 1.8;
                                    }
                                }

                                .thumb {
                                    margin-bottom: 6px;
                                    height: 24vw;

                                    img {
                                        width: 42.4444vw;
                                        height: 24vw;
                                        object-fit: cover;
                                        object-position: center center;

                                    }
                                }

                                h3 {
                                    font-size: 0.9375rem;
                                    padding-left: 0.5rem;
                                    padding-right: 0.5rem;
                                    line-height: 1.3333;
                                    height: calc(0.9375em * 2 * 1.3333);
                                    white-space: wrap;
                                    line-clamp: 2;
                                    /* 旧仕様（後方互換） */
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 450px) {
    .home {
        .container2 {
            .project-area {
                .s-wrapper {
                    padding-top: 42px;
                    width: 90.8854vw;

                    .proj-tab-area {

                        .tab-header {
                            height: 56px;
                            margin-bottom: 20px;

                            h2 {
                                font-size: 1.5em;
                                display: flex;
                                align-items: center;

                                span {
                                    margin-left: 6.6406vw;
                                    padding: 0 13px;
                                    font-size: 0.76em;
                                    height: 1.5789em;
                                    line-height: 1.5789;
                                    border-radius: 0.7894em;
                                }
                            }

                            .proj-tab-list {
                                margin: 20px 3.776vw 0 0;
                                gap: 1.5625vw;

                                li {

                                    button {
                                        margin-top: -2px;
                                        padding: 0;
                                        height: 38px;
                                        width: calc(23.274vw - 38.7px);
                                        font-size: 1.125em;
                                    }
                                }
                            }
                        }
                    }

                    .proj-tab-panel {

                        .tab-items-wrap {

                            .proj-tab-item {
                                margin-bottom: 45px;
                                width: 53.9062vw;

                                .proj-img-area {
                                    padding: 12px 4.1666vw 16px;

                                    .proj-tab-panel {
                                        .post-date {

                                            time {
                                                font-size: 1.125em;
                                                margin-bottom: 8px;
                                                line-height: 1.3333;
                                            }
                                        }

                                        h3 {
                                            font-size: 1.125em;
                                            line-height: 1.5555;
                                            height: calc(1em * 2 * 1.5555);
                                        }
                                    }
                                }

                                .deadline-line {
                                    margin: 8px 0 0px;
                                    padding: 0 4.1666vw;

                                    .label {

                                        img {
                                            margin-right: 6px;
                                            height: 24.4px;
                                            width: 24.4px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .blog-area {
                .s-wrapper {
                    padding: 48px 4.427vw 54px;

                    .blog-tab-area {
                        .tab-header {
                            margin-bottom: 27px;
                            height: 58px;

                            h2 {
                                font-size: 1.5em;

                                span {
                                    margin-left: 6.6406vw;
                                    padding: 0 13px;
                                    font-size: 0.76em;
                                    height: 1.5789em;
                                    line-height: 1.5789;
                                    border-radius: 0.7894em;
                                }
                            }

                            .blog-tab-list {
                                margin: 20px 3.776vw 0 0;
                                gap: 1.5625vw;

                                li {

                                    button {
                                        padding: 0;
                                        height: 38px;
                                        width: calc(23.274vw - 38.7px);
                                        font-size: 1.125em;
                                    }
                                }
                            }
                        }


                        .blog-tab-panel {

                            .tab-items-wrap {
                                gap: 29px 4.8177vw;

                                .blog-tab-item {
                                    width: 43.0989vw;

                                    .post-date {
                                        height: calc(1.125em * 1.3333);
                                        margin-bottom: 14px;

                                        time {
                                            font-size: 1.125em;
                                            line-height: 1.3333;
                                        }
                                    }

                                    .thumb {
                                        margin-bottom: 12px;
                                        width: 100%;
                                        height: 24.3489vw;

                                        img {
                                            width: 100%;
                                            height: 100%;
                                        }
                                    }

                                    h3 {
                                        font-size: 1.125em;
                                        line-height: 1.5555;
                                        height: calc(1em * 2 * 1.5555);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* -----------PC　全体レイアウト ---------- */
@media screen and (width > 768px) {
    .home {
        .container2 {
            .project-area {
                .s-wrapper {
                    padding-top: 52px;
                    width: min(94.5312vw, 1210px);

                    .proj-tab-area {

                        .tab-header {
                            height: 74px;
                            margin-bottom: 32px;

                            h2 {
                                font-size: 2.5em;

                                span {
                                    margin-left: 2.8928em;
                                    padding: 0 13px;
                                    font-size: 0.7em;
                                    height: 42px;
                                    line-height: 42px;
                                    border-radius: 21px;
                                }
                            }

                            .proj-tab-list {
                                margin: 33px 1.1875em 0 0;
                                gap: 0.75em;

                                li {

                                    button {
                                        margin-top: 0px;
                                        height: 41px;
                                        width: 7.5em;
                                        font-size: 1.25em;
                                    }
                                }
                            }
                        }
                    }

                    .proj-tab-panel {

                        .tab-items-wrap {

                            .proj-tab-item {
                                margin-bottom: 50px;
                                width: 33.33%;

                                .proj-img-area {
                                    padding: 12px 2em 13px;
                                }

                                .deadline-line {
                                    margin: 8px 0 0px;
                                    padding: 0 2em;

                                    .label {

                                        img {
                                            margin-right: 6px;
                                            height: 24.4px;
                                            width: 24.4px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .blog-area {
                .s-wrapper {
                    padding: 68px min(2.7343vw, 35px) 62px;

                    .blog-tab-area {
                        .tab-header {
                            height: 74px;
                            margin-bottom: 32px;

                            h2 {
                                font-size: 2.5em;

                                span {
                                    margin-left: 2.8928em;
                                    padding: 0 13px;
                                    font-size: 0.7em;
                                    height: 42px;
                                    line-height: 42px;
                                    border-radius: 21px;
                                }
                            }

                            .blog-tab-list {
                                margin: 33px 1.1875em 0 0;
                                gap: 0.75em;

                                li {

                                    button {
                                        padding: 0;
                                        height: 41px;
                                        width: 7.5em;
                                        font-size: 1.25em;
                                    }
                                }
                            }
                        }


                        .blog-tab-panel {
                            padding: 0 min(6.1718vw, 79px);

                            .tab-items-wrap {
                                gap: 44px 3.625em;

                                .blog-tab-item {
                                    width: 100%;

                                    .post-date {
                                        margin-bottom: 10px;
                                    }

                                    .thumb {
                                        margin-bottom: 10px;
                                        height: 17.4375em;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- カルーセル ----- */
.home {
    .container {
        .article-contents {
            margin-top: 10px;
        }
    }

    .project-carousel-wrapper {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px 0;
        position: relative;
        overflow: hidden;

        .project-carousel-container {
            position: relative;
            overflow: visible;
            padding: 0;
            /* max-width: 1400px; */
            margin: 0 auto;
        }

        .project-carousel {
            /* height: 28.125vw; */
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: center;
        }

        .project-slide {
            flex: 0 0 50vw;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .project-slide[data-position="left"] {
            opacity: 0.6;
            /* transform: scale(0.95) translateX(calc(-66.666%)); */
        }

        .project-slide[data-position="right"] {
            opacity: 0.6;
            /* transform: scale(0.95) translateX(calc(66.666%)); */
        }

        .project-slide[data-position="center"] {
            opacity: 1;
            transform: scale(1);
        }

        .project-slide-inner {
            height: 28.125vw;
        }


        .project-image {
            width: 100%;
            height: 100%;
            /* overflow: hidden; */

        }

        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            border-radius: 20px;
            border: 4px solid black;
        }

        .project-slide-inner:hover .project-image img {
            transform: scale(1.05);
        }

        .project-content {
            width: 60%;
            position: relative;
            border: 3px solid black;
            border-radius: 8px;
            top: -60px;
            left: -30px;
            padding: 15px 20px;
            background-color: rgb(255 255 255 / 0.65);
        }

        .project-title {
            margin: 0;
            font-size: 1.1em;
            line-height: 1.4;
        }

        .project-title a {
            color: var(--text-color);
            text-decoration: none;
            transition: color 0.3s ease;
            display: block;
        }

        .project-title a:hover {
            color: #333;
        }

        .carousel-arrow {
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            margin: 0 10px;
        }

        .carousel-arrow:hover {
            background: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            transform: scale(1.1);
        }

        .carousel-arrow:active {
            transform: scale(0.95);
        }

        .carousel-arrow svg {
            color: #333;
        }

        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 70px;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ddd;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .carousel-dot.active {
            background: #0073aa;
        }
    }
}

@media (max-width: 1024px) {
    .home {
        .project-carousel-wrapper {
            .carousel-arrow {
                width: 45px;
                height: 45px;
                margin: 0 8px;
            }
        }
    }
}


@media (max-width: 768px) {
    .home {
        .project-carousel-wrapper {
            .project-carousel-container {
                .project-slide-inner {
                    height: 33.75vw;
                }

                .project-slide {
                    flex: 0 0 60vw;
                }

                .project-content {
                    width: 80%;
                }

                .carousel-arrow {
                    width: 40px;
                    height: 40px;
                    margin: 0 5px;
                }
            }
        }

        .container~.container .article-contents {
            margin: 0;
            padding: 0;
        }

        :has(+ .project-carousel-wrapper) {
            padding-bottom: 40px;
        }
    }
}


@media (max-width: 480px) {
    .home {
        .about-wrapper {
            padding-bottom: 0;
        }

        .project-carousel-wrapper {
            .project-carousel-container {

                .project-slide-inner {
                    height: 39.375vw;
                }

                .project-slide {
                    flex: 0 0 70vw;
                }

                .project-content {
                    display: none;
                    width: 100%;
                    top: -35px;
                    left: -10px;
                }

                .project-carousel {
                    gap: 0;
                }

                .carousel-arrow {
                    width: 35px;
                    height: 35px;
                    margin: 0 5px;
                }

                .project-content {
                    padding: 10px 15px;
                }

                .project-title {
                    font-size: 0.95em;
                }
            }

            .carousel-dots {

                margin-top: 20px;
            }
        }
    }
}




/* ---------- プライバシーポリシー　レイアウト　---------- */
/* ----- sp レイアウト ----- */
.page-id-492 {
    .tos-area {
        .s-wrapper {
            padding: 8px 5.5555vw 35px;

            h1 {
                font-size: 1.258rem;
                font-weight: bold;
                line-height: 1.35;
                text-align: center;
            }

            hr {
                border: 1px solid var(--border-color);
            }

            h2 {
                margin-bottom: 14px;
                line-height: 1.35;
                font-weight: bold;
                counter-increment: section;
            }

            h2::before {
                content: "第" counter(section) "条";
                font-weight: bold;
            }

            h3 {
                margin-bottom: 13px;
                font-weight: bold;
                line-height: 1.375;
            }

            p,
            ul li,
            table {
                font-size: 14px;
                line-height: 1.7142;
            }

            p:has(+ ul) {
                margin-bottom: 0;
            }

            a {
                text-decoration: underline;
                text-decoration-color: var(--text-color);
                text-decoration-thickness: 1px;
            }

            ul {
                list-style: none;
                padding-left: 0.7em;
                margin-top: 0;

                li {
                    position: relative;
                    padding-left: 1em;

                    &::before {
                        content: "-";
                        margin-right: 0.6em;
                        position: absolute;
                        left: 0;
                    }
                }

                .nostyle::before {
                    display: none;
                }
            }

            table,
            tr,
            td {
                border: none;
                padding: 0;
            }

            .aligncenter {
                margin: auto;
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 450px) {
    .page-id-492 {
        .tos-area {
            .s-wrapper {
                padding: 8px 6.5104vw 35px;

                h1 {
                    font-size: 1.5625rem;
                }

                h2 {
                    margin-bottom: 13px;
                }

                p,
                ul li,
                ol li,
                table {
                    font-size: 16px;
                    line-height: 1.75;
                }

                ul {
                    padding-left: 1.5em;
                }

                h3 {
                    margin-bottom: 12px;
                    line-height: 1.4;
                }

                h2,
                h3 {
                    font-size: 1.25rem;
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 768px) {
    .page-id-492 {
        .tos-area {
            .s-wrapper {
                padding: 50px min(9.375vw, 120px) 77px;

                h1 {
                    font-size: 2.5rem;
                }

                hr {
                    display: none;
                }

                h2 {
                    margin-bottom: 17px;
                }

                p,
                ul li,
                ol li,
                table {
                    font-size: 1.25rem;
                }

                ul {
                    padding-left: 2.5em;
                }

                h3 {
                    margin-bottom: 16px;
                    line-height: 1.3666;
                }

                h2,
                h3 {
                    font-size: 1.875rem;
                }
            }
        }
    }
}





/* ---------- ブログ一覧ページ ---------- */
/* -----sp レイアウト ----- */
.page-id-287 {
    .blog-list-area {
        .s-wrapper {
            padding: 9px 5.5555vw 50px;

            .tab-area {
                .tab-header {
                    margin-bottom: 16px;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid var(--border-color);

                    h1 {
                        margin: 0;
                        font-size: 1.25rem;
                        font-weight: bold;
                        line-height: 1.4;
                    }

                    .tab-list {
                        margin: 9px 3.1111vw 0;
                        display: flex;
                        justify-content: flex-end;
                        gap: 10px;

                        li {
                            button {
                                height: 29px;
                                width: 14.6666vw;
                                font-size: 3.3333vw;
                                color: var(--text-color);
                                font-weight: bold;
                                text-align: center;
                                background-color: inherit;
                                border: 1px solid var(--border-color);
                                margin-bottom: -1px;

                                &.active {
                                    border-bottom: 1px solid var(--white-color);
                                }
                            }
                        }
                    }
                }

                .tab-panel {
                    .tab-items-wrap {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 29px 4.1666vw;

                        .tab-item {
                            margin-bottom: 20px;

                            .post-date {
                                text-align: right;

                                time {
                                    font-weight: var(--semibold);
                                    margin-bottom: 8px;
                                    line-height: 1.375;
                                }
                            }

                            .thumb {
                                margin-bottom: 6px;

                                img {
                                    width: 100%;
                                    height: calc(46.5278vw * 250 / 399);
                                    object-fit: cover;
                                    object-position: center center;

                                }
                            }

                            h2 {
                                font-size: 0.9375rem;
                                line-height: 1.3333;
                            }
                        }
                    }

                    .load-more {
                        height: 42px;
                        width: 56.4444vw;
                        margin: auto;
                        font-size: 1.25rem;
                        font-weight: bold;
                        line-height: 42px;
                        text-align: center;
                        color: var(--white-color);
                        background-color: var(--text-color);
                        border-radius: 21px;
                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 450px) {
    .page-id-287 {
        .blog-list-area {
            .s-wrapper {
                padding: 33px 4.5573vw 62px;

                .tab-area {
                    .tab-header {
                        margin-bottom: 18px;

                        h1 {
                            font-size: 1.5625rem;
                            line-height: 1.36;
                        }

                        .tab-list {
                            margin: 20px 3.776vw 0 0;
                            gap: 1.5625vw;

                            li {
                                button {
                                    height: 38px;
                                    width: 18.2291vw;
                                    font-size: 1.125rem;
                                }
                            }
                        }
                    }

                    .tab-panel {
                        .tab-items-wrap {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 29px 4.1666vw;

                            .tab-item {
                                margin-bottom: 0;

                                .post-date {
                                    time {
                                        font-size: 1.125rem;
                                        margin-bottom: 10px;
                                        line-height: 1.3333;
                                    }
                                }

                                .thumb {
                                    margin-bottom: 8px;

                                    img {
                                        height: calc(47.526vw *291 / 333)
                                    }
                                }

                                h2 {
                                    width: 100%;
                                    height: calc(1.25rem * 1.5555 * 2);
                                    font-size: 1.25rem;
                                    line-height: 1.5555;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    line-clamp: 2;
                                    overflow: hidden;
                                }
                            }
                        }

                        .load-more {
                            margin-top: 37px;
                            height: 44px;
                            width: 32.0312vw;
                            font-size: 1.375rem;
                            line-height: 44px;
                            border-radius: 22px;
                        }
                    }
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 768px) {
    .page-id-287 {
        .blog-list-area {
            .s-wrapper {
                padding: 51px min(2.6562vw, 34px) 70px;

                .tab-area {
                    .tab-header {
                        margin-bottom: 22px;

                        h1 {
                            font-size: 2.5rem;
                            line-height: 1.375;
                        }

                        .tab-list {
                            margin: 33px 20px 0 0;
                            gap: 13px;

                            li {
                                button {
                                    height: 41px;
                                    width: 150px;
                                    font-size: 1.25rem;
                                }
                            }
                        }
                    }

                    .tab-panel {
                        .tab-items-wrap {
                            grid-template-columns: 1fr 1fr 1fr;
                            gap: 42px min(2.6562vw, 34px);

                            .tab-item {
                                .post-date {
                                    time {
                                        font-size: 1.125rem;
                                        margin-bottom: 13px;
                                        line-height: 1.3333;
                                    }
                                }

                                .thumb {
                                    margin-bottom: 9px;

                                    img {
                                        height: min(calc(((100vw - min(2.6562vw, 34px) * 4) / 3) * 332 / 380), 332px);
                                    }
                                }

                                h2 {
                                    width: 100%;
                                    height: calc(1.125rem * 1.5555 * 2);
                                    font-size: 1.125rem;
                                }
                            }
                        }

                        .load-more {
                            margin-top: 57px;
                            height: 60px;
                            width: min(26.0937vw, 334px);
                            font-size: 1.875rem;
                            line-height: 60px;
                            border-radius: 30px;
                        }
                    }
                }
            }
        }
    }
}





/* ---------- ブログ個別投稿 ページ ---------- */
/* ----- sp レイアウト ----- */
.single-post {
    .post-area {
        .s-wrapper {
            padding: 10px 5.7777vw 35px;
        }

        .contents-area {
            .heading01 {
                margin-bottom: 10px;
                font-size: 1.25rem;
                font-weight: bold;
            }

            .post-thumb {
                margin-bottom: 5px;

                img {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                }
            }

            .post-date {
                margin-bottom: 2.5px;
                font-weight: var(--semibold);
                line-height: 1.375;
                text-align: right;
            }

            .post-title {
                margin-bottom: 23px;
                font-size: 1.25rem;
                font-weight: bold;
                line-height: 1.35;
            }

            .post-content {
                font-size: 0.875rem;
                line-height: 1.8333;
                margin-bottom: 62px;

                h2 {
                    font-size: 1.15rem;
                }

                h3 {
                    font-size: 1.05rem;
                }

                h4 {
                    font-size: 0.9rem;
                }

                h5,
                h6 {
                    font-size: 0.875rem;
                }

                h2,
                h3,
                h4,
                h5,
                h6 {
                    margin-top: 1.5em;
                    margin-bottom: 0;
                    font-weight: bold;
                    line-height: 1.35;

                    &.underline {
                        display: inline-block;
                        border-bottom: 1px solid var(--black-color);
                    }
                }

                h2.bubble,
                h3.bubble,
                h4.bubble,
                p.bubble {
                    position: relative;
                    display: inline-block;
                    text-indent: 0.8em;
                    line-height: 2.4;
                    border-left: 2px solid black;
                    border-bottom: 2px solid black;

                    &::after {
                        margin-top: -1px;
                        margin-left: 30px;
                        position: absolute;
                        display: block;
                        content: "";
                        width: 24px;
                        height: 24px;
                        background-image: url(../img/bubble_img.svg);
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }

                p {
                    margin-top: 0.875em;
                    margin-bottom: 0;
                }

                h2+p,
                h3+p,
                h4+p,
                h5+p,
                h6+p {
                    margin-top: 1em;
                }

                a {
                    text-decoration: underline;
                    text-decoration-color: var(--text-color);
                    text-decoration-thickness: 1px;
                }

                ul,
                ol {
                    margin: 0.6em 0 0.6em 1em;

                    li {
                        line-height: 1.6;
                        list-style-position: outside;
                    }
                }

                ol {
                    padding-left: 0.7em;
                }

                ul li {
                    list-style-type: disc;
                }

                ol li {
                    list-style-type: decimal;
                }

                figure {
                    margin-top: 1em;
                    margin-bottom: 1.5em;
                }

                blockquote {
                    margin: 0;
                    padding: 44px 4em;
                    border: 10px solid var(--quote-bdcolor);
                }
            }
        }
    }
}

/* ---------- teblet レイアウト ---------- */
@media screen and (width > 450px) {
    .single-post {
        .post-area {
            .s-wrapper {
                padding: 33px 13.0208vw 57px;
            }

            .contents-area {
                .heading01 {
                    margin-bottom: 31px;
                    font-size: 1.5625rem;
                }

                .post-thumb {
                    margin-bottom: 7px;
                }

                .post-date {
                    margin-bottom: 10px;
                    font-size: 1.25rem;
                    line-height: 1.6666;
                }

                .post-title {
                    margin-bottom: 22px;
                    font-size: 1.4375rem;
                    line-height: 1.3478;
                }

                .post-content {
                    margin-bottom: 0;
                    font-size: 1rem;
                    line-height: 1.625;

                    h2 {
                        font-size: 1.25rem;
                    }

                    h3 {
                        font-size: 1.15rem;
                    }

                    h4 {
                        font-size: 1.1rem;
                    }

                    h5,
                    h6 {
                        font-size: 1rem;
                    }

                    ul,
                    ol {
                        margin: 0.6em 0 0.6em 1.5em;
                    }

                    blockquote {
                        padding: 44px 11.1111vw 39px;
                    }
                }
            }
        }
    }
}


/* ---------- pc レイアウト ---------- */
@media screen and (width > 768px) {
    .single-post {
        .post-area {
            .s-wrapper {
                padding: 51px min(15.1562vw, 194px) 96px;
            }

            .contents-area {
                .heading01 {
                    text-indent: max(-12.5vw, -160px);
                    margin-bottom: 62px;
                    font-size: 2.5rem;
                }

                .post-thumb {
                    margin-bottom: 20px;
                }

                .post-date {
                    margin-bottom: 14px;
                    font-size: 1.25rem;
                    line-height: 1.3333;
                }

                .post-title {
                    margin-bottom: 29px;
                    font-size: 1.875rem;
                    line-height: 1.1666;
                }

                .post-content {
                    font-size: 1.25rem;
                    line-height: 1.5555;

                    h2 {
                        font-size: 1.55rem;
                    }

                    h3 {
                        font-size: 1.45rem;
                    }

                    h4 {
                        font-size: 1.35rem;
                    }

                    h5,
                    h6 {
                        font-size: 1.25rem;
                    }

                    ul {
                        margin: 0.6em 0 0.6em 3em;
                    }

                    blockquote {
                        padding: 44px 4em;
                    }
                }
            }
        }
    }
}




/* ------ ブログ個別投稿 ページネーション ------ */
/* ----- sp レイアウト ------ */
.single-post {
    .pagination {
        margin-top: 165px;
        height: 28px;
        text-align: center;
        display: flex;
        justify-content: center;

        .page-list {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 11.5555vw;

            li {

                a,
                .disabled {
                    display: block;
                    width: 26.6666vw;
                    height: 28px;
                    background-color: var(--text-color);
                    border-radius: 14px;
                    font-size: 0.875rem;
                    font-weight: bold;
                    line-height: 28px;
                    text-align: center;
                    text-decoration: none;
                    color: var(--white-color);
                }

                .disabled {
                    pointer-events: none;
                    opacity: 0.5;
                }
            }
        }
    }
}

/* ----- teblet レイアウト ----- */
@media screen and (width > 450px) {
    .single-post {
        .pagination {
            margin-top: 160px;
            height: 37px;

            .page-list {
                gap: 8.8541vw;

                li {

                    a,
                    .disabled {
                        width: 19.9218vw;
                        height: 37px;
                        line-height: 37px;
                        font-size: 1.25rem;
                        border-radius: 18.5px;
                    }
                }
            }
        }
    }
}

/* ---------- pc レイアウト ---------- */
@media screen and (width > 768px) {
    .single-post {
        .pagination {
            margin-top: 148px;
            height: 60px;

            .page-list {
                gap: min(8.75vw, 112px);

                li {

                    a,
                    .disabled {
                        width: min(19.5312vw, 250px);
                        height: 60px;
                        line-height: 60px;
                        font-size: 1.875rem;
                        border-radius: 30px;
                    }
                }
            }
        }
    }
}




/* ---------- プロジェクト個別投稿ページ ---------- */
/* ----- pc レイアウト ----- */
.single-project {
    box-sizing: border-box;

    .container {
        .project-data {
            .remaining-days {
                span {
                    margin-left: 3.2em;
                }
            }
        }
    }

    .container2 {
        .contents {
            .s-wrapper {
                padding: 0;
                font-size: 1.125rem;
                line-height: 1.8888;
                margin-bottom: 62px;

                h2 {
                    font-size: 1.55rem;
                }

                h3 {
                    font-size: 1.45rem;
                }

                h4 {
                    font-size: 1.35rem;
                }

                h5,
                h6 {
                    font-size: 1.125rem;
                }

                h2,
                h3,
                h4,
                h5,
                h6 {
                    margin-top: 1em;
                    margin-left: 1.5em;
                    font-weight: bold;
                    line-height: 1.35;

                    &.underline {
                        display: inline-block;
                        border-bottom: 1px solid var(--black-color);
                    }
                }

                .outline {

                    & h2,
                    & h3,
                    & h4,
                    & h5,
                    & h6 {
                        margin-left: 0;
                    }
                }

                h2.bubble,
                h3.bubble,
                h4.bubble,
                p.bubble {
                    position: relative;
                    left: 1.5em;
                    display: inline-block;
                    text-indent: 0.8em;
                    line-height: 2.4;
                    border-left: 2px solid black;
                    border-bottom: 2px solid black;

                    &::after {
                        margin-top: -1px;
                        margin-left: 30px;
                        position: absolute;
                        display: block;
                        content: "";
                        width: 24px;
                        height: 24px;
                        background-image: url(../img/bubble_img.svg);
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }

                p {
                    margin-top: 0.875em;
                }

                p.has-large-font-size {
                    font-size: 1.125em;
                    line-height: 1.8888;
                }

                p.has-small-font-size {
                    font-size: 0.75em;
                }

                h2+p,
                h3+p,
                h4+p,
                h5+p,
                h6+p {
                    margin-top: 1em;
                }

                ul,
                ol {
                    margin: 0.6em 0 0.6em 3em;

                    li {
                        line-height: 2.0625;
                        list-style-position: outside;
                    }
                }

                ul li {
                    list-style-type: disc;
                }

                ol li {
                    list-style-type: decimal;
                }

                figure {
                    margin-top: 1em;
                    margin-bottom: 1.5em;
                }

                .outline:has(p) {
                    border: 2px solid black;
                    padding: 36px 9em;
                }

                blockquote {
                    margin: 0;
                    padding: 36px 3.5em;
                    border: 10px solid var(--quote-bdcolor);
                }


            }
        }

        .block {
            .article-header {
                font-size: 3.2rem;
                font-weight: bold;
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width < 769px) {
    .single-project {
        .container2 {
            .contents {
                .s-wrapper {
                    padding: 0 6.6666vw;
                    margin-bottom: 0;
                    font-size: 1.125rem;
                    line-height: 1.8888;

                    h2 {
                        font-size: 1.7rem;
                        max-width: 86.6666vw;
                    }

                    h3 {
                        font-size: 1.5rem;
                    }

                    h4 {
                        font-size: 1.3rem;
                    }

                    h5,
                    h6 {
                        font-size: 1.125rem;
                    }

                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        margin-left: 0;
                    }

                    h2.bubble,
                    h3.bubble,
                    h4.bubble,
                    p.bubble {
                        left: 0;
                    }

                    ul,
                    ol {
                        margin-left: 1.2em;
                    }

                    .outline {
                        padding: 6.25vw;
                    }

                    blockquote,
                    .outline:has(p) {
                        padding: 38px 10.02vw 31px;
                    }


                }
            }
        }
    }
}

/* ----- sp レイアウト ----- */
@media screen and (width < 451px) {
    .single-project {
        .container {
            .block {
                .article-header {
                    font-size: 1.6rem;
                    text-align: center;
                }
            }
        }

        .container2 {
            .contents {
                .s-wrapper {
                    padding: 0 2vw;


                    ul,
                    ol {
                        margin-left: 0.7em;
                    }

                    blockquote,
                    .outline:has(p) {
                        padding: 0.7rem;
                    }
                }
            }
        }
    }
}