/*
Theme Name: Lightning Child Sample
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/
/* ==================================================================
目次
==================================================================
1. サイト全体のフォントサイズ設定
2. ページタイトル下のサブテキスト
3. ボタンスタイル（VK Button用）
4. 共通セクション見出し（バッジ4色＋タイトル）
5. 共通CTAバナー（フッター上のお問い合わせエリア）
6. 会社概要テーブル
7. 企業理念セクション
8. 社長エリア（写真＋名前）
9. アクセスセクション
10. メインビジュアル（バッジエリア）
11. 各種見出しパーツ（青帯・ベージュ見出し）
12. 各種タグバッジ（青・赤・黄・オレンジ）
13. 業者のウソ警告ボックス
14. 数字カード2カラム
15. 「10の安心」目次セクション
16. 有資格者カード一覧
17. 信念メッセージ帯（グラデーション）
18. 工程写真ギャラリー
19. マナー徹底ポイント（アイコン4分割）
20. パンくずリスト
21. SVGロゴのサイズ指定
22. ブログの次の記事へ
23. TOPへ戻る
================================================================== */
/* ==================================================================
1. サイト全体のフォントサイズ設定
Lightningテーマ用 / PC: 1.1rem基準 / SP: 1.05rem基準
================================================================== */
/* ▼ Lightningの本文サイズ変数を上書き（最重要） */
:root {
--vk-size-text: 1.1rem;
}
/* ▼ body・html・段落・リスト等 */
body,
html,
p,
li,
td,
th,
dd,
dt {
font-size: 1.1rem;
line-height: 1.8;
}
/* ▼ 見出し */
h1, .h1 { font-size: 2.2rem; line-height: 1.4; }
h2, .h2 { font-size: 1.8rem; line-height: 1.4; }
h3, .h3 { font-size: 1.5rem; line-height: 1.5; }
h4, .h4 { font-size: 1.3rem; line-height: 1.5; }
h5, .h5 { font-size: 1.15rem; }
/* ▼ 補足・キャプション */
small,
.small,
.caption,
.note,
figcaption {
font-size: 0.875rem;
}
/* ▼ 横スクロール防止 */
body {
overflow-x: hidden;
}
/* ▼ スマホ（991px以下）でフォントサイズ調整 */
@media screen and (max-width: 991px) {
:root {
--vk-size-text: 1.05rem;
}
body,
html,
p,
li,
td,
th,
dd,
dt {
font-size: 1.05rem;
line-height: 1.8;
}
h1, .h1 { font-size: 1.8rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.05rem; }
small,
.small,
.caption,
.note,
figcaption {
font-size: 0.85rem;
}
}
/* ==================================================================
2. ページタイトル下のサブテキスト（COMPANYなどの英語）
================================================================== */
.page-header-subtext {
color: #FFC107 !important;
font-size: 16px !important;
letter-spacing: 4px !important;
margin-top: 8px !important;
}
/* ==================================================================
3. ボタンスタイル（VK Button用）
※デフォルトボタンに影響しないよう、特定クラス付きの時だけ適用
================================================================== */
/* 標準ボタン（青枠）- btn-blueクラス付きの時のみ */
.vk_button.btn-blue .vk_button_link.btn {
border: 2px solid #29A7E0 !important;
color: #0D5A8A !important;
}
/* オレンジ枠ボタン - btn-orangeクラス */
.vk_button.btn-orange .vk_button_link.btn {
border: 2px solid #FF8C1A !important;
color: #FFFFFF !important;
}
/* アンカーリンクボタン（細め枠）- btn-anchorクラス */
.vk_button.btn-anchor .vk_button_link.btn {
border: 1px solid #B5D4F4 !important;
background: #FFFFFF !important;
color: #0D5A8A !important;
font-weight: 500;
border-radius: 6px !important;
padding: 12px 20px !important;
}
.vk_button.btn-anchor .vk_button_link.btn:hover {
border-color: #29A7E0 !important;
background: #EAF6FC !important;
color: #0D5A8A !important;
}
/* アクセントボタン（塗り潰し）- btn-ctaクラス */
.vk_button.btn-cta .vk_button_link.btn {
border: 2px solid #FF8C1A !important;
background: #FF8C1A !important;
color: #FFFFFF !important;
}
/* ==================================================================
4. 共通セクション見出し（バッジ4色＋タイトル）
================================================================== */
.susaki-heading {
text-align: center;
margin-bottom: 0px;
}
/* バッジ共通スタイル */
.susaki-heading__badge,
.susaki-heading__red,
.susaki-heading__point {
display: inline-block;
color: #FFFFFF;
font-size: 1.1rem;
font-weight: 700;
padding: 10px 28px;
border-radius: 30px;
margin-bottom: 16px;
letter-spacing: 0.08em;
}
/* ゴールドバッジ（INDEX・MESSAGEなど） */
.susaki-heading__badge {
background: linear-gradient(135deg, #FFC107 0%, #E0A800 100%);
color: #4A1B0C;
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35);
}
/* レッドバッジ（警告・注意喚起） */
.susaki-heading__red {
background: linear-gradient(135deg, #E53935 0%, #B71C1C 100%);
box-shadow: 0 4px 12px rgba(229, 57, 53, 0.35);
}
/* ブルーバッジ（各セクション安心番号） */
.susaki-heading__point {
background: linear-gradient(135deg, #29A7E0 0%, #0D5A8A 100%);
box-shadow: 0 4px 12px rgba(41, 167, 224, 0.3);
}
/* オレンジバッジ（最重要強調 / 項目09用） */
.susaki-heading__point--accent {
background: linear-gradient(135deg, #FF8C1A 0%, #E07614 100%);
box-shadow: 0 4px 12px rgba(255, 140, 26, 0.4);
}
/* バッジ内のアイコン共通 */
.susaki-heading__badge i,
.susaki-heading__red i,
.susaki-heading__point i {
font-size: 1em;
margin-right: 6px;
}
/* 日本語タイトル */
.susaki-heading__title {
font-size: 26px !important;
font-weight: 500 !important;
color: #0D5A8A !important;
margin: 0 !important;
border: none !important;
padding: 0 !important;
line-height: 1.4 !important;
text-align: center !important;
}
/* 英語サブテキスト */
.susaki-heading__en {
font-size: 13px;
color: #29A7E0;
letter-spacing: 4px;
margin-top: 4px;
}
/* アクセント線 */
.susaki-heading__line {
width: 40px;
height: 3px;
background: #29A7E0;
margin: 12px auto 0;
}
/* スマホ対応 */
@media (max-width: 575px) {
.susaki-heading {
margin-bottom: 24px;
}
.susaki-heading__title {
font-size: 22px;
}
.susaki-heading__badge {
font-size: 11px;
}
.susaki-heading__en {
font-size: 11px;
}
}
/* ==================================================================
5. 共通CTAバナー（フッター上のお問い合わせエリア）
================================================================== */
.susaki-cta {
background: #29A7E0;
padding: 40px 24px;
margin: 40px 0;
/* 全幅化 */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
border-radius: 0;
}
.susaki-cta__heading {
text-align: center;
margin-bottom: 24px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
.susaki-cta__title {
font-size: 28px;
font-weight: 500;
color: #FFFFFF;
margin: 0;
letter-spacing: 4px;
border: none;
padding: 0;
text-align: center;
}
.susaki-cta__title-en {
color: #FFC107;
margin-left: 12px;
font-size: 18px;
letter-spacing: 2px;
}
/* 4ボタングリッド */
.susaki-cta__buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* 共通ボタンスタイル */
.susaki-cta__btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none !important;
padding: 14px 10px;
border-radius: 8px;
min-height: 72px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.susaki-cta__btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
text-decoration: none !important;
}
/* 電話ボックス */
.susaki-cta__btn--tel {
background: #FF8C1A;
color: #FFFFFF !important;
}
.susaki-cta__tel-number {
font-size: 22px;
font-weight: 500;
letter-spacing: 0.5px;
display: block;
}
.susaki-cta__tel-hours {
font-size: 11px;
margin-top: 4px;
display: block;
opacity: 0.95;
}
/* 白背景ボタン（無料相談・来店予約） */
.susaki-cta__btn--white {
background: #FFFFFF;
border: 2px solid #FF8C1A;
color: #0D5A8A !important;
}
.susaki-cta__btn-sub {
font-size: 12px;
color: #5F5E5A;
margin-bottom: 4px;
display: block;
}
.susaki-cta__btn-main {
font-size: 15px;
font-weight: 500;
display: block;
}
.susaki-cta__btn-main i {
color: #29A7E0;
margin-right: 4px;
}
.susaki-cta__underline {
color: #FF8C1A;
border-bottom: 2px solid #FFC107;
}
.susaki-cta__arrow {
font-size: 12px;
margin-left: 4px;
color: #FF8C1A !important;
}
/* LINEボタン */
.susaki-cta__btn--line {
background: #FFFFFF;
border: 0.5px solid #B5D4F4;
color: #0D5A8A !important;
}
.susaki-cta__line-badge {
display: inline-block;
background: #06C755;
color: #FFFFFF;
font-size: 11px;
padding: 3px 10px;
border-radius: 4px;
margin-bottom: 6px;
font-weight: 500;
}
.susaki-cta__line-badge i {
margin-right: 4px;
}
/* 見積りシミュレーションバナー */
.susaki-cta__simulation {
display: block;
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease;
max-width: 1200px;
margin: 0 auto;
}
.susaki-cta__simulation:hover {
transform: translateY(-2px);
}
.susaki-cta__simulation-img {
width: 100%;
height: auto;
display: block;
}
/* シミュレーションバナー：PC/SP切り替え */
.susaki-cta__simulation-img--pc {
display: block;
}
.susaki-cta__simulation-img--sp {
display: none;
}
/* タブレット */
@media (max-width: 991px) {
.susaki-cta__buttons {
grid-template-columns: repeat(2, 1fr);
}
.susaki-cta__btn--tel {
grid-column: 1 / -1;
}
.susaki-cta__tel-number {
font-size: 26px;
}
}
/* スマホ */
@media (max-width: 575px) {
.susaki-cta {
padding: 28px 16px;
}
.susaki-cta__title {
font-size: 22px;
letter-spacing: 2px;
}
.susaki-cta__title-en {
font-size: 14px;
display: block;
margin-left: 0;
margin-top: 4px;
}
.susaki-cta__buttons {
grid-template-columns: 1fr;
gap: 10px;
}
.susaki-cta__btn--tel {
grid-column: auto;
}
.susaki-cta__tel-number {
font-size: 24px;
}
.susaki-cta__btn-main {
font-size: 16px;
}
/* シミュレーションバナー：スマホ用に切替 */
.susaki-cta__simulation-img--pc {
display: none;
}
.susaki-cta__simulation-img--sp {
display: block;
}
}
/* CTAとフッターの余白をなくす */
.susaki-cta{
margin-bottom: 0 !important;
}
/* ==================================================================
6. 会社概要テーブル
------------------------------------------------------------------
PC : 左ラベル列30% ＋ 右データ列の2カラム
スマホ: ラベルが幅いっぱいの帯、その下にデータ（中山コーティング風）
================================================================== */
.susaki-company-table {
width: 100%;
margin: 0;
}
.susaki-company-table table {
width: 100% !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
font-size: 14px;
margin: 0 !important;
border: 0.5px solid #B5D4F4 !important;
border-radius: 8px;
overflow: hidden;
table-layout: fixed;
}
/* 行の区切り線 */
.susaki-company-table tr {
border-bottom: 0.5px solid #B5D4F4 !important;
}
.susaki-company-table tr:last-child {
border-bottom: none !important;
}
/* ラベル列（1番目のセル） */
.susaki-company-table th,
.susaki-company-table tr > *:first-child {
background: #EAF6FC !important;
background-color: #EAF6FC !important;
color: #0D5A8A !important;
padding: 14px 16px !important;
text-align: left !important;
font-weight: 500 !important;
width: 30% !important;
vertical-align: top !important;
border: none !important;
box-sizing: border-box !important;
}
/* データ列（2番目以降のセル） */
.susaki-company-table td:not(:first-child),
.susaki-company-table tr > *:not(:first-child) {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
color: #2C2C2A !important;
padding: 14px 16px !important;
vertical-align: top !important;
border: none !important;
font-weight: normal !important;
width: auto !important;
box-sizing: border-box !important;
}
/* ------------------------------------------------------------------
スマホ表示（767px以下）
table / tbody / tr / th / td すべてを block にして縦積みにする。
ここで width:auto を明示しないと、PC用の width:30% が残って
ラベル帯が伸びきらないので注意。
------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
.susaki-company-table table,
.susaki-company-table thead,
.susaki-company-table tbody,
.susaki-company-table tr,
.susaki-company-table th,
.susaki-company-table td,
.susaki-company-table tr > * {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
table-layout: auto !important;
}
.susaki-company-table table {
border-radius: 8px;
}
/* ラベル：幅いっぱいの帯 */
.susaki-company-table th,
.susaki-company-table tr > *:first-child {
width: 100% !important;
background: #EAF6FC !important;
background-color: #EAF6FC !important;
color: #0D5A8A !important;
font-weight: 600 !important;
padding: 10px 14px !important;
border-bottom: none !important;
}
/* データ：帯の下に白背景で */
.susaki-company-table td:not(:first-child),
.susaki-company-table tr > *:not(:first-child) {
width: 100% !important;
background: #FFFFFF !important;
background-color: #FFFFFF !important;
padding: 10px 14px 14px !important;
}
.susaki-company-table tr {
border-bottom: 0.5px solid #B5D4F4 !important;
}
.susaki-company-table tr:last-child {
border-bottom: none !important;
}
}
/* ==================================================================
7. 企業理念セクション
================================================================== */
.susaki-philosophy {
background: #FFFFFF;
padding: 36px 24px;
border-radius: 8px;
text-align: center;
border-top: 4px solid #29A7E0;
max-width: 900px;
margin: 0 auto;
}
.susaki-philosophy__label {
font-size: 14px;
color: #29A7E0;
margin-bottom: 8px;
font-weight: 500;
}
.susaki-philosophy__catch {
font-size: 28px !important;
font-weight: 500 !important;
color: #0D5A8A !important;
margin: 0 0 20px !important;
line-height: 1.5 !important;
border: none !important;
padding: 0 !important;
text-align: center !important;
}
.susaki-philosophy__highlight {
color: #FF8C1A;
border-bottom: 3px solid #FFC107;
padding-bottom: 2px;
}
.susaki-philosophy__text {
font-size: 14px;
color: #2C2C2A;
line-height: 1.9;
margin: 0 auto !important;
max-width: 600px;
text-align: center;
}
/* スマホ対応 */
@media (max-width: 575px) {
.susaki-philosophy {
padding: 28px 20px;
}
.susaki-philosophy__catch {
font-size: 22px !important;
}
.susaki-philosophy__text {
font-size: 13px;
text-align: left;
}
}
/* ==================================================================
8. 社長エリア（写真＋名前）
================================================================== */
.susaki-president {
text-align: center;
max-width: 280px;
margin: 0 auto;
}
.susaki-president__photo {
margin-bottom: 16px;
}
.susaki-president__photo img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
.susaki-president__name-area {
text-align: center;
}
.susaki-president__company {
font-size: 13px !important;
color: #5F5E5A !important;
margin: 0 0 8px !important;
letter-spacing: 1px;
}
.susaki-president__signature {
max-width: 200px;
height: auto;
display: block;
margin: 0 auto;
}
/* ==================================================================
9. アクセスセクション
================================================================== */
.susaki-access {
background: #FFFFFF;
padding: 24px;
border-radius: 8px;
max-width: 900px;
margin: 0 auto;
}
.susaki-access__map {
margin-bottom: 24px;
border-radius: 6px;
overflow: hidden;
border: 0.5px solid #B5D4F4;
}
.susaki-access__map iframe {
display: block;
width: 100%;
}
.susaki-access__info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.susaki-access__col {
text-align: left;
}
.susaki-access__label {
font-size: 12px;
color: #29A7E0;
margin-bottom: 6px;
font-weight: 500;
}
.susaki-access__label i {
margin-right: 4px;
}
.susaki-access__text {
font-size: 14px;
color: #2C2C2A;
line-height: 1.7;
}
.susaki-access__tel {
font-size: 24px;
color: #0D5A8A;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 4px;
}
.susaki-access__hours {
font-size: 12px;
color: #888780;
}
.susaki-access__btn {
display: block;
background: #FF8C1A;
color: #FFFFFF !important;
text-decoration: none !important;
padding: 14px;
text-align: center;
border-radius: 6px;
font-weight: 500;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.susaki-access__btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
color: #FFFFFF !important;
}
.susaki-access__btn i {
margin: 0 6px;
}
/* スマホ対応 */
@media (max-width: 575px) {
.susaki-access {
padding: 16px;
}
.susaki-access__info {
grid-template-columns: 1fr;
gap: 16px;
}
.susaki-access__tel {
font-size: 22px;
}
}
/* ==================================================================
10. メインビジュアル（バッジエリア）
================================================================== */
.susaki-mv {
background: #FFFFFF;
border-radius: 12px;
padding: 32px 24px;
border-top: 4px solid #29A7E0;
text-align: center;
}
.susaki-mv__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 16px;
}
.susaki-mv__badge {
background: #FFC107;
color: #4A1B0C;
font-size: 12px;
padding: 4px 12px;
border-radius: 4px;
font-weight: 500;
}
.susaki-mv__badge i {
margin-right: 4px;
}
.susaki-mv__title {
font-size: 26px !important;
color: #0D5A8A !important;
font-weight: 500 !important;
margin: 0 0 12px !important;
line-height: 1.5 !important;
border: none !important;
padding: 0 !important;
text-align: center !important;
}
.susaki-mv__highlight {
color: #FF8C1A;
border-bottom: 3px solid #FFC107;
padding-bottom: 2px;
}
.susaki-mv__sub {
font-size: 14px !important;
color: #2C2C2A !important;
line-height: 1.9 !important;
margin: 16px 0 0 !important;
text-align: center !important;
}
@media (max-width: 575px) {
.susaki-mv__title {
font-size: 20px !important;
}
}
/* ==================================================================
11. 各種見出しパーツ（青帯・ベージュ見出し）
================================================================== */
/* 青い帯の見出し */
.susaki-section-bar {
background: #29A7E0;
color: #FFFFFF !important;
padding: 12px 20px;
border-radius: 6px;
font-size: 16px !important;
font-weight: 500 !important;
margin: 0 0 16px !important;
border: none !important;
}
.susaki-section-bar i {
margin-right: 6px;
}
/* ベージュ背景の見出し */
.susaki-subhead {
background: #FFF8E1;
border-left: 4px solid #FF8C1A;
border-radius: 4px;
padding: 12px 16px;
font-size: 18px !important;
color: #0D5A8A !important;
font-weight: 500 !important;
margin: 0 0 16px !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
}
.susaki-subhead i {
color: #FF8C1A;
margin-right: 6px;
}
/* ==================================================================
12. 各種タグバッジ（青・赤・黄・オレンジ）
================================================================== */
/* 青の小バッジ */
.susaki-tag-blue {
display: inline-block;
background: #29A7E0;
color: #FFFFFF !important;
font-size: 11px;
padding: 3px 10px;
border-radius: 4px;
font-weight: 500;
margin-bottom: 4px;
}
.susaki-tag-blue i {
margin-right: 4px;
}
/* 赤の警告バッジ */
.susaki-tag-red {
display: inline-block;
background: #E53935;
color: #FFFFFF !important;
font-size: 11px;
padding: 3px 10px;
border-radius: 4px;
font-weight: 500;
margin-bottom: 4px;
}
.susaki-tag-red i {
margin-right: 4px;
}
/* 黄色の強みバッジ */
.susaki-tag-yellow {
display: inline-block;
background: #FFC107;
color: #4A1B0C !important;
font-size: 14px;
padding: 5px 14px;
border-radius: 20px;
font-weight: 500;
margin-bottom: 8px;
}
.susaki-tag-yellow i {
margin-right: 4px;
}
/* オレンジの強みバッジ（最大の強み用） */
.susaki-tag-orange {
display: inline-block;
background: #FF8C1A;
color: #FFFFFF !important;
font-size: 14px;
padding: 5px 14px;
border-radius: 20px;
font-weight: 500;
margin-bottom: 8px;
}
.susaki-tag-orange i {
margin-right: 4px;
}
/* ==================================================================
13. 業者のウソ警告ボックス
================================================================== */
.susaki-warning {
background: #FFFFFF;
border-radius: 8px;
padding: 24px;
border-left: 4px solid #E53935;
}
.susaki-warning__label {
display: inline-block;
background: #FFEBEE;
color: #E53935;
font-size: 14px;
padding: 5px 14px;
border-radius: 4px;
margin-bottom: 14px;
font-weight: 500;
}
.susaki-warning__label i {
margin-right: 4px;
}
.susaki-warning__title {
font-size: 22px !important;
color: #0D5A8A !important;
margin: 0 0 16px !important;
border: none !important;
padding: 0 !important;
font-weight: 500 !important;
line-height: 1.5 !important;
}
.susaki-warning__answer {
background: #FFEBEE;
padding: 16px 18px;
border-radius: 4px;
margin-bottom: 16px;
}
.susaki-warning__answer-label {
font-size: 17px;
color: #E53935;
font-weight: 500;
margin-bottom: 6px;
}
.susaki-warning__answer-label i {
margin-right: 4px;
}
.susaki-warning__answer-text {
font-size: 16px !important;
color: #2C2C2A !important;
line-height: 1.9 !important;
margin: 0 !important;
}
.susaki-warning__text {
font-size: 16px !important;
color: #2C2C2A !important;
line-height: 1.9 !important;
margin: 0 !important;
}
/* スマホ対応 */
@media (max-width: 575px) {
.susaki-warning {
padding: 18px;
}
.susaki-warning__title {
font-size: 18px !important;
}
.susaki-warning__answer-label {
font-size: 15px;
}
.susaki-warning__answer-text,
.susaki-warning__text {
font-size: 14px !important;
}
}
/* ==================================================================
14. 数字カード2カラム
================================================================== */
.susaki-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.susaki-stats__card {
background: linear-gradient(135deg, #29A7E0 0%, #0D5A8A 100%);
padding: 28px 20px;
border-radius: 8px;
text-align: center;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(41, 167, 224, 0.2);
}
.susaki-stats__label {
font-size: 0.95rem;
opacity: 0.9;
margin-bottom: 8px;
font-weight: 500;
}
.susaki-stats__main {
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.susaki-stats__main--text {
font-size: 1.6rem;
line-height: 1.2;
}
.susaki-stats__unit {
font-size: 1.2rem;
font-weight: 700;
margin-left: 4px;
}
.susaki-stats__sub {
font-size: 0.9rem;
opacity: 0.9;
font-weight: 500;
}
/* スマホ：1列表示 */
@media screen and (max-width: 767px) {
.susaki-stats {
grid-template-columns: 1fr;
gap: 12px;
}
.susaki-stats__card {
padding: 24px 20px;
}
.susaki-stats__main {
font-size: 2rem;
}
.susaki-stats__main--text {
font-size: 1.4rem;
}
}
/* ==================================================================
15. 「10の安心」目次セクション
================================================================== */
.susaki-reason-index {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.susaki-reason-index-item {
background: #FFFFFF;
border-radius: 8px;
padding: 16px 20px;
text-decoration: none;
display: flex;
align-items: center;
gap: 14px;
border: 1px solid #B5D4F4;
transition: all 0.2s ease;
}
.susaki-reason-index-item:hover {
background: #F5FBFE;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(41, 167, 224, 0.15);
text-decoration: none;
}
.susaki-reason-index-num {
background: #29A7E0;
color: #FFFFFF;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
flex-shrink: 0;
}
.susaki-reason-index-num--accent {
background: #FF8C1A;
}
.susaki-reason-index-text {
color: #0D5A8A;
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.susaki-reason-index {
grid-template-columns: 1fr;
gap: 10px;
}
.susaki-reason-index-item {
padding: 14px 16px;
}
.susaki-reason-index-num {
width: 32px;
height: 32px;
}
}
/* ==================================================================
16. 有資格者カード一覧
================================================================== */
.susaki-qualifications {
margin-bottom: 24px;
}
.susaki-qualifications__title {
text-align: center;
color: #0D5A8A;
font-weight: 600;
margin: 0 0 20px;
border: none;
padding: 0;
}
.susaki-qualifications__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.susaki-qualifications__item {
background: #FFFFFF;
padding: 14px 16px;
border-radius: 6px;
border-left: 3px solid #29A7E0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.susaki-qualifications__item--accent {
border-left-color: #FF8C1A;
}
.susaki-qualifications__label {
font-size: 0.75rem;
color: #FF8C1A;
font-weight: 700;
margin-bottom: 2px;
letter-spacing: 0.05em;
}
.susaki-qualifications__name {
color: #0D5A8A;
font-weight: 600;
line-height: 1.4;
}
@media screen and (max-width: 767px) {
.susaki-qualifications__grid {
grid-template-columns: 1fr;
gap: 8px;
}
.susaki-qualifications__item {
padding: 12px 14px;
}
}
/* ==================================================================
17. 信念メッセージ帯（グラデーション）
================================================================== */
.susaki-message {
background: linear-gradient(135deg, #29A7E0 0%, #0D5A8A 100%);
padding: 32px 24px;
border-radius: 8px;
text-align: center;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(41, 167, 224, 0.2);
}
.susaki-message__label {
font-size: 0.95rem;
opacity: 0.9;
margin-bottom: 12px;
font-weight: 500;
letter-spacing: 0.05em;
}
.susaki-message__text {
font-size: 1.4rem;
font-weight: 700;
line-height: 1.6;
}
/* オレンジ版（強調用） */
.susaki-message--accent {
background: linear-gradient(135deg, #FF8C1A 0%, #E07614 100%);
box-shadow: 0 4px 12px rgba(255, 140, 26, 0.25);
}
@media screen and (max-width: 767px) {
.susaki-message {
padding: 28px 20px;
}
.susaki-message__text {
font-size: 1.2rem;
}
}
/* ==================================================================
18. 工程写真ギャラリー
================================================================== */
.susaki-process-gallery {
background: #EAF6FC;
padding: 24px;
border-radius: 8px;
margin-bottom: 24px;
}
.susaki-process-gallery__title {
text-align: center;
color: #0D5A8A;
font-weight: 700;
margin: 0 0 20px;
border: none;
padding: 0;
}
.susaki-process-gallery__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.susaki-process-gallery__item {
background: #FFFFFF;
border-radius: 6px;
padding: 12px;
text-align: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.susaki-process-gallery__image {
background: #F5F5F5;
border: 2px dashed #B5D4F4;
border-radius: 4px;
min-height: 140px;
display: flex;
align-items: center;
justify-content: center;
color: #888780;
font-size: 0.85rem;
margin-bottom: 8px;
overflow: hidden;
}
.susaki-process-gallery__image img {
width: 100%;
height: auto;
display: block;
}
.susaki-process-gallery__caption {
color: #0D5A8A;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.4;
}
@media screen and (max-width: 767px) {
.susaki-process-gallery {
padding: 20px 16px;
}
.susaki-process-gallery__grid {
grid-template-columns: 1fr;
gap: 12px;
}
.susaki-process-gallery__image {
min-height: 180px;
}
}
/* ==================================================================
19. マナー徹底ポイント（アイコン4分割）
================================================================== */
.susaki-manner {
background: #FFFFFF;
padding: 28px 24px;
border-radius: 8px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.susaki-manner__title {
text-align: center;
color: #0D5A8A;
font-weight: 700;
margin: 0 0 24px;
border: none;
padding: 0;
}
.susaki-manner__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.susaki-manner__item {
background: #EAF6FC;
padding: 24px 16px;
border-radius: 8px;
text-align: center;
}
.susaki-manner__icon {
background: #29A7E0;
color: #FFFFFF;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
font-size: 1.5rem;
}
.susaki-manner__label {
color: #0D5A8A;
font-weight: 700;
font-size: 1.05rem;
margin-bottom: 6px;
line-height: 1.4;
}
.susaki-manner__desc {
color: #2C2C2A;
font-size: 0.9rem;
line-height: 1.7;
}
/* スマホ：1列表示 */
@media screen and (max-width: 767px) {
.susaki-manner {
padding: 24px 16px;
}
.susaki-manner__grid {
grid-template-columns: 1fr;
gap: 12px;
}
.susaki-manner__item {
padding: 20px 16px;
}
.susaki-manner__icon {
width: 48px;
height: 48px;
font-size: 1.3rem;
}
}
/* ==================================================================
20. パンくずリスト
================================================================== */
.breadcrumb-list,
.breadcrumb-list li,
.breadcrumb-list a,
.breadcrumb-list span {
font-size: 0.85rem;
}
/* スマホ */
@media screen and (max-width: 767px) {
.breadcrumb-list,
.breadcrumb-list li,
.breadcrumb-list a,
.breadcrumb-list span {
font-size: 0.8rem;
}
}
/* ==================================================================
21. SVGロゴのサイズ指定
================================================================== */
.site-header-logo img,
.site-header-logo a img {
width: auto !important;
height: 80px !important; /* ← この数字を変える */
max-height: 80px; /* ← ここも合わせる */
max-width: 100%;
display: block;
}
@media screen and (max-width: 991px) {
.site-header-logo img,
.site-header-logo a img {
height: 60px !important; /* ← スマホ用の数字 */
}
}
/* ==================================================================
22. ブログの次の記事へ
================================================================== */
.next-prev-prev.card-horizontal .card-body {
padding-left: 5.0rem;
}
.next-prev-next.card-horizontal .card-body {
padding-right: 5.0rem;
}
/* ==================================================================
23. TOPに戻るボタン
================================================================== */
.page_top_btn {
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
background-color: #29A7E0;
background-image: none !important; /* 元の矢印画像を消す */
border-radius: 50%;
box-shadow: 0 4px 12px rgba(41, 167, 224, 0.3);
transition: all 0.3s ease;
opacity: 0.9;
font-size: 0 !important;
}
/* 元の::beforeで作られているかもしれない矢印を消す */
.page_top_btn::before {
content: none !important;
}
.page_top_btn::after {
content: "↑";
font-size: 20px;
color: #FFFFFF;
display: block;
line-height: 50px;
text-align: center;
font-weight: 700;
}
.page_top_btn:hover {
background-color: #0D5A8A;
background-image: none !important;
box-shadow: 0 6px 16px rgba(13, 90, 138, 0.4);
opacity: 1;
transform: translateY(-3px);
}
/* ============================================================
スサキ塗装 投稿ページ専用 見出しCSS
- .single-post : 個別投稿ページのみに適用（固定ページには影響しない）
- カラー：#29A7E0(キー) / #0D5A8A(濃紺) / #EAF6FC(薄水色)
/ #FF8C1A(オレンジ) / #FFC107(ゴールド)
============================================================ */
/* ----- entry-title（記事タイトル） -----
薄水色グラデ背景＋左バー */
.single-post .entry-title {
position: relative;
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 700;
line-height: 1.5;
color: #0D5A8A;
padding: 16px 20px 16px 22px;
margin: 0 0 32px;
background: linear-gradient(135deg, #EAF6FC 0%, #ffffff 100%);
border-left: 6px solid #29A7E0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(41, 167, 224, 0.12);
}
/* ----- h2（章見出し） -----
水色→濃紺のグラデ背景に白文字 */
.single-post h2 {
position: relative;
font-size: clamp(18px, 2.2vw, 22px);
font-weight: 700;
line-height: 1.5;
color: #ffffff;
background: linear-gradient(90deg, #29A7E0 0%, #0D5A8A 100%);
padding: 14px 18px 14px 26px;
margin: 48px 0 22px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(13, 90, 138, 0.18);
}
/* h2の左に縦アクセントライン（ゴールド） */
.single-post h2::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 60%;
background: #FFC107;
border-radius: 3px;
}
/* ----- h3（中見出し） -----
下線とアイコン的な装飾 */
.single-post h3 {
position: relative;
font-size: clamp(17px, 2vw, 20px);
font-weight: 700;
line-height: 1.5;
color: #0D5A8A;
padding: 8px 0 8px 32px;
margin: 36px 0 16px;
border-bottom: 2px solid #29A7E0;
}
/* h3の左に二重丸アイコン */
.single-post h3::before {
content: "";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: #29A7E0;
border-radius: 50%;
box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 2px #29A7E0;
}
/* ----- h4（小見出し） -----
オレンジの左バー */
.single-post h4 {
position: relative;
font-size: clamp(15px, 1.7vw, 17px);
font-weight: 700;
line-height: 1.5;
color: #0D5A8A;
padding: 4px 0 4px 14px;
margin: 26px 0 12px;
border-left: 4px solid #FF8C1A;
}
/* ----- h5・h6 -----
さらに控えめに */
.single-post h5 {
font-size: 16px;
font-weight: 700;
color: #0D5A8A;
margin: 20px 0 10px;
}
.single-post h6 {
font-size: 15px;
font-weight: 700;
color: #555;
margin: 18px 0 8px;
}
/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
.single-post .entry-title {
padding: 14px 14px 14px 18px;
border-left-width: 5px;
}
.single-post h2 {
padding: 12px 14px 12px 22px;
margin: 36px 0 16px;
}
.single-post h2::before {
left: 8px;
width: 4px;
}
.single-post h3 {
padding-left: 28px;
margin: 26px 0 14px;
}
}
/* ============================================================
スサキ塗装 CTA Section
============================================================ */
.susaki-cta {
background: #29A7E0; /* キーカラー：ロゴのスカイブルー */
padding: 50px 20px;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.susaki-cta__inner {
max-width: 1050px;
margin: 0 auto;
}
/* タイトル：お問い合わせ ・ INQUIRY */
.susaki-cta__title {
text-align: center;
margin: 0 0 28px;
padding: 0;
line-height: 1;
}
.susaki-cta__title-jp {
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.2em;
}
.susaki-cta__title-dot {
display: inline-block;
vertical-align: middle;
width: 7px;
height: 7px;
background: #FFC107;
border-radius: 50%;
margin: 0 18px;
}
.susaki-cta__title-en {
display: inline-block;
vertical-align: middle;
color: #FFC107;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.18em;
font-family: "Jost", Arial, sans-serif;
}
/* 4ボタングリッド */
.susaki-cta__grid {
display: grid;
grid-template-columns: 1.15fr 1fr 1fr 0.78fr;
gap: 12px;
margin-bottom: 16px;
}
/* ボタン共通 */
.susaki-cta__btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
text-decoration: none;
padding: 18px 12px;
border-radius: 10px;
min-height: 92px;
box-sizing: border-box;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.susaki-cta__btn:hover {
transform: translateY(-2px);
opacity: 0.92;
}
/* ① 電話番号ボタン */
.susaki-cta__btn--tel {
background: #FF8C1A;
color: #FFFFFF;
}
.susaki-cta__tel-number {
display: block;
font-family: "Jost", Arial, sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.1;
}
.susaki-cta__tel-icon {
font-size: 22px;
margin-right: 4px;
vertical-align: 1px;
}
.susaki-cta__tel-time {
display: block;
margin-top: 8px;
font-size: 12px;
font-weight: 500;
}
/* ② 無料相談ボタン / ③ 来店予約ボタン共通の白ベース */
.susaki-cta__btn--mail,
.susaki-cta__btn--showroom,
.susaki-cta__btn--line {
background: #FFFFFF;
}
.susaki-cta__btn-catch {
display: block;
font-size: 12px;
color: #333333;
font-weight: 500;
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.susaki-cta__btn-ttl {
display: block;
font-size: 18px;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.02em;
}
.susaki-cta__btn-ttl--mail {
color: #FF8C1A;
}
.susaki-cta__btn-ttl--showroom {
color: #0D5A8A; /* 濃紺 */
}
.susaki-cta__btn-icon {
display: inline-block;
margin-right: 4px;
vertical-align: -1px;
}
.susaki-cta__btn-arrow {
display: inline-block;
margin-left: 4px;
font-weight: 700;
}
/* 「来店予約」だけ蛍光ペン風アンダーライン */
.susaki-cta__marker {
background: linear-gradient(transparent 65%, #FFC107 65%);
padding: 0 2px;
}
/* ④ LINEボタン */
.susaki-cta__btn--line {
padding: 14px 8px;
}
.susaki-cta__line-badge {
display: inline-block;
background: #06C755;
color: #FFFFFF;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
padding: 3px 12px;
border-radius: 4px;
margin-bottom: 6px;
}
.susaki-cta__btn-ttl--line {
color: #0D5A8A;
font-size: 16px;
line-height: 1.3;
}
/* ⑤ 見積シミュレーション バナー（テキスト版） */
.susaki-cta__sim {
display: flex;
align-items: center;
gap: 18px;
background: #FF8C1A;
border-radius: 10px;
padding: 16px 22px;
text-decoration: none;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.susaki-cta__sim:hover {
transform: translateY(-2px);
opacity: 0.94;
}
.susaki-cta__sim-badge {
flex-shrink: 0;
background: #FFC107;
color: #0D5A8A;
font-size: 14px;
font-weight: 800;
text-align: center;
padding: 8px 14px;
border-radius: 8px;
transform: rotate(-6deg);
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
line-height: 1.1;
}
.susaki-cta__sim-badge-min {
display: block;
font-size: 22px;
margin-top: 2px;
}
.susaki-cta__sim-text {
flex: 1;
color: #FFFFFF;
}
.susaki-cta__sim-sub {
display: block;
font-size: 13px;
font-weight: 700;
opacity: 0.95;
margin-bottom: 2px;
}
.susaki-cta__sim-main {
display: block;
font-size: 24px;
font-weight: 800;
letter-spacing: 0.03em;
line-height: 1.15;
}
.susaki-cta__sim-arrow-box {
flex-shrink: 0;
background: #FFFFFF;
color: #FF8C1A;
padding: 9px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 800;
text-align: center;
line-height: 1.35;
}
/* バナー画像版（差し替え時用） */
.susaki-cta__sim-banner {
display: block;
border-radius: 10px;
overflow: hidden;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.susaki-cta__sim-banner:hover {
transform: translateY(-2px);
opacity: 0.94;
}
.susaki-cta__sim-banner img {
display: block;
width: 100%;
height: auto;
}
/* ============================================================
タブレット（〜960px）：シミュバナーの右側ラベルを下に
============================================================ */
@media screen and (max-width: 960px) {
.susaki-cta__sim-arrow-box {
font-size: 12px;
padding: 8px 10px;
}
.susaki-cta__sim-main {
font-size: 20px;
}
}
/* ============================================================
スマホ（〜767px）
============================================================ */
@media screen and (max-width: 767px) {
.susaki-cta {
padding: 36px 16px;
}
.susaki-cta__title {
margin-bottom: 22px;
}
.susaki-cta__title-jp {
font-size: 22px;
letter-spacing: 0.15em;
}
.susaki-cta__title-en {
font-size: 16px;
}
.susaki-cta__title-dot {
margin: 0 12px;
}
/* 4ボタンを 2×2 にする */
.susaki-cta__grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* 電話ボタンは1行ぶち抜き（タップで電話発信できる重要ボタン） */
.susaki-cta__btn--tel {
grid-column: 1 / -1;
padding: 14px 10px;
min-height: auto;
}
.susaki-cta__tel-number {
font-size: 26px;
}
.susaki-cta__btn {
min-height: 80px;
padding: 14px 8px;
}
.susaki-cta__btn-catch {
font-size: 11px;
}
.susaki-cta__btn-ttl {
font-size: 15px;
}
.susaki-cta__btn-ttl--line {
font-size: 14px;
}
/* 見積シミュは縦組みに */
.susaki-cta__sim {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 10px;
padding: 16px;
}
.susaki-cta__sim-badge {
align-self: center;
transform: rotate(-4deg);
}
.susaki-cta__sim-main {
font-size: 22px;
}
.susaki-cta__sim-arrow-box {
font-size: 13px;
}
}
/* ============================================================
小型スマホ（〜374px）の微調整
============================================================ */
@media screen and (max-width: 374px) {
.susaki-cta__tel-number {
font-size: 22px;
}
.susaki-cta__btn-ttl {
font-size: 14px;
}
.susaki-cta__sim-main {
font-size: 20px;
}
}
/**
* ============================================================
* 【追記用】お客様の声（susaki_voice）関連 ★v2 改良版
* ============================================================
*
* 【v1からの変更点】
* ・register_post_type 引数に show_ui / show_in_menu / publicly_queryable を明示
* ・menu_position を 7 → 8 に変更（既存6:施工事例 と隣接しすぎないよう調整）
* ・ACF未インストール時の安全対策（function_exists チェック追加）
*
* 【追記場所】
* 既存 functions.php の最終行に貼り付け。
* ※ 既に v1 を貼り付けている場合は、v1部分（22〜33）を全て削除してから
* このv2に置き換えてください。
*
* @package lightning-child
*/
/* ============================================================
* 22. カスタム投稿タイプ「お客様の声」を登録
* 投稿タイプID: susaki_voice
* URLスラッグ: /voice/
* ============================================================ */
function susaki_register_voice_post_type() {
$labels = array(
'name' => 'お客様の声',
'singular_name' => 'お客様の声',
'menu_name' => 'お客様の声',
'all_items' => 'お客様の声一覧',
'add_new' => '新規追加',
'add_new_item' => 'お客様の声を新規追加',
'edit_item' => 'お客様の声を編集',
'new_item' => '新しいお客様の声',
'view_item' => 'お客様の声を表示',
'search_items' => 'お客様の声を検索',
'not_found' => 'お客様の声が見つかりません',
'not_found_in_trash' => 'ゴミ箱にお客様の声はありません',
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true, /* ★管理画面メニューに表示 */
'show_in_menu' => true, /* ★メニュー表示を明示 */
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'show_in_rest' => true,
'exclude_from_search' => false,
'has_archive' => 'voice',
'menu_position' => 8, /* 既存 施工事例(6) の少し下 */
'menu_icon' => 'dashicons-format-quote',
'supports' => array( 'title', 'editor', 'thumbnail', 'revisions' ),
'rewrite' => array( 'slug' => 'voice', 'with_front' => false ),
'capability_type' => 'post',
'map_meta_cap' => true,
'hierarchical' => false,
);
register_post_type( 'susaki_voice', $args );
}
add_action( 'init', 'susaki_register_voice_post_type' );
/* ============================================================
* 23. 既存タクソノミーに susaki_voice を追加
*
* works_sekousyu（工事内容） : susaki_works + susaki_voice + susaki_menu
* works_area（地域別） : susaki_works + susaki_voice
* works_jutaku（住宅別） : susaki_works + susaki_voice
* ============================================================ */
function susaki_voice_register_shared_taxonomies() {
register_taxonomy_for_object_type( 'works_sekousyu', 'susaki_voice' );
register_taxonomy_for_object_type( 'works_sekousyu', 'susaki_menu' );
register_taxonomy_for_object_type( 'works_area', 'susaki_voice' );
register_taxonomy_for_object_type( 'works_jutaku', 'susaki_voice' );
}
add_action( 'init', 'susaki_voice_register_shared_taxonomies', 12 );
/* ============================================================
* 24. お客様の声アーカイブの表示件数を12件に
* ============================================================ */
function susaki_voice_archive_posts_per_page( $query ) {
if ( is_admin() || ! $query->is_main_query() ) {
return;
}
if ( $query->is_post_type_archive( 'susaki_voice' ) ) {
$query->set( 'posts_per_page', 12 );
}
}
add_action( 'pre_get_posts', 'susaki_voice_archive_posts_per_page' );
/* ============================================================
* 25. お客様の声のACFフィールドグループを本文真下に
* ★ ACF UI でフィールドグループを作成する際、必ず以下のキーを設定：
* group_susaki_voice
* ============================================================ */
function susaki_voice_acf_priority_high( $field_group ) {
if ( isset( $field_group['key'] ) && 'group_susaki_voice' === $field_group['key'] ) {
$field_group['position'] = 'normal';
$field_group['menu_order'] = -100;
}
return $field_group;
}
add_filter( 'acf/load_field_group', 'susaki_voice_acf_priority_high' );
function susaki_voice_acf_metabox_priority() {
global $wp_meta_boxes;
if ( ! isset( $wp_meta_boxes['susaki_voice']['normal'] ) ) {
return;
}
$priorities = array( 'high', 'core', 'default', 'low' );
foreach ( $priorities as $priority ) {
if ( ! isset( $wp_meta_boxes['susaki_voice']['normal'][ $priority ] ) ) {
continue;
}
foreach ( $wp_meta_boxes['susaki_voice']['normal'][ $priority ] as $id => $metabox ) {
if ( strpos( $id, 'acf-group_susaki_voice' ) === 0 ) {
if ( 'high' === $priority ) {
continue;
}
if ( ! isset( $wp_meta_boxes['susaki_voice']['normal']['high'] ) ) {
$wp_meta_boxes['susaki_voice']['normal']['high'] = array();
}
$wp_meta_boxes['susaki_voice']['normal']['high'][ $id ] = $metabox;
unset( $wp_meta_boxes['susaki_voice']['normal'][ $priority ][ $id ] );
}
}
}
}
add_action( 'do_meta_boxes', 'susaki_voice_acf_metabox_priority', 9999 );
/* ============================================================
* 26. アンケート画像（表）→アイキャッチに自動同期
* ============================================================ */
function susaki_voice_sync_survey_to_thumbnail( $post_id ) {
if ( 'susaki_voice' !== get_post_type( $post_id ) ) {
return;
}
if ( wp_is_post_revision( $post_id ) || wp_is_post_autosave( $post_id ) ) {
return;
}
if ( ! function_exists( 'get_field' ) ) {
return;
}
$survey_front = get_field( 'survey_front', $post_id );
if ( $survey_front ) {
$image_id = 0;
if ( is_array( $survey_front ) && isset( $survey_front['ID'] ) ) {
$image_id = intval( $survey_front['ID'] );
} elseif ( is_numeric( $survey_front ) ) {
$image_id = intval( $survey_front );
}
if ( $image_id > 0 ) {
set_post_thumbnail( $post_id, $image_id );
}
} else {
delete_post_thumbnail( $post_id );
}
}
add_action( 'acf/save_post', 'susaki_voice_sync_survey_to_thumbnail', 20 );
/* ============================================================
* 27. 標準アイキャッチメタボックスを非表示（お客様の声）
* ============================================================ */
function susaki_voice_hide_thumbnail_metabox() {
remove_meta_box( 'postimagediv', 'susaki_voice', 'side' );
}
add_action( 'add_meta_boxes', 'susaki_voice_hide_thumbnail_metabox', 9999 );
/* ============================================================
* 28. お客様の声 専用CSSの条件付き読み込み
* ============================================================ */
function susaki_voice_enqueue_style() {
$theme_uri = get_stylesheet_directory_uri();
$theme_dir = get_stylesheet_directory();
$css_path = '/assets/css/susaki-voice.css';
$css_file = $theme_dir . $css_path;
$match = false;
if ( is_singular( 'susaki_voice' ) ) {
$match = true;
} elseif ( is_post_type_archive( 'susaki_voice' ) ) {
$match = true;
}
if ( ! $match || ! file_exists( $css_file ) ) {
return;
}
wp_enqueue_style(
'susaki-voice',
$theme_uri . $css_path,
array( 'lightning-theme-style' ),
filemtime( $css_file )
);
}
add_action( 'wp_enqueue_scripts', 'susaki_voice_enqueue_style', 20 );
/* ============================================================
* 29. お客様の声 専用サイドバー登録
* ウィジェットID: sidebar-susaki-voice
* ============================================================ */
function susaki_register_voice_sidebar() {
register_sidebar( array(
'name' => 'サイドバー（お客様の声）',
'id' => 'sidebar-susaki-voice',
'description' => 'お客様の声（カスタム投稿）専用のサイドバー。',
'before_widget' => '',
'after_widget' => '
',
'before_title' => '',
) );
}
add_action( 'widgets_init', 'susaki_register_voice_sidebar' );
/* ============================================================
* 30. お客様の声 個別ページで2カラム表示を有効化
* ============================================================ */
add_filter( 'lightning_is_subsection', function ( $is_sub ) {
if ( is_singular( 'susaki_voice' ) ) {
return true;
}
return $is_sub;
} );
/* ============================================================
* 31. GLightbox 読み込み（お客様の声 個別ページ）
* ============================================================ */
function susaki_voice_enqueue_glightbox() {
if ( ! is_singular( 'susaki_voice' ) ) {
return;
}
wp_enqueue_style(
'glightbox',
'https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css',
array(),
'3.3.0'
);
wp_enqueue_script(
'glightbox',
'https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js',
array(),
'3.3.0',
true
);
wp_add_inline_script(
'glightbox',
'document.addEventListener("DOMContentLoaded", function() {
if (typeof GLightbox === "function") {
GLightbox({
selector: ".glightbox",
touchNavigation: true,
loop: true,
autoplayVideos: false
});
}
});'
);
}
add_action( 'wp_enqueue_scripts', 'susaki_voice_enqueue_glightbox', 30 );
/* ============================================================
* 32. お客様の声 絞り込みリスト ショートコード
* 使い方: [susaki_voice_filter]
* ============================================================ */
function susaki_voice_filter_shortcode( $atts ) {
$atts = shortcode_atts( array(
'show_count' => 'yes',
), $atts, 'susaki_voice_filter' );
$taxonomies = array(
'works_area' => '地域別',
'works_sekousyu' => '工事内容',
'works_jutaku' => '住宅別',
);
$is_tax_page = is_tax( array_keys( $taxonomies ) );
$queried = $is_tax_page ? get_queried_object() : null;
ob_start();
?>
is_main_query() ) {
return;
}
if ( ! $query->is_post_type_archive( 'susaki_voice' ) ) {
return;
}
$tax_filters = array( 'works_area', 'works_sekousyu', 'works_jutaku' );
$tax_query = array();
foreach ( $tax_filters as $tax ) {
if ( ! empty( $_GET[ $tax ] ) ) {
$slug = sanitize_text_field( wp_unslash( $_GET[ $tax ] ) );
$tax_query[] = array(
'taxonomy' => $tax,
'field' => 'slug',
'terms' => $slug,
);
}
}
if ( ! empty( $tax_query ) ) {
if ( count( $tax_query ) > 1 ) {
$tax_query['relation'] = 'AND';
}
$query->set( 'tax_query', $tax_query );
}
}
add_action( 'pre_get_posts', 'susaki_voice_archive_tax_filter' );
/* ============================================================/* ===========================================
お気軽にご相談ください カード
FAQページ末尾用 / スサキ塗装
=========================================== */
.susaki-consult-card {
position: relative;
background: #FFFFFF;
border: 2px solid #29A7E0;
border-radius: 12px;
padding: 28px;
margin: 40px 0;
box-sizing: border-box;
}
/* 左上のゴールドバッジ */
.susaki-consult-card__badge {
position: absolute;
top: -14px;
left: 24px;
background: #FFC107;
color: #5A3E00;
font-size: 12px;
font-weight: 500;
padding: 4px 14px;
border-radius: 4px;
line-height: 1.4;
}
/* アイコンと本文の横並びレイアウト */
.susaki-consult-card__inner {
display: flex;
gap: 20px;
align-items: flex-start;
flex-wrap: wrap;
}
/* 左の丸アイコン */
.susaki-consult-card__icon {
flex: 0 0 80px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #29A7E0;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 36px;
}
.susaki-consult-card__icon i {
line-height: 1;
}
/* 右側の本文ブロック */
.susaki-consult-card__body {
flex: 1;
min-width: 280px;
}
.susaki-consult-card__title {
font-size: 20px;
color: #0D5A8A;
margin: 0 0 12px;
font-weight: 500;
line-height: 1.4;
}
.susaki-consult-card__text {
font-size: 14px;
color: #444444;
line-height: 1.8;
margin: 0;
}
/* ===========================================
スマホ対応（768px以下）
=========================================== */
@media (max-width: 768px) {
.susaki-consult-card {
padding: 24px 20px;
}
.susaki-consult-card__inner {
gap: 16px;
}
.susaki-consult-card__icon {
flex: 0 0 64px;
width: 64px;
height: 64px;
font-size: 30px;
}
.susaki-consult-card__title {
font-size: 18px;
}
.susaki-consult-card__text {
font-size: 14px;
line-height: 1.7;
}
}
/* ==================================================================
固定ページ用 見出しスタイル
スクショの「施工事例」見出しと同じデザイン
下に青いラインが入るシンプルな見出し
================================================================== */
/* 見出し（H2）専用クラス */
.susaki-page-heading {
font-size: 1.4rem !important;
font-weight: bold !important;
color: #0D5A8A !important;
padding: 0 0 0.6em 0 !important;
margin: 1.5em 0 1em !important;
border-bottom: 3px solid #29A7E0 !important;
background: none !important;
line-height: 1.4 !important;
}
/* h3向け（もう少し小さい見出し） */
.susaki-page-subheading {
font-size: 1.2rem !important;
font-weight: bold !important;
color: #0D5A8A !important;
padding: 0 0 0.5em 0 !important;
margin: 1.5em 0 1em !important;
border-bottom: 2px solid #29A7E0 !important;
background: none !important;
line-height: 1.4 !important;
}
/* スマホ調整 */
@media (max-width: 575px) {
.susaki-page-heading {
font-size: 1.2rem !important;
}
.susaki-page-subheading {
font-size: 1.05rem !important;
}
}
/* ==================================================================
スサキ塗装 セクション見出し（調整版・上部余白詰め）
使い方:
スサキ塗装の安心ラインナップ
・上の英字（data-en）: オレンジ #FF8C1A
・下のタイトル: 水色 #29A7E0
・下線: ゴールド #FFC107
================================================================== */
h2.susaki-lineup-heading-en,
.susaki-lineup-heading-en {
position: relative !important;
display: block !important;
font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important;
font-weight: bold !important;
color: #29A7E0 !important;
text-align: center !important;
margin: 2em auto 1.2em !important;
padding: 0.8em 0 0.5em !important; /* ★ 上余白 1.6em → 0.8em に詰めた */
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
line-height: 1.3 !important;
}
h2.susaki-lineup-heading-en::before,
.susaki-lineup-heading-en::before {
content: attr(data-en) !important;
position: absolute !important;
top: 0 !important; /* ★ 0.4em → 0 に */
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 0.75rem !important;
font-weight: bold !important;
letter-spacing: 0.3em !important;
color: #FF8C1A !important;
font-family: 'Arial', 'Helvetica', sans-serif !important;
background: none !important;
width: auto !important;
height: auto !important;
line-height: 1 !important; /* ★ 行間タイトに */
}
h2.susaki-lineup-heading-en::after,
.susaki-lineup-heading-en::after {
content: '' !important;
display: block !important;
position: static !important;
width: 50px !important;
height: 3px !important;
background: #FFC107 !important;
margin: 0.5em auto 0 !important;
border-radius: 2px !important;
transform: none !important;
}
@media (max-width: 575px) {
h2.susaki-lineup-heading-en,
.susaki-lineup-heading-en {
margin-left: 1em !important;
margin-right: 1em !important;
font-size: 1.05rem !important;
}
h2.susaki-lineup-heading-en::before,
.susaki-lineup-heading-en::before {
font-size: 0.7rem !important;
}
}
/* ==================================================================
アーカイブページタイトル（青い下線）
対象:
- .archive-header-title（ブログアーカイブなど）
- .susaki-page-heading（固定ページで使う既存クラス）
使い方: HTML側の変更は不要
================================================================== */
.archive-header-title,
.susaki-page-heading {
font-size: 1.4rem !important;
font-weight: bold !important;
color: #0D5A8A !important;
padding: 0 0 0.6em 0 !important;
margin: 1.5em 0 1em !important;
border-bottom: 3px solid #29A7E0 !important;
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
line-height: 1.4 !important;
text-align: left !important;
}
/* スマホ */
@media (max-width: 575px) {
.archive-header-title,
.susaki-page-heading {
font-size: 1.2rem !important;
}
}
/* ==========================================================
スサキ塗装 CTA Ver.2
完成版CSS（HTML Ver.2対応）
========================================================== */
.susaki-cta{
background:#29A7E0;
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
margin-top:40px;
margin-bottom:0 !important;
padding:56px 24px;
box-sizing:border-box;
}
.susaki-cta__container{
max-width:1280px;
margin:0 auto;
}
.susaki-cta__header{
margin-bottom:28px;
text-align:center;
}
.susaki-cta__title{
margin:0;
color:#fff;
font-size:36px;
font-weight:700;
letter-spacing:.15em;
line-height:1.3;
border:none;
padding:0;
}
.susaki-cta__title span{
display:inline-block;
margin-left:18px;
color:#FFC107;
font-size:22px;
letter-spacing:.18em;
}
.susaki-cta__grid{
display:grid;
grid-template-columns:1.25fr 1fr 1fr .85fr;
gap:16px;
margin-bottom:20px;
}
.susaki-cta__card{
background:#fff;
border-radius:10px;
border:2px solid #FF8C1A;
min-height:112px;
padding:18px 16px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
text-decoration:none;
color:#0D5A8A;
transition:.2s ease;
box-shadow:0 8px 18px rgba(0,0,0,.08);
box-sizing:border-box;
}
.susaki-cta__card:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(0,0,0,.16);
}
.susaki-cta__card--tel{
background:#FF8C1A;
color:#fff;
border:none;
}
.susaki-cta__tel{
display:flex;
align-items:center;
gap:8px;
}
.susaki-cta__tel-icon{
font-size:28px;
display:flex;
}
.susaki-cta__tel-number{
font-size:34px;
font-weight:700;
line-height:1;
}
.susaki-cta__tel-text{
margin-top:10px;
font-size:14px;
opacity:.95;
}
.susaki-cta__caption{
font-size:14px;
color:#666;
margin-bottom:8px;
}
.susaki-cta__main{
font-size:28px;
font-weight:700;
line-height:1.3;
color:#0D5A8A;
}
.susaki-cta__marker{
color:#FF8C1A;
border-bottom:3px solid #FFC107;
}
.susaki-cta__card--line{
border-color:#B5D4F4;
}
.susaki-cta__line{
display:inline-block;
background:#06C755;
color:#fff;
padding:4px 12px;
border-radius:4px;
font-size:13px;
font-weight:700;
margin-bottom:8px;
}
.susaki-cta__simulation{
display:block;
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 24px rgba(0,0,0,.12);
transition:.2s ease;
}
.susaki-cta__simulation:hover{
transform:translateY(-3px);
}
.susaki-cta__simulation img{
display:block;
width:100%;
height:auto;
}
@media (max-width:991px){
.susaki-cta{
padding:42px 20px;
}
.susaki-cta__grid{
grid-template-columns:repeat(2,1fr);
}
.susaki-cta__card--tel{
grid-column:1/-1;
}
.susaki-cta__tel-number{
font-size:30px;
}
.susaki-cta__main{
font-size:24px;
}
}
@media (max-width:575px){
.susaki-cta{
padding:32px 16px;
}
.susaki-cta__title{
font-size:28px;
}
.susaki-cta__title span{
display:block;
margin:8px 0 0;
font-size:16px;
}
.susaki-cta__grid{
grid-template-columns:1fr;
gap:12px;
}
.susaki-cta__card{
min-height:96px;
}
.susaki-cta__tel-number{
font-size:28px;
}
.susaki-cta__caption{
font-size:13px;
}
.susaki-cta__main{
font-size:22px;
}
}
/* ==================================================================
スサキ塗装 CTA シミュレーションバナー サイズ調整
・最大幅を1000pxに絞ってバランス調整
・中央寄せ
・スマホ時はそのまま画面いっぱい
================================================================== */
.susaki-cta__simulation {
display: block;
max-width: 1000px !important;
margin: 24px auto 0 !important;
}
.susaki-cta__simulation img,
.susaki-cta__simulation picture {
display: block;
width: 100%;
height: auto;
}
/* スマホは幅一杯にする */
@media (max-width: 767px) {
.susaki-cta__simulation {
max-width: 100% !important;
margin: 16px auto 0 !important;
}
}
/* ==================================================================
スサキ塗装 ヘッダーナビ 子メニュー
Lightning sub-menu対応版
・背景: 白
・文字: 濃紺 #0D5A8A
・ホバー時: 薄水色背景
・選択中: スカイブルー背景 + 白文字
================================================================== */
/* 子メニュー全体 */
ul.sub-menu {
background: #ffffff !important;
border-top: 3px solid #29A7E0 !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
border-radius: 0 0 6px 6px !important;
overflow: hidden !important;
padding: 0 !important;
}
/* 子メニューの各項目 */
ul.sub-menu li.menu-item {
background: #ffffff !important;
list-style: none !important;
margin: 0 !important;
}
ul.sub-menu li.menu-item a {
background: #ffffff !important;
background-color: #ffffff !important;
color: #0D5A8A !important;
font-weight: 500 !important;
padding: 14px 20px !important;
border-bottom: 1px solid #EAF6FC !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
display: block !important;
}
/* 最後の項目は下線なし */
ul.sub-menu li.menu-item:last-child a {
border-bottom: none !important;
}
/* ホバー時 */
ul.sub-menu li.menu-item a:hover {
background: #EAF6FC !important;
background-color: #EAF6FC !important;
color: #0D5A8A !important;
padding-left: 24px !important;
}
/* 現在のページ */
ul.sub-menu li.current-menu-item > a,
ul.sub-menu li.current_page_item > a,
ul.sub-menu li.current-page-ancestor > a {
background: #29A7E0 !important;
background-color: #29A7E0 !important;
color: #ffffff !important;
font-weight: bold !important;
}
ul.sub-menu li.current-menu-item > a:hover,
ul.sub-menu li.current_page_item > a:hover,
ul.sub-menu li.current-page-ancestor > a:hover {
background: #1B7FAB !important;
background-color: #1B7FAB !important;
color: #ffffff !important;
}
/* ==================================================================
スサキ塗装 Contact Form 7 CSS モダン版
・外側の白カード枠を削除
・各項目に薄水色背景でカード風に
・幅を950pxに拡大
・入力欄をよりモダンに
================================================================== */
/* ================================================
共通コンテナ（cf-tbl）- 外枠削除
================================================ */
#cf-tbl {
max-width: 950px;
margin: 30px auto;
background: transparent; /* 背景透明に */
border-radius: 0;
padding: 0; /* 内側パディングなし */
box-shadow: none; /* 影削除 */
border: none; /* 枠線削除 */
box-sizing: border-box;
}
#cf-tbl table {
width: 100%;
border-collapse: separate; /* 各行を分離させる */
border-spacing: 0 12px; /* 行間の余白 */
margin: 0;
}
#cf-tbl tbody {
display: table-row-group;
}
#cf-tbl tr {
background: #F5FBFE; /* 各行を薄水色の背景に */
border-radius: 8px;
transition: all 0.2s ease;
border-bottom: none !important;
}
#cf-tbl tr:hover {
background: #EAF6FC; /* ホバー時少し濃く */
}
/* ================================================
項目名（th）と入力欄（td）
================================================ */
#cf-tbl th,
#cf-tbl td {
padding: 20px 24px;
vertical-align: middle;
text-align: left;
border: none;
}
/* 左角丸 */
#cf-tbl th {
width: 28%;
font-weight: bold;
color: #0D5A8A;
font-size: 15px;
background: transparent;
position: relative;
border-radius: 8px 0 0 8px;
border-right: 1px solid #DFE9F0;
}
/* 右角丸 */
#cf-tbl td {
width: 72%;
color: #333;
font-size: 15px;
background: transparent;
border-radius: 0 8px 8px 0;
}
/* ================================================
必須マーク
================================================ */
.required {
display: inline-block;
background: #E53935;
color: #ffffff;
font-size: 11px;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
margin-left: 8px;
vertical-align: middle;
letter-spacing: 0.05em;
}
/* ================================================
青いリンク
================================================ */
#cf-tbl .blue,
form .blue {
color: #29A7E0;
text-decoration: underline;
font-weight: 500;
}
#cf-tbl .blue:hover,
form .blue:hover {
color: #1B7FAB;
text-decoration: none;
}
/* ================================================
入力欄（text, tel, email, number, date）
================================================ */
#cf-tbl input[type="text"],
#cf-tbl input[type="tel"],
#cf-tbl input[type="email"],
#cf-tbl input[type="number"],
#cf-tbl input[type="date"],
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="number"],
form input[type="date"] {
width: 100%;
max-width: 100%;
padding: 12px 16px;
background: #ffffff;
border: 1px solid #DFE9F0; /* ボーダー細く */
border-radius: 6px;
font-size: 15px;
color: #333;
transition: all 0.2s ease;
box-sizing: border-box;
font-family: inherit;
}
#cf-tbl input[type="text"]:focus,
#cf-tbl input[type="tel"]:focus,
#cf-tbl input[type="email"]:focus,
#cf-tbl input[type="number"]:focus,
#cf-tbl input[type="date"]:focus,
form input[type="text"]:focus,
form input[type="tel"]:focus,
form input[type="email"]:focus,
form input[type="number"]:focus,
form input[type="date"]:focus {
outline: none;
border-color: #29A7E0;
box-shadow: 0 0 0 3px rgba(41, 167, 224, 0.15);
background: #ffffff;
}
/* プレースホルダーの色 */
#cf-tbl input::placeholder,
form input::placeholder,
form textarea::placeholder {
color: #B0C4D5;
font-size: 14px;
}
/* 日付フィールドは幅を絞る */
#cf-tbl input[type="date"] {
width: auto;
min-width: 180px;
margin-right: 8px;
}
/* 電話番号・数値は少し短めに */
#cf-tbl input[type="tel"],
#cf-tbl input[type="number"] {
max-width: 300px;
}
/* ================================================
セレクトボックス
================================================ */
#cf-tbl select,
form select {
width: 100%;
padding: 12px 44px 12px 16px;
background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2329A7E0'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") no-repeat right 12px center;
background-size: 20px;
border: 1px solid #DFE9F0;
border-radius: 6px;
font-size: 15px;
color: #333;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-family: inherit;
transition: all 0.2s ease;
box-sizing: border-box;
}
#cf-tbl select:focus,
form select:focus {
outline: none;
border-color: #29A7E0;
box-shadow: 0 0 0 3px rgba(41, 167, 224, 0.15);
}
/* ================================================
テキストエリア（メッセージ本文）
================================================ */
#cf-tbl textarea,
form textarea {
width: 100%;
max-width: 100%;
min-height: 140px;
padding: 12px 16px;
background: #ffffff;
border: 1px solid #DFE9F0;
border-radius: 6px;
font-size: 15px;
color: #333;
transition: all 0.2s ease;
box-sizing: border-box;
font-family: inherit;
resize: vertical;
line-height: 1.6;
}
#cf-tbl textarea:focus,
form textarea:focus {
outline: none;
border-color: #29A7E0;
box-shadow: 0 0 0 3px rgba(41, 167, 224, 0.15);
}
/* ================================================
チェックボックス
================================================ */
.wpcf7-checkbox,
.wpcf7-list-item {
margin: 0 !important;
}
.wpcf7-checkbox {
display: flex;
flex-direction: column;
gap: 10px;
}
.wpcf7-list-item {
display: block;
}
.wpcf7-list-item label {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #ffffff;
border: 1px solid #DFE9F0;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 15px;
color: #333;
}
.wpcf7-list-item label:hover {
border-color: #29A7E0;
background: #F5FBFE;
}
.wpcf7-list-item input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
accent-color: #29A7E0;
flex-shrink: 0;
}
/* ================================================
見積シミュレーション用（dl/dt/dd）
================================================ */
form dl {
max-width: 950px;
margin: 30px auto;
padding: 0;
}
form dl dt {
font-size: 16px;
font-weight: bold;
color: #0D5A8A;
background: #EAF6FC;
padding: 14px 20px;
border-left: 5px solid #29A7E0;
border-radius: 4px;
margin: 24px 0 12px;
}
form dl dt:first-child {
margin-top: 0;
}
form dl dd {
padding: 0 20px 20px;
margin: 0;
font-size: 14px;
color: #555;
line-height: 1.7;
}
form dl dd .wpcf7-checkbox {
margin-top: 12px !important;
}
/* ================================================
送信ボタン
================================================ */
#cf-tbl + p,
form p:has(input[type="submit"]) {
text-align: center;
margin-top: 30px;
}
input[type="submit"],
.wpcf7-submit {
display: inline-block;
background: linear-gradient(135deg, #FF8C1A 0%, #FF6B00 100%);
color: #ffffff !important;
font-size: 18px;
font-weight: bold;
padding: 16px 60px;
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(255, 140, 26, 0.4);
transition: all 0.2s ease;
letter-spacing: 0.05em;
font-family: inherit;
min-width: 280px;
}
input[type="submit"]:hover,
.wpcf7-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 140, 26, 0.5);
background: linear-gradient(135deg, #FF6B00 0%, #FF8C1A 100%);
}
input[type="submit"]:active,
.wpcf7-submit:active {
transform: translateY(0);
box-shadow: 0 3px 8px rgba(255, 140, 26, 0.4);
}
/* ================================================
バリデーションメッセージ
================================================ */
.wpcf7-not-valid-tip {
color: #E53935 !important;
font-size: 13px !important;
font-weight: bold;
margin-top: 6px !important;
display: block;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
background: #FEECEC;
border: 2px solid #E53935 !important;
color: #E53935;
padding: 14px 18px;
border-radius: 6px;
margin: 20px 0 0 !important;
font-weight: 500;
}
.wpcf7 form.sent .wpcf7-response-output {
background: #E8F5E9;
border: 2px solid #4CAF50 !important;
color: #2E7D32;
padding: 14px 18px;
border-radius: 6px;
margin: 20px 0 0 !important;
font-weight: 500;
}
/* ================================================
ローディングスピナー
================================================ */
.wpcf7-spinner {
margin-left: 10px !important;
}
/* ================================================
レスポンシブ（スマホ・タブレット）
================================================ */
@media (max-width: 767px) {
#cf-tbl {
margin: 20px 0;
}
#cf-tbl table {
border-spacing: 0 10px;
}
#cf-tbl table,
#cf-tbl tbody,
#cf-tbl tr,
#cf-tbl th,
#cf-tbl td {
display: block;
width: 100%;
}
#cf-tbl tr {
padding: 16px;
background: #F5FBFE;
border-radius: 8px;
margin-bottom: 12px;
}
#cf-tbl th {
padding: 0 0 12px 0;
font-size: 15px;
border-right: none;
border-radius: 0;
}
#cf-tbl td {
padding: 0;
border-radius: 0;
}
#cf-tbl input[type="date"] {
width: 100%;
margin-right: 0;
margin-bottom: 8px;
}
#cf-tbl input[type="tel"],
#cf-tbl input[type="number"] {
max-width: 100%;
}
#cf-tbl select {
width: 100%;
}
form dl {
margin: 20px 0;
}
form dl dt {
padding: 12px 14px;
font-size: 15px;
}
form dl dd {
padding: 0 14px 16px;
font-size: 13px;
}
input[type="submit"],
.wpcf7-submit {
width: 100%;
min-width: 0;
padding: 14px 20px;
font-size: 16px;
}
}
/* ==================================================================
スサキ塗装 追従CTA 完全版
・PCボタンは縦書き縦長
・スマホは下部横並び
・常時表示
================================================================== */
/* ================================================
全体コンテナ
================================================ */
.susaki-floating-cta {
position: fixed;
pointer-events: none;
z-index: 999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1 !important;
visibility: visible !important;
}
/* ================================================
PC用：右端縦並び
================================================ */
.susaki-floating-cta__pc {
position: fixed;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: auto;
z-index: 999999;
}
/* PC用ボタン（縦長・縦書き） */
.susaki-floating-cta__pc-btn {
width: 56px !important;
height: auto !important;
min-height: 140px !important;
padding: 14px 8px !important;
background: #ffffff !important;
border-radius: 8px !important;
color: #0D5A8A !important;
text-decoration: none !important;
font-weight: bold !important;
text-align: center !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
}
.susaki-floating-cta__pc-btn:hover {
transform: translateX(-4px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
text-decoration: none !important;
}
/* アイコン（横のまま） */
.susaki-floating-cta__pc-icon {
font-size: 22px !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
writing-mode: horizontal-tb !important;
}
/* テキスト（縦書き） */
.susaki-floating-cta__pc-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
text-orientation: upright !important;
-webkit-text-orientation: upright !important;
font-size: 13px !important;
line-height: 1.6 !important;
letter-spacing: 0.1em !important;
font-weight: bold !important;
white-space: nowrap !important;
overflow: visible !important;
}
/* お問い合わせ（オレンジ） */
.susaki-floating-cta__pc-btn--contact {
background: linear-gradient(135deg, #FF8C1A 0%, #FF6B00 100%) !important;
color: #ffffff !important;
}
.susaki-floating-cta__pc-btn--contact:hover {
color: #ffffff !important;
}
/* 見積シミュレーション（水色） */
.susaki-floating-cta__pc-btn--sim {
background: linear-gradient(135deg, #29A7E0 0%, #1B7FAB 100%) !important;
color: #ffffff !important;
}
.susaki-floating-cta__pc-btn--sim:hover {
color: #ffffff !important;
}
.susaki-floating-cta__pc-btn--sim .susaki-floating-cta__pc-text {
font-size: 12px !important;
}
/* LINE（緑） */
.susaki-floating-cta__pc-btn--line {
background: #06C755 !important;
color: #ffffff !important;
}
.susaki-floating-cta__pc-btn--line:hover {
color: #ffffff !important;
}
/* ================================================
スマホ用：下部横並び
================================================ */
.susaki-floating-cta__sp {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #ffffff;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
pointer-events: auto;
padding: 8px !important;
gap: 8px !important;
box-sizing: border-box;
z-index: 999999;
}
.susaki-floating-cta__sp-btn {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
padding: 10px 4px !important;
border-radius: 8px !important;
color: #ffffff !important;
text-decoration: none !important;
font-size: 11px !important;
font-weight: bold !important;
text-align: center !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
line-height: 1.3 !important;
}
.susaki-floating-cta__sp-btn:hover,
.susaki-floating-cta__sp-btn:active {
color: #ffffff !important;
text-decoration: none !important;
}
.susaki-floating-cta__sp-icon {
font-size: 20px !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 電話（オレンジ） */
.susaki-floating-cta__sp-btn--tel {
background: linear-gradient(135deg, #FF8C1A 0%, #FF6B00 100%) !important;
}
/* LINE（緑） */
.susaki-floating-cta__sp-btn--line {
background: #06C755 !important;
}
.susaki-floating-cta__sp-btn--line .susaki-floating-cta__sp-icon {
font-size: 12px !important;
background: #ffffff !important;
color: #06C755 !important;
padding: 3px 6px !important;
border-radius: 3px !important;
font-weight: bold !important;
letter-spacing: 0.05em !important;
line-height: 1 !important;
}
/* 見積もり（水色） */
.susaki-floating-cta__sp-btn--sim {
background: linear-gradient(135deg, #29A7E0 0%, #1B7FAB 100%) !important;
}
/* ================================================
レスポンシブ切替
================================================ */
/* スマホ：PC非表示、スマホ表示 */
@media (max-width: 767px) {
.susaki-floating-cta__pc {
display: none !important;
}
.susaki-floating-cta__sp {
display: flex !important;
}
}
/* PC小さめ画面：ボタン少し細く */
@media (max-width: 1200px) and (min-width: 768px) {
.susaki-floating-cta__pc-btn {
width: 50px !important;
min-height: 130px !important;
}
.susaki-floating-cta__pc-icon {
font-size: 20px !important;
}
.susaki-floating-cta__pc-text {
font-size: 12px !important;
}
}
/* 資格情報リスト サイズ変更 */
.wp-block-list.is-style-vk-arrow-mark:where(:not(.is-style-default)) li.smaller-text {
font-size: 12px !important;
line-height: 1.8 !important;
}
/* ==================================================================
追従CTA Instagram用スタイル追記
style.css の追従CTAのCSS末尾に追加してください
================================================================== */
/* ================================================
PC用 Instagram（グラデーション）
================================================ */
.susaki-floating-cta__pc-btn--instagram {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
color: #ffffff !important;
}
.susaki-floating-cta__pc-btn--instagram:hover {
color: #ffffff !important;
}
/* ================================================
スマホ用 Instagram（グラデーション）
================================================ */
.susaki-floating-cta__sp-btn--instagram {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
/* ==================================================================
STEP.〇〇 四角バッジ（文字大きめ版）
================================================================== */
.susaki-step-square {
display: inline-flex;
align-items: center;
justify-content: center;
background: #29A7E0;
color: #ffffff;
font-size: 20px;
font-weight: bold;
padding: 12px 24px;
border-radius: 4px;
letter-spacing: 0.08em;
font-family: 'Arial', sans-serif;
line-height: 1;
box-shadow: 0 2px 6px rgba(41, 167, 224, 0.3);
}
.susaki-step-square__num {
margin-left: 2px;
}
@media (max-width: 575px) {
.susaki-step-square {
font-size: 16px;
padding: 10px 18px;
}
}
/* =========================================================
* 工事写真レポート：コメント（キャプション）対応 追記分
* 配置: 既存 susaki-works.css の末尾に追記
* ========================================================= */
/* ---------- ページ内のギャラリー ---------- */
/* 画像＋コメントをひとまとまりにする figure */
.susaki-works-gallery__figure {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* グリッドの隙間をコメント分だけ少し広げる */
.susaki-works-gallery__grid {
gap: 0.8em 0.5em;
}
/* 画像部分（既存の .susaki-works-gallery__item をそのまま利用） */
.susaki-works-gallery__figure .susaki-works-gallery__item {
width: 100%;
}
/* コメント本体 */
.susaki-works-gallery__caption {
margin-top: 0.4em;
font-size: 0.78rem;
line-height: 1.5;
color: var(--susaki-text-sub, #666);
text-align: left;
word-break: break-word;
}
@media (max-width: 575px) {
.susaki-works-gallery__caption {
font-size: 0.72rem;
}
}
/* ---------- ライトボックス（GLightbox）内のコメント ----------
* data-title の内容が拡大画像の下に表示されます。
* 標準だと小さく目立たないため、読みやすく調整。
* ------------------------------------------------------------ */
.glightbox-container .gslide-description {
background: rgba(0, 0, 0, 0.65);
padding: 0.8em 1.2em;
border-radius: 4px;
}
.glightbox-container .gslide-title {
font-size: 1rem !important;
line-height: 1.6 !important;
color: #fff !important;
margin: 0 !important;
font-weight: normal !important;
text-align: center;
}
@media (max-width: 767px) {
.glightbox-container .gslide-title {
font-size: 0.85rem !important;
}
.glightbox-container .gslide-description {
padding: 0.6em 0.9em;
}
}
/* ============================================
スマホ用ハンバーガーメニュー カスタマイズ
対象サイト：susakitosou.com
------------------------------------------------
★注意★
下記のクラス名/ID名は Lightning 標準の想定です。
実機の検証ツールで確認したクラス名と違う場合は、
#vk-mobile-nav-menu-btn / .vk-mobile-nav-menu-btn / .vk-mobile-nav-menu
の部分を実際の名前に置き換えてください。
============================================ */
@media (max-width: 991px) {
/* ====== ハンバーガーボタン本体 ====== */
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn {
width: 52px !important;
height: 52px !important;
background-color: #29a7e0 !important;
background-image: none !important;
border-radius: 8px !important; /* 角丸 */
border: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 9999 !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
}
/* ホバー/タップ時：少し暗くする */
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn:hover,
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn:focus {
background-color: #1f7fab !important;
}
/* 「MENU」文字を消して三本線アイコンだけ見せる */
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn {
font-size: 0 !important;
text-indent: -9999px !important;
}
/* 三本線アイコン（疑似要素で描画・白色） */
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::before,
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::after {
content: "" !important;
display: block !important;
width: 24px !important;
height: 3px !important;
background-color: #ffffff !important;
border-radius: 2px !important;
position: absolute !important;
}
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::before { top: 18px; }
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn::after { bottom: 18px; }
/* ====== メニューを開いた時：三本線 → ✕アイコンに変化 ======
Lightningはメニューが開くとボタンに menu-open クラスが付与されるので、
そのタイミングで ::before と ::after を回転させて交差させる。
*/
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::before,
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::after {
top: 50% !important;
bottom: auto !important;
margin-top: -1.5px !important;
transition: transform 0.2s ease !important;
}
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::before {
transform: rotate(45deg) !important;
}
body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn.menu-open::after {
transform: rotate(-45deg) !important;
}
/* ====== 開いた時のメニュー本体 ======
背景色・文字色は指定なしのためサイト標準のままにしています。
変更したい場合は下記のコメントを外して色を指定してください。
*/
/*
body .vk-mobile-nav-menu {
background-color: #ffffff !important;
}
body .vk-mobile-nav-menu a {
color: #333333 !important;
}
*/
}
/* ==================================================================
モバイルメニュー下部のCTA
================================================================== */
.susaki-navcta {
display: block;
}
/* 電話ボタン（大きく） */
.susaki-navcta__tel {
display: block;
padding: 0.9em 0.6em;
margin-bottom: 10px;
background: var(--susaki-orange, #FF8C1A);
border-radius: 6px;
text-align: center;
text-decoration: none !important;
color: #fff !important;
line-height: 1.3;
}
.susaki-navcta__tel-num {
display: block;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.02em;
}
.susaki-navcta__tel-icon {
margin-right: 0.25em;
}
.susaki-navcta__tel-icon svg {
vertical-align: -0.1em;
}
.susaki-navcta__tel-time {
display: block;
font-size: 0.68rem;
margin-top: 0.3em;
font-weight: normal;
}
/* 2カラム */
.susaki-navcta__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.susaki-navcta__btn {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0.7em 0.5em;
background: #fff;
border-radius: 6px;
text-align: center;
text-decoration: none !important;
line-height: 1.35;
}
.susaki-navcta__btn--showroom {
border: 2px solid var(--susaki-gold, #FFC107);
}
.susaki-navcta__btn--contact {
border: 2px solid var(--susaki-orange, #FF8C1A);
}
.susaki-navcta__catch {
display: block;
font-size: 0.62rem;
color: var(--susaki-text-sub, #666);
margin-bottom: 0.25em;
}
.susaki-navcta__ttl {
display: block;
font-size: 0.85rem;
font-weight: bold;
color: var(--susaki-navy, #0D5A8A);
}
.susaki-navcta__btn--contact .susaki-navcta__ttl {
color: var(--susaki-orange, #FF8C1A);
}
/* 来店予約のマーカー */
.susaki-navcta__marker {
background: linear-gradient(transparent 60%, var(--susaki-gold, #FFC107) 60%);
padding: 0 0.1em;
}
/* ============================================================
前の記事／次の記事 ボタン化 + 一覧へ戻るボタン
配置先: 子テーマの style.css の末尾に追記
（Lightning子テーマは style.css を自動で読み込みます）
============================================================ */
/* ---------- 前の記事／次の記事：緑ボタン化 ---------- */
.vk_posts.next-prev {
display: flex;
gap: 12px;
margin: 30px 0 12px;
}
.vk_posts.next-prev .vk_post {
flex: 1 1 0;
position: relative;
background: var(--susaki-key, #29A7E0);
border: none;
border-radius: 6px;
box-shadow: none;
overflow: hidden;
transition: background 0.2s;
}
.vk_posts.next-prev .vk_post .card-horizontal-inner-row,
.vk_posts.next-prev .vk_post .vk_post_body.card-body {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
height: 56px;
}
/* 見えているラベル（前の記事／次の記事） */
.vk_posts.next-prev .vk_post .vk_post_imgOuter_singleTermLabel {
position: relative;
z-index: 1;
color: #fff;
font-weight: bold;
font-size: 15px;
pointer-events: none; /* クリックは下のリンクに通す */
}
/* タイトル・日付は非表示にするが、リンクだけはカード全体に広げて残す */
.vk_posts.next-prev .vk_post .vk_post_title {
position: absolute;
inset: 0;
margin: 0;
font-size: 0;
line-height: 0;
z-index: 2;
}
.vk_posts.next-prev .vk_post .vk_post_title a {
display: block;
width: 100%;
height: 100%;
}
.vk_posts.next-prev .vk_post .vk_post_dates {
display: none !important;
}
/* ---------- 一覧へ戻るボタン ---------- */
.susaki-back-to-list-btn {
display: block;
width: 100%;
background: var(--susaki-key-dark, #1B7FAB);
color: #fff !important;
text-align: center;
font-weight: bold;
font-size: 15px;
padding: 14px 0;
border-radius: 6px;
text-decoration: none !important;
margin: 0 0 30px;
transition: background 0.2s;
}
.susaki-back-to-list-btn:hover {
background: var(--susaki-navy, #0D5A8A);
color: #fff !important;
}
@media screen and (max-width: 480px) {
.vk_posts.next-prev {
gap: 8px;
}
.vk_posts.next-prev .vk_post .card-horizontal-inner-row,
.vk_posts.next-prev .vk_post .vk_post_body.card-body {
height: 48px;
}
.vk_posts.next-prev .vk_post .vk_post_imgOuter_singleTermLabel {
font-size: 13px;
}
}