【追加CSSのみ】WordPressテーマ『SnowMonkey』をカスタマイズしてお洒落なウェブサイトを作ろう

どうも、たっくん（@wakutakublog）です。

今回はWordPressテーマ『SnowMonkey』をカスタマイズして、お洒落なWEBサイトを作っていきます。

こちらが完成イメージ↓（クリックで拡大表示できます）

『Snow Monkey』はかなり使い勝手のいいWordPressテーマで「少しでも多くの人に広まるといいな…」と思ったので、知識がなくても同じサイトを作れるよう、カスタマイズに使うCSSはコピペ可能にしておきました。

たっくん

ぜひ一緒に作りましょう…！

※ 動画を見ながら進めたい方はこちらの「再生リスト」をご覧ください↓

※ WordPress環境をまだ用意していない方は、『 Local by Flywheel 』でWordPressローカル環境を作って初期設定をしよう を参考に環境構築をしておきましょう。

あわせて読みたい

『 Local by Flywheel 』でWordPressローカル環境を作って初期設定をしようはいどうも、たっくん（@wakutakublog）です。今回は『 Local by Flywheel （ローカル バイ フライホイール）』を使ったWordPressローカル環境の構築と初期設定を解説し…

※ SnowMonkeyをまだインストールしていない方は、【無料お試し可】SnowMonkey のテーマとプラグインを導入しよう を三顧王にWordPressテーマを有効化しておきましょう。

あわせて読みたい

【無料お試し可】SnowMonkey のテーマとプラグインを導入しようブロックエディタ完全対応のWordPressテーマ『Snow Monkey』をインストールする手順を解説しています。また、SnowMonkeyのプラグイン『Snow Monkey Blocks』と『Snow Monkey Editor』についても、どんな機能があるのか紹介しました。『Snow Monkey』は ホームページやウェブサイトを作るのには非常に便利ですので、せひ使ってみてください！

SnowMonkeyカスタマイズ①：ホームページを「固定ページ」に変更しよう

その前に、現段階でのホームページを見てみましょう。

画面左上にある「サイト名」をクリックすると、ホームページを見ることができます。

こちらが何も変更していない時のホームページです↓（最新の投稿が一覧表示される設定になっています）

では、ホームページ設定を変更していきましょう。

まず管理画面の「固定ページ」から新規追加をしてタイトルだけ書き、公開しましょう。

次に、管理画面の「設定」から表示設定 → ホームページの表示を「固定ページ」に変更します。

その下にある「ホームページ」で先ほど追加した固定ページを選択しましょう。

「変更を保存」するのもお忘れなく…！

ではもう一度、ホームページを見てみましょう。

このように、最新の記事が消えているはずです。

たっくん

これでホームページの設定変更ができました！

SnowMonkeyカスタマイズ②：ヘッダーメニューの作成＆フォント変更をしよう

管理画面の「外観」からメニューを開きましょう。

メニュー名を「ヘッダーメニュー」として、メニューを作成します。

メニューには「MISSION・NEWS・WORKS・ABOUT」の４つを置くので、それぞれの固定ページを作成しましょう。（トップページを作った時と同様に）

４つの固定ページが作れたら「メニュー項目を追加」の固定ページから４つを選択し、メニューに追加しましょう。

下にある「メニューの設定」では「グローバルナビゲーション」と「ドロワーナビゲーション」を選択します。

ここまで出来たら「メニューを保存」をクリック。

では、どのようにメニューが追加されているか確認してみましょう。

このように、サイト名の下に４つのメニューが並んでいる感じですね。

次は見本のように、サイト名とメニューが横一列になるように設定していきます。

管理画面の「外観」からカスタマイズ → デザイン → ヘッダーを開きましょう。

ヘッダーレイアウトを「１行」に変更します。

たっくん

これでヘッダーメニューが完成！

最後にフォントを変更しておきましょう。

カスタマイズ → デザイン → 基本デザイン設定 から「基本フォント」を「Noto Serif JP」に変更します。

スタイリッシュな雰囲気のあるフォントになりましたね。

たっくん

では次からメインとなるコンテンツを作っていきましょう…！

SnowMonkeyカスタマイズ③：キービジュアルを作ろう

手順は以下の通り↓

1. セクション（背景画像/動画）で基本デザインを作る
2. 余白やヘッダーメニューを調整する
3. 「左20%は背景色、右80%は背景画像」のレイアウトにする
4. CSSで最後の調整（高さ・字の大きさ・装飾）

たっくん

１つずつ順に解説していきますね…！

セクション（背景画像/動画）で基本デザインを作る

では、ホームページに設定した固定ページの編集画面を開きましょう。

右にある＋マークを押して、Snow Monkey Blocks[セクション] の中から「セクション（背景画像/動画）」を選択します。

「セクション（背景画像/動画）」を挿入したら、タイトルと文章を入力しましょう。

次に、画面右側の メディア → アップロード から画像を設置します。

ではこの時点で一度、ホームページを確認してみましょう。

ここまで手順通りに行えていれば、このように表示されるはずです。

たっくん

ここからは少しずつデザインを整えていきます！

余白やヘッダーメニューを調整する

次に行うのは以下の３点↓

1. 左右の余白をなくす
2. ヘッダーメニューとセクション間の余白をなくす
3. ヘッダーメニューと画像が被るようにする

まずは左右の余白をなくすため、ブロックを「全幅」に変更しましょう。

次に、管理画面の「外観」から カスタマイズ → ホームページ設定 で「ホームページのコンテンツエリアに上下余白を追加する」のチェックを外しましょう。

これでメニューとセクション間の余白がなくなりましたね。

最後に カスタマイズ → デザイン → ヘッダー から「ヘッダー位置」と「PC用ヘッダー位置」をオーバーレイに変更しましょう。

これでメニューが画像と被るようになりました。

左20%は背景色、右80%は背景画像のレイアウトにする

手順は以下の通り↓

1. CSSで画像を横幅80%＆右寄せにする
2. 背景色を青緑にする

ここからは少しずつCSSを追加していくので、その前に準備をしておきましょう。

セクションブロックを選択し、画面右の「高度な設定」から追加CSSクラスに「kv」（キービジュアルの略）を追加します。

これで、CSSを追加するための準備はOKです。

では早速、CSSを追加していきましょう。

管理画面の「外観」から カスタマイズ → 追加CSS を開いて下のCSSをコピペしてください。

.kv .smb-section-with-bgimage__bgimage{
	width: 80%; /*画像の幅を80%に*/
	margin:0 0 0 auto; /*画像を右寄せ*/
}

これで 背景色：背景画像＝２：８になりました。

次に背景色を黒から青緑に変えていきます。

先程のコピペしたコードの下に以下のコードを追加すればOKです↓

.kv{
  background-color: #29b7ae;
}

たっくん

徐々に完成に近づいてきましたね…！

CSSで最後の調整（高さ・字の大きさ・装飾）

まだ見本デザインと異なるのは以下の３点↓

1. 高さが足りない
2. フォントが小さい
3. タイトルの下線がいらない
4. 横幅がすこし広い

先ほど同様に カスタマイズ → 追加CSS に以下のコードをコピペしましょう。

.kv{
	height:100vh; /*高さを画面一杯に*/
}
.kv .smb-section__title{
	font-size:90px; /*タイトルを大きく*/
	line-height:1; /*行間を狭く*/
}
.kv .smb-section__title::after{
	display:none; /*タイトルの下線を消す*/
}
.kv p{
	font-size: 24px; /*テキストを大きく*/
}

では、実際のホームページを確認してみます。

このようになっていればOKです！

ほぼ完成しましたが、少し横幅が広いので狭めていきましょう。

カスタマイズ → デザイン → 基本デザイン設定 から「コンテンツの最大幅」を「1180」に変更します。

ではもう一度、ホームページを確認してみます。

背景画像などはそのまま、中身（メニューやテキスト）の幅だけが狭くなりました。

たっくん

これで「キービジュアルを作ろう」は完成です…！

最後にキービジュアルの作成に使ったCSSをまとめておきます。

/* キービジュアル */
.kv{
	height:100vh; /*高さを画面一杯に*/
}
.kv .smb-section-with-bgimage__bgimage{
	width: 80%; /*画像の幅を80%に*/
	margin:0 0 0 auto; /*画像を右寄せ*/
}
.kv .smb-section__title{
	font-size:90px; /*タイトルを大きく*/
	line-height:1; /*行間を狭く*/
}
.smb-section__title::after{
	display:none; /*タイトルの下線を消す*/
}
.kv p{
	font-size: 24px; /*テキストを大きく*/
}

SnowMonkeyカスタマイズ④：ニュース一覧を作ろう

手順は以下の通り↓

1. 投稿を作成する（10件ほど）
2. カラムで「タイトル」と「最近の記事一覧」を横並びにする
3. CSSでデザインを整える（縦書き・配置など）
4. ピックアップ記事一覧を作る

たっくん

では１つずつ解説していきます…！

投稿を10件ほど作成しよう

管理画面の「投稿」から新規追加して、タイトルだけ入力して公開しておきましょう。

８〜 10件ほど投稿しておきます。

カラムを使って「タイトル」と「記事一覧」を横並びにする

その前に、パーツ構成を理解しておきましょう。（下の画像が図解イメージ↓）

1. 大きいセクションが１つ
2. セクションの中に「２カラム割り」と「ピックアップ記事一覧ブロック」
3. 「２カラム割り」の中に「見出し」と「最近の記事一覧」

では作っていきましょう。

まず「 Snow Monkey Blocks > セクション」を選択します。

タイトルは入力せず、＋マークから「レイアウト要素 > カラム」 を選択しましょう。

カラムを追加すると、５つのパターンが用意されているので「２カラム：1/3, 2/3に分類」を押します。

すると左右１：２のレイアウトが作られるので、左側に「一般ブロック > 見出し」を追加しましょう。

見出しには「NEWS RELEASE」と入れておきます。

次に右側です。ここには「Snow Monkey Blocks[共通ブロック] > 最近の投稿」を入れます。

すると自動で「最近の投稿」が6件追加されるはずです。

初期状態ではレイアウトが「リッチメディア」で投稿数が「６」になっているので、「テキスト」と「５」に変更しておきましょう。

これで基本となる型は完成です。

この時点でのホームページを確認しておきましょう。

こうなっていればOKです。

CSSを書いてく前に、もう少し見本に近づけていきましょう。

左のカラムを選択し、画面右の カラム設定 > パーセント指定幅を「５」にします。

右のカラムは「85」にしましょう。

では、ホームページを確認してみます。

たっくん

少し見本に近づきましたね

CSSでデザインを整える（縦書き・配置など）

ここからCSSを書いていくので、キービジュアル作成時と同じように準備をしておきましょう。

セクション全体を選択し、高度な設定 > 追加CSSクラス に「news」を追加します。

左側のカラムには「section-title-wrap」と入れておきます。

左側のカラムの中の「見出し」には「section-title」を追加。

右側のカラムには「news-wrap」と入れておきましょう。

これで準備はOKです。

ではCSSを追加していきます。

「 外観 > カスタマイズ > 追加CSS 」に下のコードをコピペしましょう。

/*ニュースセクション*/
.news .section-title-wrap .section-title {
/*見出しを縦書きに*/
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
/*見出しのデザインを初期化*/
	background-color: initial;
	border: none;
/*字を大きく*/
	font-size: 28px;
}
.news .news-wrap {
/*右側のカラムを右寄せ*/
	margin: 0 0 0 auto;
}

ホームページを確認してみます。

たっくん

これで見本と同じデザインになりました…！

ピックアップ記事一覧を作る

まずは、ピックアップ記事に設定したい投稿に「特定のカテゴリー」と「アイキャッチ画像」を設定しましょう。

カテゴリーとアイキャッチ画像を３つの記事に設定したら準備OKです。

ではトップページの編集画面に戻り、セクション内の＋マークで「 Snow Monkey Blocks[共通ブロック] > 任意のタクソノミーの投稿 」を選択しましょう。

「任意のタクソノミーの投稿」を追加したら、右側のブロック設定からカテゴリーを選択し、投稿数を設定します。

これでトップページを確認してみます。

たっくん

これで「ニュース一覧を作ろう」は完成です…！

SnowMonkeyカスタマイズ⑤：事業紹介セクションを作ろう

手順は以下の通り↓

1. セクションに背景色をつける
2. パネル（水平方向）を設置する
3. CSSで画像サイズを60％に変更する

たっくん

では１つずつ解説していきます…！

セクションに背景色を付ける

まずは「 Snow Monkey Blocks[セクション] > セクション 」を追加しましょう。

タイトルに「WORKS」と入力し、配置を「全幅」に変更します。

次に背景色を変更していきます。画面右の「 色設定 > 背景色 > カスタムカラー 」に「#d9f5f3」を入れましょう。

最後に右側20％は背景色をつけないように「 ブロック設定 > 背景位置（左/右）」を「-20」に変更します。

たっくん

これで大枠のセクションが完成です！

パネル（水平方向）を設置する

次にセクションの中身を作っていきます。

まずは「 Snow Monkey Blocks[共通ブロック] > パネル 」を追加しましょう。

すると「上に画像・下にテキスト」のパネルが設置されます。

ただ今回は、画像とテキストを左右に並べたいので「項目（水平方向）」に変換しましょう。

水平方向になったら、画像とタイトル・テキストを入れていきます。

もう一つパネルを設置したいので、下の＋マークから追加します。

２つ目のパネルにも画像とタイトル・テキストを入れましょう。

そして今回は１列に１パネルのレイアウトにしたいので「行あたりのカラム数」を「１」に変更します。

そして２つ目のパネルは、画像とテキストの配置を入れ替えたいので「 ブロック設定 > 画像位置 」を「左側」に変更しましょう

タイトルの大きさを変えるため、タイトルを選択し「Snow Monkey Editor コントロール > 文字サイズ 」を「中」に変更しましょう。

テキストは太字にしたいので、テキストを選択した状態で「B」をクリックします。

また、パネルから別ページへ移動できるようにしたい場合は「パネルを選択 → リンク → URLを入力 」の順に設定していきましょう。

たっくん

これでパネルの設置ができました…！

CSSで画像サイズを60％に変更する

初期状態のパネル（水平方向）は、画像とテキストが１：１の比率になっています。

今回は「 画像：テキスト＝６：４」にしたいので、CSSを使って比率を調整していきましょう。

まずは今までと同様にCSSを追加するための準備として、セクション全体に「works」、パネル個別に「work-panel」というクラスを書いておきます。

CSSクラスを追加できたら更新して「外観 > カスタマイズ > 追加CSS 」に下のコードをコピペしましょう。

/*ワークセクション*/
.works .work-panel .smb-panels__item__figure{
	max-width: 60%;
}

たっくん

これで「事業紹介セクションを作ろう」は完成です…！

SnowMonkeyカスタマイズ⑥：アバウトセクションを作ろう

手順は以下の通り↓

1. セクションと2分割カラムを用意する
2. バナーを設置する
3. CSSで余白を調整する

たっくん

では１つずつ解説してきます…！

セクションと2分割カラムを用意する

まずはこれまで同様に「 Snow Monkey Blocks[セクション] > セクション 」を追加し、タイトルを入力します。

あわせて配置を「全幅」に変更しておきましょう。

次は「 レイアウト要素 > カラム 」を追加し「２カラム：均等割 」を選択します。

すると１:１のボックスが用意されるので、ボックス作りは完成です。

バナーを設置する

ボックスができたら左側に「 Snow Monkey Blocks[共通ブロック] > 項目 」を追加します。

すると「上に画像、下にテキスト」の項目が設置されます。

ただ今回は、画像とテキストを重ねたいので「バナー」に変換しましょう。

バナーに変換したら、画像とタイトルを入力しておきます。

バナーを左カラムの全幅に広げたいので「行あたりのカラム数」を「１」に変更しておきましょう。

右側も同じようにバナーを設置していきます。

ただ１つ注意点があり、画像の高さを「左の画像の高さ÷2−2」にしましょう。（例：左が740×454px 右は740×225px）

これで型は完成したので、もう少し細かい設定をしていきます。

バナーのタイトルの「文字サイズ」を「中」にして、さらに「太字」にしておきましょう。

まだ文字が見にくい（特に右上）のでバナーを選択した状態で「背景マスクの透明度」を「0.7」にします。

では一度プレビューしてみます。

こんな感じになっていればOKです。

CSSで余白を調整する

ここからはCSSを追加していくので、準備をしていきます。

セクション全体に「about」、右上のバナーに「about-right-top」というクラスを追加しましょう。

CSSクラスが追加できたら更新して「 外観 > カスタマイズ > 追加CSS 」に下のコードをコピペしましょう。

/* アバウトセクション */
.about .c-container{
/*画面いっぱいに広げる*/
	padding:0;
	max-width:1480px;
}
.about .wp-block-snow-monkey-blocks-items--banner{
/*バナーの余白を削除*/
	padding:0;
	margin:0;
}
.about .about-right-top{
/*右上のバナーに下の余白*/
	margin-bottom:4px;
}

たっくん

これで「アバウトセクション」の完成です…！

SnowMonkeyカスタマイズ⑦：フッターメニューを作ろう

手順は以下のとおり↓

1. セクションと４分割カラムを作る
2. 見出しとリストでメニューを作る
3. CSSでデザインを変える

たっくん

では１つずつ解説していきます…！

セクションと４分割カラムを作る

今まで通り「 Snow Monkey Blocks[セクション] > セクション 」を追加して「全幅」に変更しましょう。

あわせて背景色は「最も明るいグレー」にしておきます。

「レイアウト要素 > カラム」を追加し「２カラム：均等割」を選択します。

カラム全体を選んで「カラム数」を「４」に変えましょう。

たっくん

これでカラムが４分割になりました！

見出しとリストでメニューを作る

ではカラム内にメニューを１つずつ追加していきます。

まずは「見出し」を設置しましょう。

デフォルトの見出しは「H2」になってるので「H3」に変更します。

タイトルを入力して「文字サイズ」を「標準」に変えましょう。

見出しが作れたら「一般ブロック > リスト」を追加しましょう。

では「リスト」にテキストを入力していきます。

メニューをリンクにしたい場合は、テキストを選択した状態で「リンク」を押してURLを設定します。

では同じように他３カラムのメニューも完成させましょう。

たっくん

これでOKですね…！

CSSでデザインを変える

見本デザインと違うのは以下の２点↓

1. 見出しの下線がみにくい
2. リストの・が不要

CSSを追加して修正していくので、セクション全体の追加CSSクラスに「footer」と入れておきましょう。

「外観 > カスタマイズ > 追加CSSクラス」に下のコードをコピペします。

/* フッターメニュー */
.footer h3{
	border-color: #333; /*下線の色を変更*/
}
.footer ul{
	margin:0; /*・があった分の余白を削除*/
}
.footer ul li{
	line-height:2.5; /*行間を広く*/
	list-style:none; /*メニューの・を削除*/
}

たっくん

これでフッターメニューも完成です！

SnowMonkeyカスタマイズ⑧：レスポンシブ対応（スマホ対応）しよう

ここまででPC版のホームページは完成しましたが、スマホで見るとまだ微妙に整っていません。

たっくん

ここからは、デバイスごとにCSSを追加していきます！

メディアクエリを用意しておく

まずはスマホ用とタブレット用の「メディアクエリ 」を用意して置きましょう。

下のコードを「 外観 > カスタマイズ > 追加CSS 」にコピペでOKです。

@media screen and (max-width:999px){
/*↓タブレット用CSSはここに記述↓*/



/*↑タブレット用CSSはここに記述↑*/
}

@media screen and (max-width:639px){
/*↓事業紹介はここに記述↓*/



/*↑事業紹介はここに記述↑*/
}

@media screen and (max-width:599px){
/*↓スマホ用CSSはここに記述↓*/



/*↑スマホ用CSSはここに記述↑*/
}

ここからCSSを追加していきますが、スマホ用と書かれたものは/↓スマホ用CSSはここに記述↓/の下に貼り付けてください。（タブレット用は/↓タブレット用CSSはここに記述↓/の下に）

キービジュアル

ここはスマホ用のみ↓

/*キービジュアル*/
	.kv .smb-section-with-bgimage__bgimage{
	/*背景画像を全幅に*/
		width:100%;
	}
	.kv .smb-section__title{
		font-size: 18vw; /*タイトル小さく*/
		border-bottom: 10px solid #29B6AF; /*タイトルに下線*/
		padding-bottom: 7px; /*タイトル下に余白*/
	}
	.kv p{
		font-size:initial; /*テキスト小さく*/
	}

ニュース一覧

CSSを追加する前に「追加CSSクラス」を用意しておきましょう。

「任意のタクソノミーの投稿」全体を選んだ状態で「pickup-news-wrap」としておきます。

タブレット用がこちら↓

/*ニュースセクション*/
	.news .section-title-wrap{
	/*縦書きタイトルを横幅５％で固定*/
		-ms-flex-preferred-size: 5% !important;
		flex-basis: 5% !important;
	}
	.news-wrap{
	/*ニュースを横幅85％で固定*/
		flex-basis: 85% !important;
		-ms-flex-preferred-size: 85% !important;
		flex-grow: initial;
		-webkit-box-flex: initial;
		-ms-flex-positive: initial;
	}
	.pickup-news-wrap .c-entries__item{
	/*ピックアップ記事を横一列に*/
		-ms-flex-preferred-size: calc(100% / 3);
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}

スマホ用がこちら↓

/*ニュースセクション*/
	.news .section-title-wrap{
	/*タイトルを少し左に移動*/
		transform: translate(-10px, 0);
		-webkit-transform: translate(-10px, 0);
	}
	.news .section-title-wrap .section-title{
	/*タイトル小さく*/
		font-size: 22px;
	}
	.pickup-news-wrap .c-entries__item{
	/*ピックアップ記事を縦一列に*/
		flex-basis: 100%;
		-ms-flex-preferred-size: 100%;
		max-width: 100%;
	}

事業紹介セクション

ここは/↓事業紹介はここに記述↓/の下に追加しましょう↓

/*ワークセクション*/
	.works .smb-section__background{
	/*背景色を全幅に*/
		right: 0 !important;
	}
	.works .work-panel .smb-panels__item__figure{
	/*パネル画像を全幅に*/
		max-width: 100%;
	}
	.work-panel .smb-panels__item__body{
	/*パネル画像を上に*/
		order:2;
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
	}

アバウトセクション

タブレット用がこちら↓

/*アバウトセクション*/
	.about .about-right-top{
	/*右パネル間の余白を狭く*/
		margin-bottom:2px;
	}

スマホ用がこちら↓

/*アバウトセクション*/
	.about .about-right-top{
	/*採用情報の下の余白削除*/
		margin-bottom: 0;
	}

フッターメニュー

タブレット用がこちら↓

/*フッターメニュー*/
	.footer .wp-block-column:not(:last-child):not(:nth-last-child(2)){
	/*カラムの間に余白をつける*/
		margin-bottom:50px;
	}

スマホ用がこちら↓

/*フッターメニュー*/
	.footer .wp-block-column:not(:last-child){
/*カラムの間に余白をつける*/
		margin-bottom:50px;
	}

レスポンシブCSSまとめ

最後にレスポンシブ化に使ったCSSをまとめておきます。

タブレット用がこちら↓

@media screen and (max-width:999px){
/*↓タブレット用CSSはここに記述↓*/

/*ニュースセクション*/
	.news .section-title-wrap{
	/*縦書きタイトルを横幅５％で固定*/
		-ms-flex-preferred-size: 5% !important;
		flex-basis: 5% !important;
	}
	.news-wrap{
	/*ニュースを横幅85％で固定*/
		flex-basis: 85% !important;
		-ms-flex-preferred-size: 85% !important;
		flex-grow: initial;
		-webkit-box-flex: initial;
		-ms-flex-positive: initial;
	}
	.pickup-news-wrap .c-entries__item{
	/*ピックアップ記事を横一列に*/
		-ms-flex-preferred-size: calc(100% / 3);
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}
	
	/*アバウトセクション*/
	.about .about-right-top{
	/*右パネル間の余白を狭く*/
		margin-bottom:2px;
	}
	
	/*フッターメニュー*/
	.footer .wp-block-column:not(:last-child):not(:nth-last-child(2)){
	/*カラムの間に余白をつける*/
		margin-bottom:50px;
	}

/*↑タブレット用CSSはここに記述↑*/
}

事業紹介セクションがこちら↓

@media screen and (max-width:639px){
/*↓事業紹介はここに記述↓*/

/*ワークセクション*/
	.works .smb-section__background{
	/*背景色を全幅に*/
		right: 0 !important;
	}
	.works .work-panel .smb-panels__item__figure{
	/*パネル画像を全幅に*/
		max-width: 100%;
	}
	.work-panel .smb-panels__item__body{
	/*パネル画像を上に*/
		order:2;
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
	}

/*↑事業紹介はここに記述↑*/
}

スマホ用がこちら↓

@media screen and (max-width:599px){
/*↓スマホ用CSSはここに記述↓*/

/*キービジュアル*/
	.kv .smb-section-with-bgimage__bgimage{
	/*背景画像を全幅に*/
		width:100%;
	}
	.kv .smb-section__title{
		font-size: 18vw; /*タイトル小さく*/
		border-bottom: 10px solid #29B6AF; /*タイトルに下線*/
		padding-bottom: 7px; /*タイトル下に余白*/
	}
	.kv p{
		font-size:initial; /*テキスト小さく*/
	}
	
/*ニュースセクション*/
	.news .section-title-wrap{
	/*タイトルを少し左に移動*/
		transform: translate(-10px, 0);
		-webkit-transform: translate(-10px, 0);
	}
	.news .section-title-wrap .section-title{
	/*タイトル小さく*/
		font-size: 22px;
	}
	.pickup-news-wrap .c-entries__item{
	/*ピックアップ記事を縦一列に*/
		flex-basis: 100%;
		-ms-flex-preferred-size: 100%;
		max-width: 100%;
	}
	
/*アバウトセクション*/
	.about .about-right-top{
	/*採用情報の下の余白削除*/
		margin-bottom: 0;
	}
	
/*フッターメニュー*/
	.footer .wp-block-column:not(:last-child){
	/*カラムの間に余白をつける*/
		margin-bottom:50px;
	}

/*↑スマホ用CSSはここに記述↑*/
}