@charset "utf-8";
/***************************************************
information
	filename : app_article.css;
***************************************************/

/* ** article01 start ** */
/****************** 幅指定 ******************/
.articleBox,
.examBox,
.paymentBox {
	width: var(--app-articleBox-width); /* コンテンツ基本幅 */
	margin: 0 auto;
}
.articleArea,
.examArea,
.paymentArea {
	width: var(--app-articleArea-width); /* コンテンツ基本幅(エディタ用) */
	margin: 0 auto;
}
.sp_prev .articleBox {padding-left: 2.0rem;padding-right: 2.0rem;}
.sp_prev .articleBox,
.sp_prev .articleBox p,
.sp_prev .articleBox table,
.sp_prev .articleBox .DLBox,
.sp_prev .articleBox ul,
.sp_prev .articleBox ol,
.sp_prev .videoMax {width: 100%;}

.sp_prev .examBox {padding-left: 2.0rem;padding-right: 2.0rem;}
.sp_prev .examBox,
.sp_prev .examBox p,
.sp_prev .examBox table,
.sp_prev .examBox .DLBox,
.sp_prev .examBox ul,
.sp_prev .examBox ol {width: 100%;}

.sp_prev .paymentBox {padding-left: 2.0rem;padding-right: 2.0rem;}
.sp_prev .paymentBox,
.sp_prev .paymentBox p,
.sp_prev .paymentBox table,
.sp_prev .paymentBox .DLBox,
.sp_prev .paymentBox ul,
.sp_prev .paymentBox ol {width: 100%;}

/* ** article01 end ** */

/* ** article02 start ** */
/****************** メインビジュアル（システム登録反映） ******************/

/*** コンテンツ詳細メインビジュアル ***/
.conVisualArea {
	margin: var(--app-conVisualArea-mg); /* マージン */
	padding: var(--app-conVisualArea-pd);/* パディング */
	text-align: center;
}
.conVisual {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
.conVisual img {width: 100%;margin: 0 auto;}

/*** セミナー詳細メインビジュアル ***/
.semVisualArea {
	margin: var(--app-semVisualArea-mg); /* マージン */
	padding: var(--app-semVisualArea-pd);/* パディング */
	text-align: center;
}
.semVisual {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
.semVisual img {width: 100%;margin: 0 auto;}

/*** 商品詳細メインビジュアル ***/
.prdVisualArea {
	margin: var(--app-prdVisualArea-mg); /* マージン */
	padding: var(--app-prdVisualArea-pd);/* パディング */
	text-align: center;
}
.prdVisual {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
.prdVisual img {width: 100%;margin: 0 auto;}
/* ** article02 end ** */

/* ** article0301 start ** */
/****************** 詳細ページメインタイトル ******************/

/*** コンテンツ詳細メインタイトル ***/
h1.conTitle,
p.conTitle {
	margin: var(--app-conTitle-mg); /* マージン */
	padding: var(--app-conTitle-pd); /* パディング */
	text-align: left;
	color: var(--app-conTitle-txt); /* テキスト色 */
	font-size: var(--font-conTitle); /* フォントサイズ */
	line-height: var(--font-conTitle-gy); /* 行間 */
	background: var(--app-mypagenav-bg); /* 背景色 */
}
/*** セミナー詳細メインタイトル ***/
h1.semTitle,
p.semTitle {
	margin: var(--app-semTitle-mg); /* マージン */
	padding: var(--app-semTitle-pd); /* パディング */
	text-align: left;
	color: var(--app-semTitle-txt); /* テキスト色 */
	font-size: var(--font-semTitle); /* フォントサイズ */
	line-height: var(--font-semTitle-gy); /* 行間 */
	background: var(--app-mypagenav-bg); /* 背景色 */
}
/*** 商品詳細メインタイトル ***/
h1.prdTitle,
p.prdTitle {
	margin: var(--app-prdTitle-mg); /* マージン */
	padding: var(--app-prdTitle-pd); /* パディング */
	text-align: left;
	color: var(--app-prdTitle-txt); /* テキスト色 */
	font-size: var(--font-prdTitle); /* フォントサイズ */
	line-height: var(--font-prdTitle-gy); /* 行間 */
	background: var(--app-mypagenav-bg); /* 背景色 */
}
/* ** article0301 end ** */

/* ** article0302 start ** */

/****************** H2 本文基本タイトル ******************/
.articleBox h2,
.articleArea h2 {
}
/* ** article0302 end ** */

/* ** article0303 start ** */
/****************** H3 本文基本タイトル ******************/
.articleBox h3,
.articleArea h3 {
}
/* ** article0303 end ** */

/* ** article0304 start ** */
/****************** H4 本文基本タイトル ******************/
.articleBox h4,
.articleArea h4 {
}
/* ** article0304 end ** */

/* ** article0305 start ** */
/****************** H5 本文基本タイトル ******************/
.articleBox h5,
.articleArea h5 {
}
/* ** article0305 end ** */

/* ** article0306 start ** */
/****************** H6 本文基本タイトル ******************/
.articleBox h6,
.articleArea h6 {
}
/* ** article0306 end ** */

/* ** article0401 start ** */
/****************** 本文基本テキスト ******************/
.articleBox p,
.articleArea p {
	margin: var(--app-articleP-mg); /* マージン */
	padding: var(--app-articleP-pd); /* パディング */
	color: var(--app-articleP-txt); /* テキスト色 */
	font-size: var(--font-articleP); /* フォントサイズ */
	line-height: var(--font-articleP-gy); /* 行間 */
}
/* ** article0401 end ** */

/* ** article0501 start ** */
/****************** 本文基本リスト ******************/
/* 基本設定 */
.articleBox ul,
.articleBox ol ,
.examBox ul,
.examBox ol{
	max-width: 100%;
	margin: var(--app-articleUOL-mg); /* マージン */
	padding: var(--app-articleUOL-pd); /* パディング */
	color: var(--app-articleUOL-txt); /* テキスト色 */
	font-size: var(--font-articleUOL); /* フォントサイズ */
	line-height: var(--font-articleUOL-gy); /* 行間 */
}
/* ulリスト個別設定 */
.articleBox ul li,
.examBox ul li {
	margin: var(--app-articleULi-mg); /* マージン */
	padding: var(--app-articleULi-pd); /* パディング */
}
/* olリスト個別設定 */
.articleBox ol li,
.examBox ol li {
	margin: var(--app-articleOLi-mg); /* マージン */
	padding: var(--app-articleOLi-pd); /* パディング */
}
/* ** article0501 end ** */

/* ** article0601 start ** */
/****************** 本文基本テーブルタグ ******************/
.articleBox tbody {-webkit-text-size-adjust: 100%;}
.articleBox table {
	width:100%;
	margin: var(--app-articleTable-mg); /* マージン */
	padding: var(--app-articleTable-pd); /* パディング */
	font-size: var(--font-articleTable);/* フォントサイズ */
	font-weight: bold;
}
.articleBox th {
	padding: var(--app-articleTable-th-pd); /* パディング */
	background: var(--app-articleTable-th-bg);/* 背景色 */
	border: var(--app-articleTable-brd); /* ボーダー指定 */
	text-align: left;
}
.articleBox td {
	padding: var(--app-articleTable-td-pd); /* パディング */
	background: var(--app-articleTable-td-bg);/* 背景色 */
	border: var(--app-articleTable-brd); /* ボーダー指定 */
	text-align: left;
}
/* ** article0601 end ** */

/* ** article0701 start ** */
/****************** 本文画像埋め込み ******************/
/* 画像埋め込み基本 */
.articleBox p img,
.articleArea p img {
	width: 100%;
	height: auto;
	margin: var(--app-articlePImg-mg); /* マージン */
	padding: var(--app-articlePImg-pd); /* パディング */
}
/* ** article0701 end ** */

/****************** エディタテンプレート指定 ******************/

/* ** article0801 start ** */
/****************** preタグ基本設定 ******************/
.preBox {
	width: 100%;
	margin: var(--app-preBox-mg); /* マージン */
	padding: var(--app-preBox-pd); /* パディング */
	border-radius: var(--app-preBox-rod);-webkit-border-radius: var(--app-preBox-rod);-moz-border-radius: var(--app-preBox-rod); /* 角丸 */
	background: var(--app-preBox-bg);/* 背景色 */
	border: var(--app-preBox-brd); /* ボーダー指定 */
	color: var(--app-preBox-txt); /* テキスト色 */
	text-align: left;
	position:relative;
}
.preBox pre {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: var(--font-preBox);/* フォントサイズ */
	letter-spacing: 0.2em;
	overflow: auto;
}
/* ** article0801 end ** */

/* ** article0901 start ** */
/****************** dlタグ基本設定 ******************/
.DLBox {
	width: 100%;
	margin: var(--app-dlBox-mg); /* マージン */
	padding: var(--app-dlBox-pd); /* パディング */
	border-radius: var(--app-dlBox-rod);-webkit-border-radius: var(--app-dlBox-rod);-moz-border-radius: var(--app-dlBox-rod); /* 角丸 */
	background: var(--app-dlBox-bg);/* 背景色 */
	border: var(--app-dlBox-brd); /* ボーダー指定 */
	font-size: var(--font-dlBox);/* フォントサイズ */
	color: var(--app-dlBox-txt); /* テキスト色 */
}
.DLBox dl {
	margin: var(--app-dlBox-dl-mg); /* マージン */
	padding: var(--app-dlBox-dl-pd); /* パディング */
	display: flex;
	border-bottom: var(--app-dlBox-dl-brd); /* ボーダー指定 */
}
.DLBox dt {
	width: var(--app-dlBox-dt-size); /* サイズ指定 */
	margin: var(--app-dlBox-dt-mg); /* マージン */
	padding: var(--app-dlBox-dt-pd); /* パディング */
}
.DLBox dd {
	width: var(--app-dlBox-dd-size); /* サイズ指定 */
	margin: var(--app-dlBox-dd-mg); /* マージン */
	padding: var(--app-dlBox-dd-pd); /* パディング */
}
.DLBox dl.bga {
	color: var(--app-dlBox-dla-txt); /* テキスト色 */
	background: var(--app-dlBox-dla-bg);/* 背景色 */
}
.DLBox dl.bgb {
	color: var(--app-dlBox-dlb-txt); /* テキスト色 */
	background: var(--app-dlBox-dlb-bg);/* 背景色 */
}
/* ===================================================================================
for SP max-width: 600px
=================================================================================== */
@media screen and (max-width: 600px) {
	.DLBox dl {
		display: block;
	}
}
/* ** article0901 end ** */

/* ** article1001 start ** */
/****************** デザイン装飾基本設定(書式) ******************/

/*** pタグ装飾 ***/

/* 幅小 */
.articleBox p.widths {width: 90%;}

/* 枠線のみ */
.articleBox p.style1 {
	margin: var(--app-p-style-mg); /* マージン */
	padding: var(--app-p-style-pd); /* パディング */
	border: var(--app-p-style-brd); /* ボーダー指定 */
	border-radius: var(--app-p-style-rod); /* 角丸 */
}
/* 枠線・背景 */
.articleBox p.style2 {
	margin: var(--app-p-style-mg); /* マージン */
	padding: var(--app-p-style-pd); /* パディング */
	background: var(--app-p-style-bg);/* 背景色 */
	border: var(--app-p-style-brd); /* ボーダー指定 */
	border-radius: var(--app-p-style-rod); /* 角丸 */
}
/* 背景のみ */
.articleBox p.style3 {
	margin: var(--app-p-style-mg); /* マージン */
	padding: var(--app-p-style-pd); /* パディング */
	background: var(--app-p-style-bg);/* 背景色 */
	border-radius: var(--app-p-style-rod); /* 角丸 */
	color: var(--app-p-style-txt); /* テキスト色 */
}
/* 鍵かっこ */
.articleBox p.style4 {
	position: relative;
	padding: 1.5rem 2.0rem;
	text-align: center;
}
.articleBox p.style4:before,
.articleBox p.style4:after {
	content: '';
	width: 2.0rem;
	height: 3.0rem;
	position: absolute;
	display: inline-block;
	border: var(--app-p-style-brd); /* ボーダー指定 */
}
.articleBox p.style4:before {border-width: 0.3rem 0 0 0.3rem;top: 0;left: 0;}
.articleBox p.style4:after {border-width: 0 0.3rem 0.3rem 0;bottom: 0;right: 0;}

/* マーカー | 黄 */
.articleBox span.mck {
	background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.5) 60%);
}
/* マーカー | 青 */
.articleBox span.mck_bl {
	background: linear-gradient(transparent 60%, rgba(0, 125, 255, 0.5) 60%);
}
/* マーカー | 赤 */
.articleBox span.mck_rd {
	background: linear-gradient(transparent 60%, rgba(255, 0, 0, 0.5) 60%);
}
.articleBox span.ubdr {
	color: var(--main-txt-ub);
	border-bottom: 2px solid var(--app-main-txt-ub);
}
/* ** article1001 end ** */

/* ** article1002 start ** */
/****************** デザイン装飾基本設定(書式) ******************/

/* 横並び画像 */
.articleBox .conFlexImg {
	display: flex;
	gap: 1.0rem;
	justify-content: space-around;
}
.articleBox .conFlexImg img {width: 100%;}


/* ** article1002 end ** */