@charset "utf-8";

.sub_menu { display: flex; justify-content: center; margin: 60px 0 0 0; font-size: 1.1em; }
.sub_menu a { display: block; width: 300px; height: 300px; padding: 20px 0 0 0; border-radius: 50%; background: #b6d9cd; background: linear-gradient(rgba(190, 230, 215, 1) 0%,rgba(190, 230, 215, 0) 20%);}
.sub_menu a:nth-of-type(2) { margin: 0 -100px;}
.sub_menu a.sel { background: #fff; background: linear-gradient(rgba(255, 255, 255,1) 0%,rgba(255, 255, 255,0) 50%); color: var(--color_orange); }



.about { width: 96%; max-width: 1000px; margin: -240px auto 0 auto;   background: #fff; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); border-radius: 10px; padding: 40px; box-sizing: border-box; text-align: left; font-size: 1.1em;}

.about h2 { margin: 20px 0 10px 0; font-size: 22px; padding: 0; color: var(--color_dark_green);}
.h2 { font-size: 22px; font-weight: bold; color: var(--color_dark_green); }

.diploms { display: none; }
.diploms div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.diploms a, .diploms img { display: block; }
.diploms a { margin: 20px;}

.adout_ico { float: left; margin: 15px 30px 30px 0; display: flex; justify-content: center; align-items: center; width: 170px; height: 170px; /*border-radius: 50%; background: #b6d9cd; background: linear-gradient(90deg, rgba(190, 230, 215, 1) 0%,rgba(190, 230, 215, 0) 100%);*/ }
.adout_ico img { display: block; width: 100%;}
#method .adout_ico img {width: 70%;}
/*----------@media------*/

@media all and (max-width: 800px) {
    .sub_menu { margin: 40px 0 0 0; }
    .adout_ico {width: 140px; height: 140px; margin: 10px 15px 15px 0; }
}


@media all and (max-width: 500px) {
    .sub_menu { font-size: 1em; }
    .sub_menu a { width: 250px; height: 250px; padding: 15px 0 0 0; }
    .about { margin: -200px auto 0 auto; line-height:normal; }
    .about { padding: 15px; font-size: 1em; }
  
    
}

@media all and (max-width: 350px) {
    .sub_menu { justify-content:space-between; }
    .sub_menu a { width: auto; height: auto; padding: 6px 13px; border-radius:12px 12px 0 0; background: linear-gradient(rgba(190, 230, 215, 1) 0%,rgba(190, 230, 215, 0) 100%);}
    .about { margin: 0 auto; padding: 10px; }
}

@media all and (max-width: 315px) {
    .sub_menu  { display: block;}

}