@charset "utf-8";

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

	高性能AI搭載！コンパクトでパワフルな業務用ロボット掃除機Phantas ページ　専用のCSS

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

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

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

	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 h1{
	margin:0; color:#15499e; font-weight:bold; font-size:3.6rem; line-height:1.5em;}
		.lp-campaign #main .contacts-fundamental-h1 .text{ width:800px;}
		/* ボタン2つ */
		.lp-campaign #main .contacts-fundamental-h1 ul li{ width:432px;}
			/* ボタン緑 */
			.lp-campaign #main .contacts-fundamental-h1 ul li a{
				border:1px solid #ccc;
				background:url(/products/lp/ai-iot/phantas/img/icons-arrow-right-blue.png) no-repeat 36px center, linear-gradient(to bottom, #f2f2f2 0%, #adb9ca 100%);
				color:#15499e; font-size:2.8rem; line-height:1.15em; text-shadow:none;
				box-shadow:3px 3px 5px 0 rgba(4,0,0,0.15);}
			.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, #f2f2f2 0%, #adb9ca 100%);}
				.lp-campaign #main .contacts-fundamental-h1 ul li a:hover{
					background:url(/products/lp/ai-iot/phantas/img/icons-arrow-right-blue.png) no-repeat 36px center #adb9ca;}
				.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 #adb9ca;}
			/* ボタン灰 */
			.lp-campaign #main .contacts-fundamental-h1 ul li.different-color a{
				display:block; padding:20px 0; border:1px solid #15499e; border-radius:10em;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 100%);
				color:#fff; font-weight:bold; text-shadow:none;}
			.lp-campaign #main .contacts-fundamental-h1 ul li.different-color a.icons-blank{
				background:url(/common-s/img/products/lp-campaign/icons-blank-large.png) no-repeat 36px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 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 #15499e;}
				.lp-campaign #main .contacts-fundamental-h1 ul li.different-color a.icons-blank:hover{
					background:url(/common-s/img/products/lp-campaign/icons-blank-large.png) no-repeat 36px center #15499e;}


/* === cmpo0001_1: 汎用ページ内リンク 2カラム
       cmpo0002_1: 汎用ページ内リンク 3カラム === */
.lp-campaign #main .inpagelinks-heading-content-column2,
.lp-campaign #main .inpagelinks-heading-content-column3 {
	margin-top:30px; padding:28px; background:#fbfbfb;
	border:2px solid #ccc; border-radius:5px;}
	.lp-campaign #main .inpagelinks-heading-content-column2 ul,
	.lp-campaign #main .inpagelinks-heading-content-column3 ul {
		display:flex; flex-wrap:wrap; margin:0;}
		.lp-campaign #main .inpagelinks-heading-content-column2 ul li {
			list-style:none; width:calc(50% - 10px);
			margin-left:20px; padding:0;}
			.lp-campaign #main .inpagelinks-heading-content-column2 ul li:nth-child(odd) {
				margin-left:0;}
		.lp-campaign #main .inpagelinks-heading-content-column3 ul li {
			list-style:none; width:280px;
			margin-left:20px; padding:0;}
			.lp-campaign #main .inpagelinks-heading-content-column3 ul li:nth-child(3n + 1) {
				margin-left:0;}
			.lp-campaign #main .inpagelinks-heading-content-column2 ul li:first-child,
			.lp-campaign #main .inpagelinks-heading-content-column2 ul li:nth-child(2),
			.lp-campaign #main .inpagelinks-heading-content-column3 ul li:first-child,
			.lp-campaign #main .inpagelinks-heading-content-column3 ul li:nth-child(2),
			.lp-campaign #main .inpagelinks-heading-content-column3 ul li:nth-child(3) {
				margin-top:0;}
				.lp-campaign #main .inpagelinks-heading-content-column2 ul li a,
				.lp-campaign #main .inpagelinks-heading-content-column3 ul li a {
					background:url(/common-s/img/products/lp-campaign/icons-arrow-bottom.png) no-repeat left 0.4em / 10px auto;}



/* -------------------------------------------------------------------
	コンテンツボディ
	.lp-campaign #main ～
------------------------------------------------------------------- */
.lp-campaign #main .emphasis{
	font-weight:bold;}


/* === campb0053_1: 注釈 アスタリスク === */
	.lp-campaign #main .lists-notes-asterisk.center ul{ text-align:center;}


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


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


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


/* === campb0034_1: 画像 中（右）
       campb0035_1: 画像 中（左） === */
/* ボタン */
.lp-campaign #main .parts-img-middle-right .button,
.lp-campaign #main .parts-img-middle-left .button{ border:1px solid #15499e;}
	.lp-campaign #main .parts-img-middle-right .button a,
	.lp-campaign #main .parts-img-middle-left .button a{
		background:url(/products/lp/ai-iot/phantas/img/icons-arrow-right-white.png) no-repeat 18px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 100%);
		color:#fff; text-decoration:none;}
		.lp-campaign #main .parts-img-middle-right .button a:hover,
		.lp-campaign #main .parts-img-middle-left .button a:hover{
			padding:10px 15px 10px 25px; border:none; color:#fff;
			background:url(/products/lp/ai-iot/phantas/img/icons-arrow-right-white.png) no-repeat #15499e; background-position:18px center;}
	/* ブランク */
	.lp-campaign #main .parts-img-middle-right .button a.icons-blank,
	.lp-campaign #main .parts-img-middle-left .button  a.icons-blank{
		background:url(/products/lp/ai-iot/phantas/img/icons-blank-white.png) no-repeat 24px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 100%);
		box-shadow:3px 3px 3px 0 rgba(0, 0, 0, 0.2);}
		.lp-campaign #main .parts-img-middle-right .button a.icons-blank:hover,
		.lp-campaign #main .parts-img-middle-left .button  a.icons-blank:hover{
			background:url(/products/lp/ai-iot/phantas/img/icons-blank-white.png) no-repeat #15499e; background-position:24px center;}


/* === campb0041_1: 3カラムフロー
       campb0042_1: 4カラムフロー
       campb0043_1: 5カラムフロー === */
.lp-campaign #main .parts-three-flow .emphasis,
.lp-campaign #main .parts-four-flow .emphasis,
.lp-campaign #main .parts-five-flow .emphasis{
	font-weight:bold;}


/* === campb0046_1: データテーブル（表） === */
.lp-campaign #main .tables-fundamental table th {
	background-color:#f5f5f5; font-weight:bold; text-align:center; vertical-align:middle; }
.lp-campaign #main .tables-fundamental table td {
	text-align:center; vertical-align:middle; }
			.lp-campaign #main .tables-fundamental table thead th { background-color:#deebff; }



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

	コンテンツフッター
	.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:#edf6fc;}
	.lp-campaign #main .contacts-fundamental .message,
	.lp-campaign #main .boxes-ots-login-content .message,
	.lp-campaign #main .boxes-download-document .message{
		color:#15499e;}
		/* ボタン1つ、ボタン2つ（縦並び） */
		/* ボタン緑 */
		.lp-campaign #main .contacts-fundamental > p.button.different-color a,
		.lp-campaign #main .boxes-download-document > p.button.different-color a{
			border:1px solid #15499e;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 100%);
			color:#fff; text-shadow:none;}
		.lp-campaign #main .contacts-fundamental > p.button.different-color a.icons-blank,
		.lp-campaign #main .boxes-download-document > 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 bottom, #0073bc 0%, #154a9e 100%);}
			.lp-campaign #main .contacts-fundamental > p.button.different-color a:hover,
			.lp-campaign #main .boxes-download-document > p.button.different-color a:hover{
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #15499e;
				text-decoration:none;}
			.lp-campaign #main .contacts-fundamental > p.button.different-color a.icons-blank:hover,
			.lp-campaign #main .boxes-download-document > p.button.different-color a.icons-blank:hover{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #15499e;}
		/* ボタン2つ */
		.lp-campaign #main .contacts-fundamental .conversion ul li,
		.lp-campaign #main .boxes-ots-login-content .buttons ul li{
			width:432px;}
		.lp-campaign #main .contacts-fundamental .conversion ul li a,
		.lp-campaign #main .boxes-ots-login-content .buttons ul li a{
			border:1px solid #ccc; padding-left:10px;
			background:url(/products/lp/ai-iot/phantas/img/icons-arrow-right-blue.png) no-repeat 36px center, linear-gradient(to bottom, #f2f2f2 0%, #adb9ca 100%);
			color:#15499e; text-shadow:none;}
		.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, #f2f2f2 0%, #adb9ca 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(/products/lp/ai-iot/phantas/img/icons-arrow-right-blue.png) no-repeat 36px center #adb9ca;}
			.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 #adb9ca;}
		/* 別色 */
		.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 #15499e;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 100%);
			color:#fff; text-shadow:none; font-weight:bold;}
		.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, #0073bc 0%, #154a9e 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 #15499e;}
			.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 #15499e;}
		
		/* ボタン1つ（テキスト横並び） */
		.lp-campaign #main .contacts-fundamental .conversion-web{
			width:480px;}
			.lp-campaign #main .contacts-fundamental .conversion-web p.button a{
				border:1px solid #15499e;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 100%);
				color:#fff;}
			.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, #0073bc 0%, #154a9e 100%);}
				.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 #15499e;
					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 #15499e;}

/* === campf0019_1: サムネイル付き資料ダウンロードエリア === */
.lp-campaign #main .boxes-download-document-img-left.contacts-bg-color{
	background:#edf6fc;}
	/* ボタン */
	.lp-campaign #main .boxes-download-document-img-left .text p.button a{
		border:1px solid #15499e;
		background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #0073bc 0%, #154a9e 100%);}
	.lp-campaign #main .boxes-download-document-img-left .text 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, #0073bc 0%, #154a9e 100%);}
		.lp-campaign #main .boxes-download-document-img-left .text p.button a:hover{
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #154a9e;}
		.lp-campaign #main .boxes-download-document-img-left .text p.button a.icons-blank:hover{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #154a9e;}