/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

@charset "UTF-8";

/**=============================================================================
 * 全体構造
 */
html{
	width: 100vw !important;
	height: 100vh !important;
}

body {
	background-color: #ffffff;
	font-family: Arial, sans-serif;
	color: #282b2e;
	font-size: 1rem;
	line-height: 1.7;
	width: 100vw !important;
	height: 100vh !important;
}

html[lang=ja] body {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
}

#container {
  overflow: hidden;
  /*width: 100vw;*/
  /*height: 100vh;*/
}

#container header {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: #fff;
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.4);
	        box-shadow: 0 0 6px rgba(0,0,0,0.4);
	height: 70px;
}
#container header::after {
  clear: both;
}
#container header .head-logo {
	list-style: none;
	width: 240px;
	position: absolute;
	left: 5%;
	top: 20px;
	text-align: center;
	vertical-align: middle;
}
@media (max-width: 768px) {
	#container header {
		height: 60px;
	}
	#container header .head-logo {
		left: 15px;
		top: 15px;
		width: 160px;
	}
	#container header .head-logo img {
		widows: auto;
		height: 30px;
	}
}
#container > footer {
  width: 100%;
  padding: 24px 0;
  background-color: #666666;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #ffffff;
  text-align: center;
}


/* ================
common 
================*/
#container > p {
  padding: 0;
  margin: 0;
  text-align: center;
}
.width_max{
	max-width: 960px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.width_max::after {
  clear: both;
}
@media (max-width: 960px) {
	.width_max{
		width: 90%;
	}
}


@media (min-width: 769px) {/* PC */
	.visible-sp {display: none;}
	.visible-pc {display: block;}
	.only_sp {
		display: none;
	}
}

@media (max-width: 768px) {/* SP */
	.visible-sp { display: block;}
	.visible-pc {display: none;}
	.only_pc {
		display: none;
	}
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

dl.maru_vertion{
	margin-right:-5%;
}
@media (max-width: 960px) {
dl.maru_vertion{
	margin-right:0%;
}
}


.relative{ position: relative;}
#pagetop{
	z-index: 1;
  width: 120px;
  height: 106px;
  position: fixed;
  right: 0;
  bottom: 69px;
}@media (max-width: 768px) {

	#pagetop{
	  width: 80px;
		height: auto;
	  bottom: 0;
	}
}
/**==========================================
 * テキスト
 */
.red{ color:#be2c38;}
.text_small{ font-size: 80%;}
.text_pink{ color: #ed927d;}
.underline{ background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(0%, #ffff33)); background: -o-linear-gradient(transparent 80%, #ffff33 0%); background: linear-gradient(transparent 80%, #ffff33 0%); padding-bottom: 8px;}

/**==========================================
 * その他
 */
em {font-weight: bolder;}
strong {font-weight: bolder;font-size: 150%;}
small {font-size: 85%;}
h3 { font-size: 1.2rem; line-height: 1.6; }
p { font-size: 1.1rem; line-height: 1.6; text-align: left; margin-bottom: 1em; word-break: break-all;}
@media (max-width: 768px) {
	p { font-size: 1rem;}
}
b {font-weight: bold;}
a {color:#8E1728;}
a:hover {color:#e15e71;}
a:hover img.hover{opacity: 0.75;}
img{ max-width:100%;}
h1,h2,h3,h4,h5,p,dl,dt,dd,ul,li,div,a{-webkit-box-sizing: border-box;box-sizing: border-box;}
.center {text-align: center;}

/* ==============
ボタン　講座申し込み
 ============== */
ul.buttons_entry{
	text-align: center;
	position: relative;
	margin: 0 auto 0 auto;
	list-style: none;
}
ul.buttons_entry li a {
    width:460px;
    font-size:1.5em;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:15px 10px 15px 20px ;
	margin: 0 auto;
    color:#fff;
	border-radius: 50px;
	background-color: #f07538;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border: 3px solid #fff;
/* drop shadow */
  -webkit-filter:drop-shadow(0 1px 2px rgba(130, 50, 10, 0.8));
  -moz-filter:drop-shadow(0 1px 2px rgba(130, 50, 10, 0.8));
  -ms-filter:drop-shadow(0 1px 2px rgba(130, 50, 10, 0.8));
/* フェード */
  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));	
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all  0.3s ease;
    -o-transition: all  0.3s ease;
    transition: all  0.3s ease;	
}
ul.buttons_entry li img {
	padding-right: 15px;
	width: 30px;
	position: relative;
	top: 2px;
}
/* 矢印 */
ul.buttons_entry li a.arw{
    position: relative;
    display: inline-block;
    padding-left: 20px;
}
ul.buttons_entry li a.arw:before{
    content: '';
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 40%;
    right: 20px;
    margin-top: -8px;
}
ul.buttons_entry li a.arw:after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 3px #f07538;
    border-right: solid 3px #f07538;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 43%;
    right: 31px;
    margin-top: -1px;
}

@media (min-width: 769px) {	
	ul.buttons_entry li a:hover {
		background-color: #ffa801;
	}
}
@media (max-width: 768px) {	
	ul.buttons_entry li a {
		width:90%;
		font-size:1em;
		padding:15px 2px ;

	}
}


/* ====== mainvisual ========= */
.course-mv {
	overflow: hidden;
	max-width: 100%;
	padding: 0 !important;
	margin: 0 auto;
	text-align: center;
	background: #eff4f4 url("../img/mv.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	height: 60vh;
}
.course-mv .mv_copy{
	width: 50%;
	max-width: 380px;
	position: absolute;
	top: 10vh;
	left: 20px;
}
.course-mv .mv_copy img{
	max-width: 100%;
}
.course-mv h1,.course-mv h2{
	text-align: center;
}
@media (max-width: 768px) {
	.course-mv {
		background-position: 60% bottom;
		height: 35vh;
	}
	.course-mv .mv_copy{
		width: 55%;
		max-width: 60%;
		top: 4vh;
		left: 0;
	}
	.course-mv .mv_copy h1{
		margin-bottom: 20px;
	}
	.course-mv .mv_copy h2{
		width: 70%;
		margin: 0 auto;
	}
	.course-mv .mv_copy img{
	  -webkit-filter: drop-shadow(2px 2px 4px rgba(255,255,255,1.0));
	          filter: drop-shadow(2px 2px 4px rgba(255,255,255,1.0));
	}
}
@media (max-width: 480px) {
	.course-mv {
		background-position: 60% bottom;
		height: 35vh;
	}
	.course-mv .course-mv-inner {
		/*透過の設定*/
		background: rgba(255,255,255,.0);
		width: 100%;
		height: 100%;
	}
	.course-mv .mv_copy{
		width: 65%;
		max-width: 60%;
		top: 6vh;
		left: 0;
	}
	.course-mv .mv_copy h1{
		margin-bottom: 10px;
	}
	.course-mv .mv_copy h2{
		width: 80%;
		margin: 0 auto;
	}
}


/* ==============
ページアンカー
 ============== */
@media (min-width: 641px) {
	.page-anchor_sp {
		display: none;
	}
}

.page-anchor_pc{
  background: -webkit-gradient(linear, left top, left bottom, from(#da695d), to(#cf3b2b));
  background: -o-linear-gradient(top, #da695d, #cf3b2b);
  background: linear-gradient(to bottom, #da695d, #cf3b2b);	
	
  -webkit-filter:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
  -moz-filter:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
  -ms-filter:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}
.page-anchor_pc ul{
	width: 900px;
	padding: 0;
	margin: 0 auto 0 auto;
	text-align: center;
	font-size: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;	
}
@media (min-width: 641px) {
	.page-anchor_pc ul{
		width: 100%;
	}
}
.page-anchor_pc ul li{
	padding: 0;
	margin: 0;
	display: inline-block;
	width: 25%;
	text-align: center;
}
.page-anchor_pc ul li a{
	display: block;
	margin: 0;
	padding: 8px 0;
	text-decoration: none;
	color: #fff;
	border-right: 1px solid #ba3324;
	font-size: 1.1rem;
	line-height: 1.5;
	font-weight: bold;
}
.page-anchor_pc ul li:first-child a{
	border-left: 1px solid #ba3324;
}
.page-anchor_pc ul li:hover{
  background: -webkit-gradient(linear, left top, left bottom, from(#be2c38), to(#be2c38));
  background: -o-linear-gradient(top, #be2c38, #be2c38);
  background: linear-gradient(to bottom, #be2c38, #be2c38);	
}
.page-anchor_pc ul li a div.text{
	padding: 0;
}
.page-anchor_pc ul li a div.arrow{
	padding: 6px 0 0 0;
	width: 100%;
	height: 10px;
	text-align: center;
}
.page-anchor_pc ul li a div.arrow:after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 3px #ba3324;
    border-right: solid 3px #ba3324;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
}
@media (max-width: 640px) {
	.page-anchor_pc {
		display: none;
	}
	.page-anchor_sp ul{
		width: 100%;
		margin: 0 auto 0 auto;
	}
	.page-anchor_sp ul li{
		margin: 0 auto;
		padding: 0;
		width: 100%;
	  background: -webkit-gradient(linear, left top, left bottom, from(#da695d), to(#cf3b2b));
	  background: -o-linear-gradient(top, #da695d, #cf3b2b);
	  background: linear-gradient(to bottom, #da695d, #cf3b2b);	
		border-bottom: 1px solid #ba3324;
	}
	.page-anchor_sp ul li a{
		color: #fff;
		padding: 12px 15px 10px 15px;
		display: block;
	}
	.page-anchor_sp ul li a img{
		max-height: 30px;
		padding: 0;
		margin: 0;
		vertical-align: top;
	}
}


#intro{
	background: url("../img/bg_dot.gif") repeat;
	padding: 40px 0;
	margin: 0;
}
@media (min-width: 769px) {
	.intro_inner_sp{
		display: none;
	}
}
@media (max-width: 768px) {
	#intro{
		padding: 20px 0;
	}
	.intro_inner_pc{
		display: none;
	}
}

	
#about{
	background-color: #fcf7e7;
	padding: 60px 0;
}
#about h2.border{
	font-size: 2rem;
	line-height: 1.5;
	margin-bottom: 1em;

	letter-spacing: 2px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center; /* 垂直中心 */
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center; /* 水平中心 */
}
#about h2.border:before, #about h2.border:after {
  border-top: 2px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
#about h2.border:before {
  margin-right: 1em; /* 文字の右隣 */
}
#about h2.border:after {
  margin-left: 1em; /* 文字の左隣 */
}
@media (max-width: 768px) {
	#about{
		padding: 30px 0;
	}
	#about h2.border{
		font-size: 1.6rem;
		margin-bottom: 0.25em;
	}
	#about h2.border:before, #about h2.border:after {
	  width: 2em; /* 線の長さ */
	}
	#about h2.border:before {
	  margin-right: 0.5em; /* 文字の右隣 */
	}
	#about h2.border:after {
	  margin-left: 0.5em; /* 文字の左隣 */
	}
}
#about h3.catch{
	font-size: 1.7rem;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 1px;
	margin-bottom: 1.25em;
}
@media (max-width: 768px) {
	#about h3.catch{
		font-size: 1.4rem;
		line-height: 2.5rem;
		margin-bottom: 1em;
	}
}
#about h3.catch span.marker{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(85%, transparent), color-stop(85%, #ffdc00));
	background:-o-linear-gradient(transparent 85%, #ffdc00 85%);
	background:linear-gradient(transparent 85%, #ffdc00 85%);
	padding-bottom: 10px;
}




#about .course_box .inner h3.course_title{
	line-height: 2.75rem;
}

#about .course_box{	
	border: 3px solid #be2c38;
	background-color: #fff;
	border-radius: 12px;
	margin: 0 auto;
}
/*端末初期設定編 ONLY ADD*/
#about .course_box.tanmatsushoki_box{
	border: 3px solid #4072C4;
	margin: 7.5% auto 0%;
}
/*Smable ONLY ADD*/
#about .course_box.smable_box{
	border: 3px solid #ed7d31;
	margin: 7.5% auto 0%;
}

#about .course_box > h2{
	background-color: #be2c38;
	color: #fff;
	padding: 10px 20px;
	text-align: center;
	font-size: 1.8rem;
}
/*端末初期設定編 ONLY ADD*/
#about .course_box.tanmatsushoki_box > h2{
	background-color:#4072C4;
}
/*Smable ONLY ADD*/
#about .course_box.smable_box > h2{
	background-color:#ed7d31;
}
#about .course_box .inner{
	padding: 25px 4% 30px 4%;
}
@media (max-width: 768px) {
	#about .course_box > h2{
		padding: 10px 4%;
		font-size: 1.4rem;
	}
	#about .course_box .inner{
		padding: 15px 4% 15px 4%;
	}
}
#about .course_box .inner .course_title{
	background: url("../img/bg_stripes.gif") repeat;
	padding: 15px 10px;
	margin: 30px auto 20px auto;
	font-size: 24px;
	line-height: 26px;
}
#about .course_box .inner .course_title span{
	background-color: #be2c38;
	padding: 10px 15px 10px 38px;
	border-radius: 4px;
	margin-right: 10px;
	position: relative;
	color: #fff;
	font-size: 18px;
	line-height: 26px;
}
/*端末初期設定編 ONLY ADD*/
#about .course_box.tanmatsushoki_box .inner .course_title span{
	background-color:#4072C4;
}
/*Smable ONLY ADD*/
#about .course_box.smable_box .inner .course_title span{
	background-color: #ed7d31;
}

#about .course_box .inner .course_title span:before{
	position: absolute;
	content: "";
	background-image: url("../img/icon_finger.png");
	background-repeat: no-repeat;
	width: 25px;
	height: 27px;
	padding-right : 5px;/*文字との隙間*/
	top: 4px;
	left: 6px;
}
@media (max-width: 768px) {
	#about .course_box .inner h3.course_title{
		line-height: 1.5rem;
	}

	#about .course_box .inner .course_title{
		padding: 8px 10px;
		margin: 20px auto 15px auto;
		font-size: 1.2rem;
		line-height: 1.5;
		text-align: center;
	}
	#about .course_box .inner .course_title span{
		padding: 6px 8px 6px 28px ;
		font-size: 18px;
		line-height: 22px;
		text-align: center;
		margin-right: 0px;
		display: block;
		margin-bottom: 2%;
	}
	#about .course_box .inner .course_title span:before{
		background-size: 19px 21px;
		width: 19px;
		height: 21px;

		padding-right:0px;/*文字との隙間*/
		left: 35%;
	}
	/*Smable ONLY ADD*/
	#about .course_box.smable_box .inner .course_title span:before{
		left: 18%;
	}
}
@media (max-width: 400px) {
	#about .course_box.smable_box .inner .course_title span{
		padding: 6px 6px 6px 6px ;
		font-size: 18px;
		line-height: 22px;
		display: block;
	}
	#about .course_box.smable_box .inner .course_title span:before{
		background-size: 22px 25px;
		width: 22px;
		height: 25px;
		left: 30%;
	}
	/*Smable ONLY ADD*/
	#about .course_box.smable_box .inner .course_title span:before{
		left:2.5%;
	}
}

#about .course_box .inner dl{
	width: 100%;
}
#about .course_box .inner dl dt{
	width: 40%;
	float: left;
}
#about .course_box .inner dl dd{
	width: 58%;
	float: right;
}
#about .course_box .inner dl dd ul{
	list-style: none;
	font-size: 0;
	padding-top: 10px;
}
#about .course_box .inner dl dd ul li{
	width: 48%;
	display: inline-block;
	vertical-align: top;
	margin: 0 0.5%;
}
/*1個だけのmeもしくはAndroid*/
#about .course_box .inner dl dd ul li.single{
	width: 48%;
	display: inline-block;
	vertical-align: top;
	margin: 0 26%;
}
#about .course_box .inner dl dd ul li img{
	width: 100%;
}
@media (max-width: 768px) {
	#about .course_box .inner dl dt{
		width: 70%;
		float: none;
		margin: 0 auto;
	}
	#about .course_box .inner dl dd{
		width: 100%;
		float: none;
	}
}


#information {
	padding-bottom: 30px;
}
#information .inner{
	margin: 50px auto;
	background-color: #f6f6f6;
	border:1px solid #d8d8d8;
	padding: 30px 4%;
}
#information h2{
	color: #be2c38;
	font-size: 1.8rem;
	letter-spacing: 2px;
	margin-bottom: 1em;
	text-align: center;
}
#information h3{
	color: #be2c38;
	font-size: 1.4rem;
	margin-bottom: 0.5em;
}
#information img{
	width: 25%;
	max-width: 110px;
	float: right;
	margin-left: 20px;
	margin-top: -40px;
}
@media (max-width: 768px) {
	#information .inner{
		margin: 30px auto;
		padding: 20px 4%;
	}
	#information h2{
		font-size: 1.6rem;
		margin-bottom: 0.25em;
	}
	#information h3{
		font-size: 1.2rem;
		line-height: 1.5;
	}
	#information img{
		margin-top: 0;
		margin-left: 10px;
	}
}



/* ====== mainvisual ========= */
.course-mv-secondpage {
	overflow: hidden;
	max-width: 100%;
	padding: 0 !important;
	margin: 0 auto;
	text-align: center;
	background: #eff4f4 url("../img/mv.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	height: 40vh;
}
.course-mv-secondpage .mv_copy{
	width: 50%;
	max-width: 380px;
	position: absolute;
	top: 14vh;
	left: 20px;
}
.course-mv-secondpage h1{
	text-align: center;
}
@media (max-width: 768px) {
	.course-mv-secondpage {
		height: 30vh;
	}
	.course-mv-secondpage .mv_copy{
		top: 12vh;
		left: 0;
	}
	.course-mv-secondpage .mv_copy img{
	  -webkit-filter: drop-shadow(2px 2px 4px rgba(255,255,255,1.0));
	          filter: drop-shadow(2px 2px 4px rgba(255,255,255,1.0));
	}
	.course-mv-secondpage .course-mv-inner {
		/*透過の設定*/
		background: rgba(255,255,255,.0);
	}
}
@media (max-width: 480px) {
	.course-mv-secondpage {
		height: 25vh;
	}
	.course-mv-secondpage .mv_copy{
		top: 9vh;
		width: 65%;
	}
}

#smt{
	background-color: #fcf7e7;
	margin: 0 auto;
	padding: 50px 0;
}
#smt > .inner{
	background-color: #fff;
	padding: 20px 4%;
	border-radius: 10px;
}
#smt .inner h2{
	text-align: center;
	font-size: 30px;
	line-height: 30px;
	margin: 30px auto;
}
#smt .inner h2.android{
	color: #359f1c;
}
#smt .inner h2.rakusuma{
	color: #d33d70;
}
#smt .inner h2.shokisettei{
	color: #4072C4;
}
#smt .inner h2 span{
	position: relative;
	padding-left: 25px;
}
#smt .inner h2 span img{
	display: inline-block;
	margin-right: 10px;
	position: absolute;
	top: -5px;
	left: -25px;
}
@media (max-width: 768px) {	/* SP */
	#smt .inner h2{
		font-size: 1.2rem;
		line-height: 1.5;
		margin: 10px auto 20px auto;
	}
	#smt .inner h2 span{
		position: relative;
		padding-left: 25px;
	}
	#smt .inner h2 span img{
		display: inline-block;
		margin-right: 10px;
		position: absolute;
		top: -5px;
		left: -5px;
		width: 25px;
		height: auto;
	}
}


#smt .inner h3.course_title{
	line-height: 2.75rem;
}

#smt .inner .course_title{
	background: url("../img/bg_stripes.gif") repeat;
	padding: 15px 10px;
	margin: 20px auto 20px auto;
	font-size: 24px;
	line-height: 26px;
}
#smt .inner .course_title span{
	background-color: #be2c38;
	padding: 10px 15px 10px 38px ;
	border-radius: 4px;
	margin-right: 10px;
	position: relative;
	color: #fff;
	font-size: 18px;
	line-height: 26px;
}
#smt .inner .course_title span:before{
	position: absolute;
	content: "";
	background-image: url("../img/icon_finger.png");
	background-repeat: no-repeat;
	width: 25px;
	height: 27px;
	padding-right : 5px;/*文字との隙間*/
	top: 4px;
	left: 6px;
}
@media (max-width: 768px) {
	#smt .inner h3.course_title{
		line-height: 1.5rem;
	}
	#smt{
		padding: 30px 0;
	}
	#smt > .inner{
		padding: 15px 4% 30px 4%;
	}
	#smt .inner .course_title{
		padding: 8px 10px;
		margin: 0 auto 20px auto;
		font-size: 1.2rem;
		line-height: 1.5rem;
		text-align: center;
	}
	#smt .inner .course_title span{
		padding: 6px 8px 6px 28px;
		font-size: 18px;
		line-height: 22px;
		text-align: center;
		margin-right: 0px;
		display: block;
		margin-bottom: 2%;
	}
	#smt .inner .course_title span:before{
		background-size: 19px 21px;
		width: 19px;
		height: 21px;

		padding-right:0px;/*文字との隙間*/
		left: 35%;
	}
	/*初期設定編 ONLY ADD*/
	#smt .inner .course_title.shokisettei_content span:before{
		left: 30%;
	}
	/*Smable ONLY ADD*/
	#smt .inner .course_title.smable_content span:before{
		left: 22.5%;
	}
}

@media (max-width: 400px) {
	#smt .inner .course_title{
	}
	#smt .inner .course_title span{
		padding: 6px 6px 6px 6px ;
		font-size: 18px;
		line-height: 22px;
		display: block;
	}
	#smt .inner .course_title span:before{
		background-size: 22px 25px;
		width: 21px;
		height: 25px;
		left: 30%;
	}
	/*初期設定編 ONLY ADD*/
	#smt .inner .course_title.shokisettei_content span:before{
		left: 30%;
	}
	/*Smable ONLY ADD*/
	#smt .inner .course_title.smable_content span:before{
		left: 7.5%;
	}
}


#smt .inner .btn_type02{
	text-align: center;
}
#smt .inner .btn_type02 a.btn-type02 {
    width:20em;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:12px 20px 12px 20px ;
	margin: 0 auto;
	border-radius: 8px;
	background-color: #fac3b6;
    color:#282b2e;
	font-weight: bold;
	/* フェード */
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all  0.3s ease;
    -o-transition: all  0.3s ease;
    transition: all  0.3s ease;	
	/* 矢印 */
    position: relative;
}
#smt .inner .btn_type02 a.btn-type02:before{
    content: '';
    width: 18px;
    height: 18px;
    background: #be2c38;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -9px;
}
#smt .inner .btn_type02 a.btn-type02:after {
    content: '';
    width: 4px;
    height: 4px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 45%;
    right: 18px;
    margin-top: -1px;
}

@media (min-width: 769px) {		/* PC */
	#smt .inner .btn_type02 a.btn-type02:hover {
		background-color: #fc9a83;
	}
}
@media (max-width: 768px) {	/* SP */
	#smt .inner .btn_type02 a.btn-type02 {
		width:100%;
		padding:10px 2px ;

	}
}

#smt .inner dl{
	border-bottom: 1px solid #e2e2e2;
	padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; 
}
#smt .inner dl dt{
	width: 3em;
	text-align: center;
	color: #be2c38;
	font-size: 1.4rem;
	font-weight: bold;
}
#smt .inner dl dd.text{
    width: calc(100% - 4em - 220px);
}
/*★　●だけの記号の箇所　→なしに*/
#smt .inner dl dd.text.head_point{
    /*margin-left: 7%;*/
}
#smt .inner dd.text p.point_p{
	margin-left:8%;
}
@media screen and (max-width: 768px){
#smt .inner dd.text p.point_p{
	margin-left:2%;
}	
}
#smt .inner dl dd.text h3{
	font-size: 1.2rem;
}
#smt .inner dl dd.text p{
	padding: 0;
	margin: 0;
}
#smt .inner dl dd.btn{
	width: 190px;
	text-align: right;
}
@media (max-width: 768px) {
	#smt .inner dl:nth-child(1){
		padding: 10px 0 20px 0;
	}
	#smt .inner dl{
		width: 100%;
		padding: 20px 0;
		display: block;
	}
	#smt .inner dl dt{
		text-align: left;
		width: 100%;
		font-size: 1.2rem;
	}
	#smt .inner dl dd.text{
		width: 100%;
	}
	#smt .inner dl dd.btn{
		display: block;
		width: 100%;
		text-align: center;
		margin-top: 15px;
	}
}

#smt .inner dl dd.btn a.btn-type01 {
    width:180px;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 20px 8px 20px ;
	margin: 0 auto;
	border-radius: 50px;
	background-color: #ffe37c;
    color:#282b2e;
	font-weight: bold;
	/* フェード */
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all  0.3s ease;
    -o-transition: all  0.3s ease;
    transition: all  0.3s ease;	
	/* 矢印 */
    position: relative;
}
#smt .inner dl dd.btn a.btn-type01:before{
    content: '';
    width: 18px;
    height: 18px;
    background: #be2c38;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -9px;
}
#smt .inner dl dd.btn a.btn-type01:after {
    content: '';
    width: 4px;
    height: 4px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 45%;
    right: 18px;
    margin-top: -1px;
}

@media (min-width: 769px) {		/* PC */
	#smt .inner dl dd.btn a.btn-type01:hover {
		background-color: #ffa801;
	}
}
@media (max-width: 768px) {	/* SP */
	#smt .inner dl dd.btn a.btn-type01 {
		width:100%;
		padding:10px 2px ;

	}
}


#modal-overlay {
  z-index: 1; 
  display: none;
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.8) ; 
} 
.button-link { 
  color: #00f ; 
  text-decoration: underline; 
}
.button-link:hover { 
  cursor: pointer ; 
  color: #f00 ; 
}

@media (min-width: 769px) {	/* PC */
	#modal-close{
		position: absolute;
		top: -70px;
		right: -70px;
		font-weight: bold;
		z-index: 100;
		padding: 10px;
/*
		text-decoration: none;
		color: #fff;
		font-size: 4rem;
*/
	}
	#modal-content { 
	  position: fixed; 
	  /*display: none;*/ 
	} 
	.movie {
		margin: 0 auto;
		padding: 30px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		 position: relative;
		 padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
		 height: 0;
		 overflow: hidden;
		width: 600px;
	}
	.movie iframe {
		 position: absolute;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
	}	
}

@media (max-width: 768px) {	/* SP */
	
	#modal-close{
		position: absolute;
		top: 30px;
		right: 30px;
		font-weight: bold;
		z-index: 100;
		padding: 0;
		margin: 0;
	}
	
/*
	.movie {
		 position: relative;
		 padding-bottom: 177.777%;
		 height: 0;
	}
	.movie iframe {
		 position: absolute;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
	}	
*/
	
	.move{
	position:relative;
	width:100%;
	padding-top:140%;
	}
	.move iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	}
	
}

/* ==============
TOP 今後予定
 ============== */
div.schedule_info{
	width: 100%;
	margin: 3% 0 5%;
}

div.schedule_info ul{
	width: 60%;
	margin: 0 20%;
}
div.schedule_info ul li{
	text-align: left;
	font-weight: bolder;
	font-size: 18px;
	line-height: 30px;
	list-style: none;
	/*padding: 0.5em 0.5em 0.6em 0.5em;*/
	margin-bottom: 5px;
	vertical-align: middle;
	/*background: #D6584B;*/
	border-radius: 20px 0px 0px 20px;
	text-indent: -25px;
	padding-left: 25px;
}

div.schedule_info ul li:before{
	display:inline-block;
	vertical-align: middle;
	content:'';
	margin-right: 8px;
	width:1em;
	height: 1em;
	/*●　だが背景指定*/
	background: #D6584B;
	/*★　丸形に*/
	border-radius: 50%;
}
@media screen and (max-width: 768px){
div.schedule_info ul{
	width: 80%;
	margin: 0 10%;
}
}

@media screen and (max-width: 500px){
div.schedule_info ul{
	width: 100%;
	margin: 10% 0;
}
div.schedule_info ul li{
	font-size: 16px;
	line-height: 22px;
	letter-spacing:-0.11em;
}
}


/* ==============
STEP 部
 ============== */
h2.lec_step{
	color:#333;
	font-size: 26px;
	text-align: center;
	margin: 4% auto 0%;
	border-bottom:solid 4px orange;
	padding-bottom:1px;
	width: 25%;
}
@media screen and (max-width: 768px){
h2.lec_step{
	width: 60%;
	font-size: 22px;
	margin: 12% auto 0%;
}
}
/* ==============
STEP 部END
 ============== */




/* ==============
Page内LINK部
 ============== */
div.lec_link{
	width: 100%;
}
div.lec_link>h3{
	color:#be2c38;
	text-align: center;
	font-size: 24px;
	margin: 4% auto 1%;
}
/*初期設定編 ONLY ADD*/
div.lec_link.tanmatsushoki_lec_link>h3{
	color: #4072C4;
}
/*Smable ONLY ADD*/
div.lec_link.smable_lec_link>h3{
	color: #ed7d31;
}

ul.lec_ul{
	width: 90%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin: 3% auto 3%;
}
@media screen and (max-width: 768px){
div.lec_link ul.lec_ul{
	width: 100%;
	display: block;
}	
}

div.lec_link ul.lec_ul li.nyumon_lec{
	width: 40%;
	border: 4.5px solid #BE2C38;
	border-radius: 10px;
	padding: 0;
	list-style: none;

	-webkit-transition: 0.7s;

	-o-transition: 0.7s;

	transition: 0.7s;
	margin: 3% 0%; 
}
/*初期設定編 ONLY ADD*/
div.lec_link.tanmatsushoki_lec_link ul.lec_ul li.nyumon_lec{
	border: 4.5px solid #4072C4;
}
/*Smable ONLY ADD*/
div.lec_link.smable_lec_link ul.lec_ul li.nyumon_lec{
	border: 4.5px solid #ed7d31;
}

@media screen and (max-width: 768px){
div.lec_link ul.lec_ul li.nyumon_lec{
	width: 90%;
	display: block;
	margin: 10% auto;
}	
}

ul.lec_ul li.nyumon_lec a{
	display: block;
	width: 100%;
	padding:2.5%;
	font-size: 20px;
	font-weight: bolder;
	color: #BE2C38;
	text-decoration: none;
	text-align: center;
}
/*初期設定編 ONLY ADD*/
div.lec_link.tanmatsushoki_lec_link ul.lec_ul li.nyumon_lec a{
	color: #4072C4;
}
/*Smable ONLY ADD*/
div.lec_link.smable_lec_link ul.lec_ul li.nyumon_lec a{
	color: #ed7d31;
}
@media screen and (max-width: 960px){
div.lec_link ul.lec_ul li.nyumon_lec a{
	padding:2%;
	font-size: 15px;
}
}
@media screen and (max-width: 768px){
div.lec_link ul.lec_ul li.nyumon_lec a{
	padding:1.5%;
	width: 100%;
	font-size: 15px;
}	
}


ul.lec_ul li.nyumon_lec:hover{
	background-color: #FFD451;
}

/* ==============
Page内LINK部　END
 ============== */




/* ==============
TEXT DOWNLOAD部
 ============== */

#textdownload{
	background-image: url(../img/text_background.png);
	background-repeat: repeat;
	padding: 3% 5% 3%;
	margin: 0 auto;
}
#textdownload h2{
	font-size: 1.75rem;
	line-height: 1.5;
	margin-bottom: 1em;

	letter-spacing: 2px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center; /* 垂直中心 */
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center; /* 水平中心 */
}
#textdownload h2:before, #textdownload h2:after {
  border-top: 2px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
#textdownload h2:before {
  margin-right: 1em; /* 文字の右隣 */
}
#textdownload h2:after {
  margin-left: 1em; /* 文字の左隣 */
}
@media (max-width: 500px){
#textdownload h2{
	font-size: 1.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
}
@media (max-width: 768px){
#textdownload{
	padding: 20px 0;
}
#textdownload h2.border{
	font-size: 2em;
	margin-bottom: 0.25em;
}
#textdownload h2:before, #textdownload h2:after{
  width: 0.5rem; /* 線の長さ */
}
#textdownload h2:before {
  margin-right: 0.5em; /* 文字の右隣 */
}
#textdownload h2:after {
  margin-left: 0.5em; /* 文字の左隣 */
}
}


#textdownload p{
	/*padding: 2.25%;*/
	/*background-color: white;*/
	-webkit-filter: drop-shadow(0px 0px 3px #ccc);
	        filter: drop-shadow(0px 0px 3px #ccc);
	width: 94%;
	margin: 1.25% 3% 2.5%;

	text-align: center;
	border-radius: 21px;
	font-size: 20px;
	font-weight:bolder; 
}
@media (max-width: 768px) {
#textdownload p{
	font-size: 18px;
	text-align: left;
}
}
@media (max-width: 500px) {
#textdownload p{
	font-size: 16px;
	text-align: left;
}
}

#textdownload div.text_bnrimg a{
	width: 100%;
	margin: 3% auto;
}
#textdownload div.text_bnrimg img{
	width: 100%;
	-webkit-filter: drop-shadow(0px 0px 6px #ccc);
	        filter: drop-shadow(0px 0px 6px #ccc);
}
#textdownload div.text_bnrimg img:hover{
	/*opacity: 0.8;*/
}
@media (max-width: 768px) {
#textdownload div.text_bnrimg img{
	width: 100%;
}
}

 /* ==============
TEXT DOWNLOAD部 END
 ============== */


 /* ==============
スマホ教室予約BUTTON　START
 ============== */
p.sp_button a{
	display: block;
	margin: 2.5% auto;
	padding: 10px 5px 10px;
	text-decoration: none;
	text-align: center;
	color: #fff;
	border: 1px solid #ba3324;
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: bold;
	vertical-align:top;
	background: -webkit-gradient(linear, left top, left bottom, from(#da695d), to(#cf3b2b));
	background: linear-gradient(to bottom, #da695d, #cf3b2b);
	-webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
	width: 52.5%;
	height: 50px;
	position: relative;
}
p.sp_button a img#newopen{
	position: absolute;
    top: 110%;
    right: 4%;
	height: 1.35vw;
 	width: 1.35vw;
    margin-right: 20%;
    margin-right: 0;
}
}

p.sp_button a:hover{
	background:#BE2C38;
}
@media screen  and (max-width:1366px){
p.sp_button a{
	width: 65%;
}
p.sp_button a img#newopen{
	position: absolute;
	top: 116%;
	right: 5%;
    height:1.5vw;
    width: 1.5vw;
    margin-right: 20%;
    margin-right: 0;
}
}
@media screen  and (max-width:1000px){
p.sp_button a img#newopen{
	position: absolute;
    right: 7%;
	height: 1.75vw;
    width: 1.75vw;
    margin-right: 20%;
    margin-right: 0;
}
}
@media screen  and (max-width:768px){
p.sp_button a{
	font-size: 1rem;
	width: 85%;
	height: 45px;
}
p.sp_button a img#newopen{
	position: absolute;
	top: 30%;
	right: 12%;
    height:2.25vw;
    width: 2.25vw;
    margin-right: 20%;
    margin-right: 0;
}
}
@media screen  and (max-width:600px){
	p.sp_button a img#newopen{
	position: absolute;
	top: 33%;
	right: 5%;
    height:2.25vw;
    width: 2.25vw;
    margin-right: 20%;
    margin-right: 0;
}
}
@media screen and (max-width:480px){
p.sp_button a{
	font-size: 0.78rem;
	width: 100%;
	height:41px;
}
p.sp_button a img#newopen{
	position: absolute;
    top: 35%;
    right: 12.5%;
    height:2.5vw;
    width: 2.5vw;
    margin-right: 20%;
    margin-right: 0;
}
}
@media screen and (max-width:400px){
p.sp_button a img#newopen{
	position: absolute;
    top: 35%;
    right: 7.5%;
    height:3vw;
    width: 3vw;
    margin-right: 20%;
    margin-right: 0;
}
}

 /* ==============
スマホ教室予約BUTTON　END
 ============== */

 /* ==============
IF互換性文言 START
 ============== */
div.attention{
max-width: 960px;
width: 100%;
background-color: #eee;
padding: 1%;
padding-bottom: 0.5%;
margin-top: 3%;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
/*
width: 55%;
background-color: #eee;
padding: 1%;
padding-bottom: 0.5%;
margin: 2% 22.5%;
*/
}
div.attention p{
font-size: 14px;
line-height: 21px;
}

@media (max-width: 960px) {
    div.attention{
        width: 90%;
    }
}

/*
@media (max-width: 1200px) {
div.attention{
width: 80%;
margin: 3% 10%;
}
}
@media (max-width: 500px) {
div.attention{
width: 90%;
margin: 5% 5%;
}
}
*/
/* ==============
IF互換性文言 END
 ============== */