@charset "UTF-8";
/* ========================================
   index.css - トップページ
======================================== */

/* ================================
   トップ限定：セクションの左右パディングは親(.section)に持たせず、
   コンテンツ側(.section__inner)に持たせる。
================================ */
.page-index main .section {
    padding-left: 0;
    padding-right: 0;
}

.page-index main .section__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 576px) {
    .page-index main .section__inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .page-index main .section__inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* 業務内容：外側（section）に左右パディング、内側（inner）に max-width の構造。 */
.page-index main .service-block .section__inner {
    padding-left: 0;
    padding-right: 0;
}

.page-index main .service-block {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 576px) {
    .page-index main .service-block {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .page-index main .service-block {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ================================
   ファーストビュー
================================ */
.fv {
    position: relative;
    margin-top: var(--header-height);
    height: calc(var(--fv-height, 100svh) - var(--header-height));
    min-height: 600px;
    max-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

@media (min-width: 576px) {
    .fv {
        max-height: 860px;
    }
}

@media (min-width: 768px) {
    .fv {
        min-height: 680px;
        max-height: 920px;
    }
}

@media (min-width: 1024px) {
    .fv {
        max-height: 1080px;
    }
}

.fv__slides {
    position: absolute;
    inset: 0;
}

.fv__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.fv__slide.is-active {
    opacity: 1;
}

.fv__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 39, 35, 0.1), rgba(14, 39, 35, 0.2));
}

.fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fv__logo {
    margin: 0;
    opacity: 0;
    animation: fvFade 1s ease forwards 0.3s;
}

.fv__logo img {
    display: block;
    width: max(292px, min(78vw, 480px));
    height: auto;
}

@media (min-width: 768px) {
    .fv__logo img {
        width: min(50vw, 560px);
    }
}

@keyframes fvFade {
    to {
        opacity: 1;
    }
}

/* ================================
   サービス抜粋
================================ */
.service-list-top__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 576px) {
    .service-list-top__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.service-list-top__item {
    position: relative;
    display: block;
    transition: opacity 0.3s ease;
    isolation: isolate;
}

.service-list-top__item:hover {
    opacity: 0.85;
}

.service-list-top__image {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 11;
    background-color: var(--color-bg-cream);
    overflow: hidden;
    -webkit-clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

.service-list-top__item::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);
}

.service-list-top__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

@media (min-width: 576px) {
    .service-list-top__image {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 1024px) {
    .service-list-top__image {
        aspect-ratio: 16 / 11;
    }
}

.service-list-top__name {
    position: absolute;
    top: -0.75rem;
    right: 3%;
    z-index: 2;
    min-height: 8.5em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-title);
    letter-spacing: 0.12em;
    line-height: 1.4;
    padding: 0.5rem 0.25rem;
    background-color: rgba(255, 255, 255, 1);
    /* サイト共通の枠線色（シルバーベージ）で囲う */
    border: 1px solid var(--color-silver-beige);
}

/* 左上角の水色三角ワンポイント（border テクニックの直角三角）。
   index-about__title 等と同パターン。枠線1pxに重ねて角に収めるため top/left は -1px */
.service-list-top__name::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;
}

.service-list-top__cta {
    text-align: center;
}

.index-about__cta {
    width: 100%;
    text-align: right;
}

/* ================================
   会社概要（About Us）
================================ */
/* このセクションだけ page-top-section の FV 食い込み（負 margin-top）を打ち消し、
   head が上に飛び出さず FV の下に収まるようにする */
.page-index main .index-about.page-top-section {
    margin-top: 0;
}

.page-index main .index-about__layout {
    padding-left: 0;
    padding-right: 0;
}

.index-about__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* セクション地：きなりいろ（--color-ivory-dark）。和の落ち着いたアイボリー */
    background-color: var(--color-ivory-dark);
    /* 880px未満：リードの CTA ボタンが translateY(50%) で下に半分はみ出すため、
       そのボタン高さ分の下パディングを確保して次要素と重ならないようにする */
    padding-bottom: 2.5rem;
}

@media (min-width: 880px) {
    .index-about__layout {
        /* 880px以上はグリッド側の padding-bottom（4rem）を使うので SP用の下パディングは打ち消す */
        padding-bottom: 0;
    }
}

.index-about__head {
    order: 1;
}

.index-about__image--tr {
    order: 2;
}

.index-about__image--bl {
    order: 3;
}

.index-about__lead {
    order: 4;
}

@media (min-width: 880px) {
    .index-about__layout {
        --about-step: 64px;
        --about-overlap: 56px;
        --about-bite: 3rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        column-gap: 0;
        row-gap: 0;
        /* 左下画像が bottom:-4rem で行下にはみ出す分をセクション実寸に確保し、次セクションと重ならないようにする */
        padding-bottom: 4rem;
        /* 右カラム要素（tr画像・lead）が右へ意図的にはみ出す分だけを切る（880〜1023pxの見切れ対策）。
           overflow:hidden だと縦のはみ出し演出（左下画像 bottom:-4rem / CTA translateY）も切れるため、
           clip-path で左右のみクリップし、上下は広く残して縦の演出を保護する */
        -webkit-clip-path: inset(-100vh 0 -100vh 0);
        clip-path: inset(-100vh 0 -100vh 0);
    }

    .index-about__head {
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
        align-self: stretch;
        width: auto;
    }

    .index-about__image--bl {
        grid-column: 1;
        grid-row: 2;
        z-index: 6;
        align-self: stretch;
        position: relative;
        padding: 0;
    }

    .index-about__image--bl .index-about__image-frame {
        position: absolute;
        top: 0;
        left: 0;
        right: 2rem;
        bottom: 0;
        width: auto;
        height: auto;
        aspect-ratio: auto;
    }

    .index-about__image--bl .index-about__image-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        -o-object-position: top center;
        object-position: top center;
    }

    .index-about__image--tr {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        /* 行高から about-step 引いた高さに 4rem 加算して高くする */
        height: calc(100% - var(--about-step) + 4rem);
        position: relative;
        padding: 0;
    }

    .index-about__lead {
        grid-column: 2;
        grid-row: 2;
        position: relative;
        margin-left: calc(var(--about-bite) * -1);
        width: calc(100% + var(--about-bite));
    }
}

.index-about__image--bl {
    background-color: var(--color-beige);
}

.index-about__lead {
    background-color: transparent;
}

.index-about__head {
    isolation: isolate;
}

.index-about__head::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -2px;
    z-index: 0;
    /* 背景写真（bg-01）を藄っすら透かす。上に半透明ベージュを重ねて文字の可読性を確保（写真は約１５％透ける） */
    background-image: linear-gradient(rgba(250, 246, 238, 0.85), rgba(250, 246, 238, 0.85)), url("../images/bg-01.jpg");
    background-size: cover;
    background-position: center;
    -webkit-clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.index-about__image--tr {
    background-color: var(--about-frame-color);
}

.index-about__head {
    --about-title-w: 4.5rem;
    position: relative;
    width: 95%;
    min-height: 256px;
    padding: 2rem 1.5rem;
}

@media (min-width: 576px) {
    .index-about__head {
        padding: 3rem 2rem;
    }
}

@media (min-width: 880px) {
    .index-about__head {
        --about-title-w: 5.5rem;
        min-height: 320px;
        padding: 3.5rem 2.5rem 3.5rem 3rem;
    }
}

@media (min-width: 880px) {
    .index-about__head {
        width: auto;
    }
}

.index-about__title {
    position: absolute;
    top: -2rem;
    left: 5%;
    z-index: 1;
    margin-bottom: 0;
    align-items: center;
    border: 1px solid var(--color-silver-beige);
    padding: 1.25rem 0.5rem;
    background-color: var(--color-bg-light);
}

/* 左上角の水色三角ワンポイント（border テクニックの直角三角）。
   枠線 1px に重ねて角に収めるため top/left は -1px */
.index-about__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;
}

@media (min-width: 576px) {
    .index-about__title {
        left: 5%;
    }
}

@media (min-width: 880px) {
    .index-about__title {
        left: 3rem;
    }
}

.index-about__title .title__en {
    margin-bottom: 0.75rem;
}

.index-about__title .title__ja {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1.6rem;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-align: initial;
}

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

.index-about__head-catch {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    min-height: inherit;
    padding-left: var(--about-title-w);
}

@media (min-width: 880px) {
    .index-about__head-catch {
        padding-right: var(--about-bite);
    }
}

.index-about__catch {
    font-family: var(--font-heading);
    /* キャッチコピー（モバイルファース）。ベース（〜575px）＝1.6rem。
       行間詰めで塊感を出し、各行（<br>区切り）は nowrap で意図しない折り返しを防ぐ */
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--color-title);
}

@media (min-width: 576px) {
    .index-about__catch {
        font-size: 1.8rem;
    }
}

/* 880px以上（横2カラム）：clamp で流動。中間はvw追従→大画面で最大2rem */
@media (min-width: 880px) {
    .index-about__catch {
        font-size: clamp(1.8rem, 1.1rem + 1.4vw, 2rem);
    }
}

.index-about__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) {
    .index-about__text {
        font-size: 1.05rem;
    }
}

.index-about__image {
    width: 100%;
    padding: 1.75rem;
}

@media (min-width: 880px) {
    .index-about__image {
        padding: 2rem;
    }
}

.index-about__lead {
    --about-lead-cut: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem 1.5rem;
    color: #fff;
    position: relative;
    width: 95%;
    margin-left: auto;
}

/* 濃い面の背景（::before）：本体に直接背景を敷くと CTA はみ出しなどで扱いづらいため擬似要素に。
   SPは全面＋左下24pxカット。isolation なしのため z-index:-1 だと親（layout 背景）の裏に潜るので z-index:0 */
.index-about__lead::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--lead-bg);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

/* テキスト・CTAを ::before（z-index:0）より前面に（SP含む全幅） */
.index-about__lead > .index-about__text,
.index-about__lead > .index-about__cta {
    position: relative;
    z-index: 1;
}

@media (min-width: 880px) {
    .index-about__lead {
        grid-column: 2;
        grid-row: 2;
        position: relative;
        /* 本体に z-index を付けると stacking context ができ、帯(::after)が本体内に閉じ込められて
           画像より前面になってしまう。前面性は ::before（背景）とテキストの個別 z-index で担保し、
           帯(::after z-index:1)は画像(6)より背面に置けるよう本体には z-index を付けない */
        justify-content: center;
        margin-left: calc(var(--about-bite) * -1);
        width: calc(100% + var(--about-bite));
    }

    /* 濃い面の背景（::before）：左下を角切り（統一値 28px）。左下画像（z-index:6）より前面 */
    .index-about__lead::before {
        z-index: 7;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, var(--about-lead-cut) 100%, 0 calc(100% - var(--about-lead-cut)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, var(--about-lead-cut) 100%, 0 calc(100% - var(--about-lead-cut)));
    }

    /* リードのテキスト・CTA：左下画像（z-index:6）より前面に表示 */
    .index-about__lead > .index-about__text,
    .index-about__lead > .index-about__cta {
        position: relative;
        z-index: 8;
    }
}

.index-about__lead .index-about__cta {
    position: absolute;
    right: 5%;
    bottom: 0;
    transform: translateY(50%);
    width: auto;
    max-width: none;
}

.index-about__lead .index-about__text {
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
}

@media (min-width: 576px) {
    .index-about__lead {
        padding: 3.5rem 2rem;
    }
}

@media (min-width: 880px) {
    .index-about__lead {
        /* 上の 880px ブロックの padding-top / padding-bottom（帯スペース）を潰さないよう左右のみ指定 */
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.index-about__lead .index-about__text {
    color: rgba(255, 255, 255, 0.92);
    line-height: 2.4;
}

.index-about__image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-light);
    font-size: 2.5rem;
}

@media (min-width: 880px) {
    .index-about__image-placeholder {
        border-right: none;
    }
}

.index-about__image-frame {
    --about-clip: 14%;
    position: relative;
    width: 100%;
    height: 100%;
}

.index-about__image-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--about-frame-color);
}

.index-about__image-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    -o-object-fit: cover;
    object-fit: cover;
}

.index-about__image--tr .index-about__image-frame {
    aspect-ratio: 16 / 7;
    width: 95%;
    margin-left: auto;
}

.index-about__image--tr {
    padding: 0;
}

.index-about__image--bl {
    padding: 0;
    display: none;
}

.index-about__image--bl .index-about__image-frame {
    width: 95%;
    margin-left: auto;
    aspect-ratio: 16 / 7;
}

.index-about__image--bl .index-about__image-img {
    height: 100%;
    aspect-ratio: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
}

@media (min-width: 880px) {
    .index-about__image--bl {
        padding: 0;
        display: block;
    }

    .index-about__image--bl .index-about__image-frame {
        position: absolute;
        top: 0;
        left: calc(var(--about-bite) * -1);
        /* head の ::before 右端（カラム右端 +2px）とラインを合わせる */
        right: -2px;
        /* リードより 4rem 下に伸ばし、リード下に画像が見える余白を作る（行下へはみ出し） */
        bottom: -4rem;
        width: auto;
        height: auto;
        margin-left: 0;
        aspect-ratio: auto;
    }

    .index-about__image--bl .index-about__image-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        -o-object-position: top center;
        object-position: top center;
        /* 右下の角を角切り（サイト統一値 28px） */
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
    }
}

.index-about__image--tr .index-about__image-img--half {
    --about-slant: 32px;
    --about-cut: 24px;
    --about-split-shift: 2rem;
    position: absolute;
    top: 0;
    bottom: 0;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    z-index: 2;
}

.index-about__image--tr .index-about__image-img--half:first-of-type {
    left: 0;
    width: calc(50% - var(--about-split-shift) + var(--about-slant));
    z-index: 3;
    -webkit-clip-path: polygon(var(--about-cut) 0, 100% 0, calc(100% - var(--about-slant)) 100%, 0 100%, 0 var(--about-cut));
    clip-path: polygon(var(--about-cut) 0, 100% 0, calc(100% - var(--about-slant)) 100%, 0 100%, 0 var(--about-cut));
}

.index-about__image--tr .index-about__image-img--half:last-of-type {
    left: calc(50% - var(--about-split-shift) - var(--about-slant));
    width: calc(50% + var(--about-split-shift) + var(--about-slant));
    -webkit-clip-path: polygon(var(--about-slant) 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(var(--about-slant) 0, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 576px) {
    .index-about__image-img {
        aspect-ratio: 16 / 10;
    }
}

@media (min-width: 768px) {
    .index-about__image-img {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 880px) {
    .index-about__image-img {
        aspect-ratio: 16 / 11;
        height: auto;
    }

    .index-about__image--tr .index-about__image-frame {
        position: absolute;
        top: 4rem;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        margin-left: 0;
        aspect-ratio: auto;
    }

    .index-about__image--tr .index-about__image-img--half {
        --about-slant: 40px;
        --about-cut: 28px;
        --about-split-shift: 3rem;
        position: absolute;
        top: 0;
        bottom: 0;
        max-width: none;
        height: 100%;
        aspect-ratio: auto;
        z-index: 6;
    }

    .index-about__image--tr .index-about__image-img--half:first-of-type {
        left: calc(var(--about-bite) * -1);
        width: calc(50% - var(--about-split-shift) + var(--about-bite) + var(--about-slant));
        z-index: 7;
        -webkit-clip-path: polygon(var(--about-cut) 0, 100% 0, calc(100% - var(--about-slant)) 100%, 0 100%, 0 var(--about-cut));
        clip-path: polygon(var(--about-cut) 0, 100% 0, calc(100% - var(--about-slant)) 100%, 0 100%, 0 var(--about-cut));
    }

    .index-about__image--tr .index-about__image-img--half:last-of-type {
        left: calc(50% - var(--about-split-shift) - var(--about-slant));
        width: calc(50% + var(--about-split-shift) + var(--about-slant));
        -webkit-clip-path: polygon(var(--about-slant) 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(var(--about-slant) 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ================================
   業務内容（統合：大見出し＋4業務一覧）
================================ */
.service-block .section__inner {
    max-width: var(--section-width-sm);
}

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

@media (min-width: 1024px) {
    .service-block .section__inner {
        max-width: var(--section-width-xl);
    }
}

.service-block .title__ja {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: 0.12em;
    line-height: 1.5;
}

/* ================================
   私たちの仕事（index-ourwork）：index-about を左右鏡像反転したレイアウト。
   配置：右列＝head（縦書きタイトル＋キャッチ）→画像br、左列＝画像tl→濃い面lead。
================================ */
.page-index main .index-ourwork__layout {
    padding-left: 0;
    padding-right: 0;
}

.index-ourwork {
    padding-top: 0;
    padding-bottom: 0;
}

.index-ourwork__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* セクション地：共通帯色（--st-band-color）。service-intro と同系の青緑グレー */
    background-color: var(--st-band-color);
    /* 880px未満：リードの CTA ボタンが translateY(50%) で下に半分はみ出すため、
       そのボタン高さ分の下パディングを確保して次要素と重ならないようにする */
    padding-bottom: 2.5rem;
}

@media (min-width: 880px) {
    .index-ourwork__layout {
        /* 880px以上はグリッド側の padding-bottom（4rem）を使うので SP用の下パディングは打ち消す */
        padding-bottom: 0;
    }
}

.index-ourwork__head {
    order: 1;
}

.index-ourwork__image--tl {
    order: 2;
}

.index-ourwork__image--br {
    order: 3;
}

.index-ourwork__lead {
    order: 4;
}

@media (min-width: 880px) {
    .index-ourwork__layout {
        --ow-step: 64px;
        --ow-overlap: 56px;
        --ow-bite: 3rem;
        --ow-frame-color: var(--color-ivory-dark);
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        column-gap: 0;
        row-gap: 0;
        /* index-about と対称：br画像を 4rem 下に伸ばした際の受け皿としてセクション実寸に 4rem 確保 */
        padding-bottom: 4rem;
        /* 左右への意図的なはみ出しだけを切る（中間帯の見切れ対策）。
           overflow:hidden だと縦のはみ出し（leadの margin-bottom:-4rem / CTA）も切れるため、
           clip-path で左右のみクリップし、上下は広く残して縦の演出を保護する */
        -webkit-clip-path: inset(-100vh 0 -100vh 0);
        clip-path: inset(-100vh 0 -100vh 0);
    }

    .index-ourwork__head {
        grid-column: 2;
        grid-row: 1;
        z-index: 2;
        align-self: stretch;
        width: auto;
    }

    .index-ourwork__image--br {
        grid-column: 1;
        grid-row: 2;
        /* 右下のリード（背景::before z-index:7 / テキスト z-index:8）より前面に出す */
        z-index: 9;
        align-self: stretch;
        position: relative;
        padding: 0;
    }

    .index-ourwork__image--br .index-ourwork__image-frame {
        position: absolute;
        top: 0;
        left: 3rem;
        right: 2rem;
        bottom: 0;
        width: auto;
        height: auto;
        aspect-ratio: auto;
    }

    .index-ourwork__image--br .index-ourwork__image-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
    }

    .index-ourwork__image--tl {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        /* 行高から ow-step 引いた高さ（4rem 加算をやめて 4rem 低くした） */
        height: calc(100% - var(--ow-step));
        position: relative;
        padding: 0;
        display: block;
    }

    .index-ourwork__lead {
        grid-column: 2;
        grid-row: 2;
        position: relative;
        margin-right: calc(var(--ow-bite) * -1);
        margin-left: 0;
        width: calc(100% + var(--ow-bite));
    }
}

.index-ourwork__image--tl {
    background-color: var(--color-beige);
}

.index-ourwork__lead {
    background-color: transparent;
}

.index-ourwork__head {
    isolation: isolate;
}

.index-ourwork__head::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    right: 0;
    z-index: 0;
    /* 背景写真（bg-02）を藄っすら透かす。index-about と同じ半透明ベージュを重ねる */
    background-image: linear-gradient(rgba(250, 246, 238, 0.85), rgba(250, 246, 238, 0.85)), url("../images/bg-01.jpg");
    background-size: cover;
    background-position: center;
    -webkit-clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
    clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
}

/* head 右側のさりげない和紋（網代・細かめ・銀色）。index-about の左側配置を鳡像にして右側に。
   背景面（::before）の前面・キャッチより背面（z-index:0）。装飾なので pointer-events:none */
.index-ourwork__image--tl {
    background-color: var(--ow-frame-color);
}

.index-ourwork__head {
    --ow-title-w: 4.5rem;
    position: relative;
    width: 95%;
    margin-left: auto;
    min-height: 256px;
    padding: 2rem 1.5rem;
}

@media (min-width: 576px) {
    .index-ourwork__head {
        padding: 3rem 2rem;
    }
}

@media (min-width: 880px) {
    .index-ourwork__head {
        --ow-title-w: 5.5rem;
        width: auto;
        margin-left: 0;
        min-height: 320px;
        padding: 3.5rem 3rem 3.5rem 2.5rem;
    }
}

.index-ourwork__title {
    position: absolute;
    top: -2.5rem;
    right: 5%;
    left: auto;
    z-index: 1;
    margin-bottom: 0;
    align-items: center;
    border: 1px solid var(--color-silver-beige);
    padding: 1.25rem 0.5rem;
    background-color: var(--color-bg-light);
}

/* 左上角の水色三角ワンポイント（index-about__title と揃える） */
.index-ourwork__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;
}

@media (min-width: 880px) {
    .index-ourwork__title {
        right: 2.5rem;
    }
}

.index-ourwork__title .title__en {
    margin-bottom: 0.75rem;
    padding-left: 0;
}

.index-ourwork__title .title__ja {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1.6rem;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-align: initial;
}

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

.index-ourwork__head-catch {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    min-height: inherit;
    padding-right: var(--ow-title-w);
}

@media (min-width: 880px) {
    .index-ourwork__head-catch {
        padding-left: var(--ow-bite);
    }
}

.index-ourwork__catch {
    font-family: var(--font-heading);
    /* キャッチコピー（モバイルファース）：index-about__catch と揃える。ベース（〜575px）＝1.6rem */
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--color-title);
}

@media (min-width: 576px) {
    .index-ourwork__catch {
        font-size: 1.8rem;
    }
}

/* 880px以上（横2カラム）：clamp で流動。中間はvw追従→大画面で最大2rem */
@media (min-width: 880px) {
    .index-ourwork__catch {
        font-size: clamp(1.8rem, 1.1rem + 1.4vw, 2rem);
    }
}

.index-ourwork__image {
    width: 100%;
    padding: 1.75rem;
}

@media (min-width: 880px) {
    .index-ourwork__image {
        padding: 2rem;
    }
}

.index-ourwork__lead {
    --ow-lead-cut: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem 1.5rem;
    color: #fff;
    position: relative;
    width: 95%;
    margin-right: auto;
}

/* 濃い面の背景（::before）：index-about と同構造。SPは全面＋右下24pxカット（index-about の左下の反転）。
   isolation を外しているため z-index:-1 だと親（layout 背景 ivory-dark）の裏に潜り黒が見えない。
   z-index:0 で本体内の最背面に置き、テキスト（通常フロー）を帯より前面に */
.index-ourwork__lead::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--lead-bg);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

/* テキスト・CTAを ::before（z-index:0）より前面に（SP含む全幅） */
.index-ourwork__lead > .index-ourwork__text,
.index-ourwork__lead > .index-ourwork__cta {
    position: relative;
    z-index: 1;
}

@media (min-width: 880px) {
    .index-ourwork__lead {
        margin-right: calc(var(--ow-bite) * -1);
        margin-left: 0;
        width: calc(100% + var(--ow-bite));
        /* リードのテキストブロックを br画像より 4rem 下に伸ばす（行下の padding-bottom 領域に収める） */
        margin-bottom: -4rem;
        padding-bottom: calc(3rem + 4rem);
    }

    /* 濃い面の背景（::before）：左下を角切り（統一値 28px）。
       br画像より前面に出すため z-index:7 */
    .index-ourwork__lead::before {
        z-index: 7;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ow-lead-cut) 100%, 0 calc(100% - var(--ow-lead-cut)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ow-lead-cut) 100%, 0 calc(100% - var(--ow-lead-cut)));
    }

    /* リードのテキスト・CTA：br画像（z-index:6）より前面に表示 */
    .index-ourwork__lead > .index-ourwork__text,
    .index-ourwork__lead > .index-ourwork__cta {
        position: relative;
        z-index: 8;
    }
}

.index-ourwork__lead .index-ourwork__cta {
    position: absolute;
    right: 0;
    left: auto;
    bottom: 0;
    transform: translateY(50%);
    width: auto;
    max-width: none;
}

@media (min-width: 880px) {
    .index-ourwork__lead .index-ourwork__cta {
        right: calc(2rem + var(--ow-bite));
    }
}

.index-ourwork__lead .index-ourwork__text {
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    /* index-about のテキストブロック（.index-about__text）とフォントファミリーを揃える */
    font-family: var(--font-serif);
    color: rgba(255, 255, 255, 0.92);
    line-height: 2.4;
}

@media (min-width: 576px) {
    .index-ourwork__lead {
        padding: 3.5rem 2rem;
    }
}

@media (min-width: 880px) {
    .index-ourwork__lead {
        padding: 5rem 3rem;
    }
}

.index-ourwork__image-frame {
    position: relative;
    width: 100%;
    height: 100%;
}

.index-ourwork__image-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--ow-frame-color);
}

.index-ourwork__image-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    -o-object-fit: cover;
    object-fit: cover;
}

.index-ourwork__image--tl .index-ourwork__image-frame {
    aspect-ratio: 16 / 7;
    width: 95%;
    margin-right: auto;
}

.index-ourwork__image--tl {
    padding: 0;
    display: none;
}

.index-ourwork__image--tl .index-ourwork__image-img {
    height: 100%;
    aspect-ratio: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
    -webkit-clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

.index-ourwork__image--br .index-ourwork__image-frame {
    aspect-ratio: 16 / 7;
    width: 95%;
    margin-right: auto;
}

.index-ourwork__image--br {
    padding: 0;
}

@media (min-width: 880px) {
    .index-ourwork__image--br {
        padding: 0;
    }

    .index-ourwork__image--br .index-ourwork__image-frame {
        position: absolute;
        top: 0;
        left: 0;
        right: calc(var(--ow-bite) * -1);
        bottom: 0;
        width: auto;
        height: auto;
        margin-right: 0;
        aspect-ratio: auto;
    }

    /* deco（背面の ivory-dark 面）：2枚目画像の右下28px角切りから deco 背景が覚えるため、
       deco にも同じ右下28px角切りを当てて画像と一緒に切る */
    .index-ourwork__image--br .index-ourwork__image-deco {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
    }
}

.index-ourwork__image--br .index-ourwork__image-img--half {
    --ow-slant: 32px;
    --ow-cut: 24px;
    --ow-split-shift: 0rem;
    position: absolute;
    top: 0;
    bottom: 0;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    z-index: 2;
}

.index-ourwork__image--br .index-ourwork__image-img--half:first-of-type {
    left: 0;
    width: calc(50% - var(--ow-split-shift) + var(--ow-slant));
    z-index: 2;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--ow-slant)) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--ow-slant)) 100%, 0 100%);
}

.index-ourwork__image--br .index-ourwork__image-img--half:last-of-type {
    left: calc(50% - var(--ow-split-shift) - var(--ow-slant));
    width: calc(50% + var(--ow-split-shift) + var(--ow-slant));
    z-index: 3;
    -webkit-clip-path: polygon(var(--ow-slant) 0, calc(100% - var(--ow-cut)) 0, 100% var(--ow-cut), 100% 100%, 0 100%);
    clip-path: polygon(var(--ow-slant) 0, calc(100% - var(--ow-cut)) 0, 100% var(--ow-cut), 100% 100%, 0 100%);
}

@media (min-width: 576px) {
    .index-ourwork__image-img {
        aspect-ratio: 16 / 10;
    }
}

@media (min-width: 768px) {
    .index-ourwork__image-img {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 880px) {
    .index-ourwork__image-img {
        aspect-ratio: 16 / 11;
        height: auto;
    }

    .index-ourwork__image--tl {
        display: block;
    }

    .index-ourwork__image--tl .index-ourwork__image-frame {
        position: absolute;
        /* 帯をなくす：以前 top:4rem で上に ivory-dark の帯を出していたが、0 にして画像を上端まで広げる */
        top: 0;
        left: 0;
        right: calc(var(--ow-bite) * -1);
        bottom: 0;
        width: auto;
        height: auto;
        margin-right: 0;
        aspect-ratio: auto;
    }

    .index-ourwork__image--tl .index-ourwork__image-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        z-index: 7;
        -o-object-position: top center;
        object-position: top center;
        -webkit-clip-path: polygon(0 0, calc(100% - var(--ow-cut, 28px)) 0, 100% var(--ow-cut, 28px), 100% 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - var(--ow-cut, 28px)) 0, 100% var(--ow-cut, 28px), 100% 100%, 0 100%);
    }

    .index-ourwork__image--br .index-ourwork__image-img--half {
        --ow-slant: 40px;
        position: absolute;
        top: 0;
        bottom: 0;
        max-width: none;
        height: 100%;
        aspect-ratio: auto;
        z-index: 6;
    }

    .index-ourwork__image--br .index-ourwork__image-img--half:first-of-type {
        left: 0;
        width: calc(50% + var(--ow-slant));
        z-index: 6;
        -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--ow-slant)) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, calc(100% - var(--ow-slant)) 100%, 0 100%);
    }

    .index-ourwork__image--br .index-ourwork__image-img--half:last-of-type {
        left: calc(50% - var(--ow-slant));
        width: calc(50% + var(--ow-slant));
        z-index: 7;
        /* 右辺が斜めの平行四辺形＋右下を 28px 角切り（サイト統一値） */
        -webkit-clip-path: polygon(var(--ow-slant) 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
        clip-path: polygon(var(--ow-slant) 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
    }
}

/* ================================
   施工写真マーキー帯（セクション間：区切り装飾の代わり）
   施工写真を右→左へ無限ループで流す。純CSS（JS不要）。
   同じ画像列を2セット並べ、track を -50% 動かして連結を見せない。
   --marquee-h：帯の高さ、--marquee-gap：写真間隔、--marquee-speed：1周の秒数
================================ */
.photo-marquee {
    --marquee-h: 130px;
    --marquee-gap: 0;
    --marquee-speed: 40s;
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 上下のセクションと揃えてセクション同等の上下パディングを設ける。
       背景は透明（ページ地に溶かし、写真だけが流れる軽い見せ方に） */
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

@media (min-width: 768px) {
    .photo-marquee {
        --marquee-h: 180px;
        --marquee-gap: 0;
    }
}

@media (min-width: 1024px) {
    .photo-marquee {
        --marquee-h: 220px;
    }
}

/* 流れる列：flex で横並び。width:max-content で全画像分の横幅を確保し、
   translateX(-50%) で「１セット分」だけ動かしてループ（２セット目が連結を埋める） */
.photo-marquee__track {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    gap: var(--marquee-gap);
    animation: photo-marquee-scroll var(--marquee-speed) linear infinite;
}

.photo-marquee__item {
    flex: 0 0 auto;
    height: var(--marquee-h);
    /* 画像は横長めに見せる（高さ基準で幅は画像のアスペクトに追従） */
}

.photo-marquee__img {
    /* 平行四辺形（サイト共通の斜辺クリップ）。--marquee-slant で振れ幅を管理。
       上辺が右・下辺が左に振れる斜辺で、右→左の流れに沿わせる */
    --marquee-slant: 22px;
    display: block;
    height: 100%;
    width: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-clip-path: polygon(var(--marquee-slant) 0, 100% 0, calc(100% - var(--marquee-slant)) 100%, 0 100%);
    clip-path: polygon(var(--marquee-slant) 0, 100% 0, calc(100% - var(--marquee-slant)) 100%, 0 100%);
}

@keyframes photo-marquee-scroll {
    from { transform: translateX(0); }
    /* 画像列２セットと gap １個分をちょうど送るため -50% に gap 半分を加味。
       簡易には -50% でもほぼ繋がる（gap 分のわずかなズレは許容範囲） */
    to { transform: translateX(-50%); }
}

/* モーション低減設定：アニメを止める */
@media (prefers-reduced-motion: reduce) {
    .photo-marquee__track {
        animation: none;
    }
}