/**
 * 製作事例：リニューアル共通（TOP の .element-top ＋ 下層ヒーロー）
 * globals / styleguide / top-main / top-laravel-bridge は assets-styles で先行読込
 *
 * PC ヘッダーは c-site-header（layout/header.css）に移行済み。
 */

/* ----- ヒーロー ----- */
.renewal-subpage-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    background-color: #fff8ed;
    box-sizing: border-box;
    /* 上はSPヘッダー(72px / fixed)分を確保して重ねる。下はヒーロー内パンくずが持つので 0。
       PC(≥1024)は下の min-width:1024 ルールが上書きするため、ここは <1024(SP/タブレット)用の設計SP値。
       流体一本化により上80/左右70→24 を rem 化（旧フルード式の SP 側に相当） */
    padding: 80rem 24rem 0;
}

/* PC：ヘッダー（120px / sticky）はフローを占有するため、ヒーローを同じ高さ分だけ上へ引き上げて
   ヘッダー直下に重ねる。これでヘッダー(白60%)の背後にヒーローのグラデが透ける（Figma 4954:99026）。
   タイトル上の余白 = ヘッダー120px ＋ 88px = 208px をパディングで確保。 */
@media (min-width: 1024px) {
    .renewal-subpage-hero {
        padding: 200rem 70rem 0;
    }
}

.renewal-subpage-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.renewal-subpage-hero__bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.renewal-subpage-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 32%, rgba(255, 248, 237, 0) 58%);
}

.renewal-subpage-hero__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 見出し（__ja / __en / __rule）は共通 c-page-title へ移行済み（components/page-title.css）。
   ヒーロー固有の配置は下の __inner / __bg / breadcrumb が担う。 */

/* ----- パンくず：配置・帯背景・余白のみ。中身（先頭アイコン/色/横スクロール）は
   共通 c-breadcrumb が担う ----- */
.renewal-subpage-breadcrumb {
    width: 100%;
    padding: 24rem 70rem;
    box-sizing: border-box;
}

/* ヒーロー（背景画像）内に置く場合：左右パディングはヒーロー側が持つので 0、
   背景画像の上に重ねて帯下端へ寄せる */
.renewal-subpage-hero .renewal-subpage-breadcrumb {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-left: 0;
    padding-right: 0;
}

/* 旧 .renewal-subpage-breadcrumb__dot / __list / __item / __current 系は
   共通 c-breadcrumb（__icon・現在ページのキーカラー・横スクロール）へ統合済みのため削除 */

/*
 * ニュース一覧：カテゴリタブ
 * パンくず（.renewal-subpage-breadcrumb）直下の本文先頭に 40px
 */
body.page-news-index .news-category {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8rem 6rem;
    margin-top: 40rem;
    box-sizing: border-box;
    align-items: start;
}

body.page-news-index .news-category-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14rem;
    /* Figma 3650:164697: タブ高さ 30px（border-box, 1px border 含む） */
    padding: 7rem 6rem;
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: 32rem;
    box-sizing: border-box;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 12rem;
    text-align: center;
    letter-spacing: 0.48rem;
    line-height: 14rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

/* PC：5列×2行の等幅グリッド */
@media (min-width: 1024px) {
    body.page-news-index .news-category {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: 36rem;
        gap: 16rem;
    }

    body.page-news-index .news-category-link {
        width: 100%;
        height: 36rem;
        padding: 8rem 16rem;
        gap: 14rem;
        border-radius: 18rem;
        font-size: 13rem;
        letter-spacing: 0.52rem;
        line-height: normal;
        white-space: nowrap;
    }
}

body.page-news-index .news-category-link--active {
    background-color: var(--color-key);
    color: #ffffff;
    border: 1px solid transparent;
}

body.page-news-index .news-category-link:not(.news-category-link--active) {
    background-color: #ffffff;
    border: 1px solid var(--color-neutral-04);
    color: var(--color-neutral-01);
}

/* ホバー時の薄いオレンジ */
body.page-news-index .news-category-link:not(.news-category-link--active):hover {
    background-color: var(--color-light-orange-02);
    border-color: transparent;
    color: var(--color-neutral-01);
}

body.page-news-index .news-category-link:focus-visible {
    outline: 2rem solid var(--color-key);
    outline-offset: 2rem;
}

/* 公開年バー：カテゴリタブ直下 40px */
body.page-news-index .news-year-filter {
    margin-top: 40rem;
    box-sizing: border-box;
}

body.page-news-index .news-year-filter-form {
    margin: 0;
}

body.page-news-index .news-year-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16rem;
    padding: 8rem 8rem 8rem 16rem;
    position: relative;
    background-color: var(--color-bg-02);
    border-radius: 8rem;
    box-sizing: border-box;
}

body.page-news-index .news-year-filter-row {
    display: inline-flex;
    gap: 16rem;
    flex: 0 0 auto;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    max-width: 100%;
}

body.page-news-index .news-year-filter-label {
    display: inline-flex;
    justify-content: center;
    gap: 8rem;
    flex: 0 0 auto;
    align-items: center;
    position: relative;
}

body.page-news-index .news-year-filter-icon {
    position: relative;
    width: 18rem;
    height: 17rem;
    flex-shrink: 0;
}

body.page-news-index .news-year-filter-icon-cal {
    position: absolute;
    width: 95.17%;
    height: 93.53%;
    top: 6.47%;
    left: 4.83%;
}

body.page-news-index .news-year-filter-icon-dots {
    position: absolute;
    width: 78.08%;
    height: 62.59%;
    top: 37.41%;
    left: 21.92%;
}

body.page-news-index .news-year-filter-heading {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--color-neutral-01);
    font-size: 14rem;
    letter-spacing: 0;
    line-height: 21rem;
    white-space: nowrap;
}

body.page-news-index .news-year-filter-control {
    display: flex;
    width: 240rem;
    max-width: 100%;
    justify-content: center;
    gap: 10rem;
    padding: 10rem 16rem 10rem 20rem;
    background-color: #ffffff;
    border-radius: 6rem;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

body.page-news-index .news-year-filter-control:focus-within {
    outline: 2rem solid var(--color-key);
    outline-offset: 2rem;
}

body.page-news-index .news-year-filter-select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: -1px 0 0;
    /* 右パディングで chevron 分の余白を確保（chevron は絶対配置の装飾） */
    padding: 0 26rem 0 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14rem;
    letter-spacing: 0;
    line-height: 21rem;
    color: var(--color-neutral-01);
    background-color: transparent;
    border: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* select の内側に出るブラウザ既定フォーカス枠を抑止（外枠は control の :focus-within） */
body.page-news-index .news-year-filter-select:focus,
body.page-news-index .news-year-filter-select:focus-visible {
    outline: none;
}

body.page-news-index .news-year-filter-chevron {
    /* select 全幅の上に重ねる装飾。pointer-events:none で ▼ 部分のクリックも select に届く */
    position: absolute;
    top: 50%;
    right: 16rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

body.page-news-index .news-year-filter-chevron img {
    display: block;
    width: 12rem;
    height: auto;
}

@media (max-width: 1023.98px) {
    body.page-news-index .news-year-filter-bar {
        justify-content: stretch;
    }

    body.page-news-index .news-year-filter-row {
        width: 100%;
        justify-content: space-between;
        gap: 12rem;
    }

    body.page-news-index .news-year-filter-control {
        flex: 1 1 240rem;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    body.page-news-index .news-year-filter-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    body.page-news-index .news-year-filter-control {
        width: auto;
        flex: 1 1 180rem;
    }
}

/* 検索結果：公開年バー直下 40px */
body.page-news-index .news-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 40rem;
    box-sizing: border-box;
}

body.page-news-index .news-list-item {
    display: flex;
    align-items: center;
    gap: 24rem;
    padding: 32rem 16rem;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-neutral-04);
    transition: background-color 0.15s ease;
}

/* Figma: 最後の項目下にも罫線を残す（QA No.40。SP は下部で 1px 復活済） */
body.page-news-index .news-list-item:last-of-type {
    border-bottom-width: 1px;
}

body.page-news-index .news-list-item:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

body.page-news-index .news-list-item:focus-visible {
    outline: 2rem solid var(--color-key);
    outline-offset: -2rem;
}

body.page-news-index .news-list-item-inner {
    display: flex;
    align-items: center;
    gap: 32rem;
    position: relative;
    flex: 1;
    min-width: 0;
}

body.page-news-index .news-list-item-thumb {
    flex-shrink: 0;
    width: 180rem;
    aspect-ratio: 4 / 3;
    border-radius: 24rem;
    overflow: hidden;
    background-color: #ffffff;
    position: relative;
    box-sizing: border-box;
}

/* 画像なし／読み込み失敗時に表示するロゴマーク（背面レイヤー）。
   サムネ枠は白地・枠線なし（Figma 準拠）。白地は基底 .news-list-item-thumb が担う。 */
body.page-news-index .news-list-item-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

body.page-news-index .news-list-item-thumb-logomark {
    display: block;
    width: 57%;
    height: auto;
}

body.page-news-index .news-list-item-thumb-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #ffffff;
}

/* 画像の読み込みに失敗したらロゴマークを見せる */
body.page-news-index .news-list-item-thumb--failed .news-list-item-thumb-img {
    display: none;
}

body.page-news-index .news-list-item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10rem;
    position: relative;
    flex: 1;
    min-width: 0;
}

body.page-news-index .news-list-item-meta {
    display: inline-flex;
    align-items: center;
    gap: 16rem;
    flex-wrap: wrap;
}

body.page-news-index .news-list-item-date {
    width: fit-content;
    margin-top: -1px;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--color-neutral-02);
    font-size: 14rem;
    letter-spacing: -0.14rem;
    line-height: 25.2rem;
    white-space: nowrap;
}

body.page-news-index .news-list-item-badge {
    display: inline-flex;
    height: 24rem;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 3rem 12rem;
    flex: 0 0 auto;
    border-radius: 12rem;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 12rem;
    letter-spacing: 0.48rem;
    line-height: 18rem;
    white-space: nowrap;
}

body.page-news-index .news-list-item-badge--oshirase {
    background-color: rgba(255, 145, 67, 1);
}

body.page-news-index .news-list-item-badge--product {
    background-color: #2474bc;
}

body.page-news-index .news-list-item-badge--works {
    background-color: var(--color-secondary);
}

body.page-news-index .news-list-item-badge--media {
    background-color: #9d75d5;
}

body.page-news-index .news-list-item-badge--press {
    background-color: var(--color-key);
}

body.page-news-index .news-list-item-badge--discontinued {
    background-color: var(--color-neutral-02);
}

body.page-news-index .news-list-item-badge--exhibition {
    background-color: #d57db2;
}

body.page-news-index .news-list-item-badge--release {
    background-color: rgba(255, 145, 67, 1);
}

body.page-news-index .news-list-item-badge--default {
    background-color: var(--color-key);
}

body.page-news-index .news-list-item-title {
    margin: 0;
    align-self: stretch;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--color-neutral-01);
    font-size: 18rem;
    letter-spacing: 0.72rem;
    line-height: 32.4rem;
}

body.page-news-index .news-list-item-arrow {
    flex-shrink: 0;
    width: 14rem;
    height: 14rem;
}

body.page-news-index .news-list-empty {
    margin: 0;
    padding: 40rem 16rem;
    text-align: center;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-size: 16rem;
    color: var(--color-neutral-02);
}

@media (max-width: 1023.98px) {
    body.page-news-index .news-list-item {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 24rem 12rem;
    }

    body.page-news-index .news-list-item-inner {
        /* 矢印分(gap 24rem + arrow 14rem)を rem で確保。px固定だと流体ズームで
           広幅時に gap が膨らみ確保幅を超え、矢印が左下へ折り返す */
        flex: 1 1 calc(100% - 38rem);
        min-width: 0;
        gap: 20rem;
    }

    body.page-news-index .news-list-item-thumb {
        width: 140rem;
    }

    body.page-news-index .news-list-item-arrow {
        /* No.7: 601〜1023px で item が align-items:flex-start のため矢印が上寄せに
           なっていた。矢印だけ縦中央へ(Figma 5058:338207)。thumb/body は上辺揃えのまま。 */
        align-self: center;
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    body.page-news-index .news-list {
        margin-top: 8rem;
    }

    body.page-news-index .news-list-item {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8rem;
        padding: 16rem 8rem 16rem 0;
    }

    body.page-news-index .news-list-item-inner {
        flex: 1;
        min-width: 0;
        flex-direction: row;
        /* Figma 3650:164717: items-start（thumb と body は上辺揃え） */
        align-items: flex-start;
        gap: 16rem;
    }

    body.page-news-index .news-list-item-thumb {
        width: 100rem;
        aspect-ratio: 4 / 3;
        border-radius: 16rem;
    }

    body.page-news-index .news-list-item-body {
        /* Figma 3650:164721: 縦flex gap 10px */
        gap: 10rem;
    }

    /* Figma: 最後の項目下にも罫線（SPで復活） */
    body.page-news-index .news-list-item:last-of-type {
        border-bottom-width: 1px;
    }

    /* Figma: パンくず → カテゴリタブ 32px / カテゴリタブ → 公開年バー 32px */
    body.page-news-index .news-category,
    body.page-news-index .news-year-filter {
        margin-top: 32rem;
    }

    body.page-news-index .news-list-item-meta {
        gap: 8rem;
    }

    body.page-news-index .news-list-item-badge {
        height: 22rem;
        padding: 2rem 12rem;
        font-size: 11rem;
        line-height: 1.5;
        letter-spacing: 0.44rem;
    }

    body.page-news-index .news-list-item-badge--oshirase {
        font-size: 10rem;
        letter-spacing: 0.4rem;
    }

    body.page-news-index .news-list-item-date {
        font-size: 14rem;
        line-height: 1.8;
        letter-spacing: -0.14rem;
    }

    body.page-news-index .news-list-item-title {
        font-size: 16rem;
        line-height: 1.8;
        letter-spacing: 0.64rem;
    }

    body.page-news-index .news-list-item-arrow {
        margin-top: 0;
    }

    /* 公開年フィルタ：SP（Figma 390px 基準） */
    body.page-news-index .news-year-filter-bar {
        padding: 12rem 16rem;
        gap: 16rem;
    }

    body.page-news-index .news-year-filter-row {
        gap: 16rem;
        flex-wrap: nowrap;
    }

    body.page-news-index .news-year-filter-label {
        gap: 4rem;
        flex: 0 0 auto;
    }

    body.page-news-index .news-year-filter-control {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10rem 16rem 10rem 20rem;
    }
}

body.page-news-index .renewal-subpage-body .container.news-index {
    padding-left: 70rem;
    padding-right: 70rem;
    box-sizing: border-box;
}

/* ----- ニュース詳細 ----- */
/* 本文コンテナはヒーロー／パンくずと同じ 70px ガター（Figma 1440 で内容幅 1300px）に揃える。
   共通 .container の max-width:1200px は見出しがパンくずより内側に寄ってしまうため news-show では解除。 */
body.page-news-show .renewal-subpage-body .container.news-show {
    max-width: none;
    padding-left: 70rem;
    padding-right: 70rem;
    box-sizing: border-box;
}

body.page-news-show .news-detail {
    display: flex;
    flex-direction: column;
    gap: 96rem;
    padding-bottom: 96rem;
    width: 100%;
    box-sizing: border-box;
}

body.page-news-show .news-detail-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40rem;
    padding-top: 40rem;
    width: 100%;
    box-sizing: border-box;
}

body.page-news-show .news-detail-header {
    width: 100%;
    align-self: stretch;
}

body.page-news-show .news-detail-intro {
    display: flex;
    flex-direction: column;
    gap: 28rem;
    width: 100%;
}

body.page-news-show .news-detail-meta {
    display: flex;
    align-items: center;
    gap: 16rem;
    flex-wrap: wrap;
}

body.page-news-show .news-detail-date {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--color-neutral-02);
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 16rem;
    white-space: nowrap;
}

body.page-news-show .news-detail-badge {
    display: inline-flex;
    height: 24rem;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 3rem 12rem;
    border-radius: 12rem;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 12rem;
    letter-spacing: 0.48rem;
    line-height: 18rem;
    white-space: nowrap;
}

body.page-news-show .news-detail-badge--oshirase {
    background-color: rgba(255, 145, 67, 1);
}

body.page-news-show .news-detail-badge--product {
    background-color: #2473bb;
}

body.page-news-show .news-detail-badge--works {
    background-color: var(--color-secondary);
}

body.page-news-show .news-detail-badge--media {
    background-color: #9d74d5;
}

body.page-news-show .news-detail-badge--press {
    background-color: var(--color-key);
}

body.page-news-show .news-detail-badge--discontinued {
    background-color: var(--color-neutral-02);
}

body.page-news-show .news-detail-badge--exhibition {
    background-color: #d57db2;
}

body.page-news-show .news-detail-badge--release {
    background-color: rgba(255, 145, 67, 1);
}

body.page-news-show .news-detail-badge--default {
    background-color: var(--color-key);
}

body.page-news-show .news-detail-title-wrap {
    position: relative;
    padding: 4rem 0 4rem 28rem;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
}

body.page-news-show .news-detail-title-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5rem;
    background-color: var(--color-orange-01);
}

body.page-news-show .news-detail-title {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    color: var(--color-neutral-01);
    font-size: 34rem;
    letter-spacing: 1.36rem;
    line-height: 1.8;
    /* 旧データ由来の生タグ／英字の長い連続文字でも折り返してはみ出さない */
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.page-news-show .news-detail-line {
    height: 1px;
    width: 100%;
    background-color: rgba(217, 217, 217, 0.88);
}

body.page-news-show .news-detail-media {
    margin: 0;
    width: 100%;
    max-width: 1180rem;
    align-self: center;
    border-radius: 32rem;
    overflow: hidden;
    background-color: #ffffff;
    aspect-ratio: 16 / 9;
}

body.page-news-show .news-detail-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 本文は共通リッチ（.c-rich）に委譲。news-detail-main が 40rem gap を持つため
   c-rich 既定の上下 64rem パディングは打ち消す（制作事例・製品詳細と同じレンダラ）。 */
body.page-news-show .news-detail-main .c-rich {
    --c-rich-pad-y: 0;
}

body.page-news-show .news-detail-footer {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    gap: 32rem;
    box-sizing: border-box;
}

body.page-news-show .news-detail-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32rem;
    width: 100%;
}

body.page-news-show .news-detail-footer-inner--solo {
    gap: 0;
}

body.page-news-show .news-detail-footer-rule {
    height: 1px;
    width: 100%;
    margin: 0;
    border: 0;
    background-color: rgba(217, 217, 217, 0.88);
}

/* 「一覧へ戻る」ボタンは共通 c-button（secondary-back）に委譲。中央寄せのラッパーのみ保持 */
body.page-news-show .news-detail-back-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media (max-width: 1023.98px) {
    /* Figma 3650-163009（005_2_ニュースリリース詳細 SP）準拠 */
    body.page-news-show .news-detail {
        gap: 48rem;
        padding-bottom: 48rem;
    }

    body.page-news-show .news-detail-main {
        gap: 32rem;
        padding-top: 32rem;
    }

    body.page-news-show .news-detail-intro {
        gap: 14rem;
    }

    body.page-news-show .news-detail-meta {
        gap: 12rem;
    }

    body.page-news-show .news-detail-badge {
        height: 22rem;
        padding: 2rem 12rem;
        font-size: 10rem;
        letter-spacing: 0.4rem;
        line-height: 1.5;
    }

    body.page-news-show .news-detail-title-wrap {
        padding-left: 16rem;
    }

    body.page-news-show .news-detail-title {
        font-size: 24rem;
        letter-spacing: 0.96rem;
        line-height: 1.8;
    }

    body.page-news-show .news-detail-footer {
        gap: 24rem;
    }

    body.page-news-show .news-detail-footer-inner {
        gap: 24rem;
    }

    /* 戻るボタンは共通 c-button（secondary-back）に委譲。SP は min-width:0 のため Figma SP の 299px 幅を踏襲 */
    body.page-news-show .news-detail-back-wrap .c-button {
        width: 299rem;
    }
}

/* ----- 本文エリア ----- */
.renewal-subpage-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.renewal-subpage-body .container {
    max-width: 1200rem;
    margin-left: auto;
    margin-right: auto;
}

/* 製品カテゴリ各ページ SP: Figma 3298:58455 はページ幅 390 に対し左右 16px ガター（contents 内 frame x=16, w=358）。
   グローバル .container の SP padding 0 20rem では 1rem×8 過剰インセットになるため、16rem へ縮める。
   ※ oem だけでなく parts / experience-gift / jewelry も同一レイアウトのため揃える
     （従来この3ページは container 20rem のまま各セクションに +16rem していて二重ガター=36rem になり、
      検索パネルが狭く「製品を探す/リセット」ボタンが圧縮されていた）。 */
@media (max-width: 1023.98px) {
    body.page-products-oem .renewal-subpage-body > .container,
    body.page-products-parts .renewal-subpage-body > .container,
    body.page-products-experience-gift .renewal-subpage-body > .container,
    body.page-products-jewelry .renewal-subpage-body > .container {
        padding-left: 16rem;
        padding-right: 16rem;
    }
}

/*
 * パンくずをヒーロー帯内へ移したため、ヒーローと本文先頭セクション見出しの
 * 間に 40px の余白を確保する（製品ページ）。
 */
body.page-products-oem .renewal-subpage-body,
body.page-products-parts .renewal-subpage-body,
body.page-products-experience-gift .renewal-subpage-body,
body.page-products-jewelry .renewal-subpage-body,
body.page-products-index .renewal-subpage-body,
body.page-products-show .renewal-subpage-body {
    margin-top: 40rem;
}

/* 一覧：旧 .page-title はヒーローに移したため非表示にしない（削除済み） */

/* ----- SP：固定ヘッダー分の余白（KV なし下層） ----- */
@media (max-width: 1023.98px) {
    .renewal-subpage-hero {
        padding: 32rem 20rem 0;
    }

    .SP.renewal-subpage-sp > .renewal-subpage-hero {
        /* 固定ヘッダー（72px）分を空け、Figma h1 の px-24 に合わせる */
        padding: calc(env(safe-area-inset-top, 0px) + 88rem) 24rem 0;
    }

    /* Figma 3298:58455（OEM SP）: header(72) ⇨ 50px ⇨ title。
       共通の 88rem では gap=16px しか取れず、Figma の 50px gap と差分が出るため
       page-products-oem 限定で padding-top を 122rem に上書きする。 */
    body.page-products-oem .SP.renewal-subpage-sp > .renewal-subpage-hero {
        padding-top: calc(env(safe-area-inset-top, 0px) + 122rem);
    }

    /* Figma h1 フレーム: タイトル直下 50px の余白（パンくず手前） */
    .SP.renewal-subpage-sp > .renewal-subpage-hero .renewal-subpage-hero__inner {
        margin-bottom: 50rem;
    }

    /* SP：ヒーロー背景はオレンジグラデーションをそのまま見せる
       （PC 向けの白オーバーレイと中央クロップを解除して header-bg.svg を流用） */
    .SP.renewal-subpage-sp > .renewal-subpage-hero .renewal-subpage-hero__bg::after {
        display: none;
    }

    /* SP：背景グラフィックは Figma header_bg（SP）専用 SVG を使用。
       Figma の構成（pattern SVG ＋ #fbf9f8 へフェードするグラデーション）に合わせ、
       ヒーロー全域を背景化しつつ下部はクリーム色へフェードしてパンくずの可読性を担保する */
    .SP.renewal-subpage-sp > .renewal-subpage-hero .renewal-subpage-hero__bg {
        inset: 0;
        background-color: #fbf9f8;
        background-image:
            linear-gradient(180deg, rgba(251, 249, 248, 0) 55%, rgba(251, 249, 248, 0.9) 85%, #fbf9f8 100%),
            url('/site-shell-sp/img/header-bg-sp.svg');
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, 100% 100%;
        background-position: top center, top center;
    }

    /* SP：営業用（関係者向け）製作事例ページは teal 系の背景に差し替え */
    body.page-sales-works .SP.renewal-subpage-sp > .renewal-subpage-hero .renewal-subpage-hero__bg {
        background-image:
            linear-gradient(180deg, rgba(251, 249, 248, 0) 55%, rgba(251, 249, 248, 0.9) 85%, #fbf9f8 100%),
            url('/site-shell-sp/img/header-bg-sales-sp.svg');
    }

    /* SP：ヒーロー本体の cream 背景はオーバーレイ側で受け持つので消す */
    .SP.renewal-subpage-sp > .renewal-subpage-hero {
        background-color: transparent;
    }

    /* SP：PC 用の header-bg.svg（img）は使わない */
    .SP.renewal-subpage-sp > .renewal-subpage-hero .renewal-subpage-hero__bg-image {
        display: none;
    }

    /* SP の h1 タイポグラフィ（ja 14px / en 38px）は c-page-title 側で処理 */

    .renewal-subpage-breadcrumb {
        padding: 12rem 20rem 20rem;
    }

    /* ヒーロー内パンくず：左右はヒーロー側の 20px を使う */
    .renewal-subpage-hero .renewal-subpage-breadcrumb {
        padding: 12rem 0 20rem;
    }

    /* 横スクロールは共通 c-breadcrumb（overflow-x:auto）が担う */

    /* SP フッター：固定キャンバス高さ起因の余白を除去 */
    .SP.renewal-subpage-sp .footer-SP {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .SP.renewal-subpage-sp .footer-SP .frame-72 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
    }

    .SP.renewal-subpage-sp .footer-SP .footer {
        padding: 40rem 16rem 40rem !important;
    }

    /* SP フッター：PICK UP / ONLINE STORE / CONTACT を下層でも表示（absolute を解除） */
    .SP.renewal-subpage-sp .footer-SP .frame-89 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 40rem 16rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24rem !important;
        background: #ffffff;
        border-radius: 32rem;
        box-sizing: border-box;
    }

    .SP.renewal-subpage-sp .footer-SP .pick-UP-SP,
    .SP.renewal-subpage-sp .footer-SP .view-11 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        max-width: 358rem;
    }

    .SP.renewal-subpage-sp .footer-SP .contect-SP {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 24rem 16rem 0 !important;
        box-sizing: border-box;
        display: flex !important;
        max-width: 358rem;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 32rem;
    }

    .SP.renewal-subpage-sp .footer-SP .contect-SP .contact {
        display: flex;
        width: 100%;
        height: 506rem;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
        padding: 48rem 24rem;
        border-radius: 32rem;
        box-sizing: border-box;
    }

}

/*
 * 製作事例：ヒーロー背景（header-bg.svg / header-bg-sales.svg）
 * - 背景表示ロジックは全対象ページで共通化する。
 */
@media (min-width: 1024px) {
    .renewal-subpage-hero {
        min-height: 390rem;
    }

    /* 製作事例：Figma 1870-42241 のサブヘッダー領域は header120 + tit270 + breadcrumb67 = 457。
       タイトル下端→パンくず上端の余白（Figma 80px）を確保するため works 限定で底上げ。 */
    body.page-works-index .renewal-subpage-hero,
    body.page-works-sales-index .renewal-subpage-hero,
    body.page-works-show .renewal-subpage-hero,
    body.page-works-sales-show .renewal-subpage-hero {
        min-height: 457rem;
    }
}

/* パンくずはヒーローと同じベース色で帯をつなげる */
body.page-works .renewal-subpage-breadcrumb,
body.page-news .renewal-subpage-breadcrumb,
body.page-products-oem .renewal-subpage-breadcrumb,
body.page-products-parts .renewal-subpage-breadcrumb,
body.page-products-experience-gift .renewal-subpage-breadcrumb,
body.page-products-jewelry .renewal-subpage-breadcrumb,
body.page-products-index .renewal-subpage-breadcrumb,
body.page-products-show .renewal-subpage-breadcrumb {
    background-color: #fff8ed;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.35) 38%, rgba(255, 248, 237, 0) 72%);
}

body.page-sales-works .renewal-subpage-breadcrumb {
    background-color: #fff8ed;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.35) 38%, rgba(255, 248, 237, 0) 72%);
}

/* ヒーロー内パンくずは背景画像の上に重なるので偽装背景は不要（上書きで解除） */
body .renewal-subpage-hero .renewal-subpage-breadcrumb {
    background: none;
}

/* 旧 PICK UP / CONTACT（.pick-UP-PC / .footer-PC .contect-PC）の中間幅(992〜1199.98px)対応は
   c-pickup / c-contact-cta に移行済みのため @media ブロックごと削除 */

/* 営業用ヒーロー（英字行の右に「関係者向け」） */
body.page-sales-works .renewal-subpage-hero__inner {
    width: 100%;
    max-width: 100%;
}

/* 「関係者向け」バッジ（旧 __title-row / __stakeholder）は c-page-title の
   __main / __badge へ移行済み（components/page-title.css）。 */

/* ----- 製作事例一覧本文（営業用 sales-index-inner と同じ .search-filter / .works-list → index.css） ----- */
.renewal-subpage-body .works-index {
    padding-top: 40rem;
    padding-bottom: 48rem;
}

/* PC: works 一覧本体は Figma 1300px 幅（70/70 ガター）に合わせる。
   共通 .container の max-width:1200rem だと 1440 viewport で 1160 しか取れず
   Figma 1870-42241 と差分が出るため、news-show と同様に解除する。
   製品一覧（products-index）も同じく Figma 3115-82849 が 1300px 幅 / 70 ガター。
   SP では 16rem ガター（下の @media を参照）。 */
@media (min-width: 1024px) {
    body.page-works-index .renewal-subpage-body > .container.works-index,
    body.page-works-sales-index .renewal-subpage-body > .container.works-index,
    body.page-products-index .renewal-subpage-body > .container.products-index,
    body.page-products-show .renewal-subpage-body > .container {
        max-width: none;
        padding-left: 70rem;
        padding-right: 70rem;
        box-sizing: border-box;
    }
}

@media (max-width: 1023.98px) {
    .page-works-index .renewal-subpage-body .container.works-index,
    .page-works-sales-index .renewal-subpage-body .container.works-index,
    .page-products-index .renewal-subpage-body .container.products-index {
        padding-left: 16rem;
        padding-right: 16rem;
        box-sizing: border-box;
    }
    /* products-show は SP では既定 .container (padding: 0 20rem) のまま使う。
       show.css 1606 の `.product-detail__info { width: calc(100% + 20px) }` が
       右 padding を相殺して端まで伸ばす設計のため、16rem に縮めると 4px overflow する。*/
}

/* ----- 製作事例一覧：絞り込み（一般・営業用共通） ----- */
.renewal-subpage-body .works-search {
    width: 100%;
    margin-bottom: 0;
}

.renewal-subpage-body .works-search__form {
    margin: 0;
}

.renewal-subpage-body .works-search__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32rem;
    width: 100%;
    box-sizing: border-box;
    padding: 48rem 60rem;
    background-color: var(--color-bg-02);
    border-radius: 24rem;
    border: 4rem solid #ffffff;
}

.renewal-subpage-body .works-search__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
    width: 100%;
    text-align: left;
}

/* タイトル＋リード文を横並び（左寄せ）にし、下にキーカラー＋グレーの罫線を敷く（Figma h3 検索・フォーム用） */
.renewal-subpage-body .works-search__intro-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8rem 56rem;
    width: 100%;
}

.renewal-subpage-body .works-search__title-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
    padding: 0;
    flex: 0 0 auto;
}

.renewal-subpage-body .works-search__title {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24rem;
    letter-spacing: 0.96rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
    white-space: nowrap;
}

.renewal-subpage-body .works-search__lead {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 1.8;
    color: var(--color-neutral-01);
    text-align: left;
}

.renewal-subpage-body .works-search__intro-rule {
    display: flex;
    width: 100%;
    align-items: flex-end;
}

.renewal-subpage-body .works-search__intro-rule-key {
    flex-shrink: 0;
    width: 100rem;
    height: 2rem;
    background-color: var(--color-key);
}

.renewal-subpage-body .works-search__intro-rule-base {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background-color: rgba(217, 217, 217, 0.88);
}

.renewal-subpage-body .works-search__blocks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24rem;
    width: 100%;
}

.renewal-subpage-body .works-search__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24rem 40rem;
    width: 100%;
}

.renewal-subpage-body .works-search__row-head {
    display: flex;
    width: 110rem;
    flex-shrink: 0;
    align-items: center;
    gap: 8rem;
}

.renewal-subpage-body .works-search__dot {
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    background: linear-gradient(90deg, rgb(255, 145, 67) 0%, rgb(255, 98, 67) 100%);
}

.renewal-subpage-body .works-search__row-title {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
}

.renewal-subpage-body .works-search__chips {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.renewal-subpage-body .works-search__chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10rem;
    width: 100%;
}

.renewal-subpage-body .works-search__more-btn {
    display: none;
}

.renewal-subpage-body .works-search__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8rem;
    margin: 0;
    padding: 10rem 14rem 10rem 12rem;
    position: relative;
    max-width: 100%;
    cursor: pointer;
    background-color: #ffffff;
    border-radius: 20rem;
    border: none;
    box-sizing: border-box;
    transition: box-shadow 0.12s ease;
}

.renewal-subpage-body .works-search__chip:focus-within {
    outline: 2rem solid var(--color-key);
    outline-offset: 2rem;
}

.renewal-subpage-body .works-search__chip:has(input:checked) {
    box-shadow: inset 0 0 0 2rem var(--color-key);
}

.renewal-subpage-body .works-search__chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.renewal-subpage-body .works-search__chip-icon {
    flex-shrink: 0;
    width: 16rem;
    height: 16rem;
    border-radius: 2rem;
    background-color: var(--color-bg-02);
    position: relative;
}

.renewal-subpage-body .works-search__chip:has(input:checked) .works-search__chip-icon {
    background-color: rgba(255, 98, 67, 0.15);
    box-shadow: inset 0 0 0 1px var(--color-key);
}

.renewal-subpage-body .works-search__chip:has(input:checked) .works-search__chip-icon::after {
    content: "";
    position: absolute;
    top: 3rem;
    left: 3rem;
    width: 10rem;
    height: 10rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' stroke='%23ff6243' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.renewal-subpage-body .works-search__chip-label {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14rem;
    letter-spacing: 0.56rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.renewal-subpage-body .works-search__rule {
    width: 100%;
    height: 1px;
    background-color: var(--color-neutral-04);
}

.renewal-subpage-body .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.renewal-subpage-body .works-search__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 24rem;
}

/* 検索フォームの submit/reset は共通 c-button（search / secondary-close）へ委譲済み。
   旧 works-search__btn/--reset/--submit/__btn-text/__btn-icon は撤去（__actions ラッパーは保持）。 */

@media (min-width: 1024px) {
    .renewal-subpage-body .works-search__chip-group.is-collapsed .works-search__chip {
        display: inline-flex !important;
    }

    .renewal-subpage-body .works-search__more-btn {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    .renewal-subpage-body .works-search__panel {
        align-items: stretch;
        gap: 16rem;
        padding: 24rem 20rem;
    }

    .renewal-subpage-body .works-search__intro {
        gap: 12rem;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* SP ではタイトル（中央）→ 直下に中央オレンジバー → リード文（左寄せ）を縦積みにし、見出しブロック下端はグレー1本線のみ（Figma SP h3 検索・フォーム用） */
    .renewal-subpage-body .works-search__intro-row {
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .renewal-subpage-body .works-search__title-wrap {
        align-items: center;
    }

    /* タイトル直下の中央オレンジバー（幅100px・高さ2px） */
    .renewal-subpage-body .works-search__title-wrap::after {
        content: "";
        width: 100rem;
        height: 2rem;
        background-color: var(--color-key);
    }

    .renewal-subpage-body .works-search__title {
        font-size: 20rem;
        letter-spacing: 0.8rem;
        line-height: 1.8;
        text-align: center;
        white-space: normal;
    }

    /* SP の下端罫線はグレー1本のみ（オレンジ部分は非表示） */
    .renewal-subpage-body .works-search__intro-rule-key {
        display: none;
    }

    .renewal-subpage-body .works-search__lead {
        margin: 0;
        flex: 0 0 auto;
        width: 100%;
        font-size: 14rem;
        letter-spacing: 0.56rem;
    }

    .renewal-subpage-body .works-search__blocks {
        gap: 0;
    }

    .renewal-subpage-body .works-search__rule {
        display: none;
    }

    .renewal-subpage-body .works-search__row {
        flex-direction: column;
        align-items: stretch;
        gap: 14rem;
        padding: 16rem 0;
        border-bottom: 1px solid rgba(217, 217, 217, 0.88);
    }

    .renewal-subpage-body .works-search__blocks > .works-search__row:last-child {
        border-bottom: none;
    }

    .renewal-subpage-body .works-search__row-head {
        width: 100%;
    }

    .renewal-subpage-body .works-search__row-title {
        font-size: 16rem;
    }

    .renewal-subpage-body .works-search__chip-group {
        gap: 10rem;
    }

    .renewal-subpage-body .works-search__chip {
        padding: 10rem 14rem 10rem 12rem;
        border: none;
        font-size: 12rem;
    }

    .renewal-subpage-body .works-search__chip-label {
        font-size: 12rem;
        letter-spacing: 0.48rem;
        line-height: 18rem;
    }

    .renewal-subpage-body .works-search__chip:has(input:checked) {
        background-color: var(--color-bg-03);
        border: 2rem solid #ffffff;
        box-shadow: none;
    }

    .renewal-subpage-body .works-search__chip:has(input:checked) .works-search__chip-icon {
        background-color: #ffffff;
        box-shadow: none;
    }

    .renewal-subpage-body .works-search__chip:has(input:checked) .works-search__chip-icon::after {
        content: "";
        position: absolute;
        top: 3rem;
        left: 3rem;
        width: 10rem;
        height: 10rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' stroke='%23ff6243' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .renewal-subpage-body .works-search__chip-group.is-collapsed .works-search__chip:nth-child(n + 7) {
        display: none;
    }

    .renewal-subpage-body .works-search__more-btn {
        display: inline-flex;
        height: 38rem;
        align-items: center;
        justify-content: center;
        gap: 8rem;
        padding: 0 16rem 0 24rem;
        background-color: #ffffff;
        border-radius: 19rem;
        border: 1px solid var(--color-light-orange-01, #ffd5b2);
        font-family: "Noto Sans JP", Helvetica, sans-serif;
        font-size: 12rem;
        font-weight: 700;
        letter-spacing: 0.6rem;
        color: var(--color-neutral-01);
        cursor: pointer;
        flex-shrink: 0;
        transition: opacity 0.2s;
    }

    .renewal-subpage-body .works-search__more-btn:hover {
        opacity: 0.75;
    }

    .renewal-subpage-body .works-search__more-icon {
        width: 18rem;
        height: 18rem;
    }

    .renewal-subpage-body .works-search__actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: none;
        gap: 16rem;
        padding-top: 0;
    }

    /* works-search__btn*（SP）は c-button（search / secondary-close）へ委譲済みのため撤去 */
}

/* ----- 製作事例詳細ヒーロー（左テキスト + 右画像） -----
   Figma 4338:424019: 本文の有効幅 1300（70/70ガター）。共通 .container の
   max-width:1200rem だと 1440 viewport で 1060 しか取れず Figma と差分(190 vs 70)が出るので
   news-show と同様に解除する。 */
body.page-works-show .renewal-subpage-body > .container,
body.page-works-sales-show .renewal-subpage-body > .container {
    max-width: none;
    padding-left: 70rem;
    padding-right: 70rem;
    box-sizing: border-box;
}

.renewal-subpage-body .work-show-hero {
    width: 100%;
    padding: 40rem 0 40rem;
    box-sizing: border-box;
}

.renewal-subpage-body .work-show-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48rem;
    width: 100%;
}

.renewal-subpage-body .work-show-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40rem;
    flex: 1 1 280rem;
    min-width: 0;
    max-width: 100%;
    padding: 40rem 0 32rem;
    box-sizing: border-box;
}

.renewal-subpage-body .work-show-hero--no-image .work-show-hero__text {
    flex: 1 1 100%;
}

.renewal-subpage-body .work-show-hero__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 8rem;
    width: 100%;
}

.renewal-subpage-body .work-show-hero__date {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 14rem;
    letter-spacing: 0.56rem;
    line-height: 1.6;
    color: var(--color-neutral-02);
}

.renewal-subpage-body .work-show-hero__title {
    margin: 0;
    align-self: stretch;
    max-width: 100%;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 34rem;
    letter-spacing: 1.36rem;
    line-height: 1.8;
    color: var(--color-key);
    word-break: break-word;
}

.renewal-subpage-body .work-show-hero__subtitle {
    margin: 4rem 0 0;
    max-width: 100%;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 1.65;
    color: var(--color-neutral-01);
}

.renewal-subpage-body .work-show-hero__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.renewal-subpage-body .work-show-hero__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24rem;
    margin: 0;
    padding: 3rem 12rem;
    box-sizing: border-box;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 12rem;
    letter-spacing: 0.48rem;
    line-height: 18rem;
    color: var(--color-neutral-02);
    background-color: #ffffff;
    border: 1px solid var(--color-neutral-04);
    border-radius: 12rem;
    white-space: normal;
    word-break: break-word;
}

/* インタビューあり: セカンダリ塗り（c-card__tag--interview と統一） */
.renewal-subpage-body .work-show-hero__tag--interview {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* メインコメント1 */
.renewal-subpage-body .work-show-hero__lead {
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 28.8rem;
    color: var(--color-neutral-01);
}

/* リッチHTML（テーブル/横罫線等）入力時は共通 .c-rich で描画。
   ヒーローのリード欄では上下パディングを打ち消す（main_comment2 と同様）。 */
.renewal-subpage-body .work-show-hero__lead .c-rich {
    --c-rich-pad-y: 0rem;
}

.renewal-subpage-body .work-show-hero__media {
    flex: 0 1 640rem;
    width: 100%;
    max-width: 640rem;
    margin: 0;
    padding: 0;
}

.renewal-subpage-body .work-show-hero__media-inner {
    width: 100%;
    aspect-ratio: 640 / 585;
    max-height: 70vh;
    background-color: #ffffff;
    border-radius: 8rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.renewal-subpage-body .work-show-hero__img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

@media (min-width: 1024px) {
    .renewal-subpage-body .work-show-hero__inner {
        flex-wrap: nowrap;
    }

    /* テキスト列は残り幅いっぱいに伸ばす。以前は max-width を固定 px(680px) で抑え、
       かつ画像に margin-left:auto を付けていたため、流体rem でスケールする画像との間に
       画面が広がるほど大きな空きができていた（No.32: 見出しと画像が離れる）。
       max-width を rem 化し margin:auto を外して、テキストと画像を gap だけ離して隣接させる。 */
    .renewal-subpage-body .work-show-hero__text {
        flex: 1 1 0;
        max-width: 680rem;
    }
}

@media (max-width: 1023.98px) {
    /* 製作事例詳細ヒーロー SP */
    .renewal-subpage-body .work-show-hero {
        padding: 16rem 0 20rem;
    }

    .renewal-subpage-body .work-show-hero__inner {
        flex-direction: column;
        gap: 16rem;
    }

    /* SPでは メインコメント(__lead)を画像の下に表示するため、
       __text を display: contents にして __head と __lead を __inner 直下に並べる */
    .renewal-subpage-body .work-show-hero__text {
        display: contents;
    }

    .renewal-subpage-body .work-show-hero__head {
        order: 1;
        gap: 8rem;
    }

    .renewal-subpage-body .work-show-hero__date {
        line-height: 22.4rem;
    }

    .renewal-subpage-body .work-show-hero__title {
        font-size: 24rem;
        letter-spacing: 0.96rem;
        line-height: 43.2rem;
        color: var(--color-neutral-01);
    }

    .renewal-subpage-body .work-show-hero__subtitle {
        margin-top: 0;
        font-size: 15rem;
        letter-spacing: 0.6rem;
        line-height: 1.55;
    }

    .renewal-subpage-body .work-show-hero__tags {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8rem;
        width: 100%;
    }

    .renewal-subpage-body .work-show-hero__tag {
        min-height: 22rem;
        padding: 3rem 12rem;
        font-size: 11rem;
        letter-spacing: 0.44rem;
        line-height: 16.5rem;
    }

    .renewal-subpage-body .work-show-hero__media {
        order: 2;
        flex: 1 1 auto;
        max-width: 100%;
        align-self: stretch;
    }

    .renewal-subpage-body .work-show-hero__lead {
        order: 3;
        padding: 0 8rem;
    }

    /* ヒーロー直下の写真 SP（白枠・角丸32px・1:1・cover） */
    .renewal-subpage-body .work-show-hero__media-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rem;
        width: 100%;
        aspect-ratio: 1;
        max-height: none;
        background-color: #ffffff;
        border-radius: 32rem;
        overflow: hidden;
    }

    .renewal-subpage-body .work-show-hero__img {
        width: min(320px, 100%);
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center;
    }
}

/* ----- 製作事例詳細：事例情報 ----- */
.renewal-subpage-body .work-show-info {
    width: 100%;
    margin: 0;
    padding: 96rem 0;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 32rem;
}

.renewal-subpage-body .work-show-info__panel {
    width: 100%;
    padding: 0 60rem;
    box-sizing: border-box;
    border-radius: 50rem;
}

.renewal-subpage-body .work-show-info__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.renewal-subpage-body .work-show-info__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12rem 16rem;
    width: 100%;
    padding: 12rem 16rem;
    box-sizing: border-box;
}

.renewal-subpage-body .work-show-info__label {
    flex: 0 0 auto;
    width: 220rem;
    max-width: 100%;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 14rem;
    line-height: 2;
    letter-spacing: 0;
    color: var(--color-neutral-02);
}

.renewal-subpage-body .work-show-info__value {
    flex: 1 1 0;
    min-width: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16rem;
    line-height: 2;
    letter-spacing: 0;
    color: var(--color-neutral-01);
}

.renewal-subpage-body .work-show-info__text {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
}

.renewal-subpage-body .work-show-info__text--muted {
    color: var(--color-neutral-03, #cacaca);
}

@media (min-width: 1023.98px) {
    .renewal-subpage-body .work-show-info__text--accent {
        color: var(--color-key);
    }
}

.renewal-subpage-body .work-show-info__linkline {
    display: inline-flex;
    align-items: center;
    gap: 8rem;
    max-width: 100%;
}

/* リンクテキストは共通 c-link（c-link--external）へ移行（components/link.css）。
   旧 __link-wrap / __link / __link:hover は撤去。__linkline / __blank-icon は
   「クライアント名（URL無）＋アイコン」テキスト分岐で引き続き使用するため残置。 */

.renewal-subpage-body .work-show-info__blank-icon {
    flex-shrink: 0;
    display: block;
}

.renewal-subpage-body .work-show-info__multiline {
    white-space: pre-line;
    word-break: break-word;
}

.renewal-subpage-body .work-show-info__rule {
    width: 100%;
    height: 1px;
    background-color: var(--color-neutral-04);
}

@media (max-width: 1023.98px) {
    /* 事例情報テーブル SP（縦並び・行下線）
       Figma 3779:181614: 情報パネルは 390px フル幅（Contents 358 を -16px ずつ
       はみ出す）+ 内側 32rem。app.css の `.container` 左右 20rem を相殺する負マージンで
       ビューポート端まで広げる。 */
    .renewal-subpage-body .work-show-info {
        margin-left: -16rem;
        margin-right: -16rem;
        padding: 48rem 32rem;
        border-radius: 32rem;
    }

    .renewal-subpage-body .work-show-info__panel {
        padding: 0;
        border-radius: 0;
    }

    .renewal-subpage-body .work-show-info__rule {
        display: none;
    }

    .renewal-subpage-body .work-show-info__row {
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: 0;
        width: 100%;
        padding: 12rem 8rem;
        border-bottom: 1px solid var(--color-neutral-04);
    }

    .renewal-subpage-body .work-show-info__row:last-of-type {
        border-bottom: none;
    }

    .renewal-subpage-body .work-show-info__label {
        width: 140rem;
        max-width: 100%;
        font-weight: 400;
        font-size: 14rem;
        line-height: 28rem;
        letter-spacing: 0;
    }

    .renewal-subpage-body .work-show-info__value {
        width: 100%;
        line-height: 32rem;
        letter-spacing: 0;
    }

    .renewal-subpage-body .work-show-info__multiline {
        line-height: 32rem;
        letter-spacing: 0;
    }
}

/* ----- メインコメント2（共通リッチ：制作事例・製品詳細）（PC / SP） -----
 * リッチHTML（見出し/本文/画像/横並びテーブル）の共通レンダラ。
 * 制作事例 work-show-rich・製品詳細 main_comment2 の両方が .c-rich として使用する。
 * 上下余白は --c-rich-pad-y で消費側が調整可能（既定 64rem）。 */
.renewal-subpage-body .c-rich {
    width: 100%;
    padding: var(--c-rich-pad-y, 64rem) 0;
    box-sizing: border-box;
}

.renewal-subpage-body .c-rich__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40rem;
    width: 100%;
    max-width: 1300rem;
    margin: 0 auto;
}

/* 見出しは共有パーツ c-section-heading（Figma 5494:295875 / accent・accent-sm）の
   見た目に一致させる。Quill は素の <h2>/<h3>/<h4> を出力し、共有パーツのように
   罫線用の子要素を持てないため、罫線を ::after で再現する。サイズ・色・字間は
   c-heading と同じトークンを参照し、共有CSSと値を共有する。
     h2 → accent    : c-heading h3 相当（28rem）＋アクセント罫線
     h3/h4 → accent-sm: c-heading h4 相当（24rem）＋アクセント罫線 */
.renewal-subpage-body .c-rich h2,
.renewal-subpage-body .c-rich h3,
.renewal-subpage-body .c-rich h4 {
    margin: 0;
    padding: 0;
    font-family: var(--font-jp);
    font-weight: var(--fw-bold);
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--lh-h3-pc);
    color: var(--color-text-default);
}

.renewal-subpage-body .c-rich h2 {
    font-size: var(--fs-h3-pc); /* accent = 28rem */
}

.renewal-subpage-body .c-rich h3,
.renewal-subpage-body .c-rich h4 {
    font-size: var(--fs-h4-pc); /* accent-sm = 24rem */
}

/* 共有 accent / accent-sm の罫線（橙100rem×2rem ＋ 残り全幅グレー1px線）を再現。
   橙ブロックを上に重ねるため background の先頭に置く。 */
.renewal-subpage-body .c-rich h2::after,
.renewal-subpage-body .c-rich h3::after,
.renewal-subpage-body .c-rich h4::after {
    content: "";
    display: block;
    height: 2rem;
    margin-top: 16rem;
    background:
        linear-gradient(var(--color-key), var(--color-key)) left bottom / 100rem 2rem no-repeat,
        linear-gradient(var(--color-neutral-04), var(--color-neutral-04)) left bottom / 100% 1px no-repeat;
}

.renewal-subpage-body .c-rich p {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 1.8;
    color: var(--color-neutral-01);
}

.renewal-subpage-body .c-rich p + p {
    margin-top: 0.75em;
}

.renewal-subpage-body .c-rich a {
    color: var(--color-key);
    text-decoration: underline;
    text-underline-offset: 2rem;
}

.renewal-subpage-body .c-rich a:hover {
    opacity: 0.88;
}

.renewal-subpage-body .c-rich img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.renewal-subpage-body .c-rich p > img:only-child {
    display: block;
    max-width: min(554px, 100%);
    margin: 0 auto;
    padding: 32rem;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 32rem;
}

.renewal-subpage-body .c-rich figure {
    margin: 0;
    text-align: center;
}

.renewal-subpage-body .c-rich figure img {
    border-radius: 32rem;
}

.renewal-subpage-body .c-rich figcaption {
    margin-top: 12rem;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-size: 14rem;
    line-height: 1.6;
    color: var(--color-neutral-02);
}

.renewal-subpage-body .c-rich ul,
.renewal-subpage-body .c-rich ol {
    margin: 0;
    padding-left: 1.5em;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-size: 16rem;
    line-height: 1.8;
    color: var(--color-neutral-01);
}

.renewal-subpage-body .c-rich li + li {
    margin-top: 0.35em;
}

.renewal-subpage-body .c-rich blockquote {
    margin: 0;
    padding: 24rem 32rem;
    border-left: 4rem solid var(--color-key);
    background-color: var(--color-bg-02, #f5f2f0);
    border-radius: 0 16rem 16rem 0;
    font-size: 16rem;
    line-height: 1.75;
}

/* リッチテキストの引用はキーカラーの独自デザイン。base.css の引用符は出さない */
.renewal-subpage-body .c-rich blockquote::before {
    content: none;
}

/* ===== メインコメント2 横並びレイアウト（テーブル） =====
 * 管理画面の Quill（quill-table-up）が出力する <table> を、罫線なしの
 * 段組みレイアウトとして描画する。Figma「こだわりのポイント」の
 * 画像2枚横並び／画像＋本文（レイアウトB・C）に使用。
 * quill-table-up.css はフロントで読み込まないため、見た目はここで全制御する。 */
/* quill-table-up は既定で各列 colDefaultWidth=100px の固定幅インライン style を
 * 吐くため、放置すると 2 列=200px に潰れる。フロントでは幅指定を打ち消して全幅化し、
 * table-layout:fixed で余白を各列へ均等配分する（＝等幅の横並び）。 */
.renewal-subpage-body .c-rich .ql-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
}

.renewal-subpage-body .c-rich table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
}

/* col の固定幅（100px 等）を無効化して列を均等配分 */
.renewal-subpage-body .c-rich col {
    width: auto !important;
}

.renewal-subpage-body .c-rich td,
.renewal-subpage-body .c-rich th {
    padding: 0 20rem;
    border: none;
    vertical-align: top;
    background: none;
}

.renewal-subpage-body .c-rich td:first-child,
.renewal-subpage-body .c-rich th:first-child {
    padding-left: 0;
}

.renewal-subpage-body .c-rich td:last-child,
.renewal-subpage-body .c-rich th:last-child {
    padding-right: 0;
}

.renewal-subpage-body .c-rich .ql-table-cell-inner {
    margin: 0;
    padding: 0;
    width: auto !important;
    min-width: 0 !important;
}

/* セル内の画像（p>img:only-child の中央寄せ・白枠ルールを上書きして全幅に） */
.renewal-subpage-body .c-rich td p > img:only-child,
.renewal-subpage-body .c-rich td img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 32rem;
    vertical-align: bottom;
}

.renewal-subpage-body .c-rich td p {
    margin: 0;
}

.renewal-subpage-body .c-rich td p + p {
    margin-top: 0.75em;
}

/* ===== データテーブル（画像を含まない表）= Figma 共通テーブル c-table 準拠 =====
 * 横並びレイアウト（画像セル）以外の、テキストだけの表は罫線付きデータ表にする。
 * 見た目はスタイルガイドの c-table（Figma 5824:98053 / 5407:87977）に合わせる:
 *   全面グリッド罫線 rgba(217,217,217,.88) / セル余白 10px・16px / 14px / 行高1.75 / #333。
 * 画像を含む表（こだわりのポイントの横並び）は上の枠なしレイアウトのまま。 */
.renewal-subpage-body .c-rich table:not(:has(img)) {
    table-layout: auto;
}

.renewal-subpage-body .c-rich table:not(:has(img)) td,
.renewal-subpage-body .c-rich table:not(:has(img)) th {
    padding: 10rem 16rem;
    border: 1px solid color-mix(in srgb, var(--color-neutral-04) 88%, transparent);
    vertical-align: middle;
    font-size: 14rem;
    line-height: 1.75;
    color: var(--color-text-default, #333);
    background: none;
}

/* セル内が <p> で来た場合も c-table と同じ 14px / 行高1.75 に揃える */
.renewal-subpage-body .c-rich table:not(:has(img)) td p,
.renewal-subpage-body .c-rich table:not(:has(img)) th p {
    font-size: 14rem;
    line-height: 1.75;
}

/* 罫線付きなので端のセルも左右対称 padding に戻す（枠なしレイアウト用の 0 を打ち消す） */
.renewal-subpage-body .c-rich table:not(:has(img)) td:first-child,
.renewal-subpage-body .c-rich table:not(:has(img)) th:first-child {
    padding-left: 16rem;
}
.renewal-subpage-body .c-rich table:not(:has(img)) td:last-child,
.renewal-subpage-body .c-rich table:not(:has(img)) th:last-child {
    padding-right: 16rem;
}

/* 横罫線（Quill の hr blot / 旧サイトの <hr>）。
   スタイルガイドの区切り線 c-divider（Figma 5824:102308「43 区切り線(hr)」）と同一＝1px #D9D9D9。
   .c-rich__inner は flex 縦並び＋gap で要素間余白を持つため、hr 自身の margin は 0 にする
   （margin を付けると gap と二重になり、hr だけ余白が過大になる）。 */
.renewal-subpage-body .c-rich hr {
    border: none;
    border-top: 1px solid var(--color-border);
    height: 0;
    margin: 0;
}

/* ===== インタビュー 回答ボックス（薄青 #DCEDEF・角丸40px / Figma 5058:328917） =====
 * 管理画面の Quill カスタムブロック（div.wr-qa-answer）をそのまま描画する。
 * 話者名は本文側のインライン色（#00889A）で着色される。 */
.renewal-subpage-body .c-rich .wr-qa-answer {
    margin: 0;
    padding: 32rem 40rem;
    background-color: #dcedef;
    border-radius: 40rem 40rem 0 40rem;
    color: var(--color-neutral-01);
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18rem;
    line-height: 1.8;
    letter-spacing: 0.72rem;
    box-sizing: border-box;
}

/* ===== CTA（c-contact-cta）を本文中に置いたときの素タグ装飾の打ち消し =====
 * .c-rich の p / a 既定スタイルがコンポーネント側より詳細度が高く漏れ込むため、
 * CTA 内では必要な見た目を再指定して contact-cta.css に委ねる。 */
.renewal-subpage-body .c-rich .c-contact-cta p { margin: 0; }
.renewal-subpage-body .c-rich .c-contact-cta a { text-decoration: none; }
.renewal-subpage-body .c-rich .c-contact-cta__lead {
    color: var(--color-white);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-loose);
    letter-spacing: normal;
}
.renewal-subpage-body .c-rich .c-contact-cta__btn {
    color: var(--color-text-default);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

@media (max-width: 1023.98px) {
    /* メインコメント2 SP */
    .renewal-subpage-body .c-rich {
        padding: 32rem 0 40rem;
    }

    .renewal-subpage-body .c-rich__inner {
        gap: 32rem;
    }

    /* SP も共有 c-heading のサイズ（accent=h3-sp 22rem / accent-sm=h4-sp 20rem）。
       字間・行間は accent-sm 仕様に合わせ 1.5 固定（字間はトークン 0.04em のまま）。 */
    .renewal-subpage-body .c-rich h2 {
        font-size: var(--fs-h3-sp); /* 22rem */
        line-height: var(--lh-h3-sp);
    }

    .renewal-subpage-body .c-rich h3,
    .renewal-subpage-body .c-rich h4 {
        font-size: var(--fs-h4-sp); /* 20rem */
        line-height: 1.5;
    }

    .renewal-subpage-body .c-rich p {
        letter-spacing: 0.64rem;
        line-height: 28.8rem;
    }

    .renewal-subpage-body .c-rich p + p {
        margin-top: 1em;
    }

    .renewal-subpage-body .c-rich p > img:only-child {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 16rem;
        border-radius: 32rem;
    }

    .renewal-subpage-body .c-rich ul,
    .renewal-subpage-body .c-rich ol {
        line-height: 28.8rem;
        letter-spacing: 0.64rem;
    }

    .renewal-subpage-body .c-rich blockquote {
        padding: 20rem 24rem;
        font-size: 15rem;
        line-height: 28.8rem;
    }

    .renewal-subpage-body .c-rich figcaption {
        font-size: 13rem;
    }

    /* 横並びテーブル → 縦積み（カラム幅は colgroup を無効化して全幅化） */
    .renewal-subpage-body .c-rich .ql-table-wrapper,
    .renewal-subpage-body .c-rich table,
    .renewal-subpage-body .c-rich tbody,
    .renewal-subpage-body .c-rich tr,
    .renewal-subpage-body .c-rich td,
    .renewal-subpage-body .c-rich th {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .renewal-subpage-body .c-rich colgroup,
    .renewal-subpage-body .c-rich col {
        display: none;
    }

    .renewal-subpage-body .c-rich td,
    .renewal-subpage-body .c-rich th {
        padding: 0 !important;
    }

    .renewal-subpage-body .c-rich tr + tr,
    .renewal-subpage-body .c-rich td + td {
        margin-top: 24rem;
    }

    /* データテーブル（画像なし）は SP でも縦積みにせずグリッドを保つ。
       画面に収まらない場合は .ql-table-wrapper で横スクロール。 */
    .renewal-subpage-body .c-rich .ql-table-wrapper:not(:has(img)) {
        display: block;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .renewal-subpage-body .c-rich table:not(:has(img)) {
        display: table;
        width: 100% !important;
    }
    .renewal-subpage-body .c-rich table:not(:has(img)) tbody { display: table-row-group; }
    .renewal-subpage-body .c-rich table:not(:has(img)) tr     { display: table-row; }
    .renewal-subpage-body .c-rich table:not(:has(img)) td,
    .renewal-subpage-body .c-rich table:not(:has(img)) th {
        display: table-cell;
        width: auto !important;
        margin: 0 !important;
        padding: 8rem 12rem !important;
        font-size: 13rem;
    }

    /* インタビュー回答ボックス SP */
    .renewal-subpage-body .c-rich .wr-qa-answer {
        padding: 24rem;
        font-size: 16rem;
        border-radius: 24rem 24rem 0 24rem;
    }
}

/* ----- 使用している製品（PC: BiWSJ / SP: DYB2X） ----- */
.renewal-subpage-body .work-used-products {
    width: 100%;
    padding: 40rem 0;
    box-sizing: border-box;
}

.renewal-subpage-body .work-used-products__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40rem;
    width: 100%;
}

.renewal-subpage-body .work-used-products__intro {
    flex: 0 0 280rem;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40rem;
}

.renewal-subpage-body .work-used-products__heading-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
}

.renewal-subpage-body .work-used-products__title-wrap {
    padding: 0 0 16rem;
    width: 100%;
}

.renewal-subpage-body .work-used-products__title {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 28rem;
    letter-spacing: 1.12rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
}

.renewal-subpage-body .work-used-products__lines {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.renewal-subpage-body .work-used-products__line-accent {
    flex: 0 0 100rem;
    width: 100rem;
    height: 2rem;
    background-color: var(--color-key);
}

.renewal-subpage-body .work-used-products__line-rest {
    flex: 1;
    height: 1px;
    background-color: var(--color-neutral-04);
}

.renewal-subpage-body .work-used-products__lead {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 1.8;
    color: var(--color-neutral-01);
}

.renewal-subpage-body .work-used-products__stack {
    flex: 1 1 400rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32rem;
    padding: 16rem 20rem;
    box-sizing: border-box;
    background-color: var(--color-bg-01, #fbf9f8);
    border-radius: 40rem;
}

.renewal-subpage-body .work-used-products__card {
    display: flex;
    align-items: center;
    gap: 32rem;
    padding: 16rem 32rem 16rem 24rem;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 24rem;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
}

.renewal-subpage-body .work-used-products__card:hover {
    opacity: 0.92;
}

.renewal-subpage-body .work-used-products__card-inner {
    display: grid;
    grid-template-columns: 200rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 24rem;
    row-gap: 8rem;
    align-items: start;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.renewal-subpage-body .work-used-products__thumb-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200rem;
    height: 200rem;
    max-width: 40vw;
    max-height: 40vw;
    background-color: #ffffff;
    border-radius: 24rem;
    box-sizing: border-box;
}

.renewal-subpage-body .work-used-products__thumb {
    width: 180rem;
    height: 180rem;
    max-width: 90%;
    max-height: 90%;
    object-fit: cover;
    border-radius: 4rem;
    display: block;
}

.renewal-subpage-body .work-used-products__thumb-placeholder {
    font-size: 12rem;
    color: var(--color-neutral-02);
}

.renewal-subpage-body .work-used-products__text-block {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
    min-width: 0;
    padding: 0 8rem;
    box-sizing: border-box;
}

.renewal-subpage-body .work-used-products__tags {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8rem;
    min-width: 0;
    padding: 0 8rem;
    box-sizing: border-box;
}

.renewal-subpage-body .work-used-products__name {
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18rem;
    letter-spacing: 0.72rem;
    line-height: 1.45;
    color: var(--color-neutral-01);
    word-break: break-word;
}

.renewal-subpage-body .work-used-products__desc {
    margin: 0;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14rem;
    letter-spacing: 0.56rem;
    line-height: 1.5;
    color: var(--color-neutral-01);
    word-break: break-word;
}

.renewal-subpage-body .work-used-products__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24rem;
    padding: 3rem 12rem;
    box-sizing: border-box;
    font-family: "Noto Sans JP", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 12rem;
    letter-spacing: 0.48rem;
    line-height: 18rem;
    white-space: normal;
}

.renewal-subpage-body .work-used-products__tag--solid.work-used-products__tag--teal {
    color: #ffffff;
    background-color: var(--color-secondary);
    border-radius: 12rem;
}

.renewal-subpage-body .work-used-products__tag--solid.work-used-products__tag--blue {
    color: #ffffff;
    background-color: #649fd4;
    border-radius: 12rem;
}

.renewal-subpage-body .work-used-products__tag--outline {
    color: var(--color-neutral-02);
    background-color: #ffffff;
    border: 1px solid var(--color-neutral-04);
    border-radius: 12rem;
}

.renewal-subpage-body .work-used-products__arrow {
    flex-shrink: 0;
    display: block;
}

@media (max-width: 1023.98px) {
    .renewal-subpage-body .work-used-products__layout {
        flex-direction: column;
        gap: 32rem;
    }

    .renewal-subpage-body .work-used-products__intro {
        flex: none;
        width: 100%;
        gap: 32rem;
    }

    .renewal-subpage-body .work-used-products__title {
        font-size: 22rem;
        letter-spacing: 0.88rem;
        line-height: 33rem;
    }

    .renewal-subpage-body .work-used-products__lead {
        line-height: 28.8rem;
    }

    .renewal-subpage-body .work-used-products__stack {
        width: 100%;
        gap: 16rem;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    .renewal-subpage-body .work-used-products__card {
        position: relative; /* 矢印の絶対配置の基準 */
        gap: 16rem;
        padding: 16rem;
        flex-wrap: nowrap;
        align-items: center;
    }

    .renewal-subpage-body .work-used-products__card-inner {
        /* minmax(0,1fr): 1fr が min-content で縮みグリッドが画像幅に潰れる→タグ行が
           狭くなり2行化/溢れる問題を防ぐ（タグを1行に: Figma 5083:315993）。 */
        grid-template-columns: 120rem minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12rem;
        row-gap: 8rem;
        width: 100%;
        min-width: 0;
    }

    /* タグ行は card-inner 幅で確実に折返す（はみ出しクリップ防止）。 */
    .renewal-subpage-body .work-used-products__tags {
        flex-wrap: wrap;
        max-width: 100%;
        box-sizing: border-box;
    }

    .renewal-subpage-body .work-used-products__thumb-wrap {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        width: 120rem;
        height: 120rem;
        max-width: none;
        max-height: none;
        border-radius: 8.96rem;
    }

    .renewal-subpage-body .work-used-products__thumb {
        width: 100rem;
        height: 100rem;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .renewal-subpage-body .work-used-products__text-block {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        /* 1段目(製品名)だけ矢印ぶんを空ける。タグ行(2段目)は全幅を使えるようにする。 */
        padding: 0 30rem 0 0;
    }

    .renewal-subpage-body .work-used-products__tags {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 12rem;
        padding: 0 8rem;
        /* タグはなるべく1行に（Figma 5083:315993）。矢印を絶対配置にしてタグ行へ全幅を回し、
           入り切る幅では1行・入り切らない狭幅でのみ折返す。min-width:0 で grid 内で縮める。 */
        min-width: 0;
    }

    .renewal-subpage-body .work-used-products__name {
        font-size: 14rem;
        letter-spacing: 0.56rem;
        line-height: 25.2rem;
    }

    .renewal-subpage-body .work-used-products__desc {
        font-size: 14rem;
        letter-spacing: 0.56rem;
        line-height: 25.2rem;
    }

    .renewal-subpage-body .work-used-products__tag--solid.work-used-products__tag--teal {
        height: 22rem;
        min-height: 22rem;
        padding: 2rem 12rem;
        background-color: #46b5c3;
        font-size: 11rem;
        letter-spacing: 0.44rem;
        line-height: 16.5rem;
        white-space: nowrap;
    }

    .renewal-subpage-body .work-used-products__tag--solid.work-used-products__tag--blue {
        height: 22rem;
        min-height: 22rem;
        padding: 2rem 12rem;
        font-size: 11rem;
        letter-spacing: 0.44rem;
        line-height: 16.5rem;
        white-space: nowrap;
    }

    .renewal-subpage-body .work-used-products__tag--outline {
        height: 24rem;
        min-height: 24rem;
        padding: 3rem 12rem;
        font-size: 10rem;
        letter-spacing: 0.4rem;
        line-height: 15rem;
        white-space: nowrap;
    }

    .renewal-subpage-body .work-used-products__arrow {
        /* 矢印を絶対配置(右・上下中央)にしてフレックス幅を奪わない→タグ行が全幅を使える。
           card は position:relative。 */
        position: absolute;
        top: 50%;
        right: 16rem;
        transform: translateY(-50%);
        margin: 0;
    }
}

/* ≤600px(実機スマホ)：長いタグ2つは1行に収まらないので、矢印をフロー内へ戻し
   タグは素直に折返す（無理な1行化によるクリップを防止）。601〜1023pxのタブレット帯
   のみ矢印を絶対配置にしてタグ行へ全幅を回し1行化する。 */
@media (max-width: 600px) {
    .renewal-subpage-body .work-used-products__arrow {
        position: static;
        transform: none;
        margin: 0;
    }
}

/* ----- 一覧へ戻る ----- */
.renewal-subpage-body .work-show-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56rem;
    margin-top: 96rem;
    padding-bottom: 48rem;
    box-sizing: border-box;
}

/* 戻るボタンは共通 c-button（secondary-back）へ委譲。中央寄せラッパー .work-show-back のみ保持。
   旧 __btn/__icon/__text とSP幅(238/full)指定は c-button 側（min-width 230／SP min-width:0）に一本化。 */


/* clamp一本化: SP帯(<=1023.98px)のSP値オーバーライド（旧clamp最小値＝設計SP値） */
@media (max-width: 1023.98px) {
  .renewal-subpage-hero {
    padding: 160rem 24rem 0;
  }
  /* 見出し（__ja / __en / __rule）は共通 c-page-title へ移行済み（components/page-title.css）。
   ヒーロー固有の配置は下の __inner / __bg / breadcrumb が担う。 */

/* ----- パンくず：配置・帯背景・余白のみ。中身（先頭アイコン/色/横スクロール）は
   共通 c-breadcrumb が担う ----- */
.renewal-subpage-breadcrumb {
    padding: 24rem 24rem;
  }
  body.page-news-index .renewal-subpage-body .container.news-index {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  /* ----- ニュース詳細 ----- */
/* 本文コンテナはヒーロー／パンくずと同じ 70px ガター（Figma 1440 で内容幅 1300px）に揃える。
   共通 .container の max-width:1200px は見出しがパンくずより内側に寄ってしまうため news-show では解除。 */
body.page-news-show .renewal-subpage-body .container.news-show {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  /* works-search__panel の SP パディング（24rem 20rem）は line 1469 で定義済み */
  /* ----- 製作事例詳細ヒーロー（左テキスト + 右画像） ----- */
body.page-works-show .renewal-subpage-body > .container,
body.page-works-sales-show .renewal-subpage-body > .container {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  /* 製作事例詳細ヒーロー SP（Figma 3779:181374 準拠）。
     Contents y=298 から先頭 h2 が y=330 始まりで上 32rem、本文末→情報パネルまで 40rem、
     head→media→lead は __inner gap で各 40rem ずつ。 */
  .renewal-subpage-body .work-show-hero {
    padding: 32rem 0 40rem;
  }
  .renewal-subpage-body .work-show-hero__inner {
    gap: 40rem;
  }
  .renewal-subpage-body .work-show-hero__text {
    padding: 0;
  }
  .renewal-subpage-body .work-show-hero__title {
    font-size: 24rem;
  }
  /* ----- 製作事例詳細：事例情報 ----- */
/* Figma 3779:181395: 390 フル幅 + 内側 48/32（負マージンは .container の 16rem を相殺、line 2007） */
.renewal-subpage-body .work-show-info {
    padding: 48rem 32rem;
  }
  .renewal-subpage-body .work-show-info__panel {
    padding: 0;
  }
  /* ----- メインコメント2（PC / SP） ----- */
.renewal-subpage-body .c-rich {
    padding: 32rem 0;
  }
  .renewal-subpage-body .c-rich__inner {
    gap: 28rem;
  }
  .renewal-subpage-body .c-rich h2 {
    font-size: 22rem;
  }
  .renewal-subpage-body .c-rich h3,
.renewal-subpage-body .c-rich h4 {
    font-size: 20rem;
  }
  .renewal-subpage-body .c-rich p > img:only-child {
    padding: 16rem;
  }
  /* ----- 使用している製品（PC: BiWSJ / SP: DYB2X） ----- */
.renewal-subpage-body .work-used-products {
    padding: 24rem 0;
  }
  .renewal-subpage-body .work-used-products__layout {
    gap: 28rem;
  }
  .renewal-subpage-body .work-used-products__title {
    font-size: 22rem;
  }
  .renewal-subpage-body .work-used-products__card {
    padding: 16rem 16rem 16rem 24rem;
  }
  /* ----- 一覧へ戻る ----- */
.renewal-subpage-body .work-show-back {
    padding-bottom: 24rem;
  }
}