@charset "utf-8";
/* --------------------------------------
		20221228 accessibility
--------------------------------------- */

/* common */
#contents p{
	word-break: break-all;
    margin-left: 1em;
	margin-bottom: 0;
}

#contents > div,
#contents > section > div,
#contents > dl,
#contents > section >dl{
	margin-left: 1em;
}

#contents section div > p,
#contents section div > div,
#contents section div > span,
#contents section div > dl{
	margin-left: 0;
}

#contents p + p{
	margin-top:1em;
}

/* list */

#contents ul{
    list-style-type: none;
	margin-left: 0;
	padding:0;
}

#contents ul.disc{
	list-style-type: disc !important;
}

#contents ol{
	padding:0;
	margin-left:1em;
}

#contents ol li{
    margin-bottom: 1em;
}

#contents li{
	margin:0;
    float: none;
}

#contents ul.txtlink li{
	margin-right: 0;
}

#contents section > ul{
	margin-left:1em;
}

#contents ul.disc,
#contents section > ol{
	margin-left:3em;
}

#contents dl,
#contents dl dt,
#contents dl dd{
	margin:0;
	padding:0;
}

#contents section > dl{
	margin-left: 1em;
}

#contents dl dt{
	margin-bottom: 0.5em;
	font-weight: 700;
}
#contents dl dd{
	margin-bottom: 1.5em;
}

/* link */

#contents a.textLink{
    background-position: 0 6px;
	display: inline-block;
	margin: 0.5em 0 0.5em 1.5em;
}

#contents section > p + a.textLink{
    margin-left: 2.5em;
}

#contents ul.txtlink{
	margin-left:1.5em;
}

/* annotation */
#contents p.annotation,
#contents ul.annotation{
	margin-left:1em;
}
#contents p.annotation,
#contents ul.annotation li{
	padding-left: 1em;
    text-indent: -1em;
}

#contents ul.annotation li{
    margin-left: 0;
}

#contents p + p.annotation{
	margin-top:0.5em;
}

#contents span.annotation{
	display: inline-block;
	margin-top: 0.5em;
}

/* notice*/
#contents .notice_gray {
    border: 1px solid #CCCCCC;
    padding: 1.2em 1em 0.5em;
    margin-bottom: 2em;
}

#contents .notice_gray_b{
    background-color: #EBEBEB;
    padding: 20px;
	margin: 1.5em 0 1.5em 1em;
}

#contents .notice_gray_b > *{
	margin-bottom: 0;
}

#contents .pct{
	margin: 1em;
}

#contents .flex .pct{
	margin-top: 0;
}

#contents .pct > span.cap{
	display: inline-block;
	margin-bottom: 5px;
}

#contents .accent{
	color: #ee0000;
}

#contents .notice_gray_b .accent{
	color: #af003b;
} 

@media (max-width: 640px){
    #contents section > section {
        margin-left: 0;
    }
    #contents p{
        margin-left: 0;
    }
	#contents ul.disc,
	#contents section ol{
		margin-left:2em;
	}
	#contents ul.txtlink{
		margin-left:0.5em;
	}
	#contents p + a.textLink{
		margin-left: 0.5em;
	}
	#contents p.annotation,
	#contents ul.annotation{
		margin-left:0.5em;
	}
	#contents .notice_gray_b{
		margin-left: 5px;
		margin-right: 5px;
	}
}

#contents .flex{
	display: flex;
}

/* ------- fontsize -----*/

p,ol,ul li,dl dd,span{
	font-size: 0.813rem;
}

#contents h1.title{
	font-size: 1.125rem;
}
.colum2-right760 h2.title,
#contents .font15{
	font-size: 0.938rem;
}
.OpenbtnArea,
.colum2-right760 h3.title,
.txt13{
	font-size: 0.875rem;
}

#contents h3.lead{
	font-size: 0.975rem;
}

/* ---------------------- */

.colum2-right760 h2.title{
	margin-bottom: 20px;
}

.colum2-right760 h2.title{
	border-bottom: 1px solid #343434;
}

#contents .before_square{
	position: relative;
	margin-left: 0;
	padding-left: 1.2em;
	font-weight: bold;

}
#contents .before_square::before{
	position: absolute;
	left: 0;
	top: -2px;
	bottom: 0;
	display: block;
	width: 0.8em;
	height: 0.8em;
	margin: auto;
	background: #000;
	content: "";
}

#contents .before_square + ul.disc{
	margin-left: 2.5em;
	margin-top: 5px;
}

#contents section + section{
	margin-top: 2em;
	padding-top: 2em;
	border-top: 1px dotted #999;
}

#contents .stepArea > ol > li + li:before{
	display: block;
	margin-top: 2em;
	margin-left: -1.5em;
	padding-top: 2em;
	border-top: 1px dotted #999;
	content:"";
}

#contents .stepArea > ol > li > ul.disc{
	margin-left: 1em;
}

#contents span.square{
	margin-left: 1rem;
	margin-right: 10px;
	padding: 0 8px;
	background-color: #4b7dc8;
	font-size: 1.313rem;
	color: #fff;
}

#contents span.square.inline{
	margin: 0 3px;
	padding: 0 6px;
	font-size: inherit;
	font-weight: bold;
}
#contents dl.qa_dl dt{
	display: table;
}

#contents dl.qa_dl dt span.qa_square{
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	background: #000;
	margin-right: 5px;
	margin-top: 3px;
}

#contents dl.qa_dl dt span.qa_square + span{
	display: table-cell;
}

#contents dl.qa_dl dd{
	margin: 1em 1em 0 1.1em;
}
#contents dl.qa_dl dd > p{
	margin-left: 0;
}
#contents ol.circle{
	counter-reset: number 0;
	margin:1.5em 0;
}

#contents ol.circle li{
	list-style-type: none;
	display: table;
}
#contents ol.circle li::before{
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	border-radius: 50%;
	background-color: #ee0000;
	color: #fff;
	font-size: inherit;
	font-weight: 700;
	text-align: center;
	line-height: 20px;
	content: counter(number,decimal);
	counter-increment: number;
}

#contents ol.circle li span{
	display: table-cell;
}

#contents .detailArea .flex ol.circle{
	margin: 0 0 0 1em;
}

#contents .detailArea .notice_gray_b > dl.qa_dl > dd.flex .textArea ol.circle{
	margin-left: 0;
	margin-top: 1em;
}

#contents .detailArea .flex ol.circle > li{
	margin-bottom: 1.25em;
}

#contents .detailArea > ol{
	margin-left: 2.5em;
}


#contents .link_button a {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 1.5em;
	padding: 10px 0 10px 20px;
	border: 1px solid #bcbcbc;
	border-radius: 6px;
}
#contents .link_button a:hover{
	background-color: #f1f1f1;
	text-decoration: none;
}

@media (min-width: 641px){
	#contents h3.lead ~ *{
		margin-left: 58px;
		margin-top: 2em;
	}
	
	#contents > section > button.Gray{
		width: calc(100% - 1em);
		margin-left: 1em;
	}
	#contents h3 ~ button.Gray{
		width: calc(100% - 58px);
		margin-left: 58px;
	}
	
	#contents .detailArea{
		padding-let: 2em;
	}
	
	#contents .detailArea .stepArea{
		margin: 2em 0 2em 1.5em;
	}
	
	#contents .detailArea .stepArea > ol > li p,
	#contents .detailArea .stepArea > ol > li .notice_gray_b{
		margin-left: 0;
	}
	#contents .link_button {
		width: 50%;
	}

	
}

@media (max-width: 640px){
	#contents section .flex{
		flex-direction: column;
	}
	
	#contents h3.lead{
		margin-bottom: 2em;
	}
	
	#contents span.square{
		float: left;
		margin-left: 0;
	}
	
	#contents button.Gray{
		width: 100%;
		margin-right: 5px;
	}
	#contents div.detailArea{
		margin-left: 0;
	}
	#contents .pct,
	#contents .flex .pct{
		margin: 2em auto;
	}
	
	#contents .pct img{
		width: 100%;
		height: auto;
		max-width: 360px;
	}
}