/* ===== layout_fix_20260726.css ===== */

/* ============================================================================
   20260726 レイアウト調整（五月女指示）
   ①トップMVの余白圧縮＋CTA設置 / ③記事メイン画像の縮小（JTB APAC型）
   ④見出しの軽量化 / ⑤カテゴリタグの整理 / ⑥余白の圧縮
   ⑦記事詳細MVへグラデーション適用 / 固定バーはトップのみ非表示
   参照実測：JTB APAC /resources/insights/ = 画像を右450px絶対配置＋左に本文回り込み
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ① トップMV：上下の余白を圧縮し、空いた分にCTAを置く
   実測 padding:165px/180px、見出し上の空き210px（うち54pxはfixedヘッダー下）
   → 上は 165→120px（ヘッダー54pxぶんは確保したまま純空白を圧縮）
     下は 180→96px（CTAを入れても総高が増えないようにする）
   --------------------------------------------------------------------------- */
.topPage .sec-mv{
	padding: 96px 0 76px;
}
/* .inner は半透明の青ボックス（rgb(0,77,160,.9)）そのもの。
   ここを 0 にすると中身がボックス端に張り付くため、パディングは残したまま
   上下のバランスだけ整える（元：45px 10px 10px）。CTAを内包する前提の下余白を確保。 */
/* MVのコピー背景。元は rgb(0,77,160,.9) のべた塗り。
   下層MV（120deg, #00396f→#0050a0→#1a6fbe）と同じ方向のグラデーションにするが、
   背景写真を透かす箱なので下層よりコントラストを弱く、色差を狭めて“薄く”当てる。
   透過も .82〜.92 の範囲に収め、白文字の可読性は維持する。 */
.topPage .sec-mv .inner{
	padding: 40px 10px 36px;
	background-color: transparent;
	background-image: linear-gradient(120deg,
		rgba(0,57,111,.92) 0%,
		rgba(0,77,160,.88) 58%,
		rgba(26,111,190,.82) 100%);
	/* 既存の inner-mask は background-color を 0→.9 に変えるアニメーションで、
	   完了後に background-color が復活してグラデーションを覆ってしまう。
	   フェードインは箱ごと opacity で行う方式に差し替える。 */
	animation: none;
	-webkit-animation: none;
	opacity: 0;
	animation: mv-inner-fade 1.2s linear forwards;
}
@keyframes mv-inner-fade{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}
/* 工程タグ（企画〜分析・改善）は「白の実線囲み」。ここと副CTAが同じ見た目だと
   ラベルとボタンの区別がつかないため、CTA側は面で見せる（囲みを使わない）。
   加えて工程タグ側の主張を一段落として、CTAとの主従を明確にする。 */
.topPage .sec-mv .dh{
	margin-top: 32px;
}
.topPage .sec-mv .dh span{
	border-width: 1px;
	border-color: rgba(255,255,255,.55);
	font-size: 1.6rem;
	font-weight: normal;
	width: auto;
	padding: 7px 18px 6px;
	margin: 0 6px 12px;
	border-radius: 3px;
	color: rgba(255,255,255,.92);
}

/* CTA：h1・工程タグと同じく中央揃え
   （実測でCTAの中心が468px＝innerの中心720pxから252px左にズレていた） */
.topPage .sec-mv .mv_cta{
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
}
.topPage .sec-mv .mv_cta a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	padding: 18px 32px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	border-radius: 4px;
	transition: opacity .2s ease, transform .2s ease;
}
/* 主CTA：問い合わせ（オレンジ＝ブランドのアクセント） */
.topPage .sec-mv .mv_cta .mv_cta_main{
	background-color: #BF5700;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
/* 副CTA：白の「面」。工程タグ（白の囲み線）と造形を変えて混同を防ぐ。
   囲みではなくベタ塗り＋ブランドブルーの文字にすることで、
   「押せるもの」であることが形で伝わる。 */
.topPage .sec-mv .mv_cta .mv_cta_sub{
	background-color: #ffffff;
	color: #004da0;
	border: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.topPage .sec-mv .mv_cta a:hover{
	opacity: .92;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,.26);
}

/* 固定バー：トップのみ非表示（下層は主力導線として維持）
   .addFooter は <footer> 内にあり #topPage の外側なので子孫セレクタでは届かない。
   :has() で「トップページのDOMを含む文書か」を判定して body 側から消す。 */
body:has(#topPage) .addFooter{
	display: none;
}
/* :has() 非対応ブラウザ向けのフォールバック（TOPのhtmlに .is-top を付与して効かせる） */
body.is-top .addFooter{
	display: none;
}

@media only screen and (max-width:1024px){
	.topPage .sec-mv{ padding: 104px 0 80px; }
}
@media only screen and (max-width:768px){
	.topPage .sec-mv{ padding: 88px 0 64px; }
	.topPage .sec-mv .mv_cta{ margin-top: 28px; gap: 12px; }
	.topPage .sec-mv .mv_cta a{ min-width: 0; width: 100%; padding: 16px 20px; font-size: 1.6rem; }
}

/* ---------------------------------------------------------------------------
   ヘッダーロゴを少し小さくする
   実測：ヘッダー54pxに対しロゴ枠54px（上下の余り0px）、画像は141x46px。
   ロゴが天地いっぱいで呼吸がなく窮屈に見えていた。
   46px→38pxにして上下に8pxずつの余白をつくる（原寸141x46の比率は維持）。
   --------------------------------------------------------------------------- */
@media only screen and (min-width:1025px){
	header .logo img{
		width: auto;
		height: 38px;
	}
	/* ナビ項目の間隔。元 padding:20px 7.5px ＝ 項目間が実質15pxしかなく窮屈。
	   「トップ」「会社案内」を外して横に余地ができたぶんを間隔に回す。 */
	header .nav_link{
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* 1280px前後は項目が詰まりやすいので中間値にして折り返しを防ぐ */
@media only screen and (min-width:1025px) and (max-width:1366px){
	header .nav_link{
		padding-left: 11px;
		padding-right: 11px;
	}
}

/* ---------------------------------------------------------------------------
   ボタンの色階層を整理（実測：オレンジ#BF5700 が3箇所中CVは1つだけだった）
   第1階層＝CV(/contact)のみオレンジ塗り
   第2階層＝回遊（もっと見る／記事一覧はこちら）はブランドブルーの輪郭線
   最も強い色をCV専用にして、CTAの相対的な強さを回復させる。
   --------------------------------------------------------------------------- */
.topPage .sec1 .btn,
.topPage .sec4 .btn{
	background-color: transparent;
	color: #004da0;
	border: 2px solid #004da0;
	box-sizing: border-box;
	transition: background-color .2s ease, color .2s ease;
}
.topPage .sec1 .btn:hover,
.topPage .sec4 .btn:hover{
	background-color: #004da0;
	color: #ffffff;
}
/* 矢印は ::after の背景画像 icon_img06.png（オレンジ）で、実測で3箇所に使用：
     ①.sec .btn::after            もっと見る／記事一覧はこちら
     ②.sec1 ul li a.active_url    ニュース一覧の各行
     ③.sec2 .lists a::after       サービス紹介カード（SERVICE/FEE/ADVANTAGE/FLOW）
   3つとも回遊リンクでCVではない。「オレンジ＝CV」の規則から外れるうえ、
   ③はカード内のアイコン・英字が #004da0 なので矢印だけ色相が浮いていた。
   まとめてブランドブルーに寄せる。 */
.topPage .sec .btn::after,
.topPage .sec1 ul li a.active_url::after,
.topPage .sec2 .lists a::after{
	filter: hue-rotate(184deg) saturate(1.7) brightness(.62);
	transition: filter .2s ease;
}
/* 塗りつぶしhoverになる輪郭線ボタンだけ、矢印を白へ反転させる */
.topPage .sec1 .btn:hover::after,
.topPage .sec4 .btn:hover::after{
	filter: brightness(0) invert(1);
}
/* hoverの既定opacityが効くと反転が濁るため、この2つでは無効化する */
.topPage .sec1 .btn:hover,
.topPage .sec4 .btn:hover{
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   フッター下の余白：固定バー(73px)の逃げスペースが、バーを消したトップにも
   残っていた（実測 footer margin-bottom:73px／末尾からの空き73px）。
   トップは固定バーが無いので不要。下層はバーがあるため維持する。
   --------------------------------------------------------------------------- */
/* global.js が $('footer .addFooter').outerHeight() を footer の margin-bottom に
   インラインで書き込む（js/global.js:98,119）。トップは固定バーを display:none に
   しているが outerHeight() は 73px を返すため、余白だけが残っていた。
   インラインスタイルが相手なので !important で打ち消す。 */
body:has(#topPage) footer,
body.is-top footer{
	margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   フッターの配色をネイビー #16283f に変更（C案）
   実測：旧 #585e64 はサイト内のどこにも使われていない孤立した無彩色だった。
   （サイトの主要色＝#004da0 / #00396f / #f5f5f5 / #BF5700[CV専用]）
   青系の暗色に寄せることで①サイトに馴染ませ②ブランドブルーと競合させず
   ③CTAのオレンジのコントラストを最大化する。
   --------------------------------------------------------------------------- */
footer .cont{
	background-color: #16283f;
}

/* ---------------------------------------------------------------------------
   フッターを2カラムにする
   すべて中央揃えの縦積みで、行長がバラバラに中央寄せされて重心が定まらず
   間延びして見えていた。左＝会社情報（正体）／右＝ナビ＋サービス一覧（動線）
   と役割で分け、それぞれ左揃えにして視線の始点を揃える。
   1024px以下は縦積み・中央揃えのまま（横に割ると1列が窮屈になるため）。
   --------------------------------------------------------------------------- */
@media only screen and (min-width:1025px){
	footer .cont .inner{
		display: grid;
		grid-template-columns: minmax(320px, 34%) 1fr;
		column-gap: 64px;
		align-items: start;
	}
	/* 左：会社情報 */
	footer .cont .ul1{
		grid-column: 1;
		grid-row: 1 / span 2;
		text-align: left;
		margin-bottom: 0;
	}
	footer .cont .ul1 li{
		line-height: 1.85;
		margin-bottom: 2px;
	}
	/* 右上：サイト内ナビ。中央揃えをやめ左詰めにして行頭を揃える */
	footer .cont .ul-2_3{
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-start;
		margin-bottom: 18px;
	}
	footer .cont .ul-2_3 li{
		margin-bottom: 10px;
	}
	/* 右下：B.A.Dサービス一覧 */
	footer .cont .website_link{
		grid-column: 2;
		grid-row: 2;
	}
	footer .website_link .service_list{
		justify-content: flex-start;
	}
	footer .website_link .service_list li{
		margin-bottom: 10px;
	}
	/* 見出しも左揃えに。text-align は span 側に center 指定があるので span を直接上書く */
	footer .website_link .service_tit{
		text-align: left;
	}
	footer .website_link .service_tit span{
		font-size: 1.5rem;
		text-align: left;
		margin-bottom: 14px;
		/* 各リンクの li は padding:0 15px を持つため、文字の開始位置が 15px 右にある。
		   見出しだけ padding が無く左に飛び出して見えるので、同じ 15px を与えて頭を揃える。 */
		padding-left: 15px;
	}
	/* 上段ナビ（ul-2_3）も同じ理由で 15px ぶん内側から始まる。
	   左カラムの会社情報と行頭を揃えるため、リスト全体を 15px 左へ引き戻す。 */
	footer .cont .ul-2_3,
	footer .website_link .service_list{
		margin-left: -15px;
	}
	footer .website_link .service_tit span{
		padding-left: 0;
	}
	/* 区切り線「|」は :first-of-type だけ透明化されており、左詰めで折り返した
	   2行目の先頭に線が残ってしまう。線を左ではなく右に持たせ、
	   最後の要素だけ消す方式に変えて、行頭に線が出ないようにする。 */
	footer .cont .ul-2_3 li,
	footer .website_link .service_list li{
		border-left: none;
		border-right: 1px solid rgba(255,255,255,.45);
	}
	footer .cont .ul-2_3 li:last-of-type,
	footer .website_link .service_list li:last-of-type{
		border-right: none;
	}
	/* 左カラムの1行目（社名）だけ少し強くして情報の頭を作る */
	footer .cont .ul1 li:first-of-type a{
		font-size: 1.3rem;
		font-weight: bold;
	}
}

/* コピーライトをフッター帯の中に入れる
   実測：.copyrightText は <footer> 内にあるが背景色が未指定（白地）で、
   グレー帯から分離して宙に浮いて見えていた。同じ帯に載せ、区切りは罫線で示す。 */
footer .copyrightText{
	background-color: #16283f;
	color: rgba(255,255,255,.85);
	border-top: 1px solid rgba(255,255,255,.14);
	padding: 18px 0 20px;
}

/* ---------------------------------------------------------------------------
   ヘッダーの「トップ」をPCナビから外す
   左上ロゴが <a href="/"> でホームに戻るため機能が重複している。
   会社案内と同じく、1024px以下（ハンバーガー）では残す
   ＝SPはロゴがタップ対象として認識されにくいため明示リンクを残す。
   --------------------------------------------------------------------------- */
@media only screen and (min-width:1025px){
	/* href は各ページで異なる（下層では自分自身を指す不具合がある）ため、
	   href ではなく「ナビの先頭項目」という位置で特定する。
	   nav_list の1番目が常に「トップ」。 */
	header .nav_list>li:first-child{
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   ページトップボタン
   実測：right:100px / bottom:248px と画面の中途半端な位置に浮いていた。
   さらにブランドブルーのベタ塗り＋白矢印で、CVボタンに次ぐ強さを持ってしまい
   補助機能としては目立ちすぎ。隅に寄せ、通常時は控えめ・hoverで持ち上げる。
   --------------------------------------------------------------------------- */
.pagetop{
	right: 28px;
	bottom: 96px;          /* 固定バー(73px)の上に重ならない位置 */
	width: 44px;
	height: 44px;
	opacity: .42;
	transition: opacity .2s ease, transform .2s ease;
}
.pagetop:hover{
	opacity: 1;
}
.pagetop img{
	width: 100%;
	height: 100%;
}
/* 固定バーが無いトップページはもう少し下げてよい */
body:has(#topPage) .pagetop,
body.is-top .pagetop{
	bottom: 28px;
}
@media only screen and (max-width:768px){
	.pagetop{
		right: 14px;
		bottom: 84px;
		width: 40px;
		height: 40px;
	}
}

/* ---------------------------------------------------------------------------
   SPの固定CTAバー：オレンジボタンの左右に青が覗く問題
   実測：.addFooter の背景が #004da0、その上の .mailmob が width:92% のため
   両脇8%（375px時に各15px）から下地の青が見えていた。
   バーの下地をオレンジに合わせ、ボタンは全幅にして隙間そのものを無くす。
   --------------------------------------------------------------------------- */
@media only screen and (max-width:768px){
	footer .addFooter{
		background-color: #BF5700 !important;
	}
	footer .addFooter .footerMob{
		padding: 0 !important;
	}
	footer .addFooter .footerMob a.mailmob{
		width: 100% !important;
		border-radius: 0 !important;
		height: 52px !important;
	}
}

/* ---------------------------------------------------------------------------
   フッター住所の折り返し：1行目と2行目が詰まって重なって見える。
   郵便番号＋住所が長く2行になるページ幅で行間が足りていないため、
   フッター全体の行間を広げ、折り返しても読めるようにする。
   --------------------------------------------------------------------------- */
footer .cont .ul1 li{
	line-height: 1.9;
}
/* 郵便番号と住所の間の改行。PC・タブレットでは1行に収まるので改行しない。 */
footer .cont .ul1 .addrBr{
	display: none;
}
@media only screen and (max-width:768px){
	footer .cont .ul1 li{
		line-height: 1.95;
		margin-bottom: 6px;
		padding: 0 14px;   /* 端で折り返した行が画面端に触れないようにする */
	}
	/* SPは住所が長く折り返して行が重なって見えるため、郵便番号で改行する */
	footer .cont .ul1 .addrBr{
		display: inline;
	}
}

/* ---------------------------------------------------------------------------
   ヘッダーの「会社案内」をPCナビから外す（フッターには既に存在するため導線は残る）
   購買検討の導線ではなくヘッダーの一等地を占めているため。
   1024px以下はハンバーガー内の同じDOMを使い回す構造なので、SPでは残す
   （消すとSPから会社情報への導線がほぼ無くなる）。
   --------------------------------------------------------------------------- */
@media only screen and (min-width:1025px){
	header .nav_list>li:has(>a[href="/company"]){
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   ⑦ 記事詳細（blog/news/voice の _detailPage）のMVを一覧と揃える
   従来コメントでは「h1が長文のため対象外」とされていたが、実際のDOMでは
   MV内の見出しは .blogh1 = 固定文言「Blog」であり長文ではない。
   （記事タイトルは MV ではなく本文側 h1.commonH2 に存在する）
   よって除外理由は現状のマークアップには当てはまらないため、揃える。
   --------------------------------------------------------------------------- */
.blog_detailPage .subpagesMv,
.news_detailPage .subpagesMv{
	position: relative;
	overflow: hidden;
	background-color: #004da0;
	background-image: linear-gradient(120deg,#00396f 0%,#0050a0 60%,#1a6fbe 100%);
}
.blog_detailPage .subpagesMv::before,
.news_detailPage .subpagesMv::before{
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse at 82% 18%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),
		repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 12px);
	z-index: 0;
	pointer-events: none;
}
.blog_detailPage .subpagesMv::after,
.news_detailPage .subpagesMv::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: #BF5700;
	z-index: 3;
	pointer-events: none;
}
.blog_detailPage .subpagesMv .inner,
.news_detailPage .subpagesMv .inner{
	position: relative;
	z-index: 2;
}
/* MV見出し（Blog / News）：一覧と同じ左寄せ＋オレンジ縦バー */
.blog_detailPage .subpagesMv .blogh1,
.news_detailPage .subpagesMv .newsh1{
	position: relative;
	z-index: 2;
	text-align: left;
	padding-left: 18px;
	border-left: 5px solid #BF5700;
	line-height: 1.15;
}

/* ---------------------------------------------------------------------------
   下層MVの余白と文字サイズのバランス
   実測：全13ページ共通で 高さ227px / padding 114px上・60px下 / 文字高53px。
   上の114pxはヘッダー54pxを含むので実質60px/60pxだが、
   文字が53pxしかなく「余白ばかりで文字が小さい」状態だった（FAQのような短い語で顕著）。
   帯を少し詰めつつ文字を大きくして、余白と文字の比率を整える。
   --------------------------------------------------------------------------- */
@media only screen and (min-width:1025px){
	.subpagesMv{
		padding: 100px 0 48px;
	}
	.subpagesMv h1,
	.subpagesMv .blogh1,
	.subpagesMv .newsh1{
		font-size: 5.2rem;
	}
	/* 透かし英字は .inner の下端基準（bottom:-18px / 86px高）で張り付くため、
	   帯のpaddingを詰めても英字ごと動いて相対位置が変わらない（前回の失敗）。
	   分離は h1 の margin-bottom で行う＝inner が下に伸び、英字だけが下がる。
	   英字86px − (margin + 18px) が重なり量。margin 68px で重なり0になる計算。
	   帯の上下も再配分して総高の増加を最小限に抑える。 */
	.subpagesMv{
		padding-top: 90px;      /* fixedヘッダー54px + 見た目の上余白36px */
		padding-bottom: 16px;
	}
	.subpagesMv h1,
	.subpagesMv .blogh1,
	.subpagesMv .newsh1{
		position: relative;
		z-index: 2;
	}
	/* h1 の margin-bottom はマージン相殺で .inner の外に抜けて英字が動かない。
	   相殺が起きない padding-bottom を .inner に与えて、英字の基準（inner下端）
	   だけを h1 から引き離す。 */
	.subpagesMv .inner{
		padding-bottom: 68px;
	}
}
@media only screen and (max-width:1024px){
	.subpagesMv{
		padding: 92px 0 14px;
	}
	.subpagesMv h1,
	.subpagesMv .blogh1,
	.subpagesMv .newsh1{
		font-size: 4.4rem;
	}
	/* 英字50px高との分離（実測：重なり38px → padding 44pxで解消） */
	.subpagesMv .inner{
		padding-bottom: 52px;
	}
}
@media only screen and (max-width:768px){
	.subpagesMv{
		padding: 84px 0 12px;
	}
	.subpagesMv h1,
	.subpagesMv .blogh1,
	.subpagesMv .newsh1{
		font-size: 3.6rem;
	}
	/* 英字36px高との分離（実測：重なり28px → padding 34pxで解消） */
	.subpagesMv .inner{
		padding-bottom: 40px;
	}
}

/* ---------------------------------------------------------------------------
   ⑥ タグ周辺の余白を圧縮
   実測：MV下端→タグ 147px、タグ→本文 -10px（マイナス相殺で意図不明）
   → セクション上パディングを 87px→48px、マイナスマージンを解消
   --------------------------------------------------------------------------- */
.blog_detailPage .sec1.secCommonPd,
.blogPage .sec1.secCommonPd{
	padding-top: 48px !important;
}
.blog_detailPage .sec1 .categoryBtnList,
.blogPage .sec1 .categoryBtnList{
	margin-bottom: 0;
	gap: 12px;
}
/* タグ列と記事ヘッダー（タイトル・メイン画像）の間隔。
   2カラム化で画像がタグのすぐ下まで上がってきたため、40pxでは接触して見える。 */
.blog_detailPage .sec1 .cont{
	padding-top: 56px;
}

@media only screen and (max-width:768px){
	.blog_detailPage .sec1.secCommonPd,
	.blogPage .sec1.secCommonPd{
		padding-top: 32px !important;
	}
	.blog_detailPage .sec1 .cont{ padding-top: 24px; }
}

/* ---------------------------------------------------------------------------
   ⑤ カテゴリタグの整理
   実測：li に枠線＋白背景、a に文字装飾という二重構造。gap未使用でmargin依存。
   → 装飾を a に一本化し、li は器に戻す。ピル型にして「重さ」を取る。
   --------------------------------------------------------------------------- */
.blog_detailPage .sec1 .categoryBtnList>li,
.blogPage .sec1 .categoryBtnList>li{
	flex: none;
	min-width: 0;
	margin: 0;
	background-color: transparent;
	border: none;
}
.blog_detailPage .sec1 .categoryBtnList>li a,
.blogPage .sec1 .categoryBtnList>li a{
	display: block;
	font-size: 1.5rem;
	line-height: 1;
	font-weight: bold;
	color: #004da0;
	background-color: #ffffff;
	border: 1px solid #c7d6e6;
	border-radius: 999px;
	padding: 11px 22px;
	text-align: center;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.blog_detailPage .sec1 .categoryBtnList>li a:hover,
.blogPage .sec1 .categoryBtnList>li a:hover{
	background-color: #eaf1f9;
	border-color: #004da0;
}
/* 選択中：塗りで示す（枠線だけだと現在地が読み取れないため） */
.blog_detailPage .sec1 .categoryBtnList>li a.categoryBtnActive,
.blogPage .sec1 .categoryBtnList>li a.categoryBtnActive{
	background-color: #004da0;
	border-color: #004da0;
	color: #ffffff;
}

@media only screen and (max-width:768px){
	.blog_detailPage .sec1 .categoryBtnList,
	.blogPage .sec1 .categoryBtnList{
		gap: 8px;
	}
	.blog_detailPage .sec1 .categoryBtnList>li a,
	.blogPage .sec1 .categoryBtnList>li a{
		font-size: 1.3rem;
		padding: 9px 16px;
	}
}
/* 375px級：実測でタグ列が197px（4段）を占めていたため、横スクロール1列に切り替える。
   段組みで縦を食うより、スワイプで流す方がファーストビューを守れる。 */
@media only screen and (max-width:480px){
	.blog_detailPage .sec1 .categoryBtnList,
	.blogPage .sec1 .categoryBtnList{
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.blog_detailPage .sec1 .categoryBtnList::-webkit-scrollbar,
	.blogPage .sec1 .categoryBtnList::-webkit-scrollbar{
		display: none;
	}
	.blog_detailPage .sec1 .categoryBtnList>li,
	.blogPage .sec1 .categoryBtnList>li{
		flex: 0 0 auto;
	}
	.blog_detailPage .sec1 .categoryBtnList>li a,
	.blogPage .sec1 .categoryBtnList>li a{
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
   ③ 記事メイン画像：JTB APAC型（右に画像・左に見出しと本文）
   実測：現状 .contImg は width:100% で 1440px時に高さ619px＝FVの69%を占有し、
        本文が1行も見えない。JTB APAC は画像450pxを右に絶対配置して回り込ませる。
   → 1025px以上で同じ型にする。768px以下は1カラムのまま（縦積みが正しい）。
   --------------------------------------------------------------------------- */
@media only screen and (min-width:1025px){
	.blog_detailPage .sec1 .cont{
		position: relative;
	}
	/* 画像の高さぶんを確保するのは「記事ヘッダー部」だけ。
	   h1 / 公開日(.part1) / カテゴリ(ul) を右の画像と並べ、
	   本文(.partUl 以降)は全幅に戻す（本文まで狭めると右が空いて読みにくい）。 */
	.blog_detailPage .sec1 .cont>.commonH2,
	.blog_detailPage .sec1 .cont>.part1,
	.blog_detailPage .sec1 .cont>ul{
		padding-right: 480px;
		box-sizing: border-box;
	}
	.blog_detailPage .sec1 .cont>ul{
		min-height: 40px;
		margin-bottom: 0;
	}
	.blog_detailPage .sec1 .cont>.partUl{
		padding-top: 24px;
	}
	.blog_detailPage .sec1 .cont .commonH2{
		/* ④ 記事タイトル：全幅べた塗りをやめ、左寄せ＋オレンジ縦バーへ */
		text-align: left;
	}
	/* 絶対配置だと「h1+公開日+カテゴリ」の合計が画像高(248px)より短い記事で
	   本文の先頭行が画像の下に隠れる（2026-07-29 張影さんチェックで実発生）。
	   float なら本文の行ボックスが画像を自動で避けるため、記事の長短に依存しない。
	   .contImg は .cont の先頭子要素なので float:right で右上に収まる。 */
	.blog_detailPage .sec1 .cont .contImg{
		float: right;
		width: 440px;
		margin: 0 0 24px 40px;
		background-color: transparent !important;
		border-radius: 6px;
		overflow: hidden;
	}
	.blog_detailPage .sec1 .cont::after{
		content: "";
		display: block;
		clear: both;
	}
	.blog_detailPage .sec1 .cont .contImg img{
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
	/* 回り込み側（公開日・カテゴリ）の詰め。
	   .part1 は元 display:flex ＋ 中の p が中央寄りに見えるため、左揃えを明示する
	   （タイトルが左揃えなので日付だけ中央だと視線の始点がズレる）。 */
	.blog_detailPage .sec1 .cont .part1{
		margin: 18px 0 20px;
		justify-content: flex-start;
	}
	.blog_detailPage .sec1 .cont .part1 p{
		text-align: left;
		margin: 0;
	}
	/* カテゴリラベルも同じく左揃えに揃える */
	.blog_detailPage .sec1 .cont>ul{
		text-align: left;
	}
}

/* 1024px以下：1カラムのまま、ただし画像が縦を食いすぎないよう上限を掛ける */
@media only screen and (max-width:1024px){
	.blog_detailPage .sec1 .cont .contImg{
		margin-top: 24px;
		background-color: transparent !important;
	}
	.blog_detailPage .sec1 .cont .contImg img{
		width: 100%;
		height: auto;
		max-height: 340px;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}
@media only screen and (max-width:768px){
	.blog_detailPage .sec1 .cont .contImg img{
		max-height: 220px;
	}
}

/* ---------------------------------------------------------------------------
   ④ 見出しの軽量化
   実測：記事タイトル h1.commonH2 と本文 H2 が同じ #004da0 べた塗り＝階層が消える。
        H3 は素のテキストのみで、H2との落差が過大。
   → タイトル＝左寄せ＋オレンジ縦バー（べた塗り廃止）
     本文H2 ＝ 薄い地＋左オレンジバー（べた塗り廃止／インラインstyleはHTML側で除去）
     H3     ＝ 下線を与えてH2との中間段階をつくる
   --------------------------------------------------------------------------- */
/* 記事タイトル */
.blog_detailPage .sec1 .commonH2,
.news_detailPage .sec1 .commonH2{
	background-color: transparent;
	color: #222222;
	text-align: left;
	padding: 0 0 0 16px;
	border-left: 6px solid #BF5700;
	line-height: 1.4;
}

/* 本文H2：インラインstyleはHTML側で剥がす。ここは剥がした後の見た目を定義。 */
.blog_detailPage .sec1 .cont h2.wp-block-heading{
	background-color: #f2f6fb;
	color: #00396f;
	font-size: 2.2rem;
	line-height: 1.45;
	padding: 16px 20px 16px 22px;
	border-left: 5px solid #004da0;
	border-radius: 0 4px 4px 0;
	margin: 56px 0 24px;
}
/* 本文H3：H2との中間段階。下線のみで軽く。 */
.blog_detailPage .sec1 .cont h3.wp-block-heading{
	font-size: 1.9rem;
	line-height: 1.5;
	color: #00396f;
	padding: 0 0 8px;
	border-bottom: 2px solid #d7e2ee;
	margin: 36px 0 16px;
}

@media only screen and (max-width:768px){
	.blog_detailPage .sec1 .commonH2,
	.news_detailPage .sec1 .commonH2{
		padding-left: 12px;
		border-left-width: 4px;
	}
	.blog_detailPage .sec1 .cont h2.wp-block-heading{
		font-size: 1.8rem;
		padding: 13px 14px 13px 16px;
		margin: 40px 0 18px;
	}
	.blog_detailPage .sec1 .cont h3.wp-block-heading{
		font-size: 1.6rem;
		margin: 28px 0 12px;
	}
}

/* ---------------------------------------------------------------------------
   「HTMLメールとは」3ページ（specificity / benefits / application）の差別化
   現状：3ページとも同一の3列カード格子のみで、見分けがつかず単調。
   項目数と文量に合わせて型を3種に分ける（判定は MV の data-mv 属性 + :has()。
   非対応ブラウザは従来のカード表示のまま＝安全側に劣化）。
     特異性(5項目・長文)   → 全幅の段組みリスト（左バー）…長文は行型が読みやすい
     メリット(9項目・中文) → 3列格子を維持＋上辺アクセント…9個は格子が最適
     用途(5項目・短文)     → 2列の横型カード（薄青地）…短文の空白を吸収
   --------------------------------------------------------------------------- */
@media only screen and (min-width:769px){
	/* --- 特異性：全幅リスト --- */
	.html_emailPage:has([data-mv="specificity"]) .sec1 .contentList{
		display: block;
		max-width: 980px;
		margin: 40px auto 0;
	}
	.html_emailPage:has([data-mv="specificity"]) .sec1 .contentList>li{
		width: 100%;
		margin: 0 0 18px;
		padding: 28px 34px 30px;
		border-left: 4px solid #004da0;
		box-shadow: 0 2px 10px rgba(0,0,0,.05);
	}
	.html_emailPage:has([data-mv="specificity"]) .sec1 .contentList>li .tit{
		display: flex;
		align-items: center;
		gap: 14px;
	}
	.html_emailPage:has([data-mv="specificity"]) .sec1 .contentList>li .tit img{
		width: 44px;
		margin: 0;
	}
	.html_emailPage:has([data-mv="specificity"]) .sec1 .contentList>li .tit h3{
		margin: 0;
		font-size: 2rem;
		text-align: left;
	}
	.html_emailPage:has([data-mv="specificity"]) .sec1 .contentList>li .txt{
		margin-top: 14px;
	}

	/* --- メリット：3列格子＋アクセント --- */
	.html_emailPage:has([data-mv="benefits"]) .sec1 .contentList>li{
		border-top: 4px solid #004da0;
		box-shadow: 0 2px 10px rgba(0,0,0,.05);
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.html_emailPage:has([data-mv="benefits"]) .sec1 .contentList>li:hover{
		transform: translateY(-4px);
		box-shadow: 0 8px 20px rgba(0,0,0,.10);
	}
	.html_emailPage:has([data-mv="benefits"]) .sec1 .contentList>li .tit img{
		width: 56px;
	}

	/* --- 用途・種類：2列の横型カード（薄青地） --- */
	.html_emailPage:has([data-mv="application"]) .sec1 .contentList{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin: 40px 0 0;
	}
	.html_emailPage:has([data-mv="application"]) .sec1 .contentList>li{
		width: auto;
		margin: 0;
		padding: 30px 32px 32px;
		background-color: #eef4fb;
		border-radius: 8px;
	}
	.html_emailPage:has([data-mv="application"]) .sec1 .contentList>li .tit{
		display: flex;
		align-items: center;
		gap: 14px;
	}
	.html_emailPage:has([data-mv="application"]) .sec1 .contentList>li .tit img{
		width: 44px;
		margin: 0;
	}
	.html_emailPage:has([data-mv="application"]) .sec1 .contentList>li .tit h3{
		margin: 0;
		font-size: 1.9rem;
		text-align: left;
	}
	.html_emailPage:has([data-mv="application"]) .sec1 .contentList>li .txt{
		margin-top: 12px;
	}
}

/* --- 3ページ相互ナビ（HTMLメールとは トリオ） --- */
.trioNav{
	max-width: 980px;
	margin: 72px auto 0;
	padding-top: 40px;
	border-top: 1px solid #dcdcdc;
}
.trioNav .trioNavTit{
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: #555555;
	letter-spacing: 1px;
	margin-bottom: 16px;
}
.trioNav ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}
.trioNav ul li{
	list-style: none;
}
.trioNav ul li a{
	display: block;
	padding: 14px 28px;
	border: 2px solid #004da0;
	border-radius: 4px;
	background-color: #ffffff;
	color: #004da0;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.2;
	transition: background-color .2s ease, color .2s ease;
}
.trioNav ul li a:hover{
	background-color: #004da0;
	color: #ffffff;
}
/* 現在ページ：塗りで示しリンク挙動を止める */
.trioNav ul li.trioActive a{
	background-color: #004da0;
	color: #ffffff;
	pointer-events: none;
}
@media only screen and (max-width:768px){
	.trioNav{ margin-top: 48px; padding-top: 28px; }
	.trioNav ul{ flex-direction: column; gap: 10px; }
	.trioNav ul li a{ text-align: center; }
}

/* ---------------------------------------------------------------------------
   ② 記事本文の縦長画像対策
   実測：136x1000 / 326x1000 / 175x700 といった縦長画像がスクロールを膨張させる
        （記事全体 15,249px）。横並び指定は元から無く、崩れではない。
   → 縦長画像に上限高を与える。比率は保持（object-fit を使わず height:auto のまま）
   --------------------------------------------------------------------------- */
.blog_detailPage .sec1 .cont figure.wp-block-image img{
	max-width: 100%;
	height: auto;
	max-height: 620px;
	width: auto;
	margin-inline: auto;
}
.blog_detailPage .sec1 .cont figure.wp-block-image{
	text-align: center;
}
@media only screen and (max-width:768px){
	.blog_detailPage .sec1 .cont figure.wp-block-image img{
		max-height: 460px;
	}
}

/* ---------------------------------------------------------------------------
   ⑨ 張影さんチェック対応（2026-07-29）
   --------------------------------------------------------------------------- */

/* (a) 実績カードのボタン：クライアント名が長い「大和ハウスフィナンシャル」で
   文言が2行に折れ「る」だけが落ちていた（実測 h45→66px）。
   最長18文字×13px＋左右padding48px＝282px はカード内寸(約304px)に収まる。 */
.voicePage .sec1 .lists .contBtn a[href^="/case-studies/"]{
	white-space: nowrap;
	font-size: 13px;
	padding: 12px 34px 11px 14px;
}

/* (b) モバイルドロワー内の問い合わせ・電話ボタン。
   旧CSS(≤1200px)が a{font-size:0} + li{50%幅+背景アイコン} のアイコン専用設計で、
   ドロワー内では「メールアイコンだけの半端なオレンジ帯」＋電話のタップ領域0pxだった。
   ドロワーが出る ≤1024px では文字を復元し、50/50の2ボタンに整える。 */
@media only screen and (max-width:1024px){
	.nav_right_list{
		display: flex !important;
		gap: 8px;
		padding: 12px 5% !important;
		background: #ffffff;
		box-sizing: border-box;
	}
	/* 電話liは 7/26「CTA1点フォーカス」で非表示（global.css:1011）のため、
	   残る問い合わせボタンは全幅で見せる（50%だと右半分が空いて見切れに見える）。 */
	.nav_right_list li,
	.nav_right_list li:nth-of-type(1),
	.nav_right_list li:nth-of-type(2){
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		border-radius: 8px !important;
		background: none;
	}
	.nav_right_list li:nth-of-type(1){
		background: #BF5700 !important;
	}
	.nav_right_list li:nth-of-type(2){
		background: #004da0 !important;
	}
	.nav_right_list li a,
	.nav_right_list li:last-of-type a{
		font-size: 1.4rem !important;
		font-weight: bold;
		color: #ffffff !important;
		width: 100% !important;
		height: 46px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 8px !important;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
   QC20260804-is-resized : 記事内の縦長画像の比率崩れ修正
   figure.wp-block-image.is-resized は WordPress が img にインラインで
   width/height を出力する。上の height:auto は詳細度で負けるため、
   max-height だけが効いて縦方向のみ圧縮されていた（object-fit:fill で歪む）。
   is-resized のときは寸法を auto に戻し、max-height による上限のみ効かせる。
   --------------------------------------------------------------------------- */
.blog_detailPage .sec1 .cont figure.wp-block-image.is-resized img{
	width: auto !important;
	height: auto !important;
}


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

   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 #AD4E00（茶系オレンジ）＋ border-left #f6ac19（黄土色）で、
   どちらもブランドガイドライン(2026/2/20版)の色ではない出所不明の配色だった。
   帯が角ばったまま画像に食い込むため安価な印象にもなっていた。
   → CV色 #BF5700 は申し込み導線専用なので使わず、
     「特別な記事」を表す独立した色として、紺を基調に金のアクセントで組む。
     ベタ塗り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橙#BF5700）のいずれでもなく、
   ベタ塗りで本文より目立っていた。同じページ上部にある記事タグは
   すでに白地＋紺文字＋輪郭線で整っており、下部だけ赤という不統一もあった。
   → 上部のタグ・ブログ一覧のタグと同じ輪郭線主体に揃える。
   ========================================================================== */
.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に決めた色階層
   （オレンジ#BF5700＝CV専用／紺＝回遊）の適用漏れ。
   ボタン全体をオレンジのベタ塗りにすると記事本文の中で強すぎるため、
   白地は保ちつつ、枠とアイコン・矢印・見出しをCV色に振る。
   ========================================================================== */
.consult-btn {
	border-color: #BF5700;
	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: #BF5700;
}
.consult-btn__title {
	color: #d35f00; /* #BF5700 は白地だとコントラスト不足のため、文字はやや濃く */
}
.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: #BF5700;
	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;
	}
}


/* ===== design_type.css ===== */
@charset "utf-8";
/* ==========================================================================
   design_type.css — サイト全体のタイポグラフィ統一
   2026-07-27 / 五月女承認（記事本文 14px → 16px）

   design_c.css → design_c2.css → 本ファイル の順で読み込む（後勝ち）。

   ---------------------------------------------------------------------
   実測にもとづく現状（PC1440px・17ページ / 2026-07-27）
     本文 p   : 8種類（14 / 15 / 16 / 20 / 28px、行間 27〜33px）
     リンク a : 9種類（15〜22px）
     H3 6種類 / LI 6種類 / H2 5種類 / H1 4種類
   「30文字以上の段落＝実際に読む本文」に絞った再実測では
     記事詳細 = 14px / 1.79   （最多。55段落中55件が14px）
     service  = 15px / 1.95
     company  = 16px / 1.69
     faq      = 16px / 1.70（リード文）
   と、ページごとに本文サイズが割れていた。

   ---------------------------------------------------------------------
   採用するスケール（比率1.25 Major Third、既存の最多数値を軸に据える）
     役割        PC     TB     SP     行間
     H1          52     40     30     1.15
     H2          30     26     22     1.5
     H3          20     19     18     1.5
     本文        16     16     14     1.7
     補足・注記  14     14     13     1.8
   ゼロから作らず現状の多数派に寄せることで、変化量と崩れリスクを抑える。

   【触らないもの】
   ・料金カードの価格（.feeItem_price 28px）… 意図的な大サイズ
   ・ヘッダー / フッター / 固定CTAバー / STAGINGバナー … 全ページ共通部品で
     既に統一されており、触ると影響範囲が跳ね上がる
   ・記事内の見出し（h2/h3）… 記事ごとの構造に依存するため今回は本文のみ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 本文（p / li / dd / td）を 16px / 1.7 に統一
   ------------------------------------------------------------------------
   .sec1 配下（＝ページ本文領域）に限定する。
   ヘッダー・フッター・パンくず・固定バーは対象外。
   -------------------------------------------------------------------------- */

/* 記事詳細の本文 ---------------------------------------------------------- */
/* 実測: 14px / 1.79 が主流（what-is-htmlmail は 55段落すべて14px）。
   16px へ上げ、行間は 1.7 に揃える。1.79→1.7 で行間比はわずかに詰まるが、
   実寸は 25.0px → 27.2px と広がるため可読性は上がる。

   注意: 記事本文の実体は `.blog_detailPage .sec1 .cont .partUl p`（既存CSS）で、
   `.cont p` より詳細度が高い。`.cont p` だけを書いても後勝ちで14pxに戻される
   （実測で確認済み）。同じ詳細度以上のセレクタで明示的に上書きする。 */
.blog_detailPage .sec1 .cont p,
.blog_detailPage .sec1 .cont li,
.blog_detailPage .sec1 .cont dd,
.blog_detailPage .sec1 .cont td,
.blog_detailPage .sec1 .cont .partUl p,
.blog_detailPage .sec1 .cont .partUl li,
.blog_detailPage .sec1 .cont .part2 p,
.blog_detailPage .sec1 .cont .part3 p,
.blog_detailPage .sec1 .cont p.wp-block-paragraph,
.blog_detailPage .sec1 .cont ul li,
.blog_detailPage .sec1 .cont ol li {
	font-size: 1.6rem;
	line-height: 1.7;
}
/* 記事冒頭の導入段落（.part1 p）は既に16pxだが line-height:1.1 と極端に狭く、
   1行の塊のように見えていた。本文と同じ行間に揃える。 */
.blog_detailPage .sec1 .cont .part1 p {
	font-size: 1.6rem;
	line-height: 1.7;
}
/* 記事内の注記・キャプション類は本文より一段小さく保つ（階層を潰さない） */
.blog_detailPage .sec1 .cont .commentary,
.blog_detailPage .sec1 .cont .commentary div,
.blog_detailPage .sec1 .cont figcaption,
.blog_detailPage .sec1 .cont small {
	font-size: 1.4rem;
	line-height: 1.8;
}

/* サービス紹介・料金カードの説明文 ---------------------------------------- */
/* 実測: service のカード説明が 15px / 1.95。本文16px / 1.7 に寄せる。 */
.service_detailPage .sec1 .svcCard_txt,
.fees_detailPage .sec1 .feeItem_note {
	font-size: 1.6rem;
	line-height: 1.7;
}
/* 料金の備考は補足情報なので注記サイズを維持する */
.fees_detailPage .sec1 .feeItem_note {
	font-size: 1.4rem;
	line-height: 1.8;
}
.fees_detailPage .sec1 .feeNotice {
	font-size: 1.4rem;
	line-height: 1.8;
}

/* 強み・制作の流れの本文 -------------------------------------------------- */
.strength_detailPage .sec1 ul li,
.flowPage .sec1 ul li {
	font-size: 1.6rem;
	line-height: 1.7;
}
/* 見出し行（li:first-of-type）は h3 相当なのでサイズを維持する */
.strength_detailPage .sec1 ul li:first-of-type,
.flowPage .sec1 ul li:first-of-type {
	font-size: 2rem;
	line-height: 1.5;
}
/* 注記ブロックは補足サイズ */
.strength_detailPage .sec1 ul li div,
.flowPage .sec1 ul li .commentary,
.flowPage .sec1 ul li .commentary div {
	font-size: 1.4rem;
	line-height: 1.8;
}

/* FAQ の質問・回答 --------------------------------------------------------
   実測: 質問(.dq div)=20px、回答(.da div)=16px で階層は既に正しい。
   （横断集計で14pxと出たのは li 要素そのものを拾ったもので、実テキストではない）
   サイズは維持し、行間だけ本文基準に揃える。 */
.faqPage .sec1 .faqContent .faqTab .faqList li .dq div {
	line-height: 1.5;
}
.faqPage .sec1 .faqContent .faqTab .faqList li .da div {
	font-size: 1.6rem;
	line-height: 1.7;
}

/* 会社案内・HTMLメールとは3ページ・お客様の声の本文 ------------------------ */
.companyPage .sec1 p,
.companyPage .sec1 li,
.companyPage .sec1 td,
.voicePage .sec1 p,
.voice_detailPage .sec1 p,
.voice_detailPage .sec1 li {
	font-size: 1.6rem;
	line-height: 1.7;
}

/* 対応ブラウザ・環境 ------------------------------------------------------ */
/* 検証環境リストは件数が多く、16pxにすると縦に伸びすぎるため
   リスト項目のみ補足サイズ（14px）に据え置き、説明文だけ本文サイズにする。 */
.environmentPage .sec1 .envLead,
.environmentPage .sec1 .commonTxt01 {
	font-size: 1.6rem;
	line-height: 1.7;
}

/* お問い合わせページ ------------------------------------------------------ */
/* 実測: リード文が 16px / 32px（行間2.0）で他ページ（1.7）より広かった。
   サイズは合っているので行間だけ揃える。 */
.contactPage .sec1 p {
	line-height: 1.7;
}
/* フォーム下の注記は補足サイズを維持 */
.contactPage .sec1 .contactNote,
.contactPage .sec1 small {
	font-size: 1.4rem;
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
   1-b. ページ末CTAブロック（design_c.css / design_c2.css で定義）
   ------------------------------------------------------------------------
   実測: 説明文が 15px / 28.5px（1.90）で、全ページに出るブロックなのに
   本文（16px / 1.7）と食い違っていた。本文基準に揃える。
   -------------------------------------------------------------------------- */
.pageEndCta .pageEndCta_txt {
	font-size: 1.6rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   2. 見出し
   ------------------------------------------------------------------------
   H1 は 14ページで52px＝既に多数派なので触らない。
   H2（.commonH2）は8ページで30px＝多数派。ここに揃える。
   -------------------------------------------------------------------------- */
.sec1 .commonH2 {
	font-size: 3rem;
	line-height: 1.5;
}
/* サービス紹介の工程グループ見出しは、ページ内で commonH2 と同格に扱う */
.service_detailPage .sec1 .svcGroup_ttl {
	font-size: 2.2rem;
	line-height: 1.4;
}
/* 小見出し（h3相当）を20pxに揃える */
.service_detailPage .sec1 .svcCard_ttl,
.fees_detailPage .sec1 .feeItem_ttl {
	font-size: 1.8rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. リード文（design_c2.css で 16px/1.7 に統一済み。ここでは再宣言のみ）
   -------------------------------------------------------------------------- */
.pageLead,
.sec1 .commonTxt01 {
	font-size: 1.6rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   4. タブレット（〜1024px）
   本文はPCと同じ16pxを維持。見出しのみ1段階落とす。
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	.sec1 .commonH2 {
		font-size: 2.6rem;
	}
	.service_detailPage .sec1 .svcGroup_ttl {
		font-size: 2rem;
	}
	.strength_detailPage .sec1 ul li:first-of-type,
	.flowPage .sec1 ul li:first-of-type {
		font-size: 1.9rem;
	}
}

/* --------------------------------------------------------------------------
   5. スマートフォン（〜768px）
   本文は14pxへ。画面幅に対して16pxは1行の文字数が少なくなりすぎる。
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	.blog_detailPage .sec1 .cont p,
	.blog_detailPage .sec1 .cont li,
	.blog_detailPage .sec1 .cont dd,
	.blog_detailPage .sec1 .cont td,
	.blog_detailPage .sec1 .cont .part1 p,
	.blog_detailPage .sec1 .cont .partUl p,
	.blog_detailPage .sec1 .cont .partUl li,
	.blog_detailPage .sec1 .cont .part2 p,
	.blog_detailPage .sec1 .cont .part3 p,
	.blog_detailPage .sec1 .cont p.wp-block-paragraph,
	.blog_detailPage .sec1 .cont ul li,
	.blog_detailPage .sec1 .cont ol li,
	.service_detailPage .sec1 .svcCard_txt,
	.strength_detailPage .sec1 ul li,
	.flowPage .sec1 ul li,
	.faqPage .sec1 .faqList li .dq,
	.faqPage .sec1 .faqList li .da,
	.faqPage .sec1 .faqList li .dq div,
	.faqPage .sec1 .faqList li .da div,
	.companyPage .sec1 p,
	.companyPage .sec1 li,
	.companyPage .sec1 td,
	.voicePage .sec1 p,
	.voice_detailPage .sec1 p,
	.voice_detailPage .sec1 li,
	.environmentPage .sec1 .envLead,
	.environmentPage .sec1 .commonTxt01,
	.contactPage .sec1 p,
	.pageEndCta .pageEndCta_txt,
	.pageLead,
	.sec1 .commonTxt01 {
		font-size: 1.4rem;
		line-height: 1.75;
	}
	.blog_detailPage .sec1 .cont .commentary,
	.blog_detailPage .sec1 .cont .commentary div,
	.strength_detailPage .sec1 ul li div,
	.flowPage .sec1 ul li .commentary,
	.flowPage .sec1 ul li .commentary div,
	.fees_detailPage .sec1 .feeItem_note,
	.fees_detailPage .sec1 .feeNotice {
		font-size: 1.3rem;
		line-height: 1.8;
	}
	.sec1 .commonH2 {
		font-size: 2.2rem;
	}
	.service_detailPage .sec1 .svcGroup_ttl {
		font-size: 1.8rem;
	}
	.strength_detailPage .sec1 ul li:first-of-type,
	.flowPage .sec1 ul li:first-of-type {
		font-size: 1.8rem;
	}
	.service_detailPage .sec1 .svcCard_ttl,
	.fees_detailPage .sec1 .feeItem_ttl {
		font-size: 1.7rem;
	}
}


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

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

   ---------------------------------------------------------------------
   【色ルール（2026/7/26確定）】
     オレンジ #BF5700 … 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[src*="icon_img"],
.trioNav a img {
	/* 注意: セレクタは必ず icon_img 系に限定すること。
	   `.cb_listBox a img` のままだと関連記事カードのベース画像(.cb_imgBg)や
	   番号バッジ(.cb_num)まで20pxの矢印に置換され、カード全体が潰れる
	   （2026-07-29 張影さんチェック指摘＝関連記事表示異常の原因だった）。 */
	/* 元画像を隠し、同じ位置に紺アイコンを描く。
	   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;
	}
}


/* ===== design_btn.css ===== */
@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;
	}
}


/* ===== design_meta.css ===== */
@charset "utf-8";
/* ------------------------------------------------------------------
   design_meta.css  2026-08-05
   記事の公開日・最終更新日・執筆者の表示（GEO：信頼性シグナル）
   既存CSSは書き換えず、このファイルの読み込みを外せば元に戻る。
   ------------------------------------------------------------------ */

.postMeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin: 18px 0 34px;
	padding: 12px 0 14px;
	border-top: 1px solid #e3e7ee;
	border-bottom: 1px solid #e3e7ee;
	font-size: 14px;
	line-height: 1.6;
	color: #5a6577;
}

.postMeta__item {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.postMeta__label {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	background: #eef2f8;
	color: #004da0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.postMeta time {
	font-variant-numeric: tabular-nums;
	color: #16283f;
}

/* 執筆者は少しだけ強く見せる（E-E-A-T の主体） */
.postMeta__item--author {
	color: #16283f;
	font-weight: 700;
}

.postMeta__role {
	margin-left: 6px;
	color: #5a6577;
	font-weight: 400;
	font-size: 13px;
}

/* 記事詳細ページ：既存の2カラム（本文＋右に float する .contImg）に合わせる。
   layout_fix_20260726.css は h1 / .part1 / ul に padding-right:480px を掛けて
   画像と重ならないようにしているため、後から差し込む .postMeta も同じ扱いにする。 */
@media screen and (min-width: 769px) {
	.blog_detailPage .sec1 .cont > .postMeta {
		padding-right: 480px;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 768px) {
	.postMeta {
		gap: 6px 14px;
		margin: 14px 0 26px;
		font-size: 13px;
	}
	.postMeta__label {
		font-size: 11px;
		padding: 2px 6px;
	}
	.postMeta__role {
		font-size: 12px;
	}
	/* スマホでは執筆者を改行して2行に収める */
	.postMeta__item--author {
		width: 100%;
	}
}