@charset "UTF-8";
/* トグルボタン */
#togglenav {
  display: none;
}
#togglenav:checked + .togglenav-btn {
  background-color: #18CBDB;
  border-radius: 50%;
}
#togglenav:checked + .togglenav-btn:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f00d";
  font-weight: 900;
  font-size: 2em;
}
#togglenav:checked ~ .togglenav-bg {
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.3);
}
.togglenav-btn {
  cursor: pointer;
  position: fixed;
  top: 18px;
  right: 10px;
  z-index: 2;
  width: 50px;
  height: 50px;
  color: #fff;
  background-color: #18CBDB;
  line-height: 50px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
  border-radius: 3px;
  vertical-align: middle;
}
.togglenav-btn:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f0c9";
  font-weight: 900;
  font-size: 2em;
}
/* トグルを押した際の背景 */
.togglenav-bg {
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 0px;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: background-color .6s;
}
/* ドロワーメニュー */
.drawer {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s;
}
.drawer .drawer-menu {
  margin-top: 0;
  padding: 0;
  list-style-type: none;
    background: white;
}
.drawer .drawer-menu .drawer-menu-item {
  font-size: 14px;
  border-bottom: 1px dotted #ccc;
}
.drawer .drawer-menu .drawer-menu-item a {
  display: block;
  padding: 0.75em 2em;
  text-decoration: none;
  transition: background-color 0.4s;
  cursor: pointer;
  color: #431313;
}
.drawer .drawer-menu .drawer-menu-item a:hover {
  background-color: #18CBDB;
  color: #fff;
}
.drawer .drawer-menu .drawer-menu-item a:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f101";
  font-weight: 900;
  font-size: 1em;
  margin: 0 0.5em 0 0;
}
.drawer h3 {
  margin: 0 auto;
  padding: 1.5em 1em;
  color: white;
  border-bottom: 1px solid white;
  display: flex;
  align-items: center;
 background: #000;
}
.drawer h3 img {
  vertical-align: middle;
  margin-right: 0.25em;
}
#togglenav:checked ~ .drawer {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.contact-box3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5em auto;
}
.MAIL3, .phone3 {
  padding: 1.5em 0.5em;
  text-align: center;
  width: 40%;
  border-radius: 8px;
  font-size: 14px;
}
.MAIL3 {
  background: #000000;
  margin-right: 0.5em;
}
.phone3 {
  background: #EA1579;
}
.MAIL3 a, .phone3 a {
  text-decoration: none;
  color: white;
  display: block;
    cursor: 
}
/*Device: Desk Top*/
@media all and (min-width: 768px) {
}
@media screen and (min-width:768px) {
  .drawer {
    width: 50%;
  }
  .moblie-menu {
    display: block;
  }
}
/*Device: SmartPhone*/
@media screen and (max-width:414px) {
  .drawer {
    width: 100%;
  }
  .togglenav-btn {
    top: 15px;
  }
}