@charset "utf-8";
/***************************************************
information
	filename : app_article.css;
***************************************************/
/* html {margin: 0;padding: 0;box-sizing: border-box;} */
*, *:before, *:after {box-sizing: inherit;}
/****************** 幅指定 ******************/
/* .mainVisual, .articleBox h2.style1, .articleBox h2.style2, .articleBox h2.style3, .articleBox h3.style1, .articleBox h3.style2, .articleBox h3.style3, .articleBox table, .DLBox, .articleBox ul, .articleBox ol, .videoMax, .policy {width: var(--app-main-width-con-w);} */

.sp_prev .mainVisual,
.sp_prev .articleBox,
.sp_prev .articleBox p,
.sp_prev .articleBox h2.style1,
.sp_prev .articleBox h2.style2,
.sp_prev .articleBox h2.style3,
.sp_prev .articleBox h3.style1,
.sp_prev .articleBox h3.style2,
.sp_prev .articleBox h3.style3,
.sp_prev .articleBox table,
.sp_prev .DLBox,
.sp_prev .articleBox ul,
.sp_prev .articleBox ol,
.sp_prev .videoMax,
.sp_prev .policy {width: 100%;}

.sp_prev .articleBox p.widths,
.sp_prev .articleBox h4.style1,
.sp_prev .articleBox h4.style2,
.sp_prev .articleBox h4.style3,
.sp_prev .articleBox h5.style1 {width: 90%;}

/****************** 記事エリア ******************/
/* メインビジュアル（システム登録反映箇所） */
.mainVisual {
	margin: 0 auto 30px auto;
	padding: 0;
	text-align: center;
}
.mainVisual img {max-width: 100%;margin: 0px auto;}

/* 記事エリア */
article{
	padding:16px 0px 32px;
	border-radius: 4px;
	background:#fff;
}
  
/**** テキストパディング指定 ****/
article h2, article h3{
	margin:40px 48px 24px;
}
article h4{
	margin:24px 48px 16px;
}
article p{
	margin:16px 48px 16px;
}
article .inner{
	margin:16px 48px;
}
article .listBox li{
  margin:10px 48px;
}

article .innerS{
	max-width:650px;
	margin:auto;
}

@media screen and (max-width:767px){
	article{
		padding:12px 0px 28px;
	}
	article h2, article h3{
		margin:40px 40px 24px;
	}
	article h4{
		margin:24px 40px 16px;
	}
	article p{
		margin:16px 40px 16px;
	}

}
@media screen and (max-width:540px){
	article{
		padding:1px 0px 20px;
	}
	article h2, article h3{
		margin:32px 24px 20px;
	}
	article h4{
		margin:20px 24px 16px;
	}
	article p{
		margin:16px 24px 16px;
	}
	article .inner,article .innerS{
		margin:16px 24px;
	}
  article .listBox li{
    margin:10px 24px;
  }  

}

/**** タイトル要素基本 ****/
article h2,article h3{
	font-size:20px;
	color:var(--app-main-cr);
	padding-bottom:4px;
	border-bottom:1px solid var(--app-main-cr);
}
@media screen and (max-width:540px){
	article h2,article h3{
		font-size:18px;
	}
}
/**** タイトルパターン ****/
h2.style1{
    background: transparent;
    outline: 1px solid #505050;
    border-radius: 3px;
    color: #000;
    position: relative;
    z-index: 1;
    border-bottom:none;
    padding:16px 24px;
}
h2.style1:before{
position: absolute;
    content: '';
    background: -webkit-repeating-linear-gradient(-45deg, #FFE9EB, #FFE9EB 8px,transparent 7px, transparent 15px);
    background: repeating-linear-gradient(-45deg, #FFE9EB, #FFE9EB 8px,transparent 7px, transparent 15px);
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    z-index: -1;
}
h3.style1{
    position: relative;
    display: inline-block;
    border-bottom:none;
    padding-bottom: 24px;
}
h3.style1:before{
position: absolute;
    content: "";
    left: 0;
    bottom: 15px;
    width: 100%;
    height: 10px;
    background: -webkit-repeating-linear-gradient(-45deg, #FCECED, #FCECED 3px, #fff 4px, #fff 6px);
    background: repeating-linear-gradient(-45deg, #FCECED, #FCECED 3px, #fff 4px, #fff 6px);
}
/**** span要素基本 ****/
.articleBox span.mck {
	background: linear-gradient(transparent 50%, var(--app-main-txt-ar) 50%);
}
.articleBox span.ubdr {
	color: var(--main-txt-ub);
	border-bottom: 2px solid var(--app-main-txt-ub);
}
/**** table要素基本 ****/
.articleBox table {
	margin: 20px auto;
	border: 1px solid var(--app-main-brd);
}
.articleBox th {
	padding: 15px;
	background: var(--app-main-cr-a);
	border: 1px solid var(--app-main-brd);
}
.articleBox td {
	padding: 15px;
	border: 1px solid var(--app-main-brd);
}
article img{
height:auto;
}
/* DLタグ */
.DLBox {
	margin: 30px auto;
	padding: 0;
	font-size:16px;
	border-top: 1px solid var(--app-main-brd-a);
}
.DLBox dl {margin: 0 auto;padding: 0;border-bottom: 1px solid var(--app-main-brd-a);}
.DLBox dt {float:left;width:25%;margin: 0;padding: 15px 10px;}
.DLBox dd {float:left;width:60%;margin: 0;padding: 15px 10px;}

.DLBox dl.bga {background: var(--app-main-cr-u);}
.DLBox dl.bgb {background: var(--app-main-cr-u);}

/* リスト */
.articleBox ul,
.articleBox ol {
	margin: 0 auto;
	padding: 0 20px;
	font-size: 16px;
	line-height: 1.4em;
}
.articleBox ul li {margin-top: 5px;margin-left: 5px;margin-bottom: 5px;}
.articleBox ol li {margin-top: 5px;margin-left: 5px;margin-bottom: 5px;}

/* 個別画像サイズ指定 */
.articleBox img {max-width: 100%;height: auto;}

/*** ビデオ埋め込み共通 ***/
.videoMax{margin: 0 auto;max-width:100%;}

/* *************************
テンプレート対応
************************* */
/* プライバシーポリシー */
.form article{
	margin-top:24px;
  }
.form article p{
	font-size:var(--txt-size-s);
}
@media screen and (max-width:440px){
	.form article h2{
		font-size:16px;
	}
}
/* 囲みリスト */
.LiBox_style1 {
	margin: 30px auto;
	padding: 10px 15px;
	background: var(--app-main-cr-a);
	border: 2px solid var(--app-main-brd);
	border-radius: 3px;
}
/* 会社概要 */
.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%;
	}
}
/* サービス購入ボタン */
.sv_order {
	margin: 30px auto;
	padding: 10px 0;
}
.sv_order .payAre {
	margin: 20px auto;
	padding: 20px 0;
	text-align: center;
}
.sv_order .payAre .pay_b  {
	font-size: 20px;
	line-height: 1.0em;
}
.sv_order .payAre .pay_b span.payB  {
	font-size: 50px;
	font-weight: bold;
}
.sv_order .payAre .pay_s  {
	font-size: 18px;
	line-height: 1.4em;
}
.sv_order .payAre .pay_caut {
	margin: 10px auto;
	padding: 15px 15px 0 15px;
	background: var(--app-main-cr-a);
	border: 2px solid var(--app-main-brd);
	border-radius: 3px;
}

/* 画像（上） */
.gallary_t {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:24px auto;
}
.gallary_t .img {
    max-width: 90%;
    margin: 0 auto 16px;
}
.gallary_t .text {
    background: var(--app-main-cr-a);
    padding: 10px 20px;
}
/* 画像（左） */
.gallary_l {
    display: flex;
    justify-content: flex-start;
    margin:24px auto;
}
.gallary_l .img {
    width: 36%;
    flex-shrink: 0;
    margin-right: 16px;
}
.gallary_l .chara {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight:600;
    margin: 0 0 8px 19px;
}
.gallary_l .chara .title{
    font-size: 14px;
}

.introBox {
    background: var(--app-main-cr-a);
    border: 4px solid var(--app-main-brd);
    padding: 8px 16px;
}
/* 画像（右） */
.gallary_r {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin:24px auto;
}
.gallary_r .img {
    width: 36%;
    flex-shrink: 0;
    margin-left: 16px;
}
.articleBox .LayoutR,
.articleBox .LayoutL {
    margin: 0 16px 16px;
}
.float .text p {
    display: grid;
    width: auto;
}

.float .text p:not([class]) {
    display: block;
}
/* イベント/地図 */
.event .info dl {
    display: flex;
    flex-direction: column;
    border: solid var(--app-glnv-cr);
    border-width: 1px 1px 1px 4px;
}

.event .info dt {
    border-bottom: 1px solid var(--app-glnv-cr);
    background: var(--app-main-cr-a);
    font-size: 14px;
    padding: 0.5em 16px;
}

.event .info dd {
    padding: 0.5em 16px;
}

.event .map {
    width: 100%;
    height: 450px;
    text-align: center;
}

.event .map iframe {
    width: 90%;
    padding: 24px 0;
    height: 100%;
    max-height:90vw;
}

/* 購入画面対応 */
.order_Box .articleBox,
.order_Box .articleBox .h2.style1,
.order_Box .articleBox .h2.style2,
.order_Box .articleBox .h2.style3,
.order_Box .articleBox h3.style1,
.order_Box .articleBox h3.style2,
.order_Box .articleBox h3.style3,
.order_Box .articleBox table,
.order_Box .DLBox,
.order_Box .articleBox ul,
.order_Box .articleBox ol,
.order_Box .videoMax,
.order_Box .policy,
.order_Box .articleBox p.widths,
.order_Box .articleBox h4.style1,
.order_Box .articleBox h4.style2,
.order_Box .articleBox h4.style3,
.order_Box .articleBox h5.style1 {width: 90%;}

/* ===================================================================================
for Ipad max-width: 1024px
=================================================================================== */
@media screen and (min-width:768px) and ( max-width:1024px) {

	/****************** 幅指定 ******************/
	.mainVisual, .articleBox h2.style1, .articleBox h2.style2, .articleBox h2.style3, .articleBox h3.style1, .articleBox h3.style2, .articleBox h3.style3, .articleBox table, .DLBox, .articleBox ul, .articleBox ol, .videoMax, .policy {width: var(--app-main-width-con-ipad);}

	.popup .mainVisual {width: 100%;}
	.popup .articleBox,
	.popup .articleBox h2.style1,
	.popup .articleBox h2.style2,
	.popup .articleBox h2.style3,
	.popup .articleBox h3.style1,
	.popup .articleBox h3.style2,
	.popup .articleBox h3.style3,
	.popup .articleBox table,
	.popup .DLBox,
	.popup .articleBox ul,
	.popup .articleBox ol,
	.popup .videoMax,
	.popup .policy,
	.popup .articleBox p.widths,
	.popup .articleBox h4.style1,
	.popup .articleBox h4.style2,
	.popup .articleBox h4.style3,
	.popup .articleBox h5.style1 {width: 90%;}

}

/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {

	/* メインビジュアル（システム登録反映箇所） */
	.mainVisual {
		width: 100%;
	}

	/**** pタグ要素基本 ****/

	/**** タイトル要素基本 ****/

	/**** table要素基本 ****/

	/* DLタグ */
	.DLBox {
		width: 90%;
		margin: 30px auto;
		padding: 0;
		font-size:4.2vw;
	}
	.DLBox dl {}
	.DLBox dt {float:left;width:30%;margin: 0;padding: 15px 5px;}
	.DLBox dd {float:left;width:65%;margin: 0;padding: 15px 5px;}

	/* リスト */
	.articleBox ul,
	.articleBox ol {
		width: 90%;
		margin: 0 auto;
		padding: 0 10px;
		font-size: 4.2vw;
		line-height: 1.6em;
	}

	/* 個別画像サイズ指定 */

	/**** テンプレート基本 ****/
	.policy {width: 90%;}

	.articleBox .policy h2 {
		padding: 10px 5px;
		font-size: 5.0vw;
	}
	.articleBox .policy h3 {
		padding: 10px 15px;
		font-size: 4.2vw;
	}
	
	/* *************************
	テンプレート対応
	************************* */
	/*  award  */
	#award {
		background: url(../../../../images/site/award_header_sp.png)center top / 100% no-repeat,url(../../../../images/site/award_footer_sp.png)center bottom/ 100% no-repeat,#F4F0E6;
		padding: 20vw 4%;
	}
	#award h2 {
		margin: 1em auto;
	}
	.gallary_l{flex-direction:column;}
	.gallary_r{flex-direction:column-reverse;}
	.gallary_l .img,.gallary_r .img {
		width: 90%;
		margin: auto;
		text-align: center;
	}
	.gallary_l .text,.gallary_r .text {
		padding: 10px 20px;
	}
	.gallary_t, .gallary_l, .gallary_r, .float,.event {
		margin: 16px;
	}
	/* 囲みリスト */
	.LiBox_style1 {
		margin: 10px auto;
		padding: 10px 5px;
	}
}


/***************************************************
記事内テンプレート　パーツ
***************************************************/

/************　記事内テンプレート　パーツ　***********/
/* 記事テンプレ */
/* 動画テンプレ */

/************　囲み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 */
.lineBox .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);
}

/************ 見出し装飾　***********/
/* タグタイトル */
.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;
}
/************ 関連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;
        height:auto;
}
/* 画像横並び２列 */
.imgBox_col2{
	display:flex;
}
.imgBox_col2 .imgBox__item{
	width:50%;
	padding:4px;
}
@media screen and (max-width:767px){
	.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 */