/*-------------------------------------------------------------------------
  Layout
------------------------------------------------------------------------- */
.container-fluid.index_main {
    padding-top: 2rem;
    -webkit-background-size: 12px 12px;
-moz-background-size: 12px 12px;
background-size: 12px 12px;
background-color: #fff;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #ddf5ea), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ddf5ea),
            color-stop(.75, #ddf5ea), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #ddf5ea 25%, transparent 25%,
          transparent 50%, #ddf5ea 50%, #ddf5ea 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #ddf5ea 25%, transparent 25%,
          transparent 50%, #ddf5ea 50%, #ddf5ea 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #ddf5ea 25%, transparent 25%,
          transparent 50%, #ddf5ea 50%, #ddf5ea 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #ddf5ea 25%, transparent 25%,
          transparent 50%, #ddf5ea 50%, #ddf5ea 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #ddf5ea 25%, transparent 25%,
          transparent 50%, #ddf5ea 50%, #ddf5ea 75%,
          transparent 75%, transparent);
}

.container-fluid.index_main.top_bg {
  background-image: url(../img/bg-mv.jpg);
  background-repeat: repeat-x;
  background-size: contain;
}

.jumbotron h2 {
  position: relative;
  padding: 0 0 3rem;
}

.jumbotron h2::before {
  content: '';
  display: inline-block;
  width: 72px;
  height: 35px;
  background-image: url(/lib/img/mvAccessory.png);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin-bottom: 1rem;
}

/*-------------------------------------------------------------------------
  Top & Common
------------------------------------------------------------------------- */

/* courselList
-------------------------------------------------------------------------*/

.courseName {
  background: #1cba6f;
}

/* course-difference
-------------------------------------------------------------------------*/
.course-difference .compare .card-body { padding: 2.5rem;} 

/* point
-------------------------------------------------------------------------*/
.point .card-deck .card {
  margin-left: 10px;
  margin-right: 10px;
}


/* exampleList
-------------------------------------------------------------------------*/
.exampleList {
	overflow: hidden;
	padding: 0 15px;
}
.exampleList li {
	float: left;
	width: 29%;
	margin-right: 6.5%;
	position: relative;
}
.exampleList li:last-child {
	margin-right: 0;
}
.exampleList li p {
	margin-bottom: 0;
}
.exampleList li h4 {
	background: #fffa67;
	font-weight: bold;
	text-align: center;
	padding: 12px 2% 14px;
	font-size: 120%;
}
.exampleList li::after {
	content: "";
	background: url(../img/arrow_right.png);
	width: 33px;
	height: 30px;
	position: absolute;
	right: -42px;
	top: 50%;
	margin-top: -17px;
}
.exampleList li:last-child::after {
	content: none;
}

@media (max-width: 576px) {
.exampleList li {
	float: none;
	width: 100%;
	margin-right: 0;
	margin-bottom: 45px;
}
.exampleList li::after {
	content: "";
	background: url(../img/arrow_down.png);
	width: 30px;
	height: 33px;
	position: absolute;
	right: 50%;
	top: auto;
	bottom: -40px;
	margin-top: 0;
	margin-right: -15px;
}
.exampleList li:nth-child(3n)::after {
	content: none;
}
}

/*-------------------------------------------------------------------------
  work
------------------------------------------------------------------------- */
/*sec02*/
.work .sec02 .bg-greenLight:after{
	content: "";
background: url(../img/arrow_green.png);
width: 70px;
height: 25px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -35px;
}

.work .sec02 .bg-gray:after{
	content: "";
background: url(../img/arrow_gray.png);
width: 70px;
height: 25px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -35px;
}

@media (max-width: 768px) {
.work .sec02 .bg-gray:after{
bottom: 10px;
}
.work .sec02 .bg-greenLight:after{
bottom: 10px;
}
	.work .sec02 .pb-10 {
		padding-bottom: 5rem;
	}	
}



/*-------------------------------------------------------------------------
  useful
------------------------------------------------------------------------- */


/*-------------------------------------------------------------------------
  aside
------------------------------------------------------------------------ */
aside .indexHead02::before,
aside .indexHead.card-header::before, aside .indexHead::before {
  background: #1CBA6F;
}

/*-------------------------------------------------------------------------
  course ※コース名をクラスにしているものはクラス名に変更してください
------------------------------------------------------------------------- */
/* Karte     ----------------------------------*/

.Karte { position: relative;}

.Karte::before {
  position: absolute;
  top: 0;
  left: 50%;
  content: "";
  width: 40%;
  height: 1rem;
  margin-left: -20%;
  background: #1CBA6F;
}

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

/* 追加分 */
/* manga_tushin
------------------------------------------------------------------------- */

.manga_tushin .rounded {
	border-radius: 20px !important;
}
.manga_tushin .arrow.dot::before {
	top:12px;
}
.manga_tushin .sec11 ul{
	padding: 0 1%;
}
.manga_tushin .sec11 ul li.col-md-2{
	-webkit-box-flex: 0;
    -ms-flex: 0 0 14%;
    flex: 0 0 14%;
    max-width:14%;
	margin: 0;
	padding: 1px;
}

@media (max-width: 768px) {
	/* manga_tushin
------------------------------------------------------------------------- */
	.manga_tushin .sec11 ul{
		padding: 0 1.5rem;
}
.manga_tushin .sec11 ul li.col-6{
	-webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width:50%;
	margin: 0;
	padding: 1px;
}
}


.faq .main-col .card .card-header h5::before {
  background: #1CBA6F;
}


/* schools
-------------------------------------------------------------------------*/
/* accesslList     ----------------------------------*/

.schools .accessList .list li {
  padding: 0 1rem;
  border: solid 1px #666;
  border-width: 0 1px;
  margin-bottom: .5rem;
  display: inline-block;
  margin-left: -4px;
}

@media (max-width: 768px) {
.schools .accessList ul.list.text-center {
  text-align: left!important;
}
.schools .accessList .list li {
  margin-left: 0;
  border-width: 0 1px 0 0;
}
.schools .accessList .list li:first-child {
  border-left: solid 1px #666;
}
}
.schools .accessList .gmap object, .schools .accessList .gmap embed, .schools .accessList .gmap iframe {
  height: 230px;
}
.schools .accessList .buttonList.row {
}

@media (min-width: 576px) {
.schools .accessList .buttonList.row {
  margin-right: -5px;
  margin-left: -5px;
}
.schools .accessList .buttonList .col-sm-4 {
  padding-right: 5px;
  padding-left: 5px;
}
}

@media (max-width: 768px) {
.schools .accessList .gmap {
  padding-bottom: 60%;
  margin-bottom: 1rem;
}
}

.drawing_course_flyer{
  text-align: center;
}

/* キャンペーンバナー */
.campaign_bnr{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 18px;
}
.campaign_bnr a:hover {
    opacity: 0.8 !important;
}
/* キャンペーンバナー */

/* iPad、クリスタ注意事項 */
.precautions > div > div > h3{
    font-size: 140%;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
}
.precautions > div > div > p.indent-1{
    padding-left:1em;
    text-indent:-1em;
    font-size: 100%;
    line-height: 1.5em;
}
.precautions > div > div > p.mb10{
    margin-bottom: 10px;
}
.precautions > div > div > p.mb20{
    margin-bottom: 20px;
}
.precautions > div > div > p > span{
   font-weight: 600;
}
.precautions > div > div > p{
    line-height: 1.7em;
    font-size: 115%;
}
/* iPad、クリスタ注意事項 */