@charset "UTF-8";
/* ==========================================================================
   清水ピアノ配送センター 本番テーマ スタイル

   採用デザイン：design-comparison/client-final-v3/01-大きな写真バナー型（案1）
   このファイルは案1の CSS を WordPress 用に移植したもの。
   クラス名にはすべて sp- を付け、親テーマ Cocoon のクラスと衝突させない。

   色の役割（案1から変更しないこと）
     白        … サイト全体のベース
     ブルー    … 会社の色。面・見出し・番号・罫
     オレンジ  … 電話と問い合わせだけ
     チャコール… 本文の文字とフッター
     レッド    … トラックの細い赤ラインだけ（文字・面には使わない）
   黒を主体にしない。カードを大量に並べない。

   清水ピアノのデザイン言語（v0.4 で整理。詳しくは docs/08-デザインルール.md）
     1. トラックの帯 … 実物のトラック側面と同じ「青い帯＋白いすき間＋細い赤ライン」。
                      ヘッダー上端・トップの写真の下・ページ見出しの下・CTA の下だけに使う。
     2. 大きな番号   … 「01 / PIANO TRANSPORT」。正式ロゴの EXPRESS と同じ斜体の太字。
     3. 写真の強弱   … 全幅／左右交互／縦長／大＋小／パネルとの重なり を場所で使い分ける。
     4. 英字ラベル   … SHIMIZU PIANO EXPRESS はファーストビューと CTA の 2 か所だけ。

   body クラスの使い分け
     .sp-site   … 全ページ。専用ヘッダー／フッターを使う土台
     .sp-layout … 自前テンプレートで本文領域まで組んでいるページ
                  （トップ・固定ページ・作業事例）。Cocoon の記事枠を打ち消す
     .sp-front  … トップページ
     .sp-lower  … トップページ以外の自前テンプレートページ
   通常の投稿・検索結果・404 は .sp-layout が付かないため、
   Cocoon の記事レイアウトのまま、ヘッダーとフッターだけが共通になる。

   目次
     1. 変数 / 基本
     2. Cocoon レイアウト調整（全幅化・専用ヘッダー／フッター）
     3. 共通パーツ（見出し・ボタン・リンク・テーブル）
     4. 専用ヘッダー
     5. トップページ各セクション
     6. 専用フッター
     7. 固定ページ用（.sp-page）
     8. モバイル問い合わせバー
     9. レスポンシブ（トップページ）
    10. 印刷 / モーション設定
    11. サイト全体（下層ページ）用のパーツ
    12. 下層ページのレスポンシブ
   ========================================================================== */

/* ==========================================================================
   1. 変数 / 基本
   ========================================================================== */

:root {
	--sp-blue: #1b6fb8;        /* トラック車体のブルー */
	--sp-blue-deep: #0d4a86;   /* 見出し・青い面 */
	--sp-blue-navy: #0a3055;   /* 写真に重ねる濃紺 */
	--sp-sky: #1faeee;         /* 会社看板のブルー */
	--sp-sky-tint: #eaf6fd;
	--sp-orange: #e0691d;
	--sp-orange-ink: #b5501b;  /* 白文字とのコントラスト 5.09:1 */
	--sp-red: #d3242b;         /* トラックの細い赤ライン（線にだけ使う） */
	--sp-ph-line: #a9cbe8;     /* 撮影指示つき写真枠の点線 */

	/* 番号・英字ラベル：正式ロゴの EXPRESS に合わせた斜体の太字 */
	--sp-font-num: "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;

	--sp-ink: #23282d;
	--sp-ink-2: #4e565d;
	--sp-ink-3: #7d858c;
	--sp-line: #dde3e8;
	--sp-paper: #ffffff;
	--sp-paper-2: #f3f7fb;

	--sp-wrap: 1200px;
	--sp-gut: 28px;
	--sp-space: 108px;
}

/* v0.42.2：営業時間とは別の電話対応時間。指定色・太さを全表示で共通管理する。 */
.sp-phone-hours {
	color: #d12d1f !important;
	background: none;
	font-size: inherit;
	font-weight: 700 !important;
	line-height: inherit;
}

.sp-phone-hours-row,
.sp-phone-hours-row > th,
.sp-phone-hours-row > td,
.sp-phone-hours-row > dt,
.sp-phone-hours-row > dd {
	color: #d12d1f !important;
	font-weight: 700 !important;
}

/* 濃紺面では明るい赤にして、背景枠なしでも読めるようにする。 */
.sp-ft .sp-phone-hours,
.sp-cta .sp-phone-hours,
.sp-mobile-bar .sp-phone-hours,
.p27-contact-tel .sp-phone-hours {
	color: #ff9b91 !important;
}

.sp-ft__phone-hours {
	display: block;
	margin-top: 2px;
}

.sp-cta__phone-hours {
	margin: 7px 0 0;
	font-size: 14px;
}

.sp-mn__phone-hours {
	margin: -4px var(--sp-gut) 8px;
	font-size: 13.5px;
}

.sp-mobile-bar__hours {
	padding-block: 0;
	font-size: 11.5px;
}

.p27-contact-phone-hours {
	grid-column: 2;
	margin-top: 5px;
	font-size: 13px;
}

/* ==========================================================================
   v0.23.0 調律ページ・誌面設計の最終研磨
   既存の写真スロット／料金データ／分岐は変えず、調律ページ内だけを整える。
   ========================================================================== */
.sp-page-tuning {
	--sp-tune-rule: rgba(185, 144, 80, .42);
	--sp-tune-text: #2f4352;
}

.sp-page-tuning #sp-main .sp-hd2 {
	position: relative;
}

.sp-page-tuning #sp-main .sp-hd2 .sp-eyebrow {
	margin-bottom: 13px;
	color: #927044;
}

.sp-page-tuning #sp-main .sp-h2 {
	color: var(--sp-tune-navy);
}

/* FV：大きさを保ちながら、最初の一画面で要点と行動を読み取れる密度へ */
.sp-page-tuning .sp-tfv,
.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
.sp-page-tuning .sp-tfv__in {
	min-height: clamp(660px, 48vw, 710px);
}

.sp-page-tuning .sp-tfv__body {
	padding-top: clamp(62px, 5.8vw, 88px);
	padding-bottom: clamp(58px, 5.5vw, 82px);
}

.sp-page-tuning .sp-tfv__ttl {
	font-size: clamp(54px, 4.75vw, 72px);
}

.sp-page-tuning .sp-tfv__catch {
	margin-top: 29px;
	font-size: clamp(28px, 2.25vw, 36px);
}

.sp-page-tuning .sp-tfv__lead {
	margin-top: 17px;
	font-size: 16px;
	line-height: 1.95;
}

.sp-page-tuning .sp-tfv__points {
	margin-top: 25px;
}

.sp-page-tuning .sp-tfv__points li {
	min-height: 116px;
	padding: 17px 16px 15px;
}

.sp-page-tuning .sp-tfv__pdesc {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.65;
	letter-spacing: .01em;
	color: #687781;
}

.sp-page-tuning .sp-tfv__act {
	margin-top: 27px;
}

.sp-page-tuning .sp-tfv__shot {
	min-height: clamp(660px, 48vw, 710px);
}

.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
	min-height: clamp(660px, 48vw, 710px);
}

.sp-page-tuning .sp-tfv__shot:not(.sp-tfv__shot--deco)::before {
	position: absolute;
	z-index: 2;
	inset: 22px;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, .48);
	content: "";
}

/* お悩み帯：3つの情報群を罫線で関連づけ、視線を左から右へ流す */
.sp-page-tuning .sp-cases {
	padding-block: 58px;
}

.sp-page-tuning .sp-cases > .sp-wrap {
	grid-template-columns: 270px minmax(0, 1fr) 310px;
	gap: clamp(34px, 3.5vw, 54px);
}

.sp-page-tuning .sp-cases__head {
	padding-right: 34px;
}

.sp-page-tuning .sp-cases__list li {
	padding-block: 3px 11px;
	border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.sp-page-tuning .sp-cases__note {
	padding: 4px 0 4px 30px;
}

/* 01：文章を少し細く、写真を一段大きくして視線の往復を明確にする */
.sp-page-tuning .sp-tuning-editorial {
	grid-template-columns: minmax(430px, .78fr) minmax(0, 1.22fr);
	min-height: 700px;
}

.sp-page-tuning .sp-tuning-editorial__body {
	padding-top: 108px;
	padding-bottom: 102px;
}

.sp-page-tuning .sp-tuning-editorial__no {
	top: 48px;
	right: 38px;
	font-size: 138px;
}

.sp-page-tuning .sp-tuning-editorial .sp-h2 {
	font-size: clamp(35px, 2.95vw, 47px) !important;
	line-height: 1.68;
}

.sp-page-tuning .sp-tuning-editorial .sp-lede {
	font-size: 16px;
	line-height: 2.32;
}

.sp-page-tuning .sp-tuning-editorial__photo,
.sp-page-tuning .sp-tuning-editorial__img {
	min-height: 700px;
	height: 700px;
}

.sp-page-tuning .sp-tuning-editorial__photo figcaption {
	display: flex;
	gap: 18px;
	align-items: center;
}

.sp-page-tuning .sp-tuning-editorial__photo figcaption::before {
	flex: 0 0 46px;
	height: 1px;
	background: var(--sp-tune-gold-pale);
	content: "";
}

/* 02：和文名、英字、参考、主価格の順が一目で分かるカタログ組み */
.sp-page-tuning .sp-tuning-pricing__head {
	grid-template-columns: 164px minmax(0, 1fr);
	gap: 36px;
}

.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
	font-size: clamp(96px, 8vw, 132px);
}

.sp-page-tuning .sp-tuning-pricing__panel {
	padding: clamp(50px, 4.5vw, 70px);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
	min-height: 472px;
	padding: clamp(42px, 3.6vw, 56px);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__n span,
.sp-page-tuning .sp-tuning-pricing .sp-tprice__n small {
	display: block;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__n small {
	margin-top: 8px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 15px 18px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__refv {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__main {
	display: flex;
	align-items: baseline;
	white-space: nowrap;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
	font-size: clamp(62px, 5.6vw, 84px);
}

.sp-page-tuning .sp-tuning-pricing__notes p {
	position: relative;
	padding-left: 20px;
	line-height: 1.85;
}

.sp-page-tuning .sp-tuning-pricing__notes p::before {
	position: absolute;
	top: .78em;
	left: 0;
	width: 9px;
	height: 1px;
	background: var(--sp-tune-gold);
	content: "";
}

/* 後半：見出しとカードの基準線を揃え、前半の誌面感を切らさない */
.sp-page-tuning .sp-tuning-condition .sp-hd2,
.sp-page-tuning .sp-tuning-info .sp-hd2,
.sp-page-tuning .sp-tuning-flow .sp-hd2,
.sp-page-tuning .sp-tuning-faq .sp-hd2 {
	max-width: 980px;
	margin-right: auto;
	margin-left: auto;
}

.sp-page-tuning .sp-tuning-condition .sp-notice,
.sp-page-tuning .sp-tuning-info .sp-notice,
.sp-page-tuning .sp-tuning-related .sp-notice {
	border-color: var(--sp-tune-rule);
}

.sp-page-tuning .sp-tuning-info .sp-notice__t {
	font-family: var(--sp-font-serif);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .045em;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-flow .sp-flow h3 {
	font-family: var(--sp-font-serif);
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-faq .sp-center,
.sp-page-tuning .sp-tuning-flow .sp-center {
	margin-top: 38px;
}

.sp-page-tuning .sp-tuning-related .sp-more,
.sp-page-tuning .sp-section--links .sp-more {
	color: #9f4f2d;
}

.sp-page-tuning .sp-cta--page .sp-cta__actions {
	gap: 18px;
}

@media (max-width: 1180px) {
	.sp-page-tuning .sp-cases > .sp-wrap {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.sp-page-tuning .sp-cases__note {
		padding-left: 0;
	}

	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(380px, .86fr) minmax(0, 1.14fr);
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

@media (max-width: 900px) {
	.sp-page-tuning .sp-tfv,
	.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
	.sp-page-tuning .sp-tfv__in,
	.sp-page-tuning .sp-tfv__shot,
	.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
		min-height: 0;
	}

	.sp-page-tuning .sp-tfv__body {
		padding-top: 70px;
		padding-bottom: 58px;
	}

	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding-top: 88px;
		padding-bottom: 82px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.sp-page-tuning .sp-tfv__body {
		padding-top: 50px;
		padding-bottom: 40px;
	}

	.sp-page-tuning .sp-tfv__lead {
		font-size: 14.5px;
	}

	.sp-page-tuning .sp-tfv__points li {
		min-height: 0;
		padding: 15px 12px;
	}

	.sp-page-tuning .sp-tfv__pdesc {
		display: none;
	}

	.sp-page-tuning .sp-tfv__shot:not(.sp-tfv__shot--deco)::before {
		inset: 12px;
	}

	.sp-page-tuning .sp-cases {
		padding-block: 50px;
	}

	.sp-page-tuning .sp-cases__list li {
		padding-bottom: 10px;
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding-top: 74px;
		padding-bottom: 70px;
	}

	.sp-page-tuning .sp-tuning-editorial__photo,
	.sp-page-tuning .sp-tuning-editorial__img {
		min-height: 0;
		height: auto;
	}

	.sp-page-tuning .sp-tuning-pricing__head {
		grid-template-columns: 70px minmax(0, 1fr);
		gap: 14px;
	}

	.sp-page-tuning .sp-tuning-pricing__panel {
		padding: 26px 14px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		padding: 35px 23px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
		font-size: clamp(46px, 14vw, 56px);
	}

	.sp-page-tuning .sp-tuning-info .sp-notice__t {
		font-size: 18px;
	}

	.sp-page-tuning #sp-main {
		padding-bottom: max(0px, env(safe-area-inset-bottom));
	}
}

/* ==========================================================================
   2. Cocoon レイアウト調整
   ========================================================================== */

/*
  本文枠の打ち消し。

  親テーマ Cocoon は tmp/body-top.php で #content → #content-in → #main を開き、
  footer.php で閉じる。専用テンプレートは全幅デザインなので、
  この 3 つが持つ幅・余白・白いカード・回り込みを打ち消しておく。
  （これをしないと本文が Cocoon の 1 カラム幅に収まってしまう）

  Cocoon 側が id セレクタで指定しているため、こちらも id とクラスを重ねて詳細度で上回る。
  専用テンプレート側の枠は id が衝突しないよう sp- を付けている。
*/
.sp-layout #container.container,
.sp-layout #content.content,
.sp-layout #content-in.content-in,
.sp-layout #main.main,
.sp-layout #sp-content.sp-content,
.sp-layout #sp-content-in.sp-content-in,
.sp-layout #sp-main.sp-main {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.sp-layout #sidebar,
.sp-layout #breadcrumb,
.sp-layout .breadcrumb,
.sp-layout .article-header,
.sp-layout .entry-title,
.sp-layout .date-tags,
.sp-layout .entry-footer,
.sp-layout .footer-meta {
	display: none;
}

.sp-layout #sp-main.sp-main {
	color: var(--sp-ink);
	background: var(--sp-paper);
	font-size: 16px;
	line-height: 1.95;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
}

/*
  WordPress が出力する img には width / height 属性が付くため、
  height: auto を必ず添える。これが無いと縦横比が崩れる（属性値がそのまま高さになる）。
*/
.sp-layout #sp-main.sp-main img,
.sp-site .sp-hd img,
.sp-site .sp-ft img {
	max-width: 100%;
	height: auto;
}

/*
  枠いっぱいに敷く写真は、上の height: auto を打ち消して高さを親に合わせる。
  ここを弱いセレクタで書くと上の規則に負けて写真が縦に伸びるため、
  必ず同じ #sp-main.sp-main を含めた（クラス数が 1 つ多く、詳細度で勝つ）形にしている。
*/
.sp-layout #sp-main.sp-main .sp-shot img,
.sp-layout #sp-main.sp-main .sp-hero__shot img,
.sp-layout #sp-main.sp-main .sp-phero__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
  ここから下の 3 つは「予備」のルール。

  Cocoon 標準のヘッダー／フッター／モバイルボタンは、通常は inc/cocoon.php が
  HTML ごと出力させないため、これらのセレクタは何にも一致しない。
  cocoon_part__ フィルターや cocoon_footer_before を持たない古い Cocoon でも
  見た目が崩れないように残してあるだけで、普段は働かない。
  （表示オプションで専用ヘッダー／フッターをオフにしたときは
  　body クラスが付かないので、Cocoon 側がそのまま表示される）
*/
.sp-own-header #header-container,
.sp-own-header #navi,
.sp-own-header .navi-in {
	display: none;
}

.sp-own-footer #footer,
.sp-own-footer .footer {
	display: none;
}

/* Cocoon のモバイルフッターメニューと二重にならないようにする */
.sp-has-mobile-bar #mobile-menu-buttons {
	display: none;
}

/* 全幅デザインのため、親テーマのリセットに頼らず body の余白を自分で 0 にする */
.sp-site {
	margin: 0;
	background: var(--sp-paper);
}

/* ==========================================================================
   3. 共通パーツ
   ========================================================================== */

.sp-wrap {
	max-width: var(--sp-wrap);
	margin-inline: auto;
	padding-inline: var(--sp-gut);
}

.sp-wrap--n {
	max-width: 840px;
}

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

.sp-section--tint {
	background: var(--sp-paper-2);
}

/* 薄い面が連続するときの境目（v0.14.3：ピアノ配送・移動の「承っている内容」→「楽器運搬」） */
.sp-section--tint + .sp-inst {
	border-top: 1px solid var(--sp-line);
}

.sp-center {
	text-align: center;
}

/*
  日本語は既定でどこでも改行されるため、語句の途中で折り返ってしまう。
  区切ってよい位置だけで改行させたい見出しに使う。
*/
.sp-nobr {
	display: inline-block;
}

.sp-shot {
	margin: 0;
	overflow: hidden;
}

/*
  img は既定で inline のため、行の下に数 px のすき間ができて枠から縦にあふれる。
  写真を敷く枠では必ず block にする。
*/
.sp-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-tbd {
	color: var(--sp-ink-3);
}

.sp-mini {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--sp-ink-3);
}

.sp-tellink {
	color: var(--sp-blue-deep);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--sp-sky);
}

/* --- 見出し --- */

.sp-eyebrow {
	margin: 0 0 10px;
	font-family: var(--sp-font-num);
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--sp-blue);
}

.sp-eyebrow--w {
	color: rgba(255, 255, 255, 0.9);
}

.sp-h2 {
	margin: 0;
	font-size: clamp(24px, 2.7vw, 35px);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.45;
	color: var(--sp-ink);
}

.sp-h2::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--sp-blue);
}

.sp-hd2 {
	margin-bottom: 54px;
	text-align: center;
}

.sp-heading__lead {
	max-width: 720px;
	margin: 22px auto 0;
	font-size: 15.5px;
	color: var(--sp-ink-2);
}

/* 左揃えの見出し（写真・表と並ぶ場所、サービスの説明） */
.sp-hd2--l {
	text-align: left;
}

.sp-hd2--l .sp-h2::after,
.sp-hd2--l .sp-heading__lead {
	margin-left: 0;
}

/* --- ボタン --- */

.sp-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 10px 32px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 999px;
}

.sp-btn--sm {
	min-height: 42px;
	padding: 8px 20px;
	font-size: 14px;
}

.sp-btn--lg {
	min-height: 66px;
	padding: 12px 44px;
	min-width: 260px;
}

.sp-btn i {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	opacity: 0.85;
}

.sp-btn__s {
	font-size: 11.5px;
	font-weight: 600;
	opacity: 0.9;
}

.sp-btn__n {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.sp-btn--cta {
	color: #fff;
	background: var(--sp-orange-ink);
}

.sp-btn--cta:hover,
.sp-btn--cta:focus {
	color: #fff;
	background: #99400f;
}

.sp-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.8);
}

.sp-btn--ghost:hover,
.sp-btn--ghost:focus {
	color: var(--sp-blue-deep);
	background: #fff;
}

/* リンク先が未決定のボタン（押しても何も起きないリンクにしない） */
.sp-btn--pending {
	cursor: default;
	opacity: 0.94;
}

/* --- テキストリンク --- */

.sp-more {
	display: inline-block;
	margin-top: 14px;
	padding-bottom: 3px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sp-orange-ink);
	border-bottom: 1px solid var(--sp-orange);
}

.sp-more::after {
	content: " ›";
}

.sp-more--sm {
	margin-top: 6px;
	font-size: 13.5px;
}

/* 青い面の上ではオレンジが沈むため、白＋水色の下線にする */
.sp-about__panel .sp-more,
.sp-cases .sp-more {
	color: #fff;
	border-bottom-color: var(--sp-sky);
}

/* --- テーブル --- */

/*
  Cocoon 側の table スタイル（.entry-content table th 等）に負けないよう、
  クラスを2つ以上含むセレクタで指定している。
*/
.sp-table,
.sp-layout #sp-main.sp-main .sp-table,
.entry-content .sp-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
}

.sp-table th,
.sp-table td,
.sp-layout #sp-main.sp-main .sp-table th,
.sp-layout #sp-main.sp-main .sp-table td,
.entry-content .sp-table th,
.entry-content .sp-table td {
	padding: 16px 20px;
	font-size: 15.5px;
	line-height: 1.8;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--sp-line);
}

.sp-table th,
.sp-layout #sp-main.sp-main .sp-table th,
.entry-content .sp-table th {
	width: 130px;
	white-space: nowrap;
	font-weight: 700;
	color: #fff;
	background: var(--sp-blue-deep);
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

.sp-table tr:last-child th,
.sp-table tr:last-child td,
.sp-layout #sp-main.sp-main .sp-table tr:last-child th,
.sp-layout #sp-main.sp-main .sp-table tr:last-child td,
.entry-content .sp-table tr:last-child th,
.entry-content .sp-table tr:last-child td {
	border-bottom: 0;
}

/* ==========================================================================
   4. 専用ヘッダー
   ========================================================================== */

.sp-hd {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sp-paper);
	border-bottom: 1px solid var(--sp-line);
}

/* 管理バーの下に隠れないようにする（ログイン中のみ影響） */
.admin-bar .sp-hd {
	top: 32px;
}

/* ヘッダー上端：トラックの帯（青い帯＋白いすき間＋細い赤ライン） */
.sp-hd::before {
	content: "";
	display: block;
	height: 9px;
	background: linear-gradient(180deg, var(--sp-blue) 0 5px, #fff 5px 7px, var(--sp-red) 7px 9px);
}

.sp-hd__in {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 11px;
}

.sp-logo {
	line-height: 1.3;
	text-decoration: none;
}

.sp-logo__small {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: var(--sp-ink-3);
}

.sp-logo__main {
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sp-blue-deep);
}

/*
  画像ロゴ（正式ロゴ SHIMIZU PIANO EXPRESS）
  高さを固定して潰れ・縮みを防ぐ。上下の負マージンで、レイアウト上の高さを
  電話・ボタン列（42px）と揃え、文字ロゴのときとヘッダーの高さを変えない。
  （.sp-site .sp-hd img の height:auto より強い指定が必要）
*/
.sp-logo--img {
	display: block;
	flex-shrink: 0;
	margin-block: -5px;
	line-height: 0;
}

.sp-site .sp-hd .sp-logo__img {
	display: block;
	width: auto;
	max-width: none;
	height: 52px;
}

.sp-nav {
	display: flex;
	gap: 22px;
	margin-left: auto;
}

.sp-nav a {
	position: relative;
	padding-block: 6px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--sp-ink-2);
}

.sp-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--sp-blue);
	transform: scaleX(0);
}

.sp-nav a:hover {
	color: var(--sp-blue-deep);
}

.sp-nav a:hover::after {
	transform: scaleX(1);
}

.sp-hd__r {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sp-hd__tel {
	line-height: 1.25;
	text-align: right;
	text-decoration: none;
}

.sp-hd__tel span {
	display: block;
	font-size: 10.5px;
	color: var(--sp-ink-3);
}

.sp-hd__tel b {
	display: block;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: var(--sp-blue-deep);
}

/* --- スマートフォン用メニュー（JavaScript 不使用） --- */

.sp-mn {
	display: none;
	margin-left: auto;
}

.sp-mn__b {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 11px;
	cursor: pointer;
	list-style: none;
	background: var(--sp-blue);
}

.sp-mn__b::-webkit-details-marker {
	display: none;
}

.sp-mn__b span {
	display: block;
	height: 2px;
	background: #fff;
}

.sp-mn__p {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 120;
	display: flex;
	flex-direction: column;
	background: var(--sp-paper);
	border-bottom: 3px solid var(--sp-blue);
	box-shadow: 0 14px 22px rgba(13, 74, 134, 0.14);
}

.sp-mn__p a {
	padding: 15px var(--sp-gut);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	color: var(--sp-ink);
	border-bottom: 1px solid var(--sp-line);
}

.sp-mn__cta {
	color: #fff !important;
	text-align: center;
	background: var(--sp-orange-ink);
	border-bottom: 0 !important;
}

/* ==========================================================================
   5. トップページ各セクション
   ========================================================================== */

/* --- ファーストビュー ---
   PC：画面いっぱいのトラック写真。左側だけ濃紺をかけて見出しを左揃えで置き、右側は写真を見せる。
   下端にトラックの帯を敷く（写真＝車体、帯＝車体の青い帯と赤ライン）。
   -------------------------------------------------------------------------- */

.sp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(84vh, 760px);
	padding-block: 110px 170px;
	color: #fff;
	text-align: left;
	background: var(--sp-blue-navy);
}

.sp-hero__shot {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}

.sp-hero__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0% 56%;
}

.sp-hero--photo .sp-hero__shot::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 48, 85, 0.9) 0%, rgba(10, 48, 85, 0.74) 34%, rgba(10, 48, 85, 0.2) 66%, rgba(10, 48, 85, 0.06) 100%),
		linear-gradient(180deg, rgba(10, 48, 85, 0.25) 0%, rgba(10, 48, 85, 0) 30%, rgba(10, 48, 85, 0) 70%, rgba(10, 48, 85, 0.35) 100%);
}

/* 編集者向け：写真が無いときは右側に撮影指示の白い枠を置く（見出しは左のまま読める） */
.sp-hero--guide .sp-hero__shot {
	inset: 56px var(--sp-gut) 128px auto;
	width: min(40%, 480px);
	overflow: visible;
}

@media (min-width: 1260px) {
	.sp-hero--guide .sp-hero__shot {
		right: calc((100% - var(--sp-wrap)) / 2 + var(--sp-gut));
	}
}

.sp-hero__band {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.sp-hero__in {
	position: relative;
	z-index: 3;
	width: 100%;
}

.sp-hero__in > * {
	max-width: 640px;
}

.sp-hero__eye {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin: 0 0 26px;
	text-shadow: 0 1px 10px rgba(6, 28, 52, 0.45);
}

.sp-hero__loc {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.88);
}

.sp-hero__ttl {
	margin: 0 0 24px;
	font-size: clamp(32px, 4.6vw, 60px);
	font-weight: 700;
	line-height: 1.38;
	letter-spacing: 0.02em;
	color: #fff;
	text-shadow: 0 2px 20px rgba(6, 28, 52, 0.4);
}

.sp-hero__lead {
	margin: 0 0 40px;
	font-size: 16.5px;
	color: rgba(255, 255, 255, 0.94);
	text-shadow: 0 1px 12px rgba(6, 28, 52, 0.5);
}

.sp-hero__act {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
}

/* --- サービスへの入口（ファーストビューに重なる白い帯） --- */

.sp-svcbar {
	position: relative;
	z-index: 3;
	margin-top: -74px;
}

.sp-svcbar__in {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--sp-paper);
	box-shadow: 0 18px 44px rgba(13, 74, 134, 0.16);
}

.sp-svcbar a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	align-content: start;
	padding: 28px 28px 30px;
	text-decoration: none;
	border-left: 1px solid var(--sp-line);
}

.sp-svcbar a:first-child {
	border-left: 0;
}

.sp-svcbar a:hover {
	background: var(--sp-sky-tint);
}

.sp-svcbar__no {
	grid-row: span 3;
	font-family: var(--sp-font-num);
	font-size: 40px;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--sp-blue);
}

.sp-svcbar__en {
	font-family: var(--sp-font-num);
	font-size: 10.5px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sp-ink-3);
}

.sp-svcbar__t {
	display: block;
	margin-top: 2px;
	font-size: 19px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-svcbar__t::after {
	content: " ›";
	color: var(--sp-orange);
}

.sp-svcbar__d {
	display: block;
	font-size: 13px;
	color: var(--sp-ink-3);
}

.sp-svcbar__en,
.sp-svcbar__t,
.sp-svcbar__d {
	grid-column: 2;
}

/* --- 会社について：写真の上に青いパネルを重ねる --- */

.sp-about {
	position: relative;
	padding-block: var(--sp-section-space) 0;
}

.sp-about__media {
	position: absolute;
	inset: 0 0 auto 0;
	height: 520px;
}

.sp-about__shot {
	height: 100%;
}

.sp-about__shot img {
	object-position: center 42%;
}

.sp-about__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 48, 85, 0.18);
}

.sp-about__wrap {
	position: relative;
	z-index: 2;
	padding-top: 180px;
	padding-bottom: var(--sp-section-space);
}

/* 写真が未設定のときは、重ねるための余白を取らない */
.sp-about--nophoto .sp-about__wrap {
	padding-top: 0;
}

.sp-about__panel {
	position: relative;
	max-width: 660px;
	padding: 52px 56px 56px;
	color: #fff;
	background: var(--sp-blue-deep);
	box-shadow: 0 22px 50px rgba(10, 48, 85, 0.26);
}

/* 青いパネルの下に、トラックと同じ「白いすき間＋細い赤ライン」 */
.sp-about__panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	height: 3px;
	background: var(--sp-red);
}

/* 大きな写真（看板）に重ねる小さな写真（トラックの後ろ） */
.sp-about__sub {
	position: absolute;
	z-index: 3;
	right: var(--sp-gut);
	bottom: -96px;
	width: min(30%, 330px);
	aspect-ratio: 4 / 3;
	border: 6px solid #fff;
	box-shadow: 0 16px 34px rgba(10, 48, 85, 0.18);
}

@media (min-width: 1260px) {
	.sp-about__sub {
		right: calc((100% - var(--sp-wrap)) / 2 + var(--sp-gut));
	}
}

.sp-about__ttl {
	margin: 0 0 20px;
	font-size: clamp(23px, 2.5vw, 32px);
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
}

.sp-about__lead {
	margin: 0 0 28px;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.92);
}

.sp-about__pts {
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.sp-about__pts dt {
	margin-top: 18px;
	padding-left: 18px;
	font-size: 17px;
	font-weight: 700;
	border-left: 3px solid var(--sp-sky);
}

.sp-about__pts dd {
	margin: 4px 0 0 18px;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.84);
}

/* --- できること：大きな写真 ＋ 番号付きの一覧 --- */

.sp-doing {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 54px;
	align-items: start;
}

.sp-doing--nophoto {
	grid-template-columns: minmax(0, 1fr);
}

.sp-doing__shot {
	position: sticky;
	top: 100px;
	aspect-ratio: 4 / 3;
	min-width: 0;
}

.sp-doing__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--sp-blue);
}

.sp-doing__list li {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 18px;
	padding: 26px 0;
	border-bottom: 1px solid var(--sp-line);
}

.sp-doing__list li::before,
.sp-doing__list li::marker {
	content: none;
}

.sp-doing__no {
	font-family: var(--sp-font-num);
	font-size: 34px;
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--sp-blue);
}

.sp-doing__list h3 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-doing__list p {
	margin: 0;
	font-size: 15px;
	color: var(--sp-ink-2);
}

/* --- こんなときに：青い面 --- */

.sp-cases {
	padding-block: var(--sp-section-space);
	color: #fff;
	background: var(--sp-blue-deep);
}

.sp-cases__head {
	margin-bottom: 44px;
	text-align: center;
}

.sp-cases__ttl {
	margin: 0;
	font-size: clamp(23px, 2.6vw, 33px);
	font-weight: 700;
	color: #fff;
}

.sp-cases__ttl::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--sp-sky);
}

.sp-cases__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-cases__list li {
	position: relative;
	padding: 17px 0 17px 40px;
	font-size: 16.5px;
	font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.sp-cases__list li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 15px;
	height: 9px;
	margin-top: -7px;
	border-left: 3px solid var(--sp-sky);
	border-bottom: 3px solid var(--sp-sky);
	transform: rotate(-45deg);
}

.sp-cases__note {
	margin: 28px 0 0;
	font-size: 14.5px;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

/* --- ご依頼の流れ：特大の数字 --- */

/* 6 ステップを 3 列 × 2 段で見せる（inc/content.php の shimizu_flow_steps()） */
.sp-flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-flow li {
	position: relative;
	padding-top: 18px;
}

.sp-flow li::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--sp-line);
}

.sp-flow li:first-child::before {
	background: var(--sp-blue);
}

/* 手順の番号は白抜き（サービスの 01〜03 は塗り。役割で描き分ける） */
.sp-flow__no {
	display: block;
	margin-bottom: 10px;
	font-family: var(--sp-font-num);
	font-size: 84px;
	font-style: italic;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: #fff;
	-webkit-text-stroke: 1.5px var(--sp-blue);
}

.sp-section--tint .sp-flow__no {
	color: var(--sp-paper-2);
}

.sp-flow h3 {
	margin: 0 0 8px;
	font-size: 17.5px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-flow p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--sp-ink-2);
}

.sp-flow + .sp-center {
	margin-top: 44px;
}

/* 会社について（写真とパネルで下に余白が出る）の直後は、上の余白を詰める */
.sp-about + .sp-section {
	padding-top: calc(var(--sp-section-space) * 0.7);
}

/* --- 会社情報 --- */

.sp-info {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr);
	gap: 40px;
	align-items: start;
}

.sp-info--nophoto {
	grid-template-columns: minmax(0, 1fr);
}

.sp-info {
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.55fr);
	gap: 48px;
}

/* 会社情報の横は縦長のディテール写真（ロゴ入りのポスト） */
.sp-info__shot {
	aspect-ratio: 3 / 4;
	min-width: 0;
}

/* --- よくある質問 --- */

.sp-faq {
	border-top: 1px solid var(--sp-line);
}

.sp-faq details {
	background: var(--sp-paper);
	border-bottom: 1px solid var(--sp-line);
}

.sp-faq summary {
	position: relative;
	padding: 20px 56px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.7;
	cursor: pointer;
	list-style: none;
}

.sp-faq summary::-webkit-details-marker {
	display: none;
}

.sp-faq summary::before {
	content: "Q";
	position: absolute;
	left: 18px;
	top: 50%;
	margin-top: -14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-family: var(--sp-font-num);
	font-size: 14px;
	font-style: italic;
	font-weight: 800;
	color: #fff;
	background: var(--sp-blue);
	border-radius: 50%;
}

/* 閉じているときは「＋」、開いているときは「－」 */
.sp-faq summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	margin-top: -7px;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--sp-blue), var(--sp-blue)) center / 14px 2px no-repeat,
		linear-gradient(var(--sp-blue), var(--sp-blue)) center / 2px 14px no-repeat;
}

.sp-faq details[open] summary::after {
	background: linear-gradient(var(--sp-blue), var(--sp-blue)) center / 14px 2px no-repeat;
}

.sp-faq details[open] summary {
	color: var(--sp-blue-deep);
}

.sp-faq details p {
	margin: 0;
	padding: 0 24px 22px 56px;
	font-size: 15.5px;
	color: var(--sp-ink-2);
}

/* --- お問い合わせ --- */

/* 青い面。左に見出し、右に電話とボタン。下端はトラックの「白いすき間＋細い赤ライン」 */
.sp-cta {
	padding-block: 92px 98px;
	color: #fff;
	text-align: left;
	background:
		linear-gradient(0deg, var(--sp-red) 0 3px, #fff 3px 6px, transparent 6px),
		var(--sp-blue-deep);
}

.sp-cta__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px 72px;
	align-items: center;
}

.sp-cta__in > :not(.sp-cta__head):not(.sp-cta__body) {
	grid-column: 1 / -1;
}

.sp-cta__ttl {
	margin: 14px 0 0;
	font-size: clamp(24px, 2.7vw, 36px);
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}

.sp-cta__tel {
	display: inline-block;
	padding-bottom: 10px;
	text-decoration: none;
	color: #fff;
	border-bottom: 3px solid var(--sp-orange);
}

.sp-cta__tel span {
	display: block;
	font-size: 12px;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.85);
}

.sp-cta__tel b {
	display: block;
	font-size: clamp(32px, 4.4vw, 56px);
	font-weight: 700;
	letter-spacing: 0.03em;
}

.sp-cta__h {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.8);
}

.sp-cta__act {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: flex-start;
	margin-top: 30px;
}

/* ==========================================================================
   6. 専用フッター
   ========================================================================== */

.sp-ft {
	padding-top: 50px;
	color: rgba(255, 255, 255, 0.74);
	background: var(--sp-ink);
}

.sp-ft__in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 38px;
	padding-bottom: 34px;
}

.sp-ft__n {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}

.sp-ft__a {
	margin: 8px 0 0;
	font-size: 13.5px;
}

.sp-ft__a a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.sp-ft__nav {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 6px 36px;
	font-size: 13.5px;
}

.sp-ft__nav a {
	color: inherit;
	text-decoration: none;
}

.sp-ft__nav a:hover {
	color: #fff;
	text-decoration: underline;
}

.sp-ft__c {
	margin: 0;
	padding: 16px 0 26px;
	font-size: 11.5px;
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   7. 固定ページ用（投稿本文に .sp-page で囲んだ HTML を貼り付けて使う）
   ========================================================================== */

.sp-page {
	font-size: 16px;
	line-height: 1.9;
	color: var(--sp-ink);
}

.sp-page > * + * {
	margin-top: 1.4em;
}

.sp-page h2 {
	margin-top: 2.4em;
	margin-bottom: 0.8em;
	padding-left: 14px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-blue-deep);
	border-left: 4px solid var(--sp-blue);
}

.sp-page h3 {
	margin-top: 1.8em;
	margin-bottom: 0.6em;
	font-size: 18px;
	font-weight: 700;
}

.sp-page .sp-lead {
	font-size: 17px;
	color: var(--sp-ink-2);
}

.sp-page .sp-note {
	padding: 16px 18px;
	font-size: 14px;
	color: var(--sp-ink-2);
	background: var(--sp-paper-2);
	border-left: 3px solid var(--sp-sky);
}

.sp-page .sp-cta-box {
	padding: 28px 20px;
	text-align: center;
	background: var(--sp-paper-2);
	border-top: 3px solid var(--sp-blue);
}

.sp-page .sp-cta-box p {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
}

.sp-cta-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* 白地に置く電話ボタンは、白抜きのままだと読めないので反転させる */
.sp-cta-box__actions .sp-btn--ghost {
	color: var(--sp-blue-deep);
	border-color: var(--sp-blue);
}

.sp-cta-box__actions .sp-btn--ghost:hover {
	color: #fff;
	background: var(--sp-blue-deep);
}

.sp-map-link {
	color: var(--sp-blue-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sp-page ul:not(.sp-cases__list) {
	padding-left: 1.4em;
}

.sp-page ul:not(.sp-cases__list) li + li {
	margin-top: 0.5em;
}

/* ==========================================================================
   8. モバイル問い合わせバー（JavaScript 不使用）
   ========================================================================== */

.sp-mobile-bar {
	display: none;
}

/* ==========================================================================
   9. レスポンシブ
   ========================================================================== */

/* --- タブレット（1023px 以下） --- */

@media (max-width: 1023px) {
	.sp-site,
	.sp-page {
		--sp-space: 78px;
		--sp-gut: 22px;
		--sp-section-space: 78px;
	}

	.sp-nav {
		display: none;
	}

	.sp-hd__r {
		margin-left: auto;
	}

	.sp-mn {
		display: block;
		margin-left: 12px;
	}

	.sp-hero {
		min-height: 620px;
		padding-block: 90px 140px;
	}

	.sp-hero--photo .sp-hero__shot::after {
		background:
			linear-gradient(90deg, rgba(10, 48, 85, 0.9) 0%, rgba(10, 48, 85, 0.72) 50%, rgba(10, 48, 85, 0.3) 100%);
	}

	.sp-svcbar {
		margin-top: -60px;
	}

	.sp-svcbar__no {
		font-size: 32px;
	}

	.sp-about__sub {
		bottom: -70px;
		width: 34%;
	}

	.sp-cta__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sp-svcbar a {
		padding: 22px 20px 24px;
	}

	.sp-svcbar__t {
		font-size: 17px;
	}

	.sp-about__media {
		height: 400px;
	}

	.sp-about__wrap {
		padding-top: 130px;
	}

	.sp-about__panel {
		max-width: none;
		padding: 38px 30px 40px;
	}

	.sp-doing {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.sp-doing__shot {
		position: static;
	}

	.sp-cases__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.sp-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px;
	}

	.sp-info {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sp-info__shot {
		max-width: 360px;
	}
}

/* --- スマートフォン（767px 以下） ---
   ファーストビューは写真の見せる位置を変え、電話は画面下の固定バーに常時置く。
   PC の単純縮小にはしない。
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sp-site,
	.sp-page {
		--sp-space: 58px;
		--sp-gut: 18px;
		--sp-section-space: 58px;
	}

	.sp-layout #sp-main.sp-main {
		font-size: 15.5px;
	}

	.sp-hd {
		position: static;
	}

	.sp-hd__in {
		position: relative;
		gap: 10px;
		padding-block: 8px;
	}

	/* 画面下の固定バーに電話があるので、ヘッダーからは外して社名を1行に収める */
	.sp-hd__r {
		display: none;
	}

	.sp-logo__main {
		font-size: 17px;
	}

	/* スマホは電話列を出さないので、メニューボタンを右端へ戻す */
	.sp-mn {
		margin-left: auto;
	}

	.sp-logo--img {
		margin-block: -2px;
	}

	.sp-site .sp-hd .sp-logo__img {
		height: 50px;
	}

	/*
	  スマホのファーストビュー：写真に文字を重ねない。
	  写真（車体）→ トラックの帯 → 濃紺の見出しブロック の順に積む。
	*/
	.sp-hero {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 0;
	}

	.sp-hero__shot {
		position: relative;
		inset: auto;
		order: 1;
		aspect-ratio: 2 / 1;
	}

	.sp-hero__shot img {
		object-position: 42% 50%;
	}

	.sp-hero--photo .sp-hero__shot::after {
		display: none;
	}

	.sp-hero--guide .sp-hero__shot {
		inset: auto;
		width: auto;
		margin: 18px var(--sp-gut) 0;
		aspect-ratio: auto;
	}

	.sp-hero__band {
		position: static;
		order: 2;
	}

	.sp-hero__in {
		order: 3;
		padding-block: 30px 40px;
	}

	.sp-hero__eye {
		gap: 4px 12px;
		margin-bottom: 14px;
	}

	.sp-hero__loc {
		font-size: 11.5px;
		letter-spacing: 0.14em;
	}

	.sp-hero__ttl {
		margin-bottom: 16px;
		font-size: 29px;
		line-height: 1.42;
	}

	.sp-hero__lead {
		margin-bottom: 26px;
		font-size: 15px;
	}

	.sp-hero__lead br {
		display: none;
	}

	.sp-hero__act {
		flex-direction: column;
		gap: 12px;
	}

	.sp-hero__act .sp-btn {
		width: 100%;
		min-width: 0;
		min-height: 60px;
	}

	.sp-svcbar {
		margin-top: 0;
	}

	.sp-svcbar__in {
		grid-template-columns: minmax(0, 1fr);
		box-shadow: none;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-svcbar a {
		column-gap: 14px;
		padding: 15px var(--sp-gut);
		border-left: 0;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-svcbar a:last-child {
		border-bottom: 0;
	}

	.sp-svcbar__no {
		font-size: 30px;
		align-self: center;
	}

	.sp-svcbar__en {
		font-size: 9.5px;
	}

	.sp-svcbar__t {
		font-size: 16.5px;
	}

	.sp-svcbar__d {
		margin-top: 1px;
		font-size: 12.5px;
	}

	.sp-hd2 {
		margin-bottom: 30px;
	}

	.sp-h2::after {
		margin-top: 14px;
	}

	/* 写真は上に出し、青いパネルは重ねずに続ける */
	.sp-about {
		padding-top: 0;
	}

	.sp-about__media {
		position: relative;
		height: 230px;
	}

	.sp-about__sub {
		right: var(--sp-gut);
		bottom: -34px;
		width: 40%;
		border-width: 4px;
	}

	.sp-about__panel::after {
		bottom: -8px;
	}

	.sp-about__wrap {
		padding: 0 0 var(--sp-section-space);
	}

	.sp-about__panel {
		padding: 30px var(--sp-gut) 34px;
		box-shadow: none;
	}

	.sp-about__ttl {
		font-size: 22px;
	}

	.sp-about__lead {
		font-size: 15.5px;
	}

	.sp-doing__list li {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 12px;
		padding: 20px 0;
	}

	.sp-doing__no {
		font-size: 24px;
	}

	.sp-doing__list h3 {
		font-size: 18px;
	}

	.sp-cases__list li {
		padding: 14px 0 14px 36px;
		font-size: 15.5px;
	}

	.sp-flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.sp-flow li {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 4px 16px;
		align-items: start;
		padding: 20px 0 18px;
	}

	.sp-flow li h3,
	.sp-flow li p {
		grid-column: 2;
	}

	.sp-flow__no {
		grid-row: span 2;
		margin: 0;
		font-size: 50px;
	}

	.sp-flow h3 {
		font-size: 16.5px;
	}

	.sp-flow p {
		font-size: 14px;
	}

	.sp-info__shot {
		max-width: none;
		aspect-ratio: 4 / 3;
	}

	.sp-table th,
	.sp-layout #sp-main.sp-main .sp-table th,
	.entry-content .sp-table th {
		width: 96px;
		padding: 12px;
		font-size: 13.5px;
	}

	.sp-table td,
	.sp-layout #sp-main.sp-main .sp-table td,
	.entry-content .sp-table td {
		padding: 12px;
		font-size: 14px;
	}

	.sp-faq summary {
		padding: 16px 40px 16px 48px;
		font-size: 15.5px;
	}

	.sp-faq summary::before {
		left: 12px;
		width: 26px;
		height: 26px;
		margin-top: -13px;
	}

	.sp-faq summary::after {
		right: 14px;
	}

	.sp-faq details p {
		padding: 0 14px 18px 48px;
		font-size: 15px;
	}

	.sp-cta {
		padding-block: 52px 58px;
	}

	.sp-cta__ttl {
		font-size: 23px;
	}

	.sp-cta__act {
		margin-top: 22px;
	}

	.sp-cta__act {
		flex-direction: column;
	}

	.sp-cta__act .sp-btn {
		width: 100%;
		min-width: 0;
	}

	.sp-ft__in {
		flex-direction: column;
		gap: 22px;
	}

	.sp-ft__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-cta-box__actions .sp-btn {
		flex: 1 1 100%;
	}

	/* --- 画面下部の固定バー --- */

	.sp-has-mobile-bar .sp-mobile-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		background: var(--sp-paper);
		border-top: 1px solid var(--sp-line);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.sp-mobile-bar__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 62px;
		padding: 8px 6px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.sp-mobile-bar__item--tel {
		color: var(--sp-blue-deep);
	}

	.sp-mobile-bar__item--mail {
		color: #fff;
		background: var(--sp-orange-ink);
	}

	.sp-mobile-bar__label {
		font-size: 15px;
		line-height: 1.3;
	}

	.sp-mobile-bar__sub {
		font-size: 11px;
		font-weight: 600;
		opacity: 0.85;
	}

	.sp-mobile-bar__item:focus-visible {
		outline: 3px solid var(--sp-ink);
		outline-offset: -3px;
	}

	/* 固定バーに隠れないよう、ページ下端に余白を確保 */
	.sp-has-mobile-bar .sp-ft,
	.sp-has-mobile-bar .footer,
	.sp-has-mobile-bar #footer {
		padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
	}
}

/* --- PC（1024px 以上） --- */

@media (min-width: 1024px) {
	.sp-site,
	.sp-page {
		--sp-section-space: 108px;
	}
}

/* --- 小さめの PC（1024〜1199px） ---
   メニューを表示したまま1行に収める。文字を詰めるだけで、構成は変えない。
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1199px) {
	.sp-hd__in {
		gap: 16px;
	}

	.sp-logo__main {
		font-size: 17px;
	}

	.sp-nav {
		gap: 15px;
	}

	.sp-nav a,
	.sp-nav__t {
		font-size: 13px;
	}

	.sp-hd__r {
		gap: 11px;
	}

	/* 「お電話でのご相談」の小さいラベルは省き、番号だけにする */
	.sp-hd__tel span {
		display: none;
	}

	.sp-hd__tel b {
		font-size: 17px;
	}

	.sp-btn--sm {
		padding: 8px 14px;
		font-size: 12.5px;
	}
}

/* ==========================================================================
   10. 印刷 / モーション設定
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sp-site *,
	.sp-page * {
		animation: none !important;
		transition: none !important;
	}
}

@media print {
	.sp-mobile-bar,
	.sp-hd {
		display: none !important;
	}
}

/* ==========================================================================
   11. サイト全体（下層ページ）用のパーツ
       採用デザイン案1のルールを下層ページへ展開するためのもの。
         ・白ベース／ブルーは面・見出し・罫／オレンジは電話と依頼ボタンだけ
         ・カードを大量に並べない（横並びは最大 3〜4 枚、罫 1px で区切る）
         ・各ページのファーストビュー（.sp-phero）で統一感を出す
   ========================================================================== */

/* --- ヘッダー：サービスの入れ子メニュー（JavaScript 不使用） --- */

.sp-nav__grp {
	position: relative;
}

.sp-nav__t {
	padding: 6px 0;
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: inherit;
	white-space: nowrap;
	color: var(--sp-ink-2);
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	box-shadow: none;
}

.sp-nav__t::after {
	content: " ▾";
	font-size: 10px;
	color: var(--sp-sky);
}

.sp-nav__grp:hover .sp-nav__t,
.sp-nav__grp:focus-within .sp-nav__t {
	color: var(--sp-blue-deep);
}

.sp-nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 130;
	min-width: 210px;
	padding: 6px 0;
	visibility: hidden;
	opacity: 0;
	background: var(--sp-paper);
	border-top: 3px solid var(--sp-blue);
	box-shadow: 0 16px 30px rgba(13, 74, 134, 0.16);
	transform: translateX(-50%);
}

/* ボタンとメニューのあいだにできるすき間を、透明な帯で埋めてホバーを切らさない */
.sp-nav__sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -22px;
	height: 22px;
}

.sp-nav__grp:hover .sp-nav__sub,
.sp-nav__grp:focus-within .sp-nav__sub {
	visibility: visible;
	opacity: 1;
}

.sp-nav .sp-nav__sub a {
	display: block;
	padding: 11px 20px;
	font-size: 14px;
	color: var(--sp-ink);
}

.sp-nav .sp-nav__sub a::after {
	display: none;
}

.sp-nav .sp-nav__sub a:hover {
	color: var(--sp-blue-deep);
	background: var(--sp-sky-tint);
}

.sp-nav .is-current,
.sp-nav a[aria-current="page"] {
	color: var(--sp-blue-deep);
}

.sp-nav .sp-nav__a.is-current::after {
	transform: scaleX(1);
}

/* --- スマートフォン用メニューの追加要素 --- */

.sp-mn__h {
	padding: 12px var(--sp-gut) 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--sp-ink-3);
	background: var(--sp-paper-2);
}

.sp-mn__p .sp-mn__sub {
	padding-left: calc(var(--sp-gut) + 16px);
}

.sp-mn__p .sp-mn__sub::before {
	content: "– ";
	color: var(--sp-sky);
}

.sp-mn__p .sp-mn__tel {
	color: var(--sp-blue-deep);
	font-weight: 700;
}

.sp-mn__p .sp-mn__tel b {
	margin-left: 6px;
	font-size: 18px;
}

/* --- 下層ページのファーストビュー ---
   青いパネル（トラックの青い帯）に見出しを左揃えで置き、写真は右側に画面の端まで敷く。
   下端はトラックの「白いすき間＋細い赤ライン」。
   サービスページは「01 / PIANO TRANSPORT」の大きな番号を見出しの上に置く。
   -------------------------------------------------------------------------- */

.sp-phero {
	--sp-phero-pad: 64px;
	position: relative;
	padding-block: var(--sp-phero-pad) calc(var(--sp-phero-pad) + 6px);
	overflow: hidden;
	color: #fff;
	text-align: left;
	background:
		linear-gradient(0deg, var(--sp-red) 0 3px, #fff 3px 6px, transparent 6px),
		var(--sp-blue-deep);
}

.sp-phero__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	z-index: 2;
	min-height: 150px;
}

.sp-phero--photo .sp-phero__in {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	min-height: 270px;
}

.sp-phero__body {
	align-self: center;
	min-width: 0;
}

/* 写真はパネルの上下いっぱい、右は画面の端まで（はみ出しは .sp-phero の overflow で切る） */
.sp-phero__shot {
	position: relative;
	min-width: 0;
	margin-block: calc(var(--sp-phero-pad) * -1);
	margin-right: calc((var(--sp-gut) + max(0px, (100vw - var(--sp-wrap)) / 2)) * -1);
}

.sp-phero__shot img {
	object-position: center 55%;
}

.sp-phero__eye {
	margin: 0 0 18px;
}

.sp-phero__ttl {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #fff;
}

.sp-phero__lead {
	max-width: 560px;
	margin: 18px 0 0;
	font-size: 15.5px;
	color: rgba(255, 255, 255, 0.9);
}

/* --- パンくず --- */

.sp-crumb {
	background: var(--sp-paper);
	border-bottom: 1px solid var(--sp-line);
}

.sp-crumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0;
	padding-block: 12px;
	list-style: none;
	font-size: 12.5px;
	color: var(--sp-ink-3);
}

.sp-crumb li + li::before {
	content: "›";
	margin-right: 8px;
	color: var(--sp-line);
}

.sp-crumb a {
	color: var(--sp-ink-2);
	text-decoration: none;
}

.sp-crumb a:hover {
	color: var(--sp-blue-deep);
	text-decoration: underline;
}

/* --- 本文の基本 --- */

.sp-layout #sp-main.sp-main .sp-wrap > p {
	margin: 0 0 1.4em;
}

.sp-layout #sp-main.sp-main .sp-wrap > p:last-child {
	margin-bottom: 0;
}

.sp-lede {
	font-size: clamp(16.5px, 1.5vw, 19px);
	line-height: 1.95;
	color: var(--sp-ink);
}

.sp-mini + .sp-center,
.sp-notice + .sp-center {
	margin-top: 22px;
}

/* --- 補足ブロック --- */

.sp-notice {
	margin: 30px 0;
	padding: 26px 28px;
	background: var(--sp-paper-2);
	border-left: 4px solid var(--sp-blue);
}

.sp-section--tint .sp-notice {
	background: var(--sp-paper);
}

.sp-notice__t {
	margin: 0 0 12px;
	font-size: 17.5px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-notice p {
	margin: 0 0 0.9em;
	font-size: 15.5px;
}

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

.sp-notice ul {
	margin: 0;
	padding-left: 1.3em;
}

.sp-notice li {
	margin-bottom: 0.45em;
	font-size: 15.5px;
}

.sp-notice__f {
	margin-top: 16px !important;
	font-size: 14px !important;
	color: var(--sp-ink-2);
}

/* 管理者にだけ見える案内 */
.sp-adminhint {
	margin: 24px 0 0;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--sp-ink-2);
	background: #fffaf3;
	border: 1px dashed var(--sp-orange);
}

/* --- 番号付きの一覧（写真を伴わない下層ページ版） --- */

.sp-doing__list--wide {
	max-width: 900px;
	margin-inline: auto;
}

/* --- 他ページへの導線（罫 1px で区切った 3 枚） --- */

.sp-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--sp-line);
	border: 1px solid var(--sp-line);
}

.sp-links__i {
	display: block;
	padding: 28px 26px 30px;
	text-decoration: none;
	background: var(--sp-paper);
}

.sp-links__i:hover {
	background: var(--sp-sky-tint);
}

.sp-links__t {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-links__t::after {
	content: " ›";
	color: var(--sp-orange);
}

.sp-links__d {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--sp-ink-3);
}

/* --- ご依頼内容の選択（4 枚） --- */

.sp-pick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--sp-line);
	border: 1px solid var(--sp-line);
}

.sp-pick__i {
	display: block;
	padding: 26px 20px 28px;
	text-align: center;
	text-decoration: none;
	background: var(--sp-paper);
}

.sp-pick__i:hover {
	background: var(--sp-sky-tint);
}

.sp-pick__t {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-pick__t::after {
	content: " ↓";
	color: var(--sp-orange);
}

.sp-pick__d {
	display: block;
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--sp-ink-3);
}

/* --- ご依頼時にお伺いする項目 --- */

.sp-req {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 2px solid var(--sp-blue);
	scroll-margin-top: 90px;
}

.sp-req__h {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-req__l {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-req__l li {
	position: relative;
	padding: 11px 0 11px 20px;
	font-size: 15px;
	border-bottom: 1px solid var(--sp-line);
}

.sp-req__l li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 1.35em;
	width: 7px;
	height: 7px;
	background: var(--sp-sky);
}

/* --- ご相談の例（白地の Q リスト） --- */

.sp-qlist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-qlist li {
	position: relative;
	padding: 16px 0 16px 34px;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid var(--sp-line);
}

.sp-qlist li::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	margin-top: -11px;
	font-family: var(--sp-font-num);
	font-size: 12px;
	font-style: italic;
	font-weight: 800;
	color: #fff;
	background: var(--sp-blue);
	border-radius: 50%;
}

/* --- 料金表 --- */

.sp-priceblk + .sp-priceblk {
	margin-top: 48px;
}

.sp-priceblk__h {
	margin: 0 0 16px;
	padding-left: 14px;
	font-size: 20px;
	font-weight: 700;
	color: var(--sp-blue-deep);
	border-left: 4px solid var(--sp-blue);
}

.sp-scroll {
	overflow-x: auto;
}

.sp-table--price th,
.sp-layout #sp-main.sp-main .sp-table--price th,
.entry-content .sp-table--price th {
	width: auto;
}

.sp-table--price td,
.sp-layout #sp-main.sp-main .sp-table--price td,
.entry-content .sp-table--price td {
	background: var(--sp-paper);
}

.sp-table--price .sp-price,
.sp-layout #sp-main.sp-main .sp-table--price .sp-price {
	white-space: nowrap;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

/* --- 対応エリアの一覧 --- */

.sp-arealist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 34px;
}

.sp-arealist__h {
	margin: 0 0 10px;
	padding-bottom: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sp-blue-deep);
	border-bottom: 2px solid var(--sp-blue);
}

.sp-arealist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-arealist li {
	position: relative;
	padding: 9px 0 9px 18px;
	font-size: 15px;
	border-bottom: 1px solid var(--sp-line);
}

.sp-arealist li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background: var(--sp-sky);
}

/* --- 所在地・地図 --- */

.sp-access {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 38px;
	align-items: start;
}

.sp-access--map {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
}

.sp-access__addr {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--sp-blue-deep);
}

.sp-map {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sp-paper-2);
	border: 1px solid var(--sp-line);
}

.sp-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- 所在地・地図（v0.14.2） --- */

/* 会社案内：会社概要の表と重複しないよう、大きめの地図だけを単独で置く */
.sp-map--lg {
	max-width: 900px;
	margin: 0 auto;
	aspect-ratio: 16 / 7;
}

.sp-access__linkline {
	margin: 16px 0 0;
	text-align: center;
}

/* 対応エリア：PC は「会社情報・リンク」を左、地図を右に。スマホは並び順を変える（下の @media） */
.sp-access--split {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	grid-template-areas: "info map" "link map";
}

.sp-access--split .sp-access__info {
	grid-area: info;
}

.sp-access--split .sp-access__m {
	grid-area: map;
}

.sp-access--split .sp-access__link {
	grid-area: link;
	margin-top: 16px;
}

/* トップページ：会社情報の近くに、会社情報（左）＋地図（右）の2カラムで置く */
.sp-access--front {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	margin-top: 36px;
}

/* --- 写真を並べる --- */

.sp-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

.sp-gallery__i {
	aspect-ratio: 4 / 3;
	min-width: 0;
}

/* --- 作業事例 --- */

.sp-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.sp-jump a {
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sp-blue-deep);
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: 999px;
}

.sp-jump a:hover,
.sp-jump a.is-current {
	color: #fff;
	background: var(--sp-blue-deep);
	border-color: var(--sp-blue-deep);
}

.sp-works {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 28px;
}

.sp-work {
	display: block;
	text-decoration: none;
	color: inherit;
}

.sp-work__shot {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--sp-sky-tint);
}

.sp-work__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(90deg, rgba(31, 174, 238, 0.14) 0 16px, rgba(31, 174, 238, 0.05) 16px 20px);
}

.sp-work__body {
	display: block;
	padding-top: 15px;
}

.sp-work__cat {
	display: inline-block;
	margin-bottom: 9px;
	padding: 3px 11px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--sp-blue);
}

.sp-work__ttl {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow-wrap: anywhere;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sp-blue-deep);
}

.sp-work__ex {
	display: block;
	margin-top: 9px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--sp-ink-2);
}

.sp-work:hover .sp-work__ttl {
	text-decoration: underline;
}

.sp-single__shot {
	aspect-ratio: 16 / 9;
	margin-bottom: 44px;
}

.sp-pager {
	margin-top: 50px;
	text-align: center;
}

.sp-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0 3px 6px;
	padding: 0 10px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sp-blue-deep);
	border: 1px solid var(--sp-line);
}

.sp-pager .page-numbers.current {
	color: #fff;
	background: var(--sp-blue-deep);
	border-color: var(--sp-blue-deep);
}

/* --- フォーム設置領域 --- */

.sp-formarea--none {
	padding: 42px 32px 44px;
	text-align: center;
	background: var(--sp-paper-2);
	border-top: 3px solid var(--sp-blue);
}

.sp-section--tint .sp-formarea--none {
	background: var(--sp-paper);
}

.sp-formarea__ttl {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-formarea__t {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--sp-ink-2);
}

.sp-formarea__hint {
	margin: 26px 0 0;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.8;
	text-align: left;
	color: var(--sp-ink-2);
	background: #fffaf3;
	border: 1px dashed var(--sp-orange);
}

/* プラグインのフォームを入れたときに、デザインから浮かないようにする */
.sp-formarea label {
	display: block;
	margin-bottom: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sp-ink);
}

.sp-formarea input[type="text"],
.sp-formarea input[type="email"],
.sp-formarea input[type="tel"],
.sp-formarea input[type="url"],
.sp-formarea input[type="date"],
.sp-formarea input[type="number"],
.sp-formarea select,
.sp-formarea textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	color: var(--sp-ink);
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: 2px;
}

.sp-formarea textarea {
	min-height: 160px;
}

.sp-formarea input:focus,
.sp-formarea select:focus,
.sp-formarea textarea:focus {
	outline: 2px solid var(--sp-blue);
	outline-offset: 1px;
}

.sp-formarea input[type="submit"],
.sp-formarea button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	min-width: 260px;
	padding: 12px 40px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	background: var(--sp-orange-ink);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.sp-formarea input[type="submit"]:hover,
.sp-formarea button[type="submit"]:hover {
	background: #99400f;
}

/* --- 長文ページ（プライバシーポリシーなど） --- */

.sp-prose {
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--sp-ink);
}

.sp-prose h2 {
	margin: 2.6em 0 0.8em;
	padding-left: 14px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-blue-deep);
	border-left: 4px solid var(--sp-blue);
}

.sp-prose h2:first-child {
	margin-top: 0;
}

.sp-prose p {
	margin: 0 0 1.2em;
}

.sp-prose ul {
	margin: 0 0 1.5em;
	padding-left: 1.4em;
}

.sp-prose li {
	margin-bottom: 0.45em;
}

/* --- 下層ページの CTA --- */

.sp-cta--page {
	padding-block: 84px;
}

.sp-cta__lead {
	max-width: 520px;
	margin: 16px 0 0;
	font-size: 15.5px;
	color: rgba(255, 255, 255, 0.86);
}

.sp-cta__sns {
	margin: 28px 0 0;
	font-size: 14px;
}

.sp-cta__sns a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	border-bottom: 1px solid var(--sp-sky);
}

/* --- フッター（3 列のリンク） --- */

.sp-ft__co {
	max-width: 340px;
}

.sp-ft__biz {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
}

.sp-ft__sns {
	margin: 12px 0 0;
	font-size: 13.5px;
}

.sp-ft__sns a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.sp-ft__cols {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 40px;
}

.sp-ft__h {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: #fff;
}

.sp-ft__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-ft__col li {
	margin-bottom: 8px;
	font-size: 13.5px;
}

.sp-ft__col a {
	color: inherit;
	text-decoration: none;
}

.sp-ft__col a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   12. 下層ページのレスポンシブ
   ========================================================================== */

@media (max-width: 1023px) {
	.sp-phero {
		--sp-phero-pad: 48px;
	}

	.sp-phero--photo .sp-phero__in {
		gap: 36px;
		min-height: 230px;
	}

	.sp-links,
	.sp-pick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-arealist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-access,
	.sp-access--map {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* 対応エリア：スマホは「会社情報 → Google マップ → リンク」の順に積む */
	.sp-access--split {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "info" "map" "link";
		gap: 24px;
	}

	.sp-access--front {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.sp-works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-ft__in {
		gap: 30px;
	}

	.sp-ft__cols {
		gap: 28px;
	}
}

@media (max-width: 767px) {
	/* スマホ：見出し → 写真（画面の端まで）→ トラックの赤ライン の順に積む */
	.sp-phero {
		--sp-phero-pad: 34px;
	}

	.sp-phero__in,
	.sp-phero--photo .sp-phero__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		min-height: 0;
	}

	.sp-phero__shot {
		aspect-ratio: 16 / 10;
		margin: 0 calc(var(--sp-gut) * -1) calc(var(--sp-phero-pad) * -1);
	}

	.sp-phero__eye {
		margin-bottom: 12px;
	}

	.sp-phero__ttl {
		font-size: 26px;
	}

	.sp-phero__lead {
		margin-top: 12px;
		font-size: 14.5px;
	}

	.sp-crumb ol {
		padding-block: 10px;
		font-size: 11.5px;
	}

	.sp-lede {
		font-size: 16px;
	}

	.sp-notice {
		margin: 24px 0;
		padding: 20px 18px;
	}

	.sp-notice__t {
		font-size: 16.5px;
	}

	.sp-notice p,
	.sp-notice li {
		font-size: 15px;
	}

	/* 2 列で並べていたものは、スマートフォンでは 1 列に積む */
	.sp-links,
	.sp-pick,
	.sp-arealist,
	.sp-works,
	.sp-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-links {
		gap: 0;
		border: 0;
		border-top: 1px solid var(--sp-line);
	}

	.sp-links__i {
		padding: 18px 0 20px;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-links__t {
		font-size: 16.5px;
	}

	.sp-pick {
		gap: 0;
		border: 0;
		border-top: 1px solid var(--sp-line);
	}

	.sp-pick__i {
		padding: 16px 0 18px;
		text-align: left;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-arealist {
		gap: 26px;
	}

	.sp-works {
		gap: 30px;
	}

	.sp-req__l,
	.sp-qlist {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.sp-req {
		margin-top: 32px;
	}

	.sp-req__h {
		font-size: 17.5px;
	}

	.sp-req__l li {
		padding: 10px 0 10px 18px;
		font-size: 14.5px;
	}

	.sp-qlist li {
		padding: 13px 0 13px 30px;
		font-size: 15px;
	}

	.sp-priceblk__h {
		font-size: 17.5px;
	}

	/* 料金表は横に長くなるため、この枠だけ横スクロールを許す */
	.sp-scroll {
		margin-inline: calc(var(--sp-gut) * -1);
		padding-inline: var(--sp-gut);
	}

	.sp-table--price th,
	.sp-layout #sp-main.sp-main .sp-table--price th,
	.entry-content .sp-table--price th {
		white-space: nowrap;
	}

	.sp-single__shot {
		margin-bottom: 30px;
	}

	.sp-formarea--none {
		padding: 28px 18px 30px;
	}

	.sp-formarea input[type="submit"],
	.sp-formarea button[type="submit"] {
		width: 100%;
		min-width: 0;
	}

	.sp-prose h2 {
		font-size: 17.5px;
	}

	.sp-cta--page {
		padding-block: 52px;
	}

	.sp-cta__lead {
		margin-top: 12px;
		font-size: 14.5px;
	}

	.sp-ft__co {
		max-width: none;
	}

	.sp-ft__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 20px;
	}

	.sp-jump {
		justify-content: flex-start;
	}

	.sp-jump a {
		padding: 8px 14px;
		font-size: 13px;
	}
}

/* ==========================================================================
   13. 清水ピアノのデザイン言語（全ページ共通のパーツ）
       トップページだけの特殊仕様にしないため、ここにまとめる。
       使い方のルールは docs/08-デザインルール.md。
   ========================================================================== */

/* --- 見出しの改行位置 ---
   日本語の見出しが語の途中（「ご相／談」など）で折り返さないよう、文節で改行させる。
   対応していないブラウザでは従来どおりの改行になるだけ。 */

.sp-h2,
.sp-hero__ttl,
.sp-phero__ttl,
.sp-cta__ttl,
.sp-cases__ttl,
.sp-about__ttl,
.sp-svc__ttl,
.sp-ph__n {
	word-break: auto-phrase;
}

/* --- 他ページへの導線：白地＋罫線（前のセクションが薄い青でも白でも区切りが分かる） --- */

.sp-section--links {
	background: var(--sp-paper);
	border-top: 1px solid var(--sp-line);
}

/* --- 英字ラベル（SHIMIZU PIANO EXPRESS）---
   正式ロゴの文字要素を小さな英字ラベルとして使う。ロゴそのものは改変しない。
   使う場所はファーストビューと CTA の 2 か所だけ（繰り返さない）。 */

.sp-label {
	display: inline-block;
	margin: 0;
	font-family: var(--sp-font-num);
	font-size: 12px;
	font-style: italic;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.14em;
	color: var(--sp-blue);
}

.sp-label--w {
	color: #fff;
}

/* --- トラックの帯（青い帯＋白いすき間＋細い赤ライン）--- */

.sp-band {
	display: block;
	height: 18px;
	background: linear-gradient(180deg, var(--sp-blue) 0 12px, #fff 12px 15px, var(--sp-red) 15px 18px);
}

/* --- 大きな番号＋英字（01 / PIANO TRANSPORT）--- */

.sp-num {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 4px 14px;
	margin: 0 0 18px;
	line-height: 1;
}

.sp-num__n {
	font-family: var(--sp-font-num);
	font-size: clamp(56px, 6vw, 86px);
	font-style: italic;
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.03em;
	color: var(--sp-blue);
}

.sp-num__en {
	padding-bottom: 4px;
	font-family: var(--sp-font-num);
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--sp-blue-deep);
}

.sp-num--w .sp-num__n {
	color: #fff;
}

.sp-num--w .sp-num__en {
	color: rgba(255, 255, 255, 0.88);
}

/* ページ見出しの番号は少し小さく（見出し h1 より目立たせない） */
.sp-phero .sp-num__n {
	font-size: clamp(48px, 4.6vw, 68px);
}

/* --- トップ「できること」：大きな番号＋写真を左右交互に --- */

.sp-svc__rows {
	display: flex;
	flex-direction: column;
	gap: 104px;
}

.sp-svc__row {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
}

.sp-svc__row--rev {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.sp-svc__row--rev .sp-svc__shot {
	order: 2;
}

.sp-svc__shot {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3;
	min-width: 0;
}

/* 文章は白い面にして写真の端に少し重ねる */
.sp-svc__body {
	position: relative;
	z-index: 2;
	min-width: 0;
	margin-left: -80px;
	padding: 46px 48px 48px;
	background: var(--sp-paper);
}

.sp-svc__row--rev .sp-svc__body {
	margin-left: 0;
	margin-right: -80px;
}

.sp-svc__ttl {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.45;
	color: var(--sp-blue-deep);
}

.sp-svc__text {
	margin: 0;
	font-size: 15.5px;
	color: var(--sp-ink-2);
}

/* 写真が無い段（訪問者に写真未設定のとき）：番号と文章だけで成立させる */
.sp-svc__row--text {
	grid-template-columns: minmax(0, 1fr);
	padding-top: 34px;
	border-top: 1px solid var(--sp-line);
}

.sp-svc__row--text .sp-svc__body,
.sp-svc__row--rev.sp-svc__row--text .sp-svc__body {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	column-gap: 48px;
	margin: 0;
	padding: 0;
}

.sp-svc__row--text .sp-svc__num {
	grid-row: span 3;
}

.sp-svc__row--text + .sp-svc__row--text {
	margin-top: -56px;
}

/* 広い画面では写真を少しコンテナの外へはみ出させる */
@media (min-width: 1360px) {
	.sp-svc__row:not(.sp-svc__row--rev) .sp-svc__shot {
		margin-left: -80px;
	}

	.sp-svc__row--rev .sp-svc__shot {
		margin-right: -80px;
	}
}

/* --- 番号付きの説明（下層ページ）：番号を大きく、段組みで見せる --- */

.sp-doing__list--wide {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 56px;
	max-width: none;
	border-top: 0;
}

.sp-doing__list--wide:has(> li:nth-child(3):last-child),
.sp-doing__list--wide:has(> li:nth-child(5)) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sp-doing__list--wide li {
	display: block;
	padding: 26px 0 34px;
	border-top: 2px solid var(--sp-blue-deep);
	border-bottom: 0;
}

.sp-doing__list--wide .sp-doing__no {
	display: block;
	margin-bottom: 16px;
	font-size: 58px;
	line-height: 0.9;
}

.sp-doing__list--wide h3 {
	font-size: 19px;
}

/* 写真と並べるときの縦積み版 */
.sp-doing__list--stack li {
	grid-template-columns: 74px minmax(0, 1fr);
}

.sp-doing__list--stack .sp-doing__no {
	font-size: 44px;
	line-height: 1;
}

/* --- 青い面（こんなときに）：見出しを左、内容を右に --- */

@media (min-width: 1024px) {
	.sp-cases > .sp-wrap {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 0 64px;
		align-items: start;
	}

	.sp-cases__head {
		grid-row: span 2;
		margin: 0;
		text-align: left;
	}

	.sp-cases__ttl {
		font-size: clamp(26px, 2.7vw, 36px);
		line-height: 1.45;
	}

	.sp-cases__ttl::after {
		margin-left: 0;
	}

	.sp-cases__list {
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.sp-cases__note {
		grid-column: 2;
		text-align: left;
	}
}

/* --- 文章＋縦長の写真（左右分割）--- */

.sp-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: 64px;
	align-items: start;
}

.sp-split--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 840px;
	margin-inline: auto;
}

.sp-split__body {
	min-width: 0;
}

.sp-split__shot {
	position: sticky;
	top: 110px;
	aspect-ratio: 3 / 4;
	min-width: 0;
}

/* --- 写真のモザイク（大きな写真＋小さな写真）--- */

.sp-mosaic {
	display: grid;
	gap: 14px;
	grid-auto-rows: 230px;
}

.sp-mosaic__i {
	min-width: 0;
	height: 100%;
}

.sp-mosaic--4 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.sp-mosaic--4 .sp-mosaic__i:nth-child(1) {
	grid-row: span 2;
}

.sp-mosaic--4 .sp-mosaic__i:nth-child(2) {
	grid-column: span 2;
}

.sp-mosaic--3 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.sp-mosaic--3 .sp-mosaic__i:nth-child(1) {
	grid-row: span 2;
}

.sp-mosaic--2 {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	grid-auto-rows: 340px;
}

.sp-mosaic--1 {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 440px;
}

/* --- 13 のレスポンシブ --- */

@media (max-width: 1023px) {
	.sp-svc__rows {
		gap: 80px;
	}

	.sp-svc__row,
	.sp-svc__row--rev {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-svc__row--rev .sp-svc__shot {
		order: 0;
	}

	.sp-svc__body,
	.sp-svc__row--rev .sp-svc__body {
		width: 86%;
		margin: -64px 0 0;
		padding: 30px 32px 0 0;
	}

	.sp-svc__row--rev .sp-svc__body {
		margin-left: auto;
		padding: 30px 0 0 32px;
	}

	.sp-doing__list--wide,
	.sp-doing__list--wide:has(> li:nth-child(3):last-child),
	.sp-doing__list--wide:has(> li:nth-child(5)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 36px;
	}

	.sp-split {
		gap: 40px;
	}

	.sp-mosaic {
		grid-auto-rows: 180px;
	}
}

@media (max-width: 767px) {
	.sp-num__n {
		font-size: 58px;
	}

	.sp-phero .sp-num__n {
		font-size: 50px;
	}

	.sp-num__en {
		font-size: 11px;
	}

	.sp-band {
		height: 14px;
		background: linear-gradient(180deg, var(--sp-blue) 0 8px, #fff 8px 11px, var(--sp-red) 11px 14px);
	}

	/* できること：写真は画面の端まで、白い面を写真の下に重ねる */
	.sp-svc__rows {
		gap: 56px;
	}

	.sp-svc__shot {
		aspect-ratio: 3 / 2;
		margin-inline: calc(var(--sp-gut) * -1);
	}

	.sp-svc__body,
	.sp-svc__row--rev .sp-svc__body {
		width: 90%;
		margin-top: -44px;
		padding: 22px 20px 0 0;
	}

	.sp-svc__row--rev .sp-svc__body {
		padding: 22px 0 0 20px;
	}

	.sp-svc__text {
		font-size: 15px;
	}

	.sp-svc__row--text .sp-svc__body,
	.sp-svc__row--rev.sp-svc__row--text .sp-svc__body {
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
	}

	.sp-svc__row--text + .sp-svc__row--text {
		margin-top: -24px;
	}

	.sp-doing__list--wide,
	.sp-doing__list--wide:has(> li:nth-child(3):last-child),
	.sp-doing__list--wide:has(> li:nth-child(5)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-doing__list--wide li {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 12px;
		padding: 20px 0 22px;
		border-top-width: 1px;
		border-top-color: var(--sp-line);
	}

	.sp-doing__list--wide li:first-child {
		border-top: 2px solid var(--sp-blue-deep);
	}

	.sp-doing__list--wide .sp-doing__no {
		margin: 0;
		font-size: 40px;
	}

	.sp-doing__list--wide h3 {
		font-size: 17.5px;
	}

	.sp-doing__list--stack li {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.sp-doing__list--stack .sp-doing__no {
		font-size: 36px;
	}

	.sp-split,
	.sp-split--solo {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sp-split__shot {
		position: static;
		aspect-ratio: 4 / 3;
		margin-inline: calc(var(--sp-gut) * -1);
	}

	.sp-mosaic {
		gap: 8px;
		grid-auto-rows: 130px;
	}

	.sp-mosaic--4,
	.sp-mosaic--3,
	.sp-mosaic--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 130px;
	}

	.sp-mosaic--4 .sp-mosaic__i:nth-child(1),
	.sp-mosaic--3 .sp-mosaic__i:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.sp-mosaic--4 .sp-mosaic__i:nth-child(2) {
		grid-column: auto;
	}

	.sp-mosaic--4 .sp-mosaic__i:nth-child(4) {
		grid-column: span 2;
	}

	.sp-mosaic--1 {
		grid-auto-rows: 230px;
	}

	.sp-ph {
		min-height: 150px;
		padding: 18px 14px;
	}

	.sp-ph__n {
		font-size: 19px;
	}
}

/* ==========================================================================
   フォームのページ（/contact/・/request/）v0.5.2
   開いた人が「どこから入力するのか」迷わないよう、説明の直後にフォームを置く。
   通常のセクション（上下 108px）を重ねるとフォームまでが遠くなるため、
   フォームのセクションだけ上の余白を詰め、説明もフォームの幅（840px）に揃える。
   ========================================================================== */

.sp-section--form {
	padding-top: 44px;
}

/* 見出しの帯：フォームのページは補足文がないため低くする（PC で間延びさせない） */
.sp-formpage .sp-phero {
	--sp-phero-pad: 40px;
}

.sp-formpage .sp-phero__in {
	min-height: 0;
}

.sp-section--form {
	padding-bottom: 72px;
}

.sp-section--compact {
	padding-block: 56px;
}

.sp-layout #sp-main.sp-main .sp-inflow__note,
.sp-inflow__note {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--sp-ink-3);
}

.sp-formlead {
	margin: 0 0 8px;
	font-size: clamp(16px, 1.4vw, 17.5px);
	font-weight: 700;
	line-height: 1.8;
	color: var(--sp-ink);
}

.sp-layout #sp-main.sp-main .sp-wrap > p.sp-formlead {
	margin-bottom: 8px;
}

.sp-formlead + .sp-formarea,
.sp-formlead + .sp-formnote + .sp-formarea {
	margin-top: 22px;
}

.sp-formnote {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--sp-ink-2);
}

.sp-layout #sp-main.sp-main .sp-wrap > p.sp-formnote {
	margin-bottom: 22px;
}

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

/* --- フォーム入力の流れ（/request/・フォームの直前） --- */

.sp-inflow {
	margin: 0 0 32px;
	padding: 18px 20px 20px;
	background: var(--sp-paper-2);
	border: 1px solid var(--sp-line);
}

.sp-inflow__h {
	margin: 0 0 12px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sp-blue-deep);
	border: 0;
	background: none;
}

.sp-inflow__l {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sp-inflow__i {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.sp-inflow__i::before {
	content: none;
}

.sp-inflow__no {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-family: var(--sp-font-num, inherit);
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
	color: #fff;
	background: var(--sp-blue);
	border-radius: 50%;
}

.sp-inflow__b {
	display: block;
	min-width: 0;
}

.sp-inflow__t {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sp-ink);
}

.sp-inflow__d {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--sp-ink-3);
}

/* --- フォームの後の「実際のご依頼はこちら」（/contact/） --- */

.sp-nextbox {
	display: flex;
	align-items: center;
	gap: 20px 32px;
	padding: 26px 28px;
	background: var(--sp-paper);
	border-left: 4px solid var(--sp-orange-ink);
}

.sp-nextbox__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-nextbox__t {
	margin: 0 0 6px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-ink);
	border: 0;
	background: none;
}

.sp-layout #sp-main.sp-main .sp-nextbox__d,
.sp-nextbox__d {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--sp-ink-2);
}

.sp-nextbox__btn {
	flex: none;
}

@media (max-width: 1023px) {
	.sp-inflow__l {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 16px;
	}
}

@media (max-width: 767px) {
	.sp-formpage .sp-phero {
		--sp-phero-pad: 28px;
	}

	.sp-section--form {
		padding-top: 22px;
		padding-bottom: 48px;
	}

	.sp-formnote {
		margin-bottom: 18px;
		font-size: 14px;
		line-height: 1.75;
	}

	.sp-layout #sp-main.sp-main .sp-wrap > p.sp-formnote {
		margin-bottom: 18px;
	}

	.sp-section--compact {
		padding-block: 40px;
	}

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

	.sp-inflow {
		margin-bottom: 24px;
		padding: 12px 14px 14px;
	}

	.sp-inflow__h {
		margin-bottom: 10px;
	}

	.sp-inflow__l {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.sp-inflow__i {
		align-items: center;
	}

	.sp-inflow__i.is-keep {
		align-items: flex-start;
	}

	/* スマートフォンでは手順名だけを 1 行ずつ（写真の説明だけ残す）。フォームまでを短くする */
	.sp-inflow__i:not(.is-keep) .sp-inflow__d {
		display: none;
	}

	.sp-inflow__t {
		font-size: 14.5px;
	}

	.sp-inflow__no {
		width: 24px;
		height: 24px;
		font-size: 13px;
	}

	.sp-nextbox {
		flex-direction: column;
		align-items: stretch;
		padding: 20px 18px;
	}

	.sp-nextbox__btn {
		width: 100%;
	}
}

/* ==========================================================================
   14. 公開前仕上げ（v0.6.0）
   ========================================================================== */

/* --- ボタンのフォーカス表示（リンクと同じオレンジの枠） --- */
.sp-site button:focus-visible,
.sp-site .sp-btn:focus-visible {
	outline: 3px solid var(--sp-orange-ink);
	outline-offset: 3px;
}

/*
  入れ子メニュー：assets/js/shimizu.js が動いたとき（<html class="sp-js">）は
  キーボードでの開閉を .is-open で管理する（Esc で閉じられるように）。
  マウスのホバーでは今まで通り開く。スクリプトが無い環境では :focus-within のまま。
*/
.sp-js .sp-nav__grp:focus-within .sp-nav__sub {
	visibility: hidden;
	opacity: 0;
}

.sp-js .sp-nav__grp:hover .sp-nav__sub,
.sp-js .sp-nav__grp.is-open .sp-nav__sub {
	visibility: visible;
	opacity: 1;
}

.sp-js .sp-nav__grp.is-open .sp-nav__t {
	color: var(--sp-blue-deep);
}

/* --- よくある質問：分類ごとの「詳しいページ」への導線 --- */
.sp-faq__more {
	margin: 18px 0 0;
	text-align: right;
}

.sp-faq__more .sp-more {
	margin-top: 0;
}

/* --- ご依頼の流れ：お支払い・キャンセル・補償（入力されたときだけ出る） --- */
.sp-terms {
	margin: 0;
	border-top: 1px solid var(--sp-line);
}

.sp-terms dt {
	padding: 18px 0 4px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-terms dd {
	margin: 0;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--sp-line);
	color: var(--sp-ink-2);
}

/* --- 長い語（URL・型番など）でスマートフォンの横幅がはみ出さないように --- */
.sp-layout #sp-main.sp-main {
	overflow-wrap: break-word;
}

.sp-phero__ttl {
	overflow-wrap: anywhere;
}

/* --- スマートフォンのタップしやすさ（「詳しく見る」・表の中のリンク） --- */
@media (max-width: 767px) {
	.sp-site .sp-more {
		padding-top: 8px;
		padding-bottom: 6px;
	}

	.sp-table td a {
		display: inline-block;
		padding: 8px 0;
	}
}

/* --- 作業事例：アイキャッチが無いときは、トラックの帯（青＋白いすき間＋細い赤ライン）で埋める --- */
.sp-work__noimg {
	background:
		linear-gradient(to bottom,
			transparent 0 72%,
			#fff 72% 75%,
			var(--sp-red) 75% 76.5%,
			transparent 76.5%),
		var(--sp-blue-deep);
}

.sp-jump[aria-label="作業種別で絞り込む"] {
	margin-bottom: 32px;
}

/* ==========================================================================
   15. 打ち合わせ決定シートの反映（v0.7.0）
   その他サービス・中古ピアノ販売・買取・採用情報・対応エリア（全国配送）・LINE
   カードを並べず、青い罫と英字ラベルで区切る（docs/08-デザインルール.md）。
   ========================================================================== */

/* --- 白地の上で使う青い枠のボタン（会社案内 → 採用情報など） --- */
.sp-btn--blue {
	color: var(--sp-blue-deep);
	background: var(--sp-paper);
	border-color: var(--sp-blue-deep);
}

.sp-btn--blue:hover,
.sp-btn--blue:focus {
	color: #fff;
	background: var(--sp-blue-deep);
}

.sp-nextbox--blue {
	border-left-color: var(--sp-blue);
}

/* --- トップ「できること」の下：その他サービス（1 つの帯にまとめる） --- */
.sp-svcx {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 18px 56px;
	margin-top: 104px;
	padding: 42px 48px 40px;
	background: var(--sp-paper-2);
	border-top: 3px solid var(--sp-blue);
}

.sp-svcx__head {
	grid-row: span 2;
}

.sp-svcx__num {
	margin-bottom: 12px;
}

.sp-svcx__ttl {
	margin: 0 0 10px;
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 700;
	line-height: 1.45;
	color: var(--sp-blue-deep);
}

.sp-svcx__lead {
	margin: 0;
	font-size: 15px;
	color: var(--sp-ink-2);
}

.sp-svcx__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-svcx__list li {
	margin: 0;
	border-bottom: 1px solid var(--sp-line);
}

.sp-svcx__list li::before,
.sp-svcx__list li::marker {
	content: none;
}

.sp-svcx__list a,
.sp-svcx__list span {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-blue-deep);
	text-decoration: none;
}

.sp-svcx__list a::after {
	content: "›";
	color: var(--sp-orange);
}

.sp-svcx__list a:hover {
	background: var(--sp-sky-tint);
}

.sp-svcx > .sp-more {
	grid-column: 2;
	justify-self: start;
	margin-top: 6px;
}

/* --- 中古ピアノ販売・買取：2 つの窓口を左右に --- */
.sp-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.sp-duo__i {
	min-width: 0;
	padding: 34px 34px 32px;
	background: var(--sp-paper);
	border-top: 3px solid var(--sp-blue);
	scroll-margin-top: 110px;
}

.sp-duo__en,
.sp-others__en {
	margin: 0 0 6px;
	font-family: var(--sp-font-num);
	font-size: 11.5px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--sp-blue);
}

.sp-duo__t {
	margin: 0 0 12px;
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-duo__d {
	margin: 0 0 20px;
	font-size: 15.5px;
	color: var(--sp-ink);
}

.sp-duo__h {
	margin: 0 0 8px;
	padding-top: 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-blue-deep);
	border-top: 1px solid var(--sp-line);
}

.sp-duo__l {
	margin: 0;
	padding-left: 1.3em;
}

.sp-duo__l li {
	margin-bottom: 0.35em;
	font-size: 14.5px;
	color: var(--sp-ink-2);
}

/* --- その他サービス：1 行 1 サービス（英字ラベル＋名前 ／ 紹介文） --- */
.sp-others {
	border-top: 2px solid var(--sp-blue);
}

.sp-others__i {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 8px 40px;
	padding: 30px 0;
	border-bottom: 1px solid var(--sp-line);
	scroll-margin-top: 110px;
}

.sp-others__t {
	grid-column: 1;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-blue-deep);
}

.sp-others__en {
	grid-column: 1;
	margin: 0;
}

.sp-others__d {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	font-size: 15.5px;
	color: var(--sp-ink-2);
}

/* --- 対応エリア：拠点と対応地域 --- */
.sp-areabase {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 24px;
	margin: 0 0 8px;
}

.sp-areabase__i {
	min-width: 0;
	padding: 26px 30px 28px;
	background: var(--sp-paper);
	border-top: 3px solid var(--sp-blue);
}

.sp-areabase dt {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--sp-blue);
}

.sp-areabase dd {
	margin: 0;
}

.sp-areabase dd strong {
	display: block;
	margin-bottom: 4px;
	font-size: clamp(20px, 2vw, 24px);
	color: var(--sp-blue-deep);
}

.sp-areabase dd span {
	display: block;
	font-size: 14.5px;
	color: var(--sp-ink-2);
}

.sp-areabase dd .sp-areabase__txt {
	font-size: 16px;
	line-height: 1.9;
	color: var(--sp-ink);
}

.sp-arealist__lead {
	margin: 36px 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

/* --- 会社情報（トップ）：会社案内・採用情報のリンクを並べる --- */
.sp-info__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin: 14px 0 0;
}

/* --- 採用情報 --- */
.sp-layout #sp-main.sp-main .sp-table--recruit th {
	width: 30%;
}

/* --- LINE（公式アカウントの URL・QR が設定されたときだけ出る） --- */
.sp-btn--line {
	color: #fff;
	background: #06803f; /* LINE の緑を白文字で読める濃さに（コントラスト 5:1 以上） */
}

.sp-btn--line:hover,
.sp-btn--line:focus {
	color: #fff;
	background: #05652f;
}

.sp-linebox {
	display: flex;
	align-items: center;
	gap: 20px 32px;
	padding: 26px 28px;
	background: var(--sp-paper-2);
	border-left: 4px solid #06803f;
}

.sp-linebox__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-linebox__t {
	margin: 0 0 6px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sp-ink);
	border: 0;
	background: none;
}

.sp-layout #sp-main.sp-main .sp-linebox__d,
.sp-linebox__d {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--sp-ink-2);
}

.sp-linebox__qr {
	flex: none;
	width: 140px;
	margin: 0;
}

.sp-linebox__qr img {
	display: block;
	width: 100%;
	height: auto;
}

.sp-mn__p .sp-mn__line {
	font-weight: 700;
	color: #06803f;
}

.sp-ft__sns a + a {
	margin-left: 18px;
}

@media (max-width: 1023px) {
	.sp-svcx {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 80px;
		padding: 34px 32px;
	}

	.sp-svcx__head {
		grid-row: auto;
	}

	.sp-svcx > .sp-more {
		grid-column: auto;
	}

	.sp-others__i {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-others__d {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 767px) {
	.sp-svcx {
		margin-top: 56px;
		padding: 28px 20px 26px;
	}

	.sp-svcx__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-duo,
	.sp-areabase {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.sp-duo__i {
		padding: 26px 20px 24px;
	}

	.sp-areabase__i {
		padding: 22px 20px 24px;
	}

	.sp-others__i {
		padding: 24px 0;
	}

	.sp-others__t {
		font-size: 18.5px;
	}

	.sp-linebox {
		flex-direction: column;
		align-items: stretch;
		padding: 20px 18px;
	}

	.sp-linebox .sp-btn--line {
		width: 100%;
	}

	/* URL があるときは、スマートフォンでは QR コードを出さずボタンだけ */
	.sp-linebox__pc {
		display: none;
	}

	.sp-layout #sp-main.sp-main .sp-table--recruit th {
		width: auto;
	}
}

/* --- 他ページへの導線：件数が 3 の倍数でないとき（v0.7.0 でサービスが 4 つになった）
       空いたマスを灰色の面にせず白のまま残し、罫線は項目にだけ引く。ちょうど 4 件なら PC では 4 列 --- */
@media (min-width: 768px) {
	.sp-links {
		gap: 0;
		background: none;
		border: 0;
		border-top: 1px solid var(--sp-line);
		border-left: 1px solid var(--sp-line);
	}

	.sp-links__i {
		border-right: 1px solid var(--sp-line);
		border-bottom: 1px solid var(--sp-line);
	}
}

@media (min-width: 1024px) {
	.sp-links:has(> .sp-links__i:nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- 所在地：地図が未設定のときは住所だけを中央に（左半分を空白にしない） --- */
.sp-access--nomap {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

/* --- v0.7.1：サービスごとのご依頼リンク（フォームの「ご希望の内容」を選んだ状態で開く） --- */
.sp-others__go,
.sp-duo__i > .sp-more {
	display: table;
	margin-top: 12px;
}

/* =========================================================================
   v0.9.0：学校・施設・演奏会の楽器運搬
   ========================================================================= */

/* --- トップ：3 サービスの下の 1 本の帯（カードを増やさず、写真・短い文・リンクで仕事の幅を見せる） --- */
.sp-instband {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	align-items: center;
	margin-top: 104px;
	padding-top: 40px;
	border-top: 1px solid var(--sp-line);
}

.sp-instband--text {
	grid-template-columns: minmax(0, 1fr);
	max-width: 840px;
}

.sp-instband__shot {
	aspect-ratio: 3 / 2;
	min-width: 0;
}

.sp-instband__body {
	min-width: 0;
}

.sp-instband__num {
	margin-bottom: 12px;
}

.sp-instband__ttl {
	margin: 0 0 12px;
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 700;
	line-height: 1.45;
	color: var(--sp-blue-deep);
}

.sp-instband__text {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--sp-ink-2);
}

/* 帯の直後の「その他サービス」は上の余白を詰める */
.sp-instband + .sp-wrap .sp-svcx,
.sp-wrap:has(> .sp-instband) + .sp-wrap .sp-svcx {
	margin-top: 64px;
}

/* --- ピアノ配送・移動ページ #instruments --- */
.sp-inst__intro {
	max-width: 840px;
}

.sp-inst__intro p {
	margin: 0;
	font-size: 16px;
	line-height: 2;
}

.sp-inst .sp-inst__cap {
	margin: 34px 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sp-blue-deep);
}

/* 往復の運搬の流れ（横一列。本番だけ青い面） */
.sp-inst__route {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
}

.sp-inst__route li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 18px 20px 18px 22px;
	border-left: 1px solid var(--sp-line);
}

.sp-inst__route li:first-child {
	border-left: 0;
}

/* 区切りの矢印（次の段へ） */
.sp-inst__route li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -7px;
	z-index: 1;
	width: 12px;
	height: 12px;
	background: var(--sp-paper);
	border-top: 1px solid var(--sp-line);
	border-right: 1px solid var(--sp-line);
	transform: translateY(-50%) rotate(45deg);
}

.sp-inst__route li.is-stage {
	justify-content: center;
	background: var(--sp-blue-deep);
	color: #fff;
}

.sp-inst__route li.is-stage::after {
	background: var(--sp-blue-deep);
	border-color: var(--sp-blue-deep);
}

.sp-inst__no {
	font-family: var(--sp-font-num);
	font-size: 13px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--sp-blue);
}

.sp-inst__route li.is-stage .sp-inst__no {
	color: rgba(255, 255, 255, 0.8);
}

.sp-inst__t {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.5;
}

.sp-inst__d {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--sp-ink-2);
}

.sp-inst__body {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px;
	align-items: start;
	margin-top: 36px;
}

.sp-inst__body--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 840px;
}

.sp-inst__ask {
	margin: 0;
}

.sp-inst__shots {
	display: grid;
	gap: 14px;
	min-width: 0;
}

.sp-inst__shot {
	aspect-ratio: 3 / 2;
	min-width: 0;
}

.sp-inst__act {
	margin-top: 36px;
	text-align: center;
}

.sp-inst__act-t {
	margin: 0 0 18px;
	font-size: 15px;
}

.sp-inst__act-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

@media (max-width: 1023px) {
	.sp-instband {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		margin-top: 80px;
	}

	.sp-instband__shot {
		max-width: 640px;
	}

	.sp-inst__route {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-inst__route li {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 12px;
		padding: 14px 18px;
		border-left: 0;
		border-top: 1px solid var(--sp-line);
	}

	.sp-inst__route li:first-child {
		border-top: 0;
	}

	.sp-inst__route li:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -7px;
		left: 26px;
		transform: rotate(135deg);
	}

	.sp-inst__route li.is-stage {
		justify-content: flex-start;
	}

	.sp-inst__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.sp-inst__shots--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sp-instband {
		margin-top: 56px;
		padding-top: 30px;
	}

	.sp-instband__text {
		font-size: 15px;
	}

	.sp-instband + .sp-wrap .sp-svcx,
	.sp-wrap:has(> .sp-instband) + .sp-wrap .sp-svcx {
		margin-top: 44px;
	}

	.sp-inst__intro p {
		font-size: 15px;
	}

	.sp-inst__shots--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-inst__act-btns {
		flex-direction: column;
	}

	.sp-inst__act .sp-btn {
		width: 100%;
	}
}

/* --- 採用情報：メインコピー（候補・カスタマイザーで変更可）と仕事の風景 --- */
.sp-recruit__catch {
	margin: 0 0 22px;
	font-size: clamp(24px, 3.2vw, 36px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--sp-blue-deep);
}

.sp-recruit__shots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-recruit__shots--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
}

.sp-recruit__shots--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-recruit__shot {
	aspect-ratio: 3 / 2;
	min-width: 0;
}

@media (max-width: 767px) {
	.sp-recruit__shots,
	.sp-recruit__shots--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   v0.10.0：採用情報ページ（/recruit/）
   PASONA の順番を下敷きにしているが、求人サイトのテンプレートに見せない。
   トップページと同じファーストビュー（全幅写真＋濃紺＋トラックの帯）・大きな番号・青い罫線で組み、
   カードを並べない。赤はトラックの帯の細いラインだけ（文字・面には使わない）。

   v0.14.0：「宮崎で働く」「仕事のリアル」の 2 セクションを追加（県外からの転職・移住にも届けるため）。
   新しいカード・新しい色は増やさず、.sp-rc-narrow__list などの既存の見せ方を使い回している。
   ========================================================================= */

/* --- ファーストビュー（.sp-hero を使い、高さだけ下層ページ向けに） --- */
.sp-hero--recruit {
	min-height: min(78vh, 680px);
	padding-block: 96px 150px;
}

.sp-hero--recruit .sp-hero__shot img {
	object-position: 50% 50%;
}

/* 訪問者で写真が未設定のとき：濃紺の面だけなので高さを詰める */
.sp-hero--recruit:not(.sp-hero--photo):not(.sp-hero--guide) {
	min-height: 0;
	padding-block: 84px 118px;
}

.sp-rfv__ttl {
	display: block;
}

.sp-rfv__kicker {
	display: block;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: none;
}

.sp-rfv__catch {
	display: block;
}

.sp-hero--recruit .sp-hero__lead {
	max-width: 580px;
	line-height: 1.95;
}

/* --- P：こんな仕事に興味はありませんか --- */
.sp-rc-interest__in {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: start;
}

.sp-rc-interest__head .sp-hd2 {
	margin-bottom: 0;
}

.sp-rc-interest__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sp-line);
}

.sp-rc-interest__list li {
	position: relative;
	margin: 0;
	padding: 22px 0 22px 36px;
	font-size: clamp(17px, 1.7vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	color: var(--sp-blue-deep);
	border-bottom: 1px solid var(--sp-line);
}

.sp-rc-interest__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(22px + 0.8em);
	width: 20px;
	height: 3px;
	background: var(--sp-blue);
}

/* --- A：音楽が始まる、その前を支える仕事 --- */
.sp-rc-stage__text {
	max-width: 780px;
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 2;
}

.sp-rc-stage .sp-inst__cap {
	margin: 34px 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sp-blue-deep);
}

.sp-rc-stage__shots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 36px;
}

.sp-rc-stage__shots--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
}

.sp-rc-stage__shot {
	aspect-ratio: 3 / 2;
	min-width: 0;
}

/* --- S：清水ピアノの仕事（大きな番号） --- */
.sp-rc-jobs__lead {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
}

.sp-rc-jobs__lead--text {
	grid-template-columns: minmax(0, 1fr);
	max-width: 840px;
}

.sp-rc-jobs__shot {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3;
	min-width: 0;
}

/* 文章は白い面にして写真の端に少し重ねる（トップ「できること」と同じ組み方） */
.sp-rc-jobs__body {
	position: relative;
	z-index: 2;
	min-width: 0;
	margin-left: -80px;
	padding: 44px 46px 46px;
	background: var(--sp-paper);
	box-shadow: 0 18px 44px rgba(13, 74, 134, 0.12);
}

.sp-rc-jobs__lead--text .sp-rc-jobs__body {
	margin-left: 0;
	padding: 0;
	box-shadow: none;
}

.sp-rc-jobs__ttl {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.45;
	color: var(--sp-blue-deep);
}

.sp-rc-jobs__ttl--s {
	font-size: clamp(18px, 1.7vw, 21px);
}

.sp-rc-jobs__text {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--sp-ink-2);
}

.sp-rc-jobs__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 72px 0 22px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sp-line);
}

.sp-rc-jobs__item {
	min-width: 0;
	margin: 0;
	padding: 30px 32px 10px 0;
}

.sp-rc-jobs__item + .sp-rc-jobs__item {
	padding-left: 32px;
	border-left: 1px solid var(--sp-line);
}

.sp-rc-jobs__num {
	margin-bottom: 14px;
}

.sp-rc-jobs__num .sp-num__n {
	font-size: clamp(44px, 4.4vw, 62px);
}

/* --- O：募集内容 --- */
.sp-rc-offer__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: start;
}

.sp-rc-offer__grid--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
}

.sp-rc-offer__main {
	min-width: 0;
}

.sp-rc-offer__main > .sp-table,
.sp-rc-offer__notice {
	margin-top: 0;
}

.sp-rc-offer__shot {
	aspect-ratio: 3 / 2;
	min-width: 0;
}

.sp-rc-offer__act {
	margin-top: 28px;
}

/* --- N：仕事について知っておいてほしいこと --- */
.sp-rc-narrow__h {
	margin: 40px 0 14px;
	font-size: 18px;
	font-weight: 700;
	color: var(--sp-blue-deep);
}

.sp-rc-narrow__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sp-line);
}

.sp-rc-narrow__list li {
	position: relative;
	margin: 0;
	padding: 16px 0 16px 28px;
	line-height: 1.85;
	border-bottom: 1px solid var(--sp-line);
}

.sp-rc-narrow__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(16px + 0.9em);
	width: 14px;
	height: 2px;
	background: var(--sp-blue);
}

/* --- 宮崎で働く（v0.14.0） --- */
.sp-rc-miyazaki__text {
	max-width: 720px;
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 2;
}

.sp-rc-miyazaki__list {
	max-width: 720px;
}

/* --- 仕事のリアル（v0.14.0） --- */
.sp-rc-real .sp-rc-narrow__list {
	max-width: 720px;
}

/* --- A：採用についてのお問い合わせ・応募 --- */
.sp-rc-apply__note {
	margin: 0 0 24px;
	line-height: 1.9;
}

.sp-rc-apply__box {
	margin-top: 0;
}

.sp-rc-apply__tel {
	margin: 22px 0 0;
	font-size: 14.5px;
	color: var(--sp-ink-2);
}

@media (max-width: 1023px) {
	.sp-rc-interest__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.sp-rc-jobs__lead {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-rc-jobs__shot {
		max-width: 720px;
	}

	.sp-rc-jobs__body {
		margin: -48px 24px 0;
		padding: 32px 30px 34px;
	}

	.sp-rc-offer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.sp-rc-offer__shot {
		max-width: 640px;
	}
}

@media (max-width: 767px) {
	.sp-hero--recruit,
	.sp-hero--recruit:not(.sp-hero--photo):not(.sp-hero--guide) {
		min-height: 0;
		padding: 0;
	}

	/* 写真がないとき（訪問者）も、トラックの帯は見出しブロックの下に敷く */
	.sp-hero--recruit:not(.sp-hero--photo):not(.sp-hero--guide) .sp-hero__band {
		order: 4;
	}

	.sp-rfv__kicker {
		margin-bottom: 10px;
		font-size: 13px;
		letter-spacing: 0.16em;
	}

	.sp-rc-interest__list li {
		padding: 16px 0 16px 30px;
		font-size: 16.5px;
	}

	.sp-rc-interest__list li::before {
		top: calc(16px + 0.8em);
		width: 16px;
	}

	.sp-rc-stage__text {
		font-size: 15.5px;
		line-height: 1.95;
	}

	.sp-rc-stage__text br {
		display: none;
	}

	.sp-rc-miyazaki__text {
		font-size: 15px;
	}

	.sp-rc-miyazaki__text br {
		display: none;
	}

	.sp-rc-stage__shots,
	.sp-rc-stage__shots--1 {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 26px;
	}

	.sp-rc-jobs__body {
		margin: 0;
		padding: 22px 0 0;
		box-shadow: none;
	}

	.sp-rc-jobs__list {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 44px;
	}

	.sp-rc-jobs__item,
	.sp-rc-jobs__item + .sp-rc-jobs__item {
		padding: 24px 0 8px;
		border-left: 0;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-rc-offer__act .sp-btn {
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   v0.11.0 Instagram（公式アカウントへのリンクだけ。投稿の自動表示はしない）
   Instagram のグラデーション・ピンク／紫は使わない。白・ブルーの小さな案内にとどめ、
   オレンジ（電話と問い合わせ）のボタンと見分けがつくよう、青い線のボタンにする。
   ========================================================================== */

.sp-ig-icon {
	display: block;
	flex: none;
}

.sp-insta {
	display: flex;
	align-items: center;
	gap: 16px 22px;
	max-width: 816px;
	margin: 44px 0 0;
	padding: 20px 24px;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-left: 4px solid var(--sp-blue);
}

.sp-section--insta .sp-insta {
	margin-top: 0;
}

.sp-insta__ic {
	flex: none;
	color: var(--sp-blue-deep);
}

.sp-insta__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-layout #sp-main.sp-main .sp-insta__t,
.sp-insta__t {
	margin: 0 0 2px;
	font-family: var(--sp-font-num);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sp-blue-deep);
}

.sp-layout #sp-main.sp-main .sp-insta__d,
.sp-insta__d {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--sp-ink-2);
}

.sp-insta__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 8px 22px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	color: var(--sp-blue-deep);
	background: var(--sp-paper);
	border: 2px solid var(--sp-blue);
	border-radius: 999px;
}

.sp-insta__btn:hover,
.sp-insta__btn:focus {
	color: #fff;
	background: var(--sp-blue-deep);
	border-color: var(--sp-blue-deep);
}

/* 会社案内：「会社と車両」の写真に続けるときは、同じ淡い面の続きとして上の余白を詰める */
.sp-section--insta.sp-section--follow {
	padding-top: 0;
}

/* フッター：アイコン＋文字。指で押しやすい高さ（44px）を確保し、下線は文字にだけ付ける */
.sp-ft__sns .sp-ft__ig {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	vertical-align: middle;
	border-bottom: 0;
}

.sp-ft__ig-t {
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.sp-ft__sns .sp-ft__ig:hover .sp-ft__ig-t,
.sp-ft__sns .sp-ft__ig:focus .sp-ft__ig-t {
	border-bottom-color: #fff;
}

@media (max-width: 767px) {
	.sp-insta {
		flex-wrap: wrap;
		gap: 12px 14px;
		margin-top: 32px;
		padding: 18px 18px 20px;
	}

	.sp-insta__body {
		flex-basis: calc(100% - 40px);
	}

	.sp-insta__btn {
		width: 100%;
		min-height: 48px;
	}
}

/* ==========================================================================
   v0.12.0 トップページ上部の Instagram カルーセル（手動登録・写真が主役）
   ピンク・紫・グラデーションは使わない。白地＋写真＋ブランドブルーの導線だけにする。
   ========================================================================== */

.sp-igsec__lead {
	max-width: 640px;
	margin: 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--sp-ink-2);
}

.sp-igsec__cta {
	margin-top: 28px;
	text-align: center;
}

/* お問い合わせ（オレンジ）と区別するため、既存の Instagram ボタン（青い線・白地）をそのまま使う */
.sp-igsec__btn {
	margin: 0;
}

/* --- カルーセル本体：1〜2 枚はグリッド、3 枚以上はスクロールで並べる --- */

.sp-igc {
	position: relative;
	margin-top: 28px;
}

.sp-igc__track {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 20px;
}

.sp-igc--one .sp-igc__track {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
	margin-inline: auto;
}

.sp-igc--two .sp-igc__track {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-igc__slide {
	min-width: 0;
}

.sp-igc__frame {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sp-paper-2);
}

.sp-igc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.sp-igc__card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.sp-igc__card:hover .sp-igc__img,
.sp-igc__card:focus-visible .sp-igc__img {
	transform: scale(1.03);
}

.sp-igc__cap {
	display: block;
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--sp-ink-2);
}

/* --- 3 枚以上：横スクロール（スワイプ／矢印／キーボード） --- */

.sp-igc--carousel .sp-igc__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sp-igc--carousel .sp-igc__viewport::-webkit-scrollbar {
	display: none;
}

.sp-igc--carousel .sp-igc__viewport:focus-visible {
	outline: 3px solid var(--sp-orange-ink);
	outline-offset: 3px;
}

.sp-igc--carousel .sp-igc__track {
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	padding: 2px 2px 6px;
}

.sp-igc--carousel .sp-igc__slide {
	scroll-snap-align: start;
}

.sp-igc__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 18px;
}

.sp-igc__nav {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--sp-blue-deep);
	background: var(--sp-paper);
	border: 2px solid var(--sp-blue);
	border-radius: 999px;
	cursor: pointer;
}

.sp-igc__nav:hover {
	color: #fff;
	background: var(--sp-blue-deep);
	border-color: var(--sp-blue-deep);
}

.sp-igc__dots {
	display: flex;
	align-items: center;
	gap: 9px;
}

.sp-igc__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	background: var(--sp-line);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.sp-igc__dot[aria-selected="true"] {
	background: var(--sp-blue);
}

@media (min-width: 768px) {
	.sp-igc--carousel .sp-igc__track {
		grid-auto-columns: calc((100% - 20px) / 2);
	}
}

@media (min-width: 1024px) {
	.sp-igc--carousel .sp-igc__track {
		grid-auto-columns: calc((100% - 40px) / 3);
	}
}

@media (max-width: 767px) {
	.sp-igc--two .sp-igc__track {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-igc__nav {
		width: 40px;
		height: 40px;
		font-size: 19px;
	}
}

/* ==========================================================================
   v0.13.0 ピアノ配送・移動ページの導線改善／濃い背景内リンクの共通ルール
   ========================================================================== */

/*
  濃い背景の中の本文インラインリンクの既定色を上書きする共通ルール。
  .sp-more・.sp-btn は自分専用の配色を持っているので対象から外し、
  無地の <a>（本文中の文章リンク）だけを白＋下線にする。
*/
.sp-cases__note a:not(.sp-more):not(.sp-btn),
.sp-about__lead a:not(.sp-more):not(.sp-btn) {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.55);
	text-underline-offset: 2px;
}

.sp-cases__note a:not(.sp-more):not(.sp-btn):hover,
.sp-cases__note a:not(.sp-more):not(.sp-btn):focus,
.sp-about__lead a:not(.sp-more):not(.sp-btn):hover,
.sp-about__lead a:not(.sp-more):not(.sp-btn):focus {
	text-decoration-color: #fff;
}

/* --- ご依頼の流れの直後：主 CTA（ご依頼・お見積もり）＋副 CTA（お問い合わせ） --- */
.sp-flowcta {
	margin-top: 44px;
	text-align: center;
}

.sp-flowcta__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.sp-flowcta__more {
	margin: 18px 0 0;
}

@media (max-width: 767px) {
	.sp-flowcta__act {
		flex-direction: column;
	}

	.sp-flowcta__act .sp-btn {
		width: 100%;
	}
}

/* =========================================================================
   v0.15.0：コピーの軸の整理（会社案内「次の音へ、つなぐ。」）
   ========================================================================= */
.sp-future__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 22px 0 0;
}

.sp-duo__d + .sp-duo__d {
	margin-top: -8px;
}

/* 「往復の運搬の例」の見出し：本文の基本（.sp-wrap > p の余白）に負けて、直前の文章にくっついていたのを直した */
.sp-layout #sp-main.sp-main .sp-wrap > p.sp-inst__cap {
	margin: 34px 0 12px;
}

/* v0.15.1：調律ページ「調律について」（導入文の余白・料金表と注意書き。既存の表・注記の見た目を流用） */
.sp-tuning-about > .sp-lede {
	margin: 0 0 28px;
}

.sp-doing__list--stack .sp-scroll {
	margin-top: 12px;
}

.sp-doing__list--stack .sp-mini {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.8;
}

/* v0.16.0：調律ページ「調律料金」を大きな金額カードに（表をやめた）。
   v0.16.1：大手公式の基本調律料金例を小さくグレーで添える（相場感の判断材料）。主役は清水ピアノの料金。
   v0.18.2：白基調・細いアクセント・控えめな影で、価格表としての品位と情報階層を強化。
   打ち消し線・赤・SALE・「○円安い」の表現は使わない。 */
.sp-tprice__lead {
	margin: 0 0 18px !important;
	font-size: 14.5px !important;
	color: var(--sp-ink-2);
}

.sp-tprice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
}

.sp-tprice__i {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 27px 26px 25px;
	overflow: hidden;
	background: linear-gradient(145deg, #fff 0%, #fbfcfd 72%, #f4f8fb 100%);
	border: 1px solid #d6e0e8;
	border-radius: 14px;
	box-shadow: 0 14px 32px rgba(10, 48, 85, 0.08), 0 2px 6px rgba(10, 48, 85, 0.05);
}

.sp-tprice__i::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sp-blue-deep) 0 76%, #b96732 76% 100%);
	content: "";
}

.sp-tprice__n {
	margin: 0 0 16px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: var(--sp-blue-deep);
}

/* 参考：大手公式の基本調律料金例（小さく・グレー） */
.sp-tprice__ref {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 10px 12px;
	color: var(--sp-ink-3);
	background: #f2f4f5;
	border: 1px solid #e5e8ea;
	border-radius: 8px;
}

.sp-tprice__refl {
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.sp-tprice__refv {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: #687078;
}

/* 清水ピアノの料金（主役）：CTA と調和するブランドオレンジ。赤・SALE 表現にはしない。 */
.sp-tprice__v {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 20px 0 0;
	padding-top: 18px;
	color: var(--sp-orange-ink);
	border-top: 1px solid #e5d9d0;
}

.sp-tprice__who {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sp-ink-2);
}

.sp-tprice__who::before {
	width: 18px;
	height: 2px;
	background: #b96732;
	content: "";
}

.sp-tprice__main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-top: 2px;
}

.sp-tprice__num {
	font-family: var(--sp-font-num);
	font-size: clamp(44px, 4.7vw, 56px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	white-space: nowrap;
}

.sp-tprice__yen {
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
}

.sp-tprice__tax {
	margin-left: 4px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.sp-tprice__ex {
	margin-top: 3px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sp-ink-3);
}

.sp-tprice__src {
	margin: 15px 0 0 !important;
	font-size: 12px !important;
	line-height: 1.8;
	color: var(--sp-ink-3) !important;
}

.sp-tprice__src a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 767px) {
	.sp-tprice {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-tprice__i {
		padding: 24px 20px 22px;
	}

	.sp-tprice__num {
		font-size: 48px;
	}

	.sp-tprice__yen {
		font-size: 24px;
	}
}

/* v0.19.0：調律ページ「02 調律料金」。
   料金カードと既存の tuning_detail 実写をアイボリーの大判パネルにまとめる。
   参考料金は補助、清水料金は主役。SALE ・安売りの表現は使わない。 */
.sp-doing__list--stack > li.sp-tuningfee {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.72fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"body photo"
		"notes photo";
	gap: 0;
	margin: 40px 0;
	padding: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.92) 0 3px, transparent 4px),
		linear-gradient(132deg, #fffefb 0%, #f8f4eb 64%, #f2eadc 100%);
	background-size: 32px 32px, auto;
	border: 1px solid #d8c6a5;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(27, 48, 69, 0.1), 0 3px 10px rgba(27, 48, 69, 0.05);
}

.sp-doing__list--stack > li.sp-tuningfee--solo {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas: "body" "notes";
}

.sp-tuningfee__body {
	grid-area: body;
	min-width: 0;
	padding: 46px 44px 28px;
}

.sp-tuningfee__head {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	margin-bottom: 28px;
}

.sp-doing__list--stack .sp-tuningfee__no {
	font-size: clamp(56px, 5vw, 76px);
	font-style: normal;
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: #a8bac8;
}

.sp-doing__list .sp-tuningfee__en {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 7px;
	font-family: var(--sp-font-num);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.2em;
	color: #9a6a32;
}

.sp-tuningfee__en::before {
	width: 34px;
	height: 1px;
	background: #bd8644;
	content: "";
}

.sp-doing__list .sp-tuningfee__head h3 {
	margin: 0 0 7px;
	font-size: clamp(24px, 2.25vw, 32px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	color: var(--sp-blue-deep);
}

.sp-tuningfee .sp-tprice__lead {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.7;
}

.sp-tuningfee .sp-tprice {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sp-tuningfee .sp-tprice__i {
	padding: 25px 22px 23px;
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.99), rgba(255, 253, 248, 0.96));
	border-color: #ddccb0;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(31, 52, 72, 0.07);
}

.sp-tuningfee .sp-tprice__i::before {
	height: 3px;
	background: linear-gradient(90deg, var(--sp-blue-deep) 0 72%, #c38440 72% 100%);
}

.sp-tuningfee .sp-tprice__n {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 8px;
	font-size: 17px;
}

.sp-tprice__n small {
	font-family: var(--sp-font-num);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: #84919b;
}

.sp-doing__list .sp-tprice__copy {
	margin: 0 0 18px;
	font-size: 12px;
	line-height: 1.65;
	color: #625d55;
}

.sp-tuningfee .sp-tprice__ref {
	margin: auto 0 0;
	padding: 9px 11px;
	color: #72777a;
	background: #f1f0ec;
	border-color: #e3dfd6;
	border-radius: 7px;
}

.sp-tuningfee .sp-tprice__refl {
	font-size: 10px;
}

.sp-tuningfee .sp-tprice__refv {
	font-size: 12.5px;
	color: #666b6e;
}

.sp-tprice__route {
	position: relative;
	width: 1px;
	height: 16px;
	margin: 3px 0 3px 14px;
	background: #c3a36f;
}

.sp-tprice__route::after {
	position: absolute;
	bottom: -1px;
	left: -3px;
	width: 6px;
	height: 6px;
	border-right: 1px solid #a77c3f;
	border-bottom: 1px solid #a77c3f;
	transform: rotate(45deg);
	content: "";
}

.sp-tuningfee .sp-tprice__v {
	gap: 3px;
	margin: 0;
	padding: 0;
	color: #c94f31;
	border: 0;
}

.sp-tprice__i--direct .sp-tprice__v {
	margin-top: auto;
}

.sp-tuningfee .sp-tprice__who {
	display: block;
	align-self: flex-start;
	padding: 4px 10px;
	font-size: 10.5px;
	line-height: 1.5;
	color: #fff;
	background: #aa7135;
}

.sp-tuningfee .sp-tprice__who::before {
	display: none;
}

.sp-tuningfee .sp-tprice__main {
	margin-top: 5px;
}

.sp-tuningfee .sp-tprice__num {
	font-size: clamp(42px, 3.7vw, 54px);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.sp-tuningfee .sp-tprice__yen {
	font-size: 20px;
}

.sp-tuningfee .sp-tprice__tax {
	margin-left: 3px;
	font-size: 11px;
}

.sp-tuningfee .sp-tprice__ex {
	margin-top: 4px;
	font-size: 12px;
	color: #555e65;
}

.sp-tuningfee__photo {
	position: relative;
	display: grid;
	grid-template-rows: minmax(420px, 1fr) auto;
	grid-area: photo;
	min-width: 0;
	min-height: 100%;
	background: var(--sp-blue-deep);
	clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

.sp-tuningfee--no-reference .sp-tuningfee__photo {
	grid-template-rows: minmax(320px, 1fr) auto;
}

@media (min-width: 901px) {
	.sp-layout #sp-main.sp-main .sp-tuningfee--no-reference .sp-tuningfee__photo .sp-tuningfee__img {
		height: 320px;
	}
}

.sp-tuningfee__photo::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8%;
	width: 1px;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(210, 172, 105, 0.82) 24%, rgba(210, 172, 105, 0.28) 78%, transparent);
	content: "";
}

.sp-layout #sp-main.sp-main .sp-tuningfee__photo .sp-tuningfee__img {
	min-height: 0;
	object-position: center center;
}

.sp-tuningfee__photo > .sp-ph {
	width: 93%;
	min-height: 520px;
	margin-left: 7%;
	border: 0;
}

.sp-tuningfee__caption {
	z-index: 1;
	padding: 24px 28px 26px 42px;
	color: #fff;
	background: linear-gradient(135deg, #092f53, #071f37);
}

.sp-tuningfee__caption strong {
	display: block;
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: 0.04em;
}

.sp-tuningfee__caption span {
	display: block;
	margin-top: 10px;
	padding-top: 9px;
	font-family: var(--sp-font-num);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.78);
	border-top: 1px solid rgba(217, 180, 117, 0.72);
}

.sp-tuningfee__notes {
	grid-area: notes;
	padding: 0 44px 38px;
}

.sp-tuningfee .sp-tprice__src {
	margin: 0 !important;
	font-size: 11.5px !important;
	line-height: 1.8;
	color: #656b70 !important;
}

.sp-doing__list--stack .sp-tuningfee__notes .sp-mini {
	margin: 7px 0 0;
	font-size: 11.5px;
	line-height: 1.8;
	color: #656b70;
}

@media (max-width: 1100px) {
	.sp-doing__list--stack > li.sp-tuningfee {
		grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.72fr);
	}

	.sp-tuningfee__body {
		padding: 38px 30px 24px;
	}

	.sp-tuningfee__notes {
		padding: 0 30px 32px;
	}

	.sp-tuningfee .sp-tprice__i {
		padding: 23px 18px 21px;
	}

	.sp-tuningfee .sp-tprice__num {
		font-size: clamp(39px, 4.4vw, 48px);
	}
}

@media (max-width: 900px) {
	.sp-doing__list--stack > li.sp-tuningfee,
	.sp-doing__list--stack > li.sp-tuningfee--solo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		grid-template-areas: "body" "photo" "notes";
	}

	.sp-doing__list--stack > li.sp-tuningfee--solo {
		grid-template-rows: auto auto;
		grid-template-areas: "body" "notes";
	}

	.sp-tuningfee__photo {
		grid-template-rows: auto auto;
		min-height: 0;
		clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
	}

	.sp-tuningfee--no-reference .sp-tuningfee__photo {
		grid-template-rows: auto auto;
	}

	.sp-layout #sp-main.sp-main .sp-tuningfee__photo .sp-tuningfee__img {
		height: 420px;
	}

	.sp-tuningfee__photo::after {
		left: 0;
	}

	.sp-tuningfee__photo > .sp-ph {
		width: 100%;
		min-height: 420px;
		margin: 0;
		padding-top: 52px;
	}

	.sp-tuningfee__notes {
		padding-top: 26px;
	}
}

@media (max-width: 600px) {
	.sp-doing__list--stack > li.sp-tuningfee {
		margin: 30px 0;
		border-radius: 16px;
	}

	.sp-tuningfee__body {
		padding: 30px 20px 22px;
	}

	.sp-tuningfee__head {
		grid-template-columns: 58px minmax(0, 1fr);
		gap: 12px;
		margin-bottom: 23px;
	}

	.sp-doing__list--stack .sp-tuningfee__no {
		font-size: 48px;
	}

	.sp-doing__list .sp-tuningfee__head h3 {
		font-size: 24px;
	}

	.sp-tuningfee .sp-tprice {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.sp-tuningfee .sp-tprice__i {
		padding: 24px 21px 22px;
	}

	.sp-tuningfee .sp-tprice__num {
		font-size: 48px;
	}

	.sp-tuningfee .sp-tprice__yen {
		font-size: 21px;
	}

	.sp-tuningfee__photo {
		grid-template-rows: auto auto;
		min-height: 0;
	}

	.sp-layout #sp-main.sp-main .sp-tuningfee__photo .sp-tuningfee__img {
		height: 400px;
	}

	.sp-tuningfee__caption {
		padding: 22px 22px 24px;
	}

	.sp-tuningfee__caption strong {
		font-size: 19px;
	}

	.sp-tuningfee__notes {
		padding: 23px 20px 26px;
	}
}

/* v0.16.0：調律ページ「一年後も、いい音で奏でられるように。」（旧 04 を独立した節に）。
   白〜薄いブルーの面。濃色の全面ベタにしない（フッターに見えないように）。 */
.sp-annual .sp-hd2 {
	margin-bottom: 36px;
}

.sp-annual__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 30px 34px;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-left: 5px solid var(--sp-blue);
}

.sp-annual__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 104px;
	height: 104px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sp-blue-deep);
	background: var(--sp-sky-tint);
	border-radius: 50%;
}

.sp-annual__body {
	min-width: 0;
}

.sp-annual__body p {
	margin: 0 0 0.8em;
	font-size: 16.5px;
	line-height: 2;
	color: var(--sp-ink);
}

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

@media (max-width: 767px) {
	.sp-annual .sp-hd2 {
		margin-bottom: 26px;
	}

	.sp-annual__card {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 16px;
		padding: 24px 20px;
		text-align: left;
	}

	.sp-annual__badge {
		width: 88px;
		height: 88px;
		font-size: 13px;
	}

	.sp-annual__body p {
		font-size: 15.5px;
		line-height: 1.95;
	}
}

/* ==========================================================================
   v0.17.0：調律ページのファーストビュー（template-parts/pages/tuning-hero.php）
   左：英字ラベル・H1・キャッチ・説明・サービスポイント 3 つ（v0.17.1：料金カードを廃止）・ご依頼ボタン。右：実写の写真（画面の右端まで）。
   白〜薄いブルーの面で、直後の青い「こんなときに」セクションと切り替わる。下端はトラックの「白いすき間＋細い赤ライン」。
   写真が無いとき（訪問者）は右側に鍵盤モチーフの装飾面（「写真未設定」は出さない）。
   ========================================================================== */

.sp-tfv {
	--sp-tfv-pad: 48px;
	position: relative;
	overflow: hidden;
	padding-block: var(--sp-tfv-pad) calc(var(--sp-tfv-pad) + 6px);
	text-align: left;
	background:
		linear-gradient(0deg, var(--sp-red) 0 3px, #fff 3px 6px, transparent 6px),
		linear-gradient(180deg, #fff 0%, var(--sp-sky-tint) 100%);
}

.sp-tfv__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.sp-tfv--photo .sp-tfv__in {
	grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
	gap: 56px;
}

.sp-tfv__body {
	min-width: 0;
	max-width: 640px;
}

.sp-tfv__eye {
	margin: 0 0 14px;
	font-size: 13px;
}

.sp-tfv__ttl {
	margin: 0;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.04em;
	color: var(--sp-blue-deep);
}

.sp-tfv__ttl::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	margin-top: 18px;
	background: var(--sp-blue);
}

.sp-tfv__catch {
	margin: 22px 0 0;
	font-size: clamp(19px, 1.9vw, 24px);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--sp-ink);
}

.sp-tfv__lead {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.9;
	color: var(--sp-ink-2);
}

.sp-tfv__lead--sub {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.9;
}

/* サービスのポイント（v0.17.2）：縦 3 段の訴求ブロック。白地・左にブランドブルーの太線・オレンジ系のアイコン。PC・スマホとも縦のまま */
.sp-tfv__points {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 520px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.sp-tfv__points li {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 11px 18px 11px 16px;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-left: 5px solid var(--sp-blue);
	box-shadow: 0 2px 8px rgba(13, 74, 134, 0.06);
}

.sp-tfv__ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--sp-orange-ink);
	background: #fdeee2;
	border-radius: 50%;
}

.sp-tfv__ptxt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sp-tfv__pttl {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--sp-blue-deep);
}

.sp-tfv__pdesc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sp-ink-2);
}

.sp-tfv__act {
	margin: 24px 0 0;
}

/* 写真：セクションの上下いっぱい、右は画面の端まで（はみ出しは .sp-tfv の overflow で切る） */
.sp-tfv__shot {
	position: relative;
	align-self: stretch;
	min-width: 0;
	min-height: 360px;
	margin-block: calc(var(--sp-tfv-pad) * -1) calc(var(--sp-tfv-pad) * -1);
	margin-right: calc((var(--sp-gut) + max(0px, (100vw - var(--sp-wrap)) / 2)) * -1);
}

.sp-tfv__shot .sp-tfv__img {
	object-position: center 55%;
}

/* 写真が未設定の訪問者向け：濃い青の面に鍵盤。装飾（aria-hidden）で、写真を設定すると写真に置き換わる */
.sp-tfv__shot--deco {
	overflow: hidden;
	background: var(--sp-blue-deep);
}

.sp-tfv__keys {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 1023px) {
	.sp-tfv {
		--sp-tfv-pad: 48px;
	}

	.sp-tfv--photo .sp-tfv__in {
		gap: 32px;
	}
}

@media (max-width: 767px) {
	/* スマホ：テキスト → サービスポイント → ボタン → 写真（画面の端まで）の順に縦積み */
	.sp-tfv {
		--sp-tfv-pad: 34px;
	}

	.sp-tfv__in,
	.sp-tfv--photo .sp-tfv__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.sp-tfv__eye {
		margin-bottom: 10px;
	}

	.sp-tfv__ttl::after {
		margin-top: 14px;
	}

	.sp-tfv__catch {
		margin-top: 20px;
		font-size: 18px;
	}

	.sp-tfv__lead {
		font-size: 15px;
	}

	.sp-tfv__lead--sub {
		font-size: 14.5px;
	}

	.sp-tfv__points {
		max-width: none;
		margin-top: 22px;
	}

	.sp-tfv__points li {
		gap: 14px;
		padding: 12px 14px 12px 12px;
	}

	.sp-tfv__ico {
		width: 44px;
		height: 44px;
	}

	.sp-tfv__pttl {
		font-size: 16.5px;
	}

	.sp-tfv__act {
		margin-top: 24px;
	}

	.sp-tfv__act .sp-btn {
		width: 100%;
		min-width: 0;
		padding-inline: 20px;
	}

	.sp-tfv__shot {
		min-height: 0;
		aspect-ratio: 16 / 10;
		margin: 0 calc(var(--sp-gut) * -1) calc(var(--sp-tfv-pad) * -1);
	}
}


.sp-site,
.sp-page {
	--sp-section-space: var(--sp-space);
}

.sp-site *,
.sp-site *::before,
.sp-site *::after,
.sp-page *,
.sp-page *::before,
.sp-page *::after {
	box-sizing: border-box;
}

.sp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sp-ext {
	margin-left: 0.3em;
	font-size: 0.85em;
}

.sp-skip {
	position: absolute;
	left: -9999px;
}

.sp-skip:focus {
	left: 8px;
	top: 8px;
	z-index: 999;
	padding: 10px 16px;
	color: #fff;
	background: var(--sp-blue);
}

.sp-site a:focus-visible,
.sp-site summary:focus-visible,
.sp-page a:focus-visible,
.sp-page summary:focus-visible {
	outline: 3px solid var(--sp-orange-ink);
	outline-offset: 3px;
}

/*
  撮影指示つきの写真枠（ログイン中の編集者にだけ出る。inc/photos.php）
  小さく「写真未設定」、大きく太字で「必要な写真名」、その下に構図のひとこと。
  白地・薄いブランドブルーの点線・中央揃え。装飾はしない。
*/
.sp-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	min-height: 170px;
	padding: 24px 22px;
	text-align: center;
	overflow-wrap: anywhere;
	background: #fff;
	border: 2px dashed var(--sp-ph-line);
}

.sp-ph__s {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	color: var(--sp-ink-3);
}

.sp-ph__n {
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--sp-ink);
}

.sp-ph__c {
	max-width: 24em;
	font-size: 12px;
	line-height: 1.6;
	color: var(--sp-ink-3);
}

/* ==========================================================================
   v0.20.0 調律ページ専用・エディトリアルデザイン
   参考はレイアウトと色のリズムのみ。文言・料金・写真は清水ピアノの既存データを使う。
   body の .sp-page-tuning で閉じ、他ページへの影響を防ぐ。
   ========================================================================== */
.sp-page-tuning {
	--sp-tune-navy: #082f52;
	--sp-tune-navy-2: #0b3d67;
	--sp-tune-gold: #c59a55;
	--sp-tune-gold-pale: #e5cfaa;
	--sp-tune-ivory: #fbf8f1;
	--sp-tune-cream: #f4eee2;
	--sp-tune-vermilion: #c95735;
	--sp-font-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.sp-page-tuning .sp-section {
	padding-block: clamp(68px, 7vw, 108px);
}

.sp-page-tuning .sp-eyebrow {
	letter-spacing: .22em;
}

/* FV */
.sp-page-tuning .sp-tfv {
	--sp-tfv-pad: clamp(52px, 6vw, 82px);
	padding-block: var(--sp-tfv-pad);
	background:
		radial-gradient(circle at 8% 100%, rgba(197, 154, 85, .12), transparent 24%),
		linear-gradient(108deg, #fff 0%, #fdfbf6 68%, #f5efe3 100%);
}

.sp-page-tuning .sp-tfv::before {
	position: absolute;
	inset: 26px auto 26px calc(50% - 720px);
	width: 1px;
	background: linear-gradient(transparent, var(--sp-tune-gold-pale), transparent);
	content: "";
}

.sp-page-tuning .sp-tfv--photo .sp-tfv__in {
	grid-template-columns: minmax(440px, .86fr) minmax(520px, 1.14fr);
	gap: clamp(34px, 5vw, 78px);
}

.sp-page-tuning .sp-tfv__body {
	max-width: 590px;
}

.sp-page-tuning .sp-tfv__ttl {
	font-family: var(--sp-font-serif);
	font-size: clamp(42px, 4.1vw, 62px);
	font-weight: 600;
	letter-spacing: .07em;
}

.sp-page-tuning .sp-tfv__ttl::after {
	width: 76px;
	height: 2px;
	background: linear-gradient(90deg, var(--sp-tune-gold), var(--sp-tune-gold-pale));
}

.sp-page-tuning .sp-tfv__catch {
	font-family: var(--sp-font-serif);
	font-size: clamp(24px, 2.15vw, 32px);
	font-weight: 500;
	line-height: 1.75;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tfv__lead {
	line-height: 2;
}

.sp-page-tuning .sp-tfv__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	max-width: 590px;
	margin-top: 28px;
	border-block: 1px solid #dfd5c3;
}

.sp-page-tuning .sp-tfv__points li {
	display: block;
	padding: 15px 14px;
	background: transparent;
	border: 0;
	border-right: 1px solid #dfd5c3;
	box-shadow: none;
}

.sp-page-tuning .sp-tfv__points li:last-child {
	border-right: 0;
}

.sp-page-tuning .sp-tfv__ico {
	width: 31px;
	height: 31px;
	margin-bottom: 8px;
	color: var(--sp-tune-gold);
	background: transparent;
}

.sp-page-tuning .sp-tfv__ico svg {
	width: 23px;
	height: 23px;
}

.sp-page-tuning .sp-tfv__pttl {
	font-size: 14px;
	line-height: 1.55;
}

.sp-page-tuning .sp-tfv__pdesc {
	display: none;
}

.sp-page-tuning .sp-tfv__act .sp-btn {
	min-width: 260px;
	border-radius: 1px;
	box-shadow: 0 12px 26px rgba(139, 82, 29, .18);
}

.sp-page-tuning .sp-tfv__shot {
	min-height: 590px;
	margin-block: calc(var(--sp-tfv-pad) * -1);
}

.sp-page-tuning .sp-tfv__shot::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(251, 248, 241, .48), transparent 17% 76%, rgba(4, 28, 48, .16));
	content: "";
}

.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
	height: 100%;
	object-position: center;
}

/* お悩み帯 */
.sp-page-tuning .sp-cases {
	position: relative;
	padding-block: 36px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 80px 100%,
		linear-gradient(112deg, #062945, var(--sp-tune-navy-2));
}

.sp-page-tuning .sp-cases::after {
	position: absolute;
	right: 7%;
	bottom: 17px;
	width: 58px;
	height: 14px;
	border-top: 1px solid var(--sp-tune-gold);
	border-radius: 50%;
	transform: rotate(-5deg);
	content: "";
}

.sp-page-tuning .sp-cases > .sp-wrap {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr) 250px;
	gap: 30px;
	align-items: center;
}

.sp-page-tuning .sp-cases__head {
	margin: 0;
	padding-right: 28px;
	border-right: 1px solid rgba(229, 207, 170, .55);
}

.sp-page-tuning .sp-cases__ttl {
	font-family: var(--sp-font-serif);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	line-height: 1.7;
}

.sp-page-tuning .sp-cases__ttl::after {
	display: none;
}

.sp-page-tuning .sp-cases__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
}

.sp-page-tuning .sp-cases__list li {
	padding-left: 27px;
	font-size: 14px;
	line-height: 1.65;
}

.sp-page-tuning .sp-cases__list li::before {
	width: 15px;
	height: 15px;
	color: var(--sp-tune-gold-pale);
	border: 1px solid var(--sp-tune-gold);
	background: transparent;
}

.sp-page-tuning .sp-cases__note {
	margin: 0;
	padding-left: 27px;
	font-family: var(--sp-font-serif);
	font-size: 14px;
	line-height: 2;
	border-left: 1px solid rgba(229, 207, 170, .55);
}

/* 写真と本文の編集レイアウト */
.sp-page-tuning .sp-tuning-story {
	padding-block: 0;
	background: var(--sp-tune-ivory);
}

.sp-page-tuning .sp-tuning-editorial {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	max-width: none;
	padding: 0;
}

.sp-page-tuning .sp-tuning-editorial:not(.sp-tuning-editorial--photo) {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--sp-wrap);
	padding: clamp(66px, 7vw, 100px) var(--sp-gut);
}

.sp-page-tuning .sp-tuning-editorial__photo {
	position: relative;
	min-height: 520px;
	margin: 0;
}

.sp-page-tuning .sp-tuning-editorial__photo::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 35, 58, .18), transparent 40%);
	content: "";
}

.sp-page-tuning .sp-tuning-editorial__img {
	height: 100%;
	object-fit: cover;
}

.sp-page-tuning .sp-tuning-editorial__photo figcaption {
	position: absolute;
	z-index: 1;
	right: 28px;
	bottom: 25px;
	left: 28px;
	padding-top: 13px;
	font-family: var(--sp-font-serif);
	font-size: 15px;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, .62);
}

.sp-page-tuning .sp-tuning-editorial__body {
	position: relative;
	align-self: center;
	max-width: 720px;
	padding: clamp(65px, 8vw, 118px) clamp(42px, 7vw, 106px);
}

.sp-page-tuning .sp-tuning-editorial__no,
.sp-page-tuning .sp-tuning-pricing__no {
	position: absolute;
	top: 40px;
	right: 46px;
	font-family: var(--sp-font-num);
	font-size: 78px;
	font-style: italic;
	font-weight: 300;
	line-height: 1;
	color: rgba(11, 61, 103, .1);
}

.sp-page-tuning .sp-tuning-editorial .sp-hd2 {
	margin-bottom: 27px;
}

.sp-page-tuning .sp-tuning-editorial .sp-h2 {
	font-family: var(--sp-font-serif);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 500;
	line-height: 1.55;
}

.sp-page-tuning .sp-tuning-editorial .sp-lede {
	margin: 0;
	font-size: 16px;
	line-height: 2.2;
}

/* 料金 */
.sp-page-tuning .sp-tuning-pricing {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 4% 74%, rgba(197, 154, 85, .12), transparent 23%),
		linear-gradient(180deg, #fff, var(--sp-tune-ivory));
}

.sp-page-tuning .sp-tuning-pricing__head {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 26px;
	align-items: end;
	margin-bottom: 38px;
}

.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
	position: static;
	font-size: clamp(68px, 7vw, 96px);
	color: rgba(11, 61, 103, .16);
}

.sp-page-tuning .sp-tuning-pricing__head .sp-eyebrow {
	margin-bottom: 7px;
	color: #9a6a32;
}

.sp-page-tuning .sp-tuning-pricing__head .sp-h2 {
	margin: 0;
	font-family: var(--sp-font-serif);
	font-size: clamp(31px, 3.4vw, 45px);
	font-weight: 500;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-pricing__head p:last-child {
	margin: 8px 0 0;
	color: var(--sp-ink-2);
}

.sp-page-tuning .sp-tuning-pricing__panel {
	position: relative;
	padding: clamp(28px, 3.5vw, 48px);
	background: linear-gradient(135deg, #f9f4e9, #fffefa 55%, #f2e9d9);
	border: 1px solid #d8c095;
	box-shadow: 0 24px 62px rgba(29, 50, 68, .09);
}

.sp-page-tuning .sp-tuning-pricing__panel::before,
.sp-page-tuning .sp-tuning-pricing__panel::after {
	position: absolute;
	width: 34px;
	height: 34px;
	pointer-events: none;
	content: "";
}

.sp-page-tuning .sp-tuning-pricing__panel::before {
	top: 9px;
	left: 9px;
	border-top: 1px solid var(--sp-tune-gold);
	border-left: 1px solid var(--sp-tune-gold);
}

.sp-page-tuning .sp-tuning-pricing__panel::after {
	right: 9px;
	bottom: 9px;
	border-right: 1px solid var(--sp-tune-gold);
	border-bottom: 1px solid var(--sp-tune-gold);
}

.sp-page-tuning .sp-tuning-pricing__panel--photo {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(260px, .62fr);
	gap: clamp(24px, 3vw, 42px);
	padding-right: 0;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-self: center;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
	padding: clamp(26px, 2.6vw, 37px);
	background: rgba(255, 255, 255, .92);
	border: 1px solid #ddc79f;
	border-radius: 3px;
	box-shadow: 0 10px 28px rgba(43, 55, 65, .06);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i::before {
	right: 18px;
	left: 18px;
	height: 2px;
	background: linear-gradient(90deg, var(--sp-tune-gold), #e6d3ae);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__n {
	font-family: var(--sp-font-serif);
	font-size: clamp(18px, 1.6vw, 23px);
	font-weight: 600;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
	margin-top: auto;
	background: #f4f2ed;
	border: 0;
	border-radius: 0;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__v {
	margin-top: 17px;
	padding-top: 16px;
	border-top: 1px solid #eadfca;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__who {
	align-self: flex-start;
	padding: 4px 12px;
	font-size: 11px;
	color: #fff;
	background: linear-gradient(90deg, #a96f32, #c48e4c);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__who::before {
	display: none;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
	font-size: clamp(45px, 4vw, 58px);
	color: var(--sp-tune-vermilion);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__yen,
.sp-page-tuning .sp-tuning-pricing .sp-tprice__tax {
	color: var(--sp-tune-vermilion);
}

.sp-page-tuning .sp-tuning-pricing__photo {
	position: relative;
	min-height: 490px;
	margin: calc(clamp(28px, 3.5vw, 48px) * -1) 0;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.sp-page-tuning .sp-tuning-pricing__img {
	height: 100%;
	object-fit: cover;
}

.sp-page-tuning .sp-tuning-pricing__photo figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 24px 28px 24px 42px;
	font-family: var(--sp-font-serif);
	font-size: 20px;
	line-height: 1.7;
	color: #fff;
	background: linear-gradient(90deg, rgba(5, 37, 62, .95), rgba(8, 47, 82, .86));
}

.sp-page-tuning .sp-tuning-pricing__notes {
	margin-top: 22px;
	color: var(--sp-ink-3);
}

.sp-page-tuning .sp-tuning-pricing__notes p {
	margin: 4px 0;
	font-size: 12px;
	line-height: 1.8;
}

/* 時間と年次案内 */
.sp-page-tuning .sp-tuning-time {
	padding-block: 0 clamp(72px, 7vw, 100px);
	background: var(--sp-tune-ivory);
}

.sp-page-tuning .sp-tuning-time__card {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 28px 36px;
	background: #fff;
	border: 1px solid #e3d8c5;
	box-shadow: 0 8px 26px rgba(21, 49, 72, .05);
}

.sp-page-tuning .sp-tuning-time__icon {
	display: grid;
	place-items: center;
	width: 86px;
	height: 86px;
	color: var(--sp-tune-navy);
	background: #f8f3e9;
	border: 1px solid var(--sp-tune-gold-pale);
	border-radius: 50%;
}

.sp-page-tuning .sp-tuning-time__icon svg {
	width: 44px;
	height: 44px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.sp-page-tuning .sp-tuning-time__card h2 {
	margin: 3px 0 8px;
	font-family: var(--sp-font-serif);
	font-size: 24px;
	font-weight: 600;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-time__card p:last-child {
	margin: 0;
	line-height: 1.9;
}

.sp-page-tuning .sp-annual {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 90px 100%,
		linear-gradient(110deg, var(--sp-tune-navy), #0d4878);
}

.sp-page-tuning .sp-annual .sp-eyebrow,
.sp-page-tuning .sp-annual .sp-h2 {
	color: #fff;
}

.sp-page-tuning .sp-annual__card {
	background: rgba(255, 255, 255, .98);
	border: 1px solid rgba(229, 207, 170, .9);
	border-left: 0;
	box-shadow: 0 16px 40px rgba(2, 23, 40, .2);
}

.sp-page-tuning .sp-annual__badge {
	color: var(--sp-tune-navy);
	background: var(--sp-tune-ivory);
	border: 1px solid var(--sp-tune-gold-pale);
}

/* 状態確認・依頼情報 */
.sp-page-tuning .sp-tuning-condition {
	background: #fff;
}

.sp-page-tuning .sp-tuning-condition .sp-priceblk,
.sp-page-tuning .sp-tuning-condition .sp-notice,
.sp-page-tuning .sp-tuning-info .sp-notice {
	border-radius: 2px;
	box-shadow: 0 12px 34px rgba(19, 48, 72, .06);
}

.sp-page-tuning .sp-tuning-condition .sp-priceblk {
	overflow: hidden;
	border: 1px solid #dcc9a8;
}

.sp-page-tuning .sp-tuning-condition .sp-table thead th {
	background: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-info {
	background:
		linear-gradient(rgba(244, 238, 226, .78), rgba(250, 248, 244, .94)),
		repeating-linear-gradient(90deg, transparent 0 59px, rgba(197, 154, 85, .08) 60px);
}

.sp-page-tuning .sp-tuning-info .sp-notice {
	border: 1px solid #e0d6c5;
	border-left: 3px solid var(--sp-tune-gold);
}

.sp-page-tuning .sp-tuning-info .sp-notice li::marker {
	color: var(--sp-tune-gold);
}

/* 6STEP */
.sp-page-tuning .sp-tuning-flow {
	background: #fff;
}

.sp-page-tuning .sp-tuning-flow .sp-flow {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	margin-top: 48px;
}

.sp-page-tuning .sp-tuning-flow .sp-flow li {
	position: relative;
	padding: 62px 18px 20px;
	border-top: 1px solid #d9c8a8;
}

.sp-page-tuning .sp-tuning-flow .sp-flow li::before {
	top: 25px;
	left: -8px;
	width: 16px;
	height: 1px;
	background: #d9c8a8;
}

.sp-page-tuning .sp-tuning-flow .sp-flow__no {
	top: -24px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	font-size: 16px;
	font-style: normal;
	color: #fff;
	background: linear-gradient(145deg, #d0b27d, #ad8243);
	border-radius: 50%;
}

.sp-page-tuning .sp-tuning-flow .sp-flow h3 {
	font-family: var(--sp-font-serif);
	font-size: 16px;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-flow .sp-flow p {
	font-size: 12.5px;
	line-height: 1.8;
}

/* FAQ・関連案内・下部導線 */
.sp-page-tuning .sp-tuning-faq {
	background: linear-gradient(180deg, #f8f4ec, #f3f6f8);
}

.sp-page-tuning .sp-tuning-faq .sp-faq {
	border-top: 1px solid #d9c8a8;
}

.sp-page-tuning .sp-tuning-faq .sp-faq details {
	background: rgba(255, 255, 255, .9);
	border-color: #e1d9ca;
}

.sp-page-tuning .sp-tuning-faq .sp-faq summary {
	padding-block: 20px;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-faq .sp-faq summary::before {
	color: #a87332;
}

.sp-page-tuning .sp-tuning-related {
	padding-block: 52px;
	background: #fff;
}

.sp-page-tuning .sp-tuning-related .sp-notice {
	border: 1px solid #e2d7c3;
	border-left: 3px solid var(--sp-tune-gold);
	background: var(--sp-tune-ivory);
}

.sp-page-tuning .sp-section--links {
	background: #fff;
}

.sp-page-tuning .sp-section--links .sp-card,
.sp-page-tuning .sp-section--links li {
	border-color: #ded3c0;
}

.sp-page-tuning .sp-cta--page {
	position: relative;
	background:
		linear-gradient(90deg, rgba(5, 37, 62, .97), rgba(5, 37, 62, .82)),
		linear-gradient(135deg, var(--sp-tune-navy), #071f36);
	border-bottom-color: var(--sp-tune-gold);
}

.sp-page-tuning .sp-cta--page::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 0 46%, rgba(255, 255, 255, .035) 46% 62%, transparent 62%);
	content: "";
}

.sp-page-tuning .sp-cta__tel b {
	font-family: var(--sp-font-num);
	letter-spacing: .035em;
}

@media (max-width: 1100px) {
	.sp-page-tuning .sp-tfv--photo .sp-tfv__in {
		grid-template-columns: minmax(390px, .95fr) minmax(390px, 1.05fr);
		gap: 34px;
	}

	.sp-page-tuning .sp-tfv__shot {
		min-height: 560px;
	}

	.sp-page-tuning .sp-cases > .sp-wrap {
		grid-template-columns: 210px minmax(0, 1fr);
	}

	.sp-page-tuning .sp-cases__note {
		grid-column: 1 / -1;
		padding: 16px 0 0;
		border-top: 1px solid rgba(229, 207, 170, .35);
		border-left: 0;
	}

	.sp-page-tuning .sp-tuning-pricing__panel--photo {
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 34px 0;
	}
}

@media (max-width: 767px) {
	.sp-page-tuning .sp-section {
		padding-block: 58px;
	}

	.sp-page-tuning .sp-tfv {
		--sp-tfv-pad: 38px;
	}

	.sp-page-tuning .sp-tfv--photo .sp-tfv__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.sp-page-tuning .sp-tfv__ttl {
		font-size: 39px;
	}

	.sp-page-tuning .sp-tfv__catch {
		font-size: 22px;
	}

	.sp-page-tuning .sp-tfv__points {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tfv__points li {
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 10px 5px;
		border-right: 0;
		border-bottom: 1px solid #e7dece;
	}

	.sp-page-tuning .sp-tfv__points li:last-child {
		border-bottom: 0;
	}

	.sp-page-tuning .sp-tfv__ico {
		margin: 0;
	}

	.sp-page-tuning .sp-tfv__shot {
		min-height: 0;
		margin: 0 calc(var(--sp-gut) * -1) calc(var(--sp-tfv-pad) * -1);
	}

	.sp-page-tuning .sp-cases {
		padding-block: 38px;
	}

	.sp-page-tuning .sp-cases > .sp-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 25px;
	}

	.sp-page-tuning .sp-cases__head {
		padding: 0 0 20px;
		border-right: 0;
		border-bottom: 1px solid rgba(229, 207, 170, .45);
	}

	.sp-page-tuning .sp-cases__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.sp-page-tuning .sp-cases__note {
		grid-column: auto;
		font-size: 13px;
	}

	.sp-page-tuning .sp-tuning-editorial,
	.sp-page-tuning .sp-tuning-editorial:not(.sp-tuning-editorial--photo) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-editorial__photo {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding: 54px var(--sp-gut) 62px;
	}

	.sp-page-tuning .sp-tuning-editorial__no {
		top: 28px;
		right: var(--sp-gut);
		font-size: 58px;
	}

	.sp-page-tuning .sp-tuning-editorial .sp-h2 {
		font-size: 28px;
	}

	.sp-page-tuning .sp-tuning-editorial .sp-lede {
		font-size: 15px;
		line-height: 2;
	}

	.sp-page-tuning .sp-tuning-pricing__head {
		grid-template-columns: 70px minmax(0, 1fr);
		gap: 14px;
	}

	.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
		font-size: 55px;
	}

	.sp-page-tuning .sp-tuning-pricing__head .sp-h2 {
		font-size: 31px;
	}

	.sp-page-tuning .sp-tuning-pricing__panel,
	.sp-page-tuning .sp-tuning-pricing__panel--photo {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 28px 18px 0;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		padding: 27px 23px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
		font-size: 47px;
	}

	.sp-page-tuning .sp-tuning-pricing__photo {
		min-height: 0;
		aspect-ratio: 4 / 3;
		margin: 0 -18px;
		clip-path: none;
	}

	.sp-page-tuning .sp-tuning-pricing__photo figcaption {
		padding: 18px 22px;
		font-size: 17px;
	}

	.sp-page-tuning .sp-tuning-time {
		padding-top: 0;
	}

	.sp-page-tuning .sp-tuning-time__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 26px 22px;
	}

	.sp-page-tuning .sp-tuning-time__icon {
		width: 70px;
		height: 70px;
	}

	.sp-page-tuning .sp-annual__card {
		border-left: 1px solid rgba(229, 207, 170, .9);
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		margin-top: 28px;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow li {
		min-height: 0;
		padding: 20px 18px 20px 76px;
		border: 1px solid #e3d9c8;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow li::before {
		display: none;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow__no {
		top: 20px;
		left: 16px;
	}
}

/* ==========================================================================
   v0.21.0 調律ページ・スケールと連続性の再設計
   大きな要素を置いた上で余白を取り、写真→料金→情報→導線を一本の景色として繋ぐ。
   ========================================================================== */
.sp-page-tuning #sp-main .sp-wrap {
	max-width: 1380px;
}

.sp-page-tuning #sp-main .sp-wrap--n {
	max-width: 1180px;
}

.sp-page-tuning #sp-main .sp-hd2 {
	margin-bottom: clamp(42px, 5vw, 68px);
}

.sp-page-tuning #sp-main .sp-h2 {
	font-family: var(--sp-font-serif);
	font-size: clamp(34px, 3.5vw, 50px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .055em;
}

/* FV：テキストと写真を「大きな面」として扱う */
.sp-page-tuning .sp-tfv {
	--sp-tfv-pad: clamp(72px, 7vw, 108px);
	min-height: 720px;
	padding-block: 0;
}

.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
.sp-page-tuning .sp-tfv__in {
	grid-template-columns: minmax(520px, .82fr) minmax(650px, 1.18fr);
	gap: 0;
	max-width: 1600px !important;
	min-height: 720px;
	padding-right: 0;
}

.sp-page-tuning .sp-tfv__body {
	max-width: 650px;
	padding: var(--sp-tfv-pad) clamp(48px, 6vw, 96px) var(--sp-tfv-pad) var(--sp-gut);
}

.sp-page-tuning .sp-tfv__eye {
	margin-bottom: 18px;
	font-size: 14px;
}

.sp-page-tuning .sp-tfv__ttl {
	font-size: clamp(56px, 5.2vw, 78px);
	line-height: 1.18;
	letter-spacing: .09em;
}

.sp-page-tuning .sp-tfv__ttl::after {
	width: 104px;
	margin-top: 26px;
}

.sp-page-tuning .sp-tfv__catch {
	margin-top: 31px;
	font-size: clamp(29px, 2.5vw, 39px);
	line-height: 1.72;
}

.sp-page-tuning .sp-tfv__lead {
	margin-top: 21px;
	font-size: 17px;
	line-height: 2.05;
}

.sp-page-tuning .sp-tfv__lead--sub {
	font-size: 16px;
}

.sp-page-tuning .sp-tfv__points {
	max-width: 640px;
	margin-top: 32px;
}

.sp-page-tuning .sp-tfv__points li {
	min-height: 94px;
	padding: 18px 18px 16px;
}

.sp-page-tuning .sp-tfv__pttl {
	font-size: 15px;
}

.sp-page-tuning .sp-tfv__act {
	margin-top: 34px;
}

.sp-page-tuning .sp-tfv__act .sp-btn {
	min-width: 320px;
	min-height: 66px;
	font-size: 17px;
}

.sp-page-tuning .sp-tfv__shot {
	min-height: 720px;
	margin: 0;
	margin-right: calc((100vw - min(1600px, 100vw)) / -2);
}

.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
	min-height: 720px;
	object-position: center 52%;
}

/* お悩み帯：見出し・チェック・締めを一枚の帯に */
.sp-page-tuning .sp-cases {
	padding-block: 52px;
}

.sp-page-tuning .sp-cases > .sp-wrap {
	grid-template-columns: 285px minmax(0, 1fr) 300px;
	gap: 46px;
}

.sp-page-tuning .sp-cases__head {
	padding-right: 40px;
}

.sp-page-tuning .sp-cases__ttl {
	font-size: clamp(26px, 2.25vw, 34px);
}

.sp-page-tuning .sp-cases__list {
	gap: 18px 42px;
}

.sp-page-tuning .sp-cases__list li {
	font-size: 15px;
}

.sp-page-tuning .sp-cases__note {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.9;
}

.sp-page-tuning .sp-cases__note strong {
	font-family: var(--sp-font-serif);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.8;
	color: #fff;
}

.sp-page-tuning .sp-cases__note span {
	color: rgba(255, 255, 255, .76);
}

/* 01：人物写真を完全に主役にする */
.sp-page-tuning .sp-tuning-story {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(90deg, transparent 0 51%, rgba(197, 154, 85, .07) 51% 100%),
		var(--sp-tune-ivory);
}

.sp-page-tuning .sp-tuning-editorial {
	grid-template-columns: minmax(0, 1.08fr) minmax(480px, .92fr);
	min-height: 700px;
}

.sp-page-tuning .sp-tuning-editorial__photo {
	min-height: 700px;
}

.sp-page-tuning .sp-tuning-editorial__photo::before {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	width: 90px;
	background: linear-gradient(90deg, transparent, rgba(251, 248, 241, .92));
	content: "";
}

.sp-page-tuning .sp-tuning-editorial__img {
	width: 100%;
	height: 700px;
	object-position: center 44%;
}

.sp-page-tuning .sp-tuning-editorial__photo figcaption {
	right: 54px;
	bottom: 42px;
	left: 54px;
	font-size: 18px;
}

.sp-page-tuning .sp-tuning-editorial__body {
	max-width: 760px;
	padding: 110px clamp(64px, 7vw, 118px);
}

.sp-page-tuning .sp-tuning-editorial__no {
	top: 74px;
	right: 70px;
	font-size: 120px;
	color: rgba(11, 61, 103, .08);
}

.sp-page-tuning .sp-tuning-editorial .sp-hd2 {
	max-width: 610px;
	margin-bottom: 34px !important;
}

.sp-page-tuning .sp-tuning-editorial .sp-h2 {
	font-size: clamp(36px, 3.3vw, 52px) !important;
	line-height: 1.62;
}

.sp-page-tuning .sp-tuning-editorial .sp-lede {
	max-width: 620px;
	font-size: 17px;
	line-height: 2.35;
}

/* 02：写真の直後に、セクション全体を大判の料金面として続ける */
.sp-page-tuning .sp-tuning-pricing {
	padding-block: clamp(110px, 9vw, 150px) clamp(96px, 8vw, 132px);
	background:
		linear-gradient(90deg, rgba(197, 154, 85, .08) 1px, transparent 1px) center / 120px 100%,
		radial-gradient(circle at 90% 12%, rgba(197, 154, 85, .17), transparent 23%),
		linear-gradient(180deg, #fff 0%, #faf6ee 42%, #f4ecdd 100%);
}

.sp-page-tuning .sp-tuning-pricing__head {
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 44px;
	max-width: 900px;
	margin-bottom: 64px;
}

.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
	font-size: clamp(100px, 9vw, 142px);
	line-height: .8;
}

.sp-page-tuning .sp-tuning-pricing__head .sp-h2 {
	font-size: clamp(43px, 4.1vw, 61px);
}

.sp-page-tuning .sp-tuning-pricing__head p:last-child {
	margin-top: 14px;
	font-size: 16px;
}

.sp-page-tuning .sp-tuning-pricing__panel {
	padding: clamp(44px, 4.5vw, 72px);
	background: rgba(255, 253, 248, .88);
	border: 1px solid #cfae72;
	box-shadow: 0 34px 80px rgba(29, 50, 68, .11);
}

.sp-page-tuning .sp-tuning-pricing__panel::before,
.sp-page-tuning .sp-tuning-pricing__panel::after {
	width: 58px;
	height: 58px;
}

.sp-page-tuning .sp-tuning-pricing__panel::before {
	top: 15px;
	left: 15px;
}

.sp-page-tuning .sp-tuning-pricing__panel::after {
	right: 15px;
	bottom: 15px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 3.3vw, 52px);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
	min-height: 470px;
	padding: clamp(42px, 4vw, 62px);
	background:
		radial-gradient(circle at 100% 0, rgba(197, 154, 85, .11), transparent 34%),
		#fff;
	border-color: #d6b980;
	box-shadow: 0 18px 44px rgba(38, 50, 61, .08);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i::before {
	right: 32px;
	left: 32px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__n {
	margin-bottom: 18px;
	font-size: clamp(27px, 2.3vw, 35px);
	line-height: 1.45;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__n small {
	margin-top: 5px;
	font-size: 11px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__copy {
	margin-bottom: 30px;
	font-size: 15px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
	padding: 14px 16px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__refl {
	font-size: 11px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__refv {
	font-size: 15px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__v {
	margin-top: 26px;
	padding-top: 23px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__who {
	padding: 6px 15px;
	font-size: 12px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
	font-size: clamp(64px, 6vw, 88px);
	line-height: 1;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__yen {
	font-size: 28px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__tax {
	font-size: 14px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__ex {
	margin-top: 10px;
	font-size: 15px;
}

.sp-page-tuning .sp-tuning-pricing__notes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-top: 30px;
}

.sp-page-tuning .sp-tuning-pricing__notes p {
	margin: 0;
	font-size: 13px;
}

/* 料金から年次案内までの情報リズム */
.sp-page-tuning .sp-tuning-time {
	padding-block: 0 112px;
	background: #f4ecdd;
}

.sp-page-tuning .sp-tuning-time__card {
	grid-template-columns: 138px minmax(0, 1fr);
	gap: 42px;
	min-height: 190px;
	padding: 38px 52px;
	border-color: #d8c39f;
	box-shadow: 0 18px 48px rgba(21, 49, 72, .08);
}

.sp-page-tuning .sp-tuning-time__icon {
	width: 110px;
	height: 110px;
}

.sp-page-tuning .sp-tuning-time__card h2 {
	font-size: 30px;
}

.sp-page-tuning .sp-tuning-time__card p:last-child {
	font-size: 16px;
}

.sp-page-tuning .sp-annual {
	padding-block: 112px;
}

.sp-page-tuning .sp-annual .sp-h2 {
	font-size: clamp(38px, 3.8vw, 54px) !important;
}

.sp-page-tuning .sp-annual__card {
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 42px;
	min-height: 190px;
	padding: 38px 52px;
}

.sp-page-tuning .sp-annual__badge {
	width: 122px;
	height: 122px;
}

.sp-page-tuning .sp-annual__body p {
	font-size: 17px;
	line-height: 2.1;
}

/* 後半も幅とタイポグラフィを落とさない */
.sp-page-tuning .sp-tuning-condition {
	padding-block: 128px;
}

.sp-page-tuning .sp-tuning-condition .sp-lede {
	max-width: 980px;
	margin: 0 auto 42px;
	font-size: 17px;
	line-height: 2.2;
}

.sp-page-tuning .sp-tuning-condition .sp-priceblk {
	margin-top: 0;
}

.sp-page-tuning .sp-tuning-condition .sp-table th,
.sp-page-tuning .sp-tuning-condition .sp-table td {
	padding: 22px 28px;
	font-size: 16px;
}

.sp-page-tuning .sp-tuning-condition .sp-price {
	font-size: 22px !important;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-tuning-condition .sp-notice {
	padding: 26px 30px;
}

.sp-page-tuning .sp-tuning-info {
	padding-block: 120px;
}

.sp-page-tuning .sp-tuning-info > .sp-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr);
	gap: 28px;
}

.sp-page-tuning .sp-tuning-info .sp-hd2 {
	grid-column: 1 / -1;
}

.sp-page-tuning .sp-tuning-info .sp-notice {
	margin: 0;
	padding: 34px 38px;
}

.sp-page-tuning .sp-tuning-info .sp-notice li,
.sp-page-tuning .sp-tuning-info .sp-notice p {
	font-size: 16px;
	line-height: 2;
}

.sp-page-tuning .sp-tuning-flow {
	padding-block: 130px;
}

.sp-page-tuning .sp-tuning-flow .sp-flow {
	margin-top: 72px;
}

.sp-page-tuning .sp-tuning-flow .sp-flow li {
	min-height: 240px;
	padding: 76px 25px 26px;
}

.sp-page-tuning .sp-tuning-flow .sp-flow__no {
	top: -30px;
	width: 60px;
	height: 60px;
	font-size: 18px;
}

.sp-page-tuning .sp-tuning-flow .sp-flow h3 {
	font-size: 18px;
	line-height: 1.6;
}

.sp-page-tuning .sp-tuning-flow .sp-flow p {
	font-size: 14px;
}

.sp-page-tuning .sp-tuning-faq {
	padding-block: 126px;
}

.sp-page-tuning .sp-tuning-faq > .sp-wrap:not(.sp-wrap--n),
.sp-page-tuning .sp-tuning-faq > .sp-wrap--n {
	max-width: 1120px;
}

.sp-page-tuning .sp-tuning-faq .sp-faq summary {
	min-height: 78px;
	padding: 25px 74px;
	font-size: 18px;
}

.sp-page-tuning .sp-tuning-faq .sp-faq summary::before {
	left: 25px;
}

.sp-page-tuning .sp-tuning-faq .sp-faq details p {
	padding: 0 42px 28px 74px;
	font-size: 16px;
	line-height: 2;
}

.sp-page-tuning .sp-tuning-related {
	padding-block: 78px;
}

.sp-page-tuning .sp-tuning-related .sp-notice {
	padding: 36px 42px;
}

.sp-page-tuning .sp-section--links {
	padding-block: 112px;
}

.sp-page-tuning .sp-section--links .sp-links__i {
	min-height: 180px;
	padding: 34px 30px;
}

.sp-page-tuning .sp-section--links .sp-links__t {
	font-family: var(--sp-font-serif);
	font-size: 22px;
}

.sp-page-tuning .sp-cta--page {
	min-height: 430px;
	padding-block: 100px;
}

.sp-page-tuning .sp-cta--page .sp-cta__ttl {
	font-family: var(--sp-font-serif);
	font-size: clamp(34px, 3.6vw, 50px);
	font-weight: 500;
	line-height: 1.55;
}

.sp-page-tuning .sp-cta--page .sp-cta__lead {
	font-size: 16px;
	line-height: 2;
}

.sp-page-tuning .sp-cta--page .sp-cta__tel b {
	font-size: clamp(46px, 5vw, 68px);
}

.sp-page-tuning .sp-cta--page .sp-btn {
	min-height: 62px;
	padding-inline: 30px;
}

@media (max-width: 1180px) {
	.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
	.sp-page-tuning .sp-tfv__in {
		grid-template-columns: minmax(430px, .9fr) minmax(480px, 1.1fr);
	}

	.sp-page-tuning .sp-tfv__body {
		padding-right: 46px;
	}

	.sp-page-tuning .sp-cases > .sp-wrap {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.sp-page-tuning .sp-cases__note {
		grid-column: 1 / -1;
		padding: 20px 0 0;
		border-top: 1px solid rgba(229, 207, 170, .35);
		border-left: 0;
	}

	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr);
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		padding: 42px 36px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
		font-size: clamp(58px, 6vw, 74px);
	}
}

@media (max-width: 900px) {
	.sp-page-tuning .sp-tfv,
	.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
	.sp-page-tuning .sp-tfv__in {
		min-height: 0;
	}

	.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
	.sp-page-tuning .sp-tfv__in {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 var(--sp-gut);
	}

	.sp-page-tuning .sp-tfv__body {
		max-width: 760px;
		padding: 72px 0 58px;
	}

	.sp-page-tuning .sp-tfv__shot {
		min-height: 520px;
		margin: 0 calc(var(--sp-gut) * -1);
	}

	.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
		min-height: 520px;
	}

	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-editorial__photo,
	.sp-page-tuning .sp-tuning-editorial__img {
		min-height: 580px;
		height: 580px;
	}

	.sp-page-tuning .sp-tuning-editorial__photo::before {
		display: none;
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding: 86px var(--sp-gut);
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		min-height: 0;
	}

	.sp-page-tuning .sp-tuning-pricing__notes {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-info > .sp-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-info .sp-hd2 {
		grid-column: auto;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 0;
	}
}

@media (max-width: 767px) {
	.sp-page-tuning #sp-main .sp-hd2 {
		margin-bottom: 34px;
	}

	.sp-page-tuning #sp-main .sp-h2 {
		font-size: 30px;
	}

	.sp-page-tuning .sp-tfv__body {
		padding-block: 52px 42px;
	}

	.sp-page-tuning .sp-tfv__ttl {
		font-size: 46px;
	}

	.sp-page-tuning .sp-tfv__catch {
		font-size: 24px;
	}

	.sp-page-tuning .sp-tfv__lead {
		font-size: 15px;
	}

	.sp-page-tuning .sp-tfv__points li {
		min-height: 0;
	}

	.sp-page-tuning .sp-tfv__act .sp-btn {
		min-width: 0;
		min-height: 58px;
	}

	.sp-page-tuning .sp-tfv__shot,
	.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
		min-height: 0;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.sp-page-tuning .sp-cases {
		padding-block: 46px;
	}

	.sp-page-tuning .sp-cases > .sp-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.sp-page-tuning .sp-cases__note {
		grid-column: auto;
	}

	.sp-page-tuning .sp-cases__note strong {
		font-size: 18px;
	}

	.sp-page-tuning .sp-tuning-editorial {
		min-height: 0;
	}

	.sp-page-tuning .sp-tuning-editorial__photo,
	.sp-page-tuning .sp-tuning-editorial__img {
		min-height: 0;
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding: 70px var(--sp-gut) 76px;
	}

	.sp-page-tuning .sp-tuning-editorial__no {
		top: 38px;
		font-size: 74px;
	}

	.sp-page-tuning .sp-tuning-editorial .sp-h2 {
		font-size: 31px !important;
	}

	.sp-page-tuning .sp-tuning-editorial .sp-lede {
		font-size: 15px;
		line-height: 2.05;
	}

	.sp-page-tuning .sp-tuning-pricing {
		padding-block: 82px 72px;
	}

	.sp-page-tuning .sp-tuning-pricing__head {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 15px;
		margin-bottom: 38px;
	}

	.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
		font-size: 64px;
	}

	.sp-page-tuning .sp-tuning-pricing__head .sp-h2 {
		font-size: 36px;
	}

	.sp-page-tuning .sp-tuning-pricing__panel {
		padding: 26px 16px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice {
		gap: 20px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		padding: 34px 24px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__n {
		font-size: 25px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
		font-size: 56px;
	}

	.sp-page-tuning .sp-tuning-time {
		padding-bottom: 76px;
	}

	.sp-page-tuning .sp-tuning-time__card,
	.sp-page-tuning .sp-annual__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 30px 24px;
	}

	.sp-page-tuning .sp-annual {
		padding-block: 78px;
	}

	.sp-page-tuning .sp-annual .sp-h2 {
		font-size: 31px !important;
	}

	.sp-page-tuning .sp-tuning-condition,
	.sp-page-tuning .sp-tuning-info,
	.sp-page-tuning .sp-tuning-flow,
	.sp-page-tuning .sp-tuning-faq,
	.sp-page-tuning .sp-section--links {
		padding-block: 78px;
	}

	.sp-page-tuning .sp-tuning-condition .sp-lede {
		font-size: 15px;
	}

	.sp-page-tuning .sp-tuning-condition .sp-table th,
	.sp-page-tuning .sp-tuning-condition .sp-table td {
		padding: 17px 15px;
		font-size: 14px;
	}

	.sp-page-tuning .sp-tuning-info .sp-notice {
		padding: 27px 22px;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		margin-top: 35px;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow li {
		min-height: 0;
		padding: 24px 20px 24px 86px;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow__no {
		top: 22px;
		left: 18px;
		width: 52px;
		height: 52px;
	}

	.sp-page-tuning .sp-tuning-faq .sp-faq summary {
		min-height: 68px;
		padding: 20px 50px 20px 56px;
		font-size: 15px;
	}

	.sp-page-tuning .sp-tuning-faq .sp-faq summary::before {
		left: 15px;
	}

	.sp-page-tuning .sp-tuning-faq .sp-faq details p {
		padding: 0 20px 24px 56px;
		font-size: 14px;
	}

	.sp-page-tuning .sp-cta--page {
		min-height: 0;
		padding-block: 76px 82px;
	}

	.sp-page-tuning .sp-cta--page .sp-cta__ttl {
		font-size: 31px;
	}
}
/* ==========================================================================
   v0.22.0 調律ページ・文字組とカタログ感の最終調整
   人物の視線、見出しの品位、料金の誌面感、後半の連続性を整える。
   ========================================================================== */
.sp-page-tuning {
	--sp-tune-navy: #092f50;
	--sp-tune-navy-deep: #05243d;
	--sp-tune-gold: #b99050;
	--sp-tune-gold-pale: #ddc89f;
	--sp-tune-ivory: #fbf8f1;
	--sp-tune-paper: #f7f1e6;
	--sp-tune-copper: #b85b34;
	--sp-font-serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "BIZ UDPMincho", "Noto Serif JP", serif;
}

.sp-page-tuning #sp-main {
	font-kerning: normal;
	font-feature-settings: "palt" 1;
}

.sp-page-tuning #sp-main .sp-h2,
.sp-page-tuning #sp-main .sp-tfv__ttl,
.sp-page-tuning #sp-main .sp-tfv__catch,
.sp-page-tuning #sp-main .sp-cases__ttl,
.sp-page-tuning #sp-main .sp-tprice__n,
.sp-page-tuning #sp-main .sp-cta__ttl {
	text-wrap: balance;
}

.sp-page-tuning #sp-main .sp-h2 {
	font-weight: 500;
	line-height: 1.48;
	letter-spacing: .075em;
}

.sp-page-tuning #sp-main .sp-eyebrow {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .28em;
}

.sp-page-tuning #sp-main .sp-hd2::after {
	width: 48px;
	height: 1px;
	background: var(--sp-tune-gold);
}

/* FV：余白の中に明確な優先順位を作る */
.sp-page-tuning .sp-tfv {
	background:
		linear-gradient(90deg, rgba(185, 144, 80, .035) 1px, transparent 1px) 0 0 / 96px 100%,
		radial-gradient(circle at 0 100%, rgba(185, 144, 80, .14), transparent 28%),
		#fdfbf7;
}

.sp-page-tuning .sp-tfv__body {
	position: relative;
	padding-top: clamp(74px, 7vw, 106px);
	padding-bottom: clamp(70px, 7vw, 104px);
}

.sp-page-tuning .sp-tfv__body::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--sp-gut) - 24px);
	width: 1px;
	background: linear-gradient(transparent 7%, rgba(185, 144, 80, .5) 28% 72%, transparent 93%);
	content: "";
}

.sp-page-tuning .sp-tfv__eye {
	margin-bottom: 20px;
	color: #8e6936;
}

.sp-page-tuning .sp-tfv__ttl {
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: .105em;
}

.sp-page-tuning .sp-tfv__ttl::after {
	height: 1px;
	margin-top: 28px;
}

.sp-page-tuning .sp-tfv__catch {
	margin-top: 34px;
	font-weight: 500;
	line-height: 1.68;
	letter-spacing: .055em;
}

.sp-page-tuning .sp-tfv__lead {
	max-width: 41em;
	color: #344b5e;
}

.sp-page-tuning .sp-tfv__lead--sub {
	margin-top: 9px;
	color: #65737e;
}

.sp-page-tuning .sp-tfv__points {
	border-color: #dacdb8;
}

.sp-page-tuning .sp-tfv__points li {
	position: relative;
	padding: 19px 17px 18px;
	border-color: #dacdb8;
}

.sp-page-tuning .sp-tfv__points li::after {
	position: absolute;
	right: 13px;
	bottom: 9px;
	width: 17px;
	height: 1px;
	background: rgba(185, 144, 80, .58);
	content: "";
}

.sp-page-tuning .sp-tfv__ico {
	display: grid;
	place-items: center;
	width: 35px;
	height: 35px;
	margin-bottom: 10px;
	background: rgba(185, 144, 80, .08);
	border: 1px solid rgba(185, 144, 80, .34);
	border-radius: 50%;
}

.sp-page-tuning .sp-tfv__pttl {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .025em;
}

.sp-page-tuning .sp-tfv__act .sp-btn {
	position: relative;
	justify-content: flex-start;
	padding-right: 68px;
	padding-left: 34px;
	font-weight: 600;
	letter-spacing: .075em;
	background: #ad5a2d;
	box-shadow: 0 16px 35px rgba(96, 55, 28, .2);
}

.sp-page-tuning .sp-tfv__act .sp-btn::after {
	position: absolute;
	right: 28px;
	width: 27px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: skewX(38deg);
	content: "";
}

.sp-page-tuning .sp-tfv__shot::after {
	background: linear-gradient(90deg, rgba(251, 248, 241, .34), transparent 15% 78%, rgba(3, 25, 42, .2));
}

/* 01：左に文章、右に左向き人物写真。視線が本文へ戻る構図 */
.sp-page-tuning .sp-tuning-story {
	background:
		linear-gradient(90deg, #fbf8f1 0 43%, #f5eddf 43% 100%);
}

.sp-page-tuning .sp-tuning-editorial {
	grid-template-columns: minmax(430px, .82fr) minmax(0, 1.18fr);
	min-height: 720px;
}

.sp-page-tuning .sp-tuning-editorial:not(.sp-tuning-editorial--photo) {
	grid-template-columns: minmax(0, 1fr);
}

.sp-page-tuning .sp-tuning-editorial__body {
	z-index: 2;
	max-width: 670px;
	padding: 118px clamp(58px, 6.5vw, 105px) 108px max(var(--sp-gut), calc((100vw - 1380px) / 2));
}

.sp-page-tuning .sp-tuning-editorial__body::after {
	display: block;
	width: 82px;
	height: 1px;
	margin-top: 43px;
	background: var(--sp-tune-gold);
	content: "";
}

.sp-page-tuning .sp-tuning-editorial__no {
	top: 55px;
	right: 46px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 132px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.07em;
	color: rgba(9, 47, 80, .075);
}

.sp-page-tuning .sp-tuning-editorial .sp-hd2 {
	position: relative;
	max-width: 520px;
}

.sp-page-tuning .sp-tuning-editorial .sp-h2 {
	font-size: clamp(36px, 3.1vw, 49px) !important;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .07em;
}

.sp-page-tuning .sp-tuning-editorial .sp-lede {
	max-width: 36em;
	font-size: 16px;
	line-height: 2.4;
	letter-spacing: .025em;
	color: #3f4f5b;
}

.sp-page-tuning .sp-tuning-editorial__photo {
	min-height: 720px;
	box-shadow: -26px 0 70px rgba(37, 35, 30, .08);
}

.sp-page-tuning .sp-tuning-editorial__photo::before {
	right: auto;
	left: 0;
	width: 110px;
	background: linear-gradient(90deg, rgba(251, 248, 241, .82), transparent);
}

.sp-page-tuning .sp-tuning-editorial__photo::after {
	background: linear-gradient(90deg, rgba(4, 32, 53, .11), transparent 38% 78%, rgba(4, 32, 53, .12));
}

.sp-page-tuning .sp-tuning-editorial__img {
	height: 720px;
	object-position: center 42%;
}

.sp-page-tuning .sp-tuning-editorial__photo figcaption {
	right: 48px;
	bottom: 36px;
	left: 70px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: .075em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* 02：二重の細線と紙の陰影で、料金全体を一枚の誌面にする */
.sp-page-tuning .sp-tuning-pricing {
	background:
		linear-gradient(90deg, rgba(185, 144, 80, .06) 1px, transparent 1px) center / 112px 100%,
		radial-gradient(circle at 88% 9%, rgba(185, 144, 80, .18), transparent 24%),
		linear-gradient(180deg, #fff 0%, #faf6ef 38%, #f3eadb 100%);
}

.sp-page-tuning .sp-tuning-pricing__head {
	align-items: center;
}

.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.07em;
	color: rgba(9, 47, 80, .14);
}

.sp-page-tuning .sp-tuning-pricing__head .sp-h2 {
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .095em;
}

.sp-page-tuning .sp-tuning-pricing__panel {
	padding: clamp(56px, 5vw, 78px);
	background:
		linear-gradient(135deg, rgba(185, 144, 80, .08), transparent 22% 78%, rgba(185, 144, 80, .08)),
		rgba(255, 253, 248, .95);
	border-color: #c9aa72;
	box-shadow: 0 36px 90px rgba(29, 48, 64, .115);
}

.sp-page-tuning .sp-tuning-pricing__panel::before,
.sp-page-tuning .sp-tuning-pricing__panel::after {
	width: 72px;
	height: 72px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice {
	gap: clamp(30px, 3.3vw, 50px);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 490px;
	padding: clamp(45px, 4vw, 60px);
	background:
		linear-gradient(180deg, rgba(251, 247, 239, .6), transparent 32%),
		#fff;
	border: 1px solid #cfb888;
	border-radius: 1px;
	box-shadow: 0 18px 45px rgba(36, 47, 57, .075);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i::after {
	position: absolute;
	inset: 9px;
	pointer-events: none;
	border: 1px solid rgba(185, 144, 80, .26);
	content: "";
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__n {
	position: relative;
	z-index: 1;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .065em;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__n small {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	letter-spacing: .2em;
	color: #8d7656;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__copy {
	position: relative;
	z-index: 1;
	line-height: 1.9;
	color: #4d5d68;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
	position: relative;
	z-index: 1;
	margin-top: auto;
	background: #f4f1ea;
	border-left: 2px solid #d2bd95;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__v {
	position: relative;
	z-index: 1;
	margin-top: 24px;
	padding-top: 24px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i--direct .sp-tprice__v {
	margin-top: auto;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i--direct {
	min-height: 365px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__who {
	background: #a77b3d;
	letter-spacing: .08em;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
	font-family: Georgia, "Times New Roman", var(--sp-font-num);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -.035em;
	color: var(--sp-tune-copper);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__yen,
.sp-page-tuning .sp-tuning-pricing .sp-tprice__tax {
	color: var(--sp-tune-copper);
}

.sp-page-tuning .sp-tuning-pricing__notes {
	padding-inline: 8px;
	color: #64717a;
}

/* 後半：同じ罫線・紙・真鍮色を繰り返して一続きの景色にする */
.sp-page-tuning .sp-tuning-time__card,
.sp-page-tuning .sp-annual__card,
.sp-page-tuning .sp-tuning-condition .sp-priceblk,
.sp-page-tuning .sp-tuning-condition .sp-notice,
.sp-page-tuning .sp-tuning-info .sp-notice,
.sp-page-tuning .sp-tuning-related .sp-notice {
	border-radius: 1px;
}

.sp-page-tuning .sp-tuning-time__card {
	position: relative;
	border-color: #d3bd94;
	box-shadow: 0 18px 50px rgba(21, 49, 72, .075);
}

.sp-page-tuning .sp-tuning-time__card::after {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-top: 1px solid #c4a466;
	border-right: 1px solid #c4a466;
	content: "";
}

.sp-page-tuning .sp-tuning-time__card h2 {
	font-family: var(--sp-font-serif);
	font-weight: 500;
	letter-spacing: .065em;
}

.sp-page-tuning .sp-annual {
	position: relative;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 90px 100%,
		linear-gradient(112deg, var(--sp-tune-navy-deep), #0c456f);
}

.sp-page-tuning .sp-annual::before {
	position: absolute;
	top: 0;
	right: 8%;
	width: 1px;
	height: 38%;
	background: linear-gradient(rgba(221, 200, 159, .7), transparent);
	content: "";
}

.sp-page-tuning .sp-annual__card {
	border-color: rgba(221, 200, 159, .92);
	box-shadow: 0 22px 60px rgba(2, 23, 40, .22);
}

.sp-page-tuning .sp-tuning-condition {
	background:
		radial-gradient(circle at 8% 10%, rgba(185, 144, 80, .07), transparent 25%),
		#fff;
}

.sp-page-tuning .sp-tuning-condition .sp-priceblk {
	border-color: #d1b98d;
	box-shadow: 0 17px 42px rgba(19, 48, 72, .065);
}

.sp-page-tuning .sp-tuning-condition .sp-notice {
	border-left: 2px solid var(--sp-tune-gold);
	background: #fbf8f2;
}

.sp-page-tuning .sp-tuning-info {
	background:
		linear-gradient(rgba(246, 241, 232, .9), rgba(251, 249, 245, .97)),
		repeating-linear-gradient(90deg, transparent 0 79px, rgba(185, 144, 80, .09) 80px);
}

.sp-page-tuning .sp-tuning-info .sp-notice {
	position: relative;
	padding-top: 42px;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 16px 42px rgba(19, 48, 72, .06);
}

.sp-page-tuning .sp-tuning-info .sp-notice::before {
	position: absolute;
	top: 0;
	right: 28px;
	left: 28px;
	height: 2px;
	background: linear-gradient(90deg, var(--sp-tune-gold), rgba(185, 144, 80, .12));
	content: "";
}

.sp-page-tuning .sp-tuning-flow {
	background:
		linear-gradient(180deg, #fff, #fdfbf7);
}

.sp-page-tuning .sp-tuning-flow .sp-flow {
	border-block: 1px solid #d7c5a3;
}

.sp-page-tuning .sp-tuning-flow .sp-flow li {
	min-height: 250px;
	padding: 82px 24px 30px;
	background: rgba(255, 255, 255, .74);
	border-top: 0;
	border-right: 1px solid #e5dac7;
}

.sp-page-tuning .sp-tuning-flow .sp-flow li:nth-child(even) {
	background: #faf6ef;
}

.sp-page-tuning .sp-tuning-flow .sp-flow li:last-child {
	border-right: 0;
}

.sp-page-tuning .sp-tuning-flow .sp-flow li::before {
	display: none;
}

.sp-page-tuning .sp-tuning-flow .sp-flow__no {
	top: 23px;
	left: 24px;
	width: 43px;
	height: 43px;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	color: var(--sp-tune-navy);
	background: transparent;
	border: 1px solid var(--sp-tune-gold);
	box-shadow: none;
}

.sp-page-tuning .sp-tuning-flow .sp-flow h3 {
	font-weight: 500;
	letter-spacing: .045em;
}

.sp-page-tuning .sp-tuning-faq {
	background:
		linear-gradient(90deg, rgba(185, 144, 80, .045) 1px, transparent 1px) center / 100px 100%,
		linear-gradient(180deg, #f8f3e9, #f1f5f7);
}

.sp-page-tuning .sp-tuning-faq .sp-faq {
	border-top-color: #cdb687;
	box-shadow: 0 22px 54px rgba(22, 45, 62, .07);
}

.sp-page-tuning .sp-tuning-faq .sp-faq details {
	background: rgba(255, 255, 255, .93);
	border-color: #dfd5c4;
}

.sp-page-tuning .sp-tuning-faq .sp-faq summary {
	font-family: var(--sp-font-serif);
	font-weight: 500;
	letter-spacing: .035em;
}

.sp-page-tuning .sp-tuning-faq .sp-faq summary::before {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
}

.sp-page-tuning .sp-tuning-related {
	padding-block: 86px;
	background: #fff;
}

.sp-page-tuning .sp-tuning-related .sp-notice {
	position: relative;
	padding: 44px 48px;
	background:
		linear-gradient(105deg, #fbf7ee, #fff 64%);
	border-color: #ddceb2;
	box-shadow: 0 15px 42px rgba(21, 49, 72, .055);
}

.sp-page-tuning .sp-tuning-related .sp-notice__t {
	font-family: var(--sp-font-serif);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: .045em;
	color: var(--sp-tune-navy);
}

.sp-page-tuning .sp-section--links {
	background:
		linear-gradient(180deg, #fff, #faf7f1);
}

.sp-page-tuning .sp-section--links .sp-links__i {
	position: relative;
	background: rgba(255, 255, 255, .9);
	border-color: #d9c8a7;
	box-shadow: 0 14px 36px rgba(25, 48, 65, .055);
}

.sp-page-tuning .sp-section--links .sp-links__i::before {
	position: absolute;
	top: 0;
	right: 22px;
	left: 22px;
	height: 2px;
	background: linear-gradient(90deg, var(--sp-tune-gold), transparent);
	content: "";
}

.sp-page-tuning .sp-cta--page {
	border-top: 1px solid rgba(221, 200, 159, .55);
	background:
		linear-gradient(90deg, rgba(5, 36, 61, .985), rgba(7, 46, 77, .9)),
		linear-gradient(135deg, var(--sp-tune-navy-deep), #071f36);
}

.sp-page-tuning .sp-cta--page::after {
	position: absolute;
	top: 0;
	right: 8%;
	width: 170px;
	height: 1px;
	background: var(--sp-tune-gold-pale);
	content: "";
}

.sp-page-tuning .sp-cta--page .sp-cta__ttl {
	font-weight: 500;
	letter-spacing: .075em;
}

.sp-page-tuning .sp-cta--page .sp-btn {
	border-radius: 1px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

@media (max-width: 1180px) {
	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(390px, .88fr) minmax(0, 1.12fr);
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding-inline: var(--sp-gut) clamp(45px, 5vw, 72px);
	}
}

@media (max-width: 900px) {
	.sp-page-tuning .sp-tfv__body::before {
		left: -18px;
	}

	.sp-page-tuning .sp-tuning-story {
		background: var(--sp-tune-ivory);
	}

	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		max-width: 760px;
		padding: 92px var(--sp-gut) 88px;
	}

	.sp-page-tuning .sp-tuning-editorial__photo {
		box-shadow: none;
	}

	.sp-page-tuning .sp-tuning-editorial__photo::before {
		display: none;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		min-height: 450px;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow {
		border: 0;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow li {
		border-top: 1px solid #d7c5a3;
	}
}

@media (max-width: 767px) {
	.sp-page-tuning #sp-main .sp-h2 {
		font-size: 30px;
		line-height: 1.6;
		letter-spacing: .055em;
	}

	.sp-page-tuning .sp-tfv__body {
		padding-top: 56px;
	}

	.sp-page-tuning .sp-tfv__body::before {
		display: none;
	}

	.sp-page-tuning .sp-tfv__ttl {
		font-size: clamp(42px, 12vw, 50px);
		letter-spacing: .075em;
	}

	.sp-page-tuning .sp-tfv__catch {
		font-size: clamp(23px, 6.6vw, 27px);
		line-height: 1.75;
		letter-spacing: .035em;
	}

	.sp-page-tuning .sp-tfv__points li::after {
		display: none;
	}

	.sp-page-tuning .sp-tfv__act .sp-btn {
		width: 100%;
		padding-right: 62px;
		padding-left: 25px;
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding-block: 76px 72px;
	}

	.sp-page-tuning .sp-tuning-editorial__body::after {
		margin-top: 32px;
	}

	.sp-page-tuning .sp-tuning-editorial__no {
		top: 34px;
		right: 22px;
		font-size: 82px;
	}

	.sp-page-tuning .sp-tuning-editorial .sp-h2 {
		font-size: 30px !important;
		line-height: 1.7;
	}

	.sp-page-tuning .sp-tuning-editorial__photo,
	.sp-page-tuning .sp-tuning-editorial__img {
		aspect-ratio: 4 / 5;
	}

	.sp-page-tuning .sp-tuning-editorial__photo figcaption {
		right: 24px;
		bottom: 24px;
		left: 24px;
	}

	.sp-page-tuning .sp-tuning-pricing__panel {
		padding: 28px 16px;
	}

	.sp-page-tuning .sp-tuning-pricing__panel::before,
	.sp-page-tuning .sp-tuning-pricing__panel::after {
		width: 38px;
		height: 38px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i,
	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i--direct {
		min-height: 0;
		padding: 36px 25px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i--direct .sp-tprice__v {
		margin-top: 28px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
		font-size: clamp(48px, 15vw, 58px);
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow li,
	.sp-page-tuning .sp-tuning-flow .sp-flow li:nth-child(even) {
		min-height: 0;
		padding: 27px 20px 27px 86px;
		background: #fff;
		border: 1px solid #ded0b7;
	}

	.sp-page-tuning .sp-tuning-flow .sp-flow__no {
		top: 22px;
		left: 20px;
	}

	.sp-page-tuning .sp-tuning-related {
		padding-block: 68px;
	}

	.sp-page-tuning .sp-tuning-related .sp-notice {
		padding: 34px 24px;
	}

	.sp-page-tuning .sp-tuning-related .sp-notice__t {
		font-size: 19px;
		line-height: 1.75;
	}
}

/* v0.23.0：既存の調律ページ調整より後で適用する最終寸法 */
.sp-page-tuning .sp-tfv,
.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
.sp-page-tuning .sp-tfv__in {
	min-height: clamp(660px, 48vw, 710px);
}

.sp-page-tuning .sp-tfv__body {
	padding-top: clamp(62px, 5.8vw, 88px);
	padding-bottom: clamp(58px, 5.5vw, 82px);
}

.sp-page-tuning .sp-tfv__ttl {
	font-size: clamp(54px, 4.75vw, 72px);
}

.sp-page-tuning .sp-tfv__catch {
	margin-top: 29px;
	font-size: clamp(28px, 2.25vw, 36px);
}

.sp-page-tuning .sp-tfv__lead {
	margin-top: 17px;
	font-size: 16px;
	line-height: 1.95;
}

.sp-page-tuning .sp-tfv__points {
	margin-top: 25px;
}

.sp-page-tuning .sp-tfv__points li {
	min-height: 116px;
	padding: 17px 16px 15px;
}

.sp-page-tuning .sp-tfv__pdesc {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.65;
	letter-spacing: .01em;
	color: #687781;
}

.sp-page-tuning .sp-tfv__act {
	margin-top: 27px;
}

.sp-page-tuning .sp-tfv__shot,
.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
	min-height: clamp(660px, 48vw, 710px);
}

.sp-page-tuning .sp-cases {
	padding-block: 58px;
}

.sp-page-tuning .sp-cases > .sp-wrap {
	grid-template-columns: 270px minmax(0, 1fr) 310px;
	gap: clamp(34px, 3.5vw, 54px);
}

.sp-page-tuning .sp-cases__head {
	padding-right: 34px;
}

.sp-page-tuning .sp-cases__note {
	padding: 4px 0 4px 30px;
}

.sp-page-tuning .sp-tuning-editorial {
	grid-template-columns: minmax(430px, .78fr) minmax(0, 1.22fr);
	min-height: 700px;
}

.sp-page-tuning .sp-tuning-editorial__body {
	padding-top: 108px;
	padding-bottom: 102px;
}

.sp-page-tuning .sp-tuning-editorial__no {
	top: 48px;
	right: 38px;
	font-size: 138px;
}

.sp-page-tuning .sp-tuning-editorial .sp-h2 {
	font-size: clamp(35px, 2.95vw, 47px) !important;
	line-height: 1.68;
}

.sp-page-tuning .sp-tuning-editorial .sp-lede {
	font-size: 16px;
	line-height: 2.32;
}

.sp-page-tuning .sp-tuning-editorial__photo,
.sp-page-tuning .sp-tuning-editorial__img {
	min-height: 700px;
	height: 700px;
}

.sp-page-tuning .sp-tuning-pricing__head {
	grid-template-columns: 164px minmax(0, 1fr);
	gap: 36px;
}

.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
	font-size: clamp(96px, 8vw, 132px);
}

.sp-page-tuning .sp-tuning-pricing__panel {
	padding: clamp(50px, 4.5vw, 70px);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
	min-height: 472px;
	padding: clamp(42px, 3.6vw, 56px);
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 15px 18px;
}

.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
	font-size: clamp(62px, 5.6vw, 84px);
}

@media (max-width: 1180px) {
	.sp-page-tuning .sp-cases > .sp-wrap {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.sp-page-tuning .sp-cases__note {
		padding-left: 0;
	}

	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(380px, .86fr) minmax(0, 1.14fr);
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

@media (max-width: 900px) {
	.sp-page-tuning .sp-tfv,
	.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
	.sp-page-tuning .sp-tfv__in,
	.sp-page-tuning .sp-tfv__shot,
	.sp-page-tuning .sp-tfv__shot .sp-tfv__img {
		min-height: 0;
	}

	.sp-page-tuning .sp-tfv__body {
		padding-top: 70px;
		padding-bottom: 58px;
	}

	.sp-page-tuning .sp-tuning-editorial {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding-top: 88px;
		padding-bottom: 82px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.sp-page-tuning .sp-tfv__body {
		padding-top: 50px;
		padding-bottom: 40px;
	}

	.sp-page-tuning .sp-tfv__lead {
		font-size: 14.5px;
	}

	.sp-page-tuning .sp-tfv__points li {
		min-height: 0;
		padding: 15px 12px;
	}

	.sp-page-tuning .sp-tfv__pdesc {
		display: none;
	}

	.sp-page-tuning .sp-tuning-editorial__body {
		padding-top: 74px;
		padding-bottom: 70px;
	}

	.sp-page-tuning .sp-tuning-editorial__photo,
	.sp-page-tuning .sp-tuning-editorial__img {
		min-height: 0;
		height: auto;
	}

	.sp-page-tuning .sp-tuning-pricing__head {
		grid-template-columns: 70px minmax(0, 1fr);
		gap: 14px;
	}

	.sp-page-tuning .sp-tuning-pricing__panel {
		padding: 26px 14px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__i {
		padding: 35px 23px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__ref {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.sp-page-tuning .sp-tuning-pricing .sp-tprice__num {
		font-size: clamp(46px, 14vw, 56px);
	}
}

@media (min-width: 901px) {
	.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
	.sp-page-tuning .sp-tfv__in {
		grid-template-columns: minmax(600px, .92fr) minmax(620px, 1.08fr);
	}

	.sp-page-tuning .sp-tfv__body {
		padding-top: clamp(50px, 4.3vw, 68px);
		padding-right: clamp(42px, 4vw, 62px);
		padding-bottom: clamp(44px, 4vw, 62px);
	}

	.sp-page-tuning .sp-tfv__ttl {
		font-size: clamp(54px, 4.5vw, 68px);
	}

	.sp-page-tuning .sp-tfv__catch {
		font-size: clamp(28px, 2.15vw, 33px);
		line-height: 1.58;
	}
}

@media (min-width: 901px) and (max-width: 1500px) {
	.sp-page-tuning .sp-tfv__points li {
		min-height: 92px;
	}

	.sp-page-tuning .sp-tfv__pdesc {
		display: none;
	}
}

@media (min-width: 901px) and (max-width: 1180px) {
	.sp-page-tuning .sp-tfv--photo .sp-tfv__in,
	.sp-page-tuning .sp-tfv__in {
		grid-template-columns: minmax(440px, .96fr) minmax(450px, 1.04fr);
	}

	.sp-page-tuning .sp-tfv__body {
		padding-right: 38px;
	}
}

/* ==========================================================================
   v0.24.0 料金案内：宮崎県内の配送基本料金目安
   地図・料金・CTA の意匠を /price/ の中だけに閉じ込める。
   ========================================================================== */
.sp-page-price {
	--sp-price-navy: #0b304e;
	--sp-price-ivory: #f7f2e8;
	--sp-price-gold: #ad8550;
	--sp-price-rule: rgba(173, 133, 80, .48);
}

.sp-page-price .sp-delivery-guide {
	position: relative;
	overflow: hidden;
	padding-block: clamp(92px, 9vw, 142px);
	background:
		linear-gradient(90deg, rgba(11, 48, 78, .035) 1px, transparent 1px) 0 0 / 84px 84px,
		linear-gradient(0deg, rgba(11, 48, 78, .025) 1px, transparent 1px) 0 0 / 84px 84px,
		#fbf9f3;
	border-block: 1px solid #e5dbc9;
}

.sp-page-price .sp-delivery-guide::before,
.sp-page-price .sp-delivery-guide::after {
	position: absolute;
	width: 210px;
	height: 1px;
	background: var(--sp-price-gold);
	content: "";
	opacity: .6;
}

.sp-page-price .sp-delivery-guide::before {
	top: 34px;
	left: 0;
}

.sp-page-price .sp-delivery-guide::after {
	right: 0;
	bottom: 34px;
}

.sp-page-price .sp-delivery-guide__head {
	max-width: 830px;
	margin-inline: auto;
	text-align: center;
}

.sp-page-price .sp-delivery-guide__head .sp-eyebrow {
	margin-bottom: 14px;
	color: #8a683e;
	font-size: 12px;
	letter-spacing: .22em;
}

.sp-page-price .sp-delivery-guide__head .sp-h2 {
	margin: 0;
	color: var(--sp-price-navy);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
	font-size: clamp(34px, 3.2vw, 50px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .08em;
}

.sp-page-price .sp-delivery-guide__lead {
	margin: 27px 0 0;
	color: #485963;
	font-size: 16px;
	line-height: 2.05;
	letter-spacing: .025em;
}

.sp-page-price .sp-delivery-guide__layout {
	display: grid;
	grid-template-columns: minmax(360px, .88fr) minmax(490px, 1.12fr);
	gap: clamp(58px, 7vw, 104px);
	align-items: center;
	max-width: 1120px;
	margin: clamp(58px, 6vw, 88px) auto 0;
}

.sp-page-price .sp-delivery-map {
	position: relative;
	margin: 0;
	padding: 34px 22px 24px;
	background: rgba(255, 255, 255, .7);
	border: 1px solid var(--sp-price-rule);
}

.sp-page-price .sp-delivery-map::before,
.sp-page-price .sp-delivery-map::after {
	position: absolute;
	width: 46px;
	height: 46px;
	content: "";
	pointer-events: none;
}

.sp-page-price .sp-delivery-map::before {
	top: 9px;
	left: 9px;
	border-top: 1px solid var(--sp-price-gold);
	border-left: 1px solid var(--sp-price-gold);
}

.sp-page-price .sp-delivery-map::after {
	right: 9px;
	bottom: 9px;
	border-right: 1px solid var(--sp-price-gold);
	border-bottom: 1px solid var(--sp-price-gold);
}

.sp-page-price .sp-delivery-map__svg {
	display: block;
	width: min(100%, 410px);
	height: auto;
	margin-inline: auto;
}

.sp-page-price .sp-delivery-map figcaption {
	margin-top: 8px;
	color: #69767d;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
}

.sp-page-price .sp-delivery-map figcaption a {
	color: inherit;
	text-underline-offset: .2em;
}

.sp-page-price .sp-delivery-rates {
	border-top: 1px solid var(--sp-price-navy);
	border-bottom: 1px solid var(--sp-price-navy);
}

.sp-page-price .sp-delivery-rate {
	display: grid;
	grid-template-columns: minmax(150px, .72fr) minmax(260px, 1.28fr);
	gap: 28px;
	align-items: center;
	min-height: 140px;
	padding: 25px 9px 25px 24px;
	border-bottom: 1px solid #d8cbb7;
}

.sp-page-price .sp-delivery-rate:last-child {
	border-bottom: 0;
}

.sp-page-price .sp-delivery-rate__area {
	position: relative;
	padding-left: 18px;
}

.sp-page-price .sp-delivery-rate__area::before {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 2px;
	background: var(--sp-price-gold);
	content: "";
}

.sp-page-price .sp-delivery-rate__en {
	margin: 0 0 8px;
	color: #8a683e;
	font-family: var(--sp-font-num);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .15em;
}

.sp-page-price .sp-delivery-rate h3 {
	margin: 0;
	color: var(--sp-price-navy);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .08em;
}

.sp-page-price .sp-delivery-rate__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	margin: 0;
	color: var(--sp-price-navy);
	font-family: var(--sp-font-num);
	white-space: nowrap;
}

.sp-page-price .sp-delivery-rate__price strong {
	font-size: clamp(42px, 4.2vw, 58px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.035em;
}

.sp-page-price .sp-delivery-rate__price span {
	margin-left: 5px;
	font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 700;
}

.sp-page-price .sp-delivery-rate__price small {
	margin-left: 5px;
	color: #65737b;
	font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	font-size: 12px;
	font-weight: 500;
}

.sp-page-price .sp-delivery-guide__notes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px 30px;
	max-width: 1120px;
	margin: 43px auto 0;
	padding: 27px 30px;
	background: rgba(255, 255, 255, .68);
	border-left: 3px solid var(--sp-price-gold);
}

.sp-page-price .sp-delivery-guide__notes p {
	position: relative;
	margin: 0;
	padding-left: 1.25em;
	color: #4e5e67;
	font-size: 13.5px;
	line-height: 1.85;
}

.sp-page-price .sp-delivery-guide__notes p::before {
	position: absolute;
	left: 0;
	content: "※";
	color: #87653c;
}

.sp-page-price .sp-delivery-guide__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 9px 34px;
	align-items: center;
	max-width: 930px;
	margin: 48px auto 0;
	padding: 34px 38px;
	color: #fff;
	background: var(--sp-price-navy);
	box-shadow: 0 18px 46px rgba(13, 45, 69, .14);
}

.sp-page-price .sp-delivery-guide__cta p {
	grid-row: 1 / span 2;
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
}

.sp-page-price .sp-delivery-guide__cta .sp-btn {
	grid-column: 2;
	grid-row: 1;
	min-width: 270px;
	border-radius: 1px;
}

.sp-page-price .sp-delivery-guide__cta > span {
	grid-column: 2;
	grid-row: 2;
	font-size: 11px;
	letter-spacing: .12em;
	text-align: center;
	opacity: .75;
}

@media (max-width: 1023px) {
	.sp-page-price .sp-delivery-guide__layout {
		grid-template-columns: minmax(310px, .82fr) minmax(410px, 1.18fr);
		gap: 38px;
	}

	.sp-page-price .sp-delivery-rate {
		grid-template-columns: minmax(130px, .7fr) minmax(220px, 1.3fr);
		gap: 15px;
		padding-left: 12px;
	}

	.sp-page-price .sp-delivery-rate__price strong {
		font-size: 42px;
	}
}

@media (max-width: 900px) {
	.sp-page-price .sp-delivery-guide {
		padding-block: 76px 82px;
	}

	.sp-page-price .sp-delivery-guide::before,
	.sp-page-price .sp-delivery-guide::after {
		width: 86px;
	}

	.sp-page-price .sp-delivery-guide__head {
		text-align: left;
	}

	.sp-page-price .sp-delivery-guide__head .sp-h2 {
		font-size: clamp(30px, 8.8vw, 38px);
		line-height: 1.55;
		letter-spacing: .055em;
	}

	.sp-page-price .sp-delivery-guide__lead {
		margin-top: 21px;
		font-size: 15px;
		line-height: 1.95;
	}

	.sp-page-price .sp-delivery-guide__lead br {
		display: none;
	}

	.sp-page-price .sp-delivery-guide__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 42px;
		margin-top: 42px;
	}

	.sp-page-price .sp-delivery-map {
		padding: 25px 8px 20px;
	}

	.sp-page-price .sp-delivery-map__svg {
		width: min(100%, 350px);
	}

	.sp-page-price .sp-delivery-map figcaption {
		padding-inline: 12px;
		font-size: 11.5px;
	}

	.sp-page-price .sp-delivery-rate {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		min-height: 0;
		padding: 28px 4px 27px;
	}

	.sp-page-price .sp-delivery-rate__area {
		padding-left: 15px;
	}

	.sp-page-price .sp-delivery-rate h3 {
		font-size: 21px;
	}

	.sp-page-price .sp-delivery-rate__price {
		justify-content: flex-start;
		padding-left: 15px;
	}

	.sp-page-price .sp-delivery-rate__price strong {
		font-size: clamp(43px, 13vw, 54px);
	}

	.sp-page-price .sp-delivery-rate__price span {
		font-size: 17px;
	}

	.sp-page-price .sp-delivery-guide__notes {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		margin-top: 34px;
		padding: 23px 20px;
	}

	.sp-page-price .sp-delivery-guide__notes p {
		font-size: 13px;
	}

	.sp-page-price .sp-delivery-guide__cta {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		margin-top: 34px;
		padding: 30px 23px 27px;
	}

	.sp-page-price .sp-delivery-guide__cta p,
	.sp-page-price .sp-delivery-guide__cta .sp-btn,
	.sp-page-price .sp-delivery-guide__cta > span {
		grid-column: 1;
		grid-row: auto;
	}

	.sp-page-price .sp-delivery-guide__cta .sp-btn {
		width: 100%;
		min-width: 0;
	}

	.sp-page-price .sp-delivery-guide__cta > span {
		margin-top: -13px;
	}
}

/* v0.25.0 /price/ 追加料金・楽器車・レンタル・全国配送 */
.sp-page-price .sp-pguide { color: #163b50; padding-block: clamp(64px, 7vw, 104px); }
.sp-page-price .sp-pguide__head { max-width: 850px; margin-bottom: 42px; }
.sp-page-price .sp-pguide__head .sp-eyebrow { color: #956731; letter-spacing: .15em; }
.sp-page-price .sp-pguide__head .sp-h2 { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-weight: 500; letter-spacing: .04em; color: #163b50; text-align: left; margin: 12px 0 22px; font-size: clamp(27px, 3vw, 40px); }
.sp-page-price .sp-pguide__head > p:last-child { font-size: 15px; line-height: 2; color: #536572; }
.sp-page-price .sp-pguide h3 { font-family: var(--sp-font-serif, "Yu Mincho", "Hiragino Mincho ProN", serif); line-height: 1.6; }
.sp-page-price .sp-pguide__amount { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sp-page-price .sp-pguide__amount strong { font-family: Arial, sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.035em; }
.sp-page-price .sp-pguide__amount small, .sp-page-price .sp-pguide__range small { font-size: 11px; font-weight: 400; }
.sp-page-price .sp-pguide__inquiry { font-size: 16px; }
.sp-page-price .sp-pguide__work-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sp-page-price .sp-pguide__work-card { padding: 25px 26px 30px; border-top: 2px solid #b38b55; background: #f8f6f0; }
.sp-page-price .sp-pguide__index { font: 14px Georgia, serif; color: #9d7948; }
.sp-page-price .sp-pguide__work-card h3 { font-size: 24px; margin: 20px 0 8px; }
.sp-page-price .sp-pguide__work-card p { font-size: 13px; color: #64737b; margin-bottom: 15px; }
.sp-page-price .sp-pguide__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 38px; margin: 30px 0 0; }
.sp-page-price .sp-pguide__details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 19px 0; border-bottom: 1px solid #ded8cc; align-items: baseline; }
.sp-page-price .sp-pguide dt { font-size: 14px; font-weight: 500; }
.sp-page-price .sp-pguide dd { margin: 0; }
.sp-page-price .sp-pguide__details .sp-pguide__amount strong { font-size: 23px; }
.sp-page-price .sp-pguide__range { font-size: 20px; font-variant-numeric: tabular-nums; }
.sp-page-price .sp-pguide__note { border-left: 2px solid #b38b55; padding: 14px 22px; margin: 30px 0 0; color: #596975; font-size: 13px; line-height: 1.9; }
.sp-page-price .sp-pguide__note p { margin: 0 0 5px; }
.sp-page-price .sp-pguide--truck { background: #f5f3ed; }
.sp-page-price .sp-pguide__truck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sp-page-price .sp-pguide__truck-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fffefa; margin: 0; }
.sp-page-price .sp-pguide__truck-table caption { text-align: left; padding: 18px 16px; background: #163b50; color: white; font-size: 17px; font-weight: 600; }
.sp-page-price .sp-pguide__truck-table th, .sp-page-price .sp-pguide__truck-table td { border: 0; border-bottom: 1px solid #ded8cc; padding: 18px 7px; text-align: center; vertical-align: middle; }
.sp-page-price .sp-pguide__truck-table th { font-size: 12px; background: transparent; font-weight: 500; }
.sp-page-price .sp-pguide__truck-table th:first-child { width: 24%; }
.sp-page-price .sp-pguide__truck-table .sp-pguide__amount { justify-content: center; gap: 0; font-size: 12px; }
.sp-page-price .sp-pguide__truck-table .sp-pguide__amount strong { font-size: 22px; }
.sp-page-price .sp-pguide__subhead { margin: 38px 0 0; font-size: 22px; }
.sp-page-price .sp-pguide__contest { margin-top: 36px; padding: 26px 30px; border: 1px solid #cab99d; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.sp-page-price .sp-pguide__contest h3 { font-size: 21px; margin: 8px 0; }
.sp-page-price .sp-pguide__contest dl { display: flex; gap: 40px; margin: 0; }
.sp-page-price .sp-pguide__fine { grid-column: 1 / -1; font-size: 12px; color: #64737b; margin: 0; }
.sp-page-price .sp-pguide__fine .sp-pguide__amount, .sp-page-price .sp-pguide__fine .sp-pguide__amount strong { font-size: inherit; }
.sp-page-price .sp-pguide__rental-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.sp-page-price .sp-pguide__rental-card { padding: 34px; border: 1px solid #d7c9b3; background: linear-gradient(120deg, #fff, #faf7ef); }
.sp-page-price .sp-pguide__rental-card .sp-eyebrow { font-size: 12px; letter-spacing: .2em; color: #986e39; }
.sp-page-price .sp-pguide__rental-card h3 { font-size: 26px; margin: 12px 0 28px; }
.sp-page-price .sp-pguide__base-label { font-size: 13px; color: #64737b; margin-bottom: 8px; }
.sp-page-price .sp-pguide__rental-card > .sp-pguide__amount strong { font-size: 46px; }
.sp-page-price .sp-pguide__rental-card dl { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #ded8cc; }
.sp-page-price .sp-pguide__rental-card dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 10px 0; align-items: baseline; }
.sp-page-price .sp-pguide__rental-card dd strong { font-size: 22px; }
.sp-page-price .sp-pguide--national { background: #f7f6f0; }
.sp-page-price .sp-pguide__national-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.sp-page-price .sp-pguide__map { margin: 0; padding: 16px; background: #fffdf8; border: 1px solid #d9cbb5; }
.sp-page-price .sp-pguide__map img { width: 100%; height: auto; display: block; }
.sp-page-price .sp-pguide__map figcaption { text-align: center; color: #69767d; font-size: 11px; line-height: 1.8; }
.sp-page-price .sp-pguide__map a { color: inherit; text-underline-offset: .2em; }
.sp-page-price .sp-pguide__regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.sp-page-price .sp-pguide__regions li { display: flex; gap: 12px; border-bottom: 1px solid #d9cbb5; padding: 22px 0; min-width: 0; }
.sp-page-price .sp-pguide__region-no { flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; background: #163b50; color: white; text-align: center; font-size: 13px; line-height: 25px; }
.sp-page-price .sp-pguide__regions h3 { margin: 0 0 8px; font-size: 17px; }
.sp-page-price .sp-pguide__regions strong { font-size: 26px; }
.sp-page-price .sp-pguide__regions .sp-pguide__amount { font-size: 12px; }
.sp-page-price .sp-pguide__cta { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding-top: 34px; margin-top: 34px; border-top: 1px solid #d9cbb5; }
.sp-page-price .sp-pguide__cta p { font-size: 14px; line-height: 1.9; }
@media (max-width: 1100px) {
 .sp-page-price .sp-pguide__truck-grid { grid-template-columns: 1fr; }
 .sp-page-price .sp-pguide__truck-table th:first-child { width: 25%; }
 .sp-page-price .sp-pguide__truck-table .sp-pguide__amount strong { font-size: 26px; }
 .sp-page-price .sp-pguide__national-grid { gap: 28px; }
 .sp-page-price .sp-pguide__regions { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
 .sp-page-price .sp-pguide__work-cards, .sp-page-price .sp-pguide__rental-grid, .sp-page-price .sp-pguide__national-grid, .sp-page-price .sp-pguide__details, .sp-page-price .sp-pguide__contest { grid-template-columns: 1fr; }
 .sp-page-price .sp-pguide__work-cards { gap: 16px; }
 .sp-page-price .sp-pguide__work-card { padding: 22px; }
 .sp-page-price .sp-pguide__work-card h3 { margin-top: 10px; }
 .sp-page-price .sp-pguide__head br { display: none; }
 .sp-page-price .sp-pguide__head { margin-bottom: 30px; }
 .sp-page-price .sp-pguide__rental-card { padding: 26px 22px; }
 .sp-page-price .sp-pguide__contest { padding: 24px 20px; }
 .sp-page-price .sp-pguide__contest dl { flex-wrap: wrap; gap: 20px 35px; }
 .sp-page-price .sp-pguide__regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
 .sp-page-price .sp-pguide__regions li { gap: 8px; }
 .sp-page-price .sp-pguide__regions strong { font-size: 24px; }
 .sp-page-price .sp-pguide__regions h3 { font-size: 15px; }
 .sp-page-price .sp-pguide__cta { flex-direction: column; align-items: stretch; }
 .sp-page-price .sp-pguide__cta .sp-btn { width: 100%; }
}
@media (max-width: 440px) {
 .sp-page-price .sp-pguide__regions { grid-template-columns: 1fr; }
 .sp-page-price .sp-pguide__regions li > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex: 1; min-width: 0; }
 .sp-page-price .sp-pguide__regions h3 { max-width: 8em; }
 .sp-page-price .sp-pguide__regions .sp-pguide__amount { flex-shrink: 0; max-width: 128px; }
}

@media (max-width: 440px) {
 .sp-page-price .sp-pguide__truck-table, .sp-page-price .sp-pguide__truck-table caption { display: block; }
 .sp-page-price .sp-pguide__truck-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .sp-page-price .sp-pguide__truck-table tbody { display: grid; gap: 14px; padding: 14px; }
 .sp-page-price .sp-pguide__truck-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #ded8cc; }
 .sp-page-price .sp-pguide__truck-table tbody th { grid-column: 1 / -1; width: auto; text-align: left; padding: 10px 14px; background: #f0eee7; }
 .sp-page-price .sp-pguide__truck-table td { padding: 12px 4px 16px; border: 0; }
 .sp-page-price .sp-pguide__truck-table td::before { content: attr(data-truck-label); display: block; margin-bottom: 6px; font-size: 13px; color: #64737b; }
 .sp-page-price .sp-pguide__truck-table .sp-pguide__amount strong { font-size: 24px; }
}

/* ==========================================================================
   v0.39.4 調律ページ：文字色の見直し（見出し＞強調＞本文＞補助文の階層）と「年に一度のご案内」（EVERY YEAR）の視認性・ハガキ画像
   このページ（.sp-page-tuning）だけ。濃紺背景では明るい文字、明るい背景では濃紺〜グレーの 3 段階にそろえる。
   ========================================================================== */
.sp-page-tuning {
	--sp-tune-head: #0d3a5f;
	--sp-tune-text: #2c4152;
	--sp-tune-sub: #4a5a67;
	--sp-tune-label: #7a5a2b;
	--sp-tune-on-dark: #f3f6f9;
	--sp-tune-on-dark-sub: #d6e0e8;
	--sp-tune-gold-on-dark: #ecd6a8;
}

/* 明るい背景：見出し・英字ラベル・補助文 */
.sp-page-tuning #sp-main .sp-h2,
.sp-page-tuning #sp-main .sp-tuning-time__card h2,
.sp-page-tuning #sp-main .sp-notice__t { color: var(--sp-tune-head); }
.sp-page-tuning #sp-main .sp-eyebrow,
.sp-page-tuning #sp-main .sp-hd2 .sp-eyebrow,
.sp-page-tuning #sp-main .sp-tfv__eye,
.sp-page-tuning #sp-main .sp-tprice__n small { color: var(--sp-tune-label); }
.sp-page-tuning #sp-main .sp-tuning-time .sp-eyebrow { color: #1f5f99; }
.sp-page-tuning #sp-main .sp-lede,
.sp-page-tuning #sp-main .sp-notice p,
.sp-page-tuning #sp-main .sp-notice li,
.sp-page-tuning #sp-main .sp-tprice__copy,
.sp-page-tuning #sp-main .sp-flow p,
.sp-page-tuning #sp-main .sp-faq details p { color: var(--sp-tune-text); }
.sp-page-tuning #sp-main .sp-mini,
.sp-page-tuning #sp-main .sp-tprice__refl,
.sp-page-tuning #sp-main .sp-tprice__ex,
.sp-page-tuning #sp-main .sp-tprice__refv,
.sp-page-tuning #sp-main .sp-links__d,
.sp-page-tuning #sp-main .sp-tuning-pricing__notes p,
.sp-page-tuning #sp-main .sp-tfv__lead--sub,
.sp-page-tuning #sp-main .sp-notice__f,
.sp-page-tuning #sp-main .sp-crumb,
.sp-page-tuning #sp-main .sp-crumb span,
.sp-page-tuning #sp-main .sp-crumb a { color: var(--sp-tune-sub); }
.sp-page-tuning #sp-main .sp-tprice__num,
.sp-page-tuning #sp-main .sp-tprice__yen,
.sp-page-tuning #sp-main .sp-tprice__tax { color: #a6471f; }
.sp-page-tuning #sp-main .sp-tprice__who { background: #86622f; color: #fff; }
.sp-page-tuning #sp-main .sp-tuning-editorial__no { color: rgba(9, 47, 80, .15); }
.sp-page-tuning #sp-main .sp-tuning-pricing__no { color: rgba(9, 47, 80, .22); }
.sp-page-tuning #sp-main .sp-mini a { color: #1558b0; }

/* 濃紺背景（CASE）：明るい文字 */
.sp-page-tuning #sp-main .sp-cases .sp-eyebrow,
.sp-page-tuning #sp-main .sp-cases .sp-eyebrow--w { color: var(--sp-tune-gold-on-dark); }
.sp-page-tuning #sp-main .sp-cases__ttl,
.sp-page-tuning #sp-main .sp-cases__list li,
.sp-page-tuning #sp-main .sp-cases__note strong { color: #fff; }
.sp-page-tuning #sp-main .sp-cases__note span { color: var(--sp-tune-on-dark-sub); font-size: 14.5px; line-height: 1.95; }

/* 濃紺背景（EVERY YEAR）：見出し・ラベル・飾り線を明るく */
.sp-page-tuning #sp-main .sp-annual .sp-eyebrow { color: var(--sp-tune-gold-on-dark); font-size: 12.5px; }
.sp-page-tuning #sp-main .sp-annual .sp-h2 { color: #fff; text-shadow: 0 1px 14px rgba(2, 20, 36, .45); }
.sp-page-tuning #sp-main .sp-annual .sp-h2::after { width: 56px; height: 2px; background: #dfc58e; }
.sp-page-tuning #sp-main .sp-annual__body p { color: #24394a; }
.sp-page-tuning #sp-main .sp-annual__badge { color: #0d3a5f; }

/* ハガキ画像（未設定のときは出さない＝従来どおり 2 列） */
.sp-page-tuning #sp-main .sp-annual__card--photo {
	grid-template-columns: 150px minmax(0, 1fr) minmax(250px, 36%);
	gap: 38px;
}
.sp-page-tuning #sp-main .sp-annual__postcard {
	margin: 0;
	padding: 10px;
	background: #fff;
	border: 1px solid #e0d2b4;
	box-shadow: 0 14px 34px rgba(8, 40, 66, .16);
}
.sp-page-tuning #sp-main .sp-annual__postcard img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 340px;
	object-fit: contain;
}
@media (max-width: 1100px) {
	.sp-page-tuning #sp-main .sp-annual__card--photo { grid-template-columns: 122px minmax(0, 1fr); gap: 28px 32px; }
	.sp-page-tuning #sp-main .sp-annual__card--photo .sp-annual__postcard { grid-column: 1 / -1; justify-self: center; width: min(100%, 460px); }
}
@media (max-width: 767px) {
	.sp-page-tuning #sp-main .sp-annual__card--photo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.sp-page-tuning #sp-main .sp-annual__card--photo .sp-annual__postcard { width: 100%; }
	.sp-page-tuning #sp-main .sp-annual .sp-h2 { font-size: clamp(27px, 7.4vw, 34px) !important; }
}

/* スマートフォン幅：「こんなときに調律を」の一覧が 1180px 以下の 2 列指定に負けて細くなっていたため、1 列に戻す */
@media (max-width: 767px) {
	.sp-page-tuning #sp-main .sp-cases > .sp-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.sp-page-tuning #sp-main .sp-cases__head { padding-right: 0; }
	.sp-page-tuning #sp-main .sp-cases__note { grid-column: auto; padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(229, 207, 170, .4); }
}

/* v0.41.3 調律「02 TUNING FEE」の大きな番号が、スマートフォン幅で「0／2」と 2 行に割れていたため 1 行に固定する（フォント縮小は 767px 以下のみ） */
.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
	white-space: nowrap;
	overflow-wrap: normal;
}
@media (max-width: 767px) {
	.sp-page-tuning .sp-tuning-pricing__head .sp-tuning-pricing__no {
		font-size: 54px;
	}
}