@charset "UTF-8";
.zdo_drawer_menu * {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  font: inherit;
  /* font-family: inherit; */
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: left;
  text-decoration: none;
  list-style: none;
}

.zdo_drawer_menu a {
  color: inherit;
  text-decoration: none;
}

.zdo_drawer_menu a:visited {
  color: inherit;
}

.zdo_drawer_menu .zdo_drawer_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
  top: 0;
  left: 0;
}

.zdo_drawer_menu .zdo_drawer_button {
  display: block;
  background: #0078c3;
  border: none;
  padding: 0 5px;
  box-sizing: border-box;
  width: 42px;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001;
  text-align: center;
  outline: none;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar {
  width: 42px;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar1 {
  transform: rotate(36deg);
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar2 {
  opacity: 0;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar3 {
  transform: rotate(-36deg);
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_menu_text {
  display: none;
}

.zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_close {
  display: block;
}

.zdo_drawer_menu .zdo_drawer_bar {
  display: block;
  height: 2px;
  margin: 10px 0;
  transition: all 0.2s;
  transform-origin: 0 0;
}

.zdo_drawer_menu .zdo_drawer_text {
  text-align: center;
  font-size: 10px;
}

.zdo_drawer_menu .zdo_drawer_close {
  letter-spacing: 0.08em;
  display: none;
}

.zdo_drawer_menu .zdo_drawer_menu_text {
  display: block;
}

.zdo_drawer_menu .zdo_drawer_nav_wrapper {
  width: 100%;
  height: 100%;
  transition: all 0.2s;
  transform: translate(100%);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.zdo_drawer_menu .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}

.zdo_drawer_menu.left .zdo_drawer_button {
  right: auto;
  left: 32px;
}

.zdo_drawer_menu.left .zdo_drawer_nav_wrapper {
  transform: translate(-312px);
  right: auto;
  left: 0;
}

.zdo_drawer_menu.left .zdo_drawer_nav_wrapper.open {
  transform: translate(0);
}

/*+++ Default Navigation CSS +++*/

.zdo_drawer_menu .zdo_drawer_nav {
  padding: 0;
}

.zdo_drawer_menu .zdo_drawer_nav .hm_bn {
  width: 95%;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.zdo_drawer_menu .zdo_drawer_nav .hm_bn a {
  width: 48%;
  text-align: center;
}

.zdo_drawer_menu .zdo_drawer_nav .dept {
  width: 100%;
  margin: 0 auto 20px;
}

.zdo_drawer_menu .zdo_drawer_nav .dept li {
  width: 100%;
}

.zdo_drawer_menu .zdo_drawer_nav .dept li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
  font-family: はれのそら明朝, selif;
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(1) a {
  border-right: 5px solid var(--class-kids);
  border-left: 5px solid var(--class-kids);
  background-color: rgba(238, 115, 115, 0.1);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(2) a {
  border-right: 5px solid var(--class-kaigo);
  border-left: 5px solid var(--class-kaigo);
  background-color: rgba(238, 147, 30, 0.1);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(3) a {
  border-right: 5px solid var(--class-ms);
  border-left: 5px solid var(--class-ms);
  background-color: rgba(129, 147, 30, 0.1);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(4) a {
  border-right: 5px solid var(--class-sagyo);
  border-left: 5px solid var(--class-sagyo);
  background-color: rgba(153, 128, 163, 0.1);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(5) a {
  border-right: 5px solid #567d8d;
  border-left: 5px solid #567d8d;
  background-color: rgba(86, 125, 141, 0.1);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(6) a {
  border-right: 5px solid var(--class-japanese);
  border-left: 5px solid var(--class-japanese);
  background-color: rgba(233, 79, 83, 0.1);
}
.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(7) a {
  border-right: 5px solid #1bb8ce;
  border-left: 5px solid #1bb8ce;
  background-color: rgba(27, 184, 206, 0.1);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(1) a span span {
  color: var(--class-kids);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(2) a span span {
  color: var(--class-kaigo);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(3) a span span {
  color: var(--class-ms);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(4) a span span {
  color: var(--class-sagyo);
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(5) a span span {
  color: #567d8d;
}

.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(6) a span span {
  color: var(--class-japanese);
}
.zdo_drawer_menu .zdo_drawer_nav .dept li:nth-of-type(7) a span span {
  color: #1bb8ce;
}

.zdo_drawer_menu .zdo_drawer_nav .dept li a figure {
  width: 20%;
}

.zdo_drawer_menu .zdo_drawer_nav li {
  font-size: 16px;
  margin-bottom: 15px;
}

.zdo_drawer_menu .zdo_drawer_nav dl {
  display: block;
  width: 95%;
  margin: 0 auto 15px;
}

.zdo_drawer_menu .zdo_drawer_nav dl dt {
  width: 100%;
  background-color: #f2f2f2;
  background-image: url(../img/graduate/graduate_bg_02.png);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: auto 100%;
  text-align: center;
  padding: 5px 0;
  position: relative;
}

.zdo_drawer_menu .zdo_drawer_nav dl dt::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid;
  border-color: transparent transparent #fff #fff;
  transform: rotate(-45deg);
  position: absolute;
  top: 15%;
  right: 5%;
  margin: auto;
}

.zdo_drawer_menu .zdo_drawer_nav dl dt.active {
  background-color: #b9e4f7;
  background-image: url(../img/graduate/graduate_bg_01.png);
}

.zdo_drawer_menu .zdo_drawer_nav dl dt.active::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(-45deg);
  position: absolute;
  top: 40%;
  right: 5%;
  margin: auto;
}

.zdo_drawer_menu .zdo_drawer_nav dl dd {
  display: none;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.zdo_drawer_menu .zdo_drawer_nav dl dd ul {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.zdo_drawer_menu .zdo_drawer_nav dl dd ul li {
  width: 48%;
}

.zdo_drawer_nav dl dd ul li.lg_li {
  width: 100%;
}

.zdo_drawer_menu .zdo_drawer_nav dl dd ul li a {
  font-size: 1.4rem;
}

.zdo_drawer_menu .zdo_drawer_nav dl dd ul li a span {
  color: #0078c3;
}

.zdo_drawer_menu .zdo_drawer_nav .ft_bn {
  width: 100%;
  padding: 20px 0;
  background-color: #f2f2f2;
  text-align: center;
}

.zdo_drawer_menu .zdo_drawer_nav .ft_bn .inner_sp {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 5%;
  justify-content: center;
  padding: 0 5%;
}

.zdo_drawer_menu .drower_banner_link {
  display: block;
  margin: 0;
  /*width: 47%;*/
  width: 100%;
}
.zdo_drawer_menu .drower_banner_link img {
  max-width: 100%;
  width: 100%;
}

.zdo_drawer_menu .zdo_drawer_nav #footer {
  background-color: #f2f2f2;
}

.zdo_drawer_menu .zdo_drawer_nav #footer h4 {
  background-color: #0078c3;
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
}

.zdo_drawer_menu .zdo_drawer_nav #footer .inner_sp > a {
  display: block;
  width: 95%;
  margin: auto;
  font-size: 2.8rem;
  text-align: center;
}

.zdo_drawer_menu .zdo_drawer_nav #footer .inner_sp > a span {
  font-size: 1.8rem;
}

.zdo_drawer_menu .zdo_drawer_nav #footer .ex_link {
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: 1px dotted #000;
  padding-top: 20px;
}

/*+++ Default Button Color +++*/

.zdo_drawer_menu .zdo_drawer_button {
  color: #fff;
}

.zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar {
  background-color: #fff;
}

@media all and (min-width: 768px) {
  .zdo_drawer_menu {
    display: none;
  }
}