@charset "utf-8";

body{
  word-wrap: break-word;
  word-break: keep-all;
}

#lesson_intro{
max-width:676px;
width:90%;
margin:0 auto;
padding:40px 0 100px;
}

#infro_text{
padding:15px;
}
@media screen and (max-width:680px)  {
#infro_text{
padding:0px;
}
}

#infro_box{
width: 100%;
border: #409fc6 solid 1px;
border-radius: 15px;
padding:70px 90px 60px 90px;
position: relative;
}
@media screen and (max-width:680px)  {
#infro_box{
padding:70px 30px 60px 30px;
}
}

#infro_box h2 {
position: absolute;
background-color: #fff;
display: inline-block;
width: 60%;
font-size: 32px;
top: -32px;
color: #409fc6;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
@media screen and (max-width:767px)  {
#infro_box h2 {
font-size: 26px;
line-height:1.5;
top: -18px;
left: 50%;
width: 70%;
}
}
@media screen and (max-width:480px)  {
#infro_box h2 {
font-size: 24px;
position: relative;
width: 100%;
margin-bottom:20px;
}
}


#infro_box li{
background-image: url(../images/common/ico_check.png);
background-size: 18px;
background-repeat: no-repeat;
padding-left: 27px;
background-position: 0px 9px;
margin-bottom:4px;
}

/* -------------------------------------- */

#instructor{
background-color: #f1f8fb;
width:100%;
padding:70px 0 120px;
text-align:center;
}

#instructor_inner{
max-width:676px;
width:86%;
margin:0 auto;
}

#instructor_name{
font-size:24px;
font-weight:800;
color:#409fc6;
text-align:left;
}

@media screen and (max-width:680px)  {
#instructor_name{
font-size:22px;
}
}
#instructor_career{
text-align:left;
}


/* ----------------------------------------- */

#info{
padding:120px 0 150px;
text-align: center;
}
@media screen and (max-width:680px)  {
#info{
padding:80px 0;
}
}

#info_text{
text-align:left;
max-width:900px;
width:86%;
margin:0 auto;
padding-right:200px;
position:relative;
}
@media screen and (max-width:860px)  {
#info_text{
padding-right:0;
}
}

#info_text img{
position:absolute;
bottom:20px;
right:-60px;
width:276px;
}
@media screen and (max-width:860px)  {
#info_text img{
position:relative;
bottom:0;
right:0;
}
}

#info_text dl{
display:flex;
padding:15px;
border-bottom:#ddd solid 1px;
}
#info_text dt{
font-weight:800;
width:28%;
}
#info_text dd{
width:72%;
}

@media screen and (max-width:1023px)  {
#info_text dl{
display:block;
}

#info_text dt{
width:100%;
}
#info_text dd{
width:100%;
}
}

/* ----------------------------------------- */


#footer_contact h2 {
margin-bottom: 40px;
}

#info_ill{
text-align:center;
}