@charset "UTF-8";
@import "normalize.css";

/* for mobile width 〜599px */

/* -------------------------------------------------------------/
/	common style												/
/--------------------------------------------------------------*/
.forSP {display: block;}
.forPC {display: none;}

#wrap {
	borde: red solid 3px;
}


#SP_TOPIMG img {
	borde: blue solid 1px;
	width: 100%;
}

.setwidth {
	borde: red solid 1px;
	width: 100%;
}

/* -------------------------------------------------------------/
/	HEADER														/
/--------------------------------------------------------------*/


#topFixed {
	width: 100%;
	box-shadow: 0 8px 5px -5px rgba(175,175,175,0.3);
	position: fixed;
	z-index: 99999;
	background: #fff;
	height:76px;
	top: 0em;
}

#topFixed .floatL {
	width: 75%;
	float: left;
}

#topFixed  .floatL img {
	width: 100%;
	height: 100%;
	position: relative;
	top: 10px;
	left: 5px;
}

h2#logo2 {
	margin-left:51px;
}

#topFixed #headButton_SP {
	width: 20%;
	border-left: #ccc dotted 1px;
	float: right;
	padding:13px 0;
	height:50px;
}
#topFixed #headButton_SP i {
	display: block;
	font-size: 140%;
	text-align: center;
	margin-top: 5px;
}
#topFixed #headButton_SP span {
	display: block;
	text-align: center;
	font-size: 40%;
}


#spHeader #spNavWrap {
	background: #f5f5f5;
	heigh: 900px;
	padding-top: 80px;
}

#spHeader #spNavWrap #spNavSNS {
	padding: 20px 0;
	text-align: center;
}

#spHeader #spNavWrap #spNavSNS li {
	border-radius: 100px;
	display: inline-block;
	margin-right: 10px;
}

#spHeader #spNavWrap #spNavSNS li:nth-child(3) {
	margin-right: 0;
}

#spHeader #spNavWrap #spNavSNS li img {
	border-radius: 8px;
	width: 70%;
	height: auto;
}


#spHeader #spNavWrap dl dt {
	background: #515151;
	margin: 0 15px;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

#spHeader #spNavWrap dl dd ul {
	padding: 20px 0;
}


#spHeader #spNavWrap dl dd ul li {
	borde: red solid 1px;
	margin-bottom: .4em;
	margin-left: 40px;
}

#spNavBottom li {
	border-top: #ccc dashed 2px;
	backgroun: red;
	padding: 1em;
	text-alig: center;
}

#spNavBottom li:before {
	content: '\f105';
	padding: 0 .6em;
	font-family: FontAwesome;
	font-size: 90%;
}


/* -------------------------------------------------------------/
/	FIXNAVIGATION												/
/--------------------------------------------------------------*/

#sidefixnav {
	display: none!important;
}


#sidefixnav_SP {
	position: fixed;
	bottom: 0;
	z-index: 9999;
	width: 100%;
}

#sidefixnav_SP li {
	float: left;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
}

/*　3つver */
#sidefixnav_SP li {
	background: rgba(253,53,132,0.9);
	width:42%;
}

#sidefixnav_SP li + li {
 	background: rgba(70,195,204,0.9);
	width: 42%;
}

#sidefixnav_SP li + li + li {
	background: rgba(198,198,198,0.9);
	width: 16%;
}

/*　2つver */
#SUMMER #sidefixnav_SP li {
	background: rgba(253,53,132,0.9);
	width:84%;
}

#SUMMER #sidefixnav_SP li + li {
 	/* background: rgba(70,195,204,0.9);
	width: 42%; */
	background: rgba(198,198,198,0.9);
	width: 16%;
}

#sidefixnav_SP li a {
	color: #fff;
	font-size: 100%;
	font-weight: bold;
	display: block;
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------/
/	TOPIMG														/
/--------------------------------------------------------------*/

#SP_TOPIMG {
	margin-top: -120px;
}



/* -------------------------------------------------------------/
/	HOTTOPICS													/
/--------------------------------------------------------------*/



#HOTTOPICS ul {
	width: 100%;
}

#HOTTOPICS ul li {
	float: none;
	width: 100%;
}

#HOTTOPICS ul #hot20170217_1 {
	width: 100%;
	height: 100%;
	background-size: 80%;
	background-position-x: center;
}

#HOTTOPICS ul #hot20170217_1 img {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 1em;
}


#HOTTOPICS ul #hot20170217_2 {
	width: 100%;
	height: 100%;
	margin: 0!important;
	background-size: 80%;
	background-position-x: center;
}

#HOTTOPICS ul #hot20170217_2 iframe {
	padding: 20px;
	box-sizing: border-box;
	margin: 0 auto;
}


/* -------------------------------------------------------------/
/	SCHOOL														/
/--------------------------------------------------------------*/

#SCHOOL .heading {
	padding: 0!important;
	margin: 0;
	background-size: 80%;
	width: 100%;
	margin-bottom: 1em;
}

#SCHOOL ul {
	width: 100%;
}

#SCHOOL ul li {
	width: 100%;
	borde: red solid 1px;
}

#SCHOOL ul li img {
	borde: blue solid 1px;
	box-sizing: border-box;
}

#SCHOOL ul li div {
	padding: 10px;
}



/* -------------------------------------------------------------/
/	COURSE														/
/--------------------------------------------------------------*/

#COURSE .heading {
	padding: 0!important;
	margin: 0;
	background-size: 80%;
	width: 100%;
	margin-bottom: 1em;
}

#COURSE ul {
	width: 100%!important;
	padding: 10px;
	box-sizing: border-box;
}

#COURSE ul li {
	width: 100%!important;
}

#COURSE .campaignLabel {
	margin-left: 30px;
	margin-top: 20px;
	padding: 0;
	width: 30%!important;
}


/* -------------------------------------------------------------/
/	TRIAL														/
/--------------------------------------------------------------*/

#TRIAL .heading {
	padding: 0!important;
	margin: 0;
	background-size: 80%;
	width: 100%;
	margin-bottom: 1em;
}

#TRIAL .txtbox {
	padding: 10px;
	margin-bottom: 0!important;
}


#TRIAL ul {
	width: 100%!important;
	padding: 10px;
	box-sizing: border-box;
}

#TRIAL ul li {
	width: 100%!important;
}

#TRIAL .campaignLabel {
	margin-left: 30px;
	margin-top: 20px;
	padding: 0;
	width: 30%!important;
}


/* -------------------------------------------------------------/
/	FEES														/
/--------------------------------------------------------------*/



#FEES .heading {
	padding: 0!important;
	margin: 0;
	background-size: 80%;
	width: 100%;
	margin-bottom: 1em;
}

#FEES .txtbox {
	padding: 10px;
}


.tab_wrap {
	width: 100%;
	overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-bottom: .5rem;
}



#FEES ul#fees_tab {
	position: relative;
	left: 0;
	margin: 0;
	width: 1110px;

}


#FEES ul#fees_tab li {
	position: relative;
	left: 0!important;
	width: 13%!important;
}

#FEES ul#fees_tab li:last-child {
	margin-right: 0!important;
}



#FEES .fee_table th {
	font-size: 80%;
}

#FEES .fee_table td {
	font-size: 80%;
	padding: 10px!important;
}

#FEES #campaign {
	borde: red solid 2px;
	width: 100%;
	padding: 10px;
	font-size: 80%;
	box-sizing: border-box;
}

#FEES #campaign dt {
	width: 100%;
	margin: 0!important;
}

#FEES #campaign dd {

}


/* -------------------------------------------------------------/
/	INTRO														/
/--------------------------------------------------------------*/

#INTRO .heading {
	padding: 0!important;
	margin: 0;
	background-size: 80%;
	width: 100%;
	margin-bottom: 1em;
}

#INTRO ul#intro_tab {
	position: relative;
	left: 0;
	float: none;
	borde: blue solid 3px;
	margin: 0;
	padding-left: 10px;
	margin-bottom: 1em;
}

#INTRO ul#intro_tab li {
	position: relative;
	left: 0;
	float: left;
	list-style: none;
	padding: 5px 5px;
	border: #f4f3f3 solid 4px;
	border-radius: 10px;
	margin-right: 5px;
	cursor: pointer;
}



#INTRO .intro_contents iframe {
	width: 100%;
}


#INTRO .school_photo {
	borde: red solid 1px;
	width: 100%!important;
	padding-left: 5px;
}

#INTRO .school_photo li {
	width: 45%;
	box-sizing: border-box;
	floa: none;
}

#INTRO .school_photo li img {
	width: 100%;
}






/* -------------------------------------------------------------/
/	FOOTER														/
/--------------------------------------------------------------*/

footer {
	width: 100%!important;
	padding-bottom: 3.1rem;
	margin-top: 50px;
}

footer > div {
	background: none;
}

footer dl {
	width: 100%!important;
}


footer dl dt {
	text-align: center;
	border-bottom: #ccc solid 3px!important;
	font-weight: bold!important;
}

footer dl dd {
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}


footer dl dd ul {
	width: 100%;
	height: 100%;
}

footer dl dd ul li {
	padding: 15px 0!important;
	border-bottom: #ccc dotted 1px;
}

footer #footerInfo {
	clear: both;
	width: 100%;
	display: inline-block;
}

footer #footerInfo address {
	text-align: center;
}

footer #footerInfo address b {
	display: block;
	margin-top: 1rem;
}

footer #footerInfo address img {
	display: inline-block;
	margin: 0 auto;
}



footer small {
	borde:  green solid 1px;
	margin-top: 20px;
}

footer #footerNewsList {
	padding-bottom: 20px;
}

footer #footerNewsList dd ul li img {
	display: none;
}

footer #footerNewsList dd ul li {
	padding: 10px 15px 2rem 15px!important;
	text-align: left;
}


footer #footerNewsList + dl dd ul li {
	width: 100%;
	box-sizing: border-box;
	padding-left: 8rem;
}



/* -------------------------------------------------------------/
/	コースページ													/
/--------------------------------------------------------------*/


#pankuzu {
	margin-top: -99px;
	borde: blue solid 1px;
}

#pankuzu li {
	font-size: 50%!important;
}




#COURSE_REGULAR article header img {
	padding-left: 10px;
}

#COURSE_REGULAR article header h1 {
}

#COURSE_REGULAR article header h1 span {
	text-align: inherit;
	font-weight: normal;
}

#COURSE_REGULAR article header h2 {
	font-size: 130%;
}

#COURSE_REGULAR article header span {
	float: none;
	margin: 1em 0 0 0;
	text-align: center;
	color: #f6733f;
	background: none;
	font-weight: bold;
}

#COURSE_REGULAR article > div {
	float: none;
	width: 100%!important;
	box-sizing: border-box;
	padding: 10px!important;
	margin-bottom: 1em!important;
}




#COURSE_REGULAR article h3 {
	margin: 0;
	padding: 0 .5em 1em .5em;
}

#COURSE_REGULAR article .course_point dl {
	border-bottom: #ccc dotted 2px;
	border-right: none;
	float: none;
	width: 100%;
	margin: 0!important;
	padding: 1em 0!important;

}

#COURSE_REGULAR article .course_point dl dd img {
	display: block;
	margin: 0 auto;
	margin-bottom: .7em;
}

#COURSE_REGULAR #stepup {
	margin-bottom: 0!important;
}

#COURSE_REGULAR #stepup td img {
	max-width: 50%;
	height: auto;
}

#COURSE_TRIAL article .txtbox {
	padding: 10px;
	box-sizing: border-box;
}


#COURSE_TRIAL article #catsoccer {
	width: 100%;
	margin-bottom: 1em;
}


#COURSE_TRIAL article #catsoccer + div {
	width: 100%!important;
}

#COURSE_TRIAL #trial_photo_gallery li {
	width: 50%;
	margin-bottom: 0;
}

#COURSE_TRIAL #trial_photo_gallery li img {
	width: 100%;
}

#COURSE_TRIAL #trial_photo_gallery li span {
	display: none;
}


#voice {
	width: 96%;
}

#voice dt {
	width: 15%;
	float: left;
}

#voice dt img {
	width: 100%;
	height: auto;
}

#voice dt span {
	display: none;
}

#voice dd {
	width: 60%!important;
	float: right;
}
#voice dd .txtbox {
	padding: 5px;
}

#COMMON {
	padding: 10px;
	box-sizing: border-box;
}


#COMMON #staff {
	padding: 0 10px 2em 10px;
}

#COMMON #staff .staffBox {
	borde: blue solid 2px;
}

#COMMON #staff .staffBox img {
	display: block;
	width: 100%;
	margin: 1em auto;
}

#COMMON #staff .staffBox > div span {
	font-size: 90%;
}

#COMMON #staff .staffBox > div {
	width: 100%;

}

#COMMON #staff .staffBox > div dl {
	float: none;
	width: 100%;
	margin-bottom: .5em;
}



.sub_table {
	padding: 0;
	borde: red solid 1px;
	background: #fff;
}

/* ------ キップロ ------ */

#kprontv {
	background-size: 200%;
	border-bottom: #ccc dotted 1px;
	height: auto;
}

#kprontv iframe {
	float: none;
	width: 100%;
	padding-top: 90px;
}

#kprontv .txtbox {
	margin: 0;
	font-size: 100%;
	text-align: center;
}


#kprToys dl {
	backgroun: red;
	float: none;
	width: 100%;
	text-align: center;
}


#kprPhotoGall {
	padding-top: 2em;
}

#kprPhotoGall li {
	width: 50%;
	box-sizing: border-box;
	margin: 0!important;
}

#kprPhotoGall li img {
	width: 100%;
}

/* ------ iot ------ */

#whatIoT img {
	width: 100%;
}

.goodpoint {
	font-size: 90%;
}


/* ------ robot ------ */

#aboutArduino {
	width: 100%;
}

#aboutArduino li {
	text-align: center;
}

#aboutArduino li img {
	width: 50%;
	float: none;
	margin-bottom: 1rem;
}

#aboutArduino li div {
	width: 100%;
	padding: 0;
	float: none;
}

#aboutArduino li div p {
	text-align: left;
}


/* ------ YPW ------ */

.nagare {

}

.nagare span {
	display: block;
	padding-top: 5px;
}

/* ------ 問い合わせ ------ */
#QuesAndAns {
	padding: 0 10px;
	box-sizing: border-box;
}

/* ------ 利用規約 ------ */

#PRIVACY {
	padding: 0 10px;
	box-sizing: border-box;
}


/* ------ プログラミング必要性 ------ */

#prgNeeds {
	padding: 0 10px;
	box-sizing: border-box;
}

#prgNeeds > div {
	padding: 5em 0 0 0!important;
	background-size: 20%!important;
	background-position: center top!important;
}

#prgNeeds h4 {
	text-align: center;
}



/* -------------------------------------------------------------/
/	フォーム部分													/
/--------------------------------------------------------------*/



#COURSE_FORM {
	width: 95%;
}


#course_form_tab li {
	width: 100%;
	box-sizing: border-box;
}


form.form_default {
	padding: 0 10px;
	box-sizing: border-box;
}

form.form_default button.submitBtn {
	-webkit-appearance: none;
	padding: 20 0;
	font-size: 100%;

}


form.form_default dl dt {
	float: none;
	font-weight: bold;
	width: 100%;
}

form.form_default dl dd {
	padding: 0 0 10px 0!important;
	border-bottom: #ccc dashed 2px;
	width: 100% !important;
	min-width: 100%!important;
}

form.form_default dl dt .requiredlabel {
	display: inline;
	position: relative;
	top: -3px;
	margin-left: 7px;
}


form.form_default dl dd input[type=text],
form.form_default dl dd input[type=email],
form.form_default dl dd input[type=tel] {
	font-size: 150%;
	width: 100%;
	box-sizing: border-box;
}

form.form_default dl dd input[type=radio] {
	transform: scale(1.8);
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 1em;
	position: relative;
	top: -3px;
}

form.form_default dl dd input select option {
	width: 100%;
}

form.form_default dl dd select {
	font-size: 100%;
	-webkit-appearance: none;
	width: 100%;
}

form.form_default dl dd textarea {
	width: 100%;
	box-sizing: border-box;
}

.inputOK:after {
	display: none;
}

.formStepList {
	display: none;
}


form.form_default .formPriceBox {
	padding: 10px 0px;
}

form.form_default .formPriceBox td {
	font-size:  90%;
	padding: 0 5px;
}


.formCompleteBox .txtbox {
	width: 90%;
}

.formCompleteBox h4,
.formCompleteBox dl {
	width: 90%;
}


form.form_default .with_selectBox dl dd input[type=text] {
	width: 100%!important;
}

form.form_default .with_selectBox dl dd select {
	width: 100%!important;
}



/* -------------------------------------------------------------/
/	問い合わせボックス														/
/--------------------------------------------------------------*/

.contactBoxWrap {
	padding: 10px;
	box-sizing: border-box;
	width: 100%!important;
}

.contactBox {
	padding: 1.2rem 1rem;
	background: none;
	width: 100%!important;
	box-sizing: border-box;
}

.contactBox span {
	display: block;
	color: #4b4b4b;
}

.contactBox strong {
	display: block;
	font-size: 11vw;
	margin: .3rem 0;
	color: #4b4b4b;
	letter-spacing: .5px;
}

.contactBox a {
	display: block;
	font-weight: bold;
	color: #4b4b4b;
	margin-bottom: .5rem;
}

.contactBox time {
	display: block;
	font-size: .6rem;
	color: #4b4b4b;
}





/* -------------------------------------------------------------/
/	NewsAndTopics														/
/--------------------------------------------------------------*/


#NEWSTOPICS {
}

#NEWSTOPICS .leftCol,
#NEWSTOPICS .rightCol {
	float: none;
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}

#NEWSTOPICS .rightCol {
	margin-bottom: 0;
}



#NEWSTOPICS .leftCol img,
#NEWSTOPICS .rightCol img {
	width: 100%;
	height: auto;
}

#NEWSTOPICS .leftCol ul li p {
	margin-bottom: .5rem;
}

#NEWSTOPICS .leftCol article {
	margin-bottom: 5rem;
}


/* -------------------------------------------------------------/
/	GW														/
/--------------------------------------------------------------*/

#gw_sp{
	margin:20px auto 0 auto;
	width:90%;
	text-align:center;
	font-size: 0;
}
#gwschedule_sp{
 margin:0 auto;
 text-align:center;
 font-size: 0;
}


/* -------------------------------------------------------------/
/	ONLINE LESSON												/
/--------------------------------------------------------------*/

#ONLINELESSON {
}

#ONLINELESSON header {
	margin-top: -20px;
	margin-bottom: 0;
}

#ONLINELESSON header div img {
	width: 95%;
	margin-top: 100px!important;
}


#ONLINELESSON #ONLINE_point {
	margin-bottom: 3rem;
}

#ONLINELESSON #ONLINE_point li,
#ONLINELESSON #ONLINE_point li:nth-child(4n) {
	width: 80%;
	height: 50%!important;
	float: none;
	margin: 0 auto 3rem auto;
}


#ONLINELESSON #ONLINE_point li div b::before {
	top: -25px;
	left: 10px;
}

#ONLINELESSON #ONLINE_point li div p {
	text-align: center;
	font-size: 5.5vw;
}


#ONLINELESSON div {
	width: 100%!important;
}

#ONLINELESSON .onlineSection {
	width: 100%!important;
	padding: 0 10px;
	box-sizing: border-box;
}

#ONLINELESSON .onlineSection h2 {
	font-size: 1.5rem;
	font-weight: bold;
}

#ONLINELESSON .onlineSection img {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-bottom: 1rem;
	margin-top: 0!important;
}

#ONLINELESSON #courseList li {
	display: inline-block;
	padding: .5rem 1rem;
	float: none;
	margin: 0 0 10px 0;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

#ONLINELESSON #courseDescription li div + div {
	clear: both;
	width: 100%;
	margin-left: 0;
}

#ONLINELESSON #courseDescription li div + div span {
	display: block;
	margin-bottom: .5rem;
}

#ONLINELESSON #courseDescription li div + div span::after {
	content: none;
}

#ONLINELESSON #ONLINE_equipment h2,
#ONLINELESSON #howtoStartONLINE h2,
#ONLINELESSON #ONLINE_schedule h2 {
	margin-bottom: 2rem!important;
}

#ONLINELESSON #ONLINE_equipment {
	padding: 10px;
	box-sizing: border-box;
}


#ONLINELESSON #ONLINE_equipment ul li {
}

#ONLINELESSON #ONLINE_equipment ul li img {
	width: 90%;
	margin-top: 0!important;
}


#ONLINELESSON #snsCampaign {
	width: 96%!important;
	box-sizing: border-box;
	border: #3bd5e4 solid 3px;
	margin: 0 auto 50px auto!important;
	overflow: hidden;
}


#ONLINELESSON #snsCampaign_b {
	font-size: 4.5vw;
}

#ONLINELESSON #snsCampaign #howtoSNS p {
	text-align: left;
	padding-left: 1em;
}


#howtoInstallSKYPE {
	box-sizing: border-box;
	padding: 20px;
}

#howtoInstallSKYPE ol li img {
	width: 100%;
	margin-bottom: 1rem;
	margin-right: 0;
	float: none;
	margin-top: 0!important;
}

#howtoInstallSKYPE ol li div {
}

#ONLINELESSON button.openHowtoSkype {
	width: 120%;
}

#ONLINELESSON #howtoStartONLINE {
	background: #3bd5e4;
	margin-bottom: 100px;
	padding-top: 2rem;
}

#ONLINELESSON #howtoStartONLINE ol {
	width: 90%;
}


#ONLINELESSON #howtoStartONLINE ol li {
	margin-bottom: 50px;
}

#ONLINELESSON #howtoStartONLINE ol li:last-child::after {
	content: none;
	margin-bottom: 0;
}


#ONLINELESSON #howtoStartONLINE ol li::after {
	content: " ";
	display: block;
	height: 30px;
	width: 100%;
	position: absolute;
	bottom: -29px;
	left: 0;
	background: url(/build/img/bg_ONLINE_step.png) no-repeat center bottom;
	background-size: 50%;
}