@charset "utf-8";

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

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

	最終更新日：2025年7月10日

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

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

	01. コンテンツ定義

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

.lp-campaign #main .emphasis-color{
	color:#c20d23;}

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

/* === camph0001_1: キービジュアル === */
.lp-campaign #main .parts-keyvisual-h1{ position:relative;}
	.lp-campaign #main .parts-keyvisual-h1 .button{
		position:absolute; top:455px; left:0; right:0; width:562px; margin:0 auto;}
		.lp-campaign #main .parts-keyvisual-h1 .button a{
			display:block; min-width:400px; padding:18px 80px;
			border:1px solid #0d7c29; border-radius:10em;
			background: url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #1fab42 0%, #0d7c29 100%);
			color:#fff; font-weight:bold; font-size:2.8rem; line-height:1.15em; text-align:center;
			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 .parts-keyvisual-h1 .button a:hover{
				background: url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #49c268 0%, #1ea240 100%);
				text-decoration:none;}



/* === camph0002_1: h1見出し ＋ お問い合わせ（ボタン2つ）
       camph0003_1: h1見出し ＋ お問い合わせ（ボタン2つ・色違い）
       camph0004_1: h1見出し ＋ お問い合わせ（ボタン1つ）
       camph0005_1: h1見出し ＋ お問い合わせ（テキスト ＋ ボタンエリア横並び） === */
.lp-campaign #main .contacts-fundamental-h1{
	display:flex; align-items:center; margin-top:8em;}
	.lp-campaign #main .contacts-fundamental-h1 .detail{
		display:block;}
		.lp-campaign #main .contacts-fundamental-h1 .detail .catch{
			margin:0.4em;
			font-weight:bold; font-size:3rem;
			text-align:left;}
		.lp-campaign #main .contacts-fundamental-h1 .detail ul{
			display:block; margin:0 0 0 29px;}
			.lp-campaign #main .contacts-fundamental-h1 .detail ul li{
				display:list-item; list-style:disc; width:auto;
				font-size:2.4rem; text-align:left;}
	.lp-campaign #main .contacts-fundamental-h1 .detail + .conversion{
		display:block;}
		.lp-campaign #main .contacts-fundamental-h1 p.button.different-color a{
			border:1px solid #5f95d5;
			background:url(/products/lp/groupware/kintone-station/img/icon-external-blue.png) no-repeat 36px center, linear-gradient(to bottom, #e5f6ff 0%, #b6e4fc 100%);
			color:#0d56a2; text-shadow:0 0 3px rgba(255,255,255,0.75);}
			.lp-campaign #main .contacts-fundamental-h1 p.button.different-color a:hover{
				background:url(/products/lp/groupware/kintone-station/img/icon-external-blue.png) no-repeat 36px center #e5f6ff;}
		


/* === ページ内リンク === */
.lp-campaign #main .uniques-inpagelinks-fundamental,
.lp-campaign #main .uniques-inpagelinks-fundamental-fixed{
	margin:0 -500%; padding:15px 500% 30px;
	background:#231815;}
	.lp-campaign #main .uniques-inpagelinks-fundamental .links,
	.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links{
		margin:0;}
		.lp-campaign #main .uniques-inpagelinks-fundamental .links ul,
		.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul{
			display:flex; justify-content:center; gap:4px; margin:0;}
			.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li,
			.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li{
				position:relative;
				list-style:none; margin:0; padding:0;}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li a,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li a{
					display:block; padding:0;
					background:none;}
					.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li a img,
					.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li a img{
						border-radius:0;}
						.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li a:hover img,
						.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li a:hover img{
							opacity:1;}
				/* マウスオーバー*/
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li a:hover::before{
					position:absolute; top:0; left:0;
					width:134px; height:87px; content:"";}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li.link1 a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li.link1 a:hover::before{
					background:url(/products/lp/groupware/kintone-station/img/dsr-index-001-over.jpg);}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li.link2 a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li.link2 a:hover::before{
					background:url(/products/lp/groupware/kintone-station/img/dsr-index-002-over.jpg);}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li.link3 a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li.link3 a:hover::before{
					background:url(/products/lp/groupware/kintone-station/img/dsr-index-003-over.jpg);}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li.link4 a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li.link4 a:hover::before{
					background:url(/products/lp/groupware/kintone-station/img/dsr-index-004-over.jpg);}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li.link5 a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li.link5 a:hover::before{
					background:url(/products/lp/groupware/kintone-station/img/dsr-index-005-over.jpg);}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li.link6 a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li.link6 a:hover::before{
					background:url(/products/lp/groupware/kintone-station/img/dsr-index-006-over.jpg);}
				.lp-campaign #main .uniques-inpagelinks-fundamental .links ul li.link7 a:hover::before,
				.lp-campaign #main .uniques-inpagelinks-fundamental-fixed .links ul li.link7 a:hover::before{
					background:url(/products/lp/groupware/kintone-station/img/dsr-index-007-over.jpg);}
.lp-campaign #main .uniques-inpagelinks-fundamental-fixed{
	position:fixed; top:0; z-index:2;
    width:960px; margin:0 -500%; padding:15px 500%;}
.lp-campaign #main .uniques-inpagelinks-fundamental-fixed.off{
	display:none;}


/* === 大テキスト === */
.lp-campaign #main .text-large{
	font-weight:bold; font-size:2.8rem; text-align:center;}


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

/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	margin-top:2.5em;
	border-bottom:none; color:#333;
	font-size:4rem; line-height:1.5em;}
.lp-campaign #main .heading-img{
	display:flex; align-items:center; margin-left:20px;}
	.lp-campaign #main .heading-img .heading-icon{
		margin-right:34px;}


/* === campb0022_1: H3見出し === */
.lp-campaign #main h3{
	border-bottom:4px solid #ffe13d;
	color:#231815; font-size:3.3rem;}


/* === campb0055_1: 背景追加エレメント === */
.lp-campaign #main .element-background-color{
	margin:120px -500% 0; padding:50px 500%; background:#ffe13d;}
	.lp-campaign #main .element-background-color.gray{
		background:#eee;}
	.lp-campaign #main .element-background-color.heading1{
		background:url(/products/lp/groupware/kintone-station/img/bg-heading1.jpg) no-repeat center top;}
	.lp-campaign #main .element-background-color.heading2{
		background:url(/products/lp/groupware/kintone-station/img/bg-heading2.jpg) no-repeat center top;}
	.lp-campaign #main .element-background-color.heading3{
		background:url(/products/lp/groupware/kintone-station/img/bg-heading3.jpg) no-repeat center top;}
	.lp-campaign #main .element-background-color.heading4{
		background:url(/products/lp/groupware/kintone-station/img/bg-heading4.jpg) no-repeat center top;}
	.lp-campaign #main .element-background-color.heading5{
		background:url(/products/lp/groupware/kintone-station/img/bg-heading5.jpg) no-repeat center top;}
	.lp-campaign #main .element-background-color.f-contact{
		padding-bottom:216px;
		background:url(/products/lp/groupware/kintone-station/img/bg-footer.jpg) no-repeat center bottom #ffe13d;}
	.lp-campaign #main .element-background-color + p{
		margin-right:20px; margin-left:20px;}


/* === 2カラムボタン === */
.lp-campaign #main .conversion-buttons-column2{
	display:flex; justify-content:space-between; margin-top:50px;}
	.lp-campaign #main .conversion-buttons-column2 p{
		width:460px; margin:0;}
		.lp-campaign #main .conversion-buttons-column2 p a{
			display:block; padding:15px;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 29px center, linear-gradient(to bottom, #646571 0%, #47474f 100%);
			border:1px solid #535353; border-radius:15px;
			font-weight:bold; color:#fff; font-size:2rem; line-height:1.5em;
			text-align:center; text-decoration:none;}
			.lp-campaign #main .conversion-buttons-column2 p a.icons-blank{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 29px center, linear-gradient(to bottom, #646571 0%, #47474f 100%);}
			.lp-campaign #main .conversion-buttons-column2 p a:hover{
				border:1px solid #00569e;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 29px center, linear-gradient(to bottom, #006cb7 0%, #006cb7 100%);}
			.lp-campaign #main .conversion-buttons-column2 p a.icons-blank:hover{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 29px center, linear-gradient(to bottom, #006cb7 0%, #006cb7 100%);}


/* === 独自: 1カラムエレメント === */
.lp-campaign #main .uniques-parts-column-one{
	margin-top:30px;}


/* === 独自: 3カラムエレメント === */
.lp-campaign #main .uniques-parts-column-three{
	margin-top:50px;}
	.lp-campaign #main .uniques-parts-column-three ul{
		display:grid; grid-template-columns:294px 294px 294px;
		column-gap:39px; margin:0;}
		.lp-campaign #main .uniques-parts-column-three ul li{
			list-style:none; margin:0; padding:0; font-weight:normal;}
			.lp-campaign #main .uniques-parts-column-three ul li p{}
			.lp-campaign #main .uniques-parts-column-three ul li .title{
				margin:0; padding:5px 0 0;
				font-weight:bold; font-size:2.4rem; line-height:1.5em;}
			.lp-campaign #main .uniques-parts-column-three.title-check ul li .title{
				padding:5px 0 0 58px;
				background:url(/products/lp/groupware/kintone-station/img/icon-check.png) no-repeat;
				background-size:40px auto;}



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

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

------------------------------------------------------------------- */
.lp-campaign #main .footer-contact{
	display:flex; align-items:center;}
	.lp-campaign #main .footer-contact .pic{
		margin:0;}
	.lp-campaign #main .footer-contact .detail{
		margin-left:39px;}
		.lp-campaign #main .footer-contact .detail > *:first-child{
			margin-top:0;}
		.lp-campaign #main .footer-contact .detail p{
			font-weight:bold; font-size:2.4rem;}
		.lp-campaign #main .footer-contact .detail .button{
			margin-top:40px;}
			.lp-campaign #main .footer-contact .detail .button a{
				display:block;  padding:20px 80px;
				border:1px solid #0d7c29; border-radius:10em;
				background: url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #1fab42 0%, #0d7c29 100%);
				color:#fff; text-align:center; font-weight:bold; font-size:2.8rem; 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 .footer-contact .detail .button a:hover{
					background: url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #49c268 0%, #1ea240 100%);
					text-decoration: none;}