ヘッダーとナビゲーション

フレキシブルボックスレイアウトでは、displayプロパティの値をflexと指定した要素（コンテナ）の、直接の子要素（アイテム）が、フレキシブルにレイアウトできるようになる、というものでした。※詳しくは「よこ並びのCSS。」という記事を参照のこと。
ここでは、サイトタイトルとナビゲーションを2段組みにするため、その親要素のnav要素と、ナビゲーションボタンをよこ並びにするため、その親要素のul要素に、それぞれdisplay: flexを指定します。

@media print, (min-width: 415px) {
	.nav-list {
		display: flex;
	}
	.nav-list li {
		border-left: 1px solid #eee;
	}
}
@media print, (min-width: 768px) {
	header nav {
		display: flex;
		line-height: 80px;
	}
	.nav-list a {
		padding: 0 2em;
	}
}

すると、あっという間にすべてよこ並びになりましたね！あとは、サイトタイトルとナビゲーションを左右に寄せるだけですが、これも、フレキシブルボックスレイアウトでは、親要素への指定だけでレイアウトできちゃいます。justify-contentプロパティは、アイテムの並ばせ方を調整することができるプロパティ。ここでは、アイテムを端から端へ均等に並べるためのspace-betweenという値を指定します。

@media print, (min-width: 768px) {
	header nav {
		display: flex;
		justify-content: space-between;
		line-height: 80px;
	}
	⋮

それから、767px以下の時のナビゲーションボタンの横幅は、widthプロパティでなく、flex-basisプロパティで指定することにします。すると、414px以下の時にフレキシブルな要素でないナビゲーションボタンにこの指定は影響しないので、414px以下のメディアクエリは不要になりますね;)！
ヘッダーできあがり！

@media screen and (max-width: 767px) {
	.nav-list li {
		flex-basis: 20%;
	}
	⋮

メインコンテンツとサイドメニュー

メインコンテンツとサイドメニューをよこ並びにするために、#contents要素にdisplay: flexを指定。それぞれの横幅は、flex-basisプロパティで指定します。ここでは、フロートの時と同じように、メインコンテンツの横幅をcalc(75% - 20px)、サイドメニューの横幅をcalc(25% -20px)という風に指定することにします。
それから、ヘッダーの時と同じように、アイテムを両端に寄せて並べるために、justify-contentプロパティも指定します。

@media print, (min-width: 768px) {
	#contents {
		display: flex;
		justify-content: space-between;
	}
	main {
		flex-basis: calc(75% - 20px);
	}
	aside {
		flex-basis: calc(25% - 20px);
	}
}

ぜんぶよこ並びになっちゃいました！フレキシブルボックスレイアウトはデフォルトの状態では、複数行に折り返さないようになってるんです。親要素にflex-wrapプロパティでwrapと指定することで、折り返しを解禁してあげます。メインビジュアルが横幅いっぱいの大きな画像なので、メインコンテンツとサイドメニューが改行して、レイアウトされるようになります。

@media print, (min-width: 768px) {
	#contents {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	⋮

続いて、それぞれのセクションをレイアウトしてゆきます！

バナーと商品一覧と記事一覧

バナーのとこも前述と同じ要領で、フレキシブルボックスにして、justify-contentプロパティで両端に寄せて並べて、アイテムの横幅をflex-basisプロパティで指定、すればよいですねー。

main .bnr-list {
	display: flex;
	justify-content: space-between;
}
main .bnr-list li {
	flex-basis: calc(50% - 8px);
}

商品一覧と記事一覧は、それぞれ、ul要素をフレキシブルボックスにして、アイテムの横幅を、隙間の分を差し引いたサイズに指定すればいっちょあがりです！フレキシブルボックスなら、justify-contentプロパティで、両端に揃えて均等に配置することができるので、パディングで隙間を空けてネガティブマージンで戻すなんてことしなくて良いんですね！

ただ、3つ以上よこ並びする時、今までと同じ隙間にするためには、ちょっと計算が必要です…。
商品一覧の隙間を、24pxずつ空けたい場合、アイテムの横幅はcalc(33.333333% - 24px)じゃダメで、calc(33.333333% - 16px)にしないといけません。隙間は全部で48px空くことになるので、これを3つのアイテムの横幅から均等に差引かなきゃいけないということなんですねー（下図参照）。

.menu-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.menu-list li {
	flex-basis: calc(33.333333% - 16px);
}

ページトップへ戻る

@media print, (min-width: 415px) {
	.info-list {
		display: flex;
		flex-wrap: wrap;
	}
	⋮
	.info-list :not(:last-of-type) {
		border-bottom: 1px solid #dcdcdc;
	}
}

フッターのサイトマップ

よこ並びにする要素の親要素の.sitemap-listをフレキシブルボックスにして、justify-contentプロパティで両端に寄せて並べます。アイテムの横幅は、商品一覧の時と同じく、隙間の合計を均等に差し引いた分を指定します。アイテムは6つあるけれど、5列にするので、隙間の合計は16px * 4で、アイテムの横幅は20% - 64px / 5＝20% - 12.8pxってことになります。

@media print, (min-width: 768px) {
	.sitemap-list {
		display: flex;
		justify-content: space-between;
	}
	.contentsinfo .group {
		flex-basis: calc(20% - 12.8px);
	}
	.contentsinfo .group:nth-child(4) {
		margin-left: -20%;
		padding-top: calc(1.3rem * 1.4 + .9em);
	}
}

ちょっと「店舗検索」と「お知らせ」の位置がズレちゃいましたね…。「お知らせ」のグループの左側に指定するネガティブマージンは、グループひとつ分にしなきゃいけません。
グループひとつ分の横幅は、20% - 12.8pxと思いきや、この横幅の要素が16pxの隙間を空けつつ、端から端まで均等に並んでるのだから、20% - 12.8px + 16pxということになります。ネガティブマージンなので-(20% - 12.8px + 16px)、つまり-20% + 12.8px - 16px、すなわち-20% - 3.2pxを、左側のマージンに指定すれば良いってことですねー⁑|。

@media print, (min-width: 768px) {
	⋮
	.contentsinfo .group:nth-child(4) {
		margin-left: calc(-20% - 3.2px);
		padding-top: calc(1.3rem * 1.4 + .9em);
	}
}