@charset "utf-8";

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

	eSIMパソコンLP　共通のCSS

	最終更新日：2025年08月07日

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

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

	01. コンテンツ定義

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

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

/* === コンテンツへのリンク === */
.lp-campaign #main .links-content,
.lp-campaign #main .links-content-fixed { position: relative; z-index: 2; margin-top: -40px;}
.lp-campaign #main .links-content::before,
.lp-campaign #main .links-content-fixed::before {
	position: absolute; top: 0; left: 0; z-index: -1;
	content:""; width:100%; height:100%;
	mix-blend-mode:multiply; box-shadow: 0px 5px 10px 3px rgba(204, 204, 204, 0.5);}
	.lp-campaign #main .links-content .header-menu-button,
	.lp-campaign #main .links-content-fixed .header-menu-button{
		display:none;}
	.lp-campaign #main .links-content ul,
	.lp-campaign #main .links-content-fixed ul {
		display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 1px;
		margin: 0; padding: 1px; background-color: #999;}
		.lp-campaign #main .links-content ul li,
		.lp-campaign #main .links-content-fixed ul li { list-style: none; margin: 0; padding: 0;}
			.lp-campaign #main .links-content ul li a,
			.lp-campaign #main .links-content-fixed ul li a {
				position: relative; display: block; padding: 18px 0 40px;
				background: #fff; color: #333;
				font-size: 1.6rem; text-align: center; text-decoration: none; transition: background-color 0.4s;}
				.lp-campaign #main .links-content ul li a::before,
				.lp-campaign #main .links-content-fixed ul li a::before {
					content: ""; position: absolute; right: 0; bottom: 18px; left: 0;
					width: 18px; height: 13px; margin: 0 auto;
					background-color: #ff6600;
					clip-path: polygon(50% 13px, 0% 0%, 18px 0%);
					transition: bottom 250ms;}
			.lp-campaign #main .links-content ul li a:hover,
			.lp-campaign #main .links-content-fixed ul li a:hover {
				background-color: #fffaec;}
				.lp-campaign #main .links-content ul li a:hover::before,
				.lp-campaign #main .links-content-fixed ul li a:hover::before {
					bottom: 13px;}
.lp-campaign #main .links-content-fixed.off{
	display:none;}
.lp-campaign #main .links-content-fixed{
	position:fixed; top:0;
	width:960px; margin-top: 0;}


/* === お問い合わせエリア === */
.lp-campaign #main header .contacts-fundamental { overflow:hidden; margin:70px -500% 0; padding:40px 500%;
	background:#ffeaab; text-align:center;}
	.lp-campaign #main header .contacts-fundamental .title { margin-top: 0; font-size: 1.8rem; line-height: 1.5em;}
	.lp-campaign #main header .contacts-fundamental .conversion { margin-top: 10px;}
	/* ボタン */
	.lp-campaign #main header .contacts-fundamental p.button{ display:inline-block; margin:0 auto;}
		.lp-campaign #main header .contacts-fundamental p.button a{
			display:block; min-width:400px; padding:20px 80px; border:1px solid #3f52b3; border-radius:10em;
			background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(#6b82f7, #4053b4);
			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 header .contacts-fundamental p.button a.icons-blank{
			background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(#6b82f7, #4053b4);}
		.lp-campaign #main header .contacts-fundamental p.button a.icons-external{
			background:url(/products/lp/mobile-data-communication/nicesim/img/icon-external-white.png) no-repeat 36px center / 20px, linear-gradient(#6b82f7, #4053b4);}
			.lp-campaign #main header .contacts-fundamental p.button a:hover{
				background:#3f52b3 url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center;
				text-decoration:none;}
			.lp-campaign #main header .contacts-fundamental p.button a.icons-blank:hover{
				background:#3f52b3 url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center}
			.lp-campaign #main header .contacts-fundamental p.button a.icons-external:hover{
				background:#3f52b3 url(/products/lp/mobile-data-communication/nicesim/img/icon-external-white.png) no-repeat 36px center / 20px}
	/* リンク */
	.lp-campaign #main header .contacts-fundamental .links { margin-top: 20px;}
		.lp-campaign #main header .contacts-fundamental .links a { color: #333; font-size: 1.8rem;}
	/* 注釈 */
	.lp-campaign #main header .contacts-fundamental .list-notes-asterisk { margin-top: 15px;}
		.lp-campaign #main header .contacts-fundamental .list-notes-asterisk ul { margin: 0;}
			.lp-campaign #main header .contacts-fundamental .list-notes-asterisk ul li { list-style: none;
				margin: 0 0 0 1.35em; font-size: 1.2rem; font-weight: normal; text-indent:-1.35em;}

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

/* === campb0019_1: H2見出し === */
.lp-campaign #main h2{
	margin-top:0;
	border-bottom:3px solid #eb6100; color:#333; font-weight:bold;
	font-size:3.6rem; line-height:1.5em; text-align:center;}

/* === campb0022_1: H3見出し === */
.lp-campaign #main h3{ color:#d23701; font-size: 3rem;}

/* === campb0034_1: 画像 中（右）
       campb0035_1: 画像 中（左） === */
.lp-campaign #main .parts-img-middle-right .pic p img,
.lp-campaign #main .parts-img-middle-left .pic p img{ display:block; max-width: 100%; height: auto;
border-radius: 0; border: 2px solid #fee8a5; box-sizing: border-box;}

/* === campb0046_1: データテーブル（表） === */
.lp-campaign #main .tables-fundamental { margin-top:44px;}
	.lp-campaign #main .tables-fundamental table { border-color: #ffe9ab;}
		.lp-campaign #main .tables-fundamental table th,
		.lp-campaign #main .tables-fundamental table td {
			padding:12px 14px; border-color: #ffe9ab;}
		.lp-campaign #main .tables-fundamental table th {
			background-color:#fffcf4;}
		.lp-campaign #main .tables-fundamental table thead th { background-color:#ffe9ab; }
		.lp-campaign #main .tables-fundamental table thead th:first-child { padding:12px 14px;}
		.lp-campaign #main .tables-fundamental table thead th:not(:last-child) {
			border-right: 1px solid #fff;}
		.lp-campaign #main .tables-fundamental table tbody th { padding:12px 14px;}
			.lp-campaign #main .tables-fundamental table td .note {
				font-size: 1.2rem;}

/* === campb0016_1: FAQ === */
.lp-campaign #main .parts-faq{ margin-top:30px;}
	.lp-campaign #main .parts-faq dl dt{ margin-top: 40px;}
		.lp-campaign #main .parts-faq dl dt:before{ color:#262f58;}
	.lp-campaign #main .parts-faq dl dd{ margin-top:0.7em;}
		.lp-campaign #main .parts-faq dl dd:before{ color:#d73701;}

/* === 課題 === */
.lp-campaign #main #issue {
	margin:30px -500% 0; padding:60px 500% 70px;
	background-color: #fffaec;}
	.lp-campaign #main #issue .lead {
		font-size: 2.2rem; line-height: 1.5em; text-align: center;}
	.lp-campaign #main #issue .issue-list {
		display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 39px;
		margin-top: 55px;}
		.lp-campaign #main #issue .issue-list .item {
			display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
			.lp-campaign #main #issue .issue-list .item .title {
				align-self: end; margin-top: 0;
				font-size: 2.2rem; line-height: 1.5em; text-align: center;}
			.lp-campaign #main #issue .issue-list .item .pic { margin-top: 15px;}
				.lp-campaign #main #issue .issue-list .item .pic img {
					max-width: 100%; height: auto; border-radius: 0; border: 2px solid #fee8a5; box-sizing: border-box;}

/* === 解決策 === */
.lp-campaign #main #solution { margin-top:95px;}
	.lp-campaign #main #solution .solution-list {
		display: grid; grid-template-columns: repeat(2, 1fr);
		gap: 50px 40px; margin-top: 50px;}
		.lp-campaign #main #solution .solution-list .item {
			display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
			.lp-campaign #main #solution .solution-list .item .title {
				align-self: end; margin-top: 0;
				color: #cc3300; font-size: 2.2rem; line-height: 1.5em; font-weight: bold; text-align: center;}
			.lp-campaign #main #solution .solution-list .item .pic { margin-top: 15px;}
				.lp-campaign #main #solution .solution-list .item .pic img {
					max-width: 100%; height: auto;
					border-radius: 0; border: 2px solid #fee8a5; box-sizing: border-box;}

/* === 流れ === */
.lp-campaign #main #flow {
	margin:85px -500% 0; padding:60px 500% 70px;
	background-color: #fffaec;}
	.lp-campaign #main #flow .lead { margin-top: 35px; text-align: center;}
	.lp-campaign #main #flow > ol {
		display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px;
		margin: 40px 0 0;}
		.lp-campaign #main #flow > ol > li {
			position: relative; list-style: none; margin: 0; padding: 15px;
			border-radius: 10px; border: 2px solid #fed57b; background-color: #fff;
			text-indent: 0; box-sizing: border-box;}
		.lp-campaign #main #flow > ol > li::before {
			position: absolute; top: 0; bottom: 0; left: -33px; content: "";
			width: 27px; height: 26px; margin: auto 0; padding: 0; border-radius: 0;
			background: url(/products/lp/mobile-data-communication/nicesim/img/flow-arrow.png) 0 0 no-repeat;}
		.lp-campaign #main #flow > ol > li:first-child::before { display: none;}
			.lp-campaign #main #flow > ol > li .title {
				margin-top: 0; color: #d13600; font-size: 1.8rem; font-weight: bold; text-align: center;}
			.lp-campaign #main #flow > ol > li .pic { margin-top: 5px;}
				.lp-campaign #main #flow > ol > li .pic img {
					max-width: 100%; height: auto;
					border-radius: 0; border: 2px solid #fee8a5; box-sizing: border-box;}
			.lp-campaign #main #flow > ol > li .text {
				margin-top: 7px; font-weight: normal;}
				.lp-campaign #main #flow > ol > li .text p { font-size: 1.5rem;}
				.lp-campaign #main #flow > ol > li .text p:first-child { margin-top: 0;}
				.lp-campaign #main #flow > ol > li .text .list-notes-asterisk ul { margin:0; }
					.lp-campaign #main #flow > ol > li .text .list-notes-asterisk ul li {
						list-style:none; margin:0.3em 0 0 1.35em;
						font-size:1.1rem; line-height:1.5em; font-weight: normal;
						text-indent:-1.35em;}
					.lp-campaign #main #flow > ol > li .text .list-notes-asterisk ul li::before {
						display: none;}

/* === 対応モデル === */
.lp-campaign #main #supported-models { margin-top:110px;}

/* === よくあるご質問 === */
.lp-campaign #main #faq {
	margin:85px -500% 0; padding:60px 500% 70px;
	background-color: #fffaec;}

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

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

------------------------------------------------------------------- */
/* === フッターお問い合わせエリア　 === */
.lp-campaign #main footer .contacts-fundamental { margin-top:5em; text-align:center;}
.lp-campaign #main footer .contacts-fundamental.contacts-bg-color {
	background:#ffeaab url(/products/lp/mobile-data-communication/nicesim/img/contacts-bg.png) no-repeat center top; margin:5em -500% 0; padding:85px 500% 60px; overflow:hidden;}
	.lp-campaign #main footer .contacts-fundamental .conversion {
		display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 25px;
		margin-top: 0; padding: 0 55px;}
		.lp-campaign #main footer .contacts-fundamental .conversion .item {
			display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
			.lp-campaign #main footer .contacts-fundamental .conversion .item .title {
				margin-top: 0; font-size: 1.8rem; line-height: 1.5em;}
			/* ボタン */
			.lp-campaign #main footer .contacts-fundamental .conversion .item .button {
				margin-top:10px;}
			.lp-campaign #main footer .contacts-fundamental .conversion .item .button a{
				display:block; padding:20px 80px; border:1px solid #3f52b3; border-radius:10em;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(#6b82f7, #4053b4); 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 footer .contacts-fundamental .conversion .item .button a.icons-blank{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(#6b82f7, #4053b4);}
			.lp-campaign #main footer .contacts-fundamental .conversion .item .button a.icons-external{
				background:url(/products/lp/mobile-data-communication/nicesim/img/icon-external-white.png) no-repeat 36px center / 20px, linear-gradient(#6b82f7, #4053b4);}
			.lp-campaign #main footer .contacts-fundamental .conversion .item .button a:hover{
				background:#3f52b3 url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center;
				text-decoration:none;}
			.lp-campaign #main footer .contacts-fundamental .conversion .item .button a.icons-blank:hover{
				background:#3f52b3 url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center}
			.lp-campaign #main footer .contacts-fundamental .conversion .item .button a.icons-external:hover{
				background:#3f52b3 url(/products/lp/mobile-data-communication/nicesim/img/icon-external-white.png) no-repeat 36px center / 20px}
			/* ボタン2色目 */
			.lp-campaign #main footer .contacts-fundamental .conversion .item:nth-child(2) .button a{
				display:block; padding:20px 80px; border:1px solid #d23600; border-radius:10em;
				background:url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center, linear-gradient(#eb6100, #d23600); 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 footer .contacts-fundamental .conversion .item:nth-child(2) .button a.icons-blank{
				background:url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center, linear-gradient(#eb6100, #d23600);}
			.lp-campaign #main footer .contacts-fundamental .conversion .item:nth-child(2) .button a.icons-external{
				background:url(/products/lp/mobile-data-communication/nicesim/img/icon-external-white.png) no-repeat 36px center / 20px, linear-gradient(#eb6100, #d23600);}
			.lp-campaign #main footer .contacts-fundamental .conversion .item:nth-child(2) .button a:hover{
				background:#d23600 url(/common-s/img/products/lp-campaign/icons-arrow-right-white.png) no-repeat 36px center;
				text-decoration:none;}
			.lp-campaign #main footer .contacts-fundamental .conversion .item:nth-child(2) .button a.icons-blank:hover{
				background:#d23600 url(/common-s/img/products/lp-campaign/icons-blank-white.png) no-repeat 36px center}
			.lp-campaign #main footer .contacts-fundamental .conversion .item:nth-child(2) .button a.icons-external:hover{
				background:#d23600 url(/products/lp/mobile-data-communication/nicesim/img/icon-external-white.png) no-repeat 36px center / 20px}
			/* テキスト（リンク等） */
			.lp-campaign #main footer .contacts-fundamental .conversion .item .text {
				margin-top: 35px;}
				.lp-campaign #main footer .contacts-fundamental .conversion .item .text .link {
					margin-top: 0;}
					.lp-campaign #main footer .contacts-fundamental .conversion .item .text .link a {
						color: #333; font-size: 1.8rem;}
			/* 電話番号 */
			.lp-campaign #main footer .contacts-fundamental .conversion .item .conversion-tel{
				margin:35px 0 0; text-align:center;}
				.lp-campaign #main footer .contacts-fundamental .conversion .item .conversion-tel .conversion-tel-post{
					margin:4px 0 0; font-size:1.4rem; line-height:1.5em;}
				.lp-campaign #main footer .contacts-fundamental .conversion .item .conversion-tel .conversion-tel-number{
					display:inline-block; width:auto; margin:5px 0 0; padding:0;}
			/* 注釈 */
			.lp-campaign #main footer .contacts-fundamental .conversion .item .list-notes-asterisk {
				margin-top: 10px; text-align: center;}
				.lp-campaign #main footer .contacts-fundamental .conversion .item .list-notes-asterisk ul {
					display: inline-block; margin: 0;}
					.lp-campaign #main footer .contacts-fundamental .conversion .item .list-notes-asterisk ul li {
						list-style: none; display: block; width: auto;
						margin: 0 0 0 1.35em; font-size: 1.2rem; font-weight: normal; text-align: left; text-indent:-1.35em;}