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


/*「ご利用の流れ」の項目*/
.boxFlow {
	margin-bottom:55px;
}

.boxFlow .frame {
	padding:30px 55px;
	background:#f3f3f3;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */
}

/*フォントタイプ*/
#groupFlow .fontImpact01 {
	font-size:1.35em;
	color:#39f;
}

.boxFlow h4 {
	font-size:1.3em;
	color:#666;
	margin-bottom:15px;
	border-bottom: dotted 1px #999;
	padding-bottom:10px;
	font-weight:bold;
}

.boxFlow .boxIntro {}
.boxFlow .boxIntro p {
	margin-bottom:10px;
	padding:0!important;
}
.boxFlow .boxIntro li {
	padding:5px 0 5px 25px;
	background:url(css_img/iconListFlow.png) no-repeat left 5px;
	font-size:1.1em;
}
.boxFlow .boxIntro li .sub {
	font-size:0.88em;
	margin:0;
}

/*『初めての方へ』リンクアイコン*/
#iconListScr {
	margin-bottom:35px;
}
#iconListScr .listgroupIcon {
	padding:15px 0;
}
#iconListScr h4 {
	/*width:236px;*/
	width:207px;
	height:97px;
	margin-top:30px;
	margin-left:16px;
	line-height:97px;
	float:left;
	font-size:1.35em;
	padding:0 0 0 29px;
	color:#308459;
	background: url(css_img/bgCoursorBeginnerNav.png) no-repeat left top;
}
#iconListScr ul {
	margin-left:290px;
}
#iconListScr li {
	float:left;
	width:25%;
	text-align:center;
	padding:0!important;
}
#iconListScr li img {
	max-width:93%;
}
#iconListScr li a:hover img {
	opacity:0.7;
}

#iconListScr li.itemSlide{
	position: relative;
	width:100px;
	width:25%;
	width : -webkit-calc(25% - 10px) ;
	width : calc(25% - 10px) ;
	margin-right: 10px;
	font-size: 1.2em;
}
#iconListScr li.itemSlide:last-child{
	margin-right: 0;
}

#iconListScr li.itemSlide .boxTxt{
	width:85%;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

#iconListScr li.itemSlide a{
	display: block;
	background:#000;
	color:#fff;
	height:0;
	overflow: hidden;
	padding: 100% 0 0 0;
}
#iconListScr li.itemSlide .boxTxt .num{
	position: relative;
	font-size: 2.5em;
	font-weight: bold;
	left:auto;
	top:auto;
	display: block;
}



@media screen and (max-width: 640px){

	#iconListScr li.itemSlide {
		width: -webkit-calc(50% - 10px);
		width: calc(50% - 10px);
		margin-bottom: 10px;
		/*font-size: 10vw!important;*/
	}

	#iconListScr li.itemSlide .boxTxt .num{
		font-size: 10vw;
	}
}


#groupFlow {}

#groupFlow #flowPart_01 dl {
	padding:10px 0;
	font-size:1.13em;
}
#groupFlow #flowPart_01 dt {
	float:left;
	width:120px;
	padding-left:30px;
	background:url(css_img/iconContactYoyaku.png) no-repeat left -1px;
}
#groupFlow #flowPart_01 dd {
	margin-left:160px;
	word-wrap: break-word;
	word-break: break-all;
}

/*持ち物*/
#groupFlow #flowPart_goods {
}

/*体験レッスン*/
#groupFlow #flowPart_lesson .listTypeSystem {
	border:solid 1px #dda;
	padding:8px 25px 16px 25px;
	background:#ffc;
	font-size:0.98em;
	color:#333;
	margin-bottom:15px;
}
#groupFlow #flowPart_lesson .listTypeSystem dl {
	padding:15px 0 15px 15px;
	border-bottom:solid 1px #dda;
}
#groupFlow #flowPart_lesson .listTypeSystem dt {
	float:left;
	width:380px;
}
#groupFlow #flowPart_lesson .listTypeSystem dd {
	float:right;
	width:250px;
}

/*注意事項*/
#groupFlow #flowPart_caution {}

#groupFlow #flowPart_caution .listTypeJikou {
	color:#666;
	margin-bottom:25px;
	padding:15px 23px;
	background:#fff;
	border-radius: 5px;        /* CSS3草案 */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 5px;   /* Firefox用 */
}
#groupFlow #flowPart_caution .listTypeJikou li {
	padding:5px 0 5px 30px;
	background:url(css_img/iconListCaution.png) no-repeat left 2px;
}

/**************************************************************************************
**************************************************************************************
画面サイズが1024pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 1024px){
	#iconListScr h4 {
		margin-top:0;
		margin-left:16px;
	}

}

/**************************************************************************************
**************************************************************************************
画面サイズが640pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 640px){
	
	/*体験レッスン*/
	#groupFlow #flowPart_lesson .listTypeSystem dt {
		float:none;
		width:auto;
		margin-bottom:5px;
	}
	#groupFlow #flowPart_lesson .listTypeSystem dd {
		float:none;
		width:auto;
	}
	
	/*『初めての方へ』リンクアイコン*/
	#iconListScr h4 {
		width:160px;
		font-size:1.31em;
		background-size:100%;
		margin-left:0;
		height:76px;
		line-height:76px;
		padding:0 0 0 17px;
		font-size:1.17em;
	}
	#iconListScr ul {
		margin-left:200px;
	}
	
}

/**************************************************************************************
**************************************************************************************
画面サイズが460pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 460px){
	.boxFlow .frame {
		padding:20px 35px;
	}
	
	#groupFlow #flowPart_01 dt {
		float:none;
		width:auto;
	}
	#groupFlow #flowPart_01 dd {
		margin-left:30px;
	}
	
	/*『初めての方へ』リンクアイコン*/
	#iconListScr .listgroupIcon {
		padding:5px 0;
	}
	#iconListScr h4 {
		width:auto;
		float:none;
		margin-bottom:15px;
		background-size:175px;
	}
	#iconListScr ul {
		margin-left:0;
	}
	
}