@charset "utf-8";
/* CSS Document


---------------------------------- */
[class*="sec_userguide"] * { box-sizing: border-box;}
[class*="sec_userguide"] {

	/* margin */
	--ug-ttlmargin-xs: 10px;/* 本文・小見出し区切り */
	--ug-ttlmargin-s: 16px;/* 章・タイトル区切り */
	--ug-ttlmargin-m: 24px;/* 章・タイトル区切り */	
	--ug-ttlmargin-l: 36px;/* セクション区切り */
	--ug-ttlmargin-ll: 48px;/* ブロックエンド */

	/* font-sise */
	--ug-font-xs: 10px;/* 補助テキスト */
	--ug-font-s: 12px;/* 本文・リードテキスト */
	--ug-font-m: 14px;/* 本文・項目見出し */	
	--ug-font-base: 16px;/* 章見出し */
	--ug-font-l: 24px;/* セクション大見出し */

	/* 色設定 */
	--ug-bdr-clr: #d3d3d4;/*　border-color */
	--ug-bdr-clr: hsl(0deg 100% 0% / 25%);
	--ug-subttlbg-clr: #fcf2e3;/*　subtitlebar-bg-color */
	--ug-subttlbg-clr: hsl(36deg 80% 93%);
	--corporate-clr: #0f6d38;
	--corporate-clr: hsl(145deg 85% 42%);
}

@media screen and (min-width: 900px) {

	[class*="sec_userguide"] {
			/* title-margin */
			--ug-ttlmargin-xs: 16px;/* 本文・小見出し区切り */
			--ug-ttlmargin-s: 24px;/* 章・小見出し区切り */
			--ug-ttlmargin-m: 36px;/* 章・タイトル区切り */	
			--ug-ttlmargin-l: 48px;/* セクション区切り */
			--ug-ttlmargin-ll: 108px;/* ブロックエンド */

			/* font-sise */
			--ug-font-xs: 12px;/* 補助テキスト */
			--ug-font-s: 14px;/* 本文・リードテキスト */
			--ug-font-m: 14px;/* 本文・項目見出し */	
			--ug-font-base: 16px;/* 章見出し ※共通サイズ */
			--ug-font-l: 24px;/* セクション大見出し */
		}
}

[class*="sec_userguide"] a:hover { text-decoration: underline;}


/* block
----------------------------- */
[class*="sec_userguide"] [class*="blk_userguide"] {
	width: 98%;
	margin: 0 auto var(--ug-ttlmargin-l);
}



/* box
----------------------------- */
[class*="sec_userguide"] [class*="box_userguide"] {
	width: 100%;
	margin: 0 auto var(--ug-ttlmargin-m);
}

/* flexbox
----------------------------- */
[class*="box_userguide"][class*="flx"] {
	display: flex;
	justify-content: space-betvween;/* デフォルト設定 */
}

[class*="box_userguide"][class*="flx"].fs { justify-content: flex-start;}
[class*="box_userguide"][class*="flx"].fc { justify-content: center;}

[class*="box_userguide"][class*="flx"].align-center {	align-items: center;}
[class*="box_userguide"][class*="flx"].align-end {		align-items: flex-end;}
[class*="box_userguide"][class*="flx"].align-stretch {	align-items: stretch;}


/* 1列のみ */
[class*="box_userguide"].flx-row { }
[class*="box_userguide"].flx-row > li,
[class*="box_userguide"].flx-row > div,
[class*="box_userguide"].flx-row > dd { flex-flow: 1;}

/* 折り返しあり */
[class*="box_userguide"].flx-multiple { flex-wrap: wrap;}


/* =============================================================
	ご利用ガイドindex
================================================================ */

/* subtitle */
.blk_userguide-top .subttl01 {
	width: 100%;
	padding: 14px;
	margin-bottom: var(--ug-ttlmargin-s);
	font-size: 16px;
	background-color: var(--ug-subttlbg-clr);
	text-align: center;
	font-weight: bold;
}
.blk_userguide-top .subttl02 {
	margin-bottom: var(--ug-ttlmargin-s);
	font-size: 16px;
	text-align: center;
	font-weight: bold;
}

/* text */
.blk_userguide-top .lead-txt {
	font-size: var(--ug-font-s);
	margin-bottom: var(--ug-ttlmargin-s);
}
.blk_userguide-top .sec-txt01 {	font-size: var(--ug-font-s);}


/* page anchor link
----------------------------------- */
.blk_userguide-top .page-nav li {
	width: 100%;
/*	width: calc(100%/2 - 5px);*/
}
.blk_userguide-top .page-nav li a {
	display: block;
	width: 100%;
	font-size: var(--ug-font-base);
	padding: 0 var(--ug-ttlmargin-xs) var(--ug-ttlmargin-s);
}
.blk_userguide-top .page-nav li a:hover { text-decoration: underline;}
.blk_userguide-top .page-nav li a::after { content: " >>"}

@media screen and (min-width: 800px) {
	.blk_userguide-top .page-nav li {
		width: 48%;
		width: calc(100%/2 - 10px);
	}
}

/* contants botton
-------------------------------------- */
.blk_userguide-top .btn_toc {
	width: 99%;
	padding-bottom: 10px;
	margin: 0 auto 10px;
}
.blk_userguide-top .btn_toc li {
	width: 49.5%;
	width: calc(100%/2 - 2px);
	padding: 0 5px;
	margin-bottom: 15px;
	border-left: 1px solid var(--ug-bdr-clr);
}
.blk_userguide-top .btn_toc li:nth-child(2n),
.blk_userguide-top .btn_toc li:last-child { border-right: 1px solid var(--ug-bdr-clr);}

.blk_userguide-top .btn_toc li a {
	display: block;
	width: 100%;
	min-height: 110px;
	padding: 10px 0;
	vertical-align: middle;
	text-align: center;
	font-size: var(--ug-font-xs);
}
.blk_userguide-top .btn_toc li a span {
	display: block;
	width: 100%;
	height: 4.2em;
	font-size: var(--ug-font-base);
	font-weight: 800;
}
.blk_userguide-top .btn_toc li a img {
	display: block;
	width: 24px;
	height: auto;
	margin: 0 auto 5px;
}

.blk_userguide-top .btn_toc li a::after { content: " >>"}
.blk_userguide-top .btn_toc li a:hover {
	background-color: var(--ug-subttlbg-clr);
	border-radius: 8px;
	text-decoration: none;
}

@media screen and (min-width: 900px) {
	.blk_userguide-top .btn_toc li {
/*		width: 24.5%;
		width: calc(100%/4 - 2px);*/
		width: 33%;
		width: calc(100%/3 - 2px);		
		
	}
	.blk_userguide-top .btn_toc li:nth-child(2n) {	border-right: none;}
	.blk_userguide-top .btn_toc li:nth-child(3n) {	border-right: 1px solid var(--ug-bdr-clr);}
}


/* FAQ list
-------------------------------------- */
.blk_userguide-top .list_FAQ {
	width: 98%;
	margin: 0 auto var(--ug-ttlmargin-l);
	justify-content: space-between;
}
.blk_userguide-top .list_FAQ li {
	width: 100%;
	border-bottom: 1px solid var(--ug-bdr-clr);
}
.blk_userguide-top .list_FAQ li:first-child {
	border-top: 1px solid var(--ug-bdr-clr);
}

.blk_userguide-top .list_FAQ li a {
	display: block;
	width: 100%;
	padding: var(--ug-ttlmargin-xs);
}
.blk_userguide-top .list_FAQ li a::after {
	content: " >>";
}

@media screen and (min-width: 900px) {
	.blk_userguide-top .list_FAQ {
		justify-content: space-between;
	}
	.blk_userguide-top .list_FAQ li {
		width: 48.5%;
		width: calc(100%/2 - 10px);
	}
	.blk_userguide-top .list_FAQ li:nth-child(2) {
		border-top: 1px solid var(--ug-bdr-clr);	
	}


}