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

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
#gmenu,
#gdetail{ background: #f5fafa; padding:0 10px;}

.leftTit{ padding-left: 20px; margin-bottom: 30px; font-size: 18px; font-weight: bold; border-left: #1e9696 3px solid;}
.inner .leftTit{ margin-top: 40px; font-size: 16px; }

.numberList li{ padding-left: 1.2rem; position: relative;}
.numberList li span{ position: absolute; top: 0; left: 0;}

.dotList{ margin-top: 10px;}
.dotList li{ padding-left: 1.2rem; position: relative;}
.dotList li:before{ content: "・"; position: absolute; top: 0; left: 0;}

.attention{ display: block; padding-left: 1.2rem; font-size: 12px; color: #666;}
.attention:before{ content: "※"; position: absolute; top: 0;left: 0;}

.dotList li a,
.attention a{ text-decoration: underline;}

.boxNote{ margin-top: 20px; padding: 20px; color: #1e9696; border: #1e9696 1px solid;}
.boxNote a{ color: #1e9696; text-decoration: underline;}

.page_link{ padding-top: 95px; margin-top: -55px!important;}


/* gmenu
**********************************************************************/
#gmenu .leftTit{ margin-top: 50px;}
#gmenu .leftTit:first-of-type{ margin-top: 0;}

#gmenu ul{ flex-wrap:wrap;}
#gmenu li{ margin-top: 15px;}
#gmenu a{ display: block; background: #fff; padding: 17px 10px; color: #1e9696; font-size: 15px; text-align: center; border: #1e9696 1px solid; border-radius: 4px; transition: background 0.3s ease-in-out 0s,color 0.3s ease-in-out 0s;}


/* gdetail
**********************************************************************/
#authcode{ padding-top: 82px; margin-top: -82px;}

.subTit{ padding-bottom: 14px; margin-bottom: 20px; position: relative; font-size: 18px; color: #1e9696; font-weight: bold; border-bottom: #ddd 2px solid;}
.subTit:before{ content: ""; display: block; background: #1e9696; width: 200px; height: 2px; position: absolute; left: 0; bottom: -2px;}

#gdetail .subTxt a{ color: #1e9696; }

#gdetail .guide{ background: #fff; padding: 24px 20px; margin-top: 20px;}
#gdetail .guide > li{ margin-top: 40px;}
#gdetail .guide > li:first-child{ margin-top: 0;}

#gdetail .guide a{ text-decoration: underline;}

#gdetail .txt{ padding-left: 1.2rem; position: relative; letter-spacing: 0;}
#gdetail .later .txt{ padding-left: 2.2rem; }

#gdetail .txt:before{ display: block; position: absolute; top: 0; left: 0;}

#gdetail .numNone{ padding-left: 0;}
#gdetail .numNone:before{ display: none;}

#gdetail li:nth-child(1) .txt:before{ content: "1.";}
#gdetail li:nth-child(2) .txt:before{ content: "2.";}
#gdetail li:nth-child(3) .txt:before{ content: "3.";}
#gdetail li:nth-child(4) .txt:before{ content: "4.";}
#gdetail li:nth-child(5) .txt:before{ content: "5.";}
#gdetail li:nth-child(6) .txt:before{ content: "6.";}
#gdetail li:nth-child(7) .txt:before{ content: "7.";}
#gdetail li:nth-child(8) .txt:before{ content: "8.";}
#gdetail li:nth-child(9) .txt:before{ content: "9.";}
#gdetail li:nth-child(10) .txt:before{ content: "10.";}
#gdetail li:nth-child(11) .txt:before{ content: "11.";}
#gdetail li:nth-child(12) .txt:before{ content: "12.";}
#gdetail li:nth-child(13) .txt:before{ content: "13.";}

#gdetail img{ display: block; max-width: 400px; margin-top: 16px; border: #eee 1px solid;}

#gdetail .relation{ margin-top: 56px;}
#gdetail .relation h3{ padding-bottom: 12px; margin-bottom: 4px; font-size: 16px; font-weight: bold; border-bottom: #ddd 1px solid;}

#gdetail .relation ul{ display:flex; flex-wrap:wrap; margin-top: 20px; }
#gdetail .relation li{ width: 100%; padding-left: 1.2rem; position: relative;}
#gdetail .relation li:before{ content: ""; display: block; background: #1e9696; width: 6px; height: 6px; position: absolute; top: 10px; left: 0; border-radius: 3px;}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){

	.page_link{ padding-top: 110px;}

	/* gmenu
	**********************************************************************/
	#gmenu .leftTit{ margin-top: 80px;}
	#gmenu ul{ display:flex; }
	#gmenu li{ width: 31%;  margin-top: 30px;}
	#gmenu li:not(:nth-child(3n+1)){margin-left: 3.5%}


	/* gdetail
	**********************************************************************/
	.inner .leftTit{ margin-top: 60px; font-size: 18px; }
	.subTit{ padding-bottom: 18px; margin-bottom: 28px; font-size: 20px;}

	#gdetail .guide{ padding: 40px; }
	#gdetail .guide > li{ margin-top: 56px;}

	#gdetail .relation ul{ margin-top: 0; }
	#gdetail .relation li{ width: 25%; margin-top: 14px; }
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){

	.dotList li a:hover,
	.attention a:hover,
	.boxNote a:hover{ text-decoration: none;}

	#gmenu a:hover{ background: #1e9696; color: #fff; }
	#gmenu a:hover .blank02:before{ background: url("/security/value-auth/img/icon/icon_blank02.svg")no-repeat;}

	#gdetail .subTxt a:hover,
	#gdetail .relation a:hover{ text-decoration: underline;}
	#gdetail .guide a:hover{ text-decoration: none;}
}