/* CSS Document */


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

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; font-size: 10px; }
body { font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #333; line-height: 1; background-color: #fff; overflow: hidden;}
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
a { color: #065dac; }
a.fade:hover { text-decoration: none; background-color: #fff; color: #333; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.tab { display:none; }
.sp { display:none; }

.text { font-size: 1.7rem; line-height: 1.8;}
.mincho { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
main { display: block; background-color: #EEEFF0; }

@media (min-width: 481px) {
	body{ min-width: 1100px; }
	.container { max-width: 1200px; }
	a:hover { text-decoration: underline; color: #e60012; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}

@media (max-width: 480px) {
	.container { margin-left: 10px; margin-right: 10px; width: auto; }
	.pc , 
	.tab { display: none; }
	.sp { display: block;}
	.text { font-size: 1.6rem; line-height: 1.5;}
}




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

	flexbox

------------------------------------------------------*/
.colWrap { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: stretch; -webkit-align-items: stretch; align-content: stretch; -webkit-align-content: stretch; }

.col2-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); }
.col3-1 { width: 33.3%; width: -webkit-calc(99.9% / 3 - 10px); width: calc(99.9% / 3 - 10px); }
.col4-1 { width: -webkit-calc( 25% - 10px ); width: calc( 25% - 10px ); }

.colWrap .img { text-align: center;}
.colWrap .img img { width: auto; max-width: 100%; }

.col3L1 ,
.col3R1 { width: 33.3%; width: -webkit-calc(99.9% / 3 - 10px); width: calc(99.9% / 3 - 10px); }
.col3L2 ,
.col3R2 { width: 66.6%; width: -webkit-calc( 99.9% * 0.66 - 10px ); width: calc( 99.9% * 0.66 - 10px ); }


@media (max-width: 480px) {
	
	.col2-1 { width: 100%; }
	.col3-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px);}
	.col4-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); }

	.col3L1 ,
	.col3R1 ,
	.col3L2 ,
	.col3R2 { width: 100%; margin-bottom: 15px; }
	
	.col2-1:first-child { margin-bottom: 15px; }
}



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

	header

------------------------------------------------------*/
header { background-color: #C8E7EB; border-top: 17px solid #B591C2; position: relative; margin-bottom: 84px;}
header::after { content: ''; position: absolute; background: url(/special/shinri_course/common/images/headLine.png) no-repeat center top; height: 34px; width: 100%; background-size: cover; bottom: -34px;}

@media (max-width: 480px) {
	header { margin-bottom: 60px;}
	header::after { height: 20px; bottom: -20px; }
}

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



------------------------------------------------------*/
main { background-color: #fff; margin-bottom: -200px; }

@media (min-width: 1201px) {
	main { margin-bottom: -15%; }
}

@media (min-width: 481px) {
	main .container { max-width: 1000px;}	
}


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

	contentsInner

------------------------------------------------------*/
.contentsInner {}
.contentsInner .title {}
.contentsInner .text {}
.contentsInner .img { margin: 0 auto;}
.contentsInner .img img {}

#cnt01 .title { max-width: 660px;}
#cnt01 .img { max-width: 275px; }
#cnt02 .img { max-width: 445px; width: 80%; }

@media (min-width: 481px) {
	.contentsInner { margin-bottom: 50px;}
	.contentsInner .title { margin-bottom: 50px;}
	.contentsInner .text { padding: 0 100px; margin-bottom: 50px;}
	
	#cnt02 .title { max-width: 865px;}
}

@media (max-width: 480px) {
	.contentsInner { margin-bottom: 30px;}
	.contentsInner .title { margin-bottom: 30px;}
	.contentsInner .text { margin-bottom: 30px;}
}


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

	cnt03

------------------------------------------------------*/
#cnt03 { background: url(/special/shinri_course/common/images/waveBg.png) no-repeat center center; padding-top: 8%; background-size: 100% auto; padding-bottom: 15%; position: relative; z-index: 1;}
#cnt03 .colWrap {}
#cnt03 .img { width: 290px; text-align: center;}
#cnt03 .img img { max-width: 190px; width: 100%;}
#cnt03 .body { width: -webkit-calc(100% - 290px); width: calc(100% - 290px); }
#cnt03 .body .title { color: #595757; font-weight: bold; font-size: 1.5rem; margin-bottom: 12px;}
#cnt03 .body .name { font-size: 1.2rem; color: #575554; font-weight: bold; margin-bottom: 12px; }
#cnt03 .body .text { font-size: 1.2rem;}

@media (min-width: 481px) {
	#cnt03 .colWrap { padding-left: 74px; padding-right: 100px; }
}
@media (max-width: 480px) {
	#cnt03 { background-size: auto 100%; padding-bottom: 40%; padding-top: 10%; }
	#cnt03 .img { width: 35%; }
	#cnt03 .body { width: 65%; padding-left: 10px; }
	#cnt03 .body .title { font-size: 1.8rem; }
	#cnt03 .body .name { font-size: 1.4rem; line-height: 1.6; margin-bottom: 35px;}
	#cnt03 .body .text { font-size: 1.4rem; position: relative; width: -webkit-calc(165% - 10px); width: calc(165% - 10px); left: -webkit-calc(-65% + 10px); left: calc(-65% + 10px);}
}


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

	cnt04

------------------------------------------------------*/
#cnt04 { background-color: #C8E7EB; position: relative; padding-top: 200px; top: -190px;}
#cnt04 .container {}
#cnt04 .title { font-size: 2.8rem; color: #066280; font-weight: bold; line-height: 1.6; margin-bottom: 70px; position: relative;}
#cnt04 ul {}
#cnt04 ul li { width: 459px;}
#cnt04 ul li a {}
#cnt04 ul li img {}

@media (min-width: 1201px) {
	#cnt04 { padding-top: 15%; top: -14vw; }
	
}

@media (min-width: 481px) {
	
	#cnt04 .container { padding: 0 35px;}
	#cnt04 .title::after { content: ''; position: absolute; width: 90px; height: 90px; background: url(/special/shinri_course/common/images/img04.png) no-repeat left top; background-size: cover; right: 120px; bottom: -55px;}
}

@media (max-width: 480px) {
	#cnt04 { padding-top: 150px; }
	#cnt04 .title { font-size: 2rem; margin-bottom: 10px;}
	#cnt04 ul li { width: 100%;}
}




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

	footer

------------------------------------------------------*/
footer { background-color: #C8E7EB; padding: 50px 0; text-align: center;}
footer #copyright { font-size: 1.1rem;}

@media (max-width: 480px) {
	
}

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

	page top

------------------------------------------------------*/
#pageTop a { position: fixed; right: 0; bottom: 200px; display: block; width: 80px; height: 80px; color: #fff; font-size: 2rem; text-align: center; padding-top: 25px; box-sizing: border-box; letter-spacing: 2px; z-index: 999; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; background: #f6bdc5; background: -moz-linear-gradient(left, #f6bdc5 0%, #f9e296 50%, #63c0b2 100%); background: -webkit-linear-gradient(left, #f6bdc5 0%,#f9e296 50%,#63c0b2 100%); background: linear-gradient(to right, #f6bdc5 0%,#f9e296 50%,#63c0b2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6bdc5', endColorstr='#63c0b2',GradientType=1 ); }
#pageTop a span { display: inline-block; padding: 0 5px 10px; border-bottom: 1px solid #fff; }

@media(max-width: 480px){
	#pageTop a { bottom: 100px; }
}