【まとめ】コピペでOK！Xeory Extentionのカスタマイズまとめ～CSSカスタマイズ編～

7e OFFICIAL BLOG

ホーム
ブログ
Xeory Extention
コピペでOK！Xeory Extentionのカスタマイズまとめ～CSSカスタマイズ編～

Xeory Extention
2019.11.1

コピペでOK！Xeory Extentionのカスタマイズまとめ～CSSカスタマイズ編～

Xeory Extention

無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。

ひとまずはカスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認しながら進めて、全体のカスタマイズが完了したらCSSコードをテーマエディターの「スタイルシート（style.css）」に移動しておきましょう。その際、CSSが効かない現象が起きた場合は、ページ下部で紹介する対処法で解決できます。

CSSまとめ

ヘッダー

ヘッダーは、全てのページの上部に共通して表示されるもので、閲覧者が迷子にならないための目次となるメニューを配置されたり、ウェブサイトのブランドイメージを訴求するなどの役割を担っています。

2019.10.25

コピペでOK！Xeory Extention「ヘッダー」のデザイン変更～CSSカスタマイズ編～

ヘッダー無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「ヘッダー」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。ヘッダーは、全てのページ...

/* ----------------------------------
ヘッダー: ヘッダーバー
---------------------------------- */
#header {
    background: #079292; /* ヘッダーバーの色 */
}
 
/* ----------------------------------
ヘッダーバー: グローバルナビ
---------------------------------- */
#gnav { 
    background-color: #079292; /* 隙間 */
}
#gnav ul li a {
    background-color: #079292; /* 背景色 */
    color: #fff; /* 文字色 */
}
#gnav ul li:hover a {
    background: #0d7484; /* ホバー色 */
}
#gnav ul li.current-menu-item a {
    background: #0d7484; /* セレクト色 */
}
 
/* ----------------------------------
ヘッダーバー: プライマリーナビ
---------------------------------- */
#header-fnav-area #header-fnav-btn a {
    background-color: #003037; /* ボタン背景色 */
}
#header a {
    color: #fff; /* アイコン色 */
}
 
/* ---------------------------------
ヘッダーナビ: スクリーンサイズ991px以下
---------------------------------- */
#header-nav-btn a {
    background-color: #0d7484; /* ヘッダーメニューの色 */
}
#gnav-sp {
    background: #003037; /* メニュー背景色 */
}

/* ----------------------------------
スクリーンサイズ767px以下: ロゴ
---------------------------------- */
@media screen and (max-width: 767px) {
    #header #logo {
        float: left;
        display: inline-block;
        padding: 15px 0 10px 10px; /* 余白: 上右下左 */
    }
    #header #logo a img {
        width: 150px; /* 横サイズ */
        height: 38px; /* 縦サイズ */
    }
}
 
/* ----------------------------------
スクリーンサイズ767px以下: ハンバーガーメニュー
---------------------------------- */
@media screen and (max-width: 767px) {
    #header-nav-btn {
        display: block;
        width: auto;
        line-height: 1;
        float: right;
        margin: 0; 
    }
    #header-nav-btn a {
        display: block;
        text-align: center;
        font-size: 24px; /* アイコンサイズ */
        padding: 22px 10px 10px 10px; /* 余白: 上右下左 */
        line-height: 1;
        background: none;
        width: auto;
    }
}
 
/* ----------------------------------
スクリーンサイズ767px以下: ヘッダーの固定
---------------------------------- */
@media screen and (max-width: 767px) {
    #header {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 999;
    }
    #main_visual,
    .breadcrumb-area {
        padding-top: 65px;
    }
}

/* ----------------------------------

ヘッダー: ヘッダーバー

---------------------------------- */

#header {

background: #079292; /* ヘッダーバーの色 */

}

/* ----------------------------------

ヘッダーバー: グローバルナビ

---------------------------------- */

#gnav {

background-color: #079292; /* 隙間 */

}

#gnav ul li a {

background-color: #079292; /* 背景色 */

color: #fff; /* 文字色 */

}

#gnav ul li:hover a {

background: #0d7484; /* ホバー色 */

}

#gnav ul li.current-menu-item a {

background: #0d7484; /* セレクト色 */

}

/* ----------------------------------

ヘッダーバー: プライマリーナビ

---------------------------------- */

#header-fnav-area #header-fnav-btn a {

background-color: #003037; /* ボタン背景色 */

}

#header a {

color: #fff; /* アイコン色 */

}

/* ---------------------------------

ヘッダーナビ: スクリーンサイズ991px以下

---------------------------------- */

#header-nav-btn a {

background-color: #0d7484; /* ヘッダーメニューの色 */

}

#gnav-sp {

background: #003037; /* メニュー背景色 */

}

/* ----------------------------------

スクリーンサイズ767px以下: ロゴ

---------------------------------- */

@media screen and (max-width: 767px) {

#header #logo {

float: left;

display: inline-block;

padding: 15px 0 10px 10px; /* 余白: 上右下左 */

}

#header #logo a img {

width: 150px; /* 横サイズ */

height: 38px; /* 縦サイズ */

}

/* ----------------------------------

スクリーンサイズ767px以下: ハンバーガーメニュー

---------------------------------- */

@media screen and (max-width: 767px) {

#header-nav-btn {

display: block;

width: auto;

line-height: 1;

float: right;

margin: 0;

}

#header-nav-btn a {

display: block;

text-align: center;

font-size: 24px; /* アイコンサイズ */

padding: 22px 10px 10px 10px; /* 余白: 上右下左 */

line-height: 1;

background: none;

width: auto;

}

/* ----------------------------------

スクリーンサイズ767px以下: ヘッダーの固定

---------------------------------- */

@media screen and (max-width: 767px) {

#header {

position: fixed;

left: 0;

right: 0;

z-index: 999;

}

#main_visual,

.breadcrumb-area {

padding-top: 65px;

}

ファーストビュー

ファーストビューは、ウェブサイトの「第一印象」となる重要な部分です。「Xeory Extention」のファーストビューはとてもシンプルですが、デフォルトデザインの単色背景を画像に変えるなど、より印象的にカスタマイズするためのCSSコードをこの記事で紹介していきます。上記画像は、記事内で紹介するコードすべてを入力した場合のデザインです。

2019.10.28

コピペでOK！Xeory Extention「ファーストビュー」のデザイン変更～CSSカスタマイズ編～

ファーストビュー無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ファーストビューは、ウェブサイトの「第一印象」となる重要な部分です。「Xeory Extention」のファースト...

/* ----------------------------------
ファーストビュー: 背景を画像に変更
---------------------------------- */
body.home #main_visual {
    background-image: url(画像ファイルのURL);
    background-color: #000; /* 画像の下地色 */
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
 
/* ----------------------------------
ファーストビュー: 背景画像にオーバーレイをかける
---------------------------------- */
body.home #main_visual::before{
    position: absolute;
    background-color: rgba(0,0,0,.6); /* オーバーレイの色 */
    content: ' ';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
body.home #main_visual,
body.home #main_visual h2,
body.home #main_visual p {
    position: relative;
}

/* ----------------------------------
ファーストビュー: キャチコピーの調整
---------------------------------- */
body.home #main_visual h2 {
    font-weight: bold; /* 太字に */
    font-size: 54px; /* デフォルトは48px */
    color: #fff; /* 背景画像の色に合わせて変更 */ 
}
 
/* ----------------------------------
キャチコピーの調整: レスポンシブ
---------------------------------- */
@media screen and (max-width: 480px) {
    body.home #main_visual h2 {
        font-size: 24px; /* 文字サイズ */
        }
}
 
/* ----------------------------------
ファーストビュー: サイト説明文の調整
---------------------------------- */ 
body.home #main_visual p {
    font-size: 18px; /* デフォルトは15px */
    color: #fff; /* 背景画像の色に合わせて変更 */ 
}
 
/* ----------------------------------
サイト説明文の調整: レスポンシブ
---------------------------------- */
@media screen and (max-width: 480px) {
    body.home #main_visual p {
        font-size: 14px; /* 文字サイズ */
        }
    body.home #main_visual p br {
        display: none; /* 改行をなくす */
        }
}

/* ----------------------------------

ファーストビュー: 背景を画像に変更

---------------------------------- */

body.home #main_visual {

background-image: url(画像ファイルのURL);

background-color: #000; /* 画像の下地色 */

width: 100%;

background-position: center center;

background-repeat: no-repeat;

}

/* ----------------------------------

ファーストビュー: 背景画像にオーバーレイをかける

---------------------------------- */

body.home #main_visual::before{

position: absolute;

background-color: rgba(0,0,0,.6); /* オーバーレイの色 */

content: ' ';

top: 0;

right: 0;

bottom: 0;

left: 0;

}

body.home #main_visual,

body.home #main_visual h2,

body.home #main_visual p {

position: relative;

}

/* ----------------------------------

ファーストビュー: キャチコピーの調整

---------------------------------- */

body.home #main_visual h2 {

font-weight: bold; /* 太字に */

font-size: 54px; /* デフォルトは48px */

color: #fff; /* 背景画像の色に合わせて変更 */

}

/* ----------------------------------

キャチコピーの調整: レスポンシブ

---------------------------------- */

@media screen and (max-width: 480px) {

body.home #main_visual h2 {

font-size: 24px; /* 文字サイズ */

}

/* ----------------------------------

ファーストビュー: サイト説明文の調整

---------------------------------- */

body.home #main_visual p {

font-size: 18px; /* デフォルトは15px */

color: #fff; /* 背景画像の色に合わせて変更 */

}

/* ----------------------------------

サイト説明文の調整: レスポンシブ

---------------------------------- */

@media screen and (max-width: 480px) {

body.home #main_visual p {

font-size: 14px; /* 文字サイズ */

}

body.home #main_visual p br {

display: none; /* 改行をなくす */

}

トップページ

参考資料: Xeory_Extention_トップページ_完成形

下の記事では、トップページのデフォルトのベースカラーを会社のイメージカラーに変更したり、お好みのデザインへとカスタマイズしたい場合などに利用可能なCSSコードを、ボックス別に紹介しています。CSSコードすべてを記述すると、参考資料のデザインに完成します。

2019.10.29

コピペでOK！Xeory Extention「トップページ」のデザイン変更～CSSカスタマイズ編～

トップページ無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。この記事で紹介するのは、...

/*---------------------------------- 
トップページ: ブログ記事一覧
---------------------------------- */
#popular_post_content h2 i,
#recent_post_content h2 i {
    display: none; /* 見出しアイコンを消す */
}
body.home .front-loop .popular_post_box .p_category {
    color: #079292; /* カテゴリーの文字色 */
    background-color: #fff; /* カテゴリーのテキストの背景色 */
    border: 1px solid #079292; /* カテゴリーの枠線の色と太さ */
}

/* ----------------------------------
トップページ: クローズアップ記事
---------------------------------- */
body.home #front-contents .c_number {
    background-color: #003037; /* 数字の背景色 */
}
body.home #front-contents h3 {
    color: #079292; /* タイトル色 */
}
body.home #front-contents .c_english {
    color: #079292; /* サブタイトル色 */
}

/* ----------------------------------
トップページ: サービス記事
---------------------------------- */
body.home #front-service .front-service-inner h3 {
    color: #079292; /* タイトルの文字色 */
}
body.home #front-service .front-service-inner .c_english {
    color: #079292; /* サブタイトルの文字色 */
}
 
/* ----------------------------------
サービス記事: スクリーンサイズ991px以下
---------------------------------- */
@media screen and (max-width: 991px) {
    body.home #front-service .front-cont-header {
        margin-bottom: 30px; /* タイトル下の余白 */
    } 
    body.home #front-service .front-service-inner .c_box {
        padding-top: 10px; /* 項目ボックス上の余白 */
    }
    body.home #front-service .front-service-inner .c_box:first-child {
        border-bottom: 1px solid #ababab; /* 区切り線の色と太さ */
    } 
    body.home #front-service .front-service-inner .c_box h3 {
        margin-top: 5px; /* 項目タイトル上の余白 */
        font-size: 25px; /* 項目タイトルの文字サイズ */
    } 
    body.home #front-service .front-service-inner .c_box .c_text br {
        display: none; /* 改行をなくす */
    }  
}

/* ----------------------------------
トップページ: 会社情報
---------------------------------- */
body.home #front-company dl#front-company-1 dt {
    border-top: 2px solid #079292; /* 表のアクセントカラー */
}

/* ----------------------------------
トップページ: お問い合わせフォーム
---------------------------------- */
#front-contact .c_box {
    background-color: #fff; /* 背景色 */
}
#front-contact label {
    color: #000; /* お問い合わせ項目の文字色 */
}
body.home #front-contact input,
body.home #front-contact textarea {
    border: 1px solid #0d7484; /* 入力欄の枠線の色と太さ */
    width: 100% !important; /* 入力欄とボタンの幅を最大に */
}
body.home #front-contact input.wpcf7-submit {
    background-color: #0d7484 !important; /* 送信ボタンの色 */
    border: none; /* 送信ボタンの枠線を消す */
}

/* ----------------------------------
トップページ: ボックス共通項目
---------------------------------- */
body.home .front-main-cont .front-cont-header {
    background-color: #003037; /* タイトルバーの背景色 */
}
.c_btn .btn {
    background-color: #0d7484 !important; /* 詳細ボタンの背景色 */ 
    color: #fff !important; /* 詳細ボタンの文字色 */ 
}
body.home .tri-border {
    display: none; /* 見出しの突起を消す */
}

/*----------------------------------

トップページ: ブログ記事一覧

---------------------------------- */

#popular_post_content h2 i,

#recent_post_content h2 i {

display: none; /* 見出しアイコンを消す */

}

body.home .front-loop .popular_post_box .p_category {

color: #079292; /* カテゴリーの文字色 */

background-color: #fff; /* カテゴリーのテキストの背景色 */

border: 1px solid #079292; /* カテゴリーの枠線の色と太さ */

}

/* ----------------------------------

トップページ: クローズアップ記事

---------------------------------- */

body.home #front-contents .c_number {

background-color: #003037; /* 数字の背景色 */

}

body.home #front-contents h3 {

color: #079292; /* タイトル色 */

}

body.home #front-contents .c_english {

color: #079292; /* サブタイトル色 */

}

/* ----------------------------------

トップページ: サービス記事

---------------------------------- */

body.home #front-service .front-service-inner h3 {

color: #079292; /* タイトルの文字色 */

}

body.home #front-service .front-service-inner .c_english {

color: #079292; /* サブタイトルの文字色 */

}

/* ----------------------------------

サービス記事: スクリーンサイズ991px以下

---------------------------------- */

@media screen and (max-width: 991px) {

body.home #front-service .front-cont-header {

margin-bottom: 30px; /* タイトル下の余白 */

}

body.home #front-service .front-service-inner .c_box {

padding-top: 10px; /* 項目ボックス上の余白 */

}

body.home #front-service .front-service-inner .c_box:first-child {

border-bottom: 1px solid #ababab; /* 区切り線の色と太さ */

}

body.home #front-service .front-service-inner .c_box h3 {

margin-top: 5px; /* 項目タイトル上の余白 */

font-size: 25px; /* 項目タイトルの文字サイズ */

}

body.home #front-service .front-service-inner .c_box .c_text br {

display: none; /* 改行をなくす */

}

/* ----------------------------------

トップページ: 会社情報

---------------------------------- */

body.home #front-company dl#front-company-1 dt {

border-top: 2px solid #079292; /* 表のアクセントカラー */

}

/* ----------------------------------

トップページ: お問い合わせフォーム

---------------------------------- */

#front-contact .c_box {

background-color: #fff; /* 背景色 */

}

#front-contact label {

color: #000; /* お問い合わせ項目の文字色 */

}

body.home #front-contact input,

body.home #front-contact textarea {

border: 1px solid #0d7484; /* 入力欄の枠線の色と太さ */

width: 100% !important; /* 入力欄とボタンの幅を最大に */

}

body.home #front-contact input.wpcf7-submit {

background-color: #0d7484 !important; /* 送信ボタンの色 */

border: none; /* 送信ボタンの枠線を消す */

}

/* ----------------------------------

トップページ: ボックス共通項目

---------------------------------- */

body.home .front-main-cont .front-cont-header {

background-color: #003037; /* タイトルバーの背景色 */

}

.c_btn .btn {

background-color: #0d7484 !important; /* 詳細ボタンの背景色 */

color: #fff !important; /* 詳細ボタンの文字色 */

}

body.home .tri-border {

display: none; /* 見出しの突起を消す */

}

固定・投稿ページ

参考資料: Xeory_Extention_固定・投稿ページ _完成形

個別ページと投稿ページのデフォルトデザインをカスタマイズするためのCSSコードです。下記記事では、細やかなデザインの変更についてまで項目別に紹介しています。参考資料は、CSSコードすべてを記述した場合のデザインです。

2019.10.30

コピペでOK！Xeory Extention「固定・投稿ページ」のデザイン変更～CSSカスタマイズ編～

固定ページと投稿ページ無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「固定ページ」と「投稿ページ」のデフォルトデザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。 ...

/* ----------------------------------
投稿ページ: アーカイブ等の記事一覧ページ
---------------------------------- */
.post-header .cat-name span {
    border: 1px solid #079292; /* カテゴリーの枠線の色と太さ */
    color: #079292; /* カテゴリーの文字色 */
}
#content .post-title a:hover {
    color: #079292; /* タイトルのホバー色 */
}
#content .post-footer a.morelink {
    background-color: #0d7484; /* 「続きを読む」の背景色 */
}

/* ----------------------------------
個別・投稿ページ: 記事外デザイン
---------------------------------- */
#content {
    background-color: #fafafa; /* 背景を単色に*/
}
.breadcrumb-area a {
    color: #079292; /* パンくずリストのリンク色 */
}
.side-widget a {
    color: #079292; /* サイドバーのリンクの色 */
	  text-decoration: none; /* リンクの下線を消す */
}
.side-widget a:hover {
    color: #003037; /* サイドバーのリンクのホバー色 */
}

/* ----------------------------------
固定・投稿ページ: 記事内デザイン
---------------------------------- */
li.comments {
    display:none !important; /* コメント数の表示を消す */
}
.single #main article a,
.page #main article a {
    color: #079292; /* 本文リンクの色 */
}
#content .pagination .current {
    background-color: #079292; /* ページャーの色 */
}
.pagination a:hover {
    background: #079292; /* ページャーのホバー背景色 */
    color: #fff !important; /* ページャーのホバー文字色 */
}
 
/* ----------------------------------
記事内デザイン: 見出し2
---------------------------------- */
#content .post-content h2 {
    background-color:#003037; /* 文字の背景色 */
    border-left:solid 10px #079292; /* 左線の色と太さ */
}
 
/* ----------------------------------
記事内デザイン: 見出し3
---------------------------------- */
#content .post-content h3 {
    border-bottom: 2px solid #079292; /* 下線の色と太さ */
    font-weight: bold; /* 太字に */
}
 
/* ----------------------------------
記事内デザイン: 見出し4
---------------------------------- */
#content .post-content h4 {
    border-left: 5px solid #079292; /* 左線の色と太さ */
    font-weight: bold; /* 太字に */
}

/* ----------------------------------
投稿ページ: CTAボックス
---------------------------------- */
#content .post-cta {
    background-color: #003037; /* 背景色 */
}
#main article .post-cta-btn .button {
    background-color: #079292; /* ボタンの背景色 */
    color: #fff; /* ボタンの文字色 */
}


/* ----------------------------------
投稿ページ: コメント欄
---------------------------------- */
#content #comments h4 {
    border-bottom: 3px solid #079292; /* タイトルの下線 */
}
#content #comments a {
    color: #079292; /* リンクの色 */
}
#content form input[type="submit"] {
    background-color: #0d7484; /* ボタンの背景色 */
}

/* ----------------------------------

投稿ページ: アーカイブ等の記事一覧ページ

---------------------------------- */

.post-header .cat-name span {

border: 1px solid #079292; /* カテゴリーの枠線の色と太さ */

color: #079292; /* カテゴリーの文字色 */

}

#content .post-title a:hover {

color: #079292; /* タイトルのホバー色 */

}

#content .post-footer a.morelink {

background-color: #0d7484; /* 「続きを読む」の背景色 */

}

/* ----------------------------------

個別・投稿ページ: 記事外デザイン

---------------------------------- */

#content {

background-color: #fafafa; /* 背景を単色に*/

}

.breadcrumb-area a {

color: #079292; /* パンくずリストのリンク色 */

}

.side-widget a {

color: #079292; /* サイドバーのリンクの色 */

text-decoration: none; /* リンクの下線を消す */

}

.side-widget a:hover {

color: #003037; /* サイドバーのリンクのホバー色 */

}

/* ----------------------------------

固定・投稿ページ: 記事内デザイン

---------------------------------- */

li.comments {

display:none !important; /* コメント数の表示を消す */

}

.single #main article a,

.page #main article a {

color: #079292; /* 本文リンクの色 */

}

#content .pagination .current {

background-color: #079292; /* ページャーの色 */

}

.pagination a:hover {

background: #079292; /* ページャーのホバー背景色 */

color: #fff !important; /* ページャーのホバー文字色 */

}

/* ----------------------------------

記事内デザイン: 見出し2

---------------------------------- */

#content .post-content h2 {

background-color:#003037; /* 文字の背景色 */

border-left:solid 10px #079292; /* 左線の色と太さ */

}

/* ----------------------------------

記事内デザイン: 見出し3

---------------------------------- */

#content .post-content h3 {

border-bottom: 2px solid #079292; /* 下線の色と太さ */

font-weight: bold; /* 太字に */

}

/* ----------------------------------

記事内デザイン: 見出し4

---------------------------------- */

#content .post-content h4 {

border-left: 5px solid #079292; /* 左線の色と太さ */

font-weight: bold; /* 太字に */

}

/* ----------------------------------

投稿ページ: CTAボックス

---------------------------------- */

#content .post-cta {

background-color: #003037; /* 背景色 */

}

#main article .post-cta-btn .button {

background-color: #079292; /* ボタンの背景色 */

color: #fff; /* ボタンの文字色 */

}

/* ----------------------------------

投稿ページ: コメント欄

---------------------------------- */

#content #comments h4 {

border-bottom: 3px solid #079292; /* タイトルの下線 */

}

#content #comments a {

color: #079292; /* リンクの色 */

}

#content form input[type="submit"] {

background-color: #0d7484; /* ボタンの背景色 */

}

フッター

フッターは、ヘッダーと同じく前ページに共通表示される部分です。サイトマップを配置していることから、別のページへの誘導を促す役割を担っている部分です。下記記事では、デフォルトデザインには存在しないフッターメニューの追加方法についても紹介しています。

2019.10.31

コピペでOK！Xeory Extention「フッター」のデザイン変更～CSSカスタマイズ編～

フッター無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「フッター」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。まずは上記画像の黄色の枠...

/* ----------------------------------
フッター: サブフッターメニュー
---------------------------------- */
#sub-footer-menu a {
    font-size: 12px; /* 文字サイズ */
    text-decoration: none;
}
#sub-footer-menu ul li {
    display: inline-block; /* 横並び */
    list-style-type: none;
    text-transform: uppercase;
}
#sub-footer-menu ul li::before {
    content: "|"; /* 区切り線 */
    padding: 0 0.6em;
}
#sub-footer-menu ul li:first-child::before {
    content: "";
    padding: 0;
}
#sub-footer-menu ul {
    text-align: center;
    margin: 10px 0;
    color: #079292; /* 区切り線の色 */
}
#sub-footer-menu ul .sub-menu {
    display: none;
}
 
/* ----------------------------------
サブフッターメニュー: レスポンシブ
---------------------------------- */
@media screen and (max-width: 767px) {
    #sub-footer-menu {
        display: list-item;  /* 縦並び */
    }
}

/* ----------------------------------
フッター: カラーの変更
---------------------------------- */
#footer .footer-01 {
    background-color: #003037; /* 背景色 */
}
#footer {
    border-top: 8px solid #fff; /* 上部ボーダーの色と太さ */
}
#footer #footer-brand-area {
    border-bottom: 1px solid #079292; /* 区切り線の色と太さ */
}
#footer .footer-02 {
    background-color: #079292; /* 最下部フッターの色 */
}
.footer-address {
    text-align: left !important; /* フッターテキストの左寄せ */
}