EC-CUBE4でトップ画像を横いっぱいに表示する

EC-CUBE4のトップページに表示されるスライド画像を横いっぱいに表示する方法です。
表示に関する設定はスタイルシートで管理されていて、EC-CUBE4では下記ディレクトリ
にある「style.css」ファイルを編集します。

EC-CUBEルート/html/template/default/assets/css/style.css

.ec-layoutRole .ec-layoutRole__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-wrap: nowrap; }

ここの「max-width」を下記に変更します。

max-width: none;

.ec-sliderRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  margin-bottom: 24px; }

ここの「max-width」「padding-left」「padding-right」を下記に変更します。

max-width: none;
padding-left: 0;
padding-right: 0;

この方法は直接「style.css」を編集していますが、管理画面左メニューから
「コンテンツ管理」->「CSS管理」（customize.css）で記述することもできます。