html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
  margin: 0;
  padding: 0;
}
li{
list-style-type: none;
}
div, p, span, input, textarea {
  box-sizing: border-box;
}


body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #fff;
  color: #2a2828;
  font-size: 100%;
}
img {
  border: 0;
  width: 100%;
  height: auto;
}
.clear {
  clear: both;
}
.clearL {
  clear: left;
}
a {
  color: #2a2828;
  text-decoration: none;
  transition: all 0.2s;
}
a:hover {
  color: #0066ff;
  text-decoration: underline;
}
a.linkblue{
color: blue;
text-decoration: underline;
}
a.linkblue:hover {
color: #009fe8;
text-decoration: underline;
}


.black{ color: #282828; }
.blue{ color: #009fe8;}
.green{ color: #6fb92c; }

.c_design{color:  #5b94cf;}
.c_design2{color:  #a588bd;}
.c_japanese{color: #00b096;}
.c_sculpture{color: #ead847;}
.c_composite{color: #e197a6;}
.c_subjects{color: #4ba4c5;}
.c_basic{color: #8fbf14;}
.c_correspondence{color: #eb7c51;}
.c_online{color: #e197a6;}
.c_about{color:  #7f7f8d;}
.c_intro{}
.c_appli{color: #ed945c;}
.c_fee{color: #79c0c4;}
.c_trial{color: #957ac1;}


.shingo{
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-weight: 300;
font-style: normal;
}
.gen_light{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;
}
.gen_regular{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 400;
font-style: normal;
}
.gen_bold{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;
}

.sml80{font-size: 80%;}
.sml70{font-size: 70%;}
.sml60{font-size: 60%;}


/*/////////FOOTER///////////*/

.grecaptcha-badge { visibility: hidden; }

#totop{
border: solid 1px #e0e1dd;
position: fixed;
bottom: 15px;
right: 15px;
z-index: 50;
cursor: pointer;
}

#footer{
background: #fdfff7;
font-size: 80%;
padding-bottom: 40px;
border-top: #009fe8 solid 6px;
}
#footer::before{
content: "";
background: #6fb92c;
height: 6px;
width: 100%;
display: block;
}
#footer_menu_wrap{
width: 95%;
max-width: 1020px;
margin: auto;
padding: 20px 0;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#footer_menu_wrap dl{
width: 23%;
margin: 0 1% 20px;
}
#footer dt{
padding-bottom:2px;
margin-bottom:5px;
border-bottom: 1px solid #666666;
font-size:115%;
}
#footer_wrap{
width: 95%;
max-width: 1000px;
margin: auto;
position: relative;
}
#footer #address h5{
padding-bottom:2px;
margin-bottom:5px;
border-bottom: 1px solid #666666;
font-size:130%;
font-weight:normal;
}
#copyright{
position: absolute;
bottom: 0;
right: 0;
font-family: Arial, Helvetica, "sans-serif";
}
.recaptcha{
width: 95%;
margin: auto;
font-size: 90%;
font-family: Arial, Helvetica, "sans-serif";
text-align: center;
padding-top: 1em;
}

@media screen and (max-width:1000px){

#copyright{
position: relative;
bottom: auto;
right: auto;
padding-top: 1em;
}
.recaptcha{
text-align: left;
}
}
@media screen and (max-width:800px){
#footer_menu_wrap dl{
width: 30%;
margin: 0 1.5% 20px;
}
}
@media screen and (max-width:600px){
#footer_menu_wrap dl{
width: 47%;
margin: 0 1.5% 20px;
}
}




/*/////////HAMBURGER///////////*/

#hamburger {
display: none;
position: absolute;
width: 45px;
height: 45px;
border: none;
right: 0px;
    top: 12px;
cursor: pointer;
border: solid 1px #e0e1dd;
z-index: 2;
}
.burger-btn{
display: block;
width: 31px;
height: 21px;
position: absolute;
border: none;
left: 7px;
top: 11px;
cursor: pointer;
}
.burger-btn .bar{
width: 30px;
height: 2px;
display: block;
position: absolute;
left: 0;
background-color: #282828;
}
.burger-btn .bar_top{
top:0;
}
.burger-btn .bar_mid{
top: 46%;
}
.burger-btn .bar_bottom{
bottom: 0;
}

.burger-close{
display: block;
width: 45px;
height: 45px;
position: fixed;
border: none;
right: 0;
top: 0;
cursor: pointer;
z-index: 50;
}
.burger-close .bar{
width: 40px;
height: 2px;  
display: block;
position: absolute;
left: 40%;
background-color: #fff;
}    
.burger-close .bar_top{
top: 15px;
  transform: translate(-50%,10px) rotate(45deg);
}
.burger-close .bar_bottom{
bottom: 10px;
transform: translate(-50%,-8px) rotate(-45deg);
}




/*/////////MENU///////////*/

#menu_wrap{
z-index: 1000;
display: none;
width: 100%;
min-height: 100vh;
background: rgba(255,255,255,0.97);
text-align: center;
position: absolute;
padding: 0 0 50px 0;
}
#menu_wrap .menu_logo{
width: 240px;
margin: auto;
}
#menu_wrap p{
font-family: "futura-pt", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 3em;
color: #00a0e9;
}
#menu_wrap p a{
text-decoration: none;
color: #00a0e9;
}
#menu_wrap p a:hover{
text-decoration: none;
color: #00a0e9;
opacity: 0.7;
}
.menu_buttons{
text-align: center;
margin-top: 1.5em;
}
.spmenu_shortcourse{
width: 70%;
margin: 15px auto;
text-align: center;
line-height: 50px;
}
.spmenu_shortcourse a{
display: block;
color: #fff;
background: #0090ff;
text-decoration: none;
height: 50px;
}
.spmenu_shortcourse a:hover{
color: #fff;
background: #00b2ff;
text-decoration: none;
height: 50px;
}



/*/////////MENU NAVI///////////*/

.ac-parent {
font-size: 95%;
height: 50px;
line-height: 50px;
cursor: pointer;
transition: .1s;
position: relative;
background: #e4e8ea;
text-align: center;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.ac-child dd{
font-size: 95%;
height: 40px;
line-height: 40px;
font-weight: 300;
background: #f6f7f8;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.ac-ind {
font-size: 95%;
height: 50px;
line-height: 50px;
background: #e4e8ea;
text-align: center;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.ac-child a{
display: block;
}
.ac-ind a{
display: block;
}
.ac-child a:hover{
text-decoration: none;
}
.ac-ind a:hover{
text-decoration: none;
}

.ac-parent span::before,
.ac-parent span::after {
content: '';
display: block;
width: 15px;
height: 1px;
background: #8b8d8e;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.ac-parent span::after {
background: #7e4057;
transform: translateY(-50%) rotate(90deg);
transition: 0.5s;
}
.ac-parent.open span::after {
transform: rotate(0);
transition: 0.5s;
}




/*//////////// HEADER ///////////////*/


#page_header{
width: 95%;
max-width: 1000px;
height: 100px;
margin: auto;
margin-top: 5px;
position: relative;
}
#page_header h1{
position: absolute;
width: 294px;
left: 0;
top: 10px;
}
.head_info{
position: absolute;
width: 268px;
text-align: center;
line-height: 0.8;
font-size: 14px;
color: #278fdd;
left: 320px;
top: 20px;
}

#submenu_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 390px;
position: absolute;
top: 13px;
right: 0;
font-size: 14px;
line-height: 2em;
font-weight: bold;
}
.head_submenu{
width: 24.0%;
height: 2em;
margin-bottom: 1.5%;
text-align: center;
box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.2);
}
.head_submenu.feature a{
background: #009fe8;
color: #fff;
text-decoration: none;
display: block;
}
.head_submenu.feature a:hover{
background: #00d2ff;
text-decoration: none;
}
.head_submenu.contact a{
background: #6fb92c;
color: #fff;
text-decoration: none;
display: block;
}
.head_submenu.contact a:hover{
background: #6fe207;
text-decoration: none;
}
.cho90{
transform: scaleX(0.90);
}
.nakaguro{
margin: 0 -0.2em;
}

/*////////////CLASS MENU ///////////*/

#class_menu_wrap{
width: 95%;
max-width: 1000px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.class_menu{
width: 19.6%;
margin-bottom: 0.5%;
text-align: center;
height: 37px;
line-height: 35px;
}
.class_menu a{
display: block;
transition: all 0.5s;
background: #fff; 
}
.class_menu a:hover{text-decoration: none;}


.class_menu.design{border: solid 1px #5b94cf;}
.class_menu.japanese{ border: solid 1px #00b096;}
.class_menu.sculpture{border: solid 1px #cfbe32;}
.class_menu.composite{border: solid 1px #d48595;}
.class_menu.subjects{border: solid 1px #4ba4c5;}
.class_menu.basic{border: solid 1px #83c209;}
.class_menu.correspondence{border: solid 1px #eb7c51;}
.class_menu.online{border: solid 1px #e197a6;}
.class_menu.schoolinfo{border: solid 1px #7f7f8d;}
.class_menu.appli{border: solid 1px #ed945c;}
.class_menu.fee{border: solid 1px #79c0c4;}
.class_menu.trial{border: solid 1px #957ac1;}

.class_menu.design a{color: #5b94cf;}
.class_menu.japanese a{ color: #00b096;}
.class_menu.sculpture a{color: #cfbe32;}
.class_menu.composite a{color: #d48595;}
.class_menu.subjects a{color: #4ba4c5;}
.class_menu.basic a{color: #83c209;}
.class_menu.correspondence a{color: #eb7c51;}
.class_menu.online a{color: #e197a6;}
.class_menu.schoolinfo a{color: #7f7f8d;}
.class_menu.appli a{color: #ed945c;}
.class_menu.fee a{color: #79c0c4;}
.class_menu.trial a{color: #957ac1;}

.class_menu.design a:hover{background: #5b94cf; color: #fff;}
.class_menu.japanese a:hover{background: #00b096; color: #fff;}
.class_menu.sculpture a:hover{background: #cfbe32; color: #fff;}
.class_menu.composite a:hover{background: #d48595; color: #fff;}
.class_menu.subjects a:hover{background: #4ba4c5; color: #fff;}
.class_menu.basic a:hover{background: #83c209; color: #fff;}
.class_menu.correspondence a:hover{background: #eb7c51; color: #fff;}
.class_menu.online a:hover{background: #e197a6; color: #fff;}
.class_menu.schoolinfo a:hover{background: #7f7f8d; color: #fff;}
.class_menu.appli a:hover{background: #ed945c; color: #fff;}
.class_menu.fee a:hover{background: #79c0c4; color: #fff;}
.class_menu.trial a:hover{background: #957ac1; color: #fff;}

.class_menu.design.current a{background: #5b94cf; color: #fff;}
.class_menu.japanese.current a{background: #00b096; color: #fff;}
.class_menu.sculpture.current a{background: #cfbe32; color: #fff;}
.class_menu.composite.current a{background: #d48595; color: #fff;}
.class_menu.subjects.current a{background: #4ba4c5; color: #fff;}
.class_menu.basic.current a{background: #83c209; color: #fff;}
.class_menu.correspondence.current a{background: #eb7c51; color: #fff;}
.class_menu.online.current a{background: #e197a6; color: #fff;}
.class_menu.schoolinfo.current a{background: #7f7f8d; color: #fff;}
.class_menu.appli.current a{background: #ed945c; color: #fff;}
.class_menu.fee.current a{background: #79c0c4; color: #fff;}
.class_menu.trial.current a{background: #957ac1; color: #fff;}





/*/////////BASIC STYLE///////////*/

.contents p{
font-size: 87.5%;
line-height: 1.5;
}
.contents p.note{
font-size: 75%;
}
br.sponly{
display: none;
}
.page_menu{
display: none;
}
.page_menu_accordion{
display: none;
}

.contents{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 10px;
}
.course_main{
width: 75%;
}
.course_side{
width: 22%;
margin-bottom: 20px;
}
.course_head{
position: relative;
margin-bottom: 0.8em;
}
.contents h2.course_catch{
font-size:180%;
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-weight: 300;
position: absolute;
right: 0;
bottom: 5px;
}

/*////////////SIDE MENU ///////////*/

.course_side{
}
.side-parent{
font-size: 85%;
background: #bec8ce;
text-align: center;
border-left: #a7afb3 solid 1px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid #a7afb3;
padding: 0.25em 0 0.1em;
}
.side-child{
font-size: 82.5%;
background: #eeeff1;
}
.side-child dd{
border-top: 1px solid #f4f4f4;
border-left: #a7afb3 solid 1px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid #a7afb3;
padding: 0.25em 0 0.25em 10px;
}
.side-child a{
display: block;
}
.side-child a::before{
content: '';
display: inline-block;
width:0.6em;
height: 0.7em;
background-image: url(https://aobi-art.com/wp-content/themes/aobi/img/common/tri_gray.png);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin-right: 0.25em;
}
.side_shortcourse{
margin-bottom: 10px;
text-align: center;
color: #fff;
width: 100%;
line-height: 70px;
letter-spacing: 0.1em;
}
.side_shortcourse a{
display: block;
color: #fff;
background: #0090ff;
text-decoration: none;
height: 70px;
}
.side_shortcourse a:hover{
color: #fff;
background: #00b2ff;
text-decoration: none;
height: 70px;
}



@media screen and (max-width:1000px){
.side-child{
font-size: 80%;
background: #eeeff1;
}
}

@media screen and (max-width:840px){

.side-parent{
border-top: 1px solid #f4f4f4;
background: #cdd1d4;
}
.side-child{
text-align: center;
display: none;
}
.side-child a::before{
content: none;
}
}


/*//////////// COMMON ///////////////*/

#aobi_wrap{
width: 100%;
}

.header_stripe_blue{
width: 100%;
height: 24px;
background: #009fe8;
}
.header_stripe_green{
width: 100%;
height: 24px;
background:#6fb92c;
position: relative;
}
.header_catch{
width: 95%;
max-width: 1000px;
margin: auto;
position: relative;
}
.header_catch p{
padding-bottom: 0;
line-height: 24px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0.02em;
text-align: right;
color: #fff;
}
.header_catch a{
text-decoration: none;
color: #FFF300;
}
.header_catch a:hover{
text-decoration: none;
color: #fff;
}


.header_stripe_blue2024{
width: 100%;
height: 34px;
background: #009fe8;
}
.header_stripe_green2024{
width: 100%;
height: 34px;
background:#6fb92c;
}
.head_text{
width: 95%;
max-width: 1000px;
margin: auto;
position: relative;
}
.head_ad{
width: 330px;
position: absolute;
right: 0;
line-height: 34px;
color: #fff;
}
.head_ad h4{
font-size: 140%;
font-weight: normal;
letter-spacing: 0.2em;
}
.head_ad a{
font-size:85%;
display: block;
background: #fff;
color: #000;
text-align: center;
width: 9em;
text-decoration: none;
position: absolute;
right: 0;
top:5px;
height: 24px;
line-height: 24px;
}
.head_ad a:hover{
opacity: 0.7;
}
.header_stripe_green2024 .head_ad{
font-size: 90%;
text-align: justify;
text-align-last: justify;
}


#contents_wrap{
width: 95%;
max-width: 1000px;
margin: auto;
}
#breadguide{
width: 100%;
font-size: 11px;
padding: 5px 0;
}
#breadguide a{
color: blue;
text-decoration: underline;
}
#breadguide a:hover{
color: #009fe8;
text-decoration: underline;
}
.contents p{
padding-bottom: 1.5em;
}
.contents h1{
text-align: center;
font-size: 220%;
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-weight: 300;
}

.article a{
color: blue;
text-decoration: underline;
}
.article a:hover{
color: #009fe8;
text-decoration: underline;
}


/*/////////BUTTON///////////*/

.page_bottom{
padding: 40px 0;
}
.paddL1em{
padding-left: 1em;
}


.btn_single{
text-align: center;
width: 100%;
height: 45px;
line-height: 45px;
font-size:120%;
letter-spacing: 0.05em;
margin-bottom: 15px;

font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;
}
.btn_single a{
color: #fff;
display: block;
background: #8fbf14;
transition: all 0.3s;
text-decoration: none;
}
.btn_single a:hover{
color: #fff;
background: #a9e906;
display: block;
text-decoration: none;
}


/*/////////INFO///////////*/
.page_plain{
width: 100%;
}
#info-page h1 {
font-size: 165%;
line-height: 1.25;
padding-bottom: 0.2em;
font-weight: 400;
color: #7f7f8d;
border-bottom: 2px solid #7f7f8d;
margin-bottom: 0.8em;
}
.contents .info_head h1{
text-align: left;
}
.appli_banner{
}
.contents .appli_banner p{
padding-bottom: 0;
margin-bottom: 1em;
position: relative;
}
.appli_banner img{
}
.appli_contact{
border-bottom: solid 1px #999999;
border-top: solid 1px #999999;
padding: 1.5em 0;
margin: 1.5em 0 80px;
}
.appli_phone{
float:left;
}
.appli_mail{
float:right;
}

#info-page h4.tel{
font-weight:normal;
font-size:120%;
background:none;
padding-left:0px;
padding-bottom:0px;
}
#info-page h5.tel{
font-size:200%;
padding-bottom:5px;
}

#info-page td{
text-align:right;
padding-left:10px;
}
#info-page td.uketsuke{
border:1px solid #a9af9d;
border:1px solid #636259;
text-align:center;
vertical-align:middle;
width:100px;
padding-left:0px;
}
p.appli_dl img{
width: 35px;
height: auto;
display: inline-block;
vertical-align: middle;
}
p.appli_dl a {
    color: #0066ff;
    text-decoration: underline;
}
p.appli_dl a:hover {
color: #6fb92c;
text-decoration: underline;
}


.news_list_wrap{
width: 100%;
margin: 1.5em 0;
font-size: 100%;
}
.news_list_wrap li{
line-height: 1.5;
padding: 0.7em 0;
border-bottom: solid 1px rgba(0,0,0,0.1);
}
.news_list_wrap li p{
display: inline-block;
vertical-align: middle;
padding-bottom: 0;
}
.news_list_wrap li .news_date {
color: #3da2f8;
padding-right: 1em;
}
.news_list_wrap li .news_title a {
text-decoration: underline;
}
.news_list_wrap li .news_title a:hover {
color: #3da2f8;
}
.pagenavi{
padding: 2em 0;
text-align: center;
font-size: 90%;
margin: auto;
}




@media screen and (max-width:900px){

.appli_phone{
float:none;
}
.appli_mail{
float:none;
padding: 1em 0;
}

}


@media screen and (max-width:1050px){
.head_info {
width: 27.4%;
}
#submenu_wrap {
width: 38%;
}
}
@media screen and (max-width:1000px){
.head_info {
width: 268px;
left: auto;
right: 70px;
top: 12px;
}
#submenu_wrap {
display: none;
}
#hamburger {
display: block;
}
}


@media screen and (max-width:840px){
.contents{
display: block;
}
.course_main{
width: 100%;
}
.course_side{
width: 100%;
display: none;
}
.contents h2.course_catch{
font-size:180%;
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-weight: 300;
position: absolute;
right: 0;
bottom: 8px;
}
}
@media screen and (max-width:760px){
#class_menu_wrap{
display: none;
}
}
@media screen and (max-width:710px){
.head_info {
display: none;
}
.header_catch{
display: none;
}
/*
.header_stripe_blue {
height: 12px;
}
.header_stripe_green {
height: 12px;
}
.burger-close {
top: 34px;
}
*/
}
@media screen and (max-width:500px){

#page_header h1{
width: 75%;
width:62%;
max-width: 294px;
}

.header_stripe_blue2024{
width: 100%;
height: 36px;
background: #009fe8;
}
.header_stripe_green2024{
width: 100%;
height: 18px;
background:#6fb92c;
}
.head_text{
width: 95%;
max-width: 1000px;
margin: auto;
position: relative;
}
.head_ad{
width: 90%;
position: relative;
margin: auto;
right: 0;
line-height: 36px;
color: #fff;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.head_ad h4{
font-size: 150%;
font-weight: normal;
letter-spacing: 0.15em;
}
.head_ad a{
font-size:85%;
display: block;
background: #fff;
color: #000;
text-align: center;
width:8.5em;
text-decoration: none;
position: relative;
height: 26px;
line-height: 26px;
margin-left: 10px;
}
.head_ad a:hover{
opacity: 0.7;
}
.header_stripe_green2024 .head_ad{
display: none;
}
}
@media screen and (max-width:420px){
.head_text{
width: 95%;
}
.head_ad{
width: 100%;
position: relative;
margin: auto;
right: 0;
line-height: 36px;
color: #fff;
display: block;
}
.head_ad h4{
position: absolute;
left: 0;
width: 62%;
max-width: 294px;
text-align: right;
}
.head_ad a{
top: 7px;
width: 120px;
position: absolute;
right: 0;
font-size: 80%;
display: block;
background: #fff;
color: #000;
height: 23px;
line-height: 23px;
margin-left: 0;
}
}