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

@media screen and (min-width:768px), print{
/*----------------------------------------------------------------------
PC Style
----------------------------------------------------------------------*/

/**********************************************************/
/* メインエリア */
/**********************************************************/


main h1 {
	background-image: url(../../subjects/counseling/images/h1_bg.jpg);
	
}

main p.regular {
	font-weight:300;
	margin-bottom:70px;
	line-height:2.0;
}

main p {
	font-weight:300;
	line-height:2.0;
	margin-bottom:15px;
}

#trouble_solution p.headline {
	font-size:18px;
	text-align:center;
	line-height:1.7;
	letter-spacing:2px;
	font-weight:400;
	margin-bottom:30px;
}
#trouble_solution p.headline span {
	color:#A3D0A3;
}

#trouble_solution ul.list01 {
	margin-bottom:30px;
}

#trouble_solution ul.list01 li {
	width:175px;
	height:180px;
	position:relative;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}

#trouble_solution ul.list01 li img {
	width:175px;
	height:180px;
	object-fit:cover;
	display:block;
	position:absolute;
	top:0;
	left:0;
}

#trouble_solution ul.list01 li .bg {
	width:145px;
	height:100px;
	background:rgba(255,255,255,0.8);
	position:absolute;
	top:40px;
	left:15px;
}
#trouble_solution ul.list01 li .bg p {
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	letter-spacing:1px;
	display:block;
	padding:0 15px;
	position: absolute;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
}

#trouble_solution ul.list01 li:nth-child(6n) {
	margin-right:0;
}

#trouble_solution ul.list01 li:nth-child(6n+1) {
	clear:both;
}


#flow {
}

#flow h3 {
	font-size: 24px;
    /*font-family: source-han-serif-japanese, serif;*/
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    margin:0 auto 35px;
}

#flow h3 img {
	display:inline-block;
	margin-right:25px;
}

#flow .right {
	width:530px;
	margin-bottom:30px;
}

#flow .right p {
	line-height:1.4;
	font-weight:300;
	margin-bottom:30px;
}

#flow .left {
	width:520px;
	margin-bottom:30px;
}

#flow .left img {
	display:block;
}

#flow p.arrow {
	font-weight:400;
	clear:both;
	text-align:center;
	margin:40px auto;
}

#flow .btn02 a {
	width:55%;
	font-size:16px;
}

	
main dl.flow {
	width:500px;
	margin:30px 0 30px 50px;
	float:left;
}

main dl.flow dt {
	float:left;
	margin-right:15px;
	margin-bottom:2px;
	clear:both;
}

main dl.flow dt span {
	color:#fff;
	font-size:15px;
	background:#666;
	border-radius:3px;
	padding:1px 10px;
}

main dl.flow dt .fl01 {
	background:#3DBFDD;
}
main dl.flow dt .fl02 {
	background:#47D1DD;
}
main dl.flow dt .fl03 {
	background:#61D7B5;
}
main dl.flow dt .fl04 {
	background:#83D15F;
}

main dl.flow dt.arrow {
	background-image:url(../../subjects/counseling/images/flow_arrow.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size:20px;
	padding-bottom:13px;
}

main dl.flow dd {
	float:left;
	margin-bottom:1px;
}


main .fee {
	width:100%;
	margin:0 auto;
}

main .fee h3 {
	font-size:22px;
	text-align:center;
	margin-bottom:30px;
	margin-top:30px;
}

main .fee dl {
	width:680px;
	margin:0 auto 50px;
	border-bottom: dotted 1px #DDD;
}

main .fee dl dt {
	width:380px;
	float:left;
	clear:both;
	border-top: dotted 1px #DDD;
	padding:10px 0 10px 100px;
}

main .fee dl dd {
	width:300px;
	float:left;
	border-top: dotted 1px #DDD;
	padding:10px 100px 10px 30px;
}

main .fee h2 {
	margin-top:70px;
}

main .fee p {
	margin-bottom:10px;
}
main .fee p.large {
	font-size:18px;
	font-weight:500;
}

main .fee p a {
	color:#A3D0A3;
	text-decoration:underline;
}
main .fee p a:hover {
	text-decoration:none;
}




	
.about_test {
	margin-bottom: 70px;
		
	}
.about_test .test_name {
		color: #A3D0A3;
		font-size: 1.2rem;
		border-bottom: 1px dotted #A3D0A3;
		margin-bottom: 10px;
	}
	.about_test .test_cont {
		margin-bottom: 30px;
	}
}



@media screen and (max-width:767px){
/*----------------------------------------------------------------------
SP Style
----------------------------------------------------------------------*/

/**********************************************************/
/* メインエリア */
/**********************************************************/


body main {
	font-size:15px;
}

main .box {
	width:100%;
}

main h1 {
	background-image: url(../../subjects/counseling/images/h1_bg.jpg);
	
}

main p.regular {
	font-weight:300;
	margin-bottom:70px;
	line-height:1.8;
}

main p {
	font-weight:300;
	line-height:2.0;
	margin-bottom:15px;
}

#trouble_solution p.headline {
	font-size:22px;
	text-align:center;
	line-height:1.7;
	letter-spacing:2px;
	margin-bottom:30px;
}
#trouble_solution p.headline span {
	color:#A3D0A3;
}

#trouble_solution ul.list01 {
	width:580px;
	margin:0 auto 60px;
}

#trouble_solution ul.list01 li {
	width:280px;
	height:300px;
	position:relative;
	float:left;
	margin-right:15px;
	margin-bottom:15px;
}

#trouble_solution ul.list01 li img {
	width:280px;
	height:300px;
	object-fit:cover;
	display:block;
	position:absolute;
	top:0;
	left:0;
}

#trouble_solution ul.list01 li .bg {
	width:245px;
	height:188px;
	background:rgba(255,255,255,0.9);
	position:absolute;
	top:46px;
	left:15px;
}
#trouble_solution ul.list01 li .bg p {
	font-size:20px;
	font-weight:500;
	line-height:1.5;
	letter-spacing:1px;
	display:block;
	padding:0 15px;
	position: absolute;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
}

#trouble_solution ul.list01 li:nth-child(2n) {
	margin-right:0;
}

#trouble_solution ul.list01 li:nth-child(2n+1) {
	clear:both;
}


#flow {
}

#flow h3 {
	font-size: 22px;
   /* font-family: source-han-serif-japanese, serif;*/
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
    font-weight: 400;
    margin:0 auto 30px;
}

#flow h3 img {
	display:inline-block;
	margin-right:25px;
}

#flow .right {
	width:100%;
	margin-bottom:10px;
}

#flow .right p {
	line-height:1.6;
	font-weight:300;
	margin-bottom:15px;
}

#flow .left {
	width:100%;
	margin-bottom:20px;
}

#flow .left img {
	width:100%;
	display:block;
	margin:0 auto;
}

#flow p.arrow {
	font-weight:400;
	clear:both;
	text-align:center;
	margin:40px auto;
}

#flow .btn02 a {
	width:100%;
	font-size:16px;
}

#flow p.soudan {
	clear:both;
	text-align:center;
	font-size:24px;
	letter-spacing:2px;
	color:#A3D0A3;
	margin-bottom:25px;
}

#flow p.nayami {
	font-weight:300;
	text-align:center;
	line-height:2.0;
	margin-bottom:80px;
}

	
main dl.flow {
	width:100%;
	margin:30px auto;
	font-size:1.35rem;
}

main dl.flow dt {
	float:left;
	margin-right:10px;
	margin-bottom:2px;
	clear:both;
}

main dl.flow dt span {
	color:#fff;
	background:#666;
	border-radius:3px;
	padding:0 10px;
}

main dl.flow dt .fl01 {
	background:#3DBFDD;
}     
main dl.flow dt .fl03 {
	background:#61D7B5;
}
main dl.flow dt .fl04 {
	background:#83D15F;
}

main dl.flow dt.arrow {
	background-image:url(../../subjects/counseling/images/flow_arrow.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size:20px;
	padding-bottom:13px;
}

main dl.flow dd {
	float:left;
	margin-bottom:1px;
}

main img.img01 {
	width:100%;
	margin: 30px 0;
	display:block;
}


main .fee h3 {
	font-size:22px;
	text-align:center;
	margin-bottom:20px;
	margin-top:30px;
}

main .fee dl {
	width:90%;
	margin:0 auto 20px;
	border-bottom: dotted 1px #DDD;
}

main .fee dl dt {
	font-weight:500;
	border-top: dotted 1px #DDD;
	padding:5px 10px;
}

main .fee dl dd {
	padding:0 10px 5px;
}

main .fee h2 {
	margin-top:30px;
}

main .fee p {
	margin-bottom:10px;
}
main .fee p.large {
	font-size:16px;
	font-weight:500;
}

main .fee a {
	color:#A3D0A3;
	text-decoration:underline;
}







.about_test {
		margin-bottom:70px;
	}
	
.about_test .test_name {
	color: #A3D0A3;
	font-size: 1.1rem;
	border-bottom: 1px dotted #A3D0A3;
	margin-bottom: 10px;
	}

.about_test .test_cont {
	margin-bottom: 24px;
	}

}