@charset "utf-8";
/* =============================================================================

	●●●●●●●●●LP　共通のCSS

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

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

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

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

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

/* 画像 */
img { border-radius:0; }

/*  section内Wrapper  */
.section-wrapper {
	margin: 0 auto;
	padding: 0 50px 35px 50px;
	max-width: 960px;
}

/*  hタグにテキストが入らないデザインの場合  */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


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

	03. コンテンツ定義

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

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

/* === camph0001_1: キービジュアル === */
.lp-campaign #main .parts-keyvisual-h1 {
	margin:0;
}
.lp-campaign #main .parts-keyvisual-h1 h1 {
	position: relative;
	margin:0;
	height: calc(933px / 2);
	background:url(/products/lp/multiple/web-service/img/mv-bg-pc.png) no-repeat;
	/* background-position: cover center center; */
	background-size: cover;
}
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-title {
	position: absolute;
	top: 27px;
	left: 0;
	width: 62.7%;
	max-width: 602px;
}
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-chow2 {
	position: absolute;
	top: 40px;
	right: 0;
	width: 43.54%;       /* = 418 ÷ 960 × 100 */
	max-width: 418px;    /* 拡大しすぎないよう制限 */
	height: auto;        /* 縦横比維持 */
	display: block;
}
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-fuki1,
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-fuki2,
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-fuki3 {
	position: absolute;
	width: 22.83%;
	max-width: 220px;
	height: auto;
	display: block;
}
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-fuki1 { bottom: 6.5%; left: 40px; }
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-fuki2 { bottom: 25%; left: 205px; }
.lp-campaign #main .parts-keyvisual-h1 h1 .mv-fuki3 { bottom: 6.5%; left: 360px; }

.lp-campaign #main .parts-keyvisual-h1 img {
	display: block;
	width: 100%;
}
	/* .lp-campaign #main .parts-keyvisual img{ display:block; margin:0 auto;} */
	/* 下記ページ用（position:absolute;を打ち消す）
	 *  https://www.otsuka-shokai.co.jp/products/campaign/adobe/privileges/index.html
	 *  https://www.otsuka-shokai.co.jp/products/campaign/ibm/domino-utility-server-express/index.html
	 *  https://www.otsuka-shokai.co.jp/products/campaign/ibm/notes-domino/index.html
	 *  https://www.otsuka-shokai.co.jp/products/campaign/led/tenant/index.html
	 *  https://www.otsuka-shokai.co.jp/products/campaign/security/cloudedge/index.html
	 */
	/* .lp-campaign #main .parts-keyvisual h1{ position:static !important;} */

/* === camph0002_1: h1見出し ＋ お問い合わせ（ボタン2つ）
       camph0003_1: h1見出し ＋ お問い合わせ（ボタン2つ・色違い）
       camph0004_1: h1見出し ＋ お問い合わせ（ボタン1つ）
       camph0005_1: h1見出し ＋ お問い合わせ（テキスト ＋ ボタンエリア横並び） === */


/* -------------------------------------------------------------------
	コンテンツボディ
	.lp-campaign #main ～
------------------------------------------------------------------- */
/* === campb0007_1: 通常リンク === */
.lp-campaign #main a.icons-arrow-r{
	display:inline-block; padding-left:19px; min-height:16px;
	background:url(/products/lp/multiple/web-service/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(/products/lp/multiple/web-service/img/icons-blank.png) no-repeat 0 0.35em;}



#main-body {
	background:url(/products/lp/multiple/web-service/img/main-bg-pc.png) center center / contain repeat-y;
}

/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	margin:0;
	padding: 0;
	border-bottom: none;
}

/* === campb0028_1: 1カラムボックス
       campb0029_1: 2カラムボックス
       campb0030_1: 2カラムボックス（番号リスト）
       campb0031_1: 3カラムボックス
       campb0032_1: 3カラムボックス（番号リスト）
       campb0033_1: 4カラムボックス === */
.lp-campaign #main .parts-column-one,
.lp-campaign #main .parts-column-two,
.lp-campaign #main .parts-column-three,
.lp-campaign #main .parts-column-four{ margin-top:0;}

	/* カラムボックスボタン */
	/* 1カラム */
	.lp-campaign #main .parts-column-one .button{ width:215px; margin:1.2em auto 0; border:3px solid #FF8C00; border-radius:10em;}
	.lp-campaign #main .parts-column-one .button a{
			display:block; padding:12px 0 8px 18px; border-radius:10em;
			background:url(/products/lp/multiple/web-service/img/icons-arrow-orange-white.png) no-repeat 18px center #fff;
			color:#333; font-size:18px; font-size:1.8rem; line-height:1; text-align:center;
			box-shadow:3px 3px 3px 0 rgba(0, 0, 0, 0.2);transition: 0.1s ease-in-out;}
	.lp-campaign #main .yellow-box.parts-column-one .button a{ font-weight: bold; }
		.lp-campaign #main .yellow-box.parts-column-one .button a:hover{ background-color: #fff2d2;text-decoration: none; }
			.lp-campaign #main .parts-column-one .button.button-ditail a{
			background:url(/products/lp/multiple/web-service/img/icons-arrow-orange-white.png) no-repeat 43px center #fff;
		}
			.lp-campaign #main .parts-column-one .button a:hover{
				padding:12px 0 8px 18px; border:none; color:#333;
				background:url(/products/lp/multiple/web-service/img/icons-arrow-orange-white.png) no-repeat #fff2d2; background-position:18px center;}
			.lp-campaign #main .parts-column-one .button.button-ditail a:hover{
				background-position:43px
			}

		/* ボタン緑 */
	.lp-campaign #main .parts-column-one .button.green-button { display:inline-block;width:auto; margin:1.2em auto; border:none; border-radius:10em;}
	.lp-campaign #main .parts-column-one .button.green-button.under-illust-green-button{ margin-top:0;}
		.lp-campaign #main .parts-column-one .button.green-button a{
			display:block; padding:10px 50px 6px 60px;border:3px solid #fff; border-radius:10em;
			background:url(/products/lp/multiple/web-service/img/icons-arrow-right-white.png) no-repeat 20px center #1fab42;
			color:#fff; font-size:23px; font-size:2.3rem; font-weight: bold;line-height:1; text-align:center; text-decoration: none;transition: 0.1s ease-in-out;box-shadow:0px 0px 1px 2px rgba(0, 0, 0, 0.1);}
			.lp-campaign #main .parts-column-one .button.green-button a:hover{
				background: url(/products/lp/multiple/web-service/img/icons-arrow-right-green.png) no-repeat 20px center #fff;border:3px solid #2aa738;color:#2aa738;
			}

			.lp-campaign #main .green-button-box {
				margin: 0 auto;
				text-align: center;
			}
			.lp-campaign #main .green-button-box.button-absolute {
				position: absolute;
				left: 20px;
				bottom: 30px;
			}

		/* リスト個別 */
		.lp-campaign #main .parts-column-two > ul{ margin-left:-55px;font-size: 0;}
			.lp-campaign #main .parts-column-two > ul > li{ width:450px; margin-left:55px;}
			.lp-campaign #main .parts-column-two > ul > li:first-child{ width:295px; margin-left:55px;}
			.lp-campaign #main .parts-column-two > ul > li + li ~ li{ margin-top:0;}

		.lp-campaign #main .parts-column-three > ul{ margin-left:-17px;font-size: 0;}
			.lp-campaign #main .parts-column-three > ul > li{ width:255px; margin-left:17px;}
			.lp-campaign #main .parts-column-three > ul > li:last-child{ margin-left:18px;}
			.lp-campaign #main .parts-column-three > ul > li + li + li ~ li{ margin-top:0;}

/* === campb0048_1: 動画基本 === */
.lp-campaign #main .parts-movie-big .parts-movie-content{ width:416px; margin:10px auto 0;}




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

	コンテンツフッター
	.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, .lp-campaign #main .boxes-ots-login-content, .lp-campaign #main .boxes-download-document{ margin-top:0}
			/* フリーダイヤル */
			.lp-campaign #main .contacts-fundamental .conversion-tel.free-dial .conversion-tel-number .number{
				padding-left:50px;
				background:url(/products/lp/multiple/web-service/img/icons-tel-free-dial.png) 0 1px no-repeat;
				letter-spacing:1px;}

		/* ボタン1つ（テキスト横並び） */
				.lp-campaign #main .contacts-fundamental .conversion-web p.button a{
					display:block; min-width:240px; padding:20px 80px; border:1px solid #0d7c29; border-radius:10em;
					background:url(/products/lp/multiple/web-service/img/icons-arrow-right-white.png) no-repeat 36px center #1fab42;
					background:url(/products/lp/multiple/web-service/img/icons-arrow-right-white.png) no-repeat 36px center, -webkit-linear-gradient(top, #1fab42 0%, #0d7c29 100%);
					background:url(/products/lp/multiple/web-service/img/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #1fab42 0%, #0d7c29 100%);
					color:#fff; font-weight:bold; font-size:28px; 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 .contacts-fundamental .conversion-web p.button a:hover{
						background:url(/products/lp/multiple/web-service/img/icons-arrow-right-white.png) no-repeat 36px center #49c268;
						background:url(/products/lp/multiple/web-service/img/icons-arrow-right-white.png) no-repeat 36px center, -webkit-linear-gradient(top, #49c268 0%, #1ea240 100%);
						background:url(/products/lp/multiple/web-service/img/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(to bottom, #49c268 0%, #1ea240 100%);
						text-decoration:none;}

									.lp-campaign #main .contacts-fundamental .conversion-web .text{
										font-weight: bold;
										color: #0e7d2a;
									}

			.lp-campaign #main .contacts-fundamental .conversion-web + .conversion-tel .text{ 
				font-weight: bold;
				color: #0e7d2a;
			}




/* 動画エリア */
.lp-campaign #main .movie-section {
	padding: 60px 0 0 0;
}
.lp-campaign #main .movie-box {
	position: relative;
	margin: 0 auto;
	padding: 0;
	/* width: 100%; */
	max-width: 416px;
}
.lp-campaign #main .movie-box video {
	width: 100%;
	height: auto;
}
.lp-campaign #main .movie-box .movie-fuki1 {
	position: absolute;
	width: 100%;
	max-width: 201px;
	height: auto;
	display: block;
	top: 33.19%;
	left: -53%;
}
.lp-campaign #main .movie-box .movie-fuki2 {
	position: absolute;
	width: 100%;
	max-width: 178px;
	height: auto;
	display: block;
	top: 80px;
	/* top: -15px; */
	/* right: -45%; */
	right: -190px;
}
.lp-campaign #main .movie-box .movie-fuki1 img,
.lp-campaign #main .movie-box .movie-fuki2 img {
	width: 100%;
}

/* section02 */
.lp-campaign #main .section02-content-box {
	width: 100%;
	margin-top: 10px;
}

.lp-campaign #main #section02 h2{
	margin:0;
	padding: 35px 0 0 0;
	border-bottom: none;
}


.lp-campaign #main .section-round-box {
	margin: 0 auto;
	padding: 30px;
	width: 100%;
	max-width: 860px;
	background-color: #fff;
	border-radius: 14px;
	box-sizing: border-box;
}
.lp-campaign #main .section-round-box h2 {
	margin: 0;
	padding: 0 0 8px 0;
	border-bottom: 3px dashed #f7af00;;
	font-size: 30px;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1;
	color: #ea5504;
	text-align: left;
}
.lp-campaign #main .section-round-box section:nth-of-type(2) h2 {
	margin: 95px 0 0 0;
	position: relative;
}
span.section5-2-bakudan {
	display: block;
	position: absolute;
	top: -35px;
	right: 15px;
	width: 142px;
	height: 142px;
	background: url(/products/lp/multiple/web-service/img/sec05-h2-02-bakudan.png) no-repeat center center;
	background-size: cover;
	z-index: 1;
}
.lp-campaign #main .section-round-box .inner-box {
	margin: 0 auto;
	padding: 30px 0 40px 0;
	width: 100%;
	max-width: 720px;
	box-sizing: border-box;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.5;
}
.lp-campaign #main .section-round-box .inner-box ul.note {
	margin: 30px 0 0;
	list-style: none;
}
.lp-campaign #main .section-round-box .inner-box ul.note li {
	margin: 0;
	text-indent: -1em;
	padding-left: 1em;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: normal;
	line-height: 1.5;
}
.lp-campaign #main .section-round-box .inner-box p.green-text {
	margin: 30px 0 3px 0;
	padding: 0;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
	color: #007e3d;
}
/* .lp-campaign #main .section-round-box .flow-flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;
	margin: 0;
	padding: 0;
	width: 100%;
}
.lp-campaign #main .section-round-box .flow-flex-box .yellow-box {
	margin: 0;
	padding: 15px;
	width: calc(100% / 3);
	max-width: 255px;
	background-color: #fff33f;
	border-radius: 4px;
	box-sizing: border-box;
	text-align: center;
} */
.lp-campaign #main .parts-column-three > ul > li.yellow-box {
	padding: 15px;
	background-color: #fff33f;
	border-radius: 4px;
	box-sizing: border-box;
} 

.lp-campaign #main .section-round-box .section05-1-illust {
	margin: 80px auto 10px;
	padding: 0;
	width: 100%;
	max-width: 620px;
	text-align: center;
}
.lp-campaign #main .section-round-box .section05-2-box {
	margin: 0 auto;
	padding: 40px 0 0 0;
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.5;
}
.lp-campaign #main .section-round-box .section05-2-box h3 {
	margin: 0 0 20px 0;
}
.step-box-left {
	border: 1px solid #000;
	box-sizing: border-box;
}
.lp-campaign #main .section-round-box .section05-2-box .step-box-right p {
	margin-top: 1.7em;
}
.lp-campaign #main .section-round-box .section05-2-box .step-box-right p:first-child {
	margin-top: 0;
}
.lp-campaign #main .section-round-box .section05-2-box .step-box-right span {
	display: inline-block;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.5;
}
.lp-campaign #main .section-round-box .section05-2-box .step-box-right span:last-child {
	margin-top: 28px;
}
.lp-campaign #main .chow-contact {
	position: relative;
	margin: 110px auto 90px;
	padding: 0;
	width: 100%;
	max-width: 457px;
	text-align: center;
}

/* section06 */
.lp-campaign #main #section06 h2 {
	margin: 0 auto;
	padding: 35px 0 50px 0;
	width: 100%;
	max-width: 395px;
	border-bottom: none;
}
.lp-campaign #main #section06 dl.faq-list {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 720px;
}
.lp-campaign #main #section06 dl.faq-list dt {
	margin: 0 0 20px 0;
	padding: 0 0 8px 0;
	border-bottom: 3px dashed #f7af00;;
	font-size: 30px;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1;
	color: #ea5504;
	text-align: left;
}
.lp-campaign #main #section06 dl.faq-list dd {
	margin: 0 0 50px 0;
	padding: 0;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.5;
}
.lp-campaign #main #section06 dl.faq-list dd p {
	margin: 0 0 25px 0;
	padding: 0;

}


.lp-campaign #main .section02-content-box img,
.lp-campaign #main .section03-content-box img,
.lp-campaign #main .section04-content-box img,
.lp-campaign #main .section05-content-box img,
.lp-campaign #main #section02 h2 img,
.lp-campaign #main #section03 h2 img,
.lp-campaign #main #section04 h2 img,
.lp-campaign #main #section05 h2 img,
.lp-campaign #main #section05 h3 img,
.lp-campaign #main #section06 h2 img,
.lp-campaign #main #section06 .faq-list dt img,
.step-box-left img,
.chow-contact img,
.yellow-box img,
.section05-1-illust img {
	width: 100%;
}


/* section下部注意書き */
.lp-campaign #main .texts-notes {
	margin-top: 12px;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.5;
}

.lp-campaign #main .texts-notes .first-line {
	padding-left: 2.5em;
	text-indent: -2.5em;
}

.lp-campaign #main .texts-notes ul {
	list-style-type: disc;
	padding-left: 3em;
	margin: 0;
}

.lp-campaign #main .texts-notes ul li {
	margin: 0;
	text-indent: -0.75em;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.25;
}


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

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

------------------------------------------------------------------- */
			/* フリーダイヤル */
			.lp-campaign #main .contacts-fundamental .conversion-tel.free-dial .conversion-tel-number a {
					background:url(/products/lp/multiple/web-service/img/icons-tel-free-dial.png) 10px center no-repeat #fffefe;
					background:url(/products/lp/multiple/web-service/img/icons-tel-free-dial.png) 10px center no-repeat,-webkit-linear-gradient(top, #fffefe 0%, #ddd 100%);
					background:url(/products/lp/multiple/web-service/img/icons-tel-free-dial.png) 10px center no-repeat,linear-gradient(to bottom, #fffefe 0%, #ddd 100%);
					background-size:26px auto, auto;}

/* footer */
.lp-campaign #main .main-footer {
	background:url(/products/lp/multiple/web-service/img/main-bg-pc.png) center center / contain repeat-y;
}
.lp-campaign #main .section-square-box {
	margin: 0 auto;
	padding: 30px 0;
	width: 100%;
	max-width: 860px;
	background-color: #fff;
	box-sizing: border-box;
}




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

	04. タブレット対応

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

@media screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait){
  #wrap {
        /* min-width を解除または調整し、柔軟にする */
        min-width: unset; /* これにより、デバイス幅に合わせて縮小可能に */
        /* width: 100%; margin: 0 auto; overflow: hidden; はそのまま維持 */
    }

    .lp-campaign #main {
        width: 100%; /* デバイス幅に合わせて100%に広がる */
        max-width: 959px; /* このメディアクエリの最大幅に合わせるか、適宜調整 */
        /* margin: 0 auto; はそのまま維持 */
    }

    /* .section-wrapper のパディングを調整（デバイスの画面端に近すぎないように） */
    .section-wrapper {
        padding: 0 30px 35px 30px; /* 左右のパディングを適度に設定 */
    }

    /* movie-box の最大幅を調整（タブレット向けに） */
    .lp-campaign #main .movie-box {
        max-width: 400px; /* 例: タブレットのレイアウトに合わせて調整 */
        /* margin: 0 auto; はそのまま維持 */
    }

    /* 吹き出し画像の位置をタブレット向けに調整 */
    .lp-campaign #main .movie-box .movie-fuki1 {
        left: -50%; /* 例: タブレット向けの位置調整 */
        top: 25%;   /* 例 */
        max-width: 180px; /* 吹き出し自体の最大幅も調整 */
    }
    .lp-campaign #main .movie-box .movie-fuki2 {
        right: -45%; /* 例: タブレット向けの位置調整 */
        top: -10px;   /* 例 */
        max-width: 150px; /* 吹き出し自体の最大幅も調整 */
    }
    /* 必要であれば、タブレットのフォントサイズ調整などもここに追加 */
    /* font-size: 1.1rem; など */
}



	/* === campb0048_1: 動画基本 === */
	/* .lp-campaign #main .parts-movie-big .parts-movie-content .parts-movie-alt .open span:hover{
		padding:11px 20px 11px 30px; border:none;
		background:url(/common-s/products/lp/multiple/web-service/img/products/lp-campaign/icons-arrow-open.png) no-repeat 18px center #f4f4f4;
		background:url(/common-s/products/lp/multiple/web-service/img/products/lp-campaign/icons-arrow-open.png) no-repeat 18px center, -webkit-linear-gradient(top, #fff 0%, #ececec 100%);
		background:url(/common-s/products/lp/multiple/web-service/img/products/lp-campaign/icons-arrow-open.png) no-repeat 18px center, linear-gradient(to bottom, #fff 0%, #ececec 100%);
		color:#333; text-decoration:none;}
	.lp-campaign #main .parts-movie-big .parts-movie-content .parts-movie-alt .close span:hover{
		padding:11px 20px 11px 30px; border:none;
		background:url(/common-s/products/lp/multiple/web-service/img/products/lp-campaign/icons-arrow-closed.png) no-repeat 18px center #f4f4f4;
		background:url(/common-s/products/lp/multiple/web-service/img/products/lp-campaign/icons-arrow-closed.png) no-repeat 18px center, -webkit-linear-gradient(top, #fff 0%, #ececec 100%);
		background:url(/common-s/products/lp/multiple/web-service/img/products/lp-campaign/icons-arrow-closed.png) no-repeat 18px center, linear-gradient(to bottom, #fff 0%, #ececec 100%);
		color:#333; text-decoration:none;} */
}