@charset "utf-8";
/* ==========================================================================
   design_btn.css — ボタンの形状統一（役割ベース4階層）
   2026-07-27 / A案採用（五月女判断）

   読み込み順：design_c → design_c2 → design_type → design_cta → 本ファイル

   ---------------------------------------------------------------------
   実測（PC1440px・8ページ / 2026-07-27）で判明した現状
     CTA        3種類 … 280x58/18px/r4、278x63/17px/r4、340x62/17px/r6、214x50/17px/r8
     回遊(枠線) 4種類 … 344x76/20px/r0/枠2px（もっと見る）
                        284x44/14px/r15/枠1px（事例）
                        122x47/15px/r0/枠1px（ページ送り）
                        42x42 /15px/r0/枠1px（ページ番号）
     タブ       3種類 … r999/枠1px（ブログ）、r10/枠3px（FAQ・環境）
     角丸は 0/4/6/8/10/15/999px の7種類が混在していた。

   【最大の問題】視覚的階層の逆転
     もっと見る(回遊) = 高さ76px・文字20px
     無料相談(CV)     = 高さ63px・文字17px
     → 回遊がCVより大きい。要素の大きさは重要度の信号なので、
       「申込より一覧を見る方が大事」と伝えてしまっていた。
     A案＝回遊を設計値まで下げ、CVを最上位に戻す。

   ---------------------------------------------------------------------
   採用する4階層
     ① CTA（申込）        高さ56px / 17px / 角丸4px / 枠なし / 橙塗り
     ② 主要回遊           高さ52px / 15px / 角丸4px / 枠1px紺 / 白地
     ③ 補助回遊           高さ44px / 14px / 角丸4px / 枠1px紺 / 白地
     ④ タブ               高さ44px / 15px / 角丸999px / 枠1px（ピル形状を維持）
   角丸は4pxに統一（タブのみピル＝「切り替え」を形で示す）。枠は1pxに統一。

   【A案の懸念への対策】
   もっと見るが小さくなる分、回遊率が落ちる可能性がある。
   サイズで押すのではなく「余白」と「文言」で見つけやすくする：
     ・ボタン上下の余白を広く取る（孤立させると小さくても目に入る）
     ・文言は build5.js で「ブログ記事をもっと見る」等に具体化
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① CTA（申込・問い合わせ）＝ 高さ56px / 17px / 角丸4px / 橙塗り
   ------------------------------------------------------------------------
   実測で 4種類（r4/r4/r6/r8、高さ50〜63px）に割れていた。
   最も多い r4 に寄せ、高さは 56px 相当（padding 19px）で揃える。
   -------------------------------------------------------------------------- */
.pageEndCta .pageEndCta_btn,
.pochi-cta a[href*="contact"],
.blog_detailPage .sec1 .cont .pochi-cta a[href*="contact"],
.environmentPage .sec1 .envCtaBtn {
	border-radius: 4px !important;
	font-size: 1.7rem !important;
	line-height: 1.5 !important;
	font-weight: bold;
	padding: 18px 44px 17px !important;
	box-sizing: border-box;
}
/* 記事内CTAブロックの並列ボタン（サービス紹介を見る）は回遊なので
   ②の見た目に寄せる（白地・紺文字）。CTAと同格に見せない。 */
.pochi-cta a:not([href*="contact"]),
.blog_detailPage .sec1 .cont .pochi-cta a:not([href*="contact"]) {
	border-radius: 4px !important;
	font-size: 1.5rem !important;
	line-height: 1.5 !important;
	padding: 16px 30px 15px !important;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   ② 主要回遊（もっと見る／記事一覧はこちら）＝ 高さ52px / 15px / 角丸4px
   ------------------------------------------------------------------------
   実測 344x76 / 20px / 角丸0 / 枠2px。CVより大きく階層が逆転していた。
   下げる代わりに、上下の余白を広げて「孤立」させ視認性を保つ。
   -------------------------------------------------------------------------- */
.topPage .sec .btn,
.topPage .sec1 .btn,
.topPage .sec4 .btn {
	max-width: 300px;
	font-size: 1.5rem !important;
	line-height: 1.5;
	font-weight: bold;
	padding: 16px 10px 15px !important;
	border-radius: 4px !important;
	border-width: 1px !important;
	box-sizing: border-box;
	/* 余白で目立たせる（サイズを下げた分の補償） */
	margin-top: 48px;
	margin-bottom: 8px;
}
/* 矢印の位置も新しい高さに合わせる */
.topPage .sec .btn::after {
	width: 18px;
	height: 18px;
	bottom: auto;
	top: 50%;
	left: auto;
	right: 18px;
	margin: 0;
	transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   ③ 補助回遊（事例カード・ページ送り・ページ番号）＝ 高さ44px / 14px / 角丸4px
   ------------------------------------------------------------------------
   実測: 事例ボタン 角丸15px、ページ送り 角丸0px と割れていた。
   -------------------------------------------------------------------------- */
.contBtn a,
.topPage .sec4 .lists .cont .contBtn a,
.voicePage .sec1 .lists .cont .contBtn a,
.sec1 .contBtn a {
	border-radius: 4px !important;
	border-width: 1px !important;
	padding: 12px 40px 11px 18px !important;
	box-sizing: border-box;
}
/* ページ送り（前の記事／ブログ一覧へ／次の記事） */
.blog_detailPage .sec1 .cont .part2 a,
.blog_detailPage .sec1 .part2 a {
	border-radius: 4px !important;
	border-width: 1px !important;
	padding: 13px 20px 12px !important;
	box-sizing: border-box;
}
/* ページ番号（1・2・3・>） */
.page_list_box .page_list a,
.page_list_box .page_list span,
.blogPage .page_list_box a,
.blogPage .page_list_box span,
.newsPage .page_list_box a,
.newsPage .page_list_box span {
	border-radius: 4px !important;
	border-width: 1px !important;
}

/* --------------------------------------------------------------------------
   ④ タブ（切り替え）＝ 高さ44px / 15px / 角丸999px / 枠1px
   ------------------------------------------------------------------------
   実測: ブログ=ピル(r999/枠1px)、FAQ・環境=r10/枠3px と3種類。
   「切り替え」であることを形で示すため、ピル形状に統一する
   （角丸4pxの他ボタンと形で区別できる＝役割が見た目で分かる）。
   -------------------------------------------------------------------------- */
.faqPage .sec1 .faqContent .faqBtnBox .faqBtn li a,
.environmentPage .sec1 .envTabs .faqBtn li a {
	border-radius: 999px !important;
	border-width: 1px !important;
	padding: 12px 24px 11px !important;
	box-sizing: border-box;
	font-size: 1.5rem !important;
	line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	.pageEndCta .pageEndCta_btn,
	.pochi-cta a[href*="contact"],
	.blog_detailPage .sec1 .cont .pochi-cta a[href*="contact"],
	.environmentPage .sec1 .envCtaBtn {
		font-size: 1.6rem !important;
		padding: 16px 20px 15px !important;
	}
	.pochi-cta a:not([href*="contact"]),
	.blog_detailPage .sec1 .cont .pochi-cta a:not([href*="contact"]) {
		font-size: 1.4rem !important;
		padding: 14px 20px 13px !important;
	}
	.topPage .sec .btn,
	.topPage .sec1 .btn,
	.topPage .sec4 .btn {
		max-width: 280px;
		font-size: 1.4rem !important;
		padding: 14px 10px 13px !important;
		margin-top: 36px;
	}
	.topPage .sec .btn::after {
		width: 16px;
		height: 16px;
		right: 14px;
	}
	.contBtn a,
	.topPage .sec4 .lists .cont .contBtn a,
	.voicePage .sec1 .lists .cont .contBtn a {
		padding: 12px 38px 11px 16px !important;
	}
	.blog_detailPage .sec1 .cont .part2 a,
	.blog_detailPage .sec1 .part2 a {
		padding: 12px 14px 11px !important;
	}
	.faqPage .sec1 .faqContent .faqBtnBox .faqBtn li a,
	.environmentPage .sec1 .envTabs .faqBtn li a {
		padding: 11px 18px 10px !important;
		font-size: 1.4rem !important;
	}
}