@charset "utf-8";

:root{
	--subColor:#ff943c;
	--lineColor:#ffba66;
}

body{
	background:url(../../img/pages/introduction/stone.png),var(--subColor);
}


#annai{/*導入費用とランニングコストについて*/
	width:min(960px,calc(100% - 40px));
	margin:0 auto;
	ul{
		margin:2rem auto 0 auto;
		li{
			text-align: left;
			margin:.3em 0 0 2em;
			font-size: 1em;
			list-style:circle;
			color:white;
			font-weight: 500;
		}
	}
}

#pay{/*ライセンス*/
	padding:2rem;
	color:rgb(var(--baceFontColor));
	background:rgba(255 255 255 /.8);
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	gap:2rem 3rem;
	align-items: center;
	border-radius: .7rem;
	width:min(960px,100%);
	margin:0 auto;
	color:#724404;
	> div{
		font-size: 1.8em;
		h3{
			font-weight: 600;
			span{
				display:block;
				font-size: .7em;
				font-weight: 400;
			}
		}
		p{
			font-size: 1.9em;
			font-weight: 600;
			
			span{
				font-size: .6em;
			}
		}
	}
	> dl{
		width:min(300px, 100%);
		font-size: 1.6em;
		font-weight: 400;
		> * + *{
			border-top:1px solid;
			padding:1rem 0 0 0;
			margin:1rem auto 0 auto;
		}
		div{
			dt{
				i{
					font-size: .8em;
				}
			}
			dd{
				font-size: 1.3em;
				font-weight: 500;
				span{
					font-size: .7em;
				}
			}
		}
	}
	@media print {
		border:2px solid silver;
	}
}

#system_image{
	> div{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
		gap:1rem;
		figure{
			--figureColor:#eee;

			background:#FEF5E4;
			padding:1rem;
			border-radius: .5rem;
			overflow: hidden;
			display: flex;
  		flex-direction: column-reverse;
			border:2px solid var(--figureColor);
			figcaption{
				color:var(--figureColor);
				margin:0 auto 1em;
				font-size: 1.2em;
				font-weight: 500;
			}
			&:nth-of-type(1){
				--figureColor: #A5675C;
			}
			&:nth-of-type(2){
				--figureColor: #E05F0F;
			}
		}
	}
	> p{
		text-align: left;
		margin:1rem auto 0 auto;
		color:white;
		font-weight: 400;
		font-size: 1.1rem;
	}
}

#other{
	--otherColor:#eee;
	background:#FEF5E4;
	padding:2rem;
	border-radius: .7rem;
	color:#724404;
	margin:2rem auto 0 auto;
	span{
		font-weight: 400;
	}
	section{
		h3{
			font-size: 1.2em;
			text-align: left;
			font-weight: 500;
			text-align: left;
			color:var(--otherColor);
			&::before{
				content:"■";
				color:var(--otherColor);
				margin:0 .3em 0 0;
			}
		}
		&:nth-of-type(1){
			--otherColor:#724404;
			table{
				width:100%;

				margin:.5em auto 0 auto;
				tr{
					th,td{
						padding:.5em;
						vertical-align: middle;
					}
					th{
						background:#FDDAC2;
						font-weight: 400;
						color:var(--otherColor);
					}
					td{
						&:nth-of-type(1),&:nth-of-type(2){
							text-align: left;
						}
						&:nth-of-type(3){
							font-weight: 400;
						}
					}
				}
			}
			aside{
				margin:1rem auto 0 auto;
				text-align: left;
				h4{
					font-weight: 400;
				}
				p{
					margin:.5em auto 0 auto;
				}
			}
		}
		&:nth-of-type(2){
			--otherColor:#f87474;
			display:grid;
			grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
			gap:2rem;
			margin:2rem auto 0 auto;
			padding:2rem 0 0 0;
			border-top:1px dotted red;
			> div{
				> p{
					text-align: left;
					margin:.5em auto 0 auto;
				}
			}
			aside{
				
				h4{
					font-weight: 400;
					color:red;
				}
				p{
					margin:.5em auto 0 auto;
					text-align: left;
				}
			}
		}
	}
	@media print {
		border:2px solid silver;
	}
}

#options{/*無料・有料オプション*/
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
	gap:3rem;
	margin:3rem auto 0 auto;

	section{
		background:#FEE7CC;
		border-radius: 1rem;
		color:#724404;
		padding:2rem;
		h3{
			font-size: 1.4em;
			font-weight: 500;
		}
		ul{
			margin:1rem auto 0 auto;
			> * + *{
				margin:1rem auto 0 auto;
			}
			li{
				h4{
					text-align: left;
					font-weight: 400;
					font-size: 1.1em;
					&::before{
						content:"●";
						font-size: .7em;
						margin:0 .3em 0 0 ;
						vertical-align: 2px;
					}
				}
				p{
					text-align: left;
					margin:.5em auto 0 auto;
				}
			}
		}
	}
	@media print {
		section{
			border:2px solid silver;
		}
	}
}

#flow{
	ul{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(230px,100%),1fr));
		gap:1em;
		li{
			background:#FEE8CF;
			padding:1.5rem;
			border-radius: .5rem;
			border:2px solid var(--lineColor);
			position:relative;
			figure{
				figcaption{
					font-weight: 500;
					margin:1rem auto 0 auto;
					color:#724404;
					font-size: 1.1em;
					span{
						position:absolute;
						font-size: 1.2em;
						left:.7em;
						top:.7em;
						width:1.5em;
						height:1.5em;
						background:#724404;
						color:white;
						border-radius: 50%;
						display:inline-block;
						padding:.1em 0 0 .1em;
					}
				}
			}
			p{
				margin:.5em auto 0 auto;
				font-size: .9em;
				text-align: left;
			}
		}
	}
}

#ikou{/*旧システムからの乗り換えをご検討の方へ*/
	padding:2rem;
	margin:5rem auto 0 auto;
	background:#FEE7CC;
	border-radius: 1rem;
	color:#724404;
	font-weight: 400;
	scroll-margin-top: 110px;
	h3{
		font-size: 1.6em;
		font-weight: 500;
		text-align: left;
		svg{
			height:1.3em;
			vertical-align:-.2em;
			fill:#724404;
		}
	}
	p{
		text-align: left;

	}
	> div{
		&:nth-of-type(1){
			display:grid;
			grid-template-columns: 2fr 1fr;
			gap:2rem;
			margin:1rem auto 0 auto;
			align-items: center;
			> div{
				> * +  *{
					margin-top:1rem;
				}
				p{
					&:nth-of-type(1),&:nth-of-type(3){
						font-size: 1.1em;
						font-weight: 500;
					}
					&:nth-of-type(1){
						color:#226abb;
					}
					&:nth-of-type(3){
						color:#3c9724;
					}
				}
			}
		}
		&:nth-of-type(2){
			margin:2em auto 0 auto;
			display:grid;
			grid-template-columns: 1fr 2fr;
			align-items: center;
			gap:2rem;
			> div{
				h4{
					font-weight: 500;
					font-size: 1.2em;
					color:rgb(var(--mainColor));
				}
				p{
					margin:.5em auto 0 auto;
					line-height: 1.6em;
				}
			}
		}
	}
	aside{
		margin:1rem auto 0 auto;
		text-align: right;
		font-size: .9em;
	}
	@media print {
		border:2px solid silver;
	}
	@media (max-width: 768px) {
		h3{
			inline-size: fit-content;
  		margin-inline: auto;
  		text-align: left;
		}
		> div{
			display:block !important;
			&:nth-of-type(2){
				display: flex !important;
  			flex-direction: column-reverse;
			}
		}
	}
}

.addtoany_content{
	margin-top:5rem !important;
}