@charset "utf-8";

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

	キャンペーンページ・目からウロコ!? 安価に実現！ 働き方改革で一石二鳥ページ専用のCSS

	最終更新日：2018年11月20日

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

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

	02. グローバルエレメント定義

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

.lp-campaign #header{
	border-bottom:4px solid #654f00;}

/* -------------------------------------------------------------------
	テキスト要素
------------------------------------------------------------------- */

.lp-campaign #main p { margin:1em 0 0; font-size:16px; font-size:1.6rem; line-height:1.7em;}
	.lp-campaign #main h2 + p { margin-top:2em;}
	.lp-campaign #main p ~ p { margin-top:0.5em;}
	.lp-campaign #main p.title + p,
	.lp-campaign #main p.message + p { margin-top:1em;}
.lp-campaign #main dl dt,
.lp-campaign #main dl dd { margin:1em 0 0; font-size:16px; font-size:1.6rem; line-height:1.7em;}


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

	03. コンテンツ定義

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

/* -------------------------------------------------------------------
	コンテンツヘッダー
	.lp-campaign #main header ～
------------------------------------------------------------------- */
/* === h1キービジュアル === */
.lp-campaign #main header .parts-h1{ position:relative;}
	.lp-campaign #main header .parts-h1:before{
		display:block; position:absolute; top:0; right:-25px;
		width:315px; height:105px;
		background:url(/products/campaign/led/hatarakikata/img/header-product.png) no-repeat;
		content:""; z-index:0;}
	.lp-campaign #main header .parts-h1:after{
		display:block; position:absolute; bottom:0; right:-5px;
		width:410px; height:447px;
		background:url(/products/campaign/led/hatarakikata/img/header-person.png) no-repeat;
		content:""; z-index:-1;}
	.lp-campaign #main header .parts-h1 h1{
		position:relative; min-height:298px;}
		.lp-campaign #main header .parts-h1 h1:after{
			display:block; position:absolute; top:0; left:-100vw;
			width:calc(200vw + 960px); height:298px;
			background:url(/products/campaign/led/hatarakikata/img/header-h1-bg.png) no-repeat center top;
			content:""; z-index:-2;}
	.lp-campaign #main header .parts-h1 p{ position:static; left:auto; right:auto; margin:0 auto;}
	.lp-campaign #main header .parts-h1 p.lead{
		position:relative; padding:35px 310px 35px 0;}
		.lp-campaign #main header .parts-h1 p.lead:after{
			display:block; position:absolute; top:0; left:-100vw;
			width:calc(200vw + 960px); height:100%;
			background:#f3edd8;
			content:""; z-index:-2;}
	.lp-campaign #main header .parts-h1 img{ display:block; margin:0 auto;}

/* === お問い合わせ === */
.lp-campaign #main header .parts-contact{
	position:relative; margin-top:0; padding:25px 0 14px;}
	.lp-campaign #main header .parts-contact:after{
		display:block; position:absolute;
		top:0; left:-100vw;
		width:calc(200vw + 960px); height:100%;
		background: url(/products/campaign/led/hatarakikata/img/header-contact-bg.png) no-repeat center top #fdfbf6;
		content:""; z-index: -1;}
	.lp-campaign #main header .parts-contact .conversion{ margin-top:0; padding:0;}
		.lp-campaign #main header .parts-contact .conversion .conversion-tel{ display:inline-block; margin-top:0; padding:0; vertical-align:top;}
			.lp-campaign #main header .parts-contact .conversion .conversion-tel-post{
				margin-top:0; font-size:14px; font-size:1.4rem; line-height:1.5em;}
			.lp-campaign #main header .parts-contact .conversion .conversion-tel-number{ margin-top:0;}
				.lp-campaign #main header .parts-contact .conversion .conversion-tel-number .number{
					margin:0; padding-left:51px;
					background:url(/products/campaign/led/hatarakikata/img/icon-tel.png) no-repeat left 0.3em;
					color:#333; font-weight:bold; letter-spacing:-2px;
					font-size:32px; font-size:3.2rem; line-height:1.4em;}
					.lp-campaign #main header .parts-contact .conversion .conversion-tel-number .business-hours{
						font-size:13px; font-size:1.3rem; line-height:1.5em;}
		.lp-campaign #main header .parts-contact .conversion ul{ display:inline-block; margin:0 0 0 4px; vertical-align:top;}
			.lp-campaign #main header .parts-contact .conversion ul li{
				display:inline-block; width:266px; margin:0 0 0 10px; padding:0;
				text-align:center; vertical-align:top;}
				.lp-campaign #main header .parts-contact .conversion ul li:first-child{
					margin-left:0;}
				.lp-campaign #main header .parts-contact .conversion ul li a{
					display:block; position:relative; padding:10px 10px 10px 60px;
					background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center #ea3b48;
					background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, -webkit-linear-gradient(top, #ea3b48 0%, #b80e19 100%);
					background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, linear-gradient(to bottom, #ea3b48 0%, #b80e19 100%);
					background-size:23px auto, auto;
					border:3px solid #a50c16; border-radius:10em;
					color:#fff; text-shadow:0 0 5px rgba(0, 0, 0, 0.5);}
					.lp-campaign #main header .parts-contact .conversion ul li a:hover{
						background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center #b80e19;
						background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, -webkit-linear-gradient(top, #b80e19 0%, #ea3b48 100%);
						background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, linear-gradient(to bottom, #b80e19 0%, #ea3b48 100%);
						background-size:23px auto, auto; text-decoration:none;}
					.lp-campaign #main header .parts-contact .conversion ul li a:after{
						display:block; position:absolute; top:0; bottom:0; left:54px;	
						width:3px; height:100%;
						background:#a50c16; content:"";}


/* -------------------------------------------------------------------
	コンテンツボディ
	.lp-campaign #main ～
------------------------------------------------------------------- */
/* === campb0002_1: テキスト（中央寄せ） === */
.lp-campaign #main p.texts-center{ text-align:center;}

/* === campb0003_1: テキスト（大） === */
.lp-campaign #main p.texts-large{ font-size:22px; font-size:2.2rem; line-height:1.5em;}

/* === campb0004_1: テキスト（太字） === */
.lp-campaign #main p.texts-emphasis{ font-weight:bold;}

/* === campb0005_1: テキスト（大・太字） === */
.lp-campaign #main p.texts-emphasis-large{ margin-top:2em; font-weight:bold; font-size:24px; font-size:2.4rem; line-height:1.5em;}

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

/* === campb0007_1: 通常リンク === */
.lp-campaign #main a.icons-arrow-r{
	display:inline-block; padding-left:19px; min-height:16px;
	background:url(/common-s/img/icons-arrow-right.png) no-repeat 0 0.35em;}

/* === campb0008_1: 別窓遷移リンク === */
.lp-campaign #main a.icons-blank{
	display:inline-block; padding-left:19px; min-height:16px;
	background:url(/common-s/img/icons-blank.png) no-repeat 0 0.35em;}

/* === campb0009_1: 文末注釈 === */
.lp-campaign #main .texts-notes{ font-size:14px; font-size:1.4rem;}

/* === campb0010_1: 注釈 === */
.lp-campaign #main .lists-notes{ margin-top:1em;}
	.lp-campaign #main .lists-notes ul{ margin:1em 0 0;}
		.lp-campaign #main .lists-notes ul li{
			list-style:none; margin:0 0 0 3.6em; padding:0; text-indent:-3.6em;
			 font-weight:normal; font-size:14px; font-size:1.4rem; line-height:1.7em;}

/* === campb0011_1: リスト === */
.lp-campaign #main ul{ margin:1em 0 0 29px;}
	.lp-campaign #main ul li{ margin:0.5em 0 0; padding-left:4px; font-weight:bold; font-size:20px; font-size:2rem; line-height:1.5em;}
		.lp-campaign #main li ul { margin:1em 0 0 14px; }

/* === campb0014_1: リスト（順序あり） === */
.lp-campaign #main ol{ margin:1em 0 0 0; }
	.lp-campaign #main ol li{
		list-style:none; margin:0.5em 0 0 48px; text-indent:-48px;
		counter-increment:num; font-weight:bold; font-size:20px; font-size:2rem; line-height:1.5em;}
		.lp-campaign #main ol li:before{
			display:inline-block; width:12px;
			content:counter(num); margin-right:12px; padding:0.15em 12px 0.05em; border-radius:10em;
			background:#f76900; color:#fff; font-weight:bold; text-indent:0;}

/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	margin-top:2em;
	border:none; color:#654f00; font-weight:bold;
	font-size:36px; font-size:3.6rem; line-height:1.5em; text-align:center;}
	.lp-campaign #main .title-emphasis{
		color:#b00c17;}
	
	.lp-campaign #main .easy h2 .title-icon{
		display:inline-block; padding-left:35px;
		background:url(/products/campaign/led/hatarakikata/img/icon-title-easy.png) no-repeat left 0.2em;}
	.lp-campaign #main .convenient h2 .title-icon{
		display:inline-block; padding-left:35px;
		background:url(/products/campaign/led/hatarakikata/img/icon-title-convenient.png) no-repeat left 0.2em;}
	.lp-campaign #main .low-price h2 .title-icon{
		display:inline-block; padding-left:45px;
		background:url(/products/campaign/led/hatarakikata/img/icon-title-low-price.png) no-repeat left 0.2em;}


/* === ポイント === */
.lp-campaign #main p.point{
	margin-top:1.5em; padding:20px 30px; background:#f3edd8; color:#654f00;
	font-weight:bold; font-size:30px; font-size:3rem; line-height:1.5em;
	text-align:center;}

/* === 簡単！照明の自動一斉消灯 === */
.lp-campaign #main .easy{}
	/* 会話 */
	.lp-campaign #main .easy .conversation{ margin:0; padding:0;}
		.lp-campaign #main .easy .conversation li{
			display:inline-block; position:relative; margin:2em 0 32px; padding:10px 15px;
			list-style:none; font-weight:normal;
			font-size:16px; font-size:1.6rem; line-height:1.5em;
			vertical-align:top; box-sizing:border-box;}
			.lp-campaign #main .easy .conversation li:before{
				display:block; position:absolute; bottom:-34px; content:"";}
			.lp-campaign #main .easy .conversation li:after{
				display:block; position:absolute; bottom:-15px; content:"";}
			.lp-campaign #main .easy .conversation li:nth-child(odd){
				width:363px; margin-left:97px;
				border:2px solid #ccc; border-radius:10px;
				background:#fff;}
				.lp-campaign #main .easy .conversation li:nth-child(odd):before{
					left:-97px; width:88px; height:140px;
					background:url(/products/campaign/led/hatarakikata/img/pic-questioner-trouble.png) no-repeat;}
				.lp-campaign #main .easy .conversation li:nth-child(odd):after{
					left:36px; width:29px; height:15px;
					background:url(/products/campaign/led/hatarakikata/img/icon-balloon-questioner.png) no-repeat;}
			.lp-campaign #main .easy .conversation li:nth-child(even){
				width:323px; margin:4em 0 32px 40px;
				border:2px solid #d4cdb4; border-radius:10px;
				background:#fcf9ef;}
				.lp-campaign #main .easy .conversation li:nth-child(even):before{
					right:-137px; width:120px; height:140px;
					background:url(/products/campaign/led/hatarakikata/img/pic-respondent.png) no-repeat;}
				.lp-campaign #main .easy .conversation li:nth-child(even):after{
					right:36px; width:30px; height:15px;
					background:url(/products/campaign/led/hatarakikata/img/icon-balloon-respondent.png) no-repeat;}
	/* ビフォーアフター */
	.lp-campaign #main .easy .before-after{ position:relative; margin:0.5em 0 0;}
		.lp-campaign #main .easy .before-after:after{
			position:absolute; top:200px; left:460px;
			border:48px solid transparent;
			border-left:20px solid #654f00; content:"";
			box-sizing:border-box;}
		.lp-campaign #main .easy .before-after li{
			display:inline-block; list-style:none; 
			width:460px; margin:0 0 0 40px; padding:0;}
			.lp-campaign #main .easy .before-after li:first-child{
				margin-left:0;}

/* === 便利！無線スイッチ === */
.lp-campaign #main .convenient{}
	/* 会話 */
	.lp-campaign #main .convenient .conversation{ margin:0; padding:0;}
		.lp-campaign #main .convenient .conversation li{
			display:inline-block; position:relative; margin:2em 0 32px; padding:10px 15px;
			list-style:none; font-weight:normal;
			font-size:16px; font-size:1.6rem; line-height:1.5em;
			vertical-align:top; box-sizing:border-box;}
			.lp-campaign #main .convenient .conversation li:before{
				display:block; position:absolute; bottom:-34px; content:"";}
			.lp-campaign #main .convenient .conversation li:after{
				display:block; position:absolute; bottom:-15px; content:"";}
			.lp-campaign #main .convenient .conversation li:nth-child(odd){
				width:363px; margin-left:97px;
				border:2px solid #ccc; border-radius:10px;
				background:#fff;}
				.lp-campaign #main .convenient .conversation li:nth-child(odd):before{
					left:-97px; width:88px; height:140px;
					background:url(/products/campaign/led/hatarakikata/img/pic-questioner-smile.png) no-repeat;}
					.lp-campaign #main .convenient .conversation li.conviction:before{
						background:url(/products/campaign/led/hatarakikata/img/pic-questioner-conviction.png) no-repeat;}
					.lp-campaign #main .convenient .conversation li.joy:before{
						background:url(/products/campaign/led/hatarakikata/img/pic-questioner-joy.png) no-repeat;}
				.lp-campaign #main .convenient .conversation li:nth-child(odd):after{
					left:36px; width:29px; height:15px;
					background:url(/products/campaign/led/hatarakikata/img/icon-balloon-questioner.png) no-repeat;}
			.lp-campaign #main .convenient .conversation li:nth-child(even){
				width:323px; margin:4em 0 32px 40px;
				border:2px solid #d4cdb4; border-radius:10px;
				background:#fcf9ef;}
				.lp-campaign #main .convenient .conversation li:nth-child(even):before{
					right:-137px; width:120px; height:140px;
					background:url(/products/campaign/led/hatarakikata/img/pic-respondent.png) no-repeat;}
				.lp-campaign #main .convenient .conversation li:nth-child(even):after{
					right:36px; width:30px; height:15px;
					background:url(/products/campaign/led/hatarakikata/img/icon-balloon-respondent.png) no-repeat;}
			.lp-campaign #main .convenient .conversation li:first-child{
				width:460px; margin:0; border:none;}
				.lp-campaign #main .convenient .conversation li:first-child:before,
				.lp-campaign #main .convenient .conversation li:first-child:after{
					display:none;}

/* === 低価格！LEDと照明制御 === */
.lp-campaign #main .low-price{}
	.lp-campaign #main .low-price .point-otsuka-shokai{}
		.lp-campaign #main .low-price .point-otsuka-shokai > div{
			display:inline-block; width:460px; margin-left:40px; vertical-align:top;}
			.lp-campaign #main .low-price .point-otsuka-shokai > div:first-child{
				margin-left:0;}
				.lp-campaign #main .low-price .point-otsuka-shokai h3{
					color:#333; padding-bottom:6px; border-bottom:2px solid #654f00; text-align:left;
					font-size:26px; font-size:2.6rem; line-height:1.5em;}
					.lp-campaign #main .low-price .point-otsuka-shokai h3 .label{
						position:relative; margin-right:10px; padding:3px 15px 2px 50px;
						border:1px solid #d4cdb4; background:#f3edd8;
						color:#654f00; font-size:22px; font-size:2.2rem; line-height:1.5em;
						vertical-align:middle;}
						.lp-campaign #main .low-price .point-otsuka-shokai h3 .label:after{
							display:block; position:absolute; top:-10px; left:7px;
							width:40px; height:44px; 
							background:url(/products/campaign/led/hatarakikata/img/icon-bird.png) no-repeat;
							content:"";}
				.lp-campaign #main .low-price .point-otsuka-shokai .lead{
					margin-top:0.8em;}
				.lp-campaign #main .low-price .point-otsuka-shokai .point-box{
					margin-top:1em; border:2px solid #ccc;}
					.lp-campaign #main .low-price .point-otsuka-shokai .point-box .pic{
						margin:0;}
						.lp-campaign #main .low-price .point-otsuka-shokai .point-box .pic img{
							display:block;}
					.lp-campaign #main .low-price .point-otsuka-shokai .point-box .message{
						margin:0; padding:10px 0 8px;
						border-top:2px solid #ccc; background:#fff4f4;
						text-align:center; color:#654f00;
						font-weight:bold; font-size:24px; font-size:2.4rem; line-height:1.5em;}
						.lp-campaign #main .low-price .point-otsuka-shokai .point-box .message .emphasis{
							color:#b83535;}

/* === 大塚商会の働き方改革 === */
.lp-campaign #main .otsuka-shokai-hatarakikata{}
	.lp-campaign #main .otsuka-shokai-hatarakikata .before-after{
		margin-top:0.5em; padding:0 28px 27px; border:2px solid #ccc;}
		.lp-campaign #main .otsuka-shokai-hatarakikata .before-after .lead{
			color:#654f00; font-weight:bold;
			font-size:28px; font-size:2.8rem; line-height:1.5em; text-align:center;}
		.lp-campaign #main .otsuka-shokai-hatarakikata .before-after ul{
			margin:1.8em 0 0 0; text-align:left;}
			.lp-campaign #main .otsuka-shokai-hatarakikata .before-after ul li{
				display:inline-block; list-style:none;
				margin:0 0 0 40px; padding:0; vertical-align:top;}
				.lp-campaign #main .otsuka-shokai-hatarakikata .before-after ul li:first-child{
					margin:0;}
				.lp-campaign #main .otsuka-shokai-hatarakikata .before-after ul li img{
					display:block;}


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

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

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

/* === お問い合わせ === */
.lp-campaign #main footer .parts-contact{
	position:relative; margin-top:10em; padding:40px 0 30px;}
	.lp-campaign #main footer .parts-contact .lead{
		margin:1em 0 0; padding:0 290px 0 0;}
	.lp-campaign #main footer .parts-contact:before{
		display:block; position:absolute;
		bottom:0; right:45px;
		width:240px; height:293px; z-index:0;
		background: url(/products/campaign/led/hatarakikata/img/contact-woman.png) no-repeat center top;
		content:"";}
	.lp-campaign #main footer .parts-contact:after{
		display:block; position:absolute;
		top:0; left:-100vw;
		width:calc(200vw + 960px); height:379px;
		background: url(/products/campaign/led/hatarakikata/img/contact-bg.png) no-repeat center top;
		content:""; z-index: -1;}
	.lp-campaign #main footer .parts-contact .message{
		margin:0; color:#654f00; font-weight:bold;
		font-size:30px; font-size:3rem; line-height:1.5em;}
		.lp-campaign #main footer .parts-contact .message br{
			display:none;}
	.lp-campaign #main footer .parts-contact .conversion{ margin-top:2.6em; padding:0 290px 0 0;}
		.lp-campaign #main footer .parts-contact .conversion .conversion-tel-number{ margin-top:0.1em;}
			.lp-campaign #main footer .parts-contact .conversion .conversion-tel-number .number{
				margin:0; padding-left:55px;
				background:url(/products/campaign/led/hatarakikata/img/icon-tel.png) no-repeat left 0.4em;
				color:#333; font-weight:bold;
				font-size:42px; font-size:4.2rem; line-height:1.5em;}
		.lp-campaign #main footer .parts-contact .conversion ul{ margin:1em 0 0 0;}
			.lp-campaign #main footer .parts-contact .conversion ul li{
				display:inline-block; max-width:315px; margin:0 0 0 17px; padding:0; vertical-align:top;}
				.lp-campaign #main footer .parts-contact .conversion ul li:first-child{
					margin-left:0;}
				.lp-campaign #main footer .parts-contact .conversion ul li a{
					display:block; position:relative; padding:14px 25px 14px 80px;
					background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center #ea3b48;
					background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, -webkit-linear-gradient(top, #ea3b48 0%, #b80e19 100%);
					background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, linear-gradient(to bottom, #ea3b48 0%, #b80e19 100%);
					background-size:23px auto, auto;
					border:3px solid #a50c16; border-radius:10em;
					color:#fff; text-shadow:0 0 5px rgba(0, 0, 0, 0.5);}
					.lp-campaign #main footer .parts-contact .conversion ul li a:hover{
						background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center #b80e19;
						background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, -webkit-linear-gradient(top, #b80e19 0%, #ea3b48 100%);
						background:url(/products/campaign/led/hatarakikata/img/icon-blank.png) no-repeat 15px center, linear-gradient(to bottom, #b80e19 0%, #ea3b48 100%);
						background-size:23px auto, auto; text-decoration:none;}
					.lp-campaign #main footer .parts-contact .conversion ul li a:after{
						display:block; position:absolute; top:0; bottom:0; left:54px;	
						width:3px; height:100%;
						background:#a50c16; content:"";}


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

	04. タブレット対応

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

@media screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait){

}