@charset "utf-8";
/* ======================================
	プログラミング教室
====================================== */
h1.logoM img{	width:250px;}
.inden{ margin-left:1em;text-indent:-1em;}
h3.subtitle { color: #5D40A7; font-size: 2em;}

/* ポイント*/
.point{display: flex;justify-content: space-between;background: #fff;box-shadow: 0 0 10px rgb(0 0 0 / 10%);margin: 10px 0 40px;}
.point .point_text{width:55%;margin:10px 30px 0 50px;}
.point h3{font-size: 2em;line-height:2em;margin:10px 0 10px 60px;}
.point .point_img{width:40%;}
.point .point_img img {width: 100%;height: auto;}
.point .number{font-family: 'arial black'; display: block;width: 50px;height: 50px;background: #666;color: #fff;border-radius: 50%;float: left;margin-top: 10px;font-size: 2em;text-align: center;line-height: 1.6em;}

@media screen and (max-width: 768px){
.point{display: block;box-shadow:none;margin: 0;padding: 30px 10px 0 10px;}
.point .point_text, .point .point_img{width: 100%;margin: 0 0 30px 0;}
.point .point_img{text-align: center;background: #EFE;}
.point .point_img img{max-width:60%;height: auto;}
.point .number {margin-right: 16px;}
}
@media screen and (max-width: 576px){
.point{padding: 10px 0 0 0 ;}
.point h3{font-size: 1.4em;line-height: 1.4em;}
.point .point_img{margin-bottom: 20px;}
.point .point_img img{max-width:100%;height: auto;border: 1px solid #EEE;}
.point .number {margin:5px 10px 0 0;}
}

/* コース */
.course article p{margin: 30px}
@media screen and (max-width: 576px){.course article p{margin: 0}}
.course h3.subtitle:after { content: ""!important;height:1px!important;flex-grow: 1!important; background-color:#5D40A7!important;}
.procla_table table{letter-spacing: 0!important;text-align: left;width: 100%;margin:20px 0 10px 0;background: #FFF;border: 1px solid #005BAC;}
.procla_table table tr th{width: 20%;font-size: 1.6em;background: #005BAC;color: #FFF;vertical-align: middle;text-align: center;}
.procla_table table tr td{display: flex;justify-content: space-between;padding: 2%;vertical-align: middle;letter-spacing: 0!important;line-height: 1.4em!important;}
.procla_table table tr td div{width: 49%;}

@media screen and (max-width: 576px){
.procla_table table tr td, .procla_table table tr th{display: block;width: 100%;}
.procla_table table tr th{font-size: 1.2em;letter-spacing: 2px;padding: 10px 0;}
.procla_table table tr td, .table_yy table tr th{font-size: .9em;}
.procla_table table tr td{display:block;padding: 5% 4%;}
.procla_table table tr td div{width: 100%;}
.procla_table table tr td div:first-child{margin-bottom: 20px;padding-bottom: 20px; border-bottom: 1px dotted #C4C4C4;}
}

/* FAQ */
.cssacc:checked + .accshow { padding: 5%;}
@media screen and (max-width: 576px){
.accbox label {text-indent:0!important;padding: 12px 1.7em 12px 1em!important; line-height: 1.4em;}}

/* 過去作品はこちらボタン */
.btn_gallery{
	width: 50%;
	height: auto;
	display:block;
	padding:10px 0;
	margin:0 auto;
	background-color: #5D40A7;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	color: #FFF;
	text-align: center!important;
	}
@media screen and (max-width:812px){
.btn_gallery{
    width: 70%;
}}
@media screen and (max-width:480px){
.btn_gallery{
    width: 100%;
}}

/* 作品集 */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/* 作品集 画像 */
.flex-child { 
    margin-bottom: 10px; 
    line-height: 1em!important;
    }
.flex-child .item {
    display: flex;
    } 
.flex-child .item p{
    padding: 3px 0 0 10px;
    font-weight: bold;
}    
.flex-child .item span {
    font-size: 0.6rem;
    font-weight:normal!important;
    margin-right: 5px;
    padding: 0 5px;
    border-radius: 3px;
    background-color: #5D40A7;
    color: #FFF;
    }
.flex-child img{
    width: 100%;
    margin: 7px 0;
    padding: 5px;
    border: 1px solid #BDBDBD;
    }
.flex-child iframe{
    width: 100%;
	height: 100%;
    margin: 7px 0;
    padding: 5px;
    border: 1px solid #BDBDBD;
    }	
.flex-child p.comment{
    margin-top: 15px;
}

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }
	
/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 */
@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
	.flex-col3 .flex-child,	
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}


/* 作品集 動画 */
.wrap{
  margin-bottom: 1.5rem;
}
.wrap p{
	display: block;
	background-color: #5D40A7;
	color: #FFF;
}
.youtube {
  position: relative;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.wrap img{
  width: 100%;
}
 
/* ココから下がPC表示（600px以上）のレイアウト */
@media screen and (min-width: 600px) {
  .float-right{
    float: right;
    width: 49.5%;
  }
  .float-left{
    float:left;
    width: 49.5%;
  }
  .wrap:after{
    display: block;
    clear: both;
    content: "";
  }
}