@charset "UTF-8";
/* ========================================
   service.css - 業務内容ページ
   （page-hero は company.css 側に定義済みのため、ここでは読み込まれない）
======================================== */

/* page-hero を service でも使うため最小定義を内包（company.css 非読込のため複製） */
.page-hero {
    position: relative;
    padding: calc(var(--header-height-sp) + 3.5rem) 1.5rem 3.5rem;
    background-color: var(--color-primary);
    color: #fff;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 768px) {
    .page-hero {
        padding: calc(var(--header-height-pc) + 5rem) 2rem 5rem;
    }
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(95, 191, 179, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--section-width-md);
    margin: 0 auto;
}

.page-hero__en {
    display: block;
    font-family: var(--font-en);
    font-size: 0.85rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0;
}

.page-hero__title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

@media (min-width: 768px) {
    .page-hero__title { font-size: 2.75rem; }
}

/* ================================
   ワンストップ対応イントロ（2行グリッド）
   1024px以上：
     1行目＝縦書きタイトル｜大見出し｜画像（上）
     2行目＝説明テキスト（タイトル列～見出し列にまたがる）｜画像（下）
   画像は2行を縦に貫く。grid-template-areas で領域を名付けして配置。
   SP～1023px：縦積み（タイトル→大見出し→説明→画像）。
   index と違い service は .section の左右パディングが生きているため、
   layout 側でそれを打ち消して画像を右端まで届ける
================================ */
.service-intro {
    position: relative;
    /* セクション地：コンテンツ面(#F0F2EE)と同じ青緑系で、わずかに濃いトーン。
       共通変数 ivory-dark（黄み）だと面と色相がずれて浮くため service 限定で上書き */
    background-color: #E6EAE6;
    /* 上下パディング不要（共通 .section の上下パディングを打ち消す） */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    isolation: isolate;
}

/* 和紙テクスチャは panel / text-group 側（コンテンツ面）にのみ敷く。
   セクション地は単色（地の全面 washi は使わない） */

/* コンテンツ（layout）は地の前面へ（z-index の基準を維持） */
.service-intro .service-intro__layout {
    position: relative;
    z-index: 1;
}

/* 画像列を端まで届けるため inner の共通左右パディングを打ち消す（section がパディングを持つ） */
.service-intro .section__inner.service-intro__layout {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* レイアウト：SPは縦積み。画像は末尾に見せたいので order で制御 */
.service-intro__layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* panel：text-group と image を包む器。
   1024px未満：背景は text-group 側が持つ（index-about の head と同じ構造）。
   panel の上・左右パディングは不要（背景・余白は text-group が担う）。
   1024px以上：グリッドコンテナ化 */
.service-intro__panel {
    order: 2;
    position: relative;
    padding: 0;
}

/* 1024px以上：panel をグリッドコンテナ化（以前は display:contents で透過させて layout 側でグリッドしていたが、
   panel を常に実体の箱にして構造を一本化。絶対配置の基準を全ブレークポイントで固定）。
   列：左（text-group）｜右（image）を5:5 で配置 */
@media (min-width: 1024px) {
    .service-intro__panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }
}

/* 画像：右カラム。パディングなしで右端まで届ける。
   SPはタイトル→見出し→説明→画像の順なので order で末尾に */
.service-intro__image {
    position: relative;
    width: 100%;
    order: 4;
}

@media (min-width: 1024px) {
    .service-intro__image {
        /* --- 被さり・帯の寸法を image 側で一元管理 --- */
        --st-bite: 3rem;       /* 画像が text-group へ食い込む量（index-about と同じ） */
        --st-band-h: 4rem;     /* 画像上の帯の高さ（index-about と同じ） */
        /* 帯色 --st-band-color は common.css の :root で共通定義（以前はここで #E6EAE6 をローカル定義） */
        grid-column: 2;
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
        height: auto;
        order: 0;
        z-index: 2;
    }
}

.service-intro__image-frame {
    width: 100%;
    height: 100%;
    padding: 0;
}

@media (min-width: 1024px) {
    /* frame：帯を出す器。上 padding-top で画像の上に帯（--st-band-h）の余白を作る。
       frame 本体に背景を敷くと高さ全体（画像の裏）に帯色が出て text-group の角切りにもかかるため、
       帯は ::before で画像の真上 4rem に限定し、左端も食い込み分右へ逃がして角切りに乗せない */
    .service-intro__image-frame {
        position: relative;
        padding-top: var(--st-band-h);
        padding-bottom: var(--st-band-h);
    }

    .service-intro__image-frame::before {
        content: '';
        position: absolute;
        top: 0;
        /* 帯は frame の幅に収める（食い込ませない）。画像本体の食い込み部分（左肩）の上には
           帯を出さず、その分 text-group の右上角切りが見えるようにする（index-about と同じ） */
        left: 0;
        right: 0;
        height: var(--st-band-h);
        background-color: var(--st-band-color);
        z-index: 0;
    }

    /* 下帯：上帯（::before）と同じ作りで画像の真下 --st-band-h に限定して出す */
    .service-intro__image-frame::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--st-band-h);
        background-color: var(--st-band-color);
        z-index: 0;
    }
}

.service-intro__image-grid {
    --corner-cut: 28px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.25rem;
    /* 1024px未満：右端から左に95%幅。左に5%余白を残して右寄せ */
    width: 95%;
    margin-left: auto;
    margin-right: 0;
    /* 1024px未満は3枚全体で左上＋左下を角切り。高さは16/11の比率で決まり、各画像は高さ追従 */
    aspect-ratio: 16 / 11;
    -webkit-clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% 100%, var(--corner-cut) 100%, 0 calc(100% - var(--corner-cut)), 0 var(--corner-cut));
    clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% 100%, var(--corner-cut) 100%, 0 calc(100% - var(--corner-cut)), 0 var(--corner-cut));
}

@media (min-width: 576px) {
    .service-intro__image-grid {
        aspect-ratio: 16 / 10;
    }
}

@media (min-width: 768px) {
    .service-intro__image-grid {
        gap: 0.5rem;
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 1024px) {
    .service-intro__image-grid {
        max-width: none;
        /* 画像本体を左へ --st-bite 食い込ませて text-group に被せる（index-about と同じ）。
           image-grid の左上は clip-path で --corner-cut(28px) 角切りされているため、
           text-group 右上の角切り（28px）と噛み合って両方見える */
        margin-left: calc(var(--st-bite) * -1);
        margin-right: 0;
        width: calc(100% + var(--st-bite));
        height: 100%;
        aspect-ratio: auto;
        /* 1024px以上：角切りを左上＋左下に変更（ベースの右下を左下へ） */
        -webkit-clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% 100%, var(--corner-cut) 100%, 0 calc(100% - var(--corner-cut)), 0 var(--corner-cut));
        clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% 100%, var(--corner-cut) 100%, 0 calc(100% - var(--corner-cut)), 0 var(--corner-cut));
    }
}

.service-intro__image-main {
    flex: 1.4;
}

.service-intro__image-main .service-intro__image-img {
    /* 1024px未満はグリッド全体の16/11高さに追従（coverで切り抜き）。
       見た目は3:4の縦長を保ちつつ、全体比率を優先 */
    height: 100%;
}

.service-intro__image-sub {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 768px) {
    .service-intro__image-sub { gap: 0.5rem; }
}

.service-intro__image-sub .service-intro__image-img {
    flex: 1;
    aspect-ratio: auto;
    min-height: 0;
}

/* 画像共通：幅一杯、coverで切り抜き */
.service-intro__image-img {
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* ================================
   右上コーナー装飾：墨＋銀の入れ子菱＋中央ロゴ（deco-logo）。
   画像フレーム内に配置し、画像の肩（右上）に半分重なる位置へ。
   クリックを拾わないよう pointer-events:none。サイズは --deco-size で1箱所管理 ================================ */
.service-intro__deco {
    --deco-size: 96px;
    position: absolute;
    top: -28px;
    right: -16px;
    width: var(--deco-size);
    height: var(--deco-size);
    pointer-events: none;
    z-index: 4;
}

@media (min-width: 768px) {
    .service-intro__deco {
        --deco-size: 120px;
        top: -34px;
        right: -20px;
    }
}

@media (min-width: 1024px) {
    .service-intro__deco {
        --deco-size: 130px;
        top: -38px;
        right: -22px;
    }
}

@media (min-width: 1200px) {
    .service-intro__deco {
        --deco-size: 150px;
        top: -44px;
        right: -26px;
    }
}

.service-intro__deco-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* 中央ロゴ（装飾用）：内菱の中に収まるサイズで中央配置 */
.service-intro__deco-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38%;
    height: auto;
    transform: translate(-50%, -50%);
    -o-object-fit: contain;
    object-fit: contain;
}

/* テキスト群ラッパー：縦書きタイトル＋本文をグルーピング。
   タイトル関連の寸法をここで一元管理（index-ourwork の --ow-title-w と同じ考え方）。
   --st-title-left：タイトルの左位置（セクション/カラム左端からの余白）
   --st-title-w：タイトルの占有幅（縦書き文字幅 + 左右padding 0.5rem×2 + border 2px）
   --st-title-gap：タイトルと本文の間隔
   これらをタイトルの left・text-group の左パディングー本文の退避のすべてが参照する */
.service-intro__text-group {
    /* 1024px未満：タイトルが left:5% にあるため、本文退避（左パディング）も 5% を見込む。
       1024px以上では下のメディアクエリで rem 値に上書きされる */
    --st-title-left: 5%;
    --st-title-w: 3.5rem;
    --st-title-gap: 1rem;
    --st-corner-cut: 28px;
    position: relative;
    isolation: isolate;
    /* 1024px未満：タイトル（text-group 内に絶対配置）を画像配置より前面に出すため、
       text-group 自身を画像より前面（z-index:2）に置く */
    z-index: 2;
    /* index-about の head と同じく最小高さを確保し、中身を縦中央に寄せる（index-about: head 256px） */
    min-height: 256px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 1024px未満：左から95%幅。右に5%余白を残す（index-about の head と同様の作り） */
    width: 95%;
    margin-right: auto;
    /* 背景は ::before 側で角切りして出すため、本体は透明（タイトル飛び出しを切らない） */
    background-color: transparent;
    /* 上下パディングは最低4rem確保。左はタイトル退避分 */
    padding: 4rem 1.5rem 4rem calc(var(--st-title-left) + var(--st-title-w) + var(--st-title-gap));
    /* 1024px未満：panel 内で下の image との間隔を 2.5rem 確保 */
    margin-bottom: 2.5rem;
}

/* 1024px未満：背景面を擬似要素で敷き、右上＋右下を角切り。
   本体に clip-path をかけると上に飛び出したタイトルが切れるため、背景だけをクリップする。
   1024px以上では後方のメディアクエリ内 ::before（同じ角切り）が引き続き効く */
.service-intro__text-group::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #F0F2EE;
    background-image: linear-gradient(rgba(240, 242, 238, 0.85), rgba(240, 242, 238, 0.85)), url("../images/bg-01.jpg");
    background-size: cover;
    background-position: center;
    -webkit-clip-path: polygon(0 0, calc(100% - var(--st-corner-cut)) 0, 100% var(--st-corner-cut), 100% calc(100% - var(--st-corner-cut)), calc(100% - var(--st-corner-cut)) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - var(--st-corner-cut)) 0, 100% var(--st-corner-cut), 100% calc(100% - var(--st-corner-cut)), calc(100% - var(--st-corner-cut)) 100%, 0 100%);
}

@media (min-width: 576px) {
    .service-intro__text-group {
        --st-title-w: 4rem;
        padding: 4rem 2rem 4rem calc(var(--st-title-left) + var(--st-title-w) + var(--st-title-gap));
    }
}

@media (min-width: 768px) {
    .service-intro__text-group {
        /* 768px以上：下の image との間隔を 2.5rem に拡大（768px未満はベースの 2rem） */
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .service-intro__text-group {
        margin-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .service-intro__text-group {
        --st-bite: 3rem;
        --st-corner-cut: 28px;
        --st-title-left: 1.5rem;
        position: relative;
        grid-column: 1;
        order: 0;
        align-self: stretch;
        height: auto;
        /* 1024px未満の width:95%/margin-right:auto を解除（グリッドセル幅いっぱいに戻す） */
        width: auto;
        margin-right: 0;
        /* index-about の head と同じく最小高さを確保（テキストが少なくても下限の高さを保つ）。
           stretch で画像高さに追従しつつ、画像が低い場合はこの min-height が下限になる */
        min-height: 320px;
        min-width: 0;
        box-sizing: border-box;
        z-index: 1;
        /* 中身（text-inner）を縦中央に寄せ、stretch で伸びた背景面の下スカスカを解消 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* 背景は ::before 側で角切りして出すため、本体は透明（タイトル飛び出しを切らない） */
        background-color: transparent;
        /* 右パディング＝上下最低4rem確保 ＋ 右から侵食する画像の量（--st-bite）。
           左パディングも右の侵食量（--st-bite）を加算して左右の余白バランスを揃える */
        padding: 4rem calc(2.5rem + var(--st-bite)) 4rem calc(var(--st-title-left) + var(--st-title-w) + var(--st-title-gap) + var(--st-bite));
    }
}

/* 左上の和紋装飾（紗綾形＝卍崩しの角文様）。薄く敷いて和の質感を添える。
   SVGパターンをデータURIで背景に。装飾なので pointer-events:none */
.service-intro__text-group::after {
    content: none;
}

@media (min-width: 1200px) {
    .service-intro__text-group {
        --st-title-left: 2.5rem;
        --st-title-w: 4rem;
        padding-top: 4rem;
        padding-right: calc(3rem + var(--st-bite));
        padding-bottom: 4rem;
        padding-left: calc(var(--st-title-left) + var(--st-title-w) + var(--st-title-gap) + var(--st-bite));
    }
}

@media (min-width: 1440px) {
    .service-intro__text-group {
        --st-title-left: 3.5rem;
        padding-left: calc(var(--st-title-left) + var(--st-title-w) + var(--st-title-gap) + var(--st-bite));
    }
}

@media (min-width: 1600px) {
    .service-intro__text-group {
        --st-title-left: 5rem;
        padding-left: calc(var(--st-title-left) + var(--st-title-w) + var(--st-title-gap) + var(--st-bite));
    }
}

/* 説明テキストのラッパー：text-group 内の下ブロック */
.service-intro__body {
    padding: 0;
    min-width: 0;
}

/* テキスト内側ラッパー：サブ見出し＋説明を包み、max-width で幅を絞る。
   メイン見出しは縦書きタイトル(.service-intro__title)として text-group 左端に絶対配置したため、ここには含めない。
   768未満：576px・中央寄せ／768～1023：768px／1024以上：解除 */
.service-intro__text-inner {
    max-width: var(--section-width-sm);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

@media (min-width: 768px) {
    .service-intro__text-inner {
        max-width: var(--section-width-md);
    }
}

@media (min-width: 1024px) {
    .service-intro__text-inner {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* 内側ラッパー：max-width（ベース576・768以上768）で幅を絞り中央寄せ。
   1024px以上はグリッドセルに収めるため max-width 解除 */
.service-intro__body-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    max-width: var(--section-width-sm);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .service-intro__body-inner { max-width: var(--section-width-md); }
}

@media (min-width: 1024px) {
    .service-intro__body-inner {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* サブ見出し：縦書きタイトルの下（text-inner 内の最上）。説明との間に下マージン。控えめに */
.service-intro__catch {
    margin-bottom: 1rem;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--color-accent-dark);
}

@media (min-width: 576px) {
    .service-intro__catch {
        font-size: 1.2rem;
    }
}

@media (min-width: 1024px) {
    .service-intro__catch {
        font-size: 1.45rem;
        line-height: 1.7;
    }
}

@media (min-width: 1200px) {
    .service-intro__catch {
        font-size: 1.6rem;
    }
}

@media (min-width: 1440px) {
    .service-intro__catch {
        font-size: 1.75rem;
    }
}

@media (min-width: 1600px) {
    .service-intro__catch {
        font-size: 1.9rem;
    }
}

.service-intro__text {
    text-align: left;
    font-family: var(--font-serif);
    font-size: 0.97rem;
    line-height: 2.1;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .service-intro__text { font-size: 1.05rem; }
}

@media (min-width: 1024px) {
    .service-intro__text { font-size: 1.15rem; }
}

@media (min-width: 1200px) {
    .service-intro__text { font-size: 1.2rem; }
}

@media (min-width: 1440px) {
    .service-intro__text { font-size: 1.3rem; }
}

@media (min-width: 1600px) {
    .service-intro__text { font-size: 1.4rem; }
}

/* 縦書きタイトル（ワンストップ対応）。text-group を基準に左端へ絶対配置。
   タイトル幅 --st-title-w ・左位置 --st-title-left は text-group 側に定義して、
   本文の退避（SP）と text-group の左パディング（PC）、タイトルの left を一元管理 */
.service-intro__title {
    position: absolute;
    top: -2.5rem;
    left: 5%;
    /* 画像配置（.service-intro__image は1024px以上で z-index:2）より前面に出す */
    z-index: 3;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-silver-beige);
    padding: 1.25rem 0.5rem;
    background-color: var(--color-bg-light);
}

/* 左上角の水色三角ワンポイント（border テクニックの直角三角、枠線1pxに重ねる）。
   absolute なので flex アイテムにはならずレイアウトに影響しない */
.service-intro__title::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: var(--color-accent) transparent transparent transparent;
}

/* 1024px以上：タイトルを text-group の左パディング領域に収める（index-ourwork と同じ考え方）。
   タイトル幅 --st-title-w ・左位置 --st-title-left は text-group 側に定義し（継承でここから参照）、
   text-group の左パディングも同じ変数を参照して連動させる */
@media (min-width: 1024px) {
    .service-intro__title {
        top: -2.5rem;
        left: var(--st-title-left);
    }
}

/* タイトルの日本語見出し：1024px以上で縦書き。大きめに見せて主役に（野谷組型） */
.service-intro__title .title__ja {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-align: initial;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .service-intro__title .title__ja {
        font-size: 1.9rem;
    }
}

@media (min-width: 1200px) {
    .service-intro__title .title__ja {
        font-size: 2.1rem;
    }
}

@media (min-width: 1440px) {
    .service-intro__title .title__ja {
        font-size: 2.3rem;
    }
}

@media (min-width: 1600px) {
    .service-intro__title .title__ja {
        font-size: 2.5rem;
    }
}

/* 本文ラッパー：タイトルの退避は text-group の左パディングが担うため、
   こちらでは退避しない（SP/PC 共通で text-group パディングに一本化） */
.service-intro__text-inner {
    padding-left: 0;
}

/* ================================
   対応工事（1件ずつ全幅で大きく、画像とテキストを左右交互に配置）
   ナビ「施工実績」と同様、各ブロックはアンカーターゲットのためヘッダー高さ分オフセット
================================ */
/* このセクションは共通 .section の左右パディングを打ち消し、中身を画面端まで届ける。
   タイトル（title__header）と CTA は中身側で左右余白を持たせて両端貼り付きを防ぐ */
.service-list {
    padding-left: 0;
    padding-right: 0;
}

.work-rows {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-bottom: 3rem;
    width: 100%;
    max-width: var(--section-width-sm);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .work-rows {
        gap: 5.5rem;
        max-width: var(--section-width-md);
    }
}

@media (min-width: 1024px) {
    .work-rows {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* アンカー先（scroll-margin-top は common.css で共通指定） */
.work-row {
    /* カード輪郭の角切り量（1024未満時）。画像左上・テキスト面右下・背景面右下で共有 */
    --corner-cut: 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    isolation: isolate;
    /* 1024px未満：カード幅 90%・中央寄せ（1024以上は下のメディアクエリで解除） */
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* 背景面：行全体（inset:0）に敷く。
   1024px未満（縦積み）：単色（淡ベージュ）。施工実績カードと揃えてカード輪郭を左上＋右下の角切りに。
   背景面も画像と同じ左上を角切りしないと、画像の左上角切り部分から背景色が透ける（四角が残る）ため、両方の左上を揃える。
   斜線分割は横並びの1024px以上でだけ意味を持つため、
   下の PC メディアクエリで ::before（左半）＋::after（右半）の2色斜線に上書きする */
.work-row::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-bg-light);
    -webkit-clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%, 0 var(--corner-cut));
    clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%, 0 var(--corner-cut));
}

/* 1024px未満：偶数カード（2・4番目）は白っぽい色単色に。
   奇数（ベージュ寄り）と差をつけ、交互のリズムを作る */
.work-row:nth-child(even)::before {
    background-color: var(--color-white-light);
}

@media (min-width: 1024px) {
    .work-row {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        --work-slant: 64px;
        /* 1024px未満のカード幅90%・中央寄せを解除（横並びは幅いっぱい） */
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .work-row::before {
        background-color: var(--color-bg-light);
        -webkit-clip-path: polygon(0 0, calc(50% + var(--work-slant) / 2) 0, calc(50% - var(--work-slant) / 2) 100%, 0 100%);
        clip-path: polygon(0 0, calc(50% + var(--work-slant) / 2) 0, calc(50% - var(--work-slant) / 2) 100%, 0 100%);
    }

    .work-row::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: #F0F2EE;
        -webkit-clip-path: polygon(calc(50% + var(--work-slant) / 2 - 1px) 0, 100% 0, 100% 100%, calc(50% - var(--work-slant) / 2 - 1px) 100%);
        clip-path: polygon(calc(50% + var(--work-slant) / 2 - 1px) 0, 100% 0, 100% 100%, calc(50% - var(--work-slant) / 2 - 1px) 100%);
    }

    .work-row:nth-child(even)::before {
        background-color: var(--color-white-light);
    }

    .work-row:nth-child(even)::after {
        background-color: var(--color-white-down);
    }

    /* 偶数：背景斜線を左上→右下（上辺左寄り・下辺右寄り）に。
       奇数は右上→左下（上辺右寄り・下辺左寄り）なので、偶数はそれを反転 */
    .work-row:nth-child(even)::before {
        -webkit-clip-path: polygon(0 0, calc(50% - var(--work-slant) / 2) 0, calc(50% + var(--work-slant) / 2) 100%, 0 100%);
        clip-path: polygon(0 0, calc(50% - var(--work-slant) / 2) 0, calc(50% + var(--work-slant) / 2) 100%, 0 100%);
    }

    .work-row:nth-child(even)::after {
        -webkit-clip-path: polygon(calc(50% - var(--work-slant) / 2 - 1px) 0, 100% 0, 100% 100%, calc(50% + var(--work-slant) / 2 - 1px) 100%);
        clip-path: polygon(calc(50% - var(--work-slant) / 2 - 1px) 0, 100% 0, 100% 100%, calc(50% + var(--work-slant) / 2 - 1px) 100%);
    }

    /* 偶数番目（2・4番目）は画像を右に回して交互配置 */
    .work-row:nth-child(even) {
        flex-direction: row-reverse;
    }
}

/* 画像：平行四辺形クリップ（サイト全体の作りと揃える）。PCでは半分幅 */
.work-row__image {
    --corner-cut: 22px;
    position: relative;
    width: 100%;
}

/* メイン画像　ベース（SP～1023px）：施工実績カードと揃えてカード輪郭を左上＋右下にする。
   カード上半＝画像なので、画像は「左上」だけ角切り（右下は下の work-row__body が担う）。
   1024px以上は下のメディアクエリで「端から中央斜線まで満たす」斜線形に上書きされる */
.work-row__img--main {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corner-cut));
    clip-path: polygon(var(--corner-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corner-cut));
}

@media (min-width: 768px) {
    .work-row__img--main { aspect-ratio: 16 / 9; }
}

@media (min-width: 1024px) {
    .work-row__image {
        /* 端から中央斜線までを満たす幅（50%＋斜線の振れ半分）。高さは行いっぱい（stretch） */
        width: calc(50% + var(--work-slant) / 2);
        align-self: stretch;
        min-height: 320px;
    }

    /* メイン画像：画像領域をいっぱいに満たし、中央側エッジを斜線（--work-slant）に沿わせる。
       奇数（画像左）：右辺を上が右・下が左の斜線に。背景の中央斜線と合う */
    .work-row__img--main {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--work-slant)) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, calc(100% - var(--work-slant)) 100%, 0 100%);
    }

    /* 偶数（画像右・row-reverse）：背景斜線（左上→右下）に沿うよう、左辺（中央側エッジ）を上が左・下が右に */
    .work-row:nth-child(even) .work-row__img--main {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, var(--work-slant) 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, var(--work-slant) 100%);
    }
}

/* プレースホルダー表示（実画像未用意時：img ではなく div にアイコン中央） */
.work-row__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-cream);
    color: var(--color-gray-light);
    font-size: 2.5rem;
}

/* テキスト側：PCでは半分幅。背景・角切りは行全体の中央斜線分割（.work-row::before）に任せ、
   body 自身は透明。テキストが斜線にかからないよう内側にパディングを持たせる。
   1024px未満：縦積みの下半分（テキスト側）に画像側と別色を敷き、上下2色に（1024以上の斜線分割の縦版）。
   右下角切りは背景面 ::before が担うが、body に色を載せると右下が四角で残るため body 側にも右下角切りを入れる */
.work-row__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    z-index: 1;
    padding: 2rem 1.75rem;
    /* 1024px未満：奇数テキスト側の色（画像側 --color-bg-light と対） */
    background-color: #F0F2EE;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
}

/* 1024px未満：偶数テキスト側の色（画像側 --color-white-light と対） */
.work-row:nth-child(even) .work-row__body {
    background-color: var(--color-white-down);
}

@media (min-width: 768px) {
    .work-row__body {
        padding: 2.5rem 2.25rem;
    }
}

@media (min-width: 1024px) {
    .work-row__body {
        width: calc(50% - var(--work-slant) / 2);
        justify-content: center;
        /* 1024px以上：上下の余白を 4rem に（左右は 768px の 2.25rem を維持） */
        padding: 4rem 2.25rem;
        /* 1024px以上：背景・角切りは中央斜線分割（::before/::after）に任せるので body は透明に戻し、
           1024未満で入れた上下2色用の背景・右下角切りを打ち消す */
        background-color: transparent;
        -webkit-clip-path: none;
        clip-path: none;
    }

    .work-row:nth-child(even) .work-row__body {
        background-color: transparent;
    }
}

/* 大きな連番（装飾） */
.work-row__num {
    font-family: var(--font-en);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .work-row__num { font-size: 3rem; }
}

/* 見出しラッパー：日本語タイトルと英語ラベルを水平に並べ、縦中央揃え。
   日本語が主、英語はその右に従える */
.work-row__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
}

/* 英語ラベル：日本語タイトルの右に添える装飾字（title__en と同系の作法）。
   下線装飾・skew はなくし、水平のままタイトルに並べる */
.work-row__en {
    display: inline-block;
    font-family: var(--font-en);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

/* 対応内容タグ：説明文の下に小さなチップで並べる。
   角切り（左上・右下）と枠線を両立させるため、トップの service-list-top カードと同じ重ね方式。
   本体＝枠色（silver-beige）の角切り面、::before で 1px 内側に背景色の角切りを重ね、
   差分の 1px を斜辺含む全周の枠線に見せる（border + clip-path だと角で線が見切れるのを回避）。
   縦線マーカーは ::before を枠に使うため ::after へ移動（order:-1 でテキスト左に配置） */
.work-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.work-row__tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--color-text);
    padding: 0.3rem 0.75rem 0.3rem 0.9rem;
    position: relative;
    isolation: isolate;
    /* 本体＝枠色の角切り面 */
    background-color: var(--color-silver-beige);
    -webkit-clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* 内側の背景面：1px 小さい角切り。本体（枠色）との差分 1px が斜辺含む全周の枠線に見える */
.work-row__tag::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
    background-color: var(--color-white-light);
    -webkit-clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* タグ左の縦線マーカー（アクセント色）。::before を枠に使うため ::after で描画し、order で左端へ */
.work-row__tag::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background-color: var(--color-accent);
    margin-right: 0.5rem;
    order: -1;
}

@media (min-width: 768px) {
    .work-row__tag { font-size: 0.85rem; }
}

.work-row__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-title);
    letter-spacing: 0.08em;
}

@media (min-width: 768px) {
    .work-row__title { font-size: 1.8rem; }
}

.work-row__text {
    font-family: var(--font-serif);
    font-size: 0.97rem;
    line-height: 2.1;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .work-row__text { font-size: 1.05rem; }
}

/* CTA */
.service-list__cta {
    text-align: center;
}

/* ================================
   施工実績（Works）
   #works の scroll-margin-top は common.css で共通指定
================================ */
.works__lead {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 0.97rem;
    line-height: 2.1;
    color: var(--color-text);
    max-width: 680px;
    margin: 0 auto 3rem;
}

@media (min-width: 768px) {
    .works__lead { font-size: 1.05rem; }
}

.works__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 600px) {
    .works__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .works__grid { grid-template-columns: repeat(3, 1fr); }
}

.works-card {
    position: relative;
    isolation: isolate;
    background-color: transparent;
}

/* 枠：カードより1px外側に同じ角切り面を背面に敷き、四方に1pxの枠としてのぞかせる。
   トップのサービス抹取カード（.service-list-top__item）と同じ手法。色はシルバーベージュ */
.works-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 0;
    background-color: var(--color-silver-beige);
    -webkit-clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px);
    clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px);
    transition: background-color 0.3s ease;
}

/* 中身（画像・本文）は枠（::before）の前面へ。
   画像枠の左上・本文の右下を角切りにしてカード輪郭を作るため、
   カード本体に白面（::after）は敷かない（二重になって角が白く残るため） */
.works-card > * {
    position: relative;
    z-index: 1;
}

.works-card:hover::before {
    background-color: var(--color-accent);
}

.works-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

/* プレースホルダー表示（実績画像未用意時：img ではなく div にアイコン中央） */
.works-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-cream);
    color: var(--color-gray-light);
    font-size: 2.5rem;
}

.works-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
    background-color: var(--color-surface);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.works-card__category {
    display: inline-block;
    font-family: var(--font-en);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--color-accent-dark);
    background-color: var(--color-accent-light);
    padding: 0.2rem 0.7rem;
    margin-bottom: 0.75rem;
}

.works-card__title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-title);
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* ================================
   施工実績 CMS（PKOBO-News01）連携パーツ
   件数表示／カード内スライダー／空状態／ページネーション
================================ */

/* 件数表示 */
.works-count {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--color-text-light);
    letter-spacing: 0.06em;
    margin: 0 0 2rem;
}

.works-count__num {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-accent-down);
    margin: 0 0.25rem;
}

/* カード画像枠：スライダーの基準。左上を角切り（カード上辺のカットに追従）。
   aspect-ratio はプレースホルダーと統一 */
.works-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-cream);
    -webkit-clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}

/* 画像なしプレースホルダー（CMS：画像未登録時） */
.works-card__noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-gray-light);
    background-color: var(--color-bg-cream);
}

/* スライダー全体：画像枠を埋める */
.works-card__slider {
    position: absolute;
    inset: 0;
}

.works-card__slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 各スライド：フェード切り替え */
.works-card__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.works-card__slide.is-active {
    opacity: 1;
    z-index: 1;
}

.works-card__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.works-card:hover .works-card__slide.is-active .works-card__img {
    transform: scale(1.05);
}

.works-card:hover .works-card__slide:not(.is-active) .works-card__img {
    transform: none;
}

/* Prev / Next ボタン */
.works-card__slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    padding: 0;
    line-height: 1;
}

@media (hover: hover) {
    .works-card:hover .works-card__slider-btn { opacity: 1; }
}

@media (hover: none) {
    .works-card__slider-btn { opacity: 0.85; }
}

.works-card__slider-btn:hover {
    background-color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.works-card__slider-btn--prev { left: 0.5rem; }
.works-card__slider-btn--next { right: 0.5rem; }

/* ドットインジケーター */
.works-card__slider-dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.3rem;
    align-items: center;
    pointer-events: none;
}

.works-card__slider-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.works-card__slider-dot.is-active {
    background-color: #fff;
    transform: scale(1.4);
}

/* 枚数カウント（1/4） */
.works-card__slider-count {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
    background-color: rgba(42, 38, 32, 0.55);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    pointer-events: none;
}

/* ================================
   空状態（未登録）
================================ */
.works-empty {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    text-align: center;
}

.works-empty::before,
.works-empty::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

.works-empty::before {
    top: 0.75rem;
    left: 0.75rem;
    border-top: 1px solid var(--color-accent);
    border-left: 1px solid var(--color-accent);
}

.works-empty::after {
    bottom: 0.75rem;
    right: 0.75rem;
    border-bottom: 1px solid var(--color-accent);
    border-right: 1px solid var(--color-accent);
}

.works-empty__msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.works-empty__icon {
    color: var(--color-accent-down);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.works-empty__sub {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    color: var(--color-text-light);
    letter-spacing: 0.06em;
}

/* ================================
   ページネーション
================================ */
.works-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.works-pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    height: 42px;
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
}

.works-pagination__btn:not(.is-disabled):hover {
    border-color: var(--color-accent);
    color: var(--color-title);
    background-color: var(--color-accent-light);
}

.works-pagination__btn.is-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.works-pagination__nums {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.works-pagination__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

a.works-pagination__num:hover {
    border-color: var(--color-accent);
    color: var(--color-title);
    background-color: var(--color-accent-light);
}

.works-pagination__num.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    pointer-events: none;
}

/* ================================
   施工実績カード：スクロール時に左上から1枚ずつブラーフェード（animation.js が順番に is-revealed を付与）。
   質感は .js-reveal-text と同等（移動なし・透明＋ブラー）
================================ */
.js-works-reveal {
    opacity: 0;
    filter: blur(2px);
    transition: opacity 0.7s ease, filter 0.7s ease;
    will-change: opacity, filter;
}

.js-works-reveal.is-revealed {
    opacity: 1;
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .js-works-reveal {
        opacity: 1;
        filter: none;
        transition: none;
    }
}