@charset "UTF-8";
:root {
    --main-font-color: #fff;
    --sub-color: #333333;
    --gray-dark: #555555;
    --gray-bright: #717171;
    --accent-color: #B4AC97;
    --bg-color: rgb(30, 30, 30);
}
body {
    overflow-x: visible !important;
}
/*--------------------------------
 下層_共通
---------------------------------*/
.lower-main-visual {
    padding: 180px 0 100px;
}
.lower-mv-heading {
    flex-direction: column;
    align-items: flex-start;
}
.lower-mv-heading>h2 {
    text-transform: capitalize;
    font-size: 45px;
    letter-spacing: 3px;
    font-weight: normal;
}
.lower-mv-heading>p {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 4.5px;
}
.lower-mv-heading>p::before {
    content: "";
    border-top: 2px solid var(--gray-dark);
    width: 55px;
    margin-right: 20px;
}
.lower-section-heading {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
}
.lower-section-heading>h2 {
    text-transform: capitalize;
    font-size: 34px;
    /* letter-spacing: 3px; */
    font-weight: normal;
    line-height: 1.2;
}
.lower-section-heading>p {
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 0.8;
}
.lower-section {
    margin-bottom: 110px;
    /* overflow-x: hidden; */
}
.lower-section.is-last {
    margin-bottom: 117px;
}
.underline {
    text-decoration: underline;
    text-decoration-color: var(--gray-bright);
}
.lower-main-visual .lower-mv-img {
    margin-top: 100px;
}
.lower-main-visual .lower-mv-img img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
    filter: brightness(75%);
}
/* table */
.table-base {
    width: 100%;
    /* margin-bottom: 40px; */
    border-collapse: collapse;
}
.table-base tr {
    border-top: 1px solid var(--gray-dark);
    border-bottom: 1px solid var(--gray-dark);
}
.table-base th,
.table-base td {
    padding: 32px 40px 32px 12px;
}
.table-base th {
    text-align: left;
    width: 30%;
    vertical-align: top;
    font-weight: 700;
}
.table-base td {
    line-height: 2.06;
}
/* table_end */
/* list-style */
.ul-list {}
.ul-list li {
    position: relative;
    margin-left: 1.5em;
}
.ul-list li::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--main-font-color);
    top: 50%;
    left: -3%;
    transform: translate(-50%, -50%);
}
/* list-style_end */
/* headerカレント */
.nav-link.current {
    color: var(--accent-color);
}
.text01 {
    line-height: 2.06;
}
/*--------------------------------
 下層_NEWS一覧
---------------------------------*/
/* タブに関して */
/* 左側タブ */
.lower-news .list-box {
    width: calc(100% - 87%);
}
.tab-list-title {
    font-size: 18px;
    color: var(--accent-color);
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 0.8rem;
}
.lower-news .tab-list {
    padding-left: 1.2rem;
    margin-bottom: 70px;
}
.lower-news .tab-list {
    margin-bottom: 0;
}
.lower-news .category-box {
    margin-bottom: 70px;
}
@media screen and (min-width: 600px) {
    .list-box .tab-list .tab-item:hover {
        color: var(--gray-bright);
    }
}
.list-box .tab-list .tab-item.active {
    color: var(--gray-bright);
    cursor: default;
}
/* 左側タブ_end */
/* 右側タブ */
.lower-news .tab-panel {
    width: calc(100% - 17%);
    margin-top: 0;
}
.lower-news .no-posts {
    padding: 1rem;
}
/* 右側タブ_end */
/* ページナビ */
.wp-pagenavi-area {
    margin-top: 60px;
}
.wp-pagenavi {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-pagenavi .page {
    display: inline-block;
    text-align: center;
    width: 42px;
    height: 42px;
    line-height: 41px;
    border: solid 2px #d9d9d9;
    border-radius: 21px;
    margin: auto 6px;
    transition: 0.3s ease-out;
    color: var(--main-font-color);
    font-weight: 700;
    font-size: 16px;
}
.wp-pagenavi .page:hover {
    background: #d9d9d9;
    color: var(--sub-color);
}
.wp-pagenavi .current {
    display: inline-block;
    text-align: center;
    width: 42px;
    height: 42px;
    line-height: 41px;
    color: var(--sub-color);
    font-weight: 700;
    font-size: 16px;
    background: #d9d9d9;
    border: solid 1px #d9d9d9;
    border-radius: 999px;
    margin: auto 6px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .extend,
.wp-pagenavi .first,
.wp-pagenavi .last {
    line-height: 42px;
    margin: auto 8px;
    transition: 0.3s ease-out;
}
.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover,
.wp-pagenavi .first:hover,
.wp-pagenavi .last:hover {
    color: #d9d9d9;
    color: var(--sub-font-color);
}
/* ページナビ_end */
/*--------------------------------
 下層_NEWS詳細
---------------------------------*/
.news-main-area {
    margin-bottom: 80px;
}
/* 前へ、次へボタン */
.article-link-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 17px;
}
.article-link .back-list {
    text-align: center;
    margin-bottom: 30px;
}
.next-btn,
.prev-btn {
    position: relative;
    display: flex;
    align-items: center;
}
.prev-btn {
    margin-right: auto;
}
.next-btn {
    margin-left: auto;
}
.next-btn a,
.prev-btn a {
    transition: .5s;
    display: inline-flex;
    align-items: center;
}
.next-btn a:hover,
.prev-btn a:hover {
    opacity: 0.7;
}
.next-btn a {
    padding-right: 54px;
}
.prev-btn a {
    padding-left: 54px;
}
.next-btn a::before,
.prev-btn a::before {
    position: absolute;
    content: "";
    width: 36px;
    height: 36px;
    background: transparent;
    border: solid 1px var(--main-font-color);
    border-radius: 50%;
    transition: transform 0.3s;
}
.next-btn a::before {
    /* top: -0.4rem; */
    right: 0;
}
.prev-btn a::before {
    /* top: -0.4rem; */
    left: 0;
}
.next-btn a::after,
.prev-btn a::after {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--main-font-color);
    border-right: 1px solid var(--main-font-color);
    transition: transform .3s;
}
.next-btn a::after {
    transform: rotate(45deg);
    top: 9px;
    right: 17px;
}
.prev-btn a::after {
    transform: rotate(-134deg);
    top: 9px;
    left: 17px;
}
/* 前へ、次へボタン_end */
.date-another {
    font-size: 16px;
    letter-spacing: 1.5px;
}
.news-desc .flex.data-area {
    justify-content: space-between;
    margin-bottom: 20px;
}
.news-desc .title {
    font-size: 28px;
    line-height: 1.5;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-dark);
    margin-bottom: 40px;
    font-weight: 700;
}
.news-desc .main>p {
    line-height: 2.06;
    margin-bottom: 1rem;
}
.news-desc .main>p:last-child {
    padding-bottom: 1.5rem;
}
.news-desc .wp-block-image img {
    padding: 2rem 0;
}
/*--------------------------------
 下層_Works詳細
---------------------------------*/
.js-title span {
    display: inline-block;
}
/* worksメインビジュアル */
.works-mv-area {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.works-mv-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.works-mv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.works-mv-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-font-color);
    text-align: center;
    z-index: 1;
    text-shadow: 0 0 15px #333333;
    width: 100%;
    padding: 0 5%;
}
.works-desc h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 0.2em;
}
.works-desc .js-subtitle {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1.4;
}
/* worksメインビジュアル_end */
.works-main-area {
    margin-top: 95px;
    margin-bottom: 80px;
}
.works-main-area .data-area-title {
    margin-bottom: 0.8em;
}
.works-main-area .data-area-title.flex {
    flex-wrap: wrap;
    column-gap: 0.8em;
}
.works-main-area .data-area-title>p {
    opacity: 0.8;
}
.works-main-area .keyword {
    font-size: 14px;
    margin-bottom: 3rem;
}
.works-main-area .keyword dl {
    flex-wrap: wrap;
    row-gap: 0.5em;
}
.works-main-area .keyword dt {
    text-transform: capitalize;
}
.works-main-area .keyword dd {
    padding-left: 0.3rem;
}
.works-main-area .keyword dd ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    /* リンク間の余白 */
    list-style: none;
    padding: 0;
    margin: 0;
}
.works-main-area .keyword dd ul li {
    position: relative;
}
.works-main-area .keyword dd ul li::after {
    content: "/";
    margin: 0 0.8em;
    color: var(--gray-dark);
}
.works-main-area .keyword dd ul li:last-child::after {
    content: "";
}
.works-main-area .keyword.flex {
    gap: 1rem;
    flex-wrap: wrap;
    row-gap: 0.5em;
}
.works-main-area .edit-area-text {
    margin-bottom: 3rem;
}
.works-main-area .edit-area-text>h3 {
    margin-bottom: 0.8em;
    font-weight: 700;
    font-size: 18px;
}
.works-main-area .edit-area-text .text {
    margin-bottom: 1.2rem;
    line-height: 2.06;
}
.works-main-area .edit-area-img .img {
    padding: 2.5rem 0;
}
/* GSAPアニメーション */
.js-fade {
    clip-path: circle(0% at 0% 0%);
    opacity: 0;
    filter: blur(4px);
    /* ← 最初はぼかし状態 */
}
/* GSAPアニメーション_end */
/*--------------------------------
 下層_Works一覧
---------------------------------*/
.works-main-area-all {
    margin-top: 95px;
    margin-bottom: 80px;
}
.works-flex {
    display: flex;
    column-gap: 40px;
    row-gap: 60px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.works-flex-item {
    flex: 0 0 48%;
}
@media screen and (max-width: 1111px) {
    .works-flex-item {
        flex: 0 0 46%;
    }
}
.works-flex-item figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease, filter 0.5s ease;
}
.img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}
.works-main-area>.no-posts {
    padding: 2rem 0;
}
@media screen and (min-width: 600px) {
    .works-flex-item a:hover .img-wrap img {
        transform: scale(1.1);
        filter: brightness(0.6);
        cursor: pointer;
    }
}
.works-flex-item figcaption {
    margin-top: 20px;
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    transition: 0.5s;
}
@media screen and (min-width: 600px) {
    .works-flex-item a:hover figcaption {
        opacity: 0.5;
    }
}
/* 施工事例一覧モーダル */
/* モーダルを開くボタン */
.modal-open {
    font-size: 16px;
    width: 400px;
    height: 60px;
    color: #fff;
    background: var(--accent-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    letter-spacing: 1.5px;
}
/* モーダルと背景の指定 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 10;
}
/* モーダルの擬似要素の指定 */
.modal:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.2em;
}
/* クラスが追加された時の指定 */
.modal.is-active {
    opacity: 1;
    visibility: visible;
}
/* モーダル内側の指定 */
.modal-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 700px;
    width: 90%;
}
/* モーダルを閉じるボタンの指定 */
.modal-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--gray-bright);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--gray-bright);
    transition: .5s;
}
/* モーダルのコンテンツ部分の指定 */
.modal-content {
    background: #fff;
    text-align: left;
    line-height: 1.8;
    padding: 20px;
    color: var(--sub-color);
}
/* モーダルのコンテンツ部分のテキストの指定 */
.modal-content p {
    margin: 1em 0;
}
/* 施工事例一覧モーダル_end */
/* モーダルボタン */
/* モーダルボタンプラス */
.dli-plus {
    display: inline-block;
    vertical-align: middle;
    color: var(--main-font-color);
    line-height: 1;
    width: 1em;
    height: 0.1em;
    background: currentColor;
    border-radius: 0.1em;
    position: relative;
}
.dli-plus::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
}
/* モーダルボタンプラス_end */
/* モーダルボタン_end */
/* モーダル内 */
.searchandfilter h4 {
    margin: 9px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
.searchandfilter input[type="checkbox"] {
    appearance: none;
    width: 23px;
    height: 23px;
    border: 1px solid var(--gray-bright);
    background-color: #fff;
    cursor: pointer;
    margin-right: 0.5em;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.searchandfilter input[type="checkbox"]:checked {
    background-color: var(--gray-bright);
    border-color: var(--main-font-color);
    position: relative;
}
.searchandfilter input[type="checkbox"]:checked::before {
    content: "✔";
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
}
/* チェックボックスのリスト全体を2列グリッドに */
.searchandfilter ul ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
    padding: 0;
    margin: 0;
}
/* 各チェックボックス項目 */
.searchandfilter ul ul li {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
/* ラベルの幅と整え方 */
.searchandfilter label {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
}
.searchandfilter li {
    margin-bottom: 5px;
}
/* Searchボタンそのもののスタイル */
.searchandfilter input[type="submit"] {
    padding: 12px 52px;
    font-size: 16px;
    font-weight: bold;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin: 2em auto 0;
    transition: .5s;
}
@media screen and (min-width: 600px) {
    .searchandfilter input[type="submit"]:hover,
    .modal-close:hover {
        opacity: 0.8;
    }
}
/* モーダル内_end */
.searchandfilter input[type="submit"]:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/*--------------------------------
 下層_company
---------------------------------*/
.company .lower-main-visual .lower-mv-img img {
    object-position: 50% 56%;
    filter: brightness(70%);
}
.greeting-flex {
    gap: 50px;
    align-items: flex-end;
    flex-direction: row-reverse;
}
.greeting-flex .greeting-flex-text {
    /* flex: 1; */
}
.greeting-flex-img {
    width: 35%;
    /* flex: 1; */
}
.greeting-flex .greeting-flex-text p {
    line-height: 2.06;
    margin-bottom: 1.6em;
}
.greeting-flex .greeting-flex-text p:nth-child(2) {
    /* margin-bottom: 4em; */
}
/* .greeting-flex .greeting-flex-text p:last-child {
    padding-right: 1em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    margin-bottom: 0;
}
.greeting-flex .greeting-flex-text p:last-child span {
    font-size: 14px;
    opacity: 0.8;
    padding-right: 1em;
} */
.greeting-flex .greeting-flex-text p.is-last {
    margin-bottom: 4em;
}
.greeting-david {
    /* padding-right: 1em; */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    margin-bottom: 0;
}
.greeting-david>p {
    font-size: 14px;
    opacity: 0.8;
    padding-right: 1em;
    margin-bottom: 0.5em !important;
}
.greeting-david img {
    padding-left: 0.8em;
}
.greeting-slider,
.history {
    width: 100%;
    overflow: hidden;
}
.swiper4 .swiper-wrapper {
    transition-timing-function: linear;
}
/* 沿革 */
.history-slide {
    position: relative;
}
.history-slide .swiper-slide {
    aspect-ratio: 125 / 91;
    width: 100%;
    height: 100%;
    max-width: 375px;
    max-height: 273px;
    border: 1px solid var(--gray-dark);
    border-radius: 5px;
    padding: 155px 50px 30px;
    box-sizing: border-box;
    /* ← これを追加！ */
    position: relative;
}
@media screen and (max-width: 1120px) {
    .history-slide .swiper-slide {
        padding: 127px 30px 30px;
    }
}
.history-slide .swiper-slide .data {
    font-size: 60px;
    font-weight: 700;
    opacity: 0.5;
    position: absolute;
    top: 10%;
    right: 12%;
}
/* スライダー */
.swiper-btn {
    display: flex;
    gap: 1em;
}
.swiper-controller {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 65px;
    flex-wrap: wrap;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
    left: auto;
    width: auto;
}
/* ナビボタンのベーススタイル */
.swiper-button-prev,
.swiper-button-next {
    position: static;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    /* background-color: #ccc; */
    color: var(--main-font-color);
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-font-color);
    transition: all 0.3s ease;
    cursor: pointer;
}
/* ホバー時：白背景＋グレー枠 */
@media screen and (min-width: 600px) {
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        background-color: var(--main-font-color);
        border-color: var(--gray-dark);
        color: var(--gray-dark);
    }
}
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 13px;
    line-height: 1;
    font-weight: bold;
}
/* スライダー_end */
/* マウスストーカー */
.history-slide #stkr::after {
    content: "swipe" !important;
    font-size: 16px !important;
}
/* マウスストーカー_end */
/* 沿革_end */
.access .text {
    line-height: 2.06;
    margin-bottom: 40px;
}
.map iframe {
    width: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
/* csr */
.csr .text01 {
    margin-bottom: 40px;
}
.csr .csr-item h3 {
    font-size: 20px;
    border: 1px solid var(--main-font-color);
    display: inline-block;
    padding: 0.3em 0.8em;
    letter-spacing: 2px;
    margin-bottom: 15px;
    border-radius: 5px;
}
.csr .csr-item > p {
    margin-bottom: 20px;
}
.csr .csr-item .flex {
    gap: 20px;
}
/* csr_end */

.outline .fp-banner a img{
    width: 150px;
    height: auto;
}
/*--------------------------------
 下層_ourstyle
---------------------------------*/
/* ourstyle_共通 */
.ourstyle h3 {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.83;
}
.ourstyle-section {
    margin-bottom: 160px;
}
/* ourstyle_共通_end */
/* ourstyle_desc */
.ourstyle-lead {
    width: 100%;
    height: 100dvh;
    min-height: 700px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.ourstyle-lead .text-flowing {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    top: 0px;
    overflow: hidden;
}
.ourstyle-lead .text-area {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    padding: 0px 0;
}
.ourstyle-lead .text-area>h2 {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 10px;
    line-height: 1.24;
    margin-bottom: 40px;
}
.ourstyle-lead .text-area p {
    line-height: 3.38;
    margin-bottom: 2rem;
}
.ourstyle-lead .text-area p:last-child {
    margin-bottom: 0;
}
.ourstyle-lead .box-img img {
    box-shadow: 0px 5px 20px 0px rgba(30, 30, 30, 1);
    filter: brightness(90%);
}
/* 左側画像 */
.ourstyle-lead .img-leftbox {
    position: absolute;
    left: 0;
    top: 0;
    /* top: 200px; */
}
.ourstyle-lead .img-leftbox .box-img:nth-child(1) {
    margin-top: 0px;
    margin-left: 100px;
}
.ourstyle-lead .img-leftbox .box-img:nth-child(2) {
    /* margin-left: 40px; */
    position: inherit;
    left: 24px;
    top: 175px;
    z-index: 1
}
.ourstyle-lead .img-leftbox .box-img:nth-child(3) {
    margin-left: 0px;
    position: inherit;
    top: 500px;
}
.ourstyle-lead .img-rightbox {
    position: absolute;
    right: 0;
    top: 0;
}
/* 左側画像_end */
/* 右側画像 */
.ourstyle-lead .img-rightbox {
    position: absolute;
    right: 0;
    top: 0;
    /* top: 200px; */
}
.ourstyle-lead .img-rightbox .box-img:nth-child(1) {
    margin-top: 0px;
    margin-left: 150px
}
.ourstyle-lead .img-rightbox .box-img:nth-child(2) {
    /* margin-left: 40px; */
    position: inherit;
    top: 250px;
    left: 0px;
    z-index: 1
}
.img-rightbox .box-img:nth-child(3) {
    /* margin-bottom: 00px; */
    margin-left: 120px;
    position: inherit;
    z-index: -1;
    top: 600px;
}
/* 右側画像_end */
/* ourstyle_desc_end */
/* 強み */
.block {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 10%;
}
.block-one {
    background: #212E32;
    background-image: url(../images/ourstyle/feature01_bg_img.webp);
    background-size: cover;
    z-index: 1;
}
.block-two {
    background: #212E32;
    background-image: url(../images/ourstyle/feature02_bg_img.webp);
    background-size: cover;
    z-index: 2;
}
.block-three {
    background: #212E32;
    background-image: url(../images/ourstyle/feature03_bg_img.webp);
    background-size: cover;
    z-index: 3;
}
.block-four {
    background: #212E32;
    background-image: url(../images/ourstyle/feature04_bg_img.webp);
    background-size: cover;
    z-index: 4;
}
.block-five {
    background: #212E32;
    background-image: url(../images/ourstyle/feature05_bg_img.webp);
    background-size: cover;
    z-index: 5;
}
.feature-top,
.feature-bottom {
    /* position: absolute;
    left: 13%; */
}
.feature-top {
    /* top: 14%; */
}
.feature-bottom {
    /* bottom: 20%; */
}
.feature-top .title h2,
.feature-bottom .text-area>p {
    text-shadow: 0 0 15px #333333;
}
.feature-top .title h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 6px;
    line-height: 1.31;
    padding-top: 1em;
}
.feature-bottom .text-area>p {
    font-weight: 600;
    line-height: 2.06;
}
.feature-bottom .text-area {
    width: 100%;
    max-width: 960px;
    padding: 0 20px;
}
.block .btn01 {
    margin-top: 2.5em;
}
/* 強み_end */
/* 安心の家づくり体制 */
.homebuilding {
    padding-top: 100px;
    position: relative;
    z-index: 6;
}
.ourstyle-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
}
.ourstyle-heading>h2 {
    font-size: 34px;
    line-height: 1.24;
    margin-bottom: 13px;
}
.ourstyle-heading>p {
    color: var(--gray-dark);
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1.4;
}
.homebuilding_files {
    margin-top: 70px;
    display: flex;
    width: 100%;
    gap: 1.5em
}
.homebuilding_files li {
    width: calc(94% / 2);
}
.homebuilding_files a {
    background: var(--main-font-color);
    border: 1px solid var(--sub-color);
    border-radius: 5px;
    padding: 12px 45px;
    height: 80px;
    transition: 0.3s;
    color: var(--sub-color);
    display: flex;
    align-items: center;
    gap: 1.5em;
}
@media screen and (min-width: 600px) {
    .homebuilding_files a:hover {
        background-color: var(--accent-color);
        /* border: var(--main-font-color); */
        color: var(--main-font-color);
    }
    .homebuilding_files a:hover .icon_pdf {
        filter: invert(100%) sepia(0%) saturate(7485%) hue-rotate(188deg) brightness(97%) contrast(107%);
    }
}
.icon_pdf {
    filter: invert(14%) sepia(48%) saturate(1%) hue-rotate(1deg) brightness(100%) contrast(88%);
}
/* 安心の家づくり体制_end */
/* 気密性へのこだわり */
.commitment .text01,
.zeh .text01 {
    margin-bottom: 70px;
}
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.card-container>li {
    flex: 1 1 calc(33.333% - 2rem);
    /* 3列で余白分を調整 */
    display: flex;
}
.card-container .card {
    /* background: #f5f5f5; */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    border: 1px solid var(--gray-dark);
    border-radius: 5px;
    padding: 60px 28px;
    gap: 1em;
}
.card-container .card p {
    line-height: 2.06;
}
/* 気密性へのこだわり_end */
/* ZEHへの取り組み */
.zeh {
    position: relative;
    overflow: hidden;
}
.zeh .zeh-bgarea {
    position: absolute;
    right: -7%;
    top: 8%;
    z-index: -1;
}
.zeh .zeh-bgarea img {
    object-fit: cover;
    filter: brightness(45%);
    max-width: 1100px;
    width: 100%;
}
.ol-list {
    list-style: none;
    counter-reset: number;
    /* padding: 0;
    margin: 0; */
    margin-bottom: 90px;
}
.ol-list li {
    counter-increment: number;
    /* margin-bottom: 2rem; */
    border-top: 1px solid var(--gray-dark);
    /* border-bottom: 1px solid var(--gray-dark); */
    padding: 30px 23px;
}
.ol-list li:last-child {
    border-bottom: 1px solid var(--gray-dark);
}
.ol-head {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 25px;
    align-items: center;
}
.ol-num::before {
    content: counter(number);
    font-family: 'Charis SIL';
    font-weight: 700;
    width: 60px;
    height: 60px;
    background: #d9d9d9;
    border-radius: 50%;
    color: var(--sub-color);
    font-size: 26px;
    text-align: center;
    line-height: 60px;
    display: inline-block;
    flex-shrink: 0;
}
.ol-head h3 {
    margin: 0;
}
.ol-list p {
    margin: 0;
    padding-left: calc(60px + 1.5rem);
    line-height: 2.06;
    /* 番号の分だけ左にそろえる */
}
.tb01 {
    width: 100%;
    border-collapse: collapse;
    /* ← 枠線を重ねず1本に */
}
.tb01 caption {
    text-align: left;
    margin-bottom: 1em;
}
.tb01 .tb_title>th {
    background-color: var(--gray-dark);
    font-size: 18px;
    line-height: 1.83;
    font-weight: 700;
}
.tb01 .tb_subtitle>th {
    font-size: 18px;
    line-height: 1.83;
    font-weight: 700;
}
.tb01 th,
.tb01 td {
    border: 1px solid var(--gray-dark);
    /* ← 枠線の色・太さ */
    padding: 20px 10px;
}
.tb01 td {
    text-align: center;
}
/* ZEHへの取り組み_end */
/* 工期スケジュールモデル */
/* ラッパー要素 */
.fixed-area {
    display: flex;
    justify-content: space-between;
    position: relative;
}
/* コンテンツのブロック */
.fixed-contents {
    width: 50vw;
    padding: 5% 4%;
}
/* .fixed-contents div {
    padding-top: 50vh;
} */
.fixed-contents .scroll-box01 {
    padding-top: 10vh;
}
.fixed-contents .scroll-box02,
.fixed-contents .scroll-box03 {
    padding-top: 35vh;
}
.fixed-contents div:last-child {
    padding-bottom: 10vh;
}
/* 画像のブロック */
.fixed-images {
    width: 50vw;
    height: 100vh;
    display: flex;
    align-items: center;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.fixed-images img {
    height: 100vh;
    object-fit: cover;
    filter: brightness(75%);
}
.fixed-images p {
    margin: auto;
    display: block;
    visibility: hidden;
    /* background: #5bd2d2; */
    position: absolute;
    top: 0;
    bottom: 0;
    transition: .8s;
    opacity: 0;
}
.fixed-images p:first-child,
.fixed-images p.active {
    visibility: visible;
    opacity: 1;
}
.schedule .schedule-title {
    font-size: 31px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 30px;
}
.schedule .ol-list li {
    border-top: none;
}
.schedule .ol-list li:last-child {
    border-bottom: none;
}
.fixed-contents {
    counter-reset: number;
}
.fixed-contents .ol-list {
    counter-reset: none;
}
/* 工期スケジュールモデル_end */
/* 匠と巧が織りなす美学 */
.mastery .ourstyle-flex {
    align-items: flex-start;
}
.mastery .ourstyle-flex .img-box {
    width: 50%;
    height: 700px;
}
.mastery .ourstyle-flex .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mastery .ourstyle-flex .text-box {
    width: 50%;
    padding: 50px 84px;
    flex: 1;
}
.mastery .ourstyle-flex .text01 {
    margin-bottom: 100px;
}
.mastery .ourstyle-heading {
    margin-bottom: 60px;
}
.mastery .mastery-photo {
    max-width: 445px;
    height: 330px;
    margin-left: auto;
    margin-right: 10%;
    margin-top: -5%;
}
.ourstyle-parallax {
    overflow: hidden;
}
/* 匠と巧が織りなす美学_end */
@media screen and (max-width: 1440px) {
    .ourstyle-lead .img-leftbox {
        width: 345px;
    }
    .ourstyle-lead .img-leftbox .box-img:nth-child(1) {
        margin-left: 50px;
    }
    .ourstyle-lead .img-rightbox {
        width: 400px;
    }
}
@media screen and (max-width: 1240px) {
    .ourstyle-lead .text-area {
        padding-left: 40px;
    }
    .ourstyle-lead .img-rightbox .box-img:nth-child(2) {
        left: 65px;
    }
}
@media screen and (max-width: 1140px) {
    .ourstyle-lead .text-area {
        padding-left: 55px;
    }
    .ourstyle-lead .img-leftbox .box-img:nth-child(2) {
        left: -14px;
    }
    .ourstyle-lead .img-rightbox {
        right: -47px;
    }
}
@media screen and (max-width: 1100px) {
    .ourstyle-lead .img-leftbox {
        left: -66px;
    }
    .ourstyle-lead .text-area {
        padding-left: 40px;
    }
}

.zeh .zeh-flex {
    display: flex;
    gap: 40px;
    justify-content: space-between;
}

.zeh .zeh-list,
.zeh .zeh-table {
    width: 50%;
}

/*--------------------------------
 下層_award
---------------------------------*/
.award .lower-main-visual .lower-mv-img img {
    object-position: 50% 65%;
}
/* もっと見る関係 */
.hidden {
    display: none;
}
.btn02 {
    color: var(--sub-color);
    padding: 12px 45px;
    background-color: var(--main-font-color);
    border-radius: 5px;
    font-size: 16px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
.award-btn {
    background: transparent;
    /* filter:blur(4px); */
    margin-top: -66px;
    padding-top: 120px;
}
/* もっと見る関係_end */
.media .works-main-area-all {
    margin-top: 45px;
}

/* メディア掲載 */
.award .img-wrap {
    aspect-ratio: 3 / 4;
}

.award .works-flex-item {
    flex: 0 0 30%;
}



/* メディア掲載_end */


/*--------------------------------
 下層_voice
---------------------------------*/
/* Luminous設定 */
.lum-lightbox.lum-open {
    z-index: 11;
}
.lum-close-button:after,
.lum-close-button:before {
    height: 45px;
}
.lum-close-button {
    height: 40px;
    opacity: 1;
    right: 2%;
    top: 3%;
    width: 30px;
}
a.luminous {
    position: relative;
    display: block;
}
a.luminous::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 4.5em;
    height: 4.5em;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url(../images/voice/zoom.svg);
    background-size: 2em;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Luminous設定_end */
.voice-area .img-wrap {
    aspect-ratio: 4 / 3;
}
.voice-area .voice-area-ttl {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
.voice-area .voice-area-cmt>p:nth-child(1) {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0.5em;
}
.voice-area .voice-area-cmt>p:nth-child(2) {
    font-size: 16px;
    font-weight: normal;
    line-height: 2.06;
}
/*--------------------------------
 下層_匠takumi
---------------------------------*/
/* takumiメインビジュアル */
.takumi-mv-area {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.takumi-mv-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.takumi-mv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.takumi-mv-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-font-color);
    text-align: center;
    z-index: 1;
    text-shadow: 0 0 15px #333333;
}
.takumi .takumi-desc {
    padding: 110px 0;
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 900px;
    background-image: url(../images/takumi/desc_bg.webp);
    background-attachment: fixed;
}
.takumi .takumi-desc .desc-area {
    position: absolute;
    width: 32%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 1200px) {
    .takumi .takumi-desc .desc-area {
        width: 40%;
    }
}
.takumi .takumi-desc .desc-area>h2 {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 10px;
    /* line-height: 1.88; */
    margin-bottom: 40px;
}
.takumi .takumi-desc .desc-area p {
    line-height: 3.38;
}
.takumi .takumi-desc .desc-area p:first-of-type {
    margin-bottom: 48px;
}
.takumi .parallax-img {
    height: 25vw;
    width: 100%;
    overflow: hidden;
    margin-bottom: 110px;
}
.takumi .takumi-sec1,
.takumi .takumi-sec2 {
    /* height: 85vh; */
}
.takumi .takumi-sec1 h2,
.takumi .takumi-sec2 h2 {
    color: var(--accent-color);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.24;
    margin-bottom: 50px;
}
.takumi .takumi-sec1 .text01,
.takumi .takumi-sec2 .text01 {
    margin-bottom: 30px;
    /* width: 60vw; */
    line-height: 2.5;
}
.takumi-sec1-flex {
    display: flex;
    align-items: center;
    gap: 50px;
}
.takumi-sec1-flex .contents-left {
    flex: 1;
}
.takumi-sec1-flex .contents-right {
    width: 50%;
    margin-top: 250px;
    position: relative;
    display: inline-block;
    /* 必要なら block に */
    overflow: hidden;
}
.takumi-sec2-area .contents-text {
    margin-bottom: 80px;
}
.takumi-sec2-area .contents-text h3 {
    padding-top: 30px;
    font-size: 24px;
    margin-bottom: 0.5em;
}
.takumi-sec2-area .contents-text .ul-list {
    /* padding-left: 30px; */
}
.takumi-sec2-area .contents-text .ul-list li::before {
    left: -2%;
    background: var(--accent-color);
}
/* GSAPスクラブ */
.xMoveLists {
    position: relative;
    overflow: hidden;
    padding-block: 0vw;
}
.xMoveLists__inner {
    padding-inline: 20px;
}
.xMoveLists__list {
    display: flex;
    gap: 10px;
    width: max-content;
    --startX: 0px;
    --moveAmount: -50vw;
    transform: translateX(calc(var(--startX) + var(--scrollProgress) * var(--moveAmount)));
}
.xMoveLists__list.--reverse {
    margin-top: 40px;
    /* 初期位置を画面一番右に設定 */
    --startX: calc(-100% + 100vw);
    --moveAmount: 50vw;
}
.xMoveLists__listItem {
    width: 400px;
    height: 310px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    flex-shrink: 0;
    /* padding: 20px; */
    clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}
.xMoveLists__listItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* GSAPスクラブ_end */
.takumi-award .text01 {
    margin-bottom: 50px;
}
.takumi-award .text-flowing .double-content-wrap {
    margin-top: -40px;
}
/* GSAPカーテンアニメーション */
.curtain_img {
    opacity: 0;
    display: block;
}
.curtain_bg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: var(--gray-dark);
    transform-origin: left;
    transform: scaleX(0);
}
/* GSAPカーテンアニメーション_end */
/*--------------------------------
 404
---------------------------------*/
.error-main h2 {
    font-size: 36px;
    margin-bottom: 0.5em;
}
.error-main p {
    margin-bottom: 90px;
    line-height: 1.8;
}
/*--------------------------------
 下層_お問い合わせcontact
---------------------------------*/
.contact-desc {
    margin-bottom: 60px;
}
.form__item {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid var(--gray-dark);
    padding: 30px;
}
.form__label-wrap {
    display: flex;
    align-items: center;
    width: 50%;
    justify-content: space-between;
}
.form__item--last {
    border-bottom: 1px solid var(--gray-dark);
}
.form__title {
    font-weight: 700;
    line-height: 2.06;
}
.form__require {
    line-height: 1;
    background-color: #890000;
    padding: 0.3em 0.4em;
    display: inline-block;
    margin-right: 30px;
    font-weight: 700;
}
/* 共通 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}
/* 共通_end */
/* テキストボックス */
.form__text {
    width: 100%;
    flex: 1;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}
/* テキストボックス_end */
/* テキストエリア */
textarea {
    width: 50%;
}
.h-adr {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.h-adr .postcode-num {
    width: 180px;
}
/* テキストエリア_end */
/* セレクトボックス */
.select_wrapper {
    position: relative;
}
.select_wrapper::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 16px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top: 8px solid var(--sub-color);
    border-bottom: 0;
    pointer-events: none;
}
.form__select {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    min-width: 292px;
    color: var(--sub-color);
    -webkit-appearance: none;
    appearance: none;
}
/* セレクトボックス_end */
/* チェックボックス */
input[type="checkbox"] {
    appearance: none; /* デフォルトスタイルをリセット */
    width: 27px; /* チェックボックスの幅 */
    height: 27px; /* チェックボックスの高さ */
    border: 1px solid #333; /* 枠線 */
    /* border-radius: 4px; */
    background-color: #fff; /* 背景色 */
    cursor: pointer; /* ポインタを手のアイコンに */
    margin-right: 0.5em;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; /* アニメーション */
}
/* チェック時のスタイル */
input[type="checkbox"]:checked {
    background-color: var(--main-font-color); /* チェック時の背景色 */
    border-color: var(--main-font-color); /* チェック時の枠線の色 */
    position: relative;
}
/* チェック時のアイコンを表示 */
input[type="checkbox"]:checked::before {
    content: "✔"; /* チェックマーク */
    color: #333; /* チェックマークの色 */
    font-size: 12px; /* サイズ調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
}
/* チェックボックス_end */
/* ラジオボタン */
.form__radio-group {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}


.form__item .form__radio {
    /* margin-right: 1em; */
}

.form__item input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #333;
    border-radius: 50%;
    background-color: #fff;
    /* cursor: pointer; */
    margin-right: 0.7em;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    position: relative;
    margin-bottom: 0.5em;
}
.form__item input[type="radio"]::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--gray-bright);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.form__item input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
/* ラジオボタン_end */

/* #add_text {
    width: 70%;
}

#add_text input[type="text"] {
    width: 40px;
} */



/* 
.form__item.hidden {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.form__item.visible {
    visibility: visible;
    opacity: 1;
    height: auto;
}


 */


.form__item .detail_list {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.form__item .detail_list div > span{
    margin-bottom: 0.3em;
    width: 100%;
    display: inline-block;
}

.form__item .detail_list input[type="text"]{
    width: 300px;
}


/* 画像認証エリア */
.ninsho_area {
    width: 50%;
}
.ninsho_area img {
    margin-bottom: 10px;
}
.ninsho_text {
    margin-bottom: 20px;
}
/* 画像認証エリア_end */
/* プライバシーポリシー */
.policy-area {
    padding: 30px;
}
.policy-area > h2,
.policy-section > h2  {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.83;
    margin-bottom: 18px;
}
.policy-area > .text01 {
    margin-bottom: 50px;
}
.scroll-area {
    width: 100%;
    height: 300px;
    background-color: var(--main-font-color);
    color: var(--sub-color);
    padding: 40px 30px;
    overflow: auto;
}
.policy-section {
    margin-bottom: 40px;
}
.policy-section > h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.83;
    margin-bottom: 12px;
    padding-bottom: 0.4em;
    padding-left: 0.4em;
    border-bottom: 1px solid var(--sub-color);
}
.policy-section .ul-list {
    margin-top: 10px;
}
.policy-section .ul-list li {
    margin-left: 1.4rem;
}
.policy-section .ul-list li::before {
    background-color: var(--sub-color);
    left: -1.5%;
}
.policy-section a:link,
.policy-section a:visited {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: underline;
}
/* プライバシーポリシー_end */
/* 個人情報取り扱いに同意ボタン */
.agree_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 60px 0;
}
.submit-btn[disabled] {
    background-color: #ccc;
    cursor: not-allowed; /* クリック不可のカーソルを表示 */
}
  /* hoverやfocus状態を無効化 */
.submit-btn:disabled:hover {
    opacity: 1; /* 不透明度を固定 */
    /* transform: none; */
}
/* 個人情報取り扱いに同意ボタン_end */

/*--------------------------------
 下層_採用情報recruit
---------------------------------*/
.recruit .lower-main-visual .lower-mv-img img {
    filter: brightness(60%);
    object-position: 50% 60%;
}