/*
Theme Name: 匠 -TAKUMI-
Theme URI: https://example.com/seo-simple
Author: Osamu Kato
Author URI: https://example.com
Description: 企業・サービスサイト向けの、SEOに強くシンプルかつ高品質なWordPressテーマです。セマンティックなマークアップ、構造化データ、高速表示、完全レスポンシブ対応をベースに、カスタマイザーからアクセントカラーを自由に変更できます。
Version: 1.15.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: seo-simple
Tags: blog, e-commerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

匠 -TAKUMI- is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   0. CSS Custom Properties (Design Tokens)
   ========================================================= */
:root {
	--color-accent: #2563eb;
	--color-accent-dark: #1d4ed8;
	--color-text: #1a1a1a;
	--color-text-muted: #5b5b5b;
	--color-bg: #ffffff;
	--color-bg-alt: #f6f7f9;
	--color-border: #e5e7eb;

	--font-base: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-base);

	--container-width: 1180px;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;

	--radius: 8px;
	--transition: 0.2s ease;
}

/* =========================================================
   1. Reset / Base
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.02em;
	color: var(--color-text);
	background: var(--color-bg);
	word-break: break-word;
	overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--color-accent-dark);
	text-decoration: underline;
}

ul,
ol {
	padding-left: 1.4em;
}

table {
	width: 100%;
	border-collapse: collapse;
}

button,
input,
textarea,
select {
	font-family: inherit;
	font-size: 1rem;
}

/* =========================================================
   2. Typography
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.4;
	font-weight: 700;
	margin: 0 0 var(--space-2);
	color: var(--color-text);
}

h1 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); }
h4 { font-size: 1.2rem; }

p {
	margin: 0 0 var(--space-2);
}

.eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-1);
}

/* =========================================================
   3. Layout helpers
   ========================================================= */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-2);
}

.section {
	padding-block: var(--space-5);
}

/* サイト全体：本文コンテンツ領域を枠線1px #ccc＋外側の影で囲む。
   背景は白のまま。ヘッダー/フッター/ヒーローの .container は対象外で、
   .site-main の直下（本文エリア）だけを囲む。 */
.site-main > .container {
	margin-block: var(--space-4);
	/* --color-content-bg is a (possibly semi-transparent) rgba set from the
	   Customizer so a site background image can show through the content box;
	   falls back to the solid page background when unset. */
	background: var(--color-content-bg, var(--color-bg));
	border: 1px solid #ccc;
	border-radius: var(--radius);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
}

@media (max-width: 782px) {
	.site-main > .container {
		margin-block: var(--space-3);
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.4);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	height: auto;
	left: var(--space-2);
	line-height: normal;
	padding: var(--space-1) var(--space-2);
	text-decoration: none;
	top: var(--space-2);
	width: auto;
	z-index: 100000;
}

/* =========================================================
   4. Buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border-radius: var(--radius);
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	border: 2px solid var(--color-accent);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), transform var(--transition);
	text-decoration: none;
}

.btn:hover,
.btn:focus {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.btn-outline {
	background: transparent;
	color: var(--color-accent);
}

.btn-outline:hover,
.btn-outline:focus {
	background: var(--color-accent);
	color: #fff;
}

/* =========================================================
   5. Site header
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-header-bg, rgba(255, 255, 255, 0.92));
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--color-border);
}

/* Native "外観 > ヘッダー画像" support: the photo sits behind, the chosen
   header background color becomes a tint overlay so text/logo stay legible. */
.site-header.has-header-image {
	background-size: cover;
	background-position: center;
	background-color: transparent;
	border-bottom-color: transparent;
}

.site-header.has-header-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-header-bg, rgba(255, 255, 255, 0.92));
	backdrop-filter: saturate(180%) blur(8px);
	z-index: 0;
}

.site-header.has-header-image .site-header-inner {
	position: relative;
	z-index: 1;
}

/* --- ヘッダーの表示方法（カスタマイザー「サイトの見た目 → ヘッダーの表示方法」）---
   body クラスで切り替える。既定(.header-behavior-sticky)は上の position:sticky のまま。 */

/* 固定しない: ページ上部に置くだけ。スクロールで一緒に流れて消える。 */
body.header-behavior-static .site-header {
	position: static;
}

/* スクロールで表示: 下スクロールで隠れ、上スクロールで出てくる。
   position:fixed で浮かせるため、本文が隠れないよう body 側に上部余白を確保する。
   --seo-header-h はヘッダーの実際の高さで、main.js が読み込み時に設定する。 */
body.header-behavior-scroll-up {
	padding-top: var(--seo-header-h, 62px);
}

body.header-behavior-scroll-up .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transition: transform 0.35s ease;
}

body.header-behavior-scroll-up .site-header.is-hidden {
	transform: translateY(-100%);
}

/* ログイン中の管理バー表示時は、固定ヘッダーを管理バーの下にずらして重なりを防ぐ。 */
body.admin-bar.header-behavior-scroll-up .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.header-behavior-scroll-up .site-header {
		top: 46px;
	}
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block: var(--space-1);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.6em;
	/* Lets the title truncate instead of overflowing/squashing the
	   hamburger button on narrow phones (flex children default to
	   min-width:auto, which ignores this otherwise). */
	min-width: 0;
}

.site-title {
	font-size: 1.3rem;
	font-weight: 800;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-title a {
	color: var(--color-header-text, var(--color-text));
	text-decoration: none;
}

.site-description {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin: 0;
}

.custom-logo-link img {
	max-height: 44px;
	width: auto;
}

/* Primary nav */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.main-navigation a {
	/* メニューの文字色。カスタマイザーで「メニューの文字色」を指定するとその色、
	   未指定ならヘッダーの文字色を継承。 */
	color: var(--menu-text, var(--color-header-text, var(--color-text)));
	font-weight: 600;
	text-decoration: none;
	padding: 0.4em 0;
	border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.main-navigation ul ul {
	display: none;
	position: absolute;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.5em;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	min-width: 200px;
}

.main-navigation li {
	position: relative;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
	display: flex;
}

/* Freeform note (e.g. company address): only meaningful inside the mobile
   off-canvas panel, so it's hidden by default and revealed in the
   @media (max-width: 782px) block below. */
.mobile-menu-note {
	display: none;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 44x44px minimum tap target (mobile accessibility best practice). */
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.5em 0.7em;
	cursor: pointer;
}

/* Close (×) button inside the mobile menu panel. Hidden on desktop, where the
   panel isn't used; shown inside the off-canvas panel on mobile (see below). */
.menu-close {
	display: none;
}

.menu-toggle .bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
	margin: 5px 0;
	transition: transform var(--transition), opacity var(--transition);
}

/* =========================================================
   5b. Hero section (front page main visual)
   ========================================================= */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-6);
	overflow: hidden;
	/* Constrain the whole hero band (background image included) to the site
	   container width and center it, instead of spanning the full viewport. */
	max-width: var(--container-width);
	margin-inline: auto;
}

.hero.has-gradient {
	min-height: 420px;
	background-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
}

/* Image hero: show the whole uploaded image at its natural proportions,
   filling the 1180px width with no cropping/zoom. The <img> defines the
   height; any overlay text is layered on top of it. */
.hero.has-image {
	display: block;
	padding-block: 0;
}

.hero-image {
	display: block;
	width: 100%;
	height: auto;
}

.hero.has-image .hero-overlay {
	position: absolute;
	inset: 0;
	background: var(--hero-overlay, rgba(0, 0, 0, 0.45));
}

/* Overlay text sits centered on top of the full image. */
.hero.has-image .hero-inner {
	position: absolute;
	inset: 0;
	justify-content: center;
	padding-block: var(--space-4);
}

.hero-inner {
	position: relative;
	z-index: 1;
	/* Matches --container-width so the hero content column lines up exactly
	   with the rest of the site's content edges at any viewport size. */
	max-width: var(--container-width);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero-title {
	color: var(--hero-heading-color, #fff);
	font-weight: var(--hero-heading-weight, 700);
	font-family: var(--hero-font, inherit);
	margin-bottom: var(--space-2);
}

.hero-text {
	color: var(--hero-text-color, rgba(255, 255, 255, 0.92));
	font-family: var(--hero-font, inherit);
	font-size: 1.15rem;
	max-width: 42em;
	margin: 0 auto var(--space-3);
	white-space: pre-line;
}

.hero-actions {
	margin: 0;
}

/* Glassmorphism: translucent + blurred, so the hero image/gradient shows
   through while the button still reads clearly as a button. */
.hero-button {
	background: var(--hero-button-bg, rgba(255, 255, 255, 0.14));
	border: 1px solid var(--hero-button-border, rgba(255, 255, 255, 0.45));
	color: var(--hero-button-color, #fff);
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: filter 0.2s ease, border-color 0.2s ease;
}

.hero-button:hover,
.hero-button:focus {
	/* 設定した色を保ったまま、ホバーで少し明るく＋枠線をはっきりさせる */
	filter: brightness(1.12);
	border-color: var(--hero-button-color, rgba(255, 255, 255, 0.7));
	color: var(--hero-button-color, #fff);
}

/* Browsers without backdrop-filter support (rare) still get a legible,
   solid-ish button rather than a near-invisible transparent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero-button {
		background: var(--hero-button-bg, rgba(255, 255, 255, 0.85));
	}
}

/* =========================================================
   6. Site footer
   ========================================================= */
.site-footer {
	background: var(--color-footer-bg, var(--color-bg-alt));
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-4);
	margin-top: var(--space-5);
}

.site-footer .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	font-size: 0.9rem;
	color: var(--color-footer-text, var(--color-text-muted));
}

.site-footer a {
	color: var(--color-footer-text, var(--color-text-muted));
}

/* ウィジェットエリア: カスタマイザーで選んだ列数で横並び（スマホは1列） */
.site-footer-widgets {
	width: 100%;
	display: grid;
	gap: var(--space-3) var(--space-4);
}

.site-footer-widgets.footer-cols-1 {
	grid-template-columns: 1fr;
	max-width: 40em;
	margin-inline: auto;
}

.site-footer-widgets.footer-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.site-footer-widgets.footer-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.site-footer-widgets .widget-title {
	font-size: 1rem;
	margin-bottom: var(--space-1);
}

.site-footer-widgets .widget + .widget {
	margin-top: var(--space-3);
}

/* フッターメニューは中央寄せの横並び */
.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-3);
}

.footer-navigation a {
	text-decoration: none;
}

.footer-navigation a:hover,
.footer-navigation a:focus {
	color: var(--color-accent);
}

/* コピーライトは最下段に中央表示 */
.site-footer-about {
	width: 100%;
	text-align: center;
	margin-top: var(--space-1);
}

.site-footer-about p {
	margin: 0;
}

@media (max-width: 640px) {
	.site-footer-widgets.footer-cols-2,
	.site-footer-widgets.footer-cols-3 {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   7. Cards / entry lists
   ========================================================= */
.entry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-3);
}

.entry-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg);
	transition: box-shadow var(--transition), transform var(--transition);
}

.entry-card:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.entry-card .entry-thumb img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.entry-card .entry-body {
	padding: var(--space-2);
}

.entry-meta {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* =========================================================
   8. Single / page content
   ========================================================= */
.entry-content {
	/* 1文字=1em相当のCJKで換算し、1行あたり約38文字（読みやすいとされる35〜40字）に収まる幅。
	   ch単位は半角基準のためCJKでは実際の文字数とズレるので、font-sizeに連動するem指定にしている。 */
	max-width: 38em;
	/* コンテナ幅(1180px)の中で本文だけ中央寄せにする。見出しやアイキャッチ画像は
	   コンテナいっぱいに広がる一方、本文は読みやすい幅で中央に収まる構成。 */
	margin-inline: auto;
	font-size: 1.0625rem; /* 本文のみ気持ち大きめの17px相当にして可読性を優先 */
	line-height: 1.9;
}

.entry-content > * {
	margin-top: 0;
	margin-bottom: 1.7em;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

/* 見出しの前後は「前を広く・後ろを狭く」で階層をはっきりさせる（本文どうしの行間より明確に区切る） */
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	margin-top: 2.2em;
	margin-bottom: 0.8em;
}

.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child {
	margin-top: 0;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 1.7em;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content img,
.entry-content figure {
	border-radius: var(--radius);
	margin-top: 0.4em;
	margin-bottom: 2em;
}

.entry-content figcaption {
	font-size: 0.85em;
	color: var(--color-text-muted);
	margin-top: 0.6em;
	text-align: center;
}

.entry-content blockquote {
	border-left: 4px solid var(--color-accent);
	margin: 1.8em 0;
	padding: 0.2em var(--space-3);
	color: var(--color-text-muted);
	font-style: italic;
}

/* =========================================================
   8b. Single/page entry chrome, archive headers, comments
   ========================================================= */
.entry-header {
	margin-bottom: var(--space-3);
}

.entry-title {
	margin-bottom: var(--space-1);
}

/* 投稿ページのタイトルは h1 デフォルト（最大2.75rem）だと大きいので、
   一回り小さめにして本文とのバランスを取る。 */
.single .entry-title {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
}

/* 投稿ページ：タイトルをカード上端から20pxの位置まで上げる
   （カードの上パディングだけ20pxに。下パディングは既定のまま）。 */
.single .container.section {
	padding-top: 20px;
}

.entry-thumb {
	margin-bottom: var(--space-3);
	border-radius: var(--radius);
	overflow: hidden;
}

.entry-thumb img {
	width: 100%;
}

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-top: var(--space-3);
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.page-header {
	margin-bottom: var(--space-3);
}

.page-title {
	margin-bottom: var(--space-1);
}

.archive-description {
	color: var(--color-text-muted);
	max-width: 65ch;
}

.front-page-entry .entry-content {
	max-width: none;
}

/* =========================================================
   8c. 投稿・固定ページの記事レイアウト調整
   投稿ページも固定ページと同じ仕様に統一。本文・見出し・アイキャッチを
   コンテナ幅(1180px・左右は .container の余白)いっぱいに広げる全幅レイアウト。
   フロントページ(.front-page-entry)も同じく全幅。
   ========================================================= */
.single .entry .entry-content,
.page .entry:not(.front-page-entry) .entry-content {
	max-width: none;
	margin-inline: 0;
}

/* ヘッダー(パンくず/タイトル/メタ)・フッター(タグ)も本文と同じ全幅にそろえる */
.single .entry .entry-header,
.single .entry .entry-footer,
.page .entry:not(.front-page-entry) .entry-header,
.page .entry:not(.front-page-entry) .entry-footer {
	max-width: none;
	margin-inline: 0;
}

/* アイキャッチは本文トップに中央配置し、画像と本文の間に余白をしっかり取る */
.single .entry .entry-thumb,
.page .entry:not(.front-page-entry) .entry-thumb {
	max-width: none;
	margin-inline: auto;
	margin-bottom: var(--space-4);
	text-align: center;
}

.single .entry .entry-thumb img,
.page .entry:not(.front-page-entry) .entry-thumb img {
	display: block;
	width: 100%;
	/* 16:9で統一表示。多少縦横比がずれた画像でも枠を崩さず整って見える。 */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-inline: auto;
}

/* パンくずリストをヒーロー（またはヘッダー）と本文カードの間に、カードの外で
   コンテナ幅にそろえて表示する。.site-main 直下の枠付きボックス装飾は付けない。 */
.single-breadcrumbs {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	margin-top: var(--space-3);
	padding-inline: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.single-breadcrumbs + .container.section {
	margin-top: var(--space-2);
}

/* パンくずの「背景カード」表示（カスタマイザーでON）。ヒーロー画像の上でも
   読みやすいよう、文字の後ろに半透明の角丸カード＋影＋すりガラスを敷く。
   色・透明度・文字色は --breadcrumb-bg / --breadcrumb-text（functions.php で
   出力）で調整できる。 */
body.has-breadcrumb-card .single-breadcrumbs .breadcrumbs {
	display: inline-block;
	background: var(--breadcrumb-bg, rgba(255, 255, 255, 0.85));
	color: var(--breadcrumb-text, var(--color-text));
	padding: 0.5em 1.1em;
	border-radius: 999px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	margin-bottom: 0;
}

body.has-breadcrumb-card .single-breadcrumbs .breadcrumbs a,
body.has-breadcrumb-card .single-breadcrumbs .breadcrumbs [aria-current="page"] {
	color: var(--breadcrumb-text, var(--color-text));
}

body.has-breadcrumb-card .single-breadcrumbs .breadcrumbs a {
	text-decoration: none;
}

body.has-breadcrumb-card .single-breadcrumbs .breadcrumbs a:hover {
	text-decoration: underline;
}

/* 見出し(h2)に下線を入れてセクションの区切りを分かりやすくする。
   ただしブロックスタイル(is-style-head-*)を適用した見出しは、そちらの装飾に
   任せるためデフォルト下線を外す（二重装飾を防ぐ）。 */
.entry-content > h2:not([class*="is-style-head-"]):not(.has-background) {
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--color-border);
}

/* タグをピル(丸いラベル)表示にして見た目を整える */
.tags-label {
	font-weight: 700;
	color: var(--color-text);
	margin-right: 0.2em;
}

.tags-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.tags-links a {
	display: inline-block;
	padding: 0.2em 0.8em;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.tags-links a:hover,
.tags-links a:focus {
	color: var(--color-accent);
	border-color: var(--color-accent);
	text-decoration: none;
}

.comments-area {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	max-width: 38em;
	/* Centered to line up under the (also centered) article body above it. */
	margin-inline: auto;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--space-3);
}

.comment-body {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
}

.no-results {
	padding-block: var(--space-4);
}

.widget {
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.widget-title {
	font-size: 1.05rem;
	margin-bottom: var(--space-1);
}

/* =========================================================
   9. Forms
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
}

input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

/* =========================================================
   10. Pagination / breadcrumbs
   ========================================================= */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: var(--space-4);
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* min 44px tap target on touch devices, matching .menu-toggle. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
}

.pagination .current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.breadcrumbs {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}

.breadcrumbs a {
	color: var(--color-text-muted);
}

.breadcrumbs [aria-current="page"] {
	color: var(--color-text);
}

/* =========================================================
   11. Utility
   ========================================================= */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =========================================================
   11b. Scroll & image animations
   Driven entirely by body classes set from the Customizer
   (seo_simple_scroll_animation / seo_simple_image_animation).
   The only thing JS ever does is toggle ".is-inview" — so with
   JS disabled (html stays ".no-js") everything is fully visible.
   ========================================================= */

/* --- Scroll-in reveal for cards / section headers --- */
html.js body.has-scroll-anim .js-animate {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js body.has-scroll-anim.scroll-anim-fade-in .js-animate {
	transform: none;
}

html.js body.has-scroll-anim.scroll-anim-zoom-in .js-animate {
	transform: scale(0.94);
}

html.js body.has-scroll-anim.scroll-anim-fade-right .js-animate {
	transform: translateX(-34px);
}

html.js body.has-scroll-anim.scroll-anim-blur-in .js-animate {
	transform: translateY(18px);
	filter: blur(9px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js body.has-scroll-anim.scroll-anim-blur-in .js-animate.is-inview {
	filter: blur(0);
}

html.js body.has-scroll-anim .js-animate.is-inview {
	opacity: 1;
	transform: none;
}

/* Stagger cards slightly within a grid for a less mechanical reveal. */
html.js body.has-scroll-anim .entry-grid .js-animate:nth-child(2) { transition-delay: 0.08s; }
html.js body.has-scroll-anim .entry-grid .js-animate:nth-child(3) { transition-delay: 0.16s; }
html.js body.has-scroll-anim .entry-grid .js-animate:nth-child(4) { transition-delay: 0.24s; }
html.js body.has-scroll-anim .entry-grid .js-animate:nth-child(n+5) { transition-delay: 0.3s; }

/* --- Image-specific effects --- */
html.js body.img-anim-fade-in .js-animate-img,
html.js body.img-anim-zoom-in .js-animate-img {
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.9s ease;
}

html.js body.img-anim-zoom-in .js-animate-img {
	transform: scale(1.08);
}

html.js body.img-anim-fade-in .js-animate-img.is-inview,
html.js body.img-anim-zoom-in .js-animate-img.is-inview {
	opacity: 1;
	transform: none;
}

/* Parallax: the wrapper clips, the image itself is translated by JS via a
   CSS custom property so there's no per-frame style recalculation cost. */
html.js body.img-anim-parallax .js-animate-img {
	overflow: hidden;
}

html.js body.img-anim-parallax .js-animate-img > img {
	transform: translateY(var(--seo-simple-parallax, 0px)) scale(1.15);
	will-change: transform;
}

/* --- ① ヒーロー登場アニメ（読み込み時に順番にふわっと） --------------- */
@keyframes seo-simple-hero-rise {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes seo-simple-hero-image {
	from {
		opacity: 0;
		transform: scale(1.06);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero.hero-intro .hero-image {
	animation: seo-simple-hero-image 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero.hero-intro .hero-title {
	animation: seo-simple-hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both;
}

.hero.hero-intro .hero-text {
	animation: seo-simple-hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s both;
}

.hero.hero-intro .hero-actions {
	animation: seo-simple-hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.65s both;
}

/* --- ④ ロゴをキラッと登場（回転＋光沢） ------------------------------- */
@keyframes seo-simple-logo-in {
	0% {
		opacity: 0;
		transform: rotate(-8deg) scale(0.9);
	}
	60% {
		opacity: 1;
		transform: rotate(2deg) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes seo-simple-logo-shine {
	0% {
		left: -60%;
	}
	100% {
		left: 130%;
	}
}

body.has-logo-intro .custom-logo-link {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

body.has-logo-intro .custom-logo-link img {
	animation: seo-simple-logo-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 光沢の一筋がロゴの上を一度だけ横切る。 */
body.has-logo-intro .custom-logo-link::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	pointer-events: none;
	animation: seo-simple-logo-shine 0.9s ease 0.55s 1 both;
}

/* ロゴ画像が無い（サイト名テキスト）の場合は、テキストをふわっと登場。 */
body.has-logo-intro .site-title a {
	display: inline-block;
	animation: seo-simple-hero-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.hero.hero-intro .hero-image,
	.hero.hero-intro .hero-title,
	.hero.hero-intro .hero-text,
	.hero.hero-intro .hero-actions,
	body.has-logo-intro .custom-logo-link img,
	body.has-logo-intro .site-title a {
		animation: none;
	}
	body.has-logo-intro .custom-logo-link::after {
		display: none;
	}
}

/* =========================================================
   12. Responsive
   ========================================================= */
@media (max-width: 782px) {
	.main-navigation {
		position: fixed;
		/* パネルはメニューの内容に合わせて高さが伸縮する（height:auto）。最後の項目の
		   下に padding-bottom:20px の余白が入り、そこがパネルの下端になる。項目が増えれば
		   自動で高くなり、画面の高さを超える場合は max-height:100dvh で頭打ち＋スクロール。
		   ※ヘッダーが backdrop-filter を持つため内側の position:fixed の基準がヘッダーに
		   なるが、height:auto は内容基準なので以前の「128pxで切れる」問題は起きない。
		   （100dvh は未対応ブラウザ用に100vhフォールバック） */
		top: 0;
		right: 0;
		left: 30%;
		bottom: auto;
		height: auto;
		max-height: 100vh;
		max-height: 100dvh;
		background: var(--color-mobile-menu-bg, var(--color-bg));
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		transform: translateX(100%);
		transition: transform var(--transition);
		padding: var(--space-5) var(--space-3) 20px;
		overflow-y: auto;
		box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	/* Close (×) button: top-right of the panel, above the first menu link.
	   Positioned against the fixed .main-navigation panel. 44px tap target. */
	.menu-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: var(--space-2);
		right: var(--space-2);
		width: 44px;
		height: 44px;
		background: none;
		border: none;
		border-radius: var(--radius);
		font-size: 2rem;
		line-height: 1;
		color: var(--color-text);
		cursor: pointer;
	}

	.menu-close:hover,
	.menu-close:focus {
		background: var(--color-bg-alt);
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Full-width, ~48px-tall rows: the whole row is tappable, not just the
	   text, and each row clears the 44px minimum recommended touch target. */
	.main-navigation a {
		display: block;
		padding: 0.9em 0;
		border-bottom: 1px solid var(--color-border);
		/* モバイルメニュー専用の文字色。「モバイルメニューの文字色」を指定するとその色、
		   未指定なら「メニューの文字色」→ヘッダー文字色の順でフォールバック。 */
		color: var(--mobile-menu-text, var(--menu-text, var(--color-header-text, var(--color-text))));
	}

	.main-navigation li:last-child > a {
		border-bottom: none;
	}

	.main-navigation ul ul {
		position: static;
		display: flex;
		border: none;
		box-shadow: none;
		padding-left: var(--space-2);
	}

	.main-navigation ul ul a {
		border-bottom: none;
		padding-block: 0.7em;
	}

	.mobile-menu-note {
		display: block;
		margin-top: var(--space-4);
		padding-top: var(--space-3);
		border-top: 1px solid var(--color-border);
		font-size: 0.85rem;
		line-height: 1.7;
		color: var(--color-text-muted);
	}

	.menu-toggle {
		display: inline-flex;
	}

	.entry-grid {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 480px) {
	.section {
		padding-block: var(--space-4);
	}

	.hero {
		padding-block: var(--space-4);
	}

	.hero.has-gradient {
		min-height: 320px;
	}

	.hero-text {
		font-size: 1rem;
	}
}

/* =========================================================
   9. トップへ戻るボタン（右下固定・スクロールで表示）
   ========================================================= */

/* VK All in One Expansion Unit（ExUnit）が出す「トップへ戻る」ボタン(#page_top)を
   非表示にする。テーマ独自の丸ボタン(.back-to-top)と二重に表示されるため、
   見た目の良いテーマ側を残し、プラグイン側だけ隠す。 */
#page_top.page_top_btn,
a#page_top {
	display: none !important;
}

.back-to-top {
	position: fixed;
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-accent, #2563eb);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
	/* 初期は非表示（スクロールで .is-visible が付いてフェードイン） */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	filter: brightness(1.08);
}

.back-to-top:focus-visible {
	outline: 2px solid var(--color-accent, #2563eb);
	outline-offset: 2px;
}

.back-to-top svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

@media (max-width: 480px) {
	.back-to-top {
		width: 40px;
		height: 40px;
	}
}

/* =========================================================
   10. 「最新の投稿」ブロック（グリッド表示）のカード調整
   サムネイル・タイトルを中央そろえにし、カードごとに枠＋内側余白を
   付けて“外回りの余白”を確保する。小さい画像が左寄りになる問題も解消。
   ========================================================= */
.entry-content .wp-block-latest-posts.is-grid {
	justify-content: center;   /* 端数の行も中央そろえ（flexレイアウト時） */
	gap: var(--space-3);       /* カード同士の余白 */
	margin-inline: auto;
	padding-left: 0;
	list-style: none;
}

/* カード1枚ずつを枠＋内側余白でまとめ、中身は中央そろえ */
.entry-content .wp-block-latest-posts.is-grid > li {
	margin: 0;
	padding: var(--space-2);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	text-align: center;
}

/* サムネイルをカード内で中央に（小さい画像でも左寄りにならない） */
.entry-content .wp-block-latest-posts__featured-image {
	margin: 0 auto var(--space-2);
	text-align: center;
}

.entry-content .wp-block-latest-posts__featured-image a,
.entry-content .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
	margin-inline: auto;
	border-radius: var(--radius);
}

/* サムネイルを16:9で統一（カードごとに高さが揃い、整然と並ぶ） */
.entry-content .wp-block-latest-posts__featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* タイトル・日付まわりの余白 */
.entry-content .wp-block-latest-posts__post-title {
	display: block;
	margin-top: 0.4em;
	line-height: 1.5;
}

.entry-content .wp-block-latest-posts__post-date,
.entry-content .wp-block-latest-posts__post-author {
	display: block;
	margin-top: 0.4em;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* =========================================================
   10b. 「最新の投稿」ブロック（リスト表示＝サムネイル左・文字右）を整える
   ・サムネイルを16:9で統一（幅固定）
   ・サムネイルと文字の間隔をしっかり取る（--space-3）
   ・タイトル/日付/抜粋を右カラムにそろえ、行間・余白で読みやすく
   ・項目ごとに下線を入れて整然と区切る
   グリッド表示(.is-grid)には影響しないよう :not(.is-grid) で限定。
   ========================================================= */
.entry-content .wp-block-latest-posts:not(.is-grid) {
	/* サムネ幅と隙間を変数で一元管理。文字の左位置もこれに連動させるので、
	   画面幅が変わっても「サムネと文字の隙間」が常に一定になる。 */
	--thumb-w: 250px;
	--thumb-gap: 14px;
	list-style: none;
	padding-left: 0;
	margin-inline: auto;
}

.entry-content .wp-block-latest-posts:not(.is-grid) > li {
	overflow: hidden; /* 左フロートのサムネイルを含めて高さを確保（回り込み防止） */
	margin: 0;
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.entry-content .wp-block-latest-posts:not(.is-grid) > li:first-child {
	padding-top: 0;
}

.entry-content .wp-block-latest-posts:not(.is-grid) > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* サムネイル：左に固定幅で配置し、文字との間に余白を取る */
.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__featured-image {
	float: left;
	width: var(--thumb-w) !important;
	max-width: var(--thumb-w) !important;
	margin: 0 var(--thumb-gap) 0 0; /* ← 右側の余白＝サムネイルと文字の空間 */
	text-align: left;
}

/* 画像は切り抜かず全体を表示（自然な縦横比・高さ自動）。
   グリッド用の汎用ルールや WP コアの指定を確実に上書きするため !important で強制。 */
.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__featured-image a {
	display: block;
	width: 100%;
}

.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__featured-image img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 0 !important;      /* 角丸なし */
	/* 全サムネを 16:9 の同じ枠に揃えつつ、object-fit:contain で
	   画像“全体”を枠内に収める（切り抜かない）。16:9の画像はぴったり、
	   縦長など比率が違う画像は枠内に全体表示＋左右に余白（レターボックス）。 */
	aspect-ratio: 16 / 9 !important;
	object-fit: contain !important;
	background: #f3f3f3;              /* レターボックス部分の下地（任意） */
}

/* タイトル・日付・抜粋は「右カラム」にそろえる（サムネイル幅＋余白ぶん左を空ける）。
   幅を変数で連動させているので、隙間は常に --thumb-gap のぶんだけになる。 */
.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-title,
.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-date,
.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-author,
.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-excerpt {
	margin-left: calc(var(--thumb-w) + var(--thumb-gap));
}

.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-title {
	display: block;
	margin-top: 0;
	font-weight: 600;
	line-height: 1.5;
}

.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-date {
	margin-top: 0.35em;
}

.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-excerpt {
	margin-top: 0.6em;
	line-height: 1.8;
}

/* スマホ：サムネイルを上に全幅16:9、文字を下に回す（1カラム） */
@media (max-width: 600px) {
	.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__featured-image {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 var(--space-2);
	}
	.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-title,
	.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-date,
	.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-author,
	.entry-content .wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-excerpt {
		margin-left: 0;
	}
}

/* =========================================================
   11. ブロックの配置（フロント表示の保険）
   classic テーマ（theme.json なし）で、中央寄せ・幅広・全幅ブロックが
   エディタと同じ見た目になるよう最低限の配置を補う。最適化プラグインで
   コアの wp-block-library CSS が外された場合にも中央寄せが効くようにする。
   ========================================================= */
.has-text-align-left {
	text-align: left;
}
.has-text-align-center {
	text-align: center;
}
.has-text-align-right {
	text-align: right;
}

.entry-content .aligncenter {
	margin-inline: auto;
}

.entry-content > .alignwide,
.entry-content > .alignfull {
	margin-inline: auto;
	max-width: 100%;
}

/* =========================================================
   12. 店舗・会社情報（フッターNAP）＋ スマホ固定CTAバー
   ========================================================= */
.site-business {
	width: 100%;
	text-align: center;
	color: var(--color-footer-text, var(--color-text-muted));
}

.site-business-name {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 var(--space-1);
	color: var(--color-footer-text, var(--color-text));
}

.site-business-details {
	display: inline-grid;
	gap: 0.3em 0.8em;
	margin: 0;
	text-align: left;
}

.site-business-details > div {
	display: grid;
	grid-template-columns: 6em 1fr;
	gap: 0.2em 0.8em;
}

.site-business-details dt {
	font-weight: 700;
	color: var(--color-footer-text, var(--color-text));
}

.site-business-details dd {
	margin: 0;
}

@media (max-width: 480px) {
	.site-business-details > div {
		grid-template-columns: 5em 1fr;
	}
}

/* スマホ固定CTAバー */
.mobile-cta-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	display: flex;
}

.mobile-cta-bar a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.95em 0.5em;
	font-family: var(--cta-font, inherit);
	font-weight: var(--cta-weight, 700);
	text-decoration: none;
	color: var(--cta-text, #fff);
	position: relative;
	overflow: hidden;
}

.mobile-cta-bar .cta-tel {
	background: var(--cta-tel-bg, var(--color-accent, #2563eb));
}

.mobile-cta-bar .cta-btn {
	background: var(--cta-btn-bg, var(--color-accent-dark, #1d4ed8));
}

.mobile-cta-bar a:hover,
.mobile-cta-bar a:focus {
	filter: brightness(1.08);
	color: var(--cta-text, #fff);
}

/* キラッと光るエフェクト（cta-shine 有効時）。斜めのハイライトが定期的に横切る。 */
.mobile-cta-bar.cta-shine a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg);
	pointer-events: none;
	animation: seo-simple-cta-shine 3.4s ease-in-out infinite;
}

/* 2つ目のボタンは光をずらして交互に見せる。 */
.mobile-cta-bar.cta-shine .cta-btn::after {
	animation-delay: 1.7s;
}

@keyframes seo-simple-cta-shine {
	0% {
		left: -70%;
	}
	/* 一瞬で横切り、その後は次まで待機（キラッと感）。 */
	28%,
	100% {
		left: 130%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-cta-bar.cta-shine a::after {
		animation: none;
		display: none;
	}
}

/* PCでは非表示（スマホ専用の固定バー） */
@media (min-width: 783px) {
	.mobile-cta-bar {
		display: none;
	}
}

/* CTAバーの高さぶん、スマホでは本文下に余白を確保し、
   「トップへ戻る」ボタンもバーの上に持ち上げる。 */
@media (max-width: 782px) {
	body.has-mobile-cta {
		padding-bottom: 56px;
	}
	body.has-mobile-cta .back-to-top {
		bottom: calc(56px + var(--space-2));
	}
}

/* =========================================================
   13. ローカルSEO：サービス/FAQ/営業時間/エリア（ショートコード表示）
   ========================================================= */
/* サービス一覧 */
.business-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.business-service {
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.business-service-name {
	font-weight: 700;
}

.business-service-price {
	color: var(--color-accent, #2563eb);
	font-weight: 700;
}

.business-service-desc {
	display: block;
	margin-top: 0.3em;
	font-size: 0.9em;
	color: var(--color-text-muted);
}

/* FAQ（アコーディオン） */
.business-faq {
	display: grid;
	gap: 0.6em;
}

.business-faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.business-faq-item > summary {
	cursor: pointer;
	padding: 0.9em 2.6em 0.9em 2.6em;
	font-weight: 700;
	background: var(--color-bg-alt, #f6f7f9);
	list-style: none;
	position: relative;
}

.business-faq-item > summary::marker,
.business-faq-item > summary::-webkit-details-marker {
	display: none;
}

/* 質問の前に赤字の「Q」（テキストはぶら下げ揃え） */
.business-faq-item > summary::before {
	content: "Q";
	position: absolute;
	left: 1em;
	top: 0.9em;
	color: #e02424;
	font-weight: 800;
	font-size: 1.05em;
}

.business-faq-item > summary::after {
	content: "＋";
	position: absolute;
	right: 1em;
	top: 0.9em;
	color: var(--color-accent, #2563eb);
	font-weight: 700;
}

.business-faq-item[open] > summary::after {
	content: "−";
}

.business-faq-answer {
	position: relative;
	padding: 0.7em 1em 1em 2.6em;
}

/* 回答の前に青字の「A」（テキストはぶら下げ揃え） */
.business-faq-answer::before {
	content: "A";
	position: absolute;
	left: 1em;
	top: 0.7em;
	color: #2563eb;
	font-weight: 800;
	font-size: 1.05em;
}

/* 回答内の段落マージンを整える（Aと1行目を揃える） */
.business-faq-answer > :first-child {
	margin-top: 0;
}

.business-faq-answer > :last-child {
	margin-bottom: 0;
}

/* 営業時間テーブル＋営業中バッジ */
.business-hours-table {
	border-collapse: collapse;
	width: 100%;
	max-width: 24em;
}

.business-hours-table th,
.business-hours-table td {
	border-bottom: 1px solid var(--color-border);
	padding: 0.5em 0.8em;
	text-align: left;
}

.business-hours-table th {
	white-space: nowrap;
	color: var(--color-text-muted);
	font-weight: 600;
}

.open-badge {
	display: inline-block;
	margin: 0 0 var(--space-2);
	padding: 0.25em 0.9em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.85rem;
	color: #fff;
}

.open-badge.is-open {
	background: #16a34a;
}

.open-badge.is-closed {
	background: #9ca3af;
}

/* 対応エリア */
.business-areas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.business-areas li {
	padding: 0.3em 0.8em;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 0.9rem;
}

/* =========================================================
   14. お客様の声（[reviews] ショートコード）
   ========================================================= */
.reviews-section {
	margin-block: var(--space-4);
}

.reviews-title {
	text-align: center;
	margin: 0 0 var(--space-3);
}

/* サマリーバッジ（平均★＋件数） */
.reviews-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	margin: 0 auto var(--space-3);
}

.reviews-badge-score {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.3em 1em;
	border-radius: 999px;
	background: #f5b301;
	color: #4a3500;
	font-weight: 700;
	font-size: 1.05rem;
	box-shadow: 0 2px 8px rgba(245, 179, 1, 0.35);
}

.reviews-badge-star {
	font-size: 1.1em;
	line-height: 1;
}

.reviews-badge-count {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(var(--reviews-cols, 3), minmax(0, 1fr));
	gap: var(--space-3);
	align-items: stretch;
}

.review-card {
	display: flex;
	flex-direction: column;
	gap: 0.85em;
	margin: 0;
	padding: 1.6em 1.5em 1.4em;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	position: relative;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

/* Accent bar along the top edge of each card (--reviews-bar overrides it). */
.review-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--reviews-bar, linear-gradient(90deg, var(--color-accent, #2563eb), var(--color-accent-dark, #1d4ed8)));
}

/* Decorative opening quote mark. */
.review-card::after {
	content: "\201C";
	position: absolute;
	top: 0.18em;
	right: 0.35em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--color-accent, #2563eb);
	opacity: 0.12;
	pointer-events: none;
}

.review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.review-stars {
	display: flex;
	gap: 0.08em;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	line-height: 1;
}

.review-star {
	color: #d8dce3;
}

.review-star.is-filled {
	color: #f5b301;
}

.review-body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.85;
	color: var(--color-text);
	flex: 1 1 auto;
	white-space: pre-line;
}

/* Left quote line — controllable color/gradient via --reviews-quote (falls
   back to the accent color). Higher specificity so the theme's blockquote
   border does not leak in. */
.review-card .review-body {
	position: relative;
	border-left: 0;
	padding-left: var(--space-3);
}

.review-card .review-body::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 2px;
	background: var(--reviews-quote, var(--color-accent, #2563eb));
}

.review-author {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-top: auto;
	padding-top: 0.6em;
	border-top: 1px solid var(--color-border);
}

.review-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
}

.review-avatar--img {
	object-fit: cover;
}

.review-author-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
	min-width: 0;
}

.review-name {
	font-weight: 700;
	color: var(--color-text);
}

.review-role {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

/* --- stars="boxed"：星を金枠チップに --------------------------------- */
.reviews-grid.has-boxed-stars .review-stars {
	gap: 0.3em;
}

.reviews-grid.has-boxed-stars .review-star {
	width: 1.7em;
	height: 1.7em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #f0c24b;
	border-radius: 6px;
	background: #fffdf5;
	color: #e6b52e;
	font-size: 0.95rem;
}

.reviews-grid.has-boxed-stars .review-star.is-filled {
	background: #f5b301;
	border-color: #f5b301;
	color: #fff;
}

/* --- style="colorful"：1枚ずつ色違い -------------------------------- */
.reviews-style-colorful .review-card::before {
	background: var(--reviews-bar, var(--card-accent, var(--color-accent, #2563eb)));
}

.reviews-style-colorful .review-card::after {
	color: var(--card-accent, var(--color-accent, #2563eb));
	opacity: 0.14;
}

/* --- style="soft"：やわらかいパステルカード ------------------------- */
.reviews-style-soft .review-card {
	background: var(--color-bg-alt);
	border-color: transparent;
	box-shadow: none;
}

.reviews-style-soft .review-card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.reviews-style-soft .review-author {
	border-top-color: rgba(0, 0, 0, 0.08);
}

/* --- style="outline"：ミニマルな枠線のみ ---------------------------- */
.reviews-style-outline .review-card {
	box-shadow: none;
}

.reviews-style-outline .review-card::before {
	display: none;
}

.reviews-style-outline .review-card:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent, #2563eb);
	box-shadow: none;
}

/* --- style="gold"：五つ星に映える上品なゴールド調 ------------------- */
.reviews-style-gold .review-card {
	background: #fffdf7;
	border-color: #efe2c2;
}

.reviews-style-gold .review-card::before {
	background: var(--reviews-bar, linear-gradient(90deg, #f5b301, #e08c1a));
}

.reviews-style-gold .review-card::after {
	color: #d99a17;
}

.reviews-style-gold .review-author {
	border-top-color: #efe2c2;
}

/* Tablet: 4-up → 2-up, 3-up → 2-up. */
@media (max-width: 900px) {
	.reviews-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phone: single column. */
@media (max-width: 600px) {
	.reviews-grid {
		grid-template-columns: 1fr;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   16. 装飾アニメ文字（[fancy_text] ショートコード）
   丸ポップ体＋二重フチ（後ろ=白フチ／前=色）で、漢字が潰れず
   ステッカー風。色・動き・光沢・キラキラを属性で指定。
   ========================================================= */
.fancy-text {
	--fancy-fill: #ef3b32;
	--fancy-outline: #ffffff;
	--fancy-ow: 0.11em;
	position: relative;
	display: inline-block;
	font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", sans-serif;
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: 0.05em;
	font-size: 2.4rem;
	filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
}

.fancy-text > .fancy-b,
.fancy-text > .fancy-f {
	display: block;
}

.fancy-text > .fancy-b {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--fancy-outline);
	-webkit-text-stroke: var(--fancy-ow) var(--fancy-outline);
	paint-order: stroke fill;
	z-index: 0;
}

.fancy-text > .fancy-f {
	position: relative;
	z-index: 1;
	color: var(--fancy-fill);
}

/* Color presets */
.fancy-c-red    { --fancy-fill: #ef3b32; }
.fancy-c-green  { --fancy-fill: #06c755; }
.fancy-c-blue   { --fancy-fill: #2e8be6; }
.fancy-c-pink   { --fancy-fill: #ff5aa2; }
.fancy-c-orange { --fancy-fill: #ff8412; }
.fancy-c-purple { --fancy-fill: #8a5cf0; }
.fancy-c-black  { --fancy-fill: #2b2b2b; }

/* Gold: gradient fill with a sweeping highlight */
.fancy-c-gold > .fancy-f {
	color: #e6a92a;
	background: linear-gradient(100deg, #f7dd82, #e3a52b 45%, #fff7d2 50%, #e3a52b 55%, #bd7d1c);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: seo-fancy-shine 3.2s linear infinite;
}

/* Optional shine sweep for any solid color */
.fancy-shine > .fancy-f {
	background: linear-gradient(100deg, var(--fancy-fill) 42%, #ffffff 50%, var(--fancy-fill) 58%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: seo-fancy-shine 3.2s linear infinite;
}

/* Motions */
.fancy-float  { animation: seo-fancy-float 3s ease-in-out infinite; }
.fancy-bounce { animation: seo-fancy-bounce 2.4s cubic-bezier(0.28, 0.84, 0.42, 1) infinite; }
.fancy-pop    { animation: seo-fancy-pop 1.8s ease-in-out infinite; }
.fancy-wiggle { animation: seo-fancy-wiggle 2.6s ease-in-out infinite; }

@keyframes seo-fancy-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes seo-fancy-bounce { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-15px); } 35% { transform: translateY(0); } 50% { transform: translateY(-6px); } 62% { transform: translateY(0); } }
@keyframes seo-fancy-pop    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes seo-fancy-wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes seo-fancy-shine  { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* Sparkle (キラキラ) */
.fancy-sp {
	position: relative;
	display: inline-block;
}

.fancy-sp .fancy-s {
	position: absolute;
	color: #fff6b0;
	font-size: 0.66em;
	font-style: normal;
	text-shadow: 0 0 12px rgba(255, 205, 60, 1), 0 0 5px rgba(255, 255, 255, 0.95);
	pointer-events: none;
	z-index: 3;
}

.fancy-sp .fancy-s1 { top: -0.3em;  right: -0.2em;  animation: seo-fancy-twinkle 1.4s ease-in-out infinite; }
.fancy-sp .fancy-s2 { bottom: -0.08em; left: -0.24em; font-size: 0.5em; animation: seo-fancy-twinkle 1.4s ease-in-out 0.5s infinite; }
.fancy-sp .fancy-s3 { top: 0.2em; right: -0.34em; font-size: 0.42em; animation: seo-fancy-twinkle 1.4s ease-in-out 0.95s infinite; }

@keyframes seo-fancy-twinkle {
	0%, 100% { transform: scale(0) rotate(0); opacity: 0; }
	45% { transform: scale(1.3) rotate(90deg); opacity: 1; }
	70% { transform: scale(0.85) rotate(140deg); opacity: 0.85; }
}

/* =========================================================
   17. LINE風チャット吹き出し（[chat] / [chat_l] / [chat_r]）
   ========================================================= */
.chat {
	max-width: 600px;
	margin: 1.6em auto;
	padding: 1.1em 0.9em;
	background: #e9edf3;
	border-radius: 16px;
}

.chat-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin: 0.9em 0;
}

.chat-row.chat-right {
	flex-direction: row-reverse;
}

.chat-avatar {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	overflow: hidden;
	background: #cfd6e0;
}

.chat-main {
	max-width: 74%;
	display: flex;
	flex-direction: column;
}

.chat-right .chat-main {
	align-items: flex-end;
}

.chat-name {
	font-size: 0.72rem;
	color: #5b6b7a;
	margin: 0 0.35em 0.2em;
}

/* Bubble color lives on the row (--chat-bg), so a per-row color override works. */
.chat-left  { --chat-bg: #ffffff; }
.chat-right { --chat-bg: #06c755; }

.chat-bubble {
	position: relative;
	padding: 0.6em 0.85em;
	border-radius: 16px;
	line-height: 1.65;
	font-size: 0.98rem;
	word-break: break-word;
	background: var(--chat-bg, #ffffff);
}

.chat-left .chat-bubble {
	color: #1a1a1a;
	border-top-left-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.chat-right .chat-bubble {
	color: #ffffff;
	border-top-right-radius: 4px;
}

/* Bubble tails (colored to match the bubble). */
.chat-left .chat-bubble::before {
	content: "";
	position: absolute;
	top: 9px;
	left: -6px;
	border: 6px solid transparent;
	border-right-color: var(--chat-bg, #ffffff);
	border-left: 0;
}

.chat-right .chat-bubble::before {
	content: "";
	position: absolute;
	top: 9px;
	right: -6px;
	border: 6px solid transparent;
	border-left-color: var(--chat-bg, #06c755);
	border-right: 0;
}

@media (max-width: 480px) {
	.chat-main {
		max-width: 78%;
	}
	.chat-avatar {
		width: 40px;
		height: 40px;
	}
}

/* 吹き出しが画面に入ると「ポン」と登場（.chat-anim は JS が付与＝JS無しなら常に表示） */
.chat.chat-anim .chat-row {
	opacity: 0;
	transform: translateY(14px) scale(0.85);
	transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat.chat-anim .chat-row.is-in {
	opacity: 1;
	transform: none;
}