@charset "utf-8";

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

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

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

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

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

	01. コンテンツ定義

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

.lp-campaign #main .emphasis{
	font-weight:bold; color:#e5086f;}
.lp-campaign #main .emphasis-color{
	color:#e5086f;}

/* -------------------------------------------------------------------
	コンテンツヘッダー
	.lp-campaign #main ～
------------------------------------------------------------------- */
/* === camph0006_1: キービジュアル（h1） === */
.lp-campaign #main .parts-keyvisual-h1{ position:relative; margin:0 0 0 -480px;}
	.lp-campaign #main .parts-keyvisual-h1 img{ border-radius:0;}
	.lp-campaign #main .parts-keyvisual-h1 .button{
		position:absolute; top:550px; right:0;
		width:170px; margin:0;}
		.lp-campaign #main .parts-keyvisual-h1 .button a{
			position:relative; display:block; padding:7px 0 4px 20px;
			background:linear-gradient(to bottom, #fff 0%, #efefef 100%);
			border:1px solid #e2e2e2; border-radius:10em;
			font-size:1.8rem; color:#333; text-align:center; text-decoration:none;}
			.lp-campaign #main .parts-keyvisual-h1 .button a:hover{
				background:#fff;}
			.lp-campaign #main .parts-keyvisual-h1 .button a::before{
				position:absolute; top:0.8em; left:20px; width:13px;
				background:#333;
				aspect-ratio:1/cos(30deg);
				clip-path:polygon(50% 0,100% 100%,0 100%);
				content:""; transform:rotate(180deg);}



/* -------------------------------------------------------------------
	コンテンツボディ
	.lp-campaign #main ～
------------------------------------------------------------------- */
/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	margin-top:2.5em;
	border-bottom:3px solid #38c0f0; color:#333;}


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


/* === campb0028_1: 1カラムボックス
       campb0029_1: 2カラムボックス
       campb0030_1: 2カラムボックス（番号リスト）
       campb0031_1: 3カラムボックス
       campb0032_1: 3カラムボックス（番号リスト）
       campb0033_1: 4カラムボックス === */
/* カラムボックスボタン */
/* 1カラム */
.lp-campaign #main .parts-column-one .button{ width:560px; margin:1.2em auto; border:1px solid #d7d7d7; border-radius:10em;}
	/* 上向きアイコン */
	.lp-campaign #main .parts-column-one .button a.icons-up{
		position:relative;
		background:linear-gradient(to bottom, #fff 0%, #ececec 100%);}
		.lp-campaign #main .parts-column-one .button a.icons-up::before{
			position:absolute; top:0.98em; left:66px;
			width:18px; background:#333;
			aspect-ratio: 1 / cos(30deg);
			clip-path: polygon(50% 0, 100% 100%, 0 100%);
			content: "";}
		.lp-campaign #main .parts-column-one .button a.icons-up:hover::before{
			top:0.86em; left:63px}


/* === campb0036_1: 画像 小（右）
       campb0037_1: 画像 小（左） === */
.lp-campaign #main .parts-img-small-right .text .catch,
.lp-campaign #main .parts-img-small-left .text .catch{
	font-weight:bold; font-size:2.4rem;}
	/* ボタン */
	.lp-campaign #main .parts-img-small-right .button,
	.lp-campaign #main .parts-img-small-left .button{ width:540px; border:1px solid #c4005a;}
		.lp-campaign #main .parts-img-small-right .button a,
		.lp-campaign #main .parts-img-small-left .button a{
			display:block; padding:14px 30px 14px 50px;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #f4157b 0%, #c5005a 100%);
			font-weight:bold; color:#fff; text-align:center; box-shadow:3px 3px 3px 0 rgba(0, 0, 0, 0.2); text-decoration:none;}
			.lp-campaign #main .parts-img-small-right .button a:hover,
			.lp-campaign #main .parts-img-small-left .button a:hover{
				padding:14px 30px 14px 50px; border:none; color:#fff;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat #c5005a; background-position:36px center;}
			.lp-campaign #main .parts-img-small-right .button a,
			.lp-campaign #main .parts-img-small-left .button a{ font-size:2.8rem; line-height:1.5em;}
		/* ブランク */
		.lp-campaign #main .parts-img-small-right .button a.icons-blank,
		.lp-campaign #main .parts-img-small-left .button  a.icons-blank{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 24px center, linear-gradient(to bottom, #f4157b 0%, #c5005a 100%);
			box-shadow:3px 3px 3px 0 rgba(0, 0, 0, 0.2);}
			.lp-campaign #main .parts-img-small-right .button a.icons-blank:hover,
			.lp-campaign #main .parts-img-small-left .button  a.icons-blank:hover{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat #c5005a; background-position:36px center;}


/* === campb0046_1: データテーブル（表） === */
.lp-campaign #main .tables-fundamental {}
	.lp-campaign #main .tables-fundamental table {
		border-top:solid 1px #b2d7f0; border-left:solid 1px #b2d7f0;}
		.lp-campaign #main .tables-fundamental table th,
		.lp-campaign #main .tables-fundamental table td {
			border-right:1px solid #b2d7f0;
			border-bottom:1px solid #b2d7f0;}
		.lp-campaign #main .tables-fundamental table td {
			text-align:right; }
		.lp-campaign #main .tables-fundamental table th {
			background-color:#f5fbff; text-align:center; }
			.lp-campaign #main .tables-fundamental table thead th {
				background-color:#b2d7f0; border-right-color:#fff; border-bottom-color:#fff;
				text-align:center; vertical-align:middle; }


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


/* === campb0056_1: 強調パーツエレメント === */
.lp-campaign #main .boxes-emphasis{
	margin-top:3em; padding:27px 20px;
	border:2px solid #f5bb95; border-radius:10px;
	background:#fffbe9; text-align:center;}
	.lp-campaign #main .boxes-emphasis .parts-img-middle-right{
		margin:0;}
		.lp-campaign #main .boxes-emphasis .parts-img-middle-right .text{
			width:416px;}
			.lp-campaign #main .boxes-emphasis .parts-img-middle-right .text .title{
				font-size:3rem; text-align:left;}
			.lp-campaign #main .boxes-emphasis .parts-img-middle-right .text .title ~ p{
				text-align:left;}


/* === cmpo0014_1: ボックスエレメント 2カラム
       cmpo0015_1: ボックスエレメント 3カラム === */
.lp-campaign #main .boxes-detail-column2,
.lp-campaign #main .boxes-detail-column3 {
	margin-top:10px;}
	.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:#e2f6ff; border:2px solid #38c0f0; border-radius:5px;
			color:#333; font-weight:normal;}
		.lp-campaign #main .boxes-detail-column2.different-color > ul > li,
		.lp-campaign #main .boxes-detail-column3.different-color > ul > li {
			background:#fffdf2; border:2px solid #f5bb95;}
		.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.2rem;}
				.lp-campaign #main .boxes-detail-column2 > ul > li .catch,
				.lp-campaign #main .boxes-detail-column3 > ul > li .catch {
					margin:0; font-size:2.4rem; text-align:center;}
				.lp-campaign #main .boxes-detail-column2 > ul > li .title,
				.lp-campaign #main .boxes-detail-column3 > ul > li .title {
					display:inline-block; margin:0; padding:3px 11px 0; background:#facca9;
					font-weight:bold; font-size:2.7rem;}
				.lp-campaign #main .boxes-detail-column2 > ul > li .title + .lead,
				.lp-campaign #main .boxes-detail-column3 > ul > li .title + .lead {
					margin-top:0.2em; font-size:2rem;}
				.lp-campaign #main .boxes-detail-column2 > ul > li .pic img,
				.lp-campaign #main .boxes-detail-column3 > ul > li .pic img{
					border-radius:0;}
				.lp-campaign #main .boxes-detail-column2 > ul > li .button,
				.lp-campaign #main .boxes-detail-column3 > ul > li .button{
					margin-top:10px;}
					.lp-campaign #main .boxes-detail-column2 > ul > li .button a,
					.lp-campaign #main .boxes-detail-column3 > ul > li .button a{
						display:block; padding:8px 0 5px;
						border:1px solid #006dba; border-radius:10em;
						background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) 24px center no-repeat, linear-gradient(to bottom, #008ed8 0%, #006ebb 100%);
						background-size:10px auto, auto;
						font-weight:bold; color:#fff; text-align:center;
						text-shadow:0 0 3px rgba(4,0,0,0.75); text-decoration:none;}
						.lp-campaign #main .boxes-detail-column2 ul li .button a:hover,
						.lp-campaign #main .boxes-detail-column3 ul li .button a:hover{
							background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) 24px center no-repeat #006ebb;
							background-size:10px auto, auto;}
				.lp-campaign #main .boxes-detail-column3 > ul > li ul {
					margin:0 0 0 20px;}
					.lp-campaign #main .boxes-detail-column3 > ul > li ul li {
						list-style:disc; font-weight:normal; font-size:1.6rem;}



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

	コンテンツフッター
	.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{
	margin:5em -500% 0; padding:80px 500%; overflow:hidden;
	background:url(/products/lp/led/sterilization/img/bg-contact.jpg) no-repeat top center #fff;}
.lp-campaign #main .contacts-fundamental.contacts-bg-color.different-color,
.lp-campaign #main .boxes-ots-login-content.contacts-bg-color.different-color,
.lp-campaign #main .boxes-download-document.contacts-bg-color.different-color{
	padding:50px 500%; background:#f6fbff;}
	.lp-campaign #main .contacts-fundamental .message,
	.lp-campaign #main .boxes-ots-login-content .message,
	.lp-campaign #main .boxes-download-document .message{
		color:#007acc;}
		/* ボタン1つ、ボタン2つ（縦並び） */
		/* ボタン緑 */
		.lp-campaign #main .contacts-fundamental > p.button a,
		.lp-campaign #main .boxes-download-document > p.button a{
			min-width:460px; padding:20px 80px; border:1px solid #006dba;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #008ed8 0%, #006eba 100%);
			color:#fff; font-size:2.8rem; line-height:1.15em;}
		.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, #008ed8 0%, #006eba 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 #006dba;}
			.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 #006dba;
				text-decoration:none;}
		/* ボタン灰 */
		.lp-campaign #main .contacts-fundamental > p.button.different-color{
			margin-top:0.6em;}
			.lp-campaign #main .contacts-fundamental > p.button.different-color a{
				min-width:460px; padding:20px 80px; border:1px solid #c4005a;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #f4157b 0%, #c5005a 100%);
				color:#fff; font-weight:bold; font-size:2.8rem; line-height:1.15em; text-shadow:none;}
			.lp-campaign #main .contacts-fundamental > 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, #f4157b 0%, #c5005a 100%);}
				.lp-campaign #main .contacts-fundamental > p.button.different-color a:hover{
					background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center #c5005a;}
				.lp-campaign #main .contacts-fundamental > p.button.different-color a.icons-blank:hover{
					background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center #c5005a;}
		/* ボタン1つ（テキスト横並び） */
		.lp-campaign #main .contacts-fundamental .conversion-web{}
			.lp-campaign #main .contacts-fundamental .conversion-web p.button a{
				border:1px solid #006dba;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #008ed8 0%, #006eba 100%);
				color:#fff; font-weight:bold; font-size: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 .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, #008ed8 0%, #006eba 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 #006dba;}
				.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 #006dba;}