@charset "utf-8";
/* ==========================================================================
   design_cta.css — 色ルールの適用漏れ是正 ＋ リンクのフォント統一
   2026-07-27 / 判断基準＝導線・UI/UX・CV（費用対効果は考慮しない方針）

   読み込み順：design_c → design_c2 → design_type → 本ファイル（後勝ち）

   ---------------------------------------------------------------------
   【色ルール（2026/7/26確定）】
     オレンジ #ed6c00 … CV専用（問い合わせ・見積もり・送信）
     紺       #004da0 … 回遊（サイト内の他ページへ）

   実測（全17ページ / 2026-07-27）で見つかった適用漏れ：
     ・「詳しくはこちら」7件（トップ3 / 事例一覧4）＝枠がオレンジだが
       リンク先は事例詳細＝回遊。特に事例一覧はCVボタンが1つも無く、
       オレンジ4つがすべて回遊という状態だった。
     ・回遊リンクに付くオレンジ矢印アイコン。
   色の意味は例外が1つでもあると崩れるため、徹底して紺へ戻す。

   正しく使われていた箇所（変更しない）：
     ヘッダー右上CTA 53件 / ページ末CTA / 固定バー / 記事内相談ボタン /
     フォームの「送信する」… いずれも /contact 向け or 送信行為そのもの
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 「詳しくはこちら」＝回遊リンクを紺へ
   ------------------------------------------------------------------------
   実測: .contBtn a が オレンジ枠 / 14px / line-height 14px（行間が詰まっていた）。
   枠・文字を紺にし、ホバーで紺塗り＋白文字に反転させて操作感を出す。
   -------------------------------------------------------------------------- */
/* 注意: トップの事例カードは `.topPage .sec4 .lists .cont .contBtn a` で、
   `.sec1` ではない（実測で判明。.sec1 だけ書いてもトップに届かない）。
   セクション番号に依存せず当たるよう `.contBtn a` を基点にし、
   既存の詳細度に負けないよう各ページのクラスも併記する。 */
.contBtn a,
.topPage .sec4 .lists .cont .contBtn a,
.voicePage .sec1 .lists .cont .contBtn a,
.sec1 .contBtn a {
	border-color: #004da0;
	color: #004da0;
	/* 文言を「○○の事例を見る」に具体化した結果、社名が長い事例で
	   2行になり枠からはみ出した（実測）。ボタンを固定幅から
	   中身に追従する形へ変え、行数が増えても崩れないようにする。 */
	font-size: 1.4rem;
	line-height: 1.45;
	font-weight: bold;
	background-color: #fff;
	width: auto;
	max-width: 100%;
	min-height: 0;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 40px 11px 18px;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* 矢印は右端に絶対配置し、文言が2行でも位置が崩れないようにする */
.contBtn a img,
.topPage .sec4 .lists .cont .contBtn a img,
.voicePage .sec1 .lists .cont .contBtn a img {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}
.contBtn a:hover,
.topPage .sec4 .lists .cont .contBtn a:hover,
.voicePage .sec1 .lists .cont .contBtn a:hover,
.sec1 .contBtn a:hover {
	background-color: #004da0;
	color: #fff;
	border-color: #004da0;
	opacity: 1;
}
/* ホバーで背景が紺になると、紺の丸アイコンが背景に埋もれる。
   丸を白・矢印を紺に反転させたいが、多色画像なので filter では作れない
   （brightness(0) は白い矢印まで潰す＝上で失敗した手法）。
   invert(1) なら丸=白・矢印=紺の関係が保たれるため、これを使う。 */
.contBtn a:hover img,
.topPage .sec4 .lists .cont .contBtn a:hover img,
.voicePage .sec1 .lists .cont .contBtn a:hover img,
.sec1 .contBtn a:hover img {
	filter: invert(1);
}

/* --------------------------------------------------------------------------
   2. 回遊リンクのオレンジ矢印アイコンを紺へ
   ------------------------------------------------------------------------
   icon_img04_orange.png は実測で53件すべて /contact 向け＝CV導線なので触らない。
   ここで対象にするのは、回遊リンク側に付いている矢印（icon_img07 等）。
   元画像がオレンジ系のものだけを、CSSフィルタで紺（#004da0）へ寄せる。
   ※ hue-rotate は近似なので、色は実測して確認する。
   -------------------------------------------------------------------------- */
/* 全ページ横断で調べた結果、回遊リンクに付くオレンジ矢印は2種類だけだった:
     icon_img06 … 9箇所（トップ「HTMLメールとは」3ボタン → specificity/benefits/application）
     icon_img07 … 19箇所（事例カードのボタン → case-studies/*）
   ※ icon_img03/04/04_orange/05 は全てCV導線（/contact・tel:）なので触らない。
   ※ icon_img02 は216箇所あるがナビの開閉「▼」で矢印ではない。

   【重要・失敗の記録】
   当初 CSS filter（brightness(0)→hue-rotate）で色を変えようとしたが、
   これらのアイコンは「オレンジの丸＋白い矢印」という構成のため、
   brightness(0) が白い矢印まで黒く潰し、"単色の青い玉" になった（実測で確認）。
   filter は多色の画像の一部だけを塗り替えられない。
   → 同じ形の紺バージョン icon_img06_navy.svg を新規作成し、
     background-image で差し替える方式に変更した。
     （7/26に icon_img04_orange.png を新設したのと同じ考え方） */
.contBtn a img,
.topPage .sec3 .lists a img,
.topPage .sec4 .lists .cont .contBtn a img,
.voicePage .sec1 .lists .cont .contBtn a img,
.sec1 .cb_listBox a img,
.trioNav a img {
	/* 元画像を隠し、同じ位置に紺アイコンを描く。
	   HTMLのimgタグはそのまま＝差分を最小に保つ。

	   注意: content で画像を差し替えると、元PNGの固有サイズが失われ
	   SVGの既定サイズ（＝親いっぱい）に膨張する（実測で巨大化を確認）。
	   必ず width/height を明示すること。 */
	content: url(/wp-content/themes/wordpress/img/icon_img06_navy.svg);
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex: 0 0 auto;
	vertical-align: middle;
}
/* トップ3ボタンは元アイコンがやや大きめなので個別に合わせる */
.topPage .sec3 .lists a img {
	width: 22px;
	height: 22px;
}

/* --------------------------------------------------------------------------
   2-b. 背景画像で描かれている矢印（::after）も紺アイコンへ
   ------------------------------------------------------------------------
   実測で判明: 以下3箇所は img タグではなく ::after の background-image で
   icon_img06.png（オレンジの丸＋白矢印）を描いていた。
     ① .sec .btn::after            … 「もっと見る」「記事一覧はこちら」
     ② .sec1 ul li a.active_url    … ニュース一覧の各行
     ③ .sec2 .lists a::after       … サービス紹介4カード(SERVICE/FEE/…)
   ※ 上の content:url() は img 要素にしか効かないため、ここは別途対応が必要。

   さらに layout_fix_20260726.css（7/26・別チャット）が、この3箇所へ
   `filter: hue-rotate(184deg) saturate(1.7) brightness(.62)` を掛けていた。
   これは「オレンジを青系に回す」意図だが、白い矢印まで暗く沈むため
   矢印がグレーがかって見えていた（五月女指摘・実測で確認）。
   → filterを打ち消し、紺アイコンの画像そのものに差し替える。 */
.topPage .sec .btn::after,
.topPage .sec1 ul li a.active_url::after,
.topPage .sec2 .lists a::after {
	background-image: url(/wp-content/themes/wordpress/img/icon_img06_navy.svg);
	filter: none;
}
/* 塗りつぶしhoverになるボタンは、矢印側を白丸・紺矢印に反転させる
   （brightness(0) は白矢印を潰すので使わない） */
.topPage .sec1 .btn:hover::after,
.topPage .sec4 .btn:hover::after {
	filter: invert(1);
}

/* --------------------------------------------------------------------------
   3. リンクのフォントサイズ統一（役割ベース3階層）
   ------------------------------------------------------------------------
   実測: CTAボタン3種類（17px 7ページ / 18px / 14px）、
         テキストリンク3種類（16px / 16px / 19px）。
   同じ「無料相談・お見積もり」が記事内14px・他17pxと差があり、
   CVに直結する要素の階層が崩れていた。

     ① CTAボタン       PC 17px / SP 16px / 700
     ② 主要ボタン      PC 15px / SP 14px / 700（タブは既に15px＝ここが基準）
     ③ テキストリンク  本文と同じ16px / SP 14px / 400
   リンクに固有サイズを増やさず、CTAだけ本文より1段大きくして階層を作る。
   -------------------------------------------------------------------------- */

/* ① CTAボタン
   .envCtaBtn は環境ページ固有のCTA（18px）。environment.css が後に読まれるため
   `!important` で揃える。 */
.pageEndCta .pageEndCta_btn,
.pochi-cta a,
.blog_detailPage .sec1 .cont .pochi-cta a {
	font-size: 1.7rem;
	line-height: 1.5;
	font-weight: bold;
}
.environmentPage .sec1 .envCtaBtn {
	font-size: 1.7rem !important;
	line-height: 1.5 !important;
}
.consult-btn__sub {
	font-size: 1.3rem;
	line-height: 1.5;
}

/* ② 主要ボタン（タブ・ページ送り）
   注意1: 記事のページ送りは `.blog_detailPage .sec1 .cont .part2 a`。
          `.page_list_box` ではない（実測で判明）。
   注意2: environment.css は本ファイルより後に読み込まれるため、
          同詳細度では負ける。`!important` で明示的に勝たせる。 */
.faqPage .sec1 .faqContent .faqBtnBox .faqBtn li a,
.blogPage .page_list_box a,
.blogPage .page_list_box span,
.blog_detailPage .page_list_box a,
.blog_detailPage .page_list_box span,
.newsPage .page_list_box a,
.newsPage .page_list_box span,
.blog_detailPage .sec1 .cont .part2 a,
.blog_detailPage .sec1 .part2 a {
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: bold;
}
.environmentPage .sec1 .envTabs .faqBtn li a,
.environmentPage .sec1 .envTabs .faqBtn li a .envTabLabel {
	font-size: 1.5rem !important;
	line-height: 1.5 !important;
}

/* ③ テキストリンク（電話番号・日付等）＝本文と同じ16px
   実測: contact の .leadTel が19pxで突出（五月女判断で下げる） */
.contactPage .sec1 .leadTel,
.contactPage .sec1 .leadTel a,
.newsPage .sec1 .newsList a,
.companyPage .sec1 a[href^="tel"],
.companyPage .sec1 a[href^="mailto"] {
	font-size: 1.6rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   3-b. 事例カードの情報順序（五月女指示 2026-07-27）
   ------------------------------------------------------------------------
   元は「説明文 → 会社名」の順で、ロゴ画像と会社名が離れていた。
   ロゴの直下に会社名が来る方が「誰の事例か」が即座に結びつくため、
   会社名を画像のすぐ下へ移し、説明文とともに中央寄せにする。

   HTMLは触らず、flex の order で見た目の順序だけ入れ替える
   （DOM順＝説明文→会社名 は維持されるので、読み上げ順・SEOへの影響なし）。
   -------------------------------------------------------------------------- */
.voicePage .sec1 .lists .cont ul,
.topPage .sec4 .lists .cont ul {
	display: flex;
	flex-direction: column;
	text-align: center;
	height: auto;          /* 固定153pxだと社名を上げた分がずれるため解除 */
	min-height: 150px;
	padding: 18px 20px 20px;
}
/* 会社名（2番目のli）を先頭へ */
.voicePage .sec1 .lists .cont ul li:last-of-type,
.topPage .sec4 .lists .cont ul li:last-of-type {
	order: -1;
	margin-bottom: 12px;
	font-size: 1.6rem;
	line-height: 1.5;
	color: #16283f;
}
.voicePage .sec1 .lists .cont ul li:last-of-type span,
.topPage .sec4 .lists .cont ul li:last-of-type span {
	font-weight: bold;
}
/* 説明文は会社名より一段控えめにして、主従を明確にする */
.voicePage .sec1 .lists .cont ul li:first-of-type,
.topPage .sec4 .lists .cont ul li:first-of-type {
	font-size: 1.5rem;
	line-height: 1.7;
	color: #444;
	margin-bottom: 0;
}
/* ボタンも中央寄せに合わせる（既存は右寄せ） */
.voicePage .sec1 .lists .cont .contBtn,
.topPage .sec4 .lists .cont .contBtn {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   4. 事例一覧のページ末CTA
   ------------------------------------------------------------------------
   実測: 事例一覧には CTAブロックが無く、受け皿が固定バーだけだった。
   事例を読んで最も関心が高まった位置に導線が無いのは導線設計の欠陥。
   他ページと同じ .pageEndCta を挿入する（スタイルは design_c2.css に定義済み）。
   ここでは一覧との間隔だけ調整する。
   -------------------------------------------------------------------------- */
.voicePage .sec1 .pageEndCta {
	margin-top: 72px;
}
/* 実測: 事例一覧では見出し・本文が背景に埋もれて読みにくかった。
   .voicePage の既存CSS（.sec1 p{color:...}等）が effect していたため、
   CTAブロック内のテキストは白系で明示する。 */
.voicePage .sec1 .pageEndCta .pageEndCta_ttl {
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.6;
}
.voicePage .sec1 .pageEndCta .pageEndCta_txt {
	color: #dce9f7;
	font-size: 1.6rem;
	line-height: 1.7;
}
.voicePage .sec1 .pageEndCta .pageEndCta_btn {
	color: #fff;
}

/* --------------------------------------------------------------------------
   5. レスポンシブ
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	.pageEndCta .pageEndCta_btn,
	.pochi-cta a,
	.blog_detailPage .sec1 .cont .pochi-cta a {
		font-size: 1.6rem;
	}
	.environmentPage .sec1 .envCtaBtn {
		font-size: 1.6rem !important;
	}
	.faqPage .sec1 .faqContent .faqBtnBox .faqBtn li a,
	.blogPage .page_list_box a,
	.blogPage .page_list_box span,
	.blog_detailPage .page_list_box a,
	.blog_detailPage .page_list_box span,
	.newsPage .page_list_box a,
	.newsPage .page_list_box span,
	.blog_detailPage .sec1 .cont .part2 a,
	.blog_detailPage .sec1 .part2 a,
	.contBtn a,
	.topPage .sec4 .lists .cont .contBtn a,
	.voicePage .sec1 .lists .cont .contBtn a,
	.sec1 .contBtn a {
		font-size: 1.4rem;
	}
	.environmentPage .sec1 .envTabs .faqBtn li a,
	.environmentPage .sec1 .envTabs .faqBtn li a .envTabLabel {
		font-size: 1.4rem !important;
	}
	.contactPage .sec1 .leadTel,
	.contactPage .sec1 .leadTel a,
	.newsPage .sec1 .newsList a,
	.companyPage .sec1 a[href^="tel"],
	.companyPage .sec1 a[href^="mailto"] {
		font-size: 1.4rem;
		line-height: 1.75;
	}
	.consult-btn__sub {
		font-size: 1.2rem;
	}
	.voicePage .sec1 .pageEndCta {
		margin-top: 48px;
	}
	.voicePage .sec1 .pageEndCta .pageEndCta_ttl {
		font-size: 1.9rem;
	}
	.voicePage .sec1 .pageEndCta .pageEndCta_txt {
		font-size: 1.4rem;
		line-height: 1.75;
	}
	/* 事例ボタンはスマホで幅いっぱいに。タップ領域を確保する */
	.contBtn a,
	.topPage .sec4 .lists .cont .contBtn a,
	.voicePage .sec1 .lists .cont .contBtn a {
		display: flex;
		width: 100%;
		padding: 12px 38px 12px 16px;
	}
}