@charset "utf-8";

/*
 * PA KNOWLEDGE の下に貼り付く問い合わせの棒（Task #6174）。
 *
 * 写し元は移行元の 2 本。
 *   パソコン幅 … knowledge/css/style.css       の `#knowledge .footer1*`（14 規則）
 *   携帯幅     … sp/knowledge/css/sp_style.css の `#knowledge .footer1*`（6 規則）
 * どちらも本番と md5 が一致することを確かめて写した（2026-09-14）。
 *
 * 🚨 写し元は `#knowledge`（body の id）で絞っている。dev の body にその id は
 * 無いので `.pa-knowledge-bar` へ読み替えた。子の類名は移行元のまま残してある。
 *
 * 🚨 移行元は版ごとに別の markup を配るため、携帯幅の姿は「隠す」と
 * 「並べ直す」の 2 つで作る。ベンダー接頭辞（-webkit- / -ms-）は写さない。
 * いま配るブラウザでは要らず、写すと phpcs 以外の検査でも読みにくくなるため。
 */

/* パソコン幅（写し元 knowledge/css/style.css） */
.pa-knowledge-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 -6px 6px #c4c4c4;
	background: #fdf3de;
}

.pa-knowledge-bar .footer1-inner {
	width: 1100px;
	margin: 0 auto;
}

/*
 * 🚨 **棒の中の `<p>` は移行元の土台にそろえる（Bug #6242）。**移行元は
 * `css/common.css` が `p { margin: 0; padding: 0 }` で余白を戻し、行送りを
 * 指定しない（＝ `normal`）。テーマは素の `p` の余白を戻さず、`main.css` の
 * `p { line-height: var(--pa-line-height-text) }` が `:root` の 1.8 で効くため、
 * 題と添え書きがそのぶん高くなる。
 *
 * 実測（幅 1440・2026-09-14 20:26）: 文の区画の高さが移行元 68px に対して
 * dev は 110.59px だった。内訳は 題の上の余白 0→20・題の高さ 38→45・
 * 題と添え書きの間 5→12・添え書きの高さ 21→21.59・添え書きの下の余白 4→12 で、
 * 合計 +42.59px が棒の高さの差（160 → 202.59）とそのまま一致する。
 *
 * 題の `margin-bottom: 5px` と携帯幅の `line-height: 1.4` は、当たり先が
 * 2 つ（`.pa-knowledge-bar` ＋ 類名）で詳しいため、ここでは上書きされない.
 */
.pa-knowledge-bar p {
	margin: 0;
	/*
	 * 🚨 **添え書きは字の大きさを受け継ぐ（Bug #6295）。**写し元
	 * `knowledge/css/style.css` には `#knowledge p { font-size: 14px }` が在り、
	 * 移行元ではそのページの段落すべてに当たる。テーマへ写したのは同じファイルの
	 * `#knowledge .footer1*`（14 規則）だけなので、この 1 本が落ちていた。
	 * 実測（幅 1440・2026-09-14 20:26）: 添え書きが移行元 14px・dev 12px。
	 *
	 * 当たるのは添え書き 1 か所だけである。題は自分の字の大きさ（20px・携帯幅
	 * 10px）を持ち、携帯幅では添え書きを隠す.
	 */
	font-size: 14px;
	line-height: normal;
}

.pa-knowledge-bar .footer1-mainArea {
	float: left;
	width: 680px;
	margin: 20px 0;
}

.pa-knowledge-bar .footer1-mainArea-item {
	position: relative;
	display: flex;
	background: #835f24;
	color: #fff;
	text-decoration: none;
}

.pa-knowledge-bar .footer1-mainArea-item-textArea {
	margin: 26px 0 26px 30px;
}

.pa-knowledge-bar .footer1-mainArea-item-textArea-title {
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: 600;
}

.pa-knowledge-bar .footer1-mainArea-item-textArea-title span {
	font-size: 25px;
}

.pa-knowledge-bar .footer1-mainArea-item::after,
.pa-knowledge-bar .footer1-subArea-item::after {
	position: absolute;
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	right: 20px;
	top: 50%;
	margin-top: -7px;
}

.pa-knowledge-bar .footer1-subArea {
	display: flex;
	flex-direction: column;
	float: right;
	width: 400px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.pa-knowledge-bar .footer1-subArea-item {
	position: relative;
	list-style: none;
}

.pa-knowledge-bar .footer1-subArea-item:first-child {
	margin-bottom: 15px;
}

.pa-knowledge-bar .footer1-subArea-item-text {
	display: block;
	padding: 11px 0 9px 30px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	background: #835f24;
}

.pa-knowledge-bar .footer1-subArea-item-text span {
	font-size: 21px;
}

/* 携帯幅（写し元 sp/knowledge/css/sp_style.css）。移行元のスマホ版は 3 件が横に並ぶ */
@media (max-width: 749px) {

	/*
	 * 🚨 移行元のスマホ版は絵と添え書きを持たない。パソコン版の組みを出している
	 * ので、ここで隠す（Task #6174 の AC）.
	 */
	.pa-knowledge-bar .footer1-mainArea-item-image,
	.pa-knowledge-bar .footer1-mainArea-item-textArea-supple {
		display: none;
	}

	/*
	 * 取材の囲みと、パートナーシップ・IR の囲みを組みから外し、3 つの押しボタンを
	 * `.footer1-inner` の直接の子として横へ並べる（移行元のスマホ版と同じ姿）.
	 */
	.pa-knowledge-bar .footer1-mainArea,
	.pa-knowledge-bar .footer1-subArea {
		display: contents;
	}

	.pa-knowledge-bar .footer1-inner {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		padding: 3px 0;
	}

	.pa-knowledge-bar .footer1-subArea-item {
		display: contents;
	}

	/*
	 * 🚨 `display: contents` にした囲みは箱を持たないので、その `::after`（矢印）も
	 * 描かれない。矢印は押しボタン側へ移すため、押しボタンに位置の基準を持たせる.
	 */
	.pa-knowledge-bar .footer1-mainArea-item,
	.pa-knowledge-bar .footer1-subArea-item-text {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: calc(33.3% - 2px);
		padding: 12px 13px;
		text-align: center;
	}

	.pa-knowledge-bar .footer1-mainArea-item-textArea {
		margin: 0;
	}

	/*
	 * 🚨 **幅 100% は題だけに当てる（Bug #6242）。**写し元
	 * `sp/knowledge/css/sp_style.css` で `width: 100%` を持つのは
	 * `.footer1-mainArea-item-title`（題）だけで、押しボタンは持たない。
	 * 押しボタンにも当てると、すぐ上の `width: calc(33.3% - 2px)` を後から
	 * 打ち消して 3 等分が壊れる。実測（幅 375・2026-09-14 20:30）: 横に並ぶ
	 * 3 つの幅が 62.2 / 156.39 / 156.41 になり（移行元は 3 つとも 122.88）、
	 * 縮んだ側の題が 5 行に折り返して棒が 62.19px → 100.19px になっていた.
	 */
	.pa-knowledge-bar .footer1-mainArea-item-textArea-title {
		width: 100%;
	}

	.pa-knowledge-bar .footer1-mainArea-item-textArea-title,
	.pa-knowledge-bar .footer1-subArea-item-text {
		margin-bottom: 0;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.4;
	}

	.pa-knowledge-bar .footer1-mainArea-item-textArea-title span,
	.pa-knowledge-bar .footer1-subArea-item-text span {
		display: block;
		font-size: 13px;
	}

	/* 2 件目（パートナーシップ）だけ字が長いので、移行元と同じだけ詰める */
	.pa-knowledge-bar .footer1-subArea-item:first-child .footer1-subArea-item-text span {
		letter-spacing: -1px;
	}

	.pa-knowledge-bar .footer1-mainArea-item::after,
	.pa-knowledge-bar .footer1-subArea-item-text::after {
		width: 7px;
		height: 7px;
		margin-top: -4px;
		right: 8px;
		border-width: 1px;
	}

	.pa-knowledge-bar .footer1-subArea-item:first-child {
		margin-bottom: 0;
	}

	/* 🚨 **この 2 ページでは携帯の固定 CTA バーを隠す**（Bug #6243）。
	   移行元は同じことを `sp/knowledge/css/sp_style.css` の
	   `#knowledge #footer { display: none }` でしている。**この 2 ページでだけ
	   消している**（ほかの携帯ページでは出している）。問い合わせの棒と導線バーが
	   どちらも `bottom: 0` に貼り付くので、そのままでは重なるためと読める。

	   実測（幅 375px・2026-09-14）: 移行元の導線バー `footer#footer.top_option` は
	   **0 × 0**（描かれていない）。dev の `.pa-mobile-fixed-cta` は **375 × 63.58** で
	   `z-index: 9999` なので、**棒の下部を覆って中のリンクが押せなくなる**。

	   🚨 **当たり先を `.pa-knowledge-bar` で絞れない。**導線バーは棒の兄弟ではなく
	   `wp_footer` が別に出す要素なので、包む器が無い。**このファイルが
	   PA KNOWLEDGE の 2 ページでしか読み込まれない**ことが絞り込みである
	   （`inc/knowledge-contact-bar.php` の `pa_knowledge_bar_enqueue()`）。
	   詳しさは `main.css` の `display: block` と同じなので、**あとから読み込む
	   こちらが勝つ**（読み込みの依存に `pa-main` を宣言してある）. */
	.pa-mobile-fixed-cta {
		display: none;
	}
}