/***************************************************
更新日：2021/10/16　高岡
***************************************************/
@charset "utf-8";
/***************************************************
information
	filename : app_article.css;
***************************************************/
html {margin: 0;padding: 0;box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
/****************** 幅指定 ******************/
.articleBox {width: var(--app-main-width-con-w);}
.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);}

.articleBox p.widths,
.articleBox h4.style1,
.articleBox h4.style2,
.articleBox h4.style3,
.articleBox h5.style1 {width: var(--app-main-width-con-w);}

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

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

.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;}

/* 記事エリア */
.articleBox {margin: 0 auto;padding: 0;}

/**** pタグ要素基本 ****/
.articleBox p {
	margin: 0 auto;
	padding: 16px 0px;
	font-size: 16px;
	line-height: 1.8em;
	max-width: 100%;
}
.articleBox p.style1 {
	margin: 30px auto;
	padding: 25px;
	border: 4px solid var(--app-main-brd-a);
	border-radius: 2px;
}
.articleBox p.style2 {
	margin: 30px auto;
	padding: 25px;
	background: var(--app-main-cr-a);
	border: 4px solid var(--app-main-brd);
	border-radius: 2px;
}
.articleBox p.style3 {
	margin: 30px auto;
	padding: 25px;
	background: var(--app-main-cr);
	border-radius: 2px;
	color: var(--app-main-txt);
}
.articleBox p.style4 {
	margin: 30px auto;
	padding: 25px;
	background: var(--app-main-cr-ar);
	border: 4px solid var(--app-main-brd-ar);
	border-radius: 2px;
}
.articleBox p.style5 {
    background-color: #e5e5e5;
    padding: 20px 30px;
    margin: 30px 0;
    font-weight: bold;
}

/**** タイトル要素基本 ****/
.articleBox h2 {
	margin: 40px auto 20px auto;
	/* padding: 30px 15px; */
	font-size: 32px;
	font-weight: normal;
	text-align: center;
	line-height: 1.4em;
}
.articleBox h2.style1 {
	border-top: 1px solid var(--app-main-brd-k);
	border-bottom: 1px solid var(--app-main-brd-k);
}
.articleBox h2.style2 {
	border-top: none;
	border-bottom: none;
	background: var(--app-main-cr);
	color: var(--app-main-txt-u);
}
.articleBox h2.style3 {
	border-left: 7px solid var(--app-main-cr);
	border-top: none;
	border-bottom: none;
	background: var(--app-main-cr-a);
	text-align: left;
}

.articleBox h3 {
	margin: 40px 0 0;
}
.articleBox h3.style1 {
	border-bottom: 1px solid var(--app-main-brd-k);
	text-align: left;
}
.articleBox h3.style2 {
	border: 1px solid var(--app-main-brd-k);
	text-align: center;
	border-radius: 2px;
}
.articleBox h3.style3 {
	background: var(--app-main-cr);
	color: var(--app-main-txt);
	text-align: center;
	border-radius: 3px;
}
.articleBox h3.style4 {
    border-bottom: 1px #cccccc solid;
    font-size: 18px;
    font-weight: bold;
    margin: 8px 0 12px;
    padding: 0 0 8px;
    text-align: left;
}
.articleBox h4 {
	margin: 40px auto 20px auto;
	padding: 20px;
	font-size: 25px;
	color: var(--app-basic-txt);
	font-weight: bold;
	text-align: center;
}
.articleBox h4.style1 {
	background: var(--app-main-cr-a);
	text-align: left;
	border-radius: 3px;
}
.articleBox h4.style2 {
	background: var(--app-main-cr);
	color: var(--app-main-txt);
	text-align: left;
	border-radius: 3px;
}
.articleBox h4.style3 {
	padding: 10px 20px 20px 20px;
	border-left: 7px solid var(--app-main-brd-k);
	border-bottom: 1px solid var(--app-main-brd-k);
	text-align: left;
}
.articleBox h5 {
	margin: 5px auto;
	padding: 10px;
	font-size: 22px;
	color: var(--app-basic-txt);
	font-weight: bold;
	text-align: center;
}
.articleBox h5.style1 {
	border-bottom: 1px solid var(--app-main-brd);
	text-align: left;
}
/**** 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);
}
/* 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%;}

/* *************************
テンプレート対応 
************************* */
/* プライバシーポリシー */
.policy {margin: 0 auto;}

.articleBox .policy h2 {
	padding: 10px 15px;
	font-size: 22px;
	font-weight: bold;
	text-align: left;
	border-bottom: 1px solid var(--app-main-brd);
}
.articleBox .policy h3 {
	margin: 20px auto;
	padding: 10px 15px;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
}
/* 囲みリスト */
.LiBox_style1 {
	margin: 30px auto;
	padding: 10px 15px;
	background: var(--app-main-cr-a);
	border: 2px solid var(--app-main-brd);
	border-radius: 3px;
}
/* サービス購入ボタン */
.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) {

	/****************** 幅指定 ******************/
	.articleBox {width: var(--main-width-con-ipad);}
	.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);}

	.articleBox p.widths,
	.articleBox h4.style1,
	.articleBox h4.style2,
	.articleBox h4.style3,
	.articleBox h5.style1 {width: var(--app-main-width-con-s-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タグ要素基本 ****/
	.articleBox {width: 100%;}
	.articleBox p {
		/* width: 90%; */
		padding: 16px 0px;
		font-size: 4.2vw;
		line-height: 1.8em;
	}
	.articleBox p.style1,
	.articleBox p.style2,
	.articleBox p.style3,
	.articleBox p.style4,
	.articleBox p.style5 {
		margin: 20px auto;
	}
	.articleBox p.widths {
		width: 85%;
	}
	/**** タイトル要素基本 ****/
	.articleBox h2 {
		font-size: 5.0vw;
		font-weight: bold;
	}
	.articleBox h2.style1 {
		width: 100%;
	}
	.articleBox h2.style2,
	.articleBox h2.style3 {
		width: 90%;
	}
	.articleBox h3 {
		font-size: 5.0vw;
		font-weight: bold;
	}
	.articleBox h3.style1,
	.articleBox h3.style2,
	.articleBox h3.style3 {
		width: 90%;
	}
	.articleBox h4 {
		margin: 20px auto 10px auto;
		padding: 10px;
		font-size: 5.0vw;
	}
	.articleBox h4.style1,
	.articleBox h4.style2 {
		width: 90%;
	}
	.articleBox h4.style3 {
		width: 90%;
		padding: 10px 10px 15px 10px;
	}
	.articleBox h5 {
		margin: 5px auto;
		padding: 10px;
		font-size: 5.0vw;
	}
	.articleBox h5.style1 {
		width: 85%;
	}
	/**** table要素基本 ****/
	.articleBox table {
		width: 90%;
	}
	.articleBox th {
		padding: 10px;
	}
	.articleBox td {
		padding: 10px;
	}
	/* DLタグ */
	.DLBox {
		width: 90%;
		margin: 30px auto;
		padding: 0;
		font-size:4.2vw;
	}
	.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;
	}
}