@charset "utf-8";
/***************************************************
information
	filename : app_article.css;
***************************************************/
html {margin: 0;padding: 0;box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
/****************** 幅指定 ******************/
/**** 記事エリア ****/
article{
	padding:16px 0px 32px;
	border-radius: 4px;
	/* background:#fff; */
}

/***************************************************
規約系テンプレート
***************************************************/
/* プライバシーポリシー */
.info article{
	margin-top:24px;
  }
.info article p{
	font-size:var(--txt-size-s);
}
@media screen and (max-width:440px){
	.info article h2{
		font-size:16px;
	}
}
/* 会社概要 */
.company{
	padding:16px 48px 0px;
}
.company dl {
	display: flex;
	border-bottom: 1px solid #DDDDDD;
	padding: 20px 0px 20px 0px;
  }
  @media screen and (max-width:540px) {
	.company{
		padding:16px 24px 0px;
	}
	.company dl {
	  font-size: 14px;
	}
  }
  .company dl:last-child {
	border-bottom: none;
  }
  .company dt {
	width: 20%;
  }
  @media screen and (max-width:540px) {
	.company dt {
	  width: 27%;
	}
  }
  .company dd {
	width: 80%;
	padding-left: 16px;
  }
  @media screen and (max-width:540px) {
	.company dd {
	  padding-left: 12px;
	  width: 73%;
	}
}
/***************************************************
閲覧不可時 テンプレート
***************************************************/
.closedBox{
  width:71%;
  padding:40px 0px 16px;
  margin:32px auto;
  border:2px solid var(--app-gray-brd);
  position:relative;
}

.closedBox::before{
  position:absolute;
  content:'';
  background:#fff;
  width:32px;
  height:38px;
  top:-6px;
  left:-6px;
}
.closedBox::after{
  position:absolute;
  content:'';
  background:url(../../../../images/contents/icon_conBox_key.png)no-repeat;
  background-size:contain;
  width:26px;
  height:26px;
  top:-6px;
  left:-6px;
}

.closedBox__title{
  font-size:20px;
  font-weight:bold;
  text-align: center;
}
.closedBox__title span{
  color:var(--app-main-cr);
}

@media screen and (max-width:540px){
  .closedBox{
    width:85%;
    padding:40px 0px 16px;
    margin:32px auto;
    border:1px solid var(--app-main-brd);
  }
  .closedBox::after{
    width:24px;
    height:24px;
    left:-4px;
  }
  .closedBox__title{
    font-size:17px;
  }
}

/***************************************************
フォーム完了画面　テンプレ
***************************************************/

/* 完了アイコン */
.iconCheck{
	position:relative;
	padding-top:48px;
  }
  .iconCheck:before{
	position:absolute;
	content:'';
	background:var(--app-main-txt);
	width:48px;
	height:48px;
	border-radius: 50%;
	top:-13px;
	left:50%;
	transform:translateX(-50%);
  }
  .iconCheck:after{
	position:absolute;
	content:'';
	background:url(../../../../images/contents/icon_conBox_check.png)no-repeat;
	background-size:contain;
	width:25px;
	height:25px;
	top:0px;
	left:50%;
	transform:translateX(-50%);
  }  
@media screen and (max-width:540px){
  .iconCheck:before{
	width:40px;
	height:40px;
	top:8px;
  }
  .iconCheck:after{
	width:22px;
	height:22px;
	top:20px;
  }  
}

/***************************************************
記事内テキスト装飾パーツ
***************************************************/
/************　本文パーツ　***********/
/* マーカー（メイン） */
.mck{
	background:#fdeeee;
	color:var(--app-main-cr-c);
	border-bottom: 1px dashed var(--app-main-cr-c);
	padding: 5px 5px 4px;
}
/* マーカー（サブ） */
.mck_sub{
	background:#eceef9;
	padding: 5px;
}
/* アンダーライン */
.uline{
	color:var(--app-main-txt);
	border-bottom: 1px dashed var(--app-main-txt);
    padding-bottom: 5px;
}
/* p 補足 */

@media screen and (max-width:540px){
	.uline{
		padding-bottom: 3px;
	}
}
/************　タイトルパーツ　***********/
/* メインタイトル */
.mainT{
	color:var(--app-main-cr);
	padding-bottom:4px;
	border-bottom:4px solid #f7f7f7;
}
/* サブタイトル */
.subT{
	color:var(--app-main-cr);
	padding-bottom:4px;
	border-bottom:1px solid #f2f2f2;
}
/* h2 */
/* h3 */
/* h4 */
/* h5 */

/***************************************************
記事内テンプレート　パーツ
***************************************************/
hr{
	border: none;
	border-top:1px solid var(--app-gray-brd);
}
/************　記事内テンプレート　パーツ　***********/
/* 記事テンプレ */
/* 動画テンプレ */

/************　囲みBOX　***********/
.baseBox,.lineBox,.listBox{
	padding:16px 0px;
}
.box__title p{
	color:var(--app-main-txt);
	font-weight:bold;
}
/* 囲みBOX1 */
.baseBox{
	background:var(--app-gray-bg);
}
/* 囲みBOX2 */
.lineBox{
	border:1px solid var(--app-gray-brd);
}
/* 囲みBOX3 */
.gray{
	border:1px solid var(--app-gray-brd);
}
.gray p{
	color:var(--app-gray-txt);
}
/************　強調BOX　***********/
.pointBox{
	background:var(--app-gray-bg);
	padding-bottom:8px;
	margin:16px auto;
}
.pointBox .box__title{
	background:var(--app-main-c-txt);
	padding:8px;
}
.pointBox .box__title p{
	color:#fff;
	font-weight:bold;
	text-align: center;
	margin:0px;
}
.pointBox .box__title.icon{
	background:var(--app-main-cr-c);
	text-align: center;
}
.box__title.icon p{
	display:inline-block;
	position:relative;
}
.box__title.icon p:before{
	position:absolute;
	content:'';
	width:15px;
	height:9px;
	border-left:3px solid #fff;
	border-bottom:3px solid #fff;
	top:22%;
	left:-22px;
	transform:rotate(-45deg);
}
/* 強調BOX1 */

/* 強調BOX2 */

/************　リストBOX　***********/
/* リストBOX1 */
.listBox ul li{
	padding-left:20px;
	position:relative;
}
.listBox ul li:before{
	position:absolute;
	content:'';
	background:var(--app-main-txt);
	width:4px;
	height:4px;
	border-radius: 50%;
	top:50%;
	left:0;
	transform:translateY(-50%);
}
/* リストBOX2 */
.listBox ol{
	counter-reset: item;
  	list-style-type: none;
	position:relative;
}
.listBox ol li:before{
	counter-increment: item;
 	content: counter(item)'. ';
	color:var(--app-main-txt);
	font-weight:bold;
}
/* リストBOX3 */
ol.countType2 li:before{
	color:#fff;
	font-size:80%;
	background:var(--app-main-txt);
	content: counter(item)'';
	padding:5.5px 7.6px 5px;
	margin-right:6px;
	border-radius: 50%;
}
/************ 強調テキスト　***********/

/* 強調テキスト1 */
.pointText{
	margin:16px auto;
}
.pointText p.check{
	padding-left:20px;
	margin-top:4px;
	margin-bottom:4px;
	font-size:105%;
	font-weight:bold;
	position:relative;
}
.pointText p.check:before{
	position:absolute;
	content:'';
	width:24px;
	height:14px;
	border-left:4px solid var(--app-main-cr-c);
	border-bottom:4px solid var(--app-main-cr-c);
	top:50%;
	left:-16px;
	transform:translateY(-70%)rotate(-45deg);
}
/* 強調テキスト2 */
.pointText p.check.sub:before{
	border-left:4px solid var(--app-main-c-txt);
	border-bottom:4px solid var(--app-main-c-txt);
}
@media screen and (max-width:540px){
	.pointText p.check:before{
		width:22px;
		height:12px;
		left:-12px;
	}
}
/************ 見出し装飾　***********/
/* タグタイトル */
.tagTitle {
	display:flex;
	align-items: center;
	padding:0px;
	margin:40px 48px 24px;
}
.tagTitle .tagTitle__mark{
	background:var(--app-main-txt);
	color:#fff;
	font-size:95%;
	padding:3px 12px 2px;
	margin-right:12px;
}
.tagTitle__mark.strong{
	background:var(--app-main-cr-c);
}
.tagTitle h3,.tagTitle h4{
	margin:0;
	border:none;
	background:none;
	text-align: left;
	color:var(--app-glnv-txt);
}
/************ ふきだしテキスト　***********/
/* ふきだしテキスト左 */
.serifBox{
	display:flex;
	align-items: center;
}
.serifBox__img img{
	width:96px;
	height:96px;
	border-radius: 50%;
	border:2px solid var(--app-gray-brd);
}
.serifBox__text p{
	min-width: 400px;
	padding:20px 32px;
	background:var(--app-gray-bg);
	border-radius: 8px;
	margin:0 0 0 20px;
	position:relative;
}
.serifBox__text p:before{
	position:absolute;
	content:'';
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent var(--app-gray-bg) transparent transparent;
	left:-10px;
	top:50%;
	transform:translateY(-50%);
}
/* ふきだしテキスト右 */
.serif-right.serifBox{
	flex-direction:row-reverse ;
}
.serif-right .serifBox__text p{
	margin:0 20px 0 0;
}
.serif-right .serifBox__text p:before{
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent var(--app-gray-bg);
	left:auto;
	right:-10px;
}
@media screen and (max-width:540px){
	/* .serifBox{
		align-items: flex-start;
	} */
	.serifBox__img img{
		width:72px;
		height:72px;
	}
	.contents .serifBox__text p{
		margin:12px;
	}	
	.serifBox__text p{
		min-width: auto;
		width:95%;
		padding:16px 20px;
	}	
}
/************ 関連BOX　***********/
/* 関連BOX1 */
.kanrenBox{
	display:flex;
}
.kanrenBox__img {
	margin:0 16px;
}
.kanrenBox__text {
	margin:0 16px 0 0;
}
.kanrenBox__text--tag{
	display:inline-block;
	background:var(--app-main-cr);
	color:#fff;
	font-size:85%;
	padding:2px 8px 1px;
}
.kanrenBox__text--title{
	font-size:18px;
	font-weight:bold;
	color:var(--app-glnv-txt);
	padding:8px 0 4px;
	border-bottom: 1px solid var(--app-gray-brd);
}
.kanrenBox__text--detail{
	color:var(--app-gray-txt);
	padding:8px 0;
	font-size:90%;
}
/* 関連BOX2 */
.lineBox.strong{
	border:1px solid var(--app-main-cr-c);
}
.kanrenBox.strong .kanrenBox__text--tag{
	background:var(--app-main-cr-c);
}
/* 関連BOX3 */
/************ アイコンBOX　***********/

/* アイコンBOX */
/************ 動画埋込BOX　***********/

/* 動画埋込BOX */

/************　画像BOX　***********/

/* 画像中サイズ */
/* 画像大サイズ */
.imgBox img{
	width:100%;
	margin:16px auto;
}
/* 画像横並び２列 */
.imgBox_col2{
	display:flex;
}
.imgBox_col2 .imgBox__item{
	width:50%;
	padding:4px;
}
@media screen and (max-width:767px){
	.imgBox img{
		height:100%;
	}	
	.imgBox_col2{
		display:block;
	}	
	.imgBox_col2 .imgBox__item{
		width:100%;
	}
}
/************　質問BOX　***********/

/* 質問BOX1 */
.qaBox__title{
	position: relative;
	padding-left: 12px;
	border-left: none;
	margin-bottom: 0px;
}
.qaBox__title:before{
	position: absolute;
	content: "Q";
	color: #fff;
	background: var(--app-main-cr-c);
	border-radius: 50%;
	padding: 8px 15.5px;
	top: 50%;
	left: 0px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 16px;
}
.qaBox__title p{
	font-size: 18px;
}
.qaBox__text{
	position: relative;
	padding-left: 12px;
  }
  .qaBox__text:before {
	position: absolute;
	content: "A";
	color: #fff;
	background: var(--app-main-cr);
	border-radius: 50%;
	padding: 8px 15.5px;
	top: 10px;
	left: 0px;
	font-weight: bold;
  }
/* 質問BOX2 */