/* ==============================
General
============================== */
.inner{
    /* margin: 0 10%; */
    margin: auto;
    width: 1000px;
}
.header1{
    text-align: center;
    line-height: 1.5;
}
.micro{
    display: block;
    font-size: 2rem;
}
.image{
    width: 100%;
    height: auto;
}
.header2{}
.header3{
    font-size: 2rem;
    font-weight: 700;
}
.header2 .micro{
    font-size: 1.2rem;
}
.header4{
    font-size: 1.2rem;
    font-weight: 700;
}
.paragraph{}
.flexArea{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
@media screen and (max-width:900px) {
    .flexArea{
        display: block;
    }
    .inner{
        width: 100%;
    }
    .header1{
        font-size: 1.5rem;
    }
    .header1 .micro{
        font-size: 1.2rem;
    }
    .sp{
        display: block;
    }
    .pc{
        display: none;
    }
    .splide__pagination{
        display: flex;
        top: auto;
        bottom: 2%;
        width: 100%;
    }
    .splide__pagination li{
        margin: 0 10px;
    }
    .splide__pagination__page{
        background: #ccc;
        width: 10px;
        height: 10px;
    }
    .splide__pagination__page.is-active{
        background: var(--key-color-1);
    }
    .splide-03 img {
        width: 100%;
        height: auto;
    }

    .splide__slide {
        width: 100%;
    }
}
@media screen and (max-width:430px) {}
/* ==============================
Footer
============================== */
.site-footer {
    height: auto;
}
footer .footerMedia{
    margin-top: 40px;
}
footer .pmark{
    width: 75px;
    height: 100%;
}
footer .pmarkList{
    margin-left: auto;
    margin-right: 0;
}
.footer-content-inner {
    align-items: end;
}
/* ==============================
Service
============================== */
#service .header2 .micro{
    margin-top: 0;
    color: #ffffff;
}
#service .mainVisual{
    position: relative;
    text-align: center;
    background-image: url("https://hr-team.co.jp/wp-content/themes/reastage/img/service/serviceBack01.jpg");
    background-size: cover;
    padding: 20em 0;
    color: #ffffff;
}
#service .mainVisual:before{
    content: ""; /* 必須。内容がないと表示されません */
    position: absolute; /* 親要素に対して絶対位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 69, 131, 0.5); /* 黒色に半透明度を指定 */
    z-index: 1; /* 要素の上に来るように */
}
#service .mainVisual > *{
    position: relative;
    z-index: 2;
}
#service .serviceArea{
    margin-bottom: 10em;
}
#service .serviceArea .imgArea{
    position: relative;
    text-align: center;
    background-size: cover;
    background-position: center;
    padding: 20em 0;
    color: #ffffff;
    width: 50%;
    transition: background-size 0.5s ease-in-out;
}
#service .serviceArea .imgArea:hover{
    background-size: 150%;
}
#service .serviceArea .imgArea.personal{
    background-image: url("https://hr-team.co.jp/wp-content/themes/reastage/img/service/serviceBack02.jpg");
}
#service .serviceArea .imgArea.business{
    background-image: url("https://hr-team.co.jp/wp-content/themes/reastage/img/service/serviceBack03.jpg");
}
#service .serviceArea .imgArea:before{
    content: ""; /* 必須。内容がないと表示されません */
    position: absolute; /* 親要素に対して絶対位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 69, 131, 0.5); /* 黒色に半透明度を指定 */
    z-index: 1; /* 要素の上に来るように */
}
#service .serviceArea .imgArea > *{
    position: relative;
    z-index: 2;
}
@media screen and (max-width:900px) {
    #service .mainVisual {
        padding: 5em 0;
    }
    #service .serviceArea{
        margin-bottom: 5em;
    }
    #service .serviceArea .imgArea{
        width: 100%;
        display: block;
        padding: 3em 0;
    }
    #service .mainVisual p{
        width: 90%;
        margin: 0 auto;
        font-size: .8rem;
    }
}
@media screen and (max-width:430px) {}
/* ==============================
Personal
============================== */
#personal .mainVisual{
    position: relative;
    text-align: center;
    background-image: url("https://hr-team.co.jp/wp-content/themes/reastage/img/service/serviceBack02.jpg");
    background-size: cover;
    padding: 20em 0;
    color: #ffffff;
}
#personal .mainVisual:before{
    content: ""; /* 必須。内容がないと表示されません */
    position: absolute; /* 親要素に対して絶対位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 69, 131, 0.5); /* 黒色に半透明度を指定 */
    z-index: 1; /* 要素の上に来るように */
}
#personal .mainVisual > *{
    position: relative;
    z-index: 2;
}
#personal .serviceArea .inner{
    padding: 10em 0;
}
#personal .serviceDetail{
    margin-bottom: 5em;
}
#personal .serviceDetail:last-child{
    margin-bottom: 0;
}
#personal .flexArea{
    align-items: center;
}
#personal .imgArea{
    width: 30%;
    border: 3px solid #004280;
}
#personal .descriptionArea{
    width: 65%;
    position: relative;
}
#personal .descriptionArea .paragraph{
    margin-top: 1em;
}
#personal .descriptionArea .icon{
    position: absolute;
    top: 0;
    right: 0;
    padding: .5em 1em;
    background: #aaaaaa;
    color: #ffffff;
}
#personal .descriptionArea .icon.newGrade{
    background: #034583;
}
#personal .descriptionArea .icon.jobChange{
    background: #fc0047;
}
#personal .descriptionArea .icon.proShare{
    background: #00c684;
}
@media screen and (max-width:900px) {
    #personal .header2{
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 700;
    }
    #personal .serviceLink{
        font-size: .7rem;
    }
    #personal .descriptionArea .paragraph{
        font-size: .8rem;
    }
    #personal .mainVisual {
        padding: 5em 0;
    }
    #personal .serviceArea .inner{
        width: 90%;
        margin: 0 auto;
        padding: 5em 0;
    }
    #personal .imgArea,
    #personal .descriptionArea{
        width: 100%;
    }
    #personal .imgArea{
        margin-bottom: 1em;
        border: 1px solid #004280;
    }
    #personal .descriptionArea .icon{
        font-size: .8rem;
    }
}
@media screen and (max-width:430px) {}
/* ==============================
Business
============================== */
#business .mainVisual{
    position: relative;
    text-align: center;
    background-image: url("https://hr-team.co.jp/wp-content/themes/reastage/img/service/serviceBack03.jpg");
    background-size: cover;
    padding: 20em 0;
    color: #ffffff;
}
#business .mainVisual:before{
    content: ""; /* 必須。内容がないと表示されません */
    position: absolute; /* 親要素に対して絶対位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 69, 131, 0.5); /* 黒色に半透明度を指定 */
    z-index: 1; /* 要素の上に来るように */
}
#business .mainVisual > *{
    position: relative;
    z-index: 2;
}
#business #overView{
    padding: 10em 0;
}
#business .detailArea{
    background: #EFEFEF;
    padding: 10em 0;
}
#business .detailArea .serviceDetail{
    background: #ffffff;
    margin-bottom: 5em;
}
#business .detailArea .serviceDetail .textArea{
    background: #034583;
    color: #ffffff;
    width: 60%;
    padding: 2em;
}
#business .detailArea .serviceDetail .imgArea{
    width: 40%;
}
#business .detailArea .serviceDetail .descriptionArea{
    padding: 2em;
}
#business .detailArea .serviceDetail:last-child{
    margin-bottom: 0;
}
@media screen and (max-width:900px) {
    #business .inner {
        width: 90%;
        margin: 0 auto;
    }
    #business .mainVisual {
        padding: 5em 0;
    }
    #business #overView{
        padding: 5em 0;
    }
    #business .detailArea{
        padding: 5em 0;
    }
    #business .detailArea .serviceDetail .flexArea{
        display: flex;
        flex-wrap: wrap-reverse;
    }
    #business .detailArea .serviceDetail .textArea{
        width: 100%;
        padding: 2em 5%;
    }
    #business .detailArea .serviceDetail .imgArea{
        width: 100%;
    }
    #business .detailArea .serviceDetail .descriptionArea{
        padding: 2em 5%;
    }
    #business .header3{
        font-size: 1.2rem;
    }
    #business .header4{
        font-size: 1rem;
        color: #034583;
        margin-bottom: .5em;
    }
    #business .header4 .underLine{
        border-bottom: 1px solid #034583;
    }
    #business .paragraph{
        font-size: .8rem;
    }
}
@media screen and (max-width:430px) {}

/* ==============================
導入事例（case study） #case / #case-single
既存の .inner / .header1 / .header2 / .micro / .paragraph / .flexArea を流用。
配色は他ページと同じ #0057AA / #034583 系。
============================== */
#case .mainVisual,
#case-single .mainVisual{
    position: relative;
    text-align: center;
    background: #0057AA;
    color: #ffffff;
    padding: 6em 0 4em;
}
#case .mainVisual > *,
#case-single .mainVisual > *{
    position: relative;
    z-index: 2;
}
#case .mainVisual .header1,
#case-single .mainVisual .header1{
    color: #ffffff;
    font-size: 3.5rem;
}
#case .mainVisual .micro,
#case-single .mainVisual .micro{
    font-size: 1.4rem;
    margin-top: .5em;
}
#case .mainVisual .copy{
    max-width: 720px;
    margin: 1.2em auto 0;
    padding: 0 1em;
    line-height: 1.8;
}

/* ==============================
   事例アーカイブ（ブログ記事一覧型: 本文 + サイドバー）
   ============================== */

/* 一覧も詳細と同じ 1216px 幅に揃える（サイト共通 .inner の 1000px を #case 内だけ上書き）。 */
#case .inner{
    width: auto;
    max-width: 1216px;
}

/* 2カラム。本文は可変、サイドバーは固定幅。 */
.caseArchive{
    display: flex;
    align-items: flex-start;
    gap: 56px;
    padding: 3em 0 6em;
}
.caseArchive-main{
    flex: 1;
    min-width: 0;
}
.caseArchive-side{
    width: 260px;
    flex-shrink: 0;
}

/* 一覧のカードは横並び1行。
   .caseArchive-list 配下に限定し、関連事例（.caseList-grid の3列）には影響させない。 */
.caseArchive-list{
    list-style: none;
    margin: 0;
    padding: 0;
}
.caseArchive-list .caseCard{
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
}
.caseArchive-list .caseCard:first-child{
    border-top: 1px solid #e0e0e0;
}
.caseArchive-list .caseCard-link{
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 24px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: opacity .2s;
}
.caseArchive-list .caseCard-link:hover{
    box-shadow: none;
    transform: none;
    opacity: .7;
}
.caseArchive-list .caseCard-img{
    width: 240px;
    flex-shrink: 0;
    border-radius: 6px;
}
.caseArchive-list .caseCard-body{
    flex: 1;
    min-width: 0;
    padding: 0;
}

/* サイドバー（絞り込み + 最新事例） */
.caseSide-block{
    margin-bottom: 2.5em;
}
.caseSide-heading{
    margin-bottom: .8em;
    padding-bottom: .5em;
    border-bottom: 2px solid #0057AA;
    font-size: 1rem;
    font-weight: 700;
    color: #034583;
}
.caseSide-list{
    list-style: none;
    margin: 0;
    padding: 0;
}
.caseSide-item a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: .55em 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: .88rem;
    color: #1F1F1F;
    text-decoration: none;
    transition: color .2s;
}
.caseSide-item a:hover,
.caseSide-item.is-current a{
    color: #0057AA;
    font-weight: 700;
}
.caseSide-count{
    flex-shrink: 0;
    min-width: 1.8em;
    padding: .1em .5em;
    background: #f1f4f8;
    border-radius: 999px;
    font-size: .72rem;
    color: #707070;
    text-align: center;
}
.caseSide-reset{
    margin-bottom: 2.5em;
}
.caseSide-reset a{
    font-size: .85rem;
    color: #1F1F1F;
    text-decoration: underline;
}

/* サイドバーの最新事例 */
.caseSide-recent{
    list-style: none;
    margin: 0;
    padding: 0;
}
.caseSide-recentItem a{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: .8em 0;
    border-bottom: 1px solid #e0e0e0;
    color: #1F1F1F;
    text-decoration: none;
    transition: opacity .2s;
}
.caseSide-recentItem a:hover{
    opacity: .7;
}
.caseSide-recentThumb{
    width: 64px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #f1f1f1;
}
.caseSide-recentThumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.caseSide-recentBody{
    flex: 1;
    min-width: 0;
}
.caseSide-recentDate{
    display: block;
    margin-bottom: .2em;
    font-size: .72rem;
    color: #707070;
}
.caseSide-recentTitle{
    display: block;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.5;
}

/* カード一覧 */
.caseList{
    padding: 1em 0 6em;
}
/* 3列・左寄せ折り返し（一覧・関連事例 共通）。
   .flexArea 継承の justify-content:space-between を打ち消し、gap で間隔を統一。
   カード幅は「(全幅 − 2つ分のgap) ÷ 3」で厳密に3列にする。
   このルールは css/style.php 内で .flexArea 定義より後にあるため、単独クラスでも上書きが効く。 */
.caseList-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px 3%;
}
.caseCard{
    width: calc((100% - 6%) / 3);
}
.caseCard-link{
    display: block;
    height: 100%;
    color: #1F1F1F;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    transition: box-shadow .2s, transform .2s;
}
.caseCard-link:hover{
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    transform: translateY(-4px);
}
.caseCard-img{
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f1f1;
}
.caseCard-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.caseCard-body{
    padding: 20px;
}
/* 日付 + 業種タグの1行（グリッド／一覧 共通） */
.caseCard-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.caseCard-date{
    font-size: .78rem;
    color: #707070;
}
.caseCard-tag{
    display: inline-block;
    padding: .25em .8em;
    background: #034583;
    border-radius: 4px;
    font-size: .75rem;
    color: #ffffff;
}
.caseCard-client{
    margin-bottom: 6px;
    font-size: .85rem;
    color: #707070;
}
.caseCard-title{
    margin-bottom: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
}
.caseCard-excerpt{
    font-size: .9rem;
    line-height: 1.7;
    color: #707070;
}
.caseList-empty{
    padding: 4em 0;
    text-align: center;
    color: #707070;
}
.casePagination{
    margin-top: 3em;
}
.casePagination .nav-links{
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.casePagination .page-numbers{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #0057AA;
    border-radius: 4px;
    color: #0057AA;
    text-decoration: none;
}
.casePagination .page-numbers.current,
.casePagination .page-numbers:hover{
    background: #0057AA;
    color: #ffffff;
}

/* 詳細ページ（才流型） */

/* 事例詳細は全セクションの外枠幅を 1216px に統一する。
   内訳: 本文カラム最大900px + gap 56px + サイドバー260px = 1216px。
   中身の合計と一致させることで、本文とサイドバーの間が間延びせず、
   ヒーロー・2カラム・関連事例の左右端（面）も揃う。 */
#case-single .inner{
    width: auto;
    max-width: 1216px;
}
/* .caseInner は上記に統合。互換のため残置（同値）。 */
#case-single .caseInner{
    max-width: 1216px;
}

/* パンくず */
#case-single .caseCrumb{
    padding: 1.5em 0 0;
    font-size: .85rem;
    color: #707070;
}
#case-single .caseCrumb a{
    color: #0057AA;
    text-decoration: none;
}
#case-single .caseCrumb a:hover{
    text-decoration: underline;
}
#case-single .caseCrumb-sep{
    margin: 0 .5em;
    color: #707070;
}
#case-single .caseCrumb-current{
    color: #707070;
}

/* キービジュアル（ブログ記事型: カテゴリ→タイトル→日付→アイキャッチの縦積み）。
   2カラムの本文カラム内に置くため、背景は敷かず余白だけで区切る。 */
#case-single .caseHero{
    padding: 0 0 2.5em;
    margin-bottom: 2.5em;
    border-bottom: 1px solid #e0e0e0;
}
#case-single .caseHero-head{
    margin-bottom: 2em;
}
/* 記事タイトル下の日付・会社名の行 */
#case-single .caseHero-byline{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 1em;
}
#case-single .caseHero-date{
    font-size: .85rem;
    color: #707070;
}
/* ヒーローは本文カラム（820px）の中にあるため、幅指定は不要。 */
#case-single .caseHero-figure{
    margin: 0 0 2em;
}
#case-single .caseHero-cat{
    align-self: flex-start;
    display: inline-block;
    margin-bottom: 1em;
    padding: .3em 1em;
    background: #034583;
    border-radius: 4px;
    font-size: .8rem;
    color: #ffffff;
    text-decoration: none;
}
#case-single .caseHero-logo{
    max-width: 180px;
    margin-bottom: 1em;
}
#case-single .caseHero-logo img{
    width: 100%;
    height: auto;
}
#case-single .caseHero-title{
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: #034583;
}
/* 会社名は日付と同じ byline 行にインラインで並べる */
#case-single .caseHero-client{
    font-size: .9rem;
    font-weight: 700;
    color: #0057AA;
}
#case-single .caseHero-meta{
    margin: 0;
    border-top: 1px solid #dfe6ee;
}
#case-single .caseHero-metaRow{
    display: flex;
    padding: .7em 0;
    border-bottom: 1px solid #dfe6ee;
    font-size: .9rem;
}
#case-single .caseHero-metaRow dt{
    width: 8em;
    color: #707070;
    font-weight: 700;
}
#case-single .caseHero-metaRow dd{
    margin: 0;
    flex: 1;
}
#case-single .caseHero-figure img{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}
#case-single .caseHero-caption{
    margin-top: .8em;
    font-size: .75rem;
    line-height: 1.7;
    color: #707070;
}

/* キービジュアル内のタクソノミータグ（薄背景用の配色） */
#case-single .caseMeta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.5em;
}
#case-single .caseMeta-tag{
    display: inline-block;
    padding: .3em 1em;
    background: #ffffff;
    border: 1px solid #0057AA;
    border-radius: 999px;
    font-size: .78rem;
    color: #0057AA;
    text-decoration: none;
}

/* ==============================
   詳細ページの2カラム（本文 + 追従サイドバー）
   ============================== */

/* 2カラム。外枠はヒーローと同じ 1400px（面を揃えるため）。
   align-items は stretch（既定）のままにする。flex-start にすると
   サイドバー列が中身の高さに縮み、position:sticky が動ける範囲を失って追従しなくなる。 */
#case-single .caseLayout{
    display: flex;
    gap: 56px;
}
/* 本文カラムが余った横幅を吸収する（flex-grow:1）。
   サイドバーとの間隔は gap の 56px で固定され、間延びしない。
   行長が伸びすぎないよう max-width で 900px を上限にする。 */
#case-single .caseLayout-main{
    flex: 1 1 auto;
    max-width: 900px;
    min-width: 0;
}
/* 本文カラム内の .inner は、カラム幅（820px）いっぱいに追従させる。 */
#case-single .caseLayout-main .inner,
#case-single .caseLayout-main .caseInner{
    width: auto;
    max-width: 100%;
    margin: 0;
}
#case-single .caseLayout-side{
    width: 260px;
    flex-shrink: 0;
}
/* スクロール追従。ヘッダー分の余白を上に取る。 */
#case-single .caseSideSticky{
    position: sticky;
    top: 100px;
}

/* サイドバー目次 */
#case-single .caseToc{
    margin-bottom: 2em;
    padding: 1.2em 1.4em;
    background: #f7f9fc;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
}
#case-single .caseToc-heading{
    margin-bottom: .6em;
    padding-bottom: .5em;
    border-bottom: 1px solid #dfe6ee;
    font-size: .9rem;
    font-weight: 700;
    color: #034583;
}
#case-single .caseToc-list{
    margin: 0;
    padding-left: 1.2em;
}
#case-single .caseToc-item{
    padding: .3em 0;
    font-size: .82rem;
    line-height: 1.6;
}
#case-single .caseToc-list a{
    color: #0057AA;
    text-decoration: none;
}
#case-single .caseToc-list a:hover{
    text-decoration: underline;
}
/* 目次から飛んだ時に見出しがヘッダー下に潜らないようにする */
#case-single .caseBlock[id],
#case-single .caseBody h2[id]{
    scroll-margin-top: 100px;
}

/* サイドバーの問い合わせCTA */
#case-single .caseCta{
    padding: 1.4em;
    background: #034583;
    border-radius: 8px;
    text-align: center;
}
#case-single .caseCta-lead{
    margin-bottom: 1em;
    font-size: .8rem;
    line-height: 1.7;
    color: #ffffff;
    text-align: left;
}
#case-single .caseCta-btn{
    display: block;
    padding: .9em 1em;
    background: #ffffff;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    color: #034583;
    text-decoration: none;
    transition: opacity .2s;
}
#case-single .caseCta-btn:hover{
    opacity: .85;
}

/* リード文 + プロジェクト概要テーブル */
#case-single .caseIntro{
    padding: 3.5em 0 0;
}
#case-single .caseIntro-lead{
    margin-bottom: 2em;
    font-size: 1rem;
    line-height: 2;
}
#case-single .caseOverview{
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #e6e6e6;
    font-size: .92rem;
}
#case-single .caseOverview th,
#case-single .caseOverview td{
    padding: 1em;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e6e6e6;
    line-height: 1.8;
}
#case-single .caseOverview th{
    width: 28%;
    background: #f7f9fc;
    color: #034583;
    font-weight: 700;
}

/* 担当コンサルタント */
#case-single .caseConsultant{
    padding: 4em 0;
    background: #f7f9fc;
}
#case-single .caseConsultant-heading{
    margin-bottom: 1.5em;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0057AA;
}
#case-single .caseConsultant-item{
    display: flex;
    gap: 24px;
    margin-bottom: 1.5em;
    padding: 1.5em;
    background: #ffffff;
    border-radius: 8px;
}
#case-single .caseConsultant-item:last-child{
    margin-bottom: 0;
}
#case-single .caseConsultant-photo{
    flex: 0 0 100px;
    width: 100px;
}
#case-single .caseConsultant-photo img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}
#case-single .caseConsultant-role{
    font-size: .82rem;
    color: #707070;
}
#case-single .caseConsultant-name{
    margin: .2em 0 .6em;
    font-size: 1.15rem;
    font-weight: 700;
    color: #034583;
}
#case-single .caseConsultant-profile{
    font-size: .9rem;
    line-height: 1.8;
}

/* 関連事例（カードは .caseCard 系を流用、見出し・余白のみ指定） */
#case-single .caseRelated{
    padding: 4.5em 0;
}
#case-single .caseRelated-heading{
    margin-bottom: 1.2em;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0057AA;
}

/* ===== 事例詳細 全体の統一 ===== */
/* 背景色を薄青 #f7f9fc に統一（ヒーロー・本文・CTA帯を通しで同色にする）。
   個別に背景を持つ .caseHero / .caseSummary / .caseConsultant も同色なので継ぎ目が消える。 */
#case-single{
    background: #f7f9fc;
}
#case-single .caseSummary,
#case-single .caseConsultant{
    background: #f7f9fc;
}
/* CTA(.recruit-*) の幅は他ページと同じ（元のまま）にするため、ここでは上書きしない。 */
/* ヘッダー(ハンバーガー含む)も事例詳細のときだけ薄青にし、ヒーロー・本文と地続きにする。
   共通変数 --base-color は変えず body.single-case スコープ限定で上書き（他ページのヘッダーは白のまま）。 */
body.single-case .site-header{
    background-color: #f7f9fc;
}
#case-single .caseSummary{
    padding: 4em 0;
    background: #f7f9fc;
}
#case-single .caseSummary .flexArea{
    justify-content: center;
    gap: 40px;
}
#case-single .caseSummary-item{
    text-align: center;
    min-width: 180px;
}
#case-single .caseSummary-item .number{
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0057AA;
}
#case-single .caseSummary-item .paragraph{
    margin-top: .4em;
    font-size: .95rem;
}
#case-single .caseBlock{
    padding: 4.5em 0;
    border-bottom: 1px solid #e6e6e6;
}
#case-single .caseBlock .header2{
    margin-bottom: 1em;
    font-size: 2.2rem;
    font-weight: 700;
    color: #0057AA;
}
#case-single .caseBlock .header2 .micro{
    font-size: 1rem;
    color: #707070;
    margin-top: .2em;
}
#case-single .caseBlock .paragraph{
    font-size: 1rem;
    line-height: 2;
}
#case-single .caseBlock .paragraph p{
    margin-bottom: 1.2em;
}
#case-single .caseBack{
    padding: 4em 0;
    text-align: center;
}
#case-single .caseBack .btnArea,
#case .btnArea{
    display: inline-block;
    padding: 1em 3em;
    background: #0057AA;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity .2s;
}
#case-single .caseBack .btnArea:hover,
#case .btnArea:hover{
    opacity: .85;
}

/* 1216px の外枠が画面端に貼り付かないよう、左右に余白を確保する。 */
@media screen and (max-width:1296px){
    #case .inner,
    #case-single .inner{
        margin: 0 40px;
    }
}
@media screen and (max-width:1050px){
    #case .inner,
    #case-single .inner{
        width: auto;
        margin: 0 5%;
    }
    #case-single .caseInner{
        max-width: 100%;
    }
}
@media screen and (max-width:900px){
    #case .mainVisual .header1,
    #case-single .mainVisual .header1{
        font-size: 2.6rem;
    }
    #case-single .caseHero-title{
        font-size: 1.7rem;
    }
    /* アーカイブ: サイドバーを本文の下へ回す */
    .caseArchive{
        display: block;
    }
    .caseArchive-side{
        width: 100%;
        margin-top: 3em;
    }
    /* 詳細: サイドバーを本文の下へ回し、追従を解除する */
    #case-single .caseLayout{
        display: block;
    }
    #case-single .caseLayout-side{
        width: 100%;
        margin-top: 3em;
    }
    #case-single .caseSideSticky{
        position: static;
    }
    #case-single .caseConsultant-item{
        display: block;
    }
    #case-single .caseConsultant-photo{
        margin-bottom: 1em;
    }
    /* カードグリッドは .flexArea の display:block に巻き込まれないよう flex を維持し、
       タブレットでは2列にする（一覧・関連事例 共通）。 */
    .caseList-grid{
        display: flex;
        flex-wrap: wrap;
    }
    .caseCard{
        width: calc((100% - 3%) / 2);
    }
}
@media screen and (max-width:600px){
    /* スマホ: 1列 */
    .caseCard{
        width: 100%;
    }
    /* 一覧の横並び行は、スマホでは画像を上に置いた縦積みにする */
    .caseArchive-list .caseCard-link{
        display: block;
    }
    .caseArchive-list .caseCard-img{
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: 14px;
    }
    #case-single .caseSummary-item .number{
        font-size: 2.4rem;
    }
    #case-single .caseHero-metaRow{
        display: block;
    }
    #case-single .caseHero-metaRow dt{
        width: auto;
    }
    #case-single .caseOverview th{
        width: 34%;
    }
}