/* CSS Document */
:root {
	--mainColor: #ECD7FF;
	--subColor: #8bf;
	--contColor: #321;
	--lightColor1: #cce6ff;
	--lightColor2: #e6f0ff;
	--accentColor: #f5a200;
}
section {
	margin: 0;
}
.mv {
	position: relative;
	display: flex;
	background: var(--mainColor);
	padding-block: 0;
	flex-direction: column;
	color: var(--contColor);
}
nav {
	background: var(--mainColor);
	height: 60px;
	color: var(--contColor);
	position: sticky;
	top: 90px;
	z-index: 300;
}
nav ul {
	height: 100%;
	gap: 1px;
	display: flex;
	justify-content: space-around;
}
nav ul li {
	width: 10%;
	height: 100%;
	flex-grow: 1;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
}
nav ul li:not(:last-of-type)::after {
	content: "";
	width: 1px;
	height: 60%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(1px, -50%);
	background: var(--contColor);
	z-index: 3000;
}
nav ul a {
	color: var(--contColor);
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	position: relative;
	line-height: 1;
	font-size: 0.8em;
	word-break: keep-all;
}
nav ul a:is(:hover, :focus) {
	color: var(--mainColor) !important;
	background: var(--contColor);
	opacity: 0.8;
	font-weight: 700;
	letter-spacing: -0.1em;
	font-size: 1.2em;
	transition: 0.5s cubic-bezier(0.13, 0.83, 0.29, 1);
}
h2 {
	border-bottom: 4px double currentColor;
	margin-block: 30px;
}

.feature3{
	display: flex;
	flex-flow: column;
	gap: 20px;
	width: 90%;
	margin-inline: auto;
	max-width: 960px;
	padding-inline: 0;
}

.feature3>li{
	display: flex;
	align-items: center;
	flex-flow: row;
	box-shadow: 0 4px 4px #0003;
	padding: 0;
	background: #f8f8f8;
}
.feature3>li>h3{
	height: 140px;
	background: #eee;
	width: 30%;
	max-width: none;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	position: relative;
	padding-inline: 1.5em 1em;
	color: #c21770;
	margin: 0;
	word-break: keep-all;
	line-height: 1.4;
}
.feature3>li>h3::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	border: 70px solid transparent;
	border-left: 30px solid #eee;
}
.feature3>li>p{
	margin: 0;
	padding: 0 2.5em 0 50px;
}

.cardsList{
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	justify-content: center;
	margin: 0;
	padding: 30px 0;
}

.cardsList li{
	width: 90%;
	max-width: 360px;
	height: 100px;
	line-height: 1.4;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-radial-gradient(circle at -40% 100%,#fbb0 0px, #fbb1 12px, #fbb0 24px 40px), repeating-radial-gradient(circle at 100% -350%, #fbb0 0px, #faa1 24px, #fbb0 48px 60px), linear-gradient(135deg, #fce, 10%, #f8f8f8);
	box-shadow: 0px 4px 4px #0003;
	position: relative;
	overflow: hidden;
}
.cardsList li a{
	padding: 2em 3em;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 559px) {
	.feature3>li{
		flex-flow: column;
	}
	.feature3>li>h3{
		width: 70%;
		margin-right: auto;
	}
	.feature3>li>p{
		width: 100%;
		padding: 1em;
	}
}
.tips {
	max-width: 960px;
	margin: 20px auto;
	display: flex;
	background: var(--lightColor1);
	padding: 30px 30px;
	gap: 30px;
	align-items: center;
}
.tips .tipsHead {
	display: block;
	width: 10em;
	flex-shrink: 0;
	padding: 10px 15px;
	border: 3px dashed #69c;
	text-align: center;
}
.tips p {
	padding: 0;
}
table {
	text-align: center;
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing: 0;
	width: 80%;
}
thead th {
	background: #E04E77;
	color: #fff;
}
table th, td {
	padding: 5px 10px;
	border: 1px solid #666;
}
/* ライブラリー（smartoffice-printer）スタイル */
.printerTitle{
	font-weight: 700;
	margin: 0 auto;
}
.printerList{
	list-style-type: disc;
	text-align: left;
	padding-left: 20px;
	width: fit-content;
}
.printerAnnotation{
	font-size: 0.8em;
}
.printerBr{
	display: none;
}
@media screen and (max-width: 959px) {
	nav {
		top: 60px;
	}
}
@media screen and (max-width: 559px) {
	.featureBox .headerBox h3 {
		min-width: 120px;
		font-size: 14px;
	}
}
@media screen and (min-width: 960px) {
	.mv {
		position: relative;
		display: flex;
		background: var(--mainColor);
		height: clamp(0px, calc(100vw / 3), 400px);
		padding-block: 0;
		flex-direction: row-reverse;
		color: var(--contColor);
	}
	h1 {
		border: none;
		margin-inline: auto;
	}
	nav ul a {
		flex-flow: row;
		font-size: 1em;
	}
}
.NAS {
	display: inline;
	color: #c00;
	font-weight: 700;
	background: #fcc;
}