@charset "utf-8";
/* CSS Document */
.c-pc {
    display: block;
}
.c-sp {
    display: none;
}
#container,
#container_top {
    width:800px;
    margin:0 auto;
    color:#333333;
}

#container_top {
    position:relative;
}

.clear {
    clear:both;
}


#container h2 {
    width:499px;
}

#container #navi {
    margin-top: 0;
    margin-right: 0;
    margin-left: 170px;
    margin-bottom: 0;
}
.web-gallery p {
    width: 80%;
    margin-left: 0%;
}


#container #navi li {
    float:left;
}

p {
    font-size:12px;
    line-height:18px;
}


#container #main_text {
    margin:0 0 0 150px;
}

#container #main_text1 {
    margin:0 150px 0 150px;
}

.event_text {
    text-indent: 1em;
}

#header2 ul {
    width:717px;
    margin:auto;
    overflow: hidden;
}

#header2 ul li {
    float:left;
    padding:0 0 0 0;
}

#footer ul {
    width:480px;
    margin:auto;
}

#footer ul li {
    float:left;
    padding:0 0 30px 0;
}

#footer span {
    font-size:13px;
    text-decoration: none;
}
#footer a{
    text-decoration: none;
}

#footer a:hover{
    text-decoration: underline;
}

#copyright {
    text-align:right;
    color:#636363;
    margin:0 0 25px 0;
}

#page-top {
    position:absolute;
        bottom: 85px;
        right: 20px;
}



/*トップ*/
#main {
    background-repeat: no-repeat;
    background-image: url(../img/top.jpg);
    width: 800px;
    height: 750px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

#menu {
    position: absolute;
    top: 325px;
    left: 141px;
}

#menu_message {
    position: absolute;
    top: 292px;
    left: 162px;
}

#menu_course {
    position: absolute;
    top: 266px;
    left: 267px;
}

#menu_class {
    position: absolute;
    top: 247px;
    left: 392px;
}

#menu_concept {
    position:absolute;	
    top:235px;
    left:382px;
}

#menu_news {
    position: absolute;
    top: 266px;
    left: 518px;
}

#official {
    position:absolute;
    top:350px;
    left:0;
}

#book {
    position: absolute;
    top: 302px;
    right: 74px;
}

#recruiting {
    position: absolute;
    top: 390px;
    right: 10px;
}

#book a img,
#recruiting a img {
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;
}

#book a img:hover,
#recruiting a img:hover {
    opacity:0.8;
}

#news h2 {
    position: absolute;
    top: 650px;
}

#news ul {
    position: absolute;
    top: 655px;
    left: 124px;
    width: 550px;
    padding: 0 0 0 15px;
    border-left: 1px solid #93BC46;
    font-size: 15px;
    line-height: 1.2em;
    overflow-y: scroll;
    height: 95px;
}

#news ul li a {
    color:#333;
}

#news ul li a:hover {
    text-decoration:none;
}

#works {
    position:absolute;
    top:580px;
    right:0;
}

#autumn {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
}

#autumn p {
    font-size: 13px;
    line-height: 1.6;
}

#autumn p:nth-of-type(2) {
    margin: 20px 0 0;
}

#autumn p span {
    color: #C00000;
}

#autumn dl {
    margin: 25px 0;
    position: relative;
    overflow: hidden;
}

#autumn dl dt,
#autumn dl dd {
    font-size: 13px;
    border-spacing: 5px solid #000;
    line-height: 1.6;
}

#autumn dl dt {
    background: #edd460;
    padding: 5px;
    margin: 0 0 15px;
    width: 80px;
    text-align: center;
    border-radius: 8px;
    float: left;
    clear: left;
}

#autumn dl dt:nth-of-type(2n+1) {
    background: #b493d2;
}

#autumn dl dd {
    width: 675px;
    float: left;
    padding: 0 15px 15px;
}

#autumn dl dd div {
    border: 1px solid #F00000;
    padding: 10px;
    margin: 10px 0;
    font-size: 12px;
    color: #F00000;
    width: 350px;
}

#autumn dl dd span {
    color: #F00000;
}

#autumn dl dd span#deadline {
    background: linear-gradient(transparent 40%, #FFFF00 40%);
    color: #000;
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    margin: 0 20px 8px 0;
}

#autumn #freedial {
    margin: 0 0 20px;
}

#autumn #freedial p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    width: 130px;
    float: left;
    line-height: 1.5;
}

#autumn #freedial img {
    width: 81px;
    float: left;
    display: inline-block;
    padding: 0 10px 0 0;
}

#autumn #freedial p:nth-of-type(2) {
    font-family: メイリオ;
    font-size: 34px;
    font-weight: bold;
}

#autumn #freedial p:nth-of-type(2) span {
    color: #000;
    font-size: 13px;
    font-weight: normal;
}

#autumn #guidance {
    margin: 30px 0;
    text-align: center;
}

#autumn #mark img {
    width: 125px;
    float: left;
    padding: 0 15px 0 0;
}

#autumn #mark p {
    /*color: #f6ac19;*/
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    padding: 23px 0 0;
}

#artschool h2,
#curriculum h2,
#voice h2 {
    width:711px;
    margin:0 auto 15px;
    float: none;
}

#artschool {
    background:url(../img/artschool_bg.png) no-repeat;
    padding:15px 10px 0;
    height:655px;
    margin-top: 30px;
}

#artschool div {
    float:left;
    width:254px;
    padding:28px;
}

.artschool_sub {
    float: left;
    width:254px;
    padding:28px;
}

#artschool #first {
    background:url(../img/artschool1.jpg) no-repeat;
    width:198px;
    height:535px;
}

#artschool #second {
    background:url(../img/artschool2.jpg) no-repeat;
    width:198px;
    height:535px;
    margin:0 9px;
}

#artschool #third {
    background:url(../img/artschool3.jpg) no-repeat;
    width:198px;
    height:535px;
}

#artschool div h3 {
    margin:0 0 0 50px;
}

#artschool section h3 {
    margin:0 0 0 50px;
}
#artschool #first .photo {
    padding: 0px 0 15px;
    margin-top: 7px;
}

#artschool #second .photo {
    padding:13px 0 18px;
}

#artschool #third .photo {
    padding: 0px 0 15px;
    margin-top: 7px;
}

#artschool div p {
    line-height:1.7em;
    padding-bottom: 15px;
}
#artschool section p {
    line-height:1.7em;
    padding-bottom: 15px;
}
#curriculum,
#voice {
    background:#FFF688;
    padding:15px 10px 20px;
}

#curriculum_inner,
#voice_inner {
    background:#FFF;
    padding:15px 15px 15px;
    position:relative;
    overflow:hidden;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    behavior: url("PIE.htc");
}

#curriculum_inner {
    margin-top: 10px;
}

.curriculum {
    border-right:3px dotted #FF7F0B;
    width:153px;
    float:left;
    padding:0 17px 0 20px;
}

.curriculum_text, .curriculum_text2 {
    width: 760px;
    margin: 0 auto;
}

.curriculum_text2 {
    margin: 10px auto 0;
}

#curriculum #curriculum_first {
    padding:0 17px 0 7px;
}

#curriculum_inner .last {
    border:0;
    padding:0 3px 0 17px;
}

.curriculum .photo {
    margin:10px 0 30px;
}

.curriculum #design {
    width:102px;
    margin:0 auto 28px;
}

.curriculum #painting {
    width:129px;
    margin:10px auto 30px;
}

.curriculum #workss {
    width:156px;
    margin:0 auto 30px;
}

.curriculum #team {
    width:142px;
    margin:0 auto 30px;
}

#voice {
    background: url("../img/artschool_bg.png") repeat-y;
    margin-bottom: 20px;
}

#voice h3 {
    color: #EF8325;
    font-weight: bold;
    font-family: メイリオ;
    font-size: 15px;
    padding: 25px 0 5px;
}

#voice_inner {
    padding: 15px 20px;
    border: 3px solid #F4B226;
    position: relative;
    overflow: hidden;
}

#voice_inner div {
    width: 330px;
    float: left;
}

#voice_inner div img {
    width: 250px;
    display: block;
    margin: 0 auto;
}

#voice_inner div#voice_l {
    margin: 0 50px 0 10px;
}

#voice_inner div#voice_l img {
    padding-top: 10px;
}

#voice ul li {
    font-size: 12px;
    line-height: 22px;
    padding-left: 18px;
    position: relative;
}

#voice ul li:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "●";
}

#other {
    text-align:center;
    margin:10px 0 0 0;
}

#banner li {
    margin: 9px 3px 0 0;
    padding:0 !important;
}





/*教室のご案内 タブ*/
#tab-box {
    margin:55px 0 0 0;
}

#tab-box #nav {
    width:780px;
    margin:0 50px;
    padding: 0;
    list-style: none;
}

#class_tab #tab-box #nav {
    width: auto;
    margin: 0;
}

#class_tab #tab-box #nav li {
    margin-right: 0;
}

#class_tab #tab-box #nav .tab2 {
    margin: 0;
}

#tab-box #nav li {
    margin-right:3px;
    float:left;
    display:inline;
    font-size:0;
}

#tab-box #nav li a img{
    outline:none;
    border:none;
}

#tab-box #tab-01,
#tab-box #tab-02,
#tab-box #tab-03,
#tab-box #tab-04 {
    display:none;
    width:800px;
    margin:0 0 0 0;
    padding:14px;
    background:#EEEEEE;
}



.clearFix:after{
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
    content:".";
    zoom:1;
}

#tab2 {
    margin:0 40px !important;
}

#tab-01 #list,
#tab-02 #list,
#tab-03 #list,
#tab-04 #list {
    height: 240px;
    background: url(../img/list_bg5.png) no-repeat;
    padding: 25px 55px;
    background-size: 800px 280px;
}

#tab-02 #list {
    background:url(../img/list_bg2.png) no-repeat;
    height:177px;
}

#tab-03 #list {
    background:url(../img/list_bg6.png) no-repeat;
    height:177px;
}

#tab-04 #list {
    background:url(../img/list_bg4.png) no-repeat;
    height:120px;
}

#tab-01 .list,
#tab-02 .list,
#tab-03 .list,
#tab-04 .list {
    font-size:14px;
    color:#59ABF2;
    line-height:1.8em;
    list-style:disc;
    font-weight:bold;
    float:left;
}

#tab-02 .list {
    color:#FF7F00;
}

#tab-03 .list {
    color:#A1CA00;
}

#tab-03 .list {
    color:#A1CA00;
}

#tab-04 .list {
    color:#E1858E;
}

#tab-01 #list2,
#tab-02 #list2,
#tab-03 #list3 {
    margin:0 0 0 50px;
}

#tab-01 .list li a,
#tab-02 .list li a,
#tab-03 .list li a,
#tab-04 .list li a {
    color:#59ABF2;
    text-decoration:none;
}

#tab-02 .list li a {
    color:#FF7F00;
}

#tab-03 .list li a {
    color:#A1CA00;
}

#tab-04 .list li a {
    color:#E1858E;
}
#tab-01 .list a{
    color:#59ABF2;
}

#tab-02 .list a {
    color:#FF7F00;
}

#tab-03 .list a {
    color:#A1CA00;
}

#tab-04 .list a {
    color:#E1858E;
}

#tab-01 .list li a:hover,
#tab-02 .list li a:hover,
#tab-03 .list li a:hover,
#tab-04 .list li a:hover {
    text-decoration:underline;
}

#tab-01 hr,
#tab-02 hr,
#tab-03 hr,
#tab-04 hr {
    border:none;
        border-top:dashed 2px #fff;
        color:#FFFFFF;
    width:800px;
    margin:20px 0 0;
}

.class {
    background:#FFF;
    padding:20px;
    margin:20px 0 0 0;
    font-size:12px;
    position:relative;
    overflow:hidden;
    -webkit-border-radius:7px;
        -moz-border-radius:7px;
    border-radius:7px;
}

.class h3 {
    font-size:18px;
    color:#59ABF2;
    font-weight:bold;
    margin:0 45px 0 0;
    float:left;
}

#tab-02 .class h3 {
    color:#FF7F00;
}

#tab-03 .class h3 {
    color:#A1CA00;
}

#tab-04 .class h3 {
    color:#E1858E;
}

.class .btn {
    width:104px;
    height:25px;
    float:left;
    margin:-3px 0 0 0;
	text-align:center;
	line-height: 2em;
    vertical-align: middle;
    background:url(../img/btn_class.png) no-repeat;
}


.class .btn_nl {
    width:104px;
    height:25px;
    float:left;
    margin:-3px 0 0 0;
    text-align:center;
        line-height: 2em;
        vertical-align: middle;
    background:url(../img/btn_class.png) no-repeat;
}

.class .btn2 {
    width:110px;
    height:45px;
    float:left;
    margin:-3px 0 0 0;
    text-align:center;
    line-height:1.4em;
    background:url(../img/btn_class4.png) no-repeat;
}

.class .btn3 {
    background:url(../img/btn_class5.png) no-repeat;
}

.class .btn4 {
    background:url(../img/btn_class7.png) no-repeat;
}

.class .btn5 {
    background:url(../img/btn_class8.png) no-repeat;
}

#tab-02 .class .btn {
    background:url(../img/btn_class2.png) no-repeat;
}

#tab-03 .class .btn {
    background:url(../img/btn_class3.png) no-repeat;
}

#tab-03 .class .btn_nl {
    width:110px;
        line-height: 2em;
        vertical-align: middle;
    background:url(../img/btn_class3.png) no-repeat;
}

#tab-04 .class .btn {
    background:url(../img/btn_class6.png) no-repeat;
}

.class .btn a,
.class .btn2 a {
    text-decoration:none;
    color:#000;
    display:block;
    padding:6px 8px;
}

.class .dataL {
    width:412px;
    clear:both;
    float:left;
}

.class .dataR {
    width:302px;
    float:right;
    margin:20px 0 0 0;
}

.class .data {
    position:relative;
    overflow:hidden;
    margin:20px 0 0 0;
}

.class .data p {
    float:left;
    line-height:1.6em;
}

.class .item {
    width:52px;
    margin:0 20px 0 0;
    padding:4px;
    background:#BDDBF4;
    text-align:center;
    float:left;
    background:url(../img/item.png) no-repeat;
    position:relative;
}

#tab-02 .class .item {
    background:url(../img/item2.png) no-repeat;
}

#tab-03 .class .item {
    background:url(../img/item3.png) no-repeat;
}

#tab-04 .class .item {
    background:url(../img/item4.png) no-repeat;
}

.class .tel_item {
    margin:7px 20px 0 0;
}

.class .tel {
    font-size:21px;
}

.class .mid {
    font-size:15px;
}

.class .items {
    float:left;
    width:60px;
    margin:0 20px 0 0;
}

.class .items .biweekly {
    display:block;
    text-align:center;
    margin:27px 0 0 0;
}
.class .map {
    margin:10px 0 0 0;
    text-align:right;
}
.class .map a {
    color:#000;
}

.class .map a:hover {
    text-decoration:none;
}

#Osaka8,
#Kyoto4,
#Hyogo5 {
    margin:20px 0 30px 0;
}




/*コースのご紹介*/
.kids,
#advance {
    width:601px;
    margin:0 auto;
}

.course_text {
    width:340px;
    margin:-78px 0 0 30px;
}

.month_text span {
    padding:0 0 10px 0;
    display:inline-block;
}

#kids2015 {
    width:546px;
    height:826px;
    background:url(../img/kids_bg.gif) no-repeat;
    margin:30px 0 0 0;
    padding:48px 25px 25px;
    position:relative;
}

#advance2015 {
    width:546px;
    height:1000px;
    background:url(../img/advance_bg.gif) no-repeat;
    margin:30px 0 0 0;
    padding:48px 25px 25px;
    position:relative;
}

#kids2015 h3,
#advance h3 {
    font-size:12px;
    font-weight:bold;
    position:absolute;
    top:-8px;
    left:15px;
    width:93px;
    text-align: center;
}

.curriculumL {
    width:310px;
    float:left;
    margin:0 40px 30px 0;
}

.curriculumR {
    width:191px;
    float:right;
}

.curriculumL2 {
    width:191px;
    float:left;
}

.curriculumR2 {
    width:310px;
    float:right;
    margin:0 0 30px 0;
}

.month_list {
    width:310px;
    padding:10px 0 0 0;
}

.month {
    font-size:18px;
    font-weight:bold;
    color:#FFB81A;
    float:left;
}

#advance2015 .month {
    color:#93BC46;
}

.thema {
    padding:13px 0 0 0;
}

.month2 {
    font-size:18px;
    font-weight:bold;
    color:#FFB81A;
    float:left;
    margin:0 0 0 -7px;
}

.month3 {
    font-size:18px;
    font-weight:bold;
    color:#FFB81A;
    float:left;
    margin:0 0 0 -16px;
}

#advance2015 .month2 {
    color:#93BC46;
}

#advance2015 .month3 {
    color:#93BC46;
}

.month_text {
    border-bottom:3px dotted #FFB81A;
    padding:0 0 10px 15px;
    width:257px;
    float:right;
}

#advance2015 .month_text {
    border-bottom:3px dotted #93BC46;
}

#month_listF {
    padding:0;
}

#month_textL {
    border:0;
}

.annotation {
    text-align:center;
}

#price {
    width:600px;
    height:183px;
    margin:60px 0 100px 100px;
    position:relative;
}

#price h3 {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    display: inline-block;
    background: #e1858e;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
    padding: 0 30px;
    height: 25px;
    line-height: 26px;
    top:-25px;
}

#price table {
    width: 600px;
    border: solid 2px #e1858e;

}

#price thead th {
    padding:10px 12px;
    text-align: center;
    border: solid 1px #e1858e;	
}

#price thead th img {
    margin: 0 auto;
}

#price tbody th {
    padding:7px 0;
    font-size:18px;
    text-align: center;
    width: 112px;
    border: solid 1px #e1858e;

}

#price tbody td {
    text-align:center;
    font-size:14px;
    position:relative;
    width: 485px;
    border: solid 1px #e1858e;
    padding:10px 0;
}

#price tbody td span {
    font-size:10px;
    padding:8px 0 0 0;
}

#advance_price {
    /*position:absolute;
    top:15px;
    left:0;*/
    padding-top:14px;
}

#tuition {
    position:absolute;
    top:128px;
}

#tuition2 {
    padding-top:14px;
}

#admissionfee {
    margin:25px 10px 0 0;
    text-align:right;
    clear:both;
}


/*イベント*/
.event {
    position: relative;
}

.event h3 {
    width: 800px;
    margin: 0 0 20px;
}

.event p {
    text-indent: 1em;
}

.event_img {
    margin: 20px -5px 0;
}

.event_img img {
    width: 180px;
}

.event_img img.event_img_h {
    width: 95px;
}

.award div h4 {
    font-size: 14px;
    font-weight: bold;
}

.award .height {
    width: 190px;
}

.award .height2 {
    width: 240px;
}

.award div img {
    padding: 10px 0;
}

.awardL {
    float: left;
    width: 350px;
    padding: 15px 20px 0 0;
}

.awardR {
    float: left;
    width: 350px;
    padding: 15px 0 0;
}

.finework {
    clear: both;
    padding-top: 5px;
    /*position: absolute;
    left: 20px;
    bottom: 20px;*/
}

.finework h4 {
    font-weight: bold;
    font-size: 14px;
    margin: 20px 0 5px;
}

.event_list {
    width: 240px;
    display: inline-block;
}

.event_list2 {
    width: 160px;
    display: inline-block;
}

.event_list:hover,.event_list2:hover {
    text-decoration: underline;
}

/*展覧会のご案内*/
.info {
    width:674px;
    margin:20px auto 50px !important;
    position:relative;
    overflow:hidden;
    text-align:left;
}

.info h2 {
    font-size:16px;
    border-left:6px solid #6FAD1E;
    padding:5px 0 5px 8px;
    margin:10px 0 10px;
    font-weight:bold;
    line-height:1.3;
    font-family: メイリオ;
}

.info p {
    margin:0 0 0 23px;
    font-size:13px;
    line-height:1.7;
    float:left;
    width:410px;
}

.info p span {
    padding:20px 0 0 0;
    display:block;
}

.info p a {
    color:#000;
    text-decoration:underline;
}

.info p a:hover {
    text-decoration:none;
}

.info img {
    border:1px solid #ccc;
}

.info .img {
    width:133px;
    float:left;
    margin:10px 0 0 40px;
}

.ingo .img img {
    display: block;
}

.info #enqli {
    color: #333;
    font-size: 12px;
    line-height: 1.7em;
    text-decoration: none;
    padding-top: 0px;
    padding-right: 40px;
    padding-left: 20px;
    text-indent: -1em;
    margin-left: 1em;
    clear: left;
}

#report_img {
    margin-top: 0;
}

#report {
    margin-bottom: 5px;
}


/*講師募集*/
#job {
    width: 601px;
    margin-left: 110px;
}

#job_text {
    position: relative;
}

#job_text h3 {
    font-size: 12px;
    font-weight: bold;
    width: 50px;
    position: absolute;
    display: inline-block;
    background: #33a6ef;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
    padding: 0 30px;
    height: 25px;
    line-height: 25px;
    top:-25px;
}

#job_table {
    font-size: 12px;
    margin: 50px 0;
    line-height: 20px;
    width: 601px;
    height: 365px;
    color: #666;
    border-spacing: 1px;
    border-collapse: collapse;
    border: solid 2px  #33a6ef;
}

#job_table thead th {
    height: 60px;
}

#job_table th,
#job_table td {
    margin: 0;
    vertical-align: center;
    border-collapse: collapse;
}

#job_table th {
    text-align: center;
    width: 80px;
    border: solid 1px  #33a6ef;
}

#job_table td {
    width: 230px;
    padding: 10px;
    border: solid 1px  #33a6ef;
}

#job_table tr {
    border: solid 1px #33a6ef;
}

#job_table td span {
    font-size: 11px;
}

#job_table td#location {
    height: 20px;
}

#job_table #Qualification {
    height: 50px;
}

#contact_text {
    background: url("../img/contact_text.png") no-repeat;
    font-family: メイリオ;
    font-size: 15px;
    font-weight: bold;
    padding: 8px;
    text-align: center;
    height: 25px;
    margin-bottom: 20px
}

#contact_tell {
    width: 600px;
    margin-bottom: 30px;
}

#contact_mail {
    width: 266px;
    float: right;
}

#contact_tell h3,
#contact_mail h3 {
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 17px;
}

#contact_tell p {
    font-weight: bold;
    font-family: メイリオ;
    font-size: 34px;
    text-align: center;
    color: #008ce2;
    line-height: 31px;
}

#contact_tell p span {
    font-size: 13px;
    color: #000;
    font-weight: normal;
    text-align: center;
    display: inline;
}
#main_info   {
    padding-top: 585px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#container_top #main_text {
    position:absolute;
    top:470px;
}
#main #main_info #cap {
    font-weight: bold;

}

#main #main_info p {
    font-size: 15px;
    line-height: 140%;
}
.web-gallery {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

.tenran-class {
    width: 190px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-top: 10px;
    height: 250px;
    display: inline;
    float: left;
    clear: right;
    text-align: center;
    line-height: 1;
}
ul .tenran-class p {
    text-align: left;
}

.web-gallery .tenran-class p {
    display: inline;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    line-height: 170%;
    text-align: left;
}
.g-label {
    float: right;

}
.web-gallery .web-title {
    margin-left: 7%;
    line-height: 155%;
    font-size: medium;
    width: 84%;
    margin-bottom: 20px;
}
#topwork {
    position: absolute;
    top: 580px;
    left: 300px;
}

.o_list {
    color: #59ABF2;
    text-align: center;
    background-color: #D4EBFF;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #A0A0A0;
}

.o_list a {
    color: #0088FF;
    display: block;
}

.k_list {
    color: #FF7F00;
    text-align: center;
    background-color: #FFE9D4;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #A0A0A0;
}

.k_list a {
    color: #FF7F00;
    display: block;
}

.h_list {
    color: #A1CA00;
    text-align: center;
    background-color: #E9FD98;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #A0A0A0;
}

.h_list a {
    color: #6A8600;
    display: block;
}

.n_list {
    color: #E1858E;
    text-align: center;
    background-color: #FFD8DC;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #A0A0A0;
}

.n_list a {
    color: #D45763;
    display: block;
    margin-top: 6px;
}.m_news {
    background-color: #FFC6D6;
    border-radius: 10px;
    float: left;
    width: 85%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top: 15px;
}
#container_top #main #topmail {
    position: absolute;
    left: 288px;
    top: 212px;
}
.top_ttl {
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
    padding: 30px 0;
    text-align: center;
}
#container h1.top_ttl {
    float: none;
    width: auto;
    margin: 0;
}
.mes_tbl td.c-pc {
    display: table-cell;
}
.mes_mainwrap {
    width: 800px;
    padding-left: 308px;
    margin: 0 auto;
    box-sizing: border-box;
    background: url(../img/msgmain2.jpg) no-repeat center bottom 5px / 100% auto;
}
.mes_mainwrap h2 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 15px;
}
.mes_mainwrap p {
    font-size: 12px;
}
.mes_news {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 800px;
    margin: 0 auto;
}
.mes_news dl {
    background-color: #FFC6D6;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 4px;
    width: 700px;
}
.mes_news dl dt {
    font-size: 12px;
}
.mes_news dl dd {
    font-size: 12px;
}
.mes_news dl dd a {
    padding-left: 3em;
}
#container h1.top_ttl.ver2 {
    padding-top: 0;
}
#list2021 {
    width: 750px;
    margin: 0 auto;
}
#list2021 table {
    width: 100%;
}
.greeting_ttl {
    text-align: center;
    margin-right: 72px;
    margin-bottom: 5px;
    font-size: 18px;
}
.greeting_in {
    display: flex;
    width: 780px;
    margin: 0 auto;
}
.greeting_img {
    margin-right: 8px;
}
.greeting_txtbox {
    margin-top: 30px;
}
.greeting-txt {
    font-size: 12px;
    line-height: 18px;
}
.web-gallery p.greeting_name {
    text-align: right;
    font-size: 16px;
    width: 100%;
    line-height: 1.6;
}
.greeting_txtbox .greeting-txt {
    width: 100%;
}
.info p.table_ttl {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    width: auto;
}
@media only screen and (max-width: 896px) {
    .c-pc {
        display: none;
    }
    .c-sp {
        display: block;
    }
    #container,
    #container_top {
        width:100%;
        margin:0 auto;
        color:#333333;
    }
    #container_top #main #topmail {
        position: absolute;
        top: 48%;
        text-align: center;
        left: 50%;
        transform: translate(-50%,0);
        width: 100%;
        font-size:min(3.467vw,20px);
        line-height: 1.8;
        font-weight: bold;
    }
    #header2 ul {
        width: 100%;
    }
    .header_logo img {
        width: 100%;
        height: auto;
    }
    .header_list {
        width:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -5px;
        background: #fff;
    }
    .header_list.fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999;
        padding: 10px 0 15px;
        box-shadow: 0px 0px 5px 0px rgba(209, 209, 209, 0.9);
    }
    .top_ttl {
        font-size: 20px;
        line-height: 1.4;
        font-weight: bold;
        padding: 20px 0 18px;
        text-align: center;
    }
    .header_list li {
        padding:0 0 0 0;
        width: 31%;
        border-left: solid 1px #333;
        box-sizing: border-box;
        margin-top: 5px;
    }
    .header_list li:nth-child(3n) {
        border-right: solid 1px #333;
    }
    .header_list li:last-child {
        border-right: solid 1px #333;
    }
    .header_list li a {
        font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        text-decoration: none;
        text-align: center;
        display: block;
    }
    #main {
        background-image: none;
        width: 100%;
        height: auto;
    }
    footer {
        padding: 0 15px;
        box-sizing: border-box;
        margin: 0;
    }
    #banner {
        padding-top: 25px;
        border-top: solid 1px #000;
        text-align: center;
        margin-bottom: 20px;
    }
    #banner li {
        display: inline-block;
        margin: 0 0 20px 0;
    }
    #banner li:last-child {
        margin-bottom: 0;
    }
    #banner li a {
        display: block;
    }
    #banner_second {
        margin-top: 0 !important;
    }
    .footer_list {
        padding: 20px 0 0 0;
        border-top: solid 1px #000;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    .footer_list li {
        margin-right: 20px;
    }
    .footer_list li:last-child {
        margin-right: 0;
    }
    .footer_list li a {
        color: #333;
        font-size: 12px;
    }
    .footer_img {
        text-align: center;
    }
    .main_top {
        position: relative;
    }
    .main_img img {
        width: 100%;
        height: auto;
    }
    #menu img {
        width: 65.634vw;
        height: auto;
    }
    .imgLnk_list {
        max-width: 375px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin: 20px auto 10px;
    }
    .imgLnk_list li {
        margin-right: 10px;
    }
    .imgLnk_list li:nth-child(4) {
        margin-right: 0;
    }
    .imgLnk_list li:last-child {
        margin-right: 0;
    }
    #news {
        padding: 0 15px;
        box-sizing: border-box;
    }
    .main_text {
        margin-bottom: 20px;
    }
    .main_text img {
        width: 100%;
        height: auto;
    }
    #menu {
        position: inherit;
    }
    
    #menu_message {
        position: inherit;
    }
    
    #menu_course {
        position: inherit;
    }
    
    #menu_class {
        position: inherit;
    }
    
    #menu_concept {
        position:inherit;	
    }
    
    #menu_news {
        position: inherit;
    }
    
    #official {
        position:inherit;
    }
    
    #book {
        position: inherit;
    }
    #topwork {
        position: inherit;
        top: auto;
        left: auto;
        display: block;
        text-align: center;
    }
    #recruiting {
        position: inherit;
    }
    #news ul {
        position: inherit;
        width: auto;
        padding: 0 0 0 15px;
        border-left: 1px solid #93BC46;
        font-size: 15px;
        overflow-y: scroll;
        height: 215px;
    }
    #news ul li {
        margin-bottom: 15px;
    }
    #news ul li:last-child {
        margin-bottom: 0;
    }
    #news ul li a {
        color:#333;
        line-height: 1.6;
    }
    #news h2 {
        position: inherit;
        margin-bottom: 10px;
    }
    /*message*/
    .mes_tbl {
        width: 90%;
        margin-top: 20px;
    }
    .mes_tbl td.c-pc {
        display: none;
    }
    .mes_tbl td.c-sp {
        display: table-cell;
        vertical-align: middle;
    }
    .mes_tbl td.c-sp img {
        width: 100%;
        height: auto;
    }
    .mes_tbl td.ttl {
        width: 63.63%;
        padding-right: 20px;
    }
    .mes_tbl td.logo {
        width: 18.965%;
    } 
    .mes_mainwrap {
        width: 100%;
        padding: 0 15px 15px;
        margin: 0 auto;
        box-sizing: border-box;
        background: none;
    }
    .mes_img {
        text-align: center;
        margin-top: 20px;
    }
    .mes_mainwrap h2 {
        font-size: 15px;
        font-weight: normal;
        margin-bottom: 15px;
    }
    .mes_mainwrap p {
        font-size: 12px;
    }
    .mes_news {
        width: 100%;
        margin: 0 auto 20px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .mes_news dl {
        background-color: #FFC6D6;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 4px;
        width: 80%;
    }
    .mes_news dl dd a {
        padding-left: 0;
    }
    /*kids*/
    .kids, #advance {
        width: 100%;
    }
    #container h2.kidscourse_ttl {
        clear: left;
        width: 100%;
        position: relative;
        padding-bottom: 240px;
    }
    #container h2.kidscourse_ttl::before {
        position: absolute;
        content: "";
        background: url(../img/sp/kidscourse02.png) no-repeat center center / 100% auto;
        width: 202px;
        height: 200px;
        left: 50%;
        margin-left: -101px;
        bottom: 21px;
    }
    #container h2 img {
        width: 100%;
        height: auto;
    }
    .course_text {
        margin-top: 0;
        margin-left: 0;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .kids.ver2 {
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 50px;
    }
    #kids2015 {
        width: 100%;
        box-sizing: border-box;
        background: none;
        height: auto;
        border: solid 2px #F4B226;
        padding: 20px 15px;
    } 
    .curriculumR {
        width: auto;
        float: none;
        text-align: center;
        margin-bottom: 15px;
    }
    .curriculumL {
        width: auto;
        margin: 0;
        float: none;
    }
    .curriculumR2 {
        width: auto;
        float: none;
        margin-bottom: 20px;
    }
    .curriculumL2 {
        width: auto;
        float: none;
        text-align: center;
        padding-top: 10px;
        margin: 0 0 15px;
    }
    .month {
        float: none;
        width: 50px;
    }
    .month3 {
        width: 66px;
        margin-left: 0;
        float: none;
    }
    .month_list {
        width: auto;
        padding-top: 20px;
    }
    .month_text  {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-bottom: 15px;
        margin-top: 5px;
    }
    #kids2015 h3.thema {
        background: #F4B226;
        padding: 5px 20px;
        box-sizing: border-box;
        border-radius: 5px 5px 0 0;
        width: auto;
        top: -19px;
        left: -2px;
        display: inline-block;
        margin-top: -10px;
    }
    .annotation {
        text-align: left;
    }
    #artschool {
        height: auto;
        padding: 15px;
        background: url(../img/sp/artschool_bg.png) repeat 0 0 / 17px auto;
    }
    .artschool_sub {
        background: #fff;
        border: solid 2px #F4B226;
        border-radius: 5px;
        padding: 15px;
        box-sizing: border-box;
        margin-bottom: 20px;
        float: none;
        width: auto;

    }
    #artschool #first {
        background: #fff;
        width: 100%;
        height: auto;
    }
    #artschool #second {
        background: #fff;
        width: 100%;
        height: auto;
        margin: 0 0 20px 0;
    }
    #artschool #third {
        background: #fff;
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }
    #artschool h3 {
        padding-left: 27px;
        position: relative;
        color: #59a8f2;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        font-weight: bold;
        line-height: 1.4;
        font-size: 15px;
    }
    #artschool #first h3::before {
        position: absolute;
        content: "";
        background: url(../img/sp/artschool1.png) no-repeat 0 0 / 100% auto;
        width: 12px;
        height: 28px;
        left: 0;
        top: 50%;
        margin-top: -14px;
    }
    #artschool #second h3::before {
        position: absolute;
        content: "";
        background: url(../img/sp/artschool2.png) no-repeat 0 0 / 100% auto;
        width: 20px;
        height: 28px;
        left: 0;
        top: 50%;
        margin-top: -14px;
    }
    #artschool #third h3::before {
        position: absolute;
        content: "";
        background: url(../img/sp/artschool3.png) no-repeat 0 0 / 100% auto;
        width: 19px;
        height: 29px;
        left: 0;
        top: 50%;
        margin-top: -14px;
    }
    #artschool h2 {
        width: 100%;
    }
    #artschool .photo {
        width: auto;
        height: auto;
        text-align: center;
    }
    #artschool #first .photo {
        margin-top: 13px;
    }
    #artschool #third .photo {
        margin-top: 13px;
    }
    #artschool #second .photo {
        margin-top: 0;
    }
    #curriculum {
        padding: 20px 15px 20px;
    }
    #curriculum h2, #voice h2 {
        width: 100%;
    }
    .curriculum_text, .curriculum_text2 {
        width: 100%;
        margin: 0 auto;
    }
    #curriculum #curriculum_first {
        padding: 0 0 20px;
    }
    #curriculum_inner {
        display: block;
        padding: 20px 15px;
    }
    .curriculum {
        width: 100%;
        padding: 0 0 20px;
        float: none;
        box-sizing: border-box;
        border-right: 0;
        border-bottom: 3px dotted #FF7F0B;
    }
    .curriculum.ver2 {
        float: none;
        padding: 0 0 20px;
    }
    #curriculum_inner .last {
        border: 0 !important;
        padding: 0 ;
    }
    .curriculum #painting {
        margin-bottom: 0px;
    }
    .curriculum #design {
        margin-bottom: 10px;
    }
    .curriculum #workss {
        margin-bottom: 10px;
    }
    .curriculum #team {
        margin-bottom: 10px;
    }
    #voice {
        padding: 20px 15px;
    }
    #voice_inner div#voice_l {
        margin-left: 0;
    }
    #voice_inner div {
        width: 100%;
        float: none;
    }
    #artschool section h3 {
        margin:0px;
    }
    #artschool section p {
        padding-bottom: 0;
    }
    /*教室のご案内*/
    #container #main_text {
        margin: 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #container #main_text img {
        width: 100%;
        height: auto;
    }
    #price {
        width: 100%;
        height: auto;
        margin: 45px 0 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #price table {
        width: 100%;
        box-sizing: border-box;
    }
    #price tbody tr {
        width: 100%;
    }
    #price tbody th {
        width: 83px;
        box-sizing: border-box;
        font-size: 14px;
    }
    .pt_txt span {
        display: block;
        text-align: center;
        color: #F0B420;
        font-size: 14px;
        font-weight: bold;
    }
    .pt_txt {
        text-align: left;
    }
    #price tbody td {
        width: calc(100% - 84px)
    }
    #admissionfee {
        text-align: left;
    }
    #tab-box #tab-01, #tab-box #tab-02, #tab-box #tab-03, #tab-box #tab-04 {
        width: 100%;
        padding: 20px 15px;
        box-sizing: border-box;
        margin-bottom: 25px;
    }
    #tab-01 #list, #tab-02 #list, #tab-03 #list, #tab-04 #list {
        height: auto;
        background: none;
    }


	.class .dataL {
        width: 100%;
    }
    #tab-01 hr, #tab-02 hr, #tab-03 hr, #tab-04 hr {
        width: 100%;
        margin: 10px 0 0 0;
    }

    #class_tab #tab-box #nav {
        display: flex;
        flex-wrap: wrap;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #class_tab #tab-box #nav li {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 10px;
    }
    #class_tab #tab-box #nav .tab2 {
        margin-right: 4%;
    }
    #class_tab #tab-box #nav li:nth-child(2n) {
        margin-right: 0;
    }
    #class_tab #tab-box #nav li img {
        width: 100%;
        height: auto;
    }
    #tab-01 #list, #tab-02 #list, #tab-03 #list, #tab-04 #list {
        padding: 0;
    }
    #tab-01 #list2, #tab-02 #list2, #tab-03 #list3 {
        margin-left: 0;
    }
    #tab-01 .list, #tab-02 .list, #tab-03 .list, #tab-04 .list {
        padding-left: 15px;
        float: none;
    }
    .class h3 {
        float: none;
        margin: 0 0 10px 0;
    }
    .class .btn2 {
        float: none;
    }
    .class .data {
        overflow: auto;
    }
    .class .item {
        float: none;
        margin-bottom: 5px;
    }
    .class .items {
        float: none;
    }
    .class .data p {
        float: none;
    }
    .class .data p.tel {
        line-height: 1;
    }
    .class .dataR {
        width: 100%;
        float: none;
    }
    .class .dataR iframe {
        width: 100%;
        padding-top: 15px;
        display: block;
    }
    /*イベント*/
    #container #main_text1 {
        margin: 0;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #tab-box {
        margin-top: 20px;
    }
    #tab-box #nav {
        width: 100%;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #tab-box #nav li{
        width: 48%;
        margin-right: 4%;
    }
    #tab-box #nav li img {
        width: 100%;
        height: auto;
    }
    #tab-box #nav li:nth-child(2n) {
        margin-right: 0;
    }
    #tab-box #nav li:last-child {
        width: 73%;
        margin-right: 0;
    }
    .event h3 {
        width: 100%;
    }
    .event_img {
        margin: 20px auto 0;
        text-align: center;
    }
    .img_w {
        max-width: 305px;
        width: 100%;
        height: auto;
    }
    .awardL {
        width: 100%;
        padding-right: 0;
    }
    .awardR {
        width: 100%;
    }
    #container h1.top_ttl.ver2 {
        padding-top: 10px;
    }
    /*gallery*/
    body.gallery #container h1.top_ttl {
        padding-top: 6px;
        font-size: 18px;
    }
    .web-gallery {
        width: 100%;
        margin-top: 10px;
    }
    .gallery_img img {
        width: 100%;
        height: auto;
    }
    .gallery_list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .gallery_list li.tenran-class {
        float: none;
        width: 100%;
        height: auto;
    }
    .web-gallery .web-title {
        width: 100%;
        margin: 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #list2021 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    td a {
        padding: 0 5px !important;
        font-size: 13px;
    }
    .greeting_table {
        width: 100%;
        margin: 0 auto;
    }
    .greeting_table .w308 {
        width: 100%;
    }
    .greeting_table .w472 {
        width: 100%;
    }
    .greeting_wrap {
        margin-top: 20px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .greeting_in {
        display: block;
        width: 100%;
    }
    .greeting_ttl {
        text-align: center;
        margin-right: 0;
    }
    .greeting_img {
        margin: 0 auto 10px;
        width: 150px;
    }
    .greeting_img img {
        width: 100%;
        height: auto;
    }
    .greeting_txtbox {
        margin-top: 0;
    }
    .greeting-txt {
        font-size: 12px;
        line-height: 18px;
    }
    .web-gallery p.greeting_name {
        text-align: right;
        font-size: 16px;
        width: 100%;
        line-height: 1.6;
    }
    .greeting_txtbox .greeting-txt {
        width: 100%;
    }
    .f_top_link {
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
        margin-top: 20px;
    }
    .f_top_link a {
        text-decoration: none;
    }
    .slick_wrap {
        padding: 0 15px;
        box-sizing: border-box;
    }
    #job {
        width: 100%;
        margin-left: 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #job img {
        width: 100%;
        height: auto;
    }
    #job_table {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        table-layout: fixed;
        margin-bottom: 40px;
    }
    #job_table th {
        width: 110px;
    }
    #job_table th.ver2 {
        width: 100%;
    }
    #job_table th.ver2 img {
        width: auto;
    }
    #contact_text {
        height: auto;
        border: solid 1px #33a6ef;
        background: url(../img/sp/contact_text_bg.png) repeat 0 0 / 10px auto;
        position: relative;
    }
    #contact_text::before {
        position: absolute;
        content: "";
        background: url(../img/sp/contact_text_arw.png) no-repeat 0 0 / 100% auto;
        width: 21px;
        height: 13px;
        left: 50%;
        transform: translate(-50%,0);
        bottom: -12px;
    }
    /* #contact_text::after {
        position: absolute;
        content: "";
        background: #33a6ef;
        width: 100%;
        height: 1px;
        bottom: 0;
        left: 0;
    } */
    #contact_tell {
        width: 100%;
    }
    #contact_tell p span {
        display: block;
    }
    .info p.table_ttl {
        margin-bottom: 10px;
    }

}

@media only screen and (max-width: 374px) {
    #container_top #main #topmail {
        font-size: 12px;
    }
    .top_ttl {
        font-size: 18px;
    }
    body.gallery #container h1.top_ttl {
        font-size: 16px;
    }
}