ご質問ありがとうございます。
いくつかのご相談が混在しておりますので、一度現状を確認できるURLをお知らせいただけますでしょうか？追加されたというCSSが反映されない理由は分かるかもしれません。

よろしくお願いいたします。

ありがとうございます。
とても素敵サイトで、トップの写真も素晴らしく良いですね。
まず(1)について、参照されたトピックは1枚の固定画像の場合のコードであったため、スライド状態では反映れないというのが原因です。

スライドの場合はこのようになります。

ul.slides li { background-position: left !important; }

もし画像1つ1つで指定を変えたい場合は

ul.slides li.first { ... }
ul.slides li.second { ... }

とすることで、画像ごとに指定を変えることもできます。

（「background-position」というCSSでは「left」以外にも左右中央など様々な指定が可能です。どんなことが可能なのかは、一般的なCSSの知識の領域となるためCSSの参考書や情報サイトなどをご参照ください。）

現状では写真自体が横長の構図のため、これを縦長で配置するということは難しいかと思いますが、拝見した感想としてはスマホ状態でもむしろ良く見えているようにも感じます。
1枚目は全体が見えないことが、2枚目は上部に大きな余白ができることで被写体、そしてロゴが引き立っているように見えます。
「スマホ用の画像もアップロードしておき、PCかスマホで切り替わるようにする」も、もしHTMLに習熟されており、BASEのカスタマイズも可能という方であれば不可能ではありません。
ただ現状の写真の良さから思うに、現状でもとても良くまとまって見える為、CSSでの位置微調整で対処されればそれが最も良いのではと思います。

客観的な感想も入っていますが、参考にしていただけたらと思います。
どうぞ宜しくお願いいたします

少し修正させてください。「#MainVisual span」は1枚画像用なので取り除き、次のようになります。
ペーストする場所は合っていますので、今のを一旦削除して、次の4行をそのままコピーペーストしてください。

<style type="text/css"> 
ul.slides li.first { background-position: left !important; }
ul.slides li.second { background-position: left !important; }
</style>