/* 基本設定 */
body {
    background-color: #ffffff;
    color: #000000;
    margin: 0;
    padding: 20px;
    font-family: serif; /* 古い雰囲気を出すためにセリフ体 */
}

/* リンク色 */
a:link { color: #0000ff; }
a:visited { color: #800080; }

/* 見出し */
#top-title { text-align: center; }

/* 区切り線 */
.separator-thick { height: 3px; border: none; background-color: gray; }
.separator-thin { height: 1px; border: none; background-color: gray; }

/* レイアウト：PC（横並び） */
#main-content { width: 100%; margin-top: 10px; }

#image-area {
    float: left;
    width: 320px;
    padding: 10px;
    text-align: center;
}

#text-area {
    float: left;
    padding: 10px;
    width: calc(100% - 360px); /* 全体から画像エリア分を引く */
}

.main-img { border: 2px solid #000000; max-width: 100%; height: auto; }
.caption { font-size: small; }
.clear { clear: both; }
address { text-align: center; font-style: normal; margin-top: 20px; }

/* --- レスポンシブ対応（スマホ・タブレット用） --- */
@media screen and (max-width: 768px) {
    #image-area, #text-area {
        float: none;   /* 横並びを解除 */
        width: 100%;   /* 幅をいっぱいに広げる */
        padding: 0;
    }
    #image-area { margin-bottom: 20px; }
    #text-area { width: 100%; }
}