/*
Theme Name: Amplio Tosou
Description: 塗装会社向けのWordPressテーマ(Amplio Base シリーズ)。施工事例を、自分で増やせる設計。
Version: 1.8.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amplio-tosou
*/

/* ===== 見た目の初期値(設定で選んだ見た目は、head の中の style で上書きされる) ===== */
:root {
	--ab-base: #FFFFFF;
	--ab-surface: #EAF0F7;
	--ab-primary: #1F3A5F;
	--ab-accent: #3B6EA5;
	--ab-contrast: #1B2430;
	--ab-line: #D5DEEA;
	--ab-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--ab-heading: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--ab-radius: 9999px;
	--ab-heading-weight: 700;
}

/* ===== 基本 ===== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ab-base); color: var(--ab-contrast); font-family: var(--ab-font); font-size: 1rem; line-height: 1.85; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
a { color: var(--ab-accent); }
h1, h2, h3, h4 { margin: 0 0 1rem; color: var(--ab-primary); font-family: var(--ab-heading); font-weight: var(--ab-heading-weight); line-height: 1.4; text-wrap: balance; word-break: auto-phrase; }
p { margin: 0 0 1rem; }
.ab-skip { position: absolute; left: -9999px; }
.ab-skip:focus { left: 0.5rem; top: 0.5rem; z-index: 100; padding: 0.5rem 1rem; background: var(--ab-base); }
.ab-container { width: min(100% - 3rem, 1120px); margin-inline: auto; }
.ab-container--narrow { width: min(100% - 3rem, 800px); }
.ab-center { text-align: center; }
.ab-main { min-height: 50vh; }

/* ===== ボタン ===== */
.ab-btn { display: inline-block; padding: 0.85rem 1.6rem; border: 1px solid var(--ab-primary); border-radius: var(--ab-radius); background: var(--ab-primary); color: var(--ab-base); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; }
.ab-btn:hover { opacity: 0.88; }
.ab-btn--light { border-color: var(--ab-base); background: var(--ab-base); color: var(--ab-primary); }
.ab-btn--outline { border-color: currentColor; background: transparent; color: inherit; }

/* ===== ヘッダー ===== */
html { scroll-padding-top: 5.5rem; }
.ab-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--ab-line); background: var(--ab-base); }
body.admin-bar .ab-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ab-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .ab-header { top: 0; } }
.ab-header-inner { display: flex; align-items: center; gap: 1.5rem; width: min(100% - 3rem, 1200px); min-height: 5rem; margin-inline: auto; }
.ab-brand { margin-right: auto; color: var(--ab-primary); font-family: var(--ab-heading); font-size: 1.375rem; font-weight: 700; line-height: 1.3; text-decoration: none; }
.ab-logo { display: block; max-height: 3rem; width: auto; }
.ab-nav-toggle { display: none; }
.ab-menu { display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.ab-menu a { color: var(--ab-contrast); font-size: 0.9375rem; text-decoration: none; }
.ab-menu a:hover { color: var(--ab-accent); }
.ab-menu .menu-item-has-children { position: relative; }
.ab-menu .menu-item-has-children > a::after { content: "▾"; margin-left: 0.25rem; font-size: 0.75rem; }
.ab-menu .sub-menu { position: absolute; top: 100%; left: -1rem; display: none; min-width: 12rem; margin: 0; padding: 0.5rem 0; list-style: none; border: 1px solid var(--ab-line); background: var(--ab-base); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.ab-menu .menu-item-has-children:hover > .sub-menu, .ab-menu .menu-item-has-children:focus-within > .sub-menu, .ab-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
.ab-menu .sub-menu a { display: block; padding: 0.5rem 1rem; }

/* ===== トップ: メイン画像 ===== */
.ab-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; overflow: hidden; color: var(--ab-base); text-align: center; }
.ab-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ab-primary); opacity: 0.5; }
.ab-hero-inner { position: relative; z-index: 2; width: min(100% - 3rem, 900px); padding: 3rem 0; }
.ab-hero-title { margin-bottom: 1rem; color: var(--ab-base); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.3; }
.ab-hero-lead { margin-bottom: 2rem; font-size: clamp(1rem, 2.2vw, 1.25rem); }
.ab-hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0; }

/* ===== セクション ===== */
.ab-section { padding: 4rem 0; }
.ab-section--surface { background: var(--ab-surface); }
.ab-section-title { margin-bottom: 2rem; font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.ab-more { margin-top: 2rem; }
.ab-page { padding: 3rem 0 4rem; }
.ab-page-title { margin-bottom: 1.5rem; font-size: clamp(1.75rem, 4vw, 2.25rem); }

/* 選ばれる理由(見出しが改行しても、本文の開始位置をそろえる) */
.ab-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 2rem; }
.ab-reason { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.ab-reason h3 { margin: 0; font-size: 1.1875rem; }
.ab-reason p { margin: 0; }

/* 施工の流れ(番号つきのカード) */
.ab-flow { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.ab-flow-card { position: relative; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--ab-line); background: var(--ab-base); }
.ab-flow-no { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 0 0.75rem; border-radius: 50%; background: var(--ab-primary); color: var(--ab-base); font-weight: 700; }
.ab-flow-card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.ab-flow-card > p { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.ab-flow-ask { margin-top: auto; padding: 0.75rem 1rem; border-radius: 4px; background: var(--ab-surface); }
.ab-flow-ask p { margin: 0; font-size: 0.875rem; }
.ab-flow-ask .ab-flow-ask-label { margin-bottom: 0.25rem; font-weight: 700; color: var(--ab-primary); }
@media (min-width: 600px) {
	.ab-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.ab-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 施工事例のカード */
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.ab-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-card-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ab-surface); }
.ab-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-card-noimage { display: block; width: 100%; height: 100%; }
.ab-card-title { margin: 0.75rem 0 0.25rem; font-size: 1.125rem; }
.ab-card-title a { color: var(--ab-accent); text-decoration: none; }
.ab-card-title a:hover { text-decoration: underline; }
.ab-card-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.8125rem; color: var(--ab-contrast); }
@media (max-width: 900px) { .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ab-cards, .ab-cards--2 { grid-template-columns: 1fr; } }

/* ページの本文(固定ページ) */
.ab-entry h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; }
.ab-entry h3 { margin: 2rem 0 0.75rem; font-size: 1.25rem; }
.ab-entry ul, .ab-entry ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.ab-entry img { height: auto; }
.ab-lead { font-size: 1.25rem; }
.ab-phone-large { margin-bottom: 0.5rem; font-size: 2rem; font-weight: 700; color: var(--ab-primary); }
.ab-table, .ab-entry table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.ab-table th, .ab-table td, .ab-entry table th, .ab-entry table td { padding: 0.75rem 1rem; border: 1px solid var(--ab-line); text-align: left; vertical-align: top; }
.ab-table th, .ab-entry table th { width: 30%; background: var(--ab-surface); color: var(--ab-primary); font-weight: 700; }
.ab-form-note { padding: 1rem; border: 1px dashed var(--ab-accent); color: var(--ab-accent); }
.ab-term-description { margin-bottom: 2rem; }
.ab-sitemap { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ab-back { margin-top: 2.5rem; }

/* ===== 施工事例の詳細 ===== */
.ab-case-main { margin-bottom: 1.5rem; }
.ab-case-main img { display: block; width: 100%; height: auto; }
.ab-case-info { margin: 0 0 2rem; border-top: 1px solid var(--ab-line); }
.ab-case-info > div { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ab-line); }
.ab-case-info dt { flex: 0 0 9rem; font-weight: 700; color: var(--ab-primary); }
.ab-case-info dd { margin: 0; }
.ab-gallery-block h2, .ab-steps h2, .ab-voice h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; }
.ab-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.ab-gallery-single { grid-template-columns: 1fr; }
.ab-gallery-grid figure { margin: 0; }
.ab-gallery-grid img { display: block; width: 100%; height: auto; }
.ab-steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
.ab-step { display: flex; flex-direction: column; gap: 0.75rem; }
.ab-step-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ab-tags { margin: 0 0 0.5rem; }
.ab-tag { display: inline-block; margin: 0 0.4rem 0.4rem 0; padding: 0.1rem 0.6rem; border-radius: 4px; background: var(--ab-surface); color: var(--ab-primary); font-size: 0.875rem; }
.ab-tag-state { background: var(--ab-primary); color: var(--ab-base); }
a.ab-tag { text-decoration: none; }
a.ab-tag.is-active { background: var(--ab-primary); color: var(--ab-base); }
.ab-comment { margin: 0; }
@media (max-width: 480px) { .ab-steps-grid { grid-template-columns: 1fr; } }
.ab-voice-item { padding: 1rem 1.25rem; border: 1px solid var(--ab-line); border-radius: 4px; }
.ab-voice-item h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.ab-voice-item p { margin: 0; }
.ab-voice-item + .ab-voice-item { position: relative; margin-top: 2rem; }
.ab-voice-item + .ab-voice-item::before { content: "▼"; position: absolute; top: -1.7rem; left: 50%; transform: translateX(-50%); font-size: 0.875rem; color: var(--ab-accent); }

/* 一覧の絞り込み */
.ab-filter { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin: 0 0 2rem; }
.ab-filter-form { display: flex; gap: 0.5rem; align-items: center; }
.ab-filter-form select { padding: 0.35rem 0.5rem; }
.ab-filter-form button { padding: 0.35rem 0.9rem; border: 0; border-radius: 4px; background: var(--ab-primary); color: var(--ab-base); cursor: pointer; }
.ab-filter-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* お客様の声、対応エリア */
.ab-quote { margin: 0; padding: 1.5rem; border: 1px solid var(--ab-line); background: var(--ab-base); }
.ab-quote blockquote { margin: 0 0 1rem; font-size: 1.125rem; }
.ab-quote figcaption { font-size: 0.875rem; }
.ab-voice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.ab-voice-card { padding: 1.25rem; border: 1px solid var(--ab-line); background: var(--ab-base); }
.ab-voice-card h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.ab-voice-card p { margin: 0 0 0.5rem; }
.ab-voice-label { font-size: 0.8125rem; font-weight: 700; color: var(--ab-primary); }
.ab-area-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ab-area-list li { padding: 1.25rem; border: 1px solid var(--ab-line); }
.ab-area-name { font-size: 1.125rem; font-weight: 700; }
.ab-area-count { display: block; margin: 0.25rem 0 0.5rem; font-size: 0.8125rem; }
.ab-area-list p { margin: 0; font-size: 0.9375rem; }

/* ページ送り */
.pagination, .navigation.pagination { margin-top: 2.5rem; text-align: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.pagination .page-numbers { padding: 0.35rem 0.8rem; border: 1px solid var(--ab-line); color: var(--ab-primary); text-decoration: none; }
.pagination .page-numbers.current { background: var(--ab-primary); color: var(--ab-base); border-color: var(--ab-primary); }

/* ===== 問い合わせの帯 ===== */
.ab-cta { padding: 4rem 0; background: var(--ab-primary); color: var(--ab-base); text-align: center; }
.ab-cta-title { color: var(--ab-base); font-size: clamp(1.5rem, 3vw, 2rem); }
.ab-cta p { margin-bottom: 1.5rem; }

/* ===== フッター ===== */
.ab-footer { padding: 4rem 0 2rem; background: var(--ab-contrast); color: rgba(255, 255, 255, 0.78); }
.ab-footer a { color: inherit; text-decoration: none; }
.ab-footer a:hover { text-decoration: underline; }
.ab-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.ab-footer-name { margin-bottom: 0.75rem; color: var(--ab-base); font-family: var(--ab-heading); font-size: 1.25rem; font-weight: 700; }
.ab-footer-text { margin: 0 0 0.5rem; font-size: 0.875rem; }
.ab-footer-label { margin-bottom: 1rem; font-size: 0.8125rem; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.6); }
.ab-footer-menu { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.ab-footer-menu--row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; }
.ab-footer-bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.ab-copyright { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

/* スマホの固定の電話ボタン */
.ab-fixed-bar { display: none; }

/* ===== スマホ ===== */
@media (max-width: 900px) {
	.ab-header-inner { flex-wrap: wrap; min-height: 4rem; gap: 0.75rem; }
	.ab-nav-toggle { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--ab-line); background: var(--ab-base); color: var(--ab-primary); font: inherit; font-size: 0.875rem; cursor: pointer; }
	.ab-nav { display: none; flex-basis: 100%; order: 3; padding-bottom: 1rem; }
	.ab-nav.is-open { display: block; max-height: calc(100vh - 6rem); overflow-y: auto; }
	.ab-menu { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
	.ab-menu .menu-item-has-children > a::after { content: none; }
	.ab-menu .sub-menu { position: static; display: block; min-width: 0; padding: 0.5rem 0 0 1rem; border: 0; box-shadow: none; }
	.ab-menu .sub-menu a { padding: 0.25rem 0; }
	body.ab-has-call .ab-header-cta { display: none; }
	.ab-reasons { grid-template-columns: 1fr; }
	.ab-footer-grid { grid-template-columns: 1fr 1fr; }
	.ab-fixed-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255, 255, 255, 0.4); background: var(--ab-accent); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2); }
	.ab-fixed-item { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 0.5rem; color: var(--ab-base); font-weight: 700; text-align: center; text-decoration: none; }
	.ab-fixed-item + .ab-fixed-item { border-left: 1px solid rgba(255, 255, 255, 0.4); }
	body.ab-has-call { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
	.ab-footer-grid { grid-template-columns: 1fr; }
	.ab-case-info > div { flex-direction: column; gap: 0.25rem; }
}

/* ===== トップ: 情報整理型・コンパクト型 ===== */
.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.ab-split-title { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.3; }
.ab-split-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 0; }
.ab-split-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ab-btn--ghost { background: transparent; color: var(--ab-primary); }
.ab-reasons--cards .ab-reason { padding: 1.5rem; background: var(--ab-surface); }
.ab-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.ab-service img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.75rem; }
.ab-service h3 { margin: 0 0 0.5rem; font-size: 1.1875rem; }
.ab-hero--short { min-height: 300px; }
.ab-callband { padding: 1.5rem 0; background: var(--ab-accent); color: var(--ab-base); }
.ab-callband-inner { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: center; }
.ab-callband-text { margin: 0; font-size: 1.25rem; }
.ab-callband-text strong { margin-left: 0.5rem; font-size: 1.5rem; }
@media (max-width: 900px) {
	.ab-split { grid-template-columns: 1fr; gap: 2rem; }
	.ab-services { grid-template-columns: 1fr; }
}

/* 固定ページに埋め込んだ施工の流れ(幅がせまいので、2列まで) */
.ab-flow.ab-flow--2 { gap: 1.5rem; }
@media (min-width: 1000px) {
	.ab-flow.ab-flow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ab-entry thead th { background: var(--ab-primary); color: var(--ab-base); }
.ab-entry .ab-flow { margin: 1rem 0 2.5rem; }

/* 劣化チェックの症状 */
.ab-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin: 1rem 0 2rem; }
.ab-check-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.75rem; }
.ab-entry .ab-check-item h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.ab-check-item p { margin: 0; font-size: 0.9375rem; }

/* お問い合わせフォーム */
.ab-form { margin: 0 0 2rem; }
.ab-form p { margin: 0 0 1.25rem; }
.ab-form label { display: block; margin-bottom: 0.25rem; font-weight: 700; }
.ab-form input[type="text"], .ab-form input[type="tel"], .ab-form input[type="email"], .ab-form select, .ab-form textarea { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--ab-line); border-radius: 4px; background: var(--ab-base); color: var(--ab-contrast); font: inherit; }
.ab-form textarea { resize: vertical; }
.ab-form-agree label { font-weight: 400; }
.ab-form-agree input { margin-right: 0.35rem; }
.ab-required { margin-left: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 3px; background: #b32d2e; color: #fff; font-size: 0.6875rem; font-weight: 400; vertical-align: 0.1em; }
.ab-form-hint { font-size: 0.875rem; margin-top: -0.75rem; }
.ab-form button.ab-btn { cursor: pointer; font: inherit; font-weight: 700; }
.ab-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ab-form-errors { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid #b32d2e; color: #b32d2e; }
.ab-form-errors ul { margin: 0; padding-left: 1.25rem; }
.ab-form-thanks { margin: 0 0 2rem; padding: 1.5rem; border: 1px solid var(--ab-accent); background: var(--ab-surface); }
.ab-form-thanks p:last-child { margin-bottom: 0; }

/* ===== 拡張版: お知らせ、コラム ===== */
.ab-news-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ab-line); }
.ab-news-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--ab-line); }
.ab-news-list time { flex: 0 0 6.5rem; color: var(--ab-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-news-list a { flex: 1 1 14rem; color: var(--ab-contrast); text-decoration: none; }
.ab-news-list a:hover { color: var(--ab-accent); text-decoration: underline; }
.ab-column-cats { margin-bottom: 2rem; }
.ab-post-meta { margin: 0 0 1.5rem; }

/* カラーシミュレーター: 固定したヘッダーの高さの分、下にずらす */
.amplio-cs { --cs-sticky-top: 5rem; }
@media (max-width: 900px) { .amplio-cs { --cs-sticky-top: 4rem; } }