@charset "utf-8";

.breadcrumbs {
    font-size: 75%;
    max-width: 900px;
    margin: auto;
    padding: .5em 1em;
}

/* 次へボタン　戻るボタン */

a.look {
    border: solid 1px #018DEC;
    padding: 1px 5px;
    display: inline-block;
    border-radius: 4px;
    transition: 0.4s;
    text-decoration: none;
    color: #018DEC;
}

a.look:hover {
    background-color: #018DEC;
    color: #fff;
}

a.btn_nextprev {
    display: inline-block;
    padding: .5em 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid #0036a6;
    border-radius: 10px;
    transition: 0.4s;
}
a:hover.btn_nextprev {
    background-color: #018DEC;
    color: #fff;
}


/* ------------------ コラム　独学の学習ステップ */

.content-title h2 {
    font-size: 3.5rem;
    font-weight: normal;
    padding: 2rem 0 .5rem;
    border-bottom: 1px dotted #0036a6;
    margin-bottom: 20px;
    color: #0036A6;
}
.qual-phmain {
    margin-bottom: 20px;
}

.studylead p {
    margin-bottom: 2.5rem;
}


.hero.columnbg {
	background-image: url("../selfstudy/image/hero_bg_studystep.jpg");
	background-size: auto 230px;
	background-position: right center;
}

.col-studytable {
	margin: 20px auto;
	width: 100%;
	border: 1px solid #999;
	font-size: 93.75%;
	/* 15px */
}

.content-box>.col-studytable {
	margin-bottom: 3rem;
}

.col-studytable+.col-studytable {
	margin-bottom: .5rem;
}

.col-studytable caption {
	margin-bottom: 10px;
}

.col-studytable th {
	font-weight: normal;
	text-align: center;
	background-color: #DEE4E8;
}

.col-studytable th,
.col-studytable td {
	padding: 10px 6px;
	border: 1px solid #999;
	display: block;
	width: 100%;
}

.col-studytable p {
	margin-bottom: 8px !important;
}

.col-studytable li {
	list-style: none;
}

.supli-note {
	font-size: 12px;
	margin: .5rem 1rem 3rem;
}

.supli-note p {
	margin-bottom: .5rem !important;
}

.checklistbox li {
	list-style-type: none;
	background-image: url(../selfstudy/image/arrow_check.png);
	background-repeat: no-repeat;
	padding-left: 25px;
	margin-bottom: .5em;
}

.studylead .float-left {
	display: block;
	margin: 0 auto 1rem;
	max-width: 400px;
}

.studylead figure {
	border: 1px solid #c0c0c0;
	display: flex;
	flex-flow: column;
	padding: 5px;
	margin: 0 auto 1rem;
	max-width: 400px;
}

.studylead figcaption {
	background-color: #222;
	color: #fff;
	padding: 3px;
	font-size: 14px;
	text-align: center;
}



.studylead h3 {
	margin-top: 5rem;
	margin-bottom: 2rem;
	color: #0036A6;
	font-size: 1.5em;/*2.4rem*/
	font-weight: normal;
	border-bottom: 1px solid #6CA1F3;

}

.bg-line {
	background: linear-gradient(transparent 92%, rgba(0, 86, 219, 1.00) 0);
}

.list-dlul {
	margin-bottom: 2rem;
}

.list-dlul dd li a span {
	vertical-align: bottom;
	padding-left: .5rem
}

.list-dlul dt {
	background-color: #0036a6;
    font-size: 2rem;
	color: #fff;
	padding: .5rem 1rem;
	border-radius: 10px;
	margin-bottom: 1em;
	width: -moz-fit-content;
	width: fit-content;
	/*IE11は適用にならない*/
}

.list-dlul dd ul {
	margin-left: 2rem;
}

.list-dlul ul p {
	margin-bottom: 1rem !important;
}

.list-btn li {
	list-style: none;
	display: inline-block;
	border: 1px solid #0036a6;
	margin-bottom: .5rem;
}

.list-btn li a {
	display: inline-block;
	padding: 1rem;
	color: #0036a6;
	transition: 0.4s;
}

.list-btn li a:hover {
	background-color: #CFE5FF;
}


.douga-2col {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

.douga-2col li {
	width: 100%;
	aspect-ratio: 16/9;
}

.douga-2col li:first-child {
	margin-bottom: 1rem;
}

.douga-2col li iframe {
	width: 100%;
	height: 100%;
}

.nextp {
	text-align: right;
}

.onlinesite-list {
	display: flex;
	flex-wrap: wrap;
	margin-left: 0 !important;
}

.onlinesite-list li {
	list-style: none;
	margin-right: 20px;
	margin-top: 20px;
}

.onlinesite-list li a {
	display: inline-block;
	padding: 5px 10px;
}

.bgEmphasis-o {
    background: linear-gradient(transparent 50%, #FFE2AD 30%);
}




@media (min-width: 580px) {

	/* ------------------ コラム　独学の学習ステップ */

	#summary .hero.columnbg {
		background-position: right bottom;
	}

	.col-studytable th,
	.col-studytable td {
		display: table-cell;
		width: auto;
	}

	.col-studytable th {
		width: 6rem;
	}

	.studycontent {
		width: auto;
	}

	.col-studytable .purpose {
		width: 35%;
	}

	.study-img {
		max-width: 500px;
		display: block;
		margin: 0 auto;
	}

	.douga-2col li {
		max-width: 560px;
	}

	.fb {
		display: flex;
	}

	.studylead .freelance-img {
		max-width: 200px;
		margin-right: 50px;
		margin-bottom: 30px;
		width: 300px;
		margin: 0 2rem 1rem 0;
	}

}


@media (min-width: 737px) {


/* ------------------ column　独学の学習ステップ */

	.hero.columnbg {
		background-size: cover;
	}
    
    .douga-2col {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    
    .douga-2col li {
		width: 48%;
	}
    
    .douga-2col li:first-child {
		margin-bottom: 0;
	}
    
	.studylead .float-left {
		float: left;
		width: 300px;
		margin: 0 3rem 1rem 0;

	}

	.studylead figure {
		float: right;
		max-width: 300px;
		margin-left: 1rem;
	}

	.studylead h3 {
		background: linear-gradient(transparent 94%, rgba(108, 161, 243, 0.4) 0);
	}
    


}