/* ============================================================================
   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: #ed6c00;
	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;
	}
}

/* ---------------------------------------------------------------------------
   ボタンの色階層を整理（実測：オレンジ#ed6c00 が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 / #ed6c00[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: #ed6c00 !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: #ed6c00;
	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 #ed6c00;
	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;
	}
	/* 画像は絶対配置で高さを持たないため、ヘッダー部が画像より短いと本文が画像の下に潜る。
	   ヘッダー部をラップできないHTML構造なので、本文の直前要素(ul)に最低高を持たせて
	   「h1 + 公開日 + カテゴリ」の合計が画像高(248px)を必ず上回るようにする。 */
	.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;
	}
	.blog_detailPage .sec1 .cont .contImg{
		position: absolute;
		/* .cont の padding-top は絶対配置の基準（padding box の外側）に効かないため、
		   top:0 だとタグ列に接触する。タイトル上端と画像上端を揃える位置まで下げる。 */
		top: 56px;
		right: 0;
		width: 440px;
		margin-top: 0;
		background-color: transparent !important;
		border-radius: 6px;
		overflow: hidden;
	}
	.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 #ed6c00;
	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;
	}
}