@charset "utf-8";

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

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

	最終更新日：2025年11月6日

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

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

	01. コンテンツ定義

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

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



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

/* === campb0006_1: テキスト（強調カラー） === */
.lp-campaign #main .texts-emphasis-color {
	color:#e03000;}


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


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


/* === campb0028_1: 1カラムボックス
       campb0029_1: 2カラムボックス
       campb0030_1: 2カラムボックス（番号リスト）
       campb0031_1: 3カラムボックス
       campb0032_1: 3カラムボックス（番号リスト）
       campb0033_1: 4カラムボックス === */
/* 通常リスト共通 */
.lp-campaign #main .parts-column-one>ul>li .title,
.lp-campaign #main .parts-column-two>ul>li .title,
.lp-campaign #main .parts-column-three>ul>li .title {
	font-weight:bold; color:#e03000;
	text-align:center;}


/* === campb0041_1: 3カラムフロー
       campb0042_1: 4カラムフロー
       campb0043_1: 5カラムフロー === */
.lp-campaign #main .parts-three-flow ul li:before,
.lp-campaign #main .parts-four-flow ul li:before,
.lp-campaign #main .parts-five-flow ul li:before {
	top:66px; left:-30px;
	width:21px; height:22px;
	background: url(/erpnavi/lp/keiei-shien/dx-nintei-shutoku/img/arrow-right.png) no-repeat left top;}


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


.lp-campaign #main .element-background-color.texture {
	background: url(/erpnavi/lp/keiei-shien/dx-nintei-shutoku/img/bg-pattern.jpg);}


.lp-campaign #main .element-background-color.green {
	background: #f0ffef;}


/* === cmpo0014_1: ボックスエレメント 2カラム
       cmpo0015_1: ボックスエレメント 3カラム === */
.lp-campaign #main .boxes-detail-column2,
.lp-campaign #main .boxes-detail-column3 {
	margin-top: 30px;}
.lp-campaign #main .boxes-detail-column2 ul,
.lp-campaign #main .boxes-detail-column3 ul {
	display:flex; margin:0;}
	.lp-campaign #main .boxes-detail-column2 ul li,
	.lp-campaign #main .boxes-detail-column3 ul li {
		list-style:none; padding:21px 18px;
		background:#fff; border:2px solid #ffce8f;
		border-radius:5px; color:#333; font-weight:normal;}
	.lp-campaign #main .boxes-detail-column2 ul li {
		width:460px; margin-left:40px;}
	.lp-campaign #main .boxes-detail-column3 ul li {
		width:294px; margin-left:39px;}
		.lp-campaign #main .boxes-detail-column2 ul li:nth-child(odd),
		.lp-campaign #main .boxes-detail-column3 ul li:nth-child(3n + 1) {
			margin-left:0;}
		.lp-campaign #main .boxes-detail-column2 ul li .lead,
		.lp-campaign #main .boxes-detail-column3 ul li .lead {
			margin:0; font-size:2.3rem; font-weight:bold;
			text-align:center; color:#e03000;}


/* === cmpo0023: 追随リンクボタン === */
.lp-campaign #main .parts-fixed-area {
	position:fixed; top:30%;
	left:calc(100% - 63px); z-index:3;}
	.lp-campaign #main .parts-fixed-area .button {
		display:inline-block; margin:0;
		-ms-writing-mode:tb-rl;
		writing-mode:vertical-rl;}
		.lp-campaign #main .parts-fixed-area .button a {
			position:relative; display:block;
			padding:38px 17px; border:2px solid #0d7c29;
			border-right:none; border-radius:10px 0 0 10px;
			background:linear-gradient(to bottom, #1fab42 0%, #0d7c29 100%);
			font-weight: bold; color:#fff; font-size:2rem;
			text-decoration:none; overflow:hidden;
			box-shadow: 3px 3px 5px 0 rgba(4, 0, 0, 0.15);}
			.lp-campaign #main .parts-fixed-area .button a::before {
				position:absolute; bottom:-18px; right:-18px;
				z-index:1; width:36px; height:36px;
				background:#fff; content:""; transform:rotate(45deg);
				box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);}
			.lp-campaign #main .parts-fixed-area .button a::after {
				position:absolute; bottom:4px; right:3px;
				z-index:2; width:7px; height:7px; content:"";
				background: url(/common-s/img/products/lp-campaign/icons-arrow-right-orange-small.png) left top / 7px auto no-repeat;}
			.lp-campaign #main .parts-fixed-area .button a[href^="#"]::after {
				bottom:2px; right:2px;
				width:9px; height:12px;
				background: url(/common-s/img/products/lp-campaign/icons-arrow-bottom.png) left top / 9px auto no-repeat;}
				.lp-campaign #main .parts-fixed-area .button a:hover {
					background: linear-gradient(to bottom, #49c268 0%, #1ea240 100%);}


/* === バナー === */
.lp-campaign #main .parts-banner {
	margin-top:1.4em}
	.lp-campaign #main .parts-banner p {
		margin: 0;}
		.lp-campaign #main .parts-banner p a {
			position:relative; display:block;
			padding:0; background:none;
			border:1px solid #ccc; border-radius:6px;
			box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
			overflow: hidden;}
			.lp-campaign #main .parts-banner p a::before {
				position:absolute; bottom:-27px; right:-27px;
				z-index:1; width:58px; height:58px;
				background:#fff; content:""; transform: rotate(45deg);}
			.lp-campaign #main .parts-banner p a::after {
				display:block; position:absolute; bottom:8px; right:9px;
				z-index:2; width:7px; height:14px; content:"";
				background: url(/common-s/img/icons-banner.png) no-repeat 0 0;}
				.lp-campaign #main .parts-banner p a.icons-blank::after {
					width:13px; height:15px; background-position:0 -43px;}
				.lp-campaign #main .parts-banner p img {
					display:block; border:2px solid #fff;
					border-radius:6px;}



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

	コンテンツフッター
	.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(/erpnavi/lp/keiei-shien/dx-nintei-shutoku/img/bg-contact.jpg) no-repeat center top #fffae8;}
	.lp-campaign #main .contacts-fundamental .message,
	.lp-campaign #main .boxes-ots-login-content .message,
	.lp-campaign #main .boxes-download-document .message {
		color:#e03000;}
		/* ボタン1つ、ボタン2つ（縦並び） */
		/* ボタン緑 */
		.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 #087d08;}
		.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 #087d08;}
		/* ボタン2つ */
		/* ボタン緑 */
		.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 #087d08;}
		.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 #087d08;}
		/* ボタン1つ（テキスト横並び） */
		.lp-campaign #main .contacts-fundamental .conversion-web p.button a:hover {
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #087d08;}
		.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 #087d08;}