:root {
    --ws-border: #807c18;
    --ws-search-primary: #938c34;
    --ws-search-text: #66622c;
    --ws-search-link: #938c34;
    --ws-works-code: #807c18;
    --ws-works-deta-header: #eae8e1;

}

@media (max-width: 767px) {

    .BreadCrumb {
        display: flex;
        flex-wrap: wrap;       /* 折り返しを許可 */
        row-gap: 4px;
        font-size: 12px;
    }

    .BreadCrumb .breadcrumb-item {
        display: flex;
        align-items: center;
        white-space: nowrap;   /* 1つ目・2つ目は折り返さない */
    }

    .BreadCrumb .breadcrumb-item.is-current {
        flex-basis: 100%;      /* ここから新しい行にする */
        white-space: normal;   /* タイトルは中で折り返してOK */
    }

    /* 2行目に来た後も区切り記号は表示したくない場合は消す */
    .BreadCrumb .breadcrumb-item.is-current::before {
        content: none;
    }
}


header.wd-section,
section.wd-section {
    width: 80%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* 親が CSS Grid の場合に横方向センタリングされない対策（害なし） */
header.wd-section,
section.wd-section {
    justify-self: center; /* grid のときのみ効く。flex/blockには無害 */
}

.wd-hero {
    --hero-w: 100%;
    --hero-nav-offset: 30px; /* 画像の外にどれだけ出すか */
}

.wd-hero {
    margin: 10vh 0 0;
}

.wd-hero-main {
    position: relative;
}

.wd-hero-figure{
    position: relative;
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    margin: 0 auto;
}

.wd-hero-media{
    max-height: 650px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    width: 100%;
}
.wd-hero-media img{
    display: block;

    max-width: 100%;
    width: auto;
    height: auto;

    object-fit: contain;
    object-position: center;
}

.wd-hero-caption {
    position: static !important;
    inset: auto !important;

    width: 100%;
    box-sizing: border-box;

    padding: .6em .9em;
    background: var(--ws-search-text);
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}


/* ---------- THUMBNAILS ＋ ナビ ---------- */
/* ===============================
   ▼ サムネイル（ヒーローと同じ幅）
   =============================== */

.wd-thumbs-wrap {
    position: relative;            /* 矢印を重ねる土台 */
    width: 100%;                   /* ヒーローと同じ幅で広がる */
    margin-top: 12px;
}

/* サムネ1行（横スクロール） */
.wd-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(110px, 1fr);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

/* サムネ画像 */
.wd-thumb {
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: none;
    padding: 0;
    cursor: pointer;
    scroll-snap-align: start;
}

.wd-thumb img {
    width: 100%;
    height: 78px;
    object-fit: cover;
    display: block;
}

.wd-thumb.is-active {
    border-color: var(--ws-search-text);
}

/* 矢印をメイン画像中央左右に配置 */
.wd-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ws-border);
    color: #fff;
    border: 2px solid #ffffff;
    cursor: pointer;
    font-size: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: .9;
    transition: opacity .2s;
}

.wd-hero-nav:hover {
    opacity: 1;
}

.wd-hero-main .wd-hero-nav {
    top: 50%;
    transform: translateY(-50%);
}

.wd-hero-prev{ left: auto; }
.wd-hero-next{ right: auto; }

.wd-hero-figure .wd-hero-nav{
    top: 50%;
    transform: translateY(-50%);
}

.wd-hero-figure .wd-hero-prev{
    left: calc(0px - var(--hero-nav-offset));
}

.wd-hero-figure .wd-hero-next{
    right: calc(0px - var(--hero-nav-offset));
}


/* SP */
@media (max-width: 768px) {
    .wd-hero-figure{
        width: 100%;
        max-width: 100%;
    }
    .wd-hero-media{
        max-height: 194px;
    }

    .wd-hero-main .wd-hero-nav {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    .wd-hero-main .wd-hero-prev { left: 10px; }
    .wd-hero-main .wd-hero-next { right: 10px; }
}



/* ---------- HEADER ---------- */
.wd-header {
    margin: 22px 0 14px;
}

.wd-title {
    font-family: "Noto Serif JP", serif;
    margin: 0 0 10px;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: .2em;
    color: var(--ws-search-text);
}

.wd-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.wd-badge {
    display: inline-block;
    padding: 10px 10px;
    font-size: 1.5rem;
    line-height: 1;
    border: 1px solid #d6d2b5;
    background: #f3f3e6;
    color: #66622c;
}

.wd-badge.code {
    background: var(--ws-works-code);
    color: #fff;
    border: 1px solid var(--ws-works-code);
}

/* 日付バッジ（共通） */
.wd-badges .ws-card-ym {
    display: inline-block;
    font-size: 15px;
    color: #66622c;
    background: #f3f3e6;
    border: 1px solid #d6d2b5;
    padding: 9px 9px;
}

/* wd-badges 内の罫線調整：左罫線は残し、右は最後だけ */
.wd-badges > .wd-badge,
.wd-badges > .ws-card-ym {
    border-right-width: 0;          /* 中央の重複する右罫線を消す */
}

/* 一番右のバッジだけ右罫線を復活 */
.wd-badges > .wd-badge:last-child,
.wd-badges > .ws-card-ym:last-child {
    border-right-width: 1px;        /* 色・スタイルは既存設定をそのまま利用 */
}



@media (max-width: 767px) {
    .wd-badge,
    .ws-card-ym{
        font-size: 2.5rem;
    }

}

/* 表本体 */
.wd-info-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 各セル幅が安定 */
    border: 1px solid var(--ws-border);
    background: #fff;
    color: var(--ws-works-code);
}

/* 左見出し */
.wd-info-table th {
    width: 160px; /* 好みで調整 */
    background: #c1bc8e;
    color: #fff;
    font-weight: 300;
    text-align: left;
    padding: 10px 12px;
    vertical-align: top;
    border: 1px solid var(--ws-border);
    white-space: nowrap;
}

/* 通常セル */
/* 通常 */
.wd-info-table td {
    padding: 10px 12px;
    border: 1px solid var(--ws-border);
    vertical-align: top;
    word-break: break-word;
}

/* 空セル：右線と左線を描かない（つなぎ目も消すため） */
.wd-info-table td.wd-empty {
    border-right: none;
    border-left: none;
}

/* 末尾の“中身ありセル”：右線を消す（直後が空セル列のときに効く） */
.wd-info-table td.wd-last-filled {
    border-right: none;
}

/* 行末が空セルの場合の最終セル（念のため） */
.wd-info-table tr td:last-child.wd-empty {
    border-left: none;
}

/* 結合セル（右側の空白エリア）の左線を消す */
.wd-info-table td[colspan] {
    border-left: none;
}

/* 結合セルの「ひとつ前」のセルの右線も消す */
.wd-info-table td:has(+ td[colspan]) {
    border-right: none;
}



/* 右側カラム幅（左thを除いた残りを等分） */
.wd-info-cols-4 td {
    width: calc((100% - 160px) / 4);
}

.wd-info-cols-3 td {
    width: calc((100% - 160px) / 3);
}

/* 列数を変える時はこちらも */
.wd-info-cols-5 td {
    width: calc((100% - 160px) / 5);
}

.wd-info-table td a{
    color: var(--ws-search-text);
}

/* ============================
   SP：カテゴリ表の縦積みレイアウト化
   ============================ */
/* ===========================
   SP：th を上、td は横グリッド
   =========================== */
@media (max-width: 768px) {

    .wd-info-table {
        border-bottom: none;
    }

    /* 行をカード状のグリッドにする */
    .wd-info-table tr {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4列グリッド */
        border-bottom: 1px solid var(--ws-border);
    }

    /* th は 1行目で全幅 */
    .wd-info-table th {
        grid-column: 1 / -1;      /* 1列目〜最後の列まで */
        width: auto;              /* 固定幅を無効化 */
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid var(--ws-border);
        padding: 10px 12px;
        font-size: 2.5rem;
    }

    /* td はその下に横方向へ並ぶ（自動で折り返し） */
    .wd-info-table td {
        width: auto;              /* 既存の width を上書き */
        border-top: none;
        border-left: 1px solid var(--ws-border);
        border-right: none !important;
        border-bottom: none;      /* 行全体のボーダーは tr が担当 */
        padding: 10px 8px;
        word-break: break-word;
        font-size: 2rem;
    }

    /* 行内 1列目の td の左線は消す（外枠と二重になるのを防ぐ） */
    .wd-info-table tr td:first-of-type {
        border-left: none;
    }

    /* table 自体の外枠は維持 */
    .wd-info-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* PC 用の固定幅指定を殺す */
    .wd-info-cols-4 td,
    .wd-info-cols-3 td,
    .wd-info-cols-5 td {
        width: auto;
    }
}




/* ===== タグ周り ===== */

/* タグ全体の余白 */
.wd-tags {
    margin: 24px 0 8px;
}

/* チップの並び：横並び＋折り返し＋間隔 */
.wd-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

/* ベースのチップ */
.wd-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;                 /* ピル型 */
    font-feature-settings: "palt";
    font-weight: 300;
    font-size: 2.1rem;
    line-height: 1.4;
    background: #fff;
    border: 1px solid var(--ws-border);   /* 他と同じボーダー色 */
    color: var(--ws-search-text);         /* 文字色も他と揃える */
    white-space: nowrap;
}

/* aタグでもチップの見た目を統一 */
.wd-chip,
.wd-chip:link,
.wd-chip:visited {
    text-decoration: none;
    color: var(--ws-search-text);
}

/* hover */
.wd-chip:hover {
    background: #faf8f0;
    border-color: var(--ws-search-primary);
}


/* SPで少しだけコンパクトに */
@media (max-width: 768px) {
    .wd-chip {
        font-size: 12px;
        padding: 5px 12px;
    }
}


/* ---------- BODY ---------- */
.wd-paragraph {
    color: var(--ws-search-text);
    font-feature-settings: "palt";
    font-weight: 300;
    line-height: 1.9em;
    margin-top: 25px;
    font-size: 2.1rem;
}

.wd-meta {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px 14px;
    margin-top: 16px;
}

.wd-meta > div {
    display: contents;
}

.wd-meta dt {
    font-weight: 700;
    color: #66622c;
}

.wd-meta dd {
    margin: 0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
    .wd-paragraph {
        font-size: 2.7rem;
    }
    .wd-cat-row {
        grid-template-columns: 92px 1fr;
    }

    .wd-meta {
        grid-template-columns: 110px 1fr;
    }

    .wd-title {
        font-size: 22px;
    }

    .wd-hero-caption {
        font-size: 13px;
    }

    .wd-chip {
        font-size: 2.7rem;
        padding: 4px 8px;
    }
}

.wdb{
    display: grid;
}

/* 1つの箱 */
.wdb-box{
    padding-top: 0;
    border: 1px solid var(--ws-search-text);
    overflow: hidden;
    border-radius: 18px;
}

/* 見出し帯 */
.wdb-head{
    background: var(--ws-works-deta-header);
    color: var(--ws-search-text);
    font-weight: 300;
    letter-spacing: .05em;
    padding: 14px 18px;
    font-size: 2.1rem;
    border-bottom: 1px solid var(--ws-search-text);
}

/* 本文側 */
.wdb-body{
    padding: 22px 26px;
    color: var(--ws-search-text);
    border-bottom: 1px solid var(--ws-search-text);
}
.wdb-body:last-child {
    border-bottom: none;
}

/* 行の余白（施工DATA用） */
.wdb-row{
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1.9;
    margin: 0 0 5px;
}

/* ご相談内容は大きめ段落 */
.wdb-lg{
    font-size: 28px;          /* 見本の大きい本文感 */
    line-height: 2.0;
    margin: 0;
}

.wdb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 30%));
    gap: 12px;
    margin-top: 10px;
    justify-content: start
}
.wdb-gallery img {
    width: 100%;
    border-radius: 6px;
    background: #fff;
}

/* 箱間の区切り風の線（必要なら） */
/* .wdb-box + .wdb-box { border-top: 2px solid var(--border); } */

/* SP最適化 */
@media (max-width: 768px) {
    .wdb-head{
        font-size: 2.7rem;
    }
    .wdb-body {
        padding: 18px 16px;
    }

    .wdb-row {
        font-size: 2.7rem;
        margin-bottom: 14px;
    }

    .wdb-lg {
        font-size: 2.7rem;
        line-height: 1.9;
    }
}


/* 箱自体（外枠少し太く）*/
.wdb-box {
    border: 2px solid var(--ws-search-text);
    border-radius: 14px;
}


/* =========================================
   ▼ デザイナー情報ブロック（新規）
   ========================================= */

.wdb-designer-box {
    display: flex;
    gap: 22px;
    margin-top: 20px;
    align-items: flex-start;
}

/* 左側：写真 */
.wdb-designer-photo img {
    width: 120px;      /* 適宜調整（添付は丸っぽい） */
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--ws-search-text);
    background: #fff;
}

/* 右側：テキスト */
.wdb-designer-info {
    flex: 1;
}

/* 英字名 */
.wdb-designer-name-en {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #888;
    margin-top: 2px;
    letter-spacing: 0.03em;
}

/* 肩書き */
.wdb-designer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ws-search-text);
    margin: 4px 0 10px;
}

/* プロフィール本文 */
.wdb-designer-profile {
    font-size: 15px;
    line-height: 1.9;
    color: var(--ws-search-text);
    white-space: pre-line;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .wdb-designer-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .wdb-designer-photo img {
        width: 100px;
        height: 100px;
    }
    .wdb-designer-info {
        text-align: center;
    }
}

/* =========================================
   ▼ 担当デザイナーコメントレイアウト
   ========================================= */

.wdb-designer {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* 左カラム：画像 25% */
.wdb-designer-left {
    flex: 0 0 25%;
    max-width: 25%;
}

.wdb-designer-left img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;              /* 角少し丸める。丸くしたければ 50% に */
    border: 1px solid #ccc;
    background: #fff;
}

/* 右カラム：テキスト 75% */
.wdb-designer-right {
    flex: 1 1 0;
    max-width: 75%;
}

/* 名前（英字） */
.wdb-designer-name {
    font-family: "Balthazar", serif;
    font-size: 2.1rem;
    color: var(--ws-search-text);
    margin: 0 0 6px;
}

/* 肩書き */
.wdb-designer-title {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--ws-search-text);
    margin: 0 0 10px;
}

/* プロフィールテキスト */
.wdb-designer-profile {
    font-size: 2.1rem;
    line-height: 1.9;
    color: var(--ws-search-text);
    margin: 0 0 16px;
}

/* コメント本文（少し大きめ） */
.wdb-designer-comment {
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--ws-search-text);
    margin: 8px 0 0;
}

/* スマホ：縦並びに変更 */
@media (max-width: 768px) {
    .wdb-designer {
        flex-direction: column;
    }
    .wdb-designer-left,
    .wdb-designer-right {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .wdb-designer-left img {
        max-width: 260px;
        margin: 0 auto 12px;
    }
    .wdb-designer-right {
        text-align: left;
    }
    .wdb-designer-comment {
        font-size: 2.7rem;
    }

}

.designer_worksBt{
    margin: 20px 0;
}


/* ▼ ボタン2つを中央に並べるラッパー */
.wd-two-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;              /* ボタン間の余白 */
    margin: 40px 0 0;    /* 上下ddの余白は好みで調整 */
}

@media screen and (min-width: 768px) {
    .wd-two-buttons a.cmn_orgBt {
        width: 40vw;
        height: 4.2vw;
        border-radius: 0.5vw;
        border-width: 0.2vw;
    }
}

/* SP：縦積みにする場合（推奨） */
@media (max-width: 768px) {
    .wd-two-buttons a.cmn_orgBt {
        width: 80vw;
        height: 10vw;
        font-size: 2.6rem;
        border-radius: 2vw;
        border-width: 0.5vw;
    }

    .wd-two-buttons {
        flex-direction: column;
        gap: 16px;
    }
}


/* ===== 類似事例セクション ===== */

.wd-similar {
    margin: 40px 0;
    position: relative;
}

.wd-similar-head {
    font-family: "Noto Serif JP", serif;
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    color: var(--ws-search-text);
    margin-bottom: 40px;
}

/* ▼ カード領域は「必ずこの中だけ」に収める */
.wd-similar-slider {
    position: relative;
    width: 100%;
    overflow: hidden;  /* ← ここを hidden に戻す */
}

/* ▼ 1行3枚固定の横スライダー（はみ出し管理は親がやるので overflow は不要） */
.wd-similar-track {
    display: flex;
    gap: 24px;
    transition: transform .35s ease;
    /* overflow: hidden; ← これは消す or コメントアウト */
}

.wd-similar-track .ws-card {
    width: calc((100% - 48px) / 3); /* 3枚表示 */
    flex-shrink: 0;
}

/* ▼ 左右ボタンはセクション基準で重ねる（カードとは別レイヤ） */
.wd-similar-nav {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;

    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ws-border);
    color: #fff;
    border: 2px solid #ffffff;
    cursor: pointer;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: .9;
    transition: opacity .2s;
}
.wd-similar-nav:hover {
    opacity: 1;
}

.wd-similar-nav.is-disabled {
    opacity: .3;
    pointer-events: none;
}

/* ボタンはセクションから少しはみ出す分だけに留める（画像ははみ出さない） */
.wd-similar-prev { left: -28px; }
.wd-similar-next { right: -28px; }

/* ===== SP ===== */
@media (max-width: 768px) {
    .wd-similar-slider {
        overflow: visible; /* 小さい画面ではフリック前提ならここで変えてもOK */
    }

    .wd-similar-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .wd-similar-track .ws-card {
        width: 80%;
        scroll-snap-align: start;
    }

    .wd-similar-nav {
        display: none;
    }
}



/* ===== 共通：施工事例カード ===== */

/* === カード本体 === */
.ws-card {
    background: #f3f3e6;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform .06s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.ws-card-link {
    display: block;
    height: 100%;                           /* ← カード全体をクリック領域に */
    color: inherit;
    text-decoration: none;
    /* border は削除 */
}

/* ホバー時の見た目も .ws-card に移動 */
.ws-card:hover {
    transform: translateY(-2px);
    border-color: var(--ws-search-primary, #938c34);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}

/* 画像：横800×縦512相当（25:16） */
.ws-card-fig {
    position: relative;
    aspect-ratio: 25/16;
    margin: 0 !important;
}

.ws-card-fig img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 上段ラベル群 */
.ws-card-meta {
    display: flex;
}

.ws-card-code {
    display: inline-block;
    font-size: 1.5rem;
    letter-spacing: .08em;
    color: #fff;
    background: var(--ws-works-code, #938c34);
    padding: 4px 8px;
}

.ws-card-area {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--ws-search-text);
    background: #ffffff;
    border: 1px solid #807c18;
    padding: 3px 8px;
}

.ws-card-ym {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--ws-search-text);
    background: #ffffff;
    border: 1px solid #807c18;
    padding: 3px 8px;
}

/* タイトル：2行で省略 */
.ws-card-title {
    padding: 10px 10px 12px;
    margin: 0;
    color: #66622c;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}