﻿<style>
/* 1. プロフィール全体を囲むコンテナを中央寄せ */
.profile-wrapper {
    max-width: 900px; /* コンテンツの最大幅 */
    margin: 0 auto;   /* 左右の余白を自動にして中央へ */
    padding: 40px 20px;
}

/* 2. 画像とテキストの横並び設定（PC用） */
.owner-item {
    display: flex;
    align-items: center;    /* 上下の中央を揃える */
    justify-content: center; /* 左右の中央を揃える */
    gap: 50px;              /* 画像と文章の間の距離 */
    margin-bottom: 80px;    /* 夫と妻の間の余白 */
}

/* 3. 画像サイズの設定 */
.owner-item figure {
    flex: 0 0 320px; /* 画像の横幅を320pxで固定 */
    margin: 0;
}

.owner-item figure img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 角を少し丸める（お好みで） */
}

/* 4. テキスト部分の設定 */
.owner-item .text {
    flex: 1;
    text-align: left;
}

/* 5. スマホ表示用のレスポンシブ設定 */
@media screen and (max-width: 800px) {
    .owner-item {
        flex-direction: column; /* 縦並びに変更 */
        text-align: center;
        gap: 20px;
    }
    .owner-item .text {
        text-align: center;
    }
    .owner-item figure {
        flex: 0 0 auto;
        width: 100%;
        max-width: 300px;
    }
}
</style>