/* freepage.css（あなたのサーバー上） */

/* 見出し */
.f_heading {
    padding-block-end: 0.5rem;
    border-block-end: min(1px, 0.2667vmin) solid;
    color: var(--color-accent-1);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* 段落をFlexコンテナ化（画像＋本文を横並び） */
.f_content {
    display: flex;
    align-items: flex-start; /* 上揃え */
    gap: 15px; /* 画像と本文の間隔 */
    margin-block: 1em;
}

/* 画像（PCでは右側に並べる） */
.f_content > img {
    width: 200px;  /* 必要に応じて変更 */
    height: auto;
    flex: 0 0 auto;
    order: 2;      /* 画像を右、本文を左に配置 */
    display: block;
}

/* 本文は残り幅いっぱいに広げる */
.f_content > .text {
    flex: 1 1 auto;
    min-width: 0; /* 長文時のオーバーフロー防止 */
}

/* （任意）画像の一般的なリセット：小さい画面でもはみ出さない */
.f_content img {
    max-width: 100%;
    height: auto;
}

/* スマホ：縦並び＆画像を中央寄せ */
@media (max-width: 600px) {
    .f_content {
        flex-direction: column;
        align-items: center; /* 子要素を中央寄せ */
        text-align: left;    /* 本文は左寄せのまま */
    }
    .f_content > img {
        order: 0;            /* 並び順を標準に戻す */
        width: 100%;
        max-width: 320px;    /* 任意の上限 */
        margin: 0 auto;
    }
    .f_content > .text {
        width: 100%;
    }
}