@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* コンテンツエリアの上余白を詰める
   （SWELL既定：base 2em / 600px以上 4em。子テーマのCSSが後に読み込まれるため
     メディアクエリなしの1行で両方を上書きします） */
.l-content {
	padding-top: 1em;
}

.post_content>p {
    margin-bottom: 1.0em;
}

.wp-block-table{
    overflow-x: initial;
}
/* 記事内テーブルの見出し行（thead）はテーマカラーで塗らず、グレー地に濃い文字で見やすくする。
   SWELL は background-color:var(--thead-color--bg, var(--color_main)) / color:var(--thead-color--txt, #fff) を
   当てているので、既定値だけ差し替えます（ブロックの設定でヘッダー色を個別指定した表はそのまま反映されます）。 */
.post_content thead td,
.post_content thead th {
	background-color: var(--thead-color--bg, #e9edf1);
	color: var(--thead-color--txt, #333);
	font-weight: 700;
}

/* ---------- デザインの基本（色・フォント・余白・ボタン・見出し） ----------
   2026/10 のデザイン変更で、白・薄グレー・濃紺の3色を基本にしました。
   水色（SWELL のメインカラー）は「差し色」として、英字の小見出し・細い線・hover 時の下線など
   面積の小さい部分だけに使います。
   ・--amano-ink       : 濃紺。ボタンの塗り・濃紺の帯・見出しの文字
   ・--amano-ink-hover : ボタンの hover
   ・--amano-gray      : 薄グレー。白と交互に敷くセクション背景
   ・--amano-sky       : 差し色（水色）
   ・--amano-line      : 1px の罫線・カード枠
   ※ここの値は初期値です。「外観 > カスタマイズ > 天野フォークリフト カラー設定」で変更すると
     inc/color-settings.php が上書きします（初期値を変えるときは同ファイルの default も合わせる） */
:root {
	--amano-ink: #263238;
	--amano-ink-hover: #37474f;
	--amano-gray: #f5f6f7;
	--amano-sky: #3ba9e0;
	--amano-line: #dde1e5;
	--amano-muted: #5b6672;
	/* 文字色（カスタマイザーの「〜の文字色」で変更できます）
	   ・--amano-btn-text     : 濃紺のボタン（お問い合わせ・電話番号・検索・送信ボタンなど）
	   ・--amano-gnav-text    : PC のグローバルナビ
	   ・--amano-spnav-text   : スマホのメニュー
	   ・--amano-contact-text : 濃紺の帯（相談セクション・フッター上の問い合わせ）の文字 */
	--amano-btn-text: #fafafa;
	--amano-gnav-text: #0f1a24;
	--amano-spnav-text: #333;
	--amano-contact-text: #fafafa;
	/* 角丸は 0〜4px の範囲に抑えます */
	--amano-radius: 2px;
	/* 英字ラベル・数字の欧文フォント（functions.php で Google Fonts の Inter を読み込み） */
	--amano-font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
	/* セクションの上下余白（以前の約1.4倍） */
	--amano-sec-pad: 3.6em;

	/* 旧デザインの変数名（記事本文などに残っていても新しい配色になるよう、新しい変数につないでおきます） */
	--amano-accent: var(--amano-ink);
	--amano-accent-dark: var(--amano-ink-hover);
	--amano-accent2: var(--amano-ink);
	--amano-accent-dark2: var(--amano-ink-hover);
	--amano-accent-pale: var(--amano-gray);
	--amano-accent-pale2: var(--amano-gray);
	--amano-section-bg1: #fff;
	--amano-section-bg2: var(--amano-gray);
	--amano-btn-text2: var(--amano-btn-text);
	--amano-btn-text-shadow: none;
	--amano-accent-text-shadow: none;
}
@media (max-width: 767px) {
	:root {
		--amano-sec-pad: 2.6em;
	}
}

.c-categoryList {
	color: var(--amano-ink);
}
.c-categoryList__link {
	background-color: var(--amano-ink);
}
.p-pnLinks .-prev .p-pnLinks__link {
	border-left: 1.25em solid var(--amano-ink);
}
.p-pnLinks .-next .p-pnLinks__link {
    border-right: 1.25em solid var(--amano-ink);
}

/* SWELL のボタンブロック「青」も濃紺に寄せる
   （SWELL は .blue_ に --the-btn-color 等をインラインCSSで出しているため !important で上書き） */
.blue_ {
	--the-btn-color: var(--amano-ink) !important;
	--the-btn-color2: var(--amano-ink-hover) !important;
	--the-solid-shadow: var(--amano-ink-hover) !important;
}

/* SWELL の「メインカラーの背景」（.u-bg-main）も濃紺に寄せる
   （メインカラーを白にすると白地に白文字になって読めないため。親テーマが !important なのでこちらも !important） */
.u-bg-main {
	background-color: var(--amano-ink) !important;
	color: var(--amano-contact-text) !important;
}

/* ページング（ページ番号）
   SWELL は「ページャーのスタイル」設定に応じて文字・枠線を var(--color_main)、
   現在ページ・hover の塗りを var(--color_main) にするため、メインカラーが白だと番号が見えません。
   現在ページ以外：白地＋濃紺の文字・枠線／現在ページ：濃紺の塗り＋白文字／hover：薄グレー で区別します。
   （SWELL の設定値はインラインCSSで出力されるため、.c-pagination を付けて詳細度を上げています） */
.c-pagination [class*="page-numbers"] {
	border: 1px solid var(--amano-ink);
	background-color: #fff;
	color: var(--amano-ink);
}
.c-pagination a[class*="page-numbers"]:hover,
.c-pagination a[class*="page-numbers"]:focus-visible {
	background-color: var(--amano-gray);
	color: var(--amano-ink);
}
.c-pagination [class*="page-numbers"].current {
	background-color: var(--amano-ink);
	color: var(--amano-btn-text);
}

/* 右向きの矢印「→」。ボタンやリンクの末尾に置き、hover で少し右にずらします。
   マークアップで <span class="c-arrow"></span> を置くか、各ボタンの ::after で同じ見た目にしています。 */
.c-arrow {
	display: inline-block;
	flex: 0 0 auto;
	transition: transform .25s ease;
}
.c-arrow::before {
	content: "\2192";
	font-family: var(--amano-font-en);
	font-weight: 300;
}
a:hover .c-arrow,
a:focus-visible .c-arrow {
	transform: translateX(.3em);
}

/* ボタン：プライマリは濃紺の塗り＋「→」、セカンダリは 1px の枠線のみ。角丸は控えめ・影なし。
   濃紺の帯の上では --onDark を足して白黒を反転させます。 */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.4em;
	min-width: 15em;
	min-height: 3.6em;
	padding: .9em 1.4em .9em 1.8em;
	border: 1px solid var(--amano-ink);
	border-radius: var(--amano-radius);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-decoration: none;
	transition: background-color .25s, border-color .25s, color .25s;
}
.c-btn--primary {
	background: var(--amano-ink);
	color: var(--amano-btn-text);
}
.c-btn--primary:hover,
.c-btn--primary:focus-visible {
	border-color: var(--amano-ink-hover);
	background: var(--amano-ink-hover);
	color: var(--amano-btn-text);
}
.c-btn--secondary {
	background: transparent;
	color: var(--amano-ink);
}
.c-btn--secondary:hover,
.c-btn--secondary:focus-visible {
	color: var(--amano-ink);
}
.c-btn--onDark.c-btn--primary {
	border-color: #fff;
	background: #fff;
	color: var(--amano-ink);
}
.c-btn--onDark.c-btn--primary:hover,
.c-btn--onDark.c-btn--primary:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, .88);
	color: var(--amano-ink);
}
.c-btn--onDark.c-btn--secondary {
	border-color: rgba(255, 255, 255, .45);
	color: var(--amano-contact-text);
}
.c-btn--onDark.c-btn--secondary:hover,
.c-btn--onDark.c-btn--secondary:focus-visible {
	border-color: #fff;
	color: var(--amano-contact-text);
}

/* セクション見出し：英字の小さなラベル（差し色＋細線）＋大きな日本語見出し。左揃えが基本です。
   <header class="secHead"><p class="secHead__en">SERVICE</p><h2 class="secHead__title">サービス一覧</h2></header> */
.secHead {
	margin: 0 0 2.4em;
	text-align: left;
}
.secHead__en {
	display: flex;
	align-items: center;
	gap: .9em;
	margin: 0 0 .9em;
	color: var(--amano-sky);
	font-family: var(--amano-font-en);
	font-size: .75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .28em;
}
.secHead__en::before {
	content: "";
	flex: 0 0 auto;
	width: 2.4em;
	height: 1px;
	background: currentColor;
}
.secHead__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--amano-ink);
	border-bottom: 2px solid var(--amano-sky);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .04em;
}
.secHead__lead {
	margin: 1em 0 0;
	color: var(--amano-muted);
	font-size: .92rem;
	line-height: 1.9;
}
.secHead--onDark .secHead__title {
	color: var(--amano-contact-text);
}
.secHead--onDark .secHead__lead {
	color: var(--amano-contact-text);
	opacity: .8;
}
@media (max-width: 767px) {
	.secHead {
		margin-bottom: 1.8em;
	}
}

.p-postSlider.-ps-style-img .p-postList__body {
    background: rgb(15, 26, 36, .72);
    padding: .75em .75em .5em;
}

/* ---------- トップページの記事スライダー（新着中古フォークリフト）のカード ----------
   parts/post_list/loop_by_slider.php でタイトルの下に出す
   価格（販売中で価格あり）／「お問い合わせ」ボタン（価格なし）／在庫状況（販売不可）の見た目。
   カード全体がリンクなので、ボタンは span をボタン風に見せています。 */
/* 黒いオーバーレイが大きくなりすぎないよう、タイトルと価格／ボタンを1行に横並びにする
   （タイトルは入りきらない分を「…」で省略） */
.p-postSlider .p-postList__body.usedSlide__body {
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .5em .75em;
}
.usedSlide__body .p-postList__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	max-height: none;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.usedSlide__action {
	flex: 0 0 auto;
	margin: 0;
	line-height: 1.2;
	text-shadow: none;
}
/* 価格：白地に濃紺の数字（欧文フォント） */
.usedSlide__price {
	display: inline-block;
	max-width: 100%;
	padding: .15em .55em;
	border-radius: var(--amano-radius);
	background: #fff;
	color: var(--amano-ink);
	font-family: var(--amano-font-en);
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* 1行に収めるため、スライダーでは「（税抜）」を出さない（詳細ページで表示されます） */
.usedSlide__price small {
	display: none;
}
/* 商談中は価格を隠さずグレーで、「商談中」を赤く添える */
.usedSlide__price.is-muted {
	background: rgba(255, 255, 255, .85);
	color: #666;
}
.usedSlide__price .usedSlide__note {
	display: inline;
	margin-left: .3em;
	color: #DD2C00;
	font-size: .65rem;
	font-weight: 700;
}
/* 価格なし：白い枠線の「お問い合わせ →」 */
.usedSlide__btn {
	display: inline-block;
	padding: .4em .9em;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--amano-radius);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
	transition: background-color .25s, color .25s;
}
.usedSlide__btn::after {
	content: "\2192";
	display: inline-block;
	margin-left: .5em;
	font-family: var(--amano-font-en);
	font-weight: 300;
	transition: transform .25s ease;
}
.p-postList__link:hover .usedSlide__btn,
.p-postList__link:focus-visible .usedSlide__btn {
	background: #fff;
	color: var(--amano-ink);
}
.p-postList__link:hover .usedSlide__btn::after,
.p-postList__link:focus-visible .usedSlide__btn::after {
	transform: translateX(.25em);
}
/* 販売不可（SOLD OUT・レンタル中など）は状況をそのまま表示 */
.usedSlide__status {
	display: inline-block;
	padding: .25em .8em;
	border-radius: var(--amano-radius);
	background: rgba(255, 255, 255, .85);
	color: #666;
	font-size: .85rem;
	font-weight: 700;
}
/* スマホで2枚以上並ぶときは少し小さく（カード幅が 180px 前後になるため） */
.p-postSlider.-fz-sp-s .p-postList__body.usedSlide__body {
	gap: .4em;
	padding: .4em .5em;
}
.p-postSlider.-fz-sp-s .usedSlide__price {
	padding: .1em .35em;
	font-size: .85rem;
}
/* スマホではタイトル幅を確保するため「商談中」の添え字は出さない（グレーのタグで区別） */
.p-postSlider.-fz-sp-s .usedSlide__price .usedSlide__note {
	display: none;
}
.p-postSlider.-fz-sp-s .usedSlide__btn {
	padding: .3em .6em;
	font-size: .72rem;
}
.p-postSlider.-fz-sp-s .usedSlide__status {
	padding: .2em .5em;
	font-size: .7rem;
}
@media screen and (min-width: 960px) {
	.p-postSlider.-fz-sp-s .p-postList__body.usedSlide__body {
		gap: .6em;
		padding: .5em .75em;
	}
	.p-postSlider.-fz-sp-s .usedSlide__price {
		padding: .15em .55em;
		font-size: 1.05rem;
	}
	.p-postSlider.-fz-sp-s .usedSlide__price .usedSlide__note {
		display: inline;
	}
	.p-postSlider.-fz-sp-s .usedSlide__btn {
		padding: .4em .9em;
		font-size: .85rem;
	}
	.p-postSlider.-fz-sp-s .usedSlide__status {
		padding: .25em .8em;
		font-size: .85rem;
	}
}

/* ---------- メインビジュアル（スライダー） ----------
   写真に濃紺の暗いオーバーレイをかけ、キャッチコピーを左寄せで大きく置きます。
   オーバーレイは左側ほど濃いグラデーションにして、写真を見せつつ文字を読みやすくしています
   （SWELL の「オーバーレイカラー」設定より優先。色はカラー設定のメインカラー（濃紺）に追従）。
   文字色は SWELL カスタマイザーの設定（インライン style）をそのまま使います。 */
.p-mainVisual .c-filterLayer::before {
	content: "";
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--amano-ink) 82%, transparent) 0%,
		color-mix(in srgb, var(--amano-ink) 55%, transparent) 55%,
		color-mix(in srgb, var(--amano-ink) 25%, transparent) 100%
	) !important;
	opacity: 1 !important;
}
/* スライドごとの「テキストの位置」設定に関係なく左寄せ */
.p-mainVisual .p-mainVisual__textLayer {
	align-items: flex-start;
	text-align: left;
}
.p-mainVisual__slideTitle {
	max-width: 18em;
	font-size: clamp(1.9rem, 7.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}
.p-mainVisual__slideTitle strong,
.p-mainVisual__slideTitle b {
	font-weight: 900;
}
.p-mainVisual__slideText {
	max-width: 34em;
	margin-top: 1.4em;
	font-size: clamp(.95rem, 3.6vw, 1.1rem);
	font-weight: 400;
	line-height: 1.9;
	opacity: .9;
}
/* ボタン：写真の上なので白地に濃紺文字＋「→」（塗り／枠線どちらのタイプでも同じ見た目）
   SWELL はスライドごとのボタン色をインライン style で出すため !important で上書き */
.p-mainVisual .c-mvBtn {
	display: block;
	margin: 2.4em 0 0;
	text-align: left;
}
.c-mvBtn__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6em;
	min-width: 15em;
	padding: 1.1em 1.5em 1.1em 1.9em;
	border: 1px solid #fff;
	border-radius: var(--amano-radius);
	background: #fff !important;
	box-shadow: none;
	color: var(--amano-ink) !important;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .06em;
	transition: background-color .25s;
}
.c-mvBtn__btn::after {
	content: "\2192";
	display: inline-block;
	font-family: var(--amano-font-en);
	font-weight: 300;
	transition: transform .25s ease;
}
.c-mvBtn__btn:hover,
.c-mvBtn__btn:focus-visible {
	background: rgba(255, 255, 255, .88) !important;
	box-shadow: none;
}
.c-mvBtn__btn:hover::after,
.c-mvBtn__btn:focus-visible::after {
	transform: translateX(.3em);
}
/* SWELL がホバー時に重ねる白いグラデーションは使わない */
.c-mvBtn__btn::before {
	display: none;
}
@media screen and (min-width: 600px) {
	.p-mainVisual__slideTitle {
		font-size: clamp(2.4rem, 4.4vw, 3.6rem);
	}
	.p-mainVisual__slideText {
		font-size: clamp(1rem, 1.4vw, 1.15rem);
	}
}

/* ---------- トップページ：メインビジュアルの実績数字 ----------
   parts/top/main_visual.php が #main_visual の中で template-parts/home-stats.php を読み込んで出力します。
   960px 未満：メインビジュアルの直下に白地で、欧文フォントの大きな数字を細い区切り線で
               768px 以上は4列、767px 以下は2列×2段で並べます。
   960px 以上：メインビジュアルの右側に重ね、白文字で2列×2段にします。
               キャッチコピー（.p-mainVisual__textLayer）は右側を空けて重ならないようにしています。 */
.homeStats {
	margin: 0;
	padding: 2.8em 0;
	background: #fff;
	border-bottom: 1px solid var(--amano-line);
}
.homeStats__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.homeStats__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: .2em 1.6em;
	border-left: 1px solid var(--amano-line);
	line-height: 1.2;
}
.homeStats__item:last-child {
	border-right: 1px solid var(--amano-line);
}
.homeStats__label {
	margin-bottom: .9em;
	color: var(--amano-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
}
.homeStats__value {
	display: flex;
	align-items: baseline;
	color: var(--amano-ink);
	white-space: nowrap;
}
.homeStats__num {
	font-family: var(--amano-font-en);
	font-size: clamp(2.4rem, 4.2vw, 3.4rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
.homeStats__unit {
	margin-left: .4em;
	font-size: .85rem;
	font-weight: 700;
}
@media (max-width: 767px) {
	.homeStats {
		padding: 1.6em 0;
	}
	.homeStats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.6em;
	}
	.homeStats__item {
		padding: .1em 1em;
	}
	.homeStats__item:nth-child(even) {
		border-right: 1px solid var(--amano-line);
	}
	.homeStats__label {
		margin-bottom: .6em;
		font-size: .72rem;
	}
	.homeStats__num {
		font-size: 2.2rem;
	}
	.homeStats__unit {
		font-size: .72rem;
	}
}
@media (min-width: 960px) {
	/* 実績の幅（キャッチコピー側の余白計算にも使う） */
	.p-mainVisual.-has-stats {
		--amano-mv-stats-w: clamp(340px, 34vw, 440px);
	}
	.p-mainVisual.-has-stats .p-mainVisual__textLayer {
		padding-right: calc(var(--amano-mv-stats-w) + 3em);
	}
	/* メインビジュアル全面に重ね、コンテナ幅の右端・上下中央に置く
	   （スライドのリンクやスワイプを邪魔しないよう、数字以外はクリックを透過） */
	.p-mainVisual .homeStats {
		position: absolute;
		inset: 0;
		z-index: 4;
		display: flex;
		align-items: center;
		padding: 0;
		background: none;
		border: 0;
		pointer-events: none;
	}
	.p-mainVisual .homeStats__inner {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}
	.p-mainVisual .homeStats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: var(--amano-mv-stats-w);
		pointer-events: auto;
	}
	.p-mainVisual .homeStats__item {
		padding: 1.4em 0.6em;
		border: 0;
	}
	/* 細い十字の区切り線（左列の右・上段の下） */
	.p-mainVisual .homeStats__item:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, .28);
	}
	.p-mainVisual .homeStats__item:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, .28);
	}
	.p-mainVisual .homeStats__label {
		color: rgba(255, 255, 255, .78);
	}
	.p-mainVisual .homeStats__value {
		color: #fff;
		text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
	}
	.p-mainVisual .homeStats__num {
		font-size: clamp(2.4rem, 3.2vw, 3.2rem);
	}
}

/* ヘッダー右上の電話番号（parts/header/header_contents.php で出力）
   .pc_ が付いているため 960px 未満では非表示になります
   番号は濃紺の角ボタンにして、受付時間をその下に添えます */
.c-headTel {
	display: flex;
	flex-direction: column;
	/* SWELL の -series レイアウトは .l-header__inner が align-items:stretch のため、
	   ブロック内で上下中央寄せにする */
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	padding-left: 1.5em;
	line-height: 1.3;
	text-align: center;
}

.c-headTel__num {
	display: inline-flex;
	align-items: center;
	padding: .55em 1.3em;
	border-radius: var(--amano-radius);
	background: var(--amano-ink);
	color: var(--amano-btn-text);
	font-family: var(--amano-font-en);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .04em;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .25s;
}

.c-headTel__num:hover,
.c-headTel__num:focus-visible {
	background: var(--amano-ink-hover);
	color: var(--amano-btn-text);
	opacity: 1;
}

.c-headTel__icon {
	margin-right: .45em;
	font-size: .75em;
}

.c-headTel__label {
	margin-right: .25em;
	font-size: .68em;
	letter-spacing: .05em;
}

.c-headTel__time {
	display: block;
	margin-top: .45em;
	color: var(--amano-muted);
	font-size: 12px;
	white-space: nowrap;
}

/* 画面幅に余裕がない範囲では少し小さく */
@media screen and (min-width: 960px) and (max-width: 1200px) {
	.c-headTel {
		padding-left: 1em;
	}
	.c-headTel__num {
		padding: .5em 1.1em;
		font-size: 18px;
	}
	.c-headTel__time {
		font-size: 11px;
	}
}

/* ---------- ヘッダーのグローバルナビ（PC） ----------
   parts/header/header_contents.php でナビを .l-header__inner の外に出し、
   ロゴ・電話番号の行の下に横幅いっぱいのバーとして中央寄せで表示します。
   960px 未満は親テーマ側で .l-header__gnav が非表示になります。 */
.l-header__inner > .c-headTel {
	margin-left: auto;
}

/* 白地に上下 1px の線、濃紺の文字。ホバーしたメニューと今いるページのメニューには差し色の細い下線を引きます。
   「今いるページ」は WordPress が付ける current-menu-item / current-menu-ancestor（子メニューのページにいる親）
   と、SWELL の JS が URL 一致で付ける -current で判定します。 */
@media screen and (min-width: 960px) {
	.l-header__gnavBar {
		margin-left: 0;
		border-top: 1px solid var(--amano-line);
		border-bottom: 1px solid var(--amano-line);
		background-color: #fff;
		color: var(--amano-gnav-text);
	}
	.l-header__gnavBar .c-gnav {
		justify-content: center;
		height: auto;
	}
	.l-header__gnavBar .c-gnav > .menu-item > a {
		padding: 16px clamp(16px, 2.4vw, 40px);
		color: var(--amano-gnav-text);
		transition: color .25s;
	}
	.l-header__gnavBar .c-gnav > .menu-item > a .ttl {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: .08em;
	}
	/* 下線（SWELL のホバーエフェクトの設定に関係なく、この見た目にそろえます） */
	.l-header__gnavBar .c-gnav > .menu-item > a::after {
		display: block;
		top: auto;
		right: auto;
		bottom: 9px;
		left: 50%;
		width: 0;
		height: 1px;
		border: 0;
		background: var(--amano-sky);
		opacity: 1;
		transform: translateX(-50%);
		transition: width .25s ease;
	}
	.l-header__gnavBar .c-gnav > .menu-item:hover > a::after,
	.l-header__gnavBar .c-gnav > .menu-item.-current > a::after,
	.l-header__gnavBar .c-gnav > .menu-item.current-menu-item > a::after,
	.l-header__gnavBar .c-gnav > .menu-item.current-menu-ancestor > a::after {
		width: 1.8em;
	}
	.l-header__gnavBar .c-gnav > .menu-item.-current > a .ttl,
	.l-header__gnavBar .c-gnav > .menu-item.current-menu-item > a .ttl,
	.l-header__gnavBar .c-gnav > .menu-item.current-menu-ancestor > a .ttl {
		font-weight: 700;
	}
}

/* ---------- スマホのメニュー（ハンバーガーで開くメニュー） ----------
   親テーマの parts/header/sp_menu.php が出す .c-spnav を階層ごとに色分けします。
   ・第1階層：白地・太字
   ・第2階層：薄グレーの背景
   ・第3階層：さらに一段濃いグレー
   線はすべて 1px にそろえています。 */
.p-spMenu .c-spnav {
	--spnav-lv2-bg: var(--amano-gray);
	--spnav-lv3-bg: color-mix(in srgb, var(--amano-ink) 6%, var(--amano-gray));
	--spnav-line: var(--amano-line);
}
.p-spMenu .c-spnav > .menu-item > a {
	padding-left: 1em;
	border-bottom-color: var(--spnav-line);
	background-color: #fff;
	color: var(--amano-spnav-text);
	font-weight: 700;
}
.p-spMenu .c-spnav .sub-menu a {
	border-bottom-color: var(--spnav-line);
	background-color: var(--spnav-lv2-bg);
	color: var(--amano-spnav-text);
	font-weight: 400;
}
.p-spMenu .c-spnav .sub-menu .sub-menu a {
	background-color: var(--spnav-lv3-bg);
	color: var(--amano-spnav-text);
}
/* 子メニューの開閉ボタン（アコーディオン設定時） */
.p-spMenu .c-spnav .c-submenuToggleBtn {
	color: var(--amano-ink);
}

/* ---------- 取扱メーカーのテキストカード（ショートコード [amano_maker_cards]） ----------
   出力は inc/maker-cards.php。各社のコーポレートカラー（--maker-color）をカード全体の背景に使い、
   文字は読みやすいよう白で統一します（色は白文字とのコントラストが取れる濃い色にしてください）。 */
.makerCards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
	gap: 1em;
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
}
.makerCard {
	--maker-color: #555;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 7.5em;
	margin: 0;
	padding: 1.3em 1em 1.1em;
	overflow: hidden;
	border-radius: var(--amano-radius);
	background: var(--maker-color);
	color: #fff;
	text-align: center;
	line-height: 1.4;
}
.makerCard__name {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.makerCard__sub {
	display: block;
	margin-top: .3em;
	color: #fff;
	font-size: .78rem;
	line-height: 1.5;
}
.makerCard__en {
	display: block;
	margin-top: .55em;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: none;
}
/* 記事本文（.post_content）内では ul / li の既定スタイル（左余白・行頭マーク）を打ち消す */
.post_content .makerCards {
	padding-left: 0;
}
.post_content .makerCard,
.makerCard {
	list-style: none;
}
@media (max-width: 599px) {
	.makerCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .7em;
	}
	.makerCard {
		min-height: 6.5em;
		padding: 1.1em .6em .9em;
	}
	.makerCard__name {
		font-size: .95rem;
	}
	.makerCard__sub {
		font-size: .7rem;
	}
	.makerCard__en {
		font-size: .66rem;
		letter-spacing: .08em;
	}
}

/* ---------- 特定自主検査ページ（ブロックエディタのカスタムHTMLで使うパーツ） ----------
   マークアップは固定ページ側（カスタムHTMLブロック）に置き、見た目だけここで持ちます。
   料金カード .inspPrice / メリット .inspMerits / 割引 .inspDiscount / 料金表 .inspTable、
   検査の流れはトップの .usageGuide に --inline を足して本文内で使います。 */

/* 料金カード：薄グレー地に 1px の枠、左に料金、右に「検査を依頼する」ボタン */
.inspPrice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em 1.5em;
	margin: 1.5em 0 2em;
	padding: 1.3em 1.5em;
	border: 1px solid var(--amano-line);
	border-radius: var(--amano-radius);
	background: var(--amano-gray);
}
.inspPrice__body {
	flex: 1 1 18em;
	min-width: 0;
	line-height: 1.4;
}
.inspPrice__label {
	display: block;
	margin-bottom: .5em;
	color: var(--amano-sky);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .08em;
}
.inspPrice__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .15em;
	color: var(--amano-ink);
	font-weight: 700;
}
.inspPrice__lead {
	margin-right: .3em;
	font-size: 1.1rem;
}
.inspPrice__num {
	color: #E53935;
	font-family: var(--amano-font-en);
	font-size: clamp(2.2rem, 4.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}
.inspPrice__unit {
	color: var(--amano-ink);
	font-size: 1rem;
}
.inspPrice__tax {
	margin-left: .3em;
	color: #5b6672;
	font-size: .8rem;
	font-weight: 400;
}
.inspPrice__note {
	display: block;
	margin-top: .5em;
	color: #5b6672;
	font-size: .78rem;
	line-height: 1.6;
}
.inspPrice__btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 1.4em;
	min-width: 14em;
	padding: 1em 1.4em 1em 1.8em;
	border-radius: var(--amano-radius);
	background: var(--amano-ink);
	color: var(--amano-btn-text);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	transition: background-color .25s;
}
.inspPrice__btn::after {
	content: "\2192";
	display: inline-block;
	font-family: var(--amano-font-en);
	font-weight: 300;
	transition: transform .25s ease;
}
.inspPrice__btn:hover,
.inspPrice__btn:focus-visible {
	background: var(--amano-ink-hover);
	color: var(--amano-btn-text);
}
.inspPrice__btn:hover::after,
.inspPrice__btn:focus-visible::after {
	transform: translateX(.3em);
}

/* メリット3点：イラスト＋見出し＋補足のカード */
.post_content .inspMerits,
.inspMerits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1em;
	margin: 1.2em 0 2em;
	padding: 0;
	list-style: none;
}
.post_content .inspMerit,
.inspMerit {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 1.6em 1.3em 1.4em;
	border: 1px solid var(--amano-line);
	border-radius: var(--amano-radius);
	background: #fff;
	list-style: none;
	text-align: center;
}
.inspMerit__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 0 0 .8em;
	border-radius: var(--amano-radius);
	background: var(--amano-gray);
}
.inspMerit__figure img {
	display: block;
	width: 68px;
	height: 46px;
}
.inspMerit__title {
	display: block;
	margin-bottom: .4em;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
}
.inspMerit__text {
	display: block;
	font-size: .88rem;
	line-height: 1.7;
	text-align: left;
}

/* 割引条件：薄グレーの帯に「5台以上 → 10%OFF」「10台以上 → 特別価格」を 1px 枠のカードで */
.inspDiscount {
	margin: 1.5em 0 2em;
	padding: 1.3em 1.4em 1.1em;
	border-radius: var(--amano-radius);
	background: var(--amano-gray);
}
.inspDiscount__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .8em;
	margin-bottom: .9em;
}
.inspDiscount__badge {
	display: inline-block;
	padding: .3em .9em;
	border-radius: var(--amano-radius);
	background: var(--amano-ink);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .08em;
}
.inspDiscount__lead {
	font-weight: 700;
}
.post_content .inspDiscount__list,
.inspDiscount__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.post_content .inspDiscount__item,
.inspDiscount__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0;
	padding: .9em 1.1em;
	border: 1px solid var(--amano-line);
	border-radius: var(--amano-radius);
	background: #fff;
	list-style: none;
	line-height: 1.4;
}
.inspDiscount__cond {
	flex: 0 0 auto;
	padding: .35em .7em;
	border-radius: var(--amano-radius);
	background: var(--amano-ink);
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	white-space: nowrap;
}
.inspDiscount__benefit {
	font-size: .95rem;
}
.inspDiscount__benefit strong {
	color: #DD2C00;
	font-size: 1.3em;
}
.post_content .inspDiscount__note,
.inspDiscount__note {
	margin: .8em 0 0;
	color: #5b6672;
	font-size: .8rem;
}

/* 料金表：空セルは「—」を入れて中央、行ホバーで薄グレー */
.inspTable td {
	font-variant-numeric: tabular-nums;
}
.inspTable td:empty::before {
	content: "\2014";
	color: #9aa5b1;
}
.inspTable tbody tr:hover th,
.inspTable tbody tr:hover td {
	background-color: var(--amano-gray);
}

@media (max-width: 767px) {
	.inspPrice {
		padding: 1.1em 1.1em 1.2em;
	}
	.inspPrice__btn {
		width: 100%;
	}
	.inspMerits,
	.post_content .inspMerits {
		grid-template-columns: minmax(0, 1fr);
		gap: .8em;
	}
	/* スマホは「イラスト｜見出し＋本文」の横並び（イラストは2行ぶんにまたがる） */
	.inspMerit,
	.post_content .inspMerit {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: .9em;
		row-gap: .2em;
		align-items: start;
		padding: 1em 1em 1em .9em;
		text-align: left;
	}
	.inspMerit__figure {
		grid-row: 1 / span 2;
		width: 64px;
		height: 64px;
		margin: 0;
	}
	.inspMerit__title {
		margin-bottom: 0;
	}
	.inspMerit__figure img {
		width: 46px;
		height: 31px;
	}
	.inspMerit__title {
		font-size: 1rem;
	}
	.inspDiscount__list,
	.post_content .inspDiscount__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Contact Form 7 のフォームグループの下余白 */
.cf7-form-group {
  margin-bottom: 1rem;
}
/* 「必須」は赤文字ではなく、濃紺の小さなバッジで見せる
   （フォーム本文の <span class="required">必須</span> を想定） */
.required {
  display: inline-block;
  margin-left: .5em;
  padding: .15em .55em;
  border-radius: var(--amano-radius);
  background: var(--amano-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  vertical-align: middle;
}

/* ラジオ・チェックボックスは文字を押しても選べる
   （フォーム本文のタグに use_label_element を指定しています） */
.wpcf7-list-item label {
  cursor: pointer;
}

/* フォームが画面幅からはみ出さないようにする

   CF7 の入力欄は size / cols の指定（既定は40文字ぶん）で幅が決まり、
   SWELL・CF7 のどちらも幅を抑えていないため、スマホでは入力欄が
   画面より広くなって右端が見切れます。
   親要素の幅を超えないようにし、padding・border も幅に含めます。 */
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* 入力欄の見た目：高さ48px前後・角丸は控えめ・1px の枠線・フォーカス時は差し色の枠
   （チェックボックス・ラジオ・送信ボタンは対象外） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  min-height: 48px;
  padding: .6em .9em;
  border: 1px solid #cfd4d9;
  border-radius: var(--amano-radius);
  background: #fff;
  color: #333;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.wpcf7 textarea {
  min-height: 8em;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  /* 入力中の欄が見分けやすいよう、濃いめの水色の枠を外側に出します（白地とのコントラスト比 約5.0） */
  outline: 2px solid color-mix(in srgb, var(--amano-sky) 70%, #000);
  outline-offset: 1px;
  border-color: var(--amano-sky);
}
/* 入力エラーの欄は赤い枠にして分かりやすく（上の入力欄の指定より詳細度を上げています） */
.wpcf7 .wpcf7-form-control.wpcf7-not-valid {
  border-color: #e0201b;
}

/* 送信ボタン：濃紺・白文字・幅300px以上・中央配置（角丸は控えめ・影なし） */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  display: block;
  min-width: 300px;
  max-width: 100%;
  margin: 1.5em auto 0;
  padding: .95em 2em;
  border: 0;
  border-radius: var(--amano-radius);
  background: var(--amano-ink);
  color: var(--amano-btn-text);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color .25s;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus-visible {
  background: var(--amano-ink-hover);
}
.wpcf7 input[type="submit"]:disabled,
.wpcf7 .wpcf7-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
/* 送信中のスピナーはボタンの下に中央で出す */
.wpcf7 .wpcf7-spinner {
  display: block;
  margin: .5em auto 0;
}

/* 入力欄の幅は親要素（.cf7-form-group）が基準になるので、
   その入れ物にも幅の上限を持たせておく */
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  max-width: 100%;
}

/* 単位付きの入力欄（<span class="input-unit">[text price] 円</span>）
   入れ物が幅いっぱいになって単位が改行されないよう、入力欄の右に単位を並べる */
.wpcf7 .input-unit {
  display: flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
}
.wpcf7 .input-unit .wpcf7-form-control-wrap {
  flex: 0 1 auto;
  min-width: 0;
}

/* ラジオ・チェックボックスの並び
   CF7 の既定は「項目の左に 1em」なので、右に付け替えて
   行頭がずれたり、右端がはみ出したりしないようにする */
.wpcf7-list-item {
  margin: 0 1em 0 0;
}

/* スマホでは入力欄を画面幅いっぱいに揃える
   （郵便番号など短い欄はそのままの幅を保ちます） */
@media (max-width: 599px) {
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],
  .wpcf7 input[type="number"],
  .wpcf7 input[type="date"],
  .wpcf7 select,
  .wpcf7 textarea {
    width: 100%;
  }

  /* 単位付きの欄は、単位を除いた残りの幅いっぱいに広げる */
  .wpcf7 .input-unit .wpcf7-form-control-wrap {
    flex: 1 1 auto;
  }

  .wpcf7 input.wpcf7-validates-as-zip,
  .wpcf7 input[size="1"],
  .wpcf7 input[size="2"],
  .wpcf7 input[size="3"],
  .wpcf7 input[size="4"],
  .wpcf7 input[size="5"],
  .wpcf7 input[size="6"],
  .wpcf7 input[size="7"],
  .wpcf7 input[size="8"],
  .wpcf7 input[size="9"],
  .wpcf7 input[size="10"] {
    width: auto;
  }
}

/* ---------- トップページのセクション背景 ----------
   「中古フォークリフトを探す」（assets/used.css・グレー）→ サービス一覧（白）→ お悩み→相談（濃紺の帯）
   → 選ばれる3つの理由（グレー）→ お知らせ（白）の順に、白とグレーを交互に敷き、
   濃紺の帯は「相談」とフッター上の問い合わせの2か所だけにしています。
   帯が途切れないよう、セクション間の余白は 0 にし、代わりに各セクション内の上下 padding（--amano-sec-pad）で間隔を取ります。
   コンテンツ幅の中にあるセクションは ::before でブラウザ横幅いっぱいに敷きます。 */
.home:not(.paged) .l-content {
	/* 「中古フォークリフトを探す」の帯とサービス一覧の帯の間に白い隙間を作らない */
	padding-top: 0;
}
.serviceBanners,
.consult,
.reasons {
	position: relative;
	z-index: 0;
	margin: 0;
	padding: var(--amano-sec-pad) 0;
}
.serviceBanners::before,
.consult::before,
.reasons::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
}
.serviceBanners::before {
	background: #fff;
}
.consult::before {
	background: var(--amano-ink);
}
.reasons {
	/* 最後の帯なので、下の「お知らせ」との間だけ余白を空けます */
	margin-bottom: var(--amano-sec-pad);
}
.reasons::before {
	background: var(--amano-gray);
}

/* ---------- トップページのサービスバナー（お知らせの上に 2 列で表示） ----------
   画像は template-parts/service-banners.php の $banners に設定します。 */
.serviceBanners__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.serviceBanners__item {
	margin: 0;
}
.serviceBanner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--amano-line);
	border-radius: var(--amano-radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
}
.serviceBanner__media {
	position: relative;
	display: block;
	/* 画像が入るまでの枠。画像の縦横比もこれに合わせて切り抜きます */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--amano-gray);
}
.serviceBanner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
a.serviceBanner:hover .serviceBanner__img {
	transform: scale(1.03);
}
/* 画像が未設定のときのプレースホルダー */
.serviceBanner__noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9aa5b1;
	font-size: .8rem;
	letter-spacing: .08em;
}
/* タイトル：写真の下部に暗いグラデーションを敷いて白文字、右端に「→」 */
.serviceBanner__title {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 2.4em 1.4em 1.1em;
	background: linear-gradient(to top, color-mix(in srgb, var(--amano-ink) 80%, transparent), transparent);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
}
/* 写真の下：ひとことと取扱品目のタグ */
.serviceBanner__body {
	display: flex;
	flex-direction: column;
	gap: .9em;
	padding: 1.1em 1.4em 1.3em;
}
.serviceBanner__lead {
	color: var(--amano-muted);
	font-size: .9rem;
	line-height: 1.7;
}
.serviceBanner__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45em;
}
.serviceBanner__tag {
	padding: .3em .8em;
	border: 1px solid var(--amano-line);
	border-radius: 999px;
	background: var(--amano-gray);
	color: var(--amano-ink);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.serviceBanner__more {
	color: var(--amano-muted);
	font-size: .8rem;
}
@media (max-width: 599px) {
	.serviceBanners__list {
		/* タグが入って縦に長くなるので、スマホでは 1 列にします */
		grid-template-columns: minmax(0, 1fr);
		gap: 1.2em;
	}
	.serviceBanner__title {
		padding: 1.6em 1em .8em;
		font-size: 1rem;
	}
	.serviceBanner__body {
		padding: .9em 1em 1.1em;
	}
	.serviceBanner__lead {
		font-size: .85rem;
	}
	.serviceBanner__tag,
	.serviceBanner__more {
		font-size: .75rem;
	}
}

/* ---------- トップページのご利用ガイド（注文から納品までの流れ） ----------
   文言は template-parts/usage-guide.php の $steps で編集します。 */
.usageGuide {
	position: relative;
	/* 疑似要素の背景をこのセクション内に閉じ込める（親の背景に隠れないように） */
	z-index: 0;
	margin: 0 0 2.5em;
	padding: 2.5em 0;
}
/* 背景画像：ブラウザ横幅いっぱいに敷く（画像は加工せず CSS で濃紺にしています）
   ・色はカラー設定のメインカラー（濃紺）に追従します
   ・写真をもっと見せたいなら gradient の濃さ（%）を下げる */
.usageGuide::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background-color: var(--amano-ink);
	background-image:
		linear-gradient(color-mix(in srgb, var(--amano-ink) 70%, transparent), color-mix(in srgb, var(--amano-ink) 70%, transparent)),
		url("/wp-content/uploads/2026/08/forklift.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* 画像をベースの濃い青と乗算合成 → 画像を編集せずに青一色のトーンになります */
	background-blend-mode: normal, multiply;
}
/* 見出し・リード文（背景が濃い青なので白文字） */
.usageGuide__heading {
	position: relative; /* 背景より前面に */
	margin: 0 0 .3em;
	color: #fff;
	font-size: clamp(1.25rem, 3.2vw, 1.6rem);
	line-height: 1.4;
	letter-spacing: .06em;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.usageGuide__lead {
	position: relative; /* 背景より前面に */
	margin: 0 0 1.8em;
	color: rgba(255, 255, 255, .85);
	font-size: .9rem;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.usageGuide__list {
	position: relative; /* 背景より前面に */
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 各ステップは白いカード。長めの本文でも読みやすいように背景から浮かせています */
.usageGuide__item {
	position: relative;
	display: flex;
	gap: 1em;
	align-items: flex-start;
	margin: 0 0 2.2em;
	padding: 1.2em 1.4em;
	border-radius: var(--amano-radius);
	background: #fff;
}
/* カードとカードの間に下向きの矢印を出して流れを示す（最後の項目には出さない） */
.usageGuide__item::before {
	content: "";
	position: absolute;
	bottom: -1.5em;
	left: 50%;
	width: 0;
	height: 0;
	border-top: .8em solid rgba(255, 255, 255, .75);
	border-right: .7em solid transparent;
	border-left: .7em solid transparent;
	transform: translateX(-50%);
}
.usageGuide__item:last-child {
	margin-bottom: 0;
}
.usageGuide__item:last-child::before {
	display: none;
}
/* ①～⑤の番号 */
.usageGuide__num {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.7em;
	height: 2.7em;
	border-radius: var(--amano-radius);
	background: var(--amano-ink);
	color: #fff;
	font-family: var(--amano-font-en);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1;
}
.usageGuide__body {
	flex: 1 1 auto;
	padding-top: .25em;
}
.usageGuide__title {
	margin: 0 0 .4em;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
}
/* 画面には出さず、読み上げソフトにだけ伝えるテキスト（番号の読み上げ用） */
.u-screenReaderText {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.usageGuide__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.8;
}
.usageGuide__note {
	margin: .4em 0 0;
	color: #5b6672;
	font-size: .82rem;
	line-height: 1.7;
}
@media (max-width: 599px) {
	.usageGuide__lead {
		margin-bottom: 1.4em;
		font-size: .85rem;
	}
	.usageGuide {
		padding: 1.6em 0;
	}
	.usageGuide__item {
		gap: .7em;
		margin-bottom: 1.8em;
		padding: 1em 1.1em;
	}
	.usageGuide__item::before {
		bottom: -1.25em;
		border-top-width: .65em;
		border-right-width: .6em;
		border-left-width: .6em;
	}
	.usageGuide__num {
		width: 2.3em;
		height: 2.3em;
		font-size: 1rem;
	}
	.usageGuide__title {
		font-size: 1rem;
	}
	.usageGuide__text {
		font-size: .88rem;
		line-height: 1.75;
	}
}

/* ---------- トップページ：お悩み→相談（サービス一覧と「選ばれる3つの理由」の間） ----------
   文言は template-parts/consult.php で編集します。
   濃紺の帯（「トップページのセクション背景」で指定）に、左は見出し＋お悩みのリスト、
   右はリード文と「WEBで相談」「電話で相談」の2ボタン。スマホは縦積みです。 */
.consult {
	color: var(--amano-contact-text);
}
.consult__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 2.4em 4em;
	align-items: end;
}
.consult .secHead {
	margin-bottom: 1.8em;
}
/* お悩み：上下 1px の線で区切ったシンプルなリスト */
.consult__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	list-style: none;
}
.consult__item {
	display: flex;
	align-items: baseline;
	gap: 1em;
	margin: 0;
	padding: 1.05em 0;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
}
.consult__item::before {
	content: "Q.";
	flex: 0 0 auto;
	color: var(--amano-sky);
	font-family: var(--amano-font-en);
	font-size: .9rem;
	font-weight: 500;
}
.consult__lead {
	margin: 0 0 1.6em;
	font-size: .95rem;
	line-height: 1.9;
	opacity: .85;
}
.consult__actions {
	display: flex;
	flex-direction: column;
	gap: .8em;
}
.consult__btn {
	width: 100%;
}
.consult__btnText {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2em 1em;
}
/* 電話ボタンの番号は欧文フォントで */
.consult__btnSub {
	font-family: var(--amano-font-en);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .04em;
}
.consult__note {
	margin: 1em 0 0;
	font-size: .8rem;
	opacity: .7;
}
@media (max-width: 767px) {
	.consult__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2em;
	}
	.consult__item {
		padding: .9em 0;
		font-size: 1rem;
	}
	.consult__lead {
		font-size: .88rem;
	}
}

/* ---------- 特自検とは ---------- */
.inspReasons {
	list-style: none;
	margin: 1.5em 0 2em;
	padding: 0;
	display: grid;
	gap: 12px;
}
.inspReason {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--amano-line);
	border-radius: var(--amano-radius);
}
.inspReason__num {
	flex-shrink: 0;
	font-size: 1.8em;
	font-weight: 300;
	line-height: 1;
	color: var(--amano-ink);
	font-family: var(--amano-font-en);
}
.inspReason__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.inspReason__title {
	font-weight: 700;
	font-size: 1.05em;
}
.inspReason__text {
	font-size: .95em;
	line-height: 1.8;
}

/* ---------- トップページ：選ばれる3つの理由（「お悩み→相談」とお知らせの間） ----------
   文言・写真は template-parts/reasons.php で編集します。
   写真＋細字の大きな番号「01」＋見出し＋本文を、PC は3列、スマホは1列で並べます。
   カードの枠や影は付けず、写真と余白で区切ります。 */
.reasons__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.reasons__item {
	margin: 0;
	padding: 0;
}
/* 写真：4:3 の枠に切り抜き。写真が入るまでは「写真準備中」の枠を表示 */
.reasons__figure {
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0 0 1.6em;
	overflow: hidden;
	border-radius: var(--amano-radius);
	background: #e6e9ec;
}
.reasons__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.reasons__noimg {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #9aa5b1;
	font-size: .8rem;
	line-height: 1.6;
	letter-spacing: .08em;
	text-align: center;
}
.reasons__noimg small {
	font-size: .72rem;
}
/* 番号：欧文フォントの細字で大きく、下に差し色の短い線 */
.reasons__num {
	display: block;
	margin-bottom: .5em;
	color: var(--amano-ink);
	font-family: var(--amano-font-en);
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
}
.reasons__num::after {
	content: "";
	display: block;
	width: 1.6rem;
	height: 1px;
	margin-top: .9rem;
	background: var(--amano-sky);
}
.reasons__title {
	margin: 0 0 .8em;
	color: var(--amano-ink);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
}
.reasons__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.9;
}
.reasons__note {
	margin: .8em 0 0;
	color: var(--amano-muted);
	font-size: .78rem;
	line-height: 1.7;
}
@media (max-width: 767px) {
	.reasons__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.8em;
	}
	.reasons__figure {
		margin-bottom: 1.2em;
	}
	.reasons__num {
		font-size: 2.6rem;
	}
	.reasons__title {
		font-size: 1.1rem;
	}
	.reasons__text {
		font-size: .88rem;
	}
}

/* トップページ「お知らせ」の見出し */
.homeNewsHead {
	margin-bottom: 1.8em;
}

/* ---------- トップページ「お知らせ」の横スクロール ----------
   parts/home_content.php で .homeNewsScroll に包み、カード型で出力しています。
   左右の矢印ボタンは assets/home-news-scroll.js で追加します。 */
.homeNewsScroll .p-postList.p-postList {
	flex-wrap: nowrap;
	margin-right: 0;
	margin-left: 0;
	padding-bottom: .8em;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}
.homeNewsScroll .p-postList.p-postList .p-postList__item {
	/* スマホは次のカードが少し見える幅にして、横に続くことが分かるようにします */
	flex: 0 0 72%;
	width: auto;
	margin: 0;
	padding: 0 .5em;
	scroll-snap-align: start;
}
@media screen and (min-width: 600px) {
	.homeNewsScroll .p-postList.p-postList .p-postList__item {
		flex-basis: 40%;
	}
}
@media screen and (min-width: 960px) {
	.homeNewsScroll .p-postList.p-postList .p-postList__item {
		flex-basis: 25%;
	}
}
.homeNewsScroll .p-postList::-webkit-scrollbar {
	height: 6px;
}
.homeNewsScroll .p-postList::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(0, 0, 0, .2);
}

/* 左右の矢印ボタン（JS で .homeNewsScroll__track の中に追加） */
.homeNewsScroll__track {
	position: relative;
}
.homeNewsScroll__btn {
	display: none;
}
@media screen and (min-width: 960px) {
	.homeNewsScroll__btn {
		display: flex;
		position: absolute;
		top: 30%;
		z-index: 2;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--amano-line);
		border-radius: var(--amano-radius);
		background: #fff;
		color: var(--amano-ink);
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
		transform: translateY(-50%);
		transition: opacity .2s;
	}
	.homeNewsScroll__btn.-prev {
		left: -12px;
	}
	.homeNewsScroll__btn.-next {
		right: -12px;
	}
	.homeNewsScroll__btn[disabled] {
		opacity: 0;
		pointer-events: none;
	}
}

/* 追従ヘッダー（PC）にも電話番号を出す
   .l-fixHeader__inner は flex なので、グローバルナビを右寄せしてその右隣に置きます */
.l-fixHeader .c-gnavWrap {
	margin-left: auto;
}
.l-fixHeader .c-headTel__num {
	padding: .35em 1em;
	font-size: 18px;
}
.l-fixHeader .c-headTel__time {
	font-size: 11px;
}

/* ---------- フッター上の問い合わせバナー（全ページ共通） ----------
   parts/footer/footer_contents.php から template-parts/contact-banner.php を読み込みます。
   <footer> の中に置いているので横幅いっぱいになり、背景は濃紺です。
   PC は左に見出し・リード文、右に電話番号とフォームのボタン。スマホは縦積み。 */
.contactBanner {
	padding: calc(var(--amano-sec-pad) * 1.1) 0;
	background: var(--amano-ink);
	color: var(--amano-contact-text);
}
.contactBanner__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 2.4em 4em;
	align-items: center;
}
.contactBanner .secHead {
	margin-bottom: 1.2em;
}
.contactBanner__lead {
	margin: 0;
	font-size: .95rem;
	line-height: 1.9;
	opacity: .85;
	/* 対応ブラウザでは文節単位で折り返す（「点検な／ど」のような切れ方を避ける） */
	word-break: auto-phrase;
}
.contactBanner__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.4em;
}
/* 電話番号：上下 1px の線で囲み、欧文フォントで大きく */
.contactBanner__tel {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: .3em 1em;
	padding: 1.1em 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	color: var(--amano-contact-text);
	line-height: 1.2;
	text-decoration: none;
}
.contactBanner__tel:hover,
.contactBanner__tel:focus-visible {
	color: var(--amano-contact-text);
	opacity: .85;
}
.contactBanner__telLabel {
	color: var(--amano-sky);
	font-family: var(--amano-font-en);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .24em;
}
.contactBanner__telNum {
	font-family: var(--amano-font-en);
	font-size: clamp(1.9rem, 3.6vw, 2.5rem);
	font-weight: 300;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.contactBanner__telTime {
	grid-column: 2;
	font-size: .8rem;
	opacity: .75;
}
.contactBanner__btn {
	width: 100%;
}
@media (max-width: 767px) {
	.contactBanner__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.8em;
	}
	.contactBanner__lead {
		font-size: .88rem;
	}
	.contactBanner__tel {
		grid-template-columns: minmax(0, 1fr);
	}
	.contactBanner__telTime {
		grid-column: auto;
	}
}

/* ---------- スマホ用の固定お問い合わせバー（画面下部に追従） ---------- */
.c-fixContact {
	display: none;
}
@media screen and (max-width: 959px) {
	.c-fixContact {
		display: flex;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
		align-items: center;
		/* 電話番号とボタンをひとかたまりで中央に置きます */
		justify-content: center;
		gap: .8em;
		padding: .5em .8em calc(.5em + env(safe-area-inset-bottom));
		border-top: 1px solid var(--amano-line);
		background: rgba(255, 255, 255, .96);
	}
	.c-fixContact__tel {
		/* 余った幅を占有しないようにして、ボタンを電話番号のすぐ隣に並べます */
		flex: 0 1 auto;
		min-width: 0;
		color: inherit;
		text-decoration: none;
		text-align: center;
		line-height: 1.25;
	}
	.c-fixContact__num {
		display: block;
		color: var(--amano-ink);
		font-family: var(--amano-font-en);
		font-size: 20px;
		font-weight: 500;
		letter-spacing: .02em;
		white-space: nowrap;
	}
	.c-fixContact__icon {
		margin-right: .2em;
		font-size: .8em;
	}
	.c-fixContact__time {
		display: block;
		margin-top: .1em;
		font-size: 12px;
		white-space: nowrap;
	}
	/* 幅の狭い端末（360px未満）ではバーからはみ出さないよう少し小さく */
	@media (max-width: 359px) {
		.c-fixContact__time {
			font-size: 11px;
		}
	}
	/* アイコンのみのボタン。文字が無いぶん大きめに見せます */
	.c-fixContact__btn {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		padding: .5em .8em;
		border-radius: var(--amano-radius);
		background: var(--amano-ink);
		color: #fff;
		font-size: 1rem;
		line-height: 1;
		text-decoration: none;
		transition: background-color .25s;
	}
	.c-fixContact__btn:hover,
	.c-fixContact__btn:focus-visible {
		background: var(--amano-ink-hover);
		color: #fff;
	}
	.c-fixContact__btn i {
		font-size: 1.5em;
	}
	/* LINE はブランドカラーで */
	.c-fixContact__btn--line {
		background: #06C755;
	}

	/* 固定バーの分だけフッターに余白を足して、最後の要素が隠れないようにします */
	.l-footer {
		padding-bottom: 72px;
	}
	/* ページトップボタンは固定バーの上へ逃がします */
	.p-fixBtnWrap {
		bottom: 84px;
	}
	/* SWELL の「固定フッターメニュー」を使っている場合はその上に重ねます */
	body:has(#fix_bottom_menu) .c-fixContact {
		bottom: 60px;
	}
	body:has(#fix_bottom_menu) .l-footer {
		padding-bottom: 132px;
	}
	body:has(#fix_bottom_menu) .p-fixBtnWrap {
		bottom: 144px;
	}
}

/* 画面が狭い端末では電話番号を少し小さくしてボタンの幅を確保します */
@media screen and (max-width: 379px) {
	.c-fixContact {
		gap: 1.5em;
		padding-right: .5em;
		padding-left: .5em;
	}
	.c-fixContact__num {
		font-size: 17px;
	}
	.c-fixContact__btn {
		padding: .5em .6em;
		font-size: 1.1rem;
	}
}

/* 中央揃えにした要素（表のセルなど）は上下も中央に揃えます */
:root .has-text-align-center {
	vertical-align: middle;
}

/* レンタルページ（/rental/）のタイトルエリア右側の料金カード（parts/top_title_area.php）
   タイトル（＋抜粋文）を左列、カードを右列に置きます */
#top_title_area:has(.c-rentalPriceCard) .l-topTitleArea__body {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 1.5em;
}
.c-rentalPriceCard {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-right: 8em; /* 右端から少し内側に寄せます */
	padding: 1em 1.6em;
	border-radius: var(--amano-radius);
	background: #fff;
	color: var(--amano-ink);
	text-align: center;
	text-shadow: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	line-height: 1.3;
}
.c-rentalPriceCard__label {
	display: block;
	margin-bottom: .2em;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .05em;
}
.c-rentalPriceCard__price {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
}
.c-rentalPriceCard__num {
	margin-right: .05em;
	color: #E53935;
	font-family: var(--amano-font-en, sans-serif);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
}
.c-rentalPriceCard__price small {
	font-size: .8rem;
	font-weight: 400;
}

/* スマホではタイトルの下に回します */
@media screen and (max-width: 599px) {
	#top_title_area:has(.c-rentalPriceCard) .l-topTitleArea__body {
		grid-template-columns: 1fr;
		row-gap: 1em;
	}
	.c-rentalPriceCard {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-right: 0;
		padding: .8em 1.2em;
	}
	.c-rentalPriceCard__num {
		font-size: 2.1rem;
	}
}

/* ==========================================================================
   投稿のシェアボタン：Instagram（parts/single/share_btns.php）
   ========================================================================== */
.c-shareBtns__item.-instagram {
	position: relative;
	color: #e1306c;
}
/* <button> は <a> と違って幅いっぱいに広がらないため（URLコピーボタンと同じ指定） */
.js-shareInstagram {
	width: 100%;
}
/* PC でURLをコピーしたときの「URLをコピーしました！」 */
.js-shareInstagram.-done + .c-copyedPoppup {
	opacity: 1;
	visibility: visible;
}