@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;}
/* ** article02 end ** */

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

/*** コンテンツ詳細メインタイトル ***/
h1.conTitle,
p.conTitle {
	margin: 0 auto;
	padding: 2.0rem 0;
	text-align: left;
	color: #000;
	font-size: clamp(2.5rem, 3.0vw, 4.5rem);
	line-height: 1.4em;
	background: inhelit;
}
@media screen and (max-width: 600px) {
	h1.conTitle,
	p.conTitle {width: 90%;}
}
/* ** 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 {
}
/* ** article0401 end ** */

/* ** article0501 start ** */
/****************** 本文基本リスト ******************/
/* 基本設定 */
.articleBox ul,
.articleBox ol ,
.examBox ul,
.examBox ol{
	max-width: 100%;
	margin: 0 auto;
	padding: 1.5rem 0 1.5rem 1.5rem;
	color: #000;
	font-size: clamp(1.6rem, 1.6vw, 1.6rem);
	line-height: 1.6;
}
/* ulリスト個別設定 */
.articleBox ul li,
.examBox ul li {margin: 1.0rem;padding: 0 0 0.5rem 1.0rem;}

/* olリスト個別設定 */
.articleBox ol li,
.examBox ol li {margin: 1.0rem;padding: 0 0 0.5rem 1.0rem;}

/* ** article0501 end ** */

/* ** article0601 start ** */
/****************** 本文基本テーブルタグ ******************/
.articleBox tbody {-webkit-text-size-adjust: 100%;}
.articleBox table {
	width:100%;
	margin: 1.0rem auto;
	padding: 0;
	font-size: var(--font-articleBox);/* フォントサイズ */
	font-weight: bold;
}
.articleBox th {
	padding: 1.0rem;
	color: var(--app-articleTableTh-txt); /* テキスト色 */
	background: #f4f4f4;
	border: var(--app-articleTable-brd); /* ボーダー指定 */
	text-align: left;
}
.articleBox td {
	padding: 1.0rem;
	color: var(--app-articleTableTd-txt); /* テキスト色 */
	background: #fff;
	border: var(--app-articleTable-brd); /* ボーダー指定 */
	text-align: left;
}
/* ** article0601 end ** */

/* ** article0701 start ** */
/****************** 本文画像埋め込み ******************/

/* ** article0701 end ** */

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

/* ** article0801 start ** */
/****************** preタグ基本設定 ******************/
.preBox {
	width: 100%;
	margin: 0 auto;
	padding: 2.0rem;
	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 ** */

	max-width: 100%;
	margin: 0 auto;
	padding: 1.5rem 0 1.5rem 1.5rem;
	color: #000;
	font-size: clamp(1.6rem, 1.6vw, 1.6rem);
	line-height: 1.6;

/* ** article0901 start ** */
/****************** dlタグ基本設定 ******************/
.DLBox {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	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); /* ボーダー指定 */
	color: var(--app-dlBox-txt); /* テキスト色 */
	font-size: clamp(1.6rem, 1.6vw, 1.6rem);
}
.DLBox dl {
	margin: 0;
	padding: 0;
	display: flex;
	border-bottom: var(--app-dlBox-dl-brd);
}
.DLBox dt {width: 40%;margin: 0;padding: 1.5rem 1.0rem;}
.DLBox dd {width: 100%;margin: 0;padding: 1.5rem 1.0rem;}
.DLBox dl.bga {color: inhelit;background: inhelit;}
.DLBox dl.bgb {color: inhelit;background: inhelit;}

@media screen and (max-width: 600px) {
	.DLBox dl {display: block;}
	.DLBox dt {width: 100%;padding: 1.5rem 1.0rem 0.5rem 1.0rem;}
	.DLBox dd {padding: 0.5rem 1.0rem 1.5rem 1.0rem;}
}
/* ** article0901 end ** */

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

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

/* 幅指定 */
.widths {width: 90%;}
.widthCM {width: var(--app-ptWdM-width);} /* コンテンツ基本幅(広) */
.widthCC {width: var(--app-ptWdC-width);} /* コンテンツ基本幅 */
.widthCS {width: var(--app-ptWdC-width);} /* コンテンツ基本幅(狭) */

/* 余白指定 */
.stylemgtWT {margin-top: 6.0rem;}
.stylemgtMT {margin-top: 4.0rem;}
.stylemgtST {margin-top: 2.0rem;}
.stylemgtWB {margin-bottom: 6.0rem;}
.stylemgtMB {margin-bottom: 4.0rem;}
.stylemgtSB {margin-bottom: 2.0rem;}
.stylemgtWTB {margin-top: 6.0rem;margin-bottom: 6.0rem;}
.stylemgtMTB {margin-bottom: 4.0rem;margin-bottom: 4.0rem;}
.stylemgtSTB {margin-bottom: 2.0rem;margin-bottom: 2.0rem;}

@media screen and (max-width: 600px) {
	.stylemgtWT {margin-top: 4.0rem;}
	.stylemgtMT {margin-top: 2.0rem;}
	.stylemgtST {margin-top: 1.0rem;}
	.stylemgtWB {margin-bottom: 4.0rem;}
	.stylemgtMB {margin-bottom: 2.0rem;}
	.stylemgtSB {margin-bottom: 1.0rem;}
	.stylemgtWTB {margin-top: 4.0rem;margin-bottom: 4.0rem;}
	.stylemgtMTB {margin-bottom: 2.0rem;margin-bottom: 2.0rem;}
	.stylemgtSTB {margin-bottom: 1.0rem;margin-bottom: 1.0rem;}
}
.styleBgPd {padding: 0 1.0rem;}
.styleBgBrk,
.styleBgGry,
.styleBgBrn,
.styleBgYel,
.styleBgBlu,
.styleBgPnc,
.styleBgGrn,
.styleBgBrkBrd,
.styleBgGryBrd,
.styleBgBrnBrd,
.styleBgYelBrd,
.styleBgBluBrd,
.styleBgPncBrd,
.styleBgGrnBrd {padding: 2.0rem;}

/* 枠背景指定（背景のみ） */
.styleBgBrk {color: var(--styleBgBrk-txt);background: var(--styleBgBrk-bg);}/* ブラック */
.styleBgGry {color: var(--styleBgGry-txt);background: var(--styleBgGry-bg);}/* グレー */
.styleBgBrn {color: var(--styleBgBrn-txt);background: var(--styleBgBrn-bg);}/* ブラウン */
.styleBgYel {color: var(--styleBgYel-txt);background: var(--styleBgYel-bg);}/* イエロー */
.styleBgBlu {color: var(--styleBgBlu-txt);background: var(--styleBgBlu-bg);}/* ブルー */
.styleBgPnc {color: var(--styleBgPnc-txt);background: var(--styleBgPnc-bg);}/* ピンク */
.styleBgGrn {color: var(--styleBgGrn-txt);background: var(--styleBgGrn-bg);}/* グリーン */

/* 枠背景指定（背景・枠線） */
.styleBgBrkBrd {color: var(--styleBgBrk-txt);background: var(--styleBgBrk-bg);border: var(--styleBgBrk-brd);}/* ブラック */
.styleBgGryBrd {color: var(--styleBgGry-txt);background: var(--styleBgGry-bg);border: var(--styleBgGry-brd);}/* グレー */
.styleBgBrnBrd {color: var(--styleBgBrn-txt);background: var(--styleBgBrn-bg);border: var(--styleBgBrn-brd);}/* ブラウン */
.styleBgYelBrd {color: var(--styleBgYel-txt);background: var(--styleBgYel-bg);border: var(--styleBgYel-brd);}/* イエロー */
.styleBgBluBrd {color: var(--styleBgBlu-txt);background: var(--styleBgBlu-bg);border: var(--styleBgBlu-brd);}/* ブルー */
.styleBgPncBrd {color: var(--styleBgPnc-txt);background: var(--styleBgPnc-bg);border: var(--styleBgPnc-brd);}/* ピンク */
.styleBgGrnBrd {color: var(--styleBgGrn-txt);background: var(--styleBgGrn-bg);border: var(--styleBgGrn-brd);}/* グリーン */

/* 鍵かっこ装飾 */
.styleBgAngle {
	position: relative;
	padding: 1.5rem 2.0rem;
	text-align: center;
}
.styleBgAngle:before,
.styleBgAngle:after {
	content: '';
	width: 2.0rem;
	height: 3.0rem;
	position: absolute;
	display: inline-block;
	border: var(--styleBgAngle-brd); /* ボーダー指定 */
}
.styleBgAngle:before {border-width: 0.5rem 0 0 0.5rem;top: 0;left: 0;}
.styleBgAngle:after {border-width: 0 0.5rem 0.5rem 0;bottom: 0;right: 0;}

span.mck {background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.5) 60%);}/* マーカー | 黄 */
span.mck_bl {background: linear-gradient(transparent 60%, rgba(145, 192, 232, 0.5) 60%);}/* マーカー | 青 */
span.mck_rd {background: linear-gradient(transparent 60%, rgba(253, 155, 155, 0.5) 60%);}/* マーカー | 赤 */
span.styleTxt_bl {color: #005ab7;font-weight: bold;}/* 色変更 | 青 */
span.styleTxt_rd {color: #e70047;font-weight: bold;}/* 色変更 | 赤 */

/*** プリセット ***/

/* プリセット基本パターン */
.presetTpBasic {width: var(--app-ptWdW-width);margin: 0 auto;padding: 0;}
.presetTpBasic p {
	margin-left: auto;
	margin-right: auto;
	margin-top: 4.0rem;
	margin-bottom: 4.0rem;
	font-size: clamp(1.6rem, 1.6vw, 1.6rem);
	line-height: 1.8;
}
.presetTpBasic p img {width: 100%;}

/* ** article1001 end ** */

/* ** article1002 start ** */
/****************** デザイン装飾基本設定(基本記事テンプレート) ******************/

/* 基本パターン */
.BasicDezTp {width: var(--app-ptWdM-width);margin: 0 auto;padding: 0;}
.BasicDezTp p {
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(1.6rem, 1.6vw, 1.6rem);
	line-height: 1.8;
}
.BasicDezTp p img {width: 100%;}
.BasicDezTp h2,
.BasicDezTp h3 {
	margin: 0 auto;
	padding: 0;
	text-align: left;
	line-height: 1.6;
	font-weight: bold;
}
.BasicDezTp h2 {font-size: clamp(3.0rem, 4.0vw, 5.0rem);}
.BasicDezTp h3 {font-size: clamp(2.0rem, 2.5vw, 3.0rem);}

@media screen and (max-width: 600px) {
	.BasicDezTp p {width: 85%;}
	.BasicDezTp h2,
	.BasicDezTp h3 {width: 85%;}
}
/* ** article1002 end ** */