/* ============================================================
   style_casestudy.css
   導入事例ページ共通スタイル（claude移行分）
   ============================================================ */

/* ----------------------------------------------------------
   バナー画像エリアに小サイズの人物写真を配置する場合の設定
   使用: cs-banner__image に追加クラスとして指定
   ---------------------------------------------------------- */
.cs-banner__image--photo {
    max-width: 380px;
    margin: 0 auto;
    display: block;
}

/* 実寸500px前後の人物写真用（380px超の場合に使用） */
.cs-banner__image--photo-lg {
    max-width: 500px;
}

/* バナー画像列をautoにしてテキスト幅を最大化（画像自然幅に合わせる） */
@media only screen and (min-width: 768px) {
    .cs-banner__inner--img-fit {
        grid-template-columns: 1fr auto;
    }
}

/* 記事内小画像：PCは自然サイズで右寄せ、スマホは中央表示 */
@media only screen and (min-width: 768px) {
    .cs-section__row--img-auto figure {
        width: auto;
        flex: 0 0 auto;
        align-self: flex-start;
    }
    .cs-section__row--img-auto figure img {
        display: block;
        width: auto;
    }
}
@media only screen and (max-width: 767px) {
    .cs-section__row--img-auto figure {
        text-align: center;
    }
    .cs-section__row--img-auto figure img {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    /* スマホ表示時は人物写真を親要素幅に合わせて縮小表示 */
    .cs-banner__image--photo {
        width: 100%;
    }

    .cs-banner__image--photo img {
        width: 100%;
        height: auto;
        max-height: 45vh;
        object-fit: contain;
    }
}

/* ----------------------------------------------------------
   記事内画像：スマホ表示時に横幅100%・高さautoで表示
   使用: picture要素に追加クラスとして指定
   ---------------------------------------------------------- */
.cs-photo-full-sp img {
    max-width: 100%;
}
@media only screen and (max-width: 767px) {
    .cs-photo-full-sp img {
        max-width: 100%;
        height: auto;
    }
}