@charset "utf-8";
/* ============================================================================
   対応ブラウザ・環境ページ（/environment/）専用
   2026/07/27 新設。既存CSSには手を入れずこの1本で完結させる。
   色はブランドガイドライン 2026/02/20 版に準拠（#004da0 / #4593d0 / CTA #ed6c00）
   ============================================================================ */

/* MV（下層ページ共通デザイン A-3案）--------------------------------------------
   MVの本体は subpages.css 末尾の MV-A3 ブロックにあり、対象ページを
   クラス名で列挙する作りになっている。あのブロックは触らない取り決めなので、
   HTML側で .html_emailPage を併記して見た目を継承する。
   （.service_detailPage は `.sec1 div{overflow-x:auto}` を全divに撒くため不可。
     .html_emailPage は .contentList 配下と data-mv 属性に閉じており安全）

   透かし英字は .html_emailPage 側が "HTML EMAIL" を指定しており詳細度が同じ。
   読み込み順への依存を避けるため、こちらは要素セレクタを1つ足して確実に勝たせる。 */
.environmentPage .subpagesMv .inner::after,
div.environmentPage .subpagesMv .inner::after{
	content: "ENVIRONMENT";
}
/* 「ENVIRONMENT」は既存の英字より長く、狭い幅でMV外へはみ出すため縮める */
@media only screen and (max-width:1100px){
	.environmentPage .subpagesMv .inner::after{
		font-size: 7rem;
	}
}
@media only screen and (max-width:768px){
	.environmentPage .subpagesMv .inner::after{
		font-size: 4rem;
	}
}
@media only screen and (max-width:480px){
	.environmentPage .subpagesMv .inner::after{
		font-size: 2.6rem;
	}
}

.environmentPage .sec1 .commonTxt01{
	margin-top: 0;
}

/* 見出し＋更新日 -------------------------------------------------------------
   更新日は見出しの右に置く。commonH2 は text-align:center なので、
   行全体を中央寄せの inline-flex にして「見出し＋バッジ」の塊ごと中央に置く。 */
.environmentPage .sec1 .envH2Row{
	margin-top: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.environmentPage .sec1 .envH2Row .commonH2{
	margin-top: 0;
}
.environmentPage .sec1 .envUpdate{
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	color: #10406f;
	background-color: #eaf2fb;
	border: 1px solid #cfe0f2;
	border-radius: 999px;
	padding: 8px 16px;
	letter-spacing: .04em;
	white-space: nowrap;
	/* 見出しの視覚的な中心に合わせる（フォントの上下アキ分だけ下げる） */
	position: relative;
	top: 2px;
}

.environmentPage .sec1 .commonH2{
	margin-top: 44px;
}
.environmentPage .sec1 .envLead{
	margin-top: 14px;
	font-size: 1.5rem;
	line-height: 1.9;
	color: #444444;
	text-align: center;
}
.environmentPage .sec1 .part{
	margin: 54px 0 0;
}
.environmentPage .sec1 .part .commonH2{
	margin-top: 0;
}

/* HTMLメール：タブ ---------------------------------------------------------
   タブ切替は既存 sub.js（.faqBtn li → .faqTab>ul）をそのまま使うため
   クラス名は faqBtn / faqTab を踏襲する。見た目は FAQ ページと揃える。 */
.environmentPage .sec1 .envTabs{
	margin-top: 28px;
}
.environmentPage .sec1 .envTabs .faqBtnBox{
	overflow-x: auto;
}
.environmentPage .sec1 .envTabs .faqBtn{
	width: 100%;
	display: flex;
	align-items: stretch;
	border-bottom: 8px solid #004da0;
}
.environmentPage .sec1 .envTabs .faqBtn li{
	width: 49.5%;
	margin-right: 1%;
	display: flex;
	align-items: stretch;
}
.environmentPage .sec1 .envTabs .faqBtn li:last-child{
	margin-right: 0;
}
.environmentPage .sec1 .envTabs .faqBtn li a{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	line-height: 1.2;
	color: #222222;
	font-weight: bold;
	border: 3px solid #004da0;
	border-bottom: none;
	padding: 19px 5px 13px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #ffffff;
}
.environmentPage .sec1 .envTabs .faqBtn li a:hover,
.environmentPage .sec1 .envTabs .faqBtn li.faqActive a{
	color: #ffffff;
	background-color: #004da0;
}
.environmentPage .sec1 .envTabs .faqBtn li a .envTabLabel{
	display: inline-block;
	text-align: center;
	font-size: inherit;
}
.environmentPage .sec1 .envTabs .faqTab{
	padding-top: 18px;
}

/* 検証環境リスト（2カラム） */
.environmentPage .sec1 .envList{
	display: none;
	background-color: #ffffff;
	padding: 34px 40px;
}
.environmentPage .sec1 .envList.faqActive{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 40px;
}
.environmentPage .sec1 .envList li{
	list-style-type: none;
	position: relative;
	font-size: 1.5rem;
	line-height: 1.6;
	color: #222222;
	padding: 15px 0 15px 26px;
	border-bottom: 1px dashed #d5dfe9;
}
.environmentPage .sec1 .envList li::before{
	content: "";
	position: absolute;
	left: 4px;
	top: 22px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #4593d0;
}


/* どのように検証しているか（検証ツールの実画面）---------------------------------
   素材はHTMLメールLP（/lp/quality/）の workflow セクションから流用。
   元は4.3MBのGIFだったため WebM(0.6MB)＋MP4(1.1MB) に変換して差し替えている。
   自動再生させるので muted / playsinline は必須（iOSはこれが無いと再生されない）。 */
.environmentPage .sec1 .envCheck{
	margin-top: 28px;
	display: grid;
	grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
	gap: 36px;
	align-items: start;
	background-color: #ffffff;
	padding: 34px 36px;
}
.environmentPage .sec1 .envCheckMedia{
	margin: 0;
}
.environmentPage .sec1 .envCheckVideo{
	display: block;
	width: 100%;
	height: auto;
	background-color: #eef2f6;
	border: 1px solid #dbe4ee;
	border-radius: 6px;
}
.environmentPage .sec1 .envCheckCap{
	margin-top: 12px;
	font-size: 1.3rem;
	line-height: 1.7;
	color: #666666;
}
.environmentPage .sec1 .envCheckPoints li{
	list-style-type: none;
	position: relative;
	font-size: 1.45rem;
	line-height: 1.85;
	color: #333333;
	padding: 0 0 20px 26px;
	margin-bottom: 20px;
	border-bottom: 1px dashed #d5dfe9;
}
.environmentPage .sec1 .envCheckPoints li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.environmentPage .sec1 .envCheckPoints li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 12px;
	height: 7px;
	border-left: 3px solid #ed6c00;
	border-bottom: 3px solid #ed6c00;
	transform: rotate(-45deg);
}
.environmentPage .sec1 .envCheckPoints .envCheckTit{
	display: block;
	font-size: 1.6rem;
	font-weight: bold;
	color: #004da0;
	line-height: 1.5;
	margin-bottom: 2px;
}

/* 注意書き ----------------------------------------------------------------
   見出しを持たないブロックなので、直前の検証セクションから少し離して
   「補足である」ことが余白で伝わる程度の間隔にする。 */
.environmentPage .sec1 .envNoteList{
	margin-top: 40px;
	background-color: #f2f6fb;
	border: 1px solid #d8e4f2;
	border-radius: 10px;
	padding: 30px 36px;
}
.environmentPage .sec1 .envNoteList li{
	list-style-type: none;
	position: relative;
	font-size: 1.4rem;
	line-height: 1.9;
	color: #333333;
	padding-left: 1.5em;
	margin-bottom: 12px;
}
.environmentPage .sec1 .envNoteList li:last-child{
	margin-bottom: 0;
}
.environmentPage .sec1 .envNoteList li::before{
	content: "※";
	position: absolute;
	left: 0;
	top: 0;
	color: #004da0;
}

/* CTA（オレンジ＝CV専用） -------------------------------------------------- */
.environmentPage .sec1 .envCta{
	margin-top: 52px;
	text-align: center;
}
.environmentPage .sec1 .envCta .envCtaTxt{
	font-size: 1.6rem;
	line-height: 1.8;
	color: #222222;
	margin-bottom: 22px;
}
.environmentPage .sec1 .envCta .envCtaBtn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 340px;
	min-height: 62px;
	padding: 16px 40px;
	background-color: #ed6c00;
	color: #ffffff;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.3;
	border-radius: 6px;
	text-decoration: none;
}
.environmentPage .sec1 .envCta .envCtaBtn:hover{
	opacity: .8;
}

/* ---------------------------------------------------------------- ~1024px */
@media only screen and (max-width: 1024px){
	.environmentPage .sec1 .commonH2{
		margin-top: 54px;
	}
	.environmentPage .sec1 .part{
		margin: 70px 0 0;
	}
	.environmentPage .sec1 .envList{
		padding: 28px 30px;
	}
	.environmentPage .sec1 .envList.faqActive{
		column-gap: 28px;
	}
	.environmentPage .sec1 .envCheck{
		gap: 28px;
		padding: 28px 30px;
	}
}

/* ----------------------------------------------------------------- ~768px */
@media only screen and (max-width: 768px){
	.environmentPage .sec1 .commonTxt01{
		text-align: left;
		margin-top: 26px;
	}
	.environmentPage .sec1 .commonH2{
		margin-top: 46px;
	}
	.environmentPage .sec1 .envLead{
		text-align: left;
		font-size: 1.4rem;
		line-height: 1.85;
		margin-top: 14px;
	}
	.environmentPage .sec1 .part{
		margin: 56px 0 0;
	}
	.environmentPage .sec1 .envTabs{
		margin-top: 26px;
	}
	.environmentPage .sec1 .envTabs .faqBtn{
		border-bottom-width: 6px;
	}
	.environmentPage .sec1 .envTabs .faqBtn li a{
		font-size: 1.4rem;
		padding: 15px 4px 11px;
		letter-spacing: -.02em;
	}
	/* 「スマートフォン・タブレット」が中途半端に折り返すため、
	   中点で改行させて2行に整える（SPのみ） */
	.environmentPage .sec1 .envTabs .faqBtn li a .envTabLabel{
		word-break: keep-all;
	}
	/* SPは1カラム（2カラムだと1行あたりの文字が詰まりすぎる） */
	.environmentPage .sec1 .envList{
		padding: 20px 18px;
	}
	.environmentPage .sec1 .envList.faqActive{
		grid-template-columns: 1fr;
	}
	.environmentPage .sec1 .envList li{
		font-size: 1.35rem;
		padding: 13px 0 13px 22px;
	}
	.environmentPage .sec1 .envList li::before{
		top: 19px;
		width: 7px;
		height: 7px;
	}
	/* 横並びだと動画も文章も潰れるのでSPは縦積み */
	.environmentPage .sec1 .envCheck{
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 20px 18px;
		margin-top: 26px;
	}
	.environmentPage .sec1 .envCheckCap{
		font-size: 1.2rem;
		margin-top: 10px;
	}
	.environmentPage .sec1 .envCheckPoints li{
		font-size: 1.35rem;
		line-height: 1.8;
		padding: 0 0 16px 22px;
		margin-bottom: 16px;
	}
	.environmentPage .sec1 .envCheckPoints .envCheckTit{
		font-size: 1.45rem;
	}
	.environmentPage .sec1 .envNoteList{
		margin-top: 26px;
		padding: 22px 20px;
	}
	.environmentPage .sec1 .envNoteList li{
		font-size: 1.3rem;
		line-height: 1.85;
	}
	.environmentPage .sec1 .envCta{
		margin-top: 50px;
	}
	.environmentPage .sec1 .envCta .envCtaTxt{
		font-size: 1.4rem;
		text-align: left;
	}
	.environmentPage .sec1 .envCta .envCtaBtn{
		width: 100%;
		min-width: 0;
		font-size: 1.6rem;
		padding: 16px 20px;
	}
}

/* ----------------------------------------------------------------- ~480px */
@media only screen and (max-width: 480px){
	.environmentPage .sec1 .envUpdate{
		font-size: 1.2rem;
		padding: 8px 14px;
	}
	.environmentPage .sec1 .envTabs .faqBtn li a{
		font-size: 1.25rem;
		padding: 13px 3px 10px;
	}
}