@charset "utf-8";
/*!
 * BIKODO — 旧デザインの補完スタイル（WordPress化にあたって追加した部分だけ）
 *
 * assets/css/legacy.css は公開中サイトの bace.css をそのまま取り込んだものなので、
 * 元サイトに存在しなかったパーツのスタイルはこちらに分けています。
 * こうしておくと、元サイト側でCSSが更新されたときに legacy.css を
 * まるごと差し替えるだけで済みます。
 *
 * 収録内容:
 *   1. ヒーロー内のお知らせカード（TOPページ）
 *   2. TOPのNEWSセクションに追加した「お知らせ一覧へ」リンク
 *   3. お知らせ一覧ページ・詳細ページ
 *   4. ページ送り
 */

/* ==========================================================================
   1. ヒーロー内のお知らせカード
   ========================================================================== */

/*
 * このカードは元サイトには無く、こちらで追加したものです。
 *
 * 通常の流れに置くと #first-view-txt が高くなり、その下に続く
 * ファーストビューの動画（#first-view-img）まで一緒に押し下がって、
 * ヘッダーの後ろに回り込むはずの動画が下がり、上に白い帯ができてしまいます。
 *
 * そのため absolute で流れから外し、#first-view-txt の高さに影響させずに
 * すぐ下へ重ねています（動画の上に載る形になります）。
 */
/*
 * 【高さについて】
 * このカードは絶対配置なので、背が高くなっても他の要素を押しません。
 * そのかわり、下にある「発想から実現までをワンストップで。」に重なります。
 *
 * アイキャッチの縦横比はお知らせごとにばらばらなので、画像の高さを
 * 成り行きにすると、画像次第でカードが伸びて重なります。
 * 画像は16:9で切り取り、説明文も2行までに制限して、
 * どのお知らせでもカードの高さが変わらないようにしています。
 */
/*
 * 【位置と大きさについて】
 * 上下左右に避けるものがあります。
 *   左  … ファーストビュー動画の中のイラスト（パソコンを触っている人物）
 *   下  … 「発想から実現までをワンストップで。」の見出し
 * 動画の中身は編集できないので、カード側を小さくし、少し右へ寄せています。
 *
 * 幅を変えると高さも連動します（画像が16:9のため）。
 * 位置を調整するときは width → left → margin-top の順で見てください。
 */
.fv-news-card {
	position: absolute;
	top: 100%;
	left: 1.5vw;
	display: block;
	width: 20vw;
	margin-top: 1.5vw;
	padding: 0.8vw;
	background: #fff;
	border-radius: 0.8vw;
	box-shadow: 0 0.3vw 1.2vw rgba(0, 0, 0, .12);
	text-decoration: none;
	color: #333;
	transition: transform .3s ease, box-shadow .3s ease;
}

.fv-news-card:hover {
	transform: translateY(-0.2vw);
	box-shadow: 0 0.6vw 1.8vw rgba(0, 0, 0, .18);
}

/* 画像の縦横比に関係なく高さを一定に保ちます */
.fv-news-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top center;
	border-radius: 0.5vw;
	background: #f0f1f3;
}

/* 説明文は2行まで。長いお知らせでもカードが伸びません */
.fv-news-card__txt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 0.7vw;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 500;
	font-size: 0.78vw;
	line-height: 1.65;
	color: #333;
}

.fv-news-card__date {
	margin-top: 0.5vw;
	font-size: 0.68vw;
	letter-spacing: 0.05em;
	color: #999;
}

/* --------------------------------------------------------------------------
   1-2. SPのファーストビューのお知らせカード
   --------------------------------------------------------------------------
   SPのファーストビュー（.sp-top）は高さ173vwの固定枠で、背景の動画の中は
   上に人物とイラスト、下に人物と波があり、その間の水色がまるまる空いています。
   そこへ最新のお知らせ1件を置いています。

   【位置の決め方】
   .sp-top には position 指定が無く、中の動画（#sp-first-view）は
   ページ全体を基準に absolute で置かれています。.sp-top に position:relative を
   足すと動画の位置まで変わってしまうので、カード側に基準用の入れ物
   （.sp-fv-news）を用意しました。

   .sp-fv-news は height:0 なので流れの中で場所を取りません。
   そのため、下の「私たちはお客様の〜」（#sp-first-view-subtxt）を押し下げません。

   縦位置は .sp-fv-news .fv-news-card の top で決めています。
   .sp-top の上端からの距離です。動画の中身は編集できないので、
   イラストを避けた 100vw〜125vw あたりに収まる大きさにしています。
   （125vwより下は右側に黄緑の四角が出てきます）

   【形】
   PC版は画像が上・文が下の縦組みですが、SPで同じ形にすると
   画像だけで高さ50vw近くになり空きに収まりません。
   お知らせ一覧ページと同じ横並び（サムネイル＋文）にしています。
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

	/* カードの位置の基準。高さ0なので他の要素を押しません */
	.sp-fv-news {
		position: relative;
		height: 0;
		z-index: 2; /* ファーストビュー動画（z-index:1）より前へ */
	}

	.sp-fv-news .fv-news-card {
		position: absolute;
		top: 99vw; /* .sp-top の上端からの距離。ここで縦位置を調整します */
		left: 6vw;
		right: 6vw;
		display: flex;
		align-items: center;
		gap: 3vw;
		width: auto;
		margin: 0;
		padding: 3vw;
		border-radius: 3vw;
		box-shadow: 0 1vw 3.5vw rgba(0, 0, 0, .18);
	}

	/* タップしたときだけ少し沈ませます（SPにhoverはありません） */
	.sp-fv-news .fv-news-card:active {
		transform: scale(.98);
	}

	.sp-fv-news .fv-news-card__img {
		flex: 0 0 27vw;
		width: 27vw;
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 2vw;
		object-position: center;
	}

	/* サムネイルが伸びないように、文章側だけを縮ませます */
	.sp-fv-news .fv-news-card__body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.sp-fv-news .fv-news-card__label {
		font-family: "proxima-nova", sans-serif;
		font-weight: 800;
		font-size: 2.8vw;
		letter-spacing: 0.15em;
		color: #0091FF;
	}

	.sp-fv-news .fv-news-card__txt {
		margin-top: 1.2vw;
		font-size: 3.2vw;
		line-height: 1.6;
	}

	.sp-fv-news .fv-news-card__date {
		margin-top: 1.2vw;
		font-size: 2.8vw;
	}
}

/* ==========================================================================
   2. TOPのNEWSセクション：「お知らせ一覧へ」リンク
   ========================================================================== */

.news-more {
	margin-top: 1.5vw;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 500;
	font-size: 0.9vw;
}

.news-more a {
	color: #333;
	text-decoration: underline;
	text-underline-offset: 0.3vw;
}

.news-more a:hover {
	opacity: .6;
}

#news-main .news-txt a,
#sp-news-main .sp-news-txt a {
	color: inherit;
	text-decoration: none;
}

#news-main .news-txt a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.news-more {
		margin-top: 6vw;
		font-size: 3.4vw;
	}

	.news-more a {
		text-underline-offset: 1vw;
	}
}

/* ==========================================================================
   2-2. 制作実績ギャラリーの「別カット」
   ========================================================================== */

/*
 * 拡大表示（Fancybox）のときだけ出てくる追加の画像です。
 * 旧サイトでは中身が空の <li> として置かれていましたが、
 * 1作品＝1タイルであることが分かりやすいよう、同じタイルの中に入れています。
 * グリッドには出さないので非表示にします。
 */
.grid .item-extra {
	display: none;
}

/* ==========================================================================
   2-3. 管理バー表示時のSPメニューのずれ対策
   ========================================================================== */

/*
 * SPのハンバーガーボタン（.openbtn1）と開いたときのナビ（#g-nav）は
 * position:fixed で画面の上端に置かれています。
 * ログイン中はWordPressの管理バー（SPでは高さ46px・最前面）が上に重なり、
 * ボタンが隠れて押せなくなるため、管理バーの分だけ下げます。
 * ログアウト状態の見た目は元サイトのままです。
 */
body.admin-bar .openbtn1 {
	top: 56px; /* 管理バー46px + 元の10px */
}

body.admin-bar #g-nav {
	top: 46px;
	height: calc(100vh - 46px);
}

@media screen and (min-width: 783px) {
	body.admin-bar .openbtn1 {
		top: 42px; /* 管理バー32px + 元の10px */
	}

	body.admin-bar #g-nav {
		top: 32px;
		height: calc(100vh - 32px);
	}
}

/* ==========================================================================
   3. お知らせ（一覧・詳細）
   ========================================================================== */

.lg-news-page {
	max-width: 64vw;
	margin: 0 auto;
	padding: 6vw 0 8vw;
	font-family: source-han-sans-japanese, sans-serif;
	color: #333;
}

.lg-news-page__title {
	font-size: 2.6vw;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.lg-news-page__sub {
	margin-top: 0.8vw;
	font-size: 0.9vw;
	letter-spacing: 0.12em;
	color: #666;
}

/* --- 一覧 --- */

.lg-news-list {
	margin-top: 4vw;
	border-top: 1px solid #ddd;
	list-style: none;
	padding: 0;
}

.lg-news-list__item {
	border-bottom: 1px solid #ddd;
}

.lg-news-list__link {
	display: flex;
	align-items: flex-start;
	gap: 2vw;
	padding: 1.8vw 0;
	text-decoration: none;
	color: #333;
	transition: opacity .25s ease;
}

.lg-news-list__link:hover {
	opacity: .65;
}

/*
 * サムネイル。
 *
 * height: auto を必ず付けてください。
 * the_post_thumbnail() が出力する <img> には height 属性（画像の実寸）が
 * 付いていて、これが残っていると aspect-ratio が効きません
 * （幅と高さが両方決まると aspect-ratio は無視されます）。
 * その状態だと、幅は指定どおり・高さは画像の実寸のままになるので、
 * 縦長の枠に横長の写真が入って左右が大きく切れてしまいます。
 */
.lg-news-list__thumb {
	flex: 0 0 12vw;
	width: 12vw;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	border-radius: 0.6vw;
	background: #f0f0f0;
}

/*
 * アイキャッチが無いお知らせ用の枠。
 * 写真のある行と無い行で日付・見出しの左端がずれないように、
 * 同じ大きさの台紙を置いて、うすくロゴを重ねています。
 */
.lg-news-list__thumb--empty {
	display: block;
	position: relative;
	overflow: hidden;
	background: #f0f1f3;
}

.lg-news-list__thumb--empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../img/legacy/sp/logo.png) no-repeat center / 55%;
	opacity: .28;
}

.lg-news-list__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* 日付・見出しとも <span> なので、block にしないと同じ行に続いてしまいます */
.lg-news-list__date {
	display: block;
	font-size: 0.85vw;
	letter-spacing: 0.06em;
	color: #999;
}

.lg-news-list__title {
	display: block;
	margin-top: 0.6vw;
	font-size: 1.1vw;
	font-weight: 500;
	line-height: 1.7;
}

.lg-news-empty {
	margin-top: 4vw;
	padding: 4vw;
	border: 1px dashed #ccc;
	border-radius: 1vw;
	text-align: center;
	font-size: 1vw;
	line-height: 1.9;
	background: rgba(255, 255, 255, .6);
}

/* --- 詳細 --- */

.lg-news-single__date {
	font-size: 0.9vw;
	letter-spacing: 0.06em;
	color: #999;
}

.lg-news-single__title {
	margin-top: 0.8vw;
	font-size: 2vw;
	font-weight: 700;
	line-height: 1.5;
}

/*
 * アイキャッチ。
 *
 * 高さの上限を付けないと、大きい画像のときに画面が写真だけで埋まり、
 * スクロールしないと本文にたどり着けなくなります。
 * 「画面の中に見出し・写真・本文の入り口が収まる」ことを優先して、
 * 横幅は本文より少し狭く、高さは画面の半分ほどに抑えています。
 *
 * 切り抜かずに縮小するので、縦長の画像も構図を保ったまま収まります。
 * 余白は制作実績のカードと同じ台紙の色にしています。
 */
.lg-news-single__thumb {
	display: grid;
	place-items: center;
	max-width: 760px;
	margin: 2.5vw auto 0;
	padding: 1vw;
	border-radius: 1vw;
	overflow: hidden;
	background: #f0f1f3;
}

.lg-news-single__thumb img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(52vh, 460px);
	object-fit: contain;
	border-radius: 0.5vw;
}

/* --- 本文（記事） -----------------------------------------------------------
   ブロックエディタで書いた内容をそのまま記事として読める体裁にします。
   見出し・箇条書き・引用・画像・キャプション・動画・表に対応しています。

   ・文字サイズは vw ではなく px の範囲指定にしています。
     vw のままだと大きな画面で不必要に大きくなり、小さな画面で読めなくなるためです。
   ・1行の長さを 720px までに制限しています。
     ページ幅（64vw）のまま流すと1行が長くなりすぎて、目が次の行を追えません。
   --------------------------------------------------------------------------- */

.lg-news-single__body {
	max-width: 720px;
	margin: 2.5vw auto 0;
	font-size: clamp(15px, 1vw, 17px);
	line-height: 2.05;
}

/* 段落・見出し・画像などの間隔をまとめて確保します */
.lg-news-single__body > * + * {
	margin-top: 1.5em;
}

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

.lg-news-single__body h2,
.lg-news-single__body h3,
.lg-news-single__body h4 {
	font-weight: 700;
	line-height: 1.6;
}

.lg-news-single__body h2 {
	margin-top: 2.2em;
	padding-bottom: .5em;
	border-bottom: 2px solid #0091FF;
	font-size: 1.4em;
}

.lg-news-single__body h3 {
	margin-top: 2em;
	font-size: 1.2em;
}

.lg-news-single__body h4 {
	margin-top: 1.8em;
	font-size: 1.05em;
}

/* --- 箇条書き ---
   旧デザインのリセットで ul の点が消えているので、本文の中だけ戻します。 */

.lg-news-single__body ul,
.lg-news-single__body ol {
	padding-left: 1.4em;
}

.lg-news-single__body ul li {
	list-style: disc;
}

.lg-news-single__body ol li {
	list-style: decimal;
}

.lg-news-single__body li + li {
	margin-top: .4em;
}

/* --- 引用 --- */

.lg-news-single__body blockquote {
	margin-inline: 0;
	padding: .2em 0 .2em 1.2em;
	border-left: 3px solid #ddd;
	color: #666;
}

/* --- リンク --- */

.lg-news-single__body a {
	color: #0091FF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 画像とキャプション ---
   1枚で画面を埋めてしまわない高さに抑えます。 */

.lg-news-single__body img {
	max-width: 100%;
	max-height: min(70vh, 620px);
	width: auto;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
	border-radius: 8px;
}

.lg-news-single__body figure {
	margin: 0;
	text-align: center;
}

.lg-news-single__body figcaption {
	margin-top: .7em;
	font-size: .82em;
	line-height: 1.7;
	color: #888;
	text-align: center;
}

/* --- 動画（YouTubeなどの埋め込み・動画ファイル） ---
   本文にURLを1行貼ると出る埋め込みが、狭い画面ではみ出さないようにします。 */

.lg-news-single__body iframe,
.lg-news-single__body .wp-block-embed__wrapper iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
}

.lg-news-single__body video {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* --- 表 --- */

.lg-news-single__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
}

.lg-news-single__body th,
.lg-news-single__body td {
	padding: .7em .9em;
	border: 1px solid #e0e0e0;
	text-align: left;
	line-height: 1.8;
	width: auto;
}

.lg-news-single__body th {
	background: #f6f7f8;
	font-weight: 700;
}

/* 横に広い表は、その中だけ横スクロールさせます */
.lg-news-single__body .wp-block-table {
	overflow-x: auto;
}

/* --- 区切り線 --- */

.lg-news-single__body hr {
	margin-block: 2.4em;
	border: 0;
	border-top: 1px solid #e0e0e0;
}

.lg-news-back {
	margin-top: 4vw;
	text-align: center;
}

.lg-news-back a {
	display: inline-block;
	padding: 0.9vw 3vw;
	background: #000;
	color: #fff;
	border-radius: 2vw;
	font-size: 0.95vw;
	text-decoration: none;
	transition: background-color .25s ease;
}

.lg-news-back a:hover {
	background: orange;
}

/* ==========================================================================
   4. ページ送り
   ========================================================================== */

.lg-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6vw;
	margin-top: 4vw;
}

.lg-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6vw;
	height: 2.6vw;
	padding: 0 0.8vw;
	background: #fff;
	border-radius: 0.4vw;
	font-size: 0.9vw;
	color: #333;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.lg-pager a.page-numbers:hover,
.lg-pager .page-numbers.current {
	background: #000;
	color: #fff;
}

.lg-pager .page-numbers.dots {
	background: transparent;
}

/* ==========================================================================
   スマートフォン
   ========================================================================== */

@media (max-width: 768px) {

	/*
	 * 上の余白は、もともとヘッダーが無い前提で
	 * ハンバーガーボタンをよけるための 24vw でした。
	 * ロゴのヘッダー（.sp-header--news・約14vw）を出すようにしたので、
	 * 合わせて元の 24vw ぶんになるように減らしています。
	 */
	.lg-news-page {
		max-width: none;
		padding: 10vw 5vw 14vw;
	}

	.lg-news-page__title {
		font-size: 7vw;
	}

	.lg-news-page__sub {
		margin-top: 2vw;
		font-size: 3.2vw;
	}

	.lg-news-list {
		margin-top: 8vw;
	}

	.lg-news-list__link {
		gap: 4vw;
		padding: 5vw 0;
	}

	.lg-news-list__thumb {
		flex-basis: 28vw;
		width: 28vw;
		border-radius: 2vw;
	}

	.lg-news-list__date {
		font-size: 3vw;
	}

	.lg-news-list__title {
		margin-top: 1.6vw;
		font-size: 3.7vw;
	}

	.lg-news-empty {
		margin-top: 8vw;
		padding: 8vw 5vw;
		border-radius: 3vw;
		font-size: 3.6vw;
	}

	.lg-news-single__date {
		font-size: 3.2vw;
	}

	.lg-news-single__title {
		margin-top: 2vw;
		font-size: 5.4vw;
	}

	/* スマホは画面が狭いので、幅いっぱいに使い高さの制限も緩めます */
	.lg-news-single__thumb {
		max-width: none;
		margin: 6vw 0 0;
		padding: 2vw;
		border-radius: 3vw;
	}

	.lg-news-single__thumb img {
		max-height: 60vh;
		border-radius: 1.5vw;
	}

	.lg-news-single__body {
		margin-top: 6vw;
		font-size: 3.7vw;
	}

	.lg-news-back {
		margin-top: 10vw;
	}

	.lg-news-back a {
		padding: 3.5vw 10vw;
		border-radius: 8vw;
		font-size: 3.6vw;
	}

	.lg-pager {
		gap: 2vw;
		margin-top: 10vw;
	}

	.lg-pager .page-numbers {
		min-width: 10vw;
		height: 10vw;
		padding: 0 3vw;
		border-radius: 1.5vw;
		font-size: 3.4vw;
	}
}

/* ==========================================================================
   5. お問い合わせフォーム（WordPress化にあたっての追加分）
   ========================================================================== */

/* スパム対策のダミー項目。人間には見せません。 */
.bkd-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 送信結果のメッセージ
   -------------------------------------------------------------------------
   置き場所は「入力フォームのすぐ上」です（PC・SPとも）。
   以前はページの先頭に出していましたが、旧デザインのページは見出しや
   電話番号のかたまりが position:absolute で置かれているため、
   先頭に差し込むと流れの中の要素だけがずれて重なってしまいました。

   PCは白いカード（.formContent、幅50vw）の中に入るので、
   カードからはみ出さない幅にしています。 */
.bkd-notice {
	max-width: 44vw;
	margin: 3vw auto 0;
	padding: 1.4vw 2vw;
	border-radius: 0.8vw;
	font-family: source-han-sans-japanese, sans-serif;
	font-size: 1vw;
	line-height: 1.9;
	text-align: center;
}

.bkd-notice--success {
	background: #e8f6ee;
	border: 1px solid #9ed3b5;
	color: #1c6c42;
}

.bkd-notice--error {
	background: #fdecec;
	border: 1px solid #efa9a9;
	color: #a32626;
}

/* SPは「入力フォーム」の見出しの上に入ります。
   以前はページ先頭に出していたので、固定ヘッダーを避けるために
   上の余白を 24vw も取っていました。いまは不要です。 */
@media (max-width: 768px) {
	.bkd-notice {
		max-width: none;
		margin: 10vw 5vw 0;
		padding: 5vw;
		border-radius: 3vw;
		font-size: 3.5vw;
	}
}

/* ==========================================================================
   8. TOPページ SPのNEWSセクションの高さ
   ==========================================================================
   旧サイトの .sp-fifth は height:20vw の固定値で、
   お知らせ2件がちょうど収まる高さに調整されていました。
   こちらで「お知らせ一覧へ」のリンクを1行足したぶん、
   その下のフッターとぶつかるため、必要な分だけ高さを足しています。

   お知らせの表示件数を変える場合は、この数値も合わせて調整してください
   （1件あたりおよそ 10vw、リンク1行で 12vw が目安です）。
   ========================================================================== */

@media (max-width: 768px) {
	.sp-fifth {
		height: 34vw;
	}
}

/* ==========================================================================
   10. お知らせページのSPヘッダー（.sp-header--news）
   ==========================================================================
   お知らせのページ（一覧・詳細）は、スマホではグレーの帯を出さず、
   左にロゴ、右にハンバーガーボタンだけが白地に並ぶ形にしています。
   ロゴはTOPへのリンクなので、戻る導線も兼ねています。

   【もとの状態】
   .sp-header は中身の高さぶんしか無い帯で、中のロゴは
   position:relative / top:5vw で下へずらして置かれています。
   お問い合わせ・プライバシーポリシーのページはロゴの下に見出しの帯
   （CONTACT／お問い合わせ など）が入って帯が高くなるので収まりますが、
   お知らせのページにはそれが無いため、帯の高さがロゴの高さ（14vw）どまりになり、
   5vwずらしたぶんがはみ出して、白い本文の上に乗っていました。

   【この指定でしていること】
   1. グレーの帯（#sp-contact-back の背景）を消す。
      ID指定なので、こちらもIDを付けて詳細度を上げています。
   2. ロゴを 28vw → 20vw に。本文しか無いページなので少し小さくします。
      ずらすのはやめて、リンク側の上下の余白で高さを作ります
      （上下同じ値なので、ロゴはヘッダーの中央にきます）。
   3. ハンバーガーボタンの線を濃い色に。
      もとの線は #FFF（白）です。TOPページは水色のファーストビューに
      重なるので白で見えますが、お知らせのページは背景が白いため
      そのままだと線が見えません。
      メニューを開くと背景が青（#0091FF）になるので、
      開いている間（.active）は白に戻します。

   【ロゴを absolute で浮かせなかった理由】
   ヘッダーを高さ0にしてロゴだけ浮かせると、ロゴが消えます。
   .sp-content には overflow-x:hidden が付いていて（レスポンシブ切り替えの
   ところで指定されています）、縦がautoになるためスクロール枠として働きます。
   中身がヘッダーだけになると枠の高さが0になり、はみ出したロゴが
   切り取られてしまいます。ロゴは流れの中に置いたままにしてください。

   本文側の上の余白は「3. お知らせ（一覧・詳細）」のスマホ指定で
   24vw → 10vw に減らしています（ここのヘッダーの高さと足して元の24vw）。

   ヘッダーのマークアップは全ページ共通（template-parts/legacy/sp-header.php）
   なので、お知らせのテンプレートから class => 'sp-header--news' を渡して
   ここだけに当てています。他のページの見た目は変わりません。
   ========================================================================== */

@media (max-width: 768px) {

	/* グレーの帯を消します（#sp-contact-back に勝つためIDを付けています） */
	.sp-header--news#sp-contact-back {
		background-color: transparent;
	}

	/* 「> a」で絞っているのは、開いたメニューの中にある白ロゴ
	   （#g-nav-list .sp-logo）に影響させないためです。 */
	.sp-header--news > a {
		display: block;
		padding: 8px 0 8px 5vw; /* 上下の余白がヘッダーの高さになります */
		line-height: 0; /* 画像の下にできる行間のすき間を消し、上下の余白をそろえます */
	}

	.sp-header--news > a > .sp-logo {
		position: static; /* もとの top:5vw / left:7vw を打ち消します */
		width: 20vw;
	}

	/* 閉じているとき：白い本文の上でも見えるように濃い色にします */
	.sp-header--news .openbtn1 span {
		background-color: #333;
	}

	/* 開いているとき：背景が青（#0091FF）になるので白い×に戻します */
	.sp-header--news .openbtn1.active span {
		background-color: #fff;
	}
}

/* ==========================================================================
   9. TOPページ CREATIVEスライダーの画像の歪み
   ==========================================================================
   旧サイトの .slider-img は width:20vw / height:15vw の固定サイズで、
   object-fit の指定がありませんでした。当時は静止画を4:3に揃えて
   書き出していたので問題になりませんでしたが、
   制作実績（works）から実際の写真を流し込むようにしたことで、
   縦長・横長・正方形が混ざり、枠に合わせて引き伸ばされていました。

   枠の大きさは旧サイトのままにして、はみ出す分を切り取るようにします。
   ここはTOPの流し見用の帯なので、切り取っても支障はありません
   （切り取らずに全体を見せるのは制作実績ページ側の役割です）。
   ========================================================================== */

.slider-img {
	object-fit: cover;
	object-position: center;
	/* 透過画像やロゴが入っても背景が抜けないように */
	background: #fff;
}

/*
 * WEBサイト・LPのスクリーンショットなど縦長の画像は、中央ではなく
 * 上端（ファーストビュー）を見せます。縦横比から自動で判定しています。
 */
.slider-img.is-tall {
	object-position: top center;
}

/*
 * ロゴや帯状のバナーなど横長の画像は、切り取ると左右が欠けて読めなくなります。
 * 枠の中に全体を収め、余白は白地にします。
 */
.slider-img.is-wide {
	object-fit: contain;
	background: #fff;
}

/* ==========================================================================
   9. お問い合わせフォーム（Contact Form 7）の見た目調整
   ==========================================================================
   お問い合わせページのフォームは Contact Form 7 で出しています。
   項目そのものの見た目（ラベルの「必須」バッジ、グレーの入力欄、青いボタン）は、
   CF7側のフォームに旧サイトと同じクラス名を書いてあるので、
   legacy.css の指定がそのまま効いています。

   ここで足しているのは、CF7が自動で付けてくる部分だけです。
     ・入力欄を囲む <p> と <span>（そのままだと余計な余白が出ます）
     ・送信結果のメッセージ（.wpcf7-response-output）
     ・未入力のときに出る注意書き（.wpcf7-not-valid-tip）
     ・送信中のくるくる（.wpcf7-spinner）

   送信結果のメッセージは、手作りフォーム時代の .bkd-notice と
   同じ配色にそろえています。
   ========================================================================== */

/* CF7が自動で入れる <p> の余白を消し、旧サイトと同じ間隔に戻します */
.wpcf7-form p {
	margin: 0;
}

/* 入力欄を囲む <span>。中の入力欄の幅指定をそのまま活かします */
.wpcf7-form-control-wrap {
	display: block;
}

/* --- 送信結果のメッセージ --- */

.wpcf7 form .wpcf7-response-output {
	max-width: 44vw;
	margin: 2vw auto 3vw;
	padding: 1.4vw 2vw;
	border: 1px solid #bdbebe;
	border-radius: 0.8vw;
	font-family: source-han-sans-japanese, sans-serif;
	font-size: 1vw;
	line-height: 1.9;
	text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
	background: #e8f6ee;
	border-color: #9ed3b5;
	color: #1c6c42;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	background: #fdecec;
	border-color: #efa9a9;
	color: #a32626;
}

/* --- 未入力・書式ちがいの注意書き --- */

.wpcf7-not-valid-tip {
	margin-top: 0.6vw;
	font-family: source-han-sans-japanese, sans-serif;
	font-size: 0.9vw;
	color: #a32626;
}

/* 入力欄自体にも、間違っていることが分かる印を付けます */
.wpcf7-form-control.wpcf7-not-valid {
	box-shadow: inset 0 0 0 1px #efa9a9;
}

/* --- 送信中のくるくる --- */

.wpcf7-spinner {
	margin-left: 1vw;
	vertical-align: middle;
}

/* --- スマートフォン --- */

@media (max-width: 768px) {

	.wpcf7 form .wpcf7-response-output {
		max-width: none;
		margin: 6vw 5vw 8vw;
		padding: 5vw;
		border-radius: 3vw;
		font-size: 3.5vw;
	}

	.wpcf7-not-valid-tip {
		margin-left: 11vw;
		margin-top: 2vw;
		font-size: 3.2vw;
	}

	.wpcf7-spinner {
		margin-left: 3vw;
	}
}