@charset "utf-8";


/* ---------------TOP------------------*/

#visual .visualSlider>li {
 display: none;
}

#visual .slick-slider>li {
 display: block !important;
}

.visualSlider {
 margin: 0 auto;
}

.visualSlider li {
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
}

.visualSlider img {
 max-width: 100%;
 display: block;
 margin: 0 auto;
}

.visualSlider .slick-track {
 line-height: 1;
}

.visualSlider .slick-dots {
 text-align: center;
 margin: 30px 0 0;
 height: 6px;
}

.visualSlider .slick-dots li {
 display: inline-block;
 text-indent: -9999px;
 width: 26px;
 height: 6px;
 background-color: #cccccc;
 margin: 0 8px 0;
 cursor: pointer;
}

.visualSlider .slick-dots li.slick-active {
 background-color: #976b01;
}

#visual {
 width: 100%;
 margin: 0 auto 40px;
}

.bxslider {
 margin: 0 auto;
}

.bxslider li {
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
}

.bxslider2 {
 margin: 0;
 padding: 0;
 width: 100%;
}

#oc .ocSlider>li {
 display: none;
}

#oc .slick-slider>li {
 display: block !important;
}

#oc .ocSlider {
 width: 1024px;
 background-color: #ffffff;
 z-index: 5;
 margin-bottom: 20px;
}

/* スライダー調整 */
#oc .slick-arrow {
 position: absolute;
 top: 50%;
 font-size: 50px;
 transform: translateY(-50%);
 cursor: pointer;
 color: #aaaaaa;
 z-index: 1100;
}

#oc .slick-arrow:hover {
 opacity: 0.7;
}

#oc .fa-angle-left {
 left: -34px;
}

#oc .fa-angle-right {
 right: -34px;
}

#oc .slick-disabled {
 color: #eeeeee;
 cursor: default !important;
 opacity: 1 !important;
}

div.btn {
 text-align: center;
 margin-bottom: 20px;
}

div.btn a {
 background: #976b01;
 display: inline-block;
 color: #fff;
 padding: 10px 25px;
 font-size: 18px;
}

div.btn a:hover {
 text-decoration: none;
 opacity: 0.7;
}


#oc {
  margin-bottom: 40px;
}

#oc h2,
#news h2,
#information h2,
#movie h2 {
  border-bottom: 3px solid #ddd;
  padding-bottom: 8px;
}

#oc h2 a {
  display: block;
  float: right;
  font-size: 16px;
  color: #dd0000;
  padding: 3px 10px;
  transition: 0.2s ease-out;
}

#oc h2 a:before {
  content: "\f0a9";
  font-family: FontAwesome;
  margin-right: 5px;
}

#oc h2 a:hover {
  text-decoration: none;
  opacity: 0.7;
}

#oc h3 {
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #231815;
  display: flex;
  justify-content: center;
}

#oc h3 span {
  display: block;
  font-weight: normal;
}

span.taiken {
  color: #fff;
  background-color: #f4807a;
  padding: 8px 16px;
}

span.setsumei {
  color: #FFF;
  background-color: #54c5d0;
  padding: 8px 16px;
}

#oc dl {
  margin-bottom: 20px;
}

#oc dl dt {
  width: 6em;
  display: inline-block;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  margin-right: 10px;
}

#oc dl dd {
  display: inline-block;
  padding: 5px 0;
  margin-right: 20px;
}


#oc .ocSlider .slide {
  position: relative;
}

#oc .ocSlider .slide .inner {
  position: relative;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 12px;
}
#oc .ocSlider .slide .inner > a {
  display: block;
}
#oc .ocSlider .slide img {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  max-width: 100%;
  transition: all 0.2s ease;
}
#oc .ocSlider .slide .inner > a:hover img {
  opacity: 0.8;
}

#oc .ocSlider .slide h3 {
  margin-top: 5px;
  margin-bottom: 10px;
  color: #231815;
  font-size: 18px;
}

#oc .ocSlider .slide .date {
  display: block;
  z-index: 100;
  left: 0;
  top: 10px;
  color: #231815;
  border-bottom: 1px solid #231815;
  font-size: 16px;
  line-height: 1.3;
  padding: 6px 0;
}

#oc .ocSlider .slide .date.special {
  color: #dd0000;
  border-bottom: 1px solid #dd0000;
}


#oc .ocSlider .slide .point {
  position: absolute;
  right: 12px;
  top: 12px;
  display: inline-block;
  background: #ffee00;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#oc .ocSlider .slide .present {
  display: inline-block;
  background: #ceff57;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#oc .ocSlider .slide .collabo {
  display: inline-block;
  background: #ffcfbf;
  color: #000;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#oc .ocSlider .slide .miya {
  display: inline-block;
  background: #000;
  z-index: 100;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#oc .ocSlider .slide .christmas {
  display: inline-block;
  background: #febfcd;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#oc .ocSlider .slide .valentine {
  display: inline-block;
  background: #febfcd;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#oc .ocSlider .slide a {
  font-weight: bold;
}

#oc .ocSlider .slide p {
  font-size: 15px;
  margin-bottom: 0.5em;
}

#oc .ocSlider .slide p a {
  background-color: #976B01;
  color: #fff;
  padding: 4px;
  text-align: center;
  display: block;
  font-weight: normal;
}

#oc .ocSlider .slide p a:hover {
  text-decoration: none;
  opacity: 0.7;
}


#information {
 width: 490px;
 float: left;
 margin-bottom: 40px;
}

#information dl {
 border-bottom: 1px dotted #ddd;
 margin-bottom: 5px;
}

#information dl dt {
 width: 7em;
 float: left;
 padding-bottom: 5px;
}

#information dl dd {
 margin-left: 7em;
 padding-bottom: 5px;
}

#movie {
 width: 490px;
 float: right;
 margin-bottom: 40px;
}

.youtube {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 overflow: hidden;
 margin-bottom: 10px;
}

.youtube iframe {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

#movie a {
 background: #976b01;
 display: block;
 color: #fff;
 font-weight: bold;
 padding: 7px 20px;
 font-size: 16px;
 text-align: center;
}

#news {
 margin-bottom: 40px;
}

#news .news {
 width: 490px;
 float: right;
}

#news .blog {
 width: 490px;
 float: left;
}

#news ul li {
 clear: both;
 margin-bottom: 20px;
}

#news ul li img {
 float: left;
 margin-right: 15px;
}

#news ul li a {
 font-weight: bold;
}

#news ul li .thumb {
 width: 80px;
 height: 80px;
 overflow: hidden;
 float: left;
 margin-right: 15px;
}

#news ul li:after {
 clear: both;
 content: ' ';
 display: block;
 font-size: 0;
 line-height: 0;
 visibility: hidden;
 width: 0;
 height: 0
}

.last {
 text-align: right;
 padding: 5px 0;
}

.last i {
 color: #976b01;
}

#bnr {}

#bnr ul li {
 margin-bottom: 20px;
}

#bnr ul li:nth-child(odd) {
 width: 490px;
 float: left;
}

#bnr ul li:nth-child(even) {
 width: 490px;
 float: right;
}

#bnr ul li.bn-restaurant {
 position: relative;
}

span.month {
 color: #F7931E;
 font-family: Arial, Helvetica, "sans-serif";
 font-size: 32px;
 font-weight: bold;
 position: absolute;
 z-index: 10;
 top: 50px;
 right: 65px;
}

span.day {
 color: #F7931E;
 font-family: Arial, Helvetica, "sans-serif";
 font-size: 50px;
 font-weight: bold;
 position: absolute;
 z-index: 10;
 top: 44px;
 right: 15px;
}

span.week {
 color: #fff;
 font-family: Arial, Helvetica, "sans-serif";
 font-size: 14px;
 font-weight: bold;
 position: absolute;
 z-index: 10;
 top: 82px;
 right: 38px;
}

#bnr .bnr1 {
 width: 490px;
 float: left;
}

#bnr .bnr2 {
 width: 490px;
 float: right;
}

#bnr img {
 border: 1px solid #ddd;
}

#bnr a:hover img {
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/*-------------------------CONTENT-----------------------*/
#main table {
 width: 100%;
 border: 1px solid #ccc;
 border-collapse: collapse;
 background: #fff;
 margin-bottom: 40px;
}

#main table th,
#main table td {
 padding: 8px 8px;
 border: 1px solid #ccc;
}

#main table th {
 text-align: left;
 vertical-align: middle;
 font-weight: bold;
 background: #f6f6f6;
}

#main table td {
 vertical-align: top;
}

#main ol {
 margin-left: 1.2em;
 list-style: decimal;
}

#title {
 width: 100%;
 background: #976b01;
 color: #fff;
 margin-bottom: 30px;
}

#title h1 {
 width: 1024px;
 display: block;
 margin: 0 auto;
 font-size: 36px;
 padding: 40px 0;
 line-height: 36px;
 font-weight: bold;
}

#title h1 span {
 font-size: 16px;
 margin-left: 20px;
 line-height: 36px;
 display: inline-block;
}

.floatleft {
 float: left;
}

.floatright {
 float: right;
}

.contentBox {
 padding: 20px 25px;
 background: #fff;
 border-radius: 5px;
 margin-bottom: 20px;
}

.block {
 margin-bottom: 20px;
}

.aligncenter {
 text-align: center;
}

.alignleft {
 text-align: left
}

.alignright {
 text-align: right;
}

a.button {
 display: inline-block;
 background: #976b01;
 text-align: center;
 padding: 10px 20px;
 border-radius: 8px;
 color: #fff !important;
 margin: 0 auto;
 font-size: 16px;
}

a.button img {
 vertical-align: middle;
 margin-right: 10px;
 width: auto !important;
}

a.button:hover {
 background: #366f89;
 text-decoration: none;
}

.red {
 color: #B81C22;
}

.content div {
 padding: 20px 0;
}

#map1,
#map2 {
 width: 100%;
 height: 240px;
}

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.video-container video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.play {
 display: block;
 width: 64px;
 height: 64px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 cursor: pointer;
 z-index: 10;
}

h1.pagetitle {
 display: none;
}

.link li {
 margin-left: 1em;
}

.link li:before {
 font-family: FontAwesome;
 content: "\f101";
 margin-right: 5px;
}

#main section {
 margin-bottom: 60px;
}

#pageheader {
 padding: 0;
 position: relative;
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 position: relative;
 margin-bottom: 40px;
 min-width: 980px;
 overflow: hidden;
}

#pageheader::after {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.4);
}

#pageheader img {
 max-width: 100%;
 min-width: 1280px;
 margin: 0 auto;
}

#pageheader .pageheaderinner {
 width: 100%;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 10;
}

#pageheader .pagetitle {
 display: inline-block;
}

#pageheader h1 {
 color: #fff;
 font-size: 48px;
 line-height: 1.35;
 font-weight: bold;
 margin-bottom: 10px;
 text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
}

#pageheader h1 span {
 font-size: 60%;
 display: block;
}

#pageheader p {
 color: #fff;
 font-size: 14px;
 font-weight: bold;
}

#opencampus {
 margin-bottom: 40px;
}

#opencampus h3 {
 font-size: 18px;
 margin-bottom: 5px;
 font-weight: bold;
}

#opencampus ul {
 margin-bottom: 40px;
 border-top: 1px dashed #999;
}

#opencampus ul li {
 position: relative;
 padding: 30px 0;
 border-bottom: 1px dashed #999;
 display: flex;

}

#opencampus ul li img {
 max-width: 100%;
 border: 1px solid #ddd;
}

#opencampus ul li .photo {
 width: 320px;
 margin-right: 30px
}

#opencampus ul li .text {
 width: 670px;
}

#opencampus ul li p.label {
 margin-bottom: 15px;
}

#opencampus ul li .date {

  display: block;
  z-index: 100;
  left: 0;
  top: 10px;
  color: #231815;
  border-bottom: 1px solid #231815;
  font-size: 16px;
  line-height: 1.3;
  padding: 6px 0;
}
#opencampus ul li .date.special {
  color: #dd0000;
  border-bottom: 1px solid #dd0000;
}


#opencampus ul li .point {
  display: inline-block;
  background: #ffee00;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#opencampus ul li .present {
  display: inline-block;
  background: #ceff57;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#opencampus ul li .collabo {
  display: inline-block;
  background: #ffcfbf;
  color: #000;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#opencampus ul li .miya {
  display: inline-block;
  background: #000;
  z-index: 100;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#opencampus ul li .christmas {
  display: inline-block;
  background: #febfcd;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}

#opencampus ul li .valentine {
  display: inline-block;
  background: #febfcd;
  z-index: 100;
  color: #000;
  font-size: 14px;
  line-height: 1.3;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
}


#opencampus ul li h3 {
 font-size: 20px;
 margin-bottom: 15px;
}

#opencampus ul li p.link {
text-align: center;  
}
#opencampus ul li p.link a {
  font-weight: bold;
  background-color: #976b01;
  color: #fff;
  padding: 6px 16px;
  display: inline-block;
}

#opencampus ul li p {
 margin: 0 0 15px;
 padding: 0;
}

#opencampus ul li .thumb1 {
 width: 170px;
 position: absolute;
 right: 60px;
 top: 30px;
}

#opencampus ul li .thumb2 {
 width: 170px;
 position: absolute;
 right: 0;
 top: 130px;
}


#opencampus .leftbox {
 width: 42%;
 float: left;
}

#opencampus .rightbox {
 width: 54%;
 float: right;
}

#opencampus .order {
 padding: 20px;
 background: #f7f0eb;
}

#opencampus .order .item {
 width: 33%;
 float: left;
 text-align: center;
 font-size: 18px;
}

#opencampus a.btn {
 background: #976b01;
 display: inline-block;
 color: #fff;
 padding: 5px 20px;
 font-size: 18px;
}

#opencampus a.btn:hover {
 text-decoration: none;
 opacity: 0.7;
}

#opencampus .order .item h3 {
 margin-bottom: 10px;
}

#opencampus .order .item span {
 font-size: 24px;
 font-weight: bold;
}

#calendar {
 margin-bottom: 40px;
}

#calendar table {
 border: none;
 border-collapse: separate;
 border-spacing: 2px;
}

#calendar table caption,
#calendar .calendarTitle {
 font-size: 21px;
 font-weight: bold;
 background: #eee;
 padding: 8px 0;
}

#calendar .calendarHeader {
 background: #eee;
 padding: 8px 0;
}

#calendar table th {
 text-align: center;
 border: none;
}

#calendar table td {
 border: none;
 font-size: 13px;
 line-height: 1.3;
 width: 14.28%;
 text-align: center;
 min-height: 3em;
 background-color: #FAFAFA
}

#calendar table td a {
 display: block;
 line-height: 1.3;
 background: #976b01;
 padding: 4px 2px;
 border-radius: 6px;
 margin: 3px 0;
 color: #fff;
}

#calendar table td a:hover {
 text-decoration: none;
 opacity: 0.7;
}

#calendar table td span {
 display: block;
 height: 1.3em;
}

.youbi_6 {
 color: #C30 !important;
 background-color: #F3FDFF;
}

.youbi_0 {
 color: red !important;
 background-color: #FFEBEB;
}

a.gmap {
 background: #976b01;
 display: inline-block;
 float: right;
 color: #fff;
 padding: 5px 20px;
 font-size: 16px;
 font-weight: bold;
}

a.gmap:hover {
 text-decoration: none;
 opacity: 0.7;
}

/*----------------------------- 学科・コース -------------------------*/

#curriculum {
 margin-bottom: 40px;
}

#curriculum .cur1,
#curriculum .cur3,
#curriculum .cur5,
#curriculum .cur7 {
 width: 48%;
 float: left;
 border-top: 3px solid #ddd;
 padding: 20px 0;
}

#curriculum .cur2,
#curriculum .cur4,
#curriculum .cur6,
#curriculum .cur8 {
 width: 48%;
 float: right;
 border-top: 3px solid #ddd;
 padding: 20px 0;
}

#curriculum h3 {
 text-align: center;
 font-size: 24px;
 color: #444;
 margin-bottom: 8px;
 font-weight: bold;
}

#curriculum h3 span {
 font-size: 32px;
 font-weight: bold;
 font-family: Arial, Helvetica, "sans-serif";
 margin-right: 5px;
}

.cur1 h3 span {
 color: #9DC93A;
}

.cur2 h3 span {
 color: #EE8593;
}

.cur3 h3 span {
 color: #A187BD;
}

.cur4 h3 span {
 color: #93D2DA;
}

.cur5 h3 span {
 color: #F6AD3C;
}

.cur5 h3 span.border {
 border: 1px solid #5e4940;
 color: #5e4940;
 font-size: 18px !important;
 font-weight: lighter;
 padding: 3px 5px;
 vertical-align: 0.1em;
}

.cur5 h3 p {
 display: inline-block;
}

.cur6 h3 span {
 color: #C39043;
}

.cur7 h3 span {
 color: #F29B7E;
}

.cur8 h3 span {
 color: #77C4A1;
}

#curriculum p.label {
 text-align: center;
 margin-bottom: 8px;
}

#curriculum table {
 text-align: center;
 color: #fff;
 border-collapse: collapse;
 border: 1px solid #fff;
 margin-bottom: 1em;
}

#curriculum table td {
 border: 1px solid #fff;
 padding: 3px;
}

.courselist {}

.courselist h3 {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: 0.5em;
}

.courselist ul {
 display: flex;
 justify-content: center;
}

.courselist ul li {
 width: 31%;
 margin: 0 3% 0 0;
}

.courselist ul li:last-child {
 margin: 0;
}

.courselist ul li img {
 max-width: 100%;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.courselist dl dt {
 background: #000;
 color: #fff;
 width: 3em;
 padding: 2px 5px;
 float: left;
 margin-bottom: 5px;
 clear: left;
 text-align: center;
}

.courselist dl dd {
 margin-left: 4.5em;
 margin-bottom: 5px;
}

.courselist dl dd span {
 color: #a17600;
 font-size: 12px;
}

.courselist a.link {
 display: block;
 padding: 5px;
 text-align: center;
 font-weight: bold;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 margin-bottom: 10px;
 border: 1px solid #976b01;
}

.courselist a i {
 color: #976b01;
}

.courselist a:hover {
 background: #976b01;
 color: #fff;
 text-decoration: none;
}

.courselist a:hover i {
 color: #fff;
}

.courseRestaurant {
 text-align: center;
 background: #eadab7;
 padding: 5px;
 font-weight: bold;
 margin-bottom: 0px !important;
}

.courseArrow {
 text-align: center;
 margin-bottom: 0px !important;
 vertical-align: middle;
 font-size: 32px;
}

.coursePlus {
 text-align: center;
 margin-bottom: 0px !important;
 vertical-align: middle;
 color: #A17600;
 font-size: 16px;
 margin-bottom: 5px !important;
}

.courseSkillup {
 color: #b60005;
 text-align: center;
 font-weight: bold;
 margin-bottom: 5px !important;
}

.courseNational1 {
 text-align: center;
 background: #d6b5d5;
 padding: 5px;
 font-weight: bold;
 font-size: 14px;
 margin-bottom: 0px;
}

.courseNational2 {
 text-align: center;
 background: #f7c8ce;
 padding: 5px;
 font-weight: bold;
 font-size: 14px;
 margin-bottom: 0px !important;
}

.courseNational3 {
 text-align: center;
 background: #ed6c00;
 padding: 5px;
 font-weight: bold;
 margin-bottom: 5px !important;
 color: #fff;
 max-width: 65%;
 margin: 0 auto;
}

.courseNational4 {
 text-align: center;
 background: #e95377;
 padding: 5px;
 font-weight: bold;
 margin-bottom: 0px !important;
 color: #fff;
 max-width: 65%;
 margin: 0 auto;
}

.courseNational5 {
 text-align: center;
 background: #e8456c;
 padding: 5px;
 font-weight: bold;
 margin-bottom: 40px !important;
 color: #fff;
 max-width: 65%;
 margin: 0 auto;
}

.courseNational6 {
 text-align: center;
 background: #00873c;
 padding: 5px;
 font-weight: bold;
 margin-bottom: 0px !important;
 color: #fff;
 max-width: 65%;
 margin: 0 auto;
}

.courseNational7 {
 text-align: center;
 background: #00743a;
 padding: 5px;
 font-weight: bold;
 margin-bottom: 40px !important;
 color: #fff;
 max-width: 65%;
 margin: 0 auto;
}

.courseCaution {
 font-weight: normal;
 font-size: 12px;
}

.courseLicence {
 background: #f7f0eb;
 padding: 15px;
 font-size: 13px;
 margin-bottom: 60px;
}

.courseLicence dt {
 float: left;
 width: 6em;
 font-weight: bold;
}

.courseLicence dd {
 margin-left: 8em;
}

.copy1 {
 font-size: 21px;
 text-align: center;
 font-weight: bold;
 color: #9d8200;
}

.courseTitle {
 margin-bottom: 40px;
}

.courseTitle--02 {
 margin-bottom: 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.courseTitle--caution {
 margin-bottom: 10px;
 display: flex;
}

p.courseTitle--caution-txt {
 font-size: 0.8em;
 line-height: 1.4;
 color: #747474;
}

#course1 {
 background: #9DC93A;
}

#course2 {
 background: #EE8593;
}

#course3 {
 background: #A187BD;
}

#course4 {
 background: #93D2DA;
}

#course5 {
 background: #F6AD3C;
}

#course6 {
 background: #C39043;
}

#course7 {
 background: #F29B7E;
}

.courseTitle .photo {
 float: right;
 width: 480px;
}

.courseTitle--02 .photo {
 float: none;
 width: 50%;
}

.courseTitle--02 .inner {
 position: relative;
 z-index: 50;
 width: 50%;
 padding: 20px;
}

.courseTitle--02 .inner-bg {
 width: 100%;
 position: absolute;
 z-index: 0;
 /* background: #000;
 mix-blend-mode: multiply;
 opacity: .1; */
 height: 100%;
 top: 50%;
 left: 0%;
 transform: translateY(-50%);
 border-top: solid #fff 1px;
 border-bottom: solid #fff 1px;
}

.courseTitle--02 .inner-bg::before {
 content: "";
 position: absolute;
 height: 105%;
 width: 100%;
 border-top: solid #fff 1px;
 border-bottom: solid #fff 1px;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}

.courseTitle .text {
 padding: 20px 15px 10px 25px;
 float: left;
 width: 490px;
 color: #fff;
 font-size: 13px;
}

.courseTitle--02 .text {
 padding: 0 0 !important;
 float: none;
 width: 490px;
 width: 100% !important;
 color: #fff !important;
 font-size: 13px;
 position: relative;
 z-index: 50;
}

.courseTitle--02 .bg-white {
 background: #fff;
 padding: 0 20px;
}

.courseTitle .text .label {
 font-size: 16px;
}

.courseTitle .photo img {
 max-width: 100%;
}

.courseSenko {
 margin-bottom: 20px;
}

.courseSenko ul li {
 width: 23%;
 margin: 0 2.5% 0 0;
 float: left;
 line-height: 1.7;
}

.courseSenko ul li:last-child {
 margin: 0 0 0 0;
}

.courseSenko ul li h3 {
 color: #9d8200;
 border: 1px solid #9d8200;
 text-align: center;
 padding: 3px;
 margin-bottom: 10px;
 font-weight: bold;
}

.courseSenko ul li p {
 font-size: 13px;
}

.courseContent {
 border: 1px solid #9d8200;
 padding: 10px;
 margin-bottom: 40px;
}

.courseShinro {
 margin-bottom: 40px;
}

.courseShinro dt {
 width: 12em;
 float: left;
 background: #9d8200;
 color: #fff;
 text-align: center;
 margin-bottom: 8px;
 padding: 3px 0;
}

.courseShinro dd {
 padding: 3px 0;
 margin-left: 13em;
 margin-bottom: 8px;
}

.coursePoint {
 margin-bottom: 40px;
}

.coursePoint h3 {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: 16px;
}

.coursePoint ul li {
 width: 32%;
 float: left;
 margin: 0 2% 0 0;
}

.coursePoint ul li:last-child {
 margin: 0;
}

.coursePoint .point {
 background: #eee;
 color: #9d8200;
 font-weight: bold;
 text-align: center;
 padding: 3px;
 margin-bottom: .5em !important;
}

.courseShisetsu {
 margin-bottom: 40px;
}

.shisetsu1 {
 width: 33%;
 float: left;
 margin-right: 2%;
}

.shisetsu2 {
 width: 33%;
 float: left;
 margin-right: 2%;
}

.shisetsu3 {
 width: 30%;
 float: left;
}


/*----------------------------- 講師紹介 -------------------------*/

#lecturer {
 margin-bottom: 60px;
}

.lecturer {
 margin-bottom: 60px;
}

.lecturer .photo {
 width: 480px;
 float: right;
}

.lecturer .text {
 width: 500px;
 float: left;
}

.lecturer .column2 .photo {
 width: 240px;
}

.lecturer .column2 .text {
 width: calc(100% - 270px);
}

.lecturer .label {
 font-family: "游明朝", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
 color: #c6b08e;
 font-size: 48px;
 line-height: 1.2em;
 margin-bottom: .5em !important;
}

.lecturer .text .copy {
 font-size: 16px;
}

.lecturer .text h3 {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: .5em;
}

.lecturer h4,
#lecturer2 h4 {
 font-size: 13px;
 font-weight: normal;
}

.lecturer .text .profile,
#lecturer2 .profile {
 font-size: 14px;
}

#lecturer2 {
 margin-bottom: 60px;
}
#lecturer2 ul {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
#lecturer2 ul li {
 width: 47.5%;
 margin-bottom: 20px;
}


#lecturer2 ul li .label {
 font-size: 12px;
 line-height: 1.5;
 margin-bottom: .2em !important;
}

#lecturer2 ul li h3 {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: .5em;
}

#lecturer3 {
 margin-bottom: 40px;
}

#lecturer3 ul li {
 width: 32%;
 font-size: 13px;
 line-height: 1.5;
 margin-right: 2%;
 float: left;
 margin-bottom: 20px;
}

#lecturer3 ul li:last-child {
 margin-right: 0;
}

#lecturer3 ul li .label {
 font-size: 11px;
 line-height: 1.5;
 margin-bottom: .2em !important;
}

#lecturer3 ul li h3 {
 font-size: 16px;
 font-weight: bold;
 margin-bottom: .5em;
 margin-left: 90px;
}

#lecturer3 ul li div {
 margin-bottom: 10px;
}

#lecturer3 ul li .photo {
 float: left;
 width: 80px;
}

#lecturer3 ul li p {
 margin-left: 90px;
}

.teacher {
 margin-bottom: 40px;
}

.teacher ul {
 display: flex;
 flex-wrap: wrap;
 margin-right: -20px;
}

.teacher ul li {
 width: calc(25% - 20px);
 margin: 0 20px 20px 0;
 display: flex;
 flex-wrap: wrap;
}

.teacher ul li .photo {
 width: 60px;
 margin-right: 10px;
}

.teacher ul li .text {
 width: calc(100% - 70px);
}

.teacher ul li .text .name {
 font-size: 15px;
 font-weight: bold;
 margin-bottom: 0.4em !important;
}

.teacher ul li .text h5,
.teacher ul li .text .name span {
 font-size: 12px;
 font-weight: normal;
 line-height: 1;
}

.teacher ul li .text .read {
 font-size: 12px;
 line-height: 1.5;
}

.column2 {
 margin-bottom: 40px;
}

.column2 ul li {
 width: 47.5%;
 float: left;
 position: relative;
}

.column2 ul li:first-child {
 margin-right: 5%;
}

.column2 ul li span.label {
 display: inline-block;
 position: absolute;
 z-index: 10;
 left: 10px;
 bottom: 10px;
 background: rgba(0, 0, 0, 0.7);
 color: #fff;
 padding: 3px 6px;
 font-size: 13px;
}

.column3 {
 margin-bottom: 40px;
}

.column3 ul li {
 width: 32%;
 float: left;
 position: relative;
 margin-right: 2%;
 margin-bottom: 10px;
}

.column3 ul li:last-child {
 margin-right: 0;
}

.column4 {
 margin-bottom: 40px;
}

.column4 ul li {
 width: 22%;
 float: left;
 position: relative;
 margin-right: 4%;
}

.column4 ul li:last-child {
 margin-right: 0;
}

.column4 ul li span.label {
 display: inline-block;
 position: absolute;
 z-index: 10;
 left: 10px;
 bottom: 10px;
 background: rgba(0, 0, 0, 0.7);
 color: #fff;
 padding: 3px 6px;
 font-size: 13px;
}

.bxslider3 li {
 position: relative;
}

.bxslider3 li span.label {
 display: inline-block;
 position: absolute;
 z-index: 10;
 left: 10px;
 bottom: 10px;
 background: rgba(0, 0, 0, 0.7);
 color: #fff;
 padding: 3px 6px;
 font-size: 13px;
}

.job {
 font-size: 13px;
}

.job i {
 color: #a17600;
}

h3.jobSupport {
 font-size: 18px;
 font-weight: bold;
 background: #fdeff5;
 line-height: 1.8;
 margin-bottom: .5em;
}

h3.jobSupport span {
 display: inline-block;
 background: #000;
 color: #fff;
 padding: 5px 10px;
 font-size: 16px;
 margin-right: 10px;
}

.naitei li {
 background: #eee;
}

.naitei li h3 {
 text-align: center;
 font-size: 12px;
}

.naitei li p {
 text-align: center;
 font-size: 16px;
 margin-bottom: 10px !important;
}

.naitei li p span {
 font-size: 12px;
}

.naitei li p img {}

.interview {
 margin-bottom: 40px;
}

.interview .photo {
 float: right;
 width: 210px;
}

.interview .text {
 float: left;
 width: 750px;
}

.interview .text h3 {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: .5em;
 color: #976b01;
}

.pdf {
 text-align: center;
}

.pdf a {
 display: block;
 background: #976b01;
 color: #fff;
 font-weight: bold;
 padding: 15px 0;
 line-height: 1;
 text-align: center;
}

.pdf a:hover {
 text-decoration: none;
 opacity: 0.8;
}

.privacy {
 margin-left: 1.5em;
 list-style: square;
}

.restPoint li {
 position: relative;
}

.restPoint img.point {
 border-radius: 100%;
}

.restPoint img.day {
 border-radius: 10px;
}

.restPoint p.time {
 margin-bottom: 0px !important;
}

.restPoint h3 {
 font-size: 17px;
 font-weight: bold;
 margin-top: 0;
 margin-bottom: .5em;
}

.restPoint span {
 font-family: Arial, Helvetica, "sans-serif";
 font-size: 18px;
 padding: 2px 8px;
 position: absolute;
 background: #fff;
 top: 10px;
}

#mapid {
 position: relative;
 width: 100%;
 height: 0;
 padding-top: 50%;
 margin-bottom: 20px;
}

#mapid iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

#panoid {
 width: 100%;
 height: 300px;
 margin-bottom: 40px;
 background: #eee;
}

#aplicationTab {
 margin-bottom: 40px;
}

#aplicationTab li {
 width: 25%;
 float: left;
 text-align: center;
}

#aplicationTab li a {
 display: block;
 padding: 8px 0;
 background: #eee;
 transition-duration: .3s;
}

#aplicationTab li a:hover {
 text-decoration: none;
 background: #000;
 color: #fff;
}

#aplicationTab li a.active {
 background: #976b01;
 color: #fff;
}

h3.application {
 font-size: 18px;
 margin-bottom: 5px;
 font-weight: bold;
}

#main table.tb2 th {
 width: 7em;
}

dl.application {
 margin-bottom: 40px;
}

dl.application dt {
 width: 13em;
 float: left;
 clear: right;
 font-weight: bold;
 margin-bottom: 10px;
}

dl.application dd {
 margin-left: 14em;
 margin-bottom: 10px;
}

table.tb2 th {
 width: 10em !important;
}

.tab {
 overflow: hidden;
}

.tab li {
 padding: 8px 0;
 width: 20%;
 float: left;
 cursor: pointer;
 text-align: center;
 background: #eee;
 color: #000;
 transition-duration: .3s;
}

.tab li:hover {
 background: #000;
 color: #fff;
}

.tab li.select {
 background: #976b01;
 color: #fff;
}

.hide {
 display: none;
}

/* --- 募集要項 --- */
#main.loan table th {
 text-align: center;
}

#main table.inner-table {
 border: none;
}

#main table.inner-table th,
#main table.inner-table td {
 background: #fff;
 padding: 4px 4px;
 border-left: none;
 border-right: none;
 border-bottom: 1px dashed #cccccc;
 border-top: 0;
 vertical-align: baseline;
 text-align: right;
}

#main table.inner-table th {
 font-weight: normal;
}

#main table.inner-table td span {
 white-space: inherit;
 font-size: 0.8em;
 line-height: 1.2;
}

/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 640px) {

 #visual {
  width: auto;
  margin: 0px auto 20px;
 }

 .bxslider #start {
  padding: 50px 15px 0;
  height: 200px;
  font-size: 11px;
  line-height: 1.5;
 }

 .bxslider #start h1 {
  font-size: 21px;
  margin: 0 0 20px;
 }

 #main {
  margin: 0 auto 20px;
  width: auto;
  padding: 10px;
  clear: both;
  background: none;
  border: none;
 }

 #main img {
  max-width: 100%;
 }

 #content img {
  max-width: 100%;
 }

 .floatleft,
 .floatright {
  float: none;
 }

 .flick {
  overflow: auto;
  border: 1px solid #eee;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2) inset;
  padding: 40px 10px 10px;
  background: #fff url(../images/flick.png) no-repeat 10px 10px;
 }

 .flick table {
  width: 720px !important;
  font-size: 12px !important;
  -webkit-text-size-adjust: 100%;
 }

 #oc .ocSlider {
  width: auto;
 }

 #oc h2 a {
  float: none;
 }

 #oc .fa-angle-left {
  left: 5px;
 }

 #oc .fa-angle-right {
  right: 5px;
 }

 #information {
  width: auto;
  float: none;
  margin-bottom: 20px;
 }

 #movie {
  width: auto;
  float: none;
  margin-bottom: 20px;
 }

 #news .news {
  width: auto;
  float: none;
  margin-bottom: 20px;
 }

 #news .blog {
  width: auto;
  float: none;
 }

 #bnr ul li {
  margin-bottom: 20px;
 }

 #bnr ul li:nth-child(odd) {
  width: auto;
  float: none;
 }

 #bnr ul li:nth-child(even) {
  width: auto;
  float: none;
 }

 #bnr .bnr1 {
  width: auto;
  float: none;
  margin-bottom: 20px;
 }

 #bnr .bnr2 {
  width: auto;
  float: none;
 }

 #bnr img {
  max-width: 100%;
 }

 #video {
  width: 300px;
  height: 200px;
 }

 #movie2 {
  width: auto;
  margin: 0 auto;
 }

 .boxLeft,
 .boxRight,
 .news .boxLeft,
 .news .boxRight {
  float: none;
  width: auto;
 }

 #profile {
  width: 100%;
  background: #f3f3f3;
 }

 #profile #map {
  float: none;
  width: auto;
  height: 240px;
 }

 #profile .info {
  float: none;
  width: auto;
  padding: 20px 15px 20px;
 }

 #title h1 {
  width: auto;
  display: block;
  margin: 0 auto;
  font-size: 28px;
  padding: 20px 10px;
  line-height: 36px;
  text-align: center;
 }

 #title h1 span {
  font-size: 14px;
  margin-left: 0;
  line-height: 20px;
  margin-top: 5px;
  display: block;
 }

 #content table.mailform th,
 #content table.mailform td {
  display: block;
  width: auto;
 }

 #pageheader {
  min-width: 0;
  overflow: hidden;
  width: 100%;
  height: 200px;
  position: relative;
 }

 #pageheader img {
  max-width: none;
  min-width: 0;
  width: auto;
  height: 100%;
 }

 #pageheader .pageheaderinner {
  padding: 20px 0;
 }

 #pageheader .pagetitle {
  padding: 15px;
  margin: 0 10px;
 }

 #pageheader h1 {
  font-size: 30px;
  margin-bottom: 5px;
 }

 #pageheader h1 span {
  font-size: 13px;
 }

 #pageheader p {
  font-size: 11px;
 }

 #opencampus ul li {
  display: block;
 }

 #opencampus ul li .photo {
  width: auto;
  float: none;
  margin-right: 0;
  margin-bottom: 10px;
 }

 #opencampus ul li .text {
  width: auto;
  float: none;
 }

 #opencampus ul li .thumb1 {
  width: 50%;
  position: static;
  float: left;
  right: 100px;
  top: 15px;
 }

 #opencampus ul li .thumb2 {
  width: 50%;
  position: static;
  float: left;
  right: 10px;
  top: 80px;
 }

 #opencampus .leftbox {
  width: auto;
  float: none;
 }

 #opencampus .rightbox {
  width: auto;
  float: none;
 }

 #opencampus .order .item {
  width: auto;
  float: none;
  margin-bottom: 20px;
 }

 #calendar table {}

 #calendar table td {
  position: relative;
 }

 .courselist ul {
  display: block;
 }

 .courselist ul li {
  width: auto;
  float: none;
  margin: 0 0 20px;
 }

 .courselist ul li:last-child {
  margin: 0;
 }

 .courselist ul li img {
  max-width: 100%;
 }

 .courseTitle--02 {
  flex-direction: column;
 }

 .courseTitle--02 .inner {
  width: 90%;
 }

 .courseTitle--02 .inner-bg {
  width: 100%;
  height: 100%;
  border: none;
 }

 .courseTitle--02 .inner-bg::before {
  display: none;
 }

 .courseTitle .photo {
  width: auto;
  float: none;
 }

 .courseTitle .text {
  padding: 15px;
  width: auto;
  float: none;
 }

 .courseTitle--02 .text {
  padding: 0px !important;
 }

 .courseSenko ul li {
  width: auto;
  float: none;
  margin: 0;
 }

 .courseShinro dt {
  width: auto;
  float: none;
 }

 .courseShinro dd {
  margin-left: 0;
 }

 .coursePoint ul li {
  width: auto;
  float: none;
  margin: 0;
 }

 .lecturer .photo {
  width: auto;
  float: none;
  margin-bottom: 20px;
 }

 .lecturer .text {
  width: auto;
  float: none;
 }

 .lecturer .column2 li:first-child {
  margin: 0 0 40px;
 }

 .lecturer .column2 .text {
  width: 100%;
 }

 .lecturer .column2 .photo {
  margin: 0 auto 20px;
  max-width: 220px;
  width: 100%;
 }
#lecturer2 ul {
	display:block;
}
 #lecturer2 ul {
  width: auto;
  float: none;
  margin-bottom: 20px;
 }
#lecturer2 ul li {
    width: auto;
    margin-bottom: 20px;
}

 #lecturer3 ul li {
  width: auto;
  float: none;
  margin-bottom: 20px;
  margin-right: 0;
 }

 .teacher ul {
  margin-right: -10px;
 }

 .teacher ul li {
  width: calc(50% - 10px);
  margin: 0 10px 20px 0;
  display: inline-block;
 }

 .teacher ul li .photo {
  float: left;
 }

 .teacher ul li .text {
  width: 100%;
 }

 .column2 ul li {
  width: auto;
  float: none;
  margin-bottom: 10px;
 }

 .column2 ul li:first-child {
  margin-right: 0;
 }

 .column3 ul li {
  width: auto;
  float: none;
  margin-right: 0;
  margin-bottom: 0;
 }

 .column4 {
  margin-bottom: 0;
 }

 .column4 ul li {
  width: 47.5%;
  float: left;
  position: relative;
  margin-bottom: 15px;
 }

 .column4 ul li:nth-child(odd) {
  margin-right: 5%;
 }

 .column4 ul li:nth-child(even) {
  margin-right: 0;
 }

 #curriculum .cur1,
 #curriculum .cur3,
 #curriculum .cur5,
 #curriculum .cur7 {
  width: auto;
  float: none;
 }

 #curriculum .cur2,
 #curriculum .cur4,
 #curriculum .cur6,
 #curriculum .cur8 {
  width: auto;
  float: none;
 }

 .cur5 h3 {
  line-height: 1.4;
 }

 a.gmap {
  float: none;
  margin-bottom: 10px;
 }

 #mapid {
  width: 100%;
  height: 240px;
 }

 #panoid {
  width: 100%;
  height: 180px;
 }

 #aplicationTab li {
  display: block;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #fff;
 }

 #aplicationTab li a {
  padding-left: 10px;
 }

 dl.application {
  margin-bottom: 40px;
 }

 dl.application dt {
  width: auto;
  float: none;
  clear: right;
  font-weight: bold;
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 3px;
 }

 dl.application dd {
  margin-left: 0;
  margin-bottom: 20px;
 }

 table.tb2 th {
  width: auto !important;
 }

 table.tb2 th,
 table.tb2 td {
  display: block;
  width: auto !important;
 }

 .tab li {
  width: 100%;
  border-bottom: 1px solid #fff;
  line-height: 1.5;
  font-size: 13px;
  text-align: left;
  padding-left: 10px;
 }

 .scroll_table {
  overflow: auto;
 }

 .scroll_table>table {
  width: 800px !important;
 }
}

/*----------------------------- 学校の特徴 -------------------------*/
#about h2 {
 margin: 0 auto;
 max-width: 750px;
}

#about h2 img {
 width: 100%
}

#about ul.inner {
 display: flex;
 flex-wrap: wrap;
 margin: 60px 0;
 column-gap: 40px;
 row-gap: 60px;
}

#about li {
 width: calc(50% - 40px);
 box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
 background: #fff;
 padding: 10px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

#about h3 {
 display: flex;
 align-items: center;
 font-size: 20px;
}

#about li.item--01 h3 {
 color: #ACD057;
}

#about li.item--01 h3 {
 color: #ACD057;
}

#about li.item--02 h3 {
 color: #5DC2D0;
}

#about li.item--03 h3 {
 color: #C0ADD3;
}

#about li.item--04 h3 {
 color: #F9C158;
}

#about li.item--05 h3 {
 color: #F29B7E;
}

#about li.item--06 h3 {
 color: #D7A861;
}

#about li.item--07 h3 {
 color: #8AC88B;
}

#about h3 img {
 width: 90px;
 margin: 10px 0 0 10px;
}

#about li strong {
 color: #7f4f21;
 font-size: 1.1rem;
}

#about li span.red {
 color: #e60012;
 font-weight: bold;
}

#about li span.bold {
 font-weight: bold;
}

#about li .pic img {
 width: 100%;
 object-fit: contain;
 margin-top: auto;
}

@media screen and (max-width: 767px) {
 #about ul.inner {
  margin: 60px 0;
  column-gap: 0px;
  row-gap: 40px;
  justify-content: center;
 }

 #about li {
  width: 90%;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
  background: #fff;
  padding: 10px;
 }
}