/*!
Theme Name: shinotuka
Theme URI: 
Author: 篠塚 聖（有限会社シノツカ）
Author URI: 
Description: 有限会社シノツカのコーポレートサイト用オリジナルテーマ。
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shinotuka
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

shinotuka is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Design Tokens（デザイン由来のカスタムプロパティ）
----------------------------------------------------------------
色・タイポグラフィの基準値。値はベタ書きせず var() で参照する。
--------------------------------------------------------------*/

:root {
	/* Color */
	--color-primary: #8A9D7A; /* メインカラー（グリーン） */
	--color-accent: #BD603E;  /* アクセント（オレンジ） */
	--color-text: #333333;    /* 本文テキスト */
	--color-heading: #0F1F01; /* 見出し */
	--color-border: #E8E8E8;  /* ヘッダー下線・ナビ区切り */
	--color-line: #E2E2E2;    /* 見出し下の罫線 */
	--color-card-border: #DCDCDC;
	--color-white: #FFFFFF;
	--color-primary-dark: #6E7A60; /* グリーンの濃色 */
	--color-muted: #727171;   /* 補足テキスト */

	/* Background */
	--bg-gray: #F6F7F3;
	--bg-cream: #FDFFF9;
	--bg-note: #F4F4F4;
	--bg-card: #F5F5F5;
	--bg-footer: #142410;
	--bg-placeholder: #D9D9D9;

	/* Icon（SVGマスク用。currentColor で着色するため色は持たせない） */
	--icon-arrow-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.8 6h21M16.5 1l5 5-5 5'/%3E%3C/svg%3E");
	--icon-chevron-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1l5 5-5 5'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4.6l3.2 3.2L11 1'/%3E%3C/svg%3E");
	--icon-home: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='%23000'%3E%3Cpath d='M14 3.5 1.75 13.3l1.4 1.75L14 6.3l10.85 8.75 1.4-1.75z'/%3E%3Cpath d='M4.46 13.5V24.5h7v-6h5v6h7V13.5L14 7.2z'/%3E%3C/svg%3E");
	--icon-worker: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 1.2a5.6 5.6 0 0 0-5.6 5.6v.9h11.2v-.9A5.6 5.6 0 0 0 12 1.2z'/%3E%3Crect x='4' y='8' width='16' height='2.6' rx='1.3'/%3E%3Cpath d='M12 12.3c-2.4 0-4.4 1.3-5.5 3.2l1.9 1.1A4.2 4.2 0 0 1 12 14.5c1.5 0 2.8.8 3.6 2.1l1.9-1.1a6.4 6.4 0 0 0-5.5-3.2z'/%3E%3Crect x='7.2' y='18.4' width='9.6' height='5.6' rx='1'/%3E%3Crect x='0' y='17.5' width='5.8' height='6.5' rx='1'/%3E%3Crect x='18.2' y='17.5' width='5.8' height='6.5' rx='1'/%3E%3C/svg%3E");
	--icon-chevron-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	--icon-check-circle: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3Cpath d='M5.8 10.2l2.7 2.7 5.7-5.7'/%3E%3C/svg%3E");

	/* Blog（ブログ一覧・個別で使う色） */
	--bg-blog: #F2F2F2;          /* ブログ本文エリアの背景 */
	--bg-count: #E6E6E6;         /* 件数バッジ */
	--bg-notice: #F5F5F5;        /* 記事内の注意ボックス */
	--color-card-line: #CACACA;  /* 記事カードの下線 */
	--color-side-line: #F0F0F0;  /* サイドバーの区切り線 */
	--color-input-line: #DDDDDD; /* 入力欄の枠線 */
	--color-input-ph: #757575;   /* 入力欄のプレースホルダー */
	--color-date: #AAAAAA;       /* サイドバーの日付 */
	--color-sub: #555555;        /* タグ・箇条書きの文字色 */
	--color-rule: #CECECE;       /* 見出し下の細い罫線（薄い側） */
	--color-hr: #E0E0E0;         /* 筆者ブロックの上下線 */

	/* Layout */
	--content-width: 1180px;  /* コンテンツ幅 */
	--blog-side-width: 300px; /* ブログのサイドバー幅 */
	--header-width: 1276px;   /* ヘッダー内側の幅 */

	/* Typography */
	--font-base: Arial, "Noto Sans JP", sans-serif; /* 数字・英字=Arial / 和文=Noto Sans JP */
	--font-num: Arial, Helvetica, sans-serif;       /* 数字を明示指定したい箇所 */
	--font-serif: "Noto Serif JP", serif;          /* バナーの「無料屋根診断」など明朝にしたい箇所 */

	/* Icon（ブログで追加） */
	--icon-tel: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
	--icon-mail: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
	--icon-search: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6.2'/%3E%3Cpath d='M13.2 13.2L18 18'/%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--color-accent);
}

/*
 * a:visited は指定しない。
 * 指定すると詳細度でコンポーネント側の色指定に勝ってしまい、
 * ボタンなどが訪問後に紫になるため。
 */
a:hover,
a:focus,
a:active {
	color: var(--color-accent);
}

/*
 * フォーカスリングはキーボード操作（Tab移動）のときだけ出す。
 * :focus だとマウスクリックでも点線の枠が出てしまう。
 * outline: none で全部消すのはキーボード操作の人が迷子になるので禁止。
 */
a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/

/* 全体のフォント（_s のデフォルトを上書き） */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--font-base);
	color: var(--color-text);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* 最上部のグリーンライン */
.site-header__accent {
	height: 20px;
	background: var(--color-primary);
}

/* 上部ヘッダー
--------------------------------------------- */
.header-upper {
	padding: 24px clamp(16px, 4.8vw, 70px);
	border-bottom: 1px solid var(--color-border);
}

.header-upper__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	max-width: var(--header-width);
	margin-inline: auto;
}

.site-branding__title {
	margin: 0;
	font-size: inherit;
	line-height: 1;
}

.site-branding__link {
	display: block;
}

.site-branding__logo {
	display: block;
	width: 153px;
	height: auto;
	max-width: 100%;
}

.header-contact {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* 電話番号 */
.header-tel__link {
	display: flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

.header-tel__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 50px;
	height: 27px;
	padding: 0 8px;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.04em;
}

.header-tel__badge-icon {
	display: block;
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: var(--icon-tel) no-repeat center / contain;
	mask: var(--icon-tel) no-repeat center / contain;
}

.header-tel__number {
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 34px;
	line-height: 39px;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.header-tel__hours {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	color: var(--color-text);
}

/* LINEボタン（電話とお問い合わせボタンの間） */
.header-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 55px;
	padding: 8px 20px;
	/* LINEのブランドカラー（他では使わないのでトークン化しない） */
	box-shadow: inset 0 0 0 1px #00B900;
	background: #00B900;
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	font-feature-settings: "palt";
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.header-line:hover,
.header-line:focus {
	opacity: 0.85;
	color: var(--color-white);
}

.header-line__main {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.header-line__sub {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.header-line__icon {
	display: block;
	width: 22px;
	height: 22px;
}

/* お問い合わせボタン */
.header-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* アイコン込みで「無料診断・お問い合わせ」が1行に収まる幅 */
	width: 216px;
	min-height: 55px;
	padding: 8px;
	/* border だと内寸が減って文字が折り返すので inset shadow で枠線を描く */
	box-shadow: inset 0 0 0 1px var(--color-accent);
	background: var(--color-accent);
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	font-feature-settings: "palt";
	transition: background-color 0.2s ease, color 0.2s ease;
}

.header-cta:hover,
.header-cta:focus {
	background: var(--color-white);
	color: var(--color-accent);
}

.header-cta__main {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

/* mask + currentColor なので、ホバーで文字色が変わるとアイコンも追従する */
.header-cta__icon {
	display: block;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--icon-mail) no-repeat center / contain;
	mask: var(--icon-mail) no-repeat center / contain;
}

.header-cta__sub {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* グローバルナビ
--------------------------------------------- */
.global-nav {
	padding-inline: clamp(16px, 3.75vw, 54px);
	background: var(--color-white);
}

/* ヒーローのテキストと左端を揃えるため、コンテンツ幅に収める */
.global-nav__list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.global-nav__list > li {
	position: relative;
	margin: 0;
}

/* 項目間の区切り線 */
.global-nav__list > li::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 24px;
	background: var(--color-border);
	transform: translateY(-50%);
}

.global-nav__list > li:first-child::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 24px;
	background: var(--color-border);
	transform: translateY(-50%);
}

.global-nav__list > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 64px;
	font-size: 16px;
	font-weight: 700;
	line-height: 19px;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.global-nav__list > li > a:hover,
.global-nav__list > li > a:focus {
	color: var(--color-primary);
}

.global-nav__list > .current-menu-item > a,
.global-nav__list > .current_page_item > a {
	color: var(--color-primary);
}

/* ハンバーガーボタン（SPのみ表示） */
.menu-toggle {
	display: none;
}

/* ナビが収まらない幅では余白を段階的に詰める
--------------------------------------------- */
@media screen and (max-width: 1279px) {

	.global-nav__list > li > a {
		padding: 0 40px;
	}
}

/* タブレット
--------------------------------------------- */
@media screen and (max-width: 1023px) {

	.header-contact {
		gap: 16px;
	}

	.header-tel__number {
		font-size: 26px;
		line-height: 1.2;
	}

	.header-tel__hours {
		font-size: 14px;
	}

	.header-cta {
		width: 160px;
	}

	/* タブレットは横幅が足りないのでLINEボタンは出さない（固定バナーで誘導） */
	.header-line {
		display: none;
	}

	.global-nav__list > li > a {
		padding: 0 16px;
	}
}

/* モバイル
--------------------------------------------- */
@media screen and (max-width: 767px) {

	/* ヘッダーは最上部に固定。ロゴ左寄せ＋右上ハンバーガー */
	.site-header__accent {
		height: 8px;
	}

	.header-upper {
		position: relative;
		padding: 12px 64px 12px 16px;
	}

	.header-upper__inner {
		justify-content: flex-start;
		gap: 0;
	}

	.site-branding__logo {
		width: 132px;
	}

	/* 電話・CTAはドロワーの中へ移す */
	.header-contact {
		display: none;
	}

	/* ハンバーガーボタン（右上・固定ヘッダー内） */
	.menu-toggle {
		position: absolute;
		/*
		 * 基準は sticky な .site-header（上部のグリーンライン込み）なので、
		 * top ではなく下端から測ってロゴと縦中心を揃える。
		 * .header-upper の padding-bottom(12px) と同じ値。
		 */
		bottom: 12px;
		right: 12px;
		z-index: 210;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--color-heading);
		font-family: inherit;
		cursor: pointer;
	}

	/*
	 * 3本線。要素自身に高さ16pxを持たせないと、疑似要素が箱の外に
	 * はみ出して「メニュー」の文字と重なってしまう。
	 * 中央の線は background で描く。
	 */
	.menu-toggle__icon {
		position: relative;
		display: block;
		width: 24px;
		height: 16px;
		background: linear-gradient(currentColor, currentColor) center center / 100% 2px no-repeat;
	}

	.menu-toggle__icon::before,
	.menu-toggle__icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		transition: transform 0.25s ease;
	}

	.menu-toggle__icon::before {
		top: 0;
	}

	.menu-toggle__icon::after {
		bottom: 0;
	}

	.menu-toggle__label {
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.04em;
	}

	/* 開いているあいだは×印に */
	.global-nav.toggled .menu-toggle__icon {
		background-image: none;
	}

	.global-nav.toggled .menu-toggle__label {
		visibility: hidden;
	}

	.global-nav.toggled .menu-toggle__icon::before {
		transform: translateY(7px) rotate(45deg);
	}

	.global-nav.toggled .menu-toggle__icon::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* 背面のオーバーレイ */
	.global-nav__overlay {
		position: fixed;
		inset: 0;
		z-index: 190;
		display: block;
		background: rgba(15, 31, 1, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	.global-nav.toggled .global-nav__overlay {
		opacity: 1;
		visibility: visible;
	}

	/* 右から左へスライドインするドロワー */
	.global-nav__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		width: min(320px, 84vw);
		padding: 76px 20px 32px;
		overflow-y: auto;
		background: var(--color-white);
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}

	.global-nav.toggled .global-nav__panel {
		transform: translateX(0);
	}

	.global-nav__list {
		flex-direction: column;
		align-items: stretch;
	}

	.global-nav__list > li::after,
	.global-nav__list > li:first-child::before {
		content: none;
	}

	.global-nav__list > li {
		border-bottom: 1px solid var(--color-border);
	}

	.global-nav__list > li > a {
		justify-content: flex-start;
		padding: 0 8px;
	}

	/* ドロワー内の連絡先 */
	.drawer-contact {
		display: block;
		margin-top: 24px;
	}

	body.is-nav-open {
		overflow: hidden;
	}
}


/*--------------------------------------------------------------
# Layout / Common Components
--------------------------------------------------------------*/

.l-section {
	padding: 80px clamp(16px, 3.75vw, 54px);
	background: var(--color-white);
}

.l-section__inner {
	max-width: var(--content-width);
	margin-inline: auto;
}

.l-section__action {
	margin: 48px 0 0;
	text-align: center;
}

/* セクション見出し */
.c-section-head {
	margin-bottom: 56px;
	text-align: center;
}

.c-section-head__eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

.c-section-head__title {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.c-section-head__lead {
	margin: 32px 0 0;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

/* 文字色ユーティリティ */
.u-accent {
	font-style: normal;
	color: var(--color-accent);
}

.u-primary {
	font-style: normal;
	color: var(--color-primary);
}

/* 画像プレースホルダー（画像未配置でもレイアウトが崩れないように） */
.c-placeholder {
	position: relative;
	overflow: hidden;
	background: var(--bg-placeholder);
}

.c-placeholder > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-placeholder--icon {
	background: transparent;
}

/* ボタン */
.c-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 64px 14px 40px;
	background: var(--color-accent);
	box-shadow: 5px 5px 0 var(--color-heading);
	color: var(--color-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.c-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 28px;
	width: 10px;
	height: 14px;
	background: var(--color-white);
	-webkit-mask: var(--icon-chevron-right) no-repeat center / contain;
	mask: var(--icon-chevron-right) no-repeat center / contain;
	transform: translateY(-50%);
	transition: transform 0.2s ease;
}

.c-btn:hover::after,
.c-btn:focus::after {
	transform: translateY(-50%) translateX(3px);
}

.c-btn:hover,
.c-btn:focus {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--color-heading);
	color: var(--color-white);
}

/* 「詳しく見る」 */
.c-more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-accent);
}

.c-more__text {
	position: relative;
}

/* 下線がホバーで伸びる */
.c-more__text::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width 0.25s ease;
}

/* 矢印（SVGマスク。色は文字色に追従する） */
.c-more__arrow {
	display: block;
	width: 24px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--icon-arrow-right) no-repeat center / contain;
	mask: var(--icon-arrow-right) no-repeat center / contain;
	transition: transform 0.25s ease;
}

/* カードにカーソルを合わせたら矢印が進む */
.p-service__item:hover .c-more__arrow,
.p-works__link:hover .c-more__arrow {
	transform: translateX(6px);
}

.p-service__item:hover .c-more__text::after,
.p-works__link:hover .c-more__text::after {
	width: 100%;
}

/* タグ */
.c-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 12px;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.c-tag--round {
	padding: 4px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.c-tag--accent {
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--color-accent);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.c-tag--small {
	min-width: 100px;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 14px;
	letter-spacing: 0.04em;
}

/* 注記ボックス */
.c-note {
	margin-top: 48px;
	padding: 24px clamp(20px, 3.3vw, 48px);
	border-left: 4px solid var(--color-primary);
	background: var(--bg-note);
}

.c-note--white {
	background: var(--color-white);
}

.c-note--media {
	display: flex;
	align-items: center;
	gap: 40px;
}

.c-note__image {
	flex: 0 0 200px;
	aspect-ratio: 200 / 126;
}

.c-note__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	color: var(--color-primary);
}

.c-note__text {
	margin: 0;
	font-size: 16px;
	line-height: 2;
	color: var(--color-text);
}

/* チェックリスト */
.c-check-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-check-list li {
	position: relative;
	padding-left: 36px;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.c-check-list li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--color-primary);
	-webkit-mask: var(--icon-check-circle) no-repeat center / contain;
	mask: var(--icon-check-circle) no-repeat center / contain;
}


/*--------------------------------------------------------------
# 1. ファーストビュー
--------------------------------------------------------------*/

.p-hero {
	position: relative;
	overflow: hidden;
	min-height: 572px;
	background: var(--color-white);
}

.p-hero__bg {
	position: absolute;
	inset: 0;
	background: var(--bg-placeholder);
}

.p-hero__bg > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.p-hero {
	padding-inline: clamp(16px, 3.75vw, 54px);
}

.p-hero__inner {
	position: relative;
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 93px 0 56px;
}

.p-hero__body {
	max-width: 660px;
}

.p-hero__label {
	display: inline-block;
	margin: 0 0 16px;
	padding: 8px 16px;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: clamp(14px, 1.2vw, 16px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.p-hero__title {
	margin: 0 0 16px;
	font-size: clamp(30px, 3.75vw, 54px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-hero__lead {
	margin: 0;
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

/* SPと同じ「影付きの白箱 × 2列2行」で並べる。
   列幅は中身に合わせて詰める（1frだと箱が広がって左右が空きすぎる） */
.p-hero__points {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 4px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.p-hero__point {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 64px;
	margin: 0;
	padding: 10px 16px;
	background: var(--color-white);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.p-hero__point-icon > img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.p-hero__point-text {
	font-size: clamp(13px, 1.1vw, 16px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	/* 明示改行を入れているので、これ以上折り返させない */
	white-space: nowrap;
	font-feature-settings: "palt";
	color: var(--color-heading);
}

/* 基準は .p-hero__inner（マークアップ上もその中にある）。
   ラベル〜見出しのテキストブロック（幅660px）の右上に置く */
.p-hero__badge {
	position: absolute;
	/* ラベルの右隣・見出し1行目の右に食い込む位置（テキストに寄せる） */
	top: 24px;
	left: 412px;
	width: clamp(70px, 8.5vw, 123px);
}

.p-hero__badge > img {
	display: block;
	width: 100%;
	height: auto;
}


/*--------------------------------------------------------------
# 2. YOUR TROUBLE
--------------------------------------------------------------*/

.p-trouble {
	position: relative;
	overflow: hidden;
	background: var(--bg-cream);
}

/* 上の両端に模様が入った背景画像 */
.p-trouble__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
}

.p-trouble__bg > img {
	display: block;
	width: 100%;
	height: auto;
}

.p-trouble .l-section__inner {
	position: relative;
	z-index: 1;
}

.p-trouble__body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0;
}

.p-trouble__list {
	display: flex;
	flex-direction: column;
	gap: 53px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 上下段は内側へ、中段は外側へ張り出す（デザインの扇状の配置） */
.p-trouble__list--left {
	align-items: flex-start;
	padding-left: 40px;
}

.p-trouble__list--right {
	align-items: flex-end;
	padding-right: 40px;
}

.p-trouble__list--left .p-trouble__item:nth-child(2) {
	margin-left: -40px;
}

.p-trouble__list--right .p-trouble__item:nth-child(2) {
	margin-right: -40px;
}

.p-trouble__item {
	display: flex;
	align-items: flex-start;
	margin: 0;
}

.p-trouble__list--right .p-trouble__item {
	flex-direction: row-reverse;
}

/* アイコンは吹き出しの外側上に重ねる */
.p-trouble__icon {
	position: relative;
	z-index: 1;
	flex: none;
	width: 68px;
}

.p-trouble__icon > img {
	display: block;
	width: 100%;
	height: auto;
}

.p-trouble__list--left .p-trouble__icon {
	margin-right: -30px;
}

.p-trouble__list--right .p-trouble__icon {
	margin-left: -30px;
}

.p-trouble__balloon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 1180px以下では画面に合わせて縮める（固定320pxだと1024〜1180pxではみ出す） */
	width: min(320px, 27vw);
	min-height: 96px;
	margin: 24px 0 0;
	padding: 16px 32px;
	border-radius: 80px;
	background: var(--color-white);
	/*
	 * 影は box-shadow ではなく filter で付ける。
	 * filter は「本体＋尻尾（::after）」をひとかたまりとして扱うので、
	 * 継ぎ目に線が出ず、1つの吹き出しとして見える。
	 */
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.22));
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	text-align: center;
	color: var(--color-heading);
}

/*
 * 吹き出しの尻尾。
 * 影は親（.p-trouble__balloon）の filter がまとめて描くのでここでは付けない。
 * 角丸の内側まで 4px 食い込ませて、付け根に隙間や段差が出ないようにする。
 */
.p-trouble__balloon::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-block: 11px solid transparent;
	transform: translateY(-50%);
}

.p-trouble__list--left .p-trouble__balloon::after {
	right: -14px;
	border-left: 18px solid var(--color-white);
}

.p-trouble__list--right .p-trouble__balloon::after {
	left: -14px;
	border-right: 18px solid var(--color-white);
}

.p-trouble__illust {
	width: clamp(260px, 36vw, 448px);
	/* デザインどおり吹き出しに少し重ねる */
	margin-inline: -34px;
	background: transparent;
}

/* PCのみ有効な改行 */
.u-br-pc {
	display: inline;
}

.p-trouble__illust > img {
	height: auto;
	object-fit: contain;
}

.p-trouble__dots {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 48px 0;
}

.p-trouble__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.p-trouble__dots span:nth-child(1) { background: #DDDDDD; }
.p-trouble__dots span:nth-child(2) { background: #E2E7DE; }
.p-trouble__dots span:nth-child(3) { background: #C8D4BE; }
.p-trouble__dots span:nth-child(4) { background: #ADC39B; }
.p-trouble__dots span:nth-child(5) { background: var(--color-primary); }

.p-trouble__answer {
	text-align: center;
}

.p-trouble__answer-title {
	display: inline-block;
	margin: 0 0 32px;
	padding: 8px 16px;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.p-trouble__answer-text {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}


/*--------------------------------------------------------------
# 3. PROMISE
--------------------------------------------------------------*/

.p-promise__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-promise__item {
	margin: 0;
}

.p-promise__label {
	width: 180px;
	margin: 0 auto;
	padding: 6px;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.p-promise__card {
	height: calc(100% - 34px);
	padding: 24px;
	background: var(--bg-card);
}

.p-promise__image {
	aspect-ratio: 332 / 250;
	margin-bottom: 16px;
}

.p-promise__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-heading);
}

.p-promise__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}


/*--------------------------------------------------------------
# 4. MESSAGE
--------------------------------------------------------------*/

.p-message {
	position: relative;
	overflow: hidden;
}

.p-message__bg {
	position: absolute;
	inset: 0;
}

.p-message .l-section__inner {
	position: relative;
}

.p-message__card {
	display: flex;
	gap: 48px;
	padding: clamp(24px, 4vw, 56px);
	background: rgba(255, 255, 255, 0.92);
}

.p-message__figure {
	position: relative;
	/* stretch させると名前プレートの基準が写真ではなくカード下端になるため */
	align-self: flex-start;
	flex: 0 1 494px;
	padding: 18px 0 0 24px;
}

.p-message__figure::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 24px);
	height: calc(100% - 18px);
	border: 2px solid var(--color-primary);
}

.p-message__photo {
	position: relative;
	aspect-ratio: 470 / 535;
}

.p-message__name {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 20px 48px;
	background: var(--color-white);
	text-align: center;
}

.p-message__name-main {
	margin: 0 0 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-heading);
}

.p-message__name-sub {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--color-heading);
}

.p-message__body {
	flex: 1 1 538px;
}

.p-message__title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-message__text p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-message__action {
	margin: 32px 0 0;
}


/*--------------------------------------------------------------
# 5. REASON
--------------------------------------------------------------*/

.p-reason {
	background: var(--bg-gray);
}

.p-reason__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.p-reason__item {
	padding: 40px clamp(20px, 4vw, 58px);
	border-top: 4px solid var(--color-primary);
	background: var(--color-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.p-reason__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 5vw, 64px);
}

.p-reason__row--reverse {
	flex-direction: row-reverse;
}

.p-reason__body {
	flex: 1 1 552px;
}

.p-reason__image {
	flex: 0 1 500px;
	aspect-ratio: 500 / 348;
}

.p-reason__no {
	margin: 0 0 16px;
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

.p-reason__title {
	margin: 0 0 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--color-line);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-reason__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-reason__extra {
	margin-top: 48px;
}

/* 保有資格一覧 */
.c-qualification__head {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 24px clamp(20px, 4vw, 56px);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.c-qualification__head-bg {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background: transparent;
}

.c-qualification__head-text {
	position: relative;
}

.c-qualification__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px clamp(24px, 5vw, 64px);
	margin: 0;
	padding: 24px 8px;
	border: 1px solid #D1D1D1;
	border-top: 0;
	background: var(--color-white);
	list-style: none;
}

.c-qualification__list li {
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.c-qualification__list li::before {
	content: "・";
}

/* 瓦屋根診断士とは */
.c-license {
	margin-top: 48px;
}

.c-license__title {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0 0 24px;
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.c-license__title::after {
	content: "";
	flex: 0 0 120px;
	height: 1px;
	background: var(--color-heading);
}

.c-license__text {
	margin: 0 0 32px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.c-license__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.c-license__box {
	flex: 0 1 250px;
	padding: 24px 32px;
	border: 1px solid #8E8E8E;
	background: var(--color-white);
	text-align: center;
}

.c-license__box--result {
	border: 3px solid var(--color-heading);
	background: #7F9670;
	color: var(--color-white);
}

.c-license__icon > img {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto;
	object-fit: contain;
}

.c-license__box-label {
	margin: 8px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid #9A9A9A;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.c-license__box--result .c-license__box-label {
	border-bottom-color: var(--color-white);
}

.c-license__box-name {
	margin: 0;
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.c-license__operator {
	font-size: 32px;
	font-weight: 700;
	color: var(--color-heading);
}

.c-license__note {
	margin: 32px 0 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-text);
}

/* 中間マージン比較 */
.c-margin {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.c-margin__row {
	display: flex;
	align-items: stretch;
	border: 1px solid #CDCDCE;
	background: #F8F9F9;
}

.c-margin__row--own {
	background: #FEFBF2;
}

/* 左のラベル（テキストが上、アイコンが下・右向きの三角付き） */
.c-margin__label {
	position: relative;
	display: flex;
	flex: 0 0 148px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 16px 8px;
	background: #5F5F5F;
	color: var(--color-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.c-margin__label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	border: 12px solid transparent;
	border-left: 26px solid #5F5F5F;
	transform: translateY(-50%);
}

.c-margin__row--own .c-margin__label {
	background: var(--color-primary);
}

.c-margin__row--own .c-margin__label::after {
	border-left-color: var(--color-primary);
}

.c-margin__label img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.c-margin__chart {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	/* 下の「マージン発生」タグ用に余白を確保（デザインの行高 170px に合わせる） */
	padding: 50px 16px 64px;
}

.c-margin__chip {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 178px;
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid #BABABB;
	border-radius: 8px;
	background: var(--color-white);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-muted);
}

.c-margin__chip img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.c-margin__chip--sm {
	width: 140px;
}

.c-margin__chip--wide {
	width: 374px;
	border: 2px solid var(--color-accent);
	color: var(--color-heading);
}

/* 矢印（下にタグをぶら下げる） */
.c-margin__link {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
}

.c-margin__arrow {
	display: block;
	flex: none;
	width: 20px;
	height: 12px;
	background: #222222;
	-webkit-mask: var(--icon-arrow-right) no-repeat center / contain;
	mask: var(--icon-arrow-right) no-repeat center / contain;
}

.c-margin__tag {
	position: absolute;
	top: calc(100% + 26px);
	left: 50%;
	padding: 2px 24px;
	border-radius: 32px;
	background: #5F5F5F;
	color: var(--color-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	transform: translateX(-50%);
}

.c-margin__tag::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 0;
	height: 24px;
	border-left: 1px dashed #5F5F5F;
}

.c-margin__tag--accent {
	background: var(--color-accent);
}

.c-margin__tag--accent::before {
	border-left-color: var(--color-primary);
}

/* 右の注記 */
.c-margin__note {
	position: relative;
	display: flex;
	flex: 0 0 300px;
	align-items: center;
	gap: 16px;
	padding: 24px 16px 24px 32px;
}

.c-margin__note::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 118px;
	background: #BEBEBE;
	transform: translateY(-50%);
}

.c-margin__note-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
}

.c-margin__note img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.c-margin__note p {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-muted);
}

.c-margin__row--own .c-margin__note p {
	color: var(--color-heading);
}


/*--------------------------------------------------------------
# 6. GUIDE
--------------------------------------------------------------*/

.p-guide__table-wrap {
	overflow-x: auto;
}

.p-guide__table {
	width: 100%;
	min-width: 840px;
	border-collapse: collapse;
	table-layout: fixed;
}

.p-guide__table th,
.p-guide__table td {
	padding: 14px 16px;
	border: 1px solid #B3B3B3;
	font-size: 16px;
	line-height: 1.7;
	vertical-align: middle;
}

.p-guide__table thead th {
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
	text-align: center;
}

/* 左上は罫線なし・背景なし（デザインどおり隣接セルの罫線だけ見せる） */
.p-guide__table thead td.p-guide__corner {
	width: 196px;
	border: 0;
	background: transparent;
}

.p-guide__table tbody th {
	width: 196px;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
	text-align: left;
}

.p-guide__table tbody td {
	background: var(--color-white);
	color: var(--color-text);
}

.p-guide__table tbody td.is-merit {
	color: var(--color-accent);
	font-weight: 700;
}


/*--------------------------------------------------------------
# 7. SERVICE
--------------------------------------------------------------*/

.p-service {
	background: var(--bg-gray);
}

.p-service__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-service__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--color-card-border);
	background: var(--color-white);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.p-service__item:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.p-service__image {
	aspect-ratio: 380 / 198;
}

.p-service__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 24px 16px 32px;
}

.p-service__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-heading);
}

.p-service__text {
	flex: 1;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
}


/*--------------------------------------------------------------
# 8. WORKS
--------------------------------------------------------------*/

.p-works__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-works__item {
	margin: 0;
	border: 1px solid var(--color-card-border);
	background: var(--color-white);
}

.p-works__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.p-works__image {
	aspect-ratio: 380 / 198;
}

.p-works__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px 16px 32px;
}

.p-works__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
}

.p-works__meta {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--color-accent);
}


/*--------------------------------------------------------------
# 9. VOICE
--------------------------------------------------------------*/

.p-voice {
	position: relative;
	overflow: hidden;
	background: var(--bg-gray);
}

/* 人物とグラデーションが合成済みのセクション背景（1440×785 相当） */
.p-voice__bg {
	position: absolute;
	top: 37px;
	left: 0;
	width: 100%;
}

.p-voice__bg > img {
	display: block;
	width: 100%;
	height: auto;
}

.p-voice .l-section__inner {
	position: relative;
	z-index: 1;
}

.p-voice__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-voice__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 32px;
	border: 1px solid var(--color-card-border);
	background: var(--color-white);
}

.p-voice__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.p-voice__avatar {
	flex: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #999999;
}

.p-voice__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: var(--color-accent);
}

.p-voice__text {
	flex: 1;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-voice__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0;
}

.p-voice__work {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-heading);
}


/*--------------------------------------------------------------
# 10. FLOW
--------------------------------------------------------------*/

.p-flow__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-flow__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-bottom: 16px;
	border: 1px solid var(--color-card-border);
	background: var(--color-white);
}

.p-flow__image {
	aspect-ratio: 190 / 138;
}

.p-flow__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 8px 0;
}

.p-flow__step {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.p-flow__step-label {
	font-family: var(--font-num);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-primary);
}

.p-flow__step-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-num);
	font-style: italic;
	font-weight: 700;
	font-size: 15px;
}

.p-flow__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-heading);
}

.p-flow__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text);
}


/*--------------------------------------------------------------
# 11. AFTER SUPPORT
--------------------------------------------------------------*/

.p-support {
	background: var(--bg-gray);
}

.p-support__card {
	display: flex;
	align-items: center;
	gap: clamp(24px, 5vw, 64px);
	padding: 40px clamp(20px, 4vw, 58px);
	background: var(--color-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.p-support__image {
	flex: 0 1 500px;
	aspect-ratio: 500 / 348;
}

.p-support__body {
	flex: 1 1 552px;
}

.p-support__title {
	margin: 0 0 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--color-line);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-support__text {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}


/*--------------------------------------------------------------
# 12. LOCAL
--------------------------------------------------------------*/

.p-local {
	position: relative;
	overflow: hidden;
}

.p-local__bg {
	position: absolute;
	inset: 0;
}

.p-local .l-section__inner {
	position: relative;
}

.p-local__card {
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	padding: 40px;
	background: var(--color-white);
}

.p-local__image {
	flex: 0 1 500px;
	aspect-ratio: 500 / 348;
}

.p-local__body {
	flex: 1 1 500px;
}

.p-local__title {
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-line);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-local__body p {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-local__body p:last-child {
	margin-bottom: 0;
}


/*--------------------------------------------------------------
# 13. FAQ
--------------------------------------------------------------*/

.p-faq__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.c-faq {
	border: 1px solid #C2C2C2;
	background: var(--color-white);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.c-faq__question {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	list-style: none;
	cursor: pointer;
	font-size: clamp(15px, 1.5vw, 18px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-primary);
}

.c-faq__question::-webkit-details-marker {
	display: none;
}

.c-faq.is-open > .c-faq__question {
	background: var(--color-primary);
	color: var(--color-white);
}

.c-faq__mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 18px;
}

.c-faq.is-open > .c-faq__question .c-faq__mark {
	background: var(--color-white);
	color: var(--color-primary);
}

.c-faq__question-text {
	flex: 1;
}

.c-faq__toggle {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
}

.c-faq__toggle::before,
.c-faq__toggle::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.c-faq__toggle::after {
	transform: rotate(90deg);
}

.c-faq.is-open .c-faq__toggle::after {
	transform: rotate(0deg);
}

/*
 * 高さだけをアニメーションさせるための外枠。
 * padding や border をここに持たせると、高さ0でも余白が残って
 * 開閉のたびにガクッと跳ねるため、すべて内側の要素に持たせている。
 */
.c-faq__answer {
	overflow: hidden;
	transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: height;
}

.c-faq__answer-inner {
	display: flex;
	gap: 16px;
	padding: 16px;
	border-top: 1px solid #C2C2C2;
}

.c-faq__toggle::before,
.c-faq__toggle::after,
.c-faq__question {
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.c-faq__answer-text {
	margin: 0;
	font-size: clamp(14px, 1.35vw, 16px);
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-primary);
}


/*--------------------------------------------------------------
# 14. AREA
--------------------------------------------------------------*/

.p-area {
	background: var(--bg-gray);
}

.p-area__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(24px, 5vw, 64px);
	min-height: 564px;
	padding: 40px clamp(20px, 4vw, 58px);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.p-area__image,
.p-area__body {
	position: relative;
	z-index: 1;
}

.p-area__image {
	flex: 0 1 500px;
	aspect-ratio: 1 / 1;
}

.p-area__body {
	display: flex;
	flex: 1 1 552px;
	flex-direction: column;
	align-self: stretch;
	justify-content: flex-start;
}

.p-area__title {
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-line);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-area__text {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

/* 地図はカード右半分の背景レイヤー */
.p-area__map {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 50%;
	aspect-ratio: 590 / 514;
	background: transparent;
}

.p-area__map > img {
	object-fit: contain;
	object-position: right bottom;
}

.p-area__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 16px;
	/* デザインどおり本文と離してカード下端に寄せる */
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}


/*--------------------------------------------------------------
# 15. BLOG
--------------------------------------------------------------*/

.p-blog__card {
	padding: 24px clamp(16px, 4vw, 58px);
	background: var(--color-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.p-blog__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-blog__item {
	margin: 0;
}

.p-blog__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 8px clamp(0px, 3vw, 56px);
	color: inherit;
	text-decoration: none;
}

.p-blog__link:hover .p-blog__title {
	text-decoration: underline;
}

.p-blog__date {
	flex: none;
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-blog__title {
	flex: 1 1 320px;
	margin-left: 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--color-text);
}

.p-blog__item--empty,
.p-works__item--empty,
.p-voice__item--empty {
	padding: 24px;
	text-align: center;
	color: var(--color-muted);
}

/* 空表示のときはグリッドの1カラム分ではなく全幅を使う */
.p-works__item--empty,
.p-voice__item--empty {
	grid-column: 1 / -1;
	background: var(--color-white);
}


/*--------------------------------------------------------------
# 16. CTA
--------------------------------------------------------------*/

.p-cta {
	position: relative;
	overflow: hidden;
}

.p-cta__bg {
	position: absolute;
	inset: 0;
}

.p-cta .l-section__inner {
	position: relative;
}

.p-cta__head {
	margin-bottom: 56px;
	text-align: center;
}

.p-cta__sub {
	margin: 0 0 32px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-cta__title {
	margin: 0 0 32px;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-cta__lead {
	margin: 0;
	font-size: clamp(15px, 1.5vw, 18px);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}

.p-cta__box {
	position: relative;
	display: flex;
	flex: 1 1 480px;
	align-items: center;
	gap: 24px;
	max-width: 564px;
	min-height: 180px;
	padding: 24px;
	border: 3px solid var(--color-heading);
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-heading);
	text-decoration: none;
}

/* 内側の白い罫線（デザインの Frame 1000007799） */
.p-cta__box::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 2;
	border: 1px solid var(--color-white);
	border-radius: 6px;
	pointer-events: none;
}

.p-cta__box--tel {
	padding: 0 24px 0 0;
}

.p-cta__box--tel .p-cta__box-icon {
	display: flex;
	flex: 0 0 122px;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	/* デザインどおり右端を矢羽根状に張り出す（アイコンに重ならない範囲で） */
	clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
	background: var(--color-heading);
	border-radius: 4px 0 0 4px;
}

.p-cta__box--tel .p-cta__box-icon img {
	/* 矢羽根の張り出しぶんだけ左に寄せて重なりを避ける */
	margin-right: 18%;
}

/* WEBボタン：アイコンと文言のあいだの縦罫線 */
.p-cta__box--web .p-cta__box-icon {
	position: relative;
	flex: none;
	padding-right: 24px;
}

.p-cta__box--web .p-cta__box-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 40px;
	background: var(--color-heading);
	transform: translateY(-50%);
}

.p-cta__box-icon img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.p-cta__box-body {
	flex: 1;
}

.p-cta__tel-number {
	display: block;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-heading);
	font-family: var(--font-num);
	font-size: clamp(24px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-accent);
}

.p-cta__tel-hours {
	display: block;
	font-size: clamp(13px, 1.4vw, 20px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-text);
}

.p-cta__web-text {
	display: block;
	font-size: clamp(16px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
}

/* ホバー時にリンク色（青）にならないようにする */
.p-cta__box:hover,
.p-cta__box:focus,
.p-cta__box:hover .p-cta__web-text,
.p-cta__box:focus .p-cta__web-text {
	color: var(--color-accent);
}

.p-cta__box--tel:hover,
.p-cta__box--tel:focus {
	color: var(--color-heading);
}

.p-cta__box-arrow {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-accent);
}

.p-cta__box-arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-white);
	-webkit-mask: var(--icon-chevron-right) no-repeat center / 8px 11px;
	mask: var(--icon-chevron-right) no-repeat center / 8px 11px;
}


/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/

.site-footer {
	position: relative;
	overflow: hidden;
	padding: 64px clamp(16px, 9vw, 130px) 24px;
	background: var(--bg-footer);
	color: var(--color-white);
}

.site-footer__bg {
	position: absolute;
	inset: 0;
	opacity: 0.12;
	background: transparent;
}

.site-footer__inner {
	position: relative;
	max-width: var(--content-width);
	margin-inline: auto;
}

.site-footer__main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px clamp(40px, 6vw, 72px);
	margin-bottom: 32px;
}

.site-footer__logo {
	margin: 0 0 24px;
}

.site-footer__logo img {
	display: block;
	width: 147px;
	height: auto;
}

.site-footer__address {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-style: normal;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
}

.site-footer__nav {
	display: flex;
	gap: clamp(40px, 10vw, 120px);
}

.site-footer__nav-title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-white);
}

.site-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.04em;
}

.site-footer__nav-list a {
	color: var(--color-white);
	text-decoration: none;
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus {
	color: var(--color-white);
	text-decoration: underline;
}

.site-footer__bottom {
	padding-top: 24px;
	border-top: 1px solid var(--color-white);
}

.site-footer__copyright {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}


/*--------------------------------------------------------------
# 幅の狭いPC（1024〜1180px）
----------------------------------------------------------------
YOUR TROUBLE は「吹き出し320px＋扇状の張り出し＋イラスト」の合計が
この幅では収まらず、横スクロールが出る。ここだけ全体を詰める。
--------------------------------------------------------------*/

@media screen and (min-width: 1024px) and (max-width: 1180px) {

	.p-trouble__body {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.p-trouble__balloon {
		width: min(266px, 24vw);
		font-size: 15px;
	}

	.p-trouble__illust {
		width: clamp(240px, 30vw, 448px);
	}

	.p-trouble__list--left {
		padding-left: 24px;
	}

	.p-trouble__list--right {
		padding-right: 24px;
	}

	.p-trouble__list--left .p-trouble__item:nth-child(2) {
		margin-left: -24px;
	}

	.p-trouble__list--right .p-trouble__item:nth-child(2) {
		margin-right: -24px;
	}

	/* 中間マージン比較図：右の注記が固定300pxで収まらないので縮められるようにする */
	.c-margin__chart {
		min-width: 0;
		gap: 8px;
		padding-inline: 12px;
	}

	.c-margin__chip {
		min-width: 0;
		font-size: 15px;
	}

	.c-margin__chip--wide {
		width: 300px;
	}

	.c-margin__note {
		flex: 0 1 260px;
		padding-left: 20px;
	}
}


/*--------------------------------------------------------------
# Responsive（TOPページ）
--------------------------------------------------------------*/

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

	.l-section {
		padding: 64px clamp(16px, 3.75vw, 40px);
	}

	/* ファーストビュー */
	.p-hero {
		min-height: 0;
	}

	.p-hero__inner {
		padding-top: 56px;
	}

	/* 悩み */
	.p-trouble__body {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.p-trouble__illust {
		order: -1;
		width: min(320px, 70%);
		margin-inline: auto;
	}

	.p-trouble__balloon > span {
		display: block;
	}

	.p-trouble__list,
	.p-trouble__list--left,
	.p-trouble__list--right {
		align-items: stretch;
		gap: 24px;
		padding: 0;
	}

	.p-trouble__list--left .p-trouble__item:nth-child(2),
	.p-trouble__list--right .p-trouble__item:nth-child(2) {
		margin: 0;
	}

	.p-trouble__list--right .p-trouble__item {
		flex-direction: row;
	}

	.p-trouble__list--right .p-trouble__icon {
		margin-right: -30px;
		margin-left: 0;
	}

	.p-trouble__balloon {
		width: auto;
		flex: 1;
	}

	.p-trouble__list--right .p-trouble__balloon::after {
		right: -14px;
		left: auto;
		border-right: 0;
		border-left: 18px solid var(--color-white);
	}

	/* 横並び → 縦積み */
	.p-message__card,
	.p-reason__row,
	.p-reason__row--reverse,
	.p-support__card,
	.p-local__card,
	.p-area__card,
	.c-note--media {
		flex-direction: column;
		align-items: stretch;
	}

	.p-message__figure,
	.p-reason__image,
	.p-support__image,
	.p-local__image,
	.p-area__image,
	.c-note__image {
		flex: 1 1 auto;
		width: 100%;
	}

	.p-area__card {
		min-height: 0;
	}

	/* 地図は背景から通常配置に戻し、本文のあとへ回す */
	.p-area__map {
		position: static;
		order: 3;
		width: 100%;
		margin-top: 24px;
		/* 高さを画像なりにして余白を作らない */
		aspect-ratio: auto;
		background: transparent;
	}

	.p-area__map > img {
		height: auto;
		object-position: center;
	}

	.p-area__image {
		order: 1;
	}

	.p-area__body {
		order: 2;
	}

	.p-area__tags {
		margin-top: 24px;
	}

	.p-message__figure {
		max-width: 420px;
		margin-inline: auto;
	}

	.c-note__image {
		max-width: 320px;
	}

	.c-margin__row {
		flex-direction: column;
	}

	.c-margin__chart {
		flex-wrap: wrap;
		padding: 32px 16px 56px;
	}

	.c-margin__label {
		flex: none;
		flex-direction: row;
		justify-content: center;
		gap: 12px;
	}

	.c-margin__label::after {
		top: 100%;
		left: 50%;
		border: 12px solid transparent;
		border-top: 20px solid #5F5F5F;
		transform: translateX(-50%);
	}

	.c-margin__row--own .c-margin__label::after {
		border-left-color: transparent;
		border-top-color: var(--color-primary);
	}

	.c-margin__label img {
		width: 40px;
		height: 40px;
	}

	.c-margin__note {
		flex: none;
		padding-left: 24px;
	}

	.c-margin__note::before {
		top: 0;
		left: 24px;
		width: calc(100% - 48px);
		height: 1px;
		background: #BEBEBE;
		transform: none;
	}

	.c-license__operator {
		width: 100%;
		text-align: center;
	}

	.p-cta__box {
		flex: 1 1 100%;
	}
}

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

	.c-section-head {
		margin-bottom: 32px;
	}

	.c-btn {
		width: 100%;
		padding: 14px 48px 14px 24px;
		font-size: 16px;
	}

	.p-hero__inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.p-hero__points {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px;
	}

	.p-hero__point {
		flex: none;
		padding: 0;
	}

	.p-hero__point + .p-hero__point {
		padding-top: 12px;
		border-top: 1px solid #D5D5D5;
		border-left: 0;
	}

	.p-trouble__balloon {
		padding: 14px 20px;
		font-size: 15px;
		line-height: 1.7;
	}

	.u-br-pc {
		display: none;
	}

	.p-message__name {
		position: static;
		margin-top: -24px;
	}

	.p-promise__card {
		height: auto;
	}

	.p-flow__list {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.p-voice__item {
		padding: 20px;
	}

	.p-blog__link {
		gap: 8px 16px;
	}

	.p-blog__title {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.p-cta__box,
	.p-cta__box--tel {
		flex-direction: column;
		gap: 16px;
		padding: 20px;
	}

	.p-cta__box--tel .p-cta__box-icon {
		flex: none;
		align-self: center;
		width: 72px;
		height: 72px;
		/* 縦積みでは矢羽根の切り欠きを外す（アイコンが欠けるため） */
		clip-path: none;
		border-radius: 50%;
	}

	.p-cta__box--tel .p-cta__box-icon img {
		width: 40px;
		height: 40px;
		margin-right: 0;
	}

	/* 縦積みでは縦罫線を出さない */
	.p-cta__box--web .p-cta__box-icon {
		padding-right: 0;
	}

	.p-cta__box--web .p-cta__box-icon::after {
		content: none;
	}

	.site-footer {
		padding: 48px 16px 24px;
	}

	.site-footer__nav {
		flex-wrap: wrap;
		gap: 32px;
	}
}


/*--------------------------------------------------------------
# モバイルの最小文字サイズ
----------------------------------------------------------------
デザインの 12〜13px 指定は、SPでは可読性のため 14px を下回らせない。
--------------------------------------------------------------*/

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

	.header-cta__sub,
	.p-hero__point-text,
	.p-cta__tel-hours,
	.c-margin__note p,
	.c-tag--round,
	.c-tag--accent,
	.c-tag--small {
		font-size: 14px;
	}

	.p-hero__point-text {
		line-height: 1.7;
	}

	/* タップ領域を 44px 以上確保する */
	.header-tel__link {
		min-height: 44px;
	}

	.site-footer__nav-list a,
	.p-blog__link,
	.c-more {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.site-footer__nav-list {
		gap: 0;
	}
}


/*--------------------------------------------------------------
# 和文の詰め組み（palt）
----------------------------------------------------------------
デザインで font-feature-settings: 'palt' が指定されている箇所。
これが無いと1行に収まる文字数が変わり、改行位置がずれる。
--------------------------------------------------------------*/

.p-reason__title,
.p-support__title,
.p-local__title,
.p-area__title,
.p-service__title,
.p-works__title,
.c-qualification__list li,
.c-license__box-label,
.c-license__box-name,
.c-margin__chip,
.c-margin__tag,
.c-margin__note p,
.c-note__title,
.c-note__text {
	font-feature-settings: "palt";
}


/*--------------------------------------------------------------
# ドロワー内の連絡先（SPのみ表示）
--------------------------------------------------------------*/

/* PCでは非表示（SP側の指定を打ち消さないよう min-width で限定） */
@media screen and (min-width: 768px) {

	.global-nav__overlay,
	.drawer-contact {
		display: none;
	}
}

.drawer-contact__tel {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	text-decoration: none;
}

.drawer-contact__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 24px;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
}

.drawer-contact__number {
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.drawer-contact__hours {
	margin: 4px 0 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text);
}

/* ドロワー内のLINEボタン（お問い合わせボタンの上） */
.drawer-contact__line {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin-bottom: 12px;
	padding: 8px;
	/* LINEのブランドカラー（ヘッダーの .header-line と同じ） */
	background: #00B900;
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
}

.drawer-contact__line-main {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.drawer-contact__line-sub {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.drawer-contact__line-icon {
	display: block;
	width: 22px;
	height: 22px;
}

.drawer-contact__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px;
	background: var(--color-accent);
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
}

.drawer-contact__cta-main {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.drawer-contact__cta-icon {
	display: block;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--icon-mail) no-repeat center / contain;
	mask: var(--icon-mail) no-repeat center / contain;
}

.drawer-contact__cta-sub {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}


/*--------------------------------------------------------------
# ページトップへ戻るボタン
--------------------------------------------------------------*/

.c-pagetop {
	position: fixed;
	right: clamp(16px, 2vw, 32px);
	bottom: clamp(16px, 2vw, 32px);
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	color: var(--color-white);
	font-family: inherit;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.2s ease;
}

.c-pagetop.is-visible {
	opacity: 1;
	visibility: visible;
}

.c-pagetop:hover,
.c-pagetop:focus {
	background: var(--color-accent);
}

.c-pagetop__arrow {
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(2px) rotate(-45deg);
}

.c-pagetop__label {
	font-family: var(--font-num);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
}


/*--------------------------------------------------------------
# 電話番号のタップ発信（本文中の番号）
----------------------------------------------------------------
フッターや会社概要の番号は、SPではタップで発信できるようにし、
見た目は前後の本文と同じにする。PCでは発信できないので、
ただの文字として振る舞わせる（カーソルも変えない）。
iOS Safari の自動リンク化は header.php の format-detection で
止めてあるため、リンクはこの .c-tel で明示的に張る。
--------------------------------------------------------------*/

.c-tel {
	color: inherit;
	text-decoration: none;
}

@media screen and (min-width: 768px) {

	.c-tel {
		pointer-events: none;
	}
}


/*--------------------------------------------------------------
# 固定の3動線バナー（電話・LINE・お問い合わせ）
----------------------------------------------------------------
PCは画面右端の上下中央に縦型で固定、SPは画面下部のバーとして固定。
マークアップは template-parts/fixed-cta.php の1つで、CSSで出し分ける。
--------------------------------------------------------------*/

.c-fixed-cta {
	position: fixed;
	z-index: 89; /* .c-pagetop（90）より下、SPドロワー（190〜）より下 */
}

.c-fixed-cta__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-fixed-cta__unit {
	position: relative;
}

.c-fixed-cta__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	text-decoration: none;
	font-weight: 700;
	transition: opacity 0.2s ease;
}

.c-fixed-cta__item:hover,
.c-fixed-cta__item:focus-visible {
	opacity: 0.85;
	color: var(--color-white);
}

.c-fixed-cta__item--tel {
	background: var(--color-primary);
}

.c-fixed-cta__item--line {
	/* LINEのブランドカラー（ヘッダーのLINEボタンと同じ値。他では使わないのでトークン化しない） */
	background: #00B900;
}

.c-fixed-cta__item--contact {
	background: var(--color-accent);
}

.c-fixed-cta__icon {
	display: block;
	width: 22px;
	height: 22px;
}

.c-fixed-cta__icon--tel,
.c-fixed-cta__icon--mail {
	background: currentColor;
}

.c-fixed-cta__icon--tel {
	-webkit-mask: var(--icon-tel) no-repeat center / contain;
	mask: var(--icon-tel) no-repeat center / contain;
}

.c-fixed-cta__icon--mail {
	-webkit-mask: var(--icon-mail) no-repeat center / contain;
	mask: var(--icon-mail) no-repeat center / contain;
}

.c-fixed-cta__label {
	font-feature-settings: "palt";
	line-height: 1;
}

/* 電話番号のポップ（PCのホバー時のみ。SPは直接発信できるので出さない） */
.c-fixed-cta__pop {
	display: none;
}

@media screen and (min-width: 768px) {

	/* PC：画面右端の上下中央に縦型で固定 */
	.c-fixed-cta {
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}

	.c-fixed-cta__list {
		flex-direction: column;
		gap: 6px;
	}

	.c-fixed-cta__item {
		gap: 12px;
		padding: 22px 15px;
		border-radius: 8px 0 0 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	/* 縦書きにする（英数字も縦向きのまま流す） */
	.c-fixed-cta__label {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		font-size: 14px;
		letter-spacing: 0.14em;
	}

	.c-fixed-cta__pop {
		position: absolute;
		top: 50%;
		right: calc(100% + 12px);
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 14px 18px;
		border-radius: 8px;
		background: var(--color-white);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.c-fixed-cta__unit:hover .c-fixed-cta__pop,
	.c-fixed-cta__unit:focus-within .c-fixed-cta__pop {
		opacity: 1;
		visibility: visible;
	}

	.c-fixed-cta__pop-number {
		font-family: var(--font-num);
		font-size: 22px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.04em;
		color: var(--color-heading);
	}

	.c-fixed-cta__pop-hours {
		font-size: 12px;
		line-height: 1.4;
		color: var(--color-text);
	}
}

@media (prefers-reduced-motion: reduce) {

	.c-fixed-cta__item,
	.c-fixed-cta__pop {
		transition: none;
	}
}


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

	/* SP：画面下部いっぱいのフッターバー */
	.c-fixed-cta {
		left: 0;
		right: 0;
		bottom: 0;
	}

	.c-fixed-cta__list {
		flex-direction: row;
	}

	.c-fixed-cta__unit {
		flex: 1 1 0;
		min-width: 0;
	}

	.c-fixed-cta__item {
		gap: 5px;
		min-height: 58px;
		/* ホームバーのある端末では下に安全領域ぶんの余白を足す */
		padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
	}

	.c-fixed-cta__label {
		font-size: 11px;
		white-space: nowrap;
	}

	.c-fixed-cta__icon {
		width: 20px;
		height: 20px;
	}

	/* 下部バーに隠れないように、ページ全体の下に逃げ幅をとる */
	body {
		padding-bottom: calc(58px + env(safe-area-inset-bottom));
	}

	/* TOPへ戻るボタンも下部バーの上に逃がす */
	.c-pagetop {
		width: 48px;
		height: 48px;
		bottom: calc(58px + env(safe-area-inset-bottom) + 12px);
	}

	/* SPでは明示改行を切るので折り返しを許可する */
	.p-hero__point-text {
		white-space: normal;
	}
}


/*--------------------------------------------------------------
# SPのみ有効な改行
--------------------------------------------------------------*/

.u-br-sp {
	display: none;
}

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

	.u-br-sp {
		display: inline;
	}

	/* バッジと重ならないようにラベル幅を制限 */
	.p-hero__label {
		max-width: calc(100% - 84px);
		padding: 6px 12px;
	}

}


/*--------------------------------------------------------------
# SPでの微調整（追加分）
--------------------------------------------------------------*/

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

	/* 幅の狭い端末では折り返しを許可する */
	.p-cta__web-text {
		font-size: 18px;
		white-space: normal;
	}

	/* カードのホバー演出はタッチ端末では不要 */
	.p-service__item:hover {
		box-shadow: none;
		transform: none;
	}
}


/*--------------------------------------------------------------
# SPレイアウトの余白調整
--------------------------------------------------------------*/

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

	/* --- YOUR TROUBLE：デザイン準拠の吹き出しレイアウト ---
	 * 丸い吹き出しを左右ジグザグに置き、アイコンは吹き出しの角に重ねる。
	 * イラストは真ん中（上3つ・イラスト・下3つ）。
	 * 尻尾は、上の3つは下向き・下の3つは上向きで、イラストに向ける。
	 */
	.p-trouble__list,
	.p-trouble__list--left,
	.p-trouble__list--right {
		gap: 28px;
	}

	.p-trouble__item {
		position: relative;
		display: block;
	}

	/* アイコンは吹き出しの角に重ねる（上の列＝左上／下の列＝右上） */
	.p-trouble__list--left .p-trouble__icon,
	.p-trouble__list--right .p-trouble__icon {
		position: absolute;
		top: -24px;
		z-index: 1;
		width: 60px;
		margin: 0;
	}

	.p-trouble__balloon {
		width: 84%;
		min-height: 0;
		margin: 0;
		padding: 16px 24px;
		border-radius: 40px;
		font-size: 15px;
		line-height: 1.9;
		text-align: center;
	}

	/* 吹き出しの中はデザインどおりの位置で改行する（SP全体では u-br-pc は無効） */
	.p-trouble__balloon .u-br-pc {
		display: inline;
	}

	/* ジグザグ配置：上の列は 右・左・右、下の列は 左・右・左 */
	.p-trouble__list--left .p-trouble__item:nth-child(odd) .p-trouble__balloon,
	.p-trouble__list--right .p-trouble__item:nth-child(even) .p-trouble__balloon {
		margin-left: auto;
	}

	.p-trouble__list--right .p-trouble__item:nth-child(odd) .p-trouble__balloon,
	.p-trouble__list--left .p-trouble__item:nth-child(even) .p-trouble__balloon {
		margin-right: auto;
	}

	/* アイコンの位置：吹き出しの寄せに合わせて外側の角に置く */
	.p-trouble__list--left .p-trouble__item:nth-child(odd) .p-trouble__icon {
		left: calc(16% - 18px);
	}

	.p-trouble__list--left .p-trouble__item:nth-child(even) .p-trouble__icon {
		left: -6px;
	}

	.p-trouble__list--right .p-trouble__item:nth-child(odd) .p-trouble__icon {
		right: calc(16% - 18px);
	}

	.p-trouble__list--right .p-trouble__item:nth-child(even) .p-trouble__icon {
		right: -6px;
	}

	/* 尻尾：上の列は下向き、下の列は上向き（真ん中のイラストに向ける） */
	.p-trouble__list--left .p-trouble__balloon::after,
	.p-trouble__list--right .p-trouble__balloon::after {
		top: auto;
		right: auto;
		border: 0 solid transparent;
		border-right: 9px solid transparent;
		border-left: 9px solid transparent;
		transform: none;
	}

	.p-trouble__list--left .p-trouble__balloon::after {
		bottom: -13px;
		left: 42%;
		border-top: 15px solid var(--color-white);
	}

	.p-trouble__list--right .p-trouble__balloon::after {
		top: -13px;
		left: 54%;
		border-bottom: 15px solid var(--color-white);
	}

	/* イラストは真ん中に（タブレットの order: -1 を打ち消す） */
	.p-trouble__illust {
		order: 0;
		width: min(300px, 62%);
	}

	.p-trouble__dots {
		margin: 32px 0;
	}

	/* --- 中間マージン比較図：縦並びにする --- */
	.c-margin__chart {
		flex-direction: column;
		gap: 12px;
		padding: 24px;
	}

	/* 見出しバー：アイコンを左に置いて左寄せ。下向きの三角は付けない */
	.c-margin__label {
		justify-content: flex-start;
		padding: 14px 20px;
		font-size: 16px;
	}

	.c-margin__label img {
		order: -1;
		width: 36px;
		height: 36px;
	}

	.c-margin__label::after {
		content: none;
	}

	/* チップは幅いっぱいに */
	.c-margin__chip,
	.c-margin__chip--sm,
	.c-margin__chip--wide {
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	/* 矢印とタグは横に並べる（▼ マージン発生） */
	.c-margin__link {
		flex-direction: row;
		gap: 10px;
	}

	/* 矢印は下向きに */
	.c-margin__arrow {
		transform: rotate(90deg);
	}

	/* タグは重ねずに矢印の隣へ */
	.c-margin__tag {
		position: static;
		transform: none;
	}

	.c-margin__tag::before {
		content: none;
	}

	.c-margin__note {
		padding: 20px 16px;
	}

	.c-margin__note::before {
		left: 16px;
		width: calc(100% - 32px);
	}

	/*
	 * 注記のアイコンは丸背景に白抜きで載せる。
	 * filter は背景ごと反転してしまうので、丸はspan・白抜きはimgで分担する。
	 */
	.c-margin__note-icon {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #5F5F5F;
	}

	.c-margin__row--own .c-margin__note-icon {
		background: var(--color-primary);
	}

	.c-margin__note img {
		width: 26px;
		height: 26px;
		filter: brightness(0) invert(1);
	}

	/* 矢印はデザインどおりの塗りつぶし三角（▼）にする */
	.c-margin__arrow {
		width: 0;
		height: 0;
		background: none;
		border: 8px solid transparent;
		border-top: 12px solid #222222;
		border-bottom: 0;
		-webkit-mask: none;
		mask: none;
		transform: none;
	}

	/* --- CTA：見出しとボタンの間隔を詰める --- */
	.p-cta__head {
		margin-bottom: 32px;
	}

	.p-cta__sub,
	.p-cta__title {
		margin-bottom: 20px;
	}

	/* --- 資格の図：縦並び --- */
	.c-license__flow {
		flex-direction: column;
		gap: 12px;
	}

	.c-license__box {
		flex: none;
		width: 100%;
		max-width: 280px;
		padding: 16px 24px;
	}

	.c-license__operator {
		font-size: 24px;
	}

	.c-license__title::after {
		flex: 1 1 auto;
	}
}


/*--------------------------------------------------------------
# スクロール時のフェードイン
----------------------------------------------------------------
JS で .js-fadein を付与し、表示領域に入ると .is-inview が付く。
JSが無効／prefers-reduced-motion の場合はそのまま表示される。
--------------------------------------------------------------*/

.js-fadein {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}

.js-fadein.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.js-fadein {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/*--------------------------------------------------------------
# ローディング
----------------------------------------------------------------
読み込み完了で JS が .is-hidden を付け、フェードアウト後に取り除く。
JSが無効な場合は header.php の noscript で非表示にしている。
--------------------------------------------------------------*/

.c-loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	transition: opacity 0.55s ease, visibility 0.55s ease;
}

.c-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*
 * 同じ一覧の中での移動（絞り込みタブ・ページ送り・並び替え等）は
 * 待たされている感じが離脱につながるため、ローディングを1.5倍速で流す。
 * 時間はすべて通常の 1/1.5。JS側の表示時間も合わせてある。
 */
.c-loader--fast {
	transition-duration: 0.37s;
}

.c-loader--fast .c-loader__logo {
	animation-duration: 0.67s;
}

.c-loader--fast .c-loader__bar::after {
	animation-duration: 0.87s;
}

.c-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.c-loader__logo {
	display: block;
	width: clamp(140px, 18vw, 190px);
	height: auto;
	opacity: 0;
	transform: translateY(8px);
	animation: shinotuka-loader-logo 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ロゴの下で左から右へ伸びる細い線 */
.c-loader__bar {
	position: relative;
	display: block;
	width: clamp(120px, 16vw, 168px);
	height: 2px;
	overflow: hidden;
	background: rgba(138, 157, 122, 0.25);
}

.c-loader__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left center;
	animation: shinotuka-loader-bar 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes shinotuka-loader-logo {

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes shinotuka-loader-bar {

	0% {
		transform: scaleX(0);
	}

	60% {
		transform: scaleX(0.7);
	}

	100% {
		transform: scaleX(1);
	}
}

/* 表示中は背面をスクロールさせない */
body.is-loading {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.c-loader__logo,
	.c-loader__bar::after {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.c-loader {
		transition-duration: 0.2s;
	}
}


/*--------------------------------------------------------------
# 縦積み時の余白の修正
----------------------------------------------------------------
PCで横並びにしていたブロックは flex-basis を px で指定している。
これを縦積みにすると basis が「高さ」として効き、中身が短くても
その高さぶんの空白ができてしまう。縦積みでは basis を無効にする。
--------------------------------------------------------------*/

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

	.p-message__card > *,
	.p-reason__row > *,
	.p-support__card > *,
	.p-local__card > *,
	.p-area__card > *,
	.c-note--media > * {
		flex: none;
		width: 100%;
	}

	.p-message__figure {
		max-width: 420px;
		margin-inline: auto;
	}

	.c-note__image {
		max-width: 320px;
	}

	/* 高さの比率指定も縦積みでは不要（画像なりにする） */
	.p-reason__image,
	.p-support__image,
	.p-local__image,
	.p-area__image {
		aspect-ratio: auto;
	}

	.p-reason__image > img,
	.p-support__image > img,
	.p-local__image > img,
	.p-area__image > img {
		height: auto;
	}
}

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

	/* 代表の名前プレートは写真に重ねず下に置く */
	.p-message__name {
		position: static;
		width: fit-content;
		margin: 0 auto;
		padding: 16px 32px;
	}

	.p-message__figure {
		padding: 12px 0 0 12px;
	}

	/* 保有資格は縦1列に */
	.c-qualification__list {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 20px 16px;
	}

	.c-license__title::after {
		flex: 1 1 40px;
	}
}

/* 比較表の横スクロールの案内（SPのみ） */
.p-guide__scroll-hint {
	display: none;
}

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

	.p-guide__scroll-hint {
		display: block;
		margin: 0 0 8px;
		font-size: 14px;
		color: var(--color-muted);
	}

	.p-guide__table-wrap {
		/* スクロールできることが分かるよう右端に影を出す */
		background:
			linear-gradient(to right, var(--color-white) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat,
			linear-gradient(to left, var(--color-white) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat,
			radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat,
			radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat;
		background-attachment: local, local, scroll, scroll;
	}
}


/*--------------------------------------------------------------
# SPの追加調整
--------------------------------------------------------------*/

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

	/*
	 * 吹き出しは左右2つのリストに分かれているため、グリッドの gap が
	 * 3つ目と4つ目の間だけ余分に入る。項目の間隔に合わせ、
	 * イラストの下だけ margin で余白を足す。
	 */
	.p-trouble__body {
		gap: 28px;
	}

	.p-trouble__illust {
		margin-top: 4px;
		margin-bottom: 20px;
	}
}


/*--------------------------------------------------------------
# 日本語の折り返しを読みやすくする
----------------------------------------------------------------
見出しは行の長さを均等に、本文は最終行に1文字だけ残るのを防ぐ。
対応していないブラウザでは無視されるだけで害はない。
--------------------------------------------------------------*/

.c-section-head__title,
.p-hero__title,
.p-hero__lead,
.p-cta__sub,
.p-cta__title,
.p-cta__lead,
.p-promise__title,
.p-message__title,
.p-reason__title,
.p-support__title,
.p-local__title,
.p-area__title,
.p-service__title,
.p-works__title,
.p-voice__title,
.c-license__box-name,
.c-note__title,
.c-faq__question-text {
	text-wrap: balance;
	line-break: strict;
	/* 単語（文節）の途中で折り返さない。未対応ブラウザでは無視される */
	word-break: auto-phrase;
}

/*
 * 本文は禁則処理（line-break: strict）だけにする。
 * auto-phrase は行の長さがバラバラになるので使わない。
 * text-wrap: pretty も使わない。iOSのSafariは pretty の効きが強く、
 * 段落全体を組み直して行を短めに折り返すため、右側に余白が残って
 * 「左に寄っている」ように見えてしまう（Chromeでは目立たない）。
 */
.c-section-head__lead,
.p-message__text p,
.p-reason__text,
.p-support__text,
.p-local__body p,
.p-area__text,
.p-service__text,
.p-promise__text,
.c-note__text,
.c-faq__answer-text {
	line-break: strict;
}


/*--------------------------------------------------------------
# SPの追加調整（2）
--------------------------------------------------------------*/

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

	/*
	 * メインビジュアル（Figmaの SP デザイン準拠）。
	 * 写真は全幅でカードの途中まで。半透明の白カードを左右15pxで中央に重ね、
	 * バッジはカードの右上（写真とカードにまたがる位置）に置く。
	 */
	.p-hero {
		padding-inline: 0;
	}

	/* 写真はセクション全面ではなく、上から460pxまで */
	.p-hero__bg {
		inset: auto 0 auto 0;
		top: 0;
		height: 460px;
	}

	.p-hero__bg > img {
		object-position: right center;
	}

	.p-hero__inner {
		margin: 230px 15px 6px;
		padding: 24px 6px;
		background: rgba(255, 255, 255, 0.91);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	}

	/* ラベル・見出し・リードはカード端から少し内側に */
	.p-hero__body {
		padding-inline: 5px;
	}

	.p-hero__title,
	.p-hero__lead {
		paint-order: normal;
		-webkit-text-stroke-width: 0;
		/* balance だと明示改行より細かく割ってしまうので、改行は <br> に任せる */
		text-wrap: wrap;
	}

	.p-hero__title {
		margin-bottom: 8px;
		font-size: 34px;
		line-height: 1.3;
	}

	.p-hero__lead {
		font-size: 15px;
		line-height: 1.5;
	}

	.p-hero__label {
		max-width: none;
		margin-bottom: 8px;
		padding: 4px 8px;
		font-size: 13px;
		letter-spacing: 0;
	}

	.p-hero__label .u-br-sp {
		display: none;
	}

	/* ポイントは2×2。枠線ではなく影付きの白箱、隙間は4px */
	.p-hero__points {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
		margin-top: 31px;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.p-hero__point {
		display: flex;
		align-items: center;
		/* アイコン＋テキストのまとまりを中央に置き、左右の余白を均等にする */
		justify-content: center;
		gap: 4px;
		min-height: 60px;
		padding: 8px;
		background: var(--color-white);
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
	}

	.p-hero__point-icon > img {
		width: 40px;
		height: 40px;
	}

	/* ボックス内はデザインの位置で2行に折る */
	.p-hero__point-text .u-br-pc {
		display: inline;
	}

	.p-hero__point-text {
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: 0.04em;
	}

	/* バッジは写真とカードにまたがる右上に（基準は白カード＝inner） */
	.p-hero__badge {
		top: -80px;
		right: 0;
		left: auto;
		width: 95px;
	}

	/* CTAの文字は行末で1〜2文字だけ残らない大きさに */
	.p-cta__sub {
		font-size: 16px;
		line-height: 1.6;
	}

	.p-cta__lead {
		font-size: 14px;
		line-height: 1.8;
	}

	/* カードの内側余白を詰める（画像の上が空きすぎていた） */
	.p-local__card,
	.p-area__card,
	.p-support__card,
	.p-reason__item,
	.p-message__card {
		padding: 24px 16px;
	}

	/* 代表の名前プレートを1行に収める */
	.p-message__name {
		padding: 14px 20px;
	}

	.p-message__name-main {
		font-size: 20px;
	}

	.p-message__name-sub {
		font-size: 14px;
		white-space: nowrap;
	}
}


/*--------------------------------------------------------------
# SPの追加調整（3）
--------------------------------------------------------------*/

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

	/* 資格の図：縦並びなので矢印も下向きに */
	.c-license__operator--arrow {
		display: block;
		width: 100%;
		text-align: center;
		transform: rotate(90deg);
	}

	/* CTA（WEB）：アイコンは上、テキストの右に矢印を置く */
	.p-cta__box--web {
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.p-cta__box--web .p-cta__box-icon {
		display: flex;
		flex: 1 0 100%;
		justify-content: center;
	}

	.p-cta__box--web .p-cta__box-body {
		flex: 0 1 auto;
	}

	.p-cta__box--web .p-cta__box-arrow {
		flex: none;
	}

	/*
	 * 代表ごあいさつ：
	 * 写真を中央に置き、その周囲だけをグリーンの線で囲う。
	 * 名前プレートは重ねず、写真の下に置く。
	 */
	.p-message__figure {
		max-width: 260px;
		margin: 8px auto 0;
		padding: 0;
	}

	.p-message__figure::before {
		content: none;
	}

	.p-message__photo {
		outline: 2px solid var(--color-primary);
		outline-offset: 8px;
	}

	.p-message__name {
		position: static;
		width: 100%;
		margin: 28px auto 0;
		padding: 14px 12px;
	}

	.p-message__name-sub {
		white-space: normal;
	}
}


/*--------------------------------------------------------------
# 会社案内（page-company.php）
--------------------------------------------------------------*/

/* --- 1. ページヘッダー（下層ページ共通） --- */

.p-page-hero {
	position: relative;
	overflow: hidden;
	min-height: 405px;
	padding: 40px clamp(16px, 5.5vw, 80px) 24px;
	background: var(--color-white);
}

.p-page-hero__deco {
	position: absolute;
	display: block;
	width: min(404px, 32vw);
	aspect-ratio: 404 / 288;
	pointer-events: none;
}

/* 左上：濃いグリーンの三角 */
.p-page-hero__deco--left {
	top: 0;
	left: 0;
	background: var(--color-heading);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 右下：屋根写真の三角（下地はテーマカラー） */
.p-page-hero__deco--right {
	right: 0;
	bottom: 0;
	overflow: hidden;
	background: var(--color-primary);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.p-page-hero__deco--right > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-page-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: clamp(48px, 8vw, 104px) 0 clamp(48px, 7vw, 96px);
	text-align: center;
}

.p-page-hero__eyebrow {
	margin: 0;
	font-family: var(--font-num);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

.p-page-hero__title {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

/* パンくず */
.c-breadcrumb {
	position: relative;
	z-index: 1;
}

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-breadcrumb__item {
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--color-heading);
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
	content: "/";
	margin-right: 11px;
	font-size: 12px;
	font-weight: 700;
	color: #ADADAD;
}

.c-breadcrumb__item a {
	font-family: var(--font-num);
	font-weight: 400;
	color: var(--color-heading);
	text-decoration: none;
}

.c-breadcrumb__item a:hover,
.c-breadcrumb__item a:focus-visible {
	text-decoration: underline;
}

/* --- 2. 会社紹介 --- */

.p-about-intro {
	padding-bottom: 40px;
	background: #F9FCFD;
}

.p-about-intro__card {
	display: flex;
	align-items: center;
	gap: 64px;
	padding: 40px clamp(20px, 4vw, 58px);
	background: var(--color-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.p-about-intro__figure {
	flex: 1 1 500px;
	max-width: 500px;
	aspect-ratio: 500 / 348;
}

.p-about-intro__body {
	flex: 1 1 552px;
}

.p-about-intro__title {
	margin: 0 0 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-line);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	font-feature-settings: "palt";
	color: var(--color-heading);
}

.p-about-intro__text p {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-about-intro__text p:last-child {
	margin-bottom: 0;
}

/* --- 3. PHILOSOPHY（経営理念） --- */

.p-philosophy {
	position: relative;
	padding-top: 40px;
	background: #F9FCFD;
}

.p-philosophy__bg {
	position: absolute;
	inset: 0;
	background: transparent;
}

.p-philosophy__bg > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-philosophy .l-section__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.p-philosophy__card {
	padding: 48px clamp(20px, 4vw, 58px);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
	text-align: center;
}

.p-philosophy__head {
	margin-bottom: 0;
	padding-bottom: 16px;
}

.p-philosophy__head::after {
	content: "";
	display: block;
	width: min(552px, 100%);
	height: 1px;
	margin: 16px auto 0;
	background: var(--color-line);
}

.p-philosophy__catch {
	margin: 24px 0 0;
	font-size: clamp(22px, 2.8vw, 32px);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-philosophy__text {
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-philosophy__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.p-philosophy__gallery-item {
	aspect-ratio: 576 / 200;
}

/* --- 4. MESSAGE（代表挨拶） --- */

.p-greeting__body {
	display: flex;
	align-items: center;
	gap: 40px;
}

.p-greeting__figure {
	flex: 1 1 573px;
	max-width: 573px;
	aspect-ratio: 573 / 616;
}

.p-greeting__content {
	flex: 1 1 567px;
}

.p-greeting__title {
	margin: 0 0 24px;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	font-feature-settings: "palt";
	color: var(--color-heading);
}

.p-greeting__text p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-greeting__text p:last-child {
	margin-bottom: 0;
}

.p-greeting__sign {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin: 32px 0 0;
	text-align: right;
}

.p-greeting__sign-role {
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--color-muted);
	white-space: nowrap;
}

.p-greeting__sign-name {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: #222222;
}

.p-greeting__sign-en {
	font-family: "Great Vibes", "Noto Sans JP", cursive;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: 0.04em;
	color: #222222;
}

/* --- 5. DATA（数字で見るシノツカ） --- */

.p-data {
	position: relative;
}

.p-data__bg {
	position: absolute;
	inset: 0;
	background: transparent;
}

.p-data__bg > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-data .l-section__inner {
	position: relative;
}

.p-data__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-data__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 30px clamp(8px, 2vw, 24px);
	text-align: center;
}

/* 項目のあいだの縦罫線（デザインどおり高さ158pxで中央に置く） */
.p-data__item + .p-data__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 158px;
	background: var(--color-primary);
	transform: translateY(-50%);
}

.p-data__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: #FAF9F8;
}

.p-data__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-data__num {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	margin: 0;
}

.p-data__num-value {
	font-family: var(--font-num);
	font-size: clamp(48px, 5.6vw, 72px);
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary);
}

.p-data__num-unit {
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.p-data__rule {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--color-primary);
}

.p-data__label {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-data__label > span {
	display: block;
}

/* --- 6. OUTLINE（会社概要） --- */

.p-outline__list {
	margin: 0;
}

.p-outline__row {
	display: flex;
	align-items: stretch;
}

.p-outline__row + .p-outline__row {
	margin-top: -1px;
}

.p-outline__term {
	display: flex;
	flex: 0 0 240px;
	align-items: center;
	margin: 0;
	padding: 24px;
	border-top: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
	background: #D5DCC5;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-outline__desc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 24px clamp(24px, 8vw, 120px) 24px 24px;
	border-top: 1px solid #AFAFAF;
	border-bottom: 1px solid #AFAFAF;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-outline__desc > span {
	display: block;
}

/* --- 7. HISTORY（沿革） --- */

.p-history {
	background: var(--bg-cream);
}

.p-history__list {
	--history-year-width: 148px;
	--history-marker-width: 40px;

	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 縦のライン */
.p-history__list::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: calc(var(--history-year-width) + var(--history-marker-width) / 2 - 1px);
	width: 2px;
	background: #DDE3D5;
}

.p-history__item {
	display: grid;
	grid-template-columns: var(--history-year-width) var(--history-marker-width) minmax(0, 1fr);
	align-items: start;
}

.p-history__item + .p-history__item {
	margin-top: 48px;
}

.p-history__year {
	margin: 0;
	padding-top: 2px;
	text-align: right;
}

.p-history__year-main {
	display: block;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	font-feature-settings: "palt";
	color: var(--color-primary);
}

.p-history__year-sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--color-muted);
}

.p-history__marker {
	position: relative;
	z-index: 1;
	justify-self: center;
	width: 14px;
	height: 14px;
	margin-top: 8px;
	border: 3px solid var(--bg-cream);
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(138, 157, 122, 0.35);
}

.p-history__body {
	padding: 0 0 0 24px;
}

.p-history__title {
	margin: 0;
	font-size: clamp(16px, 1.7vw, 18px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	font-feature-settings: "palt";
	color: var(--color-heading);
}

.p-history__text {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

/* --- 8. ACCESS（アクセス） --- */

.p-access {
	background: #F3F3F3;
}

.p-access__body {
	display: flex;
	align-items: center;
	gap: clamp(32px, 6vw, 80px);
}

.p-access__map {
	flex: 1 1 600px;
	max-width: 600px;
	aspect-ratio: 600 / 454;
	overflow: hidden;
	background: var(--bg-placeholder);
}

.p-access__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.p-access__list {
	flex: 1 1 500px;
	margin: 0;
}

.p-access__row {
	display: flex;
	align-items: center;
	gap: clamp(24px, 5vw, 64px);
	padding-bottom: 24px;
	border-bottom: 1px solid #D2D2D2;
}

.p-access__row + .p-access__row {
	padding-top: 24px;
}

.p-access__term {
	flex: 0 0 92px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--color-text);
}

.p-access__desc {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-access__desc > span {
	display: block;
}

/* --- 9. AREA（対応エリア） --- */

.p-area-list {
	position: relative;
}

.p-area-list__bg {
	position: absolute;
	inset: 0;
	background: transparent;
}

.p-area-list__bg > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-area-list .l-section__inner {
	position: relative;
}

.p-area-list__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-area-list__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 24px;
	border: 2px solid var(--color-primary);
	background: var(--color-white);
	font-size: clamp(16px, 1.7vw, 20px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--color-text);
}

.p-area-list__note {
	margin: 48px 0 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-text);
}


/*--------------------------------------------------------------
## 会社案内：タブレット（1023px以下）
--------------------------------------------------------------*/

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

	.p-about-intro__card,
	.p-greeting__body,
	.p-access__body {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	/* 縦積み時に flex-basis が「高さ」として効いてしまうのを防ぐ */
	.p-about-intro__card > *,
	.p-greeting__body > *,
	.p-access__body > * {
		flex: none;
		width: 100%;
		max-width: none;
	}

	.p-data__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-data__item + .p-data__item::before {
		content: none;
	}

	.p-data__item:nth-child(even)::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 1px;
		height: 120px;
		background: var(--color-primary);
		transform: translateY(-50%);
	}

	.p-data__item:nth-child(n + 3) {
		border-top: 1px solid var(--color-primary);
	}

	.p-area-list__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/*--------------------------------------------------------------
## 会社案内：スマートフォン（767px以下）
--------------------------------------------------------------*/

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

	.p-page-hero {
		min-height: 0;
		padding: 24px clamp(16px, 5vw, 24px) 16px;
	}

	.p-page-hero__deco {
		width: 42vw;
	}

	.p-page-hero__inner {
		padding: 56px 0 40px;
	}

	.p-page-hero__eyebrow {
		font-size: 16px;
	}

	.p-about-intro__card {
		padding: 24px 16px;
	}

	.p-about-intro__figure {
		aspect-ratio: 4 / 3;
	}

	.p-philosophy .l-section__inner {
		gap: 20px;
	}

	.p-philosophy__card {
		padding: 32px 16px;
	}

	.p-philosophy__gallery {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.p-greeting__figure {
		aspect-ratio: 4 / 5;
	}

	.p-greeting__text p {
		margin-bottom: 16px;
	}

	.p-greeting__sign {
		margin-top: 24px;
	}

	.p-data__item {
		padding: 24px 8px;
		gap: 12px;
	}

	.p-data__label {
		font-size: 14px;
	}

	/* 会社概要：ラベルと内容を縦積みに */
	.p-outline__row {
		flex-direction: column;
	}

	.p-outline__row > * {
		flex: none;
		width: 100%;
	}

	.p-outline__term {
		padding: 12px 16px;
		border-bottom: 0;
	}

	.p-outline__desc {
		padding: 16px;
		border-top: 0;
	}

	.p-outline__row + .p-outline__row {
		margin-top: 0;
	}

	/* 沿革：年を上に、本文を下に */
	.p-history__list {
		--history-year-width: 0px;
		--history-marker-width: 24px;
	}

	.p-history__item {
		grid-template-columns: var(--history-marker-width) minmax(0, 1fr);
	}

	.p-history__item + .p-history__item {
		margin-top: 32px;
	}

	.p-history__year {
		grid-column: 2;
		grid-row: 1;
		padding-top: 0;
		margin-bottom: 6px;
		display: flex;
		align-items: baseline;
		gap: 6px;
		text-align: left;
	}

	.p-history__year-main,
	.p-history__year-sub {
		display: inline;
		margin-top: 0;
	}

	.p-history__marker {
		grid-column: 1;
		grid-row: 1;
		margin-top: 6px;
	}

	.p-history__body {
		grid-column: 2;
		grid-row: 2;
	}

	.p-history__title {
		font-size: 16px;
	}

	.p-history__text {
		font-size: 14px;
	}

	.p-access__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.p-access__term {
		flex: none;
		width: 100%;
		font-size: 15px;
		color: var(--color-primary-dark);
	}

	.p-area-list__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.p-area-list__note {
		margin-top: 32px;
		font-size: 14px;
		text-align: left;
	}
}


/*--------------------------------------------------------------
# SPの追加調整（4）
--------------------------------------------------------------*/

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

	/* セクションの余白（指定値：上50 / 左右16 / 下20） */
	.l-section {
		padding: 50px 16px 20px;
	}

	/* LOCAL：見出しを1行に収める（折り返さない） */
	.p-local__title {
		font-size: min(20px, 4.4vw);
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	/* REASON 01：「創業70年以上。」で改行して2行に収める */
	.p-reason__title {
		font-size: min(20px, 5.2vw);
	}

	/* 代表ごあいさつ：見出しの下と名前プレートの余白を詰める */
	.p-message .c-section-head {
		margin-bottom: 16px;
	}

	/* 「屋根の事で、的確なアドバイスが／ありがたいと言われるのが嬉しい。」の2行に収める */
	.p-message__title {
		font-size: min(24px, 4.9vw);
	}

	.p-message__name {
		margin: 15px auto 0;
	}
}


/*--------------------------------------------------------------
# 施工事例 一覧（archive-works.php）
--------------------------------------------------------------*/

/* 左右に罫線が伸びる見出し */
.c-heading-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-bottom: 32px;
}

.c-heading-rule::before,
.c-heading-rule::after {
	content: "";
	flex: 0 1 80px;
	height: 1px;
	background: var(--color-text);
}

.c-heading-rule__title {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--color-heading);
}

.p-works-archive {
	background: #F2F2F2;
}

.p-works-archive__lead {
	margin: 0 0 56px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-heading);
}

/* --- 絞り込み --- */

.p-works-filter {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 48px;
	padding: 40px clamp(20px, 6vw, 80px);
	background: var(--color-white);
}

.p-works-filter__row {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.p-works-filter__row + .p-works-filter__row {
	padding-top: 24px;
	border-top: 1px solid #D2D2D2;
}

.p-works-filter__label {
	flex: 0 0 80px;
	margin: 0;
	padding-top: 3px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--color-heading);
}

.p-works-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 絞り込みボタン。
 * TOPページで使っている .c-tag（装飾用のタグ）とは別物なので名前を分けている。
 */
.c-filter-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 29px;
	padding: 8px 16px;
	border: 1px solid var(--color-primary);
	background: var(--color-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	color: var(--color-primary);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.c-filter-tag:hover,
.c-filter-tag:focus-visible,
.c-filter-tag.is-current {
	background: var(--color-primary);
	color: var(--color-white);
}

/*
 * 表示専用の小さなタグ（工事種別・エリア）。
 * 絞り込みボタンと同じ見た目だがリンクではない。
 */
.c-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 29px;
	padding: 8px 16px;
	border: 1px solid var(--color-primary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.c-chip--solid {
	background: var(--color-primary);
	color: var(--color-white);
}

.c-chip--outline {
	background: var(--color-white);
	color: var(--color-primary);
}

/* --- 件数と並び替え --- */

.p-works-archive__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 48px;
}

.p-works-archive__count {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-text);
}

.p-works-archive__sort {
	margin: 0;
}

.c-select {
	min-width: 117px;
	min-height: 31px;
	padding: 6px 16px 6px 24px;
	border: 1px solid #BBBBBB;
	border-radius: 0;
	background: var(--color-white) var(--icon-chevron-down) no-repeat right 12px center / 10px 6px;
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 1.15;
	color: var(--color-text);
	appearance: none;
	cursor: pointer;
}

.c-select__submit {
	margin-left: 8px;
	padding: 6px 12px;
	border: 1px solid #BBBBBB;
	background: var(--color-white);
	font-size: 13px;
	cursor: pointer;
}

/* --- カード一覧 --- */

.p-works-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 29px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-work-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-white);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.c-work-card:hover,
a.c-work-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.c-work-card__thumb {
	aspect-ratio: 374 / 229;
	overflow: hidden;
}

.c-work-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

a.c-work-card:hover .c-work-card__thumb img {
	transform: scale(1.04);
}

.c-work-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px 24px;
}

.c-work-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.c-work-card__cat {
	padding: 4px 10px;
	background: var(--color-primary);
	font-size: 11px;
	line-height: 1.73;
	color: var(--color-white);
}

.c-work-card__place {
	font-size: 12px;
	line-height: 1.67;
	color: #777777;
}

.c-work-card__title {
	margin: 3px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-heading);
}

.c-work-card__text {
	margin: 0 0 5px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
}

.c-work-card__data {
	margin: auto 0 0;
	padding-top: 11px;
	border-top: 1px solid #EEEEEE;
	font-size: 12px;
	line-height: 1.67;
	color: var(--color-heading);
}

/* --- ページ送り --- */

.c-pager {
	margin-top: 48px;
}

.c-pager__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-pager__item a,
.c-pager__item span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	height: 50px;
	padding: 0 8px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	color: var(--color-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.c-pager__item a:hover,
.c-pager__item a:focus-visible {
	background: var(--color-white);
	color: var(--color-primary);
}

.c-pager__item .current {
	background: var(--color-primary);
	color: var(--color-white);
}

.c-pager__item .prev,
.c-pager__item .next {
	min-width: 0;
	margin: 0 12px;
}


/*--------------------------------------------------------------
## 施工事例 一覧：タブレット（1023px以下）
--------------------------------------------------------------*/

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

	.p-works-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.p-works-filter {
		padding: 24px;
	}
}


/*--------------------------------------------------------------
## 施工事例 一覧：スマートフォン（767px以下）
--------------------------------------------------------------*/

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

	.c-heading-rule {
		gap: 16px;
	}

	.c-heading-rule::before,
	.c-heading-rule::after {
		flex: 1 1 auto;
	}

	.p-works-archive__lead {
		margin-bottom: 32px;
		font-size: 14px;
		line-height: 1.8;
		text-align: left;
	}

	.p-works-filter {
		gap: 16px;
		margin-bottom: 24px;
		padding: 20px 16px;
	}

	.p-works-filter__row {
		flex-direction: column;
		gap: 12px;
	}

	.p-works-filter__row > * {
		flex: none;
		width: 100%;
	}

	.p-works-filter__label {
		padding-top: 0;
		font-size: 16px;
	}

	.c-filter-tag {
		min-height: 36px;
		padding: 8px 14px;
	}

	.p-works-archive__bar {
		margin-bottom: 24px;
	}

	.p-works-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.c-work-card__title {
		font-size: 17px;
	}

	.c-pager {
		margin-top: 32px;
	}

	.c-pager__item a,
	.c-pager__item span {
		min-width: 44px;
		height: 44px;
		font-size: 17px;
	}

	.c-pager__item .prev,
	.c-pager__item .next {
		margin: 0 4px;
	}
}

.p-works-archive__empty {
	margin: 0;
	padding: 48px 16px;
	background: var(--color-white);
	font-size: 16px;
	line-height: 1.8;
	text-align: center;
	color: var(--color-text);
}


/*--------------------------------------------------------------
# 施工事例 個別（single-works.php）
--------------------------------------------------------------*/

.p-work {
	background: #F2F2F2;
}

/* --- 見出しまわり --- */

.p-work__head {
	margin-bottom: 48px;
}

.p-work__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-work__title {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

/* 見出し下の2本線（左だけグリーン） */
.p-work__rule {
	display: block;
	height: 2px;
	background:
		linear-gradient(var(--color-primary), var(--color-primary)) left center / 140px 2px no-repeat,
		linear-gradient(#CECECE, #CECECE) left center / 100% 2px no-repeat;
}

/* --- BEFORE / AFTER --- */

.p-work__ba {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 48px;
}

.p-work__ba-item {
	position: relative;
	flex: 1 1 550px;
	margin: 0;
	padding: 16px;
	background: var(--color-white);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}

.p-work__ba-label {
	position: absolute;
	top: 32px;
	left: 32px;
	z-index: 1;
	padding: 8px 16px;
	background: var(--color-accent);
	font-family: var(--font-num);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
}

.p-work__ba-image {
	aspect-ratio: 518 / 370;
}

.p-work__ba-caption {
	margin-top: 8px;
	padding-left: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text);
}

/* 2枚のあいだの矢印 */
.p-work__ba-arrow {
	flex: none;
	width: 26px;
	height: 40px;
	background: currentColor;
	color: #969696;
	mask: var(--icon-chevron-right) no-repeat center / contain;
	-webkit-mask: var(--icon-chevron-right) no-repeat center / contain;
}

/* --- 担当者より --- */

.p-work__note {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	padding: 24px;
	border: 1px solid var(--color-primary);
	background: var(--color-white);
}

.p-work__note-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: #E5E4DB;
}

.p-work__note-icon img {
	width: 55%;
	height: auto;
}

.p-work__note-title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-work__note-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

/* --- 本文（エディタの内容） --- */

.p-work__content > :first-child {
	margin-top: 0;
}

.p-work__content > :last-child {
	margin-bottom: 0;
}

.p-work__content h2,
.p-work__content h3,
.p-work__content h4 {
	margin: 24px 0 16px;
	padding: 2px 16px;
	border-left: 4px solid var(--color-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-work__content p,
.p-work__content li {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-work__content p {
	margin: 0 0 16px;
}

.p-work__content img {
	max-width: 100%;
	height: auto;
}

/* --- 工事概要（会社概要の表を流用） --- */

.p-work-outline {
	background: var(--color-white);
}

/* --- 施工の流れ --- */

.p-work-flow {
	background: #F2F2F2;
}

.p-work-flow__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.p-work-flow__item {
	display: grid;
	grid-template-columns: 76px 320px minmax(0, 1fr);
	gap: 0 40px;
	align-items: start;
	padding-bottom: 48px;
}

.p-work-flow__item:last-child {
	padding-bottom: 0;
}

.p-work-flow__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: 20px;
	background: var(--color-primary);
	font-family: var(--font-num);
	font-size: 28px;
	line-height: 1;
	letter-spacing: 0.65px;
	color: var(--color-white);
}

.p-work-flow__figure {
	aspect-ratio: 320 / 213;
	background: #E8E5DE;
}

.p-work-flow__body {
	padding-top: 12px;
}

.p-work-flow__title {
	margin: 0 0 16px;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-heading);
}

.p-work-flow__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
}

/* --- お客様の声 --- */

.p-work-voice {
	background: var(--color-white);
}

.p-work-voice__cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 48px;
}

.p-work-voice__card {
	display: flex;
	align-items: center;
	gap: 48px;
	padding: 24px 32px;
	border: 1px solid #C3C3C3;
	background: var(--color-white);
}

.p-work-voice__figure {
	flex: none;
	width: 269px;
	aspect-ratio: 269 / 202;
}

.p-work-voice__avatar {
	flex: none;
	width: 120px;
	height: 120px;
	border-radius: 50%;
}

.p-work-voice__body {
	flex: 1;
}

.p-work-voice__name {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 13px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-heading);
}

.p-work-voice__name::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background: var(--color-primary);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.p-work-voice__name--home::before {
	mask-image: var(--icon-home);
	-webkit-mask-image: var(--icon-home);
}

.p-work-voice__name--worker::before {
	width: 24px;
	height: 24px;
	mask-image: var(--icon-worker);
	-webkit-mask-image: var(--icon-worker);
}

.p-work-voice__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	color: var(--color-text);
}

.p-work-voice__card--staff {
	gap: 52px;
}

.p-work-voice__staff {
	flex: none;
	width: 189px;
}

.p-work-voice__staff-name {
	margin: 16px 0 0;
	padding-bottom: 4px;
	border-bottom: 1px solid #000000;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-heading);
}

/* --- 前後ナビ --- */

.p-work-nav {
	display: flex;
	justify-content: center;
}

/* --- 関連する施工事例 --- */

.p-work-related {
	background: #F2F2F2;
}


/*--------------------------------------------------------------
## 施工事例 個別：タブレット（1023px以下）
--------------------------------------------------------------*/

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

	.p-work__ba {
		flex-direction: column;
		gap: 24px;
	}

	.p-work__ba-item {
		flex: none;
		width: 100%;
	}

	.p-work__ba-arrow {
		width: 40px;
		height: 26px;
		transform: rotate(90deg);
	}

	.p-work-flow__item {
		grid-template-columns: 60px minmax(0, 1fr);
		gap: 0 20px;
	}

	.p-work-flow__figure {
		grid-column: 2;
	}

	.p-work-flow__body {
		grid-column: 2;
		padding-top: 16px;
	}

	.p-work-voice__card {
		flex-wrap: wrap;
		gap: 24px;
	}

	.p-work-voice__figure {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.p-work-voice__staff {
		width: auto;
	}
}


/*--------------------------------------------------------------
## 施工事例 個別：スマートフォン（767px以下）
--------------------------------------------------------------*/

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

	.p-work__head {
		margin-bottom: 24px;
	}

	.p-work__meta {
		gap: 8px 16px;
		font-size: 14px;
	}

	.p-work__ba {
		margin-bottom: 24px;
	}

	.p-work__ba-item {
		padding: 12px;
	}

	.p-work__ba-label {
		top: 24px;
		left: 24px;
		padding: 6px 12px;
		font-size: 12px;
	}

	.p-work__ba-caption {
		padding-left: 0;
	}

	.p-work__note {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px 16px;
	}

	.p-work__note-title {
		margin-bottom: 8px;
		font-size: 18px;
	}

	.p-work__content h2,
	.p-work__content h3,
	.p-work__content h4 {
		font-size: 18px;
	}

	.p-work-flow__item {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0 12px;
		padding-bottom: 32px;
	}

	.p-work-flow__num {
		width: 32px;
		height: 32px;
		margin-top: 0;
		font-size: 22px;
	}

	.p-work-flow__body {
		padding-top: 12px;
	}

	.p-work-voice__card {
		padding: 20px 16px;
	}

	.p-work-voice__avatar {
		width: 88px;
		height: 88px;
	}

	.p-work-voice__staff-name {
		font-size: 18px;
		text-align: left;
	}

	.p-work-voice__text {
		font-size: 15px;
	}

	.p-work-nav__back {
		width: 100%;
	}
}

/* 施工の流れ：写真が無いステップは本文を横いっぱいに */
.p-work-flow__item--no-image .p-work-flow__body {
	grid-column: 2 / -1;
	padding-top: 0;
}


/*--------------------------------------------------------------
# お客様の声（archive-voice.php / single-voice.php）
--------------------------------------------------------------*/

/* 小さめのボタン */
.c-btn--sm {
	min-height: 38px;
	padding: 9px 44px 9px 24px;
	font-size: 16px;
}

/* 左に縦棒の見出し */
.c-heading-bar {
	margin: 0 0 32px;
	padding: 0 0 0 16px;
	border-left: 3px solid var(--color-heading);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

/* タブ型の絞り込み */
.c-tabs {
	margin-bottom: 48px;
	border-bottom: 1px solid #CFCFCF;
}

.c-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 1px 0 0;
	list-style: none;
}

.c-tabs__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	min-height: 42px;
	padding: 12px 16px;
	border-radius: 6px 6px 0 0;
	background: var(--color-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	color: #001A23;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.c-tabs__item:hover,
.c-tabs__item:focus-visible {
	background: #E5EADD;
}

.c-tabs__item.is-current {
	background: var(--color-primary);
	color: var(--color-white);
}

/*
 * ブログ一覧のタブ.
 * カテゴリーが6つあるため、1行に収まるよう幅を等分する.
 * お客様の声のタブ（.c-tabs 単体）には影響させない.
 */

.c-tabs--blog .c-tabs__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	align-items: end; /* 2行になるタブも下端（区切り線）で揃える */
	gap: 10px;
}

.c-tabs--blog .c-tabs__list > li {
	min-width: 0;
}

.c-tabs--blog .c-tabs__item {
	width: 100%;
	min-width: 0;
	padding: 12px 6px;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap; /* カテゴリー名を1行に収める */
}

/* --- 一覧 --- */

.p-voice-archive {
	background: #F2F2F2;
}

.p-voice-archive__lead {
	margin: -24px 0 48px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-heading);
}

.p-voice-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-voice-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--color-white);
}

.c-voice-card__thumb {
	flex: none;
	width: 344px;
	aspect-ratio: 344 / 250;
}

.c-voice-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.c-voice-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
}

.c-voice-card__title {
	margin: 0;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-heading);
}

.c-voice-card__title a {
	color: inherit;
	text-decoration: none;
}

.c-voice-card__title a:hover,
.c-voice-card__title a:focus-visible {
	text-decoration: underline;
}

.c-voice-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.c-voice-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 8px;
}

/* お客様の表記（家アイコン付き） */
.c-voice-card__customer {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-heading);
}

.c-voice-card__customer::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background: var(--color-primary);
	mask: var(--icon-home) no-repeat center / contain;
	-webkit-mask: var(--icon-home) no-repeat center / contain;
}

.c-voice-card__more {
	flex: none;
	min-width: 228px;
}

/* --- 個別 --- */

.p-voice-detail {
	background: #F2F2F2;
}

.p-voice-detail__head {
	margin-bottom: 48px;
}

.p-voice-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-voice-detail__title {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-voice-detail__title-customer,
.p-voice-detail__title-quote {
	display: block;
}

.p-voice-detail__body {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 48px;
}

.p-voice-detail__survey {
	flex: 1 1 570px;
	max-width: 570px;
	margin: 0;
	background: var(--color-white);
}

.p-voice-detail__survey img {
	display: block;
	width: 100%;
	height: auto;
}

.p-voice-detail__comment {
	flex: 1 1 570px;
	min-width: 0;
}

.p-voice-detail__comment-title {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--color-primary);
	font-size: clamp(19px, 2vw, 22px);
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-text);
}

.p-voice-detail__comment-body p {
	margin: 0 0 16px;
	font-size: clamp(16px, 1.7vw, 18px);
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-voice-detail__comment-body p:last-child {
	margin-bottom: 0;
}

.p-voice-detail__block {
	margin-bottom: 48px;
}

.p-voice-detail__photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 29px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-voice-detail__photo figure {
	margin: 0;
}

.p-voice-detail__photo-image {
	aspect-ratio: 374 / 229;
}

.p-voice-detail__photo-caption {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--color-text);
}

/* --- 他のお客様の声 --- */

.p-voice-other {
	background: var(--color-white);
}

.p-voice-other__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 29px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-voice-mini {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #DDDDDD;
	background: var(--color-white);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.c-voice-mini:hover,
.c-voice-mini:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.c-voice-mini__thumb {
	aspect-ratio: 374 / 229;
	overflow: hidden;
}

.c-voice-mini__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.c-voice-mini__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px 24px;
}

.c-voice-mini__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.c-voice-mini__area {
	padding: 4px 10px;
	border: 1px solid var(--color-primary);
	background: var(--color-white);
	font-size: 11px;
	line-height: 1.73;
	color: var(--color-primary);
}

.c-voice-mini__title {
	margin: 3px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-heading);
}


/*--------------------------------------------------------------
## お客様の声：タブレット（1023px以下）
--------------------------------------------------------------*/

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

	.c-voice-card {
		flex-direction: column;
		align-items: stretch;
	}

	.c-voice-card__thumb {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.p-voice-detail__body {
		flex-direction: column;
		gap: 32px;
	}

	.p-voice-detail__survey,
	.p-voice-detail__comment {
		flex: none;
		width: 100%;
		max-width: none;
	}

	.p-voice-detail__photos,
	.p-voice-other__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.c-tabs__item {
		min-width: 0;
		flex: 1 1 auto;
	}
}


/*--------------------------------------------------------------
## お客様の声：スマートフォン（767px以下）
--------------------------------------------------------------*/

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

	.c-heading-bar {
		margin-bottom: 20px;
	}

	.c-tabs {
		margin-bottom: 24px;
	}

	.c-tabs__list {
		gap: 8px;
	}

	.c-tabs__item {
		min-height: 44px;
		padding: 10px 14px;
	}

	.p-voice-archive__lead {
		margin: -12px 0 24px;
		font-size: 14px;
		line-height: 1.8;
		text-align: left;
	}

	.p-voice-list {
		gap: 16px;
	}

	.c-voice-card {
		gap: 12px;
		padding: 12px;
	}

	.c-voice-card__body {
		gap: 12px;
	}

	.c-voice-card__tags {
		gap: 8px;
	}

	.c-voice-card__title {
		font-size: 18px;
		line-height: 1.6;
	}

	.c-voice-card__text {
		font-size: 15px;
	}

	.c-voice-card__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.c-voice-card__more {
		width: 100%;
		min-width: 0;
	}

	.p-voice-detail__head {
		margin-bottom: 24px;
	}

	.p-voice-detail__meta {
		gap: 8px 16px;
		font-size: 14px;
	}

	.p-voice-detail__body {
		gap: 24px;
		margin-bottom: 32px;
	}

	.p-voice-detail__comment-body p {
		font-size: 16px;
	}

	.p-voice-detail__block {
		margin-bottom: 32px;
	}

	.p-voice-detail__photos,
	.p-voice-other__list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.p-voice-detail__photo-caption {
		margin-top: 12px;
		font-size: 14px;
	}
}


/*--------------------------------------------------------------
# SPの追加調整（5）
--------------------------------------------------------------*/

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

	/*
	 * パンくずが右下の屋根写真に重なって読みにくいので、白いフチで縁取る。
	 * メインビジュアルのコピーと同じ考え方。
	 */
	.c-breadcrumb__item,
	.c-breadcrumb__item a,
	.c-breadcrumb__item::before {
		paint-order: stroke fill;
		-webkit-text-stroke: 3px #FFFFFF;
	}
}


/*--------------------------------------------------------------
# お問い合わせ（page-contact.php）
--------------------------------------------------------------*/

/* --- 導入 --- */

.p-contact-intro {
	background: #F2F2F2;
}

.p-contact-intro__head {
	margin-bottom: 56px;
	text-align: center;
}

.p-contact-intro__title {
	margin: 0 0 32px;
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-contact-intro__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-contact-point {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 29px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-contact-point__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 40px 24px 32px;
	background: var(--color-white);
	text-align: center;
}

.p-contact-point__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
}

.p-contact-point__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-contact-point__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-heading);
}

.p-contact-point__text {
	margin: -16px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
}

/* --- 連絡方法 --- */

.p-method__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 52px;
	padding-top: 24px;
}

.p-method__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 64px 32px 56px;
	border: 1px solid #C4C4C4;
	background: var(--bg-gray);
	text-align: center;
}

/* カード上端に重なるラベル */
.p-method__tab {
	position: absolute;
	top: -24px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 260px;
	min-height: 48px;
	padding: 4px 24px;
	border-radius: 8px 8px 0 0;
	background: var(--color-primary);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.33;
	color: var(--color-white);
	transform: translateX(-50%);
}

.p-method__tab--accent {
	background: var(--color-accent);
}

.p-method__title {
	margin: 0 0 24px;
	font-size: clamp(21px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-method__text {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.p-method__tel {
	display: block;
	margin-bottom: 24px;
	font-family: var(--font-num);
	font-size: clamp(34px, 4.6vw, 64px);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: var(--color-primary);
}

.p-method__btn {
	flex-direction: column;
	gap: 4px;
	width: 100%;
	max-width: 426px;
	margin-bottom: 24px;
	padding: 14px 56px 14px 40px;
}

.p-method__btn-main {
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 700;
	line-height: 1.2;
}

.p-method__btn-sub {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
}

.p-method__note {
	margin: auto 0 0;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

/* --- ご連絡から工事までの流れ --- */

.p-contact-flow {
	position: relative;
}

.p-contact-flow__bg {
	position: absolute;
	inset: 0;
	background: transparent;
}

.p-contact-flow__bg > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-contact-flow .l-section__inner {
	position: relative;
}

.p-contact-flow__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 19px;
	margin: 0;
	padding: 25px 0 0;
	list-style: none;
}

.p-contact-flow__item {
	position: relative;
	display: flex;
}

/* カードのあいだの矢印 */
.p-contact-flow__item + .p-contact-flow__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -14px;
	width: 10px;
	height: 16px;
	background: var(--color-text);
	mask: var(--icon-chevron-right) no-repeat center / contain;
	-webkit-mask: var(--icon-chevron-right) no-repeat center / contain;
	transform: translateY(-50%);
}

.p-contact-flow__num {
	position: absolute;
	top: -25px;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-accent);
	font-family: var(--font-num);
	font-size: 32px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--color-white);
	transform: translateX(-50%);
}

.p-contact-flow__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 16px 24px;
	border: 2px solid #C4C4C4;
	background: var(--color-white);
	text-align: center;
}

.p-contact-flow__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
}

.p-contact-flow__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-contact-flow__title {
	margin: 0;
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-heading);
}

.p-contact-flow__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
}

/* --- Q&A（お問い合わせページ用。TOPの .c-faq とは別物） --- */

.p-contact-faq {
	background: #F2F2F2;
}

.c-qa {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1120px;
	margin-inline: auto;
}

.c-qa__item {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.c-qa__question {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 1px solid #C2C2C2;
	background: var(--color-white);
	cursor: pointer;
	list-style: none;
}

.c-qa__question::-webkit-details-marker {
	display: none;
}

.c-qa__item[open] .c-qa__question,
.c-qa__item.is-open .c-qa__question {
	background: var(--color-primary);
}

.c-qa__mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-primary);
	font-family: var(--font-num);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
}

.c-qa__item[open] .c-qa__mark,
.c-qa__item.is-open .c-qa__mark {
	background: var(--color-white);
	color: var(--color-primary);
}

.c-qa__mark--answer {
	background: var(--color-primary);
	color: var(--color-white);
}

.c-qa__question-text {
	flex: 1;
	font-size: clamp(16px, 1.7vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-primary);
}

.c-qa__item[open] .c-qa__question-text,
.c-qa__item.is-open .c-qa__question-text {
	color: var(--color-white);
}

/* ＋／− の切り替え */
.c-qa__toggle {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
}

.c-qa__toggle::before,
.c-qa__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-primary);
	transform: translateY(-50%);
	transition: transform 0.25s ease;
}

.c-qa__toggle::after {
	transform: translateY(-50%) rotate(90deg);
}

.c-qa__item[open] .c-qa__toggle::before,
.c-qa__item[open] .c-qa__toggle::after,
.c-qa__item.is-open .c-qa__toggle::before,
.c-qa__item.is-open .c-qa__toggle::after {
	background: var(--color-white);
}

.c-qa__item.is-open .c-qa__toggle::after {
	transform: translateY(-50%) rotate(0deg);
}

.c-qa__answer {
	overflow: hidden;
	transition: height 0.32s ease;
}

/* 閉じるアニメーション中は先に閉じた見た目へ戻す */
.c-qa__item[open]:not(.is-open) .c-qa__question {
	background: var(--color-white);
}

.c-qa__item[open]:not(.is-open) .c-qa__mark {
	background: var(--color-primary);
	color: var(--color-white);
}

.c-qa__item[open]:not(.is-open) .c-qa__question-text {
	color: var(--color-primary);
}

.c-qa__item[open]:not(.is-open) .c-qa__toggle::before,
.c-qa__item[open]:not(.is-open) .c-qa__toggle::after {
	background: var(--color-primary);
}

.c-qa__item[open]:not(.is-open) .c-qa__toggle::after {
	transform: translateY(-50%) rotate(90deg);
}

.c-qa__answer-inner {
	display: flex;
	align-items: flex-start;
	gap: 17px;
	padding: 17px;
	border: 1px solid #C2C2C2;
	border-top: 0;
	background: var(--color-white);
}

.c-qa__answer-text {
	margin: 0;
	font-size: clamp(15px, 1.7vw, 18px);
	font-weight: 500;
	line-height: 1.8;
	color: var(--color-primary);
}

/* --- アクセス --- */

.p-contact-access__body {
	flex: 1 1 500px;
	min-width: 0;
}

.p-contact-access__name {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 16px;
	font-size: clamp(18px, 1.9vw, 20px);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-contact-access__name::after {
	content: "";
	flex: 0 0 90px;
	height: 2px;
	background: var(--color-text);
}

.p-contact-access__area {
	margin-top: 24px;
}

.p-contact-access__area-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-contact-access__area-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}


/*--------------------------------------------------------------
# お問い合わせフォーム（Contact Form 7 の出力に当てる）
----------------------------------------------------------------
フォームのHTMLはCF7側で作っているので、ここでは見た目だけを整える。
--------------------------------------------------------------*/

.c-form {
	max-width: 800px;
	margin-inline: auto;
	padding: 48px clamp(16px, 4vw, 80px);
	border-radius: 6px;
	background: #F2F2F2;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.c-form__field {
	margin-bottom: 40px;
}

.c-form__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

/* 必須・任意のバッジ */
.c-form__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 45px;
	padding: 2px 10px;
	background: #838383;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.8;
	text-align: center;
	color: var(--color-white);
}

.c-form__badge--required {
	background: var(--color-primary);
}

.c-form__note {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text);
}

.c-form__note--center {
	text-align: center;
}

/* 姓／名のような2カラム */
.c-form__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
}

.c-form__cols .wpcf7-form-control-wrap {
	flex: 1 1 240px;
}

/* チェックボックスの並び */
.c-form__options .wpcf7-checkbox,
.c-form__options .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
}

.c-form__options .wpcf7-list-item {
	margin: 0;
}

.c-form__options .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.c-form__options .wpcf7-list-item-label {
	font-size: 16px;
	line-height: 1.2;
	color: var(--color-text);
}

/* 入力欄 */
.c-form input[type="text"],
.c-form input[type="tel"],
.c-form input[type="email"],
.c-form input[type="url"],
.c-form input[type="number"],
.c-form input[type="date"],
.c-form select,
.c-form textarea {
	width: 100%;
	padding: 10px 16px;
	border: 1px solid #DDDDDD;
	border-radius: 5px;
	background: var(--color-white);
	font-family: var(--font-base);
	/* iOSで自動ズームしないよう16px以上にする */
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-text);
	appearance: none;
}

.c-form textarea {
	min-height: 214px;
	resize: vertical;
}

.c-form input::placeholder,
.c-form textarea::placeholder {
	color: #999999;
}

.c-form input:focus-visible,
.c-form select:focus-visible,
.c-form textarea:focus-visible {
	border-color: var(--color-primary);
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

/* チェックボックス */
.c-form input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid #999999;
	border-radius: 4px;
	background: var(--color-white);
	appearance: none;
	cursor: pointer;
}

.c-form input[type="checkbox"]:checked {
	border-color: var(--color-primary);
	background: var(--color-primary) var(--icon-check) no-repeat center / 12px 9px;
}

.c-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ファイル添付 */
.c-form__files {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 2px dashed #DDDDDD;
	border-radius: 4px;
	background: #F8F8F8;
}

.c-form input[type="file"] {
	width: 100%;
	font-size: 14px;
	color: var(--color-text);
}

/* 個人情報の取り扱い */
.c-form__privacy {
	margin-bottom: 40px;
	padding: 40px 24px 24px;
	border-radius: 8px;
	background: #F8F8F8;
}

.c-form__privacy-box {
	max-height: 200px;
	margin-bottom: 20px;
	padding: 17px;
	overflow-y: auto;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	background: var(--color-white);
}

.c-form__privacy-box h4 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-text);
}

.c-form__privacy-box p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text);
}

.c-form__privacy-box p:last-child {
	margin-bottom: 0;
}

.c-form__privacy .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.c-form__privacy .wpcf7-acceptance label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text);
	cursor: pointer;
}

/* 送信ボタン */
.c-form__submit {
	text-align: center;
}

/*
 * _s の初期テーマが input[type="submit"] に灰色のスタイルを当てていて、
 * 属性セレクタのぶん .c-btn より詳細度が高い。ここで打ち消す。
 * input には ::after が使えないので、矢印は出さず左右の余白を揃える。
 */
.c-form input[type="submit"],
.c-form input[type="submit"].c-btn {
	min-width: min(340px, 100%);
	padding: 14px 40px;
	border: 0;
	border-radius: 0;
	background: var(--color-accent);
	box-shadow: 5px 5px 0 var(--color-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: var(--color-white);
	cursor: pointer;
}

.c-form input[type="submit"]:hover,
.c-form input[type="submit"]:focus-visible {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--color-heading);
}

.c-form input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.c-form .wpcf7-spinner {
	display: block;
	margin: 12px auto 0;
}

/* CF7からのメッセージ */
.c-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: #C4381F;
}

.c-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 16px;
	border: 2px solid var(--color-primary);
	border-radius: 4px;
	background: var(--color-white);
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
	color: var(--color-text);
}

.c-form form.invalid .wpcf7-response-output,
.c-form form.unaccepted .wpcf7-response-output,
.c-form form.failed .wpcf7-response-output {
	border-color: #C4381F;
}


/*--------------------------------------------------------------
## お問い合わせ：タブレット（1023px以下）
--------------------------------------------------------------*/

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

	.p-contact-point,
	.p-contact-flow__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px;
	}

	.p-contact-flow__item:nth-child(odd)::before {
		content: none;
	}

	.p-method__list {
		grid-template-columns: 1fr;
		gap: 64px;
	}

	.p-contact-access__body {
		flex: none;
		width: 100%;
	}
}


/*--------------------------------------------------------------
## お問い合わせ：スマートフォン（767px以下）
--------------------------------------------------------------*/

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

	.p-contact-intro__head {
		margin-bottom: 32px;
	}

	.p-contact-intro__lead {
		font-size: 14px;
		text-align: left;
	}

	.p-contact-point,
	.p-contact-flow__list {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.p-contact-point__item {
		padding: 32px 16px 24px;
	}

	.p-method__card {
		padding: 48px 16px 32px;
	}

	.p-method__tab {
		min-width: 200px;
		min-height: 40px;
		top: -20px;
	}

	.p-method__text {
		font-size: 15px;
	}

	.p-method__note {
		font-size: 14px;
	}

	.p-contact-flow__item::before {
		content: none !important;
	}

	.p-contact-flow__card {
		padding: 40px 16px 24px;
	}

	.p-contact-flow__text {
		font-size: 15px;
	}

	.c-qa {
		gap: 16px;
	}

	.c-qa__question {
		gap: 12px;
		padding: 12px;
	}

	.c-qa__mark {
		width: 30px;
		height: 30px;
		font-size: 16px;
	}

	.c-qa__answer-inner {
		gap: 12px;
		padding: 12px;
	}

	.c-form {
		padding: 24px 16px;
	}

	.c-form__field {
		margin-bottom: 28px;
	}

	.c-form__cols {
		gap: 12px;
	}

	.c-form__cols .wpcf7-form-control-wrap {
		flex: 1 1 100%;
	}

	.c-form__options .wpcf7-checkbox,
	.c-form__options .wpcf7-radio {
		flex-direction: column;
		gap: 12px;
	}

	.c-form__privacy {
		padding: 24px 16px 20px;
	}

	.c-form__privacy .wpcf7-acceptance label {
		justify-content: flex-start;
		text-align: left;
	}

	.c-form input[type="submit"] {
		width: 100%;
	}

	.p-contact-access__name::after {
		flex: 1 1 auto;
	}
}


/*--------------------------------------------------------------
# ブログ（一覧・個別）
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## 共通レイアウト（本文＋サイドバーの2カラム）
--------------------------------------------------------------*/

.p-blog-archive,
.p-blog-single {
	background: var(--bg-blog);
}

.p-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--blog-side-width);
	align-items: start;
	gap: 60px;
}

.p-blog-main {
	min-width: 0;
}

.p-blog-archive__empty {
	margin: 0;
	padding: 64px 24px;
	background: var(--color-white);
	font-size: 16px;
	line-height: 1.8;
	text-align: center;
	color: var(--color-text);
}

/*--------------------------------------------------------------
## 一覧：記事カード
--------------------------------------------------------------*/

.p-blog-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-blog-card {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-card-line);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.c-blog-card__link {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 32px;
	padding: 24px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease;
}

.c-blog-card__link:hover,
.c-blog-card__link:focus-visible {
	background: var(--bg-gray);
}

.c-blog-card__thumb {
	aspect-ratio: 230 / 152;
}

.c-blog-card__thumb > img {
	transition: transform 0.4s ease;
}

.c-blog-card__link:hover .c-blog-card__thumb > img {
	transform: scale(1.05);
}

.c-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.c-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.c-blog-card__cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 6px 16px;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--color-white);
}

.c-blog-card__date {
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: var(--color-text);
}

.c-blog-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
	transition: color 0.2s ease;
}

.c-blog-card__link:hover .c-blog-card__title {
	color: var(--color-primary);
}

.c-blog-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	font-feature-settings: "palt";
}

.c-blog-card__more {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: auto 0 0;
	padding-top: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--color-accent);
}

.c-blog-card__more-arrow {
	width: 21px;
	height: 12px;
	background: currentColor;
	mask: var(--icon-arrow-right) no-repeat center / contain;
	-webkit-mask: var(--icon-arrow-right) no-repeat center / contain;
	transition: transform 0.2s ease;
}

.c-blog-card__link:hover .c-blog-card__more-arrow {
	transform: translateX(4px);
}

/*--------------------------------------------------------------
## サイドバー
--------------------------------------------------------------*/

.p-blog-side {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.c-side-card {
	padding: 30px 30px 34px;
	background: var(--color-white);
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.c-side-card__title {
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--color-side-line);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-heading);
}

/* 検索フォーム */
.c-side-search {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--color-input-line);
	border-radius: 4px;
	background: var(--color-white);
	overflow: hidden;
}

.c-side-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 16px;
	border: 0;
	background: transparent;
	font-family: var(--font-base);
	font-size: 16px; /* iOSの自動ズーム防止 */
	line-height: 1.2;
	color: var(--color-text);
}

.c-side-search__input::placeholder {
	font-size: 14px;
	color: var(--color-input-ph);
}

.c-side-search__input:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

.c-side-search__submit {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: var(--color-primary);
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.c-side-search__submit:hover,
.c-side-search__submit:focus-visible {
	background: var(--color-primary-dark);
}

.c-side-search__icon {
	width: 20px;
	height: 20px;
	background: currentColor;
	mask: var(--icon-search) no-repeat center / contain;
	-webkit-mask: var(--icon-search) no-repeat center / contain;
}

/* カテゴリー・月別アーカイブ */
.c-side-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-side-list__item + .c-side-list__item {
	border-top: 1px solid var(--color-side-line);
}

.c-side-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 9px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	color: var(--color-text);
	transition: color 0.2s ease;
}

.c-side-list__link:hover,
.c-side-list__link:focus-visible {
	color: var(--color-primary);
}

.c-side-list__count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 2px 10px;
	background: var(--bg-count);
	border-radius: 12px;
	font-family: var(--font-num);
	font-size: 12px;
	line-height: 1.2;
	color: var(--color-primary);
}

/* よく読まれている記事 */
.c-side-rank {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-side-rank__item + .c-side-rank__item {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-side-line);
}

.c-side-rank__link {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	text-decoration: none;
	color: inherit;
}

.c-side-rank__thumb {
	display: block;
	aspect-ratio: 80 / 80;
	border-radius: 2px;
}

.c-side-rank__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.c-side-rank__date {
	font-family: var(--font-num);
	font-size: 14px;
	line-height: 1.2;
	color: var(--color-date);
}

.c-side-rank__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text);
	transition: color 0.2s ease;
}

.c-side-rank__link:hover .c-side-rank__title,
.c-side-rank__link:focus-visible .c-side-rank__title {
	color: var(--color-primary);
}

/*--------------------------------------------------------------
## サイドバー：無料屋根診断バナー
--------------------------------------------------------------*/

/* バナーは1枚の画像。リンクにして押せる範囲を画像全体にする */
.p-side-banner {
	display: block;
	transition: opacity 0.2s ease;
}

.p-side-banner > img {
	display: block;
	width: 100%;
	height: auto;
}

.p-side-banner:hover,
.p-side-banner:focus-visible {
	opacity: 0.85;
}

/*--------------------------------------------------------------
## 個別：記事の見出し・本文
--------------------------------------------------------------*/

.p-entry {
	margin: 0;
}

.p-entry__head {
	margin-bottom: 32px;
	/* 見出しの下線：左140pxだけグリーン、残りは薄いグレー */
	background-image: linear-gradient(90deg, var(--color-primary) 0 140px, var(--color-rule) 140px);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 4px;
	padding-bottom: 16px;
}

.p-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0 0 16px;
}

.p-entry__cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 29px;
	padding: 8px 16px;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
}

.p-entry__date {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.p-entry__title {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--color-heading);
	text-wrap: pretty;
	line-break: strict;
}

.p-entry__eyecatch {
	margin: 0 0 8px;
	aspect-ratio: 820 / 460;
}

.p-entry__body {
	margin-bottom: 32px;
}

/*--------------------------------------------------------------
## 個別：本文（エディタから出力される要素）
--------------------------------------------------------------*/

.c-wysiwyg > *:first-child {
	margin-top: 0;
}

.c-wysiwyg > *:last-child {
	margin-bottom: 0;
}

.c-wysiwyg p {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	font-feature-settings: "palt";
}

.c-wysiwyg h2 {
	margin: 40px 0 20px;
	padding: 2px 0 2px 16px;
	border-left: 4px solid var(--color-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-heading);
}

.c-wysiwyg h3 {
	margin: 32px 0 16px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-text);
}

.c-wysiwyg h4 {
	margin: 24px 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-heading);
}

.c-wysiwyg img,
.c-wysiwyg iframe {
	max-width: 100%;
	height: auto;
}

.c-wysiwyg figure {
	margin: 32px 0;
}

.c-wysiwyg figure img {
	display: block;
	width: 100%;
}

.c-wysiwyg figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-muted);
}

.c-wysiwyg ul,
.c-wysiwyg ol {
	margin: 0 0 24px;
	padding-left: 4px;
	list-style: none;
}

.c-wysiwyg ul li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text);
}

.c-wysiwyg ul li + li {
	margin-top: 4px;
}

.c-wysiwyg ul li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 2px;
	width: 11px;
	height: 11px;
	background: var(--color-sub);
}

.c-wysiwyg ol {
	padding-left: 24px;
	list-style: decimal;
}

.c-wysiwyg ol li {
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text);
}

.c-wysiwyg blockquote {
	margin: 0 0 32px;
	padding: 20px 24px;
	background: var(--bg-notice);
	border: 1px solid var(--color-input-line);
}

.c-wysiwyg blockquote > *:last-child {
	margin-bottom: 0;
}

.c-wysiwyg a {
	color: var(--color-accent);
	text-underline-offset: 3px;
}

.c-wysiwyg table {
	width: 100%;
	margin: 0 0 32px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.7;
}

.c-wysiwyg th,
.c-wysiwyg td {
	padding: 12px 16px;
	border: 1px solid var(--color-input-line);
	text-align: left;
}

.c-wysiwyg th {
	background: var(--bg-notice);
	font-weight: 700;
}

/*--------------------------------------------------------------
## 個別：タグ・シェア・筆者
--------------------------------------------------------------*/

.c-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
	padding: 0 0 32px;
	border-bottom: 1px solid var(--color-hr);
	list-style: none;
}

.c-taglist__link {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 12px;
	background: var(--color-white);
	border-radius: 100px;
	font-size: 13px;
	line-height: 1.8;
	text-decoration: none;
	color: var(--color-sub);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.c-taglist__link:hover,
.c-taglist__link:focus-visible {
	background: var(--color-primary);
	color: var(--color-white);
}

.c-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-bottom: 28px;
}

.c-share__label {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-sub);
}

.c-share__list {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.c-share__link:hover,
.c-share__link:focus-visible {
	transform: translateY(-2px);
}

.c-share__link img {
	display: block;
	width: 32px;
	height: 32px;
}

.c-author {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	align-items: start;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid var(--color-hr);
	border-bottom: 1px solid var(--color-hr);
}

.c-author__label {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	color: var(--color-heading);
}

/* 顔写真は未設定でも成立するよう、グリッドではなく Flex で組む */
.c-author__body {
	display: flex;
	align-items: center;
	gap: 24px;
}

.c-author__thumb {
	display: block;
	flex: 0 0 87px;
	width: 87px;
	height: 87px;
	border-radius: 50%;
}

.c-author__text {
	flex: 1 1 auto;
	min-width: 0;
}

.c-author__name {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-text);
}

.c-author__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text);
	font-feature-settings: "palt";
}

/*--------------------------------------------------------------
## 個別：前後の記事・関連記事
--------------------------------------------------------------*/

.c-post-nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 48px;
}

.c-post-nav__side {
	display: flex;
}

.c-post-nav__link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 116px;
	padding: 16px;
	background: var(--color-white);
	text-decoration: none;
	color: var(--color-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.c-post-nav__link:hover,
.c-post-nav__link:focus-visible {
	background: var(--color-primary);
	color: var(--color-white);
}

.c-post-nav__label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
}

.c-post-nav__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.9;
	font-feature-settings: "palt";
}

.c-post-nav__side--index .c-post-nav__link {
	align-items: center;
	justify-content: center;
}

.c-post-nav__side--next .c-post-nav__link {
	text-align: right;
}

.p-related {
	margin-top: 48px;
}

.p-related__title {
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--color-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.p-related__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-related__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.p-related__thumb {
	display: block;
	margin-bottom: 12px;
	aspect-ratio: 260 / 147;
}

.p-related__thumb > img {
	transition: transform 0.4s ease;
}

.p-related__link:hover .p-related__thumb > img {
	transform: scale(1.05);
}

.p-related__date {
	font-family: var(--font-num);
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-text);
}

.p-related__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-text);
	font-feature-settings: "palt";
	transition: color 0.2s ease;
}

.p-related__link:hover .p-related__name,
.p-related__link:focus-visible .p-related__name {
	color: var(--color-primary);
}

/*--------------------------------------------------------------
## ブログ：タブレット（1023px以下）
--------------------------------------------------------------*/

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

	.p-blog-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.p-blog-side {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.p-side-banner {
		grid-column: 1 / -1;
		max-width: 420px;
	}

	.c-blog-card__link {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 24px;
	}

	.c-author {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.c-author__label {
		text-align: left;
	}
}

/*--------------------------------------------------------------
## ブログ：スマートフォン（767px以下）
--------------------------------------------------------------*/

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

	.p-blog-side {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.p-side-banner {
		max-width: none;
	}

	.c-blog-card__link {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 16px;
	}

	.c-blog-card__thumb {
		aspect-ratio: 16 / 9;
	}

	.c-blog-card__text {
		font-size: 15px;
	}

	.c-side-card {
		padding: 24px 20px 26px;
	}

	.p-entry__meta {
		gap: 12px;
	}

	.p-entry__eyecatch {
		aspect-ratio: 16 / 10;
	}

	.c-wysiwyg h2 {
		margin-top: 32px;
		font-size: 18px;
	}

	.c-wysiwyg p,
	.c-wysiwyg ul li,
	.c-wysiwyg ol li {
		font-size: 15px;
	}

	.c-wysiwyg blockquote {
		padding: 16px;
	}

	.c-share {
		gap: 12px;
	}

	.c-author__body {
		gap: 16px;
	}

	.c-author__thumb {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}

	.c-post-nav {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.c-post-nav__link {
		min-height: 0;
	}

	.c-post-nav__side--next .c-post-nav__link {
		text-align: left;
	}

	.p-related__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* SPはサムネイルを左、日付とタイトルを右に積む */
	.p-related__link {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		grid-template-areas:
			"thumb date"
			"thumb name";
		align-content: start;
		align-items: start;
		gap: 4px 16px;
	}

	.p-related__thumb {
		grid-area: thumb;
		margin-bottom: 0;
	}

	.p-related__date {
		grid-area: date;
	}

	.p-related__name {
		grid-area: name;
	}

	.p-related__date {
		font-size: 14px;
	}

	.p-related__name {
		font-size: 15px;
	}
}