スマホ向け CSS です。
基本的なものなので、必要に応じてカスタマイズして使用する。

<style>
/* フォントのスタイル */
body {
    font-family: Arial, sans-serif; /* フォントファミリー */
    font-size: 16px; /* フォントサイズ */
}

/* pタグ（段落）のスタイル */
p {
    font-size: 16px; /* フォントサイズ */
    line-height: 1.6; /* 行間 */
    color: #333; /* 文字色 */
    margin-bottom: 20px; /* 下マージン */
}

/* aタグ（リンク）のスタイル */
a {
    color: #0000EE; /* リンクの色 */
    text-decoration: none; /* 下線なし */
}

a:hover {
    color: #551A8B; /* マウスオーバー時の色 */
}

/* imgタグ（画像）のスタイル */
img {
    max-width: 100%; /* 画像の最大幅を親要素の100%に */
    height: auto; /* 高さは自動 */
}

.img {
  width: 80px;
}

/* input type="text" タグのスタイル */
input[type="text"] {
    width: 80%; /* 画面の80%の幅 */
    padding: 12px 20px; /* 内側の余白 */
    margin: 8px 0; /* 外側の余白 */
    box-sizing: border-box; /* ボックスのサイズ設定 */
    border: 2px solid #ccc; /* ボーダーのスタイル */
    border-radius: 4px; /* ボーダーの角の丸み */
}
/* checkboxとradioのスタイル */
input[type="checkbox"], input[type="radio"] {
    width: 20px; /* 幅 */
    height: 20px; /* 高さ */
}

/* selectタグのスタイル */
select {
    width: 100%; /* 幅 */
    padding: 16px 20px; /* 内側の余白 */
    border: none; /* ボーダーなし */
    border-radius: 4px; /* ボーダーの角の丸み */
    background-color: #f1f1f1; /* 背景色 */
}

/* textareaタグのスタイル */
textarea {
    width: 100%; /* 幅 */
    height: 150px; /* 高さ */
    padding: 12px 20px; /* 内側の余白 */
    box-sizing: border-box; /* ボックスのサイズ設定 */
    border: 2px solid #ccc; /* ボーダーのスタイル */
    border-radius: 4px; /* ボーダーの角の丸み */
    resize: none; /* リサイズ無効化 */
}

/* buttonタグのスタイル */
button {
    width: 80%; /* 画面の80%の幅 */
    background-color: #4CAF50; /* 背景色 */
    color: white; /* 文字色 */
    padding: 14px 20px; /* 内側の余白 */
    margin: 8px 0; /* 外側の余白 */
    border: none; /* ボーダーなし */
    border-radius: 4px; /* ボーダーの角の丸み */
    cursor: pointer; /* カーソルをポインターに */
}

/* buttonをマウスオーバーしたときのスタイル */
button:hover {
    background-color: #45a049; /* 背景色を少し暗く */
}
</style>