@charset "UTF-8";
/* monitran page */
.moni{
	.fc-red{ color: #C1113B;}
	.fc-blu{ color: #215C98; font-weight: 700;}
	.fw-b{font-weight: 700;}
	.fw-n{ font-weight: 400;}
	.fnt-s{font-size: .9em;}
	.fnt-ss{font-size: .8em;}
	.taC{ text-align: center; }
	.taL{ text-align: left;}
	.mb-05em{ margin-bottom: .5em!important;}
	.mb-1em{ margin-bottom: 1em!important;}
	.mb-1_5em{ margin-bottom: 1.5em!important;}
	.mb-2em{ margin-bottom: 2em!important;}
	.mb-3em{ margin-bottom: 3em!important;}
	.bg-col-DAF2D0{ background-color: #DAF2D0; }
	.bg-col-FBE2D5{ background-color: #FBE2D5;}
	.bg-col-F2CEEF{ background-color: #F2CEEF;}
	.txt-box-in-td{display: inline-block; width: 11em;}
	@media screen and (max-width: 767px) {
		.sp-mb00{
			margin-bottom: 0!important;
		}
		.sp-mb-1em{ margin-bottom: 1em!important;}
		.sp-mb-2em{ margin-bottom: 2em!important;}
		.sp-mb-3em{ margin-bottom: 3em!important;}
		.sp-a-cancel{ pointer-events: none;}
		.sp-fnt-sss{font-size: .7em;}
	}
}
.moni{
	background: linear-gradient(to right , #eee 0% , transparent 10% , transparent 90% , #eee 100%);
	@media screen and (max-width: 767px) {
		background: none;
	}
	section{
		display: flex;
		flex-direction: column;
		row-gap: 60px;
		padding: 30px 0 40px;
		@media screen and (max-width: 767px) {
			row-gap: calc(30 / 3.75 * 1vw);
			padding: calc(15 / 3.75 * 1vw) 0 calc(20 / 3.75 * 1vw);
			&.sub-mv{
		        row-gap: calc(30 / 3.75 * 1vw);
        		padding: 0;
			}
		}
	}
	.sp-scroll{
		@media screen and (max-width: 767px) {
			width: 100%;
			overflow: auto;
			.sp-w1000{ width: 1000px;}
			.sp-w900{ width: 900px;}
			.sp-w850{ width: 850px;}
			.sp-w800{ width: 800px;}
			.sp-w700{ width: 700px;}
			.sp-w600{ width: 600px;}
			.sp-w500{ width: 500px;}
		}
	}
	.cont-pl1{
		padding-left: 1em;
		padding-bottom: 2em;
		background: #fff;
		@media screen and (max-width: 767px) {
			padding: 0 0 2em;
		}
		.sngl{
			img{
				padding: 16px;
				border: 1px solid #aaa;
				max-width: 600px;
				@media screen and (max-width: 767px) {
					padding: 16px;
					max-width: 100%;
				}
			}
		}
	}
	.flx-box{
		display: flex;
		justify-content: space-between;
		margin-bottom: 50px;
		flex-wrap: wrap;
		&.type01{
			.img-box{
				width: 300px;
				display: flex;
				flex-direction: column;
				row-gap: 16px;
				padding-right: 20px;
				padding-top: 40px;
				align-items: center;
				@media screen and (max-width: 767px) {
					width: 100%;
					margin-top: 0;
					padding: 0 0 calc(40 / 3.75 * 1vw);
					row-gap: calc(20 / 3.75 * 1vw);
				}
				img{
					max-width: 100%;
					&.mh-300{
						max-height: 300px;
					}
				}
			}
			.spec-box{
				flex: 1;
				max-width: 100%;
			}
		}
		&.type02{
			display: flex;
			@media screen and (max-width: 767px) {
				flex-direction: column-reverse;
			}
			figure{
				width: 200px;
				margin-right: 16px;
				@media screen and (max-width: 767px) {
					width: 100%;
					margin-top: 0;
					text-align: center;
				}
			}
			.txt-box{
				flex: 1;
			}
		}
		&.accm{
			@media screen and (max-width: 767px) {
				margin-bottom: .5em;
			}
			.img-box{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				row-gap: 30px;
				figure{
					display: flex;
					flex-direction: column;
					align-items: center;
					img{
						width: 120px;
					}
				}
				figcaption{
					margin-top: .5em;
					padding: .2em .3em;
					color: #C1113B;
					border: 1px solid #ddd;
					text-align: center;
				}
			}
		}
		&.qlty{
			.txt-box{
				width: 700px;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
			}
			.img-box{
				flex: 1;
				padding: 0 0 0 30px;
				@media screen and (max-width: 767px) {
					width: 100%;
					text-align: center;
					img{
						width: 60%;
					}
				}
			}
		}
		&.ql-doc{
			justify-content: center;
			column-gap: 16px;
			@media screen and (max-width: 767px) {
				justify-content: space-between;
				column-gap: 0;
				row-gap: 1em;
			}
			figure{
				img{
					width: 180px;
					border: 1px solid #ccc;
					padding: .5em .3em;
					@media screen and (max-width: 767px) {
						width: 100%;
					}
				}
				figcaption{
					background-color: #C1113B;
					color: #fff;
					padding: .2em 0 .3em;
					margin-top: .5em;
					text-align: center;
					@media screen and (max-width: 767px) {
						font-size: calc(14 / 3.75 * 1vw);
					}
				}
			}
		}
	}
	.ql-cont-box{
		display: flex;
		justify-content: center;
		a{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 320px;
			height: 50px;
			text-align: center;
			font-size: 24px;
			line-height: 1.25;
			border-radius: 4px;
			background: url(/common/img/icn_mail.svg) left 16px center / 36px auto no-repeat;
			background-color: #21b4c2;
			color: #fff;
			transition: background .2s ease;
			padding: 0 0 0 30px;
			&:hover{
				background-color: #C1113B;
			}
			@media screen and (max-width: 767px) {
				width: calc(300 / 3.75 * 1vw);
				font-size: calc(24 / 3.75 * 1vw);
				height: calc(50 / 3.75 * 1vw);
			}
		}
	}
	.size-info-box{
		h4{
			color: #C1113B;
			font-size: 18px;
			margin-bottom: 1em;
			text-indent: -1em;
			padding-left: 1em;
			&::before{
				content: "■";
			}
		}
		.flx-box{
			row-gap: 2em;
			.cont-box{
				width: 49.5%;
				@media screen and (max-width: 767px) {
					width: 100%;
					.table-title{
						row-gap: calc(4 / 3.75 * 1vw);
					}
				}
				p{
					background: none;
					color: #215C98;
					width: auto;
					border: none;
					font-weight: 700;
					@media screen and (max-width: 767px) {
						width: 100%;
						text-align: left;
					}
					&::before{
						content: "■";
					}
				}
				dl{
					font-size: 14px;
					dt{
						letter-spacing: -.04em;
						font-size: .9em;
						font-weight: 700;
					}
					dd a{
						width: 120px;
						font-size: 13px;
						font-weight: 700;
						@media screen and (max-width: 767px) {
							font-size: calc(14 / 3.75 * 1vw);
							width: calc(140 / 3.75 * 1vw);
						}
					}
				}
				.sp-scrl-notic{
					color: #000;
					font-weight: 400;
					&::before{
						content: none;
					}
				}
			}
		}
	}
}
.moni{
	.ttl-h2{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		background-color: #C1113B;
		font-size: 32px;
		margin-bottom: 1em;
		border-radius: .2em;
		@media screen and (max-width: 767px) {
			line-height: 1.25;
			font-size: calc(18 / 3.75 * 1vw);
		}
		&::after,&::before{
			content: "";
			border-left: 6px double #fff;
			display: block;
			height: 40px;
			width: 0;
			flex: 1;
			margin: .2em .3em;
			@media screen and (max-width: 767px) {
				height: auto;
				min-height: calc(26 / 3.75 * 1vw);
				border-left: calc(3 / 3.75 * 1vw) double #fff;
			}
		}
		&::after{
			border-left: none;
			border-right: 6px double #fff;
			@media screen and (max-width: 767px) {
				border-right: calc(3 / 3.75 * 1vw) double #fff;
			}
		}
		.h2-fnt-s{
			font-size: .75em;
			padding-left: .5em;
			display: inline-block;
			padding-top: .3em;
			@media screen and (max-width: 767px) {
				&.sp-fnt-ss{
					font-size: .65em;
				}
			}
		}		
	}
	h3{
		color: #215C98;
		font-size: 24px;
		margin-bottom: 1.75em;
		display: flex;
		align-items: center;
		border-left: 2px solid #215C98;
		height: 24px;
		padding-left: 1px;
		@media screen and (max-width: 767px) {
			font-size: calc(16 / 3.75 * 1vw);
			height: calc(20 / 3.75 * 1vw);
		}
		&::before{
			content: "";
			width: .4em;
			height: 100%;
			background-color: #215C98;
			border-radius: 0 100% 100% 0% / 50%;
			margin-right: .2em;
		}
		&::after{
			content: "";
			height: 2px;
			background-color: #215C98;
			margin: 0 0 0 .75em;
			flex: 1;
			@media screen and (max-width: 767px) {
				height: calc(2 / 3.75 * 1vw);
			}
		}
	}
	h4{
		line-height: 1.25;
		&.type01{
			font-size: 20px;
			margin: 1em 0 .5em;
			@media screen and (max-width: 767px) {
				font-size: calc(16 / 3.75 * 1vw);
			}
		}
		&.type03{
			color: #215C98;
			font-size: 16px;
			line-height: 1.5;
			padding: .2em .5em .2em .2em;
			margin-bottom: 1em;
			display: flex;
			&::before{
				content: "";
				border-left: 8px double #fff;
				margin-right: .5em;
			}
		}
		&.prd-num{
			font-size: 20px;
			color: #fff;
			background: #C1113B;
			margin-bottom: 1em;
			padding: .2em .5em .3em;
			border-radius: 6px;
			@media screen and (max-width: 767px) {
				font-size: calc(16 / 3.75 * 1vw);
				border-radius: calc(4 / 3.75 * 1vw);
			}
			&.bg-blu{ background-color: #215C98 ;}
		}
	}
	.cont-pl1 p{
		font-size: 18px;
		line-height: 1.75;
		margin-bottom: 1em;
		@media screen and (max-width: 767px) {
			font-size: calc(16 / 3.75 * 1vw);
		}
		&.sp-scrl-notic{
			@media screen and (max-width: 767px) {
				margin-bottom: .3em;
				font-size: calc(13 / 3.75 * 1vw);
			}
		}
	}
	ul{
		&.type01{
			font-size: 18px;
			line-height: 1.75;
			margin-bottom: 1em;
			@media screen and (max-width: 767px) {
				font-size: calc(16 / 3.75 * 1vw);
			}
			li{
				padding-left: 1.3em;
				text-indent: -1.3em;
				&::before{
					content: "■";
					color: #C1113B;
					margin-right: .3em;
				}
			}
		}
	}
	table{
		width: 100%;
		margin-bottom: 2em;
		@media screen and (max-width: 767px) {
			margin-bottom: 1em;
		}
	}
	table,table th,table td{
		border: 1px solid #888;
		padding: .5em;
		vertical-align: middle;
		font-size: 14px;
		line-height: 1.25;
		@media screen and (max-width: 767px) {
			font-size: 13px;
		}
	}
	.table-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: .5em;
		@media screen and (max-width: 767px) {
			flex-direction: column;
			row-gap: calc(16 / 3.75 * 1vw);
			margin-bottom: .5em;
			align-items: flex-end;
		}
		p{
			margin: 0;
			font-size: 14px;
			height: 26px;
			width: 120px;
			text-align: center;
			border: 1px solid #888;
			padding-bottom: .2em;
			background-color: #666;
			color: #fff;
			@media screen and (max-width: 767px) {
				font-size: calc(14 / 3.75 * 1vw);
				height: auto;
				width: 100%;
				padding: .2em 0 .3em;
			}
		}
		dl{
			display: flex;
			align-items: center;
			justify-content: space-between;
			@media screen and (max-width: 767px) {
				font-size: calc(14 / 3.75 * 1vw);
			}
			dd{
				a{
					background-color: #21b4c2;
					color: #fff;
					height: 30px;
					width: 160px;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: .1em;
					padding-left: .2em;
					margin-left: .5em;
					border-radius: 6px;
					transition: .2s ease;
					@media screen and (max-width: 767px) {
						height: calc(30 / 3.75 * 1vw);
						width: calc(140 / 3.75 * 1vw);
					}
					&::after{
						content: "（PDF）→";
						font-size: .8em;
						padding-top: .4em;
						position: relative;
					}
					&:hover{
						background: #C1113B;
					}
				}
			}
		}
	}
	table{
		&.type01{
			th{
				background-color: #eee;
				font-weight: 400;
			}
		}
		&.type02{
			th{
				background-color: #eee;
				font-weight: 400;
				text-align: left;
			}
		}
		&.type03{
			line-height: 1.5;
			padding: .4em;
			th{
				background-color: #eee;
				font-weight: 700;
			}
			td{
				text-align: center;
				font-size: 14px;
				.td-flx{
					display: flex;
					flex-direction: column;
					row-gap: .75em;
				}
			}
		}
		&.type04{
			.nb-ttl{
				border: 1px solid #fff;
				border-bottom: 1px solid #888 ; 
			}
			.nb-notic{
				border: 1px solid #fff;
				border-top: 1px solid #888
			}
		}
		&.type05{
			width: 100%;
			th{
				text-align: left;
				background-color: #ccc;
				font-weight: 400;
			}
			td{
				text-align: center;
				a{
					background-color: #21b4c2;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					color: #fff;
					border-radius: 6px;
					padding: .3em 0;
					transition: .2s ease;
					span{
						display: block;
						width: 100%;
					}
					&:hover{
						@media screen and (min-width: 767.99px) {
							background-color: #C1113B;
						}
					}
				}
			}
			thead{
				th{
					border: 2px solid #000;
					text-align: right;
				}
				td{
					color: #C1113B;
					border: 2px solid #000;
				}
			}
		}
		&.type06{
			th{
				font-size: 13px;
			}
			td{
				font-size: 13px;
				text-align: center;
				&:first-of-type{
					text-align: left;
				}
				&:last-of-type{
					background-color: #21b4c2;
					padding: .1em .2em;
					color: #fff;
				}
				a{
					border: 1px solid #eee;
					height: 100%;
					width: 100%;
					display: flex;
					justify-content: center;
					padding: .1em 0 .2em;
					transition: .2s ease;
					&:hover{
						@media screen and (min-width: 767.99px) {
							background-color: #C1113B;
						}
					}
				}
			}
			thead th{
				background: #eee;
				font-weight: 400;
			}
			tbody th{
				text-align: left;
				color: #C1113B;
				span{
					font-weight: 400;
				}
			}
			tbody th{
				background: #F2CEEF;
			}
		}
		&.tw-850p{width: 850px;}
		&.tw-800p{width: 800px;}
		&.tw-700p{width: 700px;}
		&.tw-600p{width: 600px;}
		&.tw-500p{width: 500px;}
		&.tw-400p{width: 400px;}
		.bg-col-eee{background-color: #eee;}
		.bg-col-ddd{background-color: #ddd;}
		.bg-col-ccc{background-color: #ccc;}
		.bg-col-bbb{background-color: #bbb;}
		.bg-col-aaa{background-color: #aaa;}
		.bg-col-999{background-color: #999;}
	}
	.sp-scrl-notic{
		color: #000;
		font-weight: 400;
		margin-bottom: 1em;
		font-size: 14px;
		&::before{
			content: none;
		}
	}
	.modal a{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.mdl-zoom{
			border: 1px solid #999;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15px;
			font-size: 14px;
			color: #000;
			padding: 0 3.5em 0 3em;
			background: url(/products_image/zoom_in_24.svg) right 1em center / 20px auto no-repeat;
			transition: .2s ease;
		}
		&:hover{
			@media screen and (min-width: 767.99px) {
				img{
					opacity: .7;
				}
				.mdl-zoom{
					color: #fff;
					background: #aaa url(/products_image/zoom_in_24.svg) right 1em center / 20px auto no-repeat;
				}
			}
		}
	}
}

/* モーダルセッティング */
.modaal-image .modaal-inner-wrapper {
    padding-left: 80px;
    padding-right: 80px;
	@media screen and (max-width: 767px) {
		padding: calc(50 / 3.75 * 1vw) calc(16 / 3.75 * 1vw);
	}
}

.modaal-inner-wrapper {
    display: table-cell;
    width: 100%;
    height: 100%;
    position: relative;
    vertical-align: middle;
    text-align: center;
    padding: 180px 25px 40px;
	@media screen and (max-width: 767px) {
		padding: 0;
	}
}
.modaal-close {
    position: fixed;
    right: 40px;
    top: 140px;
    color: #fff;
    cursor: pointer;
    opacity: 1;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 100%;
    transition: all 0.2s ease-in-out;
	@media screen and (max-width: 767px) {
		right: 0;
    	top: calc(60 / 3.75 * 1vw);
		width: calc(60 / 3.75 * 1vw);
    	height: calc(60 / 3.75 * 1vw);
	}
}