@charset "utf-8";

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

	HP eSIM Connectページ　共通のCSS

	最終更新日：2027年08月17日

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

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

	01. コンテンツ定義

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

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

/* === h1キービジュアル ===*/
.lp-campaign #main header .client-business-parts-keyvisual-h1{
	position:relative; display:flex; flex-direction:column;
	justify-content:center; height:140px; margin:0 -500%; padding:0 500%;
	background:url(/products/lp/enterprise/client-business/hp/hp-connect/img/bg-h1.jpg) no-repeat top center;}
	.lp-campaign #main header .client-business-parts-keyvisual-h1 h1{
		order:2; font-size:4rem; line-height:1.4em;}
	.lp-campaign #main header .client-business-parts-keyvisual-h1 h1.color-blue{
		color:#1414a1;}
		/* ロゴが入ってきた時 */
		.lp-campaign #main header .client-business-parts-keyvisual-h1 h1 img{
			display:block; width:160px; height:auto; margin:0 auto; border-radius:0;}
	.lp-campaign #main header .client-business-parts-keyvisual-h1 .logo {
		order:1;}
	.lp-campaign #main header .client-business-parts-keyvisual-h1 .pic {
		position:absolute; top:0; left:calc((1920px - 960px) / 2 * -1); margin:0;
		z-index:-1;}
/* 横並び */
.lp-campaign #main header .client-business-parts-keyvisual-h1.beside {
	flex-direction:row;
	justify-content:center;
	align-items:center;}
	.lp-campaign #main header .client-business-parts-keyvisual-h1.beside .logo {
		margin:0 15px 0 0;}
		.lp-campaign #main header .client-business-parts-keyvisual-h1.beside .logo img {
			border-radius:0;}

/* -------------------------------------------------------------------
	コンテンツボディ
	.lp-campaign #main ～
------------------------------------------------------------------- */
/* === campb0003_1: テキスト（大） === */
.lp-campaign #main p.texts-large{ font-size:2.4rem; line-height:1.5em;}

/* === campb0004_1: テキスト（太字） === */
.lp-campaign #main .texts-emphasis{ font-weight:bold;}

/* === campb0005_1: テキスト（大・太字） === */
.lp-campaign #main .texts-emphasis-large{ margin-top:2em; font-weight:bold; font-size:24px; font-size:2.4rem; line-height:1.5em;}

/* === テキスト色変更 === */
.lp-campaign #main .texts-color-01 {
	color: #034ad8;}

/* === リスト カッコ番号付き === */
.lp-campaign #main .lists-number{ margin-top:1em;}
	.lp-campaign #main .lists-number ul{ margin:1em 0 0;}
		.lp-campaign #main .lists-number ul li{
			list-style:none; margin:0 0 0 2.6em; padding:0; text-indent:-2.6em;
			font-weight:normal; font-size:1.6rem; line-height:1.7em;}

/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	margin-top:2.5em; padding:7px 5px; background:#000;
	border-bottom:none; color:#fff; font-weight:bold;
	font-size:3.6rem; line-height:1.5em; text-align:center;}

/* === campb0022_1: H3見出し === */
.lp-campaign #main h3{
	position:relative; margin-top:3em; color:#000;}

/* === campb0028_1: 1カラムボックス
       campb0029_1: 2カラムボックス
       campb0030_1: 2カラムボックス（番号リスト）
       campb0031_1: 3カラムボックス
       campb0032_1: 3カラムボックス（番号リスト）
       campb0033_1: 4カラムボックス === */
.lp-campaign #main .parts-column-one .pic a,
.lp-campaign #main .parts-column-two > ul > li .pic a,
.lp-campaign #main .parts-column-three > ul > li .pic a,
.lp-campaign #main .parts-column-four > ul > li .pic a,
.lp-campaign #main .parts-column-two > ol > li .pic a,
.lp-campaign #main .parts-column-three > ol > li .pic a,
.lp-campaign #main .parts-column-four > ol > li .pic a {
	display:block; padding: 0; background: none;}

/* === campb0055_1: 背景追加エレメント === */
.lp-campaign #main .element-background-color{
	background:#e1f5ff;}

/* === テキストの背景追加エレメント === */
.lp-campaign #main .texts-marker-01,
.lp-campaign #main .texts-marker-02 {
	display: inline-block; margin-top: 6px; padding: 0 10px; font-weight: bold;}
.lp-campaign #main .texts-marker-01 {
	background-color: #f1be85;}
.lp-campaign #main .texts-marker-02 {
	margin-bottom: 6px; background-color: #ff9696;}

/* === 製品の特長 === */
.lp-campaign #main .parts-product-features {
	margin-top: 2em; border-radius: 8px; border: 1px solid #024ad8; }
	.lp-campaign #main .parts-product-features > .title {
		margin-top: 0; padding: 12px 30px; border-radius: 8px 8px 0 0;
		background-color: #e1f5fe;
		font-size: 1.8rem; font-weight: bold;}
		.lp-campaign #main .parts-product-features > .title .plus {
			position: relative; display: inline-block;
			margin-right: 15px; padding: 5px 8px 5px 24px;
			border-radius: 5px; background-color: #024ad8;
			color: #fff; font-size: 1.6rem; font-weight: bold; line-height: 1;}
		.lp-campaign #main .parts-product-features > .title .plus::before {
			content: ""; position: absolute; left: 9px; top: 11px;
			width: 11px; height: 2px; background-color: #fff;}
		.lp-campaign #main .parts-product-features > .title .plus::after {
			content: ""; position: absolute; left: 13px; top: 7px;
			width: 2px; height: 11px; background-color: #fff;}
	.lp-campaign #main .parts-product-features > .detail {
		display: flex; column-gap: 25px; padding: 17px 36px 20px 30px;}
		.lp-campaign #main .parts-product-features > .detail .text {
			flex: 1;}
			.lp-campaign #main .parts-product-features > .detail .text > .title {
				margin-top: 0; color: #034ad8; font-size: 2.2rem;}
			.lp-campaign #main .parts-product-features > .detail .text > .title + p {
				margin-top: 0.5em;}
		.lp-campaign #main .parts-product-features > .detail .pic {
			width: 220px; margin-top: 0; text-align: center;}
			.lp-campaign #main .parts-product-features > .detail .pic img {
				vertical-align: top;}

/* === 一枚画像 === */
.lp-campaign #main .parts-pic { margin-top: 2em;}
	.lp-campaign #main .parts-pic a {
		display:block; padding: 0; background: none;}

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

	コンテンツフッター
	.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/enterprise/client-business/hp/hp-connect/img/bg-contact.jpg) top center #000;}
	.lp-campaign #main .contacts-fundamental .message,
	.lp-campaign #main .boxes-ots-login-content .message,
	.lp-campaign #main .boxes-download-document .message{
		color:#fff; font-size:4rem;}
	/* ボタン1つ、ボタン2つ（縦並び） */
	/* ボタン緑 */
	.lp-campaign #main .contacts-fundamental > p.button a,
	.lp-campaign #main .boxes-download-document > p.button a{
		border:none;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #c00000 0%, #8a0000 100%);
		color:#fff; font-weight:bold; font-size:28px; font-size:3.2rem; line-height:1.15em; text-shadow:0 0 3px rgba(4,0,0,0.75);
		box-shadow:3px 3px 5px 0 rgba(4,0,0,0.15);}
	.lp-campaign #main .contacts-fundamental > p.button a.icons-blank,
	.lp-campaign #main .boxes-download-document > p.button a.icons-blank{
		background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #c00000 0%, #8a0000 100%);}
		.lp-campaign #main .contacts-fundamental > p.button a:hover,
		.lp-campaign #main .boxes-download-document > p.button a:hover{
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #c00000;}
		.lp-campaign #main .contacts-fundamental > p.button a.icons-blank:hover,
		.lp-campaign #main .boxes-download-document > p.button a.icons-blank:hover{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #c00000;}
	/* ボタン青 */
	.lp-campaign #main .contacts-fundamental > p.button.blue a,
	.lp-campaign #main .boxes-download-document > p.button.blue a{
		background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #3751bc 0%, #132571 100%);}
	.lp-campaign #main .contacts-fundamental > p.button.blue a.icons-blank,
	.lp-campaign #main .boxes-download-document > p.button.blue a.icons-blank{
		background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #3751bc 0%, #132571 100%);}
		.lp-campaign #main .contacts-fundamental > p.button.blue a:hover,
		.lp-campaign #main .boxes-download-document > p.button.blue a:hover{
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #3751bc;}
		.lp-campaign #main .contacts-fundamental > p.button.blue a.icons-blank:hover,
		.lp-campaign #main .boxes-download-document > p.button.blue a.icons-blank:hover{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #3751bc;}
	/* ボタン緑 */
	.lp-campaign #main .contacts-fundamental > p.button.green a,
	.lp-campaign #main .boxes-download-document > p.button.green a{
		background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #4b842c 0%, #214b0a 100%);}
	.lp-campaign #main .contacts-fundamental > p.button.green a.icons-blank,
	.lp-campaign #main .boxes-download-document > p.button.green a.icons-blank{
		background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #4b842c 0%, #214b0a 100%);}
		.lp-campaign #main .contacts-fundamental > p.button.green a:hover,
		.lp-campaign #main .boxes-download-document > p.button.green a:hover{
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #4b842c;}
		.lp-campaign #main .contacts-fundamental > p.button.green a.icons-blank:hover,
		.lp-campaign #main .boxes-download-document > p.button.green a.icons-blank:hover{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #4b842c;}
	/* 電話番号 */
	.lp-campaign #main .contacts-fundamental .conversion-tel .conversion-tel-number .number{
		background:url(/products/lp/enterprise/client-business/hp/hp-connect/img/icons-tel.png) 0 1px no-repeat;}
		/* ボタン1つ（テキスト横並び） */
		.lp-campaign #main .contacts-fundamental .conversion-web.w-long{
			width: 740px;}
			.lp-campaign #main .contacts-fundamental .conversion-web .text{
				color:#fff; font-size:2rem;}
			.lp-campaign #main .contacts-fundamental .conversion-web p.button{ width:auto; margin:0.5em 0 0;}
				.lp-campaign #main .contacts-fundamental .conversion-web p.button a{
					border:none;
					background:url(/products/lp/enterprise/client-business/hp/hp-connect/img/icons-arrow-right-black.png) no-repeat 36px center, linear-gradient(to bottom, #fff 0%, #eaeaea 100%);
					color:#000; font-size:3.2rem; text-shadow:none;}
				.lp-campaign #main .contacts-fundamental .conversion-web p.button a.icons-blank{
					background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to bottom, #fff 0%, #eaeaea 100%);}
					.lp-campaign #main .contacts-fundamental .conversion-web p.button a:hover{
						background:url(/products/lp/enterprise/client-business/hp/hp-connect/img/icons-arrow-right-black.png) no-repeat 36px center #fff;
						text-decoration:none;}
					.lp-campaign #main .contacts-fundamental .conversion-web p.button a.icons-blank:hover{
						background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #fff;}
			/* 別色 */
			.lp-campaign #main .contacts-fundamental .conversion-web p.button.different-color a{
				padding:20px 70px; border:1px solid #c80c0b;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to right, #f27421 0%, #dc1616 100%);
				color:#fff; font-weight:bold; font-size:28px; font-size:2.8rem; line-height:1.15em; text-shadow:0 0 4px rgba(0,0,0,0.9);}
			.lp-campaign #main .contacts-fundamental .conversion-web p.button.different-color a.icons-blank{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(to right, #f27421 0%, #dc1616 100%);}
				.lp-campaign #main .contacts-fundamental .conversion-web p.button.different-color a:hover{
					background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #f27421;}
				.lp-campaign #main .contacts-fundamental .conversion-web p.button.different-color a.icons-blank:hover{
					background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #f27421;}

		.lp-campaign #main .contacts-fundamental .conversion-web + .conversion-tel{ display:inline-block; margin:0 0 0 50px; vertical-align:top; text-align:center;}
			.lp-campaign #main .contacts-fundamental .conversion-web + .conversion-tel .text{
				color:#fff; font-size:2rem;}
			.lp-campaign #main .contacts-fundamental .conversion-web + .conversion-tel .conversion-tel-post{
				color:#fff; font-size:1.5rem;}
			.lp-campaign #main .contacts-fundamental .conversion-web + .conversion-tel .conversion-tel-number{
				color:#fff;}


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

	04. タブレット対応

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

@media screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait){
	/* === campb0048_1: 動画基本 === */
	.lp-campaign #main .parts-movie-big .parts-movie-content .parts-movie-alt .open span:hover{
		padding:11px 20px 11px 30px; border:none;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-open.png) no-repeat 18px center #f4f4f4;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-open.png) no-repeat 18px center, -webkit-linear-gradient(top, #fff 0%, #ececec 100%);
		background:url(/common-s/img/products/lp-campaign/icons-arrow-open.png) no-repeat 18px center, linear-gradient(to bottom, #fff 0%, #ececec 100%);
		color:#333; text-decoration:none;}
	.lp-campaign #main .parts-movie-big .parts-movie-content .parts-movie-alt .close span:hover{
		padding:11px 20px 11px 30px; border:none;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-closed.png) no-repeat 18px center #f4f4f4;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-closed.png) no-repeat 18px center, -webkit-linear-gradient(top, #fff 0%, #ececec 100%);
		background:url(/common-s/img/products/lp-campaign/icons-arrow-closed.png) no-repeat 18px center, linear-gradient(to bottom, #fff 0%, #ececec 100%);
		color:#333; text-decoration:none;}
}