@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
　　v2.0 | 20110126 
　　License: none (public domain)
*/
/*　　　 CSSリセット　　　*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	-webkit-text-size-adjust: 100%;
}

/*　　　 CSSリセット　ここまで　　　*/

body {
	font-family: 'メイリオ', 'Meiryo', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 15px;
	color: #333;
	margin: 0px;
	padding: 0px;
	line-height: 1.5em;
}

.pagenavi {
	font-size: 12px;
	padding: 0px;
	padding-left: 14px;
	margin-top: 4px;
	margin-right: auto;
	margin-bottom: 4px;
	margin-left: auto;
	max-width: 1300px;
	min-width: 850px;
	padding-top: 110px;
}

.pagenavi a {
	text-decoration: none;
}

/* --------------------------- 本文共通文字サイズ ------------------------------------*/

.mainright p,
.mainright ul,
.mainright ul li,
.mainright ol,
.mainright ol li,
.mainright table td,
.mainright dl dt,
.mainright dl dd,
.mainright {
	text-align: justify;
	font-size: 15px;
	line-height: 1.6em;
}

/* --------------------------- リスト調整 ------------------------------------*/
.mainright ul,
.mainright ol {
	width: auto;
	box-sizing: border-box;
	padding: 0.5em 0.5em 0.5em 2em;
}

.mainright ul li,
.mainright ol li {
	margin-right: 1.0em;
}


/* ------------------------- 本文用 -----------------------------*/
.mainbody {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-width: 850px;
	width: 100%;
	background-image: url(../img/mainbody_bk.jpg);
	background-repeat: repeat-x;
	border-top: 4px solid rgb(178, 188, 68);
	padding-top: 10px;
	padding-bottom: 100px;

}

.mainleft {
	width: 300px;
	margin: 0;

}

.mainright {
	width: calc(98% - 300px);
	min-width: 630px;
	max-width: 1000px;
	text-align: center;
	background-color: #FFFFFF;
}


/* ------------------------- 本文エリア -----------------------------*/
.common-mainTxt-area {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 80px;
	margin-left: auto;
	display: block;
	max-width: 950px;
}

.common-mainTxt-area h2 {
	font-size: 28px;
	line-height: 1.6em;
	font-weight: normal;
	margin: 0px 10px 30px;

	padding-top: 50px;
	color: #333;
	text-align: center;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: rgb(var(--image-color-accent));
	display: inline-block;
}

.headline-left .common-mainTxt-area h2 {
	text-align: left;
	display: block;
	margin: 0px 30px 30px;
	padding-left: 5px;
}

.common-mainTxt-area h3 {
	color: #555;
	font-size: 20px;
	font-weight: bold;
	border-left: 4px solid rgb(var(--image-color-accent));
	margin: 50px 30px 30px;
	padding: 6px 0 6px 1.0em;
	display: block;
	text-align: left;
}

.common-mainTxt-area h4 {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0;
	padding: 50px 10px 10px 10px;
}

.common-mainTxt-area p {
	display: block;
	margin: 20px auto;
	padding-left: 30px;
	padding-right: 30px;
	text-align: left;

}



/*  リンクボタン */
section.common-mainTxt-area p.common-link-btn,
section.common-mainTxt-area div.common-link-btn,
section.common-pr-area p.common-link-btn,
.common-article-area p.common-link-btn {
	font-size: 15px;
	line-height: 1.6em;
	margin: 20px 10px;
	text-align: center;
	display: block;

}

section.common-mainTxt-area p.common-link-btn a,
section.common-mainTxt-area div.common-link-btn a,
section.common-pr-area p.common-link-btn a,
.common-article-area p.common-link-btn a {
	color: #fff;
	margin: 0 10px 20px;
	padding: 10px 20px 6px 20px;
	border: 1px solid rgb(var(--image-color));
	text-align: center;
	border-radius: 6px;
	display: inline-block;
	background-color: rgb(var(--image-color));
	text-decoration: none;
}


/* リンクボタン common-pr-area p用、common-mainTxt-area div用 */

section.common-mainTxt-area div.common-link-btn,
section.common-pr-area p.common-link-btn {
	margin: 0px;
	padding: 0;
	text-align: left;
}

section.common-mainTxt-area div.common-link-btn a,
section.common-pr-area p.common-link-btn a {
	font-weight: bold;
	margin: 10px 0px;
	padding: 10px 20px 6px 20px;
}

section.common-mainTxt-area p.common-link-btn a:hover,
section.common-mainTxt-area div.common-link-btn a:hover,
section.common-pr-area p.common-link-btn a:hover {
	background-color: #fafafa;
	color: rgb(var(--image-color));
	transition: 0.3s ease-in-out;

}

.common-mainTxt-area ul,
.common-mainTxt-area ol,
.common-article-area ul,
.common-article-area ol,
.common-pr-area ul,
.common-pr-area ol {
	padding-left: 1.0em;
	padding-right: 1.0em;
	margin: 10px 30px;
}

.common-mainTxt-area ul li,
.common-mainTxt-area ol li,
.common-article-area ul li,
.common-article-area ol li,
.common-pr-area ul li,
.common-pr-area ol li {
	padding-left: 0;
	padding-right: 0;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	margin-left: 1.0em;
	margin-right: 0;
}

.common-mainTxt-area ul li ul,
.common-mainTxt-area ul li ol,
.common-mainTxt-area ol li ul,
.common-mainTxt-area ol li ol,
.common-article-area ul li ul,
.common-article-area ul li ol,
.common-article-area ol li ul,
.common-article-area ol li ol {
	padding-left: 0;
	padding-right: 0;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	margin-left: 1.0em;
	margin-right: 0;
}

.common-pr-area a,
.common-mainTxt-area a,
.pagenavi a {
	text-decoration: none;
	color: #06c;
}

.common-pr-area a:hover,
.common-mainTxt-area a:hover,
.pagenavi a:hover {
	text-decoration: none;
	color: #f60;
}



/* ---------------------- トップPR ------------------------------------*/
.common-top-title-area {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

.common-top-title-area p {
	text-align: center;
	display: block;
	margin: 20px auto;
	padding-left: 30px;
	padding-right: 30px;
	/* padding: 20px 5%;
	margin: auto;  */
	max-width: 900px;
}


.common-top-title-area p a {
	text-decoration: none;
	color: #06c;
}

.common-top-title-area p a:hover {
	text-decoration: none;
	color: #f60;
}

.common-top-title-area .common-top-title-logo {
	width: 100%;
	max-width: 750px;
}

.common-top-title-area .common-top-title-icon {
	width: 150px;
	height: 150px;
	margin: 20px;
	margin-right: 0;
}

.common-top-title-area img.common-top-title-image {
	width: 100%;
}

/* トップ画像背景 */
/* 製品個別 */

.common-top-title-bg {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	/* テキストの場合 */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 60px;
	min-height: 300px;
	line-height: 1.1em;
	padding: 0.2em;
	text-shadow: 0 0 10px #fff;
}

.common-top-title-area h2 {
	/*	font-family:"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "HG明朝E", "MS PMincho", "MS 明朝", serif; */
	font-size: 29px;
	line-height: 1.6em;
	font-weight: normal;
	color: #000000;
	margin: 0;
	margin-bottom: 30px;
	width: auto;
	padding: 1.6em 1.4em 0 1.4em;
	text-align: center;
	word-break: break-all;
}

.common-top-title-area h3 {
	font-size: 28px;
	position: relative;
	color: rgb(var(--image-color));
	line-height: 1.6em;
	padding: 0.25em 1.5em;
	display: inline-block;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 50px;
	text-align: center;
}

.common-top-title-area h3:before,
.common-top-title-area h3:after {
	content: '';
	width: 20px;
	height: 30px;
	position: absolute;
	display: inline-block;
}

.common-top-title-area h3:before {
	border-left: solid 3px #ccc;
	border-top: solid 3px #ccc;
	top: 0;
	left: 0;
}

.common-top-title-area h3:after {
	border-right: solid 3px #ccc;
	border-bottom: solid 3px #ccc;
	bottom: 0;
	right: 0;
}

.common-top-title-area h4 {
	font-size: 18px;
	line-height: 1.6em;
	font-weight: bold;
	margin-top: 40px;
	color: #333;
}


/* -------------------------　CTAボタン　---------------------------*/

.common-cta-btn {
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
	align-items: center;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	position: absolute;
	bottom: 10%;
	right: 0;
	width: 100%;
	font-family: 'メイリオ', 'Meiryo', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ＭＳ Ｐゴシック', sans-serif;


}

a.common-cta-btn01,
a.common-cta-btn02 {
	font-size: 16px ;
	color: #fff;
	position: relative;
	display: inline-block;
	text-decoration: none;
	padding: 1em 1em 1em 60px;
	border-radius: 100vh;
	width: 100%;
	max-width: 300px;
	transition: all .2s;
	box-shadow: 0 3px 5px rgb(0 0 0 / 50%);
	height: auto;
	line-height: 1.5em;
	text-shadow: none;
	letter-spacing: .1em;

}

/* ボタンの色 */
.common-cta-btn01 {
	background: rgb(var(--image-color-accent));
}

.common-cta-btn02 {
	background: rgb(var(--image-color-accent));
}

a.common-cta-btn01::before,
a.common-cta-btn02::before {
	content: '';
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: cover;
}


/* カタログアイコン */
a.common-cta-btn01::before {
	width: 40px;
	height: 40px;
	background-image: url(../img/common_img/catalog-icon.png);
}

/* ダウンロードアイコン */
a.common-cta-btn02::before {
	width: 40px;
	height: 40px;
	background-image: url(../img/common_img/trial-icon.png);
}

.common-cta-btn img {
	width: 1em;
	margin-right: 0.5em;
}

/* マウスオーバー時 */
a.common-cta-btn01:hover,
a.common-cta-btn02:hover {
	box-shadow: none;
	transform: scale(0.99, 0.99) translateY(2px);
	color: #fff;
}

.common-cta-btn-copy {
	font-size: 90%;
	font-weight: bold;
	color: initial;
	position: absolute;
	top: -2em;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 100%;
}

.common-cta-btn-copy:before {
	margin-right: .2rem;
	content: '＼';
}

.common-cta-btn-copy:after {
	margin-left: .1rem;
	content: '／';
}

.common-cta-btn-wrap {
	position: relative;
}

.cta-option-right {
	justify-content: right;
	padding-right: 50px;
}

.cta-option-left {
	justify-content: left;
	padding-left: 50px;
}


/* ------------------------- PRエリア -----------------------------*/
.common-pr-area {
	margin: 0px 0 80px 0;
	text-align: center;
	justify-content: center;
	align-items: center;
	padding-top: 80px;
}

/* pr h2 */
.common-pr-area h2 {
	font-size: 28px;
	position: relative;
	color: rgb(var(--image-color));
	line-height: 1.6em;
	padding: 0.25em 1.5em;
	display: inline-block;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 50px;
	text-align: center;
}

.common-pr-area h2:before,
.common-pr-area h2:after {
	content: '';
	width: 20px;
	height: 30px;
	position: absolute;
	display: inline-block;
}

.common-pr-area h2:before {
	border-left: solid 3px #ccc;
	border-top: solid 3px #ccc;
	top: 0;
	left: 0;
	margin-left: .5em;
}

.common-pr-area h2:after {
	border-right: solid 3px #ccc;
	border-bottom: solid 3px #ccc;
	bottom: 0;
	right: 0;
	margin-right: .5em;
}


/* pr h3 */
.common-pr-area h3 {
	font-size: 18px;
	line-height: 1.6em;
	font-weight: bold;
	margin-top: 40px;
	color: #333;
}

.common-pr-area p {
	display: block;
	margin: 20px auto;
	padding-left: 30px;
	padding-right: 30px;
	/* padding: 20px 5%;
	margin: auto; */
}

.common-pr-area p a {
	text-decoration: none;
	color: #06c;
}

.common-pr-area p a:hover {
	text-decoration: none;
	color: #f60;
}


.common-pr-area img {
	max-width: 100%;
	padding: 0px;
	margin: auto;
}

.common-article-area figure,
.common-pr-area figure {
	padding: 40px 0;
	margin: auto;
	display: block;
}


.common-article-area figure img,
.common-pr-area figure img {
	padding: 0px;
	margin: auto;
	display: block;
}

.common-article-area figure figcaption,
.common-pr-area figure figcaption {
	padding: 10px;
	margin: 0;
	text-align: center;
	display: block;
}

/* ------------------------- 記事エリア -----------------------------*/

article.common-article-area {
	margin: 40px auto;
	display: block;
	max-width: 800px;
	padding: 0 15px;
	text-align: left;
}

section.common-article-area {
	margin: 20px auto 0;
	display: block;
	max-width: 900px;
	padding: 0 15px;
	text-align: left;
}


.common-article-area p {
	margin: 20px auto;
	display: block;
	text-align: justify;
	padding-left: 30px;
	padding-right: 30px;
}


.common-article-area a {
	text-decoration: none;
	color: #06c;
}

.common-article-area a:hover {
	color: #f60;
}

.common-article-area h1 {
	font-size: 29px;
	line-height: 1.6em;
	margin: 0 5px;
	color: #333;
	/* border-bottom: 3px solid rgb(var(--image-color-accent)); */
	display: inline-block;
	font-weight: bold;
	text-align: left;
}

.common-article-area h2 {
	display: block;
	font-size: 25px;
	padding-top: 20px;
	padding-bottom: 5px;
	border-bottom: 2px solid rgb(var(--image-color-accent));
	line-height: 1.6em;
	font-weight: bold;
	text-align: left;
	margin: 0 30px 30px;
}

.common-article-area h3 {
	color: #555;
	font-size: 22px;
	line-height: 1.6em;
	border-left: 5px solid rgb(var(--image-color-accent));
	margin: 20px 25px 20px;
	padding: 4px 0 4px 1.0em;
	display: block;
	text-align: left;
	font-weight: bold;
}

.common-article-area section>h4 {
	position: relative;
	padding: 0 .5em .4em 1.7em;
	border-bottom: 1px dotted #ccc;
	font-size: 20px;
	color: #555;
	margin: 30px 30px 10px;
}

.common-article-area section>h4::after {
	position: absolute;
	top: .1em;
	left: .4em;
	z-index: 2;
	content: '';
	width: 14px;
	height: 14px;
	background-color: #ccc;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.common-article-area h4 {
	display: block;
	font-size: 16px;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

.common-article-area p.date {
	text-align: right;
	margin: auto;
}

.common-article-area img {
	display: block;
	margin: auto;
	max-width: 100%;
}

.common-article-area aside ul.common-relatedItem-wrap {
	border: 0;
	/* padding-bottom:30px; */
	justify-content: space-between;
}

.common-article-area aside .common-relatedItem-wrap li {
	width: 45%;
}

.common-article-area aside .common-relatedItem-wrap p {
	margin-top: 10px;
	padding: 0 10px 0 5px;
}

.common-article-area section {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* .common-article-area > section {
	margin-right: 40px;
	margin-left: 40px;
} */

.common-article-area aside {
	margin: 30px 0;
}

aside.common-note {
	position: relative;
	margin: 20px 40px 50px;
	padding: 0.5em 1em;
	border: dotted 2px #069;
	border-radius: 8px;
}

.common-note .common-note-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 1.3em;
	background: #FFF;
	font-weight: bold;
}

.common-note p {
	margin: 10px;
	padding: 0;
	font-size: 14px;
	line-height: 1.6em;
}

p.reference-link {
	text-align: right;
	font-size: 12px;
}

.category-tag {
	padding: 0;
	margin-right: 50%;
	background: #f1f1f1;
	color: #707070;
	font-size: 15px;
	padding: 2px 10px;
	white-space: nowrap;
	display: inline-block;
	margin-bottom: 10px;

}

.common-article-area .common-option-dash {
	font-weight: bold;
	font-size: 18px;
	padding: 0 30px 10px;
	display: inline-block;
	line-height: 1.5;

}

.common-article-area .common-option-dash:before {
	font-family: "ＭＳ Ｐゴシック", sans-serif;
	content: '――';
	letter-spacing: -.2em;
	width: 2em;
	display: inline-block;
}

p.article-subtitle {
	text-align: left;
	margin: 5px 5px 0;
	padding: 0;
}

p.case-company-name {
	text-align: right;
	margin: 30px auto 0;
}

/* 記事内広告風バナー */
.article-banner {
	border: 1px solid #ccc;
	margin: 10px 30px;
	padding: 20px;
	display: flex;
	position: relative;
	transition: all .3s ease-out;
}

.article-banner img {
	width: 40%;
	margin: 0;
	object-fit: contain;
	max-height: 180px;
}

.article-banner-text {
	width: 60%;
	padding-left: 20px;
}

.article-banner-text p {
	margin: 10px;
	padding: 0;
}

p.article-banner-title {
	font-weight: bold;
	font-size: 18px;
}

p.article-banner-function {
	font-size: 14px;
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 4px 6px 2px 6px;
	border-radius: 4px;
	display: inline-block;
	margin: 10px 30px 0;
}

p.article-banner-detail {
	text-align: center;
	color: white;
	background-color: rgb(var(--image-color));
	margin: 0 10px 0 auto;
	padding: 5px;
	width: 120px;
}

.article-banner a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.article-banner:hover {
	border: 1px solid rgb(var(--image-color));
	background-color: #fafafa;
	transition: all .3s ease-out;
}



/* ------------------------- 記事一覧ページ -----------------------------*/

.common-article-card-wrap {
	max-width: 900px;
	margin: 0 auto 60px;
}

.common-article-card-wrap ul {
	padding: 0;
	list-style: none;
	border: none;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}

.common-article-card-body h2.article-title {
	font-size: 18px;
	line-height: 1.56;
	margin: 0;
	font-weight: bold;
	color: #313131;
	margin-bottom: 10px;
	padding-top: 0;
}

.common-article-card-body time.article-time {
	font-size: 14px;
	line-height: 1.56;
	margin: 0;
	color: #707070;
	margin-bottom: 5px;
}

.common-article-card-body ul.article-tag {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.common-article-card-body ul.article-tag li {
	background: #f1f1f1;
	color: #707070;
	font-size: 12px;
	padding: 2px 10px;
	position: relative;
	margin: 0;
}

.common-article-card-wrap ul li.common-article-card {
	width: 45%;
	position: relative;
	padding: 0;
	margin: 20px 10px 0;
}

li.common-article-card a {
	flex-direction: column;
	padding: 20px;
	height: 100%;
	display: flex;
	text-decoration: none;
	border: solid 1px #eee;
	transition: all .3s ease-out;
}

li.common-article-card a img {
	margin: 0 0 10px;
	height: 145px;
	object-fit: cover;
}

li.common-article-card a:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: all .3s ease-out;
}

.common-article-card-body p {
	font-size: 14px;
	line-height: 1.56;
	margin: 0;
	color: #707070;
	margin-bottom: 5px;
	padding: 0;
}



/* ---------------------------- FAQ用 ------------------------------*/

.common-faq-list {
	margin: 30px 40px 0;
}

.common-faq-list>dl {
	position: relative;
	margin: 30px 0 0;
	/* border: 1px solid #f2f2f2; */
}

.common-faq-list>dl:first-child {
	margin-top: 0;
}

.common-faq-list>dl>dt::after {
	position: absolute;
	top: 20px;
	right: 26px;
	display: block;
	width: 7px;
	height: 7px;
	margin: auto;
	content: '';
	transform: rotate(135deg);
	border-top: 2px solid #000;
	border-right: 2px solid #000;
}

.common-faq-list>dl>dt {
	position: relative;
	margin: 0;
	padding: 15px 10px 15px 60px;
	/* font-weight: bold; */
	background: #f2f2f2;
	cursor: pointer;
}

.common-faq-list>dl>dt::before {
	font-size: 22px;
	line-height: 1;
	position: absolute;
	top: 15px;
	left: 20px;
	display: block;
	content: 'Q.';
	font-weight: bold;
	color: #3285bf;
}

.common-faq-list>dl>dd {
	position: relative;
	/* display: none; */
	margin: 0;
	padding: 15px 10px 10px 60px;
}

.common-faq-list>dl>dd::before {
	font-size: 22px;
	line-height: 1;
	position: absolute;
	left: 20px;
	display: block;
	content: 'A.';
	font-weight: bold;
	color: #c45366;
}

.common-faq-list>dl p {
	padding-left: 0;
	margin: 20px 0 0;
	padding-right: 50px;
}

.common-faq-list>dl p:first-child {
	margin-top: 0;
}

.common-faq-list p img {
	display: block;
	margin: auto;
	text-align: center;
}

/* ---------------------------- POD版マニュアル用 ------------------------------*/
.common-pod-image p {
	display: block;
	margin: 30px auto 0;
	text-align: center;
}

.common-pod-image img {
	max-width: 300px;
	border: 1px solid #c1c1c1;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}


/* ---------------------------- 共通アイコン用 ------------------------------*/

/* ---------- PDFDLボタン -------------------*/

a.commmon-pdf-btn {
	width: auto;
	font-size: 13px;
	line-height: 1.6em;
	margin: 6px 10px;
	padding: 6px 20px 4px 34px;
	background-color: #f6f6f6;
	border: 1px solid #666;
	border-radius: 4px;
	background-image: url(../img/common_img/common-icon-pdf.png);
	background-repeat: no-repeat;
	background-position: 5px center;
	text-decoration: none;
	display: inline-block;
	color: #333;
}

a.commmon-pdf-btn:hover {
	background-color: #cecece;
	color: #333;
}



/* ---------- 関連情報 用アイコン -------------------*/

.common-relatedLink-wrap {
	margin: 0;
	padding: 0;

}

.common-relatedLink-wrap ul.common-relatedLink {
	margin: 0;
	margin-top: 20px;
	margin-bottom: 60px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.common-relatedLink-wrap ul.common-relatedLink li {
	vertical-align: middle;
	margin: 0px;

}

.common-relatedLink-wrap ul.common-relatedLink li a {
	width: 290px;
	height: 80px;
	font-size: 15px;
	line-height: 1.6em;
	margin: 6px 10px;
	padding-left: 80px;
	padding-right: 10px;
	background-color: #fafafa;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: 5px center;
	background-size: 60px 60px;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	display: flex;
	align-items: center;

}

.common-relatedLink-wrap ul.common-relatedLink li a:hover {
	border: 1px solid #999;
	background-color: #fff;
	color: #333;
}

.common-relatedLink-catalog {
	background-image: url(../img/common_img/common-icon-catalog.png);
}

.common-relatedLink-trial {
	background-image: url(../img/common_img/common-icon-trial.png);
}

.common-relatedLink-update {
	background-image: url(../img/common_img/common-icon-update.png);
}

.common-relatedLink-support {
	background-image: url(../img/common_img/common-icon-support.png);
}

.common-relatedLink-faq {
	background-image: url(../img/common_img/common-icon-faq.png);
}

.common-relatedLink-inquiry {
	background-image: url(../img/common_img/common-icon-inquiry.png);
}

.common-relatedLink-file {
	background-image: url(../img/common_img/common-icon-file.png);
}

.common-relatedLink-info {
	background-image: url(../img/common_img/common-icon-info.png);
}

.common-relatedLink-usage {
	background-image: url(../img/common_img/common-icon-usage.png);
}

.common-relatedLink-crossmedia {
	background-image: url(../img/common_img/common-icon-crossmedia.png);
}

.common-relatedLink-demosite {
	background-image: url(../img/common_img/common-icon-demosite.png);
}

.common-relatedLink-maintenanceService {
	background-image: url(../img/common_img/common-icon-maintenanceService.png);
}

.common-relatedLink-old {
	background-image: url(../img/common_img/common-icon-old.png);
}

.common-relatedLink-mypage {
	background-image: url(../img/common_img/common-icon-mypage.png);
}

/* ----------------- 共通アイコン用 ここまで ---*/

/* Newアイコン */
img.common-icon-new {
	display: inline-block;
	vertical-align: middle;
	height: 1.0em;
	top: -0.1em;
	position: relative;
	margin-right: 0.15em;
	margin-left: 0.2em;
}

img.common-icon-inline,
.common-faq-list p img.common-icon-inline {
	display: inline-block;
	vertical-align: middle;
	height: 1.5em;
	top: -0.1em;
	position: relative;
	margin-right: 0.1em;
	margin-left: 0.2em;
	width: auto;
}

/* 上記 FAQでインラインで画像を入れたい場合を追加 */


.common-icon {
	height: 30px;
	width: 30px;
}

/*---------------- コードコピー用 -----------------------------*/

textarea.common-code {
	width: 96%;
	height: 10em;
	background-color: #ffe;
	padding: 10px;
	font-size: 14px;
	line-height: 1.6em;
	margin: 30px 0px;
	border-color: #ccc;
}

/* ---------------- 問い合わせフォーム -------------------------------- */


.common-inquiry-wrap {
	width: 100%;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 80px;
	background-color: #fafafa;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.common-inquiry-wrap dl {
	padding: 0;
	padding-right: 1.0em;
	color: #333;
	height: auto;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	display: inline-block;
	width: auto;
}

.common-inquiry-wrap div {
	padding: 0 12px;
	margin: auto;
}

.common-inquiry-wrap .large {
	border-bottom: 2px solid #666;
}

.common-inquiry-wrap div::before {
	content: "";
	background-color: rgb(var(--image-color));
	width: 65px;
	height: 65px;
	-webkit-mask-size: cover;
	mask-size: cover;
	vertical-align: -30%;
	display: inline-block;
	margin-top: 20px;
}

.common-inquiry-wrap .small::before {
	width: 50px;
	height: 50px;
}

.common-inquiry-wrap .small2::before {
	width: 50px;
	height: 50px;
	vertical-align: top;
}

.common-inquiry-wrap .small2 dl,
.common-inquiry-wrap .small2 dt,
.common-inquiry-wrap .small2 dd {
	padding-right: 0;
}


.common-inquiry-wrap .common-inquiry-mail-wrap::before {
	-webkit-mask-image: url("../img/common_img/common-icon-mail.svg");
	mask-image: url("../img/common_img/common-icon-mail.svg");

}

.common-inquiry-wrap .common-inquiry-tel-wrap::before {
	-webkit-mask-image: url("../img/common_img/common-icon-tel.svg");
	mask-image: url("../img/common_img/common-icon-tel.svg");

}

.common-inquiry-wrap .common-inquiry-form-wrap::before {
	-webkit-mask-image: url("../img/common_img/common-icon-form.svg");
	mask-image: url("../img/common_img/common-icon-form.svg");

}


.common-inquiry-wrap dl dt {
	font-size: 16px;
	line-height: 1.2em;
	margin: 0;
	padding: 10px;
	padding-bottom: 0px;
}

.common-inquiry-wrap dl dd {
	font-family: Arial;
	font-weight: bold;
	font-size: 28px;
	width: auto;
	margin: 0px;
	padding: 10px;
	padding-top: 5px;
	line-height: 1.2em;
}

.common-inquiry-wrap .common-inquiry-form dd {
	font-size: 1.4em;
}

.common-inquiry-wrap dl dd a {
	text-decoration: none;
	color: rgb(var(--image-color));
}

.common-inquiry-wrap dl dd a:hover {
	text-decoration: underline;
	color: #f60;
}

.common-inquiry-wrap .small dl dd,
.common-inquiry-wrap .small2 dl dd {
	font-family: 'メイリオ', 'Meiryo', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ＭＳ Ｐゴシック', sans-serif;
	font-weight: bold;
	font-size: 20px;
}

.common-inquiry-wrap .small2 dl dt {
	line-height: 1.4em;
}



/* ---------------------- トップページ 機能一覧エリア -----------------------*/

.common-function-wrap {
	background-color: rgb(var(--image-color-light));
	border-radius: 15px;
	min-width: auto;
	margin: auto;
	padding: 2px 0 50px 0;
}

.common-function-list {
	width: 100%;
	text-align: center;
	margin: 0;
	margin: 50px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}

.common-function-list li {
	width: 30%;
	min-width: 250px;
	flex-direction: column;
	margin: 5px;
	margin-bottom: 60px;
	list-style-type: none;
}

.common-function-list li .common-function-icon {
	text-align: center;
}

.common-function-list li .common-function-icon img {
	width: 150px;
	height: 150px;
	border-radius: 0;
	border: 0;
	text-align: center;
	padding: 0px;
}

.common-function-list li a:hover .common-function-icon img {
	opacity: 0.7;
}

.common-function-list li .common-function-title {
	padding: 0 10px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
	color: rgb(var(--image-color));
	text-decoration: none;
	text-align: center;
}

.common-function-list li a {
	text-decoration: none;
}

.common-function-list li a .common-function-title {
	color: rgb(var(--image-color));
}

.common-function-list li a:hover .common-function-title {
	color: #f60;
}

/* 2カラム用レイアウト　画像左 */
.common-columns-wrap {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
}

.common-columns-wrap p {
	padding: 40px 20px 20px 20px;
	margin: auto 0px;
	width: 400px;
}

.common-columns-wrap figure {
	padding: 0;
	margin: 20px;
}

.common-columns-wrap figure img {
	padding: 0;
	padding-top: 40px;
	margin: 0px;
}


/* ------------------------- トップページ以外のタイトルエリア -----------------------------*/

.common-pageTop-area {
	margin: 0;
	padding: 0;
	margin-top: 20px;
}

.common-pageTop-area h1,
.common-mainTxt-area h1 {
	font-size: 29px;
	line-height: 1.6em;
	display: inline-block;
	font-weight: bold;
	text-align: center;
	margin: 10px;
	margin: 10px 5px 20px;
}

.common-mainTxt-area h1 {
	margin-top: 30px;

}

.single-layout .common-mainTxt-area h1.title-option-margin {
	margin-top: 60px;
	margin-bottom: 60px;
	padding-bottom: 1.6em;
	display: block;
	border-bottom: 1px solid #333;
}

.common-pageTop-name {
	/* font-size: 16px;
	font-weight: normal;
	display: inline-block;
	margin: 0px;
	margin-right: 10px;
	padding: 10px;
	padding-bottom: 3px; */
	display: none;
}

.common-pageTop-name-display {
	display: inline-block;
	font-size: 23px;
	margin-right: 10px;

}

.common-pageTop-area p {
	margin: 20px auto;
	text-align: center;
	display: block;
	padding-left: 70px;
	padding-right: 70px;
}

/* .common-pageTop-area p:first-of-type {
	margin-top: 50px;
} */

.common-pageTop-area p:last-of-type {
	margin-bottom: 50px;
}

.common-pageTop-area dl {
	margin: 10px 30px;
}

/*------------------------ お知らせ用 -------------------------*/

.common-info-wrap {
	margin: auto;
	padding: 30px 0;
	text-align: justify;
	max-width: 950px;
}

.common-info-wrap dl {
	display: flex;
	flex-wrap: nowrap;
	border-bottom: 1px solid #ccc;
	margin: 10px;
	margin-bottom: 20px;
	padding: 0;
	padding-bottom: 10px;
}

.common-info-wrap dl dt {
	display: flex;
	flex-direction: column;
}

.common-info-wrap dl dt .common-info-label {
	font-size: 11px;
	line-height: 1.0em;
	margin: 0px;
	padding: 6px 6px 4px 6px;
	background-color: rgb(var(--image-color));
	color: #fff;
	width: auto;
	text-align: center;
	white-space: nowrap;
	width: 11.0em;
}

.common-info-wrap dl dt .common-info-date {
	font-size: 14px;
	margin: 0px;
	padding: 10px 4px 2px 4px;
	color: #333;
	white-space: nowrap;

}

.common-info-wrap dl dd {
	margin: 0 10px;
	padding: 0;
	padding-left: 1.0em;
}

.common-info-wrap dl dd p {
	margin: 0 0 0.8em 0;
	padding: 0;
}

.top-info-old {
	text-align: right;
}

/*------------------------ 注意事項表示 -------------------------*/
dl.common-caution-text {
	border: 3px solid #ccc;
	border-radius: 6px;
	padding: 0;
	text-align: justify;
	max-width: 900px;
	margin: 30px auto 50px;
	height: auto;
	background-color: #fafafa;
}

dl.common-caution-text dt {
	text-align: left;
	margin: 0px;
	padding: 6px 10px 4px 40px;
	line-height: 1.6em;
	font-weight: bold;
	height: auto;
	font-size: 17px;
	background-color: #ccc;
	background-image: url(../img/common_img/common-icon-notice.png);
	background-repeat: no-repeat;
	background-position: 4px 2px;
}

dl.common-caution-text dd {
	margin: 0;
	padding: 10px;
	background-color: #fafafa;
	height: auto;
}

dl.common-caution-text dd ul {
	margin: 0px;
	padding: 0 30px 10px;
}

dl.common-caution-text dd ul li {
	line-height: 1.6em;
	margin: 10px 20px;
	padding: 0px;
}

dl.common-caution-text dd p {
	padding: 0 15px;
}

dl.common-caution-text a {
	text-decoration: none;
	color: #06c;
}

dl.common-caution-text a:hover {
	color: #f60;
}

/* 注意表示 */
.common-caution-box {
	position: relative;
	margin: 2em 15px;
	padding: 25px 10px 7px;
	border: solid 2px #FFC107;
	background-color: #fff;
}

.common-caution-box .box-title {
	position: absolute;
	display: inline-block;
	top: -2px;
	left: -2px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #FFC107;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 0.2em;
}

.common-caution-box p {
	margin: 10px auto;
}

/*------------------------ 告知表示 -------------------------*/

.common-announce-box {
	position: relative;
	display: block;
	margin: 0 20px 80px;
	padding: 55px 25px 20px;
	line-height: 1.4;
	background: rgb(251, 251, 229);
	border: solid 1px #f4ce46;
}

.common-announce-box-ribbon {
	display: inline-block;
	margin: 0 0 0 -5px;
	padding-top: 8px;
	/* max-width: 100%; */
	height: 49.6px;
	position: absolute;
	top: 5px;
	left: 0;
	color: white;
	box-sizing: border-box;
	background-color: #e86b65;

}

p.common-announce-box-title {
	margin: 0;
	margin-top: 3px;
	padding-left: 25px;
	padding-right: 30px;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1.2em;
}

.common-announce-box-title:before {
	position: absolute;
	top: 100%;
	left: 0;
	border: none;
	border-right: solid 5px #fb6e67;
	border-bottom: solid 5px transparent;
	content: '';
}

.common-announce-box-title:after {

	position: absolute;
	content: '';
	width: 0px;
	height: 0px;
	z-index: 1;
	top: 0;
	right: 0;
	border-width: 25px 15px 25px 0px;
	border-color: transparent rgb(251, 251, 229) transparent transparent;
	border-style: solid;
}

/*------------------------ 色付き枠ブロック -------------------------*/

.common-extra-block-lightgray {
	margin: 60px 30px;
	padding: 0em;
	border: 1px solid #ccc;
	background-color: #fafafa;
}

.common-extra-block-lightgray dl {
	padding: 1.0em;
}

.common-extra-block-lightgray dl dt {
	font-weight: bold;
	padding: 0 1.0em;
	margin: 0 auto 0.8em;
}

.common-extra-block-lightgray dl dt img {
	display: inline-block;
}

.common-extra-block-lightgray dl dd p {
	margin: 1em 0.5em;
	padding-right: 1em;
	padding-left: 1em;

}

.common-extra-block-lightgray dl dd ul {
	margin-top: 0;

}

/* ライトカラーの色付きブロック */
.common-block-lightcolor {
	margin: 30px;
	padding: .5em;
	border-radius: 10px;
	background-color: rgb(var(--image-color-light));
}


/* 画像と吹き出し  画像によって調整が必要なため共通化見送り*/
.common-baloon-block {
	margin: 30px 0 50px;
}

p.common-baloon-block-title {
	font-size: 25px;
	text-align: center;
	border-bottom: solid 3px rgb(var(--image-color-accent));
	display: inline;

}

.common-baloon-img {
	max-width: 40%;
	display: flex;
	align-items: center;
}

.common-baloon-img img {
	max-width: 100%;
	max-height: 300px;
	height: auto;
}

.common-baloon-wrap {
	display: flex;
	gap: 20px;
	margin: 40px 0;
	padding: 0 0 40px;
}

.common-baloon-text {
	width: 100%;
	max-width: 600px;
	display: flex;
	align-items: center;
	position: relative;

	margin: 15px;
	padding: .8em 1.2em;
	border-radius: 5px;
	background-color: #e3f1ff;
	color: #333333;
}

.common-baloon-text::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #e3f1ff;
}

.common-baloon-text ul {
	margin: 0;
	font-weight: bold;
}

/* PRポイント箇条書き */
.common-pr-point {
	margin: 40px 0;
	padding: 30px 0;
	background-color: #fafafa;
	border: dashed 3px rgb(var(--image-color-accent));
	border-radius: 10px;
}

.common-pr-point > ol {
	counter-reset: list;
	list-style-type: none;
	padding: 0px;
	padding-left: 20px;
	max-width: 700px;
	margin: auto;
}

.common-pr-point > ol > li {
	position: relative;
	line-height: 30px;
	margin: 7px 0 15px 40px;
	padding-left: 10px;
	font-weight: bold;
	font-size: 20px;
}

.common-pr-point > ol > li p,.common-pr-point-text {
	font-weight: normal;
}

.common-pr-point > ol > li:before {
	counter-increment: list;
	content: counter(list);
	position: absolute;
	left: -35px;
	width: 30px;
	height: 30px;
	top: 15px;
	background: rgb(var(--image-color-accent));
	text-align: center;
	color: #fff;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.common-pr-point .common-pr-point-title {
	font-weight: bold;
	font-size: 25px;
	margin-left: 30px;
	margin-bottom: 50px;
	    margin-top: 40px;
	text-decoration: underline;
	text-underline-offset: -0.2em;
	text-decoration-thickness: 0.5em;
	text-decoration-color: rgba(255, 228, 0, 0.4);
	text-decoration-skip-ink: none;
}

.common-pr-point-flex {
	display: flex;
	justify-content: space-around;
	margin: 30px 0;

}

.common-pr-point-flex>img,
.common-pr-point-flex>p {
	width: 100%;
}

.common-pr-point-flex img {
	max-width: 150px;
}


/* PRエリア　タイトル付きの囲み箇条書き */

.common-pr-titlebox {
	--titlebox-color: rgb(var(--image-color-accent));
	margin: 70px 30px;
	padding: 0.5em 0.5em 40px;
	border-radius: 10px;
	background-color: #ecece7;
}

.common-pr-titlebox h3 {
	font-weight: bold;
	padding-bottom: 0.5em;
	text-align: center;
	position: relative;
	font-size: 23px;
	margin-bottom: 40px;
}

.common-pr-titlebox h3::after {
	content: '';
	background-color: var(--titlebox-color);
	width: 2em;
	height: 5px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.common-pr-titlebox h4 {
	font-weight: bold;
	margin: 0 20px;
	padding-top: 20px;
}

/* 文字強調用 */
.titlebox-strong-option {
	font-weight: bold;
	font-size: 150%;
	color: var(--titlebox-color);
	padding-left: 5px;
	padding-right: 5px;
}

/* PRエリア　タイトル付きの囲み箇条書きのリスト */
.common-pr-titlebox ul li {
	border-bottom: dashed 2px #fff;
	padding-left: 20px;
	font-size: 18px;
	line-height: 1.5;
	padding-left: 1.3em;
	text-indent: -1.0em;
	margin-bottom: 10px;
}

.common-pr-titlebox ul {
	list-style: none;
	max-width: 700px;
	margin: auto;
	padding: 0;
}

.common-pr-titlebox ul li:before {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.5em;
	background: #666;
}

/* 縦ラインの囲みブロック */
.common-block-typeA {
	margin: 4em auto 3em;
	padding: 2em;
	border-left: double 5px #999fad;
	border-right: double 5px #999fad;
	background-color: #f1f3f4;
	box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.2);
	width: 80%;
}

.common-block-typeA h3 {
	margin-top: 20px;
}

/* ラインのずれた囲みブロック */
.common-block-typeB-wrapper {
		margin: 4em auto 3em;
		position: relative;
		width: 98%;
	}
	
	.common-block-typeB {
		padding: 1.5em 0.5em 1em 1.5em;
		background: none;
		border: 2px solid rgb(var(--image-color-accent));
		position: relative;
	}
	
	.common-block-typeB-background {
		background-color: #f6f7d9;
		position: absolute;
		top: 8px;
		left: 8px;
		width: calc(100% + 1px);
		height: calc(100% + 1px);
		border-radius: 10px;
	}
/* ------------------------- 本文用 ここまで ---*/



/*-------------------------- 評価版の使用許諾 -----------------*/

.common-trialLic-txt {
	margin: 40px 0 50px 0;
	margin-left: 20px;
	padding: 0;
}

.common-trialLic-txt ol {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6em;
	margin: 10px 0;
	padding: 0;
}

.common-trialLic-txt ol li {
	margin: 10px 0 20px 0;
	font-size: 16px;
}

.common-trialLic-txt ol li ul {
	margin: 0 0 10px 0;
	padding: 0;
	padding-left: 10px;

}

.common-trialLic-txt ol li ul li {
	font-weight: normal;
	margin: 10px 0 10px 0;
}

section.common-mainTxt-area .common-trialLic-txt p.trial-btn {
	margin: 30px 0;
	padding: 30px;
	text-align: center;
	background-color: #fafafa;
}

section.common-mainTxt-area .common-trialLic-txt p.trial-btn input {
	text-align: center;
	padding: 10px 40px 6px 40px;
	font-size: 18px;

}

/*-------------------------- デスクトップ製品保守仕様テキスト -----------------*/
.service-dsk-txt {
	margin: 40px 20px 50px 35px;
	padding: 0;
}

.service-dsk-txt ol {
	line-height: 1.6em;
	margin: 10px 0;
	padding: 0;
}

.service-dsk-txt ol li {
	margin: 10px 0 20px 0;
	font-size: 18px;
	font-weight: bold;
}

.service-dsk-txt ol li ul {
	margin: 0 0 10px 0;
	padding: 0;
	padding-left: 10px;
}

.service-dsk-txt ol li ul li {
	font-weight: normal;
	margin: 10px 0 10px 0;
	font-size: 16px;
}

/*-------------------------- システム製品保守仕様テキスト -----------------*/

.service-sys-txt {
	margin: 40px 20px 70px 35px;
	padding: 0;
}

.service-sys-txt ol,
.service-sys-txt ul {

	line-height: 1.6em;
	margin: 10px 0;
	padding: 0;
}

.service-sys-txt ul {
	list-style: none;
}

.service-sys-txt>ol>li,
.service-sys-txt>ul>li {
	margin: 10px 0 30px 0;
	font-size: 18px;
	font-weight: bold;
}

.service-sys-txt ol li>ol {
	padding-left: 20px;

}

.service-sys-txt ol li ol li {
	font-weight: normal;
	margin: 10px 0 10px 0;
	font-size: 16px;
}

.service-sys-txt ol li ul li {
	font-weight: normal;
	margin: 10px 0 10px 0;
	font-size: 16px;

}

.service-sys-txt ul li ul li {
	font-weight: normal;
	margin: 10px 0 10px 0;
	font-size: 16px;

}

.service-sys-txt>ol>li {
	counter-increment: cnt1;
}

.service-sys-txt>ol li>ol li>ol li {
	counter-increment: cnt;
}

.service-sys-txt>ol>li:before {
	content: "1-" counter(cnt1) ".  ";
}

.service-sys-txt>ol li>ol li>ol li:before {
	content: "(" counter(cnt) ") ";
}

.service-sys-txt>ol {
	list-style-type: none;
}

.service-sys-txt>ol li>ol li>ol {
	list-style-type: none;
}

/* ----------------- マイページの使い方 -------------*/
.howto-step ol>li::marker {
	font-size: 30px;
	font-weight: bold;
	color: rgb(var(--image-color-accent));
}

/* ------------------------- サイドメニュー ----------------------*/

/* ----------------- サイドメニューの共通設定 -------------*/


.common-sidemenu ul li a,
.common-sidemenu ul li.common-sidemenu-sublink a,
.common-sidemenu-support ul li a {
	margin: 0px 0px 0px 0px;
	padding: 10px 16px 6px 20px;
	text-decoration: none;
	color: #333;
	display: block;
	background-image: url(../img/listmark01.gif);
	background-repeat: no-repeat;
	background-position: 4px 50%;
}

.common-sidemenu-support ul li a {
	background-position: 18px 50%;
}

.common-sidemenu ul li a:hover,
.common-sidemenu ul li.common-sidemenu-sublink a:hover,
.common-sidemenu-support ul li a:hover {
	text-decoration: none;
	color: #f60;
	background-color: #e3eef9;
}

/* ------------- サイドメニューの共通設定 ここまで ---*/


.common-sidemenu {
	margin-top: 0px;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	padding: 0px;
}

.common-sidemenu ul {
	font-size: 16px;
	line-height: 1.5em;
	background-color: #FFFFFF;
	margin: 0 10px;
	padding: 0px;
	border-bottom: 20px solid #f3f3f3;
}

.common-sidemenu ul li {
	margin-left: 0;
	padding: 0;
	line-height: 1.6em;
	list-style-type: none;
}

.common-sidemenu ul li.common-sidemenu-nolink {
	text-decoration: none;
	color: #333;
	margin: 4px 10px 0px 6px;
	text-decoration: none;
	padding: 8px 10px 4px 14px;
	background-image: url(../img/listmark01.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
	line-height: 1.6em;
	list-style-type: none;
}

.common-sidemenu ul li.common-sidemenu-sublink {
	background-image: none;
	padding: 0;
	margin: 0;
}

.common-sidemenu ul li.common-sidemenu-sublink a {
	background-image: none;
	padding-left: 20px;
	margin-left: 10px;
	background-image: url(../img/common_img/common-icon-list-circle.png);
	background-repeat: no-repeat;
	background-position: 0px 0.8em;
	background-size: 20px 20px;

}

.common-sidemenu ul li.common-sidemenu-name a,
.common-sidemenu ul li.common-sidemenu-top a {
	background-color: rgb(var(--image-color));
	color: #fff;
	font-size: 14px;
	display: block;
	margin: 0;
	padding: 10px;
	padding-left: 24px;
}

.common-sidemenu ul li.common-sidemenu-name a:hover,
.common-sidemenu ul li.common-sidemenu-top a:hover {
	background-color: rgba(var(--image-color), 0.8);
	text-decoration: none;

}

.common-sidemenu ul li.common-sidemenu-name .common-sidemenu-productName,
.common-sidemenu ul li.common-sidemenu-top .common-sidemenu-topTxt {
	color: #fff;
	font-size: 18px;
	line-height: 1.6em;

}

.common-sidemenu ul li.common-sidemenu-name .common-sidemenu-productName a,
.common-sidemenu ul li.common-sidemenu-top .common-sidemenu-topTxt a {
	color: #fff;
	font-size: 18px;
}

.common-sidemenu-support {
	margin: 0px;
	margin-bottom: 30px;

}

.common-sidemenu-support ul {
	font-size: 16px;
	line-height: 1.5em;
	background-color: #FFFFFF;
	margin: 10px;
	margin-top: 0;
	padding: 0px 0;
}

.common-sidemenu-support ul li {
	margin: 0;
	padding: 0;
	display: block;
}

.common-sidemenu-support ul li a {
	padding-left: 36px;
}

.common-sidemenu-support ul li.common-sidemenu-name a {
	background-color: rgb(var(--image-color));
	color: #fff;
	font-size: 14px;
	display: block;
	margin: 0;
	padding: 10px;
	padding-left: 24px;
	background-position: 4px 50%;
}

.common-sidemenu-support ul li.common-sidemenu-name a:hover {
	background-color: rgba(var(--image-color), 0.8);
	text-decoration: none;
}

.common-sidemenu-support ul li.common-sidemenu-name .common-sidemenu-category {
	color: #fff;
	font-size: 18px;
	line-height: 1.6em;

}

.common-sidemenu-support ul li.common-sidemenu-name .common-sidemenu-category a {
	color: #fff;
	font-size: 18px;
}

.common-sidemenu-support ul li.common-sidemenu-support-onlineMan a {
	background-image: url(../img/common_img/common-icon-list-onlineman.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

.common-sidemenu-support ul li.common-sidemenu-support-podMan a {
	background-image: url(../img/common_img/common-icon-list-podman.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

.common-sidemenu-support ul li.common-sidemenu-support-mypage a {
	background-image: url(../img/common_img/common-icon-list-mypage.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

.common-sidemenu-support ul li.common-sidemenu-support-update a {
	background-image: url(../img/common_img/common-icon-list-update.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

.common-sidemenu-support ul li.common-sidemenu-support-faq a {
	background-image: url(../img/common_img/common-icon-list-faq.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

.common-sidemenu-support ul li.common-sidemenu-support-old a {
	background-image: url(../img/common_img/common-icon-list-old.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

.common-sidemenu-support ul li.common-sidemenu-support-versionUp a {
	background-image: url(../img/common_img/common-icon-list-versionup.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

.common-sidemenu-support ul li.common-sidemenu-support-pdfMan a {
	background-image: url(../img/common_img/common-icon-list-pdfman.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 25px;
}

/* サイドメニューのバナー */
.common-sidemenu-banner {
	max-width: 280px;
	height: auto;
	margin: 10px 10px 20px;
}

.common-sidemenu-banner img {
	display: block;
	margin: auto;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}


.common-sidemenu-banner a:hover img {
	opacity: 0.7;
}


/* ------------------------- サイドメニュー ここまで ---*/



/* -------------------------サイドバナー ----------------------*/
.common-inc-side-banner {
	background-color: #fff;
	margin: 10px;
	margin-top: 0;
	padding: 10px 0;
	text-align: center;
}

.common-inc-side-banner p {
	width: 100%;
	padding: 0 10px;
	line-height: 1.5em;
	font-size: 15px;
	margin: 10px 0 10px !important;
}

.common-inc-side-banner p img {
	margin-top: 4px;
}

.common-inc-side-banner p a {
	text-decoration: none;
	color: #06c;
}

.common-inc-side-banner p a:hover {
	text-decoration: none;
	color: #f60;
}

.pdfbanner {
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #FFFFFF;
	width: 100%;
	color: #333333;
	padding: 10px;
	text-align: center;
}

.pdfbanner00 {
	width: 100%;
	clear: left;
	padding-top: 10px;
	padding-bottom: 10px;
	display: flex;
}

.pdfbanner01 {
	float: left;
	width: 100px;
	padding-left: 2px;
}

.pdfbanner02 {
	float: left;
	text-align: left;
	width: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 4px;
}

.pdfbanner02 a {
	font-weight: bold;
	text-decoration: none;
	color: #06c;
	display: block;
	margin-top: 10px;
}

.pdfbanner02 a:hover {
	color: #f60;
}

/* -------------------------サイドバナー ここまで ---*/






/* ---------------------- 機能ダイジェスト ------------------------------------*/

.common-funcDigest-area ul {
	background-color: #fff;
	margin: 6px auto;
	list-style-type: none;
	text-align: center;
	max-width: 1000px;
	padding: 0px;
	background-image: none;
	border: 0;
}

.common-funcDigest-area ul li {
	font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: bold;
	color: #666;
	float: left;
	margin: 2px;
	margin-bottom: 4px;
	border: none;
	list-style-type: none;
	padding: 4px 10px 2px 10px;
	line-height: 1.4em;
	display: block;
	white-space: nowrap;
	border-radius: 4px;
	background-color: #eeeee5;
}

/* ---------------------- 機能ダイジェスト ここまで ---*/



/* ---------------------- バナーエリア ------------------------------------*/

.common-banner-area {
	margin: 20px 0;
	text-align: center;
	justify-content: center;
	align-items: center;
	padding-top: 0px;
	width: 100%;
}

.common-banner-area p {
	display: block;
	padding: 0;
	margin: 10px auto;
	width: 100%;
	text-align: center;
}

.common-banner-area img {
	width: auto;
	height: auto;
	padding: 0px;
	margin: 0;
}


/* -------------------- 販売形式 -----------------------------------*/


.common-mainTxt-area .common-sales-wrap {
	width: 100%;
	text-align: center;
}

.common-mainTxt-area .common-sales-list {
	width: 100%;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;

}

.common-mainTxt-area .common-sales-list li {
	width: 290px;
	flex-direction: column;
	margin-top: 30px;
	margin-bottom: 40px;
	margin-left: 10px;
	margin-right: 10px;
	list-style-type: none;
	display: block;
	position: relative;
	padding: 10px;
	border: 1px solid #ccc;
	background-color: #fafafa;
	border-radius: 10px;
}

.common-mainTxt-area .common-sales-icon {
	padding: 0px;
	text-align: center;
}

.common-mainTxt-area .common-sales-icon img {
	width: 100px;
	padding: 0px;
	border: 0;
}

.common-mainTxt-area .common-sales-title {
	width: 100%;
	padding: 6px 0;
	padding-bottom: 6px;
	margin-left: auto;
	margin-right: auto;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.4em;
	color: #333;
	text-align: center;
	border-bottom: 4px solid rgb(var(--image-color));
	display: inline-block;
}

.common-mainTxt-area .common-sales-text {
	padding: 1.0em;
	margin-left: 0em;
	margin-right: 0em;
	font-size: 15px;
	line-height: 1.5em;
	text-align: left;
	text-align: justify;
}

.common-mainTxt-area .common-sales-link {
	padding: 20px;
	font-size: 15px;
	line-height: 1.5em;
	text-align: center;
	text-align: center;
}

.common-mainTxt-area .common-sales-link a {
	padding: 10px;
	font-size: 15px;
	line-height: 1.5em;
	background-color: #f76;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: 30px;
	margin-right: 30px;
	box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.4);

}

.common-mainTxt-area .common-sales-link a:hover {
	background-color: #a40;
	box-shadow: none;
}

/* ---------------------- ショッピングカート ------------------------------------*/

.common-shopcart-wrap {
	margin: 0 0 80px 0;
	padding: 14px;
	width: 100%;
	height: auto;
	border-width: 1px;
	border-style: solid;
	border-radius: 6px;
	background-color: #fffff0;
	border-color: rgb(var(--image-color));
	display: flex;
	justify-content: space-around;
}

.common-shopcart-content {
	display: flex;
	flex-direction: row;
}

p.common-shopcart-image {
	margin: 0;
	padding: 0;
	width: 130px;
}

p.common-shopcart-image img {
	margin: 0;
	padding: 0;
	border: 1px solid #ccc;

}

div.common-shopcart-text p {
	text-align: left;
	margin: 0 auto;
}

div.common-shopcart-text p.common-shopcart-productname {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 1.2em;
}

.common-shopcart-media {
	font-size: 16px;

}

p.common-shopcart-btn {
	padding: 0px;
	margin: 0 auto;
	text-align: center;
	width: 180px;
	display: block;
	height: auto;
}

p.common-shopcart-btn a img {
	width: 100%;
	border-radius: 6px;
	vertical-align: middle;
}

p.common-shopcart-btn a:hover img {
	opacity: 0.70;
}

.common-shopcart-priceN {
	margin-top: 10px;
	font-size: 15px;
	color: #666;

}

.common-shopcart-priceL {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
}

.common-shopcart-shopcart-btn p.common-shopcart-shopprice {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	font-size: 16px;
	font-weight: normal;

}

.common-shopcart-shopcart-btn p span.common-shopcart-priceL {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	color: #333;
}

.common-shopcart-btn-inline {
	width: auto;
	height: 24px;
	display: inline-block;
	margin-left: 4px;
	margin-right: 4px;
	margin-bottom: -4px;
	border-radius: 4px;
}


/* ---------------------- ご購入について ---*/

.howto-purchase {
	display: flex;
	flex-wrap: nowrap;
	justify-content: start;
	max-width: 1300px;
	padding: 0 10px;
	margin: auto;
	gap: 5%;

}

.howto-purchase div {
	width: 100%;
	max-width: 430px;
	display: flex;
	flex-direction: column;

}

.howto-purchase h3 {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0 30px 10px;
	padding: 10px;
	border-bottom: 3px solid #999;
	border-left: none;
	text-align: center;
}

.howto-purchase img {
	width: 80px;
	margin: 0 auto;
}

.howto-purchase div p.common-link-btn {
	margin: 0;
	margin-top: auto;
	padding: 0;

}

.howto-purchase div p.common-link-btn a {
	width: 85%;
	margin: 0;
}

/* ---------------------- DL（dt/dd縦並び） ------------------------------------*/

.common-dl-tableType-line dl {
	margin: 30px 0px 40px;
}

.common-dl-tableType-line dl dt {
	font-weight: bold;
	margin: 20px 10px 10px;
	padding: 0 20px;
}

.common-dl-tableType-line dl dd {
	margin: 10px 10px 10px 2.0em;
	padding: 0 20px;
}

/* ---------------------- 表のようなDL ------------------------------------*/

.common-dl-tableType dl {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.common-dl-tableType dl dt {
	flex-basis: 25%;
	padding: 20px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
}

.common-dl-tableType dl dd {
	flex-basis: 75%;
	padding: 20px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;

}

/* ---------------------- 汎用DLリスト ------------------------------------*/

.common-dl-typeA {
	font-size: 15px;
	line-height: 1.6em;
	border: 1px solid #888;
	background-color: #f9f9f9;
}

.common-dl-typeA dt {
	padding: 0.3em 1em;
	font-weight: bold;
	color: #f9f9f9;
	background-color: #888;
}

.common-dl-typeA dd {
	margin: .8em 1em;
}


/* ---------------------- ページ内リンク ------------------------------------*/

.common-pagelink-area {
	width: 100%;
	height: auto;
	display: block;
	margin: 10px auto;
	/* padding: 0 10px; */
	padding-bottom: 30px;
}

.common-pagelink-area ul {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 6px;
	background-color: #dfdfdf;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.common-pagelink-area ul li {
	list-style-type: none;
	margin: 4px 12px;
	padding: 6px 10px 0px 10px;
	background-image: url(../img/listmark02.gif);
	background-repeat: no-repeat;
	background-position: 0px 12px;
	padding-left: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666666;
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.6em;

}

.common-pagelink-area ul li a {
	text-decoration: none;
	color: #333;
	display: block;
}

.common-pagelink-area ul li a:hover {
	color: #f60;
}


/* ---------------------- ページ内リンク ここまで ---*/

/* -------------------- 改訂情報 --------------------------- */

.common-update-info-wrap {
	margin: 0 10px;
}

.common-update-info-wrap dt {
	padding: 5px 10px;
	margin: 0 20px;
	float: left;
	width: 10em;
}

.common-update-info-wrap dd {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
	margin: 4px 10px;
	padding: 5px 10px;
}

h4.h4-update {
	font-size: 18px;
	text-align: left;
	margin: 0 30px;
	padding: 20px 0 5px;
	border-bottom: dashed 2px rgb(var(--image-color-accent));
}

/* 改訂情報用DLリスト */
.common-dl-update dl {
	margin: 30px 0px 10px;
}

.common-dl-update dl dt {
	font-weight: bold;
	margin: 20px 10px 0;
	padding: 0 20px;
	font-size: 16px;
}

.common-dl-update dl dd {
	margin: 10px 10px 10px 2.0em;
	padding: 0 20px;
}

.common-dl-update dl dd ul,
.common-dl-update dl dd ol {
	margin: 0;
}


/* -------------------- 改訂情報　ここまで --------------------------- */

/* -------------------- トップへボタン ---------------------------*/
.to-top-navi {
	margin: 0;
	padding: 0;
}

.to-top-navi p {
	color: #fff;
	font-weight: normal;
	font-size: 1.8rem;
	position: fixed;
	right: 100px;
	bottom: 6px;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 6px 6px 0 0;
	text-decoration: none;
	text-align: center;
	z-index: 999;
}

.to-top-navi p a {
	color: #fff;
	text-decoration: none;
	padding: 20px;
	display: inline-block;
}

/* -------------------- トップへボタン ここまで ---*/


/* -------------------- ページナビゲーション ---------------------------*/

.productPage {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

.productPagePrev a,
.productPageNext a {
	padding: 0.8em 1.3em;
	float: left;
	height: auto;
	background-color: #fafafa;
	border: 1px solid #999999;
	color: #0066CC;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.8em;
	display: block;
	text-align: right;
	border-radius: 6px;
}

.productPageNext a {
	text-align: left;
}

.productPagePrev a:hover,
.productPageNext a:hover {
	background-color: #999999;
	color: #FFFFFF;
}

/* -------------------- フッター用 ---------------------------*/

.mainfooter {
	color: #FFFFFF;
	background-color: #555555;
	height: 400px;
	width: 100%;
	margin: 0px auto;
	padding: 20px;
}

.footermainmenu {
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

.footermainmenu a {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 15px;
}

.footermainmenu a:hover {
	color: #CCCCCC;
	text-decoration: underline;
}


.footercopy {
	margin: 10px;
	font-size: 15px;
}

/* -------------------- フッター用 ここまで ---------------------------*/


/* -------------------- フッター SNS用 ---------------------------*/
#comcon-snsbtn {
	position: fixed;
	border: solid 1px #666;
	background: rgba(245, 245, 245, 0.8);
	text-align: center;
	display: block;
	border-radius: 5px;
	padding: 10px;
	bottom: 100px;
	left: 30px;
	height: 140px;
	width: 160px;
	z-index: 10;
}

#fb-sbtn iframe {
	width: 120px;
	height: 20px;
	border: none;
	padding: 0;
	float: left;
	clear: both;
	margin: 4px;
}

#sns-btn-tw2 {
	float: left;
	clear: both;
	margin: 4px;
	margin-left: 1px;
}

#sns-btn-hb2 {
	float: left;
	clear: both;
	margin: 4px;
	margin-left: 1px;
}

#sns-btn-gp2 {
	float: left;
	clear: both;
	margin: 4px;
}

/* -------------------- フッター SNS用 ここまで ---*/


/* ---------------- 目次 -----------------------------------*/

.common-index-navi {
	margin: 20px 10px;
	padding: 0 1.2em 20px;
	border: 1px solid #eee;
	background-color: #fafafa;
}

.common-index-navi p {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 0;
}

.common-index-navi ol,
.common-index-navi ul {
	margin-top: 0;
	margin-bottom: 0;
}

.common-index-navi ol ol,
.common-index-navi ol ul,
.common-index-navi ul ol,
.common-index-navi ul ul {
	padding: 0;
}

/* -------------------- トップ PR その他PR用 -----------------------------------*/



/* 横並びに配置 */

.common-parallel-wrap {
	display: flex;
	/*	border:1px solid #ccc;*/
	width: 100%;
	margin: 0 0 30px;
	justify-content: space-around;

}

.common-parallel-wrap .common-parallel-txt {
	flex-basis: 50%;
}

.common-parallel-wrap .common-parallel-txt h3 {
	padding-left: 1.4em;
	padding-right: 1.4em;
}

.common-parallel-wrap .common-parallel-img {
	flex-basis: 50%;
}

/* -------------------- 本文PR用 ここまで ---*/



/* --------------------- 汎用テーブル用 ------------------------------------------ */

/* 例：システム製品 index.html */
.common-table-typeA {
	border-collapse: collapse;
	margin: 10px;
	clear: both;
	width: 98%;
	margin-bottom: 80px;
}

.common-table-typeA th {
	font-size: 16px;
	line-height: 1.6em;
	font-weight: normal;
	background-color: #E4E4E4;
	border: 1px solid #E4E4E4;
	border-bottom: 1px solid #aaa;
	min-width: 220px;
}

.common-table-typeA td {
	border-bottom: 1px solid #aaa;
	padding: 1.2em;
	text-align: left;
}

.common-table-typeA td:first-child {
	font-weight: bold;
	text-align: left;
}

.common-table-typeA caption {
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #555;
}

/* 旧製品情報 販売期間列センター揃え調整用 */
.old .common-table-typeA td:nth-of-type(2) {
	text-align: center;
}

/* 例：spec.html */
.common-table-typeB {
	border: 1px #aaaaaa solid;
	border-collapse: collapse;
	margin: 40px auto 40px;
	clear: both;
	max-width: 98%;
	min-width: 600px;
}

.common-table-typeB td {
	vertical-align: top;
	border: 1px solid #aaa;
	padding: 1.0em;
}

.common-table-typeB th {
	font-weight: normal;
	color: #333333;
	background-color: #eee;
	padding: 1.0em;
	border: 1px solid #aaa;
	width: 20%;
	text-align: left;
}

.common-table-typeB caption {
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #555;
}


/* 例：license.html */
.common-table-typeC {
	border: 1px #aaaaaa solid;
	border-collapse: collapse;
	margin: 40px auto;
	clear: both;
	table-layout: fixed;
	max-width: 98%;
	min-width: 600px;
}

.common-table-typeC caption {
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #555;
}

.common-table-typeC td {
	border: 1px solid #aaa;
	padding: .7em;
	/* vertical-align: middle; */
}

.common-table-typeC th {
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	background-color: rgb(var(--image-color));
	padding: .7em;
	border: 1px solid #aaa;
	min-width: 150px;
	vertical-align: middle;
}

/* 〇×を使った表 */

.common-table-comparison {
	table-layout: auto;
	margin: 10px auto;
	padding: 0px;
	border: none;
	border-collapse: collapse;
	width: 98%;
}

.common-table-comparison th {
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	padding: 10px;
	font-weight: normal;
	color: #333;
	background-color: #eee;
	line-height: 1.5em;
}


.common-table-comparison th a {
	color: #06f;
}

.common-table-comparison th a:hover {
	color: #ff6600;
	text-decoration: none;
}


table.common-table-comparison td {
	text-align: center;
	/* vertical-align: middle; */
	margin: 0px;
	border-bottom: 1px solid #aaaaaa;
	padding: 16px 10px;
}

.common-table-comparison td:nth-of-type(1) {
	text-align: left;
	font-weight: bold;
}

.common-table-comparison td img {
	width: 26px;
	height: 26px;
}

.common-table-comparison td.trialbtn a {
	display: block;
	border-radius: 4px;
	background-color: #047;
	color: #fff;
	font-size: 14px;
	padding: 6px 10px 4px 10px;
	text-decoration: none;
	margin: auto;
}

.common-table-comparison td.trialbtn a:hover {
	background-color: #06c;
}


.common-table-comparison caption {
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #555;
}

/* table tr td[colspan]{
	text-align:center;
} */


/* 機能比較用の表 */
.common-table-typeD {
	border-collapse: collapse;
	margin: 10px auto;
	padding: 0;
	width: auto;
	table-layout: auto;
	border: 1px solid #aaa;
	word-break: break-all
}

.common-table-typeD th {
	padding: .7em;
	border: 1px solid #aaa;
	background: #eee;
	font-weight: bold;
}

.common-table-typeD tr {
	background-color: #fff;
	padding: .35em;
}

.common-table-typeD td {
	padding: .7em;
	text-align: center;
	border: 1px solid #aaa;
}

.common-table-typeD tr td:nth-of-type(1) {
	background-color: #fafafa;
	font-weight: bold;
}

.common-table-typeD caption {
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #555;
}

.common-table-typeD td ul {
	padding: 0;
	margin: 0 15px;
}

.common-table-typeD td ul li {
	margin: 0.5em;
}

.headline-left .common-table-typeD {
	margin: 40px 30px;
	min-width: 570px;
	/* width: 80%; */
	max-width: 940px;
}

/* 価格表 */
.common-table-price {
	border: 1px #aaaaaa solid;
	border-collapse: collapse;
	clear: both;
	table-layout: fixed;
	margin: 40px 30px;
	min-width: 570px;
	width: 80%;
	max-width: 900px;
}

.common-table-price caption {
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #555;
}

.common-table-price caption span {
	font-size: .8em;
	font-weight: normal;
}

.common-table-price td {
	border: 1px solid #aaa;
	padding: .7em;
}

.common-table-price th:nth-of-type(1),
.common-table-price td:nth-of-type(1) {
	width: auto;
	min-width: 150px;
}

.common-table-price th {
	font-size: 16px;
	font-weight: normal;
	background-color: #DFDFDF;
	padding: .4em;
	border: 1px solid #aaa;
	vertical-align: middle;
	width: 180px;
	text-align: center;
}

.common-table-price td.col-price {
	font-weight: bold;
	text-align: right;
	vertical-align: middle;
}

.common-table-price td ul {
	padding: 0;
	margin: 0 15px;
}

.common-table-price td ul li {
	margin: 0.5em;
}

/* 概要付きの価格表用のオプション */
.option-text {
	width: 95%;
}

.option-text th:nth-of-type(2),
.option-text td:nth-of-type(2) {
	width: auto;
}

.option-text th:nth-of-type(1),
.option-text td:nth-of-type(1) {
	width: 180px;
}

/* テーブル用オプション */

.option-rowpan tr td:nth-of-type(1) {
	background-color: #fafafa;
	font-weight: bold;
}

.option-rowpan tr td[rowspan] {
	background-color: #eee;
	font-weight: bold;
}

.option-rowpan tr td[rowspan]+td {
	background-color: #fafafa;
	font-weight: bold;
}

.option-table-normal tr td {
	background-color: #fff;
	font-weight: normal;
	text-align: left;
}

.option-table-normal tr td:first-child {
	background-color: #fff;
	font-weight: normal;
	text-align: left;
}

.option-table-normal tr td:nth-of-type(1) {
	background-color: #fff;
	font-weight: normal;
	text-align: left;
}

table.common-table-comparison.option-rowpan tr td[rowspan]+td {
	text-align: left;
}

/* テーブル内リンク */
.common-table-link {
	position: relative;
	display: inline-block;
	padding-right: 30px;
	color: #aaa;
	text-decoration: none;
}

.common-table-link:before {
	content: '';
	position: absolute;
	top: 48%;
	right: 2px;
	transform: translateY(-50%);
	height: 1.0em;
	width: 1.0em;
	border-radius: 10px;
	background-color: #aaa;
}

.common-table-link:after {
	content: '';
	position: absolute;
	top: 48%;
	right: 8px;
	transform: translateY(-50%) rotate(45deg);
	width: 0.3em;
	height: 0.3em;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

/* PC画面でテーブルに横スクロールを設定する場合（コンテンツが多くて見づらいときなど） */
.table-scroll-pc {
	overflow-x: auto;
}

.table-scroll-pc table {
	width: 900px;
}


/* rowsapn の打消しオプション */

/* .option-none-rowpan tr td[rowspan] {
    background-color:initial;
	font-weight: normal;
}
.option-none-rowpan tr td[rowspan] + td {
    background-color: initial;
	font-weight: normal;
}


.common-table-typeD ul {
	margin: 0;
} */

/* テーブル幅が収まらない時は横にスライド可能とする（モバイル・PC共通） */
/* .table-scroll {
	overflow-x: auto;
	margin: 0 10px;
} */


/* --------------------- テーブル用 ここまで --- */

/* --------------------- 挿入画像とキャプション ---------------------------------------*/
.common-mainTxt-area figure {
	width: 100%;
	margin: 50px 0px;
	padding: 0;
}

.common-mainTxt-area figure img {
	border: 1px solid #ccc;
	max-width: 100%;
	margin: 0px;
	padding: 0;
}

.common-mainTxt-area figure video {
	max-width: 100%;
	margin: 0px;
	padding: 0;
}

.common-mainTxt-area figure figcaption {
	width: 100%;
	margin: 0px;
	padding: 10px 0;
	font-size: 14px;
	line-height: 1.6em;
	text-align: center;
}

/* --------------------- 挿入画像とキャプション ここまで ---*/





/*-------------------------- コンテンツナビ ここから ----------------------*/

/* 新しいクラスで実装 */

.common-contents-navi {
	width: 100%;
	height: 4.0em;
	margin: 0px;
	padding-top: 40px;
	padding-bottom: 80px;
	clear: both;
	display: flex;
	justify-content: space-between;
}

.common-contents-navi a {
	background: rgb(var(--image-color));
	border-radius: 3px;
	position: relative;
	align-items: center;
	margin: 0 4px;
	/*    max-width: 280px; */
	padding: 10px 25px;
	color: #FFF;
	transition: 0.3s ease-in-out;
	font-weight: 500;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.6em;
	display: block;
}

.common-contents-navi a:hover {
	background: #eee;
	color: rgb(var(--image-color));
	border: 1px solid rgb(var(--image-color));
}

.common-pagePrev {
	text-align: right;
}

.common-pageNext {
	text-align: left;
}

/* 新しいクラスで実装　ここまで */


/*-------------------------- コンテンツナビ ここまで ---*/


/* -------------------- HTML on Word からの出力記事対応 --------------*/

.common-mainTxt-area p img.inline {
	width: 100%;
}

/* -------------------- LightBox zoomアイコン用 ----*/

.common-mainTxt-area p.common-zoom {
	position: relative;
}

.common-mainTxt-area img.common-zoom-icon {
	position: absolute;
	bottom: -8px;
	left: -5px;
	width: 25px;
	height: 25px;
	border: 0;
}



/*------------- right-boxのzoomアイコン 用 -------------------------------*/
figure.common-zoom {
	position: relative;
	width: 100%;
	margin: 30px 0;
	padding: 0 0;
	text-align: center;
}

figure.common-zoom img.common-zoom-icon {
	position: absolute;
	top: -10px;
	left: calc(50% - 260px);
	width: 25px;
	height: 25px;
	border: none;
}

figure.common-zoom a:hover img {
	opacity: 0.7;
	border-color: #666;
}

figure.common-zoom a img.common-zoom-icon {
	z-index: 10;
}

figure.common-zoom a:hover img.common-zoom-icon {
	opacity: 1;
}

/* 幅が固定ではない用 */

a.common-zoom-anchor {
	width: auto;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

a.common-zoom-anchor .common-zoom-icon {
	left: -10px !important;
}


.no-mark {
	list-style-type: none;

}

/* ---------- lightbox用 CSS ------------------*/
html.lb-disable-scrolling {
	overflow: hidden;
	/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
	position: fixed;
	height: 100vh;
	width: 100vw;
}

.lightboxOverlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: black;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
	opacity: 0.85;
	display: none;
}

.lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10000;
	text-align: center;
	line-height: 0;
	font-weight: normal;
}

.lightbox .lb-image {
	display: block;
	height: auto;
	max-width: inherit;
	max-height: none;
	border-radius: 3px;

	/* Image border */
	border: 4px solid white;
}

.lightbox a img {
	border: none;
}

.lb-outerContainer {
	position: relative;
	*zoom: 1;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	border-radius: 4px;

	/* Background color behind image.
	   This is visible during transitions. */
	background-color: white;
}

.lb-outerContainer:after {
	content: "";
	display: table;
	clear: both;
}

.lb-loader {
	position: absolute;
	top: 43%;
	left: 0;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}

.lb-cancel {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	background: url(/img/lightbox_img/loading.gif) no-repeat;
}

.lb-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

.lb-container>.nav {
	left: 0;
}

.lb-nav a {
	outline: none;
	background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev,
.lb-next {
	height: 100%;
	cursor: pointer;
	display: block;
}

.lb-nav a.lb-prev {
	width: 34%;
	left: 0;
	float: left;
	background: url(/img/lightbox_img/prev.png) left 48% no-repeat;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
	opacity: 0.2;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.lb-nav a.lb-prev:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}

.lb-nav a.lb-next {
	width: 64%;
	right: 0;
	float: right;
	background: url(/img/lightbox_img/next.png) right 48% no-repeat;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
	opacity: 0.2;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.lb-nav a.lb-next:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}

.lb-dataContainer {
	margin: 0 auto;
	padding-top: 5px;
	*zoom: 1;
	width: 100%;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
	content: "";
	display: table;
	clear: both;
}

.lb-data {
	margin-top: 10px;
	padding: 0 4px;
	color: #ccc;
}

.lb-data .lb-details {
	width: 85%;
	float: left;
	text-align: left;
	line-height: 1.5em;
}

.lb-data .lb-caption {
	font-size: 17px;
	/*  font-weight: bold;*/
	line-height: 1.5em;
}

.lb-data .lb-caption a {
	color: #4ae;
}

.lb-data .lb-number {
	display: block;
	clear: left;
	padding-bottom: 1em;
	font-size: 14px;
	color: #999999;
	margin-top: 10px;
}

.lb-data .lb-close {
	display: block;
	float: right;
	width: 30px;
	height: 30px;
	background: url(/img/lightbox_img/close.png) top right no-repeat;
	text-align: right;
	outline: none;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
	cursor: pointer;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}


/* ---------- lightbox用 CSS ここまで ---*/





/* ------------- オプション ----------------*/
/* 他のクラスに追加して使用するクラス */


/* flex-boxで横並び均等にしたい場合 */
.common-option-flex-spacearound {
	display: flex;
	justify-content: space-around;
}

.common-option-flex-spacearound>div {
	width: 100%;
}

/* リセラー用 */
.common-reseller-flex-wrap {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.common-reseller-flex-wrap>div {
	margin-bottom: 40px;
	padding-bottom: 30px;
	padding-top: 10px;
	border-radius: 6px;
	margin: 1rem auto;
	width: 30%;
	min-width: 250px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}

.common-reseller-flex-wrap>div>h3 {
	margin: 20px 10px 30px;
	font-size: 18px;
}

.common-reseller-flex-wrap>div>p {
	padding: 0;
	margin: 10px 20px;
}

.common-reseller-flex-wrap>div>p img {
	padding: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

.common-reseller-flex-wrap>div>ul {
	padding: 0;
	margin: 10px 30px;

}

.common-reseller-flex-wrap ul li {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	line-height: 1.4em;
	text-align: left;
}

.common-reseller-flex-wrap>div>p.common-reseller-logo {
	text-align: center;
	height: 80px;
	display: flex;
	justify-content: center;
}

.common-reseller-flex-wrap>div>p.common-reseller-name {
	font-weight: bold;
}


/* 汎用的なflex-box */
.common-topPR-flex-wrap {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.common-topPR-flex-wrap>div {
	margin-bottom: 40px;
	padding-bottom: 30px;
	border-radius: 6px;
	margin: 1rem auto;
	width: 30%;
	min-width: 250px;
	overflow: hidden;
	/* border-radius: 8px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, .2); */
}

.common-topPr-flex-title {
	font-weight: bold;
	font-size: 19px;
	color: rgb(var(--image-color));
	border-bottom: 3px solid rgb(var(--image-color-light));
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 0;
	padding-right: 0;
	min-height: 3.0em;
}

div.common-topPR-flex-wrap p.common-link-btn {
	text-align: center;
}

/* flex-boxで画像横並びで画像の幅を指定したい場合 */
.common-option-flex-imgWidth {
	display: flex;
	justify-content: space-around;
}

.common-option-flex-imgWidth div {
	width: auto;
}

.common-option-flex-imgWidth figure {
	margin: 0px;

}

.common-option-flex-imgWidth figure img {
	max-width: initial;
}

/* 画像のサイズを特定のサイズに指定　*/
.common-option-imgSize300 figure img {
	max-width: 300px;
	max-height: 300px;
}



/* オプション（text-align） */
/* センター揃えにしたい場合 */
*.common-option-center {
	text-align: center !important;
}

/* 左揃えにしたい場合 */
*.common-option-left {
	text-align: left !important;
}

/* 右揃えにしたい場合 */
*.common-option-right {
	text-align: right !important;
}

/* 縦方向を中央揃えにしたい場合 */
*.common-option-middle {
	vertical-align: middle !important;
}

/* felx-boxでセンター揃えにしたい場合 */
.common-option-flex-center {
	justify-content: center;
}

ul.op-list-nomark {
	list-style-type: none;
}

/* マーカーで下線を引いたような効果（レッド系色） */
.common-marker-red {
	background: linear-gradient(transparent 70%, #fa564d 100%);
}

/* マーカーで下線を引いたような効果（オレンジ系色） */
.common-marker-orange {
	background: linear-gradient(transparent 70%, #F96 100%);
}

/* マーカーで下線を引いたような効果（イエロー系色） */
.common-marker-yellow {
	background: linear-gradient(transparent 70%, #fce97d 100%);
}

/* マーカーで下線を引いたような効果 パターン2（イエロー） */
.common-marker2-yellow {
	margin-top: 0;
	margin-bottom: 0;
	text-decoration: underline;
	text-underline-offset: -0.1em;
	text-decoration-thickness: 0.5em;
	text-decoration-color: rgba(255, 230, 0, 0.5);
	text-decoration-skip-ink: none;
}

/* マーカーで下線を引いたような効果 パターン2（レッド） */
.common-marker2-red {
	margin-top: 0;
	margin-bottom: 0;
	text-decoration: underline;
	text-underline-offset: -0.1em;
	text-decoration-thickness: 0.5em;
	text-decoration-color: rgba(250, 117, 128, 0.7);
	text-decoration-skip-ink: none;
}
/* マーカーで下線を引いたような効果 パターン2（グリーン） */
.common-marker2-green {
	margin-top: 0;
	margin-bottom: 0;
	text-decoration: underline;
	text-underline-offset: -0.1em;
	text-decoration-thickness: 0.5em;
	text-decoration-color: rgba(17, 187, 116, 0.596);
	text-decoration-skip-ink: none;
}

/* マーカーで下線を引いたような効果 パターン2（ブルー） */
.common-marker2-blue {
	margin-top: 0;
	margin-bottom: 0;
	text-decoration: underline;
	text-underline-offset: -0.1em;
	text-decoration-thickness: 0.5em;
	text-decoration-color: rgba(61, 123, 238, 0.7);
	text-decoration-skip-ink: none;
}


/* 太字 */
.common-option-bold {
	font-weight: bold;
}

/* 文字を小さくする */
.common-option-smaller {
	font-size: smaller !important;
}


/* 二重の打消し線 */
.common-option-strikethrough-w {
	text-decoration: line-through;
	text-decoration-color: red;
	text-decoration-style: double;
}


/* 外部リンク 青 */
.external-link::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 4px;
	margin-bottom: 2px;
	background-image: url(../img/common_img/common-icon-window-open.png);
	background-size: contain;
	vertical-align: middle;
}

/* 外部リンク 赤 */
.external-link-red::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 4px;
	margin-bottom: 2px;
	background-image: url(../img/common_img/common-icon-window-open-red.png);
	background-size: contain;
	vertical-align: middle;
}

/* 文字色 */
.common-option-white {
	color: #fff;
}

.common-option-red {
	color: #fa564d;
}

.common-option-blue {
	color: #06c;
}

/* リストの前の文章とリストの間隔を調整 */

p.common-option-bottom-narrow {
	margin-bottom: 0;

}

ol.common-option-list-narrow,
ul.common-option-list-narrow {
	margin-top: 0;

}

/* 画像のボーダー枠を解除 */

figure img.common-option-noborder {
	border: 0;
}

/* 画像のボーダー枠を追加 */

img.common-option-border {
	border: 1px solid #ccc;
}

/* サイドメニューのボーダーボトムをキャンセル */

.common-sidemenu ul.border-bottom-none {
	border-bottom: 0;
}

/* 上付き文字要素 */
.common-sup {
	vertical-align: super;
	font-size: smaller;
}

/* 多段リスト */

ol.common-option-2column,
ul.common-option-2column {
	column-count: 2;
	column-gap: 50px;
	margin-top: 30px;
	/* margin-bottom:40px; */
}

ol.common-option-2column li ul,
ul.common-option-2column li ul {
	column-count: 1;
	column-gap: normal;
	margin-top: 10px;
	margin-bottom: 10px;
}

ol.common-option-2column li,
ul.common-option-2column li {
	margin-top: 0px;
	text-align: left;
}

ol.common-option-3column,
ul.common-option-3column {
	column-count: 3;
	column-gap: 50px;
	margin-top: 30px;
	/* margin-bottom:40px; */
}

ol.common-option-3column li ul,
ul.common-option-3column li ul {
	column-count: 1;
	column-gap: normal;
	margin-top: 10px;
	margin-bottom: 10px;
}

ol.common-option-3column li,
ul.common-option-3column li {
	margin-top: 0px;
	text-align: left;
}

/* 括弧付きのolリスト */

ol.common-list-brackets>li {
	list-style-type: none;
	counter-increment: cnt;
	text-indent: -2.5em;
	padding: 0;
}

ol.common-list-brackets>li:before {
	content: "（" counter(cnt) "）";
}

/* 丸数字のリスト */
ol.common-list-decimal-circle {
	position: relative;
	margin-left: 35px;
}

ol.common-list-decimal-circle li {
	list-style-type: none;
	list-style-position: outside;
	padding: 0;
	margin-left: 5px;
}

ol.common-list-decimal-circle li span {
	position: absolute;
	left: 0;
	margin: 0
}

/* 前後の間隔が空きすぎないリスト */
ul.common-list-narrow,
ol.common-list-narrow {
	margin: 0 30px;
	padding: 0 1.0em;

}

ul.common-list-narrow li,
ol.common-list-narrow li {
	margin-top: .7em;
	margin-bottom: .7em;
}

/*------------- 入力フォーム ---------------------------- */

.common-form-input {
	margin: 30px 10px 80px;
}

.common-form-input p {
	text-align: center;
}

.common-form-input input[type="password"] {
	padding: 6px;
	margin: 10px;
}

.common-form-input input[type="submit"] {
	margin: 10px;
	padding: 10px 40px;
	font-size: 16px;
}

.common-form-input input[type="reset"] {
	margin: 10px;
	padding: 10px 40px;
	font-size: 16px;
}




/*------------- 「α」版のフォント用 ---------------------- */

span.font-alpha {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}
/*------------- 「β」版のフォント用 ---------------------- */
span.font-beta {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}


/* CSS変数代入　製品カテゴリーによる色分け（色は仮設定・rgbで指定する） */
:root {
	/* --image-color: 0, 102, 153; */
	/* --image-color-accent: 0, 102, 153; */
	/* --image-color: 107, 161, 76; */
	/* --image-color-accent: 30, 109, 40; */
	--image-color: 30, 109, 40;
	/* --image-color-light: 232, 241, 246; */
	--image-color-light: 242, 248, 236;
	--image-color-accent: 107, 161, 76;
}

.mode-sys {
	/* --image-color: 58, 66, 72;
	--image-color-light: 236, 236, 231;
	--image-color-accent: 139, 139, 32; */
	--image-color: 55, 56, 48;
	--image-color-light: 236, 236, 231;
	--image-color-accent: 139, 139, 32;
}

.mode-dsk {
	/* --image-color: 17, 135, 172;
	--image-color-light: 216, 238, 251;
	--image-color-accent: 17, 135, 172; */
	--image-color: 0, 120, 145;
	--image-color-light: 216, 238, 251;
	--image-color-accent: 6, 156, 187;
}

/*------------- youtube動画表示用 --------------------------------- */

.common-movie {
	width: 100%;
	position: relative;
	padding-top: 56.25%;
	margin-top: 30px;
}

.common-movie iframe {
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 80%;
}


/* ---------------- カードレイアウト -------------*/

.common-card-wrap {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0 40px;
	padding-bottom: 20px;
}

.common-card {
	margin: 1rem auto;
	width: 30%;
	min-width: 250px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
	background-color: #fff;
}

.common-card-option-slim .common-card {
	margin: 1rem auto;
	width: 22%;
	min-width: 200px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}

div.common-card-header {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	justify-content: center;
	align-items: flex-end;
	height: 200px;
	width: 100%;
	word-wrap: break-word;
	box-sizing: border-box;
	z-index: 0;
	overflow: hidden;
}

.common-card-option-slim .common-card div.common-card-header {

	height: 220px;
}

.common-card-header img {
	margin: 0;
	object-fit: cover;
	height: 100%;
	width: 100%;
	transition: all .3s ease-out;
}

.common-card-header p {
	font-size: 20px;
	font-weight: bold;
	padding: 1rem 1.5rem 0;
	text-decoration: none;
	color: white;
	background-color: rgba(30, 27, 34, 0.836);
	margin: 0;
	width: 100%;
	height: 50%;
	text-align: left;
	position: absolute;
	bottom: 0;
}

.common-card-header:hover img {
	opacity: .8;
	transform: scale(1.1);
	transition: all .3s ease-out;
}

.common-card-body {
	padding: 1rem;
	font-size: .8rem;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.common-card-body p {
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
}

.common-card-body ul {
	margin: 0;
	padding: 0;
	width: auto;
	box-sizing: border-box;
	padding: 0.5em 0.5em 0.5em 2em;
}

.common-card-body ul li {
	margin: 0;
	padding: 0;
	margin-right: 1em;
}

/* 画像無しの場合にcommon-card-headerに追加するクラス */
.common-card .no-image {
	height: 100px;
}

.common-card .no-image p {
	height: 100%;
}

/* ---------------- カードレイアウト シンプルバージョン -------------*/

.common-card-simple-wrap {
	width: 100%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 20px 0 40px;
	padding-bottom: 20px;
}

.common-card-simple {
	margin: 2rem 30px;
	width: 240px;
	/* overflow: hidden; */
}

.common-card-simple-img img {
	max-width: 100%;
}

.common-card-simple-title p {
	font-weight: bold;
	font-size: 15px;
	line-height: 1.4em;
	text-align: center;
	/* border-top: 2px solid #333; */
	padding: 6px 10px 4px;
	margin: 10px 0;
	background-color: rgb(var(--image-color));
	border: 1px solid rgb(var(--image-color));
	color: #fff;
	border-radius: 9999px;
	transition: 0.3s ease-in-out;
}

.common-card-simple-title p a {
	color: #fff;
	text-decoration: none;
}

a:hover .common-card-simple-img img {
	opacity: 0.7;
}

.common-card-simple a {
	text-decoration: none;
}

a:hover .common-card-simple-title p {
	background-color: #fafafa;
	color: rgb(var(--image-color));
	transition: 0.3s ease-in-out;
}

.common-card-simple-txt p {
	padding: 0px 0;
	margin: 10px;
}


/* ---------------- 関連書籍レイアウト -------------*/

ul.common-relatedItem-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	gap: 10px;
	padding-left: 1em;
	padding-right: 1em;
	margin: 10px 0;
	border: 1px solid #ccc;
}

.common-relatedItem-wrap li {
	list-style-type: none;
	width: 20%;
}

ul.common-relatedItem-wrap li {
	margin-left: 0;
	margin-right: 0;
}

.common-relatedItem-wrap li img {
	border: 1px solid #ccc;
	width: 100%;
	height: auto;
}

.common-relatedItem-wrap li:hover img {
	opacity: .7;
}

.common-relatedItem-wrap figure {
	margin: 20px 0px;
}

/* ---------------- 詳細ボタン -------------*/
p.common-detail-btn a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: .6em 2em;
	width: fit-content;
	color: #333;
	font-size: 16px;
	font-weight: 700;
	background-color: #F2F2F2;
	border: 1px solid #333;
	border-radius: 6px;
	transition: 0.3s;
}

p.common-detail-btn a::after {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 3px solid #f60;
	border-right: 3px solid #f60;
	transform: rotate(45deg);
}

p.common-detail-btn a:hover {
	text-decoration: none;
	background-color: #cecece;
	color: #333;
}

/* ---------------- アマゾンバナー -------------*/
.amazon-link img {
	width: auto;
	height: 65px;
	margin-top: 10px;
	border: 1px solid #333;
}


/* ---------------- マイナスインデント -------------*/
p.common-indent {
	list-style-type: none;
	text-indent: -1.5em;
	margin: 20px 0 20px 25px;

}

/* ---------------- コマンド入力例 -------------*/
.common-command-pre {
	margin: 20px;
	color: white;
	padding: 20px;
	border: solid 2px white;
	border-radius: 5px;
	background-color: black;
	display: block;
	font-family: monospace;
	white-space: pre-wrap;
	text-align: left;
	/* overflow-x: auto; */
}

/* ---------------- コード入力例 -------------*/
.common-code-pre {
	padding: 20px;
	border: dashed 1px #f8c648;
	/* font-size: .9rem; */
	margin: 0 30px;
	background-color: #ffffe8;
	white-space: pre-wrap;
	font-family: monospace;
	overflow-x: auto;
	text-align: left;
}

/* ---------------- 引用 -------------*/
.common-quote {
	position: relative;
	margin: 2em 30px;
	padding: 40px 20px 20px 20px;
	background: #fff;
	border: 3px solid rgb(var(--image-color-accent));
	color: #555;
}

.common-quote:before {
	font-family: "ＭＳ Ｐゴシック", sans-serif;
	content: '“';
	display: inline-block;
	position: absolute;
	top: 25px;
	left: 15px;
	color: rgb(var(--image-color-accent));
	font-size: 50px;
	font-weight: 900;
}

.common-quote:after {
	font-family: "ＭＳ Ｐゴシック", sans-serif;
	content: '”';
	display: inline-block;
	position: absolute;
	bottom: 5px;
	right: 15px;
	color: rgb(var(--image-color-accent));
	font-size: 50px;
	font-weight: 900;
}

.common-quote p {
	padding: 0;
	margin: 20px;
}

.common-quote cite {
	font-size: 13px;
	text-align: left;
	font-style: italic;
	display: block;
	margin: 20px;
}

.common-quote a.cite-link {
	color: rgb(var(--image-color-accent));
	;
}

/* -------------- 左のメニューがないindex以外のページ -------------*/
.single-layout {
	max-width: 1300px;
	min-width: 850px;
}

.single-layout .common-top-title-area h2,
.single-layout .common-top-title-area p {
	max-width: 950px;
	min-width: 850px;
	margin-right: auto;
	margin-left: auto;
}

.single-layout .common-pageTop-area h1,
.single-layout .common-pageTop-area h2,
.single-layout .common-pageTop-area p {
	max-width: 950px;
	min-width: 850px;
}

/* ---------------- オンラインマニュアルページ PDF、HTML版 レイアウト -------------*/

.common-manual-list-wrap {
	display: flex;
	justify-content: space-between;
	max-width: 700px;
	width: 90%;
	margin: 30px auto;
	border-bottom: 2px solid #999;
	padding-bottom: 10px;
}

.common-manual-list-wrap dl dt {
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 10px;
	background-image: url(../img/common_img/common-icon-list-onlineman.png);
	background-repeat: no-repeat;
	background-position: 0 -1px;
	background-size: 25px;
	padding-left: 30px;
	padding-right: 1.4em;
}

.common-manual-list-wrap dl dd {
	margin: 20px;
	padding-right: 1.4em;
}

.common-manual-list-wrap ul {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.common-manual-list-wrap ul li {
	text-align: center;
	margin: 10px 0;
	padding: 0 10px;
	border-left: 1px solid #999;
	width: 6em;
}

.common-manual-list-wrap ul li a {
	display: block;

}

.common-manual-list-wrap ul li a:hover {
	background-color: #eee;

}

.common-manual-list-wrap ul li img {
	width: 40px;
}

/*-------------------------- スマホとPCで表示を変える用のクラス -----------------------------------------*/

.sp {
	display: none;
}

.pc {
	display: block;
}

/*-------------------------- インターフェイス詳細用　横並びボタン型リンク -----------------------------------------*/

div.nav-list-detail {
	padding: 0;
	margin: 0 30px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
}

div.nav-list-detail span {
	background: #707070;
	border: 1px solid #707070;
	color: #707070;
	font-size: 15px;
	padding: 2px 10px;
	margin: 0;
	border-radius: 18px;
	width: fit-content;
	min-width: 70px;
	height: 30px;
	display: inline-block;
	text-align: center;
	color: #f1f1f1;
}

div.nav-list-detail a {
	color: #f1f1f1;
	letter-spacing: .1rem;
	text-align: center;
}

div.nav-list-detail span:hover {
	background: #f1f1f1;
	color: #707070;
}

div.nav-list-detail span:hover a {
	color: #707070;
}

.hr-dashed {
	border-top: 2px dashed #aaa;
	margin: 0 30px 70px;

}

/* PDF資料室月間ランキング用 */
.pdf-ranking {
	margin: 0 10px 40px;
}

.pdf-ranking ol {
	counter-reset: rank;
	list-style: none;
	padding: 0;
}


.pdf-ranking ol li {
	position: relative;
}

.pdf-ranking ol li:not(:last-child) {
	margin-bottom: 10px;
}

.pdf-ranking ol li::before {
	/* ラベルと順位のスタイル */
	counter-increment: rank;
	content: counter(rank) " 位";
	position: absolute;
	padding: 4px 8px;
	font-size: 1.0em;
	color: #fff;
	/* 文字色 */
	background: rgba(238, 138, 24, 0.8);
	/* 背景色 */
}

.pdf-ranking img {
	/* 画像のスタイル */
	max-width: 260px;
	object-fit: cover;
}

p.title-ribbon {
	display: inline-block;
	position: relative;
	height: 50px;
	/*リボンの高さ*/
	line-height: 50px;
	/*リボンの高さ*/
	text-align: center;
	width: 260px;
	padding: 0 30px;
	/*横の大きさ*/
	font-size: 18px;
	/*文字の大きさ*/
	background: #f57a78;
	/*塗りつぶし色*/
	color: #FFF;
	/*文字色*/
	font-weight: bold;
	box-sizing: border-box;
	margin-bottom: 10px;
}

p.title-ribbon:before,
p.title-ribbon:after {
	position: absolute;
	content: '';
	width: 0px;
	height: 0px;
	z-index: 1;
}

p.title-ribbon:before {
	top: 0;
	left: 0;
	border-width: 25px 0px 25px 15px;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
}

p.title-ribbon:after {
	top: 0;
	right: 0;
	border-width: 25px 15px 25px 0px;
	border-color: transparent #fff transparent transparent;
	border-style: solid;
}



/* ------------ オンラインショップのポップアップバナー用 ----------*/
.popup-shop {
	display: none;
	position: fixed;
	margin: 0;
	z-index: 10;
	bottom: 75px;
	right: 20px;
}

.popup-shop-body {
	width: 230px;
	height: 230px;
	background: #f8f8f8;
	color: #000000;
	border: 3px solid #06a;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%);
	box-shadow: 0 0 7px rgb(0 0 0 / 40%);
	line-height: 0.6em;
	font-size: 15px;
}

.popup-shop-body img {
	width: 100%;
	height: auto;
}

.popup-shop-close {
	font-family: Arial, Helvetica, sans-serif;

	line-height: 0.5em;
	position: absolute;
	text-align: center;
	vertical-align: middle;
	top: -6px;
	right: -6px;
	z-index: 99999;
	padding: 0;
	border: none;
	background-color: #f8f8f8;
	border-radius: 9999px;
	cursor: pointer;
	-webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%);
	box-shadow: 0 0 7px rgb(0 0 0 / 40%);
	width: 25px;
	height: 25px;
}

/*-------------------------- レスポンシブ用CSS ここから -----------------------------------------*/


@media screen and (max-width:1050px) {

	/* CTAボタン */
	.common-cta-btn {
		bottom: 7%;
	}

	a.common-cta-btn01,
	a.common-cta-btn02 {
		font-size: 14px;
		padding: .5em .7em;
		max-width: 200px;
	}

	a.common-cta-btn01::before,
	a.common-cta-btn02::before {
		display: none;
	}

	.common-cta-btn-copy {
		font-size: 85%;
	}

}

@media screen and (max-width:640px) {
	/* ↓ここに個別のスマホ用スタイルを指定 */

	html {
		font-size: 62.5%;
		position: relative;
		overflow-x: hidden;
	}

	body {
		font-size: 1.0rem;
		line-height: 1.6em;
		color: #000;
		background-image: none;
		margin: 0px;
		padding: 0px;
		overflow-x: hidden;
		margin: 0;
		word-wrap: break-word;
		overflow-wrap: break-word;
		max-width: none;
		min-width: auto;
		width: auto;
	}

	li a {
		word-break: break-all;
	}

	td a {
		word-break: break-all;
	}


	/* ↓不要？ */
	.newpromo2 {
		margin-left: 10px;
		margin-right: 10px;
	}


	/*------------------ メインコンテンツ用 ----------------------------------*/

	.pagenavi {
		max-width: none;
		min-width: auto;
		width: auto;
		height: auto;
		font-size: 1.4rem;
		line-height: 1.6em;
		padding: 120px 4px 2px 0px;
		margin: 0px;
		overflow-x: scroll;
		white-space: nowrap;
		display: flex;
	}

	.pagenavi a {
		width: auto;
		height: auto;
		font-size: 1.4rem;
		line-height: 1.6em;
		padding-left: 10px;
		padding-right: 10px;
	}


	.mainbody {
		background-image: none;
		padding: 0px;
		background-color: #FFF;
		margin: 0px;
		font-size: 1.6rem;
		line-height: 1.7em;
		max-width: none;
		min-width: auto;
	}


	.mainbody img {
		max-width: 100%;
		height: auto;
		margin: 0px;
		padding: 0px;
	}

	.mainleft {
		max-width: none;
		min-width: auto;
		height: auto;
		z-index: 10;
		/* position: absolute; */

		left: -300px;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		top: 145px;
		overflow-y: scroll;
		position: fixed;
		/* height:100%; */
		height: calc(100% - 145px);
		background-color: #fff;

	}

	.mainleft li {
		font-size: 1.4rem;
		line-height: 1.6em;
	}


	.mainright {
		max-width: none;
		min-width: auto;
		width: auto;
		width: 100%;
		margin: 0px;
		padding: 0px;
		background-color: #FFF;
		position: relative;
		top: 0;
		left: 0;
	}

	.common-pageTop-name {
		font-size: 16px;
		font-weight: normal;
		display: block;
		width: 100%;
		padding-left: 0;
		line-height: 1.2em;

	}


	.common-mainTxt-area {
		padding-right: 10px;
		padding-left: 10px;
		margin-bottom: 40px;
	}

	.common-mainTxt-area h3 {
		padding-left: 1.0em;
		padding-right: 1.0em;
		margin: 30px 0px 20px 15px;
	}

	.common-mainTxt-area h4 {
		padding-left: 1.0em;
		padding-right: 1.0em;
	}

	.common-mainTxt-area h5 {
		padding-left: 1.0em;
		padding-right: 1.0em;
	}

	.common-mainTxt-area p {
		padding-left: 1.0em;
		padding-right: 1.0em;
	}

	.common-mainTxt-area ul,
	.common-mainTxt-area ol,
	.common-article-area ul,
	.common-article-area ol {
		padding-left: 1.0em;
		padding-right: 0.5em;
		margin-left: 1.0em;
		margin-right: 1.0em;
	}

	.common-mainTxt-area ul li,
	.common-mainTxt-area ol li,
	.common-article-area ul li,
	.common-article-area ol li {
		padding-left: 0;
		padding-right: 0;
		margin-left: 1.0em;
		margin-right: 0;
	}

	.common-article-area p {
		padding: 0;
	}


	.common-article-area .common-option-dash {
		font-weight: bold;
		padding: 0 0 10px;
	}

	/* 文字サイズ等調整 */
	.common-article-area h1 {
		font-size: 23px;
	}

	.common-article-area h2 {
		margin: 0 0 30px;
		font-size: 21px;
	}

	.common-article-area h3 {
		font-size: 18px;
		margin: 20px 0;
	}

	.common-article-area section h4 {
		font-size: 16px;
		margin: 30px 0 10px;
	}

	.common-top-title-area h2 {
		font-size: 25px;
		line-height: 1.4em;
	}

	.common-pageTop-area h1,
	.common-mainTxt-area h1 {
		font-size: 21px;
	}

	.common-pageTop-area h2,
	.common-mainTxt-area h2 {
		font-size: 21px;
	}

	.headline-left .common-mainTxt-area h2 {
		margin: 0px 10px 30px;
		padding-left: 5px;
	}

	.common-mainTxt-area h3 {
		font-size: 18px;
	}

	.common-pr-area h2 {
		font-size: 22px;
		margin-bottom: 30px;
		line-height: 1.4em;
	}

	.common-pr-area h3 {
		margin-top: 20px;
	}


	.common-pagelink-area ul li {
		font-size: 16px;
	}



	/* 目次 */

	.common-index-navi ol,
	.common-index-navi ul {
		margin: 0;
		padding-left: 10px;
	}

	.common-article-area .common-index-navi ol ol,
	.common-article-area .common-index-navi ol ul {
		margin-left: 0;
	}



	/* ---------------------- 機能ダイジェスト ------------------------------------*/

	.common-funcDigest-area ul li {
		font-family: 'メイリオ', 'Meiryo', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ＭＳ Ｐゴシック', sans-serif;
		color: #000;
		font-size: 1.1rem;
		letter-spacing: 0px;
		font-weight: normal;
		margin: 1px;
		margin-bottom: 2px;
		padding: 4px 10px 2px 10px;
		line-height: 1.4em;
	}

	/* ---------------------- 機能ダイジェスト ここまで ---*/

	.common-sidemenu-support ul {
		margin: 10px 0;
	}

	/* ---------------------- トップPR ------------------------------------*/
	.common-pr-area {
		margin-right: 0px;
		margin-left: 0px;
		width: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;
		padding-left: 0;
		padding-right: 0;
		padding-top: 40px;
		margin-bottom: 40px;
	}

	.common-pageTop-area p {
		margin: 20px auto;
		text-align: center;
		display: block;
		padding-left: 1.0em;
		padding-right: 1.0em;
	}


	.common-top-title-area {
		margin: 0;
		padding: 0;
	}

	.common-top-title-area p {
		margin: 0;
		padding: 1.0em 5%;
		text-align: center;
	}


	.common-top-title-area .common-top-title-logo {
		width: 100%;
		max-width: 750px;
	}

	.common-top-title-area .common-top-title-icon {
		width: 100px;
		height: auto;
		margin: 20px;
	}

	.common-top-title-area img.common-top-title-image {
		width: 100%;
		border: 1px #ccc solid;
	}

	/* トップ画像背景 */
	.common-top-title-bg {
		font-size: 40px;
		min-height: 160px;
	}

	/* 主な機能 アイコン表示 */
	.common-function-wrap {
		max-width: none;
		min-width: auto;
		width: auto;
		width: 100%;
		border-radius: 0;
		padding: 2px 0 20px 0;
	}

	ul.common-function-list {
		width: 100%;
		margin: 20px 0;
		margin-bottom: 30px;
		padding: 0;
	}

	ul.common-function-list li {
		width: 50%;
		min-width: 130px;
		margin: 20px 0;
		padding: 0;

	}

	ul.common-function-list li .common-function-title {
		font-size: 16px;
		line-height: 1.4em;
		padding: 0 1.0em;
	}

	.common-function-list li .common-function-icon img {
		width: 100px;
		height: 100px;
		border-radius: 0;
		border: 0;
		text-align: center;
		padding: 0px;
	}

	/* PRエリア 横並び用 */
	.common-parallel-wrap {
		display: flex;
		flex-direction: column;
		margin: 0 0 30px;

	}

	.common-parallel-wrap .common-parallel-txt h3 {
		padding-left: 1.0em;
		padding-right: 1.0em;
	}


	/* -------------------- 販売形式 -----------------------------------*/
	.common-mainTxt-area .common-sales-wrap {
		width: 100%;
	}

	.common-mainTxt-area .common-sales-list {
		width: 100%;
		flex-direction: column;
		justify-content: center;
		margin: 0;
		padding: 0;
	}

	.common-mainTxt-area .common-sales-list li {
		width: 80%;
		margin-top: 10px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		list-style-type: none;
		display: block;
		position: relative;
		padding: 10px;
	}

	/* ---------------------- ショッピングカート ------------------------------------*/

	.common-shopcart-wrap {
		display: flex;
		flex-direction: column;
	}

	.common-shopcart-content-wrap {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		margin-bottom: 40px;
		padding: 0;
	}

	div.common-shopcart-text p.common-shopcart-productname {
		padding: 0;
		padding-left: 10px;
		margin: 0;
	}

	p.common-shopcart-image {
		padding: 0;
		margin: 0;
		width: 100px;
	}

	.mainright section.common-mainTxt-area p.common-shopcart-priceN {
		font-size: 13px;
	}

	.common-shopcart-shopcart-btn p {
		margin: 0;
		padding: 10px 0;
	}

	section.common-mainTxt-area p.common-shopcart-btn {
		text-align: center;
		width: 100%;
	}

	p.common-shopcart-btn a img {
		margin-left: auto;
		width: 180px;
	}

	div.common-shopcart-text p.common-shopcart-productname {
		font-size: 2.0rem;
	}

	/* ---------------------- ご購入について ---*/
	.howto-purchase {
		display: block;
	}

	.howto-purchase div {
		display: block;
		margin-top: 30px;
	}

	.howto-purchase h3 {
		margin-top: 0;
	}


	.howto-purchase img {
		width: 80px;
		margin: 0 auto;
	}


	/*------------------------ 注意事項表示 -------------------------*/
	dl.common-caution-text {
		margin: 30px 10px 30px;
	}

	dl.common-caution-text dd p {
		padding: 0;
		margin: 4px 10px 10px;
		font-size: 1.4rem;
	}

	dl.common-caution-text dd ul {
		padding: 0;
		margin: 4px 10px 10px;
		font-size: 1.4rem;
	}

	dl.common-caution-text dd ul li {
		margin: 10px 0 10px 10px;
		font-size: 1.4rem;
	}

	.common-mainTxt-area dl.common-caution-text {
		margin: 30px 0 30px;
	}

	.common-mainTxt-area .common-caution-text dd ul {
		padding: 0;
		margin: 4px 10px 10px;
		font-size: 1.4rem;
	}

	.common-mainTxt-area .common-caution-text dd ul li {
		margin: 10px 0 10px 10px;
		font-size: 1.4rem;
	}

	/* ---------------- お知らせ用 -------------------------------- */

	.common-info-wrap dl {
		margin: 10px 0;
		display: flex;
		flex-direction: column;
	}

	.common-info-wrap dl dt {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.common-info-wrap dl dt .common-info-label {
		font-size: 13px;
		padding: 6px 6px 1px;
		margin: 0;
		line-height: 1.6em;
	}

	.common-info-wrap dl dt .common-info-date {
		font-size: 15px;
		padding: 4px 6px 2px;
		margin-left: 1.2rem;
		font-weight: bold;

	}

	.common-info-wrap dl dd {
		padding-left: 0;
		margin: 10px 0;
		display: flex;
		flex-direction: column;
	}

	.common-mainTxt-area .common-info-wrap dl dd p {
		font-size: 1.5rem;
	}

	/* 注意表示 */
	.common-caution-box {
		margin: 0 10px;
		padding: 25px 20px 7px;
	}

	/*------------------------ 告知表示 -------------------------*/

	.common-announce-box {
		padding: 55px 15px 20px;
		margin: 0 10px 80px;
	}

	p.common-announce-box-title {
		padding-left: 5px;
		padding-right: 25px;
		font-size: 16px;
		margin-top: 6px;
	}


	/*------------------------ 色付き枠ブロック -------------------------*/

	.common-extra-block-lightgray {
		margin: 60px 10px;
		padding: 10px 0;
	}

	.common-extra-block-lightgray dl {
		padding: 0;
	}

	.common-extra-block-lightgray dl dt {
		margin: 1.0em auto;
	}

	/* ライトカラーの色付きブロック*/
	.common-block-lightcolor {
		margin: 30px 10px;
	}

	/* 画像と吹き出し */
	p.common-baloon-block-title {
		font-size: 20px;
	}

	.common-baloon-wrap {
		display: block;
	}

	.common-baloon-img {
		max-width: 60%;
		margin: auto;
	}

	.common-baloon-text {
		display: flex;
		justify-content: center;
		margin: auto;
		position: relative;
		max-width: 300px;
		min-width: 120px;
		max-width: 90%;
		margin-bottom: 40px;
		padding: .8em 1.2em;
		border-radius: 5px;
		background-color: #e3f1ff;
		color: #333333;

	}

	.common-baloon-text::before {
		position: absolute;
		bottom: -15px;
		width: 30px;
		height: 10px;
		background-color: #e3f1ff;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: '';
		top: 100%;
		left: 50%;
	}

	/* PRポイント箇条書き */
	.common-pr-point .common-pr-point-title {
		font-size: 20px;
	}

	.common-pr-point ol > li {
		font-size: 18px;
	}

	.common-pr-point-flex img {
		max-width: 100px;
		margin: auto;
	}


	/* ---------------- 引用 -------------*/
	.common-quote {
		margin: 2em 10px;
		padding: 1.5em;
	}


	/* ---------------- 改訂情報用 -------------------------------- */

	.common-update-info-wrap {
		margin: 0;
	}

	.common-update-info-wrap dt {
		padding: 5px 0;
		float: none;
	}

	.common-update-info-wrap dd {
		margin: 0 10px;
		margin-bottom: 10px;
		padding: 5px 10px;
	}


	h2.h2-update {
		text-align: left;
		font-size: 22px;
		display: block;
		margin-right: 10px;
		margin-left: 10px;
	}

	h4.h4-update {
		font-size: 16px;
		margin: 0 15px;
		padding: 20px 0 5px;
	}

	.common-dl-update dl {
		margin: 30px 0px 40px;
	}

	.common-dl-update dl dt {
		margin: 20px 0px 10px;
		font-size: 15px;

	}

	.common-dl-update dl dd {
		margin: 10px 0px 10px 0;
	}

	/* ---------------- 問い合わせ 表示用 -------------------------------- */

	.common-inquiry-wrap dl {
		font-size: 1.2rem;
		white-space: normal;
	}

	.common-inquiry-wrap div::before {
		width: 50px;
		height: 50px;
	}

	.common-inquiry-wrap .small::before,
	.common-inquiry-wrap .small2::before {
		width: 40px;
		height: 40px;
	}


	.common-inquiry-wrap dl dd {
		font-size: 2.0rem;
	}

	.common-inquiry-wrap .small dl dd,
	.common-inquiry-wrap .small2 dl dd {
		font-size: 1.5rem;
	}

	.common-inquiry-wrap .small2 dl {
		width: 280px;
	}

	/* ---------------- カードレイアウト -------------*/

	.common-card {
		width: 70%;
		min-width: 250px;
	}

	.common-card-header img {
		height: 100%;
	}

	/*------------- youtube動画表示用 --------------------------------- */


	.common-movie iframe {
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* ---------------- 関連書籍レイアウト -------------*/
	ul.common-relatedItem-wrap {
		justify-content: center;
		margin: 0;
		padding: 0;
	}

	.common-relatedItem-wrap li {
		width: 40%;
	}

	/* ---------------- 記事ページレイアウト -------------*/

	.common-article-area>section {
		margin: 40px 5px 50px;
	}

	.common-article-area ul.common-relatedItem-wrap {
		justify-content: center;
	}

	.common-article-area ul.common-relatedItem-wrap li {
		width: 80%;
	}

	.common-article-area aside ul.common-relatedItem-wrap {
		justify-content: center;
		padding-bottom: 0;
	}

	.common-note p {
		font-size: 15px;
	}

	.common-article-card-wrap ul li.common-article-card {
		width: 90%;
		max-width: 400px;
		margin-bottom: 20px;
	}

	.common-article-card-wrap ul {
		justify-content: center;
		margin: 0;
		padding: 0;
	}

	/* 記事内広告風バナー */
	.article-banner {
		margin: 10px;
		padding: 20px;
		display: block;
	}

	.article-banner img {
		width: 100%;
	}

	.article-banner-text {
		width: 100%;
		padding: 0;
	}

	p.article-banner-function {
		margin: 10px 10px 0;
		padding: 6px 10px 4px;
	}


	/* ---------------------------- FAQ用 ------------------------------*/

	.common-faq-list {
		margin: 30px 0 0;
	}

	/* ---------------------------- POD版マニュアル用 ------------------------------*/

	.common-pod-image img {
		max-width: 250px;

	}

	/*-------------------------- デスクトップ製品保守仕様テキスト -----------------*/
	.service-dsk-txt {
		margin: 40px 0 50px;
		padding: 0;
	}

	/*-------------------------- システム製品保守仕様テキスト -----------------*/
	.service-sys-txt {
		margin: 40px 0 70px;
		padding: 0;
	}

	/* --------------------- 汎用テーブル用 ------------------------------------------ */

	.common-table-typeB {
		min-width: auto;
	}

	.common-table-typeC {
		min-width: auto;
	}

	.headline-left .common-table-typeD {
		margin: 40px 10px;
		min-width: max-content;
	}

	/* 価格表 */
	.common-table-price {
		margin: 40px 10px;
		min-width: auto;
		width: 90%;
	}

	.common-table-typeA caption,
	.common-table-typeB caption,
	.common-table-typeC caption,
	.common-table-typeD caption,
	.common-table-comparison caption,
	.common-table-price caption {
		font-size: 16px;
	}

	/*----------------- table用 モバイル表示時にテーブルを横にスライドさせます ----------------------*/
	/*
	スクロール可能な表を使う場合はHTMLのtableを「<div class="table-scroll">」で
	囲って、スマホ用CSSに該当の table に幅（width）の設定をする。
	
*/
	.table-scroll {
		overflow-x: auto;
		margin: 0 10px;
	}


	.table400 {
		min-width: 400px;
	}

	.table500 {
		min-width: 500px;
	}

	.table700 {
		min-width: 700px;
	}

	.table900 {
		min-width: 900px;
	}

	.table1000 {
		min-width: 1000px;
	}



	/* ---------------------- リスト ------------------------------------*/
	/* 多段リスト */

	ol.common-option-2column,
	ul.common-option-2column {
		column-count: 1;

	}

	ol.common-option-3column,
	ul.common-option-3column {
		column-count: 1;
	}

	/* ---------------------- DL（dt/dd縦並び） ------------------------------------*/

	.common-dl-tableType-line dl {
		margin: 30px 0px 40px;
	}

	.common-dl-tableType-line dl dt {
		font-weight: bold;
		margin: 20px 0px 10px;
	}

	.common-dl-tableType-line dl dd {
		margin: 10px 0px 10px 0;
	}


	/* ---------------------- 表のようなDL ------------------------------------*/

	.common-dl-tableType dl {

		flex-direction: column;
	}

	.common-dl-tableType dl dt {
		padding: 10px;
		padding-top: 30px;
	}

	.common-dl-tableType dl dd {
		padding: 10px;
	}



	/* Newアイコン */
	.mainbody img.common-icon-new,
	.mainbody img.common-icon-inline,
	.common-faq-list p img.common-icon-inline {
		display: inline-block;
		vertical-align: middle;
		height: 1.0em;
		top: -0.1rem;
		position: relative;
		margin-right: 0.1em;
		margin-left: 0.2em;
	}

	/* ショッピングカートボタン */
	img.common-shopcart-btn-inline {
		height: 1.5em;
	}


	/* ---------------- カードレイアウト シンプルバージョン -------------*/

	.common-card-simple {
		margin: 2rem 30px;
		width: 100%;
		/* overflow: hidden; */
	}

	/* ---------------------- コンテンツナビ ------------------------------------*/


	.common-contents-navi {
		height: auto;
		align-items: stretch;
		padding-bottom: 40px;
	}

	.common-contents-navi a {
		padding: 10px 1.0em;
		font-size: 14px;
		min-width: 9.0em;
	}

	/*-------------- フッター用 ----------------------*/


	.mainfooter {
		font-size: 1.6rem;
		line-height: 1.6em;
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 10px 0px;
		position: relative;
		top: 0;
		left: 0;
	}

	.mainfooter img {
		max-width: 100%;
		height: auto;
	}

	/* ↓不要？ */
	#footer02 {
		clear: both;
		padding-top: 16px;
	}

	/* ↑不要？ */

	.footercopy {
		margin-bottom: 100px;
	}


	/* -------------------- トップへボタン ---------------------------*/
	.to-top-navi p {
		font-size: 2.2rem;
		right: 20px;
		bottom: 6px;
		z-index: 98;
	}

	/*--------------- サイドメニュー調整用 -----------------------------*/
	.common-sidemenu ul {
		margin: 0px;
	}

	/* ------------- オプション ----------------*/
	/* 他のクラスに追加して使用するクラス */


	/* felx-boxで縦並びを逆順にする場合 */
	.common-option-flex-reverse {
		flex-direction: column-reverse;
	}

	/* flex-boxで横並び均等にしたい場合 */
	.common-option-flex-spacearound {
		display: flex;
		flex-direction: column;
	}

	/* flex-boxで画像横並びで画像の幅を指定したい場合 */
	.common-option-flex-imgWidth {
		display: flex;
		flex-direction: column;
	}

	.common-option-flex-imgWidth figure img {
		width: 100%;
		max-width: 100%;
	}

	/* リセラー用 */
	.common-reseller-flex-wrap>div {
		width: 350px;
		min-width: 300px;

	}

	.common-topPR-flex-wrap>div {
		width: 350px;
		min-width: 300px;
	}


	/* ---------------- マイナスインデント -------------*/
	p.common-indent {
		margin: 10px 0 10px 20px;

	}

	/* ---------------- コマンド入力例 -------------*/
	.common-command-pre {
		margin: 20px 0;
		padding: 20px;
	}

	/* ---------------- コード入力例 -------------*/
	.common-code-pre {
		margin: 20px 0;
		padding: 20px;
		white-space: pre;
	}

	/* -------------- 左のメニューがないindex以外のページ -------------*/
	.single-layout {
		max-width: initial;
		min-width: initial;
	}

	.single-layout .common-top-title-area h2,
	.single-layout .common-top-title-area p {
		max-width: initial;
		min-width: initial;
		margin-right: auto;
		margin-left: auto;
	}

	.single-layout .common-pageTop-area h1,
	.single-layout .common-pageTop-area h2,
	.single-layout .common-pageTop-area p {
		max-width: initial;
		min-width: initial;
	}

	/* ---------------- オンラインマニュアルページ PDF、HTML版 レイアウト -------------*/

	.common-manual-list-wrap {
		flex-wrap: wrap;
		flex-direction: flex-direction;
		width: 98%;
	}

	.common-manual-list-wrap ul {
		margin-right: 0;
		margin-left: auto;
	}

	.common-manual-list-wrap dl dd {
		padding-right: 0;
	}

	/*-------------------------- スマホとPCで表示を変える用のクラス -----------------------------------------*/

	.sp {
		display: block;
	}

	.pc {
		display: none;
	}


	/*-------------------------- インターフェイス詳細用　横並びボタン型リンク -----------------------------------------*/

	div.nav-list-detail {
		margin: auto;
	}


	/* ------------ オンラインショップのポップアップバナー用 ----------*/

	.popup-shop {
		width: 150px;
		height: 150px;
		margin: 0px;
		right: auto;
		bottom: 6px;
		left: 6px;
		padding: 0;
	}

	.popup-shop-body {
		width: 100%;
		height: 100%;
		border-radius: 0px;
	}

	.popup-shop-close {
		top: -5px;
		right: -5px;
	}

	/* PRエリア　タイトル付きの囲みボックス箇条書き */
	.common-pr-titlebox {
		margin: 80px 10px;
	}

	.common-pr-titlebox ul li {
		font-size: 15px;
	}

	.common-pr-titlebox ul {
		margin: auto 20px;
	}

	.common-pr-titlebox h3 {
		font-size: 18px;
		margin: 30px 10px;
	}

	.common-pr-titlebox h3::after {
		height: 3px;
	}


	/* 縦ラインの囲みブロック */

	.common-block-typeA {
		padding: 1em;
		width: 90%;
	}

	.common-block-typeA h3 {
		margin-bottom: 40px;
		font-size: 16px;
	}

	.common-block-typeA p{
		padding-left: 10px;
		padding-right: 10px;
	}
	.common-block-typeA ul{
		padding-left: 10px;
		padding-right: 10px;
		margin: 10px;
	}
	/* ↑ここまでに個別のスマホ用スタイルを指定 */
}

@media screen and (max-width:450px) {


	/* CTAボタン */
	.common-cta-btn {
		bottom: 7%;
		gap: 5px;
	}

	a.common-cta-btn01,
	a.common-cta-btn02 {
		font-size: 10px;
		padding: .3em .5em;
		max-width: 140px;
	}

	.common-cta-btn-copy {
		display: none;
	}
}

/*-------------------------- レスポンシブ用CSS ここまで ----------------------*/