@charset "UTF-8";
@media screen and (min-width: 768px),print {

/* example -------------------------------------*/
#example .inner-Box{width: 100%; margin: 0 auto 100px; background: url(../images/page-common/categori-bg-icon.png) no-repeat top center,url(../images/page-common/categori-bg-icon.png) no-repeat bottom center #F1F1E8; padding: 100px 0 200px;}
#example .inner-Box1{width: 1100px; margin: 0 auto; position: relative;}

#example .inner-Box1 .example-ttl1{font-size: 18px; font-weight: bold; text-align: center;}
#example .inner-Box1 .example-ttl2{font-size: 40px; font-weight: bold; text-align: center; margin-bottom: 50px;}
#example .inner-Box1 .example-ttl3{font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 20px; margin-top: -50px;}

#example .inner-Box1 .example-human1_reform_menu_original{position: absolute; left: 193px; top: 16px;}
#example .inner-Box1 .example-human2_reform_menu_original{position: absolute; right: 190px; top: 20px;}

#example .inner-Box1 .example-human1{position: absolute; left: 165px; top: -20px;}
#example .inner-Box1 .example-human2{position: absolute; right: 150px; top: -10px;}

#example .inner-Box1 .example-human3{position: absolute; left: 150px; top: -20px;}
#example .inner-Box1 .example-human4{position: absolute; right: 150px; top: -25px;}

#example .system-list{ width: 1100px; margin: 0 auto 30px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;justify-content: center;}
#example .system-list li{ line-height: 1.4; width: 20.3%; margin-right: 2%; background: #fff; position: relative; margin-bottom: 20px; }
#example .system-list li:nth-child(4n){ margin-right: 0}
#example .system-list li a:hover{ text-decoration: none; }
#example .system-pic{ width: 100%; height: 180px; overflow: hidden; text-align: center; margin-bottom: 15px; }
#example .system-pic img{ width: 100%; height: 180px; }
#example .system-date{ font-size: 14px; margin: 0 10px 5px; line-height: 1.4; }
#example .system-ttl-01{ font-size: 16px; line-height: 1.4; margin: 0 10px 10px; text-decoration: underline;}
#example .system-category-set { margin-bottom: 15px; margin-top: -15px;}
#example .system-category{ margin-bottom: 1px; font-size: 14px; font-weight: bold; color: #fff; text-align: center; padding: 8px; background-color: #ccc;}
#example .serchcategory{ margin-bottom: 100px;}
#example .serchcategory .icon { display: inline-block; margin-bottom: 15px; font-size: 0.688em; font-weight: bold; color: #fff; text-align: center; padding: 10px 20px; }
#example .system-category1{margin-bottom: 1px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; padding: 10px 20px; background-color: #ccc; position: relative;}
#example .serchcategory1{ margin-top: 80px; margin-bottom: 30px; width: 920px; margin-left: auto; position: relative; top: -50px}
#example .serchcategory1 .icon {min-width: 120px; display: inline-block; margin-bottom: 15px; margin-right: 30px; font-size: 18px; font-weight: bold; text-align: center; padding: 10px 10px; position: relative; color: #fff; }
#example .serchcategory1 .icon:after{ content: ""; width: 20px; height: 20px; background: url(../images/common/category-icon.png) no-repeat right top; position: absolute; right: -13px; top: 35px; z-index: 1}
#example .icon01{ background: #0D6533; }
#example .icon02{ background: #5D8EAE; }
#example .icon03{ background: #A52A2A; }
#example .icon04{ background: #2C3B6B; }
#example .icon05{ background: #A574A7; }
#example .icon06{ background: #949494; }
#example .icon07{ background: #1F846F; }
#example .icon08{ background: #D66E04; }
#example .icon09{ background: #A87640; }
#example .icon10{ background: #C2B478; }
#example .icon10{ background: #C2B478; }
#example .icon11{ background: #ac9600; }
#example .icon12{ background: #a65683; }
#example .icon13{ background: #097464; }
#example .icon14{ background: #9a2d49; }

#example .categori-btn{ text-align: center; margin-bottom: 80px;}
#example .categori-event-btn{ text-align: center; margin-bottom: 20px;}


}



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

/* example -------------------------------------*/

#example .inner-Box{width: 100%; margin: 0 auto 10vw; background: url(../images/page-common/categori-bg-icon.png) no-repeat top center,url(../images/page-common/categori-bg-icon.png) no-repeat bottom center #F1F1E8; padding: 10vw 0 20vw; background-size: 200%}
#example .inner-Box1{width: 100%; margin: 0 auto; position: relative;}

#example .inner-Box1 .example-ttl1{font-size: 3.8vw; font-weight: bold; text-align: center; margin-bottom: 1vw}
#example .inner-Box1 .example-ttl2{font-size: 5.6vw; font-weight: bold; text-align: center; margin-bottom: 3vw;}
#example .inner-Box1 .example-ttl3{font-size: 3.8vw; font-weight: bold; text-align: center; margin-bottom: 1vw}

#example .inner-Box1 .example-human1{position:absolute;top:3vw;left:5.5vw;width:14vw;}
#example .inner-Box1 .example-human2{position: absolute;top: 2.3vw;right: 4vw;width: 14%;}
#example .inner-Box1 .example-human1-2{position:absolute;top:14.1vw;left:4.5vw;width:13vw;}

#example .inner-Box1 .example-human2-2{position: absolute;top: 13vw;right: 4vw;width: 14%;}
#example .inner-Box1 .example-human1-3{position: absolute;top: 12vw;left: 0.5vw;width: 16%;}
#example .inner-Box1 .example-human2-3{position: absolute;top: 16vw;right: 4vw;width: 14%;}

#example .inner-Box1 .example-human3{width: 13vw; position: absolute; left: 5vw; top: 5vw;}
#example .inner-Box1 .example-human4{width: 15vw; position: absolute; right: 5vw; top: 5vw;}

#example .system-list{ padding: 4% 2% 0; margin-bottom: 3vw; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#example .system-list li{ position: relative; line-height: 1.4; width: 46%; margin-right: 2%; margin-left: 2%; background: #fff; position: relative; margin-bottom: 5vw; padding: 0 0 2%;}
#example .system-list li:nth-child(2n){ margin-right: 0}
#example .system-list li a:hover{ text-decoration: none; }
#example .system-list .btn{ text-align: center; background: #333; color: #fff; font-size: 3.2vw; position: absolute; bottom: 0; left: 0; width: 100%; padding:4% 3%;}
#example .system-list .btn::after { content: ' >';}
#example .system-pic{ width: 100%; height: 30vw; overflow: hidden; text-align: center; margin-bottom: 8%; }
#example .system-pic img{ width: 100%; height: 30vw; }
#example .system-date{ font-size: 3.4vw; margin: 0 3% 3%;}
#example .system-ttl-01{ font-size: 3.6vw; margin: 0 3% 5%; line-height: 1.6; text-decoration: underline;}
#example .system-category-set { margin-bottom: 8%;margin-top: -8%;}
#example .system-category{ margin-bottom: 1px; font-size: 3vw; font-weight: bold; color: #fff; text-align: center; padding: 2vw 0; background-color: #ccc;}
#example .serchcategory{ margin: 0 3% 10%;}
#example .serchcategory .icon { display: inline-block;margin-right: 1%;margin-bottom: 3%;font-size: 3.2vw;color: #fff;text-align: center;padding: 4.5% 3%; }
#example .system-category1{margin-bottom: 10%; font-size: 3.6vw; font-weight: bold; color: #fff; text-align: center; padding: 1vw 3vw; background-color: #ccc; position: relative;}
#example .serchcategory1{ width: 90%; margin: 0 auto 10%; position: relative; top: 5vw}
#example .serchcategory1 .icon { color: #fff; width: 45%; display: inline-block; margin-bottom: 3vw; margin-right: 3vw; font-size: 3.6vw; font-weight: bold; text-align: center; padding: 2vw 0; position: relative;}
#example .serchcategory1 .icon:after{ content: ""; width: 20vw; height: 20vw; background: url(../images/common/category-icon.png) no-repeat right top; position: absolute; right: -1vw; top: 5vw; z-index: 1}
#example .icon01{ background: #0D6533; }
#example .icon02{ background: #5D8EAE; }
#example .icon03{ background: #A52A2A; }
#example .icon04{ background: #2C3B6B; }
#example .icon05{ background: #A574A7; }
#example .icon06{ background: #949494; }
#example .icon07{ background: #1F846F; }
#example .icon08{ background: #D66E04; }
#example .icon09{ background: #A87640; }
#example .icon10{ background: #C2B478; }
#example .icon10{ background: #C2B478; }
#example .icon11{ background: #ac9600; }
#example .icon12{ background: #a65683; }
#example .icon13{ background: #097464; }
#example .icon14{ background: #9a2d49; }

#example .categori-btn{ width: 80vw; margin: 0 auto 8vw;}
#example .categori-event-btn{ width: 80vw; margin: 0 auto 5vw;}

}