@charset "utf-8";
/* ==========================================================================
   design_c2.css — 全ページ共通の余白統一 ＋ リード文 ＋ ブログ一覧UI
   2026-07-26
   ブランド色：紺 #004da0 / 明青 #4593d0 / CTA橙 #ed6c00

   design_c.css の後に読み込む前提（後勝ち）。
   ========================================================================== */

/* ==========================================================================
   1. パンくず下の余白を全ページで統一する
   ------------------------------------------------------------------------
   実測（2026-07-26・パンくず下端→本文先頭の距離）:
     PC1440px  service/fees 115px, strength 112px, faq 110px, company 105px,
               flow 102px, environment 113px, blog 58px
     SP375px   environment 91px, 他の固定ページ 65px, blog 37px
   → ページごとにバラバラで、かつMVとパンくずで高さを使った後としては広すぎる。
     environment はスマホで他より26px広く、指摘の違和感の実体はこれ。

   各ページの .sec1 は subpages.css で個別に padding を持ち、
   .secCommonPd は global.css が `!important` 付きで上書きしている。
   そのため、ここでも `!important` で揃える必要がある。
   下側の余白は既存の見た目を壊さないため触らず、上側だけを統一する。
   ========================================================================== */
.blogPage .sec1,
.newsPage .sec1,
.faqPage .sec1,
.companyPage .sec1,
.voicePage .sec1,
.environmentPage .sec1,
.service_detailPage .sec1,
.fees_detailPage .sec1,
.strength_detailPage .sec1,
.flowPage .sec1,
.blogPage .sec1.secCommonPd,
.flowPage .sec1.secCommonPd,
.faqPage .sec1.secCommonPd {
	/* 当初72pxで統一したが、MV＋パンくずで既に高さを使った後としてまだ広い
	   （五月女判断・2026-07-26）。パンくず下端→本文で82px相当だった。
	   52pxへ詰めて、本文の始まりを早める。 */
	padding-top: 52px !important;
}

@media only screen and (max-width: 1024px) {
	.blogPage .sec1,
	.newsPage .sec1,
	.faqPage .sec1,
	.companyPage .sec1,
	.voicePage .sec1,
	.environmentPage .sec1,
	.service_detailPage .sec1,
	.fees_detailPage .sec1,
	.strength_detailPage .sec1,
	.flowPage .sec1,
	.blogPage .sec1.secCommonPd,
	.flowPage .sec1.secCommonPd,
	.faqPage .sec1.secCommonPd {
		padding-top: 44px !important;
	}
}
@media only screen and (max-width: 768px) {
	.blogPage .sec1,
	.newsPage .sec1,
	.faqPage .sec1,
	.companyPage .sec1,
	.voicePage .sec1,
	.environmentPage .sec1,
	.service_detailPage .sec1,
	.fees_detailPage .sec1,
	.strength_detailPage .sec1,
	.flowPage .sec1,
	.blogPage .sec1.secCommonPd,
	.flowPage .sec1.secCommonPd,
	.faqPage .sec1.secCommonPd {
		padding-top: 32px !important;
	}
}

/* environment だけリード文が <div class="commonTxt01"> で、他ページの
   <p class="commonTxt01"> と要素が異なる。environment.css の
   `.commonTxt01{margin-top:0}` は div に効かず、算出値 26px が残っていた
   （実測: environment のみパンくず下 75px、他 49px＝26px差）。
   要素を問わず先頭の余白を殺して、全ページを同一線に揃える。 */
.environmentPage .sec1 > .inner > .commonTxt01,
.sec1 > .inner > .commonTxt01:first-child,
.sec1 > .inner > .pageLead:first-child {
	margin-top: 0 !important;
}

/* ==========================================================================
   2. リード文（.pageLead）
   ------------------------------------------------------------------------
   MV直下に置く導入テキスト。既存の .commonTxt01 と見た目を揃えつつ、
   下に短いオレンジのアクセントを入れて本文の始まりを示す
   （service/fees に入れた C案の処理と同じ作法）。
   ========================================================================== */
/* 既存の .commonTxt01 と完全に同じ体裁にする。
   ------------------------------------------------------------------
   実測(2026-07-26 @1440px)で、既存ページ(company/specificity/benefits/
   application/environment)の .commonTxt01 は
     font-size 16px / line-height 27px / color #222 / max-width なし(全幅)
   であるのに対し、当初の .pageLead は line-height 32px / #333 /
   max-width 800px としてしまい、同一ページ内に2種類の本文体裁が並んだ
   （FAQは私のリード文と既存説明文が上下に並ぶため差が露骨に出る）。
   さらに max-width 800px が原因で /fees/ のリード文が
   「…上下いたしま / す。」と1文字だけ折り返していた。
   → 独自の値を持たせず、既存の標準にそのまま揃える。 */
.pageLead {
	margin-top: 0;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.7;
	color: #222222;
}

/* service / fees も同じ問題を持つ。design_c.css で
   max-width:800px / line-height:2 / color:#333 を与えてしまったため、
   同サイト内の他ページと体裁が食い違い、/fees/ では1文字だけ折り返していた。
   design_c.css は本番稼働中なので直接は書き換えず、後勝ちのここで戻す。 */
.service_detailPage .sec1 .commonTxt01,
.fees_detailPage .sec1 .commonTxt01 {
	max-width: none;
	line-height: 1.7;
	color: #222222;
	padding-bottom: 0;
}
/* オレンジのアクセント線も、既存ページには無い装飾で統一を崩すため外す
   （FAQでは既存見出しの飾り罫と重なって見えていた）。 */
.service_detailPage .sec1 .commonTxt01::after,
.fees_detailPage .sec1 .commonTxt01::after {
	display: none;
}
/* リード文の次に来る要素との間隔。カテゴリタブ・一覧・アコーディオン等、
   後続要素の種類が多いので、リード文側の margin ではなく
   後続要素の margin-top を打ち消す形で制御する。 */
.blogPage .sec1 .pageLead + .categoryBtnList {
	margin-top: 44px;
}
.blogPage .sec1 .pageLead ~ .blogList {
	margin-top: 56px;
}
/* FAQ・News・flow・strength：リード文の直後に来る見出し／本文との間隔。
   既存ページ（company等）が commonTxt01 の後に取っている間隔に合わせる。 */
.faqPage .sec1 .pageLead,
.newsPage .sec1 .pageLead,
.flowPage .sec1 .pageLead,
.strength_detailPage .sec1 .pageLead {
	margin-bottom: 56px;
}

@media only screen and (max-width: 768px) {
	.pageLead {
		font-size: 1.4rem;
		line-height: 1.9;
		padding-bottom: 26px;
		text-align: left;
	}
	.blogPage .sec1 .pageLead + .categoryBtnList {
		margin-top: 30px;
	}
	.blogPage .sec1 .pageLead ~ .blogList {
		margin-top: 36px;
	}
}

/* ==========================================================================
   3. ブログ一覧のカードUI
   ------------------------------------------------------------------------
   実測（2026-07-26 @1440px）: カード9枚とも高さ378pxで完全に揃っており、
   タグも全カードに表示されている（＝崩れではない）。
   問題は質感で、既存 CSS が `border: 1px solid #ffffff` ＝白い枠のため、
   白カードが背景 #f5f5f5 に溶けて「1枚のカード」に見えない点。
   ここを枠・角丸・影で立ち上げ、ホバーの手応えを付ける。
   ========================================================================== */
.blogPage .sec1 .blogList > li a {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	padding: 15px 13px 26px;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.blogPage .sec1 .blogList > li a:hover {
	box-shadow: 0 8px 24px rgba(0, 45, 90, .12);
	transform: translateY(-3px);
	border-color: #cfe0f0;
	opacity: 1; /* テーマ既定の .fade によるホバー透過を打ち消す */
}
/* サムネイル：角を丸めてカードの角丸と揃える。
   ホバーでわずかに寄る（画像を持つカードであることを伝える最小限の動き） */
.blogPage .sec1 .blogList > li a .imgBox {
	border-radius: 5px;
	overflow: hidden;
	transition: transform .4s ease;
}
.blogPage .sec1 .blogList > li a:hover .imgBox {
	transform: scale(1.02);
}
/* タイトル：ホバーで紺に。リンクであることを明示する */
.blogPage .sec1 .blogList > li a .txt {
	transition: color .3s ease;
	line-height: 1.6;
}
.blogPage .sec1 .blogList > li a:hover .txt {
	color: #004da0;
}
/* カテゴリタグ：ベタ塗り紺が4つ並ぶと重いので、輪郭線主体の控えめな見た目へ。
   （オレンジ＝CV専用の色階層を崩さないため、回遊系は紺の輪郭線で扱う） */
.blogPage .sec1 .blogList > li a .categoryTagList span.blogKnowledge {
	background-color: #eef5fc;
	color: #004da0;
	border: 1px solid #cfe0f0;
	font-weight: bold;
}
/* プレミアム記事バッジ
   ------------------------------------------------------------------
   既存は background #cc5d17（茶系オレンジ）＋ border-left #f6ac19（黄土色）で、
   どちらもブランドガイドライン(2026/2/20版)の色ではない出所不明の配色だった。
   帯が角ばったまま画像に食い込むため安価な印象にもなっていた。
   → CV色 #ed6c00 は申し込み導線専用なので使わず、
     「特別な記事」を表す独立した色として、紺を基調に金のアクセントで組む。
     ベタ塗り1色をやめ、紺のグラデ＋細い金の下線で品を出す。 */
.blogPage .sec1 .blogList > li a .premium-badge {
	background: linear-gradient(135deg, #16283f 0%, #004da0 100%);
	border-left: none;
	border-bottom: 2px solid #c8a44d;
	border-top-left-radius: 7px;
	border-bottom-right-radius: 8px;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	letter-spacing: .06em;
	padding: 6px 16px 5px 13px;
	column-gap: 7px;
	box-shadow: 0 2px 8px rgba(0, 30, 70, .28);
}
/* 星アイコンは元画像がバッジ色に合わせた配色なので、
   紺地でも視認できるよう明度を上げる（画像は差し替えない＝差分を最小化）。 */
.blogPage .sec1 .blogList > li a .premium-badge img {
	width: 14px;
	height: auto;
	filter: brightness(0) saturate(100%) invert(78%) sepia(38%)
	        saturate(560%) hue-rotate(2deg) brightness(92%) contrast(88%);
	position: relative;
	z-index: 2;
}
/* バッジ内の文字も光沢より前面に置く（光沢が文字を白飛びさせないため） */
.blogPage .sec1 .blogList > li a .premium-badge {
	isolation: isolate;
}

/* --- 光沢アニメーション（きらーん） ---------------------------------------
   斜めの白いハイライトを、バッジの左外から右外へ通す。
   ・幅を細く（18%）、不透明度を抑える（最大 .38）＝派手にしない
   ・1.1秒で通過 → 6.4秒待つ、を繰り返す。連続で光ると安っぽくなるため、
     アニメーション全体を長く取り、光る区間だけを先頭に置いて間を作る。
   ・prefers-reduced-motion では動かさない（アクセシビリティ）
   ・overflow:hidden は既存の border-radius と併用して光沢をバッジ内に収める */
.blogPage .sec1 .blogList > li a .premium-badge {
	overflow: hidden;
}
.blogPage .sec1 .blogList > li a .premium-badge::after {
	content: '';
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: 0;
	width: 18%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .38) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg) translateX(-260%);
	animation: premiumShine 7.5s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes premiumShine {
	/* 0〜14.7% (=約1.1秒) で左外から右外へ通す。以降は画面外で待機。 */
	0%   { transform: skewX(-18deg) translateX(-260%); }
	14.7%{ transform: skewX(-18deg) translateX(760%); }
	100% { transform: skewX(-18deg) translateX(760%); }
}
/* 金の下線もわずかに呼応させる（下線だけ光ると帯と分離して見えるため、
   バッジ本体の光沢と同じ周期・同じタイミングで明度を上げる） */
.blogPage .sec1 .blogList > li a .premium-badge {
	animation: premiumEdge 7.5s ease-in-out infinite;
}
@keyframes premiumEdge {
	0%,  6%  { border-bottom-color: #c8a44d; }
	10%      { border-bottom-color: #f0d99a; }
	16%, 100%{ border-bottom-color: #c8a44d; }
}
/* 動きを減らす設定の利用者には光らせない */
@media (prefers-reduced-motion: reduce) {
	.blogPage .sec1 .blogList > li a .premium-badge::after {
		animation: none;
		opacity: 0;
	}
	.blogPage .sec1 .blogList > li a .premium-badge {
		animation: none;
	}
}

/* ==========================================================================
   記事詳細ページのカテゴリタグ
   ------------------------------------------------------------------
   既存は `.blog_detailPage .sec1 .cont ul li span` が background #e34d4e＝赤。
   ブランド色（紺#004da0 / 明青#4593d0 / CTA橙#ed6c00）のいずれでもなく、
   ベタ塗りで本文より目立っていた。同じページ上部にある記事タグは
   すでに白地＋紺文字＋輪郭線で整っており、下部だけ赤という不統一もあった。
   → 上部のタグ・ブログ一覧のタグと同じ輪郭線主体に揃える。
   ========================================================================== */
.blog_detailPage .sec1 .cont ul li span {
	background-color: #eef5fc;
	color: #004da0;
	border: 1px solid #cfe0f0;
	font-weight: bold;
	font-size: 1.3rem;
	padding: 7px 15px 6px;
	border-radius: 4px;
}

/* ==========================================================================
   記事内の相談ボタン（.consult-btn）をCV色に寄せる
   ------------------------------------------------------------------
   「無料相談はこちら／1営業日以内にご連絡」は問い合わせに直結するCV導線だが、
   実測では枠・アイコン円・矢印円・見出し文字がすべて紺系(#004da0/#4090d0)で、
   オレンジが1箇所も無かった＝7/26に決めた色階層
   （オレンジ#ed6c00＝CV専用／紺＝回遊）の適用漏れ。
   ボタン全体をオレンジのベタ塗りにすると記事本文の中で強すぎるため、
   白地は保ちつつ、枠とアイコン・矢印・見出しをCV色に振る。
   ========================================================================== */
.consult-btn {
	border-color: #ed6c00;
	box-shadow:
		0 0 10px rgba(237, 108, 0, .22),
		0 2px 6px rgba(180, 80, 0, .12);
}
.consult-btn:hover {
	box-shadow:
		0 0 16px rgba(237, 108, 0, .34),
		0 3px 10px rgba(180, 80, 0, .2);
}
.consult-btn__icon,
.consult-btn__arrow {
	background: #ed6c00;
}
.consult-btn__title {
	color: #d35f00; /* #ed6c00 は白地だとコントラスト不足のため、文字はやや濃く */
}
.consult-btn__sub {
	color: #b35400;
	border-color: #f0b27a;
	background: #fff8f2;
}

/* カテゴリタブ：現在地と非選択の差を明確にする */
.blogPage .sec1 .categoryBtnList > li a {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.blogPage .sec1 .categoryBtnList > li a:not(.categoryBtnActive):hover {
	background-color: #eef5fc;
	border-color: #004da0;
	opacity: 1;
}

/* ページネーション：現在ページを紺で塗り、他は輪郭線 */
.blogPage .page_list_box .page_list a,
.blogPage .page_list_box .page_list span {
	transition: background-color .3s ease, color .3s ease;
}

@media only screen and (max-width: 768px) {
	.blogPage .sec1 .blogList > li a {
		padding: 13px 12px 22px;
	}
	.blogPage .sec1 .blogList > li a .premium-badge {
		font-size: 1.2rem;
	}
}

/* ==========================================================================
   記事詳細ページ：記事末へ移したカテゴリナビ（.postCateNav）
   ------------------------------------------------------------------
   もとは記事最上部に一覧用のカテゴリタブが置かれ、直下の「この記事のタグ」と
   紛らわしかった。役割は別（タブ＝他記事への回遊 / タグ＝この記事の分類）なので、
   タブは読み終わった位置へ移し、見出しを付けて用途を明示する。
   ========================================================================== */
.postCateNav {
	margin: 56px 0 8px;
	padding-top: 40px;
	border-top: 1px solid #e2e8f0;
}
.postCateNav__ttl {
	font-size: 1.6rem;
	font-weight: bold;
	color: #16283f;
	text-align: center;
	margin-bottom: 20px;
	letter-spacing: .04em;
}
/* タブ本体は一覧ページと同じ見た目を流用する（学習コストを増やさない）。
   ただし記事末では主役ではないので、少しだけ小さく・控えめにする。 */
.postCateNav .categoryBtnList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.postCateNav .categoryBtnList > li {
	margin: 0;
	min-width: 0;
}
.postCateNav .categoryBtnList > li a {
	display: inline-block;
	padding: 9px 20px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #004da0;
	background-color: #fff;
	border: 1px solid #c7d6e6;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.postCateNav .categoryBtnList > li a:hover {
	background-color: #eef5fc;
	border-color: #004da0;
	opacity: 1;
}
@media only screen and (max-width: 768px) {
	.postCateNav {
		margin-top: 40px;
		padding-top: 30px;
	}
	.postCateNav__ttl {
		font-size: 1.5rem;
		margin-bottom: 16px;
	}
	.postCateNav .categoryBtnList {
		gap: 8px;
	}
	.postCateNav .categoryBtnList > li a {
		padding: 8px 16px;
		font-size: 1.3rem;
	}
}

/* ==========================================================================
   4. ページ末CTA（design_c.css と同一仕様。ブログ／ニュース／FAQ用に再掲）
   design_c.css を読まないページでも成立するよう、ここにも定義を置く。
   ========================================================================== */
.pageEndCta {
	background: linear-gradient(135deg, #004087 0%, #00559f 55%, #0a63b5 100%);
	border-radius: 8px;
	padding: 46px 40px 44px;
	text-align: center;
	margin-top: 64px;
	position: relative;
	overflow: hidden !important;
	overflow-x: hidden !important;
}
.pageEndCta::after {
	content: '';
	position: absolute;
	right: -60px;
	bottom: -80px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .05);
	pointer-events: none;
}
.pageEndCta .pageEndCta_ttl {
	font-size: 2.4rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.6;
	margin-bottom: 12px;
	position: relative;
	z-index: 1;
}
.pageEndCta .pageEndCta_txt {
	font-size: 1.5rem;
	color: #d8e6f5;
	line-height: 1.9;
	margin-bottom: 28px;
	position: relative;
	z-index: 1;
}
.pageEndCta .pageEndCta_btn {
	display: inline-block;
	background-color: #ed6c00;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	text-decoration: none;
	padding: 19px 54px 18px;
	border-radius: 4px;
	transition: background-color .3s ease, transform .3s ease;
	position: relative;
	z-index: 1;
}
.pageEndCta .pageEndCta_btn:hover {
	background-color: #ff7d15;
	transform: translateY(-2px);
	opacity: 1;
}
@media only screen and (max-width: 768px) {
	.pageEndCta {
		padding: 38px 24px 36px;
		margin-top: 48px;
	}
	.pageEndCta .pageEndCta_ttl { font-size: 1.9rem; }
	.pageEndCta .pageEndCta_txt { font-size: 1.4rem; margin-bottom: 24px; }
	.pageEndCta .pageEndCta_btn {
		display: block;
		padding: 17px 20px 16px;
		font-size: 1.6rem;
	}
}