@charset "utf-8";

/* =============================================================================

	キャンペーンページ・特設ページ　共通のCSS

	最終更新日：2024年10月15日

============================================================================= */

/* **********************************************************************************

	01. コンテンツ定義

********************************************************************************** */

/* -------------------------------------------------------------------
	コンテンツヘッダー
	.lp-campaign #main ～
------------------------------------------------------------------- */

/* === camph0002_1: h1見出し ＋ お問い合わせ（ボタン2つ）
       camph0003_1: h1見出し ＋ お問い合わせ（ボタン2つ・色違い）
       camph0004_1: h1見出し ＋ お問い合わせ（ボタン1つ）
       camph0005_1: h1見出し ＋ お問い合わせ（テキスト ＋ ボタンエリア横並び） === */
/* ボタン緑 */
.lp-campaign #main .contacts-fundamental-h1 ul li{
	width:412px;}
	.lp-campaign #main .contacts-fundamental-h1 ul li a{
		padding:20px 0 20px 25px; border:1px solid #cd510e;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #f96413 0%, #da4d00 100%);
		color:#fff; font-size:2.8rem;}
	.lp-campaign #main .contacts-fundamental-h1 ul li a.icons-blank{
		background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #1fab42 0%, #0d7c29 100%);}
		.lp-campaign #main .contacts-fundamental-h1 ul li a:hover{
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #fa6717;}
		.lp-campaign #main .contacts-fundamental-h1 ul li a.icons-blank:hover{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #fa6717;}
/* ボタン灰 */
.lp-campaign #main .contacts-fundamental-h1 ul li{
	width:412px;}
	.lp-campaign #main .contacts-fundamental-h1 ul li.different-color a{
		border:1px solid #004280;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #226ad6 0%, #014381 100%);
		color:#fff; font-weight:bold; text-shadow:0 0 3px rgba(4,0,0,0.75);}
	.lp-campaign #main .contacts-fundamental-h1 ul li.different-color a.icons-blank{
		background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #f96413 0%, #da4d00 100%);}
		.lp-campaign #main .contacts-fundamental-h1 ul li.different-color a:hover{
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #3d88f7;}
		.lp-campaign #main .contacts-fundamental-h1 ul li.different-color a.icons-blank:hover{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #3d88f7;}


/* -------------------------------------------------------------------
	コンテンツボディ
	.lp-campaign #main ～
------------------------------------------------------------------- */

/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	border-bottom:3px solid #39B2ff; color:#333;}


/* === campb0022_1: H3見出し === */
.lp-campaign #main h3{
	color:#333;}


/* === campb0025_1: H4見出し === */
.lp-campaign #main h4{
	color:#333;}


/* === campb0047_1: 表のように見せるリスト === */
.lp-campaign #main .lists-box-fundamental dl dd ul:first-child{
	margin-top:0;}
	.lp-campaign #main .lists-box-fundamental dl dd ul li{
		font-weight:normal; font-size:1.6rem;}
		.lp-campaign #main .lists-box-fundamental dl dd ul li:first-child{
			margin-top:0;}



/* -------------------------------------------------------------------

	コンテンツフッター
	.lp-campaign #main ～

------------------------------------------------------------------- */
/* === campf0001_1: フッターお問い合わせエリア　ボタン1つ
       campf0002_1: フッターお問い合わせエリア　ボタン1つ（背景あり）
       campf0003_1: フッターお問い合わせエリア　ボタン2つ ＋ 電話番号
       campf0004_1: フッターお問い合わせエリア　ボタン2つ ＋ 電話番号（背景あり）
       campf0005_1: フッターお問い合わせエリア　ボタン2つ ＋ フリーダイヤル
       campf0006_1: フッターお問い合わせエリア　ボタン2つ ＋ フリーダイヤル（背景あり）
       campf0007_1: フッターお問い合わせエリア　ボタン2つ（色違い） ＋ フリーダイヤル
       campf0008_1: フッターお問い合わせエリア　ボタン2つ（色違い） ＋ フリーダイヤル（背景あり）
       campf0009_1: フッターお問い合わせエリア　ボタン1つ ＋ 電話番号横並び
       campf0010_1: フッターお問い合わせエリア　ボタン1つ ＋ 電話番号横並び（背景あり）
       campf0011_1: フッターお問い合わせエリア　ボタン1つ ＋ フリーダイヤル横並び
       campf0012_1: フッターお問い合わせエリア　ボタン1つ ＋ フリーダイヤル横並び（背景あり）
       campf0014_1: フッターお問い合わせエリア　ボタン2つ（縦並び）
       campf0015_1: 大塚IDログインエリア
       campf0016_1: 大塚IDログインエリア（背景あり） === */
.lp-campaign #main .contacts-fundamental.contacts-bg-color,
.lp-campaign #main .boxes-ots-login-content.contacts-bg-color,
.lp-campaign #main .boxes-download-document.contacts-bg-color{
	background:url(/products/lp/network/hpe-aruba-wi-fi6e/img/bg-contact.jpg) no-repeat center top #f4faff; margin:5em -500% 0; padding:50px 500%; overflow:hidden;}
	.lp-campaign #main .contacts-fundamental .message,
	.lp-campaign #main .boxes-ots-login-content .message,
	.lp-campaign #main .boxes-download-document .message{
		color:#da4d00;}
	.lp-campaign #main .boxes-ots-login-content .message,
	.lp-campaign #main .boxes-download-document .message{
		font-size:26px; font-size:2.6rem;}
	.lp-campaign #main .contacts-fundamental .detail{ width:800px; margin:0 auto;}
	.lp-campaign #main .contacts-fundamental .button + .detail{ margin-top:2em;}
	.lp-campaign #main .conversion,
	.lp-campaign #main .boxes-ots-login-content .buttons{ margin-top:2em;}
		/* ボタン2つ */
		/* ボタン緑 */
		.lp-campaign #main .contacts-fundamental .conversion ul li a,
		.lp-campaign #main .boxes-ots-login-content .buttons ul li a{
			padding:20px 0 20px 25px; border:1px solid #cd510e;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #f96413 0%, #da4d00 100%);
			color:#fff; font-size:2.8rem;}
		.lp-campaign #main .contacts-fundamental .conversion ul li a.icons-blank,
		.lp-campaign #main .boxes-ots-login-content .buttons ul li a.icons-blank{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #f96413 0%, #da4d00 100%);}
			.lp-campaign #main .contacts-fundamental .conversion ul li a:hover,
			.lp-campaign #main .boxes-ots-login-content .buttons ul li a:hover{
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #fa6717;}
			.lp-campaign #main .contacts-fundamental .conversion ul li a.icons-blank:hover,
			.lp-campaign #main .boxes-ots-login-content .buttons ul li a.icons-blank:hover{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #fa6717;}
		/* ボタン灰 */
		.lp-campaign #main .contacts-fundamental .conversion ul li.different-color a,
		.lp-campaign #main .boxes-ots-login-content .buttons ul li.different-color a{
			border:1px solid #004280;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #226ad6 0%, #014381 100%);
			color:#fff; font-weight:bold; text-shadow:0 0 3px rgba(4,0,0,0.75);}
		.lp-campaign #main .contacts-fundamental .conversion ul li.different-color a.icons-blank,
		.lp-campaign #main .boxes-ots-login-content .buttons ul li.different-color a.icons-blank{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #226ad6 0%, #014381 100%);}
			.lp-campaign #main .contacts-fundamental .conversion ul li.different-color a:hover,
			.lp-campaign #main .boxes-ots-login-content .buttons ul li.different-color a:hover{
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #3d88f7;}
			.lp-campaign #main .contacts-fundamental .conversion ul li.different-color a.icons-blank:hover,
			.lp-campaign #main .boxes-ots-login-content .buttons ul li.different-color a.icons-blank:hover{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #3d88f7;}