/* Shared responsive case-study navigation and list components. */

body.jirei-rwd-page #header {
    z-index: 1000;
}

.case-mobile-actions,
.case-mobile-menu {
    display: none;
}

.case-mega-backdrop {
    position: fixed;
    z-index: 998;
    top: 140px;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    background: rgba(34, 38, 49, 0.18);
    opacity: 0;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.case-mega-backdrop.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.case-mega-menu {
    position: absolute;
    z-index: 999;
    top: 140px;
    right: 0;
    left: 0;
    visibility: hidden;
    /* アクション帯と、幅・字体による見出しの改行に合わせて高さを確保する。 */
    height: auto;
    border-top: 1px solid #c7cad2;
    border-bottom: 1px solid #b7bbc5;
    box-sizing: border-box;
    background: #f7f8fb;
    box-shadow: 0 12px 24px rgba(33, 42, 68, 0.16);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.case-mega-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.case-mega-inner {
    position: relative;
    display: flex;
    width: 980px;
    min-height: 360px;
    margin: 0 auto;
    padding: 29px 0 24px;
    box-sizing: border-box;
    color: #343946;
}

.case-mega-close {
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 0;
    width: 76px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #555d70;
    font-family: "Meiryo", "Yu Gothic", sans-serif;
    font-size: 12px;
    line-height: 44px;
    text-align: center;
    background: transparent;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.case-mega-close span {
    display: inline-block;
    white-space: nowrap;
}

.case-mega-close span:after {
    content: "×";
    display: inline-block;
    margin-left: 7px;
    color: #687084;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    vertical-align: -1px;
}

.case-mega-close:hover,
.case-mega-close:focus {
    color: #293b80;
    background: #eef0f6;
}

.case-mega-intro {
    flex: 0 0 210px;
    padding-right: 28px;
    border-right: 1px solid #d7dae2;
    box-sizing: border-box;
}

.case-mega-eyebrow,
.case-mega-title,
.case-mega-current-title {
    margin: 0;
    padding: 0;
}

.case-mega-eyebrow {
    color: #677080;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.case-mega-title {
    margin-top: 8px;
    color: #293b80;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.55;
}

.case-mega-top-link,
.case-mega-category-link,
.case-mega-related a {
    color: #2f4d9a;
    text-decoration: none;
}

.case-mega-top-link {
    position: relative;
    display: inline-block;
    margin-top: 25px;
    padding-right: 16px;
    font-size: 13px;
    font-weight: 700;
}

.case-mega-top-link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: 2px solid #6273a9;
    border-right: 2px solid #6273a9;
    transform: rotate(45deg);
}

.case-mega-top-link:hover,
.case-mega-category-link:hover,
.case-mega-related a:hover,
.case-mega-links a:hover {
    text-decoration: underline;
}

.case-mega-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 28px;
}

.case-mega-categories {
    /* 名称に合わせて欄全体を広げず、単語の切れ目で折り返して記事欄の幅を残す。 */
    flex: 0 0 230px;
    max-width: 40%;
    padding-right: 26px;
    box-sizing: border-box;
}

/* カード・見出し・パンくず・メニューで共用する名称の改行単位。 */
.label-words,
.label-word {
    color: inherit;
}

.label-words {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.label-word {
    display: inline-block;
    white-space: nowrap;
}

.case-mega-category {
    position: relative;
    display: block;
    width: 100%;
    min-height: 45px;
    margin: 0;
    padding: 0 26px 0 12px;
    border: 0;
    border-bottom: 1px solid #dde0e7;
    border-radius: 0;
    box-sizing: border-box;
    background: transparent;
    color: #414754;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
}

.case-mega-category:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 2px solid #8b91a0;
    border-right: 2px solid #8b91a0;
    transform: rotate(45deg);
}

.case-mega-category:hover,
.case-mega-category:focus,
.case-mega-category.is-active {
    background: #e9ecf5;
    color: #293b80;
    outline: 0;
}

.case-mega-category.is-active:before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    background: #6078c2;
}

.case-mega-results {
    flex: 1 1 auto;
    min-width: 0;
}

.case-mega-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    min-height: 30px;
    padding: 0 82px 8px 0;
    border-bottom: 1px solid #cfd4df;
    box-sizing: border-box;
}

.case-mega-current-title {
    color: #293b80;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    min-width: 0;
    max-width: 100%;
}

.case-mega-category-link {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.case-mega-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 62px;
    gap: 0 24px;
    height: 232px;
    margin: 12px 0 0;
    padding: 0 10px 6px 0;
    overflow-y: auto;
    list-style: none;
    box-sizing: border-box;
}

.case-mega-links li {
    min-width: 0;
    border-bottom: 1px solid #e1e3e9;
}

.case-mega-links a {
    display: block;
    height: 62px;
    padding: 7px 3px 6px;
    box-sizing: border-box;
    color: #343946;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
}

.case-mega-link-title {
    display: -webkit-box;
    max-height: 33px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.case-mega-link-subtitle {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #6d7380;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-mega-related {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 210px;
    color: #747a87;
    font-size: 11px;
    line-height: 1.5;
}

.case-mega-related span,
.case-mega-related a {
    display: block;
}

.case-mega-related a {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
}

/* 関連情報は左下、導入検討の行動は下部に分ける比較案。 */
.case-mega-related a {
    width: fit-content;
    margin-top: 8px;
}

.case-mega-actions-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    width: calc(100% - 32px);
    max-width: 980px;
    min-height: 64px;
    margin: 0 auto;
    padding: 8px 0;
    border-top: 1px solid #d7dae2;
    box-sizing: border-box;
}

.case-mega-actions-label {
    flex: 0 0 210px;
    color: #747a87;
    font-size: 11px;
}

.case-mega-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: #414754;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
}

.case-mega-action:after {
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1px solid #8b91a0;
    border-right: 1px solid #8b91a0;
    transform: rotate(45deg);
}

.case-mega-action:hover,
.case-mega-related a:hover {
    color: #293b80;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.case-mega-action:focus-visible,
.case-mega-related a:focus-visible {
    outline: 2px solid #6078c2;
    outline-offset: 3px;
}

/* 中間幅（835〜1100px）の対応。index.htm の responsive.css と同じ指定を
   このドラフトにも入れる。これが無いと980px固定のままはみ出す。
   ※ 必ず下の 1000px / 834px ブロックより前に置くこと。後ろに置くと
     幅の狭い側の指定を打ち消してしまう。 */
@media screen and (max-width: 1100px) {
    body.jirei-rwd-page {
        min-width: 0;
    }

    body.jirei-rwd-page #top_header_in,
    body.jirei-rwd-page .wr_in {
        width: calc(100% - 32px);
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    body.jirei-rwd-page #f_nav ul {
        width: 100%;
        max-width: 810px;
        box-sizing: border-box;
    }

    body.jirei-rwd-page #h {
        width: 100%;
        box-sizing: border-box;
    }

    body.jirei-rwd-page #h_left {
        width: clamp(190px, calc(100% - 745px), 235px);
    }

    body.jirei-rwd-page #h_left img {
        width: 141px;
        max-width: 100%;
    }

    body.jirei-rwd-page #h_right {
        width: min(745px, calc(100% - 190px));
    }

    body.jirei-rwd-page #SizeChange {
        width: calc(100% - 234px);
        max-width: 511px;
    }

    body.jirei-rwd-page #SizeChange .utility-search {
        width: calc(100% - 221px);
        max-width: 290px;
        margin-left: 30px;
        margin-right: 24px;
    }

    /* グローバルナビを均等伸縮にする。長いラベルの2番目と5番目だけ
       最低幅を確保する（index.htm と同じ値）。 */
    body.jirei-rwd-page #h_nav.css-gnav ul {
        display: flex;
        width: 100%;
    }

    body.jirei-rwd-page #h_nav.css-gnav li {
        float: none;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    body.jirei-rwd-page #h_nav.css-gnav li:nth-child(2) {
        min-width: 135px;
    }

    body.jirei-rwd-page #h_nav.css-gnav li:nth-child(5) {
        min-width: 120px;
    }

    body.jirei-rwd-page #h_pan {
        height: 27px;
        width: calc(100% - 456px);
        box-sizing: border-box;
    }

    body.jirei-rwd-page #h_contact {
        width: 456px;
    }

    body.jirei-rwd-page #h_contact .h_contact_label_text {
        width: 130px;
    }
}

@media screen and (max-width: 1000px) {
    .case-mega-inner {
        width: calc(100% - 40px);
    }

    .case-mega-intro {
        flex-basis: 190px;
    }
}

/* 幅が狭い端末に加えて、画面の高さが足りない端末（横向きスマホなど）でも
   デスクトップのメガメニューをやめてスマホ用の階層メニューに切り替える。
   横向きスマホは幅が835pxを超えることが多く、幅だけでは判定できないため。
   JS の isMobileView() と条件を必ず一致させること。 */
@media screen and (max-width: 834px), screen and (max-height: 500px) {
    body.jirei-rwd-page {
        min-width: 0;
    }

    body.jirei-rwd-page.case-mobile-nav-open {
        overflow: hidden;
    }

    body.jirei-rwd-page #header {
        position: sticky;
        z-index: 1100;
        top: 0;
        height: 101px;
        margin: 0;
    }

    body.jirei-rwd-page #top_header {
        z-index: 1100;
        height: 101px;
        border-bottom: 1px solid #d7dae3;
        background: #ffffff;
    }

    body.jirei-rwd-page #top_header_in {
        width: 100%;
        margin: 0;
        padding: 0 16px;
        box-sizing: border-box;
    }

    body.jirei-rwd-page #h {
        position: relative;
        width: 100%;
        height: 64px;
        border-bottom: 1px solid #7188cf;
        box-sizing: border-box;
    }

    body.jirei-rwd-page #h_left {
        width: auto;
        height: 64px;
    }

    body.jirei-rwd-page #h_left a {
        height: 64px;
    }

    body.jirei-rwd-page #h_left img {
        width: 150px;
        max-width: none;
    }

    body.jirei-rwd-page #h_right,
    body.jirei-rwd-page #h_contact {
        display: none;
    }

    body.jirei-rwd-page #h_pan {
        display: block;
        float: none;
        width: 100%;
        height: 36px;
        padding: 7px 16px 0;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        background: #ffffff;
        scrollbar-width: none;
    }

    body.jirei-rwd-page #h_pan::-webkit-scrollbar {
        display: none;
    }

    .case-mobile-actions {
        float: right;
        display: flex;
        align-items: center;
        height: 64px;
    }

    .case-mobile-menu-toggle {
        position: relative;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #2f4790;
        cursor: pointer;
    }

    .case-mobile-menu-toggle:focus-visible {
        outline: 2px solid #7188cf;
        outline-offset: 2px;
    }

    .case-mobile-menu-icon {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 12px;
        left: 12px;
    }

    .case-mobile-menu-icon:before,
    .case-mobile-menu-icon:after {
        position: absolute;
        inset: 0;
        background-color: currentColor;
        left: 0;
        content: "";
        transition: -webkit-clip-path 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip-path 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .case-mobile-menu-icon:before {
        -webkit-clip-path: polygon(0 30%, 7% 30%, 93% 30%, 100% 30%, 100% 38%, 0 38%);
        clip-path: polygon(0 30%, 7% 30%, 93% 30%, 100% 30%, 100% 38%, 0 38%);
    }

    .case-mobile-menu-icon:after {
        -webkit-clip-path: polygon(0 62%, 7% 62%, 93% 62%, 100% 62%, 100% 70%, 0 70%);
        clip-path: polygon(0 62%, 7% 62%, 93% 62%, 100% 62%, 100% 70%, 0 70%);
    }

    .case-mobile-menu-toggle[aria-expanded="true"] .case-mobile-menu-icon:before {
        -webkit-clip-path: polygon(10% 10%, 16% 10%, 90% 84%, 90% 90%, 84% 90%, 10% 16%);
        clip-path: polygon(10% 10%, 16% 10%, 90% 84%, 90% 90%, 84% 90%, 10% 16%);
    }

    .case-mobile-menu-toggle[aria-expanded="true"] .case-mobile-menu-icon:after {
        -webkit-clip-path: polygon(84% 10%, 90% 10%, 90% 16%, 16% 90%, 10% 90%, 10% 84%);
        clip-path: polygon(84% 10%, 90% 10%, 90% 16%, 16% 90%, 10% 90%, 10% 84%);
    }

    body.jirei-rwd-page #h_nav.css-gnav {
        position: fixed;
        z-index: 1101;
        top: 64px;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        width: 100%;
        max-width: 100vw;
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        background: #f7f8fb;
        box-shadow: inset 0 1px 0 #e3e5eb;
    }

    body.jirei-rwd-page.case-mobile-nav-open #h_nav.css-gnav {
        display: block;
    }

    body.jirei-rwd-page #h_nav.css-gnav ul {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 26px 24px 48px;
        box-sizing: border-box;
        overflow: visible;
    }

    body.jirei-rwd-page #h_nav.css-gnav li {
        float: none;
        width: 100%;
        min-width: 0;
        height: auto;
        border: 0;
    }

    body.jirei-rwd-page #h_nav.css-gnav li + li {
        margin-top: 4px;
    }

    body.jirei-rwd-page #h_nav.css-gnav li + li:before,
    body.jirei-rwd-page #h_nav.css-gnav li a:before {
        display: none;
    }

    body.jirei-rwd-page #h_nav.css-gnav li a {
        width: 100%;
        height: auto;
        min-height: 64px;
        padding: 17px 40px 17px 12px;
        box-sizing: border-box;
        background: transparent;
        text-align: left;
    }

    body.jirei-rwd-page #h_nav.css-gnav li.is-current a {
        box-shadow: inset 3px 0 0 #7088cf;
    }

    body.jirei-rwd-page #h_nav.css-gnav li.is-current a:after {
        width: 7px;
        height: 7px;
        border-top-color: #7483b2;
        border-right-color: #7483b2;
        background: transparent;
        opacity: 1;
    }

    body.jirei-rwd-page #h_nav.css-gnav li a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 12px;
        bottom: auto;
        left: auto;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-top: 1.5px solid #9aa0ad;
        border-right: 1.5px solid #9aa0ad;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        transform: rotate(45deg);
    }

    body.jirei-rwd-page #h_nav.css-gnav li a:hover:after,
    body.jirei-rwd-page #h_nav.css-gnav li a:focus:after {
        width: 7px;
        height: 7px;
        border-top: 1.5px solid #9aa0ad;
        border-right: 1.5px solid #9aa0ad;
        background: transparent;
        opacity: 1;
    }

    body.jirei-rwd-page #h_nav.css-gnav li.is-current a:hover:after,
    body.jirei-rwd-page #h_nav.css-gnav li.is-current a:focus:after {
        border-top-color: #7483b2;
        border-right-color: #7483b2;
    }

    @media (hover: hover) and (pointer: fine) {
        body.jirei-rwd-page #h_nav.css-gnav li a:hover {
            background-color: #eef1f8;
        }
    }

    body.jirei-rwd-page #h_nav.css-gnav li a .jp {
        margin-top: 0;
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
    }

    body.jirei-rwd-page #h_nav.css-gnav li a .en {
        display: none;
    }

    .case-mega-menu,
    .case-mega-backdrop {
        display: none;
    }

    .case-mobile-menu {
        position: fixed;
        z-index: 1102;
        top: 64px;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden;
        background: #f7f8fb;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 200ms ease, visibility 0s linear 200ms;
    }

    .case-mobile-menu.is-open {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .case-mobile-menu:not(.is-open) .case-mobile-screen {
        visibility: hidden;
    }

    .case-mobile-screen {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        background: #f7f8fb;
        visibility: visible;
        transform: translateX(0);
        transition: transform 200ms ease, visibility 0s linear 0s;
    }

    .case-mobile-screen.is-hidden {
        visibility: hidden;
        pointer-events: none;
        transition: transform 200ms ease, visibility 0s linear 200ms;
    }

    #case-mobile-categories.is-hidden {
        transform: translateX(-28%);
    }

    #case-mobile-links-screen {
        transform: translateX(100%);
    }

    #case-mobile-links-screen:not(.is-hidden) {
        transform: translateX(0);
    }

    .case-mobile-screen-head {
        position: sticky;
        z-index: 2;
        top: 0;
        padding: 18px 22px 20px;
        border-bottom: 1px solid #e4e6ec;
        background: #f7f8fb;
    }

    .case-mobile-back {
        position: relative;
        min-height: 32px;
        margin: 0 0 14px;
        padding: 0 0 0 18px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #667080;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    .case-mobile-back:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 2px;
        width: 7px;
        height: 7px;
        margin-top: -5px;
        border-bottom: 2px solid #77808f;
        border-left: 2px solid #77808f;
        transform: rotate(45deg);
    }

    .case-mobile-screen-title {
        margin: 0;
        padding: 0;
        color: #293b80;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.4;
    }

    .case-mobile-screen-body {
        width: 100%;
        padding: 12px 22px 40px;
        box-sizing: border-box;
    }

    .case-mobile-top-link,
    .case-mobile-category-button,
    .case-mobile-list-link {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 62px;
        margin: 0;
        padding: 13px 38px 13px 6px;
        border: 0;
        border-radius: 0;
        box-sizing: border-box;
        background: transparent;
        color: #343946;
        font-family: inherit;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.45;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .case-mobile-top-link:after,
    .case-mobile-category-button:after,
    .case-mobile-list-link:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 12px;
        width: 8px;
        height: 8px;
        margin-top: -5px;
        border-top: 2px solid #8b91a0;
        border-right: 2px solid #8b91a0;
        transform: rotate(45deg);
    }

    .case-mobile-top-link,
    .case-mobile-list-link {
        margin-bottom: 14px;
        border-bottom: 1px solid #e3e5eb;
    }

    .case-mobile-category-button + .case-mobile-category-button {
        margin-top: 4px;
    }

    .case-mobile-related {
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid #cbd0dc;
        color: #727986;
        font-size: 12px;
        line-height: 1.5;
    }

    .case-mobile-related span,
    .case-mobile-related a {
        display: block;
    }

    .case-mobile-related a {
        position: relative;
        margin-top: 5px;
        padding-right: 18px;
        color: #2f4d9a;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }

    .case-mobile-related a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 3px;
        width: 7px;
        height: 7px;
        margin-top: -5px;
        border-top: 2px solid #6273a9;
        border-right: 2px solid #6273a9;
        transform: rotate(45deg);
    }

    .case-mobile-links {
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
    }

    .case-mobile-links li {
        margin: 0;
        padding: 0;
    }

    .case-mobile-links li + li {
        margin-top: 8px;
    }

    .case-mobile-links a {
        display: block;
        min-height: 0;
        padding: 10px 6px 12px;
        box-sizing: border-box;
        color: #2e3855;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        text-decoration: none;
    }

    .case-mobile-links .case-mega-link-title {
        display: block;
        max-height: none;
        overflow: visible;
    }

    .case-mobile-links .case-mega-link-subtitle {
        margin-top: 4px;
        color: #6c7482;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.55;
        text-overflow: clip;
        white-space: normal;
    }

    /* 幅の広い端末（横向きスマホ、大型スマホ、834px近辺）では項目名が左端、
       矢印が右端に張り付いて中央が間延びするため、中身だけ最大幅で止めて中央に置く。
       560pxでは834px付近の左右余白が大きいため、680pxまで広げる。
       背景の面は全幅のままなので、メニューが開いている印象は変わらない。 */
    .case-mobile-screen-head,
    .case-mobile-screen-body,
    body.jirei-rwd-page #h_nav.css-gnav ul {
        max-width: 680px;
        margin-right: auto;
        margin-left: auto;
    }

    /* 文字と余白の調整。試作時の初期値は縦持ちスマホでも大きめだったため一段階詰めた。
       タップ領域は最低44pxを確保する。大きさを変えたいときはこのブロックだけ触ればよい。 */
    body.jirei-rwd-page #h_nav.css-gnav ul {
        padding-top: 16px;
        padding-bottom: 36px;
    }

    body.jirei-rwd-page #h_nav.css-gnav li a {
        min-height: 54px;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    body.jirei-rwd-page #h_nav.css-gnav li a .jp {
        font-size: 17px;
        line-height: 26px;
    }

    .case-mobile-screen-head {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .case-mobile-screen-title {
        font-size: 21px;
    }

    .case-mobile-top-link,
    .case-mobile-category-button,
    .case-mobile-list-link {
        min-height: 54px;
        font-size: 16px;
    }
}

/* 高さが足りない画面（横向きスマホなど）では、見出しと項目を詰めて
   一画面に入る項目数を増やす。上の 834px ブロックの後に置いて上書きする。 */
@media screen and (max-height: 500px) {
    body.jirei-rwd-page #header {
        height: 83px;
    }

    body.jirei-rwd-page #h,
    body.jirei-rwd-page #h_left,
    body.jirei-rwd-page #h_left a,
    .case-mobile-actions {
        height: 52px;
    }

    body.jirei-rwd-page #h_left img {
        width: 122px;
    }

    body.jirei-rwd-page #h_pan {
        height: 30px;
        padding-top: 4px;
    }

    .case-mobile-menu,
    body.jirei-rwd-page #h_nav.css-gnav {
        top: 52px;
    }

    body.jirei-rwd-page #h_nav.css-gnav {
        height: calc(100vh - 52px);
        height: calc(100dvh - 52px);
    }

    .case-mobile-screen-head {
        padding: 10px 22px 12px;
    }

    .case-mobile-back {
        min-height: 26px;
        margin-bottom: 8px;
    }

    .case-mobile-screen-title {
        font-size: 19px;
    }

    .case-mobile-screen-body {
        padding: 8px 22px 32px;
    }

    .case-mobile-top-link,
    .case-mobile-category-button,
    .case-mobile-list-link {
        min-height: 46px;
        padding: 9px 34px 9px 6px;
        font-size: 15px;
    }

    .case-mobile-top-link,
    .case-mobile-list-link {
        margin-bottom: 10px;
    }

    .case-mobile-related {
        margin-top: 18px;
        padding-top: 14px;
    }

    .case-mobile-links a {
        padding: 7px 6px 8px;
        font-size: 15px;
    }

    .case-mobile-links .case-mega-link-subtitle {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-mobile-menu-icon:before,
    .case-mobile-menu-icon:after,
    .case-mobile-menu,
    .case-mobile-screen {
        transition: none;
    }
}

/* ============================================================
   ここから本文のレスポンシブ（2026-09-09 追加・ドラフト検証用）
   上のメニュー用CSSは全て case- 接頭辞。ここは #main / .wr_in など
   本文側だけを扱う。本番化するときはこのブロックごと responsive.css
   へ移す想定。
   ============================================================ */

/* サイドバー(#right)と横型サブナビ(#snav)は、将来メガメニューへ
   統合される想定のため、ドラフトでは非表示にして本文だけで成立するか
   を確認する。元に戻すときはこの1ブロックを消せばよい。
   本番の jirei.htm では今も表示されたままで、影響しない。 */
.jirei-rwd-page #right,
.jirei-rwd-page #snav {
    display: none;
}

/* 外枠 .wr_in の可変幅化は、index.htm と同じ式にそろえるため
   「1100px以下」ブロック（このファイルの前半）にまとめてある。 */

/* サイドバーが無くなったぶん、見出し帯と本文を全幅に広げる。 */
.jirei-rwd-page .btspace_h1,
.jirei-rwd-page #main {
    width: auto;
    flex: 1 1 100%;
    min-width: 0;
}

/* common.css の #main には padding-left: 6px がある。HTMLの並びではサイドバー
   （#right）が #main の前にあり、その間の隙間だったと考えられる。サイドバーを
   消した今は隙間だけが残り、カードが見出し帯より6px右に寄って見えるので0にする。 */
.jirei-rwd-page #main {
    padding-left: 0;
}

/* フッター。common.css では .foot / .f_content / #f_nav の高さが固定されていて
   中身（ナビ3段とCopyright）が入りきらず、白い箱の外の紙の地にはみ出したり、
   狭い画面ではCopyrightが「登録番号」の行に重なったりしていた。
   TOPで入れた修正（responsive.css 88〜101行）と同じ指定を複製している。
   本番化で下層ページも responsive.css を読むようになったら、この複製は削除して
   1本にまとめること（ヘッダー/ナビの複製と同じ扱い）。 */
.jirei-rwd-page .foot,
.jirei-rwd-page .f_content,
.jirei-rwd-page #f_nav {
    height: auto;
}

.jirei-rwd-page .f_content {
    padding-bottom: 12px;
}

.jirei-rwd-page .copyright {
    display: block;
}

/* フッターの左右の余白をTOPと同じ0にする。common.css では下層の .foot に
   左右20pxがあり、TOPだけ .wr_top .foot で0になっている。TOPとドラフトの
   フッターを要素ごとに比較（1280/834/390px）したところ、見た目の差はこの
   余白だけだったので、完成しているTOPにそろえた（2026-09-17）。 */
.jirei-rwd-page .foot {
    padding-left: 0;
    padding-right: 0;
    margin-top: 38px;
}

/* フッターのリンク名を途中で折らない。common.css の #f_nav li は display: inline
   のままで、行末に来た項目が1文字単位で折れていた（例「導入事／例」）。TOPにも
   同じ問題があり、360px・340pxで発生する。改行は項目と項目の間だけで起きるように
   する。ドラフトで問題なければTOPにも入れる予定（2026-09-17）。 */
.jirei-rwd-page #f_nav li {
    white-space: nowrap;
}

/* 罫線は項目と項目の間だけに置く。common.css は全 li に左罫線を
   付けるため、各行の先頭（ホーム、プライバシーポリシーなど）にも
   不要な線が出ていた。フッター内の全リストで共通に外す。 */
.jirei-rwd-page #f_nav ul > li:first-child {
    border-left: 0;
}

/* 導入検討導線はJSで #f_nav の先頭へ移し、既存の
   #f_nav ul / li / a を直接共用する。独自指定は行間と見出しの太字だけ。 */
.jirei-rwd-page #f_nav ul.case-page-support {
    padding-bottom: 6px;
}

.jirei-rwd-page #f_nav .case-page-support-heading strong {
    font-size: 12px;
    font-weight: 700;
}

/* 本文の内側コンテナも754px固定。ここを外さないと、サイドバーぶんの幅が
   そのまま空き地になる。 */
.jirei-rwd-page .main_cont2 {
    width: auto;
}

/* カード（カテゴリ5枚）は329px固定をやめ、2列のまま幅に追従させる。
   縦の間隔は gap に集約するため margin は0にする。 */
.jirei-rwd-page .flex_menu_sqea {
    gap: 20px;
}

/* カードの見た目を刷新する。枠線をやめ、角丸と影で面を作る。
   元のスタイルは本番の jireiisiryoutop.css（資料ページと共用）にあるので
   触らず、ここから上書きする。 */
.jirei-rwd-page div.menu_sqea,
.jirei-rwd-page div.menu_sqea:nth-child(odd) {
    display: flex;
    flex-direction: column;
    width: calc(50% - 10px);
    margin-right: 0;
    margin-bottom: 0;
    padding: 28px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ホバーは「黒を3%かぶせる」のをやめ、影を強めて少し持ち上げる。 */
.jirei-rwd-page .menu_sqea:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10), 0 12px 24px rgba(0, 0, 0, 0.10);
}

.jirei-rwd-page .linkbox a:hover {
    opacity: 1;
    background-color: transparent;
}

.jirei-rwd-page .h3_sqea {
    font-size: 20px;
    padding-bottom: 12px;
}

/* 本文は min-height 10em で高さをそろえていたが、カードが広くなると
   行数が減って空白が目立つ。縦並びのflexにして、余った高さを本文に
   吸わせ、画像をカード下端にそろえる。 */
.jirei-rwd-page .txt_sqea {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 18px;
    /* 元は 1.1em（本文17px基準で18.7px）で、見出し20pxとの差が1.3pxしかなく
       見出しが上位に見えなかった。16pxにして4pxの差をつける。
       行間も本文の180%（33.7px）は開きすぎるので1.75（28px）に詰める。 */
    font-size: 16px;
    line-height: 1.75;
}

/* 画像はカード幅いっぱいに。元画像が600pxあるので拡大しても荒れない。 */
.jirei-rwd-page .menu_sqea img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ============================================================
   見出し帯（H1/H2）のCSS化
   h2_bg.png（980×76）と h2_jirei.png を置き換える。値はすべて
   元画像の実測。検証の経緯は
   rwd_design_notes.md「見出し帯（H1/H2）のCSS化」にある。

   高さは88px（B方式）。弧の数値は元の76px時のままで、箱だけ高くして
   弧を下へ伸ばしている。絵は980×100%で右端に固定し、左の無地を伸ばす。
   ============================================================ */
/* 帯の上下の余白（2026-09-15 オーナー指定値）。
   帯の上には別に #header の margin-bottom 6px があるので、実際の上の余白は
   6＋6＝12px。下は .main_cont2 の5pxと合わせて19px。 */
.jirei-rwd-page .btspace_h1 {
    padding-top: 6px;
    padding-bottom: 14px;
}

/* 小さいヘッダーのとき（834px以下、または画面の高さ500px以下）は
   #header の margin-bottom が0になるので、帯の上の余白は帯側で10px持つ。

   以前はこの10pxを680px以下だけに入れていたため、ヘッダーが先に切り替わる
   681〜834pxの間は隙間が6pxしかなく、帯が上に寄って見えた（2026-09-17 修正）。
   条件をヘッダーの切り替え（@media (max-width: 834px), (max-height: 500px)）と
   そろえたので、スマホ用の指定はここ1か所にまとまっている。下の余白14pxは
   デスクトップと同じなので上書きしない。 */
@media screen and (max-width: 834px), screen and (max-height: 500px) {
    .jirei-rwd-page .btspace_h1 {
        padding-top: 10px;
    }
}

.jirei-rwd-page .bg_h1 {
    position: relative;
    height: 88px;
    padding: 0;
    background-color: #6c7ab8;
    background-image:
        /* 1. 上端の線と下端の帯。下端から数えるので高さを変えても崩れない。 */
        linear-gradient(to bottom,
            #b4b6bf 0 1px,
            rgba(0, 0, 0, 0) 1px calc(100% - 9px),
            #e0e2f2 calc(100% - 9px) calc(100% - 8px),
            #7a80a9 calc(100% - 8px) calc(100% - 1px),
            #747575 calc(100% - 1px)),
        /* 2. 1本目の弧（外側）。中心(892,1431) 半径1428。
              弧のすぐ外(1429px)で白が0になる所が「濃い青の線」、
              その外(1430〜1432px)のわずかな白が「薄い青の線」。 */
        radial-gradient(circle 1498px at 892px 1431px,
            rgba(255,255,255,0.500) 1358px, rgba(255,255,255,0.455) 1383px, rgba(255,255,255,0.475) 1398px,
            rgba(255,255,255,0.482) 1408px, rgba(255,255,255,0.478) 1414px, rgba(255,255,255,0.434) 1418px,
            rgba(255,255,255,0.370) 1421px, rgba(255,255,255,0.368) 1423px, rgba(255,255,255,0.385) 1425px,
            rgba(255,255,255,0.290) 1427px, rgba(255,255,255,0.068) 1428px, rgba(255,255,255,0.000) 1429px,
            rgba(255,255,255,0.052) 1430px, rgba(255,255,255,0.122) 1431px, rgba(255,255,255,0.108) 1432px,
            rgba(255,255,255,0.076) 1434px, rgba(255,255,255,0.065) 1437px, rgba(255,255,255,0.043) 1442px,
            rgba(255,255,255,0.021) 1448px, rgba(255,255,255,0.005) 1458px, rgba(255,255,255,0.001) 1473px,
            rgba(255,255,255,0) 1498px),
        /* 3. 2本目の弧（内側）。中心(894,1096) 半径1093。
              1本目とほぼ同じ点から出て下へ開く。2本に挟まれた帯が中間色。 */
        radial-gradient(circle 1163px at 894px 1096px,
            rgba(255,255,255,0.121) 1023px, rgba(255,255,255,0.186) 1048px, rgba(255,255,255,0.171) 1063px,
            rgba(255,255,255,0.172) 1073px, rgba(255,255,255,0.194) 1079px, rgba(255,255,255,0.234) 1083px,
            rgba(255,255,255,0.291) 1086px, rgba(255,255,255,0.310) 1088px, rgba(255,255,255,0.199) 1090px,
            rgba(255,255,255,0.161) 1092px, rgba(255,255,255,0.192) 1093px, rgba(255,255,255,0.132) 1094px,
            rgba(255,255,255,0.000) 1095px, rgba(255,255,255,0.025) 1096px, rgba(255,255,255,0.045) 1097px,
            rgba(255,255,255,0.026) 1099px, rgba(255,255,255,0.039) 1102px, rgba(255,255,255,0.029) 1107px,
            rgba(255,255,255,0.002) 1113px, rgba(255,255,255,0.000) 1123px, rgba(255,255,255,0.000) 1138px,
            rgba(255,255,255,0) 1163px),
        /* 4. 青い地 */
        linear-gradient(166deg,
            #acb1d7 2.1%, #99a1ce 6.2%, #8690c4 10.4%, #7884be 14.6%,
            #6f7dba 18.8%, #6c7ab8 22.9%, #707eba 27.1%, #7985be 31.2%,
            #818dc2 35.4%, #8994c6 39.6%, #919cca 43.8%, #99a3ce 47.9%,
            #9fa8d1 52.1%, #a1aad2 56.2%, #a6aed4 60.4%, #b3badb 64.6%,
            #c2c8e1 68.8%, #cdd1e6 72.9%, #d4d9ea 77.1%, #dbdfed 81.2%,
            #e3e6f1 85.4%, #ebedf5 89.6%, #f2f4f9 93.8%, #f8f8fc 97.9%),
        /* 5. 左の埋め（幅が980pxを超えたぶん）。絵の左端の色を縦に伸ばす。 */
        linear-gradient(to bottom,
            #c9cbe5 0, #bcbfdf 6px, #adb2d7 12px, #9ca3cf 20px,
            #8d97c8 28px, #828dc3 36px, #7986bf 44px, #7380bb 52px,
            #6f7db9 60px, #6d7bb9 67px, #6b79b7 calc(100% - 9px));
    background-size: auto, 980px 100%, 980px 100%, 980px 100%, auto;
    background-position: left top, right top, right top, right top, left top;
    background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, repeat-x;
}

/* 左右の1pxの枠線 */
.jirei-rwd-page .bg_h1:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, #b5b5bc, #8f96b4);
}

.jirei-rwd-page .bg_h1:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: #747575;
}

/* 見出し文字。元画像は左34px・文字高22px・4文字で幅93px。
   下端の帯8pxを除いた面の中央に置くので、高さを変えても中央のまま。
   縁取りは #283c96 相当の外側グロー。 */
.jirei-rwd-page .h2_text_css {
    position: absolute;
    left: 34px;
    top: calc((100% - 8px) / 2 - 11px);
    margin: 0;
    padding: 0;
    font-size: 24px;
    line-height: 22px;
    letter-spacing: -0.01em;
    font-weight: 500;
    text-align: inherit;
    color: #ffffff;
    background: none;
    border: 0;
    text-shadow:
        0 0 1px rgba(40, 60, 150, 0.55),
        0 0 3px rgba(40, 60, 150, 0.45),
        0 0 5px rgba(40, 60, 150, 0.20);
}

/* 右側の小さい説明文。上からの位置ではなく下端からの位置で固定する。
   こうすると行が増えたときに上へ伸びるので、帯からはみ出さない。
   bottom:20px は、従来の指定（上から44px）で2行になったときの下端の位置。
   現行デザインで2行のときに落ち着く位置に、1行でもそろえる意図。
   帯の青いラインまで11pxの余白が残り、4行までは帯に収まる。

   注意: h1の末尾に <br> があると空行が下に入り、文字が12px上にずれる。
   下固定にする以上 <br> は必ず取ること。本番展開時は75ページが対象。 */
.jirei-rwd-page .bg_h1 .heading-band-description {
    position: absolute;
    top: auto;
    right: 5px;
    bottom: 20px;
    float: none;
    width: 480px;
    max-width: calc(100% - 150px);
    margin: 0;
    padding: 0;
    font-size: 10px;
    line-height: 12px;
    font-weight: normal;
    color: #65719A;
    text-align: right;
}

/* ------------------------------------------------------------
   680px以下は、弧を右端に固定するのをやめて絵ごと横に縮める。
   右固定のままだと600px付近から見出し文字が明るい部分に乗って
   読めなくなるため。円を「幅に対する％の楕円」に置き換える。
   楕円の縦半径は帯の高さ78pxを前提に計算してある。
   **帯の高さを変えたら、この値の再計算が必要。**
   ------------------------------------------------------------ */
@media screen and (max-width: 680px) {
    /* 帯の上下の余白は、ヘッダーの切り替えとそろえた 834px 以下の指定に統合した
       （このファイル前半の「小さいヘッダーのとき」）。 */

    /* 帯の説明文は帯の中に入れず、帯の下へ出す。

       帯の中に置くと、狭い画面では白い側の幅が足りない。実測では
       gaiyou.htm（66文字）が375pxで4.3行・320pxで5.1行、rinen.htm（72文字）は
       375pxで4.7行になり、帯に入る4行を超える。白い側だけに限れば2行が限界。
       隠すのはSEO上も避けたいので、位置を移して常に見える形にする。

       やり方は、帯の絵を要素の上部78pxだけに描き、その下を説明文の場所にする。
       `background-size: 100% 78px` にすると、グラデーションの % 指定は
       タイル（78px）基準で計算されるので、下端の帯もそのまま正しく出る。
       HTMLは触らないので、142ページへ展開するときもCSSだけで済む。 */
    .jirei-rwd-page .bg_h1 {
        height: auto;
        padding-top: 78px;
        /* 下端の青い面をそのまま広げて、説明文の置き場にする。
           元の #7a80a9 に白文字だとコントラストが3.8:1で読みやすさの基準
           （4.5:1）に届かないため、少し濃い #626a94 にする（5.2:1）。
           弧の絵のタイル内にある7pxの帯も同じ色にして継ぎ目を消す。 */
        background-color: #626a94;
        background-image:
            /* 1. 最下段の1px。要素の一番下に置く。
                  元の #747575 は濃くした青（#626a94）とほぼ同じ明るさで
                  線が消えてしまうため、スマホでは #454b6b に濃くする。 */
            linear-gradient(to top, #454b6b 0 1px, rgba(0, 0, 0, 0) 1px),
            /* 2. 帯の中の線。タイル（78px）の下端に7pxの面 */
            linear-gradient(to bottom,
                #b4b6bf 0 1px,
                rgba(0, 0, 0, 0) 1px calc(100% - 9px),
                #e0e2f2 calc(100% - 9px) calc(100% - 8px),
                #626a94 calc(100% - 8px)),
            /* 3. 1本目の弧 */
            radial-gradient(ellipse 145.68% 1830.4% at 91.04% 1834.4%,
                rgba(255,255,255,0.500) 95.097%, rgba(255,255,255,0.455) 96.848%, rgba(255,255,255,0.475) 97.899%,
                rgba(255,255,255,0.482) 98.599%, rgba(255,255,255,0.478) 99.019%, rgba(255,255,255,0.434) 99.300%,
                rgba(255,255,255,0.370) 99.510%, rgba(255,255,255,0.368) 99.650%, rgba(255,255,255,0.385) 99.790%,
                rgba(255,255,255,0.290) 99.930%, rgba(255,255,255,0.068) 100.000%, rgba(255,255,255,0.000) 100.070%,
                rgba(255,255,255,0.052) 100.140%, rgba(255,255,255,0.122) 100.210%, rgba(255,255,255,0.108) 100.280%,
                rgba(255,255,255,0.076) 100.420%, rgba(255,255,255,0.065) 100.630%, rgba(255,255,255,0.043) 100.981%,
                rgba(255,255,255,0.021) 101.401%, rgba(255,255,255,0.005) 102.101%, rgba(255,255,255,0.001) 103.152%,
                rgba(255,255,255,0.000) 104.903%),
            /* 4. 2本目の弧 */
            radial-gradient(ellipse 111.53% 1401.3% at 91.18% 1405.6%,
                rgba(255,255,255,0.121) 93.596%, rgba(255,255,255,0.186) 95.883%, rgba(255,255,255,0.171) 97.255%,
                rgba(255,255,255,0.172) 98.170%, rgba(255,255,255,0.194) 98.719%, rgba(255,255,255,0.234) 99.085%,
                rgba(255,255,255,0.291) 99.360%, rgba(255,255,255,0.310) 99.543%, rgba(255,255,255,0.199) 99.726%,
                rgba(255,255,255,0.161) 99.909%, rgba(255,255,255,0.192) 100.000%, rgba(255,255,255,0.132) 100.091%,
                rgba(255,255,255,0.000) 100.183%, rgba(255,255,255,0.025) 100.274%, rgba(255,255,255,0.045) 100.366%,
                rgba(255,255,255,0.026) 100.549%, rgba(255,255,255,0.039) 100.823%, rgba(255,255,255,0.029) 101.281%,
                rgba(255,255,255,0.002) 101.830%, rgba(255,255,255,0.000) 102.745%, rgba(255,255,255,0.000) 104.117%,
                rgba(255,255,255,0.000) 106.404%),
            /* 5. 青地 */
            linear-gradient(to right,
                #818cc2 0.0%, #707ebb 8.3%, #6e7cb9 16.7%, #7885be 25.0%,
                #8590c4 33.3%, #919cca 41.7%, #9ca6d0 50.0%, #a1aad2 58.3%,
                #adb5d8 66.7%, #c3c9e1 75.0%, #d1d6e8 83.3%, #dce0ee 91.7%,
                #e8ebf4 100.0%);
        background-size: auto, 100% 78px, 100% 78px, 100% 78px, 100% 78px;
        background-position: left top;
        background-repeat: no-repeat;
    }

    /* 左右の1px枠線は帯の高さぶんだけに留める */
    .jirei-rwd-page .bg_h1:before,
    .jirei-rwd-page .bg_h1:after {
        height: 78px;
        bottom: auto;
    }

    /* 見出し文字の位置は帯（78px）を基準に固定する。
       要素が縦に伸びるので % 指定のままだとずれる。 */
    .jirei-rwd-page .h2_text_css {
        top: 24px;
        left: 24px;
    }

    /* 説明文は、広げた青い面の中に白で置く。帯の一部として読ませる。
       何行になっても面が下へ伸びるだけなので、長い見出しのページでも
       破綻しない（gaiyou.htm 66文字、rinen.htm 72文字でも可）。 */
    .jirei-rwd-page .bg_h1 .heading-band-description {
        position: static;
        float: none;
        width: auto;
        max-width: none;
        margin: 0;
        /* 上は0。文字の上に見えている余白は、帯の下端にある7pxの青い面。
           そこはスマホ用の背景指定（このブロック内）で作っているので、
           触ってもデスクトップには影響しない。ただし元の帯の作りを保つため
           7pxはそのままにし、下の余白（9px）で上下の釣り合いを取っている。 */
        padding: 0 12px 10px;
        font-size: 10px;
        line-height: 1.8;
        font-weight: 500;
        text-align: left;
        color: #ffffff;
    }

    /* カードを1列にする。2列のままだと1枚が約170pxしかなく、
       「RFID導入事／例」のように見出しが割れる。
       1列になって横幅に余裕が出るぶん、内側の余白は28→20pxに詰める。 */
    .jirei-rwd-page .flex_menu_sqea {
        gap: 16px;
    }

    .jirei-rwd-page div.menu_sqea,
    .jirei-rwd-page div.menu_sqea:nth-child(odd) {
        width: 100%;
        padding: 20px;
    }

    .jirei-rwd-page .foot {
        margin-top: 28px;
    }
}

/* スマホの全カテゴリ共通導線。主メニューより控えめに、通常のスクロール内に置く。 */
.case-mobile-support { display: none; }
@media screen and (max-width: 834px), (max-height: 500px) {
    body.jirei-rwd-page #h_nav.css-gnav ul {
        padding-bottom: 20px;
    }
    body.jirei-rwd-page #h_nav.css-gnav .case-mobile-support {
        display: block;
        width: calc(100% - 48px);
        /* 上のメニュー項目と端をそろえる。項目は最大680pxの箱の中で左右24pxずつ
           内側にあるので、680 − 48 ＝ 632px。メニューの最大幅を変えたら、
           ここも同じだけ変えること（560pxのときは512pxだった）。 */
        max-width: 632px;
        margin: 0 auto;
        padding: 20px 12px 28px;
        border-top: 1px solid #d7dae2;
        box-sizing: border-box;
    }
    .case-mobile-support p {
        margin: 0 0 8px;
        color: #747a87;
        font-size: 12px;
        line-height: 1.5;
    }
    body.jirei-rwd-page #h_nav.css-gnav .case-mobile-support a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        color: #414754;
        font-size: 14px;
        line-height: 1.5;
        text-decoration: none;
    }
    .case-mobile-support a:after {
        content: "";
        width: 5px;
        height: 5px;
        margin-left: 12px;
        border-top: 1px solid #8b91a0;
        border-right: 1px solid #8b91a0;
        transform: rotate(45deg);
    }
    .case-mobile-support a:focus-visible {
        outline: 2px solid #6078c2;
        outline-offset: 2px;
    }
}

@media screen and (max-width: 834px), (max-height: 500px) {
    .case-mobile-related a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}

/* PC: ロゴ段とパンくずは流し、既存のナビ1段だけを残す。 */
@media screen and (min-width: 835px) and (min-height: 501px) {
    body.jirei-rwd-page #header {
        position: relative;
        top: 0;
    }

    .case-desktop-nav-rail.is-pinned {
        position: fixed;
        z-index: 1001;
        top: 0;
        right: 0;
        left: 0;
        background: linear-gradient(to bottom, #fcfcfc, #efefef);
        box-shadow: 0 1px 0 #c7cad2, 0 4px 10px rgba(33, 42, 68, 0.18);
    }

    body.jirei-rwd-page .case-desktop-nav-rail.is-pinned #h_nav {
        width: 980px;
        margin: 0 auto;
    }

    .case-mega-menu {
        position: fixed;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media screen and (min-width: 835px) and (max-width: 1100px) and (min-height: 501px) {
    body.jirei-rwd-page .case-desktop-nav-rail.is-pinned #h_nav {
        width: calc(100% - 32px);
    }
}

/* 2026-09-30 category-label / article-list split prototype */
.case-mega-category-row {
    position: relative;
    display: flex;
    min-height: 45px;
    border-bottom: 1px solid #dde0e7;
    box-sizing: border-box;
}

.case-mega-category-row > a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding: 8px 5px 8px 12px;
    color: #414754;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    text-decoration: none;
}

.case-mega-category-row > button {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}

.case-mega-category-row > button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 11px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid #8b91a0;
    border-bottom: 2px solid #8b91a0;
    transform: rotate(45deg);
}

.case-mega-category-row:hover,
.case-mega-category-row.is-active {
    background: #e9ecf5;
}

.case-mega-category-row:hover > a,
.case-mega-category-row.is-active > a {
    color: #293b80;
}

.case-mega-category-row.is-active:before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    background: #6078c2;
}

.case-mega-category-row > a:focus,
.case-mega-category-row > button:focus {
    outline: 2px solid #6078c2;
    outline-offset: -2px;
}

/* Shared heading appearance, independent of the semantic heading level.
   The page H1 contains the main page name; the .h3 caption stays outside. */
body.content-list-page .heading-group {
    position: static;
    top: auto;
    float: none;
    width: auto;
    margin: 0;
    line-height: inherit;
    text-align: inherit;
    border-width: 1px 0 0;
    border-style: solid;
    padding: 0;
    font-size: 22px;
    font-weight: 500;
    color: #4264D7;
    background-repeat: repeat-x;
    background-image: url('common_img/h3_bg.gif');
    background-position: left bottom;
    height: auto;
    min-height: 48px;
    vertical-align: baseline;
    font-family: Arial, Helvetica, sans-serif;
}

body.content-list-page .heading-title {
    position: static;
    top: auto;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
}

body.content-list-page .heading-group > .heading-title {
    display: inline;
}

body.content-list-page .btspace_h4 > .heading-title {
    padding-bottom: 4px;
    border-style: solid;
    border-width: 0 0 1px;
    border-color: #758DDF;
    font-size: 16px;
    font-weight: bold;
    color: #3C4F91;
}

/* Content-summary component prototype: desktop copy + metadata columns */
/* Shared list surfaces; only layout and spacing change at the breakpoint. */
body.content-list-page .main_cont3 {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 16px 0 32px;
    margin-bottom: 24px;
}

body.content-list-page .main_cont3 > .dl1 {
    padding: 10px;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
}

body.content-list-page .main_cont3 > .dl1 dt,
body.content-list-page .main_cont3 > .dl1 dd {
    padding: 4px 8px;
}

body.content-list-page .main_cont3 > .dl1 dt:empty {
    padding-top: 0;
    padding-bottom: 0;
}

body.content-list-page .main_cont3 > .dl1 dd > br:last-child {
    display: none;
}

/* Shared supplementary images: logos, covers and list thumbnails. */
body.content-list-page .main_cont3 > .dl1 img {
    width: auto;
    height: auto;
    max-width: min(100%, 240px);
    max-height: 120px;
}

body.content-list-page .case-item-title {
    color: #3c4f91;
}

body.content-list-page .case-summary-copy > p:last-of-type {
    margin-bottom: 0;
}

body.content-list-page .case-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
    margin-top: 8px;
}

body.content-list-page #main a.case-read-link {
    display: inline-block;
    padding: 10px 0 10px 12px;
    color: #3c4f91;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
}

body.content-list-page .case-read-link span {
    margin-left: 6px;
    color: inherit;
}

body.content-list-page #main a.case-read-link:hover,
body.content-list-page #main a.case-read-link:focus {
    color: #F07500;
    text-decoration: underline;
}

body.content-list-page .case-item-tags .h4_kino {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 6px;
    border: 1px solid #d8dce5;
    border-radius: 4px;
    box-sizing: border-box;
    background: #eef0f4;
    color: #596273;
    font-size: 13px;
    line-height: 1.4;
}

body.content-list-page #main .main_cont3 > .dl1 dd > a {
    text-decoration: none;
}

body.content-list-page #main .main_cont3 > .dl1 dd > a:hover,
body.content-list-page #main .main_cont3 > .dl1 dd > a:focus {
    color: #F07500;
    text-decoration: underline;
}

@media screen and (min-width: 835px) and (min-height: 501px) {
    body.content-list-page .btspace_h4 > .heading-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 16px;
    }

    body.content-list-page .case-item-tags {
        margin-left: auto;
        text-align: right;
    }

    body.content-list-page .main_cont3 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 34%);
        column-gap: 30px;
        width: auto;
        margin: 0 0 24px;
        box-sizing: border-box;
    }

    body.content-list-page .main_cont3 > .case-summary-copy {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
    }

    body.content-list-page .main_cont3 > .dl1 {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        width: auto;
        margin: 0;
    }

    body.content-list-page .main_cont3 > .dl1:nth-of-type(2) {
        grid-row: 2;
        margin-top: 12px;
    }

    body.content-list-page .main_cont3 > br {
        display: none;
    }

    body.content-list-page .main_cont3 > .dl1 dt {
        width: 72px;
        box-sizing: border-box;
    }

    body.content-list-page .main_cont3 > .dl1 dd {
        margin-left: 72px;
        border-left: 1px solid #b8bdc8;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 834px), (max-height: 500px) {
    body.content-list-page #snav,
    body.content-list-page #right {
        display: none;
    }

    body.content-list-page #main,
    body.content-list-page .main_cont1,
    body.content-list-page .main_cont2 {
        float: none;
        width: auto;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }

    body.content-list-page .main_cont3 {
        display: block;
        width: auto;
        margin: 0 12px 20px;
        padding: 12px 0 24px;
        box-sizing: border-box;
    }

    body.content-list-page .main_cont3 img {
        max-width: 100%;
        height: auto;
    }

    /* Keep labels left-aligned; center supplementary images when stacked. */
    body.content-list-page .main_cont3 > .dl1 img {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    body.content-list-page .case-summary-copy {
        display: block;
    }

    body.content-list-page .btspace_h4 {
        margin-right: 12px;
        margin-left: 12px;
    }

    body.content-list-page .btspace_h4 > .heading-title {
        line-height: 1.65;
    }

    body.content-list-page .case-item-title,
    body.content-list-page .case-item-tags {
        display: block;
    }

    body.content-list-page .case-item-tags {
        margin-top: 5px;
        line-height: 1.8;
    }

    body.content-list-page .h4_kino {
        display: inline-block;
        white-space: nowrap;
    }

    body.content-list-page .dl1,
    body.content-list-page .dl1 dt,
    body.content-list-page .dl1 dd {
        float: none;
        width: auto;
        box-sizing: border-box;
    }

    body.content-list-page .dl1 {
        margin-top: 14px;
        padding-left: 0;
        border: 0;
        background: transparent;
    }

    body.content-list-page .dl1 dd {
        margin-left: 0;
        border-left: 0;
    }
}