@charset "utf-8";

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

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

	最終更新日：2026年4月7日

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

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

	01. コンテンツ定義

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

.lp-campaign #main .sp-br{
	display:none;}

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

/* === camph0006_1: キービジュアル（h1） === */
.lp-campaign #main .parts-keyvisual-h1{
	position:relative; margin:0 calc((960px - 2455px) / 2);}
	.lp-campaign #main .parts-keyvisual-h1 .button{
		position:absolute; top:340px; left:785px;
		width:485px; margin:0;}
		.lp-campaign #main .parts-keyvisual-h1 .button a{
			display:block; padding:22px 0 22px 20px;
			border:1px solid #e08c08; border-radius:10em;
			background: url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #f8ab34 0%, #fa150a 100%);
			text-align:center; font-weight:bold; color:#fff;
			font-size:2.6rem; 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); text-decoration:none;}
			.lp-campaign #main .parts-keyvisual-h1 .button a:hover{
				opacity:0.7;}



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

/* === campb0053_1: 注釈 アスタリスク === */
.lp-campaign #main .lists-notes-asterisk.area-center{
	display:flex; justify-content:center;}
.lp-campaign #main .lists-notes-asterisk.right{
	display:flex; justify-content:flex-end; margin:0;}


/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	border-bottom:4px solid #f39a0e; color:#0f3b78;
	font-size:3.6rem; line-height:1.5em; text-align:center;}
.lp-campaign #main h2.img-heading{
	border:none;}


/* === campb0022_1: H3見出し === */
.lp-campaign #main h3{
	margin-top:1.6em; color:#ff9000;
	font-size:2.6rem; line-height:1.5em; text-align:left;}


/* === campb0055_1: 背景追加エレメント === */
.lp-campaign #main .element-background-color{
	margin-top:80px; padding-top:10px; background:#fff1d6;}
.lp-campaign #main .element-background-color.mark-arrow{
	padding-top:80px; background:url(/products/lp/hosting/hp-production-agency-service/img/mark-arrow.png) no-repeat center top #fff1d6;}
.lp-campaign #main .element-background-color.blue{
	 background:url(/products/lp/hosting/hp-production-agency-service/img/bg-element.png) no-repeat center bottom #e9f4ff;}
.lp-campaign #main .element-background-color .character3{
	display:none;}


/* 5カラム */
.lp-campaign #main .uniques-column5{
	margin-top:50px;}
	.lp-campaign #main .uniques-column5 ul{
		display:flex; justify-content:space-between;
		margin:0;}
		.lp-campaign #main .uniques-column5 ul li{
			display:flex; flex-direction:column; align-items:center;
			list-style:none; margin:0; padding:0; font-weight:normal;}
			.lp-campaign #main .uniques-column5 ul li .pic{
				margin:0;}
			.lp-campaign #main .uniques-column5 ul li p:not(.pic){
				margin-top:2em; font-size:1.5rem; text-align:center;}


/* リード文 */
.lp-campaign #main .lead{
	font-size:2.2rem; text-align:center;}
	.lp-campaign #main .lead .emphasis{
		color:#ff9000;}


/* キャッチ文 */
.lp-campaign #main .catch{
	width:716px; margin:35px auto 0; padding:11px 10px 7px;
	background:#fff; border-radius:40px;
	font-weight:bold; color:#0a3972; line-height:1.2em;
	font-size:3.6rem; text-align:center; box-sizing:border-box;}
	.lp-campaign #main .catch .sub{
		display:block; font-size:2.9rem; line-height:1.5em;}
	.lp-campaign #main .catch .emphasis{
		color:#ff9000;}


/* ボックスエリア */
.lp-campaign #main .boxes-cont{
	position:relative; margin-top:35px; padding:41px 41px;
	background:#fff; border-radius:10px;}
.lp-campaign #main .boxes-cont ~ .boxes-cont{
	margin-top:60px;}
	.lp-campaign #main .boxes-cont h3{
		margin:0;}
	.lp-campaign #main .boxes-cont .number{
		position:absolute; top:-48px; left:0;
		margin:0;}
	.lp-campaign #main .boxes-cont .pic2{
		margin-top:-16px;
		opacity:0; transition:opacity 0.5s;}
	.lp-campaign #main .boxes-cont .pic2.show{
		opacity:1;}
	.lp-campaign #main .boxes-cont .character1{
		position:absolute; right:18px; bottom:45px;
		margin:0;}
	.lp-campaign #main .boxes-cont .character2{
		position:absolute; right:10px; bottom:48px;
		margin:0;}


/* 1カラム */
.lp-campaign #main .uniques-column1{
	margin-top:30px;}
.lp-campaign #main h2 + .uniques-column1{
	margin-top:60px;}


/* 3カラム */
.lp-campaign #main .uniques-column3{
	margin-top:50px;}
	.lp-campaign #main .uniques-column3 ul{
		display:flex; justify-content:space-between;
		margin:0;}
		.lp-campaign #main .uniques-column3 ul li{
			list-style:none; margin:0; padding:0; font-weight:normal;}
			.lp-campaign #main .uniques-column3 ul li a{
				display:block; padding:20px 0; background:#fff;
				border-radius:0 0 30px 30px; text-align:center;}
				.lp-campaign #main .uniques-column3 ul li a p:not(.pic){
					display:inline-block; padding-left:21px;
					background:url(/common-s/img/icons-external.png) no-repeat 0 0.2em;
					font-size:1.2rem;}


/* リンクボタン */
.lp-campaign #main .uniques-button{
	width:420px; margin:45px auto 0;}
	.lp-campaign #main .uniques-button a{
		display:block; padding:17px 0 17px 10px; border-radius:10em;
		background:url("/common-s/img/icons-arrow-right.png") no-repeat 88px center #0064b4;
		font-weight:bold; color:#fff; font-size:2.7rem; text-align:center;
		text-decoration:none;}
		.lp-campaign #main .uniques-button a:hover{
			opacity:0.7;}
		.lp-campaign #main .uniques-button a.icons-blank{
			background:url(/common-s/img/icons-blank.png) no-repeat 88px center #0064b4;}
		.lp-campaign #main .uniques-button a.icons-external{
			background:url(/common-s/img/icons-external.png) no-repeat 88px center #0064b4;}


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

	コンテンツフッター
	.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 footer .contacts-fundamental,
.lp-campaign #main footer .contacts-fundamental-fixed{
	background:url(/products/lp/hosting/hp-production-agency-service/img/bg-contact.png) no-repeat center 35px #fff1d6;
	margin:0 -500% 0; padding:15px 500% 17px;}
.lp-campaign #main footer .contacts-fundamental-fixed{
	position:fixed; bottom:0; left:0; width:100%; min-width:960px;
	background:url(/products/lp/hosting/hp-production-agency-service/img/bg-contact.png) no-repeat center 35px #fff1d6;
	margin:0; padding:20px 0 22px; text-align:center;}
.lp-campaign #main footer .contacts-fundamental-fixed.off{
	display:none;}
	.lp-campaign #main .contacts-fundamental .message,
	.lp-campaign #main .contacts-fundamental-fixed .message{
		margin:0; font-weight:bold;
		color:#333; font-size:3.6rem; line-height:1.5em;}
	.lp-campaign #main .contacts-fundamental .detail,
	.lp-campaign #main .contacts-fundamental-fixed .detail{
		margin:0 auto; font-size:2.2rem;}
		/* ボタン1つ、ボタン2つ（縦並び） */
		/* ボタン緑 */
		.lp-campaign #main .contacts-fundamental > p.button,
		.lp-campaign #main .contacts-fundamental-fixed > p.button{
			display:inline-block;
			width:480px; margin:30px auto 0;}
		.lp-campaign #main .contacts-fundamental > p.button a,
		.lp-campaign #main .contacts-fundamental-fixed > p.button a{
			display:block; padding:22px 0 22px 20px;
			border:1px solid #e08c08; border-radius:10em;
			background: url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #f8ab34 0%, #fa150a 100%);
			text-align:center; font-weight:bold; color:#fff;
			font-size:2.6rem; 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); text-decoration:none;}
			.lp-campaign #main .contacts-fundamental > p.button a:hover,
			.lp-campaign #main .contacts-fundamental-fixed > p.button a:hover{
				background: url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #f8ab34 0%, #fa150a 100%);
				opacity:0.7}