@charset "utf-8";

/*
ホーム モーダル
/
*/


/*
***********************************************************************************************
ECサイト
***********************************************************************************************
*/

/* モーダル表示 ご利用案内 */
.modaal-body-ecsite-user-guide {
	max-width: 1165px;
	padding: 95px 60px 85px 60px;
	margin: 0 auto;
	text-align: center;
}

	.viewmode-mobile .modaal-body-ecsite-user-guide {
		padding: 38px 1em 42px;
	}

	.modaal-body-ecsite-user-guide > h2 {
		font-family: 'Shippori Mincho B1', serif;
		font-size: 32px;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.3;
		margin: 0px 0px 1.3em 0px;
		padding: 0;
		position: relative;
		z-index: 1;
	}

		.viewmode-mobile .modaal-body-ecsite-user-guide > h2 {
			font-size: 22px;
			line-height: 1.5;
			margin-bottom: 18px;
		}

		.modaal-body-ecsite-user-guide > h2 small {
			display: block;
			font-family: Arial, sans-serif;
			font-size: 22px;
			font-weight: bold;
			letter-spacing: 0;
			margin-bottom: .35em;
			padding: 0;
			/* text-transform: uppercase; */
			color: #004fa2;
		}

			.viewmode-mobile .modaal-body-ecsite-user-guide > h2 small {
				font-size: 17px;
				margin-bottom: 0;
			}

	.modaal-body-ecsite-user-guide ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		list-style: none;
		margin: 0 auto 0 auto;
		padding: 0;
	}

		.viewmode-mobile .modaal-body-ecsite-user-guide ul {
			gap: 22px 0;
		}

		.modaal-body-ecsite-user-guide li {
			list-style: none;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
			width: 317px;
		}

			.viewmode-mobile .modaal-body-ecsite-user-guide li {
				width: 100%;
			}

			.modaal-body-ecsite-user-guide li p {
				text-align: center;
				margin: 0 0 17px 0;
				width: 100%;
				height: 49px;
				font-size: 15px;
				line-height: 1.55;
				letter-spacing: normal;
			}

				.modaal-body-ecsite-user-guide li p.single-line {
					padding-top: 1em;
				}

				.modaal-body-ecsite-user-guide li p strong {
					font-size: 106.667%;
				}

				/* google翻訳時 */
				.modaal-body-ecsite-user-guide li p:has(font) {
					height: 84px;
				}

					.modaal-body-ecsite-user-guide li p font {
						width: 100%;
					}

				.viewmode-mobile .modaal-body-ecsite-user-guide li p {
					height: auto;
					margin-bottom: 9px;
					font-size: 14px;
				}
					.viewmode-mobile .modaal-body-ecsite-user-guide li p.single-line {
						padding-top: 0;
					}

					/* google翻訳時 */
					.viewmode-mobile .modaal-body-ecsite-user-guide li:nth-of-type(3) a > font {
						padding-right: 30px;
					}

			.modaal-body-ecsite-user-guide li a {
				border: 2px solid #004fa2 !important;
				color: #004fa2 !important;
				padding: .5em 0 .5em 0 !important;
				width: 100%;
				text-align: center;
				transition: all .2s ease;
				transition-property: background-color, border, color;
			}

				/* google翻訳時 */
				.modaal-body-ecsite-user-guide li a {
					font-size: 90%;
				}

				.viewmode-mobile .modaal-body-ecsite-user-guide li a {
					width: 250px;
					font-size: 90%;
					margin: 0 auto;
					display: block;
				}

				.modaal-body-ecsite-user-guide li a::after {
					background-color: #004fa2 !important;
					-webkit-mask-image: url(../../img/icon_arrow_01.svg) !important;
					mask-image: url(../../img/icon_arrow_01.svg) !important;
				}

				.modaal-body-ecsite-user-guide li a:hover {
					background-color: #004fa2 !important;
					border: 2px solid #004fa2 !important;
					color: #fff !important;
				}

					.modaal-body-ecsite-user-guide li a:hover::after {
						background-color: #fff !important;
					}

.modaal-body-ecsite-applink {
	padding: 85px 60px 85px 60px;
	background-color: #e6eef5;
}

	.viewmode-mobile .modaal-body-ecsite-applink {
		padding: 38px 1em 14px 1em;
	}

	.sec-ecsite-contents {
		display: flex;
		flex-wrap: wrap;
		gap: 0 40px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 1150px;
		padding: 0 0 0 0;
	}

		.viewmode-mobile .sec-ecsite-contents {
			width: 100%;
		}

		.sec-ecsite-contents-img {
			width: calc(100% - 509px - 40px);
		}

			.viewmode-mobile .sec-ecsite-contents-img {
				width: 100%;
			}

			.sec-ecsite-contents-img-top {
				margin: 0 0 0 0;
			}

				.sec-ecsite-contents-img-top img {
					width: 100%;
					display: block;
				}

					.viewmode-mobile .sec-ecsite-contents-img-top img {
						width: 82%;
						margin: 0 auto;
					}

			.sec-ecsite-contents-img-logo {
				margin: 29px auto 44px;
				text-align: center;
			}

				.viewmode-mobile .sec-ecsite-contents-img-logo {
					margin: 13px auto 20px;
				}

				.sec-ecsite-contents-img-logo img {
					width: 362px;
					display: block;
					margin: 0 auto 0 auto;
				}

					.viewmode-mobile .sec-ecsite-contents-img-logo img {
						width: 250px;
					}

				.sec-ecsite-contents-img-logo figcaption {
					font-size: 1.178em;
					font-weight: 900;
				}

			.sec-ecsite-contents-img-link {
				display: flex;
				flex-wrap: wrap;
				gap: 0 30px;
			}

				.viewmode-mobile .sec-ecsite-contents-img-link {
					gap: 12px 0;
					justify-content: center;
				}

				.sec-ecsite-contents-img-link a {
					padding: .5em 0em .5em 0em !important;
					width: calc((100% - 30px) / 2);
				}

					.viewmode-mobile .sec-ecsite-contents-img-link a {
						width: 250px;
						font-size: 90%;
					}

		.sec-ecsite-contents-txt {
			width: 509px;
			min-width: 509px;
			text-align: center;
		}

			.viewmode-mobile .sec-ecsite-contents-txt {
				width: 100%;
				min-width: 0;
				margin: 0 0 30px 0;
			}

			.sec-ecsite-contents-txt > h3 {
				font-family: 'Shippori Mincho B1', serif;
				font-size: 30px;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 1.3;
				margin: 0px 0px .5em 0px;
				padding: 0;
				position: relative;
				z-index: 1;
			}

				.viewmode-mobile .sec-ecsite-contents-txt > h3 {
					font-size: 22px;
					line-height: 1.5;
				}

				.sec-ecsite-contents-txt > h3 small {
					display: block;
					font-family: Arial, sans-serif;
					font-size: 37px;
					font-weight: bold;
					letter-spacing: 0;
					margin-bottom: .5em;
					padding: 0;
					text-transform: uppercase;
				}

					.viewmode-mobile .sec-ecsite-contents-txt > h3 small {
						font-size: 25px;
						margin-bottom: .2em;
					}

			.sec-ecsite-contents-txt > h4 {}

				.sec-ecsite-contents-txt > h4 br {
					display: none;
				}

					.viewmode-mobile .sec-ecsite-contents-txt > h4 br {
						display: block;
					}

			.sec-ecsite-contents-txt > p {
				position: relative;
				z-index: 1;
				text-align: left;
				margin: 0 auto 30px auto;
			}

				.viewmode-mobile .sec-ecsite-contents-txt > p {
					margin-bottom: 1.5em;
				}

				.viewmode-mobile .sec-ecsite-contents-txt {
					font-size: 90%;
				}

				.sec-ecsite-contents-txt > p::before {
					content: "";
					position: absolute;
					z-index: -1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 223px;
					height: auto;
					aspect-ratio: 223/169;
					display: block;
					background: url(bg_ec_01.webp) no-repeat;
					background-position: center center;
					background-size: 100% auto;
				}

					.viewmode-mobile .sec-ecsite-contents-txt > p::before {
						width: 170px;
					}

				.sec-ecsite-contents-applink {
					border: 1px solid #ccc;
					padding: 26px 30px 28px 30px;
				}

					.viewmode-mobile .sec-ecsite-contents-applink {
						padding: 22px 18px 25px 18px;
					}

					.sec-ecsite-contents-applink > h4 {
						text-align: center;
					}

						/* google翻訳時 */
						.sec-ecsite-contents-applink > h4 > font:nth-of-type(2) {
							display: none;
						}

					.sec-ecsite-contents-applink ul {
						width: 363px;
						display: flex;
						justify-content: space-between;
						list-style: none;
						padding: 0;
						margin: 0 auto 0 auto;
					}

						.viewmode-mobile .sec-ecsite-contents-applink ul {
							width: 100%;
							max-width: 260px;
						}

					.sec-ecsite-contents-applink li {
						list-style: none;
						padding: 0;
						margin: 0;
						text-align: center;
					}

						.sec-ecsite-contents-applink li > p {
							font-size: .885em;
							text-align: center;
						}

							/* google翻訳時 */
							.sec-ecsite-contents-applink li > p:has(font) {
								line-height: 1.3;
								margin-bottom: 7px;
							}

						.sec-ecsite-contents-applink li > a {
							display: block;
						}

							.sec-ecsite-contents-applink li > a img {
								width: auto;
								height: 53px;
								display: block;
								margin: 0px auto 12px auto;
							}

								.viewmode-mobile .sec-ecsite-contents-applink li > a img {
									height: 40px;
									margin-bottom: 0px;
								}

						.sec-ecsite-contents-applink li > img {
							width: 96px;
							min-width: 96px;
							display: block;
							margin: 0 auto;
						}

							.viewmode-mobile .sec-ecsite-contents-applink li > img {
								display: none;
							}

/* モーダル表示 初めてご利用される方は以下資料をご確認ください */
.modaal-body-ecsite-materials {
	padding: 85px 60px 85px 60px;
	text-align: center;
}

	.viewmode-mobile .modaal-body-ecsite-materials {
		padding: 38px 1em 42px;
	}

	.modaal-body-ecsite-materials h2 {
		font-family: 'Shippori Mincho B1', serif;
		font-size: 32px;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.3;
		margin: 0px 0px 1.3em 0px;
		padding: 0;
		position: relative;
		z-index: 1;
	}

		.viewmode-mobile .modaal-body-ecsite-materials h2 {
			font-size: 22px;
			line-height: 1.5;
			margin-bottom: 18px;
		}

		.modaal-body-ecsite-materials h2 small {
			display: block;
			font-family: Arial, sans-serif;
			font-size: 22px;
			font-weight: bold;
			letter-spacing: 0;
			margin-bottom: .5em;
			padding: 0;
			/* text-transform: uppercase; */
			color: #004fa2;
		}

			.viewmode-mobile .modaal-body-ecsite-materials h2 small {
				font-size: 18px;
				margin-bottom: 0;
			}

	.modaal-body-ecsite-materials ul {
		display: flex;
		justify-content: space-between;
		list-style: none;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
		max-width: 1165px;
	}

		.viewmode-mobile .modaal-body-ecsite-materials ul {
			flex-wrap: wrap;
			gap: 20px 0;
		}

		.modaal-body-ecsite-materials li {
			list-style: none;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
			width: calc((100% - 30px) / 2);
		}

			.viewmode-mobile .modaal-body-ecsite-materials li {
				width: 100%;
			}

			.modaal-body-ecsite-materials li figure {
				margin: 0;
			}

				.modaal-body-ecsite-materials li figure a {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					aspect-ratio: 493/275;
					object-fit: cover;
					overflow: hidden;
					border: 1px solid #ccc;
				}

					.modaal-body-ecsite-materials li figure a img {
						width: 100%;
						height: auto;
						object-fit: cover;
					}

					.modaal-body-ecsite-materials li figure a[href*="pdf"]::before {
						background-color: #be0909;
						bottom: 6px;
						content: '';
						display: block;
						height: 25px;
						position: absolute;
						right: 5px;
						width: 25px;
						-webkit-mask-image: url(../../css/fontawesome/svgs/solid/file-pdf.svg);
						mask-image: url(../../css/fontawesome/svgs/solid/file-pdf.svg);
						-webkit-mask-size: contain;
						mask-size: contain;
						-webkit-mask-repeat: no-repeat;
						mask-repeat: no-repeat;
						z-index: 2;
					}

					.modaal-body-ecsite-materials li figure a[href*="pdf"]::after {
						background-color: rgba(255, 255, 255, .8);
						bottom: 0;
						content: '';
						display: block;
						height: 40px;
						position: absolute;
						right: 0;
						width: 40px;
						z-index: 1;
					}

				.modaal-body-ecsite-materials li figure figcaption {
					/* margin-top: .5em; */
				}

					.viewmode-mobile .modaal-body-ecsite-materials li figure figcaption:has(font) {
						margin-top: .2em;
					}

					.modaal-body-ecsite-materials li figure figcaption span {
						display: inline-block;
						vertical-align: top;
						color: #666;
					}

.modaal-body-ecsite .lity-close {
	right: 20px;
	top: 20px;
}